@carbon/charts 0.59.0-beta.0 → 1.0.3

package/styles/color-palatte.scss

@@ -0,0 +1,362 @@
+@use "sass:map";
+@use "@carbon/styles/scss/colors";
+
+@function getColorValue($color, $scale) {
+	@return map.get($colors, $color, $scale);
+}
+
+$white-theme-colors: (
+	'1': (
+		'1': (
+			'1': getColorValue(purple, 70),
+		),
+		'2': (
+			'1': getColorValue(blue, 80),
+		),
+		'3': (
+			'1': getColorValue(cyan, 50),
+		),
+		'4': (
+			'1': getColorValue(teal, 60),
+		),
+	),
+	'2': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(teal, 50),
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(red, 90),
+		),
+		'3': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 90),
+		),
+		'4': (
+			'1': getColorValue(cyan, 50),
+			'2': getColorValue(teal, 70),
+		),
+		'5': (
+			'1': getColorValue(teal, 50),
+			'2': getColorValue(blue, 80),
+		),
+	),
+	'3': (
+		'1': (
+			'1': getColorValue(magenta, 50),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(purple, 70),
+		),
+		'2': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 50),
+			'3': getColorValue(red, 90),
+		),
+		'3': (
+			'1': getColorValue(purple, 50),
+			'2': getColorValue(teal, 70),
+			'3': getColorValue(blue, 80),
+		),
+		'4': (
+			'1': getColorValue(purple, 50),
+			'2': getColorValue(teal, 70),
+			'3': getColorValue(magenta, 70),
+		),
+		'5': (
+			'1': getColorValue(cyan, 90),
+			'2': getColorValue(purple, 70),
+			'3': getColorValue(teal, 50),
+		),
+	),
+	'4': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 90),
+			'3': getColorValue(teal, 50),
+			'4': getColorValue(magenta, 50),
+		),
+		'2': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 50),
+			'3': getColorValue(red, 90),
+			'4': getColorValue(purple, 50),
+		),
+		'3': (
+			'1': getColorValue(teal, 50),
+			'2': getColorValue(blue, 80),
+			'3': getColorValue(purple, 50),
+			'4': getColorValue(magenta, 70),
+		),
+	),
+	'5': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(teal, 70),
+			'4': getColorValue(magenta, 70),
+			'5': getColorValue(red, 90),
+		),
+		'2': (
+			'1': getColorValue(blue, 80),
+			'2': getColorValue(teal, 50),
+			'3': getColorValue(magenta, 70),
+			'4': getColorValue(red, 90),
+			'5': getColorValue(purple, 50),
+		),
+	),
+	'14': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(teal, 70),
+			'4': getColorValue(magenta, 70),
+			'5': getColorValue(red, 50),
+			'6': getColorValue(red, 90),
+			'7': getColorValue(green, 60),
+			'8': getColorValue(blue, 80),
+			'9': getColorValue(magenta, 50),
+			'10': #b28600,
+			//yellow 50, update when available in carbon color
+			'11': getColorValue(teal, 50),
+			'12': getColorValue(cyan, 90),
+			'13': #8a3800,
+			//orange 70, update when available in carbon color
+			'14': getColorValue(purple, 50),
+		),
+	),
+);
+
+$dark-theme-colors: (
+	'1': (
+		'1': (
+			'1': getColorValue(purple, 30),
+		),
+		'2': (
+			'1': getColorValue(blue, 50),
+		),
+		'3': (
+			'1': getColorValue(cyan, 40),
+		),
+		'4': (
+			'1': getColorValue(teal, 40),
+		),
+	),
+	'2': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(magenta, 40),
+		),
+		'3': (
+			'1': getColorValue(magenta, 40),
+			'2': getColorValue(red, 10),
+		),
+		'4': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(cyan, 20),
+		),
+		'5': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(green, 30),
+		),
+	),
+	'3': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20),
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(magenta, 40),
+			'3': getColorValue(red, 10),
+		),
+		'3': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(purple, 30),
+		),
+		'4': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(green, 30),
+			'3': getColorValue(red, 10),
+		),
+		'5': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(green, 30),
+			'3': getColorValue(cyan, 20),
+		),
+	),
+	'4': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20),
+			'4': getColorValue(blue, 50),
+		),
+		'2': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(purple, 30),
+			'4': getColorValue(red, 10),
+		),
+		'3': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(red, 10),
+			'3': getColorValue(cyan, 40),
+			'4': getColorValue(green, 30),
+		),
+	),
+	'5': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20),
+			'4': getColorValue(blue, 50),
+			'5': getColorValue(magenta, 40),
+		),
+		'2': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(purple, 30),
+			'4': getColorValue(red, 10),
+			'5': getColorValue(green, 30),
+		),
+	),
+	'14': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(cyan, 40),
+			'3': getColorValue(teal, 60),
+			'4': getColorValue(magenta, 40),
+			'5': getColorValue(red, 50),
+			'6': getColorValue(red, 10),
+			'7': getColorValue(green, 30),
+			'8': getColorValue(blue, 50),
+			'9': getColorValue(magenta, 60),
+			'10': #d2a106,
+			//yellow 40, update when available in carbon color
+			'11': getColorValue(teal, 40),
+			'12': getColorValue(cyan, 20),
+			'13': #ba4e00,
+			//orange 60, update when available in carbon color
+			'14': getColorValue(purple, 30),
+		),
+	),
+);
+
+$dark-theme-legend-area-item-colors: (
+	'1': getColorValue(gray, 90),
+	'2': getColorValue(gray, 80),
+	'3': getColorValue(gray, 70),
+);
+
+$dark-theme-legend-area-item-stroke: getColorValue(gray, 60);
+
+$white-theme-legend-area-item-colors: (
+	'1': getColorValue(gray, 10),
+	'2': getColorValue(gray, 20),
+	'3': getColorValue(gray, 30),
+);
+
+$white-theme-legend-area-item-stroke: getColorValue(gray, 50);
+
+$monochrome-quantize-colors: (
+	'mono-1': (
+		'1': #ffffff,
+		'2': getColorValue(purple, 10),
+		'3': getColorValue(purple, 20),
+		'4': getColorValue(purple, 30),
+		'5': getColorValue(purple, 40),
+		'6': getColorValue(purple, 50),
+		'7': getColorValue(purple, 60),
+		'8': getColorValue(purple, 70),
+		'9': getColorValue(purple, 80),
+		'10': getColorValue(purple, 90),
+		'11': getColorValue(purple, 100),
+	),
+	'mono-2': (
+		'1': #ffffff,
+		'2': getColorValue(blue, 10),
+		'3': getColorValue(blue, 20),
+		'4': getColorValue(blue, 30),
+		'5': getColorValue(blue, 40),
+		'6': getColorValue(blue, 50),
+		'7': getColorValue(blue, 60),
+		'8': getColorValue(blue, 70),
+		'9': getColorValue(blue, 80),
+		'10': getColorValue(blue, 90),
+		'11': getColorValue(blue, 100),
+	),
+	'mono-3': (
+		'1': #ffffff,
+		'2': getColorValue(cyan, 10),
+		'3': getColorValue(cyan, 20),
+		'4': getColorValue(cyan, 30),
+		'5': getColorValue(cyan, 40),
+		'6': getColorValue(cyan, 50),
+		'7': getColorValue(cyan, 60),
+		'8': getColorValue(cyan, 70),
+		'9': getColorValue(cyan, 80),
+		'10': getColorValue(cyan, 90),
+		'11': getColorValue(cyan, 100),
+	),
+	'mono-4': (
+		'1': #ffffff,
+		'2': getColorValue(teal, 10),
+		'3': getColorValue(teal, 20),
+		'4': getColorValue(teal, 30),
+		'5': getColorValue(teal, 40),
+		'6': getColorValue(teal, 50),
+		'7': getColorValue(teal, 60),
+		'8': getColorValue(teal, 70),
+		'9': getColorValue(teal, 80),
+		'10': getColorValue(teal, 90),
+		'11': getColorValue(teal, 100),
+	),
+);
+
+$divergent-quantize-colors: (
+	'diverge-1': (
+		'1': getColorValue(red, 80),
+		'2': getColorValue(red, 70),
+		'3': getColorValue(red, 60),
+		'4': getColorValue(red, 50),
+		'5': getColorValue(red, 40),
+		'6': getColorValue(red, 30),
+		'7': getColorValue(red, 20),
+		'8': getColorValue(red, 10),
+		'9': #ffffff,
+		'10': getColorValue(cyan, 10),
+		'11': getColorValue(cyan, 20),
+		'12': getColorValue(cyan, 30),
+		'13': getColorValue(cyan, 40),
+		'14': getColorValue(cyan, 50),
+		'15': getColorValue(cyan, 60),
+		'16': getColorValue(cyan, 70),
+		'17': getColorValue(cyan, 80),
+	),
+	'diverge-2': (
+		'1': getColorValue(purple, 80),
+		'2': getColorValue(purple, 70),
+		'3': getColorValue(purple, 60),
+		'4': getColorValue(purple, 50),
+		'5': getColorValue(purple, 40),
+		'6': getColorValue(purple, 30),
+		'7': getColorValue(purple, 20),
+		'8': getColorValue(purple, 10),
+		'9': #ffffff,
+		'10': getColorValue(teal, 10),
+		'11': getColorValue(teal, 20),
+		'12': getColorValue(teal, 30),
+		'13': getColorValue(teal, 40),
+		'14': getColorValue(teal, 50),
+		'15': getColorValue(teal, 60),
+		'16': getColorValue(teal, 70),
+		'17': getColorValue(teal, 80),
+	),
+);

