`,
[AgGroupComponentSelector, AgSliderSelector],
{
chartPaddingGroup: chartPaddingGroupParams,
paddingTopSlider: getSliderParams("top"),
paddingRightSlider: getSliderParams("right"),
paddingBottomSlider: getSliderParams("bottom"),
paddingLeftSlider: getSliderParams("left")
}
);
this.addManagedEventListeners({
chartOptionsChanged: (e) => {
this.updateTopPadding(e.chartOptions);
}
});
}
updateTopPadding(chartOptions) {
const topPadding = [...this.chartController.getChartSeriesTypes(), "common"].map((seriesType) => chartOptions?.[seriesType]?.padding?.top).find((value) => value != null);
if (topPadding != null) {
this.paddingTopSlider.setValue(`${topPadding}`);
}
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/chart/chartPanel.ts
var ChartPanel = class extends Component {
constructor(options) {
super();
this.options = options;
this.chartGroup = RefPlaceholder;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const {
chartController,
chartMenuParamsFactory,
isExpandedOnInit: expanded,
registerGroupComponent
} = this.options;
const chartGroupParams = {
cssIdentifier: "charts-format-top-level",
direction: "vertical",
title: this.chartTranslation.translate("chartStyle"),
expanded,
suppressEnabledCheckbox: true,
items: [
this.createManagedBean(new PaddingPanel(chartMenuParamsFactory, chartController)),
this.createManagedBean(new BackgroundPanel(chartMenuParamsFactory))
]
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector],
{ chartGroup: chartGroupParams }
);
registerGroupComponent(this.chartGroup);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/groupExpansionFeature.ts
var GroupExpansionFeature = class extends BeanStub {
constructor(groupContainer) {
super();
this.groupContainer = groupContainer;
this.id = 0;
this.groupComponents = /* @__PURE__ */ new Map();
}
addGroupComponent(groupComponent) {
const id = this.id++;
this.groupComponents.set(id, groupComponent);
if (groupComponent.isExpanded()) {
this.expandedGroupComponent = id;
}
groupComponent.onExpandedChange((expanded) => {
if (expanded) {
const previouslyExpandedGroupComponent = this.expandedGroupComponent;
this.expandedGroupComponent = id;
if (previouslyExpandedGroupComponent != null) {
const groupComponentGui = groupComponent.getGui();
const groupPositionInViewport = groupComponentGui.offsetTop - this.groupContainer.parentElement.scrollTop;
this.groupComponents.get(previouslyExpandedGroupComponent)?.toggleGroupExpand(false, true);
let newScrollTop = groupComponentGui.offsetTop - groupPositionInViewport;
if (newScrollTop < 0) {
newScrollTop = 0;
}
if (newScrollTop !== this.groupContainer.parentElement.scrollTop) {
this.groupContainer.parentElement.scrollTop = newScrollTop;
}
}
} else {
this.expandedGroupComponent = void 0;
}
});
}
destroy() {
this.groupComponents.clear();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/legend/legendPanel.ts
var LegendPanel = class extends Component {
constructor(options, chartMenuContext) {
super();
this.options = options;
this.legendGroup = RefPlaceholder;
this.enabledGroup = RefPlaceholder;
this.isGradient = ["treemap", "sunburst", "heatmap"].includes(options.seriesType);
this.key = this.isGradient ? "gradientLegend" : "legend";
this.chartController = chartMenuContext.chartController;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const { chartMenuParamsFactory, isExpandedOnInit: expanded, registerGroupComponent } = this.options;
const positionSelect = this.createManagedBean(
new AgSelect(
chartMenuParamsFactory.getDefaultSelectParams(
`${this.key}.position`,
"position",
["top", "right", "bottom", "left"].map((position) => ({
value: position,
text: this.chartTranslation.translate(position)
}))
)
)
);
this.enabledGroup = this.createManagedBean(
new AgGroupComponent(
chartMenuParamsFactory.addEnableParams(`${this.key}.enabled`, {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
suppressOpenCloseIcons: true,
title: this.chartTranslation.translate("legendEnabled"),
suppressEnabledCheckbox: true,
useToggle: true,
items: [
this.createLabelPanel(chartMenuParamsFactory),
positionSelect,
...this.getItems(chartMenuParamsFactory)
]
})
)
);
const legendGroupParams = {
cssIdentifier: "charts-format-top-level",
direction: "vertical",
title: this.chartTranslation.translate("legend"),
suppressEnabledCheckbox: true,
expanded,
items: [this.enabledGroup]
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector],
{
legendGroup: legendGroupParams
}
);
registerGroupComponent(this.legendGroup);
const listener = this.updateLegendEnabledState.bind(this);
this.addManagedListeners(this.chartController, {
chartModelUpdate: listener,
chartApiUpdate: listener
});
}
updateLegendEnabledState() {
const { valueCols } = this.chartController.getColStateForMenu();
this.enabledGroup.setEnabled(valueCols.filter((vc) => vc.selected).length > 1);
}
getItems(chartMenuParamsFactory) {
const createSlider = (expression, labelKey, defaultMaxValue) => this.createManagedBean(
new AgSlider(
chartMenuParamsFactory.getDefaultSliderParams(
`${this.key}.${expression}`,
labelKey,
defaultMaxValue
)
)
);
if (this.isGradient) {
return [
this.createManagedBean(
new AgCheckbox(
chartMenuParamsFactory.addValueParams("gradientLegend.reverseOrder", {
label: this.chartTranslation.translate("reverseDirection"),
labelWidth: "flex"
})
)
),
createSlider("gradient.thickness", "thickness", 40),
createSlider("gradient.preferredLength", "preferredLength", 300),
createSlider("spacing", "spacing", 200)
];
}
return [
createSlider("spacing", "spacing", 200),
createSlider("item.marker.size", "markerSize", 40),
createSlider("item.marker.strokeWidth", "markerStroke", 10),
createSlider("item.marker.padding", "itemSpacing", 20),
createSlider("item.paddingX", "layoutHorizontalSpacing", 50),
createSlider("item.paddingY", "layoutVerticalSpacing", 50)
];
}
createLabelPanel(chartMenuParamsFactory) {
const rootKey = this.isGradient ? "gradientLegend.scale.label" : "legend.item.label";
const params = {
enabled: true,
suppressEnabledCheckbox: true,
chartMenuParamsFactory,
keyMapper: (key) => `${rootKey}.${key}`,
cssIdentifier: "charts-format-sub-level-no-header"
};
return this.createManagedBean(new FontPanel(params));
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/toggleablePanel.ts
var ToggleablePanel = class extends Component {
constructor(params) {
super();
this.params = params;
this.toggleableGroup = RefPlaceholder;
this.activeComps = [];
this.chartOptions = params.chartMenuParamsFactory.getChartOptions();
}
postConstruct() {
const { tag, cssIdentifier = "charts-format-sub-level", title, suppressEnabledCheckbox } = this.params;
const groupParams = this.params.chartMenuParamsFactory.addEnableParams(`${tag}.enabled`, {
cssIdentifier,
direction: "vertical",
suppressOpenCloseIcons: true,
title,
suppressEnabledCheckbox: true,
useToggle: !suppressEnabledCheckbox
});
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector],
{
toggleableGroup: groupParams
}
);
this.toggleCss(`ag-toggleable-group-panel-no-header`, !title);
}
addItem(comp, prepend) {
if (prepend) {
this.toggleableGroup.prependItem(comp);
} else {
this.toggleableGroup.addItem(comp);
}
this.activeComps.push(comp);
}
setEnabled(enabled) {
this.toggleableGroup.setEnabled(enabled);
}
destroyActiveComps() {
for (const comp of this.activeComps) {
_removeFromParent(comp.getGui());
this.destroyBean(comp);
}
}
destroy() {
this.destroyActiveComps();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/calloutPanel.ts
var CalloutPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const calloutGroupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("callout"),
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSliderSelector],
{
calloutGroup: calloutGroupParams,
calloutLengthSlider: this.chartMenuUtils.getDefaultSliderParams("calloutLine.length", "length", 40),
calloutStrokeWidthSlider: this.chartMenuUtils.getDefaultSliderParams(
"calloutLine.strokeWidth",
"strokeWidth",
10
),
labelOffsetSlider: this.chartMenuUtils.getDefaultSliderParams("calloutLabel.offset", "offset", 30)
}
);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/capsPanel.ts
var CapsPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const capsGroupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("cap"),
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
const capLengthRatioSliderParams = this.chartMenuUtils.getDefaultSliderParams(
"cap.lengthRatio",
"capLengthRatio",
1
);
capLengthRatioSliderParams.step = 0.05;
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSliderSelector],
{
capsGroup: capsGroupParams,
capLengthRatioSlider: capLengthRatioSliderParams
}
);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/connectorLinePanel.ts
var ConnectorLinePanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const lineGroupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("connectorLine"),
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, ColorPickerSelector, AgSliderSelector],
{
lineGroup: lineGroupParams,
lineColorPicker: this.chartMenuUtils.getDefaultColorPickerParams("line.stroke"),
lineStrokeWidthSlider: this.getSliderParams("strokeWidth", 10, "line.strokeWidth"),
lineDashSlider: this.getSliderParams("lineDash", 30, "line.lineDash", 1, true),
lineOpacitySlider: this.getSliderParams("strokeOpacity", 1, "line.strokeOpacity", 0.05)
}
);
}
getSliderParams(labelKey, maxValue, seriesOptionKey, step = 1, isArray = false) {
const params = this.chartMenuUtils.getDefaultSliderParams(seriesOptionKey, labelKey, maxValue, isArray);
params.step = step;
return params;
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/seriesUtils.ts
function getShapeSelectOptions(chartTranslation) {
return ["square", "circle", "cross", "diamond", "plus", "triangle", "heart"].map((value) => ({
value,
text: chartTranslation.translate(value)
}));
}
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/markersPanel.ts
var MarkersPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const seriesMarkersGroupParams = this.chartMenuUtils.addEnableParams("marker.enabled", {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("markers"),
suppressEnabledCheckbox: true,
useToggle: true,
suppressOpenCloseIcons: true
});
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSelectSelector, AgSliderSelector],
{
seriesMarkersGroup: seriesMarkersGroupParams,
seriesMarkerShapeSelect: this.chartMenuUtils.getDefaultSelectParams(
"marker.shape",
"shape",
getShapeSelectOptions(this.chartTranslation)
),
seriesMarkerSizeSlider: this.chartMenuUtils.getDefaultSliderParams("marker.size", "size", 60),
seriesMarkerStrokeWidthSlider: this.chartMenuUtils.getDefaultSliderParams(
"marker.strokeWidth",
"strokeWidth",
10
)
}
);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/seriesItemsPanel.ts
var SeriesItemsPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
this.seriesItemsGroup = RefPlaceholder;
this.activePanels = [];
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const seriesItemsGroupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("seriesItems"),
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSelectSelector],
{
seriesItemsGroup: seriesItemsGroupParams,
seriesItemSelect: this.getSeriesItemsParams()
}
);
this.initSeriesControls();
}
getSeriesItemsParams() {
const options = [
{ value: "positive", text: this.chartTranslation.translate("seriesItemPositive") },
{ value: "negative", text: this.chartTranslation.translate("seriesItemNegative") }
];
const seriesItemChangedCallback = (newValue) => {
this.destroyActivePanels();
this.initSeriesControls(newValue);
};
return this.chartMenuUtils.getDefaultSelectParamsWithoutValueParams(
"seriesItemType",
options,
"positive",
seriesItemChangedCallback
);
}
initSeriesControls(itemType = "positive") {
this.initSlider("strokeWidth", 10, `item.${itemType}.strokeWidth`);
this.initSlider("lineDash", 30, `item.${itemType}.lineDash`, 1, true);
this.initSlider("strokeOpacity", 1, `item.${itemType}.strokeOpacity`, 0.05, false);
this.initSlider("fillOpacity", 1, `item.${itemType}.fillOpacity`, 0.05, false);
this.initItemLabels(itemType);
}
initSlider(labelKey, maxValue, seriesOptionKey, step = 1, isArray = false) {
const params = this.chartMenuUtils.getDefaultSliderParams(seriesOptionKey, labelKey, maxValue, isArray);
params.step = step;
const itemSlider = this.seriesItemsGroup.createManagedBean(new AgSlider(params));
this.seriesItemsGroup.addItem(itemSlider);
this.activePanels.push(itemSlider);
}
initItemLabels(itemType) {
const sectorParams = this.chartMenuUtils.getDefaultFontPanelParams(
`item.${itemType}.label`,
"seriesItemLabels"
);
const labelPanelComp = this.createBean(new FontPanel(sectorParams));
this.seriesItemsGroup.addItem(labelPanelComp);
this.activePanels.push(labelPanelComp);
}
destroyActivePanels() {
for (const panel of this.activePanels) {
_removeFromParent(panel.getGui());
this.destroyBean(panel);
}
}
destroy() {
this.destroyActivePanels();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/shadowPanel.ts
var ShadowPanel = class extends Component {
constructor(chartMenuUtils, propertyKey = "shadow") {
super();
this.chartMenuUtils = chartMenuUtils;
this.propertyKey = propertyKey;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const propertyNamespace = this.propertyKey;
const shadowGroupParams = this.chartMenuUtils.addEnableParams(
`${propertyNamespace}.enabled`,
{
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
suppressOpenCloseIcons: true,
title: this.chartTranslation.translate("shadow"),
suppressEnabledCheckbox: true,
useToggle: true
}
);
const shadowColorPickerParams = this.chartMenuUtils.getDefaultColorPickerParams(`${propertyNamespace}.color`);
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, ColorPickerSelector, AgSliderSelector],
{
shadowGroup: shadowGroupParams,
shadowColorPicker: shadowColorPickerParams,
shadowBlurSlider: this.getSliderParams("blur", 0, 20),
shadowXOffsetSlider: this.getSliderParams("xOffset", -10, 10),
shadowYOffsetSlider: this.getSliderParams("yOffset", -10, 10)
}
);
}
getSliderParams(property, minValue, defaultMaxValue) {
const expression = `${this.propertyKey}.${property}`;
const params = this.chartMenuUtils.getDefaultSliderParams(expression, property, defaultMaxValue);
params.minValue = minValue;
return params;
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/tileSpacingPanel.ts
var TileSpacingPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const groupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSliderSelector],
{
groupSpacing: { ...groupParams, title: this.chartTranslation.translate("group") },
tileSpacing: { ...groupParams, title: this.chartTranslation.translate("tile") },
groupPaddingSlider: this.getSliderParams("padding", "group.padding"),
groupSpacingSlider: this.getSliderParams("spacing", "group.gap"),
tilePaddingSlider: this.getSliderParams("padding", "tile.padding"),
tileSpacingSlider: this.getSliderParams("spacing", "tile.gap")
}
);
}
getSliderParams(labelKey, key) {
return this.chartMenuUtils.getDefaultSliderParams(key, labelKey, 10);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/tooltipPanel.ts
function _capitalise2(str) {
return str[0].toUpperCase() + str.substring(1);
}
var TooltipPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
this.tooltipMode = RefPlaceholder;
}
postConstruct() {
const { chartMenuUtils, beans } = this;
const propertyKey = "tooltip";
const chartTranslation = beans.chartTranslation;
const tooltipGroupParams = chartMenuUtils.addEnableParams(`${propertyKey}.enabled`, {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
suppressOpenCloseIcons: true,
title: chartTranslation.translate("tooltips"),
suppressEnabledCheckbox: true,
useToggle: true
});
const tooltipModeLocaleKey = "tooltipMode";
const tooltipModeSelectionOptions = ["single", "shared", "compact"].map((value) => ({
value,
text: chartTranslation.translate(`${tooltipModeLocaleKey}${_capitalise2(value)}`)
}));
const tooltipModeExpression = `${propertyKey}.mode`;
const tooltipModeSelectParams = chartMenuUtils.getDefaultSelectParams(
tooltipModeExpression,
tooltipModeLocaleKey,
tooltipModeSelectionOptions
);
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, AgSelectSelector],
{
tooltipGroup: tooltipGroupParams,
tooltipMode: tooltipModeSelectParams
}
);
this.addManagedEventListeners({
chartOptionsChanged: () => {
const tooltipModeValue = chartMenuUtils.getChartOptions().getValue(tooltipModeExpression);
this.tooltipMode.setValue(tooltipModeValue, true);
}
});
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/whiskersPanel.ts
var WhiskersPanel = class extends Component {
constructor(chartMenuUtils) {
super();
this.chartMenuUtils = chartMenuUtils;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const whiskersGroupParams = {
cssIdentifier: "charts-format-sub-level",
direction: "vertical",
title: this.chartTranslation.translate("whisker"),
enabled: true,
suppressOpenCloseIcons: true,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector, ColorPickerSelector, AgSliderSelector],
{
whiskersGroup: whiskersGroupParams,
whiskerColorPicker: this.chartMenuUtils.getDefaultColorPickerParams("whisker.stroke"),
whiskerThicknessSlider: this.chartMenuUtils.getDefaultSliderParams(
"whisker.strokeWidth",
"strokeWidth",
10
),
whiskerOpacitySlider: this.chartMenuUtils.getDefaultSliderParams(
"whisker.strokeOpacity",
"strokeOpacity",
1
),
whiskerLineDashSlider: this.chartMenuUtils.getDefaultSliderParams(
"whisker.lineDash",
"lineDash",
30,
true
),
whiskerLineDashOffsetSlider: this.chartMenuUtils.getDefaultSliderParams(
"whisker.lineDashOffset",
"lineDashOffset",
30
)
}
);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/series/seriesPanel.ts
var tooltips = "tooltips";
var strokeWidth = "strokeWidth";
var lineWidth = "lineWidth";
var lineDash = "lineDash";
var lineOpacity = "lineOpacity";
var fillOpacity = "fillOpacity";
var labels = "labels";
var shadow = "shadow";
var stageLabels = "stageLabels";
var markers = "markers";
var SeriesPanel = class extends Component {
constructor(options) {
super();
this.options = options;
this.seriesGroup = RefPlaceholder;
this.activePanels = [];
this.widgetFuncs = {
lineWidth: () => this.initStrokeWidth(lineWidth),
[strokeWidth]: () => this.initStrokeWidth("strokeWidth"),
lineColor: () => this.initLineColor(),
[lineDash]: () => this.initLineDash(),
[lineOpacity]: () => this.initOpacity("strokeOpacity"),
[fillOpacity]: () => this.initOpacity("fillOpacity"),
markers: () => new MarkersPanel(this.chartMenuUtils),
[labels]: () => this.initLabels(),
sectorLabels: () => this.initSectorLabels(),
[shadow]: () => new ShadowPanel(this.chartMenuUtils),
[tooltips]: () => new TooltipPanel(this.options.chartMenuParamsFactory),
bins: () => this.initBins(),
whiskers: () => new WhiskersPanel(this.chartMenuUtils),
caps: () => new CapsPanel(this.chartMenuUtils),
connectorLine: () => new ConnectorLinePanel(this.chartMenuUtils),
seriesItems: () => new SeriesItemsPanel(this.chartMenuUtils),
tileSpacing: () => new TileSpacingPanel(this.chartMenuUtils),
shape: () => this.initShape(),
size: () => this.initSize("size", "size"),
minSize: () => this.initSize("size", "minSize"),
maxSize: () => this.initSize("maxSize", "maxSize"),
dropoff: () => this.initDropOff(),
stageLabels: () => this.initStageLabels()
};
this.seriesWidgetMappings = {
bar: [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels, shadow],
pie: [tooltips, strokeWidth, lineOpacity, fillOpacity, labels, "sectorLabels", shadow],
donut: [tooltips, strokeWidth, lineOpacity, fillOpacity, labels, "sectorLabels", shadow],
line: [tooltips, lineWidth, lineDash, lineOpacity, markers, labels],
scatter: [tooltips, "shape", "size", strokeWidth, labels],
bubble: [tooltips, "shape", "minSize", "maxSize", strokeWidth, labels],
area: [tooltips, lineWidth, lineDash, lineOpacity, fillOpacity, markers, labels, shadow],
histogram: [tooltips, "bins", strokeWidth, lineDash, lineOpacity, fillOpacity, labels, shadow],
"radial-column": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels],
"radial-bar": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels],
"radar-line": [tooltips, strokeWidth, lineDash, lineOpacity, markers, labels],
"radar-area": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, markers, labels],
nightingale: [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels],
"box-plot": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, "whiskers", "caps"],
"range-bar": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels],
"range-area": [tooltips, lineWidth, lineDash, lineOpacity, fillOpacity, markers, labels, shadow],
treemap: [tooltips, "tileSpacing"],
sunburst: [tooltips],
heatmap: [tooltips, labels, "lineColor", lineWidth, lineOpacity],
waterfall: [tooltips, "connectorLine", "seriesItems"],
funnel: [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels, "dropoff", stageLabels, shadow],
"cone-funnel": [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels, stageLabels],
pyramid: [tooltips, strokeWidth, lineDash, lineOpacity, fillOpacity, labels, stageLabels, shadow]
};
this.seriesType = options.seriesType;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const {
isExpandedOnInit: expanded,
chartOptionsService,
chartController,
registerGroupComponent
} = this.options;
const seriesGroupParams = {
cssIdentifier: "charts-format-top-level",
direction: "vertical",
title: this.translate("series"),
expanded,
suppressEnabledCheckbox: true
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector],
{ seriesGroup: seriesGroupParams }
);
registerGroupComponent(this.seriesGroup);
this.chartMenuUtils = this.createManagedBean(
new ChartMenuParamsFactory(chartOptionsService.getSeriesOptionsProxy(() => this.seriesType))
);
this.addManagedListeners(chartController, { chartSeriesChartTypeChanged: this.refreshWidgets.bind(this) });
this.refreshWidgets();
}
refreshWidgets() {
const { chartController } = this.options;
this.destroyActivePanels();
const chart = chartController.getChartProxy().getChart();
chart.waitForUpdate().then(() => {
const componentWasRemoved = !this.isAlive();
if (componentWasRemoved) {
return;
}
if (chartController.isComboChart()) {
this.updateSeriesType();
this.initSeriesSelect();
}
for (const w of this.seriesWidgetMappings[this.seriesType] ?? []) {
const widgetFuncResult = this.widgetFuncs[w]();
let widget;
if (Array.isArray(widgetFuncResult)) {
const comp = this.createBean(widgetFuncResult[0]);
widget = comp;
widgetFuncResult[1](comp);
} else {
widget = this.createBean(widgetFuncResult);
}
this.seriesGroup.addItem(widget);
this.activePanels.push(widget);
}
}).catch((e) => _error(105, { e }));
}
initSeriesSelect() {
const seriesSelect = this.createBean(
new AgSelect(
this.chartMenuUtils.getDefaultSelectParamsWithoutValueParams(
"seriesType",
this.getSeriesSelectOptions(),
`${this.seriesType}`,
(newValue) => {
this.seriesType = newValue;
this.refreshWidgets();
}
)
)
);
this.seriesGroup.addItem(seriesSelect);
this.activePanels.push(seriesSelect);
}
initLineColor() {
return new ColorPicker(this.chartMenuUtils.getDefaultColorPickerParams("stroke", "strokeColor"));
}
initStrokeWidth(labelKey, expression) {
return new AgSlider(
this.chartMenuUtils.getDefaultSliderParams(
expression ? `${expression}.${labelKey}` : "strokeWidth",
labelKey,
10
)
);
}
initLineDash(expression) {
return new AgSlider(
this.chartMenuUtils.getDefaultSliderParams(
expression ? `${expression}.lineDash` : "lineDash",
"lineDash",
30,
true
)
);
}
initOpacity(type, expression) {
const params = this.chartMenuUtils.getDefaultSliderParams(expression ? `${expression}.${type}` : type, type, 1);
params.step = 0.05;
return new AgSlider(params);
}
initDropOff() {
const dropOffGroup = new ToggleablePanel({
tag: "dropOff",
cssIdentifier: "charts-format-sub-level",
title: this.translate("dropOff"),
suppressEnabledCheckbox: false,
chartMenuParamsFactory: this.chartMenuUtils
});
const addItems = (groupComponent) => {
for (const comp of [
this.initStrokeWidth("strokeWidth", "dropOff"),
this.initLineDash("dropOff"),
this.initOpacity("strokeOpacity", "dropOff"),
this.initOpacity("fillOpacity", "dropOff")
]) {
const managed = groupComponent.createManagedBean(comp);
groupComponent.addItem(managed);
this.activePanels.push(managed);
}
};
return [dropOffGroup, addItems];
}
initLabels() {
const isPieChart = isPieChartSeries(this.seriesType);
const seriesOptionLabelProperty = isPieChart ? "calloutLabel" : "label";
const labelKey = isPieChart ? "calloutLabels" : "labels";
const labelParams = this.chartMenuUtils.getDefaultFontPanelParams(seriesOptionLabelProperty, labelKey);
const fontPanel = new FontPanel(labelParams);
const addItems = (labelPanelComp) => {
if (isPieChart) {
const calloutPanelComp = labelPanelComp.createManagedBean(new CalloutPanel(this.chartMenuUtils));
labelPanelComp.addItem(calloutPanelComp);
this.activePanels.push(calloutPanelComp);
}
if (this.seriesType === "range-bar") {
const options = [
{ value: "inside", text: this.translate("inside") },
{ value: "outside", text: this.translate("outside") }
];
const placementSelect = labelPanelComp.createManagedBean(
new AgSelect(
this.chartMenuUtils.getDefaultSelectParams("label.placement", "labelPlacement", options)
)
);
labelPanelComp.addItem(placementSelect);
this.activePanels.push(placementSelect);
const paddingSlider = labelPanelComp.createManagedBean(
new AgSlider(this.chartMenuUtils.getDefaultSliderParams("label.padding", "padding", 200))
);
labelPanelComp.addItem(paddingSlider);
this.activePanels.push(paddingSlider);
}
};
return [fontPanel, addItems];
}
initSectorLabels() {
const sectorParams = this.chartMenuUtils.getDefaultFontPanelParams("sectorLabel", "sectorLabels");
const fontPanel = new FontPanel(sectorParams);
const addItems = (sectorPanelComp) => {
const positionRatioParams = this.chartMenuUtils.getDefaultSliderParams(
"sectorLabel.positionRatio",
"positionRatio",
1
);
positionRatioParams.step = 0.05;
const positionRatioComp = sectorPanelComp.createManagedBean(new AgSlider(positionRatioParams));
sectorPanelComp.addItem(positionRatioComp);
};
return [fontPanel, addItems];
}
initStageLabels() {
return new FontPanel(this.chartMenuUtils.getDefaultFontPanelParams("stageLabel", stageLabels));
}
initBins() {
const params = this.chartMenuUtils.getDefaultSliderParams("binCount", "histogramBinCount", 20);
const chartOptions = this.chartMenuUtils.getChartOptions();
const value = (chartOptions.getValue("bins") ?? chartOptions.getValue("calculatedBins", true)).length;
params.value = `${value}`;
params.maxValue = Math.max(value, 20);
return new AgSlider(params);
}
initShape() {
return new AgSelect(
this.chartMenuUtils.getDefaultSelectParams("shape", "shape", getShapeSelectOptions(this.chartTranslation))
);
}
initSize(expression, labelKey) {
return new AgSlider(this.chartMenuUtils.getDefaultSliderParams(expression, labelKey, 60));
}
getSeriesSelectOptions() {
const activeSeriesTypes = this.getActiveSeriesTypes();
return ["area", "bar", "line"].filter((seriesType) => activeSeriesTypes.includes(seriesType)).map((value) => ({ value, text: this.translate(value) }));
}
updateSeriesType() {
const activeSeriesTypes = this.getActiveSeriesTypes();
const invalidSeriesType = !activeSeriesTypes.includes(this.seriesType);
if (invalidSeriesType && activeSeriesTypes.length > 0) {
this.seriesType = activeSeriesTypes[0];
}
}
getActiveSeriesTypes() {
return this.options.chartController.getActiveSeriesChartTypes().map((s2) => getSeriesType(s2.chartType));
}
translate(key) {
return this.chartTranslation.translate(key);
}
destroyActivePanels() {
for (const panel of this.activePanels) {
_removeFromParent(panel.getGui());
this.destroyBean(panel);
}
}
destroy() {
this.destroyActivePanels();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/titles/titlePanel.ts
var TitlePanel = class extends Component {
constructor(chartMenuUtils, name, key) {
super(
/* html */
`
`
);
this.chartMenuUtils = chartMenuUtils;
this.name = name;
this.key = key;
this.chartOptions = chartMenuUtils.getChartOptions();
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
this.initFontPanel();
}
hasTitle() {
const title = this.chartOptions.getValue(this.key);
return title?.enabled && title.text && title.text.length > 0;
}
initFontPanel() {
const hasTitle = this.hasTitle();
const fontPanelParams = {
name: this.chartTranslation.translate(this.name),
enabled: hasTitle,
suppressEnabledCheckbox: false,
chartMenuParamsFactory: this.chartMenuUtils,
keyMapper: (key) => `${this.key}.${key}`,
onEnableChange: (enabled) => this.onEnableChange(enabled)
};
this.fontPanel = this.createManagedBean(new FontPanel(fontPanelParams));
this.fontPanel.addItem(this.createBean(new AgInputTextField(this.getTextInputParams())), true);
this.fontPanel.addItem(this.createBean(new AgSlider(this.getSpacingSliderParams())));
this.getGui().appendChild(this.fontPanel.getGui());
}
getTextInputParams() {
return this.chartMenuUtils.addValueParams(`${this.key}.text`, {
label: this.chartTranslation.translate("title"),
labelAlignment: "top"
});
}
getSpacingSliderParams() {
return this.chartMenuUtils.getDefaultSliderParams(`${this.key}.spacing`, "spacing", 100);
}
onEnableChange(enabled) {
this.chartOptions.setValue(`${this.key}.enabled`, enabled);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/titles/chartTitlePanel.ts
var ChartTitlePanel = class extends TitlePanel {
wireBeans(beans) {
super.wireBeans(beans);
this.chartMenuSvc = beans.chartMenuSvc;
}
postConstruct() {
this.titlePlaceholder = this.chartTranslation.translate("titlePlaceholder");
super.postConstruct();
this.addManagedEventListeners({
chartTitleEdit: () => {
this.fontPanel.setEnabled(this.hasTitle());
}
});
}
getTextInputParams() {
const params = super.getTextInputParams();
if (this.shouldOverrideTextWithPlaceholder(params.value)) {
params.value = this.titlePlaceholder;
}
return params;
}
getSpacingSliderParams() {
const params = super.getSpacingSliderParams();
params.value = "10";
return params;
}
onEnableChange(enabled) {
if (this.chartMenuSvc.doesChartToolbarExist()) {
const topPadding = this.chartOptions.getValue("padding.top");
this.chartOptions.setValue("padding.top", enabled ? topPadding - 20 : topPadding + 20);
}
this.chartOptions.setValue(`${this.key}.enabled`, enabled);
const currentTitleText = this.chartOptions.getValue(`${this.key}.text`);
if (enabled && this.shouldOverrideTextWithPlaceholder(currentTitleText)) {
this.chartOptions.setValue(`${this.key}.text`, this.titlePlaceholder);
}
}
shouldOverrideTextWithPlaceholder(currentTitleText) {
return currentTitleText === "Title" || currentTitleText?.trim().length === 0;
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/titles/titlesPanel.ts
var TitlesPanel = class extends Component {
constructor(options) {
super();
this.options = options;
this.titleGroup = RefPlaceholder;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
const {
chartMenuParamsFactory,
chartAxisMenuParamsFactory,
chartOptionsService,
seriesType,
isExpandedOnInit: expanded = false,
registerGroupComponent
} = this.options;
const axisTitlePanels = [];
if (isCartesian(seriesType) && seriesType !== "pyramid") {
const createAxisParamsFactory = (axisType) => this.createManagedBean(
new ChartMenuParamsFactory(chartOptionsService.getCartesianAxisThemeOverridesProxy(axisType))
);
axisTitlePanels.push(
this.createManagedBean(new TitlePanel(createAxisParamsFactory("xAxis"), "horizontalAxisTitle", "title"))
);
axisTitlePanels.push(
this.createManagedBean(new TitlePanel(createAxisParamsFactory("yAxis"), "verticalAxisTitle", "title"))
);
} else if (isPolar(seriesType)) {
axisTitlePanels.push(
this.createManagedBean(new TitlePanel(chartAxisMenuParamsFactory, "polarAxisTitle", "title"))
);
}
const titleGroupParams = {
cssIdentifier: "charts-format-top-level",
direction: "vertical",
title: this.chartTranslation.translate("chartTitles"),
expanded,
suppressEnabledCheckbox: true,
items: [
this.createManagedBean(new ChartTitlePanel(chartMenuParamsFactory, "chartTitle", "title")),
this.createManagedBean(new TitlePanel(chartMenuParamsFactory, "chartSubtitle", "subtitle")),
...axisTitlePanels
]
};
this.setTemplate(
/* html */
`
`,
[AgGroupComponentSelector],
{ titleGroup: titleGroupParams }
);
registerGroupComponent(this.titleGroup);
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/format/formatPanel.ts
var DefaultFormatPanelDef = {
groups: [{ type: "chart" }, { type: "titles" }, { type: "legend" }, { type: "series" }, { type: "axis" }]
};
var AXIS_KEYS = ["axis", "horizontalAxis", "verticalAxis"];
var FormatPanel = class extends Component {
constructor(chartMenuContext) {
super(
/* html */
`
`
);
this.chartMenuContext = chartMenuContext;
}
postConstruct() {
this.groupExpansionFeature = this.createManagedBean(new GroupExpansionFeature(this.getGui()));
this.chartPanelFeature = this.createManagedBean(
new ChartPanelFeature(
this.chartMenuContext.chartController,
this.getGui(),
"ag-chart-format-section",
(_chartType, seriesType) => this.createPanels(seriesType)
)
);
this.chartPanelFeature.refreshPanels();
}
createPanels(seriesType) {
let panelExpandedOnInit = false;
this.getFormatPanelDef().groups?.forEach(({ type: group, isOpen: isExpandedOnInit = false }) => {
if (!this.isGroupPanelShownInSeries(group, seriesType)) {
return;
}
if (isExpandedOnInit) {
if (panelExpandedOnInit) {
_warn(145, { group });
}
panelExpandedOnInit = true;
}
const registerGroupComponent = (groupComponent) => this.groupExpansionFeature.addGroupComponent(groupComponent);
const opts = {
...this.chartMenuContext,
isExpandedOnInit,
seriesType,
registerGroupComponent
};
switch (group) {
case "chart":
this.chartPanelFeature.addComponent(new ChartPanel(opts));
break;
case "titles":
this.chartPanelFeature.addComponent(new TitlesPanel(opts));
break;
case "legend":
this.chartPanelFeature.addComponent(new LegendPanel(opts, this.chartMenuContext));
break;
case "axis":
if (isPolar(seriesType)) {
this.chartPanelFeature.addComponent(new PolarAxisPanel(opts));
} else if (isCartesian(seriesType)) {
this.chartPanelFeature.addComponent(new CartesianAxisPanel("xAxis", opts));
this.chartPanelFeature.addComponent(new CartesianAxisPanel("yAxis", opts));
}
break;
case "horizontalAxis":
this.chartPanelFeature.addComponent(new CartesianAxisPanel("xAxis", opts));
break;
case "verticalAxis":
this.chartPanelFeature.addComponent(new CartesianAxisPanel("yAxis", opts));
break;
case "series":
this.chartPanelFeature.addComponent(new SeriesPanel(opts));
break;
default:
_warn(147, { group });
}
});
}
getFormatPanelDef() {
const userProvidedFormatPanelDef = this.gos.get("chartToolPanelsDef")?.formatPanel;
return userProvidedFormatPanelDef ? userProvidedFormatPanelDef : DefaultFormatPanelDef;
}
isGroupPanelShownInSeries(group, seriesType) {
const enable = ["chart", "titles", "legend", "series"].includes(group) || isCartesian(seriesType) && AXIS_KEYS.includes(group) || isPolar(seriesType) && group === "axis";
const disable = isFunnel(seriesType) && group === "legend" || isFunnel(seriesType) && AXIS_KEYS.includes(group);
return enable && !disable;
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/miniChart.ts
var CANVAS_CLASS = "ag-chart-mini-thumbnail-canvas";
var MiniChart = class extends Component {
constructor(container, agChartsExports, tooltipName) {
super();
this.agChartsExports = agChartsExports;
this.tooltipName = tooltipName;
this.size = 58;
this.padding = 5;
const { _Scene } = agChartsExports;
this.root = new _Scene.Group();
const canvasElement = container.ownerDocument.createElement("canvas");
const scene = new _Scene.Scene({
canvasElement,
pixelRatio: container.ownerDocument.defaultView?.devicePixelRatio ?? 1,
width: this.size,
height: this.size,
willReadFrequently: false
});
scene.canvas.element.classList.add(CANVAS_CLASS);
scene.setRoot(this.root);
scene.setContainer(container);
this.scene = scene;
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
this.scene.canvas.element.title = this.chartTranslation.translate(this.tooltipName);
try {
this.scene.render();
} catch (e) {
_error(108, { e });
}
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/miniChartHelpers.ts
function createColumnRects(params) {
const {
stacked,
size,
padding,
xScalePadding,
xScaleDomain,
yScaleDomain,
agChartsExports: { _Scene }
} = params;
const xScale = new _Scene.CategoryScale();
xScale.domain = xScaleDomain;
xScale.range = [padding, size - padding];
xScale.paddingInner = xScalePadding;
xScale.paddingOuter = xScalePadding;
const yScale = new _Scene.LinearScale();
yScale.domain = yScaleDomain;
yScale.range = [size - padding, padding];
const createBars = (series, xScale2, yScale2) => {
return series.map((datum, i) => {
const top = yScale2.convert(datum);
const rect = new _Scene.Rect();
rect.x = xScale2.convert(i);
rect.y = top;
rect.width = xScale2.bandwidth;
rect.height = yScale2.convert(0) - top;
rect.strokeWidth = 0;
rect.crisp = true;
return rect;
});
};
if (stacked) {
return params.data.map((d) => createBars(d, xScale, yScale));
}
return createBars(params.data, xScale, yScale);
}
function prepareXYScales(_Scene, data, size, padding) {
const xDomain = [];
const yDomain = [];
for (const item of data) {
for (const [x, y] of item) {
xDomain.push(x);
yDomain.push(y);
}
}
const xScale = new _Scene.LinearScale();
xScale.domain = [Math.min(...xDomain), Math.max(...xDomain)];
xScale.range = [padding, size - padding];
const yScale = new _Scene.LinearScale();
yScale.domain = [Math.min(...yDomain), Math.max(...yDomain)];
yScale.range = [size - padding, padding];
return { xScale, yScale };
}
function prepareLinearScene(_Scene, data, size, padding) {
const xDomain = [0, data[0].length - 1];
const yDomain = data.reduce(
(acc, curr) => {
for (const datum of curr) {
if (datum < acc[0]) {
acc[0] = datum;
}
if (datum > acc[1]) {
acc[1] = datum;
}
}
return acc;
},
[Infinity, -Infinity]
);
yDomain[0]--;
yDomain[yDomain.length - 1]++;
const xScale = new _Scene.LinearScale();
xScale.domain = xDomain;
xScale.range = [padding, size - padding];
const yScale = new _Scene.LinearScale();
yScale.domain = yDomain;
yScale.range = [size - padding, padding];
return { xScale, yScale };
}
function createXPathCommands(data, xScale, yScale) {
return data.map(
(series) => series.map((datum, i) => [
i > 0 ? "lineTo" : "moveTo",
xScale.convert(i),
yScale.convert(datum)
])
);
}
function createXYPathCommands(shape, xScale, yScale) {
return shape.map(([x, y], i) => [i > 0 ? "lineTo" : "moveTo", xScale.convert(x), yScale.convert(y)]);
}
function closePath(commandSegments) {
const closingCommand = commandSegments[0];
const first = commandSegments[1];
const last = _last(commandSegments);
if (first[1] !== last[1] || first[2] !== last[2]) {
commandSegments.push([closingCommand[0], first[1], first[2]]);
}
return commandSegments;
}
function createPath(_Scene, commands) {
const path = new _Scene.Path();
commands.forEach(([command, x, y]) => path.path[command](x, y));
return path;
}
function createAreaPathCommands(commands, yScale, stacked) {
return commands.map((pathCommands, index, all) => {
const closingPath = stacked ? closePathViaPreviousSeries(all, index, yScale) : closePathViaOrigin(pathCommands, yScale);
const closingPathCommands = [...closingPath].reverse().map(([_, x, y]) => ["lineTo", x, y]);
const first = pathCommands[0];
const last = _last(closingPathCommands);
if (first[1] !== last[1] || first[2] !== last[2]) {
closingPathCommands.push(["lineTo", first[1], first[2]]);
}
return [...pathCommands, ...closingPathCommands];
});
}
function closePathViaPreviousSeries(all, index, yScale) {
if (index === 0) {
return closePathViaOrigin(all[index], yScale);
}
return [...all[index - 1]];
}
function closePathViaOrigin(pathCommands, yScale) {
return pathCommands.map(([c, x]) => [c, x, yScale.convert(0)]);
}
function commandsToPath(_Scene, commands) {
const path = createPath(_Scene, commands);
path.fill = void 0;
path.lineCap = "round";
path.strokeWidth = 3;
return path;
}
function createShapePaths({ _Scene }, root, shapes, size, padding) {
const { xScale, yScale } = prepareXYScales(_Scene, shapes, size, padding);
const openPathsCommands = shapes.map((shape) => createXYPathCommands(shape, xScale, yScale));
const shapesCommands = openPathsCommands.map((path) => closePath(path));
const shapePaths = shapesCommands.map((shapeCommands) => commandsToPath(_Scene, shapeCommands));
const paths = shapePaths.reduce((acc, curr) => acc.concat(curr), []);
const pathsGroup = new _Scene.Group();
pathsGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
pathsGroup.append(paths);
root.append(pathsGroup);
return paths;
}
function createLinePaths({ _Scene }, root, data, size, padding) {
const { xScale, yScale } = prepareLinearScene(_Scene, data, size, padding);
const pathCommands = createXPathCommands(data, xScale, yScale);
const paths = pathCommands.map((commands) => commandsToPath(_Scene, commands));
const pathsGroup = new _Scene.Group();
pathsGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
pathsGroup.append(paths);
root.append(pathsGroup);
return paths;
}
function createAreaPaths(_Scene, root, data, size, padding, stacked = false) {
const { xScale, yScale } = prepareLinearScene(_Scene, data, size, padding);
const pathCommands = createAreaPathCommands(createXPathCommands(data, xScale, yScale), yScale, stacked);
const areasGroup = new _Scene.Group();
areasGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
const paths = pathCommands.map((commands) => createPath(_Scene, commands));
areasGroup.append(paths);
root.append(areasGroup);
return paths;
}
function stackData(data) {
return data.map(
(stack, sindex, array) => stack.map((_y, i) => array.slice(0, sindex + 1).reduce((p, c) => p + c[i], 0))
);
}
function normalizeStackData(data) {
const colSum = data.map((_, index) => data.reduce((acc, cur) => Math.max(acc, cur[index]), 0));
return data.map((stack) => stack.map((y, index) => y / colSum[index] * 19));
}
function createPolarPaths(agChartsExports, root, data, size, radius, innerRadius, markerSize = 0) {
const { _Scene } = agChartsExports;
const angleScale = new _Scene.LinearScale();
angleScale.domain = [0, 7];
angleScale.range = [-Math.PI, Math.PI].map((angle) => angle + Math.PI / 2);
const radiusScale = new _Scene.LinearScale();
radiusScale.domain = [0, 10];
radiusScale.range = [radius, innerRadius];
const markers2 = [];
const center = size / 2;
const paths = data.map((series) => {
const path = new _Scene.Path();
path.strokeWidth = 1;
path.strokeOpacity = 0.5;
path.lineCap = "round";
path.fill = void 0;
path.fillOpacity = 0.8;
series.forEach((datum, i) => {
const angle = angleScale.convert(i);
const r = radius + innerRadius - radiusScale.convert(datum);
const x = r * Math.cos(angle) + center;
const y = r * Math.sin(angle) + center;
path.path[i > 0 ? "lineTo" : "moveTo"](x, y);
if (markerSize > 0) {
const marker = new _Scene.Marker({ shape: "circle" });
marker.x = x;
marker.y = y;
marker.size = markerSize;
markers2.push(marker);
}
});
path.path.closePath();
return path;
});
const group = new _Scene.Group();
group.append([...paths, ...markers2]);
root.append(group);
return { paths, markers: markers2 };
}
function accumulateData(data) {
let [min, max] = [Infinity, -Infinity];
const processedData = data.reduce((acc, curr, currIndex) => {
const previous = currIndex > 0 ? acc[currIndex - 1] : void 0;
acc[currIndex] ?? (acc[currIndex] = []);
const current = acc[currIndex];
curr.forEach((datum, datumIndex) => {
if (previous) {
datum += previous[datumIndex];
}
current[datumIndex] = datum;
if (current[datumIndex] < min) {
min = current[datumIndex];
}
if (current[datumIndex] > max) {
max = current[datumIndex];
}
});
return acc;
}, []);
return { processedData, min, max };
}
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/funnel/miniFunnel.ts
var FUNNEL_SHAPES = [
[
[13, 16],
[13, 12],
[3, 12],
[3, 16]
],
[
[12, 11],
[12, 7],
[4, 7],
[4, 11]
],
[
[10.125, 6],
[10.125, 1.5],
[5.875, 1.5],
[5.875, 6]
]
];
var MiniFunnelClass = class extends MiniChart {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, tooltipName = "funnelTooltip", data = FUNNEL_SHAPES) {
super(container, agChartsExports, tooltipName);
this.shapes = createShapePaths(agChartsExports, this.root, data, this.size, this.padding);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
for (const bar of this.shapes) {
bar.fill = fills[0];
bar.stroke = strokes[0];
bar.strokeWidth = 0;
}
}
};
var MiniFunnel = {
chartType: "funnel",
miniChart: MiniFunnelClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/funnel/miniConeFunnel.ts
var CONE_FUNNEL_SHAPES = [
[
[13, 16],
[10.75, 11.5],
[5.25, 11.5],
[3, 16]
],
[
[10.75, 11.5],
[8.875, 6],
[7.125, 6],
[5.25, 11.5]
],
[
[8.875, 6],
[8.875, 1.5],
[7.125, 1.5],
[7.125, 6]
]
];
var MiniConeFunnelClass = class extends MiniFunnelClass {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, tooltipName = "coneFunnelTooltip") {
super(container, agChartsExports, fills, strokes, _isCustomTheme, tooltipName, CONE_FUNNEL_SHAPES);
}
updateColors(fills, strokes) {
this.shapes.forEach((bar, i) => {
bar.fill = fills[0];
bar.fillOpacity = 1 - i * 0.2;
bar.stroke = strokes[0];
bar.strokeWidth = 0;
});
}
};
var MiniConeFunnel = {
chartType: "coneFunnel",
miniChart: MiniConeFunnelClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/funnel/miniPyramid.ts
var PYRAMID_SHAPES = [
[
[8, 16],
[10, 12],
[6, 12]
],
[
[10.5, 11],
[12.5, 7],
[3.5, 7],
[5.5, 11]
],
[
[13, 6],
[15.5, 1.5],
[0.5, 1.5],
[3, 6]
]
];
var MiniPyramidClass = class extends MiniFunnelClass {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, tooltipName = "pyramidTooltip") {
super(container, agChartsExports, fills, strokes, _isCustomTheme, tooltipName, PYRAMID_SHAPES);
}
updateColors(fills, strokes) {
this.shapes.forEach((bar, i) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
bar.strokeWidth = 0;
});
}
};
var MiniPyramid = {
chartType: "pyramid",
miniChart: MiniPyramidClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/miniChartWithAxes.ts
var MiniChartWithAxes = class extends MiniChart {
constructor(container, agChartsExports, tooltipName) {
super(container, agChartsExports, tooltipName);
this.stroke = "gray";
this.axisOvershoot = 3;
}
postConstruct() {
const { _Scene } = this.agChartsExports;
const size = this.size;
const padding = this.padding;
const leftAxis = new _Scene.Line();
leftAxis.x1 = padding;
leftAxis.y1 = padding;
leftAxis.x2 = padding;
leftAxis.y2 = size - padding + this.axisOvershoot;
leftAxis.stroke = this.stroke;
const bottomAxis = new _Scene.Line();
bottomAxis.x1 = padding - this.axisOvershoot + 1;
bottomAxis.y1 = size - padding;
bottomAxis.x2 = size - padding + 1;
bottomAxis.y2 = size - padding;
bottomAxis.stroke = this.stroke;
const root = this.root;
root.append(leftAxis);
root.append(bottomAxis);
super.postConstruct();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/column/miniColumn.ts
var MiniColumnClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "groupedColumnTooltip");
this.columnData = [2, 3, 4];
const { root, columnData, size, padding } = this;
this.columns = createColumnRects({
stacked: false,
root,
data: columnData,
size,
padding,
xScaleDomain: [0, 1, 2],
yScaleDomain: [0, 4],
xScalePadding: 0.3,
agChartsExports
});
root.append(this.columns);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.columns.forEach((column, i) => {
column.fill = fills[i];
column.stroke = strokes[i];
});
}
};
var MiniColumn = {
chartType: "groupedColumn",
miniChart: MiniColumnClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/column/miniStackedColumn.ts
var miniStackedColumnData = [
[8, 12, 16],
[6, 9, 12],
[2, 3, 4]
];
var MiniStackedColumnClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniStackedColumnData, yScaleDomain = [0, 16], tooltipName = "stackedColumnTooltip") {
super(container, agChartsExports, tooltipName);
const { root, size, padding } = this;
this.stackedColumns = createColumnRects({
stacked: true,
root,
data,
size,
padding,
xScaleDomain: [0, 1, 2],
yScaleDomain,
xScalePadding: 0.3,
agChartsExports
});
root.append(_flatten(this.stackedColumns));
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.stackedColumns.forEach((series, i) => {
for (const column of series) {
column.fill = fills[i];
column.stroke = strokes[i];
}
});
}
};
var MiniStackedColumn = {
chartType: "stackedColumn",
miniChart: MiniStackedColumnClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/column/miniNormalizedColumn.ts
var miniNormalizedColumnData = [
[10, 10, 10],
[6, 7, 8],
[2, 4, 6]
];
var MiniNormalizedColumnClass = class extends MiniStackedColumnClass {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(
container,
agChartsExports,
fills,
strokes,
isCustomTheme,
miniNormalizedColumnData,
[0, 10],
"normalizedColumnTooltip"
);
}
};
var MiniNormalizedColumn = {
chartType: "normalizedColumn",
miniChart: MiniNormalizedColumnClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/bar/miniBar.ts
var MiniBarClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "groupedBarTooltip");
const { _Scene } = agChartsExports;
const padding = this.padding;
const size = this.size;
const data = [2, 3, 4];
const yScale = new _Scene.CategoryScale();
yScale.domain = [0, 1, 2];
yScale.range = [padding, size - padding];
yScale.paddingInner = 0.3;
yScale.paddingOuter = 0.3;
const xScale = new _Scene.LinearScale();
xScale.domain = [0, 4];
xScale.range = [size - padding, padding];
const bottom = xScale.convert(0);
const height = yScale.bandwidth;
this.bars = data.map((datum, i) => {
const rect = new _Scene.Rect();
rect.x = padding;
rect.y = yScale.convert(i);
rect.width = bottom - xScale.convert(datum);
rect.height = height;
rect.strokeWidth = 0;
rect.crisp = true;
return rect;
});
this.updateColors(fills, strokes);
this.root.append(this.bars);
}
updateColors(fills, strokes) {
this.bars.forEach((bar, i) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
});
}
};
var MiniBar = {
chartType: "groupedBar",
miniChart: MiniBarClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/bar/miniStackedBar.ts
var miniStackedBarData = [
[8, 12, 16],
[6, 9, 12],
[2, 3, 4]
];
var MiniStackedBarClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniStackedBarData, xScaleDomain = [0, 16], tooltipName = "stackedBarTooltip") {
super(container, agChartsExports, tooltipName);
const { _Scene } = agChartsExports;
const size = this.size;
const padding = this.padding;
const yScale = new _Scene.CategoryScale();
yScale.domain = [0, 1, 2];
yScale.range = [padding, size - padding];
yScale.paddingInner = 0.3;
yScale.paddingOuter = 0.3;
const xScale = new _Scene.LinearScale();
xScale.domain = xScaleDomain;
xScale.range = [size - padding, padding];
const bottom = xScale.convert(0);
const height = yScale.bandwidth;
this.bars = data.map(
(series) => series.map((datum, i) => {
const rect = new _Scene.Rect();
rect.x = padding;
rect.y = yScale.convert(i);
rect.width = bottom - xScale.convert(datum);
rect.height = height;
rect.strokeWidth = 0;
rect.crisp = true;
return rect;
})
);
this.updateColors(fills, strokes);
this.root.append(_flatten(this.bars));
}
updateColors(fills, strokes) {
this.bars.forEach(
(series, i) => series.forEach((bar) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
})
);
}
};
var MiniStackedBar = {
chartType: "stackedBar",
miniChart: MiniStackedBarClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/bar/miniNormalizedBar.ts
var miniNormalizedBarData = [
[10, 10, 10],
[6, 7, 8],
[2, 4, 6]
];
var MiniNormalizedBarClass = class extends MiniStackedBarClass {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(
container,
agChartsExports,
fills,
strokes,
isCustomTheme,
miniNormalizedBarData,
[0, 10],
"normalizedBarTooltip"
);
}
};
var MiniNormalizedBar = {
chartType: "normalizedBar",
miniChart: MiniNormalizedBarClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/pie/miniDonut.ts
var MiniDonutClass = class extends MiniChart {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, centerRadiusScaler = 0.6, tooltipName = "donutTooltip") {
super(container, agChartsExports, tooltipName);
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const radius = (size - padding * 2) / 2;
const center = radius + padding;
const toRadians = _Scene.toRadians;
const angles = [
[toRadians(-90), toRadians(30)],
[toRadians(30), toRadians(120)],
[toRadians(120), toRadians(180)],
[toRadians(180), toRadians(210)],
[toRadians(210), toRadians(240)],
[toRadians(240), toRadians(270)]
];
this.sectors = angles.map(([startAngle, endAngle]) => {
const sector = new _Scene.Sector();
sector.centerX = center;
sector.centerY = center;
sector.innerRadius = radius * centerRadiusScaler;
sector.outerRadius = radius;
sector.startAngle = startAngle;
sector.endAngle = endAngle;
sector.stroke = void 0;
sector.strokeWidth = 0;
sector.inset = 0.75;
return sector;
});
this.updateColors(fills, strokes);
this.root.append(this.sectors);
}
updateColors(fills, strokes) {
this.sectors.forEach((sector, i) => {
sector.fill = fills[i % fills.length];
sector.stroke = strokes[i % strokes.length];
});
}
};
var MiniDonut = {
chartType: "donut",
miniChart: MiniDonutClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/pie/miniPie.ts
var MiniPieClass = class extends MiniDonutClass {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(container, agChartsExports, fills, strokes, isCustomTheme, 0, "pieTooltip");
}
};
var MiniPie = {
chartType: "pie",
miniChart: MiniPieClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/line/miniLine.ts
var miniLineData = [
[1, 3, 5],
[2, 6, 4],
[5, 3, 1]
];
var MiniLineClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniLineData, tooltipName = "lineTooltip") {
super(container, agChartsExports, tooltipName);
const { size, padding, root } = this;
this.lines = createLinePaths(agChartsExports, root, data, size, padding);
this.updateColors(fills, strokes);
}
updateColors(fills, _strokes) {
this.lines.forEach((line, i) => {
line.stroke = fills[i];
});
}
};
var MiniLine = {
chartType: "line",
miniChart: MiniLineClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/line/miniStackedLine.ts
var miniStackedLineData = stackData(miniLineData);
var MiniStackedLineClass = class extends MiniLineClass {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniStackedLineData, tooltipName = "stackedLineTooltip") {
super(container, agChartsExports, fills, strokes, _isCustomTheme, data, tooltipName);
}
};
var MiniStackedLine = {
chartType: "stackedLine",
miniChart: MiniStackedLineClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/line/miniNormalizedLine.ts
var miniNormalizedLineData = normalizeStackData(miniStackedLineData);
var MiniNormalizedLineClass = class extends MiniLineClass {
constructor(container, agChartsExports, fills, strokes, isCustomTheme, data = miniNormalizedLineData, tooltipName = "normalizedLineTooltip") {
super(container, agChartsExports, fills, strokes, isCustomTheme, data, tooltipName);
}
};
var MiniNormalizedLine = {
chartType: "normalizedLine",
miniChart: MiniNormalizedLineClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/scatter/miniScatter.ts
var MiniScatterClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "scatterTooltip");
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const data = [
[
[0.3, 3],
[1.1, 0.9],
[2, 0.4],
[3.4, 2.4]
],
[
[0, 0.3],
[1, 2],
[2.4, 1.4],
[3, 0]
]
];
const xScale = new _Scene.LinearScale();
xScale.domain = [-0.5, 4];
xScale.range = [padding * 2, size - padding];
const yScale = new _Scene.LinearScale();
yScale.domain = [-0.5, 3.5];
yScale.range = [size - padding, padding];
const points = [];
data.forEach((series) => {
series.forEach(([x, y]) => {
const arc = new _Scene.Arc();
arc.strokeWidth = 0;
arc.centerX = xScale.convert(x);
arc.centerY = yScale.convert(y);
arc.radius = 2.5;
points.push(arc);
});
});
this.points = points;
this.updateColors(fills, strokes);
const pointsGroup = new _Scene.Group();
pointsGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
pointsGroup.append(this.points);
this.root.append(pointsGroup);
}
updateColors(fills, strokes) {
this.points.forEach((line, i) => {
line.stroke = strokes[i % strokes.length];
line.fill = fills[i % fills.length];
});
}
};
var MiniScatter = {
chartType: "scatter",
miniChart: MiniScatterClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/scatter/miniBubble.ts
var MiniBubbleClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "bubbleTooltip");
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const data = [
[
[0.1, 0.3, 5],
[0.5, 0.4, 7],
[0.2, 0.8, 7]
],
[
[0.8, 0.7, 5],
[0.7, 0.3, 9]
]
];
const xScale = new _Scene.LinearScale();
xScale.domain = [0, 1];
xScale.range = [padding * 2, size - padding];
const yScale = new _Scene.LinearScale();
yScale.domain = [0, 1];
yScale.range = [size - padding, padding];
const points = [];
data.forEach((series) => {
series.forEach(([x, y, radius]) => {
const arc = new _Scene.Arc();
arc.strokeWidth = 0;
arc.centerX = xScale.convert(x);
arc.centerY = yScale.convert(y);
arc.radius = radius;
arc.fillOpacity = 0.7;
points.push(arc);
});
});
this.points = points;
this.updateColors(fills, strokes);
const pointsGroup = new _Scene.Group();
pointsGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
pointsGroup.append(this.points);
this.root.append(pointsGroup);
}
updateColors(fills, strokes) {
this.points.forEach((line, i) => {
line.stroke = strokes[i % strokes.length];
line.fill = fills[i % fills.length];
});
}
};
var MiniBubble = {
chartType: "bubble",
miniChart: MiniBubbleClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/area/miniArea.ts
var miniAreaData = miniLineData;
var MiniAreaClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniAreaData, tooltipName = "groupedAreaTooltip", stacked = false) {
super(container, agChartsExports, tooltipName);
this.areas = createAreaPaths(agChartsExports._Scene, this.root, data, this.size, this.padding, stacked);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.areas.forEach((area, i) => {
area.fill = fills[i];
area.stroke = strokes[i];
area.strokeWidth = 1;
area.strokeOpacity = 0.75;
area.fillOpacity = 0.7;
});
}
};
var MiniArea = {
chartType: "area",
miniChart: MiniAreaClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/area/miniStackedArea.ts
var miniStackedAreaData = stackData(miniAreaData);
var MiniStackedAreaClass = class extends MiniAreaClass {
constructor(container, agChartsExports, fills, strokes, _isCustomTheme, data = miniStackedAreaData, tooltipName = "stackedAreaTooltip") {
super(container, agChartsExports, fills, strokes, _isCustomTheme, data, tooltipName, true);
}
updateColors(fills, strokes) {
this.areas.forEach((area, i) => {
area.fill = fills[i];
area.stroke = strokes[i];
});
}
};
var MiniStackedArea = {
chartType: "stackedArea",
miniChart: MiniStackedAreaClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/area/miniNormalizedArea.ts
var miniNormalizedAreaData = normalizeStackData(miniStackedAreaData);
var MiniNormalizedAreaClass = class extends MiniStackedAreaClass {
constructor(container, agChartsExports, fills, strokes, isCustomTheme, data = miniNormalizedAreaData, tooltipName = "normalizedAreaTooltip") {
super(container, agChartsExports, fills, strokes, isCustomTheme, data, tooltipName);
}
};
var MiniNormalizedArea = {
chartType: "normalizedArea",
miniChart: MiniNormalizedAreaClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/histogram/miniHistogram.ts
var MiniHistogramClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "histogramTooltip");
const {
padding,
size,
agChartsExports: { _Scene }
} = this;
const data = [2, 5, 11, 13, 10, 6, 1];
const xScale = new _Scene.LinearScale();
xScale.domain = [0, data.length];
xScale.range = [padding, size - padding];
const yScale = new _Scene.LinearScale();
yScale.domain = [0, data.reduce((a, b) => Math.max(a, b), 0)];
yScale.range = [size - padding, padding];
const bottom = yScale.convert(0);
this.bars = data.map((datum, i) => {
const top = yScale.convert(datum);
const left = xScale.convert(i);
const right = xScale.convert(i + 1);
const rect = new _Scene.Rect();
rect.x = left;
rect.y = top;
rect.width = right - left;
rect.height = bottom - top;
rect.strokeWidth = 1;
rect.strokeOpacity = 0.75;
rect.crisp = true;
return rect;
});
this.updateColors(fills, strokes);
this.root.append(this.bars);
}
updateColors([fill], [stroke]) {
for (const bar of this.bars) {
bar.fill = fill;
bar.stroke = stroke;
}
}
};
var MiniHistogram = {
chartType: "histogram",
miniChart: MiniHistogramClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/miniChartWithPolarAxes.ts
var MiniChartWithPolarAxes = class extends MiniChart {
constructor(container, agChartsExports, tooltipName) {
super(container, agChartsExports, tooltipName);
this.stroke = "gray";
this.showRadiusAxisLine = true;
this.showAngleAxisLines = true;
}
postConstruct() {
const { _Scene } = this.agChartsExports;
const size = this.size;
const padding = this.padding;
const combinedPadding = padding * 2;
const axisLineRadius = (size - combinedPadding) / 2;
const gridRadii = this.showAngleAxisLines ? [axisLineRadius, axisLineRadius * 0.8, axisLineRadius * 0.6, axisLineRadius * 0.4] : [];
const radiusAxisLine = new _Scene.Line();
radiusAxisLine.x1 = size / 2;
radiusAxisLine.y1 = padding;
radiusAxisLine.x2 = size / 2;
radiusAxisLine.y2 = size - padding - axisLineRadius - gridRadii[gridRadii.length - 1];
radiusAxisLine.stroke = this.stroke;
radiusAxisLine.strokeOpacity = 0.5;
radiusAxisLine.fill = void 0;
radiusAxisLine.visible = this.showRadiusAxisLine;
const x = padding + axisLineRadius;
this.gridLines = gridRadii.map((radius, index) => {
const gridLine = new _Scene.Path();
gridLine.path.arc(x, x, radius, 0, 2 * Math.PI);
gridLine.strokeWidth = 1;
gridLine.stroke = this.stroke;
gridLine.strokeOpacity = index === 0 ? 0.5 : 0.2;
gridLine.fill = void 0;
return gridLine;
});
const root = this.root;
root.append(radiusAxisLine);
if (this.gridLines.length > 0) {
root.append(this.gridLines);
}
super.postConstruct();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/polar/miniRadialColumn.ts
var MiniRadialColumnClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "radialColumnTooltip");
this.data = [
[6, 8, 10, 2, 6, 5],
[4, 4, 3, 6, 4, 4],
[5, 4, 2, 9, 8, 9]
];
this.showRadiusAxisLine = false;
const {
padding,
size,
data,
agChartsExports: { _Scene }
} = this;
const radius = (size - padding * 2) / 2;
const innerRadiusRatio = 0.4;
const axisInnerRadius = radius * innerRadiusRatio;
const angleScale = new _Scene.CategoryScale();
angleScale.domain = data[0].map((_, index) => index);
angleScale.range = [0, 2 * Math.PI];
angleScale.paddingInner = 0;
angleScale.paddingOuter = 0;
const bandwidth = angleScale.bandwidth * 0.7;
const { processedData, max } = accumulateData(data);
const radiusScale = new _Scene.LinearScale();
radiusScale.domain = [0, max];
radiusScale.range = [axisInnerRadius, radius];
const center = this.size / 2;
this.series = processedData.map((series, seriesIndex) => {
const firstSeries = seriesIndex === 0;
const previousSeries = firstSeries ? void 0 : processedData[seriesIndex - 1];
const seriesGroup = new _Scene.TranslatableGroup({ zIndex: 1e6 });
const seriesColumns = series.map((datum, i) => {
const previousDatum = previousSeries?.[i];
const outerRadius = radiusScale.convert(datum);
const innerRadius = radiusScale.convert(previousDatum ?? 0);
const startAngle = angleScale.convert(i);
const endAngle = startAngle + bandwidth;
const columnWidth = _Scene.getRadialColumnWidth(startAngle, endAngle, radius, 0.5, 0.5);
const column = new _Scene.RadialColumnShape();
column.columnWidth = columnWidth;
column.innerRadius = innerRadius;
column.outerRadius = outerRadius;
column.startAngle = startAngle;
column.endAngle = endAngle;
column.isBeveled = true;
column.axisInnerRadius = axisInnerRadius;
column.axisOuterRadius = radius;
column.stroke = void 0;
column.strokeWidth = 0;
return column;
});
seriesGroup.append(seriesColumns);
seriesGroup.translationX = center;
seriesGroup.translationY = center;
return seriesGroup;
});
this.root.append(this.series);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.series.forEach((group, i) => {
for (const sector of group.children()) {
sector.fill = fills[i % fills.length];
sector.stroke = strokes[i % strokes.length];
}
});
}
};
var MiniRadialColumn = {
chartType: "radialColumn",
miniChart: MiniRadialColumnClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/polar/miniRadialBar.ts
var MiniRadialBarClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "radialBarTooltip");
this.data = [
[6, 8, 10],
[4, 4, 3],
[5, 4, 2]
];
this.showRadiusAxisLine = false;
const {
size,
padding,
data,
agChartsExports: { _Scene }
} = this;
const radius = (size - padding) / 2;
const innerRadiusRatio = 0.4;
const innerRadius = radius * innerRadiusRatio;
const radiusScale = new _Scene.CategoryScale();
radiusScale.domain = data[0].map((_, index) => index);
radiusScale.range = [innerRadius, radius];
radiusScale.paddingInner = 0.5;
radiusScale.paddingOuter = 0;
const bandwidth = radiusScale.bandwidth;
const { processedData, max } = accumulateData(data);
const angleScale = new _Scene.LinearScale();
angleScale.domain = [0, Math.ceil(max * 1.5)];
const start = 3 / 2 * Math.PI;
const end = start + 2 * Math.PI;
angleScale.range = [start, end];
const center = size / 2;
this.series = processedData.map((series, index) => {
const previousSeries = index < 0 ? void 0 : processedData[index - 1];
const seriesGroup = new _Scene.Group({ zIndex: 1e6 });
const seriesSectors = series.map((datum, i) => {
const previousDatum = previousSeries?.[i] ?? 0;
const outerRadius = radiusScale.convert(i);
const innerRadius2 = outerRadius - bandwidth;
const startAngle = angleScale.convert(previousDatum);
const endAngle = angleScale.convert(datum);
const sector = new _Scene.Sector();
sector.centerX = center;
sector.centerY = center;
sector.innerRadius = innerRadius2;
sector.outerRadius = outerRadius;
sector.startAngle = startAngle;
sector.endAngle = endAngle;
sector.stroke = void 0;
sector.strokeWidth = 0;
return sector;
});
seriesGroup.append(seriesSectors);
return seriesGroup;
});
this.root.append(this.series);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.series.forEach((group, i) => {
for (const sector of group.children()) {
sector.fill = fills[i % fills.length];
sector.stroke = strokes[i % strokes.length];
}
});
}
};
var MiniRadialBar = {
chartType: "radialBar",
miniChart: MiniRadialBarClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/polar/miniRadarLine.ts
var MiniRadarLineClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "radarLineTooltip");
this.markerSize = 4;
this.data = [
[8, 7, 8, 7, 8, 8, 7, 8],
[6, 8, 5, 10, 6, 7, 4, 6],
[0, 3, 3, 5, 4, 4, 2, 0]
];
this.showRadiusAxisLine = false;
const { size, padding, root, data } = this;
const radius = (size - padding * 2) / 2;
const innerRadius = 0;
const { paths, markers: markers2 } = createPolarPaths(
agChartsExports,
root,
data,
size,
radius,
innerRadius,
this.markerSize
);
this.lines = paths;
this.markers = markers2;
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.lines.forEach((line, i) => {
const n = this.data[i].length;
line.stroke = fills[i];
const startIdx = i * n;
const endIdx = startIdx + n;
const markers2 = this.markers.slice(startIdx, endIdx);
for (const marker of markers2) {
marker.stroke = strokes[i];
marker.fill = fills[i];
}
});
}
};
var MiniRadarLine = {
chartType: "radarLine",
miniChart: MiniRadarLineClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/polar/miniRadarArea.ts
var MiniRadarAreaClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "radarAreaTooltip");
this.data = [
[8, 10, 5, 7, 4, 1, 5, 8],
[1, 1, 2, 7, 7, 8, 10, 1],
[4, 5, 9, 9, 4, 2, 3, 4]
];
const { size, padding, root, data } = this;
this.showRadiusAxisLine = false;
const radius = (size - padding * 2) / 2;
const innerRadius = radius - size * 0.3;
this.areas = createPolarPaths(agChartsExports, root, data, size, radius, innerRadius).paths;
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.areas.forEach((area, i) => {
area.fill = fills[i];
area.stroke = strokes[i];
});
}
};
var MiniRadarArea = {
chartType: "radarArea",
miniChart: MiniRadarAreaClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/polar/miniNightingale.ts
var MiniNightingaleClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "nightingaleTooltip");
this.data = [
[6, 10, 9, 8, 7, 8],
[4, 6, 5, 4, 5, 5],
[3, 5, 4, 3, 4, 7]
];
this.showRadiusAxisLine = false;
const {
size,
padding,
data,
agChartsExports: { _Scene }
} = this;
const radius = (size - padding * 2) / 2;
const angleScale = new _Scene.CategoryScale();
angleScale.domain = data[0].map((_, index) => index);
angleScale.range = [-Math.PI, Math.PI];
angleScale.paddingInner = 0;
angleScale.paddingOuter = 0;
const bandwidth = angleScale.bandwidth * 0.7;
const { processedData, max } = accumulateData(data);
const radiusScale = new _Scene.LinearScale();
radiusScale.domain = [0, max];
radiusScale.range = [0, radius];
const center = size / 2;
this.series = processedData.map((series, index) => {
const previousSeries = index < 0 ? void 0 : processedData[index - 1];
const seriesGroup = new _Scene.Group({ zIndex: 1e6 });
const seriesSectors = series.map((datum, i) => {
const previousDatum = previousSeries?.[i];
const outerRadius = radiusScale.convert(datum);
const innerRadius = radiusScale.convert(previousDatum ?? 0);
const startAngle = angleScale.convert(i);
const endAngle = startAngle + bandwidth;
const sector = new _Scene.Sector();
sector.centerX = center;
sector.centerY = center;
sector.innerRadius = innerRadius;
sector.outerRadius = outerRadius;
sector.startAngle = startAngle;
sector.endAngle = endAngle;
sector.stroke = void 0;
sector.strokeWidth = 0;
return sector;
});
seriesGroup.append(seriesSectors);
return seriesGroup;
});
this.root.append(this.series);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.series.forEach((group, i) => {
for (const sector of group.children()) {
sector.fill = fills[i % fills.length];
sector.stroke = strokes[i % strokes.length];
}
});
}
};
var MiniNightingale = {
chartType: "nightingale",
miniChart: MiniNightingaleClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/statistical/miniRangeBar.ts
var MiniRangeBarClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "rangeBarTooltip");
const data = [3, 3.5, 3];
this.bars = this.createRangeBar(this.root, data, this.size, this.padding, "vertical");
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.bars.forEach((bar, i) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
});
}
createRangeBar(root, data, size, padding, direction) {
const barAlongX = direction === "horizontal";
const scalePadding = 2 * padding;
const { _Scene } = this.agChartsExports;
const xScale = new _Scene.CategoryScale();
xScale.domain = data.map((_, index) => index);
xScale.range = [padding, size - padding];
xScale.paddingInner = 0.3;
xScale.paddingOuter = 0.3;
const lowRatio = 0.7;
const highRatio = 1.3;
const yScale = new _Scene.LinearScale();
yScale.domain = [
data.reduce((a, b) => Math.min(a, b), Infinity) * lowRatio,
data.reduce((a, b) => Math.max(a, b), 0) * highRatio
];
yScale.range = [scalePadding, size - scalePadding];
const width = xScale.bandwidth;
const bars = data.map((datum, i) => {
const [low, high] = [datum * lowRatio, datum * highRatio];
const x = xScale.convert(i);
const y = yScale.convert(low);
const height = yScale.convert(high) - y;
const rect = new _Scene.Rect();
rect.x = barAlongX ? y : x;
rect.y = barAlongX ? x : y;
rect.width = barAlongX ? height : width;
rect.height = barAlongX ? width : height;
rect.strokeWidth = 0;
rect.crisp = true;
return rect;
});
root.append(bars);
return bars;
}
};
var MiniRangeBar = {
chartType: "rangeBar",
miniChart: MiniRangeBarClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/statistical/miniRangeArea.ts
var MiniRangeAreaClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "rangeAreaTooltip");
const period = 4;
const dataSeriesMidpoints = [
zigzag({ offset: 0.375 * period, length: period, pattern: { low: 3, high: 5, period } }),
zigzag({ offset: 0.375 * period, length: period, pattern: { low: 2.25, high: 4.25, period } }),
zigzag({ offset: 0.75 * period, length: period, pattern: { low: 2.5, high: 4.5, period } })
];
const dataSeriesWidth = 1.75;
const data = dataSeriesMidpoints.map(
(series) => series.map(([x, y]) => ({
x,
low: y - 0.5 * dataSeriesWidth,
high: y + 0.5 * dataSeriesWidth
}))
);
const { lines, areas } = this.createRangeArea(this.root, data, this.size, this.padding);
this.lines = lines;
this.areas = areas;
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
fills = swapArrayItems(fills, 1, 2);
strokes = swapArrayItems(strokes, 1, 2);
this.lines.forEach(([highLine, lowLine], i) => {
highLine.fill = void 0;
highLine.stroke = strokes[i];
lowLine.fill = void 0;
lowLine.stroke = strokes[i];
});
this.areas.forEach((area, i) => {
area.fill = fills[i];
});
}
createRangeArea(root, data, size, padding) {
const xMin = data.reduce((acc, series) => series.reduce((acc2, { x }) => Math.min(acc2, x), acc), Infinity);
const xMax = data.reduce((acc, series) => series.reduce((acc2, { x }) => Math.max(acc2, x), acc), -Infinity);
const yMin = data.reduce((acc, series) => series.reduce((acc2, { low }) => Math.min(acc2, low), acc), Infinity);
const yMax = data.reduce(
(acc, series) => series.reduce((acc2, { high }) => Math.max(acc2, high), acc),
-Infinity
);
const { _Scene } = this.agChartsExports;
const xScale = new _Scene.LinearScale();
xScale.domain = [xMin, xMax];
xScale.range = [padding, size - padding];
const scalePadding = 2 * padding;
const yScale = new _Scene.LinearScale();
yScale.domain = [yMin, yMax];
yScale.range = [size - scalePadding, scalePadding];
const lines = [];
const areas = [];
const lowPoints = data.map((series) => {
const highLine = new _Scene.Path();
const lowLine = new _Scene.Path();
const area = new _Scene.Path();
lines.push([highLine, lowLine]);
areas.push(area);
highLine.strokeWidth = 0;
lowLine.strokeWidth = 0;
area.strokeWidth = 0;
area.fillOpacity = 0.8;
highLine.path.clear();
lowLine.path.clear();
area.path.clear();
return series.map((datum, datumIndex) => {
const { x, low, high } = datum;
const scaledX = xScale.convert(x);
const yLow = yScale.convert(low);
const yHigh = yScale.convert(high);
const command = datumIndex > 0 ? "lineTo" : "moveTo";
highLine.path[command](scaledX, yHigh);
lowLine.path[command](scaledX, yLow);
area.path[command](scaledX, yHigh);
return [scaledX, yLow];
});
});
lowPoints.forEach((seriesLowPoints, seriesIndex) => {
const n = seriesLowPoints.length - 1;
const area = areas[seriesIndex];
for (let datumIndex = n; datumIndex >= 0; datumIndex--) {
const [x, y] = seriesLowPoints[datumIndex];
area.path["lineTo"](x, y);
}
});
root.append(areas.concat(...lines));
return { lines, areas };
}
};
function zigzag(options) {
const { offset, length, pattern } = options;
const points = getZigzagInflectionPoints(offset, length, pattern);
const xMin = 0;
const xMax = length;
if (points.length === 0 || points[0][0] !== xMin) {
points.unshift(getZigzagPoint(xMin, offset, pattern));
}
if (points[points.length - 1][0] !== xMax) {
points.push(getZigzagPoint(xMax, offset, pattern));
}
return points;
function getZigzagInflectionPoints(offset2, length2, pattern2) {
const { period } = pattern2;
const scaledOffset = offset2 / period;
const patternInflectionPoints = [0, 0.5];
const inflectionPoints = patternInflectionPoints.map((x) => x - scaledOffset).map(getRemainderAbs).sort((a, b) => a - b);
const repeatedPoints = Array.from(
{ length: Math.floor(inflectionPoints.length * (period / length2)) },
(_, i) => inflectionPoints[i % inflectionPoints.length] + Math.floor(i / inflectionPoints.length)
);
return repeatedPoints.map((x) => x * period).map((x) => getZigzagPoint(x, offset2, pattern2));
}
function getZigzagPoint(x, offset2, pattern2) {
return [x, getZigzagValue(offset2 + x, pattern2)];
}
function getZigzagValue(x, pattern2) {
const { low, high, period } = pattern2;
const scaledX = getRemainderAbs(x / period);
const y = scaledX > 0.5 ? 1 - 2 * (scaledX - 0.5) : 2 * scaledX;
return low + (high - low) * y;
}
}
function getRemainderAbs(value) {
const remainder = value % 1;
return remainder < 0 ? remainder + 1 : remainder;
}
function swapArrayItems(items, leftIndex, rightIndex) {
const results = [...items];
const temp = results[leftIndex];
results[leftIndex] = results[rightIndex];
results[rightIndex] = temp;
return results;
}
var MiniRangeArea = {
chartType: "rangeArea",
miniChart: MiniRangeAreaClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/statistical/miniBoxPlot.ts
var MiniBoxPlotClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(container, agChartsExports, "boxPlotTooltip");
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const data = [11, 11.5, 10.5];
const maxRatio = 1.2;
const q3Ratio = 1.1;
const q1Ratio = 0.9;
const minRatio = 0.8;
const yScale = new _Scene.LinearScale();
yScale.domain = [
data.reduce((a, b) => Math.min(a, b), Infinity) * minRatio,
data.reduce((a, b) => Math.max(a, b), 0) * maxRatio
];
yScale.range = [size - 1.5 * padding, padding];
const xScale = new _Scene.CategoryScale();
xScale.domain = data.map((_, index) => index);
xScale.range = [padding, size - padding];
xScale.paddingInner = 0.4;
xScale.paddingOuter = 0.2;
const bandwidth = Math.round(xScale.bandwidth);
const halfBandWidth = Math.round(xScale.bandwidth / 2);
this.boxPlotGroups = data.map((datum, i) => {
const [minValue, q1Value, q3Value, maxValue] = [
datum * minRatio,
datum * q1Ratio,
datum * q3Ratio,
datum * maxRatio
];
const top = Math.round(yScale.convert(q3Value));
const left = Math.round(xScale.convert(i));
const right = Math.round(left + bandwidth);
const bottom = Math.round(yScale.convert(q1Value));
const min = Math.round(yScale.convert(minValue));
const mid = Math.round(yScale.convert(datum));
const max = Math.round(yScale.convert(maxValue));
const whiskerX = left + halfBandWidth;
const boxPlotGroup = new _Scene.Group();
const box = new _Scene.Rect();
const median = new _Scene.Line();
const topWhisker = new _Scene.Line();
const bottomWhisker = new _Scene.Line();
const topCap = new _Scene.Line();
const bottomCap = new _Scene.Line();
box.x = left;
box.y = top;
box.width = bandwidth;
box.height = bottom - top;
box.strokeWidth = 1;
box.strokeOpacity = 0.75;
box.crisp = true;
this.setLineProperties(median, left, right, mid, mid);
this.setLineProperties(topWhisker, whiskerX, whiskerX, max, top);
this.setLineProperties(bottomWhisker, whiskerX, whiskerX, min, bottom);
this.setLineProperties(topCap, left, right, max, max);
this.setLineProperties(bottomCap, left, right, min, min);
boxPlotGroup.append([box, median, topWhisker, bottomWhisker, topCap, bottomCap]);
return boxPlotGroup;
});
this.updateColors(fills, strokes, isCustomTheme);
this.root.append(this.boxPlotGroups);
}
updateColors(fills, strokes, isCustomTheme) {
const { _Theme } = this.agChartsExports;
this.boxPlotGroups.forEach((group, i) => {
for (const node of group.children()) {
const fill = fills[i % fills.length];
node.fill = isCustomTheme ? fill : _Theme.resolveOperation({ $mix: [fill, { $ref: "backgroundColor" }, 0.7] });
node.stroke = strokes[i % strokes.length];
}
});
}
setLineProperties(line, x1, x2, y1, y2) {
line.x1 = x1;
line.x2 = x2;
line.y1 = y1;
line.y2 = y2;
line.strokeOpacity = 0.75;
}
};
var MiniBoxPlot = {
chartType: "boxPlot",
miniChart: MiniBoxPlotClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/hierarchical/miniTreemap.ts
var MiniTreemapClass = class extends MiniChart {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(container, agChartsExports, "treemapTooltip");
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const data = [
[1, 1],
[3, 2, 1]
];
const treeSize = data.length;
const treePadding = treeSize % 2 === 0 ? 0.3 : 0.2;
const range = [padding, size - padding];
const columns = data.length;
const columnParts = columns * (columns + 1) / 2;
const columnPadding = treePadding / (columns - 1);
const availableRange = range[1] - range[0];
const availableWidth = availableRange - treePadding;
let previousX = range[0];
this.rects = data.reduce((rects, d, columnIndex) => {
rects ?? (rects = []);
const widthRatio = (columns - columnIndex) / columnParts;
const width = availableWidth * widthRatio;
const rows = d.length;
const rowParts = d.reduce((parts, ratio) => parts + ratio, 0);
const rowPadding = treePadding / (rows - 1 || 1);
const availableHeight = rows > 1 ? availableRange - treePadding : availableRange;
let previousY = range[0];
const xRects = d.map((ratio) => {
const rect = new _Scene.Rect();
const height = availableHeight * ratio / rowParts;
rect.x = previousX;
rect.y = previousY;
rect.width = width;
rect.height = height;
rect.strokeWidth = 0.75;
rect.crisp = true;
previousY += height + rowPadding;
return rect;
});
previousX += width + columnPadding;
rects.push(...xRects);
return rects;
}, []);
this.updateColors(fills, strokes, isCustomTheme);
const rectGroup = new _Scene.Group();
rectGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding, size - padding));
rectGroup.append(this.rects);
this.root.append(rectGroup);
}
updateColors(fills, strokes, isCustomTheme) {
const { _Theme } = this.agChartsExports;
this.rects.forEach((rect, i) => {
rect.fill = fills[i % strokes.length];
rect.stroke = isCustomTheme ? strokes[i % strokes.length] : _Theme.resolveOperation({ $ref: "backgroundColor" });
});
}
};
var MiniTreemap = {
chartType: "treemap",
miniChart: MiniTreemapClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/hierarchical/miniSunburst.ts
var MiniSunburstClass = class extends MiniChartWithPolarAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "sunburstTooltip");
// Hierarchical data using multidimensional array
this.data = [
[[], []],
[[], []],
[[], []]
];
// Rotate the chart by the given angle (-90 degrees)
this.angleOffset = -Math.PI / 2;
this.innerRadiusRatio = 0;
this.showRadiusAxisLine = false;
this.showAngleAxisLines = false;
const {
data,
size,
padding,
angleOffset,
innerRadiusRatio,
agChartsExports: { _Scene }
} = this;
const radius = (size - padding * 2) / 2;
const angleRange = [angleOffset + 0, angleOffset + 2 * Math.PI];
const angleExtent = Math.abs(angleRange[1] - angleRange[0]);
const radiusRange = [radius * innerRadiusRatio, radius];
const radiusExtent = Math.abs(radiusRange[1] - radiusRange[0]);
let maxDepth = 0;
const findMaxDepth = (data2, parentDepth) => {
for (const child of data2) {
const depth = parentDepth + 1;
maxDepth = Math.max(maxDepth, depth);
findMaxDepth(child, depth);
}
};
findMaxDepth(data, 0);
const radiusRatio = radiusExtent / maxDepth;
const center = this.size / 2;
const startAngle = angleRange[0];
this.series = [];
const createSectors = (data2, depth, startAngle2, availableAngle, group) => {
const isArray = Array.isArray(data2);
if (!isArray) {
return;
}
const childDepth = depth + 1;
let previousAngle = startAngle2;
data2.forEach((child, childIndex, children) => {
let childGroup = group;
if (!childGroup) {
childGroup = new _Scene.Group();
this.series.push(childGroup);
}
const innerRadius = radiusRange[0] + depth * radiusRatio;
const outerRadius = radiusRange[0] + childDepth * radiusRatio;
const angleRatio = 1 / children.length;
const start = previousAngle;
const end = start + availableAngle * angleRatio;
const sector = new _Scene.Sector();
sector.centerX = center;
sector.centerY = center;
sector.innerRadius = innerRadius;
sector.outerRadius = outerRadius;
sector.startAngle = start;
sector.endAngle = end;
sector.stroke = void 0;
sector.strokeWidth = 0;
sector.inset = 0.75;
previousAngle = end;
childGroup.append(sector);
createSectors(child, childDepth, start, Math.abs(end - start), childGroup);
});
};
createSectors(data, 0, startAngle, angleExtent);
this.root.append(this.series);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.series.forEach((group, i) => {
for (const sector of group.children()) {
sector.fill = fills[i % fills.length];
sector.stroke = strokes[i % strokes.length];
}
});
}
};
var MiniSunburst = {
chartType: "sunburst",
miniChart: MiniSunburstClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/specialized/miniHeatmap.ts
var MiniHeatmapClass = class extends MiniChart {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(container, agChartsExports, "heatmapTooltip");
const {
size,
padding,
agChartsExports: { _Scene }
} = this;
const heatmapSize = 3;
const data = Array.from(
{ length: heatmapSize },
(_, __) => Array.from({ length: heatmapSize }, (_2, yIndex) => yIndex)
);
const domain = data.map((_, index) => index);
const xScale = new _Scene.CategoryScale();
xScale.domain = domain;
xScale.range = [padding, size - padding];
xScale.paddingInner = 0.01;
xScale.paddingOuter = 0.1;
const yScale = new _Scene.CategoryScale();
yScale.domain = domain;
yScale.range = [padding, size - padding];
yScale.paddingInner = 0.01;
yScale.paddingOuter = 0.1;
const width = xScale.bandwidth ?? 0;
const height = yScale.bandwidth ?? 0;
this.rects = data.reduce((rects, d, index) => {
rects ?? (rects = []);
const xRects = d.map((_, yIndex) => {
const rect = new _Scene.Rect();
rect.x = xScale.convert(index);
rect.y = yScale.convert(yIndex);
rect.width = width;
rect.height = height;
rect.strokeWidth = 0;
rect.crisp = true;
return rect;
});
rects.push(...xRects);
return rects;
}, []);
this.updateColors(fills, strokes, isCustomTheme);
const rectGroup = new _Scene.Group();
rectGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding, size - padding));
rectGroup.append(this.rects);
this.root.append(rectGroup);
}
updateColors(fills, strokes, isCustomTheme) {
const { _Theme, _Util } = this.agChartsExports;
const colorRange = isCustomTheme ? [fills[0], fills[1]] : _Theme.resolveOperation({ $palette: "divergingColors" });
const stroke = isCustomTheme ? strokes[0] : _Theme.resolveOperation({ $ref: "backgroundColor" });
const fillFn = _Util.interpolateColor(colorRange[0], colorRange[1]);
this.rects.forEach((rect, i) => {
rect.fill = fillFn(i * 0.2);
rect.stroke = stroke;
});
}
};
var MiniHeatmap = {
chartType: "heatmap",
miniChart: MiniHeatmapClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/specialized/miniWaterfall.ts
var MiniWaterfallClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes, isCustomTheme) {
super(container, agChartsExports, "waterfallTooltip");
this.data = [4, 3, -3, 6, -3];
this.bars = this.createWaterfall(this.root, this.data, this.size, this.padding, "vertical").bars;
this.updateColors(fills, strokes, isCustomTheme);
}
updateColors(fills, strokes, isCustomTheme) {
const {
data,
agChartsExports: { _Theme }
} = this;
const positive = {
fill: isCustomTheme ? fills[0] : _Theme.resolveOperation({ $palette: "altUp.fill" }),
stroke: isCustomTheme ? strokes[0] : _Theme.resolveOperation({ $palette: "altUp.stroke" })
};
const negative = {
fill: isCustomTheme ? fills[1] : _Theme.resolveOperation({ $palette: "altDown.fill" }),
stroke: isCustomTheme ? strokes[1] : _Theme.resolveOperation({ $palette: "altDown.stroke" })
};
this.bars.forEach((bar, i) => {
const isPositive = data[i] >= 0;
bar.fill = isPositive ? positive.fill : negative.fill;
bar.stroke = isPositive ? positive.stroke : negative.stroke;
});
}
createWaterfall(root, data, size, padding, direction) {
const scalePadding = 2 * padding;
const { processedData, min, max } = accumulateData(data.map((d) => [d]));
const flatData = processedData.reduce((flat, d) => flat.concat(d), []);
const { _Scene } = this.agChartsExports;
const yScale = new _Scene.LinearScale();
yScale.domain = [Math.min(min, 0), max];
yScale.range = [size - scalePadding, scalePadding];
const xScale = new _Scene.CategoryScale();
xScale.domain = data.map((_, index) => index);
xScale.range = [padding, size - padding];
xScale.paddingInner = 0.2;
xScale.paddingOuter = 0.3;
const width = xScale.bandwidth;
const connectorLine = new _Scene.Path();
connectorLine.stroke = "#575757";
connectorLine.strokeWidth = 0;
const pixelAlignmentOffset = Math.floor(connectorLine.strokeWidth) % 2 / 2;
const connectorPath = connectorLine.path;
connectorPath.clear();
const barAlongX = direction === "horizontal";
const bars = flatData.map((datum, i) => {
const previousDatum = i > 0 ? flatData[i - 1] : 0;
const rawValue = data[i];
const isPositive = rawValue > 0;
const currY = Math.round(yScale.convert(datum));
const trailY = Math.round(yScale.convert(previousDatum));
const y = (isPositive ? currY : trailY) - pixelAlignmentOffset;
const bottomY = (isPositive ? trailY : currY) + pixelAlignmentOffset;
const height = Math.abs(bottomY - y);
const x = xScale.convert(i);
const rect = new _Scene.Rect();
rect.x = barAlongX ? y : x;
rect.y = barAlongX ? x : y;
rect.width = barAlongX ? height : width;
rect.height = barAlongX ? width : height;
rect.strokeWidth = 0;
rect.crisp = true;
const moveTo = currY + pixelAlignmentOffset;
const lineTo = trailY + pixelAlignmentOffset;
if (i > 0) {
const lineToX = barAlongX ? lineTo : rect.x;
const lineToY = barAlongX ? rect.y : lineTo;
connectorPath.lineTo(lineToX, lineToY);
}
const moveToX = barAlongX ? moveTo : rect.x;
const moveToY = barAlongX ? rect.y : moveTo;
connectorPath.moveTo(moveToX, moveToY);
return rect;
});
root.append([connectorLine, ...bars]);
return { bars };
}
};
var MiniWaterfall = {
chartType: "waterfall",
miniChart: MiniWaterfallClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/combo/miniColumnLineCombo.ts
var MiniColumnLineComboClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "columnLineComboTooltip");
this.columnData = [3, 4];
this.lineData = [[5, 4, 6, 5, 4]];
const { root, columnData, lineData, size, padding } = this;
this.columns = createColumnRects({
stacked: false,
root,
data: columnData,
size,
padding,
xScaleDomain: [0, 1],
yScaleDomain: [0, 4],
xScalePadding: 0.5,
agChartsExports
});
root.append(this.columns);
this.lines = createLinePaths(agChartsExports, root, lineData, size, padding);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.columns.forEach((bar, i) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
});
this.lines.forEach((line, i) => {
line.stroke = fills[i + 2];
});
}
};
var MiniColumnLineCombo = {
chartType: "columnLineCombo",
miniChart: MiniColumnLineComboClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/combo/miniAreaColumnCombo.ts
var MiniAreaColumnComboClass = class extends MiniChartWithAxes {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "areaColumnComboTooltip");
this.columnData = [3, 4.5];
this.areaData = [[5, 4, 6, 5, 4]];
const {
root,
columnData,
areaData,
size,
padding,
agChartsExports: { _Scene }
} = this;
this.columns = createColumnRects({
stacked: false,
root,
data: columnData,
size,
padding,
xScaleDomain: [0, 1],
yScaleDomain: [0, 6],
xScalePadding: 0.5,
agChartsExports
});
const xScale = new _Scene.CategoryScale();
xScale.range = [padding, size - padding];
xScale.domain = [0, 1, 2, 3, 4];
xScale.paddingInner = 1;
xScale.paddingOuter = 0;
const yScale = new _Scene.LinearScale();
yScale.range = [size - padding, padding];
yScale.domain = [0, 6];
const pathData = [];
const yZero = yScale.convert(0);
const firstX = xScale.convert(0);
areaData.forEach((series, i) => {
const points = pathData[i] || (pathData[i] = []);
series.forEach((data, j) => {
const yDatum = data;
const xDatum = j;
const x = xScale.convert(xDatum);
const y = yScale.convert(yDatum);
points[j] = { x, y };
});
const lastX = xScale.convert(series.length - 1);
pathData[i].push(
{
x: lastX,
y: yZero
},
{
x: firstX,
y: yZero
}
);
});
this.areas = pathData.map((points) => {
const area = new _Scene.Path();
area.strokeWidth = 0;
area.fillOpacity = 0.8;
const path = area.path;
points.forEach((point, i) => path[i > 0 ? "lineTo" : "moveTo"](point.x, point.y));
return area;
});
const areaGroup = new _Scene.Group();
areaGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
const columnGroup = new _Scene.Group();
columnGroup.setClipRect(new _Scene.BBox(padding, padding, size - padding * 2, size - padding * 2));
areaGroup.append(this.areas);
columnGroup.append(this.columns);
root.append(areaGroup);
root.append(columnGroup);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.areas.forEach((area, i) => {
area.fill = fills[i];
area.stroke = strokes[i];
});
this.columns.forEach((bar, i) => {
bar.fill = fills[i + 1];
bar.stroke = strokes[i + 1];
});
}
};
var MiniAreaColumnCombo = {
chartType: "areaColumnCombo",
miniChart: MiniAreaColumnComboClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniCharts/combo/miniCustomCombo.ts
var MiniCustomComboClass = class extends MiniChart {
constructor(container, agChartsExports, fills, strokes) {
super(container, agChartsExports, "customComboTooltip");
this.columnData = [3, 4];
this.lineData = [[5, 4, 6, 5, 4]];
const {
root,
columnData,
lineData,
size,
padding,
agChartsExports: { _Scene }
} = this;
this.columns = createColumnRects({
stacked: false,
root,
data: columnData,
size,
padding,
xScaleDomain: [0, 1],
yScaleDomain: [0, 4],
xScalePadding: 0.5,
agChartsExports
});
root.append(this.columns);
this.lines = createLinePaths(this.agChartsExports, root, lineData, size, padding);
const axisStroke = "grey";
const axisOvershoot = 3;
const leftAxis = new _Scene.Line();
leftAxis.x1 = padding;
leftAxis.y1 = padding;
leftAxis.x2 = padding;
leftAxis.y2 = size - padding + axisOvershoot;
leftAxis.stroke = axisStroke;
const bottomAxis = new _Scene.Line();
bottomAxis.x1 = padding - axisOvershoot + 1;
bottomAxis.y1 = size - padding;
bottomAxis.x2 = size - padding + 1;
bottomAxis.y2 = size - padding;
bottomAxis.stroke = axisStroke;
const penIcon = new _Scene.Path();
this.buildPenIconPath(penIcon);
penIcon.fill = "whitesmoke";
penIcon.stroke = "darkslategrey";
penIcon.strokeWidth = 1;
root.append([bottomAxis, leftAxis, penIcon]);
this.updateColors(fills, strokes);
}
updateColors(fills, strokes) {
this.columns.forEach((bar, i) => {
bar.fill = fills[i];
bar.stroke = strokes[i];
});
this.lines.forEach((line, i) => {
line.stroke = fills[i + 2];
});
}
buildPenIconPath(penIcon) {
const { path } = penIcon;
path.moveTo(25.76, 43.46);
path.lineTo(31.27, 48.53);
path.moveTo(49.86, 22);
path.lineTo(49.86, 22);
path.cubicCurveTo(49.01994659053345, 21.317514933510974, 47.89593834348529, 21.09645997825817, 46.86, 21.41);
path.lineTo(46.86, 21.41);
path.cubicCurveTo(45.55460035985361, 21.77260167850787, 44.38777081121966, 22.517979360321792, 43.51, 23.55);
path.lineTo(25.51, 43.8);
path.lineTo(25.43, 43.89);
path.lineTo(23.01, 51.89);
path.lineTo(22.83, 52.46);
path.lineTo(31.02, 48.86);
path.lineTo(49.02, 28.52);
path.lineTo(49.02, 28.52);
path.cubicCurveTo(49.940716461596224, 27.521914221246085, 50.54302631059587, 26.2720342455763, 50.75, 24.93);
path.lineTo(50.75, 24.93);
path.cubicCurveTo(50.95363374988308, 23.866379846512814, 50.62080640232334, 22.77066734274871, 49.86, 22);
path.closePath();
path.moveTo(41.76, 25.5);
path.lineTo(47.34, 30.5);
path.moveTo(40.74, 26.65);
path.lineTo(46.25, 31.71);
}
};
var MiniCustomCombo = {
chartType: "customCombo",
miniChart: MiniCustomComboClass
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/miniChartsContainer.ts
var miniChartMapping = {
columnGroup: {
column: { range: true, pivot: true, enterprise: false, icon: MiniColumn },
stackedColumn: { range: true, pivot: true, enterprise: false, icon: MiniStackedColumn },
normalizedColumn: { range: true, pivot: true, enterprise: false, icon: MiniNormalizedColumn }
},
barGroup: {
bar: { range: true, pivot: true, enterprise: false, icon: MiniBar },
stackedBar: { range: true, pivot: true, enterprise: false, icon: MiniStackedBar },
normalizedBar: { range: true, pivot: true, enterprise: false, icon: MiniNormalizedBar }
},
pieGroup: {
pie: { range: true, pivot: true, enterprise: false, icon: MiniPie },
donut: { range: true, pivot: true, enterprise: false, icon: MiniDonut },
doughnut: { range: true, pivot: true, enterprise: false, icon: MiniDonut }
},
lineGroup: {
line: { range: true, pivot: true, enterprise: false, icon: MiniLine },
stackedLine: { range: true, pivot: true, enterprise: false, icon: MiniStackedLine },
normalizedLine: { range: true, pivot: true, enterprise: false, icon: MiniNormalizedLine }
},
scatterGroup: {
scatter: { range: true, pivot: true, enterprise: false, icon: MiniScatter },
bubble: { range: true, pivot: true, enterprise: false, icon: MiniBubble }
},
areaGroup: {
area: { range: true, pivot: true, enterprise: false, icon: MiniArea },
stackedArea: { range: true, pivot: true, enterprise: false, icon: MiniStackedArea },
normalizedArea: { range: true, pivot: true, enterprise: false, icon: MiniNormalizedArea }
},
polarGroup: {
radarLine: { range: true, pivot: false, enterprise: true, icon: MiniRadarLine },
radarArea: { range: true, pivot: false, enterprise: true, icon: MiniRadarArea },
nightingale: { range: true, pivot: false, enterprise: true, icon: MiniNightingale },
radialColumn: { range: true, pivot: false, enterprise: true, icon: MiniRadialColumn },
radialBar: { range: true, pivot: false, enterprise: true, icon: MiniRadialBar }
},
statisticalGroup: {
boxPlot: { range: true, pivot: false, enterprise: true, icon: MiniBoxPlot },
histogram: { range: true, pivot: false, enterprise: false, icon: MiniHistogram },
rangeBar: { range: true, pivot: false, enterprise: true, icon: MiniRangeBar },
rangeArea: { range: true, pivot: false, enterprise: true, icon: MiniRangeArea }
},
hierarchicalGroup: {
treemap: { range: true, pivot: true, enterprise: true, icon: MiniTreemap },
sunburst: { range: true, pivot: true, enterprise: true, icon: MiniSunburst }
},
specializedGroup: {
heatmap: { range: true, pivot: false, enterprise: true, icon: MiniHeatmap },
waterfall: { range: true, pivot: false, enterprise: true, icon: MiniWaterfall }
},
combinationGroup: {
columnLineCombo: { range: true, pivot: true, enterprise: false, icon: MiniColumnLineCombo },
areaColumnCombo: { range: true, pivot: true, enterprise: false, icon: MiniAreaColumnCombo },
customCombo: { range: true, pivot: true, enterprise: false, icon: MiniCustomCombo }
},
funnelGroup: {
funnel: { range: true, pivot: false, enterprise: true, icon: MiniFunnel },
coneFunnel: { range: true, pivot: false, enterprise: true, icon: MiniConeFunnel },
pyramid: { range: true, pivot: false, enterprise: true, icon: MiniPyramid }
}
};
var DEFAULT_CHART_GROUPS = {
columnGroup: ["column", "stackedColumn", "normalizedColumn"],
barGroup: ["bar", "stackedBar", "normalizedBar"],
pieGroup: ["pie", "donut"],
lineGroup: ["line", "stackedLine", "normalizedLine"],
areaGroup: ["area", "stackedArea", "normalizedArea"],
scatterGroup: ["scatter", "bubble"],
polarGroup: ["radarLine", "radarArea", "nightingale", "radialColumn", "radialBar"],
statisticalGroup: ["boxPlot", "histogram", "rangeBar", "rangeArea"],
hierarchicalGroup: ["treemap", "sunburst"],
specializedGroup: ["heatmap", "waterfall"],
funnelGroup: ["funnel", "coneFunnel", "pyramid"],
combinationGroup: ["columnLineCombo", "areaColumnCombo", "customCombo"]
};
var MiniChartsContainer = class extends Component {
constructor(chartController, fills, strokes, isCustomTheme, chartGroups = DEFAULT_CHART_GROUPS) {
super(
/* html */
`
`
);
this.wrappers = /* @__PURE__ */ new Map();
this.chartController = chartController;
this.fills = fills;
this.strokes = strokes;
this.isCustomTheme = isCustomTheme;
this.chartGroups = { ...chartGroups };
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
if (!this.chartController.customComboExists() && this.chartGroups.combinationGroup) {
this.chartGroups.combinationGroup = this.chartGroups.combinationGroup.filter(
(chartType) => chartType !== "customCombo"
);
}
const eGui = this.getGui();
const isEnterprise = this.chartController.isEnterprise();
const isPivotChart = this.chartController.isPivotChart();
const isRangeChart = !isPivotChart;
const displayedMenuGroups = Object.keys(this.chartGroups).map((group) => {
const menuGroup = group in miniChartMapping ? miniChartMapping[group] : void 0;
if (!menuGroup) {
_warn(148, { group });
return null;
}
const chartGroupValues = this.chartGroups[group] ?? [];
const menuItems = chartGroupValues.map((chartType) => {
const menuItem = chartType in menuGroup ? menuGroup[chartType] : void 0;
if (!menuItem) {
_warn(149, { group, chartType });
return null;
}
if (!isEnterprise && menuItem.enterprise) {
return null;
}
if (isRangeChart && menuItem.range) {
return menuItem;
}
if (isPivotChart && menuItem.pivot) {
return menuItem;
}
return null;
}).filter((menuItem) => menuItem != null);
if (menuItems.length === 0) {
return null;
}
return {
label: this.chartTranslation.translate(group),
items: menuItems
};
}).filter((menuGroup) => menuGroup != null);
for (const { label, items } of displayedMenuGroups) {
const groupComponent = this.createBean(
new AgGroupComponent({
title: label,
suppressEnabledCheckbox: true,
enabled: true,
suppressOpenCloseIcons: true,
cssIdentifier: "charts-settings",
direction: "horizontal",
suppressKeyboardNavigation: true
})
);
for (const menuItem of items) {
const { miniChart: MiniClass, chartType } = menuItem.icon;
const miniWrapper = document.createElement("div");
miniWrapper.classList.add("ag-chart-mini-thumbnail");
miniWrapper.setAttribute("tabindex", "0");
miniWrapper.setAttribute("role", "button");
const miniClassChartType = chartType;
const listener = () => {
this.chartController.setChartType(miniClassChartType);
this.updateSelectedMiniChart();
};
this.addManagedListeners(miniWrapper, {
click: listener,
keydown: (event) => {
if (event.key == KeyCode.ENTER || event.key === KeyCode.SPACE) {
event.preventDefault();
listener();
}
}
});
this.wrappers.set(miniClassChartType, miniWrapper);
this.createBean(
new MiniClass(miniWrapper, this.beans.agChartsExports, this.fills, this.strokes, this.isCustomTheme)
);
groupComponent.addItem(miniWrapper);
}
eGui.appendChild(groupComponent.getGui());
}
this.updateSelectedMiniChart();
}
updateSelectedMiniChart() {
const selectedChartType = this.chartController.getChartType();
this.wrappers.forEach((miniChart, miniChartType) => {
const selected = miniChartType === selectedChartType;
miniChart.classList.toggle("ag-selected", selected);
const chartName = this.chartTranslation.translate(getFullChartNameTranslationKey(miniChartType));
const ariaLabel = selected ? `${chartName}. ${this.chartTranslation.translate("ariaChartSelected")}` : chartName;
_setAriaLabel(miniChart, ariaLabel);
});
}
destroy() {
this.wrappers.clear();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/settings/chartSettingsPanel.ts
var ChartSettingsPanel = class extends Component {
constructor(chartController) {
super(
/* html */
`
`
);
this.chartController = chartController;
this.eMiniChartsContainer = RefPlaceholder;
this.eNavBar = RefPlaceholder;
this.eCardSelector = RefPlaceholder;
this.ePrevBtn = RefPlaceholder;
this.eNextBtn = RefPlaceholder;
this.miniChartsContainers = [];
this.cardItems = [];
this.activePaletteIndex = 0;
this.palettes = [];
this.themes = [];
}
postConstruct() {
this.resetPalettes();
const isRtl = this.gos.get("enableRtl");
this.ePrevBtn.insertAdjacentElement(
"afterbegin",
_createIconNoSpan(isRtl ? "chartsThemeNext" : "chartsThemePrevious", this.beans)
);
this.eNextBtn.insertAdjacentElement(
"afterbegin",
_createIconNoSpan(isRtl ? "chartsThemePrevious" : "chartsThemeNext", this.beans)
);
this.addManagedElementListeners(this.ePrevBtn, { click: () => this.setActivePalette(this.getPrev(), "left") });
this.addManagedElementListeners(this.eNextBtn, { click: () => this.setActivePalette(this.getNext(), "right") });
const reset = () => this.resetPalettes(true);
this.addManagedListeners(this.chartController, {
chartTypeChanged: reset,
chartApiUpdate: reset
});
this.scrollSelectedIntoView();
}
scrollSelectedIntoView() {
setTimeout(() => {
const isMiniChartsContainerVisible = (miniChartsContainers) => {
return !miniChartsContainers.getGui().classList.contains("ag-hidden");
};
const currentMiniChartContainer = this.miniChartsContainers.find(isMiniChartsContainerVisible);
const currentChart = currentMiniChartContainer.getGui().querySelector(".ag-selected");
if (currentChart) {
const parent = currentChart.offsetParent;
if (parent) {
this.eMiniChartsContainer.scrollTo(0, parent.offsetTop);
}
}
}, 250);
}
resetPalettes(forceReset) {
const palettes = this.chartController.getPalettes();
const chartGroups = this.gos.get("chartToolPanelsDef")?.settingsPanel?.chartGroupsDef;
if (_areEqual(palettes, this.palettes) && !forceReset || this.isAnimating) {
return;
}
this.palettes = palettes;
this.themes = this.chartController.getThemeNames();
this.activePaletteIndex = this.themes.findIndex((name) => name === this.chartController.getChartThemeName());
this.cardItems = [];
_clearElement(this.eCardSelector);
this.destroyMiniCharts();
const { themes } = this;
this.palettes.forEach((palette, index) => {
const isActivePalette = this.activePaletteIndex === index;
const { fills = [], strokes = [] } = palette;
const themeName = themes[index];
const isCustomTheme = !isStockTheme(themeName, this.beans.agChartsExports._Theme);
const miniChartsContainer = this.createBean(
new MiniChartsContainer(this.chartController, fills, strokes, isCustomTheme, chartGroups)
);
this.miniChartsContainers.push(miniChartsContainer);
this.eMiniChartsContainer.appendChild(miniChartsContainer.getGui());
this.addCardLink(index);
if (isActivePalette) {
miniChartsContainer.updateSelectedMiniChart();
} else {
miniChartsContainer.setDisplayed(false);
}
});
_setDisplayed(this.eNavBar, this.palettes.length > 1);
_radioCssClass(this.cardItems[this.activePaletteIndex], "ag-selected", "ag-not-selected");
}
addCardLink(index) {
const link = document.createElement("div");
link.classList.add("ag-chart-settings-card-item");
this.addManagedElementListeners(link, {
click: () => {
this.setActivePalette(index, index < this.activePaletteIndex ? "left" : "right");
}
});
this.eCardSelector.appendChild(link);
this.cardItems.push(link);
}
getPrev() {
let prev = this.activePaletteIndex - 1;
if (prev < 0) {
prev = this.palettes.length - 1;
}
return prev;
}
getNext() {
let next = this.activePaletteIndex + 1;
if (next >= this.palettes.length) {
next = 0;
}
return next;
}
setActivePalette(index, animationDirection) {
if (this.isAnimating || this.activePaletteIndex === index) {
return;
}
_radioCssClass(this.cardItems[index], "ag-selected", "ag-not-selected");
const currentPalette = this.miniChartsContainers[this.activePaletteIndex];
const currentGui = currentPalette.getGui();
const futurePalette = this.miniChartsContainers[index];
const nextGui = futurePalette.getGui();
currentPalette.updateSelectedMiniChart();
futurePalette.updateSelectedMiniChart();
const multiplier = animationDirection === "left" ? -1 : 1;
const final = nextGui.style.left = `${_getAbsoluteWidth(this.getGui()) * multiplier}px`;
this.activePaletteIndex = index;
this.isAnimating = true;
const animatingClass = "ag-animating";
futurePalette.setDisplayed(true);
currentPalette.addCss(animatingClass);
futurePalette.addCss(animatingClass);
this.chartController.setChartThemeName(this.themes[index]);
window.setTimeout(() => {
currentGui.style.left = `${-parseFloat(final)}px`;
nextGui.style.left = "0px";
}, 0);
window.setTimeout(() => {
this.isAnimating = false;
currentPalette.removeCss(animatingClass);
futurePalette.removeCss(animatingClass);
currentPalette.setDisplayed(false);
}, 300);
}
destroyMiniCharts() {
_clearElement(this.eMiniChartsContainer);
this.miniChartsContainers = this.destroyBeans(this.miniChartsContainers);
}
destroy() {
this.destroyMiniCharts();
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/tabbedChartMenu.ts
var TAB_DATA = "data";
var TAB_FORMAT = "format";
var TabbedChartMenu = class extends Component {
constructor(panels, chartMenuContext) {
super();
this.panels = panels;
this.chartMenuContext = chartMenuContext;
this.tabs = [];
}
wireBeans(beans) {
this.chartTranslation = beans.chartTranslation;
}
postConstruct() {
for (const panel of this.panels) {
const panelType = panel.replace("chart", "").toLowerCase();
const panelComp = this.createPanel(panelType);
const tabItem = this.createTab(panel, panelType, panelComp);
this.tabs.push(tabItem);
this.addDestroyFunc(() => this.destroyBean(panelComp));
}
this.tabbedLayout = new AgTabbedLayout({
items: this.tabs,
cssClass: "ag-chart-tabbed-menu",
keepScrollPosition: true,
suppressFocusBodyOnOpen: true,
suppressTrapFocus: true,
enableCloseButton: true,
closeButtonAriaLabel: this.chartTranslation.translate("ariaChartMenuClose"),
onCloseClicked: () => {
this.eventSource?.focus({ preventScroll: true });
this.dispatchLocalEvent({ type: "closed" });
}
});
this.createBean(this.tabbedLayout);
}
createTab(name, title, panelComp) {
const eWrapperDiv = _createElement({ tag: "div", cls: `ag-chart-tab ag-chart-${title}` });
this.createBean(panelComp);
eWrapperDiv.appendChild(panelComp.getGui());
const translatedTitle = this.chartTranslation.translate(title);
const titleEl = _createElement({ tag: "div", children: translatedTitle });
return {
title: titleEl,
titleLabel: translatedTitle,
bodyPromise: AgPromise.resolve(eWrapperDiv),
getScrollableContainer: () => {
const scrollableContainer = eWrapperDiv.querySelector(".ag-scrollable-container");
return scrollableContainer || eWrapperDiv;
},
name
};
}
showTab(tab) {
const tabItem = this.tabs[tab];
this.tabbedLayout.showItem(tabItem);
}
getGui() {
return this.tabbedLayout?.getGui();
}
showMenu(eventSource, suppressFocus) {
this.eventSource = eventSource;
if (!suppressFocus) {
this.tabbedLayout?.focusHeader(true);
}
}
destroy() {
if (this.parentComponent?.isAlive()) {
this.destroyBean(this.parentComponent);
}
super.destroy();
}
createPanel(panelType) {
switch (panelType) {
case TAB_DATA:
return new ChartDataPanel(this.chartMenuContext);
case TAB_FORMAT:
return new FormatPanel(this.chartMenuContext);
default:
return new ChartSettingsPanel(this.chartMenuContext.chartController);
}
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/menu/chartMenu.ts
var ChartMenu = class extends Component {
constructor(eChartContainer, eMenuPanelContainer, chartMenuContext) {
super(
/* html */
``
);
this.eChartContainer = eChartContainer;
this.eMenuPanelContainer = eMenuPanelContainer;
this.chartMenuContext = chartMenuContext;
this.buttons = {
chartLink: { iconName: "linked", callback: () => this.chartMenuSvc.toggleLinked(this.chartMenuContext) },
chartUnlink: {
iconName: "unlinked",
callback: () => this.chartMenuSvc.toggleLinked(this.chartMenuContext)
},
chartDownload: {
iconName: "chartsDownload",
callback: () => this.chartMenuSvc.downloadChart(this.chartMenuContext)
},
chartMenu: { iconName: "chartsMenu", callback: (eventSource) => this.showMenuList(eventSource) }
};
this.panels = [];
this.menuVisible = false;
this.chartController = chartMenuContext.chartController;
}
wireBeans(beans) {
this.chartMenuSvc = beans.chartMenuSvc;
this.chartMenuListFactory = beans.chartMenuListFactory;
}
postConstruct() {
this.chartToolbar = this.createManagedBean(new ChartToolbar());
this.getGui().appendChild(this.chartToolbar.getGui());
this.refreshToolbarAndPanels();
this.addManagedEventListeners({
chartCreated: (e) => {
if (e.chartId === this.chartController.getChartId()) {
const showDefaultToolPanel = Boolean(this.gos.get("chartToolPanelsDef")?.defaultToolPanel);
if (showDefaultToolPanel) {
this.showMenu({ panel: this.defaultPanel, suppressFocus: true });
}
}
}
});
this.addManagedListeners(this.chartController, {
chartLinkedChanged: this.refreshToolbarAndPanels.bind(this)
});
this.refreshMenuClasses();
this.addManagedListeners(this.chartController, { chartApiUpdate: this.refreshToolbarAndPanels.bind(this) });
}
isVisible() {
return this.menuVisible;
}
getExtraPaddingDirections() {
return ["chartMenu", "chartLink", "chartUnlink", "chartDownload"].some(
(v) => this.chartToolbarOptions.includes(v)
) ? ["top"] : [];
}
refreshToolbarAndPanels() {
this.initToolbarOptionsAndPanels();
this.updateToolbar();
}
initToolbarOptionsAndPanels() {
const { panels, defaultPanel } = this.chartMenuSvc.getChartToolPanels(this.chartController);
this.panels = panels;
this.defaultPanel = defaultPanel;
this.chartToolbarOptions = this.chartMenuSvc.getChartToolbarOptions();
}
updateToolbar() {
const buttons = this.chartToolbarOptions.map((buttonName) => {
const { iconName, callback } = this.buttons[buttonName];
return {
buttonName,
iconName,
callback
};
});
this.chartToolbar.updateParams({ buttons });
}
createMenuPanel(defaultTab) {
const menuPanel = this.menuPanel = this.createBean(
new AgPanel({
height: "100%",
closable: true,
hideTitleBar: true,
cssIdentifier: "chart-menu"
})
);
menuPanel.setParentComponent(this);
this.eMenuPanelContainer.appendChild(menuPanel.getGui());
this.tabbedMenu = this.createBean(new TabbedChartMenu(this.panels, this.chartMenuContext));
this.addManagedListeners(this.tabbedMenu, {
closed: () => {
this.hideMenu();
}
});
this.addManagedListeners(menuPanel, { destroyed: () => this.destroyBean(this.tabbedMenu) });
return new AgPromise((res) => {
window.setTimeout(() => {
menuPanel.setBodyComponent(this.tabbedMenu);
this.tabbedMenu.showTab(defaultTab);
res(menuPanel);
}, 100);
});
}
showContainer(eventSource, suppressFocus) {
if (!this.menuPanel) {
return;
}
this.menuVisible = true;
this.refreshMenuClasses();
this.tabbedMenu.showMenu(eventSource, suppressFocus);
}
showMenu(params) {
const { panel, eventSource, suppressFocus } = params ?? {};
if (this.menuPanel && !panel) {
this.showContainer(eventSource, suppressFocus);
} else {
const menuPanel = panel || this.defaultPanel;
let tab = this.panels.indexOf(menuPanel);
if (tab < 0) {
_warn(143, { panel });
tab = this.panels.indexOf(this.defaultPanel);
}
if (this.menuPanel) {
this.tabbedMenu.showTab(tab);
this.showContainer(eventSource, suppressFocus);
} else {
this.createMenuPanel(tab).then(() => this.showContainer(eventSource, suppressFocus));
}
}
}
hideMenu() {
this.menuVisible = false;
this.refreshMenuClasses();
}
refreshMenuClasses() {
this.eChartContainer.classList.toggle("ag-chart-menu-visible", this.menuVisible);
this.eChartContainer.classList.toggle("ag-chart-menu-hidden", !this.menuVisible);
}
showMenuList(eventSource) {
this.chartMenuListFactory.showMenuList({
eventSource,
showMenu: () => this.showMenu({ eventSource }),
chartMenuContext: this.chartMenuContext,
closeOnElementClick: this.eChartContainer
});
}
destroy() {
super.destroy();
if (this.menuPanel?.isAlive()) {
this.destroyBean(this.menuPanel);
}
if (this.tabbedMenu?.isAlive()) {
this.destroyBean(this.tabbedMenu);
}
}
};
// packages/ag-grid-enterprise/src/charts/chartComp/services/chartOptionsService.ts
var CARTESIAN_AXIS_TYPES = ["number", "category", "time", "grouped-category"];
var POLAR_AXIS_TYPES = ["angle-category", "angle-number", "radius-category", "radius-number"];
var VALID_AXIS_TYPES = [...CARTESIAN_AXIS_TYPES, ...POLAR_AXIS_TYPES];
var ChartOptionsService = class extends BeanStub {
constructor(chartController) {
super();
this.chartController = chartController;
}
getChartThemeOverridesProxy() {
return {
getValue: (expression) => this.getChartOption(expression),
setValue: (expression, value) => this.setChartThemeOverrides([{ expression, value }]),
setValues: (properties) => this.setChartThemeOverrides(properties)
};
}
getAxisThemeOverridesProxy() {
return {
getValue: (expression) => this.getAxisProperty(expression),
setValue: (expression, value) => this.setAxisThemeOverrides([{ expression, value }]),
setValues: (properties) => this.setAxisThemeOverrides(properties)
};
}
getCartesianAxisOptionsProxy(axisType) {
return {
getValue: (expression) => this.getCartesianAxisProperty(axisType, expression),
setValue: (expression, value) => this.setCartesianAxisOptions(axisType, [{ expression, value }]),
setValues: (properties) => this.setCartesianAxisOptions(axisType, properties),
clearValue: (parentExpression, key) => this.clearCartesianAxisOptions(axisType, parentExpression, key)
};
}
getCartesianAxisThemeOverridesProxy(axisType) {
return {
getValue: (expression) => this.getCartesianAxisProperty(axisType, expression),
setValue: (expression, value) => this.setCartesianAxisThemeOverrides(axisType, [{ expression, value }]),
setValues: (properties) => this.setCartesianAxisThemeOverrides(axisType, properties)
};
}
getCartesianAxisAppliedThemeOverridesProxy(axisType) {
return {
getValue: (expression) => this.getCartesianAxisThemeOverride(
axisType,
// Allow the caller to specify a wildcard expression to retrieve the whole set of overrides
expression === "*" ? null : expression
),
setValue: (expression, value) => this.setCartesianAxisThemeOverrides(
axisType,
// Allow the caller to specify a wildcard expression to set the whole set of overrides
[{ expression: expression === "*" ? null : expression, value }]
),
setValues: (properties) => this.setCartesianAxisThemeOverrides(axisType, properties)
};
}
getSeriesOptionsProxy(getSelectedSeries) {
return {
getValue: (expression, calculated) => this.getSeriesOption(getSelectedSeries(), expression, calculated),
setValue: (expression, value) => this.setSeriesOptions(getSelectedSeries(), [{ expression, value }]),
setValues: (properties) => this.setSeriesOptions(getSelectedSeries(), properties)
};
}
/**
* Determine the set of theme overrides that should be retained when transitioning from one chart type to another.
*/
getPersistedChartThemeOverrides(existingChartOptions, existingAxes, existingChartType, targetChartType) {
const retainedThemeOverrideKeys = this.getRetainedChartThemeOverrideKeys(existingChartType, targetChartType);
const retainedChartAxisThemeOverrideKeys = this.getRetainedChartAxisThemeOverrideKeys(
null,
existingChartType,
targetChartType
);
const targetChartOptions = this.createChartOptions();
for (const expression of retainedThemeOverrideKeys) {
const value = this.retrieveChartOptionsThemeOverride(existingChartOptions, existingChartType, expression);
if (value !== void 0) {
this.assignChartOptionsThemeOverride(targetChartOptions, targetChartType, expression, value);
}
}
if (existingAxes) {
this.assignPersistedAxisOverrides({
existingAxes,
retainedChartAxisThemeOverrideKeys,
existingChartOptions,
targetChartOptions,
existingChartType,
targetChartType
});
}
return targetChartOptions.theme.overrides;
}
assignPersistedAxisOverrides(params) {
const {
existingAxes,
retainedChartAxisThemeOverrideKeys,
existingChartOptions,
targetChartOptions,
existingChartType,
targetChartType
} = params;
for (const { expression, targetAxisTypes } of retainedChartAxisThemeOverrideKeys) {
for (const existingAxisType of existingAxes.map((axis) => axis.type)) {
const value = this.retrieveChartOptionsThemeOverride(
existingChartOptions,
existingChartType,
["axes", existingAxisType, expression].join(".")
);
if (value !== void 0) {
for (const targetAxisType of targetAxisTypes) {
this.assignChartOptionsThemeOverride(
targetChartOptions,
targetChartType,
["axes", targetAxisType, expression].join("."),
value
);
}
}
}
}
}
getRetainedChartThemeOverrideKeys(existingChartType, targetChartType) {
const UNIVERSAL_PERSISTED_THEME_OVERRIDES = ["animation"];
const PERSISTED_CARTESIAN_CHART_THEME_OVERRIDES = ["zoom", "navigator"];
const chartSpecificThemeOverrideKeys = ((previousChartType, updatedChartType) => {
const expressions = new Array();
if (isCartesian(getSeriesType(previousChartType)) && isCartesian(getSeriesType(updatedChartType))) {
expressions.push(...PERSISTED_CARTESIAN_CHART_THEME_OVERRIDES);
}
return expressions;
})(existingChartType, targetChartType);
return [...UNIVERSAL_PERSISTED_THEME_OVERRIDES, ...chartSpecificThemeOverrideKeys];
}
getRetainedChartAxisThemeOverrideKeys(axisType, existingChartType, targetChartType) {
if (isCartesian(getSeriesType(existingChartType)) && isCartesian(getSeriesType(targetChartType))) {
const retainedKeys = this.getRetainedCartesianAxisThemeOverrideKeys(axisType);
return retainedKeys.map((expression) => ({ expression, targetAxisTypes: CARTESIAN_AXIS_TYPES }));
}
return [];
}
getRetainedCartesianAxisThemeOverrideKeys(axisType) {
const axisPositionSuffixes = axisType === "xAxis" ? ["", ".top", ".bottom"] : axisType === "yAxis" ? ["", ".left", ".right"] : ["", ".left", ".right", ".top", ".bottom"];
const PERSISTED_CARTESIAN_AXIS_THEME_OVERRIDES = ["crosshair"];
const expressions = new Array();
for (const expression of PERSISTED_CARTESIAN_AXIS_THEME_OVERRIDES) {
for (const axisPositionSuffix of axisPositionSuffixes) {
expressions.push(`${expression}${axisPositionSuffix}`);
}
}
return expressions;
}
getChartOption(expression) {
return get(this.getChart(), expression, void 0);
}
setChartThemeOverrides(properties) {
const chartType = this.getChartType();
const chartOptions = this.createChartOptions();
for (const { expression, value } of properties) {
this.assignChartOptionsThemeOverride(chartOptions, chartType, expression, value);
}
this.applyChartOptions(chartOptions);
}
applyChartOptions(chartOptions, options) {
if (Object.keys(chartOptions).length === 0) {
return;
}
this.updateChart(chartOptions);
const shouldRaiseEvent = !options?.silent;
if (shouldRaiseEvent) {
this.raiseChartOptionsChangedEvent();
}
}
awaitChartOptionUpdate(func) {
const chart = this.chartController.getChartProxy().getChart();
chart.waitForUpdate().then(() => func()).catch((e) => _error(108, { e }));
}
getAxisProperty(expression) {
return get(this.getChart().axes?.x, expression, void 0);
}
setAxisThemeOverrides(properties) {
const chart = this.getChart();
const chartType = this.getChartType();
const chartOptions = this.createChartOptions();
for (const { expression, value } of properties) {
const relevantAxes = Object.values(chart.axes ?? {}).filter((axis) => {
const parts = expression.split(".");
let current = axis;
for (const part of parts) {
if (!(part in current)) {
return false;
}
current = current[part];
}
return true;
});
if (!relevantAxes) {
continue;
}
for (const axis of relevantAxes) {
if (!this.isValidAxisType(axis)) {
continue;
}
this.assignChartAxisThemeOverride(chartOptions, chartType, axis.type, null, expression, value);
}
}
this.applyChartOptions(chartOptions);
}
getCartesianAxisProperty(axisType, expression) {
const axes = this.getChartAxes();
const axis = this.getCartesianAxis(axes, axisType);
return get(axis, expression, void 0);
}
getCartesianAxisThemeOverride(axisType, expression) {
const axes = this.getChartAxes();
const chartAxis = this.getCartesianAxis(axes, axisType);
if (!chartAxis || !this.isValidAxisType(chartAxis)) {
return void 0;
}
const chartType = this.getChartType();
const chartOptions = this.getChart().getOptions();
return this.retrieveChartAxisThemeOverride(
chartOptions,
chartType,
chartAxis.type,
axisType === "yAxis" ? ["left", "right"] : ["bottom", "top"],
expression
);
}
setCartesianAxisThemeOverrides(axisType, properties) {
const axes = this.getChartAxes();
const chartAxis = this.getCartesianAxis(axes, axisType);
if (!chartAxis || !this.isValidAxisType(chartAxis)) {
return;
}
const chartType = this.getChartType();
const chartOptions = this.createChartOptions();
for (const { expression, value } of properties) {
this.assignChartAxisThemeOverride(
chartOptions,
chartType,
chartAxis.type,
axisType === "yAxis" ? ["left", "right"] : ["bottom", "top"],
expression,
value
);
}
this.applyChartOptions(chartOptions);
}
setCartesianAxisOptions(axisType, properties) {
this.updateCartesianAxisOptions(axisType, (chartOptions) => {
const axisId = axisType === "yAxis" ? "y" : "x";
for (const { expression, value } of properties) {
this.assignChartOption(chartOptions, `axes.${axisId}.${expression}`, value);
}
});
}
clearCartesianAxisOptions(axisType, parentExpression, key) {
this.updateCartesianAxisOptions(axisType, (chartOptions) => {
const axisId = axisType === "yAxis" ? "y" : "x";
this.clearChartOption(chartOptions, `axes.${axisId}.${parentExpression}`, key);
});
}
updateCartesianAxisOptions(axisType, updateFunc) {
const existingChartOptions = this.getChart().getOptions();
const axisOptions = "axes" in existingChartOptions ? existingChartOptions.axes : void 0;
if (!existingChartOptions || !axisOptions) {
return;
}
const axes = this.getChartAxes();
const chartAxis = this.getCartesianAxis(axes, axisType);
if (!chartAxis) {
return;
}
const chartOptions = this.createChartOptions();
chartOptions.axes = axisOptions;
updateFunc(chartOptions, chartAxis, existingChartOptions);
this.applyChartOptions(chartOptions);
}
setCartesianCategoryAxisType(axisType, value) {
this.updateCartesianAxisOptions(axisType, (chartOptions, chartAxis, existingChartOptions) => {
const chartType = this.getChartType();
this.assignPersistedAxisOverrides({
existingAxes: [chartAxis],
retainedChartAxisThemeOverrideKeys: this.getRetainedChartAxisThemeOverrideKeys(
axisType,
chartType,
chartType
),
existingChartOptions,
targetChartOptions: chartOptions,
existingChartType: chartType,
targetChartType: chartType
});
this.assignChartOption(chartOptions, `axes.x.type`, value);
this.chartController.setCategoryAxisType(value);
});
}
getCartesianAxis(axes, axisType) {
if (axes.length < 2) {
return void 0;
}
switch (axisType) {
case "xAxis":
return axes[0].direction === "x" ? axes[0] : axes[1];
case "yAxis":
return axes[1].direction === "y" ? axes[1] : axes[0];
}
}
getSeriesOption(seriesType, expression, calculated) {
const series = this.getChart().series.find((s2) => isMatchingSeries(seriesType, s2));
return get(calculated ? series : series?.properties.toJson(), expression, void 0);
}
setSeriesOptions(seriesType, properties) {
const chartOptions = this.createChartOptions();
for (const { expression, value } of properties) {
this.assignChartOptionsSeriesThemeOverride(chartOptions, seriesType, `series.${expression}`, value);
}
this.applyChartOptions(chartOptions);
}
getPairedMode() {
return this.chartController.getChartProxy().isPaired();
}
setPairedMode(paired) {
this.chartController.getChartProxy().setPaired(paired);
}
getChartAxes() {
const chart = this.getChart();
return Object.values(chart.axes ?? {});
}
retrieveChartAxisThemeOverride(chartOptions, chartType, axisType, axisPositions, expression) {
if (axisPositions) {
for (const axisPosition of axisPositions) {
const value = this.retrieveChartOptionsThemeOverride(
chartOptions,
chartType,
["axes", axisType, axisPosition, ...expression ? [expression] : []].join(".")
);
if (value === void 0) {
continue;
}
return value;
}
} else {
return this.retrieveChartOptionsThemeOverride(
chartOptions,
chartType,
["axes", axisType, ...expression ? [expression] : []].join(".")
);
}
}
assignChartAxisThemeOverride(chartOptions, chartType, axisType, axisPositions, expression, value) {
if (axisPositions) {
for (const axisPosition of axisPositions) {
this.assignChartOptionsThemeOverride(
chartOptions,
chartType,
["axes", axisType, axisPosition, ...expression ? [expression] : []].join("."),
value
);
}
} else {
this.assignChartOptionsThemeOverride(
chartOptions,
chartType,
["axes", axisType, ...expression ? [expression] : []].join("."),
value
);
}
}
isValidAxisType(chartAxis) {
return VALID_AXIS_TYPES.includes(chartAxis.type);
}
getChartType() {
return this.chartController.getChartType();
}
getChart() {
return this.chartController.getChartProxy().getChart();
}
updateChart(chartOptions) {
const chartRef = this.chartController.getChartProxy().getChartRef();
chartRef.skipAnimations();
chartRef.updateDelta(chartOptions);
}
createChartOptions() {
const chartOptions = {
theme: {
overrides: {}
}
};
return chartOptions;
}
retrieveChartOptionsThemeOverride(chartOptions, chartType, expression) {
const chartSeriesTypes = this.getChartThemeOverridesSeriesTypeKeys(chartType);
for (const seriesType of chartSeriesTypes) {
const value = this.retrieveChartOptionsSeriesThemeOverride(chartOptions, seriesType, expression);
if (value === void 0) {
continue;
}
return value;
}
return void 0;
}
assignChartOptionsThemeOverride(chartOptions, chartType, expression, value) {
const chartSeriesTypes = this.getChartThemeOverridesSeriesTypeKeys(chartType);
for (const seriesType of chartSeriesTypes) {
this.assignChartOptionsSeriesThemeOverride(chartOptions, seriesType, expression, value);
}
}
retrieveChartOptionsSeriesThemeOverride(chartOptions, seriesType, expression) {
return this.retrieveChartOption(
chartOptions,
["theme", "overrides", seriesType, ...expression ? [expression] : []].join(".")
);
}
assignChartOptionsSeriesThemeOverride(chartOptions, seriesType, expression, value) {
this.assignChartOption(
chartOptions,
["theme", "overrides", seriesType, ...expression ? [expression] : []].join("."),
value
);
}
getChartThemeOverridesSeriesTypeKeys(chartType) {
const chartSeriesTypes = this.chartController.getChartSeriesTypes(chartType);
if (this.chartController.isComboChart()) {
chartSeriesTypes.push("common");
}
return chartSeriesTypes;
}
retrieveChartOption(chartOptions, expression) {
return get(chartOptions, expression, void 0);
}
assignChartOption(chartOptions, expression, value) {
set(chartOptions, expression, value);
}
clearChartOption(chartOptions, parentExpression, key) {
const parentObject = get(chartOptions, parentExpression, void 0);
if (parentObject) {
delete parentObject[key];
}
}
raiseChartOptionsChangedEvent() {
const chartModel = this.chartController.getChartModel();
this.eventSvc.dispatchEvent({
type: "chartOptionsChanged",
chartId: chartModel.chartId,
chartType: chartModel.chartType,
chartThemeName: this.chartController.getChartThemeName(),
chartOptions: chartModel.chartOptions
});
}
};
function isMatchingSeries(seriesType, series) {
return isSeriesType(seriesType) && series.type === seriesType;
}
// packages/ag-grid-enterprise/src/charts/chartComp/gridChartComp.ts
var GridChartComp = class extends Component {
constructor(params) {
super(
/* html */
`
`
);
this.eChart = RefPlaceholder;
this.eWrapper = RefPlaceholder;
this.eChartContainer = RefPlaceholder;
this.eMenuContainer = RefPlaceholder;
this.eEmpty = RefPlaceholder;
this.params = params;
}
wireBeans(beans) {
this.crossFilterService = beans.chartCrossFilterSvc;
this.chartTranslation = beans.chartTranslation;
this.chartMenuSvc = beans.chartMenuSvc;
this.focusSvc = beans.focusSvc;
this.popupSvc = beans.popupSvc;
this.enterpriseChartProxyFactory = beans.enterpriseChartProxyFactory;
this.environment = beans.environment;
}
postConstruct() {
const modelParams = {
...this.params,
chartType: getCanonicalChartType(this.params.chartType),
chartThemeName: this.getThemeName()
};
const isRtl = this.gos.get("enableRtl");
this.eWrapper.classList.add(isRtl ? "ag-rtl" : "ag-ltr");
const model = this.createBean(new ChartDataModel(modelParams));
this.chartController = this.createManagedBean(new ChartController(model));
this.chartOptionsService = this.createManagedBean(new ChartOptionsService(this.chartController));
this.validateCustomThemes();
this.createChart();
if (this.params.insideDialog) {
this.addDialog();
} else {
this.addManagedEventListeners({
stylesChanged: this.updateTheme.bind(this)
});
this.updateTheme();
}
this.addMenu();
this.addManagedElementListeners(this.getGui(), { focusin: this.setActiveChartCellRange.bind(this) });
this.addManagedListeners(this.chartController, { chartModelUpdate: this.update.bind(this) });
this.addManagedPropertyListeners(
["chartThemeOverrides", "chartThemes"],
this.reactivePropertyUpdate.bind(this)
);
this.update();
this.raiseChartCreatedEvent();
}
updateTheme() {
this.environment.applyThemeClasses(this.getGui());
}
createChart() {
let chartInstance = void 0;
if (this.chartProxy) {
chartInstance = this.chartProxy.destroy({ keepChartInstance: true });
}
const crossFilterCallback = (event, reset) => {
const ctx = this.params.crossFilteringContext;
ctx.lastSelectedChartId = reset ? "" : this.chartController.getChartId();
if (reset) {
this.params.crossFilteringResetCallback();
}
this.crossFilterService.filter(event, reset);
};
const chartType = this.chartController.getChartType();
const chartProxyParams = {
agChartsExports: this.beans.agChartsExports,
chartType,
chartInstance,
getChartThemeName: this.getChartThemeName.bind(this),
getChartThemes: this.getChartThemes.bind(this),
customChartThemes: this.gos.get("customChartThemes"),
styleNonce: this.gos.get("styleNonce"),
getGridOptionsChartThemeOverrides: () => this.getGridOptionsChartThemeOverrides(),
getExtraPaddingDirections: () => this.chartMenu?.getExtraPaddingDirections() ?? [],
apiChartThemeOverrides: this.params.chartThemeOverrides,
crossFiltering: this.params.crossFiltering ?? false,
crossFilterCallback,
parentElement: this.eChart,
grouping: this.chartController.isGrouping(),
chartThemeToRestore: this.params.chartThemeName,
chartOptionsToRestore: this.params.chartOptionsToRestore,
chartPaletteToRestore: this.params.chartPaletteToRestore,
seriesChartTypes: this.chartController.getSeriesChartTypes(),
translate: (toTranslate) => this.chartTranslation.translate(toTranslate),
context: _addGridCommonParams(this.gos, {})
};
this.params.chartOptionsToRestore = void 0;
this.chartType = chartType;
this.chartProxy = this.createChartProxy(chartProxyParams);
if (!this.chartProxy) {
_warn(138, { chartType: chartProxyParams.chartType });
return;
}
this.chartController.setChartProxy(this.chartProxy);
this.createMenuContext();
}
createMenuContext() {
if (this.chartMenuContext) {
return;
}
const chartMenuParamsFactory = this.createManagedBean(
new ChartMenuParamsFactory(this.chartOptionsService.getChartThemeOverridesProxy())
);
const chartAxisMenuParamsFactory = this.createManagedBean(
new ChartMenuParamsFactory(this.chartOptionsService.getAxisThemeOverridesProxy())
);
this.chartMenuContext = {
chartController: this.chartController,
chartOptionsService: this.chartOptionsService,
chartMenuParamsFactory,
chartAxisMenuParamsFactory
};
}
getChartThemeName() {
return this.chartController.getChartThemeName();
}
getChartThemes() {
return this.chartController.getThemeNames();
}
getGridOptionsChartThemeOverrides() {
return this.gos.get("chartThemeOverrides");
}
createChartProxy(chartProxyParams) {
const { chartType } = chartProxyParams;
switch (chartType) {
case "column":
case "bar":
case "groupedColumn":
case "stackedColumn":
case "normalizedColumn":
case "groupedBar":
case "stackedBar":
case "normalizedBar":
return new BarChartProxy(chartProxyParams);
case "pie":
case "donut":
case "doughnut":
return new PieChartProxy(chartProxyParams);
case "area":
case "stackedArea":
case "normalizedArea":
return new AreaChartProxy(chartProxyParams);
case "line":
case "stackedLine":
case "normalizedLine":
return new LineChartProxy(chartProxyParams);
case "scatter":
case "bubble":
return new ScatterChartProxy(chartProxyParams);
case "columnLineCombo":
case "areaColumnCombo":
case "customCombo":
return new ComboChartProxy(chartProxyParams);
}
const enterpriseChartProxy = this.enterpriseChartProxyFactory?.createChartProxy(chartProxyParams);
if (!enterpriseChartProxy) {
throw _errMsg(251, { chartType });
}
return enterpriseChartProxy;
}
addDialog() {
const title = this.chartTranslation.translate(this.params.pivotChart ? "pivotChartTitle" : "rangeChartTitle");
const { width, height } = this.getBestDialogSize();
const afterGuiAttached = this.params.focusDialogOnOpen ? () => setTimeout(() => _focusInto(this.getGui())) : void 0;
this.chartDialog = new Dialog({
resizable: true,
movable: true,
maximizable: true,
title,
width,
height,
component: this,
centered: true,
closable: true,
afterGuiAttached,
postProcessPopupParams: {
type: "chart"
}
});
this.createBean(this.chartDialog);
this.chartDialog.addEventListener("destroyed", () => {
this.destroy();
this.chartMenuSvc.hideAdvancedSettings();
const lastFocusedCell = this.focusSvc.getFocusedCell();
setTimeout(() => {
if (this.focusSvc.isAlive()) {
if (lastFocusedCell) {
this.focusSvc.setFocusedCell({ ...lastFocusedCell, forceBrowserFocus: true });
} else {
_focusGridInnerElement(this.beans);
}
}
});
});
}
getBestDialogSize() {
const popupParent = this.popupSvc.getPopupParent();
const maxWidth = _getAbsoluteWidth(popupParent) * 0.75;
const maxHeight = _getAbsoluteHeight(popupParent) * 0.75;
const ratio = 0.553;
const chart = this.chartProxy.getChart();
let width = this.params.insideDialog ? 850 : chart.width;
let height = this.params.insideDialog ? 470 : chart.height;
if (width > maxWidth || height > maxHeight) {
width = Math.min(width, maxWidth);
height = Math.round(width * ratio);
if (height > maxHeight) {
height = maxHeight;
width = Math.min(width, Math.round(height / ratio));
}
}
return { width, height };
}
addMenu() {
if (!this.params.crossFiltering) {
this.chartMenu = this.createBean(
new ChartMenu(this.eChartContainer, this.eMenuContainer, this.chartMenuContext)
);
this.eChartContainer.appendChild(this.chartMenu.getGui());
}
}
update(params) {
if (params?.chartId) {
const validUpdate = this.chartController.update(params);
if (!validUpdate) {
return;
}
}
const updatedChartType = this.chartTypeChanged(params);
const persistedThemeOverrides = updatedChartType || this.chartEmpty ? ((updatedChartType2) => {
const currentChartType = this.chartType;
const targetChartType = updatedChartType2;
const existingChartInstance = this.chartProxy.getChart();
const existingChartOptions = existingChartInstance?.getOptions();
const existingAxes = Object.values(existingChartInstance?.axes ?? {});
return this.chartOptionsService.getPersistedChartThemeOverrides(
existingChartOptions,
existingAxes,
currentChartType,
targetChartType ?? currentChartType
);
})(updatedChartType) : void 0;
if (updatedChartType) {
this.createChart();
}
if (persistedThemeOverrides && params?.chartThemeOverrides) {
_mergeDeep(persistedThemeOverrides, params.chartThemeOverrides);
}
const updatedThemeOverrides = persistedThemeOverrides ?? params?.chartThemeOverrides;
this.updateChart(updatedThemeOverrides);
if (params?.chartId) {
this.chartProxy.getChart().waitForUpdate().then(() => {
this.chartController.raiseChartApiUpdateEvent();
});
}
}
updateChart(updatedOverrides) {
const { chartProxy } = this;
const selectedCols = this.chartController.getSelectedValueColState();
const data = this.chartController.getChartData();
const chartEmpty = this.handleEmptyChart(data, selectedCols.length);
this.chartEmpty = chartEmpty;
if (chartEmpty) {
if (updatedOverrides) {
this.chartController.updateThemeOverrides(updatedOverrides);
}
return;
}
const chartUpdateParams = this.chartController.getChartUpdateParams(updatedOverrides);
chartProxy.update(chartUpdateParams);
this.chartProxy.getChart().waitForUpdate().then(() => {
this.chartController.raiseChartUpdatedEvent();
});
}
chartTypeChanged(updateParams) {
const [currentType, updatedChartType] = [this.chartController.getChartType(), updateParams?.chartType];
const targetChartType = updatedChartType ? getCanonicalChartType(updatedChartType) : void 0;
if (this.chartType !== currentType) {
return targetChartType ?? currentType;
}
if (targetChartType && currentType !== targetChartType) {
return targetChartType;
}
return null;
}
getChartModel() {
return this.chartController.getChartModel();
}
getChartImageDataURL(fileFormat) {
return this.chartProxy.getChartImageDataURL(fileFormat);
}
handleEmptyChart(data, numFields) {
const pivotModeDisabled = this.chartController.isPivotChart() && !this.chartController.isPivotMode();
const chartType = this.chartController.getChartType();
let minFieldsRequired = 1;
if (this.chartController.isActiveXYChart()) {
minFieldsRequired = chartType === "bubble" ? 3 : 2;
} else if (isHierarchical(getSeriesType(chartType))) {
minFieldsRequired = 0;
}
const isEmptyChart = numFields < minFieldsRequired || data.length === 0;
if (this.eChart) {
const isEmpty = pivotModeDisabled || isEmptyChart;
_setDisplayed(this.eChart, !isEmpty);
_setDisplayed(this.eEmpty, isEmpty);
}
if (pivotModeDisabled) {
this.eEmpty.textContent = this.chartTranslation.translate("pivotChartRequiresPivotMode");
return true;
}
if (isEmptyChart) {
this.eEmpty.textContent = this.chartTranslation.translate("noDataToChart");
return true;
}
return false;
}
downloadChart(dimensions, fileName, fileFormat) {
this.chartProxy.downloadChart(dimensions, fileName, fileFormat);
}
openChartToolPanel(panel) {
const menuPanel = panel ? CHART_TOOL_PANEL_MENU_OPTIONS[panel] : panel;
this.chartMenu.showMenu({ panel: menuPanel });
}
closeChartToolPanel() {
this.chartMenu.hideMenu();
}
getChartId() {
return this.chartController.getChartId();
}
getUnderlyingChart() {
return this.chartProxy.getChartRef();
}
crossFilteringReset() {
this.chartProxy.crossFilteringReset();
}
setMaximized(maximized) {
this.chartDialog?.setMaximized(maximized);
}
setActiveChartCellRange(focusEvent) {
if (this.getGui().contains(focusEvent.relatedTarget)) {
return;
}
this.chartController.setChartRange(true);
}
getThemeName() {
const availableChartThemes = this.gos.get("chartThemes") || DEFAULT_THEMES;
if (availableChartThemes.length === 0) {
throw new Error(_errMsg(254));
}
const { chartThemeName } = this.params;
return availableChartThemes.includes(chartThemeName) ? chartThemeName : availableChartThemes[0];
}
getAllKeysInObjects(objects) {
const allValues = {};
for (const obj of objects.filter((obj2) => obj2 != null)) {
for (const key of Object.keys(obj)) {
allValues[key] = null;
}
}
return Object.keys(allValues);
}
validateCustomThemes() {
const suppliedThemes = this.getChartThemes();
const customChartThemes = this.gos.get("customChartThemes");
if (customChartThemes) {
for (const customThemeName of this.getAllKeysInObjects([customChartThemes])) {
if (!suppliedThemes.includes(customThemeName)) {
_warn(139, { customThemeName });
}
}
}
}
reactivePropertyUpdate() {
this.chartController.setChartThemeName(this.getThemeName(), true);
const chartId = this.getChartId();
const modelType = this.chartController.isCrossFilterChart() ? "crossFilter" : this.getChartModel().modelType;
const chartThemeOverrides = this.gos.get("chartThemeOverrides") || {};
this.update({
type: `${modelType}ChartUpdate`,
chartId,
chartThemeOverrides
});
}
raiseChartCreatedEvent() {
this.chartProxy.getChart().waitForUpdate().then(() => {
this.eventSvc.dispatchEvent({
type: "chartCreated",
chartId: this.chartController.getChartId()
});
});
}
raiseChartDestroyedEvent() {
this.eventSvc.dispatchEvent({
type: "chartDestroyed",
chartId: this.chartController.getChartId()
});
}
destroy() {
super.destroy();
if (this.chartProxy) {
this.chartProxy.destroy();
}
this.destroyBean(this.chartMenu);
if (this.chartDialog?.isAlive()) {
this.destroyBean(this.chartDialog);
}
this.onDestroyColorSchemeChangeListener?.();
const eGui = this.getGui();
_clearElement(eGui);
_removeFromParent(eGui);
this.raiseChartDestroyedEvent();
}
};
// packages/ag-grid-enterprise/src/charts/chartModelMigration.ts
var DEBUG = false;
function upgradeChartModel(model) {
const originalVersion = model.version;
if (model.version == null) {
model.version = heuristicVersionDetection(model);
}
model = migrateIfBefore("23.0.0", model, migrateV23);
model = migrateIfBefore("24.0.0", model, migrateV24);
model = migrateIfBefore("25.1.0", model, migrateV25_1);
model = migrateIfBefore("26.0.0", model, migrateV26);
model = migrateIfBefore("26.1.0", model, migrateV26_1);
model = migrateIfBefore("26.2.0", model, migrateV26_2);
model = migrateIfBefore("28.0.0", model, migrateV28);
model = migrateIfBefore("28.2.0", model, migrateV28_2);
model = migrateIfBefore("29.0.0", model, migrateV29);
model = migrateIfBefore("29.1.0", model, migrateV29_1);
model = migrateIfBefore("29.2.0", model, migrateV29_2);
model = migrateIfBefore("30.0.0", model, migrateV30);
model = migrateIfBefore("31.0.0", model, migrateV31);
model = migrateIfBefore("32.0.0", model, migrateV32);
model = migrateIfBefore("33.0.0", model, migrateV33);
model = migrateIfBefore("34.0.0", model, migrateV34);
model = cleanup(model);
model = migrateIfBefore(VERSION2, model, (m) => m);
if (DEBUG && originalVersion !== model.version) {
console.log("AG Grid: ChartModel migration complete", { model });
}
return model;
}
function migrateV23(model) {
model = jsonRename("chartOptions.legend.item.marker.type", "shape", model);
model = jsonRename("chartOptions.seriesDefaults.marker.type", "shape", model);
model = jsonRename("chartOptions.legend.padding", "spacing", model);
return model;
}
function migrateV24(model) {
model = jsonDelete("chartOptions.seriesDefaults.marker.minSize", model);
const {
chartType,
chartPalette,
// Migrate.
chartOptions: { xAxis, yAxis, ...chartOptions },
...chartModel
} = model;
const axesTypes = getLegacyAxisType(chartType);
const axes = axesTypes?.map((type, i) => ({
type,
...i === 0 ? xAxis : yAxis
}));
const LEGACY_PALETTES = {
borneo: "ag-default",
material: "ag-material",
bright: "ag-vivid"
};
return {
chartType,
chartThemeName: LEGACY_PALETTES[chartPalette] ?? "ag-default",
chartOptions: {
...chartOptions,
axes,
xAxis,
yAxis
},
...chartModel
};
}
function migrateV25_1(model) {
model = jsonRename("chartOptions.seriesDefaults.label.minRequiredAngle", "minAngle", model);
return model;
}
function migrateV26(model) {
const highlightOptUpdate = ({ dimOpacity, ...opts }) => ({
...opts,
...dimOpacity != null ? { series: { dimOpacity } } : {}
});
model = jsonMutate("chartOptions.seriesDefaults.highlightStyle", model, highlightOptUpdate);
model = jsonDelete("chart", model);
model = jsonDelete("chartOptions.seriesDefaults.tooltipClass", model);
model = jsonDelete("chartOptions.seriesDefaults.tooltipTracking", model);
model = jsonDeleteDefault("chartOptions.axes[].label.rotation", 0, model);
model = jsonDeleteDefault("chartOptions.axes[].label.rotation", 335, model);
return model;
}
function migrateV26_1(model) {
const highlightOptUpdate = ({ item, series, ...opts }) => ({
item: { ...opts, ...item },
...series ? { series } : {}
});
model = jsonMutate("chartOptions.seriesDefaults.highlightStyle", model, highlightOptUpdate);
model = jsonMutate("chartOptions.series[].highlightStyle", model, highlightOptUpdate);
return model;
}
function migrateV26_2(model) {
model = jsonMove("chartOptions.seriesDefaults.fill.opacity", "chartOptions.seriesDefaults.fillOpacity", model);
model = jsonMove("chartOptions.seriesDefaults.stroke.opacity", "chartOptions.seriesDefaults.strokeOpacity", model);
model = jsonMove("chartOptions.seriesDefaults.stroke.width", "chartOptions.seriesDefaults.strokeWidth", model);
model = jsonDelete("chartOptions.seriesDefaults.fill", model);
model = jsonDelete("chartOptions.seriesDefaults.stroke", model);
model = jsonDelete("chartOptions.seriesDefaults.callout.colors", model);
model = jsonDelete("chartOptions.xAxis", model);
model = jsonDelete("chartOptions.yAxis", model);
const {
chartType: providedChartType,
// disable no-unused-vars because `series` is required here, even though
// unused, because it serves to take the `series` key out of otherChartOptions
// eslint-disable-next-line @typescript-eslint/no-unused-vars
chartOptions: { axes, series, seriesDefaults, ...otherChartOptions },
...otherModelProps
} = model;
const chartType = getCanonicalChartType(providedChartType);
const seriesType = getSeriesType(chartType);
const seriesTypes = [seriesType];
const chartTypeMixin = {};
if (!isPieChartSeries(seriesType)) {
const minimalAxis = { top: {}, bottom: {}, left: {}, right: {} };
const updatedAxes = axes.map(({ type, ...axisProps }) => ({
[type]: { ...minimalAxis, ...axisProps }
})).reduce(merge, {});
for (const v of ALL_AXIS_TYPES.filter((v2) => updatedAxes[v2] == null)) {
updatedAxes[v] = { ...minimalAxis };
}
chartTypeMixin.axes = updatedAxes;
}
const updatedChartOptions = seriesTypes.map((t) => ({
[t]: {
...chartTypeMixin,
series: seriesDefaults,
...otherChartOptions
}
})).reduce(merge, {});
model = {
...otherModelProps,
chartType,
chartOptions: updatedChartOptions
};
return model;
}
function migrateV28(model) {
model = jsonDelete("chartOptions.*.title.padding", model);
model = jsonDelete("chartOptions.*.subtitle.padding", model);
model = jsonDelete("chartOptions.*.axes.*.title.padding", model);
model = jsonBackfill("chartOptions.*.axes.*.title.enabled", false, model);
return model;
}
function migrateV28_2(model) {
model = jsonRename("chartOptions.pie.series.callout", "calloutLine", model);
model = jsonRename("chartOptions.pie.series.label", "calloutLabel", model);
model = jsonRename("chartOptions.pie.series.labelKey", "sectorLabelKey", model);
model = jsonRename("chartOptions.pie.series.labelName", "sectorLabelName", model);
model = jsonRename("chartOptions.donut.series.callout", "calloutLine", model);
model = jsonRename("chartOptions.donut.series.label", "calloutLabel", model);
model = jsonRename("chartOptions.donut.series.labelKey", "sectorLabelKey", model);
model = jsonRename("chartOptions.donut.series.labelName", "sectorLabelName", model);
return model;
}
function migrateV29(model) {
model = jsonMoveIfMissing("chartOptions.scatter.series.fill", "chartOptions.scatter.series.marker.fill", model);
model = jsonMoveIfMissing(
"chartOptions.scatter.series.fillOpacity",
"chartOptions.scatter.series.marker.fillOpacity",
model
);
model = jsonMoveIfMissing("chartOptions.scatter.series.stroke", "chartOptions.scatter.series.marker.stroke", model);
model = jsonMoveIfMissing(
"chartOptions.scatter.series.strokeOpacity",
"chartOptions.scatter.series.marker.strokeOpacity",
model
);
model = jsonMoveIfMissing(
"chartOptions.scatter.series.strokeWidth",
"chartOptions.scatter.series.marker.strokeWidth",
model
);
model = jsonMove("chartOptions.scatter.series.paired", "chartOptions.scatter.paired", model);
return model;
}
function migrateV29_1(model) {
model = jsonDelete("chartOptions.axes[].tick.count", model);
return model;
}
function migrateV29_2(model) {
const tooltipOptUpdate = ({ tracking, ...opts }) => {
const output = { ...opts };
if (tracking === false) {
output.position ?? (output.position = { type: "pointer" });
output.range ?? (output.range = "nearest");
} else if (tracking === true) {
output.position ?? (output.position = { type: "node" });
output.range ?? (output.range = "nearest");
}
return output;
};
model = jsonMutate("chartOptions.*.tooltip", model, tooltipOptUpdate);
return model;
}
function migrateV30(model) {
model = jsonRename("chartOptions.pie.series.labelKey", "sectorLabelKey", model);
model = jsonRename("chartOptions.pie.series.labelName", "sectorLabelName", model);
model = migrateV29_1(model);
model = migrateV29_2(model);
model = jsonDelete("chartOptions.*.series.flipXY", model);
model = jsonAdd("chartOptions.common.legend.enabled", true, model);
model = jsonBackfill("chartOptions.common.legend.position", "right", model);
return model;
}
function migrateV31(model) {
const V30_LEGACY_PALETTES = {
"ag-pastel": "ag-sheets",
"ag-solar": "ag-polychroma"
};
const updatedModel = jsonRename("chartOptions.column", "bar", model);
const chartThemeName = V30_LEGACY_PALETTES[updatedModel.chartThemeName] || updatedModel.chartThemeName;
return {
...updatedModel,
chartThemeName
};
}
function migrateV32(model) {
model = jsonMutateProperty("chartOptions.*.autoSize", true, model, (parent, targetProp) => {
if (parent[targetProp] === true) {
} else if (parent[targetProp] === false) {
parent["minHeight"] = 600;
parent["minWidth"] = 300;
}
delete parent[targetProp];
});
return model;
}
function migrateV33(model) {
model = jsonDelete("chartOptions.*.axes.category.label.format", model);
model = jsonDelete("chartOptions.*.axes.category.crosshair.label.format", model);
model = jsonDelete("chartOptions.*.axes.angle-category.label.format", model);
model = jsonDelete("chartOptions.*.axes.radius-category.label.format", model);
model = jsonRename("chartOptions.*.axes.*.label.padding", "spacing", model);
model = jsonRename("chartOptions.*.navigator.miniChart.label.padding", "spacing", model);
model = jsonDelete("chartOptions.*.axes.*.crossLines.label.className", model);
model = jsonMutateProperty("chartOptions.*.axes.*.crossLines.label.position", true, model, (parent, targetProp) => {
if (typeof parent[targetProp] === "string") {
parent[targetProp] = parent[targetProp].replace(/([A-Z])/, "-$1").toLowerCase();
}
});
model = jsonDelete("chartOptions.bullet", model);
model = jsonRenameEnumValues("chartOptions.bar.series.label.placement", model, {
inside: "inside-center",
outside: "inside-end"
});
model = jsonRenameEnumValues("chartOptions.waterfall.series.item.*.label.placement", model, {
inside: "inside-center",
start: "outside-start",
end: "outside-end"
});
model = jsonDelete("chartOptions.*.navigator.min", model);
model = jsonDelete("chartOptions.*.navigator.max", model);
model = jsonDelete("chartOptions.*.zoom.ratioX", model);
model = jsonDelete("chartOptions.*.zoom.ratioY", model);
model = jsonDelete("chartOptions.*.zoom.rangeX", model);
model = jsonDelete("chartOptions.*.zoom.rangeY", model);
return model;
}
function migrateV34(model) {
const highlightUpdate = (parent, targetProp) => {
const highlightStyle = parent[targetProp];
if (highlightStyle == null) {
return;
}
const highlight = {};
if (highlightStyle.item) {
highlight.highlightedItem = highlightStyle.item;
}
if (highlightStyle.series) {
const { dimOpacity, ...seriesOpts } = highlightStyle.series;
if (dimOpacity != null) {
highlight.unhighlightedSeries = { opacity: dimOpacity };
}
if (Object.keys(seriesOpts).length > 0) {
highlight.highlightedSeries = seriesOpts;
}
}
delete parent[targetProp];
parent.highlight = highlight;
};
jsonMutateProperty("chartOptions.series[].highlightStyle", true, model, highlightUpdate);
return model;
}
function cleanup(model) {
model = jsonDelete("chartOptions.*.width", model);
model = jsonDelete("chartOptions.*.height", model);
model = jsonBackfill("chartOptions.*.axes.category.label.autoRotate", true, model);
return model;
}
function heuristicVersionDetection(model) {
const modelAny = model;
if (model.version != null) {
return model.version;
}
const hasKey = (obj, ...keys) => {
return Object.keys(obj || {}).some((k) => keys.includes(k));
};
const chartOptions = modelAny.chartOptions;
const seriesOptions = hasKey(chartOptions, "seriesDefaults") ? chartOptions?.seriesDefaults : chartOptions?.[Object.keys(chartOptions)[0]];
const hints = {
"27.0.0": hasKey(modelAny, "seriesChartTypes"),
"26.2.0": !hasKey(chartOptions, "seriesDefaults"),
"26.1.0": hasKey(seriesOptions?.highlightStyle, "item"),
"26.0.0": hasKey(seriesOptions?.highlightStyle, "series"),
// '26.0.0': modelAny.chart === undefined,
"25.1.0": hasKey(seriesOptions?.label, "minAngle"),
"25.0.0": hasKey(modelAny, "modelType", "aggFunc", "unlinkChart", "suppressChartRanges") || hasKey(seriesOptions, "lineDash", "lineDashOffset"),
"24.0.0": hasKey(modelAny, "chartThemeName", "chart") || hasKey(chartOptions, "series"),
"23.2.0": hasKey(chartOptions, "navigator"),
"23.0.0": hasKey(chartOptions?.legend?.item?.marker, "shape"),
"22.1.0": hasKey(modelAny, "chartPalette", "chartType")
};
const defaultVersion = "27.1.0";
const matchingHints = Object.entries(hints).filter(([_, match]) => match);
if (DEBUG) {
console.log("AG Grid: ChartModel migration", { heuristicVersionCandidates: matchingHints });
}
const [heuristicVersion = defaultVersion] = matchingHints[0];
if (DEBUG) {
console.log("AG Grid: ChartModel migration", { heuristicVersion });
}
return heuristicVersion;
}
function migrateIfBefore(maxVersion, model, migration) {
if (versionNumber(maxVersion) > versionNumber(model.version)) {
if (DEBUG) {
console.log("AG Grid: ChartModel migration", { migratingTo: maxVersion });
}
const result = migration(model);
result.version = maxVersion;
if (DEBUG) {
console.log("AG Grid: ChartModel migration", { migratedTo: maxVersion, result });
}
return result;
}
return model;
}
function versionParts(versionRaw) {
const version = versionRaw.includes("-beta") ? versionRaw.replace(/-beta.*/, "") : versionRaw;
const split = typeof version === "string" ? version.split(".").map((v) => Number(v)) : [];
if (split.length !== 3 || split.some((v) => isNaN(v))) {
throw new Error(_errMsg(253, { version }));
}
return {
major: split[0],
minor: split[1],
patch: split[2]
};
}
function versionNumber(version) {
const { major, minor, patch } = versionParts(version);
return major * 1e4 + minor * 100 + patch;
}
function jsonDeleteDefault(path, defaultValue, json) {
return jsonMutateProperty(path, true, json, (parent, prop) => {
if (parent[prop] === defaultValue) {
delete parent[prop];
}
});
}
function jsonBackfill(path, defaultValue, json) {
return jsonMutateProperty(path, false, json, (parent, prop) => {
if (parent[prop] == null) {
parent[prop] = defaultValue;
}
});
}
function jsonAdd(path, value, json) {
if (typeof path === "string") {
path = path.split(".");
}
const nextPath = path[0];
if (path.length > 1) {
json[nextPath] = jsonAdd(path.slice(1), value, json[nextPath] ?? {});
}
const hasProperty = Object.keys(json).includes(nextPath);
if (!hasProperty) {
json[nextPath] = value;
}
return json;
}
function jsonMove(from, to, json) {
let valueToMove = void 0;
let valueFound = false;
json = jsonMutateProperty(from, true, json, (parent, prop) => {
valueFound = true;
valueToMove = parent[prop];
delete parent[prop];
});
if (!valueFound) {
return json;
}
return jsonMutateProperty(to, false, json, (parent, prop) => {
parent[prop] = valueToMove;
});
}
function jsonMoveIfMissing(from, to, json) {
let valueToMove = void 0;
let valueFound = false;
json = jsonMutateProperty(from, true, json, (parent, prop) => {
valueFound = true;
valueToMove = parent[prop];
delete parent[prop];
});
if (!valueFound) {
return json;
}
return jsonMutateProperty(to, false, json, (parent, prop) => {
if (parent[prop] === void 0) {
parent[prop] = valueToMove;
}
});
}
function jsonRename(path, renameTo, json) {
return jsonMutateProperty(path, true, json, (parent, prop) => {
parent[renameTo] = parent[prop];
delete parent[prop];
});
}
function jsonDelete(path, json) {
return jsonMutateProperty(path, true, json, (parent, prop) => delete parent[prop]);
}
function jsonMutateProperty(path, skipMissing, json, mutator) {
const pathElements = path instanceof Array ? path : path.split(".");
const parentPathElements = pathElements.slice(0, pathElements.length - 1);
const targetName = pathElements[pathElements.length - 1];
return jsonMutate(parentPathElements, json, (parent) => {
const hasProperty = Object.keys(parent).includes(targetName);
if (skipMissing && !hasProperty) {
return parent;
}
const result = { ...parent };
mutator(result, targetName);
return result;
});
}
function jsonMutate(path, json, mutator) {
const pathElements = path instanceof Array ? path : path.split(".");
json = { ...json };
if (pathElements.length === 0) {
return mutator(json);
} else if (pathElements[0].startsWith("{")) {
const pathOptions = pathElements[0].substring(1, pathElements[0].lastIndexOf("}")).split(",");
for (const pathOption of pathOptions) {
if (json[pathOption] != null) {
json[pathOption] = jsonMutate(pathElements.slice(1), json[pathOption], mutator);
}
}
} else if (pathElements[0].endsWith("[]")) {
const arrayName = pathElements[0].substring(0, path[0].indexOf("["));
if (json[arrayName] instanceof Array) {
json[arrayName] = json[arrayName].map((v) => jsonMutate(pathElements.slice(1), v, mutator));
}
} else if (pathElements[0] === "*") {
for (const jsonProp of Object.keys(json)) {
json[jsonProp] = jsonMutate(pathElements.slice(1), json[jsonProp], mutator);
}
} else if (json[pathElements[0]] != null) {
json[pathElements[0]] = jsonMutate(pathElements.slice(1), json[pathElements[0]], mutator);
}
return json;
}
function jsonRenameEnumValues(path, json, values) {
return jsonMutateProperty(path, true, json, (parent, targetProp) => {
if (typeof parent[targetProp] === "string") {
parent[targetProp] = values[targetProp] ?? targetProp;
}
});
}
var merge = (r, n) => ({ ...r, ...n });
// packages/ag-grid-enterprise/src/charts/chartService.ts
var ChartService = class extends BeanStub {
constructor() {
super(...arguments);
this.beanName = "chartSvc";
// we destroy all charts bound to this grid when grid is destroyed. activeCharts contains all charts, including
// those in developer provided containers.
this.activeCharts = /* @__PURE__ */ new Set();
this.activeChartComps = /* @__PURE__ */ new Set();
// this shared (singleton) context is used by cross filtering in line and area charts
this.crossFilteringContext = {
lastSelectedChartId: ""
};
this.isEnterprise = () => this.agChartsExports.isEnterprise;
}
wireBeans(beans) {
this.visibleCols = beans.visibleCols;
this.rangeSvc = beans.rangeSvc;
this.agChartsExports = beans.agChartsExports;
}
updateChart(params) {
if (this.activeChartComps.size === 0) {
_warn(124);
return;
}
const chartComp = [...this.activeChartComps].find((chartComp2) => chartComp2.getChartId() === params.chartId);
if (!chartComp) {
_warn(125, { chartId: params.chartId });
return;
}
chartComp.update(params);
}
getChartModels() {
const models = [];
const versionedModel = (c) => {
return { ...c, version: VERSION2 };
};
for (const c of this.activeChartComps) {
models.push(versionedModel(c.getChartModel()));
}
return models;
}
getChartRef(chartId) {
let chartRef;
for (const cr of this.activeCharts) {
if (cr.chartId === chartId) {
chartRef = cr;
}
}
return chartRef;
}
getChartComp(chartId) {
let chartComp;
for (const comp of this.activeChartComps) {
if (comp.getChartId() === chartId) {
chartComp = comp;
}
}
return chartComp;
}
getChartImageDataURL(params) {
let url;
for (const c of this.activeChartComps) {
if (c.getChartId() === params.chartId) {
url = c.getChartImageDataURL(params.fileFormat);
}
}
return url;
}
downloadChart(params) {
const chartComp = Array.from(this.activeChartComps).find((c) => c.getChartId() === params.chartId);
chartComp?.downloadChart(params.dimensions, params.fileName, params.fileFormat);
}
openChartToolPanel(params) {
const chartComp = Array.from(this.activeChartComps).find((c) => c.getChartId() === params.chartId);
chartComp?.openChartToolPanel(params.panel);
}
closeChartToolPanel(chartId) {
const chartComp = Array.from(this.activeChartComps).find((c) => c.getChartId() === chartId);
chartComp?.closeChartToolPanel();
}
createChartFromCurrentRange(chartType = "groupedColumn", fromApi) {
const cellRange = this.getSelectedRange();
return this.createChart({ cellRange, chartType, focusDialogOnOpen: !fromApi });
}
restoreChart(model, chartContainer) {
if (!model) {
_warn(126);
return;
}
if (model.version !== VERSION2) {
model = upgradeChartModel(model);
}
let cellRange;
let pivotChart;
let suppressChartRanges;
let chartPaletteToRestore;
if (model.modelType === "pivot") {
this.gos.updateGridOptions({ options: { pivotMode: true }, source: "pivotChart" });
cellRange = this.createCellRange(void 0, true);
pivotChart = true;
suppressChartRanges = true;
} else {
cellRange = this.createCellRange(model.cellRange);
chartPaletteToRestore = model.chartPalette;
suppressChartRanges = model.suppressChartRanges;
}
if (!cellRange) {
return;
}
return this.createChart({
...model,
cellRange,
pivotChart,
suppressChartRanges,
chartContainer,
chartOptionsToRestore: model.chartOptions,
chartPaletteToRestore
});
}
createRangeChart(params, fromApi) {
const cellRange = this.createCellRange(params.cellRange);
if (!cellRange) {
return;
}
return this.createChart({
...params,
cellRange,
focusDialogOnOpen: !fromApi
});
}
createPivotChart(params, fromApi) {
this.gos.updateGridOptions({ options: { pivotMode: true }, source: "pivotChart" });
const cellRange = this.createCellRange(void 0, true);
if (!cellRange) {
return;
}
return this.createChart({
...params,
cellRange,
pivotChart: true,
suppressChartRanges: true,
focusDialogOnOpen: !fromApi
});
}
createCrossFilterChart(params, fromApi) {
const cellRange = this.createCellRange(params.cellRange);
if (!cellRange) {
return;
}
const suppressChartRangesSupplied = typeof params.suppressChartRanges !== "undefined" && params.suppressChartRanges !== null;
const suppressChartRanges = suppressChartRangesSupplied ? params.suppressChartRanges : true;
return this.createChart({
...params,
cellRange,
suppressChartRanges,
crossFiltering: true,
crossFilteringSort: params.sort,
focusDialogOnOpen: !fromApi
});
}
createChart(params) {
const validationResult = validateCreateParams(params, this.agChartsExports.isEnterprise);
if (!validationResult) {
return void 0;
}
params = validationResult === true ? params : validationResult;
const { chartType, chartContainer } = params;
const createChartContainerFunc = this.gos.getCallback("createChartContainer");
const gridChartParams = {
...params,
chartId: this.generateId(),
chartType: getCanonicalChartType(chartType),
insideDialog: !(chartContainer || createChartContainerFunc),
crossFilteringContext: this.crossFilteringContext,
crossFilteringResetCallback: () => {
for (const c of this.activeChartComps) {
c.crossFilteringReset();
}
}
};
const chartComp = new GridChartComp(gridChartParams);
this.createBean(chartComp);
const chartRef = this.createChartRef(chartComp);
if (chartContainer) {
chartContainer.appendChild(chartRef.chartElement);
} else if (createChartContainerFunc) {
createChartContainerFunc(chartRef);
} else {
chartComp.addEventListener("destroyed", () => {
this.activeChartComps.delete(chartComp);
this.activeCharts.delete(chartRef);
});
}
return chartRef;
}
createChartRef(chartComp) {
const chartRef = {
destroyChart: () => {
if (this.activeCharts.has(chartRef)) {
this.destroyBean(chartComp);
this.activeChartComps.delete(chartComp);
this.activeCharts.delete(chartRef);
}
},
focusChart: () => {
_focusInto(chartComp.getGui());
},
chartElement: chartComp.getGui(),
chart: chartComp.getUnderlyingChart(),
chartId: chartComp.getChartModel().chartId,
setMaximized: chartComp.setMaximized.bind(chartComp)
};
this.activeCharts.add(chartRef);
this.activeChartComps.add(chartComp);
return chartRef;
}
getSelectedRange() {
const ranges = this.rangeSvc?.getCellRanges();
if (!ranges || ranges.length === 0) {
return { columns: [] };
}
const uCols = /* @__PURE__ */ new Set();
let startRowIndex = Number.MAX_VALUE;
let endRowIndex = -Number.MAX_VALUE;
for (const { startRow: sr, endRow: er, columns: cols } of ranges) {
if (!(sr && er)) {
continue;
}
for (const col of cols) {
uCols.add(col);
}
let { rowIndex: sRowIndex, rowPinned: startRowPinned } = sr;
let { rowIndex: eRowIndex, rowPinned: endRowPinned } = er;
if (startRowPinned === "top") {
if (endRowPinned === "top") {
continue;
}
sRowIndex = 0;
}
if (endRowPinned === "bottom") {
if (startRowPinned === "bottom") {
continue;
}
eRowIndex = this.beans.pageBounds.getLastRow();
}
if (sRowIndex !== void 0) {
startRowIndex = Math.min(startRowIndex, sRowIndex);
}
if (eRowIndex !== void 0) {
endRowIndex = Math.max(endRowIndex, eRowIndex);
}
}
if (startRowIndex === Number.MAX_VALUE || endRowIndex === -Number.MAX_VALUE) {
return { columns: [] };
}
const columns = Array.from(uCols);
return {
// Don't specify id here, as it should be chart-specific
// but we don't have that context yet
columns,
startColumn: columns[0],
startRow: {
rowIndex: startRowIndex,
rowPinned: void 0
},
endRow: {
rowIndex: endRowIndex,
rowPinned: void 0
}
};
}
generateId() {
return `id-${Math.random().toString(36).substring(2, 18)}`;
}
createCellRange(cellRangeParams, allRange) {
const rangeParams = allRange ? {
rowStartIndex: null,
rowStartPinned: void 0,
rowEndIndex: null,
rowEndPinned: void 0,
columns: this.visibleCols.allCols.map((col) => col.getColId())
} : cellRangeParams;
const cellRange = rangeParams && this.rangeSvc?.createPartialCellRangeFromRangeParams(rangeParams, true);
if (!cellRange) {
_warn(127, { allRange });
}
return cellRange;
}
destroy() {
for (const chart of this.activeCharts) {
chart.destroyChart();
}
super.destroy();
}
};
// packages/ag-grid-enterprise/src/charts/chartsApi.ts
function getChartModels(beans) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.getChartModels());
}
function getChartRef(beans, chartId) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.getChartRef(chartId));
}
function getChartImageDataURL(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.getChartImageDataURL(params));
}
function downloadChart(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.downloadChart(params));
}
function openChartToolPanel(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.openChartToolPanel(params));
}
function closeChartToolPanel(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.closeChartToolPanel(params.chartId));
}
function createRangeChart(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.createRangeChart(params, true));
}
function createPivotChart(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.createPivotChart(params, true));
}
function createCrossFilterChart(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.createCrossFilterChart(params, true));
}
function updateChart(beans, params) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.updateChart(params));
}
function restoreChart(beans, chartModel, chartContainer) {
return beans.frameworkOverrides.wrapIncoming(() => beans.chartSvc?.restoreChart(chartModel, chartContainer));
}
// packages/ag-grid-enterprise/src/charts/integratedChartsModule.css
var integratedChartsModule_default = `.ag-chart{display:flex;height:100%;position:relative;width:100%}.ag-chart-components-wrapper{display:flex}.ag-chart-canvas-wrapper,.ag-chart-components-wrapper{flex:1 1 auto;position:relative}.ag-chart-menu{background:var(--ag-background-color);background-color:color-mix(in srgb,transparent,var(--ag-background-color) 30%);border-radius:var(--ag-border-radius);display:flex;flex-direction:row;gap:20px;padding:4px 2px;position:absolute;top:8px;width:auto;--ag-icon-size:20px}:where(.ag-ltr) .ag-chart-menu{justify-content:right;right:calc(var(--ag-cell-horizontal-padding) + var(--ag-spacing) - 4px)}:where(.ag-rtl) .ag-chart-menu{justify-content:left;left:calc(var(--ag-cell-horizontal-padding) + var(--ag-spacing) - 4px)}.ag-chart-docked-container{min-width:var(--ag-chart-menu-panel-width);position:relative}:where(.ag-chart-menu-hidden)~.ag-chart-docked-container{display:none}.ag-chart-tabbed-menu{display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.ag-chart-tabbed-menu-header{cursor:default;flex:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-chart-tabbed-menu-body{align-items:stretch;display:flex;flex:1 1 auto;overflow:hidden;position:relative}.ag-chart-tabbed-menu-body:after{background:linear-gradient(var(--ag-background-color),transparent);content:"";display:block;height:16px;left:0;position:absolute;right:0;top:0}.ag-chart-tab{overflow:hidden;overflow-y:auto;width:100%}.ag-chart-settings{overflow-x:hidden}.ag-chart-settings-wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.ag-chart-settings-nav-bar{align-items:center;border-top:solid var(--ag-border-width) var(--ag-border-color);display:flex;height:30px;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ag-chart-settings-card-selector{align-items:center;display:flex;flex:1 1 auto;height:100%;justify-content:space-around;padding:0 10px}.ag-chart-settings-card-item{background-color:var(--ag-foreground-color);border-radius:4px;cursor:pointer;height:8px;position:relative;width:8px;&.ag-not-selected{opacity:.2}&.ag-selected{background-color:var(--ag-accent-color)}}.ag-chart-settings-card-item:before{background-color:transparent;content:" ";display:block;height:20px;left:50%;margin-left:-10px;margin-top:-10px;position:absolute;top:50%;width:20px}.ag-chart-settings-next,.ag-chart-settings-prev{flex:none;position:relative}.ag-chart-settings-next:focus-within,.ag-chart-settings-prev:focus-within{border-radius:1px;box-shadow:var(--ag-focus-shadow)}.ag-chart-settings-next-button,.ag-chart-settings-prev-button{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.ag-chart-settings-mini-charts-container{flex:1 1 auto;overflow:hidden auto;position:relative}.ag-chart-settings-mini-wrapper{display:flex;flex-direction:column;left:0;min-height:100%;overflow:hidden;padding-bottom:var(--ag-widget-container-vertical-padding);position:absolute;top:0;width:100%;&.ag-animating{transition:left .3s;transition-timing-function:ease-in-out}}.ag-chart-mini-thumbnail{border:solid var(--ag-border-width) var(--ag-border-color);border-radius:5px;cursor:pointer;padding:1px;&.ag-selected{border-color:var(--ag-accent-color);border-width:calc(var(--ag-border-width) + 1px);padding:unset}&:focus-visible{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}}.ag-chart-mini-thumbnail-canvas{display:block}.ag-chart-advanced-settings-wrapper,.ag-chart-data-wrapper,.ag-chart-format-wrapper{display:flex;flex-direction:column;padding-bottom:16px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ag-chart-advanced-settings-wrapper,.ag-chart-data-wrapper{height:100%;overflow-y:auto}.ag-chart-advanced-settings{background-color:var(--ag-chrome-background-color)}.ag-chart-advanced-settings,.ag-chart-advanced-settings-wrapper{width:100%}.ag-chart-advanced-settings-wrapper{padding-bottom:0}.ag-chart-advanced-settings-section{border-bottom:solid var(--ag-border-width) var(--ag-border-color);display:flex;margin:0;padding-bottom:var(--ag-widget-container-vertical-padding);padding-top:var(--ag-widget-container-vertical-padding)}.ag-chart-empty-text{align-items:center;background-color:var(--ag-background-color);display:flex;height:100%;justify-content:center;top:0;width:100%}.ag-charts-font-size-color{align-self:stretch;display:flex;justify-content:space-between}.ag-chart-menu-icon{border-radius:var(--ag-border-radius);cursor:pointer;margin:2px 0;opacity:.8}.ag-chart-menu-icon:hover{opacity:1}.ag-chart-menu-toolbar-button{background-color:unset;border:0;border-radius:1px;padding:0 2px}.ag-chart-data-column-drag-handle{margin-left:var(--ag-spacing)}.ag-chart-data-section,.ag-chart-format-section{display:flex;margin:0;:where(.ag-label:not(.ag-group-title-bar)){color:var(--ag-chart-menu-label-color)}:where(.ag-label-align-top .ag-label){margin-bottom:var(--ag-widget-vertical-spacing);margin-top:calc(var(--ag-widget-vertical-spacing)*.5)}:where(.ag-slider.ag-label-align-top .ag-label){margin-bottom:0}.ag-label{display:inline-block}}.ag-chart-menu-panel{--ag-panel-background-color:var(--ag-chrome-background-color)}:where(.ag-ltr) .ag-chart-menu-panel{border-left:solid var(--ag-border-width) var(--ag-border-color)}:where(.ag-rtl) .ag-chart-menu-panel{border-right:solid var(--ag-border-width) var(--ag-border-color)}.ag-chart-data-wrapper,.ag-chart-format-wrapper{margin:0;padding:0}.ag-group{.ag-charts-data-group-item{padding-bottom:var(--ag-widget-container-vertical-padding);position:relative}.ag-charts-data-group-item:where(:not(:last-child)){margin-bottom:var(--ag-spacing)}.ag-charts-advanced-settings-top-level-group-title-bar{background-color:unset;position:relative}.ag-charts-data-group-item:where(:not(.ag-charts-format-sub-level-group,.ag-pill-select,.ag-select)){height:var(--ag-list-item-height)}.ag-charts-data-group-item:where(.ag-picker-field){margin-top:var(--ag-spacing)}.ag-charts-advanced-settings-top-level-group-item,.ag-charts-format-top-level-group-item{margin:var(--ag-spacing) 0}.ag-charts-format-sub-level-group-container{display:flex;flex-direction:column;padding:var(--ag-widget-vertical-spacing) 0}.ag-charts-settings-group-container{border-top:none;display:grid;font-weight:500;grid-template-columns:60px 1fr 60px 1fr 60px;row-gap:8px;:where(.ag-chart-mini-thumbnail:nth-child(3n+1)){grid-column:1}:where(.ag-chart-mini-thumbnail:nth-child(3n+2)){grid-column:3}:where(.ag-chart-mini-thumbnail:nth-child(3n+3)){grid-column:5}}.ag-charts-data-group-title-bar,.ag-charts-format-top-level-group-title-bar,.ag-charts-settings-group-title-bar{border-top:none;font-weight:500;margin:0;padding:var(--ag-widget-container-vertical-padding) var(--ag-widget-container-horizontal-padding);position:relative}.ag-charts-format-sub-level-group-title-bar{background:none;font-weight:500;padding:var(--ag-widget-vertical-spacing) 0}&.ag-charts-data-group,&.ag-charts-format-top-level-group{border-top:solid var(--ag-border-width) var(--ag-border-color)}.ag-charts-data-group-container,.ag-charts-format-top-level-group-container,.ag-charts-settings-group-container{margin:0;padding:0 var(--ag-widget-container-horizontal-padding)}.ag-charts-format-sub-level-group-item,.ag-charts-format-sub-level-no-header-group-item,.ag-charts-format-top-level-group-item{margin-bottom:var(--ag-widget-vertical-spacing)}&.ag-charts-format-sub-level-group,&.ag-charts-format-top-level-group,.ag-charts-format-sub-level-group-item:last-child,.ag-charts-format-top-level-group-item{margin:0;padding:0}.ag-charts-advanced-settings-top-level-group-container{margin:0}.ag-charts-advanced-settings-top-level-group-container,.ag-charts-advanced-settings-top-level-group-title-bar{padding:0 var(--ag-widget-container-horizontal-padding)}.ag-charts-advanced-settings-top-level-group-item{margin-bottom:0;margin-top:calc(var(--ag-widget-vertical-spacing)*2)}}.ag-chart-settings-card-item.ag-not-selected:hover{opacity:.35}.ag-angle-select{align-items:center;display:flex}.ag-angle-select-wrapper{display:flex}.ag-angle-select-parent-circle{background-color:var(--ag-background-color);border:solid var(--ag-border-width) var(--ag-border-color);border-radius:12px;display:block;height:24px;position:relative;width:24px}.ag-angle-select-child-circle{background-color:var(--ag-foreground-color);border-radius:3px;height:6px;left:12px;margin-left:-3px;margin-top:-4px;position:absolute;top:4px;width:6px}.ag-slider-wrapper{display:flex;:where(.ag-input-field){flex:1 1 auto}}.ag-color-panel{display:flex;flex-direction:column;padding:var(--ag-spacing);text-align:center;width:100%}.ag-spectrum-color{cursor:default;flex:1 1 auto;overflow:visible;position:relative}.ag-spectrum-color,.ag-spectrum-fill{border-radius:var(--ag-border-radius)}.ag-spectrum-fill{inset:0;position:absolute}.ag-spectrum-val{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0));cursor:pointer}.ag-spectrum-dragger{background:#000;border:var(--ag-color-picker-thumb-border-width) solid #fff;border-radius:var(--ag-color-picker-thumb-size);box-shadow:0 0 2px 0 rgba(0,0,0,.24);cursor:pointer;height:var(--ag-color-picker-thumb-size);pointer-events:none;position:absolute;width:var(--ag-color-picker-thumb-size)}.ag-spectrum-alpha,.ag-spectrum-hue{cursor:default}.ag-spectrum-hue-background{background:linear-gradient(270deg,red 3%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%;width:100%}.ag-spectrum-alpha-background{background:linear-gradient(to right,var(--ag-internal-spectrum-alpha-color-from),var(--ag-internal-spectrum-alpha-color-to)),url('data:image/svg+xml;utf8,
') 0 0 /4px 4px;height:100%;width:100%}.ag-spectrum-tool{cursor:pointer;height:var(--ag-color-picker-track-size);margin-bottom:10px;position:relative}.ag-spectrum-slider,.ag-spectrum-tool{border-radius:var(--ag-color-picker-thumb-size)}.ag-spectrum-slider{border:var(--ag-color-picker-thumb-border-width) solid #fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);height:var(--ag-color-picker-thumb-size);margin-top:calc(var(--ag-color-picker-track-size)/2*-1 + var(--ag-color-picker-thumb-size)/2*-1);pointer-events:none;position:absolute;width:var(--ag-color-picker-thumb-size)}:where(.ag-spectrum-alpha) .ag-spectrum-slider{background:linear-gradient(to bottom,var(--ag-internal-spectrum-alpha-color),var(--ag-internal-spectrum-alpha-color)) var(--ag-background-color)}.ag-recent-colors{display:flex;gap:6px;margin:10px var(--ag-spacing) 2px}.ag-recent-color{border:solid var(--ag-border-width) var(--ag-border-color);cursor:pointer}.ag-angle-select[disabled]{opacity:.5;pointer-events:none}:where(.ag-ltr) .ag-angle-select-field,:where(.ag-ltr) .ag-slider-field{margin-right:calc(var(--ag-spacing)*2)}:where(.ag-rtl) .ag-angle-select-field,:where(.ag-rtl) .ag-slider-field{margin-left:calc(var(--ag-spacing)*2)}.ag-color-dialog{border-radius:5px}:where(.ag-color-picker){.ag-picker-field-wrapper{padding-left:var(--ag-spacing);padding-right:var(--ag-spacing)}.ag-picker-field-display{align-items:center;display:flex;flex-direction:row;min-height:var(--ag-list-item-height)}}:where(.ag-ltr) .ag-color-picker-color,:where(.ag-ltr) .ag-color-picker-value{margin-right:var(--ag-spacing)}:where(.ag-rtl) .ag-color-picker-color,:where(.ag-rtl) .ag-color-picker-value{margin-left:var(--ag-spacing)}.ag-spectrum-tools{padding:10px 0 0}.ag-spectrum-alpha-background,.ag-spectrum-hue-background{border-radius:var(--ag-color-picker-track-border-radius)}.ag-color-input-color,.ag-color-picker-color,.ag-recent-color{border-radius:var(--ag-color-picker-color-border-radius)}.ag-spectrum-sat{background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0))}.ag-recent-color,.ag-spectrum-color,.ag-spectrum-slider{&:where(:not(:disabled,[readonly])):focus-visible{box-shadow:var(--ag-focus-shadow)}}.ag-color-input-color,.ag-color-picker-color{border:solid var(--ag-border-width) var(--ag-border-color);height:var(--ag-icon-size);width:var(--ag-icon-size)}:where(.ag-ltr) .ag-color-input .ag-input-field-input{padding-left:calc(var(--ag-icon-size) + var(--ag-spacing)*2)}:where(.ag-rtl) .ag-color-input .ag-input-field-input{padding-right:calc(var(--ag-icon-size) + var(--ag-spacing)*2)}:where(.ag-color-input) .ag-color-input-color{position:absolute}:where(.ag-ltr) :where(.ag-color-input) .ag-color-input-color{margin-left:var(--ag-spacing)}:where(.ag-rtl) :where(.ag-color-input) .ag-color-input-color{margin-right:var(--ag-spacing)}.ag-range-field{align-items:center;display:flex;:where(.ag-input-wrapper){height:100%}}.ag-range-field-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;height:100%;overflow:visible;padding:0;width:100%;&:disabled{opacity:.5}}.ag-range-field-input{&::-webkit-slider-runnable-track{background-color:var(--ag-border-color);border-radius:1.5px;height:3px;margin:0;padding:0;width:100%}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--ag-background-color);border:solid var(--ag-border-width) var(--ag-border-color);border-radius:100%;height:var(--ag-icon-size);margin:0;padding:0;transform:translateY(calc(var(--ag-icon-size)*-.5 + 1.5px));width:var(--ag-icon-size)}&:focus::-webkit-slider-thumb{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}&:active::-webkit-slider-runnable-track{background-color:var(--ag-accent-color)}}.ag-range-field-input{&::-moz-range-track{background-color:var(--ag-border-color);border-radius:1.5px;height:3px;margin:0;padding:0;width:100%}&::-moz-ag-range-thumb{-moz-appearance:none;appearance:none;background-color:var(--ag-background-color);border:solid var(--ag-border-width) var(--ag-border-color);border-radius:100%;height:var(--ag-icon-size);margin:0;padding:0;transform:translateY(calc(var(--ag-icon-size)*-.5 + 1.5px));width:var(--ag-icon-size)}&:focus::-moz-ag-range-thumb{border-color:var(--ag-accent-color);box-shadow:var(--ag-focus-shadow)}&:active::-moz-ag-range-track{background-color:var(--ag-accent-color)}}`;
// packages/ag-grid-enterprise/src/charts/utils/validGridChartsVersion.ts
var VERSION_CHECKING_FIRST_GRID_MAJOR_VERSION = 28;
var VERSION_CHECKING_FIRST_CHARTS_MAJOR_VERSION = 6;
function isValidVersion(version) {
return version?.match(/\d+\.\d+\.\d+/);
}
function isValidMajorVersion({
gridMajorVersion,
chartsMajorVersion
}) {
const gridMajor = parseInt(gridMajorVersion, 10);
const chartsMajor = parseInt(chartsMajorVersion, 10);
const gridMajorDifference = gridMajor - VERSION_CHECKING_FIRST_GRID_MAJOR_VERSION;
const chartsMajorDifference = chartsMajor - VERSION_CHECKING_FIRST_CHARTS_MAJOR_VERSION;
const isFirstOrAfterVersion = gridMajorDifference >= 0;
return gridMajorDifference === chartsMajorDifference && isFirstOrAfterVersion;
}
function gridChartVersion(gridVersion) {
if (!gridVersion || !isValidVersion(gridVersion)) {
return void 0;
}
const [gridMajor, gridMinor] = gridVersion.split(".") || [];
const gridMajorMinor = `${gridMajor}.${gridMinor}.x`;
const gridMajorNumber = parseInt(gridMajor, 10);
const chartsMajor = gridMajorNumber - VERSION_CHECKING_FIRST_GRID_MAJOR_VERSION + VERSION_CHECKING_FIRST_CHARTS_MAJOR_VERSION;
if (chartsMajor < 0) {
return void 0;
}
const chartsMinor = gridMinor;
const chartsMajorMinor = `${chartsMajor}.${chartsMinor}.x`;
return {
gridMajorMinor,
chartsMajorMinor
};
}
function validGridChartsVersionErrorMessage({
type,
gridVersion,
chartsVersion
}) {
const invalidMessage = "AG Grid: AG Grid version is incompatible. Please see https://www.ag-grid.com/javascript-data-grid/modules/ for more information.";
if (!gridVersion) {
return invalidMessage;
}
const version = gridChartVersion(gridVersion);
if (!version) {
return invalidMessage;
}
const { gridMajorMinor, chartsMajorMinor } = version;
if (type === "incompatible") {
return `AG Grid version ${gridVersion} and AG Charts version ${chartsVersion} is not supported. AG Grid version ${gridMajorMinor} should be used with AG Chart ${chartsMajorMinor}. Please see https://www.ag-grid.com/javascript-data-grid/modules/ for more information.`;
} else if (type === "invalidCharts") {
return `AG Grid version ${gridMajorMinor} should be used with AG Chart ${chartsMajorMinor} not ${chartsVersion}. Please see https://www.ag-grid.com/javascript-data-grid/modules/ for more information.`;
}
return invalidMessage;
}
function validGridChartsVersion({
gridVersion,
chartsVersion
}) {
if (!isValidVersion(chartsVersion)) {
return {
isValid: false,
message: validGridChartsVersionErrorMessage({ type: "invalidCharts", gridVersion, chartsVersion })
};
}
if (!isValidVersion(gridVersion)) {
return {
isValid: false,
message: validGridChartsVersionErrorMessage({ type: "invalidGrid", gridVersion, chartsVersion })
};
}
const [gridMajor, gridMinor] = gridVersion.split(".") || [];
const [chartsMajor, chartsMinor, chartsPatch] = chartsVersion.split(".") || [];
const isValidMajor = isValidMajorVersion({
gridMajorVersion: gridMajor,
chartsMajorVersion: chartsMajor
});
if (isValidMajor && gridMinor === chartsMinor || chartsPatch.includes("beta")) {
return {
isValid: true
};
} else if (!isValidMajor || gridMinor !== chartsMinor) {
return {
isValid: false,
message: validGridChartsVersionErrorMessage({ type: "incompatible", gridVersion, chartsVersion })
};
}
return {
isValid: false,
message: validGridChartsVersionErrorMessage({ type: "invalid", gridVersion, chartsVersion })
};
}
// packages/ag-grid-enterprise/src/charts/integratedChartsModule.ts
var icons = {
// shown on top right of chart when chart is linked to range data (click to unlink)
linked: "linked",
// shown on top right of chart when chart is not linked to range data (click to link)
unlinked: "unlinked",
// icon to open charts menu
chartsMenu: "menu-alt",
// download chart
chartsDownload: "save",
// Edit Chart menu item shown in Integrated Charts menu
chartsMenuEdit: "chart",
// Advanced Settings menu item shown in Integrated Charts menu
chartsMenuAdvancedSettings: "settings",
// shown in Integrated Charts menu add fields
chartsMenuAdd: "plus",
// shown in Integrated Charts tool panel color picker
chartsColorPicker: "small-down",
// previous in Integrated Charts settings tool panel theme switcher
chartsThemePrevious: "previous",
// next in Integrated Charts settings tool panel theme switcher
chartsThemeNext: "next"
};
var apiFunctions = {
getChartModels,
getChartRef,
getChartImageDataURL,
downloadChart,
openChartToolPanel,
closeChartToolPanel,
createRangeChart,
createPivotChart,
createCrossFilterChart,
updateChart,
restoreChart
};
var dependsOn = [
CellSelectionModule,
EnterpriseCoreModule,
SharedDragAndDropModule,
PopupModule,
MenuItemModule
];
var moduleName2 = "IntegratedCharts";
var GridChartsModule = {
moduleName: "GridCharts",
version: VERSION2,
dependsOn,
// included to avoid other false positive warnings about missing modules
validate: () => {
return {
isValid: false,
message: `AG Grid: As of v33, the "GridChartsModule" has been deprecated. Please use "IntegratedChartsModule.with(...)" instead.
${_preInitErrMsg(257)}`
};
}
};
var IntegratedChartsModule = {
moduleName: moduleName2,
version: VERSION2,
dependsOn,
// included to avoid other false positive warnings about missing modules
validate: () => {
return {
isValid: false,
message: _preInitErrMsg(257)
};
},
with: (params) => {
params.setup();
params.setGridContext?.(true);
if (params.isEnterprise && params.setLicenseKey) {
const chartsManager = {
setLicenseKey: params.setLicenseKey
};
LicenseManager.setChartsLicenseManager(chartsManager);
}
return {
moduleName: moduleName2,
version: VERSION2,
icons,
apiFunctions,
dependsOn,
css: [integratedChartsModule_default],
validate: () => {
return validGridChartsVersion({
gridVersion: VERSION2,
chartsVersion: params.VERSION
});
},
beans: [
// bind the params to the constructor to avoid the need for static properties
AgChartsExports.bind(null, params),
ChartService,
ChartTranslationService,
ChartCrossFilterService,
ChartMenuListFactory,
ChartMenuService,
// Include enterprise beans for now for all users as tiny compared to charts bundle size
EnterpriseChartProxyFactory,
AdvancedSettingsMenuFactory
]
};
}
};
// packages/ag-grid-enterprise/src/allEnterpriseModule.ts
var dependsOn2 = [
AllCommunityModule,
ClipboardModule,
ColumnsToolPanelModule,
ExcelExportModule,
FiltersToolPanelModule,
NewFiltersToolPanelModule,
MasterDetailModule,
ColumnMenuModule,
ContextMenuModule,
CellSelectionModule,
RichSelectModule,
RowNumbersModule,
RowGroupingModule,
RowGroupingPanelModule,
GroupFilterModule,
ServerSideRowModelModule,
ServerSideRowModelApiModule,
FormulaModule,
SetFilterModule,
MultiFilterModule,
AdvancedFilterModule,
SideBarModule,
StatusBarModule,
ViewportRowModelModule,
PivotModule,
TreeDataModule,
FindModule,
BatchEditModule,
RowGroupingEditModule,
AiToolkitModule
];
var moduleName3 = "AllEnterprise";
var AllEnterpriseModule = {
with: (params) => ({
moduleName: moduleName3,
version: VERSION2,
dependsOn: [...dependsOn2, IntegratedChartsModule.with(params), SparklinesModule.with(params)]
}),
moduleName: moduleName3,
version: VERSION2,
dependsOn: dependsOn2
};
// packages/ag-grid-enterprise/src/main-umd-shared.ts
function autoRegisterAgCharts() {
const agChartsDynamic = globalThis?.agCharts;
const agChartsModule = agChartsDynamic?.AgChartsEnterpriseModule ?? agChartsDynamic?.AgChartsCommunityModule;
if (agChartsModule) {
ModuleRegistry.registerModules([
IntegratedChartsModule.with(agChartsModule),
SparklinesModule.with(agChartsModule)
]);
}
}
function createGrid2(eGridDiv, gridOptions, params) {
autoRegisterAgCharts();
return createGrid(eGridDiv, gridOptions, params);
}
// packages/ag-grid-enterprise/src/main-umd-noStyles.ts
_setUmd();
ModuleRegistry.registerModules([AllEnterpriseModule]);
;if (typeof module.exports == "object" && typeof exports == "object") {
var __cp = (to, from, except, desc) => {
if ((from && typeof from === "object") || typeof from === "function") {
for (let key of Object.getOwnPropertyNames(from)) {
if (!Object.prototype.hasOwnProperty.call(to, key) && key !== except)
Object.defineProperty(to, key, {
get: () => from[key],
enumerable: !(desc = Object.getOwnPropertyDescriptor(from, key)) || desc.enumerable,
});
}
}
return to;
};
module.exports = __cp(module.exports, exports);
}
return module.exports;
}))