chartist 1.5.0 → 2.0.0-rc.2

package/dist/scss/_settings.scss

@@ -0,0 +1,155 @@
+@use 'sass:math';
+
+// Scales for responsive SVG containers
+$ct-scales: (
+  (1),
+  math.div(15, 16),
+  math.div(8, 9),
+  math.div(5, 6),
+  math.div(4, 5),
+  math.div(3, 4),
+  math.div(2, 3),
+  math.div(5, 8),
+  math.div(1, 1.618),
+  math.div(3, 5),
+  math.div(9, 16),
+  math.div(8, 15),
+  math.div(1, 2),
+  math.div(2, 5),
+  math.div(3, 8),
+  math.div(1, 3),
+  math.div(1, 4)
+) !default;
+$ct-scales-names: (
+  ct-square,
+  ct-minor-second,
+  ct-major-second,
+  ct-minor-third,
+  ct-major-third,
+  ct-perfect-fourth,
+  ct-perfect-fifth,
+  ct-minor-sixth,
+  ct-golden-section,
+  ct-major-sixth,
+  ct-minor-seventh,
+  ct-major-seventh,
+  ct-octave,
+  ct-major-tenth,
+  ct-major-eleventh,
+  ct-major-twelfth,
+  ct-double-octave
+) !default;
+
+// Class names to be used when generating CSS
+$ct-class-chart: ct-chart !default;
+$ct-class-chart-line: ct-chart-line !default;
+$ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
+$ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
+$ct-class-label: ct-label !default;
+$ct-class-series: ct-series !default;
+$ct-class-line: ct-line !default;
+$ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
+$ct-class-bar: ct-bar !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-grid: ct-grid !default;
+$ct-class-grid-background: ct-grid-background !default;
+$ct-class-vertical: ct-vertical !default;
+$ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
+
+// Container ratio
+$ct-container-ratio: math.div(1, 1.618) !default;
+
+// Text styles for labels
+$ct-text-color: rgba(0, 0, 0, 0.4) !default;
+$ct-text-size: 0.75rem !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1 !default;
+
+// Grid styles
+$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
+$ct-grid-dasharray: 2px !default;
+$ct-grid-width: 1px !default;
+$ct-grid-background-fill: none !default;
+
+// Line chart properties
+$ct-line-width: 4px !default;
+$ct-line-dasharray: false !default;
+$ct-point-size: 10px !default;
+// Line chart point, can be either round or square
+$ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.1 !default;
+
+// Bar chart bar width
+$ct-bar-width: 10px !default;
+
+// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
+$ct-donut-width: 60px !default;
+
+// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
+// should set this property to false
+$ct-include-classes: true !default;
+
+// If this is set to true the CSS will contain colored series. You can extend or change the color with the
+// properties below
+$ct-include-colored-series: $ct-include-classes !default;
+
+// If set to true this will include all responsive container variations using the scales defined at the top of the script
+$ct-include-alternative-responsive-containers: $ct-include-classes !default;
+
+// Series names and colors. This can be extended or customized as desired. The names match the series classes
+// Chartist sets (`ct-series-a` to `ct-series-z`). With fewer colors than names, the colors repeat in order, and a
+// series whose color repeats falls back to the custom property of the series it repeats (`--ct-series-p` to
+// `--ct-series-a`).
+$ct-series-names: (
+  a,
+  b,
+  c,
+  d,
+  e,
+  f,
+  g,
+  h,
+  i,
+  j,
+  k,
+  l,
+  m,
+  n,
+  o,
+  p,
+  q,
+  r,
+  s,
+  t,
+  u,
+  v,
+  w,
+  x,
+  y,
+  z
+) !default;
+$ct-series-colors: (
+  #d70206,
+  #f05b4f,
+  #f4c63d,
+  #d17905,
+  #453d3f,
+  #59922b,
+  #0544d3,
+  #6b0392,
+  #e6805e,
+  #dda458,
+  #eacf7d,
+  #86797d,
+  #b2c326,
+  #6188e2,
+  #a748ca
+) !default;

package/dist/scss/index.scss

