@quantumwake/terminal-ux-dashboard-components 0.1.19 → 0.1.20

package/dist/index.d.cts

@@ -104,6 +104,12 @@ declare const shapeChartData: (chartType: ChartType, rows: Row[], { yFields }?:
 type LegendAnchor = 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
 type LegendPosition = 'start' | 'middle' | 'end';
 type TitleAlign = 'left' | 'center' | 'right';
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
 interface ChartStyle {
     background: string;
     textColor: string;
@@ -135,8 +141,23 @@ interface ChartStyle {
     titleBold: boolean;
     titleBackground: string;
     titleColor: string;
+    height: number;
+    margin: Partial<ChartMargin> | null;
+    maxXTicks: number;
+    seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
+declare const DEFAULT_SERIES_COLORS: string[];
+declare const SERIES_OVERFLOW_COLOR = "#707078";
+declare const seriesColor: (i: number, style?: Partial<ChartStyle> | null) => string;
+declare const chartSizing: (style: Partial<ChartStyle> | null | undefined, defaultMargin: ChartMargin) => {
+    frameClass: string;
+    frameStyle: {
+        height?: number;
+    };
+    margin: ChartMargin;
+};
+declare function thinTicks<T>(values: T[], max: number): T[] | undefined;
 declare const LEGEND_ANCHORS: LegendAnchor[];
 declare const withStyleDefaults: (style?: Partial<ChartStyle> | null) => ChartStyle;
 declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
@@ -311,6 +332,16 @@ interface LineViewProps {
 }
 declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
 
+interface SparklineViewProps {
+    /** The series, oldest first. */
+    data: number[];
+    /** Viewbox height in px (the svg scales to its container's width). */
+    height?: number;
+    /** Line + area hue. */
+    color?: string;
+}
+declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
+
 interface ScatterSerie {
     id: string;
     data: {
@@ -606,4 +637,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.d.ts

@@ -104,6 +104,12 @@ declare const shapeChartData: (chartType: ChartType, rows: Row[], { yFields }?:
 type LegendAnchor = 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
 type LegendPosition = 'start' | 'middle' | 'end';
 type TitleAlign = 'left' | 'center' | 'right';
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
 interface ChartStyle {
     background: string;
     textColor: string;
@@ -135,8 +141,23 @@ interface ChartStyle {
     titleBold: boolean;
     titleBackground: string;
     titleColor: string;
+    height: number;
+    margin: Partial<ChartMargin> | null;
+    maxXTicks: number;
+    seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
+declare const DEFAULT_SERIES_COLORS: string[];
+declare const SERIES_OVERFLOW_COLOR = "#707078";
+declare const seriesColor: (i: number, style?: Partial<ChartStyle> | null) => string;
+declare const chartSizing: (style: Partial<ChartStyle> | null | undefined, defaultMargin: ChartMargin) => {
+    frameClass: string;
+    frameStyle: {
+        height?: number;
+    };
+    margin: ChartMargin;
+};
+declare function thinTicks<T>(values: T[], max: number): T[] | undefined;
 declare const LEGEND_ANCHORS: LegendAnchor[];
 declare const withStyleDefaults: (style?: Partial<ChartStyle> | null) => ChartStyle;
 declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
@@ -311,6 +332,16 @@ interface LineViewProps {
 }
 declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
 
+interface SparklineViewProps {
+    /** The series, oldest first. */
+    data: number[];
+    /** Viewbox height in px (the svg scales to its container's width). */
+    height?: number;
+    /** Line + area hue. */
+    color?: string;
+}
+declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
+
 interface ScatterSerie {
     id: string;
     data: {
@@ -606,4 +637,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
+import { createContext, useContext, useMemo, useId, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { interpolateRdYlGn } from 'd3-scale-chromatic';
 import { ResponsiveBar } from '@nivo/bar';
@@ -268,8 +268,54 @@ var DEFAULT_CHART_STYLE = {
   titleAlign: "left",
   titleBold: false,
   titleBackground: "",
-  titleColor: ""
+  titleColor: "",
+  // Chart frame + series color model.
+  height: 0,
+  margin: null,
+  maxXTicks: 0,
+  seriesColors: []
 };
+var DEFAULT_SERIES_COLORS = [
+  "#3987e5",
+  // blue
+  "#d95926",
+  // orange
+  "#199e70",
+  // aqua
+  "#c98500",
+  // yellow
+  "#d55181",
+  // magenta
+  "#008300",
+  // green
+  "#9085e9",
+  // violet
+  "#e66767"
+  // red
+];
+var SERIES_OVERFLOW_COLOR = "#707078";
+var seriesColor = (i, style) => {
+  const s = withStyleDefaults(style);
+  const palette = s.seriesColors.length ? s.seriesColors : DEFAULT_SERIES_COLORS;
+  return i < palette.length ? palette[i] : SERIES_OVERFLOW_COLOR;
+};
+var chartSizing = (style, defaultMargin) => {
+  const s = withStyleDefaults(style);
+  return {
+    frameClass: s.height > 0 ? "w-full" : "h-full w-full min-h-[160px]",
+    frameStyle: s.height > 0 ? { height: s.height } : {},
+    margin: { ...defaultMargin, ...s.margin || {} }
+  };
+};
+function thinTicks(values, max) {
+  if (max <= 0 || values.length <= max) return void 0;
+  if (max === 1) return [values[values.length - 1]];
+  const picked = [];
+  for (let i = 0; i < max; i++) {
+    picked.push(values[Math.round(i * (values.length - 1) / (max - 1))]);
+  }
+  return [...new Set(picked)];
+}
 var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
 var withStyleDefaults = (style) => ({
   ...DEFAULT_CHART_STYLE,
@@ -528,15 +574,17 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
     return Object.entries(groups).map(([key, recs]) => ({ group: key, value: aggregate(recs, valueColumn, aggFn) })).sort((a, b) => b.value - a.value).slice(0, 50);
   }, [records, groupColumn, valueColumn, aggFn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
       data,
       keys: ["value"],
       indexBy: "group",
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       padding: 0.3,
-      colors: ["rgba(74, 222, 128, 0.8)"],
+      colors: [s.seriesColors[0] || "rgba(74, 222, 128, 0.8)"],
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
       axisBottom: makeAxis(style, "x", groupColumn),
       axisLeft: makeAxis(style, "y", valueColumn, { numeric: true }),
@@ -560,16 +608,19 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [records, groupColumn, presetData]);
   const data = presetData || computed;
   const legend = legendConfig(style);
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 120, bottom: 20, left: 20 });
+  const colorById = new Map(data.map((d, i) => [d.id, seriesColor(i, s)]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsivePie,
     {
       data,
-      margin: { top: 20, right: 120, bottom: 20, left: 20 },
+      margin,
       innerRadius: 0.4,
       padAngle: 1,
       cornerRadius: 3,
       activeOuterRadiusOffset: 8,
-      colors: { scheme: "set2" },
+      colors: ((d) => colorById.get(d.id)),
       borderWidth: 1,
       borderColor: { from: "color", modifiers: [["darker", 0.2]] },
       arcLinkLabelsSkipAngle: 10,
@@ -596,29 +647,54 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  const colorById = new Map(data.map((serie, i) => [
+    serie.id,
+    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
+  ]));
+  const tickValues = thinTicks(data[0]?.data.map((d) => d.x) ?? [], s.maxXTicks);
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveLine,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "point" },
       yScale: { type: "linear", min: "auto", max: "auto" },
       curve: "monotoneX",
       enableArea: true,
       areaOpacity: 0.15,
-      colors: ["rgba(96, 165, 250, 0.9)"],
+      colors: ((serie) => colorById.get(serie.id)),
       pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
       pointColor: { theme: "background" },
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: makeAxis(style, "x", xColumn),
+      axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       theme: buildNivoTheme(style)
     }
   ) });
 }
+function SparklineView({ data, height = 56, color = "#3987e5" }) {
+  const gradientId = useId();
+  const width = 260;
+  const pts = data && data.length ? data : [0];
+  const max = Math.max(...pts, 1);
+  const dx = pts.length > 1 ? width / (pts.length - 1) : width;
+  const xy = (v, i) => [i * dx, height - v / max * (height - 4) - 2];
+  const line = pts.map((v, i) => `${i === 0 ? "M" : "L"} ${xy(v, i)[0].toFixed(1)} ${xy(v, i)[1].toFixed(1)}`).join(" ");
+  const area = `${line} L ${width} ${height} L 0 ${height} Z`;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height, className: "w-full", preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.25" }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gradientId})` }),
+    /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })
+  ] });
+}
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
@@ -626,14 +702,20 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  const colorById = new Map(data.map((serie, i) => [
+    serie.id,
+    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(167, 139, 250, 0.7)"
+  ]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveScatterPlot,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "linear", min: "auto", max: "auto" },
       yScale: { type: "linear", min: "auto", max: "auto" },
-      colors: ["rgba(167, 139, 250, 0.7)"],
+      colors: ((serie) => colorById.get(serie.serieId ?? serie.id ?? "")),
       nodeSize: 6,
       axisBottom: makeAxis(style, "x", xColumn, { numeric: true }),
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
@@ -729,8 +811,8 @@ function HeatmapView({
   if (!data.length || !data[0].data.length) {
     return /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
   }
-  const margin = showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 };
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data,
@@ -884,11 +966,12 @@ function HeatmapPlusView({
   }
   const { nivoData, t } = built;
   const tAt = (serieId, x) => t.get(cellKey(serieId, x)) ?? 0;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data: nivoData,
-      margin: { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 },
+      margin,
       valueFormat: ((v) => fmtNum2(v)),
       axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
       axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
@@ -2900,6 +2983,6 @@ function DataExplorer({
   ] });
 }
 
-export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, ScatterView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, SERIES_OVERFLOW_COLOR, ScatterView, SparklineView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map