@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/side-panel/layer-panel/text-label-panel.tsx

@@ -0,0 +1,189 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, ReactNode} from 'react';
+import {FormattedMessage} from 'localization';
+
+import {
+  Button,
+  PanelLabel,
+  SBFlexboxItem,
+  SidePanelSection,
+  SpaceBetweenFlexbox
+} from 'components/common/styled-components';
+import {Add} from 'components/common/icons';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import LayerConfigGroupFactory, {
+  ConfigGroupCollapsibleContent,
+  ConfigGroupCollapsibleHeader
+} from './layer-config-group';
+import RangeSliderFactory from 'components/common/range-slider';
+
+import {LayerTextLabel, LAYER_TEXT_CONFIGS} from 'layers/layer-factory';
+import FieldSelectorFactory from '../../common/field-selector';
+import {Field} from 'utils/table-utils/kepler-table';
+import {RGBColor} from 'reducers';
+import ColorSelectorFactory from './color-selector';
+
+type TextLabelPanelProps = {
+  fields: Field[];
+  textLabel: LayerTextLabel[];
+  updateLayerTextLabel: (idx: number | 'all', prop: string, value: any) => void;
+  AddButton?: React.ReactNode;
+};
+
+TextLabelPanelFactory.deps = [
+  RangeSliderFactory,
+  LayerConfigGroupFactory,
+  FieldSelectorFactory,
+  ColorSelectorFactory
+];
+
+function TextLabelPanelFactory(
+  RangeSlider: ReturnType<typeof RangeSliderFactory>,
+  LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>,
+  ColorSelector: ReturnType<typeof ColorSelectorFactory>
+): React.ComponentType<TextLabelPanelProps> {
+  class TextLabelPanel extends Component<TextLabelPanelProps> {
+    static defaultProps = {
+      AddButton: props => (
+        <Button {...props} link>
+          <Add height="12px" />
+          <FormattedMessage id="panel.text.addMoreLabel" />
+        </Button>
+      )
+    };
+
+    render() {
+      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
+      const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => !!d);
+
+      return (
+        <LayerConfigGroup label={'panel.text.label'} collapsible>
+          <ConfigGroupCollapsibleHeader>
+            <FieldSelector
+              fields={fields}
+              value={currentFields as string[]}
+              onSelect={selected => updateLayerTextLabel('all', 'fields', selected)}
+              multiSelect
+            />
+          </ConfigGroupCollapsibleHeader>
+          <ConfigGroupCollapsibleContent>
+            {textLabel.map((tl, idx) => (
+              <div
+                key={`${tl.field ? tl.field.name : 'null'}-${idx}`}
+                className="side-panel-section-group"
+              >
+                <PanelLabel>
+                  <FormattedMessage id={`panel.text.${idx === 0 ? 'main' : 'secondary'}Label`} />
+                </PanelLabel>
+                <SidePanelSection>
+                  <FieldSelector
+                    fields={fields}
+                    value={(tl.field && tl.field.name) || 'placeholder.selectField'}
+                    placeholder={'placeholder.empty'}
+                    onSelect={v => updateLayerTextLabel(idx, 'field', v)}
+                    erasable
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.fontSize" />
+                  </PanelLabel>
+                  <RangeSlider
+                    {...LAYER_TEXT_CONFIGS.fontSize}
+                    value1={tl.size}
+                    isRanged={false}
+                    onChange={v => updateLayerTextLabel(idx, 'size', v[1])}
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.fontColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.color,
+                        setColor: (v: RGBColor) => updateLayerTextLabel(idx, 'color', v)
+                      }
+                    ]}
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.outlineColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.outlineColor,
+                        setColor: v => updateLayerTextLabel(idx, 'outlineColor', v)
+                      }
+                    ]}
+                  />
+                </SidePanelSection>
+                {idx === 0 && (
+                  <SidePanelSection>
+                    <SpaceBetweenFlexbox>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.textAnchor" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAnchor}
+                          selectedItems={tl.anchor}
+                          onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
+                        />
+                      </SBFlexboxItem>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.alignment" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAlignment}
+                          selectedItems={tl.alignment}
+                          onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
+                        />
+                      </SBFlexboxItem>
+                    </SpaceBetweenFlexbox>
+                  </SidePanelSection>
+                )}
+              </div>
+            ))}
+            <SidePanelSection>
+              {/* @ts-expect-error */}
+              <AddButton
+                disabled={textLabel.length >= 2}
+                onClick={() => updateLayerTextLabel(textLabel.length, '', null)}
+              />
+            </SidePanelSection>
+          </ConfigGroupCollapsibleContent>
+        </LayerConfigGroup>
+      );
+    }
+  }
+
+  // @ts-expect-error
+  return TextLabelPanel;
+}
+
+export default TextLabelPanelFactory;

