@vectara/vectara-ui 19.0.0 → 19.2.0

package/lib/components/index.js

@@ -14,6 +14,14 @@ import { VuiButtonTertiary } from "./button/ButtonTertiary";
 import { VuiIconButton } from "./button/IconButton";
 import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
+import { VuiBarChart } from "./chart/BarChart";
+import { VuiLineChart } from "./chart/LineChart";
+import { VuiPieChart } from "./chart/PieChart";
+import { VuiSparkline } from "./chart/Sparkline";
+import { VuiTreeMap } from "./chart/TreeMap";
+import { VuiScatterChart } from "./chart/ScatterChart";
+import { VuiComposedChart } from "./chart/ComposedChart";
+import { CHART_PALETTE } from "./chart/palette";
 import { CALLOUT_COLOR, CALLOUT_SIZE } from "./callout/types";
 import { VuiChat } from "./chat/Chat";
 import { VuiChip } from "./chip/Chip";
@@ -99,4 +107,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/styles/index.css

@@ -1333,6 +1333,28 @@ fieldset {
   padding: 24px;
 }
 
+.vuiBarChart,
+.vuiLineChart,
+.vuiPieChart,
+.vuiScatterChart,
+.vuiComposedChart,
+.vuiTreeMap {
+  width: 100%;
+}
+.vuiBarChart .recharts-legend-item,
+.vuiLineChart .recharts-legend-item,
+.vuiPieChart .recharts-legend-item,
+.vuiScatterChart .recharts-legend-item,
+.vuiComposedChart .recharts-legend-item,
+.vuiTreeMap .recharts-legend-item {
+  margin-right: 16px !important;
+}
+
+.vuiSparkline {
+  display: inline-block;
+  line-height: 0;
+}
+
 .vuiChatTurn {
   position: relative;
   left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "19.0.0",
+  "version": "19.2.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -31,8 +31,8 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "start": "PORT=2000 react-scripts start",
-    "buildDocs": "BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",
+    "start": "REACT_APP_VUI_VERSION=$npm_package_version PORT=2000 react-scripts start",
+    "buildDocs": "REACT_APP_VUI_VERSION=$npm_package_version BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "build": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss",
@@ -62,6 +62,7 @@
     "react-icons": "^4.10.1",
     "react-scripts": "^5.0.1",
     "react-tooltip": "^5.30.0",
+    "recharts": "^3.8.1",
     "sonner": "^2.0.6",
     "web-vitals": "^2.1.4"
   },

package/src/docs/Docs.tsx

@@ -10,6 +10,7 @@ import {
   VuiAppLayout,
   VuiButtonSecondary,
   VuiContextProvider,
+  VuiBadge,
   LinkProps
 } from "../lib";
 import { HeaderLogo } from "./components/HeaderLogo";
@@ -18,6 +19,9 @@ import { Home } from "./Home";
 import { Page } from "./Page";
 import "./index.scss";
 
+// Baked in at build time from package.json via the REACT_APP_VUI_VERSION env var.
+const VUI_VERSION = process.env.REACT_APP_VUI_VERSION;
+
 export const Docs = () => {
   return (
     <Router>
@@ -67,6 +71,12 @@ const DocsContent = () => {
               </VuiTitle>
             </VuiFlexItem>
 
+            {VUI_VERSION && (
+              <VuiFlexItem grow={false} shrink={false}>
+                <VuiBadge color="neutral">{`v${VUI_VERSION}`}</VuiBadge>
+              </VuiFlexItem>
+            )}
+
             <VuiFlexItem grow={false} shrink={false}>
               <VuiButtonSecondary size="s" color="neutral" href="/">
                 Home

package/src/docs/pages/barChart/Basic.tsx

@@ -0,0 +1,21 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { quarter: "Q1", queries: 4200, documents: 1800 },
+  { quarter: "Q2", queries: 5100, documents: 2400 },
+  { quarter: "Q3", queries: 6800, documents: 3100 },
+  { quarter: "Q4", queries: 7400, documents: 3600 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="quarter"
+      series={[
+        { dataKey: "queries", name: "Queries" },
+        { dataKey: "documents", name: "Documents" }
+      ]}
+    />
+  );
+};

package/src/docs/pages/barChart/Horizontal.tsx

@@ -0,0 +1,20 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { source: "Documentation", count: 3200 },
+  { source: "Blog", count: 2100 },
+  { source: "Support tickets", count: 1450 },
+  { source: "Forums", count: 980 },
+  { source: "Release notes", count: 540 }
+];
+
+export const Horizontal = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="source"
+      orientation="bars"
+      series={[{ dataKey: "count", name: "Indexed documents", color: "teal" }]}
+    />
+  );
+};

package/src/docs/pages/barChart/Stacked.tsx

