@veritone-ce/design-system 2.9.0-next.2 → 2.9.0-next.3

package/dist/esm/unstable/extras/chart/Chart.js

@@ -0,0 +1,96 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import embed from '../../../bundled_modules/vega-embed/build/embed.js';
+import '../../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../../styles/defaultTheme.js';
+import useTheme from '../../../styles/useTheme.js';
+import '../../../styles/css-vars.js';
+import '../../../styles/provider.client.js';
+
+const Chart = (props) => {
+  const containerRef = useRef(null);
+  const theme = useTheme();
+  useEffect(() => {
+    if (!containerRef.current)
+      return;
+    const bgColor = theme.palette.background.primary;
+    const isDark = bgColor === "#121212" || bgColor.startsWith("rgb(18");
+    const themeConfig = isDark ? {
+      background: theme.palette.background.primary,
+      title: { color: "#ffffff" },
+      style: {
+        "guide-label": {
+          fill: "#ffffff"
+        },
+        "guide-title": {
+          fill: "#ffffff"
+        }
+      },
+      axis: {
+        domainColor: "rgba(255, 255, 255, 0.3)",
+        gridColor: "rgba(255, 255, 255, 0.1)",
+        tickColor: "rgba(255, 255, 255, 0.3)",
+        labelColor: "#ffffff",
+        titleColor: "#ffffff"
+      },
+      axisBand: {
+        grid: false
+      },
+      legend: {
+        labelColor: "#ffffff",
+        titleColor: "#ffffff"
+      },
+      text: {
+        fill: "#ffffff"
+      }
+    } : {
+      background: theme.palette.background.primary
+    };
+    const spec = {
+      ...props.spec,
+      ...props.width && { width: props.width },
+      ...props.height && { height: props.height },
+      config: {
+        ...props.spec.config || {},
+        ...themeConfig
+      }
+    };
+    if (props.data) {
+      const dataValues = Object.entries(props.data).map(([name, values]) => ({
+        name,
+        values
+      }));
+      const replaceDataReferences = (obj) => {
+        if (!obj || typeof obj !== "object")
+          return;
+        if (obj.data && "name" in obj.data) {
+          const dataName = obj.data.name;
+          const matchingData = dataValues.find((d) => d.name === dataName);
+          if (matchingData) {
+            obj.data = { values: matchingData.values };
+          }
+        }
+        if (Array.isArray(obj.layer)) {
+          obj.layer.forEach((layer) => replaceDataReferences(layer));
+        }
+        if (Array.isArray(obj.vconcat)) {
+          obj.vconcat.forEach((view) => replaceDataReferences(view));
+        }
+        if (Array.isArray(obj.hconcat)) {
+          obj.hconcat.forEach((view) => replaceDataReferences(view));
+        }
+      };
+      replaceDataReferences(spec);
+    }
+    embed(containerRef.current, spec, {
+      actions: false,
+      theme: isDark ? "dark" : void 0
+    });
+  }, [props.spec, props.data, props.width, props.height, theme]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: props.className, style: props.style });
+};
+
+export { Chart as default };

package/dist/esm/unstable/extras/chart/DistributionChart.js

