@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/component/StackGroupBar/StackGroupBar.mjs

@@ -0,0 +1,141 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import { Component } from "@semcore/core";
+import createElement from "../../createElement.mjs";
+import { scaleToBand, getChartDefaultColorName } from "../../utils.mjs";
+import Bar, { MIN_HEIGHT } from "../../Bar.mjs";
+import { scaleBand } from "d3-scale";
+import { stack } from "d3-shape";
+var XY0 = Symbol("XY0");
+var StackGroupBarRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(StackGroupBarRoot2, _Component);
+  var _super = _createSuper(StackGroupBarRoot2);
+  function StackGroupBarRoot2(props) {
+    var _this;
+    _classCallCheck(this, StackGroupBarRoot2);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "groupDomain", /* @__PURE__ */ new Set());
+    _defineProperty(_assertThisInitialized(_this), "scaleGroup", scaleBand());
+    _defineProperty(_assertThisInitialized(_this), "stacks", {});
+    _defineProperty(_assertThisInitialized(_this), "offsetBars", []);
+    var children = props.children;
+    var groups = {};
+    React.Children.toArray(children).forEach(function(child) {
+      if (/* @__PURE__ */ React.isValidElement(child) && child.type === StackGroupBar.Bar && !child.props.hide) {
+        _this.groupDomain.add(child.props.group);
+        if (!groups[child.props.group]) {
+          groups[child.props.group] = [];
+        }
+        groups[child.props.group].push(child.props.y);
+      }
+    });
+    Object.entries(groups).forEach(function(_ref) {
+      var _ref2 = _slicedToArray(_ref, 2), group = _ref2[0], stackKeys = _ref2[1];
+      _this.stacks[group] = stack();
+      _this.stacks[group].keys(stackKeys);
+    });
+    return _this;
+  }
+  _createClass(StackGroupBarRoot2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var scale = this.asProps.scale;
+      this.scaleGroup = scaleBand().range([0, scaleToBand(scale[0]).bandwidth()]).domain(this.groupDomain).paddingInner(0.1).paddingOuter(0.1);
+      this.forceUpdate();
+    }
+  }, {
+    key: "getSeries",
+    value: function getSeries(group) {
+      var _this$stacks$group, _this$stacks;
+      var data = this.asProps.data;
+      return (_this$stacks$group = (_this$stacks = this.stacks)[group]) === null || _this$stacks$group === void 0 ? void 0 : _this$stacks$group.call(_this$stacks, data);
+    }
+  }, {
+    key: "getBarProps",
+    value: function getBarProps(_ref3, index) {
+      var _this$offsetBars$seri, _this$scaleGroup$band, _this2 = this;
+      var y = _ref3.y, group = _ref3.group, _ref3$hMin = _ref3.hMin, hMin = _ref3$hMin === void 0 ? MIN_HEIGHT : _ref3$hMin;
+      var _this$asProps = this.asProps, x = _this$asProps.x, r = _this$asProps.r, scale = _this$asProps.scale, _this$asProps$maxBarS = _this$asProps.maxBarSize, maxBarSize = _this$asProps$maxBarS === void 0 ? Infinity : _this$asProps$maxBarS, patterns = _this$asProps.patterns;
+      var _ref4 = scale, _ref5 = _slicedToArray(_ref4, 2), yScale = _ref5[1];
+      var allGroupSeries = this.getSeries(group);
+      var seriesIndex = allGroupSeries.findIndex(function(s) {
+        return s.key === y;
+      });
+      var series = allGroupSeries[seriesIndex] || [];
+      var rBar = series.map(function(s, i) {
+        return allGroupSeries.slice(seriesIndex + 1).some(function(bar) {
+          return bar[i][0] !== bar[i][1];
+        }) ? 0 : r;
+      });
+      this.offsetBars[seriesIndex] = (_this$offsetBars$seri = this.offsetBars[seriesIndex]) !== null && _this$offsetBars$seri !== void 0 ? _this$offsetBars$seri : [];
+      var data = series.map(function(s) {
+        var _objectSpread2;
+        return _objectSpread(_objectSpread({}, s.data), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, y, s[1]), _defineProperty(_objectSpread2, XY0, s[0]), _objectSpread2));
+      });
+      var bandWidth = (_this$scaleGroup$band = this.scaleGroup.bandwidth()) !== null && _this$scaleGroup$band !== void 0 ? _this$scaleGroup$band : 0;
+      var width = Math.min(bandWidth, maxBarSize);
+      var calcOffset = function calcOffset2(i) {
+        var _this2$scaleGroup, _d$XY, _d$XY2;
+        var offsetX = ((_this2$scaleGroup = _this2.scaleGroup(group)) !== null && _this2$scaleGroup !== void 0 ? _this2$scaleGroup : 0) + bandWidth / 2 - width / 2;
+        var offsetY = _this2.offsetBars.reduce(function(offset, offsetBar) {
+          var _offsetBar$i;
+          return offset - ((_offsetBar$i = offsetBar[i]) !== null && _offsetBar$i !== void 0 ? _offsetBar$i : 0);
+        }, 0);
+        var d = data[i];
+        var absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$XY = d[XY0]) !== null && _d$XY !== void 0 ? _d$XY : 0)));
+        var isEmptyValue = Number(d[y] - ((_d$XY2 = d[XY0]) !== null && _d$XY2 !== void 0 ? _d$XY2 : 0)) === 0;
+        if (isEmptyValue || absHeight >= hMin) {
+          _this2.offsetBars[seriesIndex][i] = 0;
+        } else {
+          var offsetValue = hMin - absHeight;
+          _this2.offsetBars[seriesIndex][i] = d[y] > 0 ? offsetValue : -offsetValue;
+        }
+        return [offsetX, offsetY];
+      };
+      var barProps = {
+        offset: calcOffset,
+        width,
+        color: getChartDefaultColorName(index),
+        x,
+        groupKey: x,
+        patterns,
+        data,
+        hMin,
+        y0: XY0,
+        r: rBar,
+        maxBarSize
+      };
+      return barProps;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var Element = this.Element;
+      this.asProps.dataHintsHandler.establishDataType("grouped-values");
+      this.offsetBars = [];
+      return /* @__PURE__ */ React.createElement(Element, {
+        "aria-hidden": true,
+        render: "g",
+        childrenPosition: "inside"
+      });
+    }
+  }]);
+  return StackGroupBarRoot2;
+}(Component);
+_defineProperty(StackGroupBarRoot, "displayName", "StackGroupBar");
+_defineProperty(StackGroupBarRoot, "defaultProps", {
+  r: 2
+});
+var StackGroupBar = createElement(StackGroupBarRoot, {
+  Bar
+});
+export {
+  StackGroupBar as default
+};

