@neo4j-ndl/react-charts 1.3.18 → 1.4.0

package/skills/ndl-react-charts/components/charts.md

@@ -1853,6 +1853,285 @@ const Component = () => {
 export default Component;
 ```
 
+### Scatter
+
+```tsx
+import { Chart, type TooltipValueContext } from '@neo4j-ndl/react-charts';
+
+const Component = () => {
+  return (
+    // The Chart component requires its parent to have an explicit height.
+    // Without one the chart canvas collapses to 0px and nothing renders.
+    // You can also check the components documentation by hovering over it.
+    <div
+      style={{
+        border: '1px solid silver',
+        borderRadius: '10px',
+        height: '350px',
+        padding: '20px',
+        width: '100%',
+      }}
+    >
+      <Chart
+        legend={{
+          show: true,
+        }}
+        dataset={[
+          {
+            source: [
+              ['x', 'y', 'label', 'id'],
+              [10, 8.04, 'Checkout', 'A-1'],
+              [8, 6.95, 'Search', 'A-2'],
+              [13, 7.58, 'Catalog', 'A-3'],
+              [9, 8.81, 'Cart', 'A-4'],
+              [11, 8.33, 'Profile', 'A-5'],
+              [14, 9.96, 'Recommendations', 'A-6'],
+              [6, 7.24, 'Login', 'A-7'],
+              [4, 4.26, 'Signup', 'A-8'],
+              [12, 10.84, 'Billing', 'A-9'],
+              [7, 4.82, 'Settings', 'A-10'],
+              [5, 5.68, 'Support', 'A-11'],
+              // Sits on top of A-9, so hovering there lists both points.
+              [12.05, 10.8, 'Invoices', 'A-12'],
+              // Shares A-2's coordinates exactly, which the tooltip lists as
+              // two separate points.
+              [8, 6.95, 'Search retry', 'A-13'],
+            ],
+          },
+          {
+            source: [
+              ['x', 'y', 'label', 'id'],
+              [12, 3.1, 'Cache miss', 'B-1'],
+              [5, 9.13, 'Index scan', 'B-2'],
+              [7, 7.26, 'Planner', 'B-3'],
+              [11, 4.74, 'Page fault', 'B-4'],
+              [3, 7.46, 'Lock wait', 'B-5'],
+              [8, 6.77, 'Commit', 'B-6'],
+              [14, 5.13, 'Replication', 'B-7'],
+              [9, 8.14, 'Compaction', 'B-8'],
+              [6, 6.08, 'Flush', 'B-9'],
+              [10, 5.39, 'Checkpoint', 'B-10'],
+              [4, 8.1, 'Recovery', 'B-11'],
+            ],
+          },
+        ]}
+        series={[
+          {
+            datasetIndex: 0,
+            // encode.tooltip picks the column that titles the tooltip. `id`
+            // comes after `label` here, so the title only shows the id when
+            // encode.tooltip is honored.
+            // https://echarts.apache.org/en/option.html#series-scatter.encode
+            encode: {
+              tooltip: 'id',
+              // oxlint-disable-next-line id-length
+              x: 'x',
+              // oxlint-disable-next-line id-length
+              y: 'y',
+            },
+            name: 'Group A',
+            type: 'scatter',
+          },
+          {
+            datasetIndex: 1,
+            encode: {
+              tooltip: 'id',
+              // oxlint-disable-next-line id-length
+              x: 'x',
+              // oxlint-disable-next-line id-length
+              y: 'y',
+            },
+            name: 'Group B',
+            type: 'scatter',
+          },
+          {
+            data: [
+              [1, 10],
+              [2, 20],
+              [3, 30],
+              [4, 40],
+              [5, 50],
+              [6, 60],
+            ],
+            // No point identifier, so the tooltip is titled with the series name.
+            name: 'Group C',
+            type: 'scatter',
+          },
+        ]}
+        xAxis={{
+          // The axis name labels the matching row in the scatter tooltip.
+          name: 'Concurrent queries',
+          type: 'value',
+        }}
+        yAxis={{
+          name: 'Latency',
+          type: 'value',
+        }}
+        option={{
+          tooltip: {
+            // `valueFormatter` formats the x and y values only. The third
+            // argument is the axis, so this one adds the unit to latency. The
+            // point id in the title is shown unchanged.
+            valueFormatter: (
+              value: number,
+              _dataIndex?: number,
+              context?: TooltipValueContext,
+            ) => (context?.axis === 'y' ? `${value} ms` : `${value}`),
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Scatter Large
+
+```tsx
+import { Chart, type TooltipValueContext } from '@neo4j-ndl/react-charts';
+
+const POINT_COUNT = 20_000;
+const SERIES_COUNT = 2;
+const POINTS_PER_SERIES = POINT_COUNT / SERIES_COUNT;
+
+/**
+ * Deterministic 0–1 values so the chart looks the same on every Storybook
+ * load, without shipping twenty thousand hardcoded rows.
+ */
+const createSeededRandom = (seed: number) => {
+  let next = seed;
+
+  return () => {
+    next = (Math.imul(next, 1664525) + 1013904223) >>> 0;
+
+    return next / 4_294_967_296;
+  };
+};
+
+const roundToTwo = (value: number) => Math.round(value * 100) / 100;
+
+/**
+ * Standard normal sample from a uniform generator (Box–Muller), so y can sit
+ * on a bell instead of filling the plot evenly.
+ */
+const nextStandardNormal = (random: () => number) => {
+  const uniform = Math.max(random(), Number.EPSILON);
+  const angle = random();
+
+  return Math.sqrt(-2 * Math.log(uniform)) * Math.cos(2 * Math.PI * angle);
+};
+
+const scatterEncode = {
+  tooltip: 'id',
+  // oxlint-disable-next-line id-length
+  x: 'x',
+  // oxlint-disable-next-line id-length
+  y: 'y',
+};
+
+const BELL_BASELINE = 8;
+const BELL_HEIGHT = 72;
+const BELL_WIDTH = 16;
+
+const datasets = [
+  { center: 42, group: 'A' },
+  { center: 58, group: 'B' },
+].map(({ center, group }, seriesIndex) => {
+  const random = createSeededRandom(seriesIndex + 1);
+  const source: Array<[string, number, number] | ['id', 'x', 'y']> = [
+    ['id', 'x', 'y'],
+  ];
+
+  for (let index = 0; index < POINTS_PER_SERIES - 3; index += 1) {
+    const xValue = random() * 100;
+    const bell =
+      BELL_BASELINE +
+      BELL_HEIGHT * Math.exp(-((xValue - center) ** 2) / (2 * BELL_WIDTH ** 2));
+    const yValue = Math.max(0, bell + nextStandardNormal(random) * 4);
+
+    source.push([
+      `${group}-${index + 1}`,
+      roundToTwo(xValue),
+      roundToTwo(yValue),
+    ]);
+  }
+
+  const peak = roundToTwo(BELL_BASELINE + BELL_HEIGHT);
+
+  // A known cluster on the crest so hovering there lists several points,
+  // including an exact duplicate.
+  source.push(
+    [`${group}-overlap-1`, center, peak],
+    [`${group}-overlap-2`, roundToTwo(center + 0.08), roundToTwo(peak - 0.05)],
+    [`${group}-overlap-3`, center, peak],
+  );
+
+  return { source };
+});
+
+const Component = () => {
+  return (
+    // The Chart component requires its parent to have an explicit height.
+    // Without one the chart canvas collapses to 0px and nothing renders.
+    // You can also check the components documentation by hovering over it.
+    <div
+      style={{
+        border: '1px solid silver',
+        borderRadius: '10px',
+        height: '350px',
+        padding: '20px',
+        width: '100%',
+      }}
+    >
+      <Chart
+        legend={{
+          show: true,
+        }}
+        dataset={datasets}
+        series={[
+          {
+            datasetIndex: 0,
+            encode: scatterEncode,
+            name: 'Group A',
+            type: 'scatter',
+          },
+          {
+            datasetIndex: 1,
+            encode: scatterEncode,
+            name: 'Group B',
+            type: 'scatter',
+          },
+        ]}
+        xAxis={{
+          name: 'Concurrent queries',
+          type: 'value',
+        }}
+        yAxis={{
+          name: 'Latency',
+          type: 'value',
+        }}
+        option={{
+          tooltip: {
+            // `valueFormatter` formats the x and y values only. The third
+            // argument is the axis, so this one adds the unit to latency. The
+            // point id in the title is shown unchanged.
+            valueFormatter: (
+              value: number,
+              _dataIndex?: number,
+              context?: TooltipValueContext,
+            ) => (context?.axis === 'y' ? `${value} ms` : `${value}`),
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
 ### Slider
 
 ```tsx