chartwerk
/
grafana-chartwerk-panel
4
0
Fork 0
Code Issues 2 Pull Requests Projects Releases 1 Wiki Activity
Browse Source

more styles

merge-requests/6/head
rozetko 2 years ago
parent
5b3db23b9a
commit
c450a4150e
2 changed files with 68 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 102
      src/components/editors/IconsEditor.tsx
  2. 8
      src/components/editors/ThresholdsEditor.tsx

102
src/components/editors/IconsEditor.tsx
Unescape View File

@ -121,7 +121,6 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
}; };
const onConditionChange = (iconIdx: number, conditionIdx: number, field: keyof IconConfig, value: any) => { const onConditionChange = (iconIdx: number, conditionIdx: number, field: keyof IconConfig, value: any) => {
console.log(value);
// @ts-ignore // @ts-ignore
icons[iconIdx][field][conditionIdx] = value; icons[iconIdx][field][conditionIdx] = value;
@ -138,52 +137,63 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
{icons.map((icon, iconIdx) => { {icons.map((icon, iconIdx) => {
return ( return (
<div key={iconIdx} className={styles.icon}> <div key={iconIdx} className={styles.icon}>
<IconButton name="trash-alt" onClick={() => removeIcon(iconIdx)}></IconButton> <IconButton
<Input name="trash-alt"
type="url" onClick={() => removeIcon(iconIdx)}
placeholder="Image URL" tooltip="Delete Icon"
value={icon.url} ></IconButton>
onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)} <div className={styles.row}>
/> <Input
type="url"
placeholder="Image URL"
value={icon.url}
onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
/>
</div>
<RadioButtonGroup <RadioButtonGroup
value={icon.position} value={icon.position}
options={positionOptions} options={positionOptions}
onChange={(newVal) => onIconFieldChange(iconIdx, 'position', newVal)} onChange={(newVal) => onIconFieldChange(iconIdx, 'position', newVal)}
/> />
<Slider <div className={styles.slider}>
value={icon.size} <Slider
min={1} value={icon.size}
max={100} min={1}
step={1} max={100}
onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)} step={1}
/> onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
/>
</div>
{icon.conditions.map((condition, conditionIdx) => { {icon.conditions.map((condition, conditionIdx) => {
return ( return (
<HorizontalGroup key={conditionIdx}> <div className={styles.condition}>
<FieldNamePicker <HorizontalGroup key={conditionIdx} >
context={context} <FieldNamePicker
value={icon.metrics[conditionIdx]} context={context}
onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)} value={icon.metrics[conditionIdx]}
item={fieldNamePickerSettings} onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)}
/> item={fieldNamePickerSettings}
<RadioButtonGroup />
value={icon.conditions[conditionIdx]} <RadioButtonGroup
options={conditionOptions} value={icon.conditions[conditionIdx]}
onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)} options={conditionOptions}
/> onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)}
<Input />
placeholder="value" <Input
value={icon.values[conditionIdx]} placeholder="value"
onChange={(evt) => value={icon.values[conditionIdx]}
onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value) onChange={(evt) =>
} onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value)
/> }
<IconButton />
name="trash-alt" <IconButton
onClick={() => removeCondition(iconIdx, conditionIdx)} name="trash-alt"
></IconButton> onClick={() => removeCondition(iconIdx, conditionIdx)}
</HorizontalGroup> tooltip="Delete Condition"
></IconButton>
</HorizontalGroup>
</div>
); );
})} })}
<Button variant="secondary" onClick={() => addCondition(iconIdx)}> <Button variant="secondary" onClick={() => addCondition(iconIdx)}>
@ -206,6 +216,9 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
interface IconsEditorStyles { interface IconsEditorStyles {
icons: string; icons: string;
icon: string; icon: string;
condition: string;
slider: string;
row: string;
} }
const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => { const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
@ -221,9 +234,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
padding-bottom: ${theme.spacing.formSpacingBase * 2}px; padding-bottom: ${theme.spacing.formSpacingBase * 2}px;
&:last-child { &:last-child {
border: none;
margin-bottom: 0; margin-bottom: 0;
} }
`, `,
condition: css`
margin-bottom: ${theme.spacing.xxs};
`,
slider: css`
padding-bottom: 0;
`,
row: css`
margin-bottom: ${theme.spacing.sm};
`,
}; };
}); });

8
src/components/editors/ThresholdsEditor.tsx
Unescape View File

@ -103,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
/> />
{config.thresholds.map((threshold, thresholdIdx) => { {config.thresholds.map((threshold, thresholdIdx) => {
return ( return (
<HorizontalGroup key={thresholdIdx} className={styles.row}> <HorizontalGroup key={thresholdIdx}>
<Input <Input
type="text" type="text"
value={'Color'} value={'Color'}
@ -138,7 +138,11 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)} onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
/> />
)} )}
<IconButton name="trash-alt" onClick={() => removeThreshold(thresholdIdx)}></IconButton> <IconButton
name="trash-alt"
onClick={() => removeThreshold(thresholdIdx)}
tooltip="Delete Threshold"
></IconButton>
</HorizontalGroup> </HorizontalGroup>
); );
})} })}

Write Preview
Loading…
Cancel
Save