@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/charts/index.css

@@ -0,0 +1,573 @@
+/* charts (theme/less/pacem/charts): column-line.less, line.less, column.less, pie.less.
+   Pie colors (each(@all_colors) in Less) are written once against private properties, assigned by the color
+   classes (generated/colors.css): --pacem--pie (.chart-{color} of a .chart-gradient area) and --pacem--slice
+   (g.chart-series.series-{color}, with animations). The slices' opacities and animation delays (recursive
+   mixins) are written out in place: their position in the cascade matters. */
+@import "generated/colors.css";
+@custom-selector :--chart-colors :is(.chart-root, .chart-background, .chart-default, .chart-invert, .chart-primary, .chart-secondary,
+    .chart-accent, .chart-info, .chart-success, .chart-warning, .chart-danger, .chart-error, .chart-disabled, .chart-green, .chart-yellow,
+    .chart-brown, .chart-red, .chart-pink, .chart-blue, .chart-orange, .chart-purple, .chart-teal, .chart-gray);
+@custom-selector :--series-colors :is(.series-root, .series-background, .series-default, .series-invert, .series-primary, .series-secondary,
+    .series-accent, .series-info, .series-success, .series-warning, .series-danger, .series-error, .series-disabled, .series-green, .series-yellow,
+    .series-brown, .series-red, .series-pink, .series-blue, .series-orange, .series-purple, .series-teal, .series-gray);
+
+pacem-chart,
+pacem-chart-series {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+/* #region column and line charts (.Chart()) */
+.pacem-chart-area {
+    position: relative;
+
+    :is(.pacem-line-chart, .pacem-column-chart) {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        .chart-series {
+            display: block;
+            height: 100%;
+
+            /* .ChartSeries() */
+            :is(line, rect, path) {
+                stroke: var(--pacem-color-default);
+            }
+
+            linearGradient stop {
+                stop-color: var(--pacem-color-default);
+                stop-opacity: 1;
+            }
+
+            &.series-accent {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-accent);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-accent);
+                    stop-opacity: 1;
+                }
+            }
+
+            &.series-primary {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-primary);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-primary);
+                    stop-opacity: 1;
+                }
+            }
+
+            &.series-success {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-success);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-success);
+                    stop-opacity: 1;
+                }
+            }
+
+            &.series-warning {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-warning);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-warning);
+                    stop-opacity: 1;
+                }
+            }
+
+            &.series-danger {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-danger);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-danger);
+                    stop-opacity: 1;
+                }
+            }
+
+            &.series-disabled {
+                :is(line, rect, path) {
+                    stroke: var(--pacem-color-disabled);
+                }
+
+                linearGradient stop {
+                    stop-color: var(--pacem-color-disabled);
+                    stop-opacity: 1;
+                }
+            }
+        }
+
+        .chart-grid {
+            display: block;
+            height: 100%;
+            pointer-events: none;
+
+            path {
+                stroke-width: 0.06%;
+                stroke: rgb(from var(--pacem-color-default) r g b / 20%);
+                fill: none;
+            }
+
+            text {
+                fill: rgb(from var(--pacem-color-default) r g b / 25%);
+                font-family: var(--pacem-font-tech);
+                font-size: calc(.75rem * var(--pacem-font-tech-rem-factor));
+            }
+        }
+    }
+}
+/* #endregion */
+
+/* #region line chart */
+.pacem-chart-area .pacem-line-chart .chart-series {
+    line.circle {
+        opacity: 0;
+        stroke-width: .667%;
+        stroke-linecap: round;
+    }
+
+    path {
+        stroke-width: .333%;
+    }
+
+    linearGradient stop {
+        stop-opacity: .5;
+    }
+
+    &.series-thin {
+        line.circle {
+            stroke-width: .5%;
+        }
+
+        path {
+            stroke-width: 0.125%;
+        }
+    }
+
+    &.series-thick {
+        line.circle {
+            stroke-width: 1%;
+        }
+
+        path {
+            stroke-width: 0.5%;
+        }
+    }
+
+    &.series-light {
+        linearGradient stop {
+            stop-opacity: .3;
+        }
+
+        :is(line.circle, path) {
+            stroke-opacity: .5;
+        }
+    }
+
+    &.series-datapoints {
+        line.circle {
+            opacity: 1;
+        }
+
+        &.datapoints-accent line.circle {
+            stroke: var(--pacem-color-accent);
+        }
+
+        &.datapoints-primary line.circle {
+            stroke: var(--pacem-color-primary);
+        }
+
+        &.datapoints-success line.circle {
+            stroke: var(--pacem-color-success);
+        }
+
+        &.datapoints-warning line.circle {
+            stroke: var(--pacem-color-warning);
+        }
+
+        &.datapoints-danger line.circle {
+            stroke: var(--pacem-color-danger);
+        }
+
+        &.datapoints-disabled line.circle {
+            stroke: var(--pacem-color-disabled);
+        }
+    }
+
+    &.series-noline path {
+        stroke-opacity: 0;
+        pointer-events: none;
+    }
+
+    /* .SeriesFade(0) */
+    :is(linearGradient:not(.bottom-up) stop:last-child, linearGradient.bottom-up stop:first-child) {
+        stop-opacity: 0;
+    }
+}
+/* #endregion */
+
+/* #region column chart */
+.pacem-chart-area .pacem-column-chart .chart-series {
+    rect {
+        stroke-opacity: 0;
+        stroke-width: 0;
+
+        &:hover {
+            stroke-opacity: 0.5;
+            stroke-width: 0.5%;
+            z-index: 1;
+        }
+    }
+
+    /* .SeriesFade() */
+    &.series-shade :is(linearGradient:not(.bottom-up) stop:last-child, linearGradient.bottom-up stop:first-child) {
+        stop-opacity: .67;
+    }
+
+    &.series-light {
+        linearGradient stop {
+            stop-opacity: .5;
+        }
+
+        rect:hover {
+            stroke-opacity: 0.25;
+        }
+
+        &.series-shade :is(linearGradient:not(.bottom-up) stop:last-child, linearGradient.bottom-up stop:first-child) {
+            stop-opacity: .25;
+        }
+    }
+
+    &.series-fade :is(linearGradient:not(.bottom-up) stop:last-child, linearGradient.bottom-up stop:first-child) {
+        stop-opacity: 0;
+    }
+}
+
+.pacem-animations .pacem-chart-area .pacem-column-chart .chart-series rect {
+    transform-origin: left bottom;
+    transition: stroke-width .2s var(--pacem-easing-in-out-sine), stroke-opacity .1s, x .1s, y .5s var(--pacem-easing-in-out-sine), width .1s, height .5s var(--pacem-easing-in-out-sine);
+}
+/* #endregion */
+
+/* #region pie chart */
+pacem-pie-chart,
+pacem-pie-slice {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+@keyframes pie-anim {
+    0% {
+        opacity: 0;
+        transform: rotate(-90deg);
+    }
+
+    100% {
+        opacity: 1;
+        transform: rotate(0);
+    }
+}
+
+svg.pacem-pie-chart {
+    display: block;
+
+    defs mask circle {
+        transition: r var(--pacem-easing-out-sine) .125s;
+    }
+
+    g {
+        pointer-events: none;
+        transform-origin: 50%;
+
+        path {
+            pointer-events: fill;
+        }
+    }
+}
+
+.pacem-chart-area {
+    > svg.pacem-pie-chart {
+        display: none;
+        max-height: 30vh;
+
+        g.chart-series {
+            path {
+                stroke: none;
+                opacity: .8;
+                fill: var(--pacem-color-default);
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            &.series-light path {
+                opacity: .5;
+
+                &:hover {
+                    opacity: .8;
+                }
+            }
+        }
+    }
+
+    &.chart-has-data > svg.pacem-pie-chart {
+        display: block;
+    }
+}
+
+/* slices fading from .8 by .04 (.PieSliceGradient(20, 1)) */
+.pacem-chart-area:is(.chart-error, .chart-disabled, .chart-danger, .chart-warning, .chart-success, .chart-primary, .chart-accent, .chart-gradient, .chart-default) > svg.pacem-pie-chart g.chart-series {
+    &:nth-child(1) > path {
+        opacity: 0.8;
+    }
+
+    &:nth-child(2) > path {
+        opacity: 0.76;
+    }
+
+    &:nth-child(3) > path {
+        opacity: 0.72;
+    }
+
+    &:nth-child(4) > path {
+        opacity: 0.68;
+    }
+
+    &:nth-child(5) > path {
+        opacity: 0.64;
+    }
+
+    &:nth-child(6) > path {
+        opacity: 0.6;
+    }
+
+    &:nth-child(7) > path {
+        opacity: 0.56;
+    }
+
+    &:nth-child(8) > path {
+        opacity: 0.52;
+    }
+
+    &:nth-child(9) > path {
+        opacity: 0.48;
+    }
+
+    &:nth-child(10) > path {
+        opacity: 0.44;
+    }
+
+    &:nth-child(11) > path {
+        opacity: 0.4;
+    }
+
+    &:nth-child(12) > path {
+        opacity: 0.36;
+    }
+
+    &:nth-child(13) > path {
+        opacity: 0.32;
+    }
+
+    &:nth-child(14) > path {
+        opacity: 0.28;
+    }
+
+    &:nth-child(15) > path {
+        opacity: 0.24;
+    }
+
+    &:nth-child(16) > path {
+        opacity: 0.2;
+    }
+
+    &:nth-child(17) > path {
+        opacity: 0.16;
+    }
+
+    &:nth-child(18) > path {
+        opacity: 0.12;
+    }
+
+    &:nth-child(19) > path {
+        opacity: 0.08;
+    }
+
+    &:nth-child(20) > path {
+        opacity: 0.04;
+    }
+}
+
+/* #region obsolete (.PieSliceGradient(color)) */
+.pacem-chart-area {
+    &.chart-default > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-default);
+    }
+
+    &.chart-accent > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-accent);
+    }
+
+    &.chart-primary > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-primary);
+    }
+
+    &.chart-success > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-success);
+    }
+
+    &.chart-warning > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-warning);
+    }
+
+    &.chart-danger > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-danger);
+    }
+
+    &.chart-error > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-error);
+    }
+
+    &.chart-disabled > svg.pacem-pie-chart g.chart-series > path {
+        fill: var(--pacem-color-disabled);
+    }
+
+    &:is(.chart-default, .chart-accent, .chart-primary, .chart-success, .chart-warning, .chart-danger, .chart-error, .chart-disabled) > svg.pacem-pie-chart g.chart-series > path:hover {
+        opacity: 1;
+    }
+}
+/* #endregion */
+
+.pacem-chart-area.chart-gradient:--chart-colors > svg.pacem-pie-chart g.chart-series > path {
+    fill: var(--pacem--pie);
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.pacem-chart-area.chart-has-data {
+    &.chart-small > svg.pacem-pie-chart {
+        height: calc(var(--pacem-grid-spacing) * 8);
+    }
+
+    &.chart-smaller > svg.pacem-pie-chart {
+        height: calc(var(--pacem-grid-spacing) * 5);
+    }
+}
+
+.pacem-animations svg.pacem-pie-chart {
+    g.pacem-pie-slice {
+        &:not(.pacem-viewport-aware),
+        &.pacem-viewport-aware.pacem-in-viewport {
+            animation: pie-anim .3s var(--pacem-easing-out-sine) 0s both;
+        }
+
+        /* .PieSlice(20): delays up to 1.25s */
+        &:nth-child(20) {
+            animation-delay: 1.25s;
+        }
+
+        &:nth-child(19) {
+            animation-delay: 1.1875s;
+        }
+
+        &:nth-child(18) {
+            animation-delay: 1.125s;
+        }
+
+        &:nth-child(17) {
+            animation-delay: 1.0625s;
+        }
+
+        &:nth-child(16) {
+            animation-delay: 1s;
+        }
+
+        &:nth-child(15) {
+            animation-delay: 0.9375s;
+        }
+
+        &:nth-child(14) {
+            animation-delay: 0.875s;
+        }
+
+        &:nth-child(13) {
+            animation-delay: 0.8125s;
+        }
+
+        &:nth-child(12) {
+            animation-delay: 0.75s;
+        }
+
+        &:nth-child(11) {
+            animation-delay: 0.6875s;
+        }
+
+        &:nth-child(10) {
+            animation-delay: 0.625s;
+        }
+
+        &:nth-child(9) {
+            animation-delay: 0.5625s;
+        }
+
+        &:nth-child(8) {
+            animation-delay: 0.5s;
+        }
+
+        &:nth-child(7) {
+            animation-delay: 0.4375s;
+        }
+
+        &:nth-child(6) {
+            animation-delay: 0.375s;
+        }
+
+        &:nth-child(5) {
+            animation-delay: 0.3125s;
+        }
+
+        &:nth-child(4) {
+            animation-delay: 0.25s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: 0.1875s;
+        }
+
+        &:nth-child(2) {
+            animation-delay: 0.125s;
+        }
+
+        &:nth-child(1) {
+            animation-delay: 0.0625s;
+        }
+
+        path {
+            /* (not the d attribute: it would conflict with the transform) */
+            transition: transform var(--pacem-easing-in-out-sine) .2s;
+        }
+    }
+
+    g.chart-series:--series-colors path {
+        fill: var(--pacem--slice);
+    }
+}
+
+:--shadows .pacem-animations svg.pacem-pie-chart {
+    filter: drop-shadow(0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 12) rgba(0,0,0,0.5));
+}
+/* #endregion */