wix-style-react/dist/es/stories/StatsWidget/ExampleStatsWidgetWithFilters.js

wix-style-react

import React from 'react';
import StatsWidget from '../../src/StatsWidget';
import styles from './ExampleStatsWidget.scss';
import { Container } from '../../src/Grid';

var statistics = [{
  title: '$10',
  subtitle: 'Revenue'
}, {
  title: '2',
  subtitle: 'Products'
}, {
  title: '1',
  subtitle: 'Transactions'
}, {
  title: '$5',
  subtitle: 'Profit'
}];

var dropdownOption = [{ id: 0, value: 'This month' }, { id: 1, value: 'This week' }];

var onFilterChange = function onFilterChange() {
  alert('hi');
};

export default (function () {
  return React.createElement(
    Container,
    null,
    React.createElement(
      'div',
      { 'data-hook': 'card-example', className: styles.statsWidgetWrapper },
      React.createElement(
        StatsWidget,
        {
          title: 'Let\'s see what\'s going on with your store',
          statistics: statistics
        },
        React.createElement(StatsWidget.FilterButton, {
          dataHook: 'StatsWidgetFilter',
          initialSelectedId: 1,
          options: dropdownOption,
          onSelect: onFilterChange
        }),
        React.createElement(StatsWidget.FilterButton, {
          dataHook: 'StatsWidgetFilter',
          initialSelectedId: 1,
          options: dropdownOption,
          onSelect: onFilterChange
        })
      )
    )
  );
});