sea-chart 0.0.1-beta

package/dist/settings/combination-settings/style-settings.js

@@ -0,0 +1,174 @@
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import Switch from '../widgets/switch';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import DisplayValuesSettings from '../widgets/display-values-settings';
+import { eventStopPropagation } from '../../utils';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
+import intl from '../../intl';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange,
+    xLabel
+  } = _ref;
+  const xAxisLabelOptions = useMemo(() => {
+    return X_LABEL_POSITIONS.map(item => {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  const yAxisLabelOptions = useMemo(() => {
+    return Y_LABEL_POSITIONS.map(item => {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  const onAxisLabelShowChange = useCallback((event, labelKey) => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const value = config[labelKey];
+    onChange && onChange({
+      [labelKey]: !value
+    });
+  }, [chart, onChange]);
+  const onAxisLabelPositionChange = useCallback((option, positionKey) => {
+    const position = option.value;
+    const {
+      config
+    } = chart;
+    const oldValue = config[positionKey];
+    if (position === oldValue) return;
+    onChange && onChange({
+      [positionKey]: position
+    });
+  }, [chart, onChange]);
+  const onToggleYAxisAutoRange = useCallback(key => {
+    const {
+      config
+    } = chart;
+    const update = {
+      [key]: config[key] === undefined ? false : !config[key]
+    };
+    onChange && onChange(update);
+  }, [chart, onChange]);
+  const onYAxisMinChange = useCallback((key, min) => {
+    const newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    const update = {
+      [key]: newMin
+    };
+    onChange && onChange(update);
+  }, [onChange]);
+  const onYAxisMaxChange = useCallback((key, max) => {
+    const newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    const update = {
+      [key]: newMax
+    };
+    onChange && onChange(update);
+  }, [onChange]);
+  const onDisplayValueChange = useCallback(update => {
+    onChange && onChange(update);
+  }, [onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    x_axis_show_label,
+    x_axis_label_position,
+    show_y_axis_left_label,
+    y_axis_left_label_position,
+    y_axis_right_label_position,
+    show_y_axis_right_label,
+    y_axis_min_left,
+    y_axis_auto_range_left,
+    y_axis_max_left,
+    y_axis_auto_range_right,
+    y_axis_min_right,
+    y_axis_max_right,
+    display_data,
+    label_font_size
+  } = config;
+  const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
+  const yLeftAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_left_label_position) || yAxisLabelOptions[0];
+  const yRightAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_right_label_position) || yAxisLabelOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
+    key: "x_axis_show_label",
+    checked: x_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    value: xAxisLabelPosition,
+    options: xAxisLabelOptions,
+    onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Y-axis(left side)')), /*#__PURE__*/React.createElement(Switch, {
+    key: "show_y_axis_left_label",
+    checked: show_y_axis_left_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: event => onAxisLabelShowChange(event, 'show_y_axis_left_label')
+  }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yLeftAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: option => onAxisLabelPositionChange(option, 'y_axis_left_label_position')
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range_left",
+    checked: y_axis_auto_range_left,
+    placeholder: intl.get('Auto_range'),
+    onChange: () => onToggleYAxisAutoRange('y_axis_auto_range_left')
+  }), !y_axis_auto_range_left && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min_left,
+    max: y_axis_max_left,
+    onMinChange: value => onYAxisMinChange('y_axis_min_left', value),
+    onMaxChange: value => onYAxisMaxChange('y_axis_max_left', value)
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Y-axis(right side)')), /*#__PURE__*/React.createElement(Switch, {
+    key: "show_y_axis_right_label",
+    checked: show_y_axis_right_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: event => onAxisLabelShowChange(event, 'show_y_axis_right_label')
+  }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yRightAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: option => onAxisLabelPositionChange(option, 'y_axis_right_label_position')
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range_right",
+    checked: y_axis_auto_range_right,
+    placeholder: intl.get('Auto_range'),
+    onChange: () => onToggleYAxisAutoRange('y_axis_auto_range_right')
+  }), !y_axis_auto_range_right && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min_right,
+    max: y_axis_max_right,
+    onMinChange: value => onYAxisMinChange('y_axis_min_right', value),
+    onMaxChange: value => onYAxisMaxChange('y_axis_max_right', value)
+  })), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+    isShowValueKey: "display_data",
+    isShowValue: display_data,
+    fontSizeKey: "label_font_size",
+    fontSize: label_font_size,
+    onChange: onDisplayValueChange
+  }));
+};
+StyleSettings.defaultProps = {
+  xLabel: 'X_axis'
+};
+export default StyleSettings;

