@cloudscape-design/components 3.0.221 → 3.0.223

package/internal/components/cartesian-chart/scales.js

@@ -8,7 +8,7 @@ function isDateDomain(domain) {
     return domain.length > 0 && domain[0] instanceof Date;
 }
 function createNumericScale(type, domain) {
-    var scale;
+    let scale;
     switch (type) {
         case 'log':
             scale = scaleLog();
@@ -22,14 +22,14 @@ function createNumericScale(type, domain) {
     return scale;
 }
 function createTimeScale(domain) {
-    var scale = scaleTime();
+    const scale = scaleTime();
     if (isDateDomain(domain)) {
         scale.domain(domain);
     }
     return scale;
 }
 function createBandScale(domain) {
-    var scale = scaleBand().padding(0.1);
+    const scale = scaleBand().padding(0.1);
     scale.domain(domain);
     return scale;
 }
@@ -44,9 +44,8 @@ export function createScale(type, domain, range) {
             return { type: 'categorical', scale: createBandScale(domain).range(range) };
     }
 }
-var ChartScale = /** @class */ (function () {
-    function ChartScale(scaleType, domain, range, noCategoricalOuterPadding) {
-        if (noCategoricalOuterPadding === void 0) { noCategoricalOuterPadding = false; }
+export class ChartScale {
+    constructor(scaleType, domain, range, noCategoricalOuterPadding = false) {
         this.scaleType = scaleType;
         this.domain = domain;
         this.range = range;
@@ -65,35 +64,31 @@ var ChartScale = /** @class */ (function () {
             }
         }
     }
-    ChartScale.prototype.cloneScale = function (newScaleType, newDomain, newRange) {
+    cloneScale(newScaleType, newDomain, newRange) {
         return new ChartScale(newScaleType || this.scaleType, newDomain || this.domain, newRange || this.range);
-    };
-    ChartScale.prototype.isNumeric = function () {
+    }
+    isNumeric() {
         return this.scale.type === 'numeric';
-    };
-    ChartScale.prototype.isTime = function () {
+    }
+    isTime() {
         return this.scale.type === 'time';
-    };
-    ChartScale.prototype.isCategorical = function () {
+    }
+    isCategorical() {
         return this.scale.type === 'categorical';
-    };
-    return ChartScale;
-}());
-export { ChartScale };
-var NumericChartScale = /** @class */ (function () {
-    function NumericChartScale(scaleType, domain, range, adjustDomain) {
+    }
+}
+export class NumericChartScale {
+    constructor(scaleType, domain, range, adjustDomain) {
         this.scaleType = scaleType;
-        var scale = createNumericScale(scaleType, domain).range(range);
+        const scale = createNumericScale(scaleType, domain).range(range);
         if (adjustDomain !== null) {
             scale.nice(adjustDomain);
         }
-        this.scale = { type: 'numeric', scale: scale };
+        this.scale = { type: 'numeric', scale };
         this.d3Scale = this.scale.scale;
     }
-    NumericChartScale.prototype.isCategorical = function () {
+    isCategorical() {
         return false;
-    };
-    return NumericChartScale;
-}());
-export { NumericChartScale };
+    }
+}
 //# sourceMappingURL=scales.js.map

package/internal/components/cartesian-chart/scales.js.map

@@ -1 +1 @@
-{"version":3,"file":"scales.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/scales.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport {\n  scaleLinear,\n  scaleLog,\n  scaleTime,\n  scaleBand,\n  ScaleContinuousNumeric,\n  ScaleTime,\n  ScaleBand,\n} from '../../vendor/d3-scale';\n\nimport { ChartDataTypes, ChartDomain, ScaleType, ScaleRange } from './interfaces';\n\nexport interface NumericD3Scale {\n  type: 'numeric';\n  scale: ScaleContinuousNumeric<number, number>;\n}\n\nexport interface TimeD3Scale {\n  type: 'time';\n  scale: ScaleTime<number, number>;\n}\n\nexport interface CategoricalD3Scale {\n  type: 'categorical';\n  scale: ScaleBand<ChartDataTypes>;\n}\n\nexport type D3Scale = NumericD3Scale | TimeD3Scale | CategoricalD3Scale;\n\ntype InternalScale = ScaleContinuousNumeric<number, number> | ScaleBand<ChartDataTypes> | ScaleTime<number, number>;\n\nfunction isNumericDomain(domain: ChartDomain<ChartDataTypes>): domain is number[] {\n  return domain.length > 0 && typeof domain[0] === 'number';\n}\n\nfunction isDateDomain(domain: ChartDomain<ChartDataTypes>): domain is Date[] {\n  return domain.length > 0 && domain[0] instanceof Date;\n}\n\nfunction createNumericScale(type: ScaleType, domain: ChartDomain<ChartDataTypes>) {\n  let scale: ScaleContinuousNumeric<number, number>;\n  switch (type) {\n    case 'log':\n      scale = scaleLog();\n      break;\n    default:\n      scale = scaleLinear();\n  }\n\n  if (isNumericDomain(domain)) {\n    scale.domain(domain);\n  }\n\n  return scale;\n}\n\nfunction createTimeScale(domain: ChartDomain<ChartDataTypes>) {\n  const scale = scaleTime();\n  if (isDateDomain(domain)) {\n    scale.domain(domain);\n  }\n  return scale;\n}\n\nfunction createBandScale(domain: ChartDomain<ChartDataTypes>) {\n  const scale = scaleBand<ChartDataTypes>().padding(0.1);\n  scale.domain(domain);\n  return scale;\n}\n\nexport function createScale(type: ScaleType, domain: ChartDomain<ChartDataTypes>, range: ScaleRange): D3Scale {\n  switch (type) {\n    case 'linear':\n    case 'log':\n      return { type: 'numeric', scale: createNumericScale(type, domain).range(range) };\n\n    case 'time':\n      return { type: 'time', scale: createTimeScale(domain).range(range) };\n\n    case 'categorical':\n      return { type: 'categorical', scale: createBandScale(domain).range(range) };\n  }\n}\n\nexport class ChartScale {\n  public readonly scale: D3Scale;\n  public readonly d3Scale: InternalScale;\n\n  constructor(\n    public readonly scaleType: ScaleType,\n    public readonly domain: ChartDomain<ChartDataTypes>,\n    public readonly range: ScaleRange,\n    noCategoricalOuterPadding = false\n  ) {\n    this.scale = createScale(this.scaleType, this.domain, this.range);\n    this.d3Scale = this.scale.scale;\n\n    if (this.isCategorical()) {\n      if (noCategoricalOuterPadding) {\n        // Categorical charts with only line (or threshold) series don't need as much out padding\n        // compared to a bar series. Increasing the inner padding to push more data points to the outside.\n        this.d3Scale.paddingInner(0.7);\n        this.d3Scale.paddingOuter(0);\n      } else {\n        this.d3Scale.paddingInner(0.2);\n        this.d3Scale.paddingOuter(0.05);\n      }\n    }\n  }\n\n  cloneScale(newScaleType?: ScaleType, newDomain?: ChartDomain<ChartDataTypes>, newRange?: ScaleRange) {\n    return new ChartScale(newScaleType || this.scaleType, newDomain || this.domain, newRange || this.range);\n  }\n\n  isNumeric(): this is { d3Scale: ScaleContinuousNumeric<number, number>; domain: ChartDomain<number> } {\n    return this.scale.type === 'numeric';\n  }\n\n  isTime(): this is { d3Scale: ScaleTime<number, number>; domain: ChartDomain<Date> } {\n    return this.scale.type === 'time';\n  }\n\n  isCategorical(): this is { d3Scale: ScaleBand<ChartDataTypes>; domain: ChartDomain<string> } {\n    return this.scale.type === 'categorical';\n  }\n}\n\nexport class NumericChartScale {\n  public readonly scale: NumericD3Scale;\n  public readonly d3Scale: ScaleContinuousNumeric<number, number>;\n\n  constructor(\n    public readonly scaleType: 'linear' | 'log',\n    domain: ChartDomain<number>,\n    range: ScaleRange,\n    adjustDomain: null | number\n  ) {\n    const scale = createNumericScale(scaleType, domain).range(range);\n    if (adjustDomain !== null) {\n      scale.nice(adjustDomain);\n    }\n    this.scale = { type: 'numeric', scale };\n    this.d3Scale = this.scale.scale;\n  }\n\n  isCategorical() {\n    return false;\n  }\n}\n"]}
+{"version":3,"file":"scales.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/scales.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport {\n  scaleLinear,\n  scaleLog,\n  scaleTime,\n  scaleBand,\n  ScaleContinuousNumeric,\n  ScaleTime,\n  ScaleBand,\n} from '../../vendor/d3-scale';\n\nimport { ChartDataTypes, ChartDomain, ScaleType, ScaleRange } from './interfaces';\n\nexport interface NumericD3Scale {\n  type: 'numeric';\n  scale: ScaleContinuousNumeric<number, number>;\n}\n\nexport interface TimeD3Scale {\n  type: 'time';\n  scale: ScaleTime<number, number>;\n}\n\nexport interface CategoricalD3Scale {\n  type: 'categorical';\n  scale: ScaleBand<ChartDataTypes>;\n}\n\nexport type D3Scale = NumericD3Scale | TimeD3Scale | CategoricalD3Scale;\n\ntype InternalScale = ScaleContinuousNumeric<number, number> | ScaleBand<ChartDataTypes> | ScaleTime<number, number>;\n\nfunction isNumericDomain(domain: ChartDomain<ChartDataTypes>): domain is number[] {\n  return domain.length > 0 && typeof domain[0] === 'number';\n}\n\nfunction isDateDomain(domain: ChartDomain<ChartDataTypes>): domain is Date[] {\n  return domain.length > 0 && domain[0] instanceof Date;\n}\n\nfunction createNumericScale(type: ScaleType, domain: ChartDomain<ChartDataTypes>) {\n  let scale: ScaleContinuousNumeric<number, number>;\n  switch (type) {\n    case 'log':\n      scale = scaleLog();\n      break;\n    default:\n      scale = scaleLinear();\n  }\n\n  if (isNumericDomain(domain)) {\n    scale.domain(domain);\n  }\n\n  return scale;\n}\n\nfunction createTimeScale(domain: ChartDomain<ChartDataTypes>) {\n  const scale = scaleTime();\n  if (isDateDomain(domain)) {\n    scale.domain(domain);\n  }\n  return scale;\n}\n\nfunction createBandScale(domain: ChartDomain<ChartDataTypes>) {\n  const scale = scaleBand<ChartDataTypes>().padding(0.1);\n  scale.domain(domain);\n  return scale;\n}\n\nexport function createScale(type: ScaleType, domain: ChartDomain<ChartDataTypes>, range: ScaleRange): D3Scale {\n  switch (type) {\n    case 'linear':\n    case 'log':\n      return { type: 'numeric', scale: createNumericScale(type, domain).range(range) };\n\n    case 'time':\n      return { type: 'time', scale: createTimeScale(domain).range(range) };\n\n    case 'categorical':\n      return { type: 'categorical', scale: createBandScale(domain).range(range) };\n  }\n}\n\nexport class ChartScale {\n  public readonly scale: D3Scale;\n  public readonly d3Scale: InternalScale;\n\n  constructor(\n    public readonly scaleType: ScaleType,\n    public readonly domain: ChartDomain<ChartDataTypes>,\n    public readonly range: ScaleRange,\n    noCategoricalOuterPadding = false\n  ) {\n    this.scale = createScale(this.scaleType, this.domain, this.range);\n    this.d3Scale = this.scale.scale;\n\n    if (this.isCategorical()) {\n      if (noCategoricalOuterPadding) {\n        // Categorical charts with only line (or threshold) series don't need as much out padding\n        // compared to a bar series. Increasing the inner padding to push more data points to the outside.\n        this.d3Scale.paddingInner(0.7);\n        this.d3Scale.paddingOuter(0);\n      } else {\n        this.d3Scale.paddingInner(0.2);\n        this.d3Scale.paddingOuter(0.05);\n      }\n    }\n  }\n\n  cloneScale(newScaleType?: ScaleType, newDomain?: ChartDomain<ChartDataTypes>, newRange?: ScaleRange) {\n    return new ChartScale(newScaleType || this.scaleType, newDomain || this.domain, newRange || this.range);\n  }\n\n  isNumeric(): this is { d3Scale: ScaleContinuousNumeric<number, number>; domain: ChartDomain<number> } {\n    return this.scale.type === 'numeric';\n  }\n\n  isTime(): this is { d3Scale: ScaleTime<number, number>; domain: ChartDomain<Date> } {\n    return this.scale.type === 'time';\n  }\n\n  isCategorical(): this is { d3Scale: ScaleBand<ChartDataTypes>; domain: ChartDomain<string> } {\n    return this.scale.type === 'categorical';\n  }\n}\n\nexport class NumericChartScale {\n  public readonly scale: NumericD3Scale;\n  public readonly d3Scale: ScaleContinuousNumeric<number, number>;\n\n  constructor(\n    public readonly scaleType: 'linear' | 'log',\n    domain: ChartDomain<number>,\n    range: ScaleRange,\n    adjustDomain: null | number\n  ) {\n    const scale = createNumericScale(scaleType, domain).range(range);\n    if (adjustDomain !== null) {\n      scale.nice(adjustDomain);\n    }\n    this.scale = { type: 'numeric', scale };\n    this.d3Scale = this.scale.scale;\n  }\n\n  isCategorical() {\n    return false;\n  }\n}\n"]}

package/internal/components/cartesian-chart/ticks.js

@@ -15,8 +15,8 @@ export function createXTicks(scale, values) {
         return scale.d3Scale.ticks(values);
     }
     else if (scale.isTime()) {
-        var rawTicks = scale.d3Scale.ticks(values);
-        var domain = scale.d3Scale.domain();
+        const rawTicks = scale.d3Scale.ticks(values);
+        const domain = scale.d3Scale.domain();
         return uniform(rawTicks, domain[domain.length - 1]);
     }
     else {
@@ -24,7 +24,7 @@ export function createXTicks(scale, values) {
     }
 }
 export function createYTicks(scale, values) {
-    var ticks = scale.d3Scale.ticks(values);
+    const ticks = scale.d3Scale.ticks(values);
     // The logarithmic scale sometimes produces a very large amount of (major and minor) ticks,
     // at which point we need to reduce them significantly for space.
     if (scale.scaleType === 'log' && ticks.length > 10) {
@@ -44,21 +44,20 @@ function uniform(ticks, max) {
     return createTwoDayInterval(ticks[0], max);
 }
 function isMixedDayInterval(ticks) {
-    var oneDayInterval = false;
-    var twoDayInterval = false;
-    for (var i = 1; i < ticks.length; i++) {
+    let oneDayInterval = false;
+    let twoDayInterval = false;
+    for (let i = 1; i < ticks.length; i++) {
         oneDayInterval = oneDayInterval || isDayInterval(ticks[i - 1], ticks[i], 1);
         twoDayInterval = twoDayInterval || isDayInterval(ticks[i - 1], ticks[i], 2);
     }
     return oneDayInterval && twoDayInterval;
 }
-function isDayInterval(a, b, difference) {
-    if (difference === void 0) { difference = 1; }
+function isDayInterval(a, b, difference = 1) {
     return Math.abs(differenceInDays(a, b)) === difference;
 }
 function createTwoDayInterval(start, max) {
-    var result = [];
-    var curr = start;
+    const result = [];
+    let curr = start;
     while (curr < max) {
         result.push(curr);
         curr = add(curr, { days: 2 });

package/internal/components/cartesian-chart/ticks.js.map

@@ -1 +1 @@
-{"version":3,"file":"ticks.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/ticks.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrE,uEAAuE;AACvE,6EAA6E;AAC7E,yFAAyF;AACzF,uFAAuF;AACvF,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,kBAAkB,CAAC,CAAC;AAC/C,CAAC;AACD,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,kBAAkB,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAiB,EAAE,MAAc;IAC5D,IAAI,KAAK,CAAC,SAAS,EAAE,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACpC;SAAM,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE;QACzB,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAW,CAAC;QACvD,IAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,EAAY,CAAC;QAChD,OAAO,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;KACrD;SAAM;QACL,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;KAC/B;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAwB,EAAE,MAAc;IACnE,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1C,2FAA2F;IAC3F,iEAAiE;IACjE,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE;QAClD,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC/B;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,SAAS,OAAO,CAAC,KAAa,EAAE,GAAS;IACvC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;QAClD,OAAO,KAAK,CAAC;KACd;IAED,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAa;IACvC,IAAI,cAAc,GAAG,KAAK,CAAC;IAC3B,IAAI,cAAc,GAAG,KAAK,CAAC;IAE3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,cAAc,GAAG,cAAc,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5E,cAAc,GAAG,cAAc,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAC7E;IACD,OAAO,cAAc,IAAI,cAAc,CAAC;AAC1C,CAAC;AAED,SAAS,aAAa,CAAC,CAAO,EAAE,CAAO,EAAE,UAAc;IAAd,2BAAA,EAAA,cAAc;IACrD,OAAO,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC;AACzD,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAW,EAAE,GAAS;IAClD,IAAM,MAAM,GAAW,EAAE,CAAC;IAC1B,IAAI,IAAI,GAAG,KAAK,CAAC;IACjB,OAAO,IAAI,GAAG,GAAG,EAAE;QACjB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClB,IAAI,GAAG,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;KAC/B;IACD,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartScale, NumericChartScale } from '../../components/cartesian-chart/scales';\nimport { differenceInDays, add } from 'date-fns';\nimport { X_TICK_COUNT_RATIO, Y_TICK_COUNT_RATIO } from './constants';\nimport { ChartDataTypes } from './interfaces';\n\n// The number of ticks is currently defined by the length of the scale.\n// The x scale tends to have longer labels, so we're using less ticks for it.\n// These numbers are currently based on first impressions and might change in the future.\n// We might also open up an API in the future to control the amount of ticks displayed.\nexport function getXTickCount(width: number) {\n  return Math.ceil(width / X_TICK_COUNT_RATIO);\n}\nexport function getYTickCount(height: number) {\n  return Math.ceil(height / Y_TICK_COUNT_RATIO);\n}\n\nexport function createXTicks(scale: ChartScale, values: number): ChartDataTypes[] {\n  if (scale.isNumeric()) {\n    return scale.d3Scale.ticks(values);\n  } else if (scale.isTime()) {\n    const rawTicks = scale.d3Scale.ticks(values) as Date[];\n    const domain = scale.d3Scale.domain() as Date[];\n    return uniform(rawTicks, domain[domain.length - 1]);\n  } else {\n    return scale.d3Scale.domain();\n  }\n}\n\nexport function createYTicks(scale: NumericChartScale, values: number): number[] {\n  const ticks = scale.d3Scale.ticks(values);\n\n  // The logarithmic scale sometimes produces a very large amount of (major and minor) ticks,\n  // at which point we need to reduce them significantly for space.\n  if (scale.scaleType === 'log' && ticks.length > 10) {\n    return scale.d3Scale.ticks(3);\n  }\n\n  return ticks;\n}\n\n/**\n * Ensure uniformly-spaced ticks for 2-day intervals. d3-scale generates\n * ticks for even or odd numbers, which causes varying interval lengths\n * between months.\n */\nfunction uniform(ticks: Date[], max: Date): Date[] {\n  if (ticks.length < 3 || !isMixedDayInterval(ticks)) {\n    return ticks;\n  }\n\n  return createTwoDayInterval(ticks[0], max);\n}\n\nfunction isMixedDayInterval(ticks: Date[]) {\n  let oneDayInterval = false;\n  let twoDayInterval = false;\n\n  for (let i = 1; i < ticks.length; i++) {\n    oneDayInterval = oneDayInterval || isDayInterval(ticks[i - 1], ticks[i], 1);\n    twoDayInterval = twoDayInterval || isDayInterval(ticks[i - 1], ticks[i], 2);\n  }\n  return oneDayInterval && twoDayInterval;\n}\n\nfunction isDayInterval(a: Date, b: Date, difference = 1) {\n  return Math.abs(differenceInDays(a, b)) === difference;\n}\n\nfunction createTwoDayInterval(start: Date, max: Date) {\n  const result: Date[] = [];\n  let curr = start;\n  while (curr < max) {\n    result.push(curr);\n    curr = add(curr, { days: 2 });\n  }\n  return result;\n}\n"]}
+{"version":3,"file":"ticks.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/ticks.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartScale, NumericChartScale } from '../../components/cartesian-chart/scales';\nimport { differenceInDays, add } from 'date-fns';\nimport { X_TICK_COUNT_RATIO, Y_TICK_COUNT_RATIO } from './constants';\nimport { ChartDataTypes } from './interfaces';\n\n// The number of ticks is currently defined by the length of the scale.\n// The x scale tends to have longer labels, so we're using less ticks for it.\n// These numbers are currently based on first impressions and might change in the future.\n// We might also open up an API in the future to control the amount of ticks displayed.\nexport function getXTickCount(width: number) {\n  return Math.ceil(width / X_TICK_COUNT_RATIO);\n}\nexport function getYTickCount(height: number) {\n  return Math.ceil(height / Y_TICK_COUNT_RATIO);\n}\n\nexport function createXTicks(scale: ChartScale, values: number): ChartDataTypes[] {\n  if (scale.isNumeric()) {\n    return scale.d3Scale.ticks(values);\n  } else if (scale.isTime()) {\n    const rawTicks = scale.d3Scale.ticks(values) as Date[];\n    const domain = scale.d3Scale.domain() as Date[];\n    return uniform(rawTicks, domain[domain.length - 1]);\n  } else {\n    return scale.d3Scale.domain();\n  }\n}\n\nexport function createYTicks(scale: NumericChartScale, values: number): number[] {\n  const ticks = scale.d3Scale.ticks(values);\n\n  // The logarithmic scale sometimes produces a very large amount of (major and minor) ticks,\n  // at which point we need to reduce them significantly for space.\n  if (scale.scaleType === 'log' && ticks.length > 10) {\n    return scale.d3Scale.ticks(3);\n  }\n\n  return ticks;\n}\n\n/**\n * Ensure uniformly-spaced ticks for 2-day intervals. d3-scale generates\n * ticks for even or odd numbers, which causes varying interval lengths\n * between months.\n */\nfunction uniform(ticks: Date[], max: Date): Date[] {\n  if (ticks.length < 3 || !isMixedDayInterval(ticks)) {\n    return ticks;\n  }\n\n  return createTwoDayInterval(ticks[0], max);\n}\n\nfunction isMixedDayInterval(ticks: Date[]) {\n  let oneDayInterval = false;\n  let twoDayInterval = false;\n\n  for (let i = 1; i < ticks.length; i++) {\n    oneDayInterval = oneDayInterval || isDayInterval(ticks[i - 1], ticks[i], 1);\n    twoDayInterval = twoDayInterval || isDayInterval(ticks[i - 1], ticks[i], 2);\n  }\n  return oneDayInterval && twoDayInterval;\n}\n\nfunction isDayInterval(a: Date, b: Date, difference = 1) {\n  return Math.abs(differenceInDays(a, b)) === difference;\n}\n\nfunction createTwoDayInterval(start: Date, max: Date) {\n  const result: Date[] = [];\n  let curr = start;\n  while (curr < max) {\n    result.push(curr);\n    curr = add(curr, { days: 2 });\n  }\n  return result;\n}\n"]}

package/internal/components/cartesian-chart/vertical-grid-lines.js

@@ -3,11 +3,10 @@
 import React, { memo } from 'react';
 import styles from './styles.css.js';
 export default memo(VerticalGridLines);
-function VerticalGridLines(_a) {
-    var ticks = _a.ticks, scale = _a.scale, height = _a.height;
-    return (React.createElement("g", { "aria-hidden": "true" }, ticks.map(function (tick) {
+function VerticalGridLines({ ticks, scale, height }) {
+    return (React.createElement("g", { "aria-hidden": "true" }, ticks.map(tick => {
         var _a;
-        var x = (_a = scale.d3Scale(tick)) !== null && _a !== void 0 ? _a : NaN;
+        const x = (_a = scale.d3Scale(tick)) !== null && _a !== void 0 ? _a : NaN;
         return isFinite(x) && React.createElement("line", { key: tick, className: styles.grid, x1: x, y1: 0, x2: x, y2: height });
     })));
 }

package/internal/components/cartesian-chart/vertical-grid-lines.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-grid-lines.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/vertical-grid-lines.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,eAAe,IAAI,CAAC,iBAAiB,CAA6B,CAAC;AAEnE,SAAS,iBAAiB,CAAC,EAAuF;QAArF,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA;IAC/C,OAAO,CACL,0CAAe,MAAM,IAClB,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI;;QACb,IAAM,CAAC,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAI,GAAG,CAAC;QACrC,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,8BAAM,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,GAAI,CAAC;IACrG,CAAC,CAAC,CACA,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { NumericChartScale } from './scales';\nimport styles from './styles.css.js';\n\nexport default memo(VerticalGridLines) as typeof VerticalGridLines;\n\nfunction VerticalGridLines({ ticks, scale, height }: { ticks: number[]; scale: NumericChartScale; height: number }) {\n  return (\n    <g aria-hidden=\"true\">\n      {ticks.map(tick => {\n        const x = scale.d3Scale(tick) ?? NaN;\n        return isFinite(x) && <line key={tick} className={styles.grid} x1={x} y1={0} x2={x} y2={height} />;\n      })}\n    </g>\n  );\n}\n"]}
+{"version":3,"file":"vertical-grid-lines.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/vertical-grid-lines.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,eAAe,IAAI,CAAC,iBAAiB,CAA6B,CAAC;AAEnE,SAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAiE;IAChH,OAAO,CACL,0CAAe,MAAM,IAClB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;QAChB,MAAM,CAAC,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAI,GAAG,CAAC;QACrC,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,8BAAM,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,GAAI,CAAC;IACrG,CAAC,CAAC,CACA,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { NumericChartScale } from './scales';\nimport styles from './styles.css.js';\n\nexport default memo(VerticalGridLines) as typeof VerticalGridLines;\n\nfunction VerticalGridLines({ ticks, scale, height }: { ticks: number[]; scale: NumericChartScale; height: number }) {\n  return (\n    <g aria-hidden=\"true\">\n      {ticks.map(tick => {\n        const x = scale.d3Scale(tick) ?? NaN;\n        return isFinite(x) && <line key={tick} className={styles.grid} x1={x} y1={0} x2={x} y2={height} />;\n      })}\n    </g>\n  );\n}\n"]}

package/internal/components/cartesian-chart/vertical-marker.js

@@ -3,13 +3,12 @@
 import React, { forwardRef, memo } from 'react';
 import styles from './styles.css.js';
 export default memo(forwardRef(VerticalMarker));
-function VerticalMarker(_a, ref) {
-    var height = _a.height, _b = _a.showPoints, showPoints = _b === void 0 ? true : _b, _c = _a.showLine, showLine = _c === void 0 ? true : _c, points = _a.points;
-    var firstPoint = (points || [])[0];
+function VerticalMarker({ height, showPoints = true, showLine = true, points }, ref) {
+    const [firstPoint] = points || [];
     return (React.createElement("g", null,
         React.createElement("line", { ref: ref, "aria-hidden": "true", className: styles['vertical-marker'], style: { visibility: showLine && firstPoint ? 'visible' : 'hidden' }, x1: firstPoint === null || firstPoint === void 0 ? void 0 : firstPoint.x, x2: firstPoint === null || firstPoint === void 0 ? void 0 : firstPoint.x, y1: 0, y2: height }),
         showPoints &&
             points &&
-            points.map(function (point) { return (React.createElement("circle", { key: point.key, "aria-hidden": "true", className: styles['vertical-marker-circle'], cx: point.x, cy: point.y, r: 4, stroke: point.color })); })));
+            points.map(point => (React.createElement("circle", { key: point.key, "aria-hidden": "true", className: styles['vertical-marker-circle'], cx: point.x, cy: point.y, r: 4, stroke: point.color })))));
 }
 //# sourceMappingURL=vertical-marker.js.map

package/internal/components/cartesian-chart/vertical-marker.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-marker.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/vertical-marker.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,eAAe,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;AAEhD,SAAS,cAAc,CACrB,EAA2E,EAC3E,GAA8B;QAD5B,MAAM,YAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EAAE,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EAAE,MAAM,YAAA;IAG7C,IAAA,UAAU,GAAI,CAAA,MAAM,IAAI,EAAE,CAAA,GAAhB,CAAiB;IAElC,OAAO,CACL;QACE,8BACE,GAAG,EAAE,GAAG,iBACI,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EACpE,EAAE,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,EACjB,EAAE,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,EACjB,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,MAAM,GACV;QAED,UAAU;YACT,MAAM;YACN,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CAClB,gCACE,GAAG,EAAE,KAAK,CAAC,GAAG,iBACF,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,CAAC,EAAE,CAAC,EACJ,MAAM,EAAE,KAAK,CAAC,KAAK,GACnB,CACH,EAVmB,CAUnB,CAAC,CACF,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport styles from './styles.css.js';\n\ninterface SeriesPoint {\n  key: string;\n  x: number;\n  y: number;\n  color: string;\n}\n\nexport interface VerticalMarkerProps {\n  height: number;\n  showPoints?: boolean;\n  showLine?: boolean;\n  points: null | readonly SeriesPoint[];\n}\n\nexport default memo(forwardRef(VerticalMarker));\n\nfunction VerticalMarker(\n  { height, showPoints = true, showLine = true, points }: VerticalMarkerProps,\n  ref: React.Ref<SVGLineElement>\n) {\n  const [firstPoint] = points || [];\n\n  return (\n    <g>\n      <line\n        ref={ref}\n        aria-hidden=\"true\"\n        className={styles['vertical-marker']}\n        style={{ visibility: showLine && firstPoint ? 'visible' : 'hidden' }}\n        x1={firstPoint?.x}\n        x2={firstPoint?.x}\n        y1={0}\n        y2={height}\n      />\n\n      {showPoints &&\n        points &&\n        points.map(point => (\n          <circle\n            key={point.key}\n            aria-hidden=\"true\"\n            className={styles['vertical-marker-circle']}\n            cx={point.x}\n            cy={point.y}\n            r={4}\n            stroke={point.color}\n          />\n        ))}\n    </g>\n  );\n}\n"]}
+{"version":3,"file":"vertical-marker.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/vertical-marker.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,eAAe,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;AAEhD,SAAS,cAAc,CACrB,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,GAAG,IAAI,EAAE,MAAM,EAAuB,EAC3E,GAA8B;IAE9B,MAAM,CAAC,UAAU,CAAC,GAAG,MAAM,IAAI,EAAE,CAAC;IAElC,OAAO,CACL;QACE,8BACE,GAAG,EAAE,GAAG,iBACI,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EACpE,EAAE,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,EACjB,EAAE,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,EACjB,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,MAAM,GACV;QAED,UAAU;YACT,MAAM;YACN,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAClB,gCACE,GAAG,EAAE,KAAK,CAAC,GAAG,iBACF,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,CAAC,EAAE,CAAC,EACJ,MAAM,EAAE,KAAK,CAAC,KAAK,GACnB,CACH,CAAC,CACF,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport styles from './styles.css.js';\n\ninterface SeriesPoint {\n  key: string;\n  x: number;\n  y: number;\n  color: string;\n}\n\nexport interface VerticalMarkerProps {\n  height: number;\n  showPoints?: boolean;\n  showLine?: boolean;\n  points: null | readonly SeriesPoint[];\n}\n\nexport default memo(forwardRef(VerticalMarker));\n\nfunction VerticalMarker(\n  { height, showPoints = true, showLine = true, points }: VerticalMarkerProps,\n  ref: React.Ref<SVGLineElement>\n) {\n  const [firstPoint] = points || [];\n\n  return (\n    <g>\n      <line\n        ref={ref}\n        aria-hidden=\"true\"\n        className={styles['vertical-marker']}\n        style={{ visibility: showLine && firstPoint ? 'visible' : 'hidden' }}\n        x1={firstPoint?.x}\n        x2={firstPoint?.x}\n        y1={0}\n        y2={height}\n      />\n\n      {showPoints &&\n        points &&\n        points.map(point => (\n          <circle\n            key={point.key}\n            aria-hidden=\"true\"\n            className={styles['vertical-marker-circle']}\n            cx={point.x}\n            cy={point.y}\n            r={4}\n            stroke={point.color}\n          />\n        ))}\n    </g>\n  );\n}\n"]}

package/internal/components/chart-filter/index.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -10,25 +10,24 @@ import SeriesMarker from '../chart-series-marker';
 import styles from './styles.css.js';
 export default memo(ChartFilter);
 function ChartFilter(_a) {
-    var series = _a.series, i18nStrings = _a.i18nStrings, selectedSeries = _a.selectedSeries, onChange = _a.onChange, restProps = __rest(_a, ["series", "i18nStrings", "selectedSeries", "onChange"]);
-    var baseProps = getBaseProps(restProps);
-    var className = clsx(baseProps.className, styles.root);
-    var defaultOptions = series.map(function (d, i) { return ({
+    var { series, i18nStrings, selectedSeries, onChange } = _a, restProps = __rest(_a, ["series", "i18nStrings", "selectedSeries", "onChange"]);
+    const baseProps = getBaseProps(restProps);
+    const className = clsx(baseProps.className, styles.root);
+    const defaultOptions = series.map((d, i) => ({
         label: d.label,
         value: '' + i,
         datum: d.datum,
         __customIcon: (React.createElement("span", { className: styles['custom-icon-wrapper'] },
-            React.createElement(SeriesMarker, { color: d.color, type: d.type })))
-    }); });
-    var selectedOptions = defaultOptions.filter(function (option) { return (selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.indexOf(option.datum)) !== -1; });
-    var updateSelection = useCallback(function (_a) {
-        var selectedOptions = _a.detail.selectedOptions;
-        var selectedSeries = defaultOptions
-            .filter(function (option) { return selectedOptions.indexOf(option) !== -1; })
-            .map(function (option) { return option.datum; });
+            React.createElement(SeriesMarker, { color: d.color, type: d.type }))),
+    }));
+    const selectedOptions = defaultOptions.filter(option => (selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.indexOf(option.datum)) !== -1);
+    const updateSelection = useCallback(({ detail: { selectedOptions } }) => {
+        const selectedSeries = defaultOptions
+            .filter(option => selectedOptions.indexOf(option) !== -1)
+            .map(option => option.datum);
         onChange(selectedSeries);
     }, [onChange, defaultOptions]);
-    return (React.createElement(InternalFormField, __assign({}, baseProps, { label: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterLabel, className: className }),
+    return (React.createElement(InternalFormField, Object.assign({}, baseProps, { label: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterLabel, className: className }),
         React.createElement(InternalMultiselect, { placeholder: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterPlaceholder, options: defaultOptions, selectedOptions: selectedOptions, onChange: updateSelection, className: styles['chart-filter'], selectedAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterSelectedAriaLabel, hideTokens: true })));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/chart-filter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-filter/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,mBAAmB,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,YAAuC,MAAM,wBAAwB,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,eAAe,IAAI,CAAC,WAAW,CAAuB,CAAC;AAEvD,SAAS,WAAW,CAAI,EAAoF;IAAlF,IAAA,MAAM,YAAA,EAAE,WAAW,iBAAA,EAAE,cAAc,oBAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAA7D,uDAA+D,CAAF;IACnF,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzD,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC;QAC3C,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,EAAE,GAAG,CAAC;QACb,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,YAAY,EAAE,CACZ,8BAAM,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;YAC5C,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI,CACzC,CACR;KACF,CAAC,EAT0C,CAS1C,CAAC,CAAC;IAEJ,IAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAK,CAAC,CAAC,EAA5C,CAA4C,CAAC,CAAC;IAEtG,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,EAA+B;YAAnB,eAAe,4BAAA;QAC1B,IAAM,cAAc,GAAG,cAAc;aAClC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAtC,CAAsC,CAAC;aACxD,GAAG,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,KAAK,EAAZ,CAAY,CAAC,CAAC;QAC/B,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,oBAAC,iBAAiB,eAAK,SAAS,IAAE,KAAK,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QACrF,oBAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,EAC3C,OAAO,EAAE,cAAc,EACvB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,iBAAiB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,EACvD,UAAU,EAAE,IAAI,GAChB,CACgB,CACrB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, memo } from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\nimport InternalFormField from '../../../form-field/internal';\nimport InternalMultiselect from '../../../multiselect/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { MultiselectProps } from '../../../multiselect/interfaces';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\n\nimport styles from './styles.css.js';\n\ninterface I18nStrings {\n  filterLabel?: string;\n  filterPlaceholder?: string;\n  filterSelectedAriaLabel?: string;\n}\n\nexport interface ChartFilterItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartFilterProps<T> extends BaseComponentProps {\n  series: ReadonlyArray<ChartFilterItem<T>>;\n  selectedSeries?: ReadonlyArray<T>;\n  onChange: (selectedSeries: ReadonlyArray<T>) => void;\n  i18nStrings?: I18nStrings;\n}\n\nexport default memo(ChartFilter) as typeof ChartFilter;\n\nfunction ChartFilter<T>({ series, i18nStrings, selectedSeries, onChange, ...restProps }: ChartFilterProps<T>) {\n  const baseProps = getBaseProps(restProps);\n  const className = clsx(baseProps.className, styles.root);\n\n  const defaultOptions = series.map((d, i) => ({\n    label: d.label,\n    value: '' + i,\n    datum: d.datum,\n    __customIcon: (\n      <span className={styles['custom-icon-wrapper']}>\n        <SeriesMarker color={d.color} type={d.type} />\n      </span>\n    ),\n  }));\n\n  const selectedOptions = defaultOptions.filter(option => selectedSeries?.indexOf(option.datum) !== -1);\n\n  const updateSelection = useCallback<NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>>(\n    ({ detail: { selectedOptions } }) => {\n      const selectedSeries = defaultOptions\n        .filter(option => selectedOptions.indexOf(option) !== -1)\n        .map(option => option.datum);\n      onChange(selectedSeries);\n    },\n    [onChange, defaultOptions]\n  );\n\n  return (\n    <InternalFormField {...baseProps} label={i18nStrings?.filterLabel} className={className}>\n      <InternalMultiselect\n        placeholder={i18nStrings?.filterPlaceholder}\n        options={defaultOptions}\n        selectedOptions={selectedOptions}\n        onChange={updateSelection}\n        className={styles['chart-filter']}\n        selectedAriaLabel={i18nStrings?.filterSelectedAriaLabel}\n        hideTokens={true}\n      />\n    </InternalFormField>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-filter/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,mBAAmB,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,YAAuC,MAAM,wBAAwB,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,eAAe,IAAI,CAAC,WAAW,CAAuB,CAAC;AAEvD,SAAS,WAAW,CAAI,EAAoF;QAApF,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,OAAqC,EAAhC,SAAS,cAA7D,uDAA+D,CAAF;IACnF,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC3C,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,EAAE,GAAG,CAAC;QACb,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,YAAY,EAAE,CACZ,8BAAM,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;YAC5C,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI,CACzC,CACR;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAK,CAAC,CAAC,CAAC,CAAC;IAEtG,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE;QAClC,MAAM,cAAc,GAAG,cAAc;aAClC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;aACxD,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,oBAAC,iBAAiB,oBAAK,SAAS,IAAE,KAAK,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QACrF,oBAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,EAC3C,OAAO,EAAE,cAAc,EACvB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,iBAAiB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,EACvD,UAAU,EAAE,IAAI,GAChB,CACgB,CACrB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, memo } from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\nimport InternalFormField from '../../../form-field/internal';\nimport InternalMultiselect from '../../../multiselect/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { MultiselectProps } from '../../../multiselect/interfaces';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\n\nimport styles from './styles.css.js';\n\ninterface I18nStrings {\n  filterLabel?: string;\n  filterPlaceholder?: string;\n  filterSelectedAriaLabel?: string;\n}\n\nexport interface ChartFilterItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartFilterProps<T> extends BaseComponentProps {\n  series: ReadonlyArray<ChartFilterItem<T>>;\n  selectedSeries?: ReadonlyArray<T>;\n  onChange: (selectedSeries: ReadonlyArray<T>) => void;\n  i18nStrings?: I18nStrings;\n}\n\nexport default memo(ChartFilter) as typeof ChartFilter;\n\nfunction ChartFilter<T>({ series, i18nStrings, selectedSeries, onChange, ...restProps }: ChartFilterProps<T>) {\n  const baseProps = getBaseProps(restProps);\n  const className = clsx(baseProps.className, styles.root);\n\n  const defaultOptions = series.map((d, i) => ({\n    label: d.label,\n    value: '' + i,\n    datum: d.datum,\n    __customIcon: (\n      <span className={styles['custom-icon-wrapper']}>\n        <SeriesMarker color={d.color} type={d.type} />\n      </span>\n    ),\n  }));\n\n  const selectedOptions = defaultOptions.filter(option => selectedSeries?.indexOf(option.datum) !== -1);\n\n  const updateSelection = useCallback<NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>>(\n    ({ detail: { selectedOptions } }) => {\n      const selectedSeries = defaultOptions\n        .filter(option => selectedOptions.indexOf(option) !== -1)\n        .map(option => option.datum);\n      onChange(selectedSeries);\n    },\n    [onChange, defaultOptions]\n  );\n\n  return (\n    <InternalFormField {...baseProps} label={i18nStrings?.filterLabel} className={className}>\n      <InternalMultiselect\n        placeholder={i18nStrings?.filterPlaceholder}\n        options={defaultOptions}\n        selectedOptions={selectedOptions}\n        onChange={updateSelection}\n        className={styles['chart-filter']}\n        selectedAriaLabel={i18nStrings?.filterSelectedAriaLabel}\n        hideTokens={true}\n      />\n    </InternalFormField>\n  );\n}\n"]}

package/internal/components/chart-legend/index.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -9,25 +8,24 @@ import { KeyCode } from '../../keycode';
 import SeriesMarker from '../chart-series-marker';
 import styles from './styles.css.js';
 export default memo(ChartLegend);
-function ChartLegend(_a) {
-    var series = _a.series, onHighlightChange = _a.onHighlightChange, highlightedSeries = _a.highlightedSeries, legendTitle = _a.legendTitle, ariaLabel = _a.ariaLabel, plotContainerRef = _a.plotContainerRef;
-    var focusVisible = useFocusVisible();
-    var containerRef = useRef(null);
-    var segmentsRef = useRef([]);
-    var highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
-    var highlightLeft = function () {
+function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle, ariaLabel, plotContainerRef, }) {
+    const focusVisible = useFocusVisible();
+    const containerRef = useRef(null);
+    const segmentsRef = useRef([]);
+    const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
+    const highlightLeft = () => {
         var _a;
-        var currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
-        var nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
+        const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
+        const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
         (_a = segmentsRef.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    var highlightRight = function () {
+    const highlightRight = () => {
         var _a;
-        var currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
-        var nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
+        const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
+        const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
         (_a = segmentsRef.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    var handleKeyPress = function (event) {
+    const handleKeyPress = (event) => {
         if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {
             // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.
             event.preventDefault();
@@ -41,12 +39,12 @@ function ChartLegend(_a) {
             }
         }
     };
-    var handleSelection = function (index) {
+    const handleSelection = (index) => {
         if (series[index].datum !== highlightedSeries) {
             onHighlightChange(series[index].datum);
         }
     };
-    var handleBlur = function (event) {
+    const handleBlur = (event) => {
         var _a;
         // We need to check if the next element to be focused inside the plot container or not
         // so we don't clear the selected legend in case we are still focusing elements ( legend elements )
@@ -58,40 +56,39 @@ function ChartLegend(_a) {
             onHighlightChange(null);
         }
     };
-    var handleMouseOver = function (s) {
+    const handleMouseOver = (s) => {
         if (s !== highlightedSeries) {
             onHighlightChange(s);
         }
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         onHighlightChange(null);
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: containerRef, role: "toolbar", "aria-label": legendTitle || ariaLabel, className: styles.root, onKeyDown: handleKeyPress, onBlur: handleBlur },
             legendTitle && (React.createElement(InternalBox, { fontWeight: "bold", className: styles.title }, legendTitle)),
-            React.createElement("div", { className: styles.list }, series.map(function (s, index) {
-                var _a;
-                var someHighlighted = highlightedSeries !== null;
-                var isHighlighted = highlightedSeries === s.datum;
-                var isDimmed = someHighlighted && !isHighlighted;
-                return (React.createElement("div", __assign({}, focusVisible, { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, (_a = {},
-                        _a[styles['marker--dimmed']] = isDimmed,
-                        _a[styles['marker--highlighted']] = isHighlighted,
-                        _a)), ref: function (elem) {
+            React.createElement("div", { className: styles.list }, series.map((s, index) => {
+                const someHighlighted = highlightedSeries !== null;
+                const isHighlighted = highlightedSeries === s.datum;
+                const isDimmed = someHighlighted && !isHighlighted;
+                return (React.createElement("div", Object.assign({}, focusVisible, { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, {
+                        [styles['marker--dimmed']]: isDimmed,
+                        [styles['marker--highlighted']]: isHighlighted,
+                    }), ref: elem => {
                         if (elem) {
                             segmentsRef.current[index] = elem;
                         }
                         else {
                             delete segmentsRef.current[index];
                         }
-                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: function () { return handleSelection(index); }, onClick: function () { return handleSelection(index); }, onMouseOver: function () { return handleMouseOver(s.datum); }, onMouseLeave: handleMouseLeave }),
+                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: () => handleSelection(index), onClick: () => handleSelection(index), onMouseOver: () => handleMouseOver(s.datum), onMouseLeave: handleMouseLeave }),
                     React.createElement(SeriesMarker, { color: s.color, type: s.type }),
                     " ",
                     s.label));
             })))));
 }
 function findSeriesIndex(series, targetSeries) {
-    for (var index = 0; index < series.length; index++) {
+    for (let index = 0; index < series.length; index++) {
         if (series[index].datum === targetSeries) {
             return index;
         }

package/internal/components/chart-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef, memo } from 'react';\n\nimport useFocusVisible from '../../hooks/focus-visible';\nimport InternalBox from '../../../box/internal';\nimport { KeyCode } from '../../keycode';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartLegendItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartLegendProps<T> {\n  series: ReadonlyArray<ChartLegendItem<T>>;\n  highlightedSeries: T | null;\n  legendTitle?: string;\n  ariaLabel?: string;\n  plotContainerRef?: React.RefObject<HTMLDivElement>;\n  onHighlightChange: (series: T | null) => void;\n}\n\nexport default memo(ChartLegend) as typeof ChartLegend;\n\nfunction ChartLegend<T>({\n  series,\n  onHighlightChange,\n  highlightedSeries,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: ChartLegendProps<T>) {\n  const focusVisible = useFocusVisible();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const handleKeyPress = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      switch (event.keyCode) {\n        case KeyCode.left:\n          return highlightLeft();\n\n        case KeyCode.right:\n          return highlightRight();\n\n        default:\n          return;\n      }\n    }\n  };\n\n  const handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\n    // We need to check if the next element to be focused inside the plot container or not\n    // so we don't clear the selected legend in case we are still focusing elements ( legend elements )\n    // inside the plot container\n    if (\n      event.relatedTarget === null ||\n      (containerRef.current &&\n        !containerRef.current.contains(event.relatedTarget) &&\n        !plotContainerRef?.current?.contains(event.relatedTarget))\n    ) {\n      onHighlightChange(null);\n    }\n  };\n\n  const handleMouseOver = (s: T) => {\n    if (s !== highlightedSeries) {\n      onHighlightChange(s);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    onHighlightChange(null);\n  };\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div className={styles.list}>\n          {series.map((s, index) => {\n            const someHighlighted = highlightedSeries !== null;\n            const isHighlighted = highlightedSeries === s.datum;\n            const isDimmed = someHighlighted && !isHighlighted;\n            return (\n              <div\n                {...focusVisible}\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction findSeriesIndex<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): undefined | number {\n  for (let index = 0; index < series.length; index++) {\n    if (series[index].datum === targetSeries) {\n      return index;\n    }\n  }\n  return undefined;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef, memo } from 'react';\n\nimport useFocusVisible from '../../hooks/focus-visible';\nimport InternalBox from '../../../box/internal';\nimport { KeyCode } from '../../keycode';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartLegendItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartLegendProps<T> {\n  series: ReadonlyArray<ChartLegendItem<T>>;\n  highlightedSeries: T | null;\n  legendTitle?: string;\n  ariaLabel?: string;\n  plotContainerRef?: React.RefObject<HTMLDivElement>;\n  onHighlightChange: (series: T | null) => void;\n}\n\nexport default memo(ChartLegend) as typeof ChartLegend;\n\nfunction ChartLegend<T>({\n  series,\n  onHighlightChange,\n  highlightedSeries,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: ChartLegendProps<T>) {\n  const focusVisible = useFocusVisible();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const handleKeyPress = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      switch (event.keyCode) {\n        case KeyCode.left:\n          return highlightLeft();\n\n        case KeyCode.right:\n          return highlightRight();\n\n        default:\n          return;\n      }\n    }\n  };\n\n  const handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\n    // We need to check if the next element to be focused inside the plot container or not\n    // so we don't clear the selected legend in case we are still focusing elements ( legend elements )\n    // inside the plot container\n    if (\n      event.relatedTarget === null ||\n      (containerRef.current &&\n        !containerRef.current.contains(event.relatedTarget) &&\n        !plotContainerRef?.current?.contains(event.relatedTarget))\n    ) {\n      onHighlightChange(null);\n    }\n  };\n\n  const handleMouseOver = (s: T) => {\n    if (s !== highlightedSeries) {\n      onHighlightChange(s);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    onHighlightChange(null);\n  };\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div className={styles.list}>\n          {series.map((s, index) => {\n            const someHighlighted = highlightedSeries !== null;\n            const isHighlighted = highlightedSeries === s.datum;\n            const isDimmed = someHighlighted && !isHighlighted;\n            return (\n              <div\n                {...focusVisible}\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction findSeriesIndex<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): undefined | number {\n  for (let index = 0; index < series.length; index++) {\n    if (series[index].datum === targetSeries) {\n      return index;\n    }\n  }\n  return undefined;\n}\n"]}

package/internal/components/chart-plot/application-controller.js

@@ -4,14 +4,13 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 import focusSvgElement from '../../utils/focus-svg-element';
 import styles from './styles.css.js';
 export default forwardRef(ApplicationController);
-function ApplicationController(_a, ref) {
-    var activeElementKey = _a.activeElementKey, activeElementRef = _a.activeElementRef, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
-    var containerRef = useRef(null);
-    var applicationRef = useRef(null);
-    var focusTransitionRef = useRef(false);
-    var _b = useState(false), isFocused = _b[0], setFocused = _b[1];
+function ApplicationController({ activeElementKey, activeElementRef, onFocus, onBlur, onKeyDown }, ref) {
+    const containerRef = useRef(null);
+    const applicationRef = useRef(null);
+    const focusTransitionRef = useRef(false);
+    const [isFocused, setFocused] = useState(false);
     // Calls provided onFocus handler when the application obtains focus, ignoring internal focus juggling.
-    var onApplicationFocus = useCallback(function (event) {
+    const onApplicationFocus = useCallback((event) => {
         if (focusTransitionRef.current === false) {
             setFocused(true);
             onFocus && onFocus(event);
@@ -21,7 +20,7 @@ function ApplicationController(_a, ref) {
         }
     }, [onFocus]);
     // Calls provided onBlur handler when the application loses focus, ignoring internal focus juggling.
-    var onApplicationBlur = useCallback(function (event) {
+    const onApplicationBlur = useCallback((event) => {
         if (focusTransitionRef.current === false) {
             setFocused(false);
             onBlur && onBlur(event);
@@ -29,25 +28,25 @@ function ApplicationController(_a, ref) {
             muteApplication(applicationRef.current);
         }
     }, [onBlur]);
-    var onApplicationKeyDown = onKeyDown;
-    useImperativeHandle(ref, function () { return ({
-        focus: function () { return focusApplication(applicationRef.current, (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || null); }
-    }); }, [activeElementRef]);
+    const onApplicationKeyDown = onKeyDown;
+    useImperativeHandle(ref, () => ({
+        focus: () => focusApplication(applicationRef.current, (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || null),
+    }), [activeElementRef]);
     // Re-attaches and re-focuses the application for screen readers to treat it as an update.
-    useEffect(function () {
+    useEffect(() => {
         // Skip if not focused or if the transition is already happening.
         if (!isFocused || focusTransitionRef.current === true) {
             return;
         }
         // Delay focus juggle to let the last focus event settle in Firefox.
         // Without the delay the focus is getting lost.
-        var timeoutId = setTimeout(function () {
+        const timeoutId = setTimeout(() => {
             focusTransitionRef.current = true;
             containerRef.current.removeChild(applicationRef.current);
             containerRef.current.appendChild(applicationRef.current);
             focusApplication(applicationRef.current, (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || null);
         }, 0);
-        return function () { return clearTimeout(timeoutId); };
+        return () => clearTimeout(timeoutId);
     }, [isFocused, activeElementKey, activeElementRef]);
     return (React.createElement("g", { ref: containerRef },
         React.createElement("g", { tabIndex: -1, ref: applicationRef, onFocus: onApplicationFocus, onBlur: onApplicationBlur, onKeyDown: onApplicationKeyDown, className: styles.application })));
@@ -55,18 +54,16 @@ function ApplicationController(_a, ref) {
 // Focuses application but before copies aria-attributes from the target.
 function focusApplication(app, target) {
     // Remove prev attributes.
-    for (var _i = 0, _a = getAttributeNames(app); _i < _a.length; _i++) {
-        var attributeName = _a[_i];
+    for (const attributeName of getAttributeNames(app)) {
         if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
             app.removeAttribute(attributeName);
         }
     }
     // Copy new attributes.
     if (target) {
-        for (var _b = 0, _c = getAttributeNames(target); _b < _c.length; _b++) {
-            var attributeName = _c[_b];
+        for (const attributeName of getAttributeNames(target)) {
             if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
-                var attributeValue = target.getAttribute(attributeName);
+                const attributeValue = target.getAttribute(attributeName);
                 attributeValue && app.setAttribute(attributeName, attributeValue);
             }
         }
@@ -81,8 +78,7 @@ function focusApplication(app, target) {
 // The application is to be only focused programmatically.
 function muteApplication(app) {
     // Remove prev attributes.
-    for (var _i = 0, _a = getAttributeNames(app); _i < _a.length; _i++) {
-        var attributeName = _a[_i];
+    for (const attributeName of getAttributeNames(app)) {
         if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
             app.removeAttribute(attributeName);
         }
@@ -95,9 +91,9 @@ function muteApplication(app) {
 // Polyfill for element.getAttributeNames(), IE11
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames#polyfill
 function getAttributeNames(element) {
-    var attributes = element.attributes;
-    var result = new Array(attributes.length);
-    for (var i = 0; i < attributes.length; i++) {
+    const attributes = element.attributes;
+    const result = new Array(attributes.length);
+    for (let i = 0; i < attributes.length; i++) {
         result[i] = attributes[i].name;
     }
     return result;