package/lib/esm/createElement.mjs

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import createComponent, { createBaseComponent, CONTEXT_COMPONENT } from "@semcore/core";
+import assignProps from "@semcore/utils/lib/assignProps";
+import { useForkRef } from "@semcore/utils/lib/ref";
+import propsForElement from "@semcore/utils/lib/propsForElement";
+import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
+import Plot from "./Plot.mjs";
+var _excluded = ["render", "childrenPosition", "x", "y"], _excluded2 = ["forwardRef", "children", "Children", "x", "y"], _excluded3 = ["$rootProps"];
+var EXCLUDE_PROPS = ["data", "scale"];
+function createElementRender() {
+  var Element = /* @__PURE__ */ React.forwardRef(function(_ref, ref) {
+    var render = _ref.render, _ref$childrenPosition = _ref.childrenPosition, childrenPosition = _ref$childrenPosition === void 0 ? "below" : _ref$childrenPosition, xS = _ref.x, yS = _ref.y, source = _objectWithoutProperties(_ref, _excluded);
+    var _Element$props = Element.props, _Element$props$forwar = _Element$props.forwardRef, forwardRef = _Element$props$forwar === void 0 ? null : _Element$props$forwar;
+    _Element$props.children;
+    var Children = _Element$props.Children, _Element$props$x = _Element$props.x, x = _Element$props$x === void 0 ? xS : _Element$props$x, _Element$props$y = _Element$props.y, y = _Element$props$y === void 0 ? yS : _Element$props$y, props = _objectWithoutProperties(_Element$props, _excluded2);
+    var children = getOriginChildren(Children);
+    var mergedProps = assignProps(_objectSpread(_objectSpread({
+      x: xS,
+      y: yS
+    }, props), {}, {
+      ref: useForkRef(forwardRef, ref)
+    }), _objectSpread({
+      x,
+      y
+    }, source));
+    if (typeof children === "function") {
+      var _child = mergedProps.children;
+      mergedProps = assignProps(children(mergedProps), mergedProps);
+      children = mergedProps.children;
+      mergedProps.children = _child;
+    }
+    var Tag = typeof render === "string" ? mergedProps.tag || render : render;
+    if (childrenPosition === "inside") {
+      mergedProps.children = children === void 0 ? mergedProps.children : children;
+    }
+    if (!Tag) {
+      throw new Error("Element expected render prop to be passed");
+    }
+    return [/* @__PURE__ */ React.createElement(React.Fragment, {
+      key: "child-above"
+    }, childrenPosition === "above" ? children : null), /* @__PURE__ */ React.createElement(Tag, _extends({
+      "aria-hidden": true
+    }, propsForElement(_objectSpread({
+      __excludeProps: EXCLUDE_PROPS
+    }, mergedProps), Tag), {
+      key: "element"
+    })), /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: "child-below"
+    }, childrenPosition === "below" ? children : null)];
+  });
+  Element.props = {};
+  return Element;
+}
+function elementEnhancement() {
+  return {
+    init: function init() {
+      this.Element = createElementRender();
+    },
+    asProps: function asProps(_ref2, WrapperComponent, isFunction) {
+      var $rootProps = _ref2.$rootProps, props = _objectWithoutProperties(_ref2, _excluded3);
+      if (isFunction) {
+        return _objectSpread(_objectSpread(_objectSpread({}, $rootProps), props), {}, {
+          Element: this.Element
+        });
+      }
+      return _objectSpread(_objectSpread({}, $rootProps), props);
+    },
+    render: function render(_render, props) {
+      this.Element.props = props;
+      return _render;
+    }
+  };
+}
+function WrapComponent(Element) {
+  function ElementWithContext(props, ref) {
+    var _React$useContext = React.useContext(Plot[CONTEXT_COMPONENT]), $rootProps = _React$useContext.$rootProps;
+    return /* @__PURE__ */ React.createElement(Element, _extends({
+      ref,
+      $rootProps
+    }, props));
+  }
+  ElementWithContext.displayName = Element.displayName;
+  var WrapperComponent = createBaseComponent(ElementWithContext);
+  WrapperComponent.displayName = Element.displayName;
+  return hoistNonReactStatics(WrapperComponent, Element);
+}
+function createElement(ElementRoot) {
+  var child = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  var Element = createComponent(ElementRoot, child, _objectSpread(_objectSpread({}, options), {}, {
+    enhancements: [elementEnhancement]
+  }));
+  Object.keys(child).forEach(function(n) {
+    Element[n] = WrapComponent(Element[n]);
+  });
+  return WrapComponent(Element);
+}
+export {
+  createElement as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,70 @@
+import { default as default2 } from "./Plot.mjs";
+import { default as default3 } from "./component/Chart/index.mjs";
+import { default as default4 } from "./component/StackGroupBar/StackGroupBar.mjs";
+import { XAxis, YAxis } from "./Axis.mjs";
+import { default as default5 } from "./Line.mjs";
+import { default as default6 } from "./Bar.mjs";
+import { default as default7 } from "./CompactHorizontalBar.mjs";
+import { default as default8 } from "./HorizontalBar.mjs";
+import { default as default9 } from "./GroupBar.mjs";
+import { default as default10 } from "./StackBar.mjs";
+import { default as default11 } from "./Area.mjs";
+import { default as default12 } from "./StackedArea.mjs";
+import { default as default13 } from "./ScatterPlot.mjs";
+import { default as default14 } from "./Bubble.mjs";
+import { default as default15 } from "./RadialTree.mjs";
+import { default as default16 } from "./Donut.mjs";
+import { default as default17 } from "./Venn.mjs";
+import { default as default18, getLabelOffsetPosition } from "./Radar.mjs";
+import { default as default19 } from "./Tooltip.mjs";
+import { default as default20 } from "./ResponsiveContainer.mjs";
+import { ReferenceBackground, ReferenceLine, ReferenceStripes } from "./Reference.mjs";
+import { HoverLine, HoverRect } from "./Hover.mjs";
+import { PlotEventEmitter, calculateBubbleDomain, getBubbleChartValueScale, getScatterPlotRadius, interpolateValue, minMax } from "./utils.mjs";
+import { colors } from "./color.mjs";
+import { makeDataHintsContainer } from "./a11y/hints.mjs";
+import { PatternFill, PatternSymbol, getPatternSymbolSize } from "./Pattern.mjs";
+import { LegendFlex } from "./component/ChartLegend/LegendFlex/LegendFlex.mjs";
+import { LegendTable } from "./component/ChartLegend/LegendTable/LegendTable.mjs";
+export {
+  default11 as Area,
+  default6 as Bar,
+  default14 as Bubble,
+  default3 as Chart,
+  LegendFlex as ChartLegend,
+  LegendTable as ChartLegendTable,
+  default7 as CompactHorizontalBar,
+  default16 as Donut,
+  default9 as GroupBar,
+  default8 as HorizontalBar,
+  HoverLine,
+  HoverRect,
+  default5 as Line,
+  PatternFill,
+  PatternSymbol,
+  default2 as Plot,
+  PlotEventEmitter,
+  default18 as Radar,
+  default15 as RadialTree,
+  ReferenceBackground,
+  ReferenceLine,
+  ReferenceStripes,
+  default20 as ResponsiveContainer,
+  default13 as ScatterPlot,
+  default10 as StackBar,
+  default4 as StackGroupBar,
+  default12 as StackedArea,
+  default19 as Tooltip,
+  default17 as Venn,
+  XAxis,
+  YAxis,
+  calculateBubbleDomain,
+  colors,
+  getBubbleChartValueScale,
+  getLabelOffsetPosition,
+  getPatternSymbolSize,
+  getScatterPlotRadius,
+  interpolateValue,
+  makeDataHintsContainer,
+  minMax
+};

package/lib/esm/style/area.shadow.css

@@ -0,0 +1,50 @@
+@import './var.css';
+
+SArea {
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  fill-opacity: 0.2;
+}
+
+SArea[color] {
+  fill: var(--color);
+}
+
+SArea[pattern] {
+  fill: var(--pattern);
+  fill-opacity: 0.7;
+}
+
+SArea[transparent] {
+  opacity: 0.3;
+}
+
+SAreaLine {
+  stroke: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke-width: 3;
+  fill: transparent;
+}
+
+SAreaLine[color] {
+  stroke: var(--color);
+}
+
+SAreaLine[transparent] {
+  opacity: 0.3;
+}
+
+SArea,
+SAreaLine {
+  transition-property: d;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+}
+
+SNull {
+  fill: transparent;
+  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+  stroke-dasharray: 4;
+}
+
+SNull[hide] {
+  display: none;
+}

package/lib/esm/style/axis.shadow.css

@@ -0,0 +1,88 @@
+SAxis {
+  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+}
+
+SAxis[hide] {
+  display: none;
+}
+
+STick {
+  font-size: var(--intergalactic-fs-100, 12px);
+  fill: var(--intergalactic-chart-grid-text-label, #6c6e79);
+}
+
+STick[hide] {
+  display: none;
+}
+
+SGrid {
+  fill: transparent;
+  stroke: var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+STitle {
+  font-size: var(--intergalactic-fs-100, 12px);
+  fill: var(--intergalactic-text-hint, #6c6e79);
+  transform-origin: var(--transform-origin);
+}
+
+STitle[position='top'] {
+  text-anchor: middle;
+}
+
+STitle[position='bottom'] {
+  text-anchor: middle;
+  dominant-baseline: hanging;
+}
+
+STitle[position='right'] {
+  transform: rotate(-90deg);
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
+
+STitle[position='left'] {
+  transform: rotate(-90deg);
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+STitle[position='right'][verticalWritingMode],
+STitle[position='left'][verticalWritingMode] {
+  writing-mode: vertical-rl;
+  transform: none;
+}
+
+STick[position='top'] {
+  transform: translateY(-12px);
+  text-anchor: middle;
+}
+
+STick[position='bottom'] {
+  transform: translateY(12px);
+  text-anchor: middle;
+  dominant-baseline: hanging;
+}
+
+STick[position='right'] {
+  transform: translateX(16px);
+  text-anchor: start;
+  dominant-baseline: middle;
+}
+
+STick[position='left'] {
+  transform: translateX(-16px);
+  text-anchor: end;
+  dominant-baseline: middle;
+}
+
+STick[position='custom_0'] {
+  transform: translateY(12px);
+  text-anchor: middle;
+  dominant-baseline: hanging;
+}
+
+STick[position='custom_1'] {
+  transform: translateX(-16px);
+  text-anchor: end;
+  dominant-baseline: middle;
+}

package/lib/esm/style/bar.shadow.css

@@ -0,0 +1,66 @@
+@import './var.css';
+
+SBar {
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  transition-property: height, width, y;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+}
+
+SBar[color] {
+  fill: var(--color);
+}
+
+SBar[pattern][color] {
+  fill: var(--pattern);
+  stroke: var(--color);
+  stroke-width: 1px;
+}
+
+SBar[hide] {
+  display: none;
+}
+
+SBar[transparent] {
+  opacity: 0.3;
+}
+
+SBar[onClick] {
+  cursor: pointer;
+}
+
+SBackground {
+  fill: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+}
+SBackground[onClick] {
+  cursor: pointer;
+}
+
+SBarAnnotation {
+  display: flex;
+  justify-content: space-between;
+}
+SBarLabel {
+  color: var(--intergalactic-text-primary, #191b23);
+  margin-right: auto;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+SBarPercent {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  margin-right: var(--intergalactic-spacing-2x, 8px);
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+SBarValue {
+  min-width: 52px;
+  display: flex;
+  justify-content: flex-end;
+  color: var(--intergalactic-text-primary, #191b23);
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  text-align: right;
+}
+SCompactHorizontalBarHoverRect {
+  fill: var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3));
+}

package/lib/esm/style/bubble.shadow.css

@@ -0,0 +1,64 @@
+@import './var.css';
+
+SBubble {
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-grid-border, #ffffff);
+  stroke-width: 2px;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SBubble[color] {
+  fill: var(--color);
+}
+
+SBubble[pattern][color] {
+  fill: var(--pattern);
+  stroke: var(--color);
+  stroke-width: 1px;
+}
+
+SBubble[transparent] {
+  opacity: 0.3;
+}
+
+SCenter {
+  text-anchor: middle;
+  /* disable-tokens-validator */
+  font-size: calc(var(--intergalactic-fs-100, 12px) - 1px);
+  stroke: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+}
+
+SCenter[color] {
+  stroke: var(--color);
+}
+
+SCenter[transparent] {
+  opacity: 0.3;
+}
+
+SLabel {
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+}
+
+SLabel[position='right'] {
+  text-anchor: end;
+}
+
+SLabel[position='left'] {
+  text-anchor: start;
+}
+
+SLabel[color] {
+  fill: var(--color);
+}
+
+SLabel[transparent] {
+  opacity: 0.3;
+}

package/lib/esm/style/donut.shadow.css

@@ -0,0 +1,36 @@
+@import './var.css';
+
+SPie {
+  stroke: var(--intergalactic-chart-grid-border, #ffffff);
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+}
+
+SPie[color] {
+  fill: var(--color);
+}
+
+SPie[pattern][color] {
+  fill: var(--pattern);
+  stroke: var(--color);
+  stroke-width: 1px;
+}
+
+SPie[transparent] {
+  opacity: 0.3;
+}
+
+SEmptyData {
+  fill: var(--intergalactic-chart-palette-order-null, #e0e1e9);
+}
+
+SEmptyData[color] {
+  fill: var(--color);
+}
+
+SLabel {
+  text-anchor: middle;
+  vertical-anchor: middle;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+
+}

package/lib/esm/style/dot.shadow.css

@@ -0,0 +1,27 @@
+@import './var.css';
+
+SDots {
+  & SDot {
+    transition-duration: var(--duration);
+  }
+}
+
+SDot {
+  stroke-width: 1px;
+  stroke: var(--intergalactic-chart-grid-border, #ffffff);
+  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  transition-property: cx, cy, x, y;
+  transition-timing-function: ease-in-out;
+}
+
+SDot[hide] {
+  display: none;
+}
+
+SDot[color] {
+  fill: var(--color);
+}
+
+SDot[transparent] {
+  opacity: 0.3;
+}

package/lib/esm/style/hover.shadow.css

@@ -0,0 +1,9 @@
+SHoverLine {
+  outline: none;
+  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+}
+
+SHoverRect {
+  outline: none;
+  fill: var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3));
+}