@vectara/vectara-ui 19.1.0 → 19.3.0

package/lib/components/chart/BarChart.d.ts

@@ -14,7 +14,10 @@ type Props = {
     showLegend?: boolean;
     showGrid?: boolean;
     showTooltip?: boolean;
+    syncId?: string;
+    syncMethod?: "index" | "value";
+    formatValue?: (value: number) => string;
     "data-testid"?: string;
 };
-export declare const VuiBarChart: ({ data, categoryKey, series, orientation, stacked, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiBarChart: ({ data, categoryKey, series, orientation, stacked, height, showLegend, showGrid, showTooltip, syncId, syncMethod, formatValue, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/chart/BarChart.js

@@ -14,11 +14,11 @@ import { Bar, CartesianGrid, BarChart as RechartsBarChart, Legend, ResponsiveCon
 import { getChartColor, getChartColorByIndex } from "./palette";
 import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
 export const VuiBarChart = (_a) => {
-    var { data, categoryKey, series, orientation = "columns", stacked = false, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "orientation", "stacked", "height", "showLegend", "showGrid", "showTooltip"]);
+    var { data, categoryKey, series, orientation = "columns", stacked = false, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true, syncId, syncMethod, formatValue } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "orientation", "stacked", "height", "showLegend", "showGrid", "showTooltip", "syncId", "syncMethod", "formatValue"]);
     const isHorizontal = orientation === "bars";
     const categoryAxis = (_jsx(_Fragment, { children: isHorizontal ? (_jsx(YAxis, { type: "category", dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) : (_jsx(XAxis, { type: "category", dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) }));
-    const valueAxis = isHorizontal ? (_jsx(XAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })) : (_jsx(YAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }));
-    return (_jsx("div", Object.assign({ className: "vuiBarChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsBarChart, Object.assign({ data: data, layout: isHorizontal ? "vertical" : "horizontal" }, { children: [showGrid && (_jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: isHorizontal, horizontal: !isHorizontal })), categoryAxis, valueAxis, showTooltip && _jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
+    const valueAxis = isHorizontal ? (_jsx(XAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatValue })) : (_jsx(YAxis, { type: "number", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatValue }));
+    return (_jsx("div", Object.assign({ className: "vuiBarChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsBarChart, Object.assign({ data: data, layout: isHorizontal ? "vertical" : "horizontal", syncId: syncId, syncMethod: syncMethod }, { children: [showGrid && (_jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: isHorizontal, horizontal: !isHorizontal })), categoryAxis, valueAxis, showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" }, formatter: formatValue && ((value) => (typeof value === "number" ? formatValue(value) : value)) }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
                         var _a;
                         return (_jsx(Bar, { dataKey: s.dataKey, name: (_a = s.name) !== null && _a !== void 0 ? _a : s.dataKey, fill: s.color ? getChartColor(s.color) : getChartColorByIndex(index), stackId: stacked ? "stack" : undefined, radius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0], 
                             // A thin stroke separates touching segments regardless of fill,

package/lib/components/chart/ComposedChart.d.ts

@@ -15,7 +15,11 @@ type Props = {
     showLegend?: boolean;
     showGrid?: boolean;
     showTooltip?: boolean;
+    syncId?: string;
+    syncMethod?: "index" | "value";
+    formatLeftValue?: (value: number) => string;
+    formatRightValue?: (value: number) => string;
     "data-testid"?: string;
 };
-export declare const VuiComposedChart: ({ data, categoryKey, series, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiComposedChart: ({ data, categoryKey, series, height, showLegend, showGrid, showTooltip, syncId, syncMethod, formatLeftValue, formatRightValue, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/chart/ComposedChart.js

@@ -14,9 +14,20 @@ import { Bar, CartesianGrid, ComposedChart as RechartsComposedChart, Legend, Lin
 import { getChartColor, getChartColorByIndex } from "./palette";
 import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
 export const VuiComposedChart = (_a) => {
-    var { data, categoryKey, series, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "height", "showLegend", "showGrid", "showTooltip"]);
+    var { data, categoryKey, series, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true, syncId, syncMethod, formatLeftValue, formatRightValue } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "height", "showLegend", "showGrid", "showTooltip", "syncId", "syncMethod", "formatLeftValue", "formatRightValue"]);
     const hasRightAxis = series.some((s) => s.axis === "right");
-    return (_jsx("div", Object.assign({ className: "vuiComposedChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsComposedChart, Object.assign({ data: data }, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { yAxisId: "left", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), hasRightAxis && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false })), showTooltip && _jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
+    // A composed chart can mix two axes, so the tooltip formats each value by the
+    // axis its series is measured against rather than a single shared formatter.
+    const axisByDataKey = new Map(series.map((s) => { var _a; return [s.dataKey, (_a = s.axis) !== null && _a !== void 0 ? _a : "left"]; }));
+    const hasValueFormatter = Boolean(formatLeftValue || formatRightValue);
+    return (_jsx("div", Object.assign({ className: "vuiComposedChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsComposedChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { yAxisId: "left", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatLeftValue }), hasRightAxis && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatRightValue })), showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" }, formatter: hasValueFormatter
+                            ? (value, _name, item) => {
+                                if (typeof value !== "number")
+                                    return value;
+                                const format = axisByDataKey.get(String(item === null || item === void 0 ? void 0 : item.dataKey)) === "right" ? formatRightValue : formatLeftValue;
+                                return format ? format(value) : value;
+                            }
+                            : undefined }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
                         var _a, _b;
                         const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
                         const yAxisId = (_a = s.axis) !== null && _a !== void 0 ? _a : "left";

package/lib/components/chart/LineChart.d.ts

@@ -16,7 +16,10 @@ type Props = {
     showLegend?: boolean;
     showGrid?: boolean;
     showTooltip?: boolean;
+    syncId?: string;
+    syncMethod?: "index" | "value";
+    formatValue?: (value: number) => string;
     "data-testid"?: string;
 };
-export declare const VuiLineChart: ({ data, categoryKey, series, variant, curved, showPoints, height, showLegend, showGrid, showTooltip, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiLineChart: ({ data, categoryKey, series, variant, curved, showPoints, height, showLegend, showGrid, showTooltip, syncId, syncMethod, formatValue, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/chart/LineChart.js

@@ -14,10 +14,10 @@ import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Line, LineChart as
 import { getChartColor, getChartColorByIndex } from "./palette";
 import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
 export const VuiLineChart = (_a) => {
-    var { data, categoryKey, series, variant = "line", curved = false, showPoints = true, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "variant", "curved", "showPoints", "height", "showLegend", "showGrid", "showTooltip"]);
+    var { data, categoryKey, series, variant = "line", curved = false, showPoints = true, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true, syncId, syncMethod, formatValue } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "variant", "curved", "showPoints", "height", "showLegend", "showGrid", "showTooltip", "syncId", "syncMethod", "formatValue"]);
     const isArea = variant === "area" || variant === "stacked-area";
     const isStacked = variant === "stacked-area";
-    const axes = (_jsxs(_Fragment, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), showTooltip && _jsx(Tooltip, Object.assign({ cursor: { stroke: "var(--vui-color-border-medium)" } }, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }));
+    const axes = (_jsxs(_Fragment, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatValue }), showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { stroke: "var(--vui-color-border-medium)" }, formatter: formatValue && ((value) => (typeof value === "number" ? formatValue(value) : value)) }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }));
     // Shared marker props keep lines and areas visually identical apart from the fill.
     const markProps = (s, index) => {
         var _a;
@@ -33,10 +33,10 @@ export const VuiLineChart = (_a) => {
             activeDot: { r: 5 }
         };
     };
-    return (_jsx("div", Object.assign({ className: "vuiLineChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: isArea ? (_jsxs(RechartsAreaChart, Object.assign({ data: data }, { children: [axes, series.map((s, index) => {
+    return (_jsx("div", Object.assign({ className: "vuiLineChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: isArea ? (_jsxs(RechartsAreaChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [axes, series.map((s, index) => {
                         const props = markProps(s, index);
                         // Stacked areas tile rather than overlap, so they take a more solid
                         // fill; overlapping areas stay translucent to remain readable.
                         return (_jsx(Area, Object.assign({}, props, { fill: props.stroke, fillOpacity: isStacked ? 0.85 : 0.2, stackId: isStacked ? "stack" : undefined })));
-                    })] }))) : (_jsxs(RechartsLineChart, Object.assign({ data: data }, { children: [axes, series.map((s, index) => (_jsx(Line, Object.assign({}, markProps(s, index)))))] }))) })) })));
+                    })] }))) : (_jsxs(RechartsLineChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [axes, series.map((s, index) => (_jsx(Line, Object.assign({}, markProps(s, index)))))] }))) })) })));
 };

