@carbon/charts 0.32.8 → 0.32.12

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.32.12](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.11...v0.32.12) (2020-06-26)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.32.11](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.10...v0.32.11) (2020-06-24)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.32.10](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.9...v0.32.10) (2020-06-24)
+
+
+### Bug Fixes
+
+* **core:** fix gauge charts without a delta number ([#680](https://github.com/carbon-design-system/carbon-charts/issues/680)) ([f65a084](https://github.com/carbon-design-system/carbon-charts/commit/f65a084bb66f1e8241fdbd6b101daf98d059d548))
+
+
+
+
+
+## [0.32.9](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.8...v0.32.9) (2020-06-23)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 ## [0.32.8](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.7...v0.32.8) (2020-06-19)
 
 **Note:** Version bump only for package @carbon/charts

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

@@ -55,6 +55,23 @@ export declare const stackedAreaTimeSeriesOptions: {
     };
     curve: string;
 };
+export declare const stackedAreaTimeSeriesUnevenData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const stackedAreaTimeSeriesUnevenDataOptions: {
+    title: string;
+    axes: {
+        left: {
+            stacked: boolean;
+        };
+        bottom: {
+            scaleType: string;
+        };
+    };
+    curve: string;
+};
 export declare const stackedAreaPercentageTimeSeriesOptions: {
     title: string;
     axes: {

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

@@ -48,6 +48,29 @@ export declare const simpleBarOptions: {
         };
     };
 };
+export declare const simpleBarLongLabelData: {
+    group: string;
+    value: number;
+}[];
+export declare const simpleBarLongLabelOptions: {
+    title: string;
+    axes: {
+        left: {
+            mapsTo: string;
+        };
+        bottom: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    legend: {
+        truncation: {
+            type: string;
+            threshold: number;
+            numCharacter: number;
+        };
+    };
+};
 export declare const simpleBarFixedDomainOptions: {
     title: string;
     axes: {
@@ -65,6 +88,10 @@ export declare const simpleHorizontalBarData: {
     group: string;
     value: number;
 }[];
+export declare const simpleHorizontalBarLongLabelData: {
+    group: string;
+    value: number;
+}[];
 export declare const simpleHorizontalBarOptions: {
     title: string;
     axes: {
@@ -77,6 +104,30 @@ export declare const simpleHorizontalBarOptions: {
         };
     };
 };
+export declare const simpleHorizontalBarLongLabelOptions: {
+    title: string;
+    axes: {
+        left: {
+            mapsTo: string;
+            scaleType: string;
+            truncation: {
+                type: string;
+                threshold: number;
+                numCharacter: number;
+            };
+        };
+        bottom: {
+            mapsTo: string;
+        };
+    };
+    legend: {
+        truncation: {
+            type: string;
+            threshold: number;
+            numCharacter: number;
+        };
+    };
+};
 export declare const simpleBarTimeSeriesData: {
     group: string;
     date: Date;

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

@@ -0,0 +1,40 @@
+export declare const gaugeData: {
+    group: string;
+    value: number;
+}[];
+export declare const gaugeDataNoDelta: {
+    group: string;
+    value: number;
+}[];
+export declare const gaugeOptionsSemi: {
+    title: string;
+    resizable: boolean;
+    height: string;
+    width: string;
+    gauge: {
+        type: string;
+        status: string;
+    };
+};
+export declare const gaugeOptionsCircular: {
+    title: string;
+    resizable: boolean;
+    height: string;
+    gauge: {
+        status: string;
+        type: string;
+    };
+};
+export declare const gaugeOptionsCircularNoDelta: {
+    title: string;
+    resizable: boolean;
+    height: string;
+    gauge: {
+        type: string;
+    };
+    color: {
+        scale: {
+            value: string;
+        };
+    };
+};

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

@@ -4,6 +4,7 @@ export * from "./bubble";
 export * from "./donut";
 export * from "./line";
 export * from "./pie";
+export * from "./gauge";
 export * from "./scatter";
 export * from "./step";
 export * from "./radar";
@@ -53,6 +54,11 @@ export declare const chartTypes: {
         angular: string;
         vue: string;
     };
+    GaugeChart: {
+        vanilla: string;
+        angular: string;
+        vue: string;
+    };
     DonutChart: {
         vanilla: string;
         angular: string;

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

@@ -24,6 +24,32 @@ export declare const lineOptions: {
         };
     };
 };
+export declare const lineLongLabelData: ({
+    group: string;
+    key: string;
+    value: number;
+    audienceSize?: undefined;
+} | {
+    group: string;
+    key: string;
+    value: number;
+    audienceSize: number;
+})[];
+export declare const lineLongLabelOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+};
 export declare const lineCustomDomainOptions: {
     title: string;
     axes: {

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

@@ -36,6 +36,24 @@ export declare const scatterDiscreteOptions: {
         };
     };
 };
+export declare const scatterLongLabelDiscreteData: {
+    group: string;
+    key: string;
+    value: number;
+}[];
+export declare const scatterLongLabelDiscreteOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            scaleType: string;
+            mapsTo: string;
+        };
+        left: {
+            mapsTo: string;
+        };
+    };
+};
 export declare const scatterTimeSeriesData: {
     group: string;
     date: Date;

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

@@ -0,0 +1,6 @@
+import { Chart } from "../chart";
+import { ChartConfig, GaugeChartOptions } from "../interfaces/index";
+export declare class GaugeChart extends Chart {
+    constructor(holder: Element, chartConfigs: ChartConfig<GaugeChartOptions>);
+    getComponents(): any[];
+}

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

@@ -9,3 +9,4 @@ export * from "./scatter";
 export * from "./pie";
 export * from "./donut";
 export * from "./radar";
+export * from "./gauge";

package/build/src/components/essentials/tooltip-bar.d.ts

@@ -1,5 +1,5 @@
 import { Tooltip } from "./tooltip";
-import { TooltipPosition } from "./../../interfaces";
+import { TooltipPosition, TooltipTypes } from "./../../interfaces";
 export declare class TooltipBar extends Tooltip {
     init(): void;
     /**
@@ -18,7 +18,7 @@ export declare class TooltipBar extends Tooltip {
      * Returns the html for the bar single point tooltip
      * @param data associated values for the hovered bar
      */
-    getTooltipHTML(data: any): string;
+    getTooltipHTML(data: any, type: TooltipTypes): string;
     /**
      * Multip tooltips for bar charts include totals for each stack
      * @param data

package/build/src/components/essentials/tooltip-radar.d.ts

@@ -1,4 +1,5 @@
 import { Tooltip } from "./tooltip";
+import { TooltipTypes } from "../../interfaces";
 export declare class TooltipRadar extends Tooltip {
-    getMultilineTooltipHTML(data: any): string;
+    getMultilineTooltipHTML(data: any, type: TooltipTypes): string;
 }

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

@@ -9,9 +9,9 @@ export declare class Tooltip extends Component {
     constructor(model: ChartModel, services: any, configs?: any);
     init(): void;
     getTooltipHTML(data: any, type: TooltipTypes): string;
-    getMultilineTooltipHTML(data: any): string;
+    getMultilineTooltipHTML(data: any, type: TooltipTypes): string;
     render(): void;
-    getTooltipPosition(hoveredElement: any): {
+    getTooltipPosition(hoveredElement: any, type: TooltipTypes): {
         placement: TooltipPosition;
         position: {
             left: number;

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

@@ -0,0 +1,26 @@
+import { Component } from "../component";
+export declare class Gauge extends Component {
+    type: string;
+    arc: any;
+    backgroundArc: any;
+    init(): void;
+    getValue(): number;
+    getValueRatio(): number;
+    getDelta(): number;
+    getArcRatio(): number;
+    getArcSize(): number;
+    getStartAngle(): number;
+    getArrow(delta: any): string;
+    render(animate?: boolean): void;
+    /**
+     * draws the value number associated with the Gauge component in the center
+     */
+    drawValueNumber(): void;
+    /**
+     * adds the delta number for the gauge
+     */
+    drawDelta(): void;
+    getInnerRadius(): number;
+    addEventListeners(): void;
+    protected computeRadius(): number;
+}

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

@@ -17,6 +17,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/scatter-stacked";
 export * from "./graphs/pie";
+export * from "./graphs/gauge";
 export * from "./graphs/donut";
 export * from "./graphs/skeleton";
 export * from "./layout/spacer";

package/build/src/configuration.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, AreaChartOptions, PieChartOptions, DonutChartOptions, BubbleChartOptions, RadarChartOptions, GridOptions, TimeScaleOptions, TooltipOptions, AxisTooltipOptions, BarTooltipOptions, LegendOptions } from "./interfaces";
+import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, RadarChartOptions, GridOptions, TimeScaleOptions, TooltipOptions, AxisTooltipOptions, BarTooltipOptions, LegendOptions } from "./interfaces";
 /**
  * Legend options
  */
