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

@wix/design-system

"use strict";

exports.__esModule = true;
exports.trend = exports.tooltipOnValue = exports.tooltipOnTitle = exports.sparkline = exports.simple = exports.loader = exports.footer = exports.ctaWithoutClickable = exports.clickable = exports.actionButton = void 0;
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]";
var simple = exports.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    />");
var sparkline = exports.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    />");
var tooltipOnTitle = exports.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    />");
var tooltipOnValue = exports.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    />");
var loader = exports.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    />");
var actionButton = exports.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    />");
var trend = exports.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        ");
var footer = exports.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            />");
var clickable = exports.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            ");
var ctaWithoutClickable = exports.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            />");