From 0b437d154431d2ba76b5a0d96c5aedf7df66aae5 Mon Sep 17 00:00:00 2001 From: Cyprien P Date: Mon, 22 Nov 2021 09:45:48 +0100 Subject: [PATCH] (core) Brings in the new donut charts. Summary: - Donut charts is same as pie chart with few extra options to control size of the hole and to show/hide a big total in it. - Add a new option type to tune a numeric options using a slider/spinner/keyboard. - Add a new option type to tune a numeric options using a slider/keyboard - Add a new .propWithDefault method to ObjObservable to allows to set a default value when options is undefined. - mocha-webdriver's findContent does not work to find content in svg elements. So had to tweak original function into a sister function using .textContent instead. Test Plan: Adds new tests Reviewers: dsagal Reviewed By: dsagal Subscribers: anaisconce, dsagal Differential Revision: https://phab.getgrist.com/D3107 --- app/client/components/ChartView.ts | 242 +++++++++++++++++++++++++- app/client/lib/chartUtil.ts | 4 + app/client/ui/RightPanel.ts | 3 + app/client/ui2018/IconList.ts | 2 + static/icons/icons.css | 1 + static/ui-icons/Charts/ChartDonut.svg | 56 ++++++ 6 files changed, 299 insertions(+), 9 deletions(-) create mode 100644 static/ui-icons/Charts/ChartDonut.svg diff --git a/app/client/components/ChartView.ts b/app/client/components/ChartView.ts index ad6abd57..0fc2c71b 100644 --- a/app/client/components/ChartView.ts +++ b/app/client/components/ChartView.ts @@ -1,6 +1,7 @@ import * as BaseView from 'app/client/components/BaseView'; import {GristDoc} from 'app/client/components/GristDoc'; -import {consolidateValues, sortByXValues, splitValuesByIndex, uniqXValues} from 'app/client/lib/chartUtil'; +import {consolidateValues, formatPercent, sortByXValues, splitValuesByIndex, + uniqXValues} from 'app/client/lib/chartUtil'; import {Delay} from 'app/client/lib/Delay'; import {Disposable} from 'app/client/lib/dispose'; import {fromKoSave} from 'app/client/lib/fromKoSave'; @@ -18,23 +19,35 @@ import {cssDragger} from 'app/client/ui2018/draggableList'; import {icon} from 'app/client/ui2018/icons'; import {linkSelect, menu, menuItem, select} from 'app/client/ui2018/menus'; import {nativeCompare} from 'app/common/gutil'; +import {BaseFormatter} from 'app/common/ValueFormatter'; import {decodeObject} from 'app/plugin/objtypes'; import {Events as BackboneEvents} from 'backbone'; import {Computed, dom, DomElementArg, fromKo, Disposable as GrainJSDisposable, IOption, - makeTestId, Observable, styled} from 'grainjs'; + makeTestId, MultiHolder, Observable, styled} from 'grainjs'; import * as ko from 'knockout'; +import clamp = require('lodash/clamp'); import debounce = require('lodash/debounce'); import defaults = require('lodash/defaults'); import defaultsDeep = require('lodash/defaultsDeep'); -import {Config, Data, Datum, ErrorBar, Layout, LayoutAxis, Margin} from 'plotly.js'; +import isNumber = require('lodash/isNumber'); +import sum = require('lodash/sum'); +import {Annotations, Config, Data, Datum, ErrorBar, Layout, LayoutAxis, Margin} from 'plotly.js'; + let Plotly: PlotlyType; // When charting multiple series based on user data, limit the number of series given to plotly. const MAX_SERIES_IN_CHART = 100; +const DONUT_DEFAULT_HOLE_SIZE = 0.75; +const DONUT_DEFAULT_TEXT_SIZE = 24; const testId = makeTestId('test-chart-'); +function isPieLike(chartType: string) { + return ['pie', 'donut'].includes(chartType); +} + + interface ChartOptions { multiseries?: boolean; lineConnectGaps?: boolean; @@ -44,6 +57,9 @@ interface ChartOptions { // If "symmetric", one series after each Y series gives the length of the error bars around it. If // "separate", two series after each Y series give the length of the error bars above and below it. errorBars?: 'symmetric' | 'separate'; + donutHoleSize?: number; + showTotal?: boolean; + textSize?: number; } // tslint:disable:no-console @@ -79,11 +95,14 @@ interface PlotData { } // Data options to pass to chart functions. -interface DataOptions { +interface DataOptions extends Data { // Allows to set the pie sort option (see: https://plotly.com/javascript/reference/pie/#pie-sort). // Supports pie charts only. sort?: boolean; + + // Formatter to be used for the total inside donut charts. + totalFormatter?: BaseFormatter; } // Convert a list of Series into a set of Plotly traces. @@ -118,6 +137,7 @@ export class ChartView extends Disposable { protected viewSection: ViewSectionRec; protected sortedRows: SortedRowSet; protected tableModel: DataTableModel; + protected gristDoc: GristDoc; private _chartType: ko.Observable; private _options: ObjObservable; @@ -125,6 +145,8 @@ export class ChartView extends Disposable { private _update: () => void; private _resize: () => void; + private _formatterComp: ko.Computed; + public create(gristDoc: GristDoc, viewSectionModel: ViewSectionRec) { BaseView.call(this as any, gristDoc, viewSectionModel); @@ -138,6 +160,13 @@ export class ChartView extends Disposable { this._chartType = this.viewSection.chartTypeDef; this._options = this.viewSection.optionsObj; + // Computed that returns the formatter of the first series. This is useful to format the total + // within a donut chart. + this._formatterComp = this.autoDispose(ko.computed(() => { + const field = this.viewSection.viewFields().at(1); + return field?.createVisibleColFormatter(); + })); + this._update = debounce(() => this._updateView(), 0); this.autoDispose(this._chartType.subscribe(this._update)); @@ -145,6 +174,7 @@ export class ChartView extends Disposable { this.autoDispose(this.viewSection.viewFields().subscribe(this._update)); this.listenTo(this.sortedRows, 'rowNotify', this._update); this.autoDispose(this.sortedRows.getKoArray().subscribe(this._update)); + this.autoDispose(this._formatterComp.subscribe(this._update)); } public prepareToPrint(onOff: boolean) { @@ -208,10 +238,14 @@ export class ChartView extends Disposable { let plotData: PlotData = {data: []}; const sortSpec = this.viewSection.activeSortSpec.peek(); - if (this._chartType.peek() === 'pie' && sortSpec?.length) { + if (isPieLike(this._chartType.peek()) && sortSpec?.length) { dataOptions.sort = false; } + if (this._chartType.peek() === 'donut') { + dataOptions.totalFormatter = this._formatterComp.peek(); + } + if (!options.multiseries) { plotData = chartFunc(series, options, dataOptions); } else if (series.length > 1) { @@ -419,7 +453,7 @@ export class ChartConfig extends GrainJSDisposable { // The label to show for the first field in the axis configurator. private _firstFieldLabel = Computed.create(this, fromKo(this._section.chartTypeDef), ( - (_use, chartType) => chartType === 'pie' ? 'LABEL' : 'X-AXIS' + (_use, chartType) => isPieLike(chartType) ? 'LABEL' : 'X-AXIS' )); // A computed that returns `this._section.chartTypeDef` and that takes care of removing the group @@ -429,7 +463,7 @@ export class ChartConfig extends GrainJSDisposable { return this._gristDoc.docData.bundleActions('switched chart type', async () => { await this._section.chartTypeDef.saveOnly(val); // When switching chart type to 'pie' makes sure to remove the group data option. - if (val === 'pie') { + if (isPieLike(val)) { await this._setGroupDataColumn(-1); this._groupDataForce.set(false); } @@ -447,11 +481,14 @@ export class ChartConfig extends GrainJSDisposable { if (this._section.parentKey() !== 'chart') { return null; } + const owner = new MultiHolder(); return [ + dom.autoDispose(owner), cssRow( select(this._chartType, [ {value: 'bar', label: 'Bar Chart', icon: 'ChartBar' }, {value: 'pie', label: 'Pie Chart', icon: 'ChartPie' }, + {value: 'donut', label: 'Donut Chart', icon: 'ChartDonut' }, {value: 'area', label: 'Area Chart', icon: 'ChartArea' }, {value: 'line', label: 'Line Chart', icon: 'ChartLine' }, {value: 'scatter', label: 'Scatter Plot', icon: 'ChartLine' }, @@ -459,12 +496,29 @@ export class ChartConfig extends GrainJSDisposable { ]), testId("type"), ), - dom.maybe((use) => use(this._section.chartTypeDef) !== 'pie', () => [ + dom.maybe((use) => !isPieLike(use(this._section.chartTypeDef)), () => [ // These options don't make much sense for a pie chart. cssCheckboxRowObs('Group data', this._groupData), cssCheckboxRow('Invert Y-axis', this._optionsObj.prop('invertYAxis')), cssCheckboxRow('Log scale Y-axis', this._optionsObj.prop('logYAxis')), ]), + dom.maybe((use) => use(this._section.chartTypeDef) === 'donut', () => [ + cssSlideRow( + 'Hole Size', + Computed.create(owner, (use) => use(this._optionsObj.prop('donutHoleSize')) ?? DONUT_DEFAULT_HOLE_SIZE), + (val: number) => this._optionsObj.prop('donutHoleSize').saveOnly(val), + testId('option') + ), + cssCheckboxRow('Show Total', this._optionsObj.prop('showTotal')), + dom.maybe(this._optionsObj.prop('showTotal'), () => ( + cssNumberWithSpinnerRow( + 'Text Size', + Computed.create(owner, (use) => use(this._optionsObj.prop('textSize')) ?? DONUT_DEFAULT_TEXT_SIZE), + (val: number) => this._optionsObj.prop('textSize').saveOnly(val), + testId('option') + ) + )) + ]), dom.maybe((use) => use(this._section.chartTypeDef) === 'line', () => [ cssCheckboxRow('Connect gaps', this._optionsObj.prop('lineConnectGaps')), cssCheckboxRow('Show markers', this._optionsObj.prop('lineMarkers')), @@ -622,6 +676,105 @@ export class ChartConfig extends GrainJSDisposable { } } +// Row for a numeric option. User can change value using spinners or directly using keyboard. In +// case of invalid values, the field reverts to the saved one. +function cssNumberWithSpinnerRow(label: string, value: Computed, save: (val: number) => Promise, + ...args: DomElementArg[]) { + const minValue = 1; + let input: HTMLInputElement; + + // Set the input's value to the value that's saved on the server. + function reset() { + input.value = value.get() + "px"; + } + + async function onChange(val: string, func: (val: number) => number = (v) => v) { + let fvalue = parseFloat(val); + if (isFinite(fvalue)) { + fvalue = clamp(func(fvalue), minValue, Infinity); + await save(fvalue); + } + // Reset is needed if value were not a valid number. + reset(); + } + + return cssRow( + cssRowLabel(label), + cssNumberWithSpinner( + input = cssNumberInput( + {type: 'text'}, + dom.prop('value', (use) => use(value) + "px"), + dom.on('change', (_ev, el) => onChange(el.value)), + dom.onKeyDown({ + ArrowDown: (_ev, el) => onChange(el.value, (val) => val - 1), + ArrowUp: (_ev, el) => onChange(el.value, (val) => val + 1), + }), + ), + + // We add spinners as overlay in order to support showing the unit 'px' next to the value. + cssSpinners( + 'input', + {type: 'number', step: '1', min: String(minValue)}, + dom.prop('value', value), + dom.on('change', (_ev, el) => onChange(el.value)), + ), + ), + ...args + ); +} + +// Row for a numeric option that leaves between 0 and 1. User can change value using a slider, or +// spinners or by directly using keyboard. Value is shown as percent. If user enter an invalid +// value, field reverts to the saved value. +function cssSlideRow(label: string, value: Computed, save: (val: number) => Promise, + ...args: DomElementArg[]) { + let input: HTMLInputElement; + + // Set the input's value to the value that's saved on the server. + function reset() { + input.value = formatPercent(value.get()); + } + + async function onChange(val: string, func: (val: number) => number = (v) => v) { + let fvalue = parseFloat(val); + if (isFinite(fvalue)) { + fvalue = clamp(func(fvalue), 0, 99) / 100; + await save(fvalue); + } + // Reset is needed if value were not a valid number. + reset(); + } + + return cssRow( + cssRowLabel(label), + cssRangeInput( + {type: 'range', min: "0", max: "1", step: "0.01"}, + dom.prop('value', value), + dom.on('change', (_ev, el) => save(Number(el.value))) + ), + cssNumberWithSpinner( + input = cssNumberInput( + {type: 'text'}, + dom.prop('value', (use) => formatPercent(use(value))), + dom.on('change', (_ev, el) => onChange(el.value)), + dom.onKeyDown({ + ArrowDown: (_ev, el) => onChange(el.value, (val) => val - 1), + ArrowUp: (_ev, el) => onChange(el.value, (val) => val + 1), + }), + ), + + // We add spinners as overlay in order to support showing the unit '%' next to the value. + cssSpinners( + 'input', + {type: 'number', step: '0.01', min: '0', max: '0.99'}, + dom.prop('value', value), + dom.on('change', (_ev, el) => save(Number(el.value))), + ) + ), + ...args + ); +} + function cssCheckboxRow(label: string, value: KoSaveableObservable, ...args: DomElementArg[]) { return cssCheckboxRowObs(label, fromKoSave(value), ...args); } @@ -633,7 +786,7 @@ function cssCheckboxRowObs(label: string, value: Observable, ...args: D ); } -function basicPlot(series: Series[], options: ChartOptions, dataOptions: Partial): PlotData { +function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data): PlotData { trimNonNumericData(series); const errorBars = extractErrorBars(series, options); @@ -722,6 +875,39 @@ export const chartTypes: {[name: string]: ChartFunc} = { }; }, + + donut(series: Series[], options: ChartOptions, dataOptions: DataOptions = {}): PlotData { + const hole = isNumber(options.donutHoleSize) ? options.donutHoleSize : DONUT_DEFAULT_HOLE_SIZE; + const annotations: Array> = []; + const plotData: PlotData = chartTypes.pie(series, options, {...dataOptions, hole}); + + function format(val: number) { + if (dataOptions.totalFormatter) { + return dataOptions.totalFormatter.format(val); + } + return String(val); + } + + if (options.showTotal) { + annotations.push({ + text: format( + series.length > 1 ? + sum(series[1].values.filter(isNumber)) : + plotData.data[0].labels!.length, + ), + showarrow: false, + font: { + size: options.textSize ?? DONUT_DEFAULT_TEXT_SIZE, + } + } as any); + } + return defaultsDeep( + plotData, + {layout: {annotations}} + ); + + }, + kaplan_meier(series: Series[]): PlotData { // For this plot, the first series names the category of each point, and the second the // survival time for that point. We turn that into as many series as there are categories. @@ -838,3 +1024,41 @@ const cssHintRow = styled('div', ` margin: -4px 16px 8px 16px; color: ${colors.slate}; `); + +const cssRangeInput = styled('input', ` + input& { + width: 82px; + margin-right: 4px; + } +`); + +const cssNumberWithSpinner = styled('div', ` + position: relative; +`); + +const cssNumberInput = styled('input', ` + width: 55px; +`); + + +const cssSpinners = styled('input', ` + width: 19px; + position: absolute; + top: 2px; + right: 1px; + border: none; + outline: none; + appearance: none; + -moz-appearance: none; + visibility: hidden; + + .${cssNumberWithSpinner.className}:hover & { + visibility: visible; + } + + /* needed for chrome to show spinners, indeed the cursor could be outside of spinners' input + element */ + &[type=number]::-webkit-inner-spin-button { + opacity: 1; + } +`); diff --git a/app/client/lib/chartUtil.ts b/app/client/lib/chartUtil.ts index c5724d2e..cf76f177 100644 --- a/app/client/lib/chartUtil.ts +++ b/app/client/lib/chartUtil.ts @@ -85,3 +85,7 @@ export function consolidateValues(series: Array<{values: Datum[]}>, xvalues: Dat } return series; } + +export function formatPercent(val: number) { + return Math.floor(val * 100) + " %"; +} diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 1ad6f0f5..ac0498cf 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -552,6 +552,9 @@ export const cssRow = styled('div', ` &-top-space { margin-top: 24px; } + &-disabled { + color: ${colors.slate}; + } `); export const cssButtonRow = styled(cssRow, ` diff --git a/app/client/ui2018/IconList.ts b/app/client/ui2018/IconList.ts index 512704cd..5b430bb8 100644 --- a/app/client/ui2018/IconList.ts +++ b/app/client/ui2018/IconList.ts @@ -1,5 +1,6 @@ export type IconName = "ChartArea" | "ChartBar" | + "ChartDonut" | "ChartKaplan" | "ChartLine" | "ChartPie" | @@ -100,6 +101,7 @@ export const IconList: IconName[] = ["ChartArea", "ChartBar", "ChartKaplan", "ChartLine", + "ChartDonut", "ChartPie", "TypeCard", "TypeCardList", diff --git a/static/icons/icons.css b/static/icons/icons.css index d442d0cb..d1d0baa5 100644 --- a/static/icons/icons.css +++ b/static/icons/icons.css @@ -1,6 +1,7 @@ :root { --icon-ChartArea: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuMTkwOTgzMDEsOCBMNS4wNTI3ODY0LDQuMjc2MzkzMiBDNS4xODcyODU0NCw0LjAwNzM5NTEyIDUuNTI3MTExODEsMy45MTcxNDkzMyA1Ljc3NzM1MDEsNC4wODM5NzQ4NSBMMTEuMzMxNjQ1NCw3Ljc4NjgzODM3IEwxNS4wNjU4Nzg0LDEuMjUxOTMwNTMgQzE1LjIwMjg4MzQsMS4wMTIxNzE4MSAxNS41MDgzMTA3LDAuOTI4ODczNDQ0IDE1Ljc0ODA2OTUsMS4wNjU4Nzg0MyBDMTUuOTg3ODI4MiwxLjIwMjg4MzQxIDE2LjA3MTEyNjYsMS41MDgzMTA3NSAxNS45MzQxMjE2LDEuNzQ4MDY5NDcgTDExLjkzNDEyMTYsOC43NDgwNjk0NyBDMTEuNzkwMzk3NCw4Ljk5OTU4Njc4IDExLjQ2MzY4MjcsOS4wNzY3MTM2NiAxMS4yMjI2NDk5LDguOTE2MDI1MTUgTDUuNjkzOTE1NzksNS4yMzAyMDI0MSBMNC4xMzgyODQyNCw4LjM0MTQ2NTUxIEwxMC40NDU5NTEzLDEyLjg0Njk0MiBMMTUuMTQ2NDQ2Niw4LjE0NjQ0NjYxIEMxNS40NjE0MjksNy44MzE0NjQxOCAxNiw4LjA1NDU0NzU3IDE2LDguNSBMMTYsMTUuMDAwMTA5NSBDMTYsMTUuMjc2MjUzMyAxNS43NzYxNDAxLDE1LjUwMDExMTUgMTUuNDk5OTk2MywxNS41MDAxMDk1IEwwLjQ5OTk5NjM0OSwxNS41IEMwLjIyMzg1NTQsMTUuNDk5OTk4IDAsMTUuMjc2MTQwOSAwLDE1IEwwLDguNSBDMCw4LjIyMzg1NzYzIDAuMjIzODU3NjI1LDggMC41LDggTDMuMTkwOTgzMDEsOCBaIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4='); --icon-ChartBar: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUsMTQuNSBDNSwxNC43NzYxNDI0IDQuNzc2MTQyMzcsMTUgNC41LDE1IEM0LjIyMzg1NzYzLDE1IDQsMTQuNzc2MTQyNCA0LDE0LjUgTDQsNS41IEM0LDUuMjIzODU3NjMgNC4yMjM4NTc2Myw1IDQuNSw1IEM0Ljc3NjE0MjM3LDUgNSw1LjIyMzg1NzYzIDUsNS41IEw1LDE0LjUgWiBNOCwxNC41IEM4LDE0Ljc3NjE0MjQgNy43NzYxNDIzNywxNSA3LjUsMTUgQzcuMjIzODU3NjMsMTUgNywxNC43NzYxNDI0IDcsMTQuNSBMNyw4LjUgQzcsOC4yMjM4NTc2MyA3LjIyMzg1NzYzLDggNy41LDggQzcuNzc2MTQyMzcsOCA4LDguMjIzODU3NjMgOCw4LjUgTDgsMTQuNSBaIE0xNCwxNC41IEMxNCwxNC43NzYxNDI0IDEzLjc3NjE0MjQsMTUgMTMuNSwxNSBDMTMuMjIzODU3NiwxNSAxMywxNC43NzYxNDI0IDEzLDE0LjUgTDEzLDguNSBDMTMsOC4yMjM4NTc2MyAxMy4yMjM4NTc2LDggMTMuNSw4IEMxMy43NzYxNDI0LDggMTQsOC4yMjM4NTc2MyAxNCw4LjUgTDE0LDE0LjUgWiBNMTEsMTQuNSBDMTEsMTQuNzc2MTQyNCAxMC43NzYxNDI0LDE1IDEwLjUsMTUgQzEwLjIyMzg1NzYsMTUgMTAsMTQuNzc2MTQyNCAxMCwxNC41IEwxMCw1LjUgQzEwLDUuMjIzODU3NjMgMTAuMjIzODU3Niw1IDEwLjUsNSBDMTAuNzc2MTQyNCw1IDExLDUuMjIzODU3NjMgMTEsNS41IEwxMSwxNC41IFogTTIsMTQuNSBDMiwxNC43NzYxNDI0IDEuNzc2MTQyMzcsMTUgMS41LDE1IEMxLjIyMzg1NzYzLDE1IDEsMTQuNzc2MTQyNCAxLDE0LjUgTDEsMi41IEMxLDIuMjIzODU3NjMgMS4yMjM4NTc2MywyIDEuNSwyIEMxLjc3NjE0MjM3LDIgMiwyLjIyMzg1NzYzIDIsMi41IEwyLDE0LjUgWiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+'); + --icon-ChartDonut: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNy41IiBzdHJva2U9IiMxYzEzMDMiLz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNSIgc3Ryb2tlPSIjMWMxMzAzIi8+PHBhdGggZD0iTTcuODg0MDYxOC41OTk4NzQyN1YzLjM0MjE1NjdNMTEuNjExODUyIDExLjUyNjE1NmwxLjg4NTMxOSAxLjg4NTMxOSIgc3Ryb2tlPSIjMDAwIi8+PC9nPjwvc3ZnPg=='); --icon-ChartKaplan: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMTcxMjgwMjgsMS40MDgzMTgwMSBMMC45MTM0OTQ4MSwxLjQwODMxODAxIEMwLjY2ODg4NDI2MywxLjQwODMxODAxIDAuNDcwNTg4MjM1LDEuMTk3NjI4NDkgMC40NzA1ODgyMzUsMC45Mzc3Mjk3NzkgQzAuNDcwNTg4MjM1LDAuNjc3ODMxMDc0IDAuNjY4ODg0MjYzLDAuNDY3MTQxNTQ0IDAuOTEzNDk0ODEsMC40NjcxNDE1NDQgTDcuMDU3MDkzNDMsMC40NjcxNDE1NDQgQzcuMzMzMjM1OCwwLjQ2NzE0MTU0NCA3LjU1NzA5MzQzLDAuNjkwOTk5MTY5IDcuNTU3MDkzNDMsMC45NjcxNDE1NDQgTDcuNTU3MDkzNDMsMi43OTA2NzA5NiBDNy41NTcwOTM0MywzLjA2NjgxMzMzIDcuNzgwOTUxMDUsMy4yOTA2NzA5NiA4LjA1NzA5MzQzLDMuMjkwNjcwOTYgTDExLjQ4NjE1OTIsMy4yOTA2NzA5NiBDMTEuNzYyMzAxNSwzLjI5MDY3MDk2IDExLjk4NjE1OTIsMy41MTQ1Mjg1OCAxMS45ODYxNTkyLDMuNzkwNjcwOTYgTDExLjk4NjE1OTIsNS42MTQyMDAzNyBDMTEuOTg2MTU5Miw1Ljg5MDM0Mjc0IDEyLjIxMDAxNjgsNi4xMTQyMDAzNyAxMi40ODYxNTkyLDYuMTE0MjAwMzcgTDE1LjA4NjUwNTIsNi4xMTQyMDAzNyBDMTUuMzMxMTE1Nyw2LjExNDIwMDM3IDE1LjUyOTQxMTgsNi4zMjQ4ODk5IDE1LjUyOTQxMTgsNi41ODQ3ODg2IEMxNS41Mjk0MTE4LDYuODQ0Njg3MzEgMTUuMzMxMTE1Nyw3LjA1NTM3Njg0IDE1LjA4NjUwNTIsNy4wNTUzNzY4NCBMMTEuNjAwMzQ2LDcuMDU1Mzc2ODQgQzExLjMyNDIwMzYsNy4wNTUzNzY4NCAxMS4xMDAzNDYsNi44MzE1MTkyMSAxMS4xMDAzNDYsNi41NTUzNzY4NCBMMTEuMTAwMzQ2LDQuNzMxODQ3NDMgQzExLjEwMDM0Niw0LjQ1NTcwNTA1IDEwLjg3NjQ4ODQsNC4yMzE4NDc0MyAxMC42MDAzNDYsNC4yMzE4NDc0MyBMNy4xNzEyODAyOCw0LjIzMTg0NzQzIEM2Ljg5NTEzNzksNC4yMzE4NDc0MyA2LjY3MTI4MDI4LDQuMDA3OTg5OCA2LjY3MTI4MDI4LDMuNzMxODQ3NDMgTDYuNjcxMjgwMjgsMS45MDgzMTgwMSBDNi42NzEyODAyOCwxLjYzMjE3NTY0IDYuNDQ3NDIyNjUsMS40MDgzMTgwMSA2LjE3MTI4MDI4LDEuNDA4MzE4MDEgWiBNMi43OTQxMTc2NSwzLjI5MDY3MDk2IEwwLjk0MTE3NjQ3MSwzLjI5MDY3MDk2IEMwLjY4MTI3Nzc2NSwzLjI5MDY3MDk2IDAuNDcwNTg4MjM1LDMuMDc5OTgxNDMgMC40NzA1ODgyMzUsMi44MjAwODI3MiBDMC40NzA1ODgyMzUsMi41NjAxODQwMSAwLjY4MTI3Nzc2NSwyLjM0OTQ5NDQ5IDAuOTQxMTc2NDcxLDIuMzQ5NDk0NDkgTDMuNzM1Mjk0MTIsMi4zNDk0OTQ0OSBDNC4wMTE0MzY0OSwyLjM0OTQ5NDQ5IDQuMjM1Mjk0MTIsMi41NzMzNTIxMSA0LjIzNTI5NDEyLDIuODQ5NDk0NDkgTDQuMjM1Mjk0MTIsNy40OTY1NTMzMSBDNC4yMzUyOTQxMiw3Ljc3MjY5NTY4IDQuNDU5MTUxNzQsNy45OTY1NTMzMSA0LjczNTI5NDEyLDcuOTk2NTUzMzEgTDEwLjMyMzUyOTQsNy45OTY1NTMzMSBDMTAuNTk5NjcxOCw3Ljk5NjU1MzMxIDEwLjgyMzUyOTQsOC4yMjA0MTA5MyAxMC44MjM1Mjk0LDguNDk2NTUzMzEgTDEwLjgyMzUyOTQsMTEuMjYxMjU5MiBDMTAuODIzNTI5NCwxMS41Mzc0MDE2IDExLjA0NzM4NywxMS43NjEyNTkyIDExLjMyMzUyOTQsMTEuNzYxMjU5MiBMMTMuMTQ3MDU4OCwxMS43NjEyNTkyIEMxMy40MjMyMDEyLDExLjc2MTI1OTIgMTMuNjQ3MDU4OCwxMS45ODUxMTY4IDEzLjY0NzA1ODgsMTIuMjYxMjU5MiBMMTMuNjQ3MDU4OCwxNS4wNTUzNzY4IEMxMy42NDcwNTg4LDE1LjMxNTI3NTUgMTMuNDM2MzY5MywxNS41MjU5NjUxIDEzLjE3NjQ3MDYsMTUuNTI1OTY1MSBDMTIuOTE2NTcxOSwxNS41MjU5NjUxIDEyLjcwNTg4MjQsMTUuMzE1Mjc1NSAxMi43MDU4ODI0LDE1LjA1NTM3NjggTDEyLjcwNTg4MjQsMTMuMjAyNDM1NyBDMTIuNzA1ODgyNCwxMi45MjYyOTMzIDEyLjQ4MjAyNDcsMTIuNzAyNDM1NyAxMi4yMDU4ODI0LDEyLjcwMjQzNTcgTDEwLjM4MjM1MjksMTIuNzAyNDM1NyBDMTAuMTA2MjEwNiwxMi43MDI0MzU3IDkuODgyMzUyOTQsMTIuNDc4NTc4IDkuODgyMzUyOTQsMTIuMjAyNDM1NyBMOS44ODIzNTI5NCw5LjQzNzcyOTc4IEM5Ljg4MjM1Mjk0LDkuMTYxNTg3NCA5LjY1ODQ5NTMyLDguOTM3NzI5NzggOS4zODIzNTI5NCw4LjkzNzcyOTc4IEwzLjc5NDExNzY1LDguOTM3NzI5NzggQzMuNTE3OTc1MjcsOC45Mzc3Mjk3OCAzLjI5NDExNzY1LDguNzEzODcyMTUgMy4yOTQxMTc2NSw4LjQzNzcyOTc4IEwzLjI5NDExNzY1LDMuNzkwNjcwOTYgQzMuMjk0MTE3NjUsMy41MTQ1Mjg1OCAzLjA3MDI2MDAyLDMuMjkwNjcwOTYgMi43OTQxMTc2NSwzLjI5MDY3MDk2IFoiIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg=='); --icon-ChartLine: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuMTkwOTgzMDEsOCBMNS4wNTI3ODY0LDQuMjc2MzkzMiBDNS4xODcyODU0NCw0LjAwNzM5NTEyIDUuNTI3MTExODEsMy45MTcxNDkzMyA1Ljc3NzM1MDEsNC4wODM5NzQ4NSBMMTEuMzMxNjQ1NCw3Ljc4NjgzODM3IEwxNS4wNjU4Nzg0LDEuMjUxOTMwNTMgQzE1LjIwMjg4MzQsMS4wMTIxNzE4MSAxNS41MDgzMTA3LDAuOTI4ODczNDQ0IDE1Ljc0ODA2OTUsMS4wNjU4Nzg0MyBDMTUuOTg3ODI4MiwxLjIwMjg4MzQxIDE2LjA3MTEyNjYsMS41MDgzMTA3NSAxNS45MzQxMjE2LDEuNzQ4MDY5NDcgTDExLjkzNDEyMTYsOC43NDgwNjk0NyBDMTEuNzkwMzk3NCw4Ljk5OTU4Njc4IDExLjQ2MzY4MjcsOS4wNzY3MTM2NiAxMS4yMjI2NDk5LDguOTE2MDI1MTUgTDUuNjkzOTE1NzksNS4yMzAyMDI0MSBMNC4xMzgyODQyNCw4LjM0MTQ2NTUxIEwxMC40NDU5NTEzLDEyLjg0Njk0MiBMMTUuMTQ2NDQ2Niw4LjE0NjQ0NjYxIEMxNS4zNDE3MDg4LDcuOTUxMTg0NDYgMTUuNjU4MjkxMiw3Ljk1MTE4NDQ2IDE1Ljg1MzU1MzQsOC4xNDY0NDY2MSBDMTYuMDQ4ODE1NSw4LjM0MTcwODc2IDE2LjA0ODgxNTUsOC42NTgyOTEyNCAxNS44NTM1NTM0LDguODUzNTUzMzkgTDEwLjg1MzU1MzQsMTMuODUzNTUzNCBDMTAuNjgwNzIyNywxNC4wMjYzODQxIDEwLjQwODI3MzMsMTQuMDQ4OTMyNyAxMC4yMDkzODA5LDEzLjkwNjg2NjcgTDMuMzM5NzY3NDcsOSBMMC41LDkgQzAuMjIzODU3NjI1LDkgMS4xMTAyMjMwMmUtMTQsOC43NzYxNDIzNyAxLjExMDIyMzAyZS0xNCw4LjUgQzEuMTEwMjIzMDJlLTE0LDguMjIzODU3NjMgMC4yMjM4NTc2MjUsOCAwLjUsOCBMMy4xOTA5ODMwMSw4IFogTTAuOTQ3MjEzNTk1LDE0LjcyMzYwNjggQzAuODIzNzE4OTcxLDE0Ljk3MDU5NiAwLjUyMzM4MjQ1MSwxNS4wNzA3MDgyIDAuMjc2MzkzMjAyLDE0Ljk0NzIxMzYgQzAuMDI5NDAzOTUzNSwxNC44MjM3MTkgLTAuMDcwNzA4MjE5OSwxNC41MjMzODI1IDAuMDUyNzg2NDA0NSwxNC4yNzYzOTMyIEwxLjgwMjc4NjQsMTAuNzc2MzkzMiBDMS45MjYyODEwMywxMC41Mjk0MDQgMi4yMjY2MTc1NSwxMC40MjkyOTE4IDIuNDczNjA2OCwxMC41NTI3ODY0IEMyLjcyMDU5NjA1LDEwLjY3NjI4MSAyLjgyMDcwODIyLDEwLjk3NjYxNzUgMi42OTcyMTM2LDExLjIyMzYwNjggTDAuOTQ3MjEzNTk1LDE0LjcyMzYwNjggWiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+'); --icon-ChartPie: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjUyODEyNzMsMTMuMjgxNjQ4NCBDMTQuMzcyNjg4LDEzLjUwOTY0OTcgMTQuMDYxOTI1OSwxMy41Njg2MjA0IDEzLjgzMzc2ODEsMTMuNDEzNDEwOSBMNy4yMTg3NjgwNyw4LjkxMzQxMDk0IEM3LjA4MTkxMjk3LDguODIwMzEyMjMgNyw4LjY2NTUxOTQ1IDcsOC41IEw3LDAuNSBDNywwLjIyMzg1NzYyNSA3LjIyMzg1NzYzLDEuOTUzOTkyNTJlLTE0IDcuNSwxLjk1Mzk5MjUyZS0xNCBDMTIuMTk0MTQyNCwxLjk1Mzk5MjUyZS0xNCAxNiwzLjgwNTg1NzYzIDE2LDguNSBDMTYsMTAuMjI4OTkzOCAxNS40ODE2NTQ5LDExLjg4Mjk5NTggMTQuNTI4MTI3MywxMy4yODE2NDg0IFogTTE1LDguNSBDMTUsNC41MjYxNTU5MyAxMS45MDg3NzY0LDEuMjczNzM0MjMgOCwxLjAxNjQwNTY0IEw4LDguMjM1NDEwODggTDEzLjk2OTUxLDEyLjI5NjMwMjEgQzE0LjYzOTUzNDIsMTEuMTU3NTgxNSAxNSw5Ljg1NTc3OTE2IDE1LDguNSBaIE0xMC42OTIxMTU2LDEzLjczMDAzNjYgQzEwLjkwOTY5NTYsMTMuNTU5OTk2NyAxMS4yMjM5MjM2LDEzLjU5ODUzNTYgMTEuMzkzOTYzNCwxMy44MTYxMTU2IEMxMS41NjQwMDMzLDE0LjAzMzY5NTYgMTEuNTI1NDY0NCwxNC4zNDc5MjM2IDExLjMwNzg4NDQsMTQuNTE3OTYzNCBDMTAuMDg2MjU5NiwxNS40NzI2NjkzIDguNTgyOTQ4NjMsMTYgNywxNiBDMy4xMzM4NTc2MywxNiA4LjQzNzY5NDk5ZS0xNCwxMi44NjYxNDI0IDguNDM3Njk0OTllLTE0LDkgQzguNDM3Njk0OTllLTE0LDUuOTQwODEwMzkgMS45ODA0ODY2OSwzLjI2MzQ4MDA1IDQuODQ2Mzc2MTUsMi4zMzgxODUyMSBDNS4xMDkxNjE0LDIuMjUzMzQxMSA1LjM5MDk3MDY4LDIuMzk3NTkwOSA1LjQ3NTgxNDc5LDIuNjYwMzc2MTUgQzUuNTYwNjU4OSwyLjkyMzE2MTQgNS40MTY0MDkxLDMuMjA0OTcwNjggNS4xNTM2MjM4NSwzLjI4OTgxNDc5IEMyLjY5Nzc1MTc3LDQuMDgyNzI5NDQgMSw2LjM3Nzg0MzI0IDEsOSBDMSwxMi4zMTM4NTc2IDMuNjg2MTQyMzcsMTUgNywxNSBDOC4zNTc3NDM0MywxNSA5LjY0NDc4MTQsMTQuNTQ4NTMzNSAxMC42OTIxMTU2LDEzLjczMDAzNjYgWiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+'); diff --git a/static/ui-icons/Charts/ChartDonut.svg b/static/ui-icons/Charts/ChartDonut.svg new file mode 100644 index 00000000..1f4c14bb --- /dev/null +++ b/static/ui-icons/Charts/ChartDonut.svg @@ -0,0 +1,56 @@ + + + + + Icons / Charts / ChartPie + Created with Sketch. + + + + + + + + + + Icons / Charts / ChartPie + + + +