@sproutsocial/seeds-react-data-viz 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,11 +1,118 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { Table } from '@sproutsocial/racine';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import { Table } from '@sproutsocial/racine';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
-import { Options, TimeTicksInfoObject, AxisLabelsFormatterContextObject, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
+
+interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
+    unitName: "hour" | "day" | "week" | "month" | "year";
+}
+interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterContextObject {
+    tickPositionInfo: ExtendedTimeTicksInfoObject;
+}
+type TypeChartDataPoint = Readonly<{
+    x: number;
+    y: number | null;
+}>;
+type TypeChartDataStyles = Readonly<{
+    color?: TypeChartStyleColor;
+}>;
+type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
+type TypeChartTooltipDateFormatter = ({ x }: {
+    x: number;
+}) => ReactNode;
+type TypeChartTooltipProps = Readonly<{
+    data: ReadonlyArray<Readonly<{
+        color: TypeChartStyleColor;
+        name: string;
+        value: number | null;
+        icon?: ReactNode;
+    }>>;
+    x: number;
+}>;
+type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
+    y: number;
+    yValues: ReadonlyArray<number>;
+}>) => string;
+type TypeChartStyleColor = string;
+type TypeChartStylePattern = "solid" | "dashed";
+type TypeChartStyleHasOnClick = boolean;
+
+type TypeAreaChartProps = Readonly<{
+    data: ReadonlyArray<Readonly<{
+        name: string;
+        points: ReadonlyArray<TypeChartDataPoint>;
+        icon?: ReactNode;
+        styles?: TypeChartDataStyles;
+    }>>;
+    invalidNumberLabel: ReactNode;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    tooltipDateFormatter: TypeChartTooltipDateFormatter;
+    tooltipTotalLabel: ReactNode;
+    currency?: string;
+    numberFormat?: TypeChartNumberFormat;
+    tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
+        total: number | null;
+    }>) => ReactNode;
+    yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
+    onClick?: ({ x }: Readonly<{
+        x: number;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
+}>;
+declare const AreaChart: react.NamedExoticComponent<Readonly<{
+    data: ReadonlyArray<Readonly<{
+        name: string;
+        points: ReadonlyArray<TypeChartDataPoint>;
+        icon?: ReactNode;
+        styles?: TypeChartDataStyles;
+    }>>;
+    invalidNumberLabel: ReactNode;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    tooltipDateFormatter: TypeChartTooltipDateFormatter;
+    tooltipTotalLabel: ReactNode;
+    currency?: string;
+    numberFormat?: TypeChartNumberFormat;
+    tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
+        total: number | null;
+    }>) => ReactNode;
+    yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
+    onClick?: ({ x }: Readonly<{
+        x: number;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
+}>>;
+
+type TypeLegendLabel = Readonly<{
+    content: React.ReactNode;
+    color?: string;
+}>;
+type TypeChartLegendProps = Readonly<{
+    legendLabels: ReadonlyArray<TypeLegendLabel>;
+    containerBoxProps?: TypeBoxProps;
+    stacked?: boolean;
+}>;
+declare const ChartLegend: react.NamedExoticComponent<Readonly<{
+    legendLabels: ReadonlyArray<TypeLegendLabel>;
+    containerBoxProps?: TypeBoxProps;
+    stacked?: boolean;
+}>>;
+
+type TypeChartLegendLabelProps = Readonly<{
+    children: TypeLegendLabel["content"];
+    color: TypeLegendLabel["color"];
+    containerBoxProps?: TypeBoxProps;
+}>;
+declare const ChartLegendLabel: react.NamedExoticComponent<Readonly<{
+    children: TypeLegendLabel["content"];
+    color: TypeLegendLabel["color"];
+    containerBoxProps?: TypeBoxProps;
+}>>;
 
 type TypeChartTableProps = Readonly<{
     rows: ReadonlyArray<{
@@ -28,6 +135,30 @@ declare const ChartTable: react.NamedExoticComponent<Readonly<{
     }>;
 }>>;
 
+declare const ChartTooltip: react.NamedExoticComponent<Readonly<{
+    children: React.ReactNode;
+}>>;
+
+type TypeChartTooltipFooterProps = {
+    children: React.ReactNode;
+};
+declare const ChartTooltipFooter: react.NamedExoticComponent<TypeChartTooltipFooterProps>;
+
+type TypeChartTooltipHeaderProps = {
+    children: React.ReactNode;
+};
+declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHeaderProps>;
+
+type TypeChartTooltipTableProps = {
+    rows: TypeChartTableProps["rows"];
+};
+declare const ChartTooltipTable: react.NamedExoticComponent<TypeChartTooltipTableProps>;
+
+type TypeChartTooltipTitleProps = {
+    children: React.ReactNode;
+};
+declare const ChartTooltipTitle: react.NamedExoticComponent<TypeChartTooltipTitleProps>;
+
 type TypeColorBoxProps = TypeBoxProps;
 /**
  * ColorBox extends Box to apply basic styles.
@@ -62,74 +193,82 @@ type TypeNetworkColorBoxProps = Readonly<TypeColorBoxProps & {
  */
 declare const NetworkColorBox: ({ networkColor, ...props }: TypeNetworkColorBoxProps) => react_jsx_runtime.JSX.Element;
 
-declare const baseChartOptions: Options;
-declare const TIME_SERIES_CHART_HEIGHT = 275;
-declare const lineChartOptions: Options;
-declare const areaChartOptions: Options;
-declare const DONUT_CHART_HALO_SIZE = 10;
-declare const DONUT_CHART_HEIGHT: number;
-declare const DONUT_CHART_WIDTH: number;
-declare const donutChartOptions: Options;
-
-interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
-    unitName: "hour" | "day" | "week" | "month" | "year";
-}
-interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterContextObject {
-    tickPositionInfo: ExtendedTimeTicksInfoObject;
-}
-type TypeChartDataPoint = Readonly<{
-    x: number;
-    y: number | null;
+type TypeDonutChartTooltipProps = Readonly<{
+    color: string;
+    name: string;
+    percent: number | null;
+    value: number | null;
+    icon?: ReactNode;
 }>;
-type TypeChartDataStyles = Readonly<{
-    color?: TypeChartStyleColor;
+type TypeDonutChartProps = Readonly<{
+    data: ReadonlyArray<Readonly<{
+        name: string;
+        value: number;
+        icon?: ReactNode;
+        styles?: TypeChartDataStyles;
+    }>>;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    currency?: string;
+    hideLegend?: boolean;
+    numberFormat?: TypeChartNumberFormat;
+    tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
 }>;
-type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
-type TypeChartTooltipDateFormatter = ({ x }: {
-    x: number;
-}) => ReactNode;
-type TypeChartTooltipProps = Readonly<{
+declare const DonutChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
-        color: TypeChartStyleColor;
         name: string;
-        value: number | null;
+        value: number;
         icon?: ReactNode;
+        styles?: TypeChartDataStyles;
     }>>;
-    x: number;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    currency?: string;
+    hideLegend?: boolean;
+    numberFormat?: TypeChartNumberFormat;
+    tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
+}>>;
+
+type TypeDonutChartLegendTableProps = Readonly<{
+    data: TypeDonutChartProps["data"];
+    numberLocale: TypeDonutChartProps["numberLocale"];
+    textLocale: TypeDonutChartProps["textLocale"];
+    totalLabel: React.ReactNode;
+    currency?: TypeDonutChartProps["currency"];
+    numberFormat?: TypeDonutChartProps["numberFormat"];
 }>;
-type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
-    y: number;
-    yValues: ReadonlyArray<number>;
-}>) => string;
-type TypeChartStyleColor = string;
-type TypeChartStylePattern = "solid" | "dashed";
-type TypeChartStyleHasOnClick = boolean;
+declare const DonutChartLegendTable: react.NamedExoticComponent<Readonly<{
+    data: TypeDonutChartProps["data"];
+    numberLocale: TypeDonutChartProps["numberLocale"];
+    textLocale: TypeDonutChartProps["textLocale"];
+    totalLabel: React.ReactNode;
+    currency?: TypeDonutChartProps["currency"];
+    numberFormat?: TypeDonutChartProps["numberFormat"];
+}>>;
 
