@carbon/charts 0.30.20 → 0.30.24

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.30.24](https://github.com/IBM/carbon-charts/compare/v0.30.23...v0.30.24) (2020-05-15)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.30.23](https://github.com/IBM/carbon-charts/compare/v0.30.22...v0.30.23) (2020-05-13)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.30.22](https://github.com/IBM/carbon-charts/compare/v0.30.21...v0.30.22) (2020-05-13)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.30.21](https://github.com/IBM/carbon-charts/compare/v0.30.20...v0.30.21) (2020-05-11)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 ## [0.30.20](https://github.com/IBM/carbon-charts/compare/v0.30.19...v0.30.20) (2020-05-08)
 
 **Note:** Version bump only for package @carbon/charts

package/build/demo/data/bar.d.ts

@@ -182,3 +182,177 @@ export declare const stackedHorizontalBarTimeSeriesData: {
     date: Date;
     value: number;
 }[];
+export declare const simpleBarEmptyStateData: any[];
+export declare const simpleBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+};
+export declare const simpleBarSkeletonData: any[];
+export declare const simpleBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};
+export declare const groupedBarEmptyStateData: any[];
+export declare const groupedBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+};
+export declare const groupedBarSkeletonData: any[];
+export declare const groupedBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};
+export declare const stackedBarEmptyStateData: any[];
+export declare const stackedBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+};
+export declare const stackedBarSkeletonData: any[];
+export declare const stackedBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};
+export declare const simpleHorizontalBarEmptyStateData: any[];
+export declare const simpleHorizontalBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+};
+export declare const simpleHorizontalBarSkeletonData: any[];
+export declare const simpleHorizontalBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};
+export declare const groupedHorizontalBarEmptyStateData: any[];
+export declare const groupedHorizontalBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+};
+export declare const groupedHorizontalBarSkeletonData: any[];
+export declare const groupedHorizontalBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};
+export declare const stackedHorizontalBarEmptyStateData: any[];
+export declare const stackedHorizontalBarEmptyStateOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+};
+export declare const stackedHorizontalBarSkeletonData: any[];
+export declare const stackedHorizontalBarSkeletonOptions: {
+    title: string;
+    axes: {
+        left: {
+            primary: boolean;
+            scaleType: string;
+        };
+        bottom: {
+            secondary: boolean;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/bubble.d.ts

@@ -67,3 +67,44 @@ export declare const bubbleTimeSeriesOptions: {
         radiusMapsTo: string;
     };
 };
+export declare const bubbleEmptyStateData: any[];
+export declare const bubbleEmptyStateOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            includeZero: boolean;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            includeZero: boolean;
+        };
+    };
+    bubble: {
+        radiusMapsTo: string;
+    };
+};
+export declare const bubbleSkeletonData: any[];
+export declare const bubbleSkeletonOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            includeZero: boolean;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            includeZero: boolean;
+        };
+    };
+    bubble: {
+        radiusMapsTo: string;
+    };
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/donut.d.ts

@@ -11,3 +11,26 @@ export declare const donutOptions: {
         };
     };
 };
+export declare const donutEmptyStateData: any[];
+export declare const donutEmptyStateOptions: {
+    title: string;
+    resizable: boolean;
+    donut: {
+        center: {
+            label: string;
+        };
+    };
+};
+export declare const donutSkeletonData: any[];
+export declare const donutSkeletonOptions: {
+    title: string;
+    resizable: boolean;
+    donut: {
+        center: {
+            label: string;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/line.d.ts

@@ -23,6 +23,9 @@ export declare const lineOptions: {
             scaleType: string;
         };
     };
+    chartTypes: {
+        "line": string[];
+    };
 };
 export declare const lineTimeSeriesData: {
     group: string;
@@ -45,6 +48,36 @@ export declare const lineTimeSeriesOptions: {
     };
     curve: string;
 };
+export declare const lineTimeSeriesWithThresholdsOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+            thresholds: {
+                value: Date;
+                label: string;
+                valueFormatter: (date: Date) => string;
+            }[];
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+            thresholds: ({
+                value: number;
+                label: string;
+                fillColor: string;
+            } | {
+                value: number;
+                fillColor: string;
+                label?: undefined;
+            })[];
+        };
+    };
+    curve: string;
+};
 export declare const lineTimeSeriesDenseData: {
     group: string;
     date: Date;
@@ -115,3 +148,40 @@ export declare const lineTimeSeriesHorizontalOptions: {
     };
     curve: string;
 };
+export declare const lineEmptyStateData: any[];
+export declare const lineEmptyStateOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+    curve: string;
+};
+export declare const lineSkeletonData: any[];
+export declare const lineSkeletonOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+    curve: string;
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/pie.d.ts

