Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add option to hide secondary value (#2460)

Browse source
This commit is contained in:
Maurits Lourens 2022-03-09 04:05:15 +01:00 committed by GitHub
parent b921e13fbb
commit fbb33fcb15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1822,6 +1822,7 @@ export const componentTypes = [
properties: { properties: {
primaryValueLabel: { type: 'code', displayName: 'Primary value label' }, primaryValueLabel: { type: 'code', displayName: 'Primary value label' },
primaryValue: { type: 'code', displayName: 'Primary value' }, primaryValue: { type: 'code', displayName: 'Primary value' },
hideSecondary: { type: 'toggle', displayName: 'Hide secondary value' },
secondaryValueLabel: { type: 'code', displayName: 'Secondary value label' }, secondaryValueLabel: { type: 'code', displayName: 'Secondary value label' },
secondaryValue: { type: 'code', displayName: 'Secondary value' }, secondaryValue: { type: 'code', displayName: 'Secondary value' },
secondarySignDisplay: { type: 'code', displayName: 'Secondary sign display' }, secondarySignDisplay: { type: 'code', displayName: 'Secondary sign display' },