@geoscene/charts-components 5.0.19

package/dist/model/interfaces/common.d.ts

@@ -0,0 +1,172 @@
+import type { SupportedLayer } from "../../interfaces.js";
+import type { WebChartTypes } from "../../spec/chart-object-literals.js";
+import type { IField } from "../../spec/rest-js-types.js";
+import type { WebChartBarChartSeries, WebChartBoxPlotSeries, WebChartGaugeSeries, WebChartHeatChartSeries, WebChartHistogramSeries, WebChartLineChartSeries, WebChartPieChartSeries, WebChartRadarChartSeries, WebChartScatterplotSeries } from "../../spec/web-chart.js";
+import type { SupportedChartSeries } from "../../utils/types/index.js";
+import type { BarChartModel } from "../bar-chart-model/bar-chart-model.js";
+import type { BoxPlotModel } from "../box-plot-model/box-plot-model.js";
+import type { ComboBarLineChartModel } from "../combo-bar-line-chart-model/combo-bar-line-chart-model.js";
+import type { GaugeModel } from "../gauge-model/gauge-model.js";
+import type { HistogramModel } from "../histogram-model/histogram-model.js";
+import type { LineChartModel } from "../line-chart-model/line-chart-model.js";
+import type { PieChartModel } from "../pie-chart-model/pie-chart-model.js";
+import type { RadarChartModel } from "../radar-chart-model/radar-chart-model.js";
+import type { ScatterplotModel } from "../scatterplot-model/scatterplot-model.js";
+
+export const customSortString: "customSort";
+
+export const SerialChartDataSortingKinds: {
+    readonly xAxisAsc: "xAxisAsc";
+    readonly xAxisDesc: "xAxisDesc";
+    readonly yAxisAsc: "yAxisAsc";
+    readonly yAxisDesc: "yAxisDesc";
+    readonly customSort: "customSort";
+};
+
+export type SerialChartDataSortingKinds = (typeof SerialChartDataSortingKinds)[keyof typeof SerialChartDataSortingKinds];
+
+export const BoxPlotDataSortingKinds: {
+    readonly xAxisAsc: "xAxisAsc";
+    readonly xAxisDesc: "xAxisDesc";
+    readonly meanAsc: "meanAsc";
+    readonly meanDesc: "meanDesc";
+    readonly medianAsc: "medianAsc";
+    readonly medianDesc: "medianDesc";
+    readonly customSort: "customSort";
+};
+
+export type BoxPlotDataSortingKinds = (typeof BoxPlotDataSortingKinds)[keyof typeof BoxPlotDataSortingKinds];
+
+export const HeatChartDataSortingKinds: {
+    readonly Asc: "Asc";
+    readonly Desc: "Desc";
+    readonly customSort: "customSort";
+};
+
+export type HeatChartDataSortingKinds = (typeof HeatChartDataSortingKinds)[keyof typeof HeatChartDataSortingKinds];
+
+export const PieChartDataSortingKinds: {
+    readonly labelAsc: "labelAsc";
+    readonly labelDesc: "labelDesc";
+    readonly valueAsc: "valueAsc";
+    readonly valueDesc: "valueDesc";
+    readonly customSort: "customSort";
+};
+
+export type PieChartDataSortingKinds = (typeof PieChartDataSortingKinds)[keyof typeof PieChartDataSortingKinds];
+
+export const PieChartDataModes: {
+    readonly Category: "category";
+    readonly Fields: "fields";
+};
+
+export type PieChartDataModes = (typeof PieChartDataModes)[keyof typeof PieChartDataModes];
+
+export const PieChartSlicesDisplay: {
+    readonly Category: "category";
+    readonly Value: "value";
+    readonly Percentage: "percentage";
+    readonly Both: "both";
+};
+
+export type PieChartSlicesDisplay = (typeof PieChartSlicesDisplay)[keyof typeof PieChartSlicesDisplay];
+
+export const FormatKeys: {
+    readonly TextElements: "textElements";
+    readonly XAxisTitle: "xAxisTitle";
+    readonly YAxisTitle: "yAxisTitle";
+    readonly AxisLabels: "axisLabels";
+    readonly GuideLabels: "guideLabels";
+    readonly Title: "title";
+    readonly LegendText: "legendText";
+    readonly LegendTitle: "legendTitle";
+    readonly Description: "description";
+    readonly DataLabels: "dataLabels";
+    readonly Background: "background";
+    readonly LeaderLines: "leaderLines";
+    readonly AxisLines: "axisLines";
+    readonly GridLines: "gridLines";
+};
+
+export type FormatKeys = (typeof FormatKeys)[keyof typeof FormatKeys];
+
+export const LineFormatKeys: {
+    readonly AxisLines: "axisLines";
+    readonly GridLines: "gridLines";
+    readonly LeaderLines: "leaderLines";
+};
+
+export type LineFormatKeys = (typeof LineFormatKeys)[keyof typeof LineFormatKeys];
+
+export const TextFormatKeys: {
+    readonly Title: "title";
+    readonly XAxisTitle: "xAxisTitle";
+    readonly YAxisTitle: "yAxisTitle";
+    readonly AxisLabels: "axisLabels";
+    readonly GuideLabels: "guideLabels";
+    readonly LegendText: "legendText";
+    readonly LegendTitle: "legendTitle";
+    readonly Description: "description";
+    readonly DataLabels: "dataLabels";
+};
+
+export type TextFormatKeys = (typeof TextFormatKeys)[keyof typeof TextFormatKeys];
+
+export const ColorFormatKeys: { readonly Background: "background"; };
+
+export type ColorFormatKeys = (typeof ColorFormatKeys)[keyof typeof ColorFormatKeys];
+
+/** Axis orientation of the guide. */
+export const GuideOrientation: {
+    readonly X: "x";
+    readonly Y: "y";
+};
+
+export type GuideOrientation = (typeof GuideOrientation)[keyof typeof GuideOrientation];
+
+export interface SplitByFieldInfos {
+  categoriesArray: (number | string)[];
+  splitByFieldType?: string;
+  numericalField: string;
+}
+
+export interface PieSeriesDisplayOptions {
+  displayCategoryOnDataLabel: boolean;
+  displayNumericValueOnDataLabel: boolean;
+  displayPercentageOnDataLabel: boolean;
+  displayNumericValue: boolean;
+  displayPercentage: boolean;
+}
+
+export interface LayerInfo {
+  /** Layer used for this bar chart. */
+  layer: SupportedLayer;
+  /** Fields information for the layer. */
+  layerFieldsInfo: IField[];
+  /** Object ID field name for the layer. */
+  objectIdField: string;
+}
+
+export const ModelTypes: {
+    readonly BarChart: "barChart";
+    readonly LineChart: "lineChart";
+    readonly ComboBarLineChart: "comboBarLineChart";
+    readonly BoxPlot: "boxPlot";
+    readonly PieChart: "pieChart";
+    readonly Scatterplot: "scatterplot";
+    readonly Histogram: "histogram";
+    readonly Gauge: "gauge";
+    readonly RadarChart: "radarChart";
+    readonly HeatChart: "heatChart";
+};
+
+export type ModelTypes = (typeof ModelTypes)[keyof typeof ModelTypes];
+
+/** @internal */
+export type ModelTypeToSeriesType<T extends ModelTypes> = T extends typeof ModelTypes.BarChart ? WebChartBarChartSeries : T extends typeof ModelTypes.LineChart ? WebChartLineChartSeries : T extends typeof ModelTypes.ComboBarLineChart ? WebChartBarChartSeries | WebChartLineChartSeries : T extends typeof ModelTypes.BoxPlot ? WebChartBoxPlotSeries | WebChartLineChartSeries : T extends typeof ModelTypes.PieChart ? WebChartPieChartSeries : T extends typeof ModelTypes.Scatterplot ? WebChartScatterplotSeries : T extends typeof ModelTypes.Histogram ? WebChartHistogramSeries : T extends typeof ModelTypes.Gauge ? WebChartGaugeSeries : T extends typeof ModelTypes.RadarChart ? WebChartRadarChartSeries : T extends typeof ModelTypes.HeatChart ? WebChartHeatChartSeries : SupportedChartSeries;
+
+/** @internal */
+export type SeriesTypeToChartType<T extends SupportedChartSeries> = T extends WebChartBarChartSeries ? typeof WebChartTypes.BarSeries : T extends WebChartLineChartSeries ? typeof WebChartTypes.LineSeries : T extends WebChartBoxPlotSeries ? typeof WebChartTypes.BoxPlotSeries : T extends WebChartPieChartSeries ? typeof WebChartTypes.PieSeries : T extends WebChartScatterplotSeries ? typeof WebChartTypes.ScatterSeries : T extends WebChartHistogramSeries ? typeof WebChartTypes.HistogramSeries : T extends WebChartGaugeSeries ? typeof WebChartTypes.GaugeSeries : T extends WebChartRadarChartSeries ? typeof WebChartTypes.RadarSeries : T extends WebChartHeatChartSeries ? typeof WebChartTypes.HeatSeries : never;
+
+/** @internal */
+export type ModelOfType<T> = T extends typeof ModelTypes.BoxPlot ? BoxPlotModel : T extends typeof ModelTypes.LineChart ? LineChartModel : T extends typeof ModelTypes.ComboBarLineChart ? ComboBarLineChartModel : T extends typeof ModelTypes.PieChart ? PieChartModel : T extends typeof ModelTypes.Scatterplot ? ScatterplotModel : T extends typeof ModelTypes.Histogram ? HistogramModel : T extends typeof ModelTypes.Gauge ? GaugeModel : T extends typeof ModelTypes.RadarChart ? RadarChartModel : T extends typeof ModelTypes.HeatChart ? never : BarChartModel;

