@vectara/vectara-ui 18.4.0 → 19.1.0

package/src/docs/pages/fileDropTarget/FileDropTarget.tsx

@@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { VuiFileDropTarget, VuiSpacer, VuiText, VuiTextColor, VuiToggle } from "../../../lib";
+
+export const FileDropTarget = () => {
+  const [isScoped, setIsScoped] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState<string[]>([]);
+  const scopeRef = useRef<HTMLDivElement>(null);
+
+  // Only one target is mounted at a time: the global target listens on the whole
+  // document, so it would intercept drops meant for a scoped target.
+  return (
+    <>
+      <VuiToggle
+        label="Scope drop target to an element"
+        checked={isScoped}
+        onChange={(e) => {
+          setIsScoped(e.target.checked);
+          setDroppedFiles([]);
+        }}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            {isScoped
+              ? "Drag a file over the box below. The overlay is scoped to the positioned container."
+              : "Drag a file anywhere over the page to reveal a full-screen overlay."}
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      {droppedFiles.length > 0 && (
+        <>
+          <VuiSpacer size="xs" />
+          <VuiText size="s">
+            <p>Dropped: {droppedFiles.join(", ")}</p>
+          </VuiText>
+        </>
+      )}
+
+      <VuiSpacer size="s" />
+
+      {isScoped ? (
+        <div
+          ref={scopeRef}
+          style={{
+            position: "relative",
+            minHeight: 160,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 16,
+            border: "1px dashed var(--vui-color-border)",
+            borderRadius: 8
+          }}
+        >
+          <VuiText>
+            <p>
+              <VuiTextColor color="subdued">Drop zone</VuiTextColor>
+            </p>
+          </VuiText>
+
+          <VuiFileDropTarget
+            scopeRef={scopeRef}
+            message={
+              <VuiText align="center" size="l">
+                <p>Release to drop here</p>
+              </VuiText>
+            }
+            onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))}
+          />
+        </div>
+      ) : (
+        <VuiFileDropTarget onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))} />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { FileDropTarget } from "./FileDropTarget";
+const FileDropTargetSource = require("!!raw-loader!./FileDropTarget");
+
+export const fileDropTarget = {
+  name: "File drop target",
+  path: "/fileDropTarget",
+  example: {
+    component: <FileDropTarget />,
+    source: FileDropTargetSource.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/patch/Icons.tsx

@@ -0,0 +1,16 @@
+import { BiHelpCircle } from "react-icons/bi";
+import { PATCH_COLOR, VuiIcon, VuiPatch, VuiFlexContainer } from "../../../lib";
+
+export const Icons = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {PATCH_COLOR.map((color) => (
+        <VuiPatch color={color}>
+          <VuiIcon size="m">
+            <BiHelpCircle />
+          </VuiIcon>
+        </VuiPatch>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/patch/Sizes.tsx

@@ -0,0 +1,20 @@
+import { BiCompass } from "react-icons/bi";
+import { VuiPatch, VuiFlexContainer, VuiIcon } from "../../../lib";
+
+const sizes = ["xs", "s", "m"] as const;
+
+export const Sizes = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {sizes.map((size) => (
+        <div>
+          <VuiPatch color="indigo" size={size}>
+            <VuiIcon>
+              <BiCompass />
+            </VuiIcon>
+          </VuiPatch>
+        </div>
+      ))}
+    </VuiFlexContainer>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { Icons } from "./Icons";
+import { Sizes } from "./Sizes";
+
+const IconsSource = require("!!raw-loader!./Icons");
+const SizesSource = require("!!raw-loader!./Sizes");
+
+export const patch = {
+  name: "Patch",
+  path: "/patch",
+  examples: [
+    {
+      name: "Icons",
+      component: <Icons />,
+      source: IconsSource.default.toString()
+    },
+    {
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.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 }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,144 @@
+import { VuiScatterChart } from "../../../lib";
+
+// Three overlapping clouds of 160 points each — nearly 500 points total — to show a dense scatter.
+const modelA = [
+  { x: 89, y: 0.719 }, { x: 196, y: 0.726 }, { x: 145, y: 0.782 }, { x: 198, y: 0.872 },
+  { x: 152, y: 0.796 }, { x: 130, y: 0.882 }, { x: 162, y: 0.761 }, { x: 101, y: 0.772 },
+  { x: 157, y: 0.805 }, { x: 92, y: 0.853 }, { x: 143, y: 0.854 }, { x: 168, y: 0.849 },
+  { x: 166, y: 0.719 }, { x: 102, y: 0.835 }, { x: 98, y: 0.867 }, { x: 147, y: 0.756 },
+  { x: 81, y: 0.711 }, { x: 168, y: 0.729 }, { x: 149, y: 0.777 }, { x: 138, y: 0.869 },
+  { x: 95, y: 0.859 }, { x: 133, y: 0.734 }, { x: 176, y: 0.75 }, { x: 182, y: 0.835 },
+  { x: 128, y: 0.871 }, { x: 152, y: 0.855 }, { x: 96, y: 0.801 }, { x: 182, y: 0.884 },
+  { x: 186, y: 0.714 }, { x: 94, y: 0.737 }, { x: 109, y: 0.809 }, { x: 100, y: 0.801 },
+  { x: 82, y: 0.861 }, { x: 114, y: 0.735 }, { x: 170, y: 0.815 }, { x: 95, y: 0.864 },
+  { x: 129, y: 0.765 }, { x: 95, y: 0.758 }, { x: 154, y: 0.858 }, { x: 82, y: 0.771 },
+  { x: 197, y: 0.884 }, { x: 143, y: 0.73 }, { x: 198, y: 0.727 }, { x: 88, y: 0.763 },
+  { x: 98, y: 0.714 }, { x: 96, y: 0.833 }, { x: 114, y: 0.848 }, { x: 161, y: 0.733 },
+  { x: 194, y: 0.777 }, { x: 134, y: 0.774 }, { x: 121, y: 0.748 }, { x: 136, y: 0.748 },
+  { x: 137, y: 0.807 }, { x: 82, y: 0.762 }, { x: 191, y: 0.826 }, { x: 192, y: 0.888 },
+  { x: 114, y: 0.845 }, { x: 124, y: 0.859 }, { x: 140, y: 0.873 }, { x: 139, y: 0.796 },
+  { x: 156, y: 0.711 }, { x: 97, y: 0.837 }, { x: 91, y: 0.835 }, { x: 112, y: 0.767 },
+  { x: 171, y: 0.887 }, { x: 126, y: 0.863 }, { x: 89, y: 0.795 }, { x: 109, y: 0.877 },
+  { x: 180, y: 0.839 }, { x: 104, y: 0.876 }, { x: 168, y: 0.752 }, { x: 126, y: 0.82 },
+  { x: 176, y: 0.727 }, { x: 189, y: 0.873 }, { x: 181, y: 0.796 }, { x: 112, y: 0.772 },
+  { x: 190, y: 0.83 }, { x: 174, y: 0.883 }, { x: 89, y: 0.804 }, { x: 198, y: 0.862 },
+  { x: 86, y: 0.887 }, { x: 149, y: 0.802 }, { x: 198, y: 0.857 }, { x: 98, y: 0.767 },
+  { x: 185, y: 0.76 }, { x: 179, y: 0.795 }, { x: 174, y: 0.716 }, { x: 127, y: 0.784 },
+  { x: 170, y: 0.834 }, { x: 192, y: 0.881 }, { x: 143, y: 0.783 }, { x: 115, y: 0.786 },
+  { x: 98, y: 0.834 }, { x: 195, y: 0.786 }, { x: 196, y: 0.824 }, { x: 112, y: 0.774 },
+  { x: 197, y: 0.882 }, { x: 130, y: 0.83 }, { x: 160, y: 0.814 }, { x: 149, y: 0.774 },
+  { x: 196, y: 0.854 }, { x: 119, y: 0.745 }, { x: 176, y: 0.757 }, { x: 161, y: 0.884 },
+  { x: 195, y: 0.788 }, { x: 107, y: 0.803 }, { x: 96, y: 0.856 }, { x: 129, y: 0.806 },
+  { x: 114, y: 0.797 }, { x: 98, y: 0.753 }, { x: 187, y: 0.885 }, { x: 142, y: 0.715 },
+  { x: 160, y: 0.753 }, { x: 128, y: 0.806 }, { x: 157, y: 0.823 }, { x: 135, y: 0.725 },
+  { x: 85, y: 0.845 }, { x: 85, y: 0.776 }, { x: 113, y: 0.788 }, { x: 180, y: 0.736 },
+  { x: 115, y: 0.753 }, { x: 100, y: 0.843 }, { x: 149, y: 0.748 }, { x: 110, y: 0.746 },
+  { x: 168, y: 0.854 }, { x: 133, y: 0.758 }, { x: 100, y: 0.825 }, { x: 124, y: 0.844 },
+  { x: 89, y: 0.805 }, { x: 146, y: 0.752 }, { x: 81, y: 0.845 }, { x: 102, y: 0.742 },
+  { x: 170, y: 0.727 }, { x: 86, y: 0.863 }, { x: 119, y: 0.816 }, { x: 145, y: 0.871 },
+  { x: 83, y: 0.874 }, { x: 182, y: 0.747 }, { x: 92, y: 0.718 }, { x: 176, y: 0.732 },
+  { x: 99, y: 0.819 }, { x: 194, y: 0.88 }, { x: 186, y: 0.739 }, { x: 87, y: 0.88 },
+  { x: 86, y: 0.828 }, { x: 101, y: 0.866 }, { x: 117, y: 0.867 }, { x: 114, y: 0.718 },
+  { x: 100, y: 0.78 }, { x: 197, y: 0.718 }, { x: 172, y: 0.824 }, { x: 154, y: 0.739 },
+  { x: 152, y: 0.729 }, { x: 165, y: 0.773 }, { x: 95, y: 0.715 }, { x: 167, y: 0.857 },
+  { x: 181, y: 0.769 }, { x: 190, y: 0.74 }, { x: 103, y: 0.789 }, { x: 143, y: 0.72 }
+];
+
+const modelB = [
+  { x: 206, y: 0.78 }, { x: 173, y: 0.822 }, { x: 183, y: 0.796 }, { x: 210, y: 0.923 },
+  { x: 296, y: 0.792 }, { x: 254, y: 0.831 }, { x: 292, y: 0.893 }, { x: 277, y: 0.836 },
+  { x: 242, y: 0.831 }, { x: 227, y: 0.839 }, { x: 189, y: 0.873 }, { x: 187, y: 0.912 },
+  { x: 177, y: 0.807 }, { x: 218, y: 0.892 }, { x: 171, y: 0.871 }, { x: 203, y: 0.811 },
+  { x: 263, y: 0.856 }, { x: 198, y: 0.847 }, { x: 178, y: 0.882 }, { x: 242, y: 0.869 },
+  { x: 211, y: 0.77 }, { x: 195, y: 0.802 }, { x: 177, y: 0.895 }, { x: 182, y: 0.911 },
+  { x: 270, y: 0.919 }, { x: 191, y: 0.771 }, { x: 209, y: 0.84 }, { x: 217, y: 0.84 },
+  { x: 218, y: 0.898 }, { x: 241, y: 0.921 }, { x: 273, y: 0.891 }, { x: 299, y: 0.854 },
+  { x: 175, y: 0.925 }, { x: 259, y: 0.808 }, { x: 212, y: 0.787 }, { x: 274, y: 0.83 },
+  { x: 290, y: 0.877 }, { x: 280, y: 0.85 }, { x: 229, y: 0.88 }, { x: 261, y: 0.896 },
+  { x: 263, y: 0.783 }, { x: 249, y: 0.794 }, { x: 174, y: 0.818 }, { x: 252, y: 0.853 },
+  { x: 194, y: 0.86 }, { x: 198, y: 0.813 }, { x: 289, y: 0.864 }, { x: 240, y: 0.871 },
+  { x: 204, y: 0.867 }, { x: 286, y: 0.78 }, { x: 290, y: 0.817 }, { x: 295, y: 0.906 },
+  { x: 166, y: 0.923 }, { x: 224, y: 0.885 }, { x: 181, y: 0.894 }, { x: 266, y: 0.845 },
+  { x: 168, y: 0.849 }, { x: 289, y: 0.876 }, { x: 182, y: 0.877 }, { x: 216, y: 0.918 },
+  { x: 215, y: 0.801 }, { x: 194, y: 0.771 }, { x: 181, y: 0.879 }, { x: 187, y: 0.816 },
+  { x: 292, y: 0.863 }, { x: 280, y: 0.804 }, { x: 195, y: 0.915 }, { x: 192, y: 0.886 },
+  { x: 191, y: 0.778 }, { x: 171, y: 0.923 }, { x: 242, y: 0.785 }, { x: 290, y: 0.832 },
+  { x: 219, y: 0.862 }, { x: 172, y: 0.826 }, { x: 208, y: 0.84 }, { x: 298, y: 0.83 },
+  { x: 204, y: 0.904 }, { x: 218, y: 0.78 }, { x: 291, y: 0.878 }, { x: 167, y: 0.806 },
+  { x: 197, y: 0.904 }, { x: 175, y: 0.849 }, { x: 177, y: 0.846 }, { x: 201, y: 0.91 },
+  { x: 252, y: 0.85 }, { x: 213, y: 0.831 }, { x: 178, y: 0.852 }, { x: 188, y: 0.784 },
+  { x: 299, y: 0.873 }, { x: 227, y: 0.872 }, { x: 252, y: 0.84 }, { x: 204, y: 0.886 },
+  { x: 228, y: 0.814 }, { x: 254, y: 0.901 }, { x: 181, y: 0.817 }, { x: 295, y: 0.911 },
+  { x: 293, y: 0.837 }, { x: 181, y: 0.852 }, { x: 192, y: 0.87 }, { x: 292, y: 0.817 },
+  { x: 205, y: 0.782 }, { x: 205, y: 0.835 }, { x: 171, y: 0.809 }, { x: 282, y: 0.804 },
+  { x: 295, y: 0.844 }, { x: 163, y: 0.773 }, { x: 292, y: 0.849 }, { x: 181, y: 0.779 },
+  { x: 166, y: 0.775 }, { x: 217, y: 0.776 }, { x: 210, y: 0.813 }, { x: 205, y: 0.772 },
+  { x: 194, y: 0.794 }, { x: 198, y: 0.826 }, { x: 211, y: 0.817 }, { x: 215, y: 0.846 },
+  { x: 180, y: 0.821 }, { x: 217, y: 0.857 }, { x: 209, y: 0.789 }, { x: 247, y: 0.89 },
+  { x: 280, y: 0.86 }, { x: 228, y: 0.813 }, { x: 197, y: 0.814 }, { x: 205, y: 0.914 },
+  { x: 187, y: 0.871 }, { x: 291, y: 0.793 }, { x: 234, y: 0.844 }, { x: 262, y: 0.893 },
+  { x: 255, y: 0.818 }, { x: 196, y: 0.776 }, { x: 212, y: 0.794 }, { x: 184, y: 0.895 },
+  { x: 216, y: 0.834 }, { x: 172, y: 0.837 }, { x: 177, y: 0.79 }, { x: 294, y: 0.862 },
+  { x: 215, y: 0.812 }, { x: 287, y: 0.816 }, { x: 205, y: 0.832 }, { x: 196, y: 0.905 },
+  { x: 189, y: 0.832 }, { x: 229, y: 0.773 }, { x: 279, y: 0.834 }, { x: 179, y: 0.822 },
+  { x: 280, y: 0.852 }, { x: 265, y: 0.891 }, { x: 226, y: 0.912 }, { x: 184, y: 0.782 },
+  { x: 278, y: 0.776 }, { x: 232, y: 0.869 }, { x: 182, y: 0.898 }, { x: 191, y: 0.866 },
+  { x: 244, y: 0.9 }, { x: 195, y: 0.776 }, { x: 213, y: 0.84 }, { x: 300, y: 0.881 },
+  { x: 221, y: 0.862 }, { x: 287, y: 0.889 }, { x: 265, y: 0.91 }, { x: 217, y: 0.799 }
+];
+
+const modelC = [
+  { x: 351, y: 0.917 }, { x: 373, y: 0.856 }, { x: 359, y: 0.921 }, { x: 326, y: 0.868 },
+  { x: 270, y: 0.945 }, { x: 339, y: 0.952 }, { x: 389, y: 0.951 }, { x: 296, y: 0.84 },
+  { x: 329, y: 0.951 }, { x: 300, y: 0.897 }, { x: 387, y: 0.903 }, { x: 352, y: 0.935 },
+  { x: 361, y: 0.968 }, { x: 313, y: 0.923 }, { x: 279, y: 0.936 }, { x: 264, y: 0.861 },
+  { x: 346, y: 0.944 }, { x: 305, y: 0.858 }, { x: 269, y: 0.929 }, { x: 303, y: 0.885 },
+  { x: 269, y: 0.848 }, { x: 383, y: 0.919 }, { x: 331, y: 0.901 }, { x: 321, y: 0.934 },
+  { x: 276, y: 0.918 }, { x: 331, y: 0.919 }, { x: 369, y: 0.875 }, { x: 337, y: 0.966 },
+  { x: 337, y: 0.839 }, { x: 343, y: 0.843 }, { x: 332, y: 0.958 }, { x: 240, y: 0.9 },
+  { x: 342, y: 0.956 }, { x: 312, y: 0.884 }, { x: 398, y: 0.967 }, { x: 267, y: 0.882 },
+  { x: 312, y: 0.915 }, { x: 335, y: 0.937 }, { x: 291, y: 0.849 }, { x: 368, y: 0.84 },
+  { x: 326, y: 0.873 }, { x: 336, y: 0.876 }, { x: 369, y: 0.965 }, { x: 393, y: 0.919 },
+  { x: 260, y: 0.958 }, { x: 310, y: 0.834 }, { x: 378, y: 0.864 }, { x: 353, y: 0.851 },
+  { x: 266, y: 0.911 }, { x: 400, y: 0.892 }, { x: 336, y: 0.969 }, { x: 279, y: 0.861 },
+  { x: 279, y: 0.878 }, { x: 246, y: 0.93 }, { x: 394, y: 0.862 }, { x: 283, y: 0.831 },
+  { x: 393, y: 0.922 }, { x: 258, y: 0.878 }, { x: 305, y: 0.877 }, { x: 334, y: 0.913 },
+  { x: 264, y: 0.832 }, { x: 350, y: 0.898 }, { x: 258, y: 0.905 }, { x: 252, y: 0.878 },
+  { x: 362, y: 0.952 }, { x: 301, y: 0.896 }, { x: 250, y: 0.845 }, { x: 352, y: 0.947 },
+  { x: 260, y: 0.913 }, { x: 350, y: 0.917 }, { x: 330, y: 0.969 }, { x: 332, y: 0.895 },
+  { x: 336, y: 0.95 }, { x: 250, y: 0.958 }, { x: 385, y: 0.843 }, { x: 324, y: 0.94 },
+  { x: 262, y: 0.948 }, { x: 318, y: 0.857 }, { x: 345, y: 0.941 }, { x: 308, y: 0.925 },
+  { x: 359, y: 0.899 }, { x: 280, y: 0.851 }, { x: 347, y: 0.849 }, { x: 305, y: 0.966 },
+  { x: 257, y: 0.864 }, { x: 396, y: 0.855 }, { x: 306, y: 0.893 }, { x: 268, y: 0.934 },
+  { x: 326, y: 0.929 }, { x: 288, y: 0.867 }, { x: 391, y: 0.951 }, { x: 325, y: 0.857 },
+  { x: 372, y: 0.901 }, { x: 280, y: 0.85 }, { x: 308, y: 0.86 }, { x: 311, y: 0.956 },
+  { x: 283, y: 0.878 }, { x: 336, y: 0.859 }, { x: 320, y: 0.924 }, { x: 266, y: 0.871 },
+  { x: 364, y: 0.959 }, { x: 336, y: 0.909 }, { x: 373, y: 0.894 }, { x: 335, y: 0.927 },
+  { x: 282, y: 0.862 }, { x: 319, y: 0.923 }, { x: 356, y: 0.839 }, { x: 347, y: 0.907 },
+  { x: 376, y: 0.914 }, { x: 246, y: 0.864 }, { x: 383, y: 0.905 }, { x: 310, y: 0.838 },
+  { x: 316, y: 0.94 }, { x: 244, y: 0.877 }, { x: 248, y: 0.925 }, { x: 371, y: 0.877 },
+  { x: 373, y: 0.89 }, { x: 340, y: 0.831 }, { x: 260, y: 0.831 }, { x: 342, y: 0.898 },
+  { x: 284, y: 0.848 }, { x: 364, y: 0.926 }, { x: 301, y: 0.885 }, { x: 389, y: 0.873 },
+  { x: 259, y: 0.839 }, { x: 271, y: 0.836 }, { x: 326, y: 0.841 }, { x: 363, y: 0.848 },
+  { x: 356, y: 0.868 }, { x: 288, y: 0.964 }, { x: 388, y: 0.876 }, { x: 322, y: 0.937 },
+  { x: 319, y: 0.877 }, { x: 259, y: 0.838 }, { x: 350, y: 0.921 }, { x: 349, y: 0.852 },
+  { x: 330, y: 0.871 }, { x: 372, y: 0.96 }, { x: 314, y: 0.925 }, { x: 267, y: 0.95 },
+  { x: 258, y: 0.897 }, { x: 341, y: 0.934 }, { x: 348, y: 0.957 }, { x: 242, y: 0.857 },
+  { x: 358, y: 0.93 }, { x: 394, y: 0.951 }, { x: 371, y: 0.911 }, { x: 320, y: 0.846 },
+  { x: 357, y: 0.869 }, { x: 348, y: 0.859 }, { x: 337, y: 0.855 }, { x: 342, y: 0.859 },
+  { x: 284, y: 0.853 }, { x: 289, y: 0.967 }, { x: 298, y: 0.958 }, { x: 247, y: 0.938 },
+  { x: 330, y: 0.835 }, { x: 250, y: 0.848 }, { x: 356, y: 0.923 }, { x: 304, y: 0.889 }
+];
+
+export const Dense = () => {
+  return (
+    <VuiScatterChart
+      height={440}
+      series={[
+        { name: "Model A", data: modelA },
+        { name: "Model B", data: modelB },
+        { name: "Model C", data: modelC }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,22 @@
+import { Basic } from "./Basic";
+import { Dense } from "./Dense";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const DenseSource = require("!!raw-loader!./Dense");
+
+export const scatterChart = {
+  name: "Scatter chart",
+  path: "/scatter-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Dense",
+      component: <Dense />,
+      source: DenseSource.default.toString()
+    }
+  ]
+};

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

@@ -0,0 +1,7 @@
+import { VuiSparkline } from "../../../lib";
+
+const data = [{ v: 4 }, { v: 6 }, { v: 5 }, { v: 8 }, { v: 7 }, { v: 10 }, { v: 9 }, { v: 12 }];
+
+export const Basic = () => {
+  return <VuiSparkline data={data} dataKey="v" />;
+};

package/src/docs/pages/sparkline/Inline.tsx

@@ -0,0 +1,21 @@
+import { VuiFlexContainer, VuiFlexItem, VuiSparkline, VuiStat } from "../../../lib";
+
+const queries = [{ v: 320 }, { v: 410 }, { v: 380 }, { v: 520 }, { v: 610 }, { v: 700 }, { v: 740 }];
+const latency = [{ v: 180 }, { v: 172 }, { v: 165 }, { v: 158 }, { v: 150 }, { v: 142 }, { v: 138 }];
+
+// Sparklines sit inline beside the numbers they summarize.
+export const Inline = () => {
+  return (
+    <VuiFlexContainer spacing="xl">
+      <VuiFlexItem grow={false}>
+        <VuiStat title="Queries" text="7,400" />
+        <VuiSparkline data={queries} dataKey="v" />
+      </VuiFlexItem>
+
+      <VuiFlexItem grow={false}>
+        <VuiStat title="p95 latency" text="138ms" />
+        <VuiSparkline data={latency} dataKey="v" variant="bar" color="teal" />
+      </VuiFlexItem>
+    </VuiFlexContainer>
+  );
+};