package/lib/components/chip/Chip.d.ts

@@ -1,9 +1,10 @@
 type Props = {
     children: React.ReactNode;
+    size?: "s" | "m";
     isActive?: boolean;
     onClick: () => void;
     append?: React.ReactNode;
     "data-testid"?: string;
 };
-export declare const VuiChip: ({ children, isActive, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiChip: ({ children, size, isActive, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/chip/Chip.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 export const VuiChip = (_a) => {
-    var { children, isActive, append } = _a, rest = __rest(_a, ["children", "isActive", "append"]);
-    const classes = classNames("vuiChip", {
+    var { children, size = "m", isActive, append } = _a, rest = __rest(_a, ["children", "size", "isActive", "append"]);
+    const classes = classNames("vuiChip", `vuiChip--${size}`, {
         "vuiChip-isActive": isActive
     });
     return (_jsxs("button", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiChip__label" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiChip__append" }, { children: append }))] })));

package/lib/components/chip/_index.scss

@@ -4,7 +4,6 @@
   gap: $sizeXs;
   border: 1px solid var(--vui-color-border-light);
   background-color: var(--vui-color-light-shade);
-  padding: $sizeXxs $sizeS;
   border-radius: $sizeM;
   transition: all $transitionSpeed;
   box-shadow: $shadowSmallStart;
@@ -17,20 +16,45 @@
 
 .vuiChip__label {
   font-weight: $fontWeightStrong;
-  font-size: $fontSizeStandard;
   color: var(--vui-color-text);
-  // Ensures consistent chip height regardless of whether
-  // append is present or not.
-  line-height: 1.6;
 }
 
 .vuiChip__append {
   color: var(--vui-color-subdued-shade);
-  padding: $sizeXxs $sizeXs;
   font-size: $fontSizeSmall;
   border-radius: $sizeS;
 }
 
+.vuiChip--s {
+  padding: $sizeXxs $sizeXs;
+
+  .vuiChip__label {
+    font-size: $fontSizeSmall;
+    // Ensures consistent chip height regardless of whether
+    // append is present or not.
+    line-height: 1.8;
+  }
+
+  .vuiChip__append {
+    padding: $sizeXxs $sizeXxs;
+  }
+}
+
+.vuiChip--m {
+  padding: $sizeXxs $sizeS;
+
+  .vuiChip__label {
+    font-size: $fontSizeStandard;
+    // Ensures consistent chip height regardless of whether
+    // append is present or not.
+    line-height: 1.6;
+  }
+
+  .vuiChip__append {
+    padding: $sizeXxs $sizeXs;
+  }
+}
+
 .vuiChip-isActive {
   border: 1px solid var(--vui-color-primary-shade);
   background-color: var(--vui-color-empty-shade);

package/lib/styles/index.css

@@ -1531,7 +1531,6 @@ fieldset {
   gap: 8px;
   border: 1px solid var(--vui-color-border-light);
   background-color: var(--vui-color-light-shade);
-  padding: 4px 12px;
   border-radius: 16px;
   transition: all 0.2s;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
@@ -1543,18 +1542,37 @@ fieldset {
 
 .vuiChip__label {
   font-weight: 500;
-  font-size: 14px;
   color: var(--vui-color-text);
-  line-height: 1.6;
 }
 
 .vuiChip__append {
   color: var(--vui-color-subdued-shade);
-  padding: 4px 8px;
   font-size: 12px;
   border-radius: 12px;
 }
 
+.vuiChip--s {
+  padding: 4px 8px;
+}
+.vuiChip--s .vuiChip__label {
+  font-size: 12px;
+  line-height: 1.8;
+}
+.vuiChip--s .vuiChip__append {
+  padding: 4px 4px;
+}
+
+.vuiChip--m {
+  padding: 4px 12px;
+}
+.vuiChip--m .vuiChip__label {
+  font-size: 14px;
+  line-height: 1.6;
+}
+.vuiChip--m .vuiChip__append {
+  padding: 4px 8px;
+}
+
 .vuiChip-isActive {
   border: 1px solid var(--vui-color-primary-shade);
   background-color: var(--vui-color-empty-shade);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "19.1.0",
+  "version": "19.3.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/chip/Small.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { VuiChip, VuiFlexContainer, VuiSpacer, VuiToggle } from "../../../lib";
+
+export const Small = () => {
+  const [hasCounts, setHasCounts] = useState(false);
+  const [activeOption, setActiveOption] = useState<"all" | "a" | "b" | "c">("all");
+
+  return (
+    <>
+      <VuiToggle checked={hasCounts} onChange={() => setHasCounts(!hasCounts)} label="Append counts" />
+
+      <VuiSpacer size="m" />
+
+      <VuiFlexContainer spacing="xs">
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("all")}
+          isActive={activeOption === "all"}
+          append={hasCounts ? 100 : undefined}
+        >
+          All options
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("a")}
+          isActive={activeOption === "a"}
+          append={hasCounts ? 2 : undefined}
+        >
+          Option A
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("b")}
+          isActive={activeOption === "b"}
+          append={hasCounts ? 81 : undefined}
+        >
+          Option B
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("c")}
+          isActive={activeOption === "c"}
+          append={hasCounts ? 16 : undefined}
+        >
+          Option C
+        </VuiChip>
+      </VuiFlexContainer>
+    </>
+  );
+};

package/src/docs/pages/chip/index.tsx

@@ -1,11 +1,22 @@
 import { Chip } from "./Chip";
+import { Small } from "./Small";
+
 const ChipSource = require("!!raw-loader!./Chip");
+const SmallSource = require("!!raw-loader!./Small");
 
 export const chip = {
   name: "Chip",
   path: "/chip",
-  example: {
-    component: <Chip />,
-    source: ChipSource.default.toString()
-  }
+  examples: [
+    {
+      name: "Chip",
+      component: <Chip />,
+      source: ChipSource.default.toString()
+    },
+    {
+      name: "Small",
+      component: <Small />,
+      source: SmallSource.default.toString()
+    }
+  ]
 };

package/src/docs/pages/composedChart/FormattedAxes.tsx

@@ -0,0 +1,32 @@
+import { VuiComposedChart } from "../../../lib";
+
+// Request volume (bars, left axis) against p95 latency (line, right axis). The
+// two axes measure different units, so each gets its own value formatter — and
+// the shared tooltip formats each row by the axis its series belongs to.
+const data = [
+  { time: "10:00", requests: 4200, latency: 820 },
+  { time: "10:05", requests: 5100, latency: 1240 },
+  { time: "10:10", requests: 6800, latency: 980 },
+  { time: "10:15", requests: 7400, latency: 2100 },
+  { time: "10:20", requests: 8200, latency: 1560 },
+  { time: "10:25", requests: 9100, latency: 1180 }
+];
+
+const formatCount = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(1)}k` : `${value}`);
+
+const formatMs = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`);
+
+export const FormattedAxes = () => {
+  return (
+    <VuiComposedChart
+      data={data}
+      categoryKey="time"
+      formatLeftValue={formatCount}
+      formatRightValue={formatMs}
+      series={[
+        { dataKey: "requests", name: "Requests", type: "bar", axis: "left" },
+        { dataKey: "latency", name: "p95 latency", type: "line", axis: "right", curved: true }
+      ]}
+    />
+  );
+};