package/dist/settings/dashboard-settings/data-settings.js

@@ -0,0 +1,179 @@
+import React, { Fragment, useCallback, useMemo } from 'react';
+import { FormGroup } from 'reactstrap';
+import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import CommonDataSettings from '../widgets/common-data-settings';
+import { ChartUtils } from '../../utils';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    tables,
+    chart,
+    onChange
+  } = _ref;
+  const summaryMethodsOptions = useMemo(() => {
+    const numberCardSummaryMethod = [BASIC_NUMBER_CARD_CALCULATION_METHOD, ...CHART_SUMMARY_CALCULATION_METHOD];
+    return numberCardSummaryMethod.map(method => {
+      return {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get(CHART_SUMMARY_SHOW[method])),
+        value: method
+      };
+    });
+  }, []);
+  const selectedTable = useMemo(() => {
+    const {
+      table_id: selectedTableId
+    } = chart.config;
+    return getTableById(tables, selectedTableId);
+  }, [chart.config, tables]);
+  const validColumns = useMemo(() => {
+    const columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
+    if (!columns || !Array.isArray(columns)) return [];
+    return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
+  }, [selectedTable]);
+  const numericColumns = useMemo(() => {
+    return validColumns.filter(column => ChartUtils.isNumericSummaryColumn(column));
+  }, [validColumns]);
+  const numericColumnOptions = useMemo(() => {
+    const options = numericColumns.map(column => {
+      return {
+        value: column,
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: "sea-chart-column-icon"
+        }, /*#__PURE__*/React.createElement("i", {
+          className: COLUMNS_ICON_CONFIG[column.type]
+        })), /*#__PURE__*/React.createElement("span", {
+          className: 'select-module select-module-name ml-0'
+        }, column.name))
+      };
+    });
+    return [{
+      value: {
+        key: 'Groupby_null'
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: 'select-module select-module-name null-option-name ml-0'
+      }, intl.get('Select_a_column')),
+      style: {
+        color: 'rgba(0, 0, 0, .25)'
+      }
+    }, ...options];
+  }, [numericColumns]);
+  const onSelectTargetValueColumn = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      target_value_column_key
+    } = config;
+    const newColumnKey = option.value.key;
+    if (target_value_column_key === newColumnKey) return;
+    onChange && onChange({
+      target_value_column_key: newColumnKey
+    });
+  }, [chart, onChange]);
+  const onSelectTotalValueColumn = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      total_value_column_key
+    } = config;
+    const newColumnKey = option.value.key;
+    if (total_value_column_key === newColumnKey) return;
+    onChange && onChange({
+      total_value_column_key: newColumnKey
+    });
+  }, [chart, onChange]);
+  const getSelectedMethodOption = useCallback((method, summaryMethodsOptions) => {
+    return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+  }, []);
+  const onSelectTargetValueColumnSummaryMethod = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      target_value_column_summary_method
+    } = config;
+    const newSummaryMethod = option.value;
+    if (target_value_column_summary_method === newSummaryMethod) return;
+    onChange && onChange({
+      target_value_column_summary_method: newSummaryMethod
+    });
+  }, [chart, onChange]);
+  const onSelectTotalValueColumnSummaryMethod = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      total_value_column_summary_method
+    } = config;
+    const newSummaryMethod = option.value;
+    if (total_value_column_summary_method === newSummaryMethod) return;
+    onChange && onChange({
+      total_value_column_summary_method: newSummaryMethod
+    });
+  }, [chart, onChange]);
+  const renderSummaryMethod = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      target_value_column_summary_method,
+      total_value_column_summary_method
+    } = config;
+    let summary_method, onSelectSummaryMethod;
+    if (option.targetColumn === 'target_value_column') {
+      summary_method = target_value_column_summary_method;
+      onSelectSummaryMethod = onSelectTargetValueColumnSummaryMethod;
+    } else {
+      summary_method = total_value_column_summary_method;
+      onSelectSummaryMethod = onSelectTotalValueColumnSummaryMethod;
+    }
+    const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dtable-plugin-stat-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedMethodOption,
+      onChange: onSelectSummaryMethod,
+      options: summaryMethodsOptions
+    }));
+  }, [chart, summaryMethodsOptions, getSelectedMethodOption, onSelectTargetValueColumnSummaryMethod, onSelectTotalValueColumnSummaryMethod]);
+  const {
+    target_value_column_key,
+    total_value_column_key
+  } = chart.config;
+  const selectedTargetValueColumnOption = numericColumnOptions.filter(option => option.value.key === target_value_column_key)[0];
+  const selectedTotalValueColumnOption = numericColumnOptions.filter(option => option.value.key === total_value_column_key)[0];
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedTargetValueColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectTargetValueColumn
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, renderSummaryMethod({
+    targetColumn: 'target_value_column'
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedTotalValueColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectTotalValueColumn
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, renderSummaryMethod({
+    targetColumn: 'total_value_column'
+  })));
+};
+export default DataSettings;