package/src/components/side-panel/layer-panel/vis-config-by-field-selector.tsx

@@ -0,0 +1,187 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
+
+import {PanelLabel, PanelLabelWrapper, SidePanelSection} from 'components/common/styled-components';
+import InfoHelperFactory from 'components/common/info-helper';
+import DimensionScaleSelector from './dimension-scale-selector';
+import {camelize} from 'utils/utils';
+import FieldSelectorFactory from '../../common/field-selector';
+import {Field} from 'utils/table-utils/kepler-table';
+import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
+
+type VisConfigByFieldSelectorProps = {
+  channel: string;
+  fields: Field[];
+  id: string;
+  property: string;
+  showScale: boolean;
+  showScaleCustomizable: boolean;
+  updateField: (
+    val: readonly (string | number | boolean | object)[] | string | number | boolean | object | null
+  ) => void;
+  updateScale: (
+    val: readonly (string | number | boolean | object)[] | string | number | boolean | object | null
+  ) => void;
+  updateCustomPalette: Function;
+  scaleType?: string;
+  selectedField?: Field;
+  description?: string;
+  label?: string;
+  placeholder?: string;
+  scaleOptions: string[];
+  isLoading?: boolean;
+  fieldsAggregated?: boolean;
+  aggregator?: string;
+} & WrappedComponentProps;
+
+VisConfigByFieldSelectorFactory.deps = [
+  InfoHelperFactory,
+  FieldSelectorFactory,
+  ColorDimensionScaleSelectorFactory
+];
+
+function VisConfigByFieldSelectorFactory(
+  InfoHelper: ReturnType<typeof InfoHelperFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>,
+  ColorDimensionScaleSelector: ReturnType<typeof ColorDimensionScaleSelectorFactory>
+) {
+  class VisConfigByFieldSelector extends Component<VisConfigByFieldSelectorProps> {
+    _updateVisByField = (
+      val:
+        | readonly (string | number | boolean | object)[]
+        | string
+        | number
+        | boolean
+        | object
+        | null
+    ) => {
+      this.props.updateField(val);
+    };
+
+    _onFieldSelectorFocused = () => {
+      this.setState({fieldSelectorActive: true});
+    };
+
+    _onFieldSelectorBlur = () => {
+      this.setState({fieldSelectorActive: false});
+    };
+
+    render() {
+      const {
+        property,
+        showScale,
+        showScaleCustomizable,
+        selectedField,
+        description,
+        label,
+        intl,
+        scaleOptions = [],
+        // @ts-expect-error
+        domain,
+        // @ts-expect-error
+        range
+      } = this.props;
+
+      return (
+        <SidePanelSection>
+          <SidePanelSection>
+            <PanelLabelWrapper>
+              {/* @ts-expect-error */}
+              <PanelLabel active={this.state?.fieldSelectorActive}>
+                {(label && <FormattedMessage id={label} />) || (
+                  <FormattedMessage
+                    id="layer.propertyBasedOn"
+                    values={{
+                      property: intl.formatMessage({
+                        id: `property.${camelize(property)}`,
+                        defaultMessage: property
+                      })
+                    }}
+                  />
+                )}
+              </PanelLabel>
+              {description && (
+                <InfoHelper
+                  description={description}
+                  property={property}
+                  id={`${this.props.id}-${property}`}
+                />
+              )}
+            </PanelLabelWrapper>
+            <FieldSelector
+              fields={this.props.fields}
+              value={selectedField && selectedField.name}
+              placeholder={this.props.placeholder}
+              onSelect={this._updateVisByField}
+              erasable
+              isLoading={this.props.isLoading}
+              withAggregator={this.props.fieldsAggregated}
+              aggregator={this.props.fieldsAggregated && this.props.aggregator}
+              onFocus={this._onFieldSelectorFocused}
+              onBlur={this._onFieldSelectorBlur}
+            />
+          </SidePanelSection>
+
+          {showScale && !this.props.isLoading ? (
+            <div>
+              <DimensionScaleSelector
+                scaleType={this.props.scaleType}
+                options={scaleOptions}
+                label={`${property} scale`}
+                onSelect={this.props.updateScale}
+                disabled={scaleOptions.length < 2}
+              />
+            </div>
+          ) : null}
+
+          {showScaleCustomizable && !this.props.isLoading && (
+            <div>
+              <ColorDimensionScaleSelector
+                // @ts-expect-error
+                label={
+                  <FormattedMessage
+                    id={`scale.${camelize(`${property} scale`)}`}
+                    defaultMessage={label}
+                  />
+                }
+                // @ts-expect-error
+                scaleType={this.props.scaleType}
+                // @ts-expect-error
+                options={scaleOptions}
+                domain={domain}
+                range={range}
+                // @ts-expect-error
+                onSelect={this.props.updateScale}
+                // @ts-expect-error
+                onSetCustomPalette={this.props.updateCustomPalette}
+              />
+            </div>
+          )}
+        </SidePanelSection>
+      );
+    }
+  }
+  return injectIntl(VisConfigByFieldSelector);
+}
+
+export default VisConfigByFieldSelectorFactory;