@@ -6,3 +6,16 @@ export declare const pieOptions: {
     title: string;
     resizable: boolean;
 };
+export declare const pieEmptyStateData: any[];
+export declare const pieEmptyStateOptions: {
+    title: string;
+    resizable: boolean;
+};
+export declare const pieSkeletonData: any[];
+export declare const pieSkeletonOptions: {
+    title: string;
+    resizable: boolean;
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/scatter.d.ts

@@ -54,3 +54,34 @@ export declare const scatterTimeSeriesOptions: {
         };
     };
 };
+export declare const scatterEmptyStateData: any[];
+export declare const scatterEmptyStateOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            scaleType: string;
+            mapsTo: string;
+        };
+        left: {
+            mapsTo: string;
+        };
+    };
+};
+export declare const scatterSkeletonData: any[];
+export declare const scatterSkeletonOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            scaleType: string;
+            mapsTo: string;
+        };
+        left: {
+            mapsTo: string;
+        };
+    };
+    data: {
+        loading: boolean;
+    };
+};

package/build/demo/data/step.d.ts

@@ -16,3 +16,7 @@ export declare const stepTimeSeriesData: {
     date: Date;
     value: number;
 }[];
+export declare const stepEmptyStateData: any[];
+export declare const stepEmptyStateOptions: any;
+export declare const stepSkeletonData: any[];
+export declare const stepSkeletonOptions: any;

package/build/demo/data/time-series-axis.d.ts

@@ -261,8 +261,60 @@ export declare const lineTimeSeriesNoExtendedDomainOptions: {
     timeScale: {
         addSpaceOnEdges: number;
     };
-    points: {
-        radius: number;
+};
+export declare const lineTimeSeriesDataTwoIdenticalLabels: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: {
+            date: Date;
+            value: number;
+        }[];
+    }[];
+};
+export declare const lineTimeSeriesTwoIdenticalLabelsOptions: {
+    title: string;
+    axes: {
+        left: {};
+        bottom: {
+            scaleType: string;
+        };
+    };
+    timeScale: {
+        addSpaceOnEdges: number;
+    };
+};
+export declare const lineTimeSeriesTwoIdenticalLabels2Options: {
+    title: string;
+    axes: {
+        left: {};
+        bottom: {
+            scaleType: string;
+        };
+    };
+    timeScale: {
+        addSpaceOnEdges: number;
+    };
+};
+export declare const lineTimeSeriesDataAllLabelsInPrimaryFormat: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: {
+            date: Date;
+            value: number;
+        }[];
+    }[];
+};
+export declare const lineTimeSeriesAllLabelsInPrimaryFormatOptions: {
+    title: string;
+    axes: {
+        left: {};
+        bottom: {
+            scaleType: string;
+        };
+    };
+    timeScale: {
+        addSpaceOnEdges: number;
     };
-    filled: boolean;
 };

package/build/src/components/axes/grid.d.ts

