@cdc/markup-include 4.25.10 → 4.26.1

package/src/components/Variables.tsx

@@ -1,218 +0,0 @@
-import { useMemo, useState } from 'react'
-import Conditions from './Conditions'
-import { Variable } from '../types/Variable'
-import { Condition } from '../types/Condition'
-import _ from 'lodash'
-import Icon from '@cdc/core/components/ui/Icon'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
-import Tooltip from '@cdc/core/components/ui/Tooltip'
-
-type OpenControls = [boolean[], Function] // useState type
-
-type VariableSectionProps = {
-  controls: OpenControls
-  data: Object[]
-  deleteVariable: Function
-  updateVariableArray: Function
-  variableConfig: Variable
-  variableIndex: number
-}
-
-const VariableSection: React.FC<VariableSectionProps> = ({
-  controls,
-  data,
-  deleteVariable,
-  updateVariableArray,
-  variableConfig,
-  variableIndex
-}) => {
-  const [openVariableControls, setOpenVariableControls] = controls
-  const show = openVariableControls[variableIndex]
-  const setShow = (key, value) => {
-    setOpenVariableControls({ openVariableControls, [key]: value })
-  }
-
-  const openConditionControls = useState([])
-
-  const columnNames = Object.keys(data?.[0] || {})
-  const [selectedColumn, setNewVariableColumnName] = useState(variableConfig.columnName)
-  const [conditionsList, setConditionsList] = useState(variableConfig.conditions)
-  const [variableName, setVariableName] = useState(variableConfig.name)
-  const [addCommas, setAddCommas] = useState(variableConfig.addCommas)
-
-  const conditionLookup: Record<string, string[] | number[]> = useMemo(() => {
-    return columnNames.reduce((acc, column) => {
-      acc[column] = _.uniq(data.map(row => row[column]))
-      return acc
-    }, {})
-  }, [columnNames])
-
-  const handleUpdateAddCommas = () => {
-    setAddCommas(!addCommas)
-  }
-
-  const handleVariableColumnChange = (columnName: string) => {
-    setNewVariableColumnName(columnName)
-    setConditionsList([])
-  }
-
-  const updateConditionsList = (conditionSettings: Condition, conditionIndex: number) => {
-    const { columnName, isOrIsNotEqualTo, value } = conditionSettings
-    const newConditionsList = _.cloneDeep(conditionsList)
-    newConditionsList[conditionIndex] = {
-      columnName: columnName,
-      isOrIsNotEqualTo: isOrIsNotEqualTo,
-      value: value
-    }
-    setConditionsList(newConditionsList)
-  }
-
-  const removeCondition = (conditionIndex: number) => {
-    const updatedConditionsList = _.cloneDeep(conditionsList)
-    updatedConditionsList.splice(conditionIndex, 1)
-    setConditionsList(updatedConditionsList)
-  }
-
-  const handleAddConditionClick = () => {
-    setConditionsList([
-      ...conditionsList,
-      {
-        columnName: '',
-        isOrIsNotEqualTo: 'is',
-        value: ''
-      }
-    ])
-
-    const [conditionControls, setConditionControls] = openConditionControls
-
-    const newConditionsControls = [...conditionControls]
-    newConditionsControls[conditionsList.length + 1] = true
-    setConditionControls(newConditionsControls)
-  }
-
-  const handleVariableDoneClick = () => {
-    const filteredConditionsList = conditionsList.filter(
-      condition => condition.columnName !== '' && condition.value !== ''
-    )
-    const newVariable = {
-      columnName: selectedColumn,
-      conditions: filteredConditionsList,
-      name: variableName,
-      tag: `{{${variableName}}}`,
-      addCommas
-    }
-    updateVariableArray(newVariable, variableIndex)
-    setShow(variableIndex, false)
-  }
-
-  const columnSelectDisabled = variableName === ''
-  const addConditionDisabled = columnSelectDisabled || selectedColumn === ''
-
-  return (
-    <>
-      {!show ? (
-        <>
-          <div className='mb-2'>
-            <button onClick={() => setShow(variableIndex, true)}>
-              <Icon display='caretDown' />
-            </button>
-            <span> {variableName ? `${variableName}` : 'New Variable'}</span>
-          </div>
-        </>
-      ) : (
-        <fieldset className='edit-block mb-1' key={variableIndex}>
-          <div className='d-flex justify-content-between'>
-            <button onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
-              <Icon display='caretUp' />
-            </button>
-            <button
-              className='btn btn-danger btn-sm mt-0 ms-2'
-              onClick={event => {
-                event.preventDefault()
-                deleteVariable(variableIndex)
-              }}
-            >
-              Delete
-            </button>
-          </div>
-          <label className='d-block'>
-            <span className='edit-label column-heading'>Variable Name:</span>
-            <input
-              className={`variable-${variableIndex} ms-1`}
-              type='text'
-              value={variableName}
-              onChange={e => setVariableName(e.target.value)}
-            />
-          </label>
-          <div className='pt-2'>
-            <label className='d-block'>
-              <span className='edit-label column-heading'>Column:</span>
-              <select
-                className={`variable-${variableIndex} ms-1`}
-                onChange={e => handleVariableColumnChange(e.target.value)}
-                value={selectedColumn}
-                disabled={columnSelectDisabled}
-              >
-                <option value=''>Select</option>
-                {columnNames.map(columnName => (
-                  <option key={columnName} value={columnName}>
-                    {columnName}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <div className='pt-2'>
-            <CheckBox
-              value={addCommas}
-              label='Add Commas to Number'
-              updateField={handleUpdateAddCommas}
-              tooltip={
-                <Tooltip style={{ textTransform: 'none' }}>
-                  <Tooltip.Target>
-                    <Icon
-                      display='question'
-                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                    />
-                  </Tooltip.Target>
-                  <Tooltip.Content>
-                    <p>{`Selecting this option will add commas to the numeric value.`}</p>
-                  </Tooltip.Content>
-                </Tooltip>
-              }
-            />
-          </div>
-          <label className='d-block py-2'>
-            <span className='edit-label column-heading'>Conditions:</span>
-            {conditionsList.map((condition, index) => {
-              return (
-                <div className='condition-section mt-2'>
-                  <Conditions
-                    key={variableName + '-condition-' + index}
-                    conditionControls={openConditionControls}
-                    conditionLookup={conditionLookup}
-                    conditionSettings={condition}
-                    conditionIndex={index}
-                    removeCondition={removeCondition}
-                    selectedColumn={selectedColumn}
-                    updateConditionsList={updateConditionsList}
-                  />
-                </div>
-              )
-            })}
-          </label>
-          <div className='mt-1'>
-            <button onClick={handleAddConditionClick} disabled={addConditionDisabled}>
-              Add Condition
-            </button>
-            <button className='ms-2' onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
-              Done
-            </button>
-          </div>
-        </fieldset>
-      )}
-    </>
-  )
-}
-
-export default VariableSection

package/src/components/editorPanel.style.css

@@ -1,17 +0,0 @@
-.cdc-open-viz-module.markup-include {
-  .editor-panel .condition-section :is(label) {
-    font-size: 1em;
-  }
-  :is(span).edit-label {
-    margin-bottom: 0.3em;
-    display: block;
-  }
-  .react-tooltip {
-    position: absolute;
-    width: 250px;
-  }
-  .need-data-source-prompt {
-    color: var(--gray);
-    font-size: 0.8rem;
-  }
-}

package/src/types/Config.ts

@@ -1,33 +0,0 @@
-import { Runtime } from '@cdc/core/types/Runtime'
-import { Variable } from './Variable'
-import { Version } from '@cdc/core/types/Version'
-
-export type Config = {
-  contentEditor: {
-    // Changing the base config object creates an infinite loop, nesting it is a workaround
-    inlineHTML: string
-    showHeader: boolean
-    srcUrl: string
-    title: string
-    useInlineHTML: boolean
-    showNoDataMessage: boolean
-    noDataMessageText: string
-  }
-  data?: Object[]
-  legend: {}
-  newViz?: boolean
-  runtime?: Runtime
-  theme: any
-  type: string
-  showEditorPanel?: boolean
-  visual: {
-    border: boolean
-    accent: boolean
-    background: boolean
-    hideBackgroundColor: boolean
-    borderColorTheme: boolean
-  }
-  version: Version
-  markupVariables: Variable[]
-  enableMarkupVariables: boolean
-}