Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Added loading state for statistics widget (#2882)

Browse source 
* added loading state in Statistics Widget

* removed unwanted uses of hooks and destructured loadingState from the properties
This commit is contained in:
Manish Kushare 2022-05-08 05:10:51 +05:30 committed by GitHub
parent e32819e57b
commit 03f400bf52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/Editor/Components/Statistics.jsx
View file

@ -1,7 +1,14 @@
import React from 'react';
export const Statistics = function Statistics({ height, properties, styles, darkMode }) {
const { primaryValueLabel, primaryValue, secondaryValueLabel, secondaryValue, secondarySignDisplay, hideSecondary } =
properties;
export const Statistics = function Statistics({ width, height, properties, styles, darkMode }) {
const {
primaryValueLabel,
primaryValue,
secondaryValueLabel,
secondaryValue,
secondarySignDisplay,
hideSecondary,
loadingState,
} = properties;
const { primaryLabelColour, primaryTextColour, secondaryLabelColour, secondaryTextColour, visibility } = styles;
const baseStyle = {
@ -64,45 +71,55 @@ export const Statistics = function Statistics({ height, properties, styles, dark
return (
<div style={baseStyle}>
<p
style={{
...letterStyle,
...marginStyle,
color: primaryLabelColour !== '#8092AB' ? primaryLabelColour : darkMode && '#FFFFFC',
}}
>
{primaryValueLabel}
</p>
<h2 style={primaryStyle}>{primaryValue}</h2>
{hideSecondary ? (
''
{loadingState === true ? (
<div style={{ width }} className="p-2">
<center>
<div className="spinner-border" role="status"></div>
</center>
</div>
) : (
<div>
<div className="d-flex flex-row justify-content-center align-items-baseline">
{secondarySignDisplay !== 'negative' ? (
<img
src="/assets/images/icons/widgets/upstatistics.svg"
style={{ ...marginStyle, marginRight: '6.5px' }}
/>
) : (
<img
src="/assets/images/icons/widgets/downstatistics.svg"
style={{ ...marginStyle, marginRight: '6.5px' }}
/>
)}
<p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
</div>
<>
<p
style={{
...letterStyle,
color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
padding: '6px 20px 12px 20px ',
marginBottom: '0px',
...marginStyle,
color: primaryLabelColour !== '#8092AB' ? primaryLabelColour : darkMode && '#FFFFFC',
}}
>
{secondaryValueLabel}
{primaryValueLabel}
</p>
</div>
<h2 style={primaryStyle}>{primaryValue}</h2>
{hideSecondary ? (
''
) : (
<div>
<div className="d-flex flex-row justify-content-center align-items-baseline">
{secondarySignDisplay !== 'negative' ? (
<img
src="/assets/images/icons/widgets/upstatistics.svg"
style={{ ...marginStyle, marginRight: '6.5px' }}
/>
) : (
<img
src="/assets/images/icons/widgets/downstatistics.svg"
style={{ ...marginStyle, marginRight: '6.5px' }}
/>
)}
<p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
</div>
<p
style={{
...letterStyle,
color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
padding: '6px 20px 12px 20px ',
marginBottom: '0px',
}}
>
{secondaryValueLabel}
</p>
</div>
)}
</>
)}
</div>
);

2
frontend/src/Editor/Components/components.js
View file

@ -1854,6 +1854,7 @@ export const componentTypes = [
secondaryValueLabel: { type: 'code', displayName: 'Secondary value label' },
secondaryValue: { type: 'code', displayName: 'Secondary value' },
secondarySignDisplay: { type: 'code', displayName: 'Secondary sign display' },
loadingState: { type: 'toggle', displayName: 'Loading State' },
},
events: {},
styles: {
@ -1874,6 +1875,7 @@ export const componentTypes = [
secondaryValueLabel: { value: 'Last month' },
secondaryValue: { value: '2.85' },
secondarySignDisplay: { value: 'positive' },
loadingState: { value: `{{false}}` },
},
events: [],
styles: {