import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables, JumpTo } from '../../.storybook/blocks';
import { Button, Grid } from '../react';
import * as stories from './chart.stories';

<Meta of={stories} />

# Chart

<JumpTo />

<Button style={{ marginBlock: '0 -1em' }} href="?path=/docs/identitet-infografikk--docs" data-variant="secondary" data-arrow>Se også Infografikk-generator</Button>

## Kode
- Bruk elementet `<mtds-chart>`
- Bruk `data-variant="column | column-stacked | bar | bar-stacked | line | area | doughnut"`
- Sett inn en tabell som inneholder:
  - Første rad med grupperings-ledetekster
  - Andre rad og utover med dataserier, hvor første kolonne er dataserie-tittel
  - **Merk:** Bruk av `thead`, `tbody` eller `th` er valgfritt - radene parses uansett
  - **React?** Du kan alternativt sende inn data som en array via `data`-prop
<Canvas of={stories.Default} />

## Stående stolpediagram
- Bruk `data-variant="column"` for stående søylediagram
- Bruk `data-variant="column-stacked"` for stablet gruppering
<Grid data-items="300"><Canvas sourceState='none' of={stories.Column} /><Canvas sourceState='none' of={stories.ColumnStacked} /></Grid>

## Liggende stolpediagram
- Bruk `data-variant="bar"` for liggende søylediagram
- Bruk `data-variant="bar-stacked"` for stablet gruppering
<Grid data-items="300"><Canvas sourceState='none' of={stories.Bar} /><Canvas sourceState='none' of={stories.BarStacked} /></Grid>

## Linjediagram
- Bruk `data-variant="line"` for linjediagram eller  `data-variant="area"` for fylt linjediagram
<Grid data-items="300"><Canvas sourceState='none' of={stories.Line} /><Canvas sourceState='none' of={stories.Area} /></Grid>

## Kakediagram
- Bruk `data-variant="pie"` eller `data-variant="doughnut"` for Kakediagram
<Grid data-items="300"><Canvas sourceState='none' of={stories.Pie} /><Canvas sourceState='none' of={stories.Doughnut} /></Grid>

## Skjule elementer
- Bruk `data-legend="false"` for å skjule legend
- Bruk `data-dots="false"` for å skjule dotter i `data-variant="line | area"`
- Bruk `data-steps="false"` for å skjule steg-tekster
- Bruk `data-labels="false"` for å skjule grupperings-lekster
<Grid data-items="300"><Canvas sourceState='none' of={stories.WithLegendDisabled} /><Canvas sourceState='none' of={stories.WithDotsDisabled} /></Grid>

<CssVariables component='chart' />

Du kan med andre ord styre hvilket dataset som har hvilken farge, ved å f.eks gjøre:

```css
/* Forskjellig farge for hver gruppe */
.my-chart {
  --mtdsc-chart-color-1: var(--mtds-color-charts-chart-c);
  --mtdsc-chart-color-2: var(--mtds-color-charts-chart-b);
  --mtdsc-chart-color-3: var(--mtds-color-charts-chart-a);
}

/* Forskjellig farge for hver verdi i samme gruppe: */
.my-chart {
  --mtdsc-chart-color-1-1: var(--mtds-color-charts-chart-c);
  --mtdsc-chart-color-1-2: var(--mtds-color-charts-chart-b);
  --mtdsc-chart-color-1-3: var(--mtds-color-charts-chart-a);
}
```