-type TypeAreaChartProps = Readonly<{
+type TypeLineChartProps = Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;
         points: ReadonlyArray<TypeChartDataPoint>;
         icon?: ReactNode;
-        styles?: TypeChartDataStyles;
+        styles?: TypeChartDataStyles & Readonly<{
+            pattern?: TypeChartStylePattern;
+        }>;
     }>>;
     invalidNumberLabel: ReactNode;
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
-    tooltipTotalLabel: ReactNode;
     currency?: string;
     numberFormat?: TypeChartNumberFormat;
-    tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
-        total: number | null;
-    }>) => ReactNode;
+    tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
     yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
     onClick?: ({ x }: Readonly<{
         x: number;
     }>) => void;
     tooltipClickLabel?: ReactNode;
 }>;
-
-type TypeLineChartProps = Readonly<{
+declare const LineChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
         name: string;
         points: ReadonlyArray<TypeChartDataPoint>;
@@ -150,7 +289,16 @@ type TypeLineChartProps = Readonly<{
         x: number;
     }>) => void;
     tooltipClickLabel?: ReactNode;
-}>;
+}>>;
+
+declare const baseChartOptions: Options;
+declare const TIME_SERIES_CHART_HEIGHT = 275;
+declare const lineChartOptions: Options;
+declare const areaChartOptions: Options;
+declare const DONUT_CHART_HALO_SIZE = 10;
+declare const DONUT_CHART_HEIGHT: number;
+declare const DONUT_CHART_WIDTH: number;
+declare const donutChartOptions: Options;
 
 type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
 declare const transformDataToSeries: ({ data }: {
@@ -182,4 +330,4 @@ type TypeYAxisLabelFormatterProps = Readonly<{
 }>;
 declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
 
-export { ChartTable, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
+export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };