Composant BarChart pour les applications Stripe

Un diagramme en barres représente les données sous la forme d'une série de points de données en barres.

Version du SDK

Pour ajouter le composant BarChart à votre application :

import {BarChart} from '@stripe/ui-extension-sdk/ui';

Voici un aperçu du composant d’interface utilisateur BarChart :

Chargement de l'exemple...

const sales = [
  {
    date: 'Jan',
    sold: 1,
  },
  {
    date: 'Feb',
    sold: 4,
  },
  {
    date: 'Mar',
    sold: 2,
  },
  {
    date: 'Apr',
    sold: 3,
  },
];

return (
  <Box css={{width: 'fill'}}>
    <BarChart data={sales} x="date" y="sold" />
  </Box>
)

Propriétés BarChart

Propriété	Type
`data`	Obligatoire `{ [x: string]: any; }[]` Données utilisées pour générer le graphique.
`x`	Obligatoire `string \| number \| Channel` La propriété ou l’accesseur du point sur l’axe x. Types associés : Channel.
`y`	Obligatoire `string \| number \| Channel` La propriété ou l’accesseur du point sur l’axe y. Types associés : Channel.
`axis`	Facultatif `("x" \| "y" \| "both" \| "none") \| undefined` Détermine s’il faut afficher les libellés et les graduations pour chaque axe.
`color`	Facultatif `(string \| number \| Channel) \| undefined` Regroupe les données par couleur en fonction d’une propriété ou d’un accesseur. Types associés : Channel.
`grid`	Facultatif `("x" \| "y" \| "both" \| "none") \| undefined` Détermine s’il faut afficher les lignes de quadrillage pour chaque axe.
`legend`	Facultatif `boolean \| undefined` Détermine s’il faut afficher la légende (lorsque plusieurs éléments sont présents).
`tooltip`	Facultatif `boolean \| undefined` Détermine s’il faut afficher une infobulle lors du survol du graphique.
`z`	Facultatif `(string \| number \| Channel) \| undefined` Regroupe les données en fonction d’une propriété ou d’un accesseur. Types associés : Channel.

Canal

Propriété	Type
`domain`	Facultatif `any[] \| undefined`
`format`	Facultatif `((Currency \| UnitIdentifier) \| ("capitalize" \| { [x: string]: string; })) \| undefined` Types associés : Currency, UnitIdentifier.
`label`	Facultatif `string \| undefined`
`value`	Facultatif `(string \| number) \| undefined`

Devise

Propriété Type

Propriété	Type
`currency`	Obligatoire 'AED' \| 'AFN' \| 'ALL' \| 'AMD' \| 'ANG' \| 'AOA' \| 'ARS' \| 'AUD' \| 'AWG' \| 'AZN' \| 'BAM' \| 'BBD' \| 'BDT' \| 'BGN' \| 'BHD' \| 'BIF' \| 'BMD' \| 'BND' \| 'BOB' \| 'BRL' \| 'BSD' \| 'BTN' \| 'BWP' \| 'BYN' \| 'BZD' \| 'CAD' \| 'CDF' \| 'CHF' \| 'CLP' \| 'CNY' \| 'COP' \| 'CRC' \| 'CUC' \| 'CUP' \| 'CVE' \| 'CZK' \| 'DJF' \| 'DKK' \| 'DOP' \| 'DZD' \| 'EGP' \| 'ERN' \| 'ETB' \| 'EUR' \| 'FJD' \| 'FKP' \| 'GBP' \| 'GEL' \| 'GHS' \| 'GIP' \| 'GMD' \| 'GNF' \| 'GTQ' \| 'GYD' \| 'HKD' \| 'HNL' \| 'HRK' \| 'HTG' \| 'HUF' \| 'IDR' \| 'ILS' \| 'INR' \| 'IQD' \| 'IRR' \| 'ISK' \| 'JMD' \| 'JOD' \| 'JPY' \| 'KES' \| 'KGS' \| 'KHR' \| 'KMF' \| 'KPW' \| 'KRW' \| 'KWD' \| 'KYD' \| 'KZT' \| 'LAK' \| 'LBP' \| 'LKR' \| 'LRD' \| 'LSL' \| 'LYD' \| 'MAD' \| 'MDL' \| 'MGA' \| 'MKD' \| 'MMK' \| 'MNT' \| 'MOP' \| 'MRU' \| 'MUR' \| 'MVR' \| 'MWK' \| 'MXN' \| 'MYR' \| 'MZN' \| 'NAD' \| 'NGN' \| 'NIO' \| 'NOK' \| 'NPR' \| 'NZD' \| 'OMR' \| 'PAB' \| 'PEN' \| 'PGK' \| 'PHP' \| 'PKR' \| 'PLN' \| 'PYG' \| 'QAR' \| 'RON' \| 'RSD' \| 'RUB' \| 'RWF' \| 'SAR' \| 'SBD' \| 'SCR' \| 'SDG' \| 'SEK' \| 'SGD' \| 'SHP' \| 'SLL' \| 'SOS' \| 'SRD' \| 'SSP' \| 'STN' \| 'SYP' \| 'SZL' \| 'THB' \| 'TJS' \| 'TMT' \| 'TND' \| 'TOP' \| 'TRY' \| 'TTD' \| 'TWD' \| 'TZS' \| 'UAH' \| 'UGX' \| 'USD' \| 'UYU' \| 'UZS' \| 'VES' \| 'VND' \| 'VUV' \| 'WST' \| 'XAF' \| 'XCD' \| 'XOF' \| 'XPF' \| 'YER' \| 'ZAR' \| 'ZMW'