package/styles/colors.scss

@@ -0,0 +1,140 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "@carbon/styles/scss/themes";
+@use "@carbon/styles/scss/theme" as *;
+
+@import './color-palatte.scss';
+
+@function generateCSSCustomProperty($token, $fallback) {
+	@return var(--cds-charts-#{$token}, $fallback);
+}
+
+@function getThemeColors($theme_type) {
+	@if $theme_type == 'dark' {
+		@return color-property(null, $dark-theme-colors);
+	} @else {
+		@return color-property(null, $white-theme-colors);
+	}
+}
+
+@function getGradientColors() {
+	$monochrome: color-property(null, $monochrome-quantize-colors);
+	$divergent: color-property(null, $divergent-quantize-colors);
+
+	@return map-merge($monochrome, $divergent);
+}
+
+@function color-property($name, $theme-colors) {
+	$color-items: ();
+
+	@if type-of($theme-colors) == map {
+		@each $category, $value in $theme-colors {
+			@if $name == null {
+				$color-items: map-merge(
+					$color-items,
+					color-property('#{$category}', $value)
+				);
+			} @else {
+				$color-items: map-merge(
+					$color-items,
+					color-property('#{$name}-#{$category}', $value)
+				);
+			}
+		}
+		@return $color-items;
+	} @else {
+		@return (#{$name}: $theme-colors);
+	}
+}
+
+$color-map-light: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--chart-holder {
+	@each $token, $color in $color-map-light {
+		--cds-charts-#{$token}: #{$color};
+		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
+	}
+}
+
+$color-map-dark: map-merge(getThemeColors('dark'), getGradientColors());
+.#{$prefix}--chart-holder[data-carbon-theme='g90'],
+.#{$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%)};
+	}
+}
+
+$color-map: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--#{$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;
+			}
+		}
+
+		.background-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+
+			&.hovered {
+				background-color: generateCSSCustomProperty(
+					#{$token}-hovered,
+					$color
+				);
+				@include default_transition;
+			}
+		}
+
+		.stroke-#{$token} {
+			stroke: generateCSSCustomProperty($token, $color);
+		}
+
+		.stop-color-#{$token} {
+			stop-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--tooltip {
+	$color-map: getThemeColors('light');
+
+	@each $token, $color in $color-map {
+		.tooltip-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--legend {
+	.additional > .icon {
+		.area-1 {
+			fill: $zone-fill-01;
+			stroke: $zone-stroke-01;
+		}
+
+		.area-2 {
+			fill: $zone-fill-02;
+			stroke: $zone-stroke-02;
+		}
+
+		.area-3 {
+			fill: $zone-fill-03;
+			stroke: $zone-stroke-03;
+		}
+
+		.quartile {
+			&-wrapper {
+				fill: $zone-fill-02;
+				stroke: $zone-stroke-01;
+			}
+
+			&-line {
+				fill: $layer-inverse-absolute;
+			}
+		}
+	}
+}

package/styles/components/_axis.scss

@@ -0,0 +1,52 @@
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--axes {
+	overflow: visible;
+
+	g.axis {
+		g.ticks.invisible {
+			visibility: hidden;
+		}
+
+		g.tick-hover rect.axis-holder {
+			fill: transparent;
+			stroke: transparent;
+			stroke-width: 2px;
+		}
+
+		g.tick-hover:hover,
+		g.tick-hover:focus {
+			rect.axis-holder {
+				fill: $layer-selected-inverse;
+				stroke: $layer-selected-inverse;
+				stroke-width: 2px;
+			}
+
+			text {
+				fill: $layer-selected;
+			}
+		}
+
+		g.tick text {
+			fill: $text-secondary;
+			font-family: font-family('sans-condensed');
+		}
+
+		g.tick line {
+			display: none;
+		}
+
+		path.domain {
+			stroke: $border-strong-01;
+		}
+
+		.axis-title {
+			font-family: font-family('sans');
+			// TODO-V11
+			// font-weight: font-weight('semibold');
+			font-weight: 600;
+			fill: $text-primary;
+		}
+	}
+}

package/styles/components/_edge.scss

@@ -0,0 +1,65 @@
+@import "@carbon/themes/scss/tokens";
+@import "@carbon/layout/scss/spacing";
+@import "@carbon/import-once/scss/index";
+
+@include exports("cc-edge") {
+	.#{$prefix}--#{$charts-prefix}--edge {
+		fill: transparent;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge__container {
+		stroke-width: $spacing-06;
+		stroke: transparent;
+		stroke-dasharray: none;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge__inner {
+		stroke-width: 0.0625rem;
+		stroke: $border-inverse;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge__outer {
+		stroke-width: 0.15625rem;
+		stroke: transparent;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge:hover {
+		.#{$prefix}--#{$charts-prefix}--edge__inner {
+			stroke-width: 0.15625rem;
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-sm {
+		stroke-dasharray: mini-units(0.25) mini-units(0.5);
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-md {
+		stroke-dasharray: mini-units(0.5) mini-units(0.5);
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-lg {
+		stroke-dasharray: mini-units(1) mini-units(0.5);
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-xl {
+		stroke-dasharray: mini-units(2) mini-units(0.5);
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--tunnel {
+		.#{$prefix}--#{$charts-prefix}--edge__outer {
+			stroke: $layer-accent-01;
+			stroke-width: mini-units(0.75);
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--double {
+		.#{$prefix}--#{$charts-prefix}--edge__inner {
+			stroke: $background;
+		}
+
+		.#{$prefix}--#{$charts-prefix}--edge__outer {
+			stroke: $border-inverse;
+			stroke-width: mini-units(0.5625);
+		}
+	}
+}

package/styles/components/_marker.scss

@@ -0,0 +1,7 @@
+@import "@carbon/import-once/scss/index";
+
+@include exports("cc-marker") {
+	.#{$prefix}--#{$charts-prefix}--marker {
+		fill: $border-inverse;
+	}
+}

package/styles/components/_modal.scss

@@ -0,0 +1,48 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme';
+
+.#{$prefix}--chart-holder {
+	.#{$prefix}--modal {
+		&.is-visible {
+			z-index: 99999;
+		}
+
+		.#{$prefix}--modal-container {
+			.#{$prefix}--modal-header {
+				&__label {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+
+				&__heading {
+					margin-top: 0.5rem;
+					margin-bottom: 1rem;
+				}
+			}
+
+			.#{$prefix}--modal-content {
+				padding: 0;
+				margin-bottom: 0;
+				color-scheme: $color-scheme;
+
+				table {
+					position: relative;
+					border-collapse: collapse;
+
+					th {
+						position: sticky;
+						top: 0;
+					}
+				}
+			}
+
+			.#{$prefix}--modal-footer {
+				background-color: transparent;
+
+				.#{$prefix}--#{$charts-prefix}-modal-footer-spacer {
+					width: 50%;
+				}
+			}
+		}
+	}
+}