@ag-grid-enterprise/charts - npm Package Compare versions

Comparing version 23.0.2 to 23.1.0

dist/cjs/chartAdaptor/chartComp/chartDatasource.js

@@ -44,3 +44,3 @@ "use strict";
         var modelLastRow = this.gridRowModel.getRowCount() - 1;
-        var rangeLastRow = params.endRow > 0 ? Math.min(params.endRow, modelLastRow) : modelLastRow;
+        var rangeLastRow = params.endRow >= 0 ? Math.min(params.endRow, modelLastRow) : modelLastRow;
         var numRows = rangeLastRow - params.startRow + 1;
@@ -47,0 +47,0 @@ var _loop_1 = function (i) {

dist/cjs/chartAdaptor/chartComp/chartProxies/chartProxy.d.ts

@@ -63,2 +63,3 @@ import { CaptionOptions, ChartOptions, ChartType, DropShadowOptions, EventService, FontOptions, PaddingOptions, ProcessChartOptionsParams, SeriesOptions, GridApi, ColumnApi } from "@ag-grid-community/core";
     setTitleOption(property: keyof CaptionOptions, value: any): void;
+    getTitleOption(property: keyof CaptionOptions): any;
     getChartPaddingOption: (property: "left" | "right" | "top" | "bottom") => string;
@@ -65,0 +66,0 @@ setChartPaddingOption(property: keyof PaddingOptions, value: number): void;

dist/cjs/chartAdaptor/chartComp/chartProxies/chartProxy.js

@@ -64,6 +64,2 @@ "use strict";
         }
-        // we want to preserve the existing width/height if an existing chart is being changed to a different type,
-        // so this allows the chart defaults to be overridden
-        this.chartOptions.width = this.chartProxyParams.width || this.chartOptions.width;
-        this.chartOptions.height = this.chartProxyParams.height || this.chartOptions.height;
     };
@@ -151,2 +147,5 @@ ChartProxy.prototype.overridePalette = function (chartOptions) {
     };
+    ChartProxy.prototype.getTitleOption = function (property) {
+        return this.chartOptions.title[property];
+    };
     ChartProxy.prototype.setChartPaddingOption = function (property, value) {
@@ -282,4 +281,6 @@ var padding = this.chartOptions.padding;
                     fill: 'yellow',
-                }
-            }
+                },
+                listeners: {}
+            },
+            listeners: {}
         };
@@ -286,0 +287,0 @@ };

dist/cjs/chartAdaptor/chartComp/chartTranslator.js

@@ -48,2 +48,3 @@ "use strict";
         title: 'Title',
+        titlePlaceholder: 'Chart title - double click to edit',
         background: 'Background',
@@ -87,2 +88,3 @@ font: 'Font',
         strokeOpacity: 'Line Opacity',
+        histogramBinCount: 'Bin count',
         columnGroup: 'Column',
@@ -94,2 +96,3 @@ barGroup: 'Bar',
         areaGroup: 'Area',
+        histogramGroup: 'Histogram',
         groupedColumnTooltip: 'Grouped',
@@ -109,2 +112,3 @@ stackedColumnTooltip: 'Stacked',
         bubbleTooltip: 'Bubble',
+        histogramTooltip: 'Histogram',
         noDataToChart: 'No data available to be charted.',
@@ -111,0 +115,0 @@ pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.',

dist/cjs/chartAdaptor/chartComp/gridChartComp.d.ts

@@ -20,3 +20,3 @@ import { CellRange, ChartModel, ChartOptions, ChartType, Component, IAggFunc, ProcessChartOptionsParams } from "@ag-grid-community/core";
     private eEmpty;
-    private resizeObserverService;
+    private eTitleEditContainer;
     private gridOptionsWrapper;
@@ -30,2 +30,3 @@ private environment;
     private chartMenu;
+    private titleEdit;
     private chartDialog;
@@ -44,2 +45,3 @@ private model;
     private addMenu;
+    private addTitleEditComp;
     private refresh;
@@ -53,3 +55,2 @@ private shouldRecreateChart;
     refreshCanvasSize(): void;
-    private addResizeListener;
     private setActiveChartCellRange;
@@ -56,0 +57,0 @@ private raiseChartCreatedEvent;