@@ -2,9 +2,9 @@ import { Component } from "../component";
 export declare class Grid extends Component {
     type: string;
     backdrop: any;
-    render(): void;
-    drawXGrid(): void;
-    drawYGrid(): void;
+    render(animate?: boolean): void;
+    drawXGrid(animate: boolean): void;
+    drawYGrid(animate: boolean): void;
     /**
      * Returns the threshold for the gridline tooltips based on the mouse location.
      * Calculated based on the mouse position between the two closest gridlines or edges of chart.

package/build/src/components/axes/two-dimensional-axes.d.ts

@@ -1,7 +1,9 @@
 import { Component } from "../component";
+import { Threshold } from "../essentials/threshold";
 export declare class TwoDimensionalAxes extends Component {
     type: string;
     children: any;
+    thresholds: Threshold[];
     margins: {
         top: number;
         right: number;
@@ -9,4 +11,5 @@ export declare class TwoDimensionalAxes extends Component {
         left: number;
     };
     render(animate?: boolean): void;
+    addAxisThresholds(animate: any, axisPosition: any): void;
 }

package/build/src/components/essentials/threshold.d.ts

@@ -0,0 +1,17 @@
+import { Component } from "../component";
+import { ChartModel } from "../../model";
+import Position from "@carbon/utils-position";
+export declare class Threshold extends Component {
+    type: string;
+    threshold: any;
+    thresholdClass: string;
+    thresholdIdentifierClass: string;
+    label: any;
+    positionService: Position;
+    constructor(model: ChartModel, services: any, configs: any);
+    render(animate?: boolean): void;
+    getFormattedValue(): any;
+    appendThresholdLabel(): void;
+    setThresholdLabelPosition(): void;
+    addEventListeners(): void;
+}

package/build/src/components/graphs/bar.d.ts

@@ -1,4 +1,4 @@
 import { Component } from "../component";
 export declare class Bar extends Component {
-    protected getBarWidth(): number;
+    protected getBarWidth(allDataLabels?: string[]): number;
 }

package/build/src/components/graphs/scatter.d.ts

@@ -4,6 +4,7 @@ export declare class Scatter extends Component {
     type: string;
     init(): void;
     render(animate: boolean): void;
+    isDatapointThresholdAnomaly(datum: any, index: number): boolean;
     styleCircles(selection: Selection<any, any, any, any>, animate: boolean): void;
     handleLegendOnHover: (event: CustomEvent<any>) => void;
     handleLegendMouseOut: (event: CustomEvent<any>) => void;

package/build/src/components/graphs/skeleton.d.ts

@@ -0,0 +1,22 @@
+import { Component } from "../component";
+export declare class Skeleton extends Component {
+    type: string;
+    xScale: any;
+    yScale: any;
+    backdrop: any;
+    render(): void;
+    renderSkeleton(showShimmerEffect: boolean): void;
+    renderGridSkeleton(showShimmerEffect: boolean): void;
+    renderVertOrHorizSkeleton(showShimmerEffect: boolean): void;
+    renderPieSkeleton(showShimmerEffect: boolean): void;
+    renderDonutSkeleton(showShimmerEffect: boolean): void;
+    setScales(): void;
+    drawBackdrop(showShimmerEffect: boolean): void;
+    drawXGrid(showShimmerEffect: boolean): void;
+    drawYGrid(showShimmerEffect: boolean): void;
+    drawRing(outerRadius: number, innerRadius: number, shimmer?: boolean): void;
+    computeOuterRadius(): any;
+    computeInnerRadius(): number;
+    setShimmerEffect(gradientId: string): void;
+    removeSkeleton(): void;
+}

package/build/src/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./component";
 export * from "./essentials/legend";
+export * from "./essentials/threshold";
 export * from "./essentials/title";
 export * from "./essentials/tooltip";
 export * from "./essentials/tooltip-bar";
@@ -14,6 +15,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
+export * from "./graphs/skeleton";
 export * from "./layout/spacer";
 export * from "./layout/layout";
 export * from "./axes/two-dimensional-axes";

package/build/src/interfaces/axis-scales.d.ts

@@ -1,6 +1,7 @@
 import { ScaleTypes } from "./enums";
 import { AxisDomain } from "d3";
 import { Locale } from "date-fns";
+import { ThresholdOptions } from "./components";
 /**
  * options to configure a scale. not all options are used by all scales
  */
@@ -31,6 +32,16 @@ export interface AxisOptions {
      * optional title for the scales
      */
     title?: string;
+    /**
+     * thresholds
+     * Example:
+     * [
+     *		{value: 10000},
+     *		{value: 40020, valueFormatter: (x) => x},
+     *		{value: 55000, label: "Custom label", fillColor: "#03a9f4"},
+     * ]
+     */
+    thresholds?: ThresholdOptions[];
     /**
      * tick configuration
      */

package/build/src/interfaces/charts.d.ts

@@ -57,6 +57,10 @@ export interface BaseChartOptions {
          * identifier for data groups
          */
         groupMapsTo?: string;
+        /**
+         * used to simulate data loading
+         */
+        loading?: Boolean;
     };
     /**
      * options related to color scales

package/build/src/interfaces/components.d.ts

@@ -86,6 +86,27 @@ export interface TooltipOptions {
         width?: number;
     };
 }
+/**
+ * Threshold options
+ */
+export interface ThresholdOptions {
+    /**
+     * threshold value
+     */
+    value: number | Date;
+    /**
+     * a function to format the threshold values
+     */
+    valueFormatter?: Function;
+    /**
+     * hex threshold line color
+     */
+    fillColor: string;
+    /**
+     * threshold label
+     */
+    label: string;
+}
 /**
  * extends tooltip options to provide support for multiple gridline tooltips
  */

package/build/src/interfaces/enums.d.ts

@@ -93,6 +93,15 @@ export declare enum CalloutDirections {
     LEFT = "left",
     RIGHT = "right"
 }
+/**
+ * enum of all possible skeleton/empty state types
+ */
+export declare enum Skeletons {
+    GRID = "grid",
+    VERT_OR_HORIZ = "vertOrHoriz",
+    PIE = "pie",
+    DONUT = "donut"
+}
 /**
  * enum of all possible attributes used to aling text horizontally
  */