@@ -0,0 +1,23 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { team: "Search", shipped: 12, inProgress: 5, planned: 8 },
+  { team: "Platform", shipped: 9, inProgress: 7, planned: 4 },
+  { team: "Growth", shipped: 6, inProgress: 3, planned: 9 },
+  { team: "Docs", shipped: 4, inProgress: 2, planned: 3 }
+];
+
+export const Stacked = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="team"
+      stacked
+      series={[
+        { dataKey: "shipped", name: "Shipped" },
+        { dataKey: "inProgress", name: "In progress" },
+        { dataKey: "planned", name: "Planned" }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Basic } from "./Basic";
+import { Stacked } from "./Stacked";
+import { Horizontal } from "./Horizontal";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const StackedSource = require("!!raw-loader!./Stacked");
+const HorizontalSource = require("!!raw-loader!./Horizontal");
+
+export const barChart = {
+  name: "Bar chart",
+  path: "/bar-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Stacked",
+      component: <Stacked />,
+      source: StackedSource.default.toString()
+    },
+    {
+      name: "Horizontal",
+      component: <Horizontal />,
+      source: HorizontalSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/colorPalette/ChartColors.tsx

@@ -0,0 +1,68 @@
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// Chart colors are an ordered palette for plotting data series, distinct from the categorical chip hues.
+// Each entry differs from its neighbors in both hue and luminance, so series stay distinguishable under
+// color vision deficiency and in grayscale. The palette is capped at eight — the practical limit for
+// telling categories apart by color alone.
+const chartColors = [
+  { name: "Chart 1", variable: "--vui-chart-1", description: "Blue" },
+  { name: "Chart 2", variable: "--vui-chart-2", description: "Orange" },
+  { name: "Chart 3", variable: "--vui-chart-3", description: "Teal-green" },
+  { name: "Chart 4", variable: "--vui-chart-4", description: "Mauve" },
+  { name: "Chart 5", variable: "--vui-chart-5", description: "Sky" },
+  { name: "Chart 6", variable: "--vui-chart-6", description: "Vermillion" },
+  { name: "Chart 7", variable: "--vui-chart-7", description: "Gold" },
+  { name: "Chart 8", variable: "--vui-chart-8", description: "Slate" }
+];
+
+export const ChartColors = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            An ordered palette for data visualization, assigned to series in sequence. Each color contrasts
+            with its neighbors in both hue and lightness, keeping series distinct for color-blind readers and
+            in grayscale. Use no more than eight; beyond that, group categories or add a non-color cue such as
+            a pattern or direct label.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="l" />
+
+      <VuiFlexContainer spacing="l" wrap>
+        {chartColors.map(({ name, variable, description }) => (
+          <VuiFlexItem grow={false} key={name}>
+            <div style={{ width: 160 }}>
+              {/* A solid swatch in the series color. */}
+              <div style={{ height: 64, borderRadius: 6, backgroundColor: `var(${variable})` }} />
+
+              <VuiSpacer size="s" />
+
+              <VuiText size="xs">
+                <p>
+                  <strong>{name}</strong> <VuiTextColor color="subdued">{description}</VuiTextColor>
+                </p>
+              </VuiText>
+
+              <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+                <VuiFlexItem grow={false}>
+                  <VuiText size="xs">
+                    <p>
+                      <code>{variable}</code>
+                    </p>
+                  </VuiText>
+                </VuiFlexItem>
+
+                <VuiFlexItem grow={false}>
+                  <VuiCopyButton size="xs" value={`var(${variable})`} title={`Copy var(${variable})`} />
+                </VuiFlexItem>
+              </VuiFlexContainer>
+            </div>
+          </VuiFlexItem>
+        ))}
+      </VuiFlexContainer>
+    </>
+  );
+};

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

@@ -1,12 +1,14 @@
 import { Usage } from "./Usage";
 import { SemanticColors } from "./SemanticColors";
 import { CategoricalColors } from "./CategoricalColors";
+import { ChartColors } from "./ChartColors";
 import { NeutralColors } from "./NeutralColors";
 import { TextAndBorderColors } from "./TextAndBorderColors";
 
 const UsageSource = require("!!raw-loader!./Usage");
 const SemanticColorsSource = require("!!raw-loader!./SemanticColors");
 const CategoricalColorsSource = require("!!raw-loader!./CategoricalColors");
+const ChartColorsSource = require("!!raw-loader!./ChartColors");
 const NeutralColorsSource = require("!!raw-loader!./NeutralColors");
 const TextAndBorderColorsSource = require("!!raw-loader!./TextAndBorderColors");
 
@@ -29,6 +31,11 @@ export const colorPalette = {
       component: <CategoricalColors />,
       source: CategoricalColorsSource.default.toString()
     },