dist/cjs/chartAdaptor/chartComp/gridChartComp.js

@@ -24,2 +24,3 @@ "use strict";
 var chartMenu_1 = require("./menu/chartMenu");
+var titleEdit_1 = require("./titleEdit");
 var chartController_1 = require("./chartController");
@@ -33,2 +34,3 @@ var chartDataModel_1 = require("./chartDataModel");
 var scatterChartProxy_1 = require("./chartProxies/cartesian/scatterChartProxy");
+var histogramChartProxy_1 = require("./chartProxies/cartesian/histogramChartProxy");
 var GridChartComp = /** @class */ (function (_super) {
@@ -58,4 +60,4 @@ __extends(GridChartComp, _super);
         }
-        this.addResizeListener();
         this.addMenu();
+        this.addTitleEditComp();
         this.addDestroyableEventListener(this.getGui(), 'focusin', this.setActiveChartCellRange.bind(this));
@@ -101,2 +103,3 @@ this.addDestroyableEventListener(this.chartController, chartController_1.ChartController.EVENT_CHART_UPDATED, this.refresh.bind(this));
         this.chartProxy = this.createChartProxy(chartProxyParams);
+        this.titleEdit && this.titleEdit.setChartProxy(this.chartProxy);
         core_1._.addCssClass(this.eChart.querySelector('canvas'), 'ag-charts-canvas');
@@ -130,2 +133,4 @@ this.chartController.setChartProxy(this.chartProxy);
                 return new scatterChartProxy_1.ScatterChartProxy(chartProxyParams);
+            case core_1.ChartType.Histogram:
+                return new histogramChartProxy_1.HistogramChartProxy(chartProxyParams);
         }
@@ -156,2 +161,8 @@ };
         var ratio = 0.553;
+        {
+            var _a = this.chartProxy.getChartOptions(), width_1 = _a.width, height_1 = _a.height;
+            if (width_1 && height_1) {
+                return { width: width_1, height: height_1 };
+            }
+        }
         var chart = this.chartProxy.getChart();
@@ -174,2 +185,9 @@ var width = this.params.insideDialog ? 850 : chart.width;
     };