@@ -28,6 +28,7 @@ export declare const options: {
     pieChart: PieChartOptions;
     donutChart: DonutChartOptions;
     radarChart: RadarChartOptions;
+    gaugeChart: GaugeChartOptions;
 };
 /**
  * Options for line behaviour

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

@@ -2,6 +2,7 @@ import { ScaleTypes } from "./enums";
 import { AxisDomain } from "d3";
 import { Locale } from "date-fns";
 import { ThresholdOptions } from "./components";
+import { TruncationOptions } from "./truncation";
 /**
  * options to configure a scale. not all options are used by all scales
  */
@@ -77,6 +78,7 @@ export interface AxisOptions {
          */
         formatter?: Function;
     };
+    truncation?: TruncationOptions;
 }
 /**
  * customize time series scales

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

@@ -1,3 +1,4 @@
+import { GaugeTypes, Statuses, ArrowDirections } from "./enums";
 import { LegendOptions, TooltipOptions, GridOptions, AxesOptions } from "./index";
 import { AxisTooltipOptions, BarTooltipOptions, BarOptions, StackedBarOptions } from "./components";
 import { TimeScaleOptions } from "./axis-scales";
@@ -197,6 +198,25 @@ export interface PieChartOptions extends BaseChartOptions {
         };
     };
 }
+/**
+ * options specific to gauge charts
+ */
+export interface GaugeChartOptions extends PieChartOptions {
+    gauge?: {
+        arcWidth?: number;
+        deltaArrow?: {
+            direction?: ArrowDirections;
+            size?: Function;
+            enabled: Boolean;
+        };
+        status?: Statuses;
+        deltaFontSize?: Function;
+        numberSpacing?: number;
+        numberFormatter?: Function;
+        valueFontSize?: Function;
+        type?: GaugeTypes;
+    };
+}
 /**
  * options specific to donut charts
  */

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