@@ -0,0 +1,262 @@
+@import 'settings';
+
+// The value of an optional setting (false: not set) as a CSS value.
+@function ct-or-none($value) {
+  @if $value {
+    @return $value;
+  }
+  @return none;
+}
+
+@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
+  display: block;
+  position: relative;
+  width: $width;
+
+  &:before {
+    display: block;
+    float: left;
+    content: '';
+    width: 0;
+    height: 0;
+    padding-bottom: $ratio * 100%;
+  }
+
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+@mixin ct-align-justify(
+  $ct-text-align: $ct-text-align,
+  $ct-text-justify: $ct-text-justify
+) {
+  align-items: $ct-text-align;
+  justify-content: $ct-text-justify;
+  // Fallback to text-align for non-flex browsers
+  @if ($ct-text-justify == 'flex-start') {
+    text-align: left;
+  } @else if ($ct-text-justify == 'flex-end') {
+    text-align: right;
+  } @else {
+    text-align: center;
+  }
+}
+
+@mixin ct-chart-label(
+  $ct-text-color: $ct-text-color,
+  $ct-text-size: $ct-text-size,
+  $ct-text-line-height: $ct-text-line-height
+) {
+  fill: var(--ct-label-color, #{$ct-text-color});
+  color: var(--ct-label-color, #{$ct-text-color});
+  font-size: var(--ct-label-size, #{$ct-text-size});
+  line-height: $ct-text-line-height;
+}
+
+@mixin ct-chart-grid(
+  $ct-grid-color: $ct-grid-color,
+  $ct-grid-width: $ct-grid-width,
+  $ct-grid-dasharray: $ct-grid-dasharray
+) {
+  stroke: var(--ct-grid-color, #{$ct-grid-color});
+  stroke-width: var(--ct-grid-width, #{$ct-grid-width});
+  // Always emitted, so the property works; `none` is the initial value.
+  stroke-dasharray: var(--ct-grid-dasharray, #{ct-or-none($ct-grid-dasharray)});
+}
+
+@mixin ct-chart-point(
+  $ct-point-size: $ct-point-size,
+  $ct-point-shape: $ct-point-shape
+) {
+  stroke-width: var(--ct-point-size, #{$ct-point-size});
+  stroke-linecap: var(--ct-point-shape, #{$ct-point-shape});
+}
+
+@mixin ct-chart-line(
+  $ct-line-width: $ct-line-width,
+  $ct-line-dasharray: $ct-line-dasharray
+) {
+  fill: none;
+  stroke-width: var(--ct-line-width, #{$ct-line-width});
+  stroke-dasharray: var(--ct-line-dasharray, #{ct-or-none($ct-line-dasharray)});
+}
+
+@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
+  stroke: none;
+  fill-opacity: var(--ct-area-opacity, #{$ct-area-opacity});
+}
+
+@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
+  fill: none;
+  stroke-width: var(--ct-bar-width, #{$ct-bar-width});
+}
+
+@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
+  fill: none;
+  stroke-width: var(--ct-donut-width, #{$ct-donut-width});
+}
+
+// Sets the series color as `--ct-color`, which the series' elements use.
+@mixin ct-chart-series-color($color) {
+  --ct-color: #{$color};
+
+  .#{$ct-class-point},
+  .#{$ct-class-line},
+  .#{$ct-class-bar},
+  .#{$ct-class-slice-donut} {
+    stroke: var(--ct-color);
+  }
+
+  .#{$ct-class-slice-pie},
+  .#{$ct-class-area} {
+    fill: var(--ct-color);
+  }
+}
+
+@mixin ct-chart(
+  $ct-container-ratio: $ct-container-ratio,
+  $ct-text-color: $ct-text-color,
+  $ct-text-size: $ct-text-size,
+  $ct-grid-color: $ct-grid-color,
+  $ct-grid-width: $ct-grid-width,
+  $ct-grid-dasharray: $ct-grid-dasharray,
+  $ct-point-size: $ct-point-size,
+  $ct-point-shape: $ct-point-shape,
+  $ct-line-width: $ct-line-width,
+  $ct-bar-width: $ct-bar-width,
+  $ct-donut-width: $ct-donut-width,
+  $ct-series-names: $ct-series-names,
+  $ct-series-colors: $ct-series-colors
+) {
+  .#{$ct-class-label} {
+    @include ct-chart-label($ct-text-color, $ct-text-size);
+  }
+
+  .#{$ct-class-chart-line} .#{$ct-class-label},
+  .#{$ct-class-chart-bar} .#{$ct-class-label},
+  // HTML labels of composed charts, whose svg has no chart-type class.
+  foreignObject > .#{$ct-class-label} {
+    display: flex;
+  }
+
+  .#{$ct-class-chart-pie} .#{$ct-class-label},
+  .#{$ct-class-chart-donut} .#{$ct-class-label} {
+    dominant-baseline: central;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-end);
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(flex-end, flex-start);
+  }
+
+  .#{$ct-class-chart-bar}
+    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, center);
+  }
+
+  .#{$ct-class-chart-bar}
+    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, center);
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
+    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
+    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
+    .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(center, flex-end);
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
+    .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(center, flex-start);
+  }
+
+  .#{$ct-class-grid} {
+    @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
+  }
+
+  .#{$ct-class-grid-background} {
+    fill: var(--ct-grid-background-fill, #{$ct-grid-background-fill});
+  }
+
+  .#{$ct-class-point} {
+    @include ct-chart-point($ct-point-size, $ct-point-shape);
+  }
+
+  .#{$ct-class-line} {
+    @include ct-chart-line($ct-line-width);
+  }
+
+  .#{$ct-class-area} {
+    @include ct-chart-area();
+  }
+
+  .#{$ct-class-bar} {
+    @include ct-chart-bar($ct-bar-width);
+  }
+
+  .#{$ct-class-slice-donut} {
+    @include ct-chart-donut($ct-donut-width);
+  }
+
+  @if $ct-include-colored-series {
+    $colors: length($ct-series-colors);
+
+    @for $i from 0 to length($ct-series-names) {
+      $name: nth($ct-series-names, $i + 1);
+      // The colors repeat when there are more names than colors.
+      $index: $i % $colors + 1;
+      $color: nth($ct-series-colors, $index);
+
+      // A repeated color follows the property of the series it repeats.
+      @if $i >= $colors {
+        $color: var(--ct-series-#{nth($ct-series-names, $index)}, #{$color});
+      }
+
+      .#{$ct-class-series}-#{$name} {
+        @include ct-chart-series-color(var(--ct-series-#{$name}, #{$color}));
+      }
+    }
+  }
+}
+
+@if $ct-include-classes {
+  @include ct-chart();
+
+  @if $ct-include-alternative-responsive-containers {
+    @for $i from 0 to length($ct-scales-names) {
+      .#{nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
+      }
+    }
+  }
+}

