woocommerce/plugins/woocommerce-admin/client/analytics/report/example.js

411 lines
9.4 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import Header from 'layout/header';
import { SummaryList, SummaryNumber } from 'components/summary';
export default class extends Component {
render() {
return (
<Fragment>
<Header
sections={ [
[ '/analytics', __( 'Analytics', 'wc-admin' ) ],
__( 'Report Title', 'wc-admin' ),
] }
/>
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
<h2>One Data Point</h2>
<SummaryList>
<SummaryNumber
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
selected
/>
</SummaryList>
<h2>Two Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
</SummaryList>
<h2>Three Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
</SummaryList>
<h2>Four Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber label={ __( 'Coupons', 'wc-admin' ) } value={ '$45.00' } />
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
</SummaryList>
<h2>Five Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
</SummaryList>
<h2>Six Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
<SummaryNumber
label={ __( 'Shipping', 'wc-admin' ) }
value={ '$75.00' }
prevValue={ '$60.00' }
delta={ 25 }
/>
</SummaryList>
<h2>Seven Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
<SummaryNumber
label={ __( 'Shipping', 'wc-admin' ) }
value={ '$75.00' }
prevValue={ '$60.00' }
delta={ 25 }
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
</SummaryList>
<h2>Eight Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
<SummaryNumber
label={ __( 'Shipping', 'wc-admin' ) }
value={ '$75.00' }
prevValue={ '$60.00' }
delta={ 25 }
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
</SummaryList>
<h2>Nine Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
label={ __( 'Refunds', 'wc-admin' ) }
value={ '$24.00' }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
prevValue={ '$26.40' }
delta={ -10 }
reverseTrend
selected
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
<SummaryNumber
label={ __( 'Shipping', 'wc-admin' ) }
value={ '$75.00' }
prevValue={ '$60.00' }
delta={ 25 }
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
</SummaryList>
<h2>Ten or More Data Points</h2>
<SummaryList>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
<SummaryNumber
label={ __( 'Refunds', 'wc-admin' ) }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
value={ '$24.00' }
prevValue={ '$26.40' }
delta={ -10 }
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
reverseTrend
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$92.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
selected
/>
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
<SummaryNumber
label={ __( 'Shipping', 'wc-admin' ) }
value={ '$75.00' }
prevValue={ '$60.00' }
delta={ 25 }
/>
<SummaryNumber
label={ __( 'Coupons', 'wc-admin' ) }
value={ '$40.00' }
prevValue={ '$40.00' }
delta={ 0 }
/>
<SummaryNumber
label={ __( 'Taxes', 'wc-admin' ) }
value={ '$84.73' }
prevValue={ '$304,803,048.30' }
delta={ -8.9 }
/>
<SummaryNumber
label={ __( 'Average Order Value', 'wc-admin' ) }
value={ '$25.00' }
prevValue={ '$30.00' }
delta={ -20 }
/>
<SummaryNumber
label={ __( 'Gross Revenue', 'wc-admin' ) }
value={ '$829.40' }
prevValue={ '$785.90' }
delta={ 5.5 }
/>
</SummaryList>
</Fragment>
);
}
}