@carbon/charts 0.53.3 → 0.54.1

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.54.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.0...v0.54.1) (2022-01-05)
+
+
+### Bug Fixes
+
+* **core:** remove circular dependencies inheritance from heatmap legend & canvas zoom files ([#1260](https://github.com/carbon-design-system/carbon-charts/issues/1260)) ([1abc4d9](https://github.com/carbon-design-system/carbon-charts/commit/1abc4d9ebf8ce80226df23371c4b9baa669f4c7f))
+
+
+
+
+
+# [0.54.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.5...v0.54.0) (2021-12-24)
+
+
+### Features
+
+* **core:** create heatmap chart  ([#1200](https://github.com/carbon-design-system/carbon-charts/issues/1200)) ([a55be0f](https://github.com/carbon-design-system/carbon-charts/commit/a55be0fcec6020b609ab18b2224562aaa9775321))
+
+
+
+
+
+## [0.53.5](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.4...v0.53.5) (2021-12-15)
+
+
+### Bug Fixes
+
+* **core:** use domain in zoom bar if defined in axes ([#1243](https://github.com/carbon-design-system/carbon-charts/issues/1243)) ([b265676](https://github.com/carbon-design-system/carbon-charts/commit/b2656764758d5b339987a59a2be344d0e94df4c2)), closes [#1228](https://github.com/carbon-design-system/carbon-charts/issues/1228)
+
+
+
+
+
+## [0.53.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.3...v0.53.4) (2021-12-13)
+
+
+### Bug Fixes
+
+* **core:** allow users to define custom buttons in toolbar ([#1158](https://github.com/carbon-design-system/carbon-charts/issues/1158)) ([4996591](https://github.com/carbon-design-system/carbon-charts/commit/499659155b56df9f7ab03633e43f5437f21bb129)), closes [#1129](https://github.com/carbon-design-system/carbon-charts/issues/1129)
+
+
+
+
+
 ## [0.53.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.2...v0.53.3) (2021-12-07)
 
 

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

@@ -49,6 +49,11 @@ declare const _default: {
         angular: string;
         vue: string;
     };
+    HeatmapChart: {
+        vanilla: string;
+        angular: string;
+        vue: string;
+    };
     HistogramChart: {
         vanilla: string;
         angular: string;

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

@@ -0,0 +1,96 @@
+export declare const heatmapData: {
+    letter: string;
+    month: string;
+    value: number;
+}[];
+export declare const heatmapOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    heatmap: {
+        colorLegend: {
+            title: string;
+        };
+    };
+    experimental: boolean;
+};
+export declare const heatmapQuantizeLegendOption: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    heatmap: {
+        colorLegend: {
+            title: string;
+            type: string;
+        };
+    };
+    experimental: boolean;
+};
+export declare const heatmapDomainOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+            domain: string[];
+        };
+    };
+    heatmap: {
+        colorLegend: {
+            title: string;
+        };
+    };
+    experimental: boolean;
+};
+export declare const heatmapMissingData: {
+    letter: string;
+    month: string;
+    value: number;
+}[];
+export declare const heatmapMissingDataOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    heatmap: {
+        colorLegend: {
+            title: string;
+        };
+    };
+    experimental: boolean;
+};

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

@@ -22,6 +22,7 @@ export * from './wordcloud';
 export * from './zoom-bar';
 export * from './high-scale';
 export * from './alluvial';
+export * from './heatmap';
 export * from './CHART_TYPES';
 export declare enum DemoGroupTypes {
     UTILITY = "utility",

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

@@ -0,0 +1,10 @@
+import { HeatmapModel } from '../model/heatmap';
+import { AxisChart } from '../axis-chart';
+import { HeatmapChartOptions, ChartConfig } from '../interfaces/index';
+import { Modal, LayoutComponent, AxisChartsTooltip } from '../components';
+export declare class HeatmapChart extends AxisChart {
+    model: HeatmapModel;
+    constructor(holder: Element, chartConfigs: ChartConfig<HeatmapChartOptions>);
+    protected getAxisChartComponents(graphFrameComponents: any[], configs?: any): (AxisChartsTooltip | Modal | LayoutComponent)[];
+    getComponents(): any[];
+}

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

@@ -21,3 +21,4 @@ export * from './treemap';
 export * from './circle-pack';
 export * from './wordcloud';
 export * from './alluvial';
+export * from './heatmap';

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

@@ -1,11 +1,17 @@
 import { Component } from '../component';
-import { ScaleTypes } from '../../interfaces';
+import { AxisPositions, ScaleTypes } from '../../interfaces';
 import { ChartModel } from '../../model/model';
 import { RenderTypes } from '../../interfaces/enums';
 export declare class Axis extends Component {
     type: string;
     renderType: RenderTypes;
     margins: any;
+    truncation: {
+        [AxisPositions.LEFT]: boolean;
+        [AxisPositions.RIGHT]: boolean;
+        [AxisPositions.TOP]: boolean;
+        [AxisPositions.BOTTOM]: boolean;
+    };
     scale: any;
     scaleType: ScaleTypes;
     constructor(model: ChartModel, services: any, configs?: any);

package/build/src/components/axes/hover-axis.d.ts

@@ -0,0 +1,10 @@
+import { Axis } from './axis';
+import { ChartModel } from '../../model/model';
+export declare class HoverAxis extends Axis {
+    constructor(model: ChartModel, services: any, configs?: any);
+    render(animate?: boolean): void;
+    addEventListeners(): void;
+    private goNext;
+    private goPrevious;
+    destroy(): void;
+}

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

@@ -1,6 +1,7 @@
 import { Component } from '../component';
 import { RenderTypes, ToolbarControlTypes } from '../../interfaces';
 export declare class Toolbar extends Component {
+    static buttonID: number;
     type: string;
     renderType: RenderTypes;
     overflowButton: any;
@@ -15,6 +16,7 @@ export declare class Toolbar extends Component {
     focusOnPreviousEnabledMenuItem(currentItemIndex: any): void;
     focusOnNextEnabledMenuItem(currentItemIndex: any): void;
     toggleOverflowMenu(event: any): void;
+    triggerFunctionAndEvent(control: any, event: any, element?: any): void;
     getControlConfigs(): {
         buttonList: any[];
         overflowMenuItemList?: undefined;
@@ -28,7 +30,9 @@ export declare class Toolbar extends Component {
         id: string;
         title: string;
         shouldBeDisabled: () => boolean;
-        iconSVGContent: string;
+        iconSVG: {
+            content: string;
+        };
         clickFunction: (event: any) => void;
     };
     getControlConfigByType(controlType: ToolbarControlTypes): any;

package/build/src/components/essentials/color-scale-legend.d.ts

@@ -0,0 +1,11 @@
+import { RenderTypes } from '../../interfaces';
+import { Legend } from './legend';
+export declare class ColorScaleLegend extends Legend {
+    type: string;
+    renderType: RenderTypes;
+    private gradient_id;
+    init(): void;
+    handleAxisComplete: (event: CustomEvent<any>) => void;
+    render(animate?: boolean): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,25 @@
+import { Component } from '../component';
+import { RenderTypes } from '../../interfaces';
+export declare class Heatmap extends Component {
+    type: string;
+    renderType: RenderTypes;
+    private matrix;
+    private xBandwidth;
+    private yBandwidth;
+    private translationUnits;
+    init(): void;
+    render(animate?: boolean): void;
+    /**
+     * Generates a box using lines to create a hover effect
+     * The lines have drop shadow in their respective direction
+     * @param parentTag - tag name
+     * @param xBandwidth - X length
+     * @param yBandwidth - y length
+     */
+    private createOuterBox;
+    private determineDividerStatus;
+    addEventListener(): void;
+    handleAxisOnHover: (event: CustomEvent<any>) => void;
+    handleAxisMouseOut: (event: CustomEvent<any>) => void;
+    destroy(): void;
+}

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

@@ -1,5 +1,6 @@
 export * from './component';
 export * from './essentials/legend';
+export * from './essentials/color-scale-legend';
 export * from './essentials/modal';
 export * from './essentials/threshold';
 export * from './essentials/title';
@@ -32,6 +33,7 @@ export * from './graphs/radar';
 export * from './graphs/circle-pack';
 export * from './graphs/wordcloud';
 export * from './graphs/alluvial';
+export * from './graphs/heatmap';
 export * from './layout/spacer';
 export * from './layout/layout';
 export * from './axes/two-dimensional-axes';

package/build/src/configuration-non-customizable.d.ts

@@ -18,6 +18,9 @@ export declare const axis: {
         compareTo: string;
     };
     paddingRatio: number;
+    hover: {
+        rectanglePadding: number;
+    };
 };
 export declare const canvasZoomSettings: {
     duration: number;
@@ -130,6 +133,11 @@ export declare const legend: {
         }[];
         color: string;
     };
+    color: {
+        barWidth: number;
+        barHeight: number;
+        axisYTranslation: number;
+    };
 };
 export declare const lines: {
     opacity: {
@@ -199,6 +207,10 @@ export declare const alluvial: {
         selected: number;
     };
 };
+export declare const heatmap: {
+    minCellDividerDimension: number;
+    chartPadding: number;
+};
 export declare const spacers: {
     default: {
         size: number;

package/build/src/configuration.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LollipopChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, BoxplotChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, BulletChartOptions, HistogramChartOptions, RadarChartOptions, ComboChartOptions, TreeChartOptions, TreemapChartOptions, CirclePackChartOptions, WorldCloudChartOptions, AlluvialChartOptions, GridOptions, RulerOptions, TimeScaleOptions, TooltipOptions, MeterChartOptions, ProportionalMeterChartOptions } from './interfaces';
+import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LollipopChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, BoxplotChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, BulletChartOptions, HistogramChartOptions, RadarChartOptions, ComboChartOptions, TreeChartOptions, TreemapChartOptions, CirclePackChartOptions, WorldCloudChartOptions, AlluvialChartOptions, GridOptions, RulerOptions, TimeScaleOptions, TooltipOptions, MeterChartOptions, ProportionalMeterChartOptions, HeatmapChartOptions } from './interfaces';
 /**
  * Grid options
  */
@@ -39,5 +39,6 @@ export declare const options: {
     circlePackChart: CirclePackChartOptions;
     wordCloudChart: WorldCloudChartOptions;
     alluvialChart: AlluvialChartOptions;
+    heatmapChart: HeatmapChartOptions;
 };
 export * from './configuration-non-customizable';

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

@@ -1,4 +1,4 @@
-import { GaugeTypes, Statuses, ArrowDirections, Alignments, ChartTypes, TreeTypes } from './enums';
+import { GaugeTypes, Statuses, ArrowDirections, Alignments, ChartTypes, TreeTypes, DividerStatus, ColorLegendType } from './enums';
 import { LegendOptions, TooltipOptions, GridOptions, AxesOptions, ZoomBarsOptions } from './index';
 import { BarOptions, StackedBarOptions, ToolbarOptions } from './components';
 import { AxisOptions, BinnedAxisOptions, TimeScaleOptions } from './axis-scales';
@@ -100,7 +100,14 @@ export interface BaseChartOptions {
              */
             option?: number;
         };
-        gradient?: object;
+        gradient?: {
+            enabled?: boolean;
+            /**
+             * hex color array
+             * e.g. ['#fff', '#000', ...]
+             */
+            colors?: Array<String>;
+        };
     };
 }
 /**
@@ -434,3 +441,29 @@ export interface AlluvialChartOptions extends BaseChartOptions {
         monochrome?: boolean;
     };
 }
+/**
+ * options specific to Heatmap charts
+ */
+export interface HeatmapChartOptions extends BaseChartOptions {
+    heatmap: {
+        /**
+         * Divider width state - will default to auto
+         * No cell divider for cell dimensions less than 16
+         */
+        divider?: {
+            state?: DividerStatus;
+        };
+        /**
+         * customize color legend
+         * enabled by default on select charts
+         */
+        colorLegend?: {
+            /**
+             * Text to display beside or on top of the legend
+             * Position is determined by text length
+             */
+            title?: string;
+            type: ColorLegendType;
+        };
+    };
+}

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

@@ -152,6 +152,25 @@ export interface ToolbarControl {
      * type value will be displayed if text is not available
      */
     text?: string;
+    /**
+     * custom id for button
+     */
+    id?: String;
+    /**
+     * SVG HTML element
+     */
+    iconSVG?: {
+        content?: string;
+        height?: string;
+        width?: string;
+    };
+    shouldBeDisabled?: Function;
+    /**
+     * function to execute on button click
+     * alternatively, users can choose to not pass in a function and can
+     * listen for events to execute asynchronously
+     */
+    clickFunction?: Function;
 }
 /**
  * customize the ZoomBars in a chart

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

@@ -203,7 +203,8 @@ export declare enum ToolbarControlTypes {
     ZOOM_OUT = "Zoom out",
     RESET_ZOOM = "Reset zoom",
     MAKE_FULLSCREEN = "Make fullscreen",
-    SHOW_AS_DATATABLE = "Show as data-table"
+    SHOW_AS_DATATABLE = "Show as data-table",
+    CUSTOM = "Custom"
 }
 /**
  * enum of title orientations for _vertical axes_
@@ -224,3 +225,25 @@ export declare enum LegendItemType {
     QUARTILE = "quartile",
     ZOOM = "zoom"
 }
+/**
+ * enum of color legend types
+ */
+export declare enum ColorLegendType {
+    LINEAR = "linear",
+    QUANTIZE = "quantize"
+}
+/**
+ * enum of divider status for heatmap
+ */
+export declare enum DividerStatus {
+    ON = "on",
+    AUTO = "auto",
+    OFF = "off"
+}
+/**
+ * enum of axis flavor
+ */
+export declare enum AxisFlavor {
+    DEFAULT = "default",
+    HOVERABLE = "hoverable"
+}

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

@@ -25,7 +25,8 @@ export declare enum Model {
  */
 export declare enum Toolbar {
     SHOW_OVERFLOW_MENU = "show-toolbar-overflow-menu",
-    HIDE_OVERFLOW_MENU = "hide-toolbar-overflow-menu"
+    HIDE_OVERFLOW_MENU = "hide-toolbar-overflow-menu",
+    BUTTON_CLICK = "toolbar-button-click"
 }
 /**
  * enum of all events related to the zoom-bar
@@ -56,7 +57,10 @@ export declare enum Axis {
     LABEL_MOUSEOVER = "axis-label-mouseover",
     LABEL_MOUSEMOVE = "axis-label-mousemove",
     LABEL_CLICK = "axis-label-click",
-    LABEL_MOUSEOUT = "axis-label-mouseout"
+    LABEL_MOUSEOUT = "axis-label-mouseout",
+    LABEL_FOCUS = "axis-label-focus",
+    LABEL_BLUR = "axis-label-blur",
+    RENDER_COMPLETE = "axis-render-complete"
 }
 /**
  * enum of all area graph events
@@ -215,3 +219,12 @@ export declare enum Meter {
     METER_MOUSEOUT = "meter-mouseout",
     METER_MOUSEMOVE = "meter-mousemove"
 }
+/**
+ * enum of all heatmap related events
+ */
+export declare enum Heatmap {
+    HEATMAP_MOUSEOVER = "heatmap-mouseover",
+    HEATMAP_CLICK = "heatmap-click",
+    HEATMAP_MOUSEOUT = "heatmap-mouseout",
+    HEATMAP_MOUSEMOVE = "hetmap-mousemove"
+}

package/build/src/model/cartesian-charts.d.ts

@@ -1,10 +1,17 @@
 import { ChartModel } from './model';
+import { AxisFlavor } from '../interfaces';
 /**
  * This supports adding X and Y Cartesian[2D] zoom data to a ChartModel
  * */
 export declare class ChartModelCartesian extends ChartModel {
+    protected axisFlavor: AxisFlavor;
     constructor(services: any);
-    private assignRangeAndDomains;
+    protected assignRangeAndDomains(): {
+        primaryDomain: any;
+        primaryRange: any;
+        secondaryDomain: any;
+        secondaryRange: any;
+    };
     getTabularDataArray(): any[];
     setData(newData: any): any;
     /**

package/build/src/model/heatmap.d.ts

@@ -0,0 +1,57 @@
+import { AxisFlavor } from '../interfaces';
+import { ChartModelCartesian } from './cartesian-charts';
+/** The gauge chart model layer */
+export declare class HeatmapModel extends ChartModelCartesian {
+    protected axisFlavor: AxisFlavor;
+    private _colorScale;
+    private _domains;
+    private _ranges;
+    private _matrix;
+    constructor(services: any);
+    /**
+     * Get min and maximum value of the display data
+     * @returns Array consisting of smallest and largest values in  data
+     */
+    getValueDomain(): any[];
+    /**
+     * @override
+     * @param value
+     * @returns
+     */
+    getFillColor(value: number): any;
+    /**
+     * Generate a list of all unique domains
+     * @returns String[]
+     */
+    getUniqueDomain(): string[];
+    /**
+     * Generates a list of all unique ranges
+     * @returns String[]
+     */
+    getUniqueRanges(): string[];
+    /**
+     * Generates a matrix (If doesn't exist) and returns it
+     * @returns Object
+     */
+    getMatrix(): {};
+    /**
+     *
+     * @param newData The new raw data to be set
+     */
+    setData(newData: any): any;
+    /**
+     * Converts Object matrix into a single array
+     * @returns Object[]
+     */
+    getMatrixAsArray(): Object[];
+    /**
+     * Generate tabular data from display data
+     * @returns Array<Object>
+     */
+    getTabularDataArray(): any[];
+    getColorClassName(configs: {
+        value?: number;
+        originalClassName?: string;
+    }): string;
+    protected setColorClassNames(): void;
+}

package/build/src/services/scales-cartesian.d.ts

@@ -37,6 +37,7 @@ export declare class CartesianScales extends Service {
     determineOrientation(): void;
     isDualAxes(): Boolean;
     determineAxisDuality(): void;
+    getCustomDomainValuesByposition(axisPosition: AxisPositions): any;
     getOrientation(): CartesianOrientations;
     getScaleByPosition(axisPosition: AxisPositions): any;
     getScaleTypeByPosition(axisPosition: AxisPositions): any;