feat: add component Graphic Renderer (#302)

* feat: Filter of single chart with computed fields * fix: container * feat: add example for filter * fix: change props of gw * fix: ux * fix: ux * fix: ux fix * chore: rename * chore: change ux * fix: temproal parse on car sale dataset * fix: magic number
Kanaries · Jan 24, 2024 · 1523525 · 1523525 · vercel · Jan 24, 2024
1 parent 897faf4
commit 1523525
Show file tree

Hide file tree

Showing 24 changed files with 1,276 additions and 81 deletions.
diff --git a/packages/duckdb-wasm-computation/package.json b/packages/duckdb-wasm-computation/package.json
@@ -15,7 +15,7 @@
  },
  "dependencies": {
  "@duckdb/duckdb-wasm": "^1.28.0",
- "@kanaries-temp/gw-dsl-parser": "^0.1.42-rc2",
+ "@kanaries-temp/gw-dsl-parser": "^0.1.42-rc3",
  "@kanaries/graphic-walker": "0.4.45",
  "apache-arrow": "^13.0.0",
  "nanoid": "^5.0.1"

diff --git a/packages/graphic-walker/package.json b/packages/graphic-walker/package.json
@@ -44,6 +44,7 @@
  "@heroicons/react": "^2.0.8",
  "@kanaries/react-beautiful-dnd": "^0.1.1",
  "@kanaries/web-data-loader": "^0.1.7",
+ "@radix-ui/react-slider": "^1.1.2",
  "@tailwindcss/forms": "^0.5.4",
  "@tanstack/react-virtual": "^3.0.0-beta.68",
  "@types/jest": "^29.5.3",

diff --git a/packages/graphic-walker/src/App.tsx b/packages/graphic-walker/src/App.tsx
@@ -59,6 +59,7 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
  geographicData,
  computationTimeout = 60000,
  spec,
+ chart,
  vlSpec,
  onError,
  } = props;
@@ -92,6 +93,12 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
  }
  }, [spec, vizStore]);
 
+ useEffect(() => {
+ if (chart) {
+ vizStore.importCode(chart);
+ }
+ }, [chart, vizStore]);
+
  useEffect(() => {
  if (vlSpec) {
  const emptyChart = newChart(vizStore.meta, '');
@@ -233,7 +240,12 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
 });
 
 export function VizAppWithContext(props: IVizAppProps & IComputationProps) {
- const { computation, safeMetas, onMetaChange } = useMemo(() => {
+ const { dark, dataSource, computation, onMetaChange, fieldKeyGuard, keepAlive, storeRef, defaultConfig, ...rest } = props;
+ const {
+ computation: safeComputation,
+ safeMetas,
+ onMetaChange: safeOnMetaChange,
+ } = useMemo(() => {
  if (props.dataSource) {
  if (props.fieldKeyGuard) {
  const { safeData, safeMetas } = guardDataKeys(props.dataSource, props.rawFields);
@@ -265,32 +277,9 @@ export function VizAppWithContext(props: IVizAppProps & IComputationProps) {
 
  return (
  <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
- <VizStoreWrapper
- onMetaChange={onMetaChange}
- meta={safeMetas}
- keepAlive={props.keepAlive}
- storeRef={props.storeRef}
- defaultConfig={props.defaultConfig}
- >
+ <VizStoreWrapper onMetaChange={safeOnMetaChange} meta={safeMetas} keepAlive={keepAlive} storeRef={storeRef} defaultConfig={defaultConfig}>
  <FieldsContextWrapper>
- <VizApp
- darkMode={darkMode}
- enhanceAPI={props.enhanceAPI}
- i18nLang={props.i18nLang}
- i18nResources={props.i18nResources}
- themeKey={props.themeKey}
- toolbar={props.toolbar}
- computation={computation}
- computationTimeout={props.computationTimeout}
- channelScales={props.channelScales}
- geoList={props.geoList}
- geographicData={props.geographicData}
- onError={props.onError}
- spec={props.spec}
- vlSpec={props.vlSpec}
- themeConfig={props.themeConfig}
- experimentalFeatures={props.experimentalFeatures}
- />
+ <VizApp darkMode={darkMode} computation={safeComputation} {...rest} />
  </FieldsContextWrapper>
  </VizStoreWrapper>
  </div>