@@ -1,5 +1,6 @@
 import { LayoutGrowth, LegendPositions } from "./enums";
 import { Component } from "../components/component";
+import { TruncationOptions } from "./truncation";
 /**
  * customize the overlay contents
  */
@@ -47,6 +48,7 @@ export interface LegendOptions {
         radius?: Number;
         spaceAfter?: Number;
     };
+    truncation?: TruncationOptions;
 }
 export interface TooltipOptions {
     /**

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

@@ -18,6 +18,15 @@ export declare enum AxisPositions {
     TOP = "top",
     BOTTOM = "bottom"
 }
+/**
+ * enum of all possible truncation types
+ */
+export declare enum TruncationTypes {
+    END_LINE = "end_line",
+    MID_LINE = "mid_line",
+    FRONT_LINE = "front_line",
+    NONE = "none"
+}
 /**
  * enum of all possible cartesian orientations
  * to be used for determining the orientation
@@ -51,7 +60,9 @@ export declare enum TooltipPosition {
 export declare enum TooltipTypes {
     DATAPOINT = "datapoint",
     GRIDLINE = "gridline",
-    TITLE = "title"
+    TITLE = "title",
+    LEGEND = "legend",
+    AXISLABEL = "axislabel"
 }
 /**
  * enum of all possible legend positions
@@ -118,3 +129,22 @@ export declare enum DominantBaseline {
     MIDDLE = "middle",
     HANGING = "hanging"
 }
+export declare enum GaugeTypes {
+    SEMI = "semi",
+    FULL = "full"
+}
+/**
+ * enum of all possible callout directions
+ */
+export declare enum ArrowDirections {
+    UP = "up",
+    DOWN = "down"
+}
+/**
+ * enum of carbon statuses
+ */
+export declare enum Statuses {
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger"
+}

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

@@ -40,6 +40,15 @@ export declare enum Pie {
     SLICE_CLICK = "pie-slice-click",
     SLICE_MOUSEOUT = "pie-slice-mouseout"
 }
+/**
+ * enum of all gauge graph events
+ */
+export declare enum Gauge {
+    ARC_MOUSEOVER = "gauge-arc-mouseover",
+    ARC_MOUSEMOVE = "gauge-arc-mousemove",
+    ARC_CLICK = "gauge-arc-click",
+    ARC_MOUSEOUT = "gauge-arc-mouseout"
+}
 /**
  * enum of all bar graph events
  */

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

@@ -0,0 +1,17 @@
+export interface TruncationOptions {
+    /**
+     * truncation configuration
+     */
+    /**
+     * truncation type
+     */
+    type?: string;
+    /**
+     * truncation threshold
+     */
+    threshold?: Number;
+    /**
+     * how many characters to be shown
+     */
+    numCharacter?: Number;
+}

package/build/src/tools.d.ts

@@ -82,6 +82,15 @@ export declare namespace Tools {
      * @returns The percentage in the form of a number (1 significant digit if necessary)
      */
     export function convertValueToPercentage(item: any, fullData: any): number;
+    /**
+ * Truncate the labels
+ * @export
+ * @param {any} fullText
+ * @param {any} truncationType
+ * @param {any} numCharacter
+ * @returns Truncated text
+ */
+    export function truncateLabel(fullText: any, truncationType: any, numCharacter: any): any;
     /**************************************
      *  Object/array related checks       *
      *************************************/