package/dist/model/line-chart-model/line-chart-model.d.ts

@@ -0,0 +1,20 @@
+import type { ModelParams } from "../interfaces/chart-interfaces.js";
+import type { ModelTypes } from "../interfaces/common.js";
+import type { SerialChartModel } from "../serial-chart-model/serial-chart-model.js";
+import type { WithNegativeValuesStackedToBaseline } from "../properties/series/negative-values-stacked-to-baseline.js";
+import type { ChartConfig } from "../../utils/types/index.js";
+import type { ModelWithLineMarkerStyling } from "../mixins/model-with-line-marker-styling.js";
+
+export class LineChartModel extends LineChartModelSuperclass {
+  /** Returns whether the series styling is able to be reset. */
+  resetAvailable(): boolean;
+  /** Resets the series styling to the default styling. */
+  resetSeriesStyling(): void;
+  /**
+   * Completes the async setup process for the chart model. Must be called before using the model.
+   *
+   * @param params
+   */
+  setup(params: ModelParams<ChartConfig<typeof ModelTypes.LineChart>>): Promise<void>;
+}
+declare const LineChartModelSuperclass: typeof SerialChartModel & typeof ModelWithLineMarkerStyling & typeof WithNegativeValuesStackedToBaseline

package/dist/model/mixins/model-with-guides.d.ts

