Turbo: data aggregator

package.json

@@ -159,7 +159,8 @@
     "types:create": "wireit",
     "storybook:build": "wireit",
     "build-storybook": "pnpm run build:lib:esm && pnpm exec build-storybook",
-    "storybook:server": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"start-storybook -p 6006\"",
+    "storybook:server": "pnpm build:lib:esm && concurrently --raw \"pnpm:build:lib:esm --watch\" \"start-storybook -p 6006\"",
+    "storybook": "pnpm run storybook:server",
     "chromatic": "wireit",
     "chromatic:ci": "wireit",
     "sync": "wireit",

packages/victory-bar/src/v37/victory-bar-v3.stories.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/no-multi-comp */
+import * as React from "react";
+import VictoryBar from "./victory-bar-v3";
+import VictoryChart from "victory-chart/es/v37/victory-chart";
+
+export default {
+  title: "v37/VictoryBarV3",
+  component: VictoryBar,
+};
+
+export const Demo = (props) => {
+  return (
+    <svg>
+      <VictoryBar {...props} />{" "}
+    </svg>
+  );
+};
+
+Demo.args = {
+  barRatio: 0.5,
+};
+
+// NOT WORKING YET:
+const WithChart = (props) => {
+  return (
+    <VictoryChart {...props}>
+      <VictoryBar />
+    </VictoryChart>
+  );
+};

packages/victory-bar/src/v37/victory-bar-v3.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable react/no-multi-comp */
+import React from "react";
+import {
+  Datum,
+  NumberOrCallback,
+  VictoryCommonProps,
+  VictoryDatableProps,
+} from "victory-core";
+import {
+  createTurboComponent,
+  AggregateProps,
+  NormalizeProps,
+  TurboContainerProps,
+} from "victory-core/es/v37/victory-component";
+
+import Bar from "../bar";
+import { BarProps } from "..";
+import { getBarPosition } from "../helper-methods";
+
+export type VictoryBarAlignmentType = "start" | "middle" | "end";
+export interface VictoryBarProps
+  extends VictoryCommonProps,
+    VictoryDatableProps,
+    TurboContainerProps {
+  alignment: VictoryBarAlignmentType;
+  barRatio?: number;
+  barWidth?: NumberOrCallback;
+  cornerRadius?:
+    | NumberOrCallback
+    | {
+        top?: NumberOrCallback;
+        topLeft?: NumberOrCallback;
+        topRight?: NumberOrCallback;
+        bottom?: NumberOrCallback;
+        bottomLeft?: NumberOrCallback;
+        bottomRight?: NumberOrCallback;
+      };
+  data: Datum[];
+  dataComponent: React.ReactElement;
+  groupComponent: React.ReactElement;
+  horizontal: boolean;
+}
+
+export const VictoryBarV3 = createTurboComponent<VictoryBarProps>()(
+  {
+    displayName: "VictoryBar",
+    propTypes: {},
+    defaultProps: {
+      alignment: "middle",
+      data: [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+        { x: 4, y: 4 },
+      ],
+      dataComponent: <Bar />,
+      groupComponent: <g role="presentation" />,
+      horizontal: false,
+      sortOrder: "ascending",
+    },
+    normalizeProps: {
+      ...NormalizeProps,
+    },
+    aggregateProps: {
+      ...AggregateProps,
+    },
+  },
+  (props) => {
+    const {
+      data,
+      domain,
+      scale,
+      horizontal,
+      alignment,
+      barRatio,
+      barWidth,
+      cornerRadius,
+      dataComponent,
+      groupComponent,
+    } = props;
+
+    const barPositionProps = { domain, scale, horizontal };
+
+    const children = data.map((datum: Datum, i: number) => {
+      const { x, y, y0 } = getBarPosition(barPositionProps, datum);
+      const dataProps: BarProps & { key: string } = {
+        index: i,
+        key: `bar-${i}`,
+        alignment,
+        barRatio,
+        barWidth,
+        cornerRadius,
+        scale,
+        data,
+        x,
+        y,
+        y0,
+        datum,
+      };
+      return React.cloneElement(dataComponent, dataProps);
+    });
+    return React.cloneElement(groupComponent, {}, children);
+  },
+);
+
+export default VictoryBarV3;

packages/victory-core/package.json

@@ -21,6 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.21",
+    "memoize-weak": "^1.0.2",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.0",
     "victory-vendor": "^36.6.12"

packages/victory-core/src/v37/victory-component/core/RFC-Turbo-API.md