@@ -0,0 +1,82 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Chart from './Chart.js';
+
+function DistributionChart(props) {
+  const datasetField = props.datasetField ?? "Dataset";
+  const lowerField = props.lowerField ?? "lower";
+  const q1Field = props.q1Field ?? "q1";
+  const medianField = props.medianField ?? "median";
+  const q3Field = props.q3Field ?? "q3";
+  const upperField = props.upperField ?? "upper";
+  const outlierValueField = props.outlierValueField ?? "outlier_value";
+  const spec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+    description: "Distribution",
+    data: { name: "values" },
+    encoding: {
+      y: { field: datasetField, type: "nominal", title: null }
+    },
+    resolve: {
+      scale: {
+        x: "shared"
+      }
+    },
+    layer: [
+      {
+        mark: {
+          type: "rule",
+          strokeWidth: 2
+        },
+        encoding: {
+          x: { field: lowerField, type: "quantitative", title: null },
+          x2: { field: upperField }
+        }
+      },
+      {
+        mark: {
+          type: "bar",
+          size: 14
+        },
+        encoding: {
+          x: { field: q1Field, type: "quantitative" },
+          x2: { field: q3Field },
+          color: { field: datasetField, type: "nominal", legend: null }
+        }
+      },
+      {
+        mark: {
+          type: "tick",
+          size: 14
+        },
+        encoding: {
+          x: { field: medianField, type: "quantitative" }
+        }
+      },
+      {
+        data: { name: "outliers" },
+        mark: {
+          type: "point",
+          size: 60
+        },
+        encoding: {
+          x: { field: outlierValueField, type: "quantitative" },
+          y: { field: datasetField, type: "nominal" }
+        }
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      spec,
+      data: { values: props.data, outliers: props.outliers ?? [] },
+      width: props.width,
+      height: props.height,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+
+export { DistributionChart };

package/dist/esm/unstable/extras/chart/DonutChart.js

@@ -0,0 +1,41 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Chart from './Chart.js';
+
+function DonutChart(props) {
+  const thetaField = props.thetaField ?? "value";
+  const colorField = props.colorField ?? "category";
+  const spec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+    description: "Donut chart",
+    mark: {
+      type: "arc",
+      innerRadius: props.innerRadius ?? 80,
+      outerRadius: props.outerRadius ?? 140
+    },
+    encoding: {
+      theta: {
+        field: thetaField,
+        type: props.thetaType ?? "quantitative"
+      },
+      color: {
+        field: colorField,
+        type: props.colorType ?? "nominal"
+      }
+    },
+    data: { name: "values" }
+  };
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      spec,
+      data: { values: props.data },
+      width: props.width,
+      height: props.height,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+
+export { DonutChart };

package/dist/esm/unstable/extras/chart/LineChart.js

@@ -0,0 +1,43 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Chart from './Chart.js';
+
+function LineChart(props) {
+  const xField = props.xField ?? "x";
+  const yField = props.yField ?? "y";
+  const spec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    description: "Line chart",
+    mark: {
+      type: "line",
+      point: true,
+      tooltip: true
+    },
+    encoding: {
+      x: {
+        field: xField,
+        type: props.xType ?? "quantitative",
+        ...props.xTitle ? { title: props.xTitle } : null
+      },
+      y: {
+        field: yField,
+        type: props.yType ?? "quantitative",
+        ...props.yTitle ? { title: props.yTitle } : null
+      }
+    },
+    data: { name: "table" }
+  };
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      spec,
+      data: { table: props.data },
+      width: props.width,
+      height: props.height,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+
+export { LineChart };

package/dist/esm/unstable/extras/chart/PieChart.js

@@ -0,0 +1,37 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Chart from './Chart.js';
+
+function PieChart(props) {
+  const thetaField = props.thetaField ?? "value";
+  const colorField = props.colorField ?? "category";
+  const spec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    description: "Pie chart",
+    mark: { type: "arc", tooltip: true },
+    encoding: {
+      theta: {
+        field: thetaField,
+        type: props.thetaType ?? "quantitative"
+      },
+      color: {
+        field: colorField,
+        type: props.colorType ?? "nominal"
+      }
+    },
+    data: { name: "table" }
+  };
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      spec,
+      data: { table: props.data },
+      width: props.width,
+      height: props.height,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+
+export { PieChart };

package/dist/esm/unstable/extras/chart/TimelineChart.js

@@ -0,0 +1,46 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Chart from './Chart.js';
+
+function TimelineChart(props) {
+  const yField = props.yField ?? "appearance";
+  const xStartField = props.xStartField ?? "start";
+  const xEndField = props.xEndField ?? "end";
+  const spec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+    description: "Timeline",
+    mark: "bar",
+    encoding: {
+      y: {
+        field: yField,
+        type: props.yType ?? "ordinal"
+      },
+      x: {
+        field: xStartField,
+        type: props.xType ?? "quantitative",
+        title: "Time (ms)"
+      },
+      x2: {
+        field: xEndField
+      },
+      color: {
+        field: yField,
+        type: "nominal"
+      }
+    },
+    data: { name: "values" }
+  };
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      spec,
+      data: { values: props.data },
+      width: props.width,
+      height: props.height,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+
+export { TimelineChart };

package/dist/esm/unstable/extras/chart/index.js

@@ -0,0 +1,8 @@
+'use strict';
+export { default as Chart, default } from './Chart.js';
+export { LineChart } from './LineChart.js';
+export { BarChart } from './BarChart.js';
+export { PieChart } from './PieChart.js';
+export { DonutChart } from './DonutChart.js';
+export { TimelineChart } from './TimelineChart.js';
+export { DistributionChart } from './DistributionChart.js';

package/dist/types/unstable/extras/chart/BarChart.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type BarChartDatum = Record<string, unknown>;
+export interface BarChartProps {
+    data: BarChartDatum[];
+    xField?: string;
+    yField?: string;
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xTitle?: string;
+    yTitle?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function BarChart(props: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/Chart.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { VisualizationSpec } from 'vega-embed';
+export interface ChartProps {
+    /**
+     * Vega or Vega-Lite specification
+     */
+    spec: VisualizationSpec;
+    /**
+     * Data to be used in the chart
+     */
+    data?: Record<string, unknown[]>;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+}
+/**
+ * Chart component that wraps Vega/Vega-Lite visualizations
+ */
+declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export default Chart;

package/dist/types/unstable/extras/chart/DistributionChart.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type DistributionChartDatum = Record<string, unknown>;
+export interface DistributionChartProps {
+    data: DistributionChartDatum[];
+    outliers?: DistributionChartDatum[];
+    datasetField?: string;
+    lowerField?: string;
+    q1Field?: string;
+    medianField?: string;
+    q3Field?: string;
+    upperField?: string;
+    outlierValueField?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DistributionChart(props: DistributionChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/DonutChart.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type DonutChartDatum = Record<string, unknown>;
+export interface DonutChartProps {
+    data: DonutChartDatum[];
+    thetaField?: string;
+    colorField?: string;
+    innerRadius?: number;
+    outerRadius?: number;
+    thetaType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    colorType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DonutChart(props: Readonly<DonutChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/LineChart.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type LineChartDatum = Record<string, unknown>;
+export interface LineChartProps {
+    data: LineChartDatum[];
+    xField?: string;
+    yField?: string;
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xTitle?: string;
+    yTitle?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function LineChart(props: Readonly<LineChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/PieChart.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type PieChartDatum = Record<string, unknown>;
+export interface PieChartProps {
+    data: PieChartDatum[];
+    thetaField?: string;
+    colorField?: string;
+    thetaType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    colorType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PieChart(props: Readonly<PieChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/TimelineChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type TimelineChartDatum = Record<string, unknown>;
+export interface TimelineChartProps {
+    data: TimelineChartDatum[];
+    yField?: string;
+    xStartField?: string;
+    xEndField?: string;
+    yType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    xType?: 'quantitative' | 'temporal' | 'ordinal' | 'nominal';
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TimelineChart(props: Readonly<TimelineChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/chart/index.d.ts

@@ -0,0 +1,15 @@
+export { default } from './Chart.js';
+export { default as Chart } from './Chart.js';
+export type { ChartProps } from './Chart.js';
+export { LineChart } from './LineChart.js';
+export type { LineChartProps, LineChartDatum } from './LineChart.js';
+export { BarChart } from './BarChart.js';
+export type { BarChartProps, BarChartDatum } from './BarChart.js';
+export { PieChart } from './PieChart.js';
+export type { PieChartProps, PieChartDatum } from './PieChart.js';
+export { DonutChart } from './DonutChart.js';
+export type { DonutChartProps, DonutChartDatum } from './DonutChart.js';
+export { TimelineChart } from './TimelineChart.js';
+export type { TimelineChartProps, TimelineChartDatum } from './TimelineChart.js';
+export { DistributionChart } from './DistributionChart.js';
+export type { DistributionChartProps, DistributionChartDatum } from './DistributionChart.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.9.0-next.2",
+  "version": "2.9.0-next.3",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [