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

@wix/design-system

var chartData = "[\n  {\n    label: new Date('2020-09-03T21:00:00.000Z'),\n    value: 100,\n  },\n  {\n    label: new Date('2020-09-04T21:00:00.000Z'),\n    value: 17,\n  },\n  {\n    label: new Date('2020-09-05T21:00:00.000Z'),\n    value: 18,\n  },\n]";
export var simple = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        title=\"Sessions\"\n        value=\"1,9K\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n    />");
export var sparkline = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={69}\n        title=\"Sessions\"\n        value=\"1,9K\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n    />");
export var tooltipOnTitle = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        title=\"Sessions\"\n        value=\"1,9K\"\n        titleTooltip=\"Site Sessions in your site. A session is a set of interactions made by visitors\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n    />");
export var tooltipOnValue = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        title=\"Sessions\"\n        value=\"1,9K\"\n        valueTooltip=\"1,951\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n    />");
export var loader = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        onChartHover={() => console.log('on chart hover')}\n        title=\"Sessions\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n        isLoading={true}\n        value=\"1,9K\"\n    />");
export var actionButton = "\n    <AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        ctaButton={<IconButton size=\"tiny\" priority=\"secondary\"><Icons.Refresh/></IconButton>}\n        onCTAClick={() => console.log('refresh click')}\n        onChartHover={() => console.log('on chart hover')}\n        title=\"Sessions\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n        value=\"1,9K\"\n    />");
export var trend = "\n<div>\n<div>\n<AnalyticsSummaryCard\n        chartColorHex=\"#3899ec\"\n        chartData={".concat(chartData, "}\n        chartWidth={169}\n        onChartHover={() => console.log('on chart hover')}\n        trend={12}\n        isTrendVisible={true}\n        title=\"Sessions\"\n        getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n        value=\"1,9K\"\n\n        />\n        </div>\n        <br/>\n        <br/>\n        <div>\n        <AnalyticsSummaryCard\n          chartColorHex=\"#3899ec\"\n          chartData={").concat(chartData, "}\n          chartWidth={169}\n          onChartHover={() => console.log('on chart hover')}\n          trend={-12}\n          isTrendVisible={true}\n          title=\"Sessions\"\n          getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n          value=\"1,9K\"\n\n        />\n        </div>\n        </div>\n        ");
export var footer = "\n        <AnalyticsSummaryCard\n            chartColorHex=\"#3899ec\"\n            chartData={".concat(chartData, "}\n            chartWidth={169}\n            onChartHover={() => console.log('on chart hover')}\n            title=\"Sessions\"\n            getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n            value=\"1,9K\"\n\n            footer={<div><div><Text>This is footer text </Text></div><div><Button size=\"tiny\">Click Here </Button></div></div>}\n            />");
export var clickable = "\n<div>\n<div>\n        <AnalyticsSummaryCard\n            chartColorHex=\"#3899ec\"\n            chartData={".concat(chartData, "}\n            chartWidth={169}\n            onChartHover={() => console.log('on chart hover')}\n            onClick={() => console.log('general click')}\n            title=\"Sessions\"\n            getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n            value=\"1,9K\"\n\n            />\n          </div>\n          <br/>\n          <br/>\n          <div>\n          <AnalyticsSummaryCard\n            chartColorHex=\"#3899ec\"\n            chartData={").concat(chartData, "}\n            chartWidth={169}\n            onChartHover={() => console.log('on chart hover')}\n            title=\"Sessions\"\n            getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n            value=\"1,9K\"\n\n          />\n          </div>\n          </div>\n            ");
export var ctaWithoutClickable = "\n            <AnalyticsSummaryCard\n            chartColorHex=\"#3899ec\"\n            chartData={".concat(chartData, "}\n            chartWidth={169}\n            ctaButton={<IconButton size=\"tiny\"><Icons.Refresh/></IconButton>}\n            onCTAClick={() => console.log('refresh click')}\n            onChartHover={() => console.log('on chart hover')}\n            trend={12}\n            isTrendVisible={true}\n            title=\"Sessions\"\n            getChartTooltipContent={(index) => <span style={{ color: '#ffffff' }}>{index}</span>}\n            value=\"1,9K\"\n\n            footer={<div><div><Text>This is footer text </Text></div><div><Button size=\"tiny\">Click Here </Button></div></div>}\n            />");