+    GridChartComp.prototype.addTitleEditComp = function () {
+        this.titleEdit = this.wireBean(new titleEdit_1.TitleEdit(this.chartMenu));
+        this.eTitleEditContainer.appendChild(this.titleEdit.getGui());
+        if (this.chartProxy) {
+            this.titleEdit.setChartProxy(this.chartProxy);
+        }
+    };
     GridChartComp.prototype.refresh = function () {
@@ -221,4 +239,4 @@ if (this.shouldRecreateChart()) {
             var isEmpty = pivotModeDisabled || isEmptyChart;
-            core_1._.setVisible(this.eChart, !isEmpty);
-            core_1._.setVisible(this.eEmpty, isEmpty);
+            core_1._.setDisplayed(this.eChart, !isEmpty);
+            core_1._.setDisplayed(this.eEmpty, isEmpty);
         }
@@ -254,14 +272,2 @@ if (pivotModeDisabled) {
     };
-    GridChartComp.prototype.addResizeListener = function () {
-        var _this = this;
-        var eGui = this.getGui();
-        var resizeFunc = function () {
-            if (!eGui || !eGui.offsetParent) {
-                observeResizeFunc();
-                return;
-            }
-            _this.refreshCanvasSize();
-        };
-        var observeResizeFunc = this.resizeObserverService.observeResize(this.eChart, resizeFunc, 5);
-    };
     GridChartComp.prototype.setActiveChartCellRange = function (focusEvent) {
@@ -316,3 +322,3 @@ if (this.getGui().contains(focusEvent.relatedTarget)) {
     };
-    GridChartComp.TEMPLATE = "<div class=\"ag-chart\" tabindex=\"-1\">\n            <div ref=\"eChartContainer\" tabindex=\"-1\" class=\"ag-chart-components-wrapper\">\n                <div ref=\"eChart\" class=\"ag-chart-canvas-wrapper\">\n                </div>\n                <div ref=\"eEmpty\" class=\"ag-chart-empty-text ag-unselectable\"></div>\n            </div>\n            <div ref=\"eMenuContainer\" class=\"ag-chart-docked-container\"></div>\n        </div>";
+    GridChartComp.TEMPLATE = "<div class=\"ag-chart\" tabindex=\"-1\">\n            <div ref=\"eChartContainer\" tabindex=\"-1\" class=\"ag-chart-components-wrapper\">\n                <div ref=\"eChart\" class=\"ag-chart-canvas-wrapper\">\n                </div>\n                <div ref=\"eEmpty\" class=\"ag-chart-empty-text ag-unselectable\"></div>\n            </div>\n            <div ref=\"eTitleEditContainer\">\n            </div>\n            <div ref=\"eMenuContainer\" class=\"ag-chart-docked-container\"></div>\n        </div>";
     __decorate([
@@ -331,4 +337,4 @@ core_1.RefSelector('eChart')
     __decorate([
-        core_1.Autowired('resizeObserverService')
-    ], GridChartComp.prototype, "resizeObserverService", void 0);
+        core_1.RefSelector('eTitleEditContainer')
+    ], GridChartComp.prototype, "eTitleEditContainer", void 0);
     __decorate([
@@ -335,0 +341,0 @@ core_1.Autowired('gridOptionsWrapper')

dist/cjs/chartAdaptor/chartComp/menu/format/chart/chartPanel.d.ts

@@ -6,3 +6,2 @@ import { Component } from "@ag-grid-community/core";
     private chartGroup;
-    private titleInput;
     private chartTranslator;
@@ -9,0 +8,0 @@ private activePanels;

dist/cjs/chartAdaptor/chartComp/menu/format/chart/chartPanel.js

@@ -24,4 +24,4 @@ "use strict";
 var paddingPanel_1 = require("./paddingPanel");
-var fontPanel_1 = require("../fontPanel");
 var backgroundPanel_1 = require("./backgroundPanel");
+var titlePanel_1 = require("./titlePanel");
 var ChartPanel = /** @class */ (function (_super) {
@@ -49,59 +49,9 @@ __extends(ChartPanel, _super);
             .setTitle(this.chartTranslator.translate('chart'))
-            .toggleGroupExpand(false)
+            .toggleGroupExpand(true)
             .hideEnabledCheckbox(true);
     };
     ChartPanel.prototype.initTitles = function () {
-        var _this = this;
-        var chartProxy = this.chartController.getChartProxy();
-        var title = chartProxy.getChartOption('title');
-        var text = title && title.text ? title.text : '';
-        var setFont = function (font) {
-            var chartProxy = _this.chartController.getChartProxy();
-            if (font.family) {
-                chartProxy.setTitleOption('fontFamily', font.family);
-            }
-            if (font.weight) {
-                chartProxy.setTitleOption('fontWeight', font.weight);
-            }
-            if (font.style) {
-                chartProxy.setTitleOption('fontStyle', font.style);
-            }
-            if (font.size) {
-                chartProxy.setTitleOption('fontSize', font.size);
-            }
-            if (font.color) {
-                chartProxy.setTitleOption('color', font.color);
-            }
-        };
-        var initialFont = {
-            family: title ? chartProxy.getChartOption('title.fontFamily') : 'Verdana, sans-serif',
-            style: title ? chartProxy.getChartOption('title.fontStyle') : undefined,
-            weight: title ? chartProxy.getChartOption('title.fontWeight') : undefined,
-            size: title ? chartProxy.getChartOption('title.fontSize') : 22,
-            color: title ? chartProxy.getChartOption('title.color') : 'black'
-        };
-        if (!title) {
-            setFont(initialFont);
-        }
-        this.titleInput
-            .setLabel(this.chartTranslator.translate('title'))
-            .setLabelAlignment('top')
-            .setLabelWidth('flex')
-            .setValue(text)
-            .onValueChange(function (value) {
-            _this.chartController.getChartProxy().setTitleOption('text', value);
-            // only show font panel when title exists
-            fontPanelComp.setEnabled(core_1._.exists(value));
-        });
-        var params = {
-            name: this.chartTranslator.translate('font'),
-            enabled: true,
-            suppressEnabledCheckbox: true,
-            initialFont: initialFont,
-            setFont: setFont,
-        };
-        var fontPanelComp = this.wireBean(new fontPanel_1.FontPanel(params));
-        this.chartGroup.addItem(fontPanelComp);
-        this.activePanels.push(fontPanelComp);
-        fontPanelComp.setEnabled(core_1._.exists(text));
+        var titlePanelComp = this.wireBean(new titlePanel_1.default(this.chartController));
+        this.chartGroup.addItem(titlePanelComp);
+        this.activePanels.push(titlePanelComp);
     };
@@ -128,3 +78,3 @@ ChartPanel.prototype.initPaddingPanel = function () {
     };
-    ChartPanel.TEMPLATE = "<div>\n            <ag-group-component ref=\"chartGroup\">\n                <ag-input-text-area ref=\"titleInput\"></ag-input-text-area>\n            </ag-group-component>\n        <div>";
+    ChartPanel.TEMPLATE = "<div>\n            <ag-group-component ref=\"chartGroup\">\n            </ag-group-component>\n        </div>";
     __decorate([
@@ -134,5 +84,2 @@ core_1.RefSelector('chartGroup')
     __decorate([
-        core_1.RefSelector('titleInput')
-    ], ChartPanel.prototype, "titleInput", void 0);
-    __decorate([
         core_1.Autowired('chartTranslator')
@@ -139,0 +86,0 @@ ], ChartPanel.prototype, "chartTranslator", void 0);

dist/cjs/chartAdaptor/chartComp/menu/format/chartFormattingPanel.js

@@ -32,2 +32,3 @@ "use strict";
 var scatterSeriesPanel_1 = require("./series/scatterSeriesPanel");
+var histogramSeriesPanel_1 = require("./series/histogramSeriesPanel");
 var ChartFormattingPanel = /** @class */ (function (_super) {
@@ -84,2 +85,6 @@ __extends(ChartFormattingPanel, _super);
                 break;
+            case core_1.ChartType.Histogram:
+                this.addComponent(new axisPanel_1.AxisPanel(this.chartController));
+                this.addComponent(new histogramSeriesPanel_1.HistogramSeriesPanel(this.chartController));
+                break;
             default:
@@ -86,0 +91,0 @@ console.warn("ag-Grid: ChartFormattingPanel - unexpected chart type index: " + chartType + " supplied");

dist/cjs/chartAdaptor/chartComp/menu/settings/miniCharts/index.d.ts

@@ -15,1 +15,2 @@ export * from "./miniColumn";
 export * from "./miniNormalizedArea";
+export * from "./miniHistogram";

dist/cjs/chartAdaptor/chartComp/menu/settings/miniCharts/index.js

@@ -20,2 +20,3 @@ "use strict";
 __export(require("./miniNormalizedArea"));
+__export(require("./miniHistogram"));
 //# sourceMappingURL=index.js.map

dist/cjs/chartAdaptor/chartComp/menu/settings/miniChartsContainer.js

@@ -62,2 +62,5 @@ "use strict";
                 miniCharts_1.MiniNormalizedArea
+            ],
+            histogramGroup: [
+                miniCharts_1.MiniHistogram
             ]
@@ -64,0 +67,0 @@ };

dist/es6/chartAdaptor/chartComp/chartDatasource.js

@@ -42,3 +42,3 @@ var __extends = (this && this.__extends) || (function () {
         var modelLastRow = this.gridRowModel.getRowCount() - 1;
-        var rangeLastRow = params.endRow > 0 ? Math.min(params.endRow, modelLastRow) : modelLastRow;
+        var rangeLastRow = params.endRow >= 0 ? Math.min(params.endRow, modelLastRow) : modelLastRow;
         var numRows = rangeLastRow - params.startRow + 1;
@@ -45,0 +45,0 @@ var _loop_1 = function (i) {

dist/es6/chartAdaptor/chartComp/chartProxies/chartProxy.d.ts

@@ -63,2 +63,3 @@ import { CaptionOptions, ChartOptions, ChartType, DropShadowOptions, EventService, FontOptions, PaddingOptions, ProcessChartOptionsParams, SeriesOptions, GridApi, ColumnApi } from "@ag-grid-community/core";
     setTitleOption(property: keyof CaptionOptions, value: any): void;
+    getTitleOption(property: keyof CaptionOptions): any;
     getChartPaddingOption: (property: "left" | "right" | "top" | "bottom") => string;
@@ -65,0 +66,0 @@ setChartPaddingOption(property: keyof PaddingOptions, value: number): void;

dist/es6/chartAdaptor/chartComp/chartProxies/chartProxy.js

@@ -62,6 +62,2 @@ var __assign = (this && this.__assign) || function () {
         }
-        // we want to preserve the existing width/height if an existing chart is being changed to a different type,
-        // so this allows the chart defaults to be overridden
-        this.chartOptions.width = this.chartProxyParams.width || this.chartOptions.width;
-        this.chartOptions.height = this.chartProxyParams.height || this.chartOptions.height;
     };
@@ -149,2 +145,5 @@ ChartProxy.prototype.overridePalette = function (chartOptions) {
     };
+    ChartProxy.prototype.getTitleOption = function (property) {
+        return this.chartOptions.title[property];
+    };
     ChartProxy.prototype.setChartPaddingOption = function (property, value) {
@@ -280,4 +279,6 @@ var padding = this.chartOptions.padding;
                     fill: 'yellow',
-                }
-            }
+                },
+                listeners: {}
+            },
+            listeners: {}
         };
@@ -284,0 +285,0 @@ };

dist/es6/chartAdaptor/chartComp/chartTranslator.js

@@ -46,2 +46,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         title: 'Title',
+        titlePlaceholder: 'Chart title - double click to edit',
         background: 'Background',
@@ -85,2 +86,3 @@ font: 'Font',
         strokeOpacity: 'Line Opacity',
+        histogramBinCount: 'Bin count',
         columnGroup: 'Column',
@@ -92,2 +94,3 @@ barGroup: 'Bar',
         areaGroup: 'Area',
+        histogramGroup: 'Histogram',
         groupedColumnTooltip: 'Grouped',
@@ -107,2 +110,3 @@ stackedColumnTooltip: 'Stacked',
         bubbleTooltip: 'Bubble',
+        histogramTooltip: 'Histogram',
         noDataToChart: 'No data available to be charted.',
@@ -109,0 +113,0 @@ pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.',

dist/es6/chartAdaptor/chartComp/gridChartComp.d.ts

@@ -20,3 +20,3 @@ import { CellRange, ChartModel, ChartOptions, ChartType, Component, IAggFunc, ProcessChartOptionsParams } from "@ag-grid-community/core";
     private eEmpty;
-    private resizeObserverService;
+    private eTitleEditContainer;
     private gridOptionsWrapper;
@@ -30,2 +30,3 @@ private environment;
     private chartMenu;
+    private titleEdit;
     private chartDialog;
@@ -44,2 +45,3 @@ private model;
     private addMenu;
+    private addTitleEditComp;
     private refresh;
@@ -53,3 +55,2 @@ private shouldRecreateChart;
     refreshCanvasSize(): void;
-    private addResizeListener;
     private setActiveChartCellRange;
@@ -56,0 +57,0 @@ private raiseChartCreatedEvent;

dist/es6/chartAdaptor/chartComp/gridChartComp.js

@@ -22,2 +22,3 @@ var __extends = (this && this.__extends) || (function () {
 import { ChartMenu } from "./menu/chartMenu";
+import { TitleEdit } from "./titleEdit";
 import { ChartController } from "./chartController";
@@ -31,2 +32,3 @@ import { ChartDataModel } from "./chartDataModel";
 import { ScatterChartProxy } from "./chartProxies/cartesian/scatterChartProxy";
+import { HistogramChartProxy } from "./chartProxies/cartesian/histogramChartProxy";
 var GridChartComp = /** @class */ (function (_super) {
@@ -56,4 +58,4 @@ __extends(GridChartComp, _super);
         }
-        this.addResizeListener();
         this.addMenu();
+        this.addTitleEditComp();
         this.addDestroyableEventListener(this.getGui(), 'focusin', this.setActiveChartCellRange.bind(this));
@@ -99,2 +101,3 @@ this.addDestroyableEventListener(this.chartController, ChartController.EVENT_CHART_UPDATED, this.refresh.bind(this));
         this.chartProxy = this.createChartProxy(chartProxyParams);
+        this.titleEdit && this.titleEdit.setChartProxy(this.chartProxy);
         _.addCssClass(this.eChart.querySelector('canvas'), 'ag-charts-canvas');
@@ -128,2 +131,4 @@ this.chartController.setChartProxy(this.chartProxy);
                 return new ScatterChartProxy(chartProxyParams);
+            case ChartType.Histogram:
+                return new HistogramChartProxy(chartProxyParams);
         }
@@ -154,2 +159,8 @@ };
         var ratio = 0.553;
+        {
+            var _a = this.chartProxy.getChartOptions(), width_1 = _a.width, height_1 = _a.height;
+            if (width_1 && height_1) {
+                return { width: width_1, height: height_1 };
+            }
+        }
         var chart = this.chartProxy.getChart();
@@ -172,2 +183,9 @@ var width = this.params.insideDialog ? 850 : chart.width;
     };
+    GridChartComp.prototype.addTitleEditComp = function () {
+        this.titleEdit = this.wireBean(new TitleEdit(this.chartMenu));
+        this.eTitleEditContainer.appendChild(this.titleEdit.getGui());
+        if (this.chartProxy) {
+            this.titleEdit.setChartProxy(this.chartProxy);
+        }
+    };
     GridChartComp.prototype.refresh = function () {
@@ -219,4 +237,4 @@ if (this.shouldRecreateChart()) {
             var isEmpty = pivotModeDisabled || isEmptyChart;
-            _.setVisible(this.eChart, !isEmpty);
-            _.setVisible(this.eEmpty, isEmpty);
+            _.setDisplayed(this.eChart, !isEmpty);
+            _.setDisplayed(this.eEmpty, isEmpty);
         }
@@ -252,14 +270,2 @@ if (pivotModeDisabled) {
     };
-    GridChartComp.prototype.addResizeListener = function () {
-        var _this = this;
-        var eGui = this.getGui();
-        var resizeFunc = function () {
-            if (!eGui || !eGui.offsetParent) {
-                observeResizeFunc();
-                return;
-            }
-            _this.refreshCanvasSize();
-        };
-        var observeResizeFunc = this.resizeObserverService.observeResize(this.eChart, resizeFunc, 5);
-    };
     GridChartComp.prototype.setActiveChartCellRange = function (focusEvent) {
@@ -314,3 +320,3 @@ if (this.getGui().contains(focusEvent.relatedTarget)) {
     };
-    GridChartComp.TEMPLATE = "<div class=\"ag-chart\" tabindex=\"-1\">\n            <div ref=\"eChartContainer\" tabindex=\"-1\" class=\"ag-chart-components-wrapper\">\n                <div ref=\"eChart\" class=\"ag-chart-canvas-wrapper\">\n                </div>\n                <div ref=\"eEmpty\" class=\"ag-chart-empty-text ag-unselectable\"></div>\n            </div>\n            <div ref=\"eMenuContainer\" class=\"ag-chart-docked-container\"></div>\n        </div>";
+    GridChartComp.TEMPLATE = "<div class=\"ag-chart\" tabindex=\"-1\">\n            <div ref=\"eChartContainer\" tabindex=\"-1\" class=\"ag-chart-components-wrapper\">\n                <div ref=\"eChart\" class=\"ag-chart-canvas-wrapper\">\n                </div>\n                <div ref=\"eEmpty\" class=\"ag-chart-empty-text ag-unselectable\"></div>\n            </div>\n            <div ref=\"eTitleEditContainer\">\n            </div>\n            <div ref=\"eMenuContainer\" class=\"ag-chart-docked-container\"></div>\n        </div>";
     __decorate([
@@ -329,4 +335,4 @@ RefSelector('eChart')
     __decorate([
-        Autowired('resizeObserverService')
-    ], GridChartComp.prototype, "resizeObserverService", void 0);
+        RefSelector('eTitleEditContainer')
+    ], GridChartComp.prototype, "eTitleEditContainer", void 0);
     __decorate([
@@ -333,0 +339,0 @@ Autowired('gridOptionsWrapper')

dist/es6/chartAdaptor/chartComp/menu/format/chart/chartPanel.d.ts

@@ -6,3 +6,2 @@ import { Component } from "@ag-grid-community/core";
     private chartGroup;
-    private titleInput;
     private chartTranslator;
@@ -9,0 +8,0 @@ private activePanels;

dist/es6/chartAdaptor/chartComp/menu/format/chart/chartPanel.js

@@ -22,4 +22,4 @@ var __extends = (this && this.__extends) || (function () {
 import { PaddingPanel } from "./paddingPanel";
-import { FontPanel } from "../fontPanel";
 import { BackgroundPanel } from "./backgroundPanel";
+import TitlePanel from "./titlePanel";
 var ChartPanel = /** @class */ (function (_super) {
@@ -47,59 +47,9 @@ __extends(ChartPanel, _super);
             .setTitle(this.chartTranslator.translate('chart'))
-            .toggleGroupExpand(false)
+            .toggleGroupExpand(true)
             .hideEnabledCheckbox(true);
     };
     ChartPanel.prototype.initTitles = function () {
-        var _this = this;
-        var chartProxy = this.chartController.getChartProxy();
-        var title = chartProxy.getChartOption('title');
-        var text = title && title.text ? title.text : '';
-        var setFont = function (font) {
-            var chartProxy = _this.chartController.getChartProxy();
-            if (font.family) {
-                chartProxy.setTitleOption('fontFamily', font.family);
-            }
-            if (font.weight) {
-                chartProxy.setTitleOption('fontWeight', font.weight);
-            }
-            if (font.style) {
-                chartProxy.setTitleOption('fontStyle', font.style);
-            }
-            if (font.size) {
-                chartProxy.setTitleOption('fontSize', font.size);
-            }
-            if (font.color) {
-                chartProxy.setTitleOption('color', font.color);
-            }
-        };
-        var initialFont = {
-            family: title ? chartProxy.getChartOption('title.fontFamily') : 'Verdana, sans-serif',
-            style: title ? chartProxy.getChartOption('title.fontStyle') : undefined,
-            weight: title ? chartProxy.getChartOption('title.fontWeight') : undefined,
-            size: title ? chartProxy.getChartOption('title.fontSize') : 22,
-            color: title ? chartProxy.getChartOption('title.color') : 'black'
-        };
-        if (!title) {
-            setFont(initialFont);
-        }
-        this.titleInput
-            .setLabel(this.chartTranslator.translate('title'))
-            .setLabelAlignment('top')
-            .setLabelWidth('flex')
-            .setValue(text)
-            .onValueChange(function (value) {
-            _this.chartController.getChartProxy().setTitleOption('text', value);
-            // only show font panel when title exists
-            fontPanelComp.setEnabled(_.exists(value));
-        });
-        var params = {
-            name: this.chartTranslator.translate('font'),
-            enabled: true,
-            suppressEnabledCheckbox: true,
-            initialFont: initialFont,
-            setFont: setFont,
-        };
-        var fontPanelComp = this.wireBean(new FontPanel(params));
-        this.chartGroup.addItem(fontPanelComp);
-        this.activePanels.push(fontPanelComp);
-        fontPanelComp.setEnabled(_.exists(text));
+        var titlePanelComp = this.wireBean(new TitlePanel(this.chartController));
+        this.chartGroup.addItem(titlePanelComp);
+        this.activePanels.push(titlePanelComp);
     };
@@ -126,3 +76,3 @@ ChartPanel.prototype.initPaddingPanel = function () {
     };
-    ChartPanel.TEMPLATE = "<div>\n            <ag-group-component ref=\"chartGroup\">\n                <ag-input-text-area ref=\"titleInput\"></ag-input-text-area>\n            </ag-group-component>\n        <div>";
+    ChartPanel.TEMPLATE = "<div>\n            <ag-group-component ref=\"chartGroup\">\n            </ag-group-component>\n        </div>";
     __decorate([
@@ -132,5 +82,2 @@ RefSelector('chartGroup')
     __decorate([
-        RefSelector('titleInput')
-    ], ChartPanel.prototype, "titleInput", void 0);
-    __decorate([
         Autowired('chartTranslator')
@@ -137,0 +84,0 @@ ], ChartPanel.prototype, "chartTranslator", void 0);

dist/es6/chartAdaptor/chartComp/menu/format/chartFormattingPanel.js

@@ -30,2 +30,3 @@ var __extends = (this && this.__extends) || (function () {
 import { ScatterSeriesPanel } from "./series/scatterSeriesPanel";
+import { HistogramSeriesPanel } from "./series/histogramSeriesPanel";
 var ChartFormattingPanel = /** @class */ (function (_super) {
@@ -82,2 +83,6 @@ __extends(ChartFormattingPanel, _super);
                 break;
+            case ChartType.Histogram:
+                this.addComponent(new AxisPanel(this.chartController));
+                this.addComponent(new HistogramSeriesPanel(this.chartController));
+                break;
             default:
@@ -84,0 +89,0 @@ console.warn("ag-Grid: ChartFormattingPanel - unexpected chart type index: " + chartType + " supplied");

dist/es6/chartAdaptor/chartComp/menu/settings/miniCharts/index.d.ts

@@ -15,1 +15,2 @@ export * from "./miniColumn";
 export * from "./miniNormalizedArea";
+export * from "./miniHistogram";

dist/es6/chartAdaptor/chartComp/menu/settings/miniCharts/index.js

@@ -15,1 +15,2 @@ export * from "./miniColumn";
 export * from "./miniNormalizedArea";
+export * from "./miniHistogram";

dist/es6/chartAdaptor/chartComp/menu/settings/miniChartsContainer.js

@@ -21,3 +21,3 @@ var __extends = (this && this.__extends) || (function () {
 import { _, AgGroupComponent, Autowired, Component, PostConstruct } from "@ag-grid-community/core";
-import { MiniArea, MiniBar, MiniBubble, MiniColumn, MiniDoughnut, MiniLine, MiniNormalizedArea, MiniNormalizedBar, MiniNormalizedColumn, MiniPie, MiniScatter, MiniStackedArea, MiniStackedBar, MiniStackedColumn, } from "./miniCharts";
+import { MiniArea, MiniBar, MiniBubble, MiniColumn, MiniDoughnut, MiniLine, MiniNormalizedArea, MiniNormalizedBar, MiniNormalizedColumn, MiniPie, MiniScatter, MiniStackedArea, MiniStackedBar, MiniStackedColumn, MiniHistogram } from "./miniCharts";
 var MiniChartsContainer = /** @class */ (function (_super) {
@@ -61,2 +61,5 @@ __extends(MiniChartsContainer, _super);
                 MiniNormalizedArea
+            ],
+            histogramGroup: [
+                MiniHistogram
             ]
@@ -63,0 +66,0 @@ };

package.json

 {
   "name": "@ag-grid-enterprise/charts",
-  "version": "23.0.2",
+  "version": "23.1.0",
   "description": "Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components",
@@ -45,11 +45,11 @@ "main": "./dist/cjs/main.js",
   "dependencies": {
-    "ag-charts-community": "~1.0.0",
-    "@ag-grid-community/core": "~23.0.0",
-    "@ag-grid-enterprise/core": "~23.0.0",
-    "@ag-grid-enterprise/range-selection": "~23.0.0"
+    "ag-charts-community": "~1.1.0",
+    "@ag-grid-community/core": "~23.1.0",
+    "@ag-grid-enterprise/core": "~23.1.0",
+    "@ag-grid-enterprise/range-selection": "~23.1.0"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.3",
-    "jest": "^25.1.0",
-    "ts-jest": "^25.2.1",
+    "@types/jest": "^25.2.1",
+    "jest": "^25.4.0",
+    "ts-jest": "^25.4.0",
     "typescript": "3.7.2"
@@ -56,0 +56,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

8789134

increased by3.9%

Number of package files

315

increased by8.62%

Lines of code

143193

increased by4.03%

Dependency changes

• + Added@ag-grid-community/core@23.1.1(transitive)

• + Added@ag-grid-enterprise/core@23.1.1(transitive)

• + Added@ag-grid-enterprise/range-selection@23.1.1(transitive)

• + Addedag-charts-community@1.1.0(transitive)

• - Removed@ag-grid-community/core@23.0.2(transitive)

• - Removed@ag-grid-enterprise/core@23.0.2(transitive)

• - Removed@ag-grid-enterprise/range-selection@23.0.2(transitive)

• - Removedag-charts-community@1.0.1(transitive)

• Updated@ag-grid-community/core@~23.1.0

• Updated@ag-grid-enterprise/core@~23.1.0

• Updated@ag-grid-enterprise/range-selection@~23.1.0

• Updatedag-charts-community@~1.1.0