@carbon/charts 1.8.0 → 1.9.0-next.0

package/dist/styles/graphs/_bullet.scss

@@ -0,0 +1,36 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme';
+
+@use '@carbon/styles/scss/motion' as *;
+
+.#{$prefix}--#{$charts-prefix}--bullet {
+	path.range-box {
+		pointer-events: none;
+
+		&.order-1 {
+			fill: $zone-fill-01;
+			stroke: $zone-stroke-01;
+		}
+
+		&.order-2 {
+			fill: $zone-fill-02;
+			stroke: $zone-stroke-02;
+		}
+
+		&.order-3 {
+			fill: $zone-fill-03;
+			stroke: $zone-stroke-03;
+		}
+	}
+
+	path.marker,
+	path.quartile {
+		pointer-events: none;
+		stroke-width: 1.5px;
+		stroke: $layer-inverse-absolute;
+	}
+
+	path.quartile.over-bar {
+		stroke: $layer-01-absolute;
+	}
+}

package/dist/styles/graphs/_circle-pack.scss

@@ -0,0 +1,36 @@
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--circle-pack {
+	circle.node {
+		stroke-width: 1.5px;
+
+		&.hovered {
+			fill-opacity: 1;
+		}
+
+		&.non-focal {
+			fill: $icon-disabled;
+			fill-opacity: 30%;
+			stroke: $icon-disabled;
+		}
+
+		&.clickable {
+			cursor: zoom-in;
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper.zoomed-in {
+	cursor: zoom-out;
+	.#{$prefix}--#{$charts-prefix}--circle-pack {
+		circle.node {
+			&.hovered-child {
+				stroke: 1.5px solid initial;
+			}
+
+			&.clickable {
+				cursor: zoom-out;
+			}
+		}
+	}
+}

package/dist/styles/graphs/_gauge.scss

@@ -0,0 +1,23 @@
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--gauge {
+	overflow: visible;
+
+	path.arc-background {
+		fill: $layer-01;
+	}
+
+	.gauge-delta-arrow {
+		&.status--danger {
+			fill: $support-error;
+		}
+
+		&.status--warning {
+			fill: $support-warning;
+		}
+
+		&.status--success {
+			fill: $support-success;
+		}
+	}
+}

package/dist/styles/graphs/_heatmap.scss

@@ -0,0 +1,60 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--heatmap {
+	g.highlighter-hidden {
+		visibility: hidden;
+	}
+
+	g.cell-highlight {
+		line {
+			stroke: white;
+			stroke-width: 1px;
+		}
+	}
+
+	g.cell-2 {
+		line {
+			stroke: white;
+			stroke-width: 2px !important;
+		}
+	}
+
+	g.multi-cell {
+		line {
+			stroke: white;
+			stroke-width: 2px;
+		}
+	}
+
+	rect.pattern-fill {
+		fill: $border-strong-01;
+	}
+
+	g.shadows {
+		line.top {
+			filter: drop-shadow(0px -3px 2px black);
+		}
+
+		line.down {
+			filter: drop-shadow(0px 3px 2px black);
+		}
+
+		line.left {
+			filter: drop-shadow(-3px 0px 2px black);
+		}
+
+		line.right {
+			filter: drop-shadow(3px 0px 2px black);
+		}
+	}
+
+	rect.heat {
+		stroke-width: 0px;
+		stroke: $background;
+	}
+
+	rect.null-state {
+		fill: $icon-inverse;
+	}
+}

package/dist/styles/graphs/_meter.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--meter {
+	rect.container {
+		fill: $layer-01;
+	}
+
+	line.rangeIndicator {
+		stroke: $meter-range-indicator;
+		stroke-width: 1px;
+	}
+
+	rect.value {
+		&.status--danger {
+			fill: $support-error;
+		}
+
+		&.status--warning {
+			fill: $support-warning;
+			stroke-width: 1px;
+			stroke: $alert-stroke;
+		}
+
+		&.status--success {
+			fill: $support-success;
+		}
+	}
+
+	line.peak {
+		stroke: $border-inverse;
+		stroke-width: 2px;
+	}
+}

package/dist/styles/graphs/_radar.scss

@@ -0,0 +1,18 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--radar {
+	.blobs path {
+		stroke-width: 1.5px;
+	}
+
+	.y-axes path,
+	.x-axes line {
+		stroke-width: 1px;
+		stroke: $layer-accent-01;
+	}
+
+	.x-axes line.hovered {
+		stroke: $layer-inverse-absolute;
+	}
+}

package/dist/styles/graphs/_scatter-stacked.scss

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--scatter-stacked {
+	circle.dot.unfilled {
+		fill: $layer-01;
+		stroke-width: 1.5;
+	}
+
+	circle.dot.threshold-anomaly {
+		stroke-width: 3;
+	}
+}

package/dist/styles/graphs/_tree.scss

@@ -0,0 +1,46 @@
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper .#{$prefix}--#{$charts-prefix}--tree {
+	g.links {
+		fill: none;
+		stroke: $border-strong-01;
+		stroke-opacity: 0.4;
+		stroke-width: 1.5;
+	}
+
+	g.clickable {
+		cursor: pointer;
+
+		&:hover {
+			text {
+				// TODO-V11
+				// font-weight: font-weight('semibold');
+				font-weight: 600;
+			}
+
+			circle {
+				fill: $text-primary;
+				@include default_transition;
+			}
+		}
+	}
+
+	circle {
+		&.parent {
+			fill: $text-secondary;
+		}
+
+		&.child {
+			fill: $border-strong-01;
+		}
+	}
+
+	text {
+		fill: $text-primary;
+
+		&.text-stroke {
+			stroke: $text-inverse;
+			stroke-width: 2px;
+		}
+	}
+}

package/dist/styles/styles.scss

@@ -0,0 +1,40 @@
+$charts-prefix: 'cc';
+
+$css--reset: false;
+$css--default-type: false;
+
+$prefix: 'cds';
+
+// Carbon Charts expects the user to load IBM Plex on their own per the storybooks
+@use '@carbon/styles/scss/config' with (
+	$css--font-face: false
+);
+
+@use '@carbon/styles';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/theme';
+
+// Custom charting tokens
+@import './tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+
+@import '@carbon/import-once/scss/import-once';
+
+// Carbon imports
+@import '@carbon/colors/index.scss';
+@import '@carbon/styles/scss/components/button/_tokens.scss';
+
+@mixin default_transition {
+	transition: all 0.1s ease-out;
+}
+
+// Internal
+@import './colors.scss';
+@import './components/index.scss';
+@import './graphs/index.scss';
+@import './type';
+@import './chart-holder';
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	overflow: visible;
+}

