Composant Sparkline pour les applications Stripe

Un type de graphique linéaire qui affiche les données de façon succincte sous forme d'une ligne simple.

Version du SDK

Pour ajouter le composant Sparkline à votre application :

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

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

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'}}>
    <Sparkline data={sales} x="date" y="sold" />
  </Box>
)

Propriétés de Sparkline

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.
`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.
`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'}}>
    <Sparkline data={sales} x="date" y="sold" color="product" />
  </Box>
)

Composant Sparkline pour les applications Stripe

Un type de graphique linéaire qui affiche les données de façon succincte sous forme d'une ligne simple.

Propriétés de Sparkline

Canal

Devise

UnitIdentifier

Utilisation de couleurs

Voir aussi