plotleaf 0.1.0 → 0.3.0

package/dist/assets/styles.css

@@ -15,6 +15,14 @@
   --series-fill-end: rgba(79, 178, 239, 0);
   --tooltip: #ffffff;
   --target: #969ba2;
+  --slice-1: #429ee4;
+  --slice-2: #64afa1;
+  --slice-3: #8696b8;
+  --slice-4: #d4a05b;
+  --slice-5: #7984be;
+  --slice-6: #90c7df;
+  --slice-7: #b39581;
+  --slice-8: #a4acb9;
   font-family:
     ui-sans-serif,
     -apple-system,
@@ -42,6 +50,14 @@
     --series-fill-end: rgba(72, 158, 224, 0);
     --tooltip: #25272c;
     --target: #878d97;
+    --slice-1: #65b5ed;
+    --slice-2: #80c5b6;
+    --slice-3: #a2b2d0;
+    --slice-4: #e1b575;
+    --slice-5: #a1a9de;
+    --slice-6: #a1d8eb;
+    --slice-7: #c5aa99;
+    --slice-8: #b7bfcd;
   }
 }
 * {
@@ -251,6 +267,163 @@ code {
 .chart-data caption {
   font-size: 15px;
 }
+.funnel-stages {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-width: none;
+  display: grid;
+  gap: 16px;
+}
+.funnel-stage {
+  --stage-fill: var(--series);
+  margin: 0;
+  min-width: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+}
+.funnel-stage[data-status="on-target"] {
+  --stage-fill: var(--positive);
+}
+.funnel-stage[data-status="below-target"] {
+  --stage-fill: var(--warning);
+}
+.funnel-stage[data-status="at-risk"] {
+  --stage-fill: var(--negative);
+}
+.funnel-heading,
+.funnel-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 12px;
+}
+.funnel-heading {
+  justify-content: space-between;
+  gap: 4px 16px;
+  overflow-wrap: anywhere;
+}
+.funnel-values {
+  color: var(--muted);
+}
+.funnel-values strong {
+  font-weight: 550;
+}
+.funnel-stage meter {
+  display: block;
+  appearance: none;
+  width: 100%;
+  height: 10px;
+  margin-block-start: 8px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--soft);
+}
+.funnel-stage meter::-webkit-meter-bar {
+  height: 10px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--soft);
+  box-shadow: none;
+}
+.funnel-stage meter::-webkit-meter-optimum-value,
+.funnel-stage meter::-webkit-meter-suboptimum-value,
+.funnel-stage meter::-webkit-meter-even-less-good-value {
+  border-radius: 999px;
+  background: var(--stage-fill);
+}
+.funnel-stage meter::-moz-meter-bar {
+  border-radius: 999px;
+  background: var(--stage-fill);
+}
+.funnel-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-block-start: 5px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.funnel-status::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--stage-fill);
+}
+.donut-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 12px 24px;
+}
+.donut-plot {
+  flex: 1 1 180px;
+  min-width: 0;
+  max-width: 300px;
+  height: 260px;
+}
+.donut-legend {
+  flex: 1 1 210px;
+  min-width: 0;
+  max-width: 500px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+}
+.donut-legend li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: baseline;
+  gap: 8px 14px;
+  margin: 0;
+  padding-block: 10px;
+}
+.donut-key {
+  display: flex;
+  align-items: baseline;
+  gap: 9px;
+  overflow-wrap: anywhere;
+}
+.donut-swatch {
+  flex: 0 0 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.donut-swatch[data-slice="1"] {
+  background: var(--slice-1);
+}
+.donut-swatch[data-slice="2"] {
+  background: var(--slice-2);
+}
+.donut-swatch[data-slice="3"] {
+  background: var(--slice-3);
+}
+.donut-swatch[data-slice="4"] {
+  background: var(--slice-4);
+}
+.donut-swatch[data-slice="5"] {
+  background: var(--slice-5);
+}
+.donut-swatch[data-slice="6"] {
+  background: var(--slice-6);
+}
+.donut-swatch[data-slice="7"] {
+  background: var(--slice-7);
+}
+.donut-swatch[data-slice="8"] {
+  background: var(--slice-8);
+}
+.donut-value {
+  color: var(--ink);
+}
+.donut-share {
+  color: var(--muted);
+}
 .table-scroll {
   max-width: 100%;
   overflow: auto;
@@ -297,6 +470,77 @@ tbody tr:last-child td {
 .numeric {
   text-align: end;
 }
+.image-definitions {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.table-image {
+  display: block;
+  width: 64px;
+  height: 48px;
+  border-radius: 4px;
+  outline: 1px solid var(--rule);
+  outline-offset: -1px;
+  background: var(--page);
+}
+.sparkline-cell {
+  display: inline-grid;
+  grid-template-columns: 112px minmax(3ch, auto);
+  align-items: center;
+  gap: 2px 12px;
+  font-variant-numeric: tabular-nums;
+}
+.sparkline-chart {
+  display: block;
+  width: 112px;
+  height: 32px;
+  color: var(--series);
+}
+.sparkline-chart path {
+  stroke: currentColor;
+  stroke-width: 1.8px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+.sparkline-chart circle {
+  fill: currentColor;
+}
+.sparkline-last {
+  color: var(--ink);
+}
+.sparkline-empty {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: normal;
+}
+.sparkline-data {
+  grid-column: 1 / -1;
+  text-align: start;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: normal;
+  max-width: 190px;
+  color: var(--muted);
+}
+.sparkline-data summary {
+  cursor: pointer;
+  width: fit-content;
+  padding-block: 3px;
+  min-height: 24px;
+}
+.sparkline-values {
+  margin: 8px 0;
+  padding-inline-start: 26px;
+  max-height: 180px;
+  overflow: auto;
+  overflow-wrap: anywhere;
+}
+.sparkline-values li {
+  margin-block: 0;
+}
 th button {
   border: 0;
   background: transparent;