package/src/docs/pages/composedChart/index.tsx

@@ -1,6 +1,8 @@
 import { Basic } from "./Basic";
+import { FormattedAxes } from "./FormattedAxes";
 
 const BasicSource = require("!!raw-loader!./Basic");
+const FormattedAxesSource = require("!!raw-loader!./FormattedAxes");
 
 export const composedChart = {
   name: "Composed chart",
@@ -10,6 +12,11 @@ export const composedChart = {
       name: "Basic",
       component: <Basic />,
       source: BasicSource.default.toString()
+    },
+    {
+      name: "Formatted axes",
+      component: <FormattedAxes />,
+      source: FormattedAxesSource.default.toString()
     }
   ]
 };

package/src/docs/pages/lineChart/FormattedValues.tsx

@@ -0,0 +1,25 @@
+import { VuiLineChart } from "../../../lib";
+
+const data = [
+  { time: "10:00", latency: 820 },
+  { time: "10:05", latency: 1240 },
+  { time: "10:10", latency: 980 },
+  { time: "10:15", latency: 2100 },
+  { time: "10:20", latency: 1560 },
+  { time: "10:25", latency: 1180 }
+];
+
+// formatValue formats both the value-axis ticks and the tooltip readout, so raw
+// millisecond values render as human-readable durations.
+const formatMs = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`);
+
+export const FormattedValues = () => {
+  return (
+    <VuiLineChart
+      data={data}
+      categoryKey="time"
+      formatValue={formatMs}
+      series={[{ dataKey: "latency", name: "Latency" }]}
+    />
+  );
+};

package/src/docs/pages/lineChart/Synced.tsx

@@ -0,0 +1,48 @@
+import { VuiBarChart, VuiLineChart, VuiSpacer } from "../../../lib";
+
+// The two charts cover the same timeline at different resolutions. Hovering
+// either one highlights the matching timestamp on both. syncMethod "value"
+// aligns by the x-axis value rather than by data index, which is what lets
+// charts with differing point counts stay in step.
+const latency = [
+  { time: "10:00", p95: 320 },
+  { time: "10:10", p95: 280 },
+  { time: "10:20", p95: 460 },
+  { time: "10:30", p95: 240 }
+];
+
+const requests = [
+  { time: "10:00", requests: 1200 },
+  { time: "10:05", requests: 1800 },
+  { time: "10:10", requests: 1500 },
+  { time: "10:15", requests: 2100 },
+  { time: "10:20", requests: 1900 },
+  { time: "10:25", requests: 1700 },
+  { time: "10:30", requests: 1400 }
+];
+
+const SYNC_ID = "trafficDemo";
+
+export const Synced = () => {
+  return (
+    <>
+      <VuiLineChart
+        data={latency}
+        categoryKey="time"
+        syncId={SYNC_ID}
+        syncMethod="value"
+        height={200}
+        series={[{ dataKey: "p95", name: "p95 latency (ms)" }]}
+      />
+      <VuiSpacer size="m" />
+      <VuiBarChart
+        data={requests}
+        categoryKey="time"
+        syncId={SYNC_ID}
+        syncMethod="value"
+        height={200}
+        series={[{ dataKey: "requests", name: "Requests" }]}
+      />
+    </>
+  );
+};

package/src/docs/pages/lineChart/index.tsx

@@ -2,11 +2,15 @@ import { Basic } from "./Basic";
 import { Curved } from "./Curved";
 import { Area } from "./Area";
 import { StackedArea } from "./StackedArea";
+import { FormattedValues } from "./FormattedValues";
+import { Synced } from "./Synced";
 
 const BasicSource = require("!!raw-loader!./Basic");
 const CurvedSource = require("!!raw-loader!./Curved");
 const AreaSource = require("!!raw-loader!./Area");
 const StackedAreaSource = require("!!raw-loader!./StackedArea");
+const FormattedValuesSource = require("!!raw-loader!./FormattedValues");
+const SyncedSource = require("!!raw-loader!./Synced");
 
 export const lineChart = {
   name: "Line chart",
@@ -31,6 +35,16 @@ export const lineChart = {
       name: "Stacked area",
       component: <StackedArea />,
       source: StackedAreaSource.default.toString()
+    },
+    {
+      name: "Formatted values",
+      component: <FormattedValues />,
+      source: FormattedValuesSource.default.toString()
+    },
+    {
+      name: "Synced",
+      component: <Synced />,
+      source: SyncedSource.default.toString()
     }
   ]
 };