@@ -0,0 +1,76 @@
+# Victory Turbo API
+
+This is a design doc, for formulating + illustrating a working approach for "Victory Turbo" components.
+This is a WIP.
+
+# `createTurboComponent`
+
+Here's how we'd define a component:
+
+```tsx
+import { createTurboComponent } from "./create-turbo-component";
+
+export const VictoryLine = createTurboComponent(
+  {
+    // Standard React types:
+    displayName: "VictoryLine",
+    defaultProps: {
+      curve: "linear",
+      data: [ 1, 2, 3, 4 ],
+    },
+    propTypes: {
+      curve: PropTypes.oneOfType([ PropTypes.oneOf("linear", "smooth") ]),
+    },
+
+    // Map and normalize prop names:
+    normalizeProps: {
+      data: NormalizeProps.data,
+      curve: (props: { curve: "linear" | "smooth" | CurveFn }) => {
+        return typeof props.curve === "function"
+          ? props.curve
+          : curveMethods[props.curve] || curveMethods.linear;
+      },
+    },
+
+    // Aggregate props, derived from all nested components:
+    aggregateProps: {
+      domain: AggregateProps.domain,
+      scale: AggregateProps.scale,
+      range: AggregateProps.range,
+      polar: (allComponents, props, memo) =>
+        props.polar || allComponents.some((c) => c.props.polar),
+    },
+  },
+  (props) => {
+    // This is where we put the actual component rendering
+
+    // All these props are now normalized:
+    const { curve, data, domain, scale, range, polar } = props;
+    // Implementation details here...
+    return <line {...props} />;
+  },
+);
+```
+
+- The standard React config gets copied to the component (eg. `displayName`, `defaultProps`, and `propTypes`)
+- The `normalizeProps` will all get computed BEFORE rendering the component, and passed into the component
+- The `aggregateProps` will be computed as follows:
+  - During render, all children will traversed, and their props will be normalized and "collected"
+  - All collected + normalized props will be used to calculate the `aggregateProps`
+  - The `aggregateProps` will be passed into the component
+  - A caching/memoizing mechanism will be used to ensure multiple components can "share" aggregated results.  Eg. we only calculate `domain` once for all components.
+- The component's implementation will receive all props from the raw props, normalized props, and aggregate props, combined. 
+
+
+Example use-cases (stays the same as current API):
+```tsx
+<>
+  <VictoryLine />
+  <VictoryLine curve="smooth" />
+  <VictoryLine polar />
+  <Victorychart>
+    <VictoryLine />
+    <VictoryLine />
+  </Victorychart>
+</>
+```

packages/victory-core/src/v37/victory-component/core/create-turbo-component.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { createTurboComponent } from "./create-turbo-component";
+import { TurboContainerProps } from "./with-turbo-container";
+import { VictoryContainer } from "../../../victory-container/victory-container";
+
+export default {
+  title: "v37/createTurboComponent",
+};
+
+type ExampleProps = React.PropsWithChildren<
+  {
+    title: string;
+    optionalProp?: boolean;
+    defaultedProp: boolean;
+  } & TurboContainerProps
+>;
+
+const ExampleComponent = createTurboComponent<ExampleProps>()(
+  {
+    displayName: "ExampleComponent",
+    propTypes: {},
+    defaultProps: {
+      title: "Default Title",
+      defaultedProp: true,
+      containerComponent: <VictoryContainer />,
+    },
+    normalizeProps: {
+      TITLE: (props) => props.title.toUpperCase(),
+    },
+    aggregateProps: {
+      totalCount: (myProps, allProps) => allProps.length,
+      titles: (myProps, allProps) =>
+        allProps.map((props) => (props as ExampleProps).title).join(", "),
+      TITLES: (myProps, allProps) =>
+        allProps.map((props) => (props as { TITLE: string }).TITLE).join(", "),
+    },
+  },
+  ({ children, ...props }) => {
+    const {
+      title,
+      TITLE,
+      optionalProp,
+      defaultedProp,
+      totalCount,
+      titles,
+      TITLES,
+      // @ts-expect-error INVALID
+      INVALID,
+    } = props;
+
+    return (
+      <g>
+        <text>{props.title}</text>
+        <text>{JSON.stringify(props, null, 2)}</text>
+        <>{children}</>
+      </g>
+    );
+  },
+);
+
+export const Example = () => {
+  return (
+    <ExampleComponent title="Parent" optionalProp>
+      <ExampleComponent title="Child">
+        <ExampleComponent title="Grandchild" />
+      </ExampleComponent>
+      <ExampleComponent title="Child" />
+    </ExampleComponent>
+  );
+};

packages/victory-core/src/v37/victory-component/core/create-turbo-component.test.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { createTurboComponent } from "./create-turbo-component";
+import { TurboContainerProps } from "./with-turbo-container";
+import { VictoryContainer, LineHelpers, Path } from "../../../index";
+import { TurboDataProps } from "../utils/props";
+import { Clone } from "../../clone";
+import { AggregateProps, NormalizeProps } from "../utils/aggregate-props";
+
+describe("createTurboComponent", () => {
+  interface VicExampleProps<TDatum = any>
+    extends TurboContainerProps,
+      TurboDataProps<TDatum> {
+    title: string;
+    fill: string;
+  }
+  const VicExample = createTurboComponent<VicExampleProps>()(
+    {
+      displayName: "VicExample",
+      propTypes: {},
+      defaultProps: {
+        title: "?",
+        fill: "?",
+        containerComponent: <VictoryContainer />,
+        dataComponent: <Path />,
+        data: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+          { x: 2, y: 2 },
+          { x: 3, y: 3 },
+        ],
+      },
+      normalizeProps: {
+        ...NormalizeProps,
+      },
+      aggregateProps: {
+        ...AggregateProps,
+      },
+    },
+    (props) => {
+      const lineFunction = LineHelpers.getLineFunction(props);
+      const d = lineFunction(props.data as any);
+      return (
+        <g>
+          <text>{props.title}</text>
+          <Clone element={props.dataComponent} d={d} fill={props.fill} />
+        </g>
+      );
+    },
+  );
+
+  it("should render inside an SVG", () => {
+    const result = render(
+      <VicExample data-testid="test" title="test-title" fill="test-fill" />,
+    );
+    const svg = result.getByTestId("test");
+    expect(svg).toMatchInlineSnapshot(`
+      <svg
+        aria-labelledby="victory-container-1-title"
+        data-testid="test"
+        role="img"
+        style="pointer-events: all; width: 100%; height: 100%;"
+        viewBox="0 0 undefined undefined"
+      >
+        <title
+          id="victory-container-1-title"
+        >
+          test-title
+        </title>
+        <g>
+          <text>
+            test-title
+          </text>
+          <path
+            d="M-225,450L0,300L225,150L450,0"
+            fill="test-fill"
+          />
+        </g>
+      </svg>
+    `);
+  });
+});