+    {
+      name: "Chart colors",
+      component: <ChartColors />,
+      source: ChartColorsSource.default.toString()
+    },
     {
       name: "Neutral and special colors",
       component: <NeutralColors />,

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

@@ -0,0 +1,25 @@
+import { VuiComposedChart } from "../../../lib";
+
+// Query volume (bars, left axis) overlaid with p95 latency (line, right axis) — two metrics on
+// different scales sharing one chart.
+const data = [
+  { month: "Jan", queries: 4200, latency: 180 },
+  { month: "Feb", queries: 5100, latency: 172 },
+  { month: "Mar", queries: 6800, latency: 165 },
+  { month: "Apr", queries: 7400, latency: 158 },
+  { month: "May", queries: 8200, latency: 150 },
+  { month: "Jun", queries: 9100, latency: 142 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiComposedChart
+      data={data}
+      categoryKey="month"
+      series={[
+        { dataKey: "queries", name: "Queries", type: "bar", axis: "left" },
+        { dataKey: "latency", name: "p95 latency (ms)", type: "line", axis: "right", curved: true }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,22 @@
+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",
+  path: "/composed-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Formatted axes",
+      component: <FormattedAxes />,
+      source: FormattedAxesSource.default.toString()
+    }
+  ]
+};

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

@@ -0,0 +1,25 @@
+import { VuiLineChart } from "../../../lib";
+
+const data = [
+  { month: "Jan", storage: 120, bandwidth: 80 },
+  { month: "Feb", storage: 180, bandwidth: 110 },
+  { month: "Mar", storage: 240, bandwidth: 140 },
+  { month: "Apr", storage: 320, bandwidth: 200 },
+  { month: "May", storage: 410, bandwidth: 260 },
+  { month: "Jun", storage: 520, bandwidth: 300 }
+];
+
+export const Area = () => {
+  return (
+    <VuiLineChart
+      data={data}
+      categoryKey="month"
+      variant="area"
+      curved
+      series={[
+        { dataKey: "storage", name: "Storage (GB)" },
+        { dataKey: "bandwidth", name: "Bandwidth (GB)" }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,23 @@
+import { VuiLineChart } from "../../../lib";
+
+const data = [
+  { month: "Jan", queries: 4200, documents: 1800 },
+  { month: "Feb", queries: 4800, documents: 2100 },
+  { month: "Mar", queries: 4500, documents: 2600 },
+  { month: "Apr", queries: 6100, documents: 2900 },
+  { month: "May", queries: 6800, documents: 3400 },
+  { month: "Jun", queries: 7400, documents: 3600 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiLineChart
+      data={data}
+      categoryKey="month"
+      series={[
+        { dataKey: "queries", name: "Queries" },
+        { dataKey: "documents", name: "Documents" }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,25 @@
+import { VuiLineChart } from "../../../lib";
+
+const data = [
+  { day: "Mon", p50: 120, p95: 320 },
+  { day: "Tue", p50: 132, p95: 410 },
+  { day: "Wed", p50: 101, p95: 280 },
+  { day: "Thu", p50: 148, p95: 460 },
+  { day: "Fri", p50: 160, p95: 520 },
+  { day: "Sat", p50: 90, p95: 240 },
+  { day: "Sun", p50: 85, p95: 210 }
+];
+
+export const Curved = () => {
+  return (
+    <VuiLineChart
+      data={data}
+      categoryKey="day"
+      curved
+      series={[
+        { dataKey: "p50", name: "p50 latency (ms)" },
+        { dataKey: "p95", name: "p95 latency (ms)" }
+      ]}
+    />
+  );
+};

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/StackedArea.tsx

@@ -0,0 +1,27 @@
+import { VuiLineChart } from "../../../lib";
+
+// Search starts well above generation, then the two cross around March as generation overtakes it —
+// in a stacked area, the bottom band thins while the top band thickens.
+const data = [
+  { month: "Jan", search: 5200, generation: 1000 },
+  { month: "Feb", search: 4300, generation: 1800 },
+  { month: "Mar", search: 3400, generation: 2700 },
+  { month: "Apr", search: 2600, generation: 3600 },
+  { month: "May", search: 1800, generation: 4500 },
+  { month: "Jun", search: 1100, generation: 5400 }
+];
+
+export const StackedArea = () => {
+  return (
+    <VuiLineChart
+      data={data}
+      categoryKey="month"
+      variant="stacked-area"
+      curved
+      series={[
+        { dataKey: "search", name: "Search" },
+        { dataKey: "generation", name: "Generation" }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,50 @@
+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",
+  path: "/line-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Curved",
+      component: <Curved />,
+      source: CurvedSource.default.toString()
+    },
+    {
+      name: "Area",
+      component: <Area />,
+      source: AreaSource.default.toString()
+    },
+    {
+      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()
+    }
+  ]
+};

package/src/docs/pages/pieChart/Basic.tsx

@@ -0,0 +1,13 @@
+import { VuiPieChart } from "../../../lib";
+
+const data = [
+  { source: "Documentation", count: 3200 },
+  { source: "Blog", count: 2100 },
+  { source: "Support tickets", count: 1450 },
+  { source: "Forums", count: 980 },
+  { source: "Release notes", count: 540 }
+];
+
+export const Basic = () => {
+  return <VuiPieChart data={data} categoryKey="source" valueKey="count" />;
+};

package/src/docs/pages/pieChart/Donut.tsx

@@ -0,0 +1,12 @@
+import { VuiPieChart } from "../../../lib";
+
+const data = [
+  { plan: "Free", accounts: 5400 },
+  { plan: "Pro", accounts: 2300 },
+  { plan: "Scale", accounts: 820 },
+  { plan: "Enterprise", accounts: 310 }
+];
+
+export const Donut = () => {
+  return <VuiPieChart data={data} categoryKey="plan" valueKey="accounts" donut />;
+};