@carbon/charts 0.41.62 → 0.41.66

package/CHANGELOG.md

@@ -3,16 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.41.62](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.61...v0.41.62) (2021-04-29)
+## [0.41.66](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.65...v0.41.66) (2021-05-25)
+
+**Note:** Version bump only for package @carbon/charts
 
 
-### Bug Fixes
 
-* **core:** fix minor bug with data values that are undefined ([#1007](https://github.com/carbon-design-system/carbon-charts/issues/1007)) ([5c4db99](https://github.com/carbon-design-system/carbon-charts/commit/5c4db996e3aaf5b8c8146b686945c9eb4a191b46))
 
 
+## [0.41.65](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.64...v0.41.65) (2021-05-19)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.41.64](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.63...v0.41.64) (2021-05-10)
+
+**Note:** Version bump only for package @carbon/charts
+
+## [0.41.63](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.62...v0.41.63) (2021-05-10)
+
+**Note:** Version bump only for package @carbon/charts
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.41.62](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.61...v0.41.62) (2021-04-29)
+
+### Bug Fixes
 
+-   **core:** fix minor bug with data values that are undefined
+    ([#1007](https://github.com/carbon-design-system/carbon-charts/issues/1007))
+    ([5c4db99](https://github.com/carbon-design-system/carbon-charts/commit/5c4db996e3aaf5b8c8146b686945c9eb4a191b46))
 
 # Change Log
 

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

@@ -14,6 +14,11 @@ declare const _default: {
         angular: string;
         vue: string;
     };
+    CirclePackChart: {
+        vanilla: string;
+        angular: string;
+        vue: string;
+    };
     BulletChart: {
         vanilla: string;
         angular: string;

package/build/demo/data/circle-pack.d.ts

@@ -0,0 +1,82 @@
+export declare const circlePackTwoLevelData: {
+    name: string;
+    children: {
+        name: string;
+        value: number;
+    }[];
+}[];
+export declare const circlePackTwoLevelOptions: {
+    experimental: string;
+    title: string;
+    canvasZoom: {
+        enabled: boolean;
+    };
+};
+export declare const circlePackSingleOptions: {
+    experimental: string;
+    title: string;
+    canvasZoom: {
+        enabled: boolean;
+    };
+};
+export declare const circlePackSingleLevelData: {
+    name: string;
+    value: number;
+}[];
+export declare const circlePackThreeLevelOptions: {
+    experimental: string;
+    title: string;
+    canvasZoom: {
+        enabled: boolean;
+    };
+};
+export declare const circlePackThreeLevelData: {
+    name: string;
+    children: ({
+        name: string;
+        children: {
+            name: string;
+            value: number;
+        }[];
+        value?: undefined;
+    } | {
+        name: string;
+        value: number;
+        children?: undefined;
+    })[];
+}[];
+export declare const circlePackThreeLevelsMonochromeOptions: {
+    experimental: string;
+    title: string;
+    canvasZoom: {
+        enabled: boolean;
+    };
+};
+export declare const circlePackThreeLevelsMonochromeData: {
+    name: string;
+    children: {
+        name: string;
+        children: ({
+            name: string;
+            children: {
+                name: string;
+                value: number;
+            }[];
+            value?: undefined;
+        } | {
+            name: string;
+            value: number;
+            children?: undefined;
+        })[];
+    }[];
+}[];
+export declare const circlePackThreeLevelNoZoomOptions: {
+    experimental: string;
+    title: string;
+    circlePack: {
+        hierarchyLevel: number;
+    };
+    canvasZoom: {
+        enabled: boolean;
+    };
+};

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

@@ -15,6 +15,7 @@ export * from './scatter';
 export * from './step';
 export * from './time-series-axis';
 export * from './treemap';
+export * from './circle-pack';
 export * from './toolbar';
 export * from './wordcloud';
 export * from './zoom-bar';

package/build/src/charts/circle-pack.d.ts

@@ -0,0 +1,8 @@
+import { Chart } from '../chart';
+import { CirclePackChartModel } from './../model-circle-pack';
+import { ChartConfig, CirclePackChartOptions } from '../interfaces/index';
+export declare class CirclePackChart extends Chart {
+    model: CirclePackChartModel;
+    constructor(holder: Element, chartConfigs: ChartConfig<CirclePackChartOptions>);
+    getComponents(): any[];
+}

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

@@ -16,4 +16,5 @@ export * from './radar';
 export * from './gauge';
 export * from './combo';
 export * from './treemap';
+export * from './circle-pack';
 export * from './wordcloud';

package/build/src/components/essentials/canvas-chart-clip.d.ts

@@ -0,0 +1,6 @@
+import { ChartClip } from './../axes/chart-clip';
+export declare class CanvasChartClip extends ChartClip {
+    type: string;
+    chartClipId: string;
+    createClipPath(): void;
+}

package/build/src/components/graphs/circle-pack.d.ts

@@ -0,0 +1,17 @@
+import { Component } from '../component';
+export declare class CirclePack extends Component {
+    type: string;
+    focal: any;
+    render(animate?: boolean): void;
+    unhighlightChildren(childData: any): void;
+    highlightChildren(childData: any, classname?: any): void;
+    getZoomClass(node: any): "focal" | "non-focal";
+    addLegendListeners(): void;
+    removeBackgroundListeners(): void;
+    setBackgroundListeners(): void;
+    handleLegendOnHover: (event: CustomEvent<any>) => void;
+    handleLegendMouseOut: (event: CustomEvent<any>) => void;
+    getZoomIcon(): string;
+    addEventListeners(): void;
+    destroy(): void;
+}

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

@@ -5,6 +5,7 @@ export * from './essentials/title';
 export * from './essentials/title-meter';
 export * from './essentials/tooltip';
 export * from './essentials/tooltip-axis';
+export * from './essentials/canvas-chart-clip';
 export * from './graphs/area';
 export * from './graphs/area-stacked';
 export * from './graphs/bar-simple';
@@ -24,6 +25,7 @@ export * from './graphs/skeleton';
 export * from './graphs/skeleton-lines';
 export * from './graphs/treemap';
 export * from './graphs/radar';
+export * from './graphs/circle-pack';
 export * from './graphs/wordcloud';
 export * from './layout/spacer';
 export * from './layout/layout';

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

@@ -1,14 +1,5 @@
 import { ZoomBarTypes } from './interfaces';
-export declare const color: {
-    pairingOptions: {
-        '1-color': number;
-        '2-color': number;
-        '3-color': number;
-        '4-color': number;
-        '5-color': number;
-        '14-color': number;
-    };
-};
+import { easeCubicInOut } from 'd3-ease';
 export declare const area: {
     opacity: {
         unselected: number;
@@ -28,6 +19,31 @@ export declare const axis: {
     };
     paddingRatio: number;
 };
+export declare const canvasZoomSettings: {
+    duration: number;
+    ease: typeof easeCubicInOut;
+    zoomLevel: number;
+};
+export declare const circlePack: {
+    circles: {
+        fillOpacity: number;
+    };
+    padding: {
+        mainGroup: number;
+        children: number;
+    };
+    hierarchyLevel: number;
+};
+export declare const color: {
+    pairingOptions: {
+        '1-color': number;
+        '2-color': number;
+        '3-color': number;
+        '4-color': number;
+        '5-color': number;
+        '14-color': number;
+    };
+};
 export declare const boxplot: {
     circle: {
         radius: number;
@@ -99,6 +115,15 @@ export declare const legend: {
             height: number;
         }[];
     };
+    zoom: {
+        iconData: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }[];
+        color: string;
+    };
 };
 export declare const lines: {
     opacity: {

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, RadarChartOptions, ComboChartOptions, TreemapChartOptions, WorldCloudChartOptions, GridOptions, RulerOptions, TimeScaleOptions, TooltipOptions, MeterChartOptions } from './interfaces';
+import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LollipopChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, BoxplotChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, BulletChartOptions, RadarChartOptions, ComboChartOptions, TreemapChartOptions, CirclePackChartOptions, WorldCloudChartOptions, GridOptions, RulerOptions, TimeScaleOptions, TooltipOptions, MeterChartOptions } from './interfaces';
 /**
  * Grid options
  */
@@ -33,6 +33,7 @@ export declare const options: {
     gaugeChart: GaugeChartOptions;
     comboChart: ComboChartOptions;
     treemapChart: TreemapChartOptions;
+    circlePackChart: CirclePackChartOptions;
     wordCloudChart: WorldCloudChartOptions;
 };
 export * from './configuration-non-customizable';

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

@@ -348,3 +348,15 @@ export interface ComboChartOptions extends AxisChartOptions {
 }
 export interface TreemapChartOptions extends BaseChartOptions {
 }
+export interface CirclePackChartOptions extends BaseChartOptions {
+    circlePack?: {
+        circles: {
+            fillOpacity: number;
+        };
+        hierachyLevel: number;
+        padding?: {
+            outer?: number;
+            inner?: number;
+        };
+    };
+}

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

@@ -198,5 +198,6 @@ export declare enum LegendItemType {
     AREA = "area",
     SIZE = "size",
     LINE = "line",
-    QUARTILE = "quartile"
+    QUARTILE = "quartile",
+    ZOOM = "zoom"
 }

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

@@ -35,6 +35,13 @@ export declare enum ZoomBar {
 export declare enum ZoomDomain {
     CHANGE = "zoom-domain-change"
 }
+/** enum of all events related to canvas zoom *
+ *
+ */
+export declare enum CanvasZoom {
+    CANVAS_ZOOM_IN = "canvas-zoom-in",
+    CANVAS_ZOOM_OUT = "canvas-zoom-out"
+}
 /**
  * enum of all axis-related events
  */
@@ -162,3 +169,12 @@ export declare enum Legend {
     ITEM_MOUSEOUT = "legend-item-onmouseout",
     ITEMS_UPDATE = "legend-items-update"
 }
+/**
+ * enum of all circlepack related events
+ */
+export declare enum CirclePack {
+    CIRCLE_MOUSEOVER = "circle-leaf-mouseover",
+    CIRCLE_CLICK = "circle-leaf-click",
+    CIRCLE_MOUSEOUT = "circle-leaf-mouseout",
+    CIRCLE_MOUSEMOVE = "circle-leaf-mousemove"
+}

package/build/src/model-circle-pack.d.ts

@@ -0,0 +1,26 @@
+import { ChartModel } from './model';
+import { LegendItemType } from './interfaces/enums';
+/** The charting model layer which includes mainly the chart data and options,
+ * as well as some misc. information to be shared among components */
+export declare class CirclePackChartModel extends ChartModel {
+    parentNode: boolean;
+    constructor(services: any);
+    setData(newData: any): void;
+    setOptions(newOptions: any): void;
+    getZoomOptions(options?: any): {
+        legend?: undefined;
+    } | {
+        legend: {
+            additionalItems: {
+                type: LegendItemType;
+                name: string;
+            }[];
+        };
+    };
+    setZoom(options?: any): void;
+    updateHierarchyLevel(depth: number): void;
+    getHierarchyLevel(): any;
+    hasParentNode(): boolean;
+    setDataGroups(): void;
+    protected setChildrenDataGroup(node: any, name: any): any;
+}

package/build/src/services/canvas-zoom.d.ts

@@ -0,0 +1,11 @@
+import { Service } from './service';
+export declare class CanvasZoom extends Service {
+    protected model: any;
+    /**
+     * focal:  object to zoom into
+     * canvasElements: all the elements to translate and zoom on the chart area
+     * zoomSettings: object containing duration, easing and zoomlevel for the zoom behaviours
+     *  */
+    zoomIn(focal: any, canvasElements: any, zoomSettings?: any): void;
+    zoomOut(canvasElements: any, zoomSettings?: any): void;
+}

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

@@ -5,3 +5,4 @@ export * from './essentials/gradient-utils';
 export * from './scales-cartesian';
 export * from './curves';
 export * from './zoom';
+export * from './canvas-zoom';