@vectara/vectara-ui 19.0.0 → 19.2.0

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

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

@@ -0,0 +1,22 @@
+import { Basic } from "./Basic";
+import { Inline } from "./Inline";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const InlineSource = require("!!raw-loader!./Inline");
+
+export const sparkline = {
+  name: "Sparkline",
+  path: "/sparkline",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Inline with stats",
+      component: <Inline />,
+      source: InlineSource.default.toString()
+    }
+  ]
+};

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

@@ -0,0 +1,14 @@
+import { VuiTreeMap } from "../../../lib";
+
+const data = [
+  { name: "Documentation", value: 4200 },
+  { name: "Blog", value: 2100 },
+  { name: "Support tickets", value: 1450 },
+  { name: "Forums", value: 980 },
+  { name: "Release notes", value: 620 },
+  { name: "Changelog", value: 340 }
+];
+
+export const Basic = () => {
+  return <VuiTreeMap data={data} categoryKey="name" valueKey="value" />;
+};

package/src/docs/pages/treeMap/Nested.tsx

@@ -0,0 +1,88 @@
+import { VuiTreeMap } from "../../../lib";
+
+// The same base categories and relative sizes as the Basic example. Each category's value is split
+// across eight nested subcategories so the parents sum to the same totals, keeping their ratios identical.
+const data = [
+  {
+    name: "Documentation",
+    children: [
+      { name: "Documentation 1", value: 826 },
+      { name: "Documentation 2", value: 689 },
+      { name: "Documentation 3", value: 620 },
+      { name: "Documentation 4", value: 551 },
+      { name: "Documentation 5", value: 482 },
+      { name: "Documentation 6", value: 413 },
+      { name: "Documentation 7", value: 344 },
+      { name: "Documentation 8", value: 275 }
+    ]
+  },
+  {
+    name: "Blog",
+    children: [
+      { name: "Blog 1", value: 413 },
+      { name: "Blog 2", value: 344 },
+      { name: "Blog 3", value: 310 },
+      { name: "Blog 4", value: 275 },
+      { name: "Blog 5", value: 241 },
+      { name: "Blog 6", value: 207 },
+      { name: "Blog 7", value: 172 },
+      { name: "Blog 8", value: 138 }
+    ]
+  },
+  {
+    name: "Support tickets",
+    children: [
+      { name: "Support tickets 1", value: 285 },
+      { name: "Support tickets 2", value: 238 },
+      { name: "Support tickets 3", value: 214 },
+      { name: "Support tickets 4", value: 190 },
+      { name: "Support tickets 5", value: 166 },
+      { name: "Support tickets 6", value: 143 },
+      { name: "Support tickets 7", value: 119 },
+      { name: "Support tickets 8", value: 95 }
+    ]
+  },
+  {
+    name: "Forums",
+    children: [
+      { name: "Forums 1", value: 193 },
+      { name: "Forums 2", value: 161 },
+      { name: "Forums 3", value: 145 },
+      { name: "Forums 4", value: 129 },
+      { name: "Forums 5", value: 112 },
+      { name: "Forums 6", value: 96 },
+      { name: "Forums 7", value: 80 },
+      { name: "Forums 8", value: 64 }
+    ]
+  },
+  {
+    name: "Release notes",
+    children: [
+      { name: "Release notes 1", value: 122 },
+      { name: "Release notes 2", value: 102 },
+      { name: "Release notes 3", value: 91 },
+      { name: "Release notes 4", value: 81 },
+      { name: "Release notes 5", value: 71 },
+      { name: "Release notes 6", value: 61 },
+      { name: "Release notes 7", value: 51 },
+      { name: "Release notes 8", value: 41 }
+    ]
+  },
+  {
+    name: "Changelog",
+    children: [
+      { name: "Changelog 1", value: 67 },
+      { name: "Changelog 2", value: 56 },
+      { name: "Changelog 3", value: 50 },
+      { name: "Changelog 4", value: 45 },
+      { name: "Changelog 5", value: 39 },
+      { name: "Changelog 6", value: 33 },
+      { name: "Changelog 7", value: 28 },
+      { name: "Changelog 8", value: 22 }
+    ]
+  }
+];
+
+export const Nested = () => {
+  return <VuiTreeMap data={data} categoryKey="name" valueKey="value" childrenKey="children" height={440} />;
+};

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

@@ -0,0 +1,22 @@
+import { Basic } from "./Basic";
+import { Nested } from "./Nested";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const NestedSource = require("!!raw-loader!./Nested");
+
+export const treeMap = {
+  name: "Tree map",
+  path: "/tree-map",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Nested",
+      component: <Nested />,
+      source: NestedSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -3,6 +3,7 @@ import { accordion } from "./pages/accordion";
 import { accountButton } from "./pages/accountButton";
 import { app } from "./pages/app";
 import { badge } from "./pages/badge";
+import { barChart } from "./pages/barChart";
 import { button } from "./pages/button";
 import { callout } from "./pages/callout";
 import { card } from "./pages/card";
@@ -11,6 +12,7 @@ import { checkbox } from "./pages/checkbox";
 import { chip } from "./pages/chip";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
+import { composedChart } from "./pages/composedChart";
 import { colorPalette } from "./pages/colorPalette";
 import { complexConfigurationButton } from "./pages/complexConfigurationButton";
 import { composer } from "./pages/composer";
@@ -34,6 +36,7 @@ import { inProgress } from "./pages/inProgress";
 import { input } from "./pages/input";
 import { itemsInput } from "./pages/itemsInput";
 import { label } from "./pages/label";
+import { lineChart } from "./pages/lineChart";
 import { link } from "./pages/link";
 import { list } from "./pages/list";
 import { menu } from "./pages/menu";
@@ -44,17 +47,20 @@ import { optionsList } from "./pages/optionsList";
 import { pagination } from "./pages/pagination";
 import { panel } from "./pages/panel";
 import { patch } from "./pages/patch";
+import { pieChart } from "./pages/pieChart";
 import { popover } from "./pages/popover";
 import { progressBar } from "./pages/progressBar";
 import { prompt } from "./pages/prompt";
 import { radioButton } from "./pages/radioButton";
 import { searchInput } from "./pages/searchInput";
 import { searchResult } from "./pages/searchResult";
+import { scatterChart } from "./pages/scatterChart";
 import { searchSelect } from "./pages/searchSelect";
 import { select } from "./pages/select";
 import { setting } from "./pages/setting";
 import { menuList } from "./pages/menuList";
 import { spacer } from "./pages/spacer";
+import { sparkline } from "./pages/sparkline";
 import { spinner } from "./pages/spinner";
 import { stat } from "./pages/stat";
 import { status } from "./pages/status";
@@ -73,6 +79,7 @@ import { textArea } from "./pages/textArea";
 import { theme } from "./pages/theme";
 import { portalContainer } from "./pages/portalContainer";
 import { timeline } from "./pages/timeline";
+import { treeMap } from "./pages/treeMap";
 import { toggle } from "./pages/toggle";
 import { tooltip } from "./pages/tooltip";
 import { topicButton } from "./pages/topicButton";
@@ -162,6 +169,10 @@ export const categories: Category[] = [
       searchSelect
     ]
   },
+  {
+    name: "Data visualization",
+    pages: [barChart, lineChart, pieChart, scatterChart, composedChart, treeMap, sparkline]
+  },
   {
     name: "Utils",
     pages: [errorBoundary, truncate]