@vectara/vectara-ui 19.0.0 → 19.1.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.1.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/index.tsx

@@ -0,0 +1,15 @@
+import { Basic } from "./Basic";
+
+const BasicSource = require("!!raw-loader!./Basic");
+
+export const composedChart = {
+  name: "Composed chart",
+  path: "/composed-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.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/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/index.tsx

@@ -0,0 +1,36 @@
+import { Basic } from "./Basic";
+import { Curved } from "./Curved";
+import { Area } from "./Area";
+import { StackedArea } from "./StackedArea";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const CurvedSource = require("!!raw-loader!./Curved");
+const AreaSource = require("!!raw-loader!./Area");
+const StackedAreaSource = require("!!raw-loader!./StackedArea");
+
+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()
+    }
+  ]
+};

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 />;
+};

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

@@ -0,0 +1,51 @@
+import { VuiPieChart, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// 24 categories exceed what a pie can show well. The palette shifts lightness on each wrap so the
+// repeated hues stay distinct, but the wedges are still too thin to compare. Prefer grouping the long
+// tail into an "Other" slice, or switch to a sorted bar chart.
+const data = [
+  { label: "Category 1", value: 100 },
+  { label: "Category 2", value: 97 },
+  { label: "Category 3", value: 94 },
+  { label: "Category 4", value: 91 },
+  { label: "Category 5", value: 88 },
+  { label: "Category 6", value: 85 },
+  { label: "Category 7", value: 82 },
+  { label: "Category 8", value: 79 },
+  { label: "Category 9", value: 76 },
+  { label: "Category 10", value: 73 },
+  { label: "Category 11", value: 70 },
+  { label: "Category 12", value: 67 },
+  { label: "Category 13", value: 64 },
+  { label: "Category 14", value: 61 },
+  { label: "Category 15", value: 58 },
+  { label: "Category 16", value: 55 },
+  { label: "Category 17", value: 52 },
+  { label: "Category 18", value: 49 },
+  { label: "Category 19", value: 46 },
+  { label: "Category 20", value: 43 },
+  { label: "Category 21", value: 40 },
+  { label: "Category 22", value: 37 },
+  { label: "Category 23", value: 34 },
+  { label: "Category 24", value: 31 }
+];
+
+export const ManyValues = () => {
+  return (
+    <>
+      <VuiText size="xs">
+        <p>
+          <VuiTextColor color="subdued">
+            The colors no longer repeat exactly. Each wraps past the eighth slice shifts lightness, but the wedges are
+            still too thin to compare. Avoid pies with this many categories. Group the long tail into an "Other" slice,
+            or switch to a sorted bar chart.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiPieChart data={data} categoryKey="label" valueKey="value" showLabels={false} height={420} />
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { VuiPieChart } from "../../../lib";
+
+// With many slices, outside labels overlap, so hide them and rely on the legend and tooltip.
+const data = [
+  { region: "North America", revenue: 4200 },
+  { region: "Europe", revenue: 3100 },
+  { region: "Asia Pacific", revenue: 2400 },
+  { region: "Latin America", revenue: 1200 },
+  { region: "Middle East", revenue: 760 },
+  { region: "Africa", revenue: 480 }
+];
+
+export const Unlabeled = () => {
+  return <VuiPieChart data={data} categoryKey="region" valueKey="revenue" showLabels={false} />;
+};

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

@@ -0,0 +1,36 @@
+import { Basic } from "./Basic";
+import { Donut } from "./Donut";
+import { Unlabeled } from "./Unlabeled";
+import { ManyValues } from "./ManyValues";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const DonutSource = require("!!raw-loader!./Donut");
+const UnlabeledSource = require("!!raw-loader!./Unlabeled");
+const ManyValuesSource = require("!!raw-loader!./ManyValues");
+
+export const pieChart = {
+  name: "Pie chart",
+  path: "/pie-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Donut",
+      component: <Donut />,
+      source: DonutSource.default.toString()
+    },
+    {
+      name: "Unlabeled",
+      component: <Unlabeled />,
+      source: UnlabeledSource.default.toString()
+    },
+    {
+      name: "Many values",
+      component: <ManyValues />,
+      source: ManyValuesSource.default.toString()
+    }
+  ]
+};

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

@@ -0,0 +1,31 @@
+import { VuiScatterChart } from "../../../lib";
+
+// Each point pairs a model's response latency (x, ms) with its relevance score (y).
+const modelA = [
+  { x: 120, y: 0.78 },
+  { x: 150, y: 0.81 },
+  { x: 180, y: 0.85 },
+  { x: 210, y: 0.88 },
+  { x: 240, y: 0.9 },
+  { x: 300, y: 0.92 }
+];
+
+const modelB = [
+  { x: 90, y: 0.72 },
+  { x: 130, y: 0.75 },
+  { x: 170, y: 0.79 },
+  { x: 220, y: 0.83 },
+  { x: 260, y: 0.86 },
+  { x: 320, y: 0.89 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiScatterChart
+      series={[
+        { name: "Model A", data: modelA },
+        { name: "Model B", data: modelB }
+      ]}
+    />
+  );
+};