@ethlete/components 1.0.0-next.68 → 1.0.0-next.70

package/src/lib/chart/line-chart.component.css

@@ -0,0 +1,234 @@
+@layer components {
+  @property --et-line-chart-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-line-chart-axis-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-line-chart-line-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-line-chart-area-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.12;
+  }
+
+  @property --et-line-chart-stacked-area-mix {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 45%;
+  }
+
+  @property --et-line-chart-enter-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 600ms;
+  }
+
+  @property --et-line-chart-focus-ring-min-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-line-chart {
+    display: block;
+    position: relative;
+    font-size: var(--et-line-chart-font-size);
+    line-height: 1.4;
+    color: var(--et-surface-color-muted-solid, currentColor);
+
+    .et-line-chart-legend {
+      margin-block-end: calc(var(--et-line-chart-axis-gap) * 1.5);
+    }
+  }
+
+  .et-line-chart-figure {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas:
+      'value-axis plot'
+      '. x-axis';
+    column-gap: var(--et-line-chart-axis-gap);
+    row-gap: var(--et-line-chart-axis-gap);
+    padding-block-start: 0.7em;
+
+    .et-line-chart-value-axis {
+      grid-area: value-axis;
+    }
+
+    .et-line-chart-x-axis {
+      grid-area: x-axis;
+    }
+
+    .et-line-chart-plot {
+      grid-area: plot;
+      min-inline-size: 0;
+
+      .et-line-chart-svg {
+        display: block;
+        overflow: visible;
+        touch-action: pan-y;
+      }
+    }
+
+    &:where([data-scale='time']) {
+      padding-inline-end: 1.5em;
+    }
+  }
+
+  .et-line-chart-series-layer {
+    animation: et-line-chart-reveal var(--et-line-chart-enter-duration) cubic-bezier(0.2, 0, 0, 1) backwards;
+  }
+
+  .et-line-chart-series,
+  .et-line-chart-area {
+    --_et-line-chart-color: color-mix(
+      in oklab,
+      var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+      var(--et-surface-background-solid, transparent)
+    );
+  }
+
+  .et-line-chart-area {
+    fill: var(--_et-line-chart-color);
+    fill-opacity: var(--et-line-chart-area-opacity);
+  }
+
+  .et-line-chart-series {
+    .et-line-chart-line {
+      fill: none;
+      stroke: var(--_et-line-chart-color);
+      stroke-width: var(--et-line-chart-line-width);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .et-line-chart-point {
+      fill: var(--_et-line-chart-color);
+      stroke: var(--et-surface-background-solid, transparent);
+      stroke-width: 2px;
+    }
+  }
+
+  .et-line-chart-svg:where([data-stacked]) .et-line-chart-area {
+    fill: color-mix(
+      in oklab,
+      var(--_et-line-chart-color) var(--et-line-chart-stacked-area-mix),
+      var(--et-surface-background-solid, transparent)
+    );
+    fill-opacity: 1;
+  }
+
+  .et-line-chart-slice {
+    --_et-line-chart-slice-tint: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 6%, transparent);
+
+    outline: none;
+
+    .et-line-chart-slice-target {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 2px;
+    }
+
+    .et-line-chart-focus-ring {
+      --_et-line-chart-focus-ring-x: min(
+        var(--_et-line-chart-slice-x),
+        max(
+          var(--_et-line-chart-slice-position) - var(--et-line-chart-focus-ring-min-width) / 2,
+          var(--_et-line-chart-slice-x) + var(--_et-line-chart-slice-width) - var(--et-line-chart-focus-ring-min-width)
+        )
+      );
+
+      x: var(--_et-line-chart-focus-ring-x);
+      width: calc(
+        max(
+            var(--_et-line-chart-slice-x) + var(--_et-line-chart-slice-width),
+            min(
+              var(--_et-line-chart-slice-position) + var(--et-line-chart-focus-ring-min-width) / 2,
+              var(--_et-line-chart-slice-x) + var(--et-line-chart-focus-ring-min-width)
+            )
+          ) -
+          var(--_et-line-chart-focus-ring-x)
+      );
+      fill: none;
+      stroke: none;
+      stroke-width: 2px;
+      pointer-events: none;
+    }
+
+    .et-line-chart-crosshair {
+      stroke: var(--et-surface-color-subtle-solid, currentColor);
+      stroke-width: 1px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .et-line-chart-slice-point {
+      fill: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+      stroke: var(--et-surface-background-solid, transparent);
+      stroke-width: 2px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .et-line-chart-slice-anchor {
+      fill: none;
+      pointer-events: none;
+    }
+
+    &:focus-visible,
+    &:where([data-active]) {
+      .et-line-chart-crosshair,
+      .et-line-chart-slice-point {
+        opacity: 1;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        .et-line-chart-crosshair,
+        .et-line-chart-slice-point {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:focus-visible .et-line-chart-focus-ring {
+      fill: var(--_et-line-chart-slice-tint);
+      stroke: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  @keyframes et-line-chart-reveal {
+    from {
+      clip-path: inset(-8px 100% -8px -8px);
+      opacity: 0;
+    }
+
+    to {
+      clip-path: inset(-8px -8px -8px -8px);
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-line-chart-series-layer {
+      animation: none;
+    }
+  }
+}

package/src/lib/chart/pie-chart.component.css

@@ -0,0 +1,176 @@
+@layer components {
+  @property --et-pie-chart-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-pie-chart-legend-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-pie-chart-enter-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 400ms;
+  }
+
+  @property --et-pie-chart-enter-stagger {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 40ms;
+  }
+
+  .et-pie-chart {
+    display: block;
+    position: relative;
+    font-size: var(--et-pie-chart-font-size);
+    line-height: 1.4;
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-pie-chart-figure {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--et-pie-chart-legend-gap);
+
+    .et-pie-chart-plot {
+      position: relative;
+      flex: 0 1 auto;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+
+      .et-pie-chart-svg {
+        display: block;
+        overflow: visible;
+      }
+    }
+  }
+
+  .et-pie-chart-empty {
+    fill: none;
+    stroke: var(--et-surface-border-solid, currentColor);
+    stroke-width: 1px;
+  }
+
+  .et-pie-chart-slice,
+  .et-pie-chart-legend-item {
+    --_et-pie-chart-slice-fill: color-mix(
+      in oklab,
+      var(--et-theme-color-primary-solid, currentColor) var(--_et-pie-chart-accent-mix, 100%),
+      var(--et-surface-background-solid, transparent)
+    );
+  }
+
+  .et-pie-chart-slice {
+    --_et-pie-chart-slice-tint: color-mix(
+      in oklab,
+      var(--_et-pie-chart-slice-fill) 85%,
+      var(--et-surface-background-solid, transparent)
+    );
+
+    outline: none;
+    animation: et-pie-chart-slice-enter var(--et-pie-chart-enter-duration) cubic-bezier(0.2, 0, 0, 1) backwards;
+    animation-delay: calc(min(var(--_et-pie-chart-slice-order, 0), 10) * var(--et-pie-chart-enter-stagger));
+
+    .et-pie-chart-slice-mark {
+      fill: var(--_et-pie-chart-slice-fill);
+      stroke: transparent;
+      stroke-width: 2px;
+      stroke-linejoin: round;
+    }
+
+    .et-pie-chart-slice-anchor {
+      fill: none;
+      pointer-events: none;
+    }
+
+    &:focus-visible .et-pie-chart-slice-mark {
+      fill: var(--_et-pie-chart-slice-tint);
+      stroke: var(--et-surface-color-solid, currentColor);
+    }
+
+    @media (hover: hover) {
+      &:hover .et-pie-chart-slice-mark {
+        fill: var(--_et-pie-chart-slice-tint);
+      }
+    }
+  }
+
+  .et-pie-chart-center {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    inline-size: calc(var(--_et-pie-chart-hole-size) * 0.7);
+    block-size: calc(var(--_et-pie-chart-hole-size) * 0.7);
+    text-align: center;
+    pointer-events: none;
+
+    .et-pie-chart-total {
+      font-size: 1.5em;
+      line-height: 1.2;
+      color: var(--et-surface-color-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .et-pie-chart-legend {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    flex: 1 1 160px;
+    max-inline-size: 360px;
+    align-items: center;
+    column-gap: 8px;
+    row-gap: 6px;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    .et-pie-chart-legend-item {
+      display: contents;
+    }
+
+    .et-pie-chart-legend-swatch {
+      inline-size: 10px;
+      block-size: 10px;
+      border-radius: 2px;
+      background: var(--_et-pie-chart-slice-fill);
+    }
+
+    .et-pie-chart-legend-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .et-pie-chart-legend-value,
+    .et-pie-chart-legend-percent {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .et-pie-chart-legend-value {
+      color: var(--et-surface-color-solid, currentColor);
+    }
+  }
+
+  @keyframes et-pie-chart-slice-enter {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-pie-chart-slice {
+      animation: none;
+    }
+  }
+}

package/src/lib/chart/sankey-chart.component.css

@@ -0,0 +1,221 @@
+@layer components {
+  @property --et-sankey-chart-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-sankey-chart-min-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 480px;
+  }
+
+  @property --et-sankey-chart-link-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.35;
+  }
+
+  @property --et-sankey-chart-link-highlight-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.6;
+  }
+
+  @property --et-sankey-chart-link-dim-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.1;
+  }
+
+  @property --et-sankey-chart-enter-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 400ms;
+  }
+
+  .et-sankey-chart {
+    display: block;
+    position: relative;
+    font-size: var(--et-sankey-chart-font-size);
+    line-height: 1.4;
+    color: var(--et-surface-color-solid, currentColor);
+
+    .et-sankey-chart-scroller {
+      overflow-x: auto;
+      padding-block: 0.7em;
+    }
+
+    .et-sankey-chart-plot {
+      position: relative;
+      min-inline-size: var(--et-sankey-chart-min-width);
+    }
+
+    &:where([data-direction='vertical']) .et-sankey-chart-plot {
+      min-inline-size: 0;
+    }
+
+    .et-sankey-chart-svg {
+      display: block;
+      overflow: visible;
+    }
+
+    .et-sankey-chart-labels {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      animation: et-sankey-chart-fade var(--et-sankey-chart-enter-duration) ease-out backwards;
+    }
+
+    .et-sankey-chart-label {
+      position: absolute;
+      inset-block-start: var(--_et-sankey-chart-label-y);
+      inset-inline-start: var(--_et-sankey-chart-label-x);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      translate: 0 -50%;
+      text-shadow:
+        0 0 2px var(--et-surface-background-solid, transparent),
+        0 0 4px var(--et-surface-background-solid, transparent);
+
+      &:where([data-side='start']) {
+        translate: -100% -50%;
+        text-align: end;
+      }
+
+      &:where([data-side='center']) {
+        box-sizing: border-box;
+        padding: 1px 6px;
+        border: 1px solid var(--et-surface-border-solid, currentColor);
+        border-radius: 4px;
+        background: var(--et-surface-background-solid, transparent);
+        text-shadow: none;
+        translate: -50% -50%;
+      }
+    }
+
+    &:where([data-direction='vertical']) .et-sankey-chart-label {
+      translate: -50% 0;
+      text-align: center;
+
+      &:where([data-side='start']) {
+        translate: -50% -100%;
+      }
+
+      &:where([data-side='center']) {
+        translate: -50% -50%;
+      }
+    }
+  }
+
+  .et-sankey-chart-node {
+    outline: none;
+
+    .et-sankey-chart-node-target {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 2px;
+    }
+
+    .et-sankey-chart-node-mark {
+      fill: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+      animation: et-sankey-chart-fade var(--et-sankey-chart-enter-duration) ease-out backwards;
+    }
+
+    &:where([data-active]) .et-sankey-chart-node-target {
+      fill: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+    }
+
+    &:focus-visible .et-sankey-chart-node-target {
+      stroke: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  .et-sankey-chart-link {
+    outline: none;
+
+    .et-sankey-chart-link-mark {
+      fill: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+      fill-opacity: var(--et-sankey-chart-link-opacity);
+      stroke: transparent;
+      stroke-width: 4px;
+      transition: fill-opacity 150ms ease-out;
+      animation: et-sankey-chart-fade var(--et-sankey-chart-enter-duration) ease-out
+        calc(var(--et-sankey-chart-enter-duration) / 2) backwards;
+    }
+
+    .et-sankey-chart-link-anchor {
+      fill: none;
+      pointer-events: none;
+    }
+
+    &:focus-visible .et-sankey-chart-link-mark {
+      stroke: var(--et-theme-color-primary-solid, currentColor);
+      stroke-width: 2px;
+    }
+  }
+
+  .et-sankey-chart-svg:where([data-highlight]) .et-sankey-chart-link {
+    .et-sankey-chart-link-mark {
+      fill-opacity: var(--et-sankey-chart-link-dim-opacity);
+    }
+
+    &:where([data-highlighted]) .et-sankey-chart-link-mark {
+      fill-opacity: var(--et-sankey-chart-link-highlight-opacity);
+    }
+  }
+
+  .et-sankey-chart-tooltip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 4px 8px;
+
+    .et-sankey-chart-tooltip-total {
+      opacity: 0.75;
+    }
+
+    .et-sankey-chart-tooltip-value {
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .et-sankey-chart-link-tooltip {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .et-sankey-chart-tooltip-hint {
+      color: var(--et-surface-color-muted-solid, currentColor);
+      white-space: nowrap;
+    }
+  }
+
+  @keyframes et-sankey-chart-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-sankey-chart .et-sankey-chart-labels,
+    .et-sankey-chart-node .et-sankey-chart-node-mark,
+    .et-sankey-chart-link .et-sankey-chart-link-mark {
+      animation: none;
+    }
+
+    .et-sankey-chart-link .et-sankey-chart-link-mark {
+      transition: none;
+    }
+  }
+}