---
# System prepended metadata

title: Apex Persistence

---

# 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"

}

```