package/dist/styles/tokens.scss

@@ -0,0 +1,407 @@
+@use 'sass:map';
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/utilities/component-tokens';
+@use '@carbon/colors' as *;
+
+/*
+ *
+ * DARK/LIGHT THEME
+ */
+$color-scheme: (
+	fallback: light,
+	values: (
+		(
+			theme: themes.$white,
+			value: light
+		),
+		(
+			theme: themes.$g10,
+			value: light
+		),
+		(
+			theme: themes.$g90,
+			value: dark
+		),
+		(
+			theme: themes.$g100,
+			value: dark
+		)
+	)
+) !default;
+
+/*
+ *
+ * ELEMENTS
+ */
+$alert-stroke: (
+	fallback: #b28600,
+	values: (
+		(
+			theme: themes.$white,
+			value: #b28600
+		),
+		(
+			theme: themes.$g10,
+			value: #b28600
+		),
+		(
+			theme: themes.$g90,
+			value: none
+		),
+		(
+			theme: themes.$g100,
+			value: none
+		)
+	)
+) !default;
+
+$layer-01-absolute: (
+	fallback: $white-0,
+	values: (
+		(
+			theme: themes.$white,
+			value: $white-0
+		),
+		(
+			theme: themes.$g10,
+			value: $white-0
+		),
+		(
+			theme: themes.$g90,
+			value: $black-100
+		),
+		(
+			theme: themes.$g100,
+			value: $black-100
+		)
+	)
+) !default;
+
+$layer-inverse-absolute: (
+	fallback: $black-100,
+	values: (
+		(
+			theme: themes.$white,
+			value: $black-100
+		),
+		(
+			theme: themes.$g10,
+			value: $black-100
+		),
+		(
+			theme: themes.$g90,
+			value: $white-0
+		),
+		(
+			theme: themes.$g100,
+			value: $white-0
+		)
+	)
+) !default;
+
+$null-state: (
+	fallback: none,
+	values: (
+		(
+			theme: themes.$white,
+			value: none
+		),
+		(
+			theme: themes.$g10,
+			value: none
+		),
+		(
+			theme: themes.$g90,
+			value: map.get(themes.$g90, icon-inverse)
+		),
+		(
+			theme: themes.$g100,
+			value: none
+		)
+	)
+) !default;
+
+/*
+ *
+ * GRID
+ */
+$grid-bg: (
+	fallback: map.get(themes.$white, background),
+	values: (
+		(
+			theme: themes.$white,
+			value: map.get(themes.$white, background)
+		),
+		(
+			theme: themes.$g10,
+			value: map.get(themes.$g10, layer-01)
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-100
+		),
+		(
+			theme: themes.$g100,
+			value: map.get(themes.$g100, background)
+		)
+	)
+) !default;
+
+// METER
+$meter-range-indicator: (
+	fallback: $gray-40,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-40
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-40
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-60
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-60
+		)
+	)
+) !default;
+
+// NETWORK DIAGRAMS
+$network-diagrams-background-hover: (
+	fallback: #f1f1f1,
+	values: (
+		(
+			theme: themes.$white,
+			value: #f1f1f1
+		),
+		(
+			theme: themes.$g10,
+			value: #f1f1f1
+		),
+		(
+			theme: themes.$g90,
+			value: #ededed
+		),
+		(
+			theme: themes.$g100,
+			value: #ededed
+		)
+	)
+) !default;
+
+// TOOLTIP
+$tooltip-line-border: (
+	fallback: map.get(themes.$white, layer-accent-01),
+	values: (
+		(
+			theme: themes.$white,
+			value: map.get(themes.$white, layer-accent-01)
+		),
+		(
+			theme: themes.$g10,
+			value: map.get(themes.$g10, layer-accent-01)
+		),
+		(
+			theme: themes.$g90,
+			value: map.get(themes.$g90, layer-01)
+		),
+		(
+			theme: themes.$g100,
+			value: map.get(themes.$g100, border-strong-01)
+		)
+	)
+) !default;
+
+// ZONES
+$zone-fill-01: (
+	fallback: $gray-10,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-10
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-10
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-90
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-90
+		)
+	)
+) !default;
+$zone-stroke-01: (
+	fallback: $gray-50,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-60
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-60
+		)
+	)
+) !default;
+
+$zone-fill-02: (
+	fallback: $gray-20,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-20
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-20
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-80
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-80
+		)
+	)
+) !default;
+$zone-stroke-02: (
+	fallback: $gray-50,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-60
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-60
+		)
+	)
+) !default;
+
+$zone-fill-03: (
+	fallback: $gray-30,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-30
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-30
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-70
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-70
+		)
+	)
+) !default;
+$zone-stroke-03: (
+	fallback: $gray-50,
+	values: (
+		(
+			theme: themes.$white,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g10,
+			value: $gray-50
+		),
+		(
+			theme: themes.$g90,
+			value: $gray-60
+		),
+		(
+			theme: themes.$g100,
+			value: $gray-60
+		)
+	)
+) !default;
+
+$custom-charting-tokens: (
+	// DARK/LIGHT THEME
+	color-scheme: $color-scheme,
+	// ELEMENTS
+	alert-stroke: $alert-stroke,
+	layer-01-absolute: $layer-01-absolute,
+	layer-inverse-absolute: $layer-inverse-absolute,
+	null-state: $null-state,
+	// GRID
+	grid-bg: $grid-bg,
+	// METER
+	meter-range-indicator: $meter-range-indicator,
+	// NETWORK DIAGRAMS
+	network-diagrams-background-hover: $network-diagrams-background-hover,
+	// TOOLTIP
+	tooltip-line-border: $tooltip-line-border,
+	// ZONES
+	zone-fill-01: $zone-fill-01,
+	zone-stroke-01: $zone-stroke-01,
+	zone-fill-02: $zone-fill-02,
+	zone-stroke-02: $zone-stroke-02,
+	zone-fill-03: $zone-fill-03,
+	zone-stroke-03: $zone-stroke-03
+);
+
+// DARK/LIGHT THEME
+$color-scheme: component-tokens.get-var($color-scheme, 'color-scheme');
+
+// ELEMENTS
+$alert-stroke: component-tokens.get-var($alert-stroke, 'alert-stroke');
+$layer-01-absolute: component-tokens.get-var($layer-01-absolute, 'layer-01-absolute');
+$layer-inverse-absolute: component-tokens.get-var(
+	$layer-inverse-absolute,
+	'layer-inverse-absolute'
+);
+$null-state: component-tokens.get-var($null-state, 'null-state');
+
+// GRID
+$grid-bg: component-tokens.get-var($grid-bg, 'grid-bg');
+
+// METER
+$meter-range-indicator: component-tokens.get-var($meter-range-indicator, 'meter-range-indicator');
+
+// NETWORK DIAGRAMS
+$network-diagrams-background-hover: component-tokens.get-var(
+	$network-diagrams-background-hover,
+	'network-diagrams-background-hover'
+);
+
+// TOOLTIP
+$tooltip-line-border: component-tokens.get-var($tooltip-line-border, 'tooltip-line-border');
+
+// ZONES
+$zone-fill-01: component-tokens.get-var($zone-fill-01, 'zone-fill-01');
+$zone-stroke-01: component-tokens.get-var($zone-stroke-01, 'zone-stroke-01');
+$zone-fill-02: component-tokens.get-var($zone-fill-02, 'zone-fill-02');
+$zone-stroke-02: component-tokens.get-var($zone-stroke-02, 'zone-stroke-02');
+$zone-fill-03: component-tokens.get-var($zone-fill-03, 'zone-fill-03');
+$zone-stroke-03: component-tokens.get-var($zone-stroke-03, 'zone-stroke-03');