@carbon/charts 1.11.20 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "1.11.20",
+	"version": "1.12.0",
 	"description": "Carbon Charts component library",
 	"module": "./dist/index.mjs",
 	"main": "./dist/umd/bundle.umd.js",
@@ -81,7 +81,7 @@
 		"@carbon/colors": "^11.19.0",
 		"@carbon/telemetry": "~0.1.0",
 		"@carbon/utils-position": "^1.1.4",
-		"carbon-components": "^10.58.8",
+		"carbon-components": "^10.58.10",
 		"d3": "^7.8.5",
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
@@ -89,7 +89,7 @@
 		"html-to-image": "^1.11.11",
 		"lodash-es": "^4.17.21",
 		"topojson-client": "^3.1.0",
-		"tslib": "^2.6.1"
+		"tslib": "^2.6.2"
 	},
 	"peerDependencies": {
 		"d3": "^7.0.0",
@@ -107,43 +107,44 @@
 	"devDependencies": {
 		"@babel/core": "^7.22.10",
 		"@carbon/import-once": "^10.7.0",
-		"@carbon/layout": "^11.18.0",
-		"@carbon/styles": "^1.35.0",
-		"@carbon/themes": "^11.23.0",
+		"@carbon/layout": "^11.19.0",
+		"@carbon/styles": "^1.36.0",
+		"@carbon/themes": "^11.24.0",
+		"@rollup/plugin-replace": "^5.0.2",
 		"@rushstack/eslint-patch": "^1.3.3",
 		"@stackblitz/sdk": "^1.9.0",
-		"@storybook/addon-essentials": "^7.2.2",
-		"@storybook/addon-interactions": "^7.2.2",
-		"@storybook/addon-links": "^7.2.2",
-		"@storybook/blocks": "^7.2.2",
-		"@storybook/html": "^7.2.2",
-		"@storybook/html-vite": "^7.2.2",
-		"@storybook/manager-api": "^7.2.2",
+		"@storybook/addon-essentials": "^7.3.2",
+		"@storybook/addon-interactions": "^7.3.2",
+		"@storybook/addon-links": "^7.3.2",
+		"@storybook/blocks": "^7.3.2",
+		"@storybook/html": "^7.3.2",
+		"@storybook/html-vite": "^7.3.2",
+		"@storybook/manager-api": "^7.3.2",
 		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.2.2",
+		"@storybook/theming": "^7.3.2",
 		"@types/d3": "^7.4.0",
 		"@types/d3-cloud": "^1.2.5",
 		"@types/d3-sankey": "^0.12.1",
 		"@types/lodash-es": "^4.17.8",
 		"@types/topojson": "^3.2.3",
-		"@typescript-eslint/eslint-plugin": "^6.3.0",
-		"@typescript-eslint/parser": "^6.3.0",
-		"concurrently": "^8.2.0",
+		"@typescript-eslint/eslint-plugin": "^6.4.1",
+		"@typescript-eslint/parser": "^6.4.1",
+		"concurrently": "^8.2.1",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.46.0",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-storybook": "^0.6.13",
 		"jsdom": "^22.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"resize-observer-polyfill": "^1.5.1",
-		"sass": "~1.64.2",
-		"storybook": "^7.2.2",
+		"sass": "^1.66.1",
+		"storybook": "^7.3.2",
 		"typedoc": "^0.24.8",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9",
-		"vite-plugin-dts": "^3.5.1",
-		"vitest": "^0.34.1"
+		"vite-plugin-dts": "^3.5.2",
+		"vitest": "^0.34.2"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -192,5 +193,5 @@
 			"url": "https://github.com/theiliad"
 		}
 	],
-	"gitHead": "8ad1a690e8e336a268d15750576485ebb54307e5"
+	"gitHead": "5ae03ad9e7d7d682ad3220301b46edd35f6e4929"
 }

package/scss/_chart-holder.scss

@@ -1,7 +1,8 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/themes';
+@use 'globals';
 
