@arcgis/charts-components 5.1.0-next.98 → 5.2.0-next.0

package/dist/chunks/x-bounds.js

@@ -1,41 +1,15 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { C as _ } from "./chart-model.js";
 import { cloneDeep as h } from "lodash-es";
-import "@arcgis/toolkit/type";
-import { u as x } from "./series-types.js";
-import { i as c } from "./rest-js-object-literals.js";
-import "@arcgis/toolkit/intl";
-import "luxon";
-import { bf as S, aN as L, T as p, a$ as T, ac as C } from "./index.js";
-import "@esri/arcgis-html-sanitizer";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/layers/support/CodedValueDomain.js";
-import "@arcgis/core/intl.js";
-import "simple-statistics";
-import "@arcgis/core/request.js";
-import "@arcgis/core/core/sql.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import "./runtime.js";
-import { p as X, o as B } from "./index4.js";
-import "@arcgis/core/applications/Components/imageryUtils.js";
-import "@arcgis/core/geometry/Extent.js";
-import "@arcgis/core/geometry/Point.js";
-import "@arcgis/toolkit/dom";
 import { G as g } from "./common.js";
+import { i as c } from "./rest-js-object-literals.js";
+import { u as x } from "./chart-object-literals.js";
+import { af as S, I as L, T as b, Z as T } from "./index.js";
+import { M as C } from "./index2.js";
+import { q as X, p as B } from "./index6.js";
 import { m as a, C as f } from "./model-setter.js";
-import { e as A, f as M } from "./utils2.js";
-import { k as m, s as b, a as O } from "./utils.js";
+import { e as M, f as A } from "./utils2.js";
+import { k as p, s as y, a as O } from "./utils.js";
 const P = (t) => {
   for (const e of t.axes ?? [])
     for (const i of e?.guides ?? [])
@@ -48,7 +22,7 @@ const P = (t) => {
       s.label = h(t), s.label !== void 0 && (s.label.text = o);
     }
 };
-function r(t) {
+function d(t) {
   return {
     ...t,
     axis: t.orientation === g.X ? t.config.axes?.[0] : t.config.axes?.[1],
@@ -57,76 +31,76 @@ function r(t) {
   };
 }
 const V = (t) => {
-  const { axis: e, index: i } = r(t);
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.visible ?? !0;
 }, R = (t) => {
-  const { visible: e, axis: i, index: s } = r(t);
+  const { visible: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].visible = e);
-}, y = (t) => {
+}, m = (t) => {
   const e = C(t.start, t.end);
   X(t.style) && e === c.SFS ? t.style = { type: c.SFS, color: t.style.color } : B(t.style) && e === c.SLS && (t.style = { type: c.SLS, color: t.style.color });
 }, E = (t) => {
-  const { axis: e, index: i } = r(t);
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.start ?? null;
 }, w = (t) => {
-  const { start: e, axis: i, index: s } = r(t);
-  i?.guides?.[s] !== void 0 && (i.guides[s].start = e, y(i.guides[s]));
+  const { start: e, axis: i, index: s } = d(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].start = e, m(i.guides[s]));
 }, F = (t) => {
-  const { axis: e, index: i } = r(t);
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.end;
 }, W = (t) => {
-  const { end: e, axis: i, index: s } = r(t);
-  i?.guides?.[s] !== void 0 && (i.guides[s].end = e, y(i.guides[s]));
-}, $ = (t) => {
-  const { axis: e, index: i } = r(t);
-  return e?.guides?.[i]?.name;
+  const { end: e, axis: i, index: s } = d(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].end = e, m(i.guides[s]));
 }, j = (t) => {
-  const { name: e, axis: i, index: s } = r(t);
+  const { axis: e, index: i } = d(t);
+  return e?.guides?.[i]?.name;
+}, $ = (t) => {
+  const { name: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].name = e);
-}, N = (t) => {
-  const { axis: e, index: i } = r(t);
-  return e?.guides?.[i]?.label?.text;
 }, I = (t) => {
-  const { labelText: e, axis: i, index: s } = r(t), o = i?.guides?.[s]?.label ?? S(e, L(p.GuideLabel), p.GuideLabel);
+  const { axis: e, index: i } = d(t);
+  return e?.guides?.[i]?.label?.text;
+}, N = (t) => {
+  const { labelText: e, axis: i, index: s } = d(t), o = i?.guides?.[s]?.label ?? S(e, L(b.GuideLabel), b.GuideLabel);
   i?.guides?.[s] !== void 0 && (i.guides[s].label = { ...o, text: e });
-}, U = (t) => {
-  const { axis: e, index: i } = r(t);
+}, q = (t) => {
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.above ?? !1;
-}, Y = (t) => {
-  const { above: e, axis: i, index: s } = r(t);
+}, U = (t) => {
+  const { above: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].above = e);
-}, q = (t) => {
-  const { axis: e, index: i } = r(t);
+}, Y = (t) => {
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.style;
-}, z = (t) => {
-  const { style: e, axis: i, index: s } = r(t);
+}, Z = (t) => {
+  const { style: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].style = e);
-}, qe = (t) => {
+}, Ge = (t) => {
   const { config: e, name: i, index: s, orientation: o } = t, n = o === g.X ? e.axes?.[0] : e.axes?.[1];
   if (n !== void 0) {
     n.guides = n.guides ?? [];
-    const d = {
+    const r = {
       type: x.Guide,
       name: i,
       start: n.valueFormat.type === x.DateAxisFormat ? "" : 0,
       style: T()
     };
-    s !== void 0 && s < n.guides.length ? n.guides.splice(s, 0, d) : n.guides.push(d);
+    s !== void 0 && s < n.guides.length ? n.guides.splice(s, 0, r) : n.guides.push(r);
   }
-}, ze = (t) => {
+}, _e = (t) => {
   const { config: e, index: i, orientation: s } = t, o = s === g.X ? e.axes?.[0] : e.axes?.[1];
   o?.guides !== void 0 && (i !== void 0 && i < o.guides.length ? o.guides.splice(i, 1) : o.guides.pop());
-}, H = (t) => {
-  const { axis: e, index: i } = r(t);
+}, z = (t) => {
+  const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.tooltipReverseColor ?? !1;
-}, J = (t) => {
-  const { reverseColor: e, axis: i, index: s } = r(t);
+}, H = (t) => {
+  const { reverseColor: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].tooltipReverseColor = e);
 };
