@affinda/wc 0.6.2 → 0.7.0

package/dist/collection/components/af-line-chart/af-line-chart.css

@@ -0,0 +1,255 @@
+/**
+ * af-line-chart styles
+ */
+
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+}
+
+/* ==========================================================================
+   Chart Wrapper
+   ========================================================================== */
+
+.line-chart__chart-wrapper {
+  position: relative;
+}
+
+/* ==========================================================================
+   SVG Container
+   ========================================================================== */
+
+.line-chart__svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+/* ==========================================================================
+   Grid Lines
+   ========================================================================== */
+
+.line-chart__grid-line {
+  fill: none;
+  stroke: var(--af-chart-grid, #e8ebeb);
+  stroke-width: 1;
+  stroke-dasharray: 4 2;
+}
+
+/* ==========================================================================
+   Line
+   ========================================================================== */
+
+.line-chart__line {
+  fill: none;
+  stroke: var(--af-chart-line, var(--af-chart-1, #c6d5d1));
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Series color variants - use line token for primary, palette for additional series */
+.line-chart__line--series-0 { stroke: var(--af-chart-line, var(--af-chart-1, #c6d5d1)); }
+.line-chart__line--series-1 { stroke: var(--af-chart-2, #dde6e3); }
+.line-chart__line--series-2 { stroke: var(--af-chart-3, #c0ab8d); }
+.line-chart__line--series-3 { stroke: var(--af-chart-4, #dfd5c6); }
+.line-chart__line--series-4 { stroke: var(--af-chart-5, #14343b); }
+
+/* Line animation */
+.line-chart__line--animated {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: line-draw 2.5s ease-out forwards;
+}
+
+@keyframes line-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ==========================================================================
+   Area Fill
+   ========================================================================== */
+
+.line-chart__area {
+  fill: var(--af-chart-1, #c6d5d1);
+  opacity: 0.2;
+}
+
+/* Series color variants */
+.line-chart__area--series-0 { fill: var(--af-chart-1, #c6d5d1); }
+.line-chart__area--series-1 { fill: var(--af-chart-2, #dde6e3); }
+.line-chart__area--series-2 { fill: var(--af-chart-3, #c0ab8d); }
+.line-chart__area--series-3 { fill: var(--af-chart-4, #dfd5c6); }
+.line-chart__area--series-4 { fill: var(--af-chart-5, #14343b); }
+
+/* Area animation */
+.line-chart__area--animated {
+  opacity: 0;
+  animation: area-fade 0.8s ease-out 0.8s forwards;
+}
+
+@keyframes area-fade {
+  to {
+    opacity: 0.2;
+  }
+}
+
+/* ==========================================================================
+   Data Points
+   ========================================================================== */
+
+.line-chart__point {
+  fill: var(--af-chart-1, #c6d5d1);
+  stroke: #fff;
+  stroke-width: 2;
+  transition: r 0.15s ease, fill 0.15s ease;
+}
+
+/* Series color variants */
+.line-chart__point--series-0 { fill: var(--af-chart-1, #c6d5d1); }
+.line-chart__point--series-1 { fill: var(--af-chart-2, #dde6e3); }
+.line-chart__point--series-2 { fill: var(--af-chart-3, #c0ab8d); }
+.line-chart__point--series-3 { fill: var(--af-chart-4, #dfd5c6); }
+.line-chart__point--series-4 { fill: var(--af-chart-5, #14343b); }
+
+.line-chart__point-hitarea {
+  fill: transparent;
+  cursor: pointer;
+}
+
+/* Hover state */
+:host(.line-chart--interactive) .line-chart__point-group {
+  cursor: pointer;
+}
+
+:host(.line-chart--interactive) .line-chart__point-group:hover .line-chart__point,
+.line-chart__point-group--hovered .line-chart__point {
+  r: 6;
+  fill: var(--af-chart-highlight, #a6fff8);
+}
+
+/* Point animation */
+.line-chart__point--animated {
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: center;
+  animation: point-pop 0.5s ease-out forwards;
+}
+
+@keyframes point-pop {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ==========================================================================
+   Axes
+   ========================================================================== */
+
+.line-chart__axis-line {
+  stroke: var(--af-chart-grid, #e8ebeb);
+  stroke-width: 1;
+}
+
+.line-chart__tick-label {
+  fill: var(--af-chart-text, #2b484f);
+  font-size: 11px;
+  font-family: inherit;
+}
+
+.line-chart__tick-label--y {
+  text-anchor: end;
+  dominant-baseline: middle;
+}
+
+.line-chart__tick-label--x {
+  text-anchor: middle;
+  dominant-baseline: hanging;
+}
+
+/* ==========================================================================
+   Legend
+   ========================================================================== */
+
+.line-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 16px;
+  padding: 0 8px;
+}
+
+.line-chart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.line-chart__legend-swatch {
+  width: 12px;
+  height: 3px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.line-chart__legend-swatch--series-0 { background-color: var(--af-chart-1, #c6d5d1); }
+.line-chart__legend-swatch--series-1 { background-color: var(--af-chart-2, #dde6e3); }
+.line-chart__legend-swatch--series-2 { background-color: var(--af-chart-3, #c0ab8d); }
+.line-chart__legend-swatch--series-3 { background-color: var(--af-chart-4, #dfd5c6); }
+.line-chart__legend-swatch--series-4 { background-color: var(--af-chart-5, #14343b); }
+
+.line-chart__legend-label {
+  font-size: 13px;
+  color: var(--af-chart-text, #2b484f);
+}
+
+/* ==========================================================================
+   Tooltip
+   ========================================================================== */
+
+.line-chart__tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -12px;
+  padding: 8px 12px;
+  background: var(--af-chart-tooltip-bg, #ffffff);
+  border: 1px solid var(--af-chart-tooltip-border, #e8ebeb);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  z-index: 10;
+  white-space: nowrap;
+}
+
+.line-chart__tooltip-label {
+  font-size: 12px;
+  color: var(--af-chart-text-muted, #6b8085);
+  margin-bottom: 2px;
+}
+
+.line-chart__tooltip-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--af-chart-tooltip-text, #2b484f);
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+.line-chart--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.line-chart__empty-message {
+  font-size: 14px;
+  color: var(--af-chart-text-muted, #6b8085);
+}