-.#{$prefix}--chart-holder {
+.#{globals.$prefix}--chart-holder {
 	position: relative;
 	display: block;
 	width: 100%;
@@ -9,39 +10,39 @@
 
 	&.filled,
 	&.fullscreen {
-		background-color: $background;
+		background-color: theme.$background;
 
-		.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-			background-color: $background;
+		.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
+			background-color: theme.$background;
 		}
 	}
 
+	// May not be needed any longer
 	.DONT_STYLE_ME_css_styles_verifier {
 		overflow: hidden;
 		opacity: 0;
 	}
 }
 
-.#{$prefix}--chart-holder {
-	@include theme(themes.$white);
+.#{globals.$prefix}--chart-holder {
+	@include theme.theme(themes.$white);
 }
 
-.#{$prefix}--chart-holder[data-carbon-theme='g10'] {
-	@include theme(themes.$g10);
+.#{globals.$prefix}--chart-holder[data-carbon-theme='g10'] {
+	@include theme.theme(themes.$g10);
 }
 
-.#{$prefix}--chart-holder[data-carbon-theme='g90'] {
-	@include theme(themes.$g90);
+.#{globals.$prefix}--chart-holder[data-carbon-theme='g90'] {
+	@include theme.theme(themes.$g90);
 }
 
-.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
-	@include theme(themes.$g100);
+.#{globals.$prefix}--chart-holder[data-carbon-theme='g100'] {
+	@include theme.theme(themes.$g100);
 }
 
-.#{$prefix}--chart-holder.fullscreen,
-.#{$prefix}--chart-holder:-webkit-full-screen {
-	/* !important is used here to get closer to
-	a truly fullscreen experience */
+.#{globals.$prefix}--chart-holder.fullscreen,
+.#{globals.$prefix}--chart-holder:-webkit-full-screen {
+	// important used to ensure full-screen experience
 	width: 100% !important;
 	height: 100% !important;
 	max-width: unset !important;

package/scss/_chart-wrapper.scss

@@ -0,0 +1,6 @@
+@use 'globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
+	overflow: visible;
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
+}

