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

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';
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 baseStyle = {
@ -73,29 +74,36 @@ export const Statistics = function Statistics({ height, properties, styles, dark
{primaryValueLabel}
</p>
<h2 style={primaryStyle}>{primaryValue}</h2>
<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>
{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>
<p
style={{
...letterStyle,
color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
padding: '6px 20px 12px 20px ',
marginBottom: '0px',
}}
>
{secondaryValueLabel}
</p>
</div>
)}
</div>
);
};

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

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