@perses-dev/timeseries-table-plugin 0.6.0 → 0.7.0

package/lib/components/DataTable.js

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
-import { Alert, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+import { useMemo } from 'react';
+import { Alert, Box, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
 import { SeriesName } from './SeriesName';
-import { HistogramChart } from './HistogramChart';
+import { EmbeddedPanel } from './EmbeddedPanel';
 const MAX_FORMATABLE_SERIES = 1000;
 /**
  * Designed to display timeseries data in a prometheus like table format.
@@ -23,14 +23,15 @@ const MAX_FORMATABLE_SERIES = 1000;
  * https://github.com/prometheus/prometheus/blob/2524a915915d7eb1b1207152d2e0ce5771193404/web/ui/react-app/src/pages/graph/DataTable.tsx
  * @param result timeseries query result
  * @constructor
- */ export const DataTable = ({ result })=>{
-    const series = useMemo(()=>result.flatMap((d)=>d.data).flatMap((d)=>d?.series || []), [
-        result
+ */ export const DataTable = ({ queryResults })=>{
+    const series = useMemo(()=>queryResults.flatMap((d)=>d.data).flatMap((d)=>d?.series || []), [
+        queryResults
     ]);
-    const rows = useMemo(()=>buildRows(series), [
-        series
+    const rows = useMemo(()=>buildRows(series, queryResults), [
+        series,
+        queryResults
     ]);
-    if (!result) {
+    if (!queryResults) {
         return /*#__PURE__*/ _jsx(Typography, {
             children: "No data"
         });
@@ -54,7 +55,7 @@ const MAX_FORMATABLE_SERIES = 1000;
         ]
     });
 };
-function buildRows(series) {
+function buildRows(series, queryResults) {
     const isFormatted = series.length < MAX_FORMATABLE_SERIES; // only format series names if we have less than 1000 series for performance reasons
     return series.map((s, seriesIdx)=>{
         const displayTimeStamps = (s.values?.length ?? 0) > 1;
@@ -72,39 +73,61 @@ function buildRows(series) {
                 ]
             }, valIdx);
         }) : [];
-        const histogramsAndTimes = s.histograms ? s.histograms.map((h, hisIdx)=>{
-            return /*#__PURE__*/ _jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsx(HistogramChart, {
-                        width: 400,
-                        height: 200,
-                        data: {
-                            buckets: h[1].buckets
-                        }
-                    }),
-                    " ",
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        children: [
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                children: [
-                                    "Total count: ",
-                                    h[1].count
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                children: [
-                                    "Sum: ",
-                                    h[1].sum
+        let histogramsAndTimes = null;
+        if (s.histograms && s.histograms.length > 0) {
+            // Query results contains multiple series, create a new query result with only the current series
+            const seriesQueryResult = {
+                ...queryResults[0],
+                data: {
+                    ...queryResults[0].data,
+                    series: [
+                        queryResults[0].data.series[seriesIdx]
+                    ]
+                }
+            };
+            histogramsAndTimes = s.histograms.map((h, hisIdx)=>{
+                return /*#__PURE__*/ _jsxs(Stack, {
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            width: 400,
+                            height: 200,
+                            children: /*#__PURE__*/ _jsx(EmbeddedPanel, {
+                                kind: "HistogramChart",
+                                spec: {
+                                    unit: 'decimal',
+                                    width: 400,
+                                    height: 200
+                                },
+                                queryResults: [
+                                    seriesQueryResult
                                 ]
                             })
-                        ]
-                    }),
-                    histogramTable(h[1])
-                ]
-            }, -hisIdx);
-        }) : [];
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    children: [
+                                        "Total count: ",
+                                        h[1].count
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    children: [
+                                        "Sum: ",
+                                        h[1].sum
+                                    ]
+                                })
+                            ]
+                        }),
+                        histogramTable(h[1])
+                    ]
+                }, -hisIdx);
+            });
+        }
         return /*#__PURE__*/ _jsxs(TableRow, {
             style: {
                 whiteSpace: 'pre'

package/lib/components/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DataTable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Fragment, ReactElement, ReactNode, useMemo } from 'react';\nimport { Alert, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';\nimport { TimeSeries, TimeSeriesData, BucketTuple, TimeSeriesHistogramTuple, HistogramValue } from '@perses-dev/core';\nimport { PanelData } from '@perses-dev/plugin-system';\nimport { SeriesName } from './SeriesName';\nimport { HistogramChart } from './HistogramChart';\n\nconst MAX_FORMATABLE_SERIES = 1000;\n\nexport interface DataTableProps {\n  result: Array<PanelData<TimeSeriesData>>;\n}\n\n/**\n * Designed to display timeseries data in a prometheus like table format.\n * The first column will contain the metric name and label combination, and the second column will contain the values.\n * This is inspired by prometheus DataTable.\n * https://github.com/prometheus/prometheus/blob/2524a915915d7eb1b1207152d2e0ce5771193404/web/ui/react-app/src/pages/graph/DataTable.tsx\n * @param result timeseries query result\n * @constructor\n */\nexport const DataTable = ({ result }: DataTableProps): ReactElement | null => {\n  const series = useMemo(() => result.flatMap((d) => d.data).flatMap((d) => d?.series || []), [result]);\n  const rows = useMemo(() => buildRows(series), [series]);\n\n  if (!result) {\n    return <Typography>No data</Typography>;\n  }\n\n  return (\n    <>\n      {series.length >= MAX_FORMATABLE_SERIES && (\n        <Alert severity=\"warning\">\n          Showing more than {MAX_FORMATABLE_SERIES} series, turning off label formatting for performance reasons.\n        </Alert>\n      )}\n      <Table className=\"data-table\">\n        <TableBody>{rows}</TableBody>\n      </Table>\n    </>\n  );\n};\n\nfunction buildRows(series: TimeSeries[]): ReactNode[] {\n  const isFormatted = series.length < MAX_FORMATABLE_SERIES; // only format series names if we have less than 1000 series for performance reasons\n  return series.map((s, seriesIdx) => {\n    const displayTimeStamps = (s.values?.length ?? 0) > 1;\n    const valuesAndTimes = s.values\n      ? s.values.map((v, valIdx) => {\n          return (\n            <Typography key={valIdx}>\n              {v[1]} {displayTimeStamps && <span>@{v[0]}</span>}\n            </Typography>\n          );\n        })\n      : [];\n    const histogramsAndTimes = s.histograms\n      ? s.histograms.map((h: TimeSeriesHistogramTuple, hisIdx: number) => {\n          return (\n            <Fragment key={-hisIdx}>\n              <HistogramChart width={400} height={200} data={{ buckets: h[1].buckets! }} /> {/* TODO: calc size ? */}\n              <Stack flexDirection=\"row\" justifyContent=\"space-between\">\n                <Typography>Total count: {h[1].count}</Typography>\n                <Typography>Sum: {h[1].sum}</Typography>\n              </Stack>\n              {histogramTable(h[1])}\n            </Fragment>\n          );\n        })\n      : [];\n    return (\n      <TableRow style={{ whiteSpace: 'pre' }} key={seriesIdx}>\n        <TableCell>\n          <SeriesName name={s.name} formattedName={s.formattedName} labels={s.labels} isFormatted={isFormatted} />\n        </TableCell>\n        <TableCell>{s.histograms ? histogramsAndTimes : valuesAndTimes}</TableCell>\n      </TableRow>\n    );\n  });\n}\n\nconst leftDelim = (br: number): string => (br === 3 || br === 1 ? '[' : '(');\nconst rightDelim = (br: number): string => (br === 3 || br === 0 ? ']' : ')');\n\nexport const bucketRangeString = ([boundaryRule, leftBoundary, rightBoundary]: [\n  number,\n  string,\n  string,\n  string,\n]): string => {\n  return `${leftDelim(boundaryRule)}${leftBoundary} -> ${rightBoundary}${rightDelim(boundaryRule)}`;\n};\n\nexport const histogramTable = (h: HistogramValue): ReactNode => (\n  <Table>\n    <TableHead>\n      <TableRow>\n        <TableCell style={{ textAlign: 'center' }} colSpan={2}>\n          Histogram Sample\n        </TableCell>\n      </TableRow>\n    </TableHead>\n    <TableBody>\n      <TableRow>\n        <TableCell>Range</TableCell>\n        <TableCell>Count</TableCell>\n      </TableRow>\n      {h.buckets?.map((b: BucketTuple, i: number) => (\n        <TableRow key={i}>\n          <TableCell>{bucketRangeString(b)}</TableCell>\n          <TableCell>{b[3]}</TableCell>\n        </TableRow>\n      ))}\n    </TableBody>\n  </Table>\n);\n"],"names":["Fragment","useMemo","Alert","Stack","Table","TableBody","TableCell","TableHead","TableRow","Typography","SeriesName","HistogramChart","MAX_FORMATABLE_SERIES","DataTable","result","series","flatMap","d","data","rows","buildRows","length","severity","className","isFormatted","map","s","seriesIdx","displayTimeStamps","values","valuesAndTimes","v","valIdx","span","histogramsAndTimes","histograms","h","hisIdx","width","height","buckets","flexDirection","justifyContent","count","sum","histogramTable","style","whiteSpace","name","formattedName","labels","leftDelim","br","rightDelim","bucketRangeString","boundaryRule","leftBoundary","rightBoundary","textAlign","colSpan","b","i"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DataTable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useMemo } from 'react';\nimport { Alert, Box, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';\nimport { TimeSeries, TimeSeriesData, BucketTuple, TimeSeriesHistogramTuple, HistogramValue } from '@perses-dev/core';\nimport { PanelData } from '@perses-dev/plugin-system';\nimport { SeriesName } from './SeriesName';\nimport { EmbeddedPanel } from './EmbeddedPanel';\n\nconst MAX_FORMATABLE_SERIES = 1000;\n\nexport interface DataTableProps {\n  queryResults: Array<PanelData<TimeSeriesData>>;\n}\n\n/**\n * Designed to display timeseries data in a prometheus like table format.\n * The first column will contain the metric name and label combination, and the second column will contain the values.\n * This is inspired by prometheus DataTable.\n * https://github.com/prometheus/prometheus/blob/2524a915915d7eb1b1207152d2e0ce5771193404/web/ui/react-app/src/pages/graph/DataTable.tsx\n * @param result timeseries query result\n * @constructor\n */\nexport const DataTable = ({ queryResults }: DataTableProps): ReactElement | null => {\n  const series = useMemo(() => queryResults.flatMap((d) => d.data).flatMap((d) => d?.series || []), [queryResults]);\n  const rows = useMemo(() => buildRows(series, queryResults), [series, queryResults]);\n\n  if (!queryResults) {\n    return <Typography>No data</Typography>;\n  }\n\n  return (\n    <>\n      {series.length >= MAX_FORMATABLE_SERIES && (\n        <Alert severity=\"warning\">\n          Showing more than {MAX_FORMATABLE_SERIES} series, turning off label formatting for performance reasons.\n        </Alert>\n      )}\n      <Table className=\"data-table\">\n        <TableBody>{rows}</TableBody>\n      </Table>\n    </>\n  );\n};\n\nfunction buildRows(series: TimeSeries[], queryResults: Array<PanelData<TimeSeriesData>>): ReactNode[] {\n  const isFormatted = series.length < MAX_FORMATABLE_SERIES; // only format series names if we have less than 1000 series for performance reasons\n  return series.map((s, seriesIdx) => {\n    const displayTimeStamps = (s.values?.length ?? 0) > 1;\n    const valuesAndTimes = s.values\n      ? s.values.map((v, valIdx) => {\n          return (\n            <Typography key={valIdx}>\n              {v[1]} {displayTimeStamps && <span>@{v[0]}</span>}\n            </Typography>\n          );\n        })\n      : [];\n\n    let histogramsAndTimes = null;\n    if (s.histograms && s.histograms.length > 0) {\n      // Query results contains multiple series, create a new query result with only the current series\n      const seriesQueryResult: PanelData<TimeSeriesData> = {\n        ...queryResults[0]!,\n        data: {\n          ...queryResults[0]!.data,\n          series: [queryResults[0]!.data.series[seriesIdx]!],\n        },\n      };\n\n      histogramsAndTimes = s.histograms.map((h: TimeSeriesHistogramTuple, hisIdx: number) => {\n        return (\n          <Stack alignItems=\"center\" key={-hisIdx}>\n            <Box width={400} height={200}>\n              <EmbeddedPanel\n                kind=\"HistogramChart\"\n                spec={{ unit: 'decimal', width: 400, height: 200 }}\n                queryResults={[seriesQueryResult]}\n              />\n            </Box>\n            <Stack flexDirection=\"row\" justifyContent=\"space-between\" width=\"100%\">\n              <Typography>Total count: {h[1].count}</Typography>\n              <Typography>Sum: {h[1].sum}</Typography>\n            </Stack>\n            {histogramTable(h[1])}\n          </Stack>\n        );\n      });\n    }\n    return (\n      <TableRow style={{ whiteSpace: 'pre' }} key={seriesIdx}>\n        <TableCell>\n          <SeriesName name={s.name} formattedName={s.formattedName} labels={s.labels} isFormatted={isFormatted} />\n        </TableCell>\n        <TableCell>{s.histograms ? histogramsAndTimes : valuesAndTimes}</TableCell>\n      </TableRow>\n    );\n  });\n}\n\nconst leftDelim = (br: number): string => (br === 3 || br === 1 ? '[' : '(');\nconst rightDelim = (br: number): string => (br === 3 || br === 0 ? ']' : ')');\n\nexport const bucketRangeString = ([boundaryRule, leftBoundary, rightBoundary]: [\n  number,\n  string,\n  string,\n  string,\n]): string => {\n  return `${leftDelim(boundaryRule)}${leftBoundary} -> ${rightBoundary}${rightDelim(boundaryRule)}`;\n};\n\nexport const histogramTable = (h: HistogramValue): ReactNode => (\n  <Table>\n    <TableHead>\n      <TableRow>\n        <TableCell style={{ textAlign: 'center' }} colSpan={2}>\n          Histogram Sample\n        </TableCell>\n      </TableRow>\n    </TableHead>\n    <TableBody>\n      <TableRow>\n        <TableCell>Range</TableCell>\n        <TableCell>Count</TableCell>\n      </TableRow>\n      {h.buckets?.map((b: BucketTuple, i: number) => (\n        <TableRow key={i}>\n          <TableCell>{bucketRangeString(b)}</TableCell>\n          <TableCell>{b[3]}</TableCell>\n        </TableRow>\n      ))}\n    </TableBody>\n  </Table>\n);\n"],"names":["useMemo","Alert","Box","Stack","Table","TableBody","TableCell","TableHead","TableRow","Typography","SeriesName","EmbeddedPanel","MAX_FORMATABLE_SERIES","DataTable","queryResults","series","flatMap","d","data","rows","buildRows","length","severity","className","isFormatted","map","s","seriesIdx","displayTimeStamps","values","valuesAndTimes","v","valIdx","span","histogramsAndTimes","histograms","seriesQueryResult","h","hisIdx","alignItems","width","height","kind","spec","unit","flexDirection","justifyContent","count","sum","histogramTable","style","whiteSpace","name","formattedName","labels","leftDelim","br","rightDelim","bucketRangeString","boundaryRule","leftBoundary","rightBoundary","textAlign","colSpan","buckets","b","i"],"mappings":"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"}

package/lib/components/EmbeddedPanel.d.ts

@@ -0,0 +1,10 @@
+import { PanelData } from '@perses-dev/plugin-system';
+import { QueryDataType, UnknownSpec } from '@perses-dev/core';
+interface EmbeddedPanelProps {
+    kind: string;
+    spec: UnknownSpec;
+    queryResults: Array<PanelData<QueryDataType>>;
+}
+export declare function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmbeddedPanel.d.ts.map

package/lib/components/EmbeddedPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmbeddedPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK9D,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAS7E"}

package/lib/components/EmbeddedPanel.js

@@ -0,0 +1,39 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PanelPluginLoader } from '@perses-dev/dashboards';
+import useResizeObserver from 'use-resize-observer';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+export function EmbeddedPanel({ kind, spec, queryResults }) {
+    const { ref, width = 1, height = 1 } = useResizeObserver();
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        style: {
+            height: '100%'
+        },
+        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(PanelPluginLoader, {
+                kind: kind,
+                contentDimensions: {
+                    width,
+                    height
+                },
+                spec: spec,
+                queryResults: queryResults
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=EmbeddedPanel.js.map

package/lib/components/EmbeddedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EmbeddedPanel.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData } from '@perses-dev/plugin-system';\nimport { QueryDataType, UnknownSpec } from '@perses-dev/core';\nimport { PanelPluginLoader } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps) {\n  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();\n  return (\n    <div ref={ref} style={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PanelPluginLoader kind={kind} contentDimensions={{ width, height }} spec={spec} queryResults={queryResults} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["PanelPluginLoader","useResizeObserver","ErrorAlert","ErrorBoundary","EmbeddedPanel","kind","spec","queryResults","ref","width","height","div","style","FallbackComponent","contentDimensions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAQnE,OAAO,SAASC,cAAc,EAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAsB;IAC5E,MAAM,EAAEC,GAAG,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC,EAAE,GAAGT;IACvC,qBACE,KAACU;QAAIH,KAAKA;QAAKI,OAAO;YAAEF,QAAQ;QAAO;kBACrC,cAAA,KAACP;YAAcU,mBAAmBX;sBAChC,cAAA,KAACF;gBAAkBK,MAAMA;gBAAMS,mBAAmB;oBAAEL;oBAAOC;gBAAO;gBAAGJ,MAAMA;gBAAMC,cAAcA;;;;AAIvG"}

package/lib/components/index.d.ts

@@ -1,4 +1,3 @@
 export * from './DataTable';
-export * from './HistogramChart';
 export * from './SeriesName';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/lib/components/index.js

@@ -1,5 +1,4 @@
 export * from './DataTable';
-export * from './HistogramChart';
 export * from './SeriesName';
 
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './DataTable';\nexport * from './HistogramChart';\nexport * from './SeriesName';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,eAAe"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './DataTable';\nexport * from './SeriesName';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,eAAe"}