@@ -0,0 +1,140 @@
+import type { ChartModel } from "../chart-model/chart-model.js";
+import type { GuideOrientation } from "../interfaces/common.js";
+import type { WebChartTextSymbol } from "../../spec/web-chart.js";
+import type { ISimpleFillSymbol, ISimpleLineSymbol } from "../../spec/rest-js-types.js";
+
+export abstract class ModelWithGuides extends ChartModel {
+  /** The guide labels text symbol (font, color, style). */
+  accessor guideLabelsSymbol: WebChartTextSymbol | undefined;
+  /**
+   * Gets whether the guide should be rendered above the other chart elements.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideAbove(index?: number, orientation?: GuideOrientation): boolean;
+  /**
+   * Gets the end value of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideEnd(index?: number, orientation?: GuideOrientation): Date | number | string | null | undefined;
+  /**
+   * Gets the guide label text.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideLabelText(index?: number, orientation?: GuideOrientation): string | undefined;
+  /**
+   * Gets the name of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideName(index?: number, orientation?: GuideOrientation): string | undefined;
+  /**
+   * Gets the start value of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideStart(index?: number, orientation?: GuideOrientation): Date | number | string | null;
+  /**
+   * Gets the guide style.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideStyle(index?: number, orientation?: GuideOrientation): ISimpleFillSymbol | ISimpleLineSymbol | undefined;
+  /**
+   * Gets whether a guide is visible.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideVisibility(index?: number, orientation?: GuideOrientation): boolean;
+  /**
+   * Gets whether the tooltip text color should be reversed for a guide.
+   *
+   * @param index - The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - The axis orientation of the guide.
+   */
+  getTooltipReverseColor(index: number, orientation?: GuideOrientation): boolean;
+  /**
+   * Sets whether the guide should be rendered above the other chart elements.
+   *
+   * @param above - New above boolean to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideAbove(above: boolean, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets the end value of a guide.
+   *
+   * @param end - New end value to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideEnd(end: Date | number | string | null | undefined, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets the guide label text.
+   *
+   * @param labelText - New label text to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideLabelText(labelText: string, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets the name of a guide.
+   *
+   * @param name - New name to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideName(name: string, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets the start value of a guide.
+   *
+   * @param start - New start value to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideStart(start: Date | number | string | null, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets the guide style.
+   *
+   * @param style - New style to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   * @example
+   * ```ts
+   * chartModel.setGuideStyle(
+   *  {
+   *     type: "esriSLS",
+   *     color: [0, 200, 0, 255],
+   *     width: 2,
+   *   },
+   *   1,
+   * );
+   * ```
+   */
+  setGuideStyle(style: ISimpleFillSymbol | ISimpleLineSymbol, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets whether a guide is visible.
+   *
+   * @param visible - New visibility to set.
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  setGuideVisibility(visible: boolean, index?: number, orientation?: GuideOrientation): void;
+  /**
+   * Sets whether the tooltip text color should be reversed for a guide.
+   *
+   * @param reverseColor - New reverseColor boolean to set.
+   * @param index - The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - The axis orientation of the guide.
+   */
+  setTooltipReverseColor(reverseColor: boolean, index: number, orientation?: GuideOrientation): void;
+}

package/dist/model/mixins/model-with-legend.d.ts

@@ -0,0 +1,22 @@
+import type { ChartModel } from "../chart-model/chart-model.js";
+import type { WebChartLegendPositions } from "../../spec/chart-object-literals.js";
+import type { WebChartTextSymbol } from "../../spec/web-chart.js";
+
+export abstract class ModelWithLegend extends ChartModel {
+  /** Maximum legend height. */
+  accessor legendMaxHeight: number | undefined;
+  /** Legend position: `top`, `bottom`, `left`, or `right`. */
+  accessor legendPosition: WebChartLegendPositions;
+  /** Whether legend markers are rounded. */
+  accessor legendRoundMarker: boolean;
+  /** Legend item text symbol (font, color, style). */
+  accessor legendTextSymbol: WebChartTextSymbol | undefined;
+  /** Legend title text symbol (font, color, style). */
+  accessor legendTitleSymbol: WebChartTextSymbol | undefined;
+  /** The legend title text. */
+  accessor legendTitleText: string;
+  /** Whether the legend title is visible. */
+  accessor legendTitleVisibility: boolean;
+  /** Whether the legend title is visible. */
+  accessor legendVisibility: boolean;
+}

package/dist/model/mixins/model-with-line-marker-styling.d.ts

@@ -0,0 +1,139 @@
+import type { ChartModel } from "../chart-model/chart-model.js";
+import type { RESTSimpleLineSymbolStyle, RESTSimpleMarkerSymbolStyle } from "../../spec/rest-js-object-literals.js";
+import type { Color } from "../../spec/rest-js-types.js";
+
+export abstract class ModelWithLineMarkerStyling extends ChartModel {
+  /**
+   * Specify the color of the filled area for line chart.
+   * **Note:** `areaColor` will be applied only if `showArea` is true, and is defaulted to the line color if not provided.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getAreaColor(seriesIndex: number): Color | undefined;
+  /**
+   * Specify the color of the filled area for line chart.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getConnectLines(seriesIndex: number): boolean | undefined;
+  /**
+   * Gets the line style of the series based on the series index. If the index is out of bounds, it will return `undefined`.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getSeriesLineStyle(seriesIndex: number): RESTSimpleLineSymbolStyle | undefined;
+  /**
+   * Gets the line width of the series based on the series index. If the index is out of bounds, it will return `undefined`.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getSeriesLineWidth(seriesIndex: number): number | undefined;
+  /**
+   * Gets the marker color of the series based on the series index. If the index is out of bounds, it will return `undefined`.
+   *
+   * @param seriesIndex - The index of the series.
+   * @returns Color | undefined
+   */
+  getSeriesMarkerColor(seriesIndex: number): Color | undefined;
+  /**
+   * Gets the marker size of the series based on the series index. If the index is out of bounds, it will return `undefined`.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getSeriesMarkerSize(seriesIndex: number): number | undefined;
+  /**
+   * Gets the marker style of the series based on the series index. If the index is out of bounds, it will return `undefined`.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  getSeriesMarkerStyle(seriesIndex: number): RESTSimpleMarkerSymbolStyle | undefined;
+  /**
+   * Specify whether the line series should show area.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  isAreaVisible(seriesIndex: number): boolean;
+  /**
+   * Specify whether line segments of the series should be smoothed.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  isLineSmoothed(seriesIndex: number): boolean;
+  /**
+   * Indicate whether to show or hide the markers/bullets of the line series.
+   *
+   * @param seriesIndex - The index of the series.
+   */
+  isMarkerVisible(seriesIndex: number): boolean;
+  /**
+   * Specify the color of the filled area for line chart.
+   *
+   * @param color - The color of the filled area for line chart.
+   * @param seriesIndex - The index of the series.
+   */
+  setAreaColor(color: Color | undefined, seriesIndex: number): void;
+  /**
+   * Specify whether the line series should show area.
+   *
+   * @param visible - `true` if the line series should show area, `false` otherwise.
+   * @param seriesIndex - The index of the series.
+   */
+  setAreaVisible(visible: boolean, seriesIndex: number): void;
+  /**
+   * Specify whether to connect the lines when there's a gap in the data.
+   * **Note:** Can be overridden by the temporal data setting `nullPolicy`.
+   *
+   * @param connect - Whether to connect the gap in the data
+   * @param seriesIndex - The index of the series.
+   */
+  setConnectLines(connect: boolean | undefined, seriesIndex: number): void;
+  /**
+   * Specify whether line segments of the series should be smoothed.
+   *
+   * @param smoothed - `true` if line segment of the series should be smoothed, `false` otherwise.
+   * @param seriesIndex - The index of the series.
+   */
+  setLineSmoothed(smoothed: boolean, seriesIndex: number): void;
+  /**
+   * Indicate whether to show or hide the markers/bullets of the line series.
+   *
+   * @param visible - `true` if the markers/bullets of the line series should be shown, `false` otherwise.
+   * @param seriesIndex - The index of the series.
+   */
+  setMarkerVisible(visible: boolean, seriesIndex: number): void;
+  /**
+   * Sets the line style of the series based on the series index.
+   *
+   * @param style - The new style for the series.
+   * @param seriesIndex - The index of the series.
+   */
+  setSeriesLineStyle(style: RESTSimpleLineSymbolStyle | undefined, seriesIndex: number): void;
+  /**
+   * Sets the line width of the series based on the series index.
+   *
+   * @param width - The new width for the series.
+   * @param seriesIndex - The index of the series.
+   */
+  setSeriesLineWidth(width: number | undefined, seriesIndex: number): void;
+  /**
+   * Sets the marker color of the series based on the series index.
+   *
+   * @param color - The new color for the series.
+   * @param seriesIndex - The index of the series.
+   */
+  setSeriesMarkerColor(color: Color | undefined, seriesIndex: number): void;
+  /**
+   * Sets the marker size of the series based on the series index.
+   *
+   * @param size - The new size for the series.
+   * @param seriesIndex - The index of the series.
+   */
+  setSeriesMarkerSize(size: number | undefined, seriesIndex: number): void;
+  /**
+   * Sets the marker style of the series based on the series index.
+   *
+   * @param style - The new style for the series.
+   * @param seriesIndex - The index of the series.
+   */
+  setSeriesMarkerStyle(style: RESTSimpleMarkerSymbolStyle | undefined, seriesIndex: number): void;
+}