currency

Obligatoire

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'YER' | 'ZAR' | 'ZMW'

UnitIdentifier

Propriété Type

Propriété	Type
`unit`	Obligatoire `'acre' \| 'bit' \| 'byte' \| 'celsius' \| 'centimeter' \| 'day' \| 'degree' \| 'fahrenheit' \| 'fluid-ounce' \| 'foot' \| 'gallon' \| 'gigabit' \| 'gigabyte' \| 'gram' \| 'hectare' \| 'hour' \| 'inch' \| 'kilobit' \| 'kilobyte' \| 'kilogram' \| 'kilometer' \| 'liter' \| 'megabit' \| 'megabyte' \| 'meter' \| 'mile' \| 'mile-scandinavian' \| 'milliliter' \| 'millimeter' \| 'millisecond' \| 'minute' \| 'month' \| 'ounce' \| 'percent' \| 'petabyte' \| 'pound' \| 'second' \| 'stone' \| 'terabit' \| 'terabyte' \| 'week' \| 'yard' \| 'year' \|` ${‘acre’ \| ‘bit’ \| ‘byte’ \| ‘celsius’ \| ‘centimeter’ \| ‘day’ \| ‘degree’ \| ‘fahrenheit’ \| ‘fluid-ounce’ \| ‘foot’ \| ‘gallon’ \| ‘gigabit’ \| ‘gigabyte’ \| ‘gram’ \| ‘hectare’ \| ‘hour’ \| ‘inch’ \| ‘kilobit’ \| ‘kilobyte’ \| ‘kilogram’ \| ‘kilometer’ \| ‘liter’ \| ‘megabit’ \| ‘megabyte’ \| ‘meter’ \| ‘mile’ \| ‘mile-scandinavian’ \| ‘milliliter’ \| ‘millimeter’ \| ‘millisecond’ \| ‘minute’ \| ‘month’ \| ‘ounce’ \| ‘percent’ \| ‘petabyte’ \| ‘pound’ \| ‘second’ \| ‘stone’ \| ‘terabit’ \| ‘terabyte’ \| ‘week’ \| ‘yard’ \| ‘year’}-per-${‘acre’ \| ‘bit’ \| ‘byte’ \| ‘celsius’ \| ‘centimeter’ \| ‘day’ \| ‘degree’ \| ‘fahrenheit’ \| ‘fluid-ounce’ \| ‘foot’ \| ‘gallon’ \| ‘gigabit’ \| ‘gigabyte’ \| ‘gram’ \| ‘hectare’ \| ‘hour’ \| ‘inch’ \| ‘kilobit’ \| ‘kilobyte’ \| ‘kilogram’ \| ‘kilometer’ \| ‘liter’ \| ‘megabit’ \| ‘megabyte’ \| ‘meter’ \| ‘mile’ \| ‘mile-scandinavian’ \| ‘milliliter’ \| ‘millimeter’ \| ‘millisecond’ \| ‘minute’ \| ‘month’ \| ‘ounce’ \| ‘percent’ \| ‘petabyte’ \| ‘pound’ \| ‘second’ \| ‘stone’ \| ‘terabit’ \| ‘terabyte’ \| ‘week’ \| ‘yard’ \| ‘year’}``

unit

Obligatoire