package/dist/settings/dashboard-settings/index.js

@@ -0,0 +1,2 @@
+import DashboardDataSettings from './data-settings';
+export { DashboardDataSettings };

package/dist/settings/data-settings.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { CHART_TYPE } from '../constants';
+import { BarDataSettings } from './bar-settings';
+import { AdvanceBarDataSettings } from './advance-bar-settings';
+import { TimeComparisonDataSettings } from './time-comparison-settings';
+import { PieDataSettings } from './pie-settings';
+import { TableDataSettings } from './table-settings';
+import { HorizontalDataSettings } from './horizontal-bar-settings';
+import { BasicNumberCardDataSettings } from './basic-number-card';
+import { CombinationDataSettings } from './combination-settings';
+import { DashboardDataSettings } from './dashboard-settings';
+const DataSettings = props => {
+  const {
+    chart
+  } = props;
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  switch (type) {
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.AREA:
+      {
+        return /*#__PURE__*/React.createElement(BarDataSettings, props);
+      }
+    case CHART_TYPE.COMBINATION:
+      {
+        return /*#__PURE__*/React.createElement(CombinationDataSettings, props);
+      }
+    case CHART_TYPE.HORIZONTAL_BAR:
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        return /*#__PURE__*/React.createElement(HorizontalDataSettings, props);
+      }
+    case CHART_TYPE.BAR_GROUP:
+    case CHART_TYPE.BAR_STACK:
+    case CHART_TYPE.LINE_GROUP:
+    case CHART_TYPE.AREA_GROUP:
+      {
+        return /*#__PURE__*/React.createElement(AdvanceBarDataSettings, props);
+      }
+    case CHART_TYPE.COMPARE_BAR:
+      {
+        return /*#__PURE__*/React.createElement(TimeComparisonDataSettings, props);
+      }
+    case CHART_TYPE.PIE:
+    case CHART_TYPE.RING:
+    case CHART_TYPE.TREE_MAP:
+      {
+        return /*#__PURE__*/React.createElement(PieDataSettings, props);
+      }
+    case CHART_TYPE.BASIC_NUMBER_CARD:
+      {
+        return /*#__PURE__*/React.createElement(BasicNumberCardDataSettings, props);
+      }
+    case CHART_TYPE.DASHBOARD:
+      {
+        return /*#__PURE__*/React.createElement(DashboardDataSettings, props);
+      }
+    case CHART_TYPE.TABLE:
+      {
+        return /*#__PURE__*/React.createElement(TableDataSettings, props);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default DataSettings;

package/dist/settings/horizontal-bar-settings/data-settings.js

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import { BarDataSettings } from '../bar-settings';
+import { AdvanceBarDataSettings } from '../advance-bar-settings';
+import { ChartUtils } from '../../utils';
+import { BAR_MAP_TO_HORIZONTAL_MAP, CHART_TYPE } from '../../constants/';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange: oldOnChange
+  } = _ref;
+  const onChange = useCallback(update => {
+    const {
+      config: oldConfig
+    } = chart;
+    if (update.type && update.type !== oldConfig.type) {
+      oldOnChange && oldOnChange(update);
+      return;
+    }
+    let updateConfig = {};
+    const newConfig = {
+      ...oldConfig,
+      ...update
+    };
+    Object.keys(newConfig).forEach(key => {
+      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
+        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
+      } else {
+        updateConfig[key] = newConfig[key];
+      }
+    });
+    oldOnChange && oldOnChange(updateConfig);
+  }, [chart, oldOnChange]);
+  const {
+    config,
+    id
+  } = chart;
+  const newConfig = ChartUtils.convertConfig(config);
+  const newChart = {
+    id,
+    config: newConfig
+  };
+  const {
+    type
+  } = config;
+  const BarGroupComponent = type === CHART_TYPE.HORIZONTAL_BAR ? BarDataSettings : AdvanceBarDataSettings;
+  return /*#__PURE__*/React.createElement(BarGroupComponent, {
+    xLabel: 'Vertical_axis',
+    yLabel: 'Horizontal_axis',
+    chart: newChart,
+    tables: tables,
+    onChange: onChange
+  });
+};
+export default DataSettings;