-var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
-  for (var o = Q(e, i), n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (o = d(e, i, o) || o);
-  return o && K(e, i, o), o;
+var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var o = K(e, i), n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (o = r(e, i, o) || o);
+  return o && J(e, i, o), o;
 };
 class l extends _ {
   /**
@@ -181,10 +155,10 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideName(e, i) {
-    return $({ config: this._config, index: e, orientation: i });
+    return j({ config: this._config, index: e, orientation: i });
   }
   setGuideName(e, i, s) {
-    j({ name: e, config: this._config, index: i, orientation: s });
+    $({ name: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets the guide label text.
@@ -193,10 +167,10 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideLabelText(e, i) {
-    return N({ config: this._config, index: e, orientation: i });
+    return I({ config: this._config, index: e, orientation: i });
   }
   setGuideLabelText(e, i, s) {
-    I({ labelText: e, config: this._config, index: i, orientation: s });
+    N({ labelText: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets whether the guide should be rendered above the other chart elements.
@@ -205,10 +179,10 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideAbove(e, i) {
-    return U({ config: this._config, index: e, orientation: i });
+    return q({ config: this._config, index: e, orientation: i });
   }
   setGuideAbove(e, i, s) {
-    Y({ above: e, config: this._config, index: i, orientation: s });
+    U({ above: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets the guide style.
@@ -217,10 +191,10 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideStyle(e, i) {
-    return q({ config: this._config, index: e, orientation: i });
+    return Y({ config: this._config, index: e, orientation: i });
   }
   setGuideStyle(e, i, s) {
-    z({ style: e, config: this._config, index: i, orientation: s });
+    Z({ style: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets whether the tooltip text color should be reversed for a guide.
@@ -229,10 +203,10 @@ class l extends _ {
    * @param orientation - The axis orientation of the guide.
    */
   getTooltipReverseColor(e, i) {
-    return H({ config: this._config, index: e, orientation: i });
+    return z({ config: this._config, index: e, orientation: i });
   }
   setTooltipReverseColor(e, i, s) {
-    J({ reverseColor: e, config: this._config, index: i, orientation: s });
+    H({ reverseColor: e, config: this._config, index: i, orientation: s });
   }
 }
 u([
@@ -262,26 +236,26 @@ u([
 u([
   a
 ], l.prototype, "setTooltipReverseColor");
-class He extends f {
+class he extends f {
   /**
    * Whether the x-axis labels are visible.
    */
   get xAxisLabelsVisibility() {
-    return A(0, this._config);
+    return M(0, this._config);
   }
   set xAxisLabelsVisibility(e) {
     this.guardSetterFromAsyncOverwrite(() => {
-      M(e, 0, this._config), this.emitConfigUpdate("xAxisLabelsVisibility");
+      A(e, 0, this._config), this.emitConfigUpdate("xAxisLabelsVisibility");
     });
   }
 }
-var Z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, ee = (t, e, i, s) => {
-  for (var o = k(e, i), n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (o = d(e, i, o) || o);
-  return o && Z(e, i, o), o;
+var Q = Object.defineProperty, k = Object.getOwnPropertyDescriptor, ee = (t, e, i, s) => {
+  for (var o = k(e, i), n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (o = r(e, i, o) || o);
+  return o && Q(e, i, o), o;
 };
-const ie = (t) => m({ config: t, axisIndex: 0, isMax: !0 }), te = (t, e) => {
-  b({ config: t, value: e, axisIndex: 0, isMax: !0 });
+const ie = (t) => p({ config: t, axisIndex: 0, isMax: !0 }), te = (t, e) => {
+  y({ config: t, value: e, axisIndex: 0, isMax: !0 });
 };
 class v extends f {
   /**
@@ -300,12 +274,12 @@ ee([
   a
 ], v.prototype, "maxXBound");
 var se = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, ne = (t, e, i, s) => {
-  for (var o = oe(e, i), n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (o = d(e, i, o) || o);
+  for (var o = oe(e, i), n = t.length - 1, r; n >= 0; n--)
+    (r = t[n]) && (o = r(e, i, o) || o);
   return o && se(e, i, o), o;
 };
-const re = (t) => m({ config: t, axisIndex: 0, isMax: !1 }), de = (t, e) => {
-  b({ config: t, value: e, axisIndex: 0, isMax: !1 });
+const de = (t) => p({ config: t, axisIndex: 0, isMax: !1 }), re = (t, e) => {
+  y({ config: t, value: e, axisIndex: 0, isMax: !1 });
 };
 class G extends f {
   /**
@@ -314,10 +288,10 @@ class G extends f {
    * `null` indicates no explicit minimum.
    */
   get minXBound() {
-    return re(this._config);
+    return de(this._config);
   }
   set minXBound(e) {
-    de(this._config, e);
+    re(this._config, e);
   }
 }
 ne([
@@ -328,8 +302,8 @@ class ae extends f {
 O(ae, [v, G]);
 export {
   l as M,
-  He as W,
-  qe as a,
+  he as W,
+  Ge as a,
   ae as b,
-  ze as d
+  _e as d
 };

package/dist/components/arcgis-chart/customElement.d.ts

@@ -14,6 +14,7 @@ import type { WebChart, WebChartDataFilters } from "../../spec/web-chart.js";
 import type { DataWarningObject, ValidationStatus } from "../../utils/chart-config/validator/interfaces.js";
 import type { AxesMinMaxChangePayload, DataProcessCompletePayload, LegendItemVisibilityChangePayload, NoRenderPropChangePayload, SelectionCompletePayload, SeriesColorChangePayload } from "../../utils/components/event-payloads.js";
 import type { MissingSplitBySeriesProps, DownloadableChartImagesTypes } from "../../utils/components/interfaces.js";
+import type { CalciteThemeCSSVariables } from "../../utils/components/themes.js";
 import type { ActionModes, CursorRange } from "../../utils/cursor/interfaces.js";
 import type { ChartElementLimit } from "../../utils/defaults/interfaces.js";
 import type { LoaderColors, SelectionData, SelectionTheme } from "../../utils/misc/interfaces.js";
@@ -89,6 +90,22 @@ export abstract class ArcgisChart extends LitElement {
    * @default false
    */
   accessor autoInverseDataLabelTextColor: boolean;
+  /**
+   * Allows picking the Calcite CSS variables to use when applying a Calcite theme.
+   *
+   * By default the following variables are used:
+   * background: --calcite-color-foreground-1
+   * text: --calcite-color-text-1
+   * line: --calcite-color-border-1
+   * secondary line: --calcite-color-text-3
+   * spinner: --calcite-color-brand-hover
+   *
+   * The charts colors are overridden by those associated to those CSS variables, but only if they have not been
+   * customized beforehand.
+   *
+   * @since 5.1
+   */
+  accessor calciteThemingCSSVariables: CalciteThemeCSSVariables;
   /**
    * The index of the chart to be rendered from the layer. Must be used in conjunction with the `layerItemId` or `layer` property.
    *
@@ -183,6 +200,12 @@ export abstract class ArcgisChart extends LitElement {
               quarterOfYear: string;
           };
           null: string;
+          accessibility: { gauge: {
+              innerLabel: string;
+              maximumValue: string;
+              minimumValue: string;
+              gauge: string;
+          }; };
       };
       errorStrings: {
           errorHeading: string;
@@ -270,6 +293,7 @@ export abstract class ArcgisChart extends LitElement {
               noDataMessage: string;
               noDataFBSMessage: string;
               noDataFBEMessage: string;
+              noValue: string;
               exportImageChartNotReady: string;
               exportImage: string;
               defaultError: string;
@@ -441,6 +465,12 @@ export abstract class ArcgisChart extends LitElement {
               quarterOfYear: string;
           };
           null: string;
+          accessibility: { gauge: {
+              innerLabel: string;
+              maximumValue: string;
+              minimumValue: string;
+              gauge: string;
+          }; };
       };
       errorStrings: {
           errorHeading: string;
@@ -528,6 +558,7 @@ export abstract class ArcgisChart extends LitElement {
               noDataMessage: string;
               noDataFBSMessage: string;
               noDataFBEMessage: string;
+              noValue: string;
               exportImageChartNotReady: string;
               exportImage: string;
               defaultError: string;
@@ -681,25 +712,6 @@ export abstract class ArcgisChart extends LitElement {
    * @default false
    */
   accessor disableTogglingLegendItems: boolean;
-  /**
-   * Whether to enable automatic chart theming based on Calcite theme detection.
-   *
-   * **Note**: Currently, only the `calcite-mode-dark` theme is supported. When this theme
-   * is applied, all chart colors are automatically adjusted for dark mode and
-   * any custom chart colors will be overridden. This includes series, axes, grid and other elements.
-   *
-   * When `true`, the chart component will automatically apply the
-   * supported Calcite theme if it is detected on the chart container or any
-   * parent element.
-   *
-   * When `false` (default), the chart component will not apply any Calcite-based theming,
-   * even if a supported Calcite theme is detected.
-   *
-   * @default false
-   * @since 5.0
-   * @internal
-   */
-  accessor enableAutoTheming: boolean;
   /**
    * Whether to enable the beta features from the chart component.
    *
@@ -914,6 +926,7 @@ export abstract class ArcgisChart extends LitElement {
   /**
    * Defines the colors for the loader animation.
    *
+   * @deprecated since 5.1. Customize the Calcite CSS variables defined by [calciteThemingCSSVariables](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#calciteThemingCSSVariables) instead.
    * @example
    * ```ts
    * // Set a blue curtain and a red spinner for the loader animation
@@ -982,6 +995,12 @@ export abstract class ArcgisChart extends LitElement {
               quarterOfYear?: string | undefined;
           } | undefined;
           null?: string | undefined;
+          accessibility?: { gauge?: {
+              innerLabel?: string | undefined;
+              maximumValue?: string | undefined;
+              minimumValue?: string | undefined;
+              gauge?: string | undefined;
+          } | undefined; } | undefined;
       } | undefined;
       errorStrings?: {
           errorHeading?: string | undefined;
@@ -1069,6 +1088,7 @@ export abstract class ArcgisChart extends LitElement {
               noDataMessage?: string | undefined;
               noDataFBSMessage?: string | undefined;
               noDataFBEMessage?: string | undefined;
+              noValue?: string | undefined;
               exportImageChartNotReady?: string | undefined;
               exportImage?: string | undefined;
               defaultError?: string | undefined;
@@ -1253,7 +1273,15 @@ export abstract class ArcgisChart extends LitElement {
    *
    * **Note**: Applicable to bar chart, line chart, combo bar and line chart and box plot.
    *
-   * @deprecated since 5.0. Use charts model's [rotatedState](https://developers.arcgis.com/javascript/latest/references/charts-components/model/bar-chart-model/bar-chart-model/#rotatedState) prop instead.
+   * @default false
+   */
+  accessor rotated: boolean;
+  /**
+   * When `true`, the chart is rotated 90 degrees so that the x-axis becomes vertical and the y-axis becomes horizontal.
+   *
+   * **Note**: Applicable to bar chart, line chart, combo bar and line chart and box plot.
+   *
+   * @deprecated since 5.0. Use either [rotated](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#rotated) or the charts model's [rotated](https://developers.arcgis.com/javascript/latest/references/charts-components/model/bar-chart-model/bar-chart-model/#rotated) prop instead.
    * @default false
    */
   accessor rotation: boolean;
@@ -1413,7 +1441,14 @@ export abstract class ArcgisChart extends LitElement {
   /**
    * Used to set a custom time zone for the chart.
    *
-   * @deprecated since 5.1. Use the model's setTimeZone() or set the timeZone property on the WebChartAxis valueFormat intlOptions instead.
+   * @example
+   * ```ts
+   * chartComponent.timeZone = "America/Los_Angeles";
+   * ```
+   * @example
+   * ```html
+   * <arcgis-chart time-zone="America/Los_Angeles"></arcgis-chart>
+   * ```
    */
   accessor timeZone: MapView["timeZone"] | undefined;
   /**
@@ -1524,6 +1559,7 @@ export abstract class ArcgisChart extends LitElement {
    * - Bar chart
    * - Box plot
    * - Combo bar and line chart
+   * - Heat chart
    * - Histogram
    * - Line chart
    * - Pie chart