package/scss/_color-palette.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '@carbon/styles/scss/colors';
+@use '@carbon/colors';
 
 @function getColorValue($color, $scale) {
-	@return map.get($colors, $color, $scale);
+	@return map.get(colors.$colors, $color, $scale);
 }
 
 $white-theme-colors: (

package/scss/_colors.scss

@@ -1,10 +1,11 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
-
-@import 'color-palette';
+// Prefix of these used below for traceability
+@use 'globals';
+@use 'transition';
+@use 'tokens';
+@use 'color-palette' as palette;
 
 @function generateCSSCustomProperty($token, $fallback) {
 	@return var(--cds-charts-#{$token}, $fallback);
@@ -12,15 +13,15 @@
 
 @function getThemeColors($theme_type) {
 	@if $theme_type == 'dark' {
-		@return color-property(null, $dark-theme-colors);
+		@return color-property(null, palette.$dark-theme-colors);
 	} @else {
-		@return color-property(null, $white-theme-colors);
+		@return color-property(null, palette.$white-theme-colors);
 	}
 }
 
 @function getGradientColors() {
-	$monochrome: color-property(null, $monochrome-quantize-colors);
-	$divergent: color-property(null, $divergent-quantize-colors);
+	$monochrome: color-property(null, palette.$monochrome-quantize-colors);
+	$divergent: color-property(null, palette.$divergent-quantize-colors);
 
 	@return map-merge($monochrome, $divergent);
 }
@@ -43,7 +44,7 @@
 }
 
 $color-map-light: map-merge(getThemeColors('light'), getGradientColors());
-.#{$prefix}--chart-holder {
+.#{globals.$prefix}--chart-holder {
 	@each $token, $color in $color-map-light {
 		--cds-charts-#{$token}: #{$color};
 		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
@@ -51,8 +52,8 @@ $color-map-light: map-merge(getThemeColors('light'), getGradientColors());
 }
 
 $color-map-dark: map-merge(getThemeColors('dark'), getGradientColors());
-.#{$prefix}--chart-holder[data-carbon-theme='g90'],
-.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
+.#{globals.$prefix}--chart-holder[data-carbon-theme='g90'],
+.#{globals.$prefix}--chart-holder[data-carbon-theme='g100'] {
 	@each $token, $color in $color-map-dark {
 		--cds-charts-#{$token}: #{$color};
 		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
@@ -60,14 +61,14 @@ $color-map-dark: map-merge(getThemeColors('dark'), getGradientColors());
 }
 
 $color-map: map-merge(getThemeColors('light'), getGradientColors());
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
 	@each $token, $color in $color-map {
 		.fill-#{$token} {
 			fill: generateCSSCustomProperty($token, $color);
 
 			&.hovered {
 				fill: generateCSSCustomProperty(#{$token}-hovered, $color);
-				@include default_transition;
+				@include transition.default_transition;
 			}
 		}
 
@@ -76,7 +77,7 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors());
 
 			&.hovered {
 				background-color: generateCSSCustomProperty(#{$token}-hovered, $color);
-				@include default_transition;
+				@include transition.default_transition;
 			}
 		}
 
@@ -90,7 +91,7 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors());
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--tooltip {
+.#{globals.$prefix}--#{globals.$charts-prefix}--tooltip {
 	$color-map: getThemeColors('light');
 
 	@each $token, $color in $color-map {
@@ -100,31 +101,31 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors());
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--legend {
+.#{globals.$prefix}--#{globals.$charts-prefix}--legend {
 	.additional > .icon {
 		.area-1 {
-			fill: $zone-fill-01;
-			stroke: $zone-stroke-01;
+			fill: tokens.$zone-fill-01;
+			stroke: tokens.$zone-stroke-01;
 		}
 
 		.area-2 {
-			fill: $zone-fill-02;
-			stroke: $zone-stroke-02;
+			fill: tokens.$zone-fill-02;
+			stroke: tokens.$zone-stroke-02;
 		}
 
 		.area-3 {
-			fill: $zone-fill-03;
-			stroke: $zone-stroke-03;
+			fill: tokens.$zone-fill-03;
+			stroke: tokens.$zone-stroke-03;
 		}
 
 		.quartile {
 			&-wrapper {
-				fill: $zone-fill-02;
-				stroke: $zone-stroke-01;
+				fill: tokens.$zone-fill-02;
+				stroke: tokens.$zone-stroke-01;
 			}
 
 			&-line {
-				fill: $layer-inverse-absolute;
+				fill: tokens.$layer-inverse-absolute;
 			}
 		}
 	}

package/scss/_globals.scss

@@ -0,0 +1,8 @@
+@use '@carbon/type/scss/font-family' as font;
+$prefix: 'cds'; // Carbon Design System
+$charts-prefix: 'cc'; // Carbon Charts
+
+// Sets CSS custom property associated with chart wrapper,
+// tooltips and the Tabular representation in the modal
+$font-family: font.font-family('sans');
+$font-family-condensed: font.font-family('sans-condensed');

package/scss/_tokens.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@carbon/styles/scss/themes';
+@use '@carbon/colors';
 @use '@carbon/styles/scss/utilities/component-tokens';
-@use '@carbon/colors' as *;
 
 // THEMES
 $color-scheme: (
@@ -28,15 +28,15 @@ $color-scheme: (
 
 // ELEMENTS
 $alert-stroke: (
-	fallback: $yellow-50,
+	fallback: colors.$yellow-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $yellow-50
+			value: colors.$yellow-50
 		),
 		(
 			theme: themes.$g10,
-			value: $yellow-50
+			value: colors.$yellow-50
 		),
 		(
 			theme: themes.$g90,
@@ -50,45 +50,45 @@ $alert-stroke: (
 ) !default;
 
 $layer-01-absolute: (
-	fallback: $white-0,
+	fallback: colors.$white-0,
 	values: (
 		(
 			theme: themes.$white,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g10,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g90,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g100,
-			value: $black-100
+			value: colors.$black-100
 		)
 	)
 ) !default;
 
 $layer-inverse-absolute: (
-	fallback: $black-100,
+	fallback: colors.$black-100,
 	values: (
 		(
 			theme: themes.$white,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g10,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g90,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g100,
-			value: $white-0
+			value: colors.$white-0
 		)
 	)
 ) !default;
@@ -129,7 +129,7 @@ $grid-bg: (
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-100
+			value: colors.$gray-100
 		),
 		(
 			theme: themes.$g100,
@@ -140,23 +140,23 @@ $grid-bg: (
 
 // METER
 $meter-range-indicator: (
-	fallback: $gray-40,
+	fallback: colors.$gray-40,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-40
+			value: colors.$gray-40
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-40
+			value: colors.$gray-40
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
@@ -209,130 +209,130 @@ $tooltip-line-border: (
 
 // ZONES
 $zone-fill-01: (
-	fallback: $gray-10,
+	fallback: colors.$gray-10,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-10
+			value: colors.$gray-10
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-10
+			value: colors.$gray-10
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-90
+			value: colors.$gray-90
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-90
+			value: colors.$gray-90
 		)
 	)
 ) !default;
 $zone-stroke-01: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
 
 $zone-fill-02: (
-	fallback: $gray-20,
+	fallback: colors.$gray-20,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-20
+			value: colors.$gray-20
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-20
+			value: colors.$gray-20
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-80
+			value: colors.$gray-80
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-80
+			value: colors.$gray-80
 		)
 	)
 ) !default;
 $zone-stroke-02: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
 
 $zone-fill-03: (
-	fallback: $gray-30,
+	fallback: colors.$gray-30,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-30
+			value: colors.$gray-30
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-30
+			value: colors.$gray-30
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-70
+			value: colors.$gray-70
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-70
+			value: colors.$gray-70
 		)
 	)
 ) !default;
 $zone-stroke-03: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;

package/scss/_transition.scss

@@ -0,0 +1,4 @@
+// Used by ./colors and ./components/tree
+@mixin default_transition {
+	transition: all 0.1s ease-out;
+}

package/scss/_type.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/layout' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/layout';
+@use 'globals';
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	// Set CSS custom properties using font-family mixin then reuse them
-	--#{$prefix}-charts-font-family: #{font-family('sans')};
-	--#{$prefix}-charts-font-family-condensed: #{font-family('sans-condensed')};
-
-	font-family: var(--#{$prefix}-charts-font-family-condensed);
+.#{globals.$prefix}--chart-holder {
+	--#{globals.$prefix}-charts-font-family: #{globals.$font-family};
+	--#{globals.$prefix}-charts-font-family-condensed: #{globals.$font-family-condensed};
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+}
 
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
 	p {
 		padding: 0;
 		margin: 0;
@@ -16,7 +16,7 @@
 		// TODO-V11
 		// font-weight: font-weight('regular');
 		font-weight: 400;
-		color: $text-secondary;
+		color: theme.$text-secondary;
 	}
 
 	text {
@@ -24,11 +24,11 @@
 		// TODO-V11
 		// font-weight: font-weight('regular');
 		font-weight: 400;
-		fill: $text-secondary;
+		fill: theme.$text-secondary;
 	}
 
 	g.gauge-numbers text.gauge-value-number {
-		font-family: var(--#{$prefix}-charts-font-family);
+		font-family: var(--#{globals.$prefix}-charts-font-family);
 		// TODO-V11
 		// font-weight: font-weight('light');
 		font-weight: 300;
@@ -36,8 +36,8 @@
 
 	text.meter-title,
 	text.percent-value {
-		font-size: $base-font-size;
-		font-family: var(--#{$prefix}-charts-font-family);
+		font-size: layout.$base-font-size;
+		font-family: var(--#{globals.$prefix}-charts-font-family);
 	}
 
 	text.meter-title {