package/dist/settings/horizontal-bar-settings/index.js

@@ -0,0 +1,3 @@
+import HorizontalDataSettings from './data-settings';
+import HorizontalStyleSettings from './style-settings';
+export { HorizontalDataSettings, HorizontalStyleSettings };

package/dist/settings/horizontal-bar-settings/style-settings.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { AdvanceBarStyleSettings } from '../advance-bar-settings';
+import { BarStyleSettings } from '../bar-settings';
+import { ChartUtils } from '../../utils';
+import { BAR_MAP_TO_HORIZONTAL_MAP, CHART_TYPE } from '../../constants';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange: oldOnChange
+  } = _ref;
+  const onChange = useCallback(update => {
+    let updateConfig = {};
+    const newConfig = {
+      ...chart.config,
+      ...update
+    };
+    Object.keys(newConfig).forEach(key => {
+      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
+        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
+      } else {
+        updateConfig[key] = newConfig[key];
+      }
+    });
+    oldOnChange && oldOnChange(updateConfig);
+  }, [chart, oldOnChange]);
+  const {
+    config,
+    id
+  } = chart;
+  const newConfig = ChartUtils.convertConfig(config);
+  const newChart = {
+    id,
+    config: newConfig
+  };
+  const {
+    type
+  } = config;
+  const BarStyleComponent = type === CHART_TYPE.HORIZONTAL_BAR ? BarStyleSettings : AdvanceBarStyleSettings;
+  return /*#__PURE__*/React.createElement(BarStyleComponent, {
+    xLabel: 'Vertical_axis',
+    yLabel: 'Horizontal_axis',
+    chart: newChart,
+    onChange: onChange
+  });
+};
+export default StyleSettings;

package/dist/settings/index.css

@@ -0,0 +1,85 @@
+.sea-chart-settings {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+.sea-chart-settings .sea-chart-settings-type {
+  height: 49px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: 1px solid #e4e4e4;
+  background: #fff;
+  padding-left: 10px;
+}
+
+.sea-chart-settings .sea-chart-settings-type .sea-chart-settings-type-item {
+  text-align: center;
+  line-height: 48px;
+  height: 48px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.sea-chart-settings .sea-chart-settings-type .sea-chart-settings-type-item.selected {
+  color: #ff8000;
+  border-bottom: 2px solid #ff8000;
+}
+
+.sea-chart-settings .chart-settings-container {
+  height: calc(100% - 37px);
+  overflow-y: scroll;
+  padding: 16px 16px 150px;
+}
+
+.sea-chart-settings .statistic-add-number-columns {
+  color: #bbb;
+  line-height: 1;
+  margin-bottom: 10px;
+}
+
+.sea-chart-settings .statistic-add-number-columns:hover {
+  cursor: pointer;
+  color: #212529;
+}
+
+.sea-chart-settings .statistic-add-number-columns .dtable-icon-add-table {
+  margin-right: 5px;
+  display: inline-block;
+  transform: scale(.8);
+}
+
+.sea-chart-settings .statistic-add-number-columns .add-number-column-description {
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.sea-chart-settings .delete-numeric-summary-item-content {
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+.sea-chart-settings .delete-numeric-summary-item-content:hover {
+  cursor: pointer;
+}
+
+.sea-chart-settings .delete-numeric-summary-item-content .delete-icon {
+  font-size: 14px;
+}
+
+.sea-chart-settings .sea-chart-column-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.sea-chart-settings .sea-chart-column-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}