@undp/data-viz 1.2.8 → 1.3.1

package/dist/BarGraph.d.ts

@@ -0,0 +1,460 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface BarGraphDataType {
+    label: string | number;
+    date?: string | number;
+    size?: number | null;
+    color?: string | null;
+    data?: object;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare interface GroupedBarChartProps {
+    /** Array of data objects */
+    data: GroupedBarGraphDataType[];
+    /** Orientation of the graph */
+    orientation?: 'vertical' | 'horizontal';
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Array of colors for different bars in the group */
+    colors?: string[];
+    /** Domain of colors for the graph */
+    colorDomain: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Color of value labels */
+    valueColor?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Padding between bars */
+    barPadding?: number;
+    /** Maximum thickness of bars */
+    maxBarThickness?: number;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Maximum value for the chart */
+    maxValue?: number;
+    /** Minimum value for the chart */
+    minValue?: number;
+    /** Truncate labels by specified length */
+    truncateBy?: number;
+    /** Toggles if data points which have all the values as undefined or null are filtered out.  */
+    filterNA?: boolean;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Number of ticks on the axis */
+    noOfTicks?: number;
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Toggle visibility of values */
+    showValues?: boolean;
+    /** Custom order for labels */
+    labelOrder?: string[];
+    /** Toggle visibility of axis ticks */
+    showTicks?: boolean;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Title for the bar axis */
+    barAxisTitle?: string;
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
+    timeline?: TimelineDataType;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+export declare function GroupedBarGraph(props: GroupedBarChartProps): JSX.Element;
+
+declare interface GroupedBarGraphDataType {
+    label: string | number;
+    size: (number | null)[];
+    date?: string | number;
+    data?: object;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface Props {
+    /** Array of data objects */
+    data: BarGraphDataType[];
+    /** Orientation of the graph */
+    orientation?: 'vertical' | 'horizontal';
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for bars */
+    colors?: string | string[];
+    /** Domain of colors for the graph */
+    colorDomain?: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Color of value labels */
+    valueColor?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Padding between bars */
+    barPadding?: number;
+    /** Maximum thickness of bars */
+    maxBarThickness?: number;
+    /** Minimum thickness of bars */
+    minBarThickness?: number;
+    /** Maximum number of bars shown in the graph */
+    maxNumberOfBars?: number;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Maximum value for the chart */
+    maxValue?: number;
+    /** Minimum value for the chart */
+    minValue?: number;
+    /** Truncate labels by specified length */
+    truncateBy?: number;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Number of ticks on the axis */
+    noOfTicks?: number;
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Toggle visibility of values */
+    showValues?: boolean;
+    /** Custom order for labels */
+    labelOrder?: string[];
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Toggle visibility of axis ticks */
+    showTicks?: boolean;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
+    showNAColor?: boolean;
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedDataPoints?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Title for the bar axis */
+    barAxisTitle?: string;
+    /** Sorting order for data. This is overwritten by labelOrder prop. */
+    sortData?: 'asc' | 'desc';
+    /** Toggles if data point which are undefined or has value null are filtered out.  */
+    filterNA?: boolean;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
+    timeline?: TimelineDataType;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface ReferenceDataType {
+    value: number | null;
+    text: string;
+    color?: string;
+    styles?: {
+        line?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+    classNames?: {
+        line?: string;
+        text?: string;
+    };
+}
+
+export declare function SimpleBarGraph(props: Props): JSX.Element;
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StackedBarChartProps {
+    /** Array of data objects */
+    data: GroupedBarGraphDataType[];
+    /** Orientation of the graph */
+    orientation?: 'vertical' | 'horizontal';
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Array of colors for different bars in the group */
+    colors?: string[];
+    /** Domain of colors for the graph */
+    colorDomain: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Color of value labels */
+    valueColor?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Padding between bars */
+    barPadding?: number;
+    /** Maximum thickness of bars */
+    maxBarThickness?: number;
+    /** Minimum thickness of bars */
+    minBarThickness?: number;
+    /** Maximum number of bars shown in the graph */
+    maxNumberOfBars?: number;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Maximum value for the chart */
+    maxValue?: number;
+    /** Minimum value for the chart */
+    truncateBy?: number;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Number of ticks on the axis */
+    noOfTicks?: number;
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Toggle visibility of values */
+    showValues?: boolean;
+    /** Custom order for labels */
+    labelOrder?: string[];
+    /** Toggle visibility of axis ticks */
+    showTicks?: boolean;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Title for the bar axis */
+    barAxisTitle?: string;
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Parameter to sort the data. If a number is provided, it refers to the index of the size array to determine which value to sort by. If set to total, it sorts by the sum of all the values. */
+    sortParameter?: number | 'total';
+    /** Toggles if data points which have all the values as undefined or null are filtered out.  */
+    filterNA?: boolean;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
+    timeline?: TimelineDataType;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+export declare function StackedBarGraph(props: StackedBarChartProps): JSX.Element;
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+declare interface TimelineDataType {
+    autoplay: boolean;
+    enabled: boolean;
+    showOnlyActiveDate: boolean;
+    speed?: number;
+    dateFormat?: string;
+}
+
+export { }