@nova-ui/charts
Version:
Nova Charts is a library created to provide potential consumers with solutions for various data visualizations that conform with the Nova Design Language. It's designed to solve common patterns identified by UX designers, but also be very flexible so that
2 lines (1 loc) • 12.1 kB
CSS
.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.nui-chart{display:block;height:100%;width:100%}.nui-chart .hidden{display:none}.nui-chart svg{display:block}.nui-chart .sw-hidden{opacity:0;visibility:hidden}.nui-chart .tick-hidden-text text{opacity:0}.nui-chart .sw-line{fill:none;stroke-width:2px;shape-rendering:auto}.nui-chart .sw-interaction-layer .tooltip-group text{font-size:12px}.nui-chart .sw-interaction-layer .tooltip-group .nui-chart-highlight-tooltip-marker{stroke:#fff}.nui-chart .sw-interaction-layer .tooltip-group .nui-chart-highlight-tooltip-bg{fill:var(--nui-color-bg-mid_dark,#333)}.nui-chart .nui-chart-hidden{visibility:hidden}.nui-chart .brush .selection{fill:var(--nui-color-active,#0079aa);fill-opacity:.2}.nui-chart nui-chart-point-marker[color-index="2"] .nui-chart-point-marker,.nui-chart nui-chart-point-marker[color-index="8"] .nui-chart-point-marker,.nui-chart nui-chart-point-marker[color-index="14"] .nui-chart-point-marker{shape-rendering:crispEdges}.nui-chart .nui-chart-column-separator{stroke:#fff;stroke-width:1}.nui-chart .nui-chart-trend-line{stroke:var(--black,#111);stroke-width:1}.nui-chart .trend-line-arrow{fill:var(--black,#111)}.nui-chart .nui-chart-threshold-lines .nui-chart-threshold-error,.nui-chart .nui-chart-threshold-lines .nui-chart-threshold-warning{fill-opacity:1}.nui-chart .nui-chart-highlight-tooltip-text{font-weight:800}.nui-chart .nui-chart-point-marker-hidden{visibility:hidden}.nui-chart .nui-chart-percentile-line{stroke-width:2px;stroke-dasharray:5,5,2,5}.nui-chart .nui-chart-percentile-text{font-size:10px;font-weight:600}.nui-chart .nui-chart-annotation-line{stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.nui-chart .nui-chart-annotation-line--hover{stroke:var(--nui-color-text-link,#0079aa)}.nui-chart .nui-chart-annotation-note{fill:var(--nui-color-text-link,#0079aa);font-weight:600;mix-blend-mode:hue}.nui-chart .nui-chart-annotation-hover-rect{fill:transparent;cursor:pointer}.nui-chart .nui-chart-annotation-hover-rect--hidden{fill:transparent}.nui-chart .nui-chart-annotation-background-rect{fill:var(--white,#fff)}.nui-chart .nui-chart-annotation-hover-highlight{fill-opacity:.2}.nui-chart .nui-chart-annotation-hover-highlight--hidden{fill:transparent}.nui-chart .nui-chart-annotation-hover-marker{stroke:var(--nui-color-text-link,#0079aa);pointer-events:none}.nui-chart .nui-chart-other-series.tilebox .tilebox-value,.nui-chart .nui-chart-baseline-series.tilebox .tilebox-value,.nui-chart .nui-chart-other-series.tilebox .tilebox-unit,.nui-chart .nui-chart-baseline-series.tilebox .tilebox-unit{color:var(--nui-color-text-default,#111)}.sw-mark-layer .nui-chart .nui-chart-baseline-series{mix-blend-mode:multiply}.nui-chart .nui-chart-no-data-line{shape-rendering:auto;stroke-dasharray:1,3;stroke-width:unset;fill:none}.nui-chart .bar-outline{stroke-width:1px;stroke:var(--nui-color-bg-light,#fff)}.nui-chart-grid .sw-axis .domain{display:none}.nui-chart-grid .sw-axis path,.nui-chart-grid .sw-axis line{stroke:var(--nui-color-line-strong,#999999);fill:none;shape-rendering:crispEdges}.nui-chart-grid .sw-axis line.nui-regular-line{stroke-dasharray:1 1}.nui-chart-grid .sw-axis text{fill:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));font-size:11px}.nui-chart-grid .sw-axis text.chart-label{font-weight:700}.nui-chart-grid .sw-axis-grid{stroke-dasharray:1 1}.nui-chart-grid .sw-axis-grid line{stroke:var(--nui-color-line-default-transparent,rgba(17, 17, 17, .15))}.nui-chart-grid .sw-axis-grid line.nui-zero-line{opacity:.5;stroke-dasharray:none;stroke:var(--nui-color-line-dark,#999999)}.nui-chart-grid .gauge-labels{transition-property:opacity;transition-duration:.2s}.nui-chart-grid .gauge-labels text{fill:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));font-size:11px}.nui-chart-border{stroke:var(--nui-color-line-strong,#999999);stroke-width:1px;shape-rendering:crispEdges}.nui-chart-border--thick{stroke-width:3px}.nui-chart-highlight-tooltip-text{fill:var(--nui-color-text-light,#fff);font-weight:800}.data-series-container{transition-property:opacity;transition-duration:.2s}.nui-chart .pointer-events{pointer-events:auto}.nui-chart .pointer-events-click{cursor:pointer}.nui-chart .mouse-interactive-area{cursor:crosshair}.nui-chart .interaction-line{stroke:var(--nui-color-bg-inverse,#111);stroke-width:1px;shape-rendering:crispEdges}.nui-chart .interaction-label{fill:var(--nui-color-bg-inverse,#111)}.nui-chart .interaction-label__text{fill:var(--nui-color-text-inverse,#fff)}.nui-chart--path__outline{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;stroke:var(--nui-color-bg-light,#fff)}.nui-chart--path__outline-fill{fill:var(--nui-color-bg-light,#fff)}.nui-chart-tooltip-pane{pointer-events:none}.nui-chart .timeseries-zoom-brush{stroke:var(--nui-shadow-color-stronger,rgba(17, 17, 17, .6));stroke-width:1px;shape-rendering:crispEdges}.nui-chart .lasagna-layer-timeseries-zoom-brush .brush .handle{display:none}.nui-chart .lasagna-layer-timeseries-zoom-brush .brush .selection{cursor:crosshair}_:-ms-lang(x),.nui-chart--path__outline{stroke-width:1px}.nui-chart-area,.nui-chart-line-cap{stroke:var(--nui-color-bg-light,#fff);stroke-width:1px}.nui-chart-layout{display:grid;grid-template:"axis-label-left axis-label-right ." 0fr "chart chart legend" 1fr "axis-label-bottom axis-label-bottom ." 0fr "legend-bottom legend-bottom ." 0fr / 1fr 1fr auto}.nui-chart-layout .axis-label-left{grid-area:axis-label-left;justify-self:start;margin-bottom:5px;margin-right:5px}.nui-chart-layout .axis-label-right{grid-area:axis-label-right;justify-self:end;margin-bottom:5px;margin-left:5px}.nui-chart-layout .axis-label-bottom{grid-area:axis-label-bottom;justify-self:center;margin-top:5px}.nui-chart-layout .chart{grid-area:chart;display:flex;justify-content:stretch}.nui-chart-layout .chart.has-overlay{position:relative}.nui-chart-layout .chart.has-overlay .overlay{position:absolute;box-sizing:border-box;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.nui-chart-layout .legend{grid-area:legend;align-self:start;padding-left:5px}.nui-chart-layout .legend.scrollable{overflow:auto;height:100%}.nui-chart-layout .legend-bottom{grid-area:legend-bottom;justify-self:center;margin-top:5px}@media print{.nui-chart-layout{break-inside:avoid}}.nui-legend-series{padding:2px;max-width:250px;cursor:default;background-color:var(--nui-color-bg-content,#fff)}.nui-legend-series:not(.nui-legend-series--horizontal):not(:last-child){margin-bottom:1px}.nui-legend-series .nui-legend-series__tile-wrapper{display:flex;justify-content:center}.nui-legend-series .nui-legend-series__tile{display:flex}.nui-legend-series--horizontal:not(:last-child){margin-right:10px}.nui-legend-series:empty{display:none}.nui-legend-series.description-min-width--unset .description{min-width:unset}.nui-legend-series .description{line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-left:5px;padding-right:5px;min-width:130px}.nui-legend-series .description-container{overflow:hidden}.nui-legend-series .description-primary{font-weight:600;color:var(--nui-color-text-default,#111)}.nui-legend-series .description-primary:not(:last-child){margin-bottom:-3px}.nui-legend-series .description-secondary{color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6))}.nui-legend-series .description-secondary:not(:first-child){margin-top:-1px}.nui-legend-series .legend-menu{display:none;align-items:center}.nui-legend-series:hover .legend-menu{display:flex}.nui-legend-series--interactive{cursor:pointer}.nui-legend-series--interactive .nui-legend-series__tile-wrapper{position:relative}.nui-legend-series--interactive .nui-legend-series__tile-wrapper .nui-legend-series__checkbox-wrapper{align-self:center;position:absolute;visibility:hidden;top:50%;left:50%;transform:translate(-50%,-50%)}.nui-legend-series--interactive .nui-legend-series__tile-wrapper .nui-legend-series__checkbox-mark{border:solid 2px;background:no-repeat 0 center;border-color:var(--nui-color-active,#0079aa);background-color:var(--nui-color-bg-content,#fff);background-size:16px;border-radius:3px;min-width:16px;width:16px;height:16px;transition:background-color .3s,border-color .3s}.nui-legend-series--interactive .nui-legend-series__tile-wrapper .nui-legend-series__checkbox-glyph{width:100%;height:100%;background-size:12px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS54dWktY2hlY2tib3gtZ2x5cGh7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPHBvbHlsaW5lIGNsYXNzPSJ4dWktY2hlY2tib3gtZ2x5cGgiIHBvaW50cz0iMTcsNCA4LDE1IDMsOSAiLz4KPC9zdmc+);display:none}.nui-legend-series--interactive .nui-legend-series__tile-wrapper .nui-legend-series__checkbox--checked .nui-legend-series__checkbox-mark{background-color:var(--nui-color-active,#0079aa);border-color:var(--nui-color-active,#0079aa)}.nui-legend-series--interactive .nui-legend-series__tile-wrapper .nui-legend-series__checkbox--checked .nui-legend-series__checkbox-mark>.nui-legend-series__checkbox-glyph{display:block}.nui-legend-series--interactive .nui-legend-series--deselected .nui-legend-series__checkbox-wrapper,.nui-legend-series--interactive .nui-legend-series__tile-wrapper:hover .nui-legend-series__checkbox-wrapper{visibility:visible}.nui-legend-series--interactive .nui-legend-series--deselected .nui-legend-series__tile,.nui-legend-series--interactive .nui-legend-series__tile-wrapper:hover .nui-legend-series__tile{visibility:hidden}.nui-legend-series--interactive .nui-legend-series__tile-wrapper:hover{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-legend-series--interactive:hover{background-color:var(--nui-color-bg-light-hover,#f2f2f2)}.nui-legend-series--interactive:hover .nui-legend-series--deselected .nui-legend-series__tile-wrapper{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-legend-series--interactive:not(:hover) .nui-legend-series--deselected .nui-legend-series__tile-wrapper{background-color:var(--nui-color-bg-secondary,#fafafa)}.nui-legend-series:not(:hover) .nui-legend-series--state-hidden .description-container{opacity:.3}.nui-legend-series .nui-legend-series--state-deemphasized{opacity:.3}