@carbon/charts 0.41.60 → 0.41.64

package/demo/styles.css

@@ -873,6 +873,13 @@ div.container.theme--white .bx--cc--legend .additional-item > .icon .area-3 {
   fill: #c6c6c6;
   stroke: #8d8d8d;
 }
+div.container.theme--white .bx--cc--legend .additional-item > .icon .quartile-wrapper {
+  fill: #e0e0e0;
+  stroke: #8d8d8d;
+}
+div.container.theme--white .bx--cc--legend .additional-item > .icon .quartile-line {
+  fill: #000;
+}
 div.container.theme--white .bx--cc--axes g.axis g.ticks.invisible {
   visibility: hidden;
 }
@@ -886,6 +893,11 @@ div.container.theme--white .bx--cc--axes g.axis g.tick line {
 div.container.theme--white .bx--cc--axes g.axis path.domain {
   stroke: #8d8d8d;
 }
+div.container.theme--white .bx--cc--axes g.axis .axis-title {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 600;
+  fill: #161616;
+}
 div.container.theme--white .bx--cc--chart-svg g.callouts {
   stroke: #525252;
 }
@@ -1010,6 +1022,9 @@ div.container.theme--white g.bx--cc--legend g.legend-item text {
   font-size: 12px;
   fill: #525252;
 }
+div.container.theme--white g.bx--cc--legend g.additional-item .zoom {
+  fill: #525252;
+}
 div.container.theme--white g.bx--cc--legend.clickable g.legend-item:hover {
   cursor: pointer;
 }
@@ -1690,6 +1705,25 @@ div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip {
   justify-content: flex-start;
   align-items: center;
 }
+div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip div.label {
+  display: flex;
+  flex: 1;
+}
+div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip div.label p {
+  flex: 1;
+  padding-right: 8px;
+}
+div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip div.label span.label-icon svg {
+  height: 12px;
+  padding-top: 3px;
+  vertical-align: top;
+  padding-left: 4px;
+  width: auto;
+  fill: black;
+}
+div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
+  font-weight: 600;
+}
 div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip p {
   white-space: nowrap;
   overflow: hidden;
@@ -1701,15 +1735,9 @@ div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip p {
   padding: 0;
   border: 0;
 }
-div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip p.label {
-  flex: 1;
-  margin-right: 8px;
-}
 div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip p.value {
   width: auto;
-}
-div.container.theme--white .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
-  font-weight: 600;
+  margin-left: 6px;
 }
 div.container.theme--white .bx--cc--tooltip .content-box ul.multi-tooltip {
   margin: 0;
@@ -1729,7 +1757,7 @@ div.container.theme--white .bx--cc--tooltip .tooltip-color {
   width: 4px;
   height: 100%;
 }
-div.container.theme--white .bx--cc--tooltip .tooltip-color + p.label {
+div.container.theme--white .bx--cc--tooltip .tooltip-color + div.label p {
   margin-left: 4px;
 }
 div.container.theme--white .bx--cc--threshold line.threshold-line {
@@ -1830,6 +1858,30 @@ div.container.theme--white g.bx--cc--bubble circle.dot.unfilled {
 div.container.theme--white g.bx--cc--bubble g.lines path.line {
   mix-blend-mode: multiply;
 }
+div.container.theme--white g.bx--cc--bullet path.range-box {
+  pointer-events: none;
+}
+div.container.theme--white g.bx--cc--bullet path.range-box.order-1 {
+  fill: #f4f4f4;
+  stroke: #8d8d8d;
+}
+div.container.theme--white g.bx--cc--bullet path.range-box.order-2 {
+  fill: #e0e0e0;
+  stroke: #8d8d8d;
+}
+div.container.theme--white g.bx--cc--bullet path.range-box.order-3 {
+  fill: #c6c6c6;
+  stroke: #8d8d8d;
+}
+div.container.theme--white g.bx--cc--bullet path.marker,
+div.container.theme--white g.bx--cc--bullet path.quartile {
+  pointer-events: none;
+  stroke-width: 1.5px;
+  stroke: #000;
+}
+div.container.theme--white g.bx--cc--bullet path.quartile.over-bar {
+  stroke: #fff;
+}
 div.container.theme--white .bx--cc--line path.line {
   pointer-events: none;
   fill: none;
@@ -1922,6 +1974,23 @@ div.container.theme--white .bx--cc--lollipop line.line {
 div.container.theme--white .bx--cc--lollipop circle.dot {
   stroke-width: 1.5;
 }
+div.container.theme--white .bx--cc--circle-pack circle.node {
+  stroke-width: 1.5px;
+}
+div.container.theme--white .bx--cc--circle-pack circle.node.hovered {
+  fill-opacity: 1;
+}
+div.container.theme--white .bx--cc--circle-pack circle.node.hovered-child {
+  stroke: #ffffff;
+}
+div.container.theme--white .bx--cc--circle-pack circle.node.non-focal {
+  fill: #e0e0e0;
+  fill-opacity: 30%;
+  stroke: #e0e0e0;
+}
+div.container.theme--white .bx--cc--circle-pack circle.node.clickable {
+  cursor: pointer;
+}
 div.container.theme--white .bx--cc--wordcloud text.word.light {
   font-weight: 300;
 }
@@ -3452,6 +3521,13 @@ div.container.theme--g10 .bx--cc--legend .additional-item > .icon .area-3 {
   fill: #c6c6c6;
   stroke: #8d8d8d;
 }
+div.container.theme--g10 .bx--cc--legend .additional-item > .icon .quartile-wrapper {
+  fill: #e0e0e0;
+  stroke: #8d8d8d;
+}
+div.container.theme--g10 .bx--cc--legend .additional-item > .icon .quartile-line {
+  fill: #000;
+}
 div.container.theme--g10 .bx--cc--axes g.axis g.ticks.invisible {
   visibility: hidden;
 }
@@ -3465,6 +3541,11 @@ div.container.theme--g10 .bx--cc--axes g.axis g.tick line {
 div.container.theme--g10 .bx--cc--axes g.axis path.domain {
   stroke: #8d8d8d;
 }
+div.container.theme--g10 .bx--cc--axes g.axis .axis-title {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 600;
+  fill: #161616;
+}
 div.container.theme--g10 .bx--cc--chart-svg g.callouts {
   stroke: #525252;
 }
@@ -3589,6 +3670,9 @@ div.container.theme--g10 g.bx--cc--legend g.legend-item text {
   font-size: 12px;
   fill: #525252;
 }
+div.container.theme--g10 g.bx--cc--legend g.additional-item .zoom {
+  fill: #525252;
+}
 div.container.theme--g10 g.bx--cc--legend.clickable g.legend-item:hover {
   cursor: pointer;
 }
@@ -4020,6 +4104,25 @@ div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip {
   justify-content: flex-start;
   align-items: center;
 }
+div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip div.label {
+  display: flex;
+  flex: 1;
+}
+div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip div.label p {
+  flex: 1;
+  padding-right: 8px;
+}
+div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip div.label span.label-icon svg {
+  height: 12px;
+  padding-top: 3px;
+  vertical-align: top;
+  padding-left: 4px;
+  width: auto;
+  fill: black;
+}
+div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
+  font-weight: 600;
+}
 div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   white-space: nowrap;
   overflow: hidden;
@@ -4031,15 +4134,9 @@ div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   padding: 0;
   border: 0;
 }
-div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip p.label {
-  flex: 1;
-  margin-right: 8px;
-}
 div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip p.value {
   width: auto;
-}
-div.container.theme--g10 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
-  font-weight: 600;
+  margin-left: 6px;
 }
 div.container.theme--g10 .bx--cc--tooltip .content-box ul.multi-tooltip {
   margin: 0;
@@ -4059,7 +4156,7 @@ div.container.theme--g10 .bx--cc--tooltip .tooltip-color {
   width: 4px;
   height: 100%;
 }
-div.container.theme--g10 .bx--cc--tooltip .tooltip-color + p.label {
+div.container.theme--g10 .bx--cc--tooltip .tooltip-color + div.label p {
   margin-left: 4px;
 }
 div.container.theme--g10 .bx--cc--threshold line.threshold-line {
@@ -4160,6 +4257,30 @@ div.container.theme--g10 g.bx--cc--bubble circle.dot.unfilled {
 div.container.theme--g10 g.bx--cc--bubble g.lines path.line {
   mix-blend-mode: multiply;
 }
+div.container.theme--g10 g.bx--cc--bullet path.range-box {
+  pointer-events: none;
+}
+div.container.theme--g10 g.bx--cc--bullet path.range-box.order-1 {
+  fill: #f4f4f4;
+  stroke: #8d8d8d;
+}
+div.container.theme--g10 g.bx--cc--bullet path.range-box.order-2 {
+  fill: #e0e0e0;
+  stroke: #8d8d8d;
+}
+div.container.theme--g10 g.bx--cc--bullet path.range-box.order-3 {
+  fill: #c6c6c6;
+  stroke: #8d8d8d;
+}
+div.container.theme--g10 g.bx--cc--bullet path.marker,
+div.container.theme--g10 g.bx--cc--bullet path.quartile {
+  pointer-events: none;
+  stroke-width: 1.5px;
+  stroke: #000;
+}
+div.container.theme--g10 g.bx--cc--bullet path.quartile.over-bar {
+  stroke: #fff;
+}
 div.container.theme--g10 .bx--cc--line path.line {
   pointer-events: none;
   fill: none;
@@ -4252,6 +4373,23 @@ div.container.theme--g10 .bx--cc--lollipop line.line {
 div.container.theme--g10 .bx--cc--lollipop circle.dot {
   stroke-width: 1.5;
 }
+div.container.theme--g10 .bx--cc--circle-pack circle.node {
+  stroke-width: 1.5px;
+}
+div.container.theme--g10 .bx--cc--circle-pack circle.node.hovered {
+  fill-opacity: 1;
+}
+div.container.theme--g10 .bx--cc--circle-pack circle.node.hovered-child {
+  stroke: #ffffff;
+}
+div.container.theme--g10 .bx--cc--circle-pack circle.node.non-focal {
+  fill: #e0e0e0;
+  fill-opacity: 30%;
+  stroke: #e0e0e0;
+}
+div.container.theme--g10 .bx--cc--circle-pack circle.node.clickable {
+  cursor: pointer;
+}
 div.container.theme--g10 .bx--cc--wordcloud text.word.light {
   font-weight: 300;
 }
@@ -5782,6 +5920,13 @@ div.container.theme--g90 .bx--cc--legend .additional-item > .icon .area-3 {
   fill: #525252;
   stroke: #6f6f6f;
 }
+div.container.theme--g90 .bx--cc--legend .additional-item > .icon .quartile-wrapper {
+  fill: #393939;
+  stroke: #6f6f6f;
+}
+div.container.theme--g90 .bx--cc--legend .additional-item > .icon .quartile-line {
+  fill: #fff;
+}
 div.container.theme--g90 .bx--cc--axes g.axis g.ticks.invisible {
   visibility: hidden;
 }
@@ -5795,6 +5940,11 @@ div.container.theme--g90 .bx--cc--axes g.axis g.tick line {
 div.container.theme--g90 .bx--cc--axes g.axis path.domain {
   stroke: #8d8d8d;
 }
+div.container.theme--g90 .bx--cc--axes g.axis .axis-title {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 600;
+  fill: #f4f4f4;
+}
 div.container.theme--g90 .bx--cc--chart-svg g.callouts {
   stroke: #c6c6c6;
 }
@@ -5919,6 +6069,9 @@ div.container.theme--g90 g.bx--cc--legend g.legend-item text {
   font-size: 12px;
   fill: #c6c6c6;
 }
+div.container.theme--g90 g.bx--cc--legend g.additional-item .zoom {
+  fill: #c6c6c6;
+}
 div.container.theme--g90 g.bx--cc--legend.clickable g.legend-item:hover {
   cursor: pointer;
 }
@@ -6285,6 +6438,25 @@ div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip {
   justify-content: flex-start;
   align-items: center;
 }
+div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip div.label {
+  display: flex;
+  flex: 1;
+}
+div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip div.label p {
+  flex: 1;
+  padding-right: 8px;
+}
+div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip div.label span.label-icon svg {
+  height: 12px;
+  padding-top: 3px;
+  vertical-align: top;
+  padding-left: 4px;
+  width: auto;
+  fill: white;
+}
+div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
+  font-weight: 600;
+}
 div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   white-space: nowrap;
   overflow: hidden;
@@ -6296,15 +6468,9 @@ div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   padding: 0;
   border: 0;
 }
-div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip p.label {
-  flex: 1;
-  margin-right: 8px;
-}
 div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip p.value {
   width: auto;
-}
-div.container.theme--g90 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
-  font-weight: 600;
+  margin-left: 6px;
 }
 div.container.theme--g90 .bx--cc--tooltip .content-box ul.multi-tooltip {
   margin: 0;
@@ -6324,7 +6490,7 @@ div.container.theme--g90 .bx--cc--tooltip .tooltip-color {
   width: 4px;
   height: 100%;
 }
-div.container.theme--g90 .bx--cc--tooltip .tooltip-color + p.label {
+div.container.theme--g90 .bx--cc--tooltip .tooltip-color + div.label p {
   margin-left: 4px;
 }
 div.container.theme--g90 .bx--cc--threshold line.threshold-line {
@@ -6425,6 +6591,30 @@ div.container.theme--g90 g.bx--cc--bubble circle.dot.unfilled {
 div.container.theme--g90 g.bx--cc--bubble g.lines path.line {
   mix-blend-mode: multiply;
 }
+div.container.theme--g90 g.bx--cc--bullet path.range-box {
+  pointer-events: none;
+}
+div.container.theme--g90 g.bx--cc--bullet path.range-box.order-1 {
+  fill: #262626;
+  stroke: #6f6f6f;
+}
+div.container.theme--g90 g.bx--cc--bullet path.range-box.order-2 {
+  fill: #393939;
+  stroke: #6f6f6f;
+}
+div.container.theme--g90 g.bx--cc--bullet path.range-box.order-3 {
+  fill: #525252;
+  stroke: #6f6f6f;
+}
+div.container.theme--g90 g.bx--cc--bullet path.marker,
+div.container.theme--g90 g.bx--cc--bullet path.quartile {
+  pointer-events: none;
+  stroke-width: 1.5px;
+  stroke: #fff;
+}
+div.container.theme--g90 g.bx--cc--bullet path.quartile.over-bar {
+  stroke: #000;
+}
 div.container.theme--g90 .bx--cc--line path.line {
   pointer-events: none;
   fill: none;
@@ -6518,6 +6708,23 @@ div.container.theme--g90 .bx--cc--lollipop line.line {
 div.container.theme--g90 .bx--cc--lollipop circle.dot {
   stroke-width: 1.5;
 }
+div.container.theme--g90 .bx--cc--circle-pack circle.node {
+  stroke-width: 1.5px;
+}
+div.container.theme--g90 .bx--cc--circle-pack circle.node.hovered {
+  fill-opacity: 1;
+}
+div.container.theme--g90 .bx--cc--circle-pack circle.node.hovered-child {
+  stroke: #ffffff;
+}
+div.container.theme--g90 .bx--cc--circle-pack circle.node.non-focal {
+  fill: #e0e0e0;
+  fill-opacity: 30%;
+  stroke: #e0e0e0;
+}
+div.container.theme--g90 .bx--cc--circle-pack circle.node.clickable {
+  cursor: pointer;
+}
 div.container.theme--g90 .bx--cc--wordcloud text.word.light {
   font-weight: 300;
 }
@@ -8063,6 +8270,13 @@ div.container.theme--g100 .bx--cc--legend .additional-item > .icon .area-3 {
   fill: #525252;
   stroke: #6f6f6f;
 }
+div.container.theme--g100 .bx--cc--legend .additional-item > .icon .quartile-wrapper {
+  fill: #393939;
+  stroke: #6f6f6f;
+}
+div.container.theme--g100 .bx--cc--legend .additional-item > .icon .quartile-line {
+  fill: #fff;
+}
 div.container.theme--g100 .bx--cc--axes g.axis g.ticks.invisible {
   visibility: hidden;
 }
@@ -8076,6 +8290,11 @@ div.container.theme--g100 .bx--cc--axes g.axis g.tick line {
 div.container.theme--g100 .bx--cc--axes g.axis path.domain {
   stroke: #6f6f6f;
 }
+div.container.theme--g100 .bx--cc--axes g.axis .axis-title {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 600;
+  fill: #f4f4f4;
+}
 div.container.theme--g100 .bx--cc--chart-svg g.callouts {
   stroke: #c6c6c6;
 }
@@ -8200,6 +8419,9 @@ div.container.theme--g100 g.bx--cc--legend g.legend-item text {
   font-size: 12px;
   fill: #c6c6c6;
 }
+div.container.theme--g100 g.bx--cc--legend g.additional-item .zoom {
+  fill: #c6c6c6;
+}
 div.container.theme--g100 g.bx--cc--legend.clickable g.legend-item:hover {
   cursor: pointer;
 }
@@ -8566,6 +8788,25 @@ div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip {
   justify-content: flex-start;
   align-items: center;
 }
+div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip div.label {
+  display: flex;
+  flex: 1;
+}
+div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip div.label p {
+  flex: 1;
+  padding-right: 8px;
+}
+div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip div.label span.label-icon svg {
+  height: 12px;
+  padding-top: 3px;
+  vertical-align: top;
+  padding-left: 4px;
+  width: auto;
+  fill: white;
+}
+div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
+  font-weight: 600;
+}
 div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   white-space: nowrap;
   overflow: hidden;
@@ -8577,15 +8818,9 @@ div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip p {
   padding: 0;
   border: 0;
 }
-div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip p.label {
-  flex: 1;
-  margin-right: 8px;
-}
 div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip p.value {
   width: auto;
-}
-div.container.theme--g100 .bx--cc--tooltip .content-box .datapoint-tooltip.bold {
-  font-weight: 600;
+  margin-left: 6px;
 }
 div.container.theme--g100 .bx--cc--tooltip .content-box ul.multi-tooltip {
   margin: 0;
@@ -8605,7 +8840,7 @@ div.container.theme--g100 .bx--cc--tooltip .tooltip-color {
   width: 4px;
   height: 100%;
 }
-div.container.theme--g100 .bx--cc--tooltip .tooltip-color + p.label {
+div.container.theme--g100 .bx--cc--tooltip .tooltip-color + div.label p {
   margin-left: 4px;
 }
 div.container.theme--g100 .bx--cc--threshold line.threshold-line {
@@ -8706,6 +8941,30 @@ div.container.theme--g100 g.bx--cc--bubble circle.dot.unfilled {
 div.container.theme--g100 g.bx--cc--bubble g.lines path.line {
   mix-blend-mode: multiply;
 }
+div.container.theme--g100 g.bx--cc--bullet path.range-box {
+  pointer-events: none;
+}
+div.container.theme--g100 g.bx--cc--bullet path.range-box.order-1 {
+  fill: #262626;
+  stroke: #6f6f6f;
+}
+div.container.theme--g100 g.bx--cc--bullet path.range-box.order-2 {
+  fill: #393939;
+  stroke: #6f6f6f;
+}
+div.container.theme--g100 g.bx--cc--bullet path.range-box.order-3 {
+  fill: #525252;
+  stroke: #6f6f6f;
+}
+div.container.theme--g100 g.bx--cc--bullet path.marker,
+div.container.theme--g100 g.bx--cc--bullet path.quartile {
+  pointer-events: none;
+  stroke-width: 1.5px;
+  stroke: #fff;
+}
+div.container.theme--g100 g.bx--cc--bullet path.quartile.over-bar {
+  stroke: #000;
+}
 div.container.theme--g100 .bx--cc--line path.line {
   pointer-events: none;
   fill: none;
@@ -8799,6 +9058,23 @@ div.container.theme--g100 .bx--cc--lollipop line.line {
 div.container.theme--g100 .bx--cc--lollipop circle.dot {
   stroke-width: 1.5;
 }
+div.container.theme--g100 .bx--cc--circle-pack circle.node {
+  stroke-width: 1.5px;
+}
+div.container.theme--g100 .bx--cc--circle-pack circle.node.hovered {
+  fill-opacity: 1;
+}
+div.container.theme--g100 .bx--cc--circle-pack circle.node.hovered-child {
+  stroke: #ffffff;
+}
+div.container.theme--g100 .bx--cc--circle-pack circle.node.non-focal {
+  fill: #e0e0e0;
+  fill-opacity: 30%;
+  stroke: #e0e0e0;
+}
+div.container.theme--g100 .bx--cc--circle-pack circle.node.clickable {
+  cursor: pointer;
+}
 div.container.theme--g100 .bx--cc--wordcloud text.word.light {
   font-weight: 300;
 }