@wix/design-system/dist/esm/StatisticsWidget/docs/examples.js

@wix/design-system

export var alignItems = "<Card>\n    <StatisticsWidget\n      alignItems=\"start\"\n      items={[\n        {\n          value: '$1,700',\n          description: 'Sales',\n        },\n        {\n          value: '12,000',\n          description: 'Views',\n        },\n        {\n          value: '$9,300',\n          description: 'Revenue',\n        },\n      ]}\n    />\n  </Card>";
export var oneStatistic = "<Card>\n    <StatisticsWidget\n      items={[\n        {\n          value: '$3,500',\n          description: 'Revenue',\n          percentage: -11,\n          invertedPercentage: true,\n          descriptionInfo: 'Revenue from sales',\n        },\n      ]}\n    />\n  </Card>";
export var onlyValues = "<Card>\n    <StatisticsWidget\n      items={[\n        {\n          value: '$500',\n        },\n        {\n          value: '$1,500',\n        },\n        {\n          value: '$2,500',\n        },\n        {\n          value: '$3,500',\n        },\n      ]}\n    />\n  </Card>";
export var withChildren = "<Card>\n    <StatisticsWidget\n      items={[\n        {\n          value: '$3,500',\n          description: 'Revenue',\n          children: <div>Additional info</div>,\n        },\n      ]}\n    />\n  </Card>";
export var descriptions = "<Card>\n    <StatisticsWidget\n      items={[\n        {\n          value: '$500',\n          description: 'Sales',\n        },\n        {\n          value: '$1,500',\n        },\n        {\n          value: '$2,500',\n          description: 'Revenue',\n        },\n      ]}\n    />\n  </Card>";
export var infoIcons = "<Card>\n  <StatisticsWidget\n    items={[\n      {\n        value: '$500',\n        description: 'Revenue',\n        descriptionInfo: 'Revenue from sales',\n      },\n      {\n        value: '$1,500',\n        descriptionInfo: 'I am not visible because there is no description',\n      },\n      {\n        value: '2,500',\n        description: 'Orders',\n        descriptionInfo: 'Orders made this week',\n      },\n    ]}\n  />\n</Card>";
export var longText = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      value: '$500,000,000',\n      description: 'Revenue',\n    },\n    {\n      value: '$1,500',\n      description: 'Tuesday sales in average',\n    },\n    {\n      value: '4,200,000',\n      description: 'Number of active customers',\n    },\n  ]}\n/>\n</Card>";
export var customLongText = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      value: '$500,000,000',\n      valueInShort: '$500M',\n      description: 'Income',\n    },\n    {\n      value: '$1,500',\n      valueInShort: '1,5K',\n      description: 'Outcome',\n    },\n    {\n      value: '4,200,000',\n      valueInShort: '4,2M',\n      description: 'Number of active customers',\n      descriptionInfo: 'Customers have 10 and more order',\n    },\n  ]}\n/>\n</Card>";
export var invertedTrends = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      value: '500',\n      description: 'Customers',\n      percentage: 21,\n    },\n    {\n      value: '1,500',\n      description: 'Orders',\n      percentage: 21,\n      invertedPercentage: true,\n    },\n    {\n      value: '$2,500',\n      description: 'Outcome',\n      percentage: -11,\n    },\n    {\n      value: '$3,500',\n      description: 'Revenue',\n      percentage: -11,\n      invertedPercentage: true,\n      descriptionInfo: 'Sales on Thursday',\n    },\n    {\n      value: '0',\n      description: 'Clicks',\n      percentage: 0,\n      invertedPercentage: true,\n      descriptionInfo: 'Clicks on Friday',\n    },\n  ]}\n/>\n</Card>";
export var interactiveCard = "\n() => {\n  const [date, setDate] = React.useState('7d');\n  const [filter, setFilter] = React.useState('All');\n\n  const weekUS = [\n    {\n      value: '500',\n      description: 'Views',\n      percentage: 21,\n      onClick: () => {},\n    },\n    {\n      value: '350',\n      description: 'Uniq visits',\n      percentage: 21,\n    },\n    {\n      value: '3.9',\n      description: 'Pages per visitor',\n      percentage: -11,\n    },\n    {\n      value: '$3,500',\n      description: 'Revenue',\n      percentage: -11,\n      descriptionInfo: 'Revenue in 7 days',\n      onClick: () => {},\n    },\n    {\n      value: '0',\n      description: 'Shares',\n      percentage: 0,\n      descriptionInfo: 'Shares in 7 days',\n      onClick: () => {},\n    },\n  ];\n\n  const twoWeeksUS = [\n    {\n      value: '700',\n      description: 'Views',\n      percentage: 19,\n      onClick: () => {},\n    },\n    {\n      value: '500',\n      description: 'Uniq visits',\n      percentage: 21,\n    },\n    {\n      value: '3.2',\n      description: 'Pages per visitor',\n      percentage: -11,\n    },\n    {\n      value: '$5,700',\n      description: 'Revenue',\n      percentage: -11,\n      descriptionInfo: 'Revenue in 14 days',\n      onClick: () => {},\n    },\n    {\n      value: '0',\n      description: 'Shares',\n      percentage: 0,\n      descriptionInfo: 'Shares in 14 days',\n      onClick: () => () => {},\n    },\n  ];\n\n  const weekAll = [\n    {\n      value: '1200',\n      description: 'Views',\n      percentage: 21,\n      onClick: () => {},\n    },\n    {\n      value: '900',\n      description: 'Uniq visits',\n      percentage: 21,\n    },\n    {\n      value: '4.1',\n      description: 'Pages per visitor',\n      percentage: 2,\n    },\n    {\n      value: '$5,200',\n      description: 'Revenue',\n      percentage: 7,\n      descriptionInfo: 'Revenue in 7 days',\n      onClick: () => {},\n    },\n    {\n      value: '3',\n      description: 'Shares',\n      percentage: 100,\n      descriptionInfo: 'Shares in 7 days',\n      onClick: () => {},\n    },\n  ];\n\n  const twoWeeksAll = [\n    {\n      value: '1300',\n      description: 'Views',\n      percentage: 29,\n      onClick: () => {},\n    },\n    {\n      value: '1100',\n      description: 'Uniq visits',\n      percentage: 14,\n    },\n    {\n      value: '3.2',\n      description: 'Pages per visitor',\n      percentage: -1,\n    },\n    {\n      value: '$6,400',\n      description: 'Revenue',\n      percentage: 11,\n      descriptionInfo: 'Revenue in 14 days',\n      onClick: () => {},\n    },\n    {\n      value: '8',\n      description: 'Shares',\n      percentage: 95,\n      descriptionInfo: 'Shares in 14 days',\n      onClick: () => {},\n    },\n  ];\n\n  const data = {\n    '7d': {\n      US: weekUS,\n      All: weekAll,\n    },\n    '14d': {\n      US: twoWeeksUS,\n      All: twoWeeksAll,\n    },\n  };\n\n  const getData = (date, filter) => data[date][filter];\n\n  const getSuffix = () => [\n    <DropdownBase\n      onSelect={({ id }) => setDate(id)}\n      options={[\n        { id: '7d', value: 'Last 7 days' },\n        { id: '14d', value: 'Last 14 days' },\n      ]}\n    >\n      {({ toggle, selectedOption = { id: '7d', value: 'Last 7 days' } }) => {\n        return (\n          <TextButton\n            skin=\"dark\"\n            suffixIcon={<Icons.ChevronDown />}\n            onClick={toggle}\n          >\n            {selectedOption.value}\n          </TextButton>\n        );\n      }}\n    </DropdownBase>,\n    <DropdownBase\n      onSelect={({ id }) => setFilter(id)}\n      options={[\n        { id: 'US', value: 'Only from US' },\n        { id: 'All', value: 'All' },\n      ]}\n    >\n      {({ toggle, selectedOption = { id: 'All', value: 'All' } }) => {\n        return (\n          <TextButton\n            skin=\"dark\"\n            suffixIcon={<Icons.ChevronDown />}\n            onClick={toggle}\n          >\n            {selectedOption.value}\n          </TextButton>\n        );\n      }}\n    </DropdownBase>,\n  ];\n\n  return (\n    <Card>\n      <Card.Header title={'Article performance'} suffix={getSuffix()} />\n      <Card.Divider />\n      <Card.Content>\n        <StatisticsWidget items={getData(date, filter)} />\n      </Card.Content>\n    </Card>\n  );\n};\n";
export var tinyValues = "<Card>\n<StatisticsWidget\n  size=\"tiny\"\n  items={[\n    {\n      value: '$500',\n      description: 'Sales',\n    },\n    {\n      value: '$1,500',\n    },\n    {\n      value: '$2,500',\n      description: 'Revenue',\n    },\n  ]}\n/>\n</Card>";
export var emptyValues = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      description: 'Sales',\n    },\n    {\n      description: 'Views',\n    },\n    {\n      description: 'Revenue',\n    },\n  ]}\n/>\n</Card>";
export var loader = "<Card>\n<StatisticsWidget\n  size=\"tiny\"\n  isLoading\n  items={[\n    {\n      value: '$500',\n      description: 'Sales',\n    },\n    {\n      value: '$1,500',\n    },\n    {\n      value: '$2,500',\n      description: 'Revenue',\n    },\n  ]}\n/>\n<StatisticsWidget\n  size=\"large\"\n  isLoading\n  items={[\n    {\n      value: '$500',\n      description: 'Sales',\n    },\n    {\n      value: '$1,500',\n    },\n    {\n      value: '$2,500',\n      description: 'Revenue',\n    },\n  ]}\n/>\n</Card>";
export var card = "<Card>\n<Card.Header title={'Article performance'} />\n<Card.Divider />\n<Card.Content>\n  <StatisticsWidget\n    items={[\n      {\n        value: '500',\n        description: 'Views',\n        percentage: 21,\n        onClick: () => {},\n      },\n      {\n        value: '350',\n        description: 'Uniq visits',\n        percentage: 21,\n        invertedPercentage: true,\n      },\n      {\n        value: '3.9',\n        description: 'Pages per visitor',\n        percentage: -11,\n      },\n      {\n        value: '$3,500',\n        description: 'Revenue',\n        percentage: -11,\n        invertedPercentage: true,\n        descriptionInfo: 'Sales on Thursday',\n        onClick: () => {},\n      },\n      {\n        value: '0',\n        description: 'Shares',\n        percentage: 0,\n        invertedPercentage: true,\n        descriptionInfo: 'Clicks on Friday',\n        onClick: () => {},\n      },\n    ]}\n  />\n</Card.Content>\n</Card>";
export var onClick = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      value: '500',\n      description: 'Bookings',\n      percentage: 21,\n      onClick: () => console.log('Hello from 1st'),\n    },\n    {\n      value: '1,500',\n      description: 'Visits',\n      percentage: 21,\n      invertedPercentage: true,\n    },\n    {\n      value: '3.9',\n      percentage: -11,\n    },\n    {\n      value: '$3,500',\n      description: 'Revenue',\n      percentage: -11,\n      invertedPercentage: true,\n      descriptionInfo: 'Sales on Thursday',\n      onClick: () => console.log('Hello from 4th'),\n    },\n    {\n      value: '0',\n      description: 'Clicks',\n      percentage: 0,\n      invertedPercentage: true,\n      descriptionInfo: 'Clicks on Friday',\n      onClick: () => console.log('Hello from 5th'),\n    },\n  ]}\n/>\n</Card>";
export var trends = "<Card>\n<StatisticsWidget\n  items={[\n    {\n      value: '500',\n      description: 'Visits',\n      percentage: 21,\n    },\n    {\n      value: '1,500',\n      description: 'Orders',\n      percentage: 0,\n    },\n    {\n      value: '$2,500',\n      percentage: -11,\n    },\n  ]}\n/>\n</Card>";