package/src/components/side-panel/layer-panel/vis-config-slider.tsx

@@ -0,0 +1,237 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {useState, useCallback, useEffect, useRef} from 'react';
+import styled from 'styled-components';
+
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import RangeSliderFactory from 'components/common/range-slider';
+import {FormattedMessage} from 'localization';
+import KeyEvent from 'constants/keyevent';
+import {Checkbox} from 'components';
+import {clamp} from 'utils/data-utils';
+import {isInRange} from 'utils/filter-utils';
+import {Layer, LayerBaseConfig} from 'layers';
+
+type LazyInputProps = {
+  value: string | [string, string];
+  name: string;
+  onChange: (n: string | [string, string], v?: string | [string, string]) => void;
+};
+
+type CustomInputProps = {
+  value: string | [string, string];
+  isRanged: boolean;
+  onChangeCustomInput: (v: [string, string]) => void;
+};
+
+type VisConfigSliderProps = {
+  layer: Layer;
+  property: string;
+  onChange: (v: Record<string, number | string | number[] | string[]>) => void;
+  label?: string | ((c: LayerBaseConfig) => string);
+  range: [number, number];
+  step?: number;
+  isRanged: boolean;
+  disabled?: boolean;
+  inputTheme?: string;
+  allowCustomValue?: boolean;
+};
+
+const InputWrapper = styled.div`
+  display: flex;
+  line-height: 12px;
+  margin-bottom: 12px;
+`;
+
+const CustomInputWrapper = styled.div`
+  display: flex;
+`;
+
+const CustomInputLabel = styled.label`
+  color: ${props => props.theme.textColor};
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  font-size: ${props => props.theme.layerConfigGroupLabelLabelFontSize};
+  padding-right: 15px;
+
+  &:last-child {
+    position: absolute;
+    right: 0;
+    padding: 0;
+  }
+`;
+
+const RangeInput = styled.input`
+  ${props => props.theme.input};
+  font-size: ${props => props.theme.sliderInputFontSize};
+  width: 44px;
+  overflow: auto;
+  height: 20px;
+  margin-top: 5px;
+`;
+
+const LazyInput: React.FC<LazyInputProps> = ({value, onChange, name}) => {
+  const [stateValue, setValue] = useState(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setValue(value);
+  }, [value]);
+
+  const onKeyDown = useCallback(
+    e => {
+      switch (e.keyCode) {
+        case KeyEvent.DOM_VK_ENTER:
+        case KeyEvent.DOM_VK_RETURN:
+          onChange(stateValue);
+          if (inputRef !== null) {
+            // @ts-ignore
+            inputRef?.current.blur();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [onChange, stateValue]
+  );
+
+  const _onChange = useCallback(e => setValue(e.target.value), [setValue]);
+  const onBlur = useCallback(() => onChange(name, stateValue), [onChange, name, stateValue]);
+
+  return (
+    <RangeInput
+      type="number"
+      ref={inputRef}
+      value={stateValue}
+      onChange={_onChange}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      id={name}
+    />
+  );
+};
+
+const CustomInput: React.FC<CustomInputProps> = ({isRanged, value, onChangeCustomInput}) => {
+  const onChangeInput = useCallback(
+    (name, v) => {
+      if (isRanged) onChangeCustomInput(name === 'value0' ? [v, value[1]] : [value[0], v]);
+      else onChangeCustomInput(v);
+    },
+    [isRanged, value, onChangeCustomInput]
+  );
+
+  return (
+    <CustomInputWrapper>
+      {isRanged ? (
+        <InputWrapper>
+          <CustomInputLabel>
+            min
+            <LazyInput name="value0" value={value[0]} onChange={onChangeInput} />
+          </CustomInputLabel>
+          <CustomInputLabel>
+            max
+            <LazyInput name="value1" value={value[1]} onChange={onChangeInput} />
+          </CustomInputLabel>
+        </InputWrapper>
+      ) : (
+        <InputWrapper>
+          <LazyInput name="value" value={value} onChange={onChangeInput} />
+        </InputWrapper>
+      )}
+    </CustomInputWrapper>
+  );
+};
+
+VisConfigSliderFactory.deps = [RangeSliderFactory];
+
+export default function VisConfigSliderFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>) {
+  const VisConfigSlider: React.FC<VisConfigSliderProps> = ({
+    layer: {config},
+    property,
+    label,
+    range,
+    step,
+    isRanged,
+    allowCustomValue,
+    disabled,
+    onChange,
+    inputTheme
+  }) => {
+    const value = config.visConfig[property];
+    const [custom, setCustom] = useState(false || !isInRange(value, range));
+
+    const onChangeCheckbox = useCallback(() => {
+      if (custom) {
+        // we are swithcing from custom to not custom
+        // adjust value to range
+        const adjustedValue = isRanged
+          ? [clamp(range, value[0]), clamp(range, value[1])]
+          : clamp(range, value);
+        onChange({[property]: adjustedValue});
+      }
+      setCustom(!custom);
+    }, [onChange, property, isRanged, value, range, custom, setCustom]);
+
+    return (
+      <SidePanelSection disabled={Boolean(disabled)}>
+        {label ? (
+          <PanelLabel>
+            {typeof label === 'string' ? (
+              <FormattedMessage id={label} />
+            ) : typeof label === 'function' ? (
+              <FormattedMessage id={label(config)} />
+            ) : (
+              <FormattedMessage id={`property.${property}`} />
+            )}
+          </PanelLabel>
+        ) : null}
+
+        {allowCustomValue ? (
+          <InputWrapper>
+            <CustomInputLabel>custom input</CustomInputLabel>
+            <Checkbox id={`property.${property}`} checked={custom} onChange={onChangeCheckbox} />
+          </InputWrapper>
+        ) : null}
+
+        {!custom ? (
+          <RangeSlider
+            range={range}
+            value0={isRanged ? value[0] : range[0]}
+            value1={isRanged ? value[1] : value}
+            step={step}
+            isRanged={Boolean(isRanged)}
+            onChange={v => onChange({[property]: isRanged ? v : v[1]})}
+            inputTheme={inputTheme}
+            showInput
+          />
+        ) : (
+          <CustomInput
+            isRanged={isRanged}
+            value={value}
+            onChangeCustomInput={v => onChange({[property]: v})}
+          />
+        )}
+      </SidePanelSection>
+    );
+  };
+
+  return VisConfigSlider;
+}

package/src/components/side-panel/layer-panel/vis-config-switch.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import InfoHelperFactory from 'components/common/info-helper';
+import Switch from 'components/common/switch';
+import {SidePanelSection, PanelLabel} from 'components/common/styled-components';
+import {capitalizeFirstLetter} from 'utils/utils';
+import {FormattedMessage} from 'localization';
+import {Layer} from 'layers';
+
+type VisConfigSwitchProps = {
+  layer: Layer;
+  property: string;
+  onChange: (v: Record<string, boolean>) => void;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+};
+
+const StyledVisConfigSwitch = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  .vis-config-switch__title {
+    display: flex;
+  }
+`;
+
+VisConfigSwitchFactory.deps = [InfoHelperFactory];
+function VisConfigSwitchFactory(InfoHelper: ReturnType<typeof InfoHelperFactory>) {
+  const VisConfigSwitch: React.FC<VisConfigSwitchProps> = ({
+    layer: {id, config},
+    property,
+    onChange,
+    label,
+    description,
+    disabled
+  }) => (
+    <SidePanelSection disabled={Boolean(disabled)}>
+      <StyledVisConfigSwitch className="vis-config-switch">
+        <div className="vis-config-switch__title">
+          {label ? (
+            <PanelLabel>
+              {(label && <FormattedMessage id={label} />) || capitalizeFirstLetter(property)}
+            </PanelLabel>
+          ) : null}
+          {description ? (
+            <div>
+              <InfoHelper description={description} id={`${id}-${property}-description`} />
+            </div>
+          ) : null}
+        </div>
+        <div className="vis-config-switch__switch">
+          <Switch
+            type="checkbox"
+            checked={config.visConfig[property]}
+            id={`${id}-${property}-switch`}
+            onChange={() => onChange({[property]: !config.visConfig[property]})}
+          />
+        </div>
+      </StyledVisConfigSwitch>
+    </SidePanelSection>
+  );
+
+  return VisConfigSwitch;
+}
+export default VisConfigSwitchFactory;