package/dist/scss/themes/accessible.scss

@@ -0,0 +1,53 @@
+@use 'sass:list';
+
+// Opt-in color-blind-safe palette (CVD-validated, from the v2 brand design).
+// Light and dark values follow the element's `color-scheme` through
+// light-dark(), so the theme works with any dark-mode setup that declares
+// `color-scheme: dark`.
+//
+// Usage: import 'chartist/themes/accessible.css' and add the class
+// `ct-theme-accessible` to the page or to a chart's container.
+
+$ct-accessible-colors: (
+  a: (
+    #d7263d,
+    #e5484d
+  ),
+  b: (
+    #2b6cd8,
+    #5b8def
+  ),
+  c: (
+    #b07800,
+    #b98a12
+  ),
+  d: (
+    #8445b0,
+    #9a63d0
+  ),
+  e: (
+    #00917f,
+    #1fa192
+  ),
+  f: (
+    #d2621c,
+    #d9702f
+  ),
+  g: (
+    #b8479f,
+    #cb5ab0
+  ),
+  h: (
+    #6e8b1f,
+    #7d9a2e
+  )
+) !default;
+
+.ct-theme-accessible {
+  @each $name, $pair in $ct-accessible-colors {
+    --ct-series-#{$name}: light-dark(
+      #{list.nth($pair, 1)},
+      #{list.nth($pair, 2)}
+    );
+  }
+}

package/dist/themes/accessible.css

@@ -0,0 +1,34 @@
+.ct-theme-accessible {
+  --ct-series-a: light-dark(
+    #d7263d,
+    #e5484d
+  );
+  --ct-series-b: light-dark(
+    #2b6cd8,
+    #5b8def
+  );
+  --ct-series-c: light-dark(
+    #b07800,
+    #b98a12
+  );
+  --ct-series-d: light-dark(
+    #8445b0,
+    #9a63d0
+  );
+  --ct-series-e: light-dark(
+    #00917f,
+    #1fa192
+  );
+  --ct-series-f: light-dark(
+    #d2621c,
+    #d9702f
+  );
+  --ct-series-g: light-dark(
+    #b8479f,
+    #cb5ab0
+  );
+  --ct-series-h: light-dark(
+    #6e8b1f,
+    #7d9a2e
+  );
+}

package/dist/themes/accessible.min.css

@@ -0,0 +1 @@
+.ct-theme-accessible{--ct-series-a:light-dark(#d7263d,#e5484d);--ct-series-b:light-dark(#2b6cd8,#5b8def);--ct-series-c:light-dark(#b07800,#b98a12);--ct-series-d:light-dark(#8445b0,#9a63d0);--ct-series-e:light-dark(#00917f,#1fa192);--ct-series-f:light-dark(#d2621c,#d9702f);--ct-series-g:light-dark(#b8479f,#cb5ab0);--ct-series-h:light-dark(#6e8b1f,#7d9a2e)}