docs: wrap 1st pass on docs for geoms

.prettierignore

@@ -0,0 +1 @@
+*.mdx

docs/.eslintrc.json

@@ -1,9 +1,5 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    // "airbnb",
-    // "airbnb-typescript"
-  ],
+  "extends": ["next/core-web-vitals"],
   "rules": {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
@@ -18,4 +14,4 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   }
-}
+}

docs/components/demo/geoms/geom-hline/Basic.tsx

@@ -0,0 +1,32 @@
+import dependencies from '#/input/geom-hline/build/dependencies'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const src = `import { GG } from '@graphique/graphique';
+import { penguins } from '@graphique/datasets';
+import { GeomHLine } from '@graphique/geom-hline';
+
+const App = () => (
+  <div style={{ marginTop: 25 }}>
+  <GG
+    data={penguins.filter((d) => d.species === 'Chinstrap')}
+    aes={{
+      x: (d) => d.beakLength,
+      y: (d) => d.flipperLength,
+    }}
+    margin={{ left: 45 }}
+    isContainerWidth
+  >
+    <GeomHLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
+  </GG>
+  </div>
+);`
+
+export const Basic = () => (
+  <CodeEditor
+    src={src}
+    additionalDeps={dependencies}
+    additionalFiles={additionalFiles}
+    height={480}
+  />
+)

docs/components/demo/geoms/geom-hline/Data.tsx

@@ -0,0 +1,53 @@
+import dependencies from '#/input/geom-hline/build/dependencies'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const src = `import { GG, Labels, LegendOrientation } from '@graphique/graphique';
+import { penguins, type Penguin } from '@graphique/datasets';
+import { GeomPoint, Legend } from '@graphique/geom-point';
+import { GeomHLine } from '@graphique/geom-hline';
+import { flatRollup, median } from 'd3-array';
+
+const measurement: keyof Penguin = 'flipperLength';
+
+const medians = flatRollup(
+  penguins,
+  (values) => median(values, (d) => d[measurement]),
+  (d) => d.species,
+).map(([key, value]) => ({
+  species: key,
+  [measurement]: value,
+}));
+
+const App = () => (
+  <GG
+    data={penguins}
+    aes={{
+      x: (d) => d.beakLength,
+      y: (d) => d[measurement],
+      fill: (d) => d.species,
+      stroke: (d) => d.species,
+    }}
+    isContainerWidth
+    margin={{ left: 45 }}
+  >
+    <GeomPoint
+      attr={{ fillOpacity: 0.3, strokeOpacity: 0.4 }}
+      showTooltip={false}
+    />
+    <GeomHLine
+      data={medians}
+      attr={{ strokeDasharray: '5,2' }}
+    />
+    <Labels header={<Legend orientation={LegendOrientation.H} />} />
+  </GG>
+);`
+
+export const Data = () => (
+  <CodeEditor
+    src={src}
+    additionalDeps={dependencies}
+    additionalFiles={additionalFiles}
+    height={486}
+  />
+)

docs/components/demo/geoms/geom-hline/additionalFiles.ts