'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year' | ${‘acre’ | ‘bit’ | ‘byte’ | ‘celsius’ | ‘centimeter’ | ‘day’ | ‘degree’ | ‘fahrenheit’ | ‘fluid-ounce’ | ‘foot’ | ‘gallon’ | ‘gigabit’ | ‘gigabyte’ | ‘gram’ | ‘hectare’ | ‘hour’ | ‘inch’ | ‘kilobit’ | ‘kilobyte’ | ‘kilogram’ | ‘kilometer’ | ‘liter’ | ‘megabit’ | ‘megabyte’ | ‘meter’ | ‘mile’ | ‘mile-scandinavian’ | ‘milliliter’ | ‘millimeter’ | ‘millisecond’ | ‘minute’ | ‘month’ | ‘ounce’ | ‘percent’ | ‘petabyte’ | ‘pound’ | ‘second’ | ‘stone’ | ‘terabit’ | ‘terabyte’ | ‘week’ | ‘yard’ | ‘year’}-per-${‘acre’ | ‘bit’ | ‘byte’ | ‘celsius’ | ‘centimeter’ | ‘day’ | ‘degree’ | ‘fahrenheit’ | ‘fluid-ounce’ | ‘foot’ | ‘gallon’ | ‘gigabit’ | ‘gigabyte’ | ‘gram’ | ‘hectare’ | ‘hour’ | ‘inch’ | ‘kilobit’ | ‘kilobyte’ | ‘kilogram’ | ‘kilometer’ | ‘liter’ | ‘megabit’ | ‘megabyte’ | ‘meter’ | ‘mile’ | ‘mile-scandinavian’ | ‘milliliter’ | ‘millimeter’ | ‘millisecond’ | ‘minute’ | ‘month’ | ‘ounce’ | ‘percent’ | ‘petabyte’ | ‘pound’ | ‘second’ | ‘stone’ | ‘terabit’ | ‘terabyte’ | ‘week’ | ‘yard’ | ‘year’}``

Utilisation de couleurs

Le canal color regroupe les données :

Chargement de l'exemple...

const sales = [
  {
    date: 'Jan',
    sold: 1,
    product: 'tables',
  },
  {
    date: 'Jan',
    sold: 2,
    product: 'chairs',
  },
  {
    date: 'Feb',
    sold: 4,
    product: 'tables',
  },
  {
    date: 'Feb',
    sold: 6,
    product: 'chairs',
  },
  {
    date: 'Mar',
    sold: 2,
    product: 'tables',
  },
  {
    date: 'Mar',
    sold: 4,
    product: 'chairs',
  },
  {
    date: 'Apr',
    sold: 7,
    product: 'tables',
  },
  {
    date: 'Apr',
    sold: 9,
    product: 'chairs',
  },
];

return (
  <Box css={{width: 'fill'}}>
    <BarChart data={sales} x="date" y="sold" color="product" />
  </Box>
)

Mise en forme des axes et des valeurs

Au lieu de transmettre une chaîne pour une valeur d’axe, vous pouvez ajouter une mise en forme plus détaillée en transmettant un objet qui comporte les propriétés value, label et/ou format.

Propriété Type

Propriété	Type
`value`	`string \| number` Le nom de la propriété dans l’ensemble de données. Obligatoire.
`label`	`string` Le texte à afficher pour l’axe.
`format`	`object` Mettez en forme un nombre avec l’un des codes des devises prises en charge, par exemple `{currency: 'USD'}` ou une unité prise en charge telle que `{unit: 'minute'}`. Vous pouvez également créer une unité composée avec `-per-` au milieu, telle que `{unit: 'megabyte-per-hour'}`.

value

string | number

Le nom de la propriété dans l’ensemble de données. Obligatoire.

label

string

Le texte à afficher pour l’axe.

format

object

Mettez en forme un nombre avec l’un des codes des devises prises en charge, par exemple {currency: 'USD'} ou une unité prise en charge telle que {unit: 'minute'}. Vous pouvez également créer une unité composée avec -per- au milieu, telle que {unit: 'megabyte-per-hour'}.

Chargement de l'exemple...

<Box css={{width: 'fill'}}>
  <BarChart
    data={[
      {
        date: 'January',
        sold: 10,
      },
      {
        date: 'February',
        sold: 41,
      },
      {
        date: 'March',
        sold: 22,
      },
      {
        date: 'April',
        sold: 38,
      },
    ]}
    x="date"
    y={{value: 'sold', label: 'Price', format: {currency: 'USD'}}}
  />
</Box>

Domaine

Pour définir les valeurs minimale et maximale d’un axe, utilisez la propriété domain. Par exemple, si vous souhaitez que l’axe y soit toujours de 0 à 10 (plutôt qu’il soit ajusté automatiquement en fonction des données fournies), ajoutez la propriété domain à votre configuration :

Chargement de l'exemple...

const sales = [
  {
    date: 'Jan',
    sold: 1,
  },
  {
    date: 'Feb',
    sold: 4,
  },
  {
    date: 'Mar',
    sold: 2,
  },
  {
    date: 'Apr',
    sold: 3,
  },
];

return (
  <Box css={{width: 'fill'}}>
    <BarChart
      data={sales}
      x="date"
      y={{value: 'sold', label: 'Sold', domain: [0, 10]}}
    />
  </Box>
)

Composant BarChart pour les applications Stripe

Un diagramme en barres représente les données sous la forme d'une série de points de données en barres.

Propriétés BarChart

Canal

Devise

UnitIdentifier

Utilisation de couleurs

Mise en forme des axes et des valeurs

Domaine

Voir aussi