# Apex Persistence This will serve as a place to mock up Apex charts persistence. **Steps to determining persistence:** - [x] Review legacy schema - [x] Review LivePicker/Livechart-state interface - [x] List all pieces of interface and shapes - [x] Draft of schema heirarchy - [ ] Determine endpoints (`/charts/:chartId` ?) ____ ### LivePicker Output ```typescript= export declare class ChartSelection { type: ChartType; compareSelections: CompareSelection[]; selectedInstanceIdsByMeasure: SelectedInstanceIdsIndex; presentationOptions: PresentationOptions; chartSpecificOptions: ChartSpecificOptions; } export interface SelectedInstanceIdsIndex { /** * Keys of this object are measure ids. Values are an array of dimension * instance ids for that given measure. */ [s: string]: string[]; } export declare class PresentationOptions { title?: string; axisLabels: { horizontalLabel: string | null; verticalLabel: string | null; }; showFooter: boolean; showIndicatorName: boolean; showSingleHandleTimeSlider: boolean; focalPeriodId?: string; benchmarkIds: string[]; tier1HighlightsIds: string[]; tier2HighlightsIds: string[]; colorSettings: ColorSettings; } export interface ColorSettings { option: ColorOptions; values: { [key: string]: string; }; } export declare enum ColorOptions { base = "base", category = "category", gradient = "gradient" } export declare type ChartSpecificOptions = any; export declare enum ChartType { BAR_CHART = "bar-chart", HORIZONTAL_BAR_CHART = "horizontal-bar-chart", LINE_CHART = "line-chart", GROUPED_BAR_CHART = "grouped-bar-chart", BARBELL_CHART = "barbell-chart", DONUT_CHART = "donut-chart", BUBBLE_CHART = "bubble-chart", HEATMAP_CHART = "heatmap-chart", RADAR_CHART = "radar-chart", TABLE_CHART = "table-chart", TRAFFIC_LIGHT_CHART = "traffic-light-chart", SIMPLE_MAP_CHART = "simple-map-chart", VALUE_CHART = "value-chart", BIG_TABLE = "big-table" } ``` _____ ### Livechart-State Input to inflate a chart **NOTE:** The only additional properties in livechart state include the `version` ```typescript= { chartSpecificOptions: ChartSpecificOptions {}, // typed as any presentationOptions: PresentationOptions // see type above selectedInstanceIdsByMeasureId: SelectedInstanceIdsIndex // see type above type: "big-table" version: "apex" } ``` ______ ### Legacy-State Input to inflate a chart ```typescript= version:"legacy", chartSpecificOptions:null, createdAt:"2019-08-28T21:13:23.984Z", horizontalLabel:"Nation", title:null, id:"12c936a3-71f0-440c-9a3f-6a462a76f078", isAnimated:false, isShowingIndicatorName:true, isShowingFooter:true, teamId:"5a130d852cdd400017ad73b0", timeMode:"time", trashedDate:null, type:"bar-chart", updatedAt:null, verticalLabel:"People", observationsScopes:[ { benchmarkIds: [] // What do we do with these focalLocaleId: "T:L:C<US>:ST(AK):CO(02020)" // Err? focalPeriodId: "T:P:Y(2016-2017,+1)" // Err? freeDimensionIds: ["T:L:C<US>:CO(*)"] freeGenericFilterIds: [] // DO NOT NEED freeLocaleFilterIds: ["T:L:C<US>:ST(AK):CO(02020)"] // DO NOT NEED highlightTier1Ids: [] highlightTier2Ids: [] indicatorId: "I:US.GOV.US.HHS.CDC.WONDER.MORTALITY@1.0:OPIOID_ALL" isShowingMeasureError: false measureId: "M:US.GOV.US.HHS.CDC.WONDER.MORTALITY@1.0:OPIOID_ALL(0)" optionalFixedFilterIds: [] requiredFixedGenericFilterIds: [] requiredFixedLocaleFilterIds: [] timeRangeEndId: "T:P:Y(2016-2017,+1)" timeRangeStartId: "T:P:Y(1999-2000,+1)" } ] } ``` ___ ### Mock of Outputs for Example Chart (Apex vs Legacy): [FULL SPEC HERE](https://hackmd.io/@nAtoihSeQzOUWUPu5TnMSw/SJc4fP4BB) ![](https://i.imgur.com/qzpT9W6.png) ___ ### Questions and unsolved problems #### What we need to ask Jeff and Eric: - [x] What's up with `FocalLocale`? According to Jeff this just disappears Follow up regarding comparison bar chart tooltip tied to `FocalLocale`: ![](https://i.imgur.com/wXAjtxl.png) - [x] Is `FocalePeriod` being replaced by time range? What's up with time? HALP. We need to figure out where to put this!!! - [x]`Highlights`? Highlights in the current app are tied to color. - Coloring rules from highlights are replaced with `ColorSettings` - Highlight functionality and what it will mean in APEX is TBD? - GO AWAY!!! #### What we need to account for in the future Apex World: - [x] `isShowingMeasureError` NEED TO ADD TO SCHEMA - showError boolean should this be at the measure level? - [x] `labels` (see Nadine's mock [here](https://app.zeplin.io/project/597f5cbb617a053a259cff4a/screen/5d0959b55fba835d803ee888)) - [x] `legends`(see Nadine's mock [here](https://app.zeplin.io/project/597f5cbb617a053a259cff4a/screen/5d0959b55fba835d803ee888)) - [x] `ChartSpecificOptions` (see Value Chart for an example) #### Questions Antonia has: - [x] `axisLabels` Current format: ``` axisLabels: { horizontalLabel: string | null; verticalLabel: string | null; }; ``` Previously, I know we have run into issue with wanting to save a default axis label assigned by LiveStories (ie. `livechart-state`) as the `measure.name` or `measure.label` and give the user the option to change it. We ran into an issue when wanting to revert to the default because it wasn't saved - I am thinking about chart updates we made/migrations. Do we want to change the shape of axisLabels to something along the lines of... ``` axisLabels: { defaultHorizontalLabel: boolean; defaultVerticalLabel: bolean; horizontalLabel: string | null; verticalLabel: string | null; }; ``` ______ ## Schema Mock-up Link to dbDiagram.io <iframe width="560" height="315" src='https://dbdiagram.io/embed/5d671046ced98361d6de024f'> </iframe> ------ ## POST route ### Mock Data ```typescript= { chartSpecificOptions: {}, presentationOptions: { axisLabels: {horizontalLabel: null, verticalLabel: null} benchmarkIds: [] colorSettings: { option: "category" values:{ D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):LOCATION(T:NATION@1.0:C(US)): "#E41C62", D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2011,2015)): "#EDC949", D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2012,2016)): "#B0DFE8", D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2013,2017)): "#119EB9", } } showFooter: false showIndicatorName: true showSingleHandleTimeSlider: false tier1HighlightsIds: [] tier2HighlightsIds: [] } selectedInstanceIdsByMeasureId: M:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0): Array(4) 0: "D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2013,2017))" 1: "D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):LOCATION(T:NATION@1.0:C(US))" 2: "D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2012,2016))" 3: "D:US.GOV.US.DOC.CENSUS.ACS.DP03@1.2:X10(0):TIME(T:US.GOV.US.DOC.CENSUS.ACS@2.0:5YEAR(2011,2015))" type: "line-chart" version: "apex" } ```