@@ -0,0 +1,36 @@
+import geom from '#/input/geom-hline/build?raw'
+import dts from '#/input/geom-hline/build/dts'
+import geomPoint from '#/input/geom-point/build?raw'
+
+const [PKG_1, PKG_2] = ['geom-hline', 'geom-point']
+
+export const additionalFiles = {
+  // dependency for PKG_1
+  [`/node_modules/@graphique/${PKG_2}/package.json`]: {
+    hidden: true,
+    code: JSON.stringify({
+      name: `@graphique/${PKG_2}`,
+      main: './index.js',
+    }),
+  },
+  [`/node_modules/@graphique/${PKG_2}/index.js`]: {
+    hidden: true,
+    code: geomPoint,
+  },
+  [`/node_modules/@graphique/${PKG_1}/package.json`]: {
+    hidden: true,
+    code: JSON.stringify({
+      name: `@graphique/${PKG_1}`,
+      main: './index.js',
+      types: './index.d.ts',
+    }),
+  },
+  [`/node_modules/@graphique/${PKG_1}/index.js`]: {
+    hidden: true,
+    code: geom,
+  },
+  [`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
+    hidden: true,
+    code: dts,
+  },
+}

docs/components/demo/geoms/geom-hline/index.ts

@@ -0,0 +1,2 @@
+export * from './Basic'
+export * from './Data'

docs/components/demo/geoms/geom-label/Basic.tsx

@@ -0,0 +1,43 @@
+import dependencies from '#/input/geom-label/build/dependencies'
+import { useTheme } from 'nextra-theme-docs'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const getSrc = (isDark: boolean) => `import {
+  GG, Labels, BrushAction, LegendOrientation,
+} from '@graphique/graphique';
+import { penguins } from '@graphique/datasets';
+import { GeomLabel, Legend } from '@graphique/geom-label';
+
+const App = () => (
+  <GG
+    data={penguins}
+    aes={{
+      x: (d) => d.beakLength,
+      y: (d) => d.flipperLength,
+      fill: (d) => d.species,
+      label: (d) => d.species,
+    }}
+    margin={{ left: 45 }}
+    isContainerWidth
+  >
+    <GeomLabel brushAction={BrushAction.ZOOM} attr={{ stroke: '${
+      isDark ? '#111' : '#fafafa'
+    }' }} />
+    <Labels header={<Legend orientation={LegendOrientation.H} />} />
+  </GG>
+);`
+
+export const Basic = () => {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
+  return (
+    <CodeEditor
+      src={getSrc(isDark)}
+      height={490}
+      additionalDeps={dependencies}
+      additionalFiles={additionalFiles}
+    />
+  )
+}

docs/components/demo/geoms/geom-label/Data.tsx

@@ -0,0 +1,57 @@
+import dependencies from '#/input/geom-label/build/dependencies'
+import { useTheme } from 'nextra-theme-docs'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const getSrc = (isDark: boolean) => `import {
+  GG, Labels, BrushAction, Tooltip,
+} from '@graphique/graphique';
+import { penguins } from '@graphique/datasets';
+import { GeomLabel } from '@graphique/geom-label';
+import { GeomPoint } from '@graphique/geom-point';
+
+const data = penguins.map((d, i) => ({ ...d, i }));
+const focused = data[123];
+
+const App = () => (
+  <GG
+    data={data}
+    aes={{
+      x: (d) => d.beakLength,
+      y: (d) => d.flipperLength,
+      key: (d) => String(d.i),
+    }}
+    margin={{ left: 45 }}
+    isContainerWidth
+  >
+    <GeomPoint
+      attr={{ fill: '#6aafa3' }}
+      brushAction={BrushAction.ZOOM}
+      focusedKeys={[String(focused.i)]}
+    />
+    <GeomLabel
+      data={[focused]}
+      aes={{ label: () => 'My favorite 🐧' }}
+      attr={{
+        fontSize: '0.9rem',
+        fill: 'currentColor',
+        stroke: '${isDark ? '#111' : '#fafafa'}',
+      }}
+    />
+    <Tooltip content={() => null} />
+  </GG>
+);`
+
+export const Data = () => {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
+  return (
+    <CodeEditor
+      src={getSrc(isDark)}
+      height={454}
+      additionalDeps={dependencies}
+      additionalFiles={additionalFiles}
+    />
+  )
+}

docs/components/demo/geoms/geom-label/additionalFiles.ts

@@ -0,0 +1,36 @@
+import geom from '#/input/geom-label/build?raw'
+import dts from '#/input/geom-label/build/dts'
+import geomPoint from '#/input/geom-point/build?raw'
+
+const [PKG_1, PKG_2] = ['geom-label', 'geom-point']
+
+export const additionalFiles = {
+  // dependency for PKG_1
+  [`/node_modules/@graphique/${PKG_2}/package.json`]: {
+    hidden: true,
+    code: JSON.stringify({
+      name: `@graphique/${PKG_2}`,
+      main: './index.js',
+    }),
+  },
+  [`/node_modules/@graphique/${PKG_2}/index.js`]: {
+    hidden: true,
+    code: geomPoint,
+  },
+  [`/node_modules/@graphique/${PKG_1}/package.json`]: {
+    hidden: true,
+    code: JSON.stringify({
+      name: `@graphique/${PKG_1}`,
+      main: './index.js',
+      types: './index.d.ts',
+    }),
+  },
+  [`/node_modules/@graphique/${PKG_1}/index.js`]: {
+    hidden: true,
+    code: geom,
+  },
+  [`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
+    hidden: true,
+    code: dts,
+  },
+}

docs/components/demo/geoms/geom-label/index.ts

@@ -0,0 +1,2 @@
+export * from './Basic'
+export * from './Data'

docs/components/demo/geoms/geom-vline/Basic.tsx

@@ -0,0 +1,32 @@
+import dependencies from '#/input/geom-vline/build/dependencies'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const src = `import { GG } from '@graphique/graphique';
+import { penguins } from '@graphique/datasets';
+import { GeomVLine } from '@graphique/geom-vline';
+
+const App = () => (
+  <div style={{ marginTop: 25 }}>
+  <GG
+    data={penguins.filter((d) => d.species === 'Chinstrap')}
+    aes={{
+      x: (d) => d.beakLength,
+      y: (d) => d.flipperLength,
+    }}
+    margin={{ left: 45 }}
+    isContainerWidth
+  >
+    <GeomVLine attr={{ stroke: '#6aafa3', strokeWidth: 1 }} />
+  </GG>
+  </div>
+);`
+
+export const Basic = () => (
+  <CodeEditor
+    src={src}
+    additionalDeps={dependencies}
+    additionalFiles={additionalFiles}
+    height={480}
+  />
+)

docs/components/demo/geoms/geom-vline/Data.tsx

@@ -0,0 +1,53 @@
+import dependencies from '#/input/geom-vline/build/dependencies'
+import { CodeEditor } from '../../CodeEditor'
+import { additionalFiles } from './additionalFiles'
+
+const src = `import { GG, Labels, LegendOrientation } from '@graphique/graphique';
+import { penguins, type Penguin } from '@graphique/datasets';
+import { GeomPoint, Legend } from '@graphique/geom-point';
+import { GeomVLine } from '@graphique/geom-vline';
+import { flatRollup, median } from 'd3-array';
+
+const measurement: keyof Penguin = 'beakLength';
+
+const medians = flatRollup(
+  penguins,
+  (values) => median(values, (d) => d[measurement]),
+  (d) => d.species,
+).map(([key, value]) => ({
+  species: key,
+  [measurement]: value,
+}));
+
+const App = () => (
+  <GG
+    data={penguins}
+    aes={{
+      x: (d) => d[measurement],
+      y: (d) => d.flipperLength,
+      fill: (d) => d.species,
+      stroke: (d) => d.species,
+    }}
+    isContainerWidth
+    margin={{ left: 45 }}
+  >
+    <GeomPoint
+      attr={{ fillOpacity: 0.3, strokeOpacity: 0.4 }}
+      showTooltip={false}
+    />
+    <GeomVLine
+      data={medians}
+      attr={{ strokeDasharray: '5,2' }}
+    />
+    <Labels header={<Legend orientation={LegendOrientation.H} />} />
+  </GG>
+);`
+
+export const Data = () => (
+  <CodeEditor
+    src={src}
+    additionalDeps={dependencies}
+    additionalFiles={additionalFiles}
+    height={486}
+  />
+)