@carbon/charts 1.8.0 → 1.9.0-next.1.0

package/scss/components/diagrams/_card-node.scss

@@ -0,0 +1,97 @@
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+@mixin stacked-card-node {
+	content: '';
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	z-index: 0;
+	border-top: 0.125rem solid $layer-accent-01;
+	border-right: 0.125rem solid $layer-accent-01;
+	pointer-events: none;
+}
+
+@include exports('cc-card-node') {
+	.#{$prefix}--#{$charts-prefix}--card-node {
+		display: flex;
+		position: relative;
+		background-color: $layer-01;
+		z-index: 1;
+		box-sizing: border-box;
+		font-family: font-family('sans');
+		width: 100%;
+		height: 100%;
+		padding: $spacing-05 $spacing-03;
+		border-left: 0.25rem solid $border-inverse;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node--a,
+	.#{$prefix}--#{$charts-prefix}--card-node--button {
+		border-top: none;
+		border-right: none;
+		border-bottom: none;
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node--button {
+		font-family: font-family('sans');
+		text-align: left;
+		width: 100%;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node--a:focus,
+	.#{$prefix}--#{$charts-prefix}--card-node--a:hover,
+	.#{$prefix}--#{$charts-prefix}--card-node--button:focus,
+	.#{$prefix}--#{$charts-prefix}--card-node--button:hover {
+		background-color: $network-diagrams-background-hover;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node--a:focus,
+	.#{$prefix}--#{$charts-prefix}--card-node--button:focus {
+		@include focus-outline($type: outline);
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node--stacked {
+		&::before {
+			@include stacked-card-node();
+			left: 0.3125rem;
+			bottom: 0.3125rem;
+		}
+
+		&::after {
+			@include stacked-card-node();
+			left: 0.6875rem;
+			bottom: 0.6875rem;
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node__column {
+		padding: 0 $spacing-03;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node__column--farside {
+		margin-left: auto;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node__title {
+		@include type-style($name: productive-heading-01);
+		margin: 0;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node__subtitle {
+		@include type-style($name: body-short-01);
+		margin: 0;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--card-node__label {
+		display: block;
+		@include type-style($name: label-01);
+		color: $text-secondary;
+		padding-top: $spacing-06;
+	}
+}

package/scss/components/diagrams/_edge.scss

@@ -0,0 +1,66 @@
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+@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-strong-01;
+	}
+
+	.#{$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: 2 4;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-md {
+		stroke-dasharray: 4 4;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-lg {
+		stroke-dasharray: 8 4;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--dash-xl {
+		stroke-dasharray: 16 4;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--tunnel {
+		.#{$prefix}--#{$charts-prefix}--edge__outer {
+			stroke: $layer-accent-01;
+			stroke-width: 0.375rem;
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--edge--double {
+		.#{$prefix}--#{$charts-prefix}--edge__inner {
+			stroke: $background;
+		}
+
+		.#{$prefix}--#{$charts-prefix}--edge__outer {
+			stroke: $border-inverse;
+			stroke-width: 0.28125rem;
+		}
+	}
+}

package/scss/components/diagrams/_shape-node.scss

@@ -0,0 +1,89 @@
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+@include exports('cc-shape-node') {
+	.#{$prefix}--#{$charts-prefix}--shape-node {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: $layer-01;
+		box-sizing: border-box;
+		font-family: font-family('sans');
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--circle {
+		border-radius: 100%;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--square {
+		border-radius: 0;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--rounded-square {
+		border-radius: 0.5rem;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--a,
+	.#{$prefix}--#{$charts-prefix}--shape-node--button {
+		border: none;
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--button {
+		font-family: font-family('sans');
+		text-align: left;
+		width: 100%;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
+	.#{$prefix}--#{$charts-prefix}--shape-node--a:hover,
+	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus,
+	.#{$prefix}--#{$charts-prefix}--shape-node--button:hover {
+		background-color: $network-diagrams-background-hover;
+
+		.#{$prefix}--#{$charts-prefix}--shape-node__title,
+		.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
+			// TODO-V11
+			// font-weight: font-weight('semibold');
+			font-weight: 600;
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
+	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus {
+		&:focus {
+			outline: none;
+			box-shadow: 0 0 0 2px $focus;
+		}
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node__body {
+		position: absolute;
+		top: calc(100% + #{$spacing-01});
+		text-align: center;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
+		padding-bottom: $spacing-01;
+		@include type-style($name: body-short-01);
+		color: $text-primary;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node__icon {
+		display: flex;
+	}
+
+	.#{$prefix}--#{$charts-prefix}--shape-node__title {
+		@include type-style($name: body-short-01);
+		color: $text-primary;
+		padding-top: $spacing-01;
+		margin-bottom: 1px;
+	}
+}

package/scss/components/diagrams/index.scss

@@ -0,0 +1,4 @@
+@import './card-node';
+@import './shape-node';
+@import './edge';
+@import './marker';

package/scss/graphs/_alluvial.scss

@@ -0,0 +1,17 @@
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}--#{$charts-prefix}--alluvial {
+	rect.node,
+	rect.node-text-bg {
+		fill: $layer-inverse-absolute;
+	}
+
+	text.node-text {
+		fill: $layer-01-absolute;
+	}
+
+	polygon.arrow-down {
+		fill: $layer-01;
+	}
+}

package/scss/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/scss/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/scss/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/scss/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/scss/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/scss/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/scss/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/scss/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/scss/index.scss

@@ -0,0 +1,31 @@
+$charts-prefix: 'cc';
+
+// Variables picked up by @carbon/styles/scss/config in imports
+$prefix: 'cds'; // Default value
+$css--body: false; // Do not emit styles for body element
+$css--default-type: false; // Do not include default type
+$css--font-face: false; // Do not include font face mixins from scss/fonts
+$css--reset: false; // Do not include reset CSS
+
+// Custom charting tokens
+@use '@carbon/styles/scss/theme' as theme;
+@import './tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+@import '@carbon/styles/scss/components/button/tokens';
+
+@mixin default_transition { // used by ./colors
+	transition: all 0.1s ease-out;
+}
+@import '@carbon/colors';
+@import './colors'; // mixins, color palette, color maps, tooltip and legend color settings
+
+@import '@carbon/import-once/scss'; // exports mixin
+@import './components'; // use exports mixin to ensure component modules only loaded once
+
+@import './graphs'; // chart-specific
+@import './type'; // font size, fill, color, weight (but not family)
+@import './chart-holder'; // container settings
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	overflow: visible;
+}

package/axis-chart.d.ts

@@ -1,10 +0,0 @@
-import { Chart } from './chart';
-import { ChartModelCartesian } from './model/cartesian-charts';
-import { ChartConfig, AxisChartOptions } from './interfaces';
-import { Modal, LayoutComponent, AxisChartsTooltip } from './components';
-export declare class AxisChart extends Chart {
-    services: any;
-    model: ChartModelCartesian;
-    constructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>);
-    protected getAxisChartComponents(graphFrameComponents: any[], configs?: any): (LayoutComponent | AxisChartsTooltip | Modal)[];
-}