@widget-editor/widget-editor - npm Package Compare versions

Comparing version 2.0.45-beta.0 to 2.0.46-beta.0

lib/components/editor-options/component.js

@@ -34,3 +34,3 @@ "use strict";
 
-const JsonEditor = _react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require("../json-editor"))));
+const AdvancedEditor = _react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require("../advanced-editor"))));
 
@@ -62,2 +62,3 @@ const TableView = _react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require("../table-view"))));
   restoring,
+  advanced,
   rasterOnly,
@@ -132,7 +133,7 @@ disabledFeatures,
     isMap: isMap
-  })), !isMap && _react.default.createElement(_accordion.AccordionSection, {
+  })), !isMap && !advanced && _react.default.createElement(_accordion.AccordionSection, {
     title: "Filters"
   }, _react.default.createElement(_filter.default, {
     dataService: dataService
-  })), !isMap && _react.default.createElement(_accordion.AccordionSection, {
+  })), !isMap && !advanced && _react.default.createElement(_accordion.AccordionSection, {
     title: "Order"
@@ -149,3 +150,3 @@ }, _react.default.createElement(_orderValues.default, {
     value: limit
-  })), !isMap && !rasterOnly && _react.default.createElement(_accordion.AccordionSection, {
+  })), !isMap && !rasterOnly && !advanced && _react.default.createElement(_accordion.AccordionSection, {
     title: "Chart specific"
@@ -182,3 +183,3 @@ }, _react.default.createElement(_react.Suspense, {
     fallback: _react.default.createElement("div", null, "Loading...")
-  }, _react.default.createElement(JsonEditor, null))), disabledFeatures.indexOf("table-view") === -1 && !isMap && _react.default.createElement(_tabs.Tab, {
+  }, _react.default.createElement(AdvancedEditor, null))), disabledFeatures.indexOf("table-view") === -1 && !isMap && _react.default.createElement(_tabs.Tab, {
     label: "Table view"
@@ -185,0 +186,0 @@ }, _react.default.createElement(_react.Suspense, {

lib/components/editor-options/index.js

@@ -18,2 +18,3 @@ "use strict";
   disabledFeatures: state.editor.disabledFeatures,
+  advanced: state.editor.advanced,
   initialized: state.editor.initialized,
@@ -20,0 +21,0 @@ restoring: state.editor.restoring,

lib/sagas/editor/index.js

@@ -14,4 +14,6 @@ "use strict";
 
-var _actions2 = require("@widget-editor/shared/lib/modules/filters/actions");
+var _actions2 = require("@widget-editor/shared/lib/modules/editor/actions");
 
+var _actions3 = require("@widget-editor/shared/lib/modules/filters/actions");
+
 function* preloadData() {
@@ -58,3 +60,5 @@ const {
     const isMap = (editor === null || editor === void 0 ? void 0 : (_editor$widget = editor.widget) === null || _editor$widget === void 0 ? void 0 : (_editor$widget$attrib = _editor$widget.attributes) === null || _editor$widget$attrib === void 0 ? void 0 : (_editor$widget$attrib2 = _editor$widget$attrib.widgetConfig) === null || _editor$widget$attrib2 === void 0 ? void 0 : (_editor$widget$attrib3 = _editor$widget$attrib2.paramsConfig) === null || _editor$widget$attrib3 === void 0 ? void 0 : _editor$widget$attrib3.visualizationType) === "map";
-    const configuration = { ...widgetConfig.paramsConfig,
+    const paramsConfig = widgetConfig.hasOwnProperty("paramsConfig") ? widgetConfig.paramsConfig : null;
+    const configuration = { ...(paramsConfig ? { ...paramsConfig
+      } : {}),
       title: name,
@@ -72,3 +76,3 @@ description,
     if (configuration.orderBy || configuration.groupBy) {
-      yield (0, _effects.put)((0, _actions2.setFilters)({ ...(configuration.orderBy ? {
+      yield (0, _effects.put)((0, _actions3.setFilters)({ ...(configuration.orderBy ? {
           orderBy: configuration.orderBy
@@ -82,2 +86,9 @@ } : {}),
 
+    if (!paramsConfig) {
+      yield (0, _effects.put)((0, _actions2.setEditor)({
+        advanced: true,
+        customConfiguration: widgetConfig
+      }));
+    }
+
     yield (0, _effects.put)((0, _actions.setConfiguration)({ ...configuration,
@@ -84,0 +95,0 @@ format

lib/sagas/widget/index.js

@@ -77,8 +77,19 @@ "use strict";
   if (configuration.visualizationType !== "map") {
-    const vega = new _core.VegaService({ ...widgetConfig,
-      paramsConfig: { ...widgetConfig.paramsConfig,
-        ...configuration
-      }
-    }, widgetData, configuration, theme);
-    yield (0, _effects.put)((0, _actions2.setWidget)(vega.getChart()));
+    if (!editor.advanced) {
+      const vega = new _core.VegaService({ ...widgetConfig,
+        paramsConfig: { ...widgetConfig.paramsConfig,
+          ...configuration
+        }
+      }, widgetData, configuration, theme);
+      yield (0, _effects.put)((0, _actions2.setWidget)(vega.getChart()));
+    } else {
+      const ensureVegaProperties = {
+        autosize: {
+          type: "fit"
+        },
+        ...editor.widget.attributes.widgetConfig
+      };
+      yield (0, _effects.put)((0, _actions2.setWidget)(ensureVegaProperties));
+    }
+
     const {
@@ -117,5 +128,17 @@ widgetEditor
 
+  if (editor.initialized && !editor.widgetData) {
+    const fullState = yield (0, _effects.select)();
+    const widgetData = yield (0, _effects.call)(getWidgetData, fullState.widgetEditor);
+
+    if (widgetData) {
+      yield (0, _effects.put)((0, _actions.setEditor)({
+        widgetData: widgetData.data
+      }));
+    }
+  }
+
   if (editor.initialized && editor.widgetData && configuration.visualizationType !== "map") {
     const {
-      widgetData
+      widgetData,
+      advanced
     } = editor;
@@ -125,8 +148,19 @@ const {
     } = editor.widget.attributes;
-    const vega = new _core.VegaService({ ...widgetConfig,
-      paramsConfig: { ...widgetConfig.paramsConfig,
-        ...configuration
-      }
-    }, widgetData, configuration, theme);
-    yield (0, _effects.put)((0, _actions2.setWidget)(vega.getChart()));
+
+    if (!advanced) {
+      const vega = new _core.VegaService({ ...widgetConfig,
+        paramsConfig: { ...widgetConfig.paramsConfig,
+          ...configuration
+        }
+      }, widgetData, configuration, theme);
+      yield (0, _effects.put)((0, _actions2.setWidget)(vega.getChart()));
+    } else {
+      const ensureVegaProperties = {
+        autosize: {
+          type: "fit"
+        },
+        ...editor.widget.attributes.widgetConfig
+      };
+      yield (0, _effects.put)((0, _actions2.setWidget)(ensureVegaProperties));
+    }
   } else {
@@ -141,8 +175,19 @@ yield (0, _effects.cancel)();
   } = yield (0, _effects.select)();
+  const {
+    advanced
+  } = widgetEditor.editor;
 
   if (widgetEditor.configuration.visualizationType !== "map") {
-    const widgetData = yield (0, _effects.call)(getWidgetData, widgetEditor);
-    yield (0, _effects.put)((0, _actions.setEditor)({
-      widgetData: widgetData.data
-    }));
+    let widgetData;
+
+    if (!advanced) {
+      widgetData = yield (0, _effects.call)(getWidgetData, widgetEditor);
+    }
+
+    if (widgetData) {
+      yield (0, _effects.put)((0, _actions.setEditor)({
+        widgetData: widgetData.data
+      }));
+    }
+
     yield (0, _effects.call)(updateWidget);
@@ -149,0 +194,0 @@

lib/styles-common/form-label.js

@@ -8,10 +8,12 @@ "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const FormLabel = _styledComponents.default.label.withConfig({
   displayName: "form-label__FormLabel",
   componentId: "sc-8iknw1-0"
-})(["display:block;padding:0 0 10px 0;color:#393f44;font-weight:700;font-size:13px;"]);
+})(["display:block;padding:0 0 10px 0;", " color:#393f44;font-weight:700;font-size:13px;"], props => props.invalid && (0, _styledComponents.css)(["span{color:#ff4141;}"]));
 
@@ -18,0 +20,0 @@ var _default = FormLabel;

package.json

 {
   "name": "@widget-editor/widget-editor",
-  "version": "2.0.45-beta.0",
+  "version": "2.0.46-beta.0",
   "licence": "MIT",
@@ -16,12 +16,13 @@ "directories": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@widget-editor/core": "^2.0.45-beta.0",
-    "@widget-editor/renderer": "^2.0.45-beta.0",
-    "@widget-editor/shared": "^2.0.45-beta.0",
-    "@widget-editor/types": "^2.0.45-beta.0",
+    "@widget-editor/core": "^2.0.46-beta.0",
+    "@widget-editor/renderer": "^2.0.46-beta.0",
+    "@widget-editor/shared": "^2.0.46-beta.0",
+    "@widget-editor/types": "^2.0.46-beta.0",
     "babel-plugin-styled-components": "^1.10.6",
     "lodash": "^4.17.15",
+    "prismjs": "^1.20.0",
     "rc-slider": "^9.2.4",
-    "react-json-editor-ajrm": "^2.5.9",
     "react-resize-detector": "^4.2.1",
     "react-select": "^3.0.8",
+    "react-simple-code-editor": "^0.11.0",
     "react-slick": "^0.25.2",
@@ -76,3 +77,3 @@ "redux-devtools-extension": "^2.13.8",
   "main": "lib/index.js",
-  "gitHead": "fde1124c04e07459b770423f2478cfb72685a4bd"
+  "gitHead": "e6d92d62fc88b2f0b0c910a52faa5e1eb7f8fd40"
 }

src/components/editor-options/component.js

@@ -17,3 +17,3 @@ import React, { Suspense } from "react";
 
-const JsonEditor = React.lazy(() => import("../json-editor"));
+const AdvancedEditor = React.lazy(() => import("../advanced-editor"));
 const TableView = React.lazy(() => import("../table-view"));
@@ -78,2 +78,3 @@ const Typography = React.lazy(() => import("../typography"));
   restoring,
+  advanced,
   rasterOnly,
@@ -140,3 +141,3 @@ disabledFeatures,
             </AccordionSection>
-            {!isMap && (
+            {!isMap && !advanced && (
               <AccordionSection title="Filters">
@@ -146,3 +147,3 @@ <Filter dataService={dataService} />
             )}
-            {!isMap && (
+            {!isMap && !advanced && (
               <AccordionSection title="Order">
@@ -166,3 +167,3 @@ <OrderValues
             )}
-            {!isMap && !rasterOnly && (
+            {!isMap && !rasterOnly && !advanced && (
               <AccordionSection title="Chart specific">
@@ -221,3 +222,3 @@ <Suspense fallback={<div>Loading...</div>}>
             <Suspense fallback={<div>Loading...</div>}>
-              <JsonEditor />
+              <AdvancedEditor />
             </Suspense>
@@ -224,0 +225,0 @@ </Tab>

src/components/editor-options/index.js

@@ -9,2 +9,3 @@ import { connectState } from "@widget-editor/shared/lib/helpers/redux";
     disabledFeatures: state.editor.disabledFeatures,
+    advanced: state.editor.advanced,
     initialized: state.editor.initialized,
@@ -11,0 +12,0 @@ restoring: state.editor.restoring,

src/sagas/editor/index.js

@@ -5,2 +5,3 @@ import { takeLatest, put, select } from "redux-saga/effects";
 import { setConfiguration } from "@widget-editor/shared/lib/modules/configuration/actions";
+import { setEditor } from "@widget-editor/shared/lib/modules/editor/actions";
 
@@ -43,4 +44,8 @@ import { setFilters } from "@widget-editor/shared/lib/modules/filters/actions";
 
+    const paramsConfig = widgetConfig.hasOwnProperty("paramsConfig")
+      ? widgetConfig.paramsConfig
+      : null;
+
     const configuration = {
-      ...widgetConfig.paramsConfig,
+      ...(paramsConfig ? { ...paramsConfig } : {}),
       title: name,
@@ -65,2 +70,8 @@ description,
 
+    if (!paramsConfig) {
+      yield put(
+        setEditor({ advanced: true, customConfiguration: widgetConfig })
+      );
+    }
+
     yield put(setConfiguration({ ...configuration, format }));
@@ -67,0 +78,0 @@ }

src/sagas/widget/index.js

@@ -67,12 +67,23 @@ import { takeLatest, put, call, select, cancel } from "redux-saga/effects";
   if (configuration.visualizationType !== "map") {
-    const vega = new VegaService(
-      {
-        ...widgetConfig,
-        paramsConfig: { ...widgetConfig.paramsConfig, ...configuration },
-      },
-      widgetData,
-      configuration,
-      theme
-    );
-    yield put(setWidget(vega.getChart()));
+    if (!editor.advanced) {
+      const vega = new VegaService(
+        {
+          ...widgetConfig,
+          paramsConfig: { ...widgetConfig.paramsConfig, ...configuration },
+        },
+        widgetData,
+        configuration,
+        theme
+      );
+      yield put(setWidget(vega.getChart()));
+    } else {
+      // XXX: Some properties need to be present for vega
+      const ensureVegaProperties = {
+        autosize: {
+          type: "fit",
+        },
+        ...editor.widget.attributes.widgetConfig,
+      };
+      yield put(setWidget(ensureVegaProperties));
+    }
 
@@ -104,2 +115,9 @@ const { widgetEditor } = yield select();
   } = yield select();
+  if (editor.initialized && !editor.widgetData) {
+    const fullState = yield select();
+    const widgetData = yield call(getWidgetData, fullState.widgetEditor);
+    if (widgetData) {
+      yield put(setEditor({ widgetData: widgetData.data }));
+    }
+  }
 
@@ -111,15 +129,26 @@ if (
   ) {
-    const { widgetData } = editor;
+    const { widgetData, advanced } = editor;
     const { widgetConfig } = editor.widget.attributes;
 
-    const vega = new VegaService(
-      {
-        ...widgetConfig,
-        paramsConfig: { ...widgetConfig.paramsConfig, ...configuration },
-      },
-      widgetData,
-      configuration,
-      theme
-    );
-    yield put(setWidget(vega.getChart()));
+    if (!advanced) {
+      const vega = new VegaService(
+        {
+          ...widgetConfig,
+          paramsConfig: { ...widgetConfig.paramsConfig, ...configuration },
+        },
+        widgetData,
+        configuration,
+        theme
+      );
+      yield put(setWidget(vega.getChart()));
+    } else {
+      // XXX: Some properties need to be present for vega
+      const ensureVegaProperties = {
+        autosize: {
+          type: "fit",
+        },
+        ...editor.widget.attributes.widgetConfig,
+      };
+      yield put(setWidget(ensureVegaProperties));
+    }
   } else {
@@ -132,5 +161,14 @@ yield cancel();
   const { widgetEditor } = yield select();
+  const { advanced } = widgetEditor.editor;
+
   if (widgetEditor.configuration.visualizationType !== "map") {
-    const widgetData = yield call(getWidgetData, widgetEditor);
-    yield put(setEditor({ widgetData: widgetData.data }));
+    let widgetData;
+
+    if (!advanced) {
+      widgetData = yield call(getWidgetData, widgetEditor);
+    }
+
+    if (widgetData) {
+      yield put(setEditor({ widgetData: widgetData.data }));
+    }
     yield call(updateWidget);
@@ -137,0 +175,0 @@ if (!widgetEditor.editor.initialized) {

src/styles-common/form-label.js

@@ -1,2 +0,2 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
@@ -6,3 +6,9 @@ const FormLabel = styled.label`
   padding: 0 0 10px 0;
-
+  ${(props) =>
+    props.invalid &&
+    css`
+      span {
+        color: #ff4141;
+      }
+    `}
   color: #393f44;
@@ -9,0 +15,0 @@ font-weight: 700;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

467166

increased by6.95%

Number of package files

265

increased by2.32%

Lines of code

6998

increased by6.63%

Worsened metrics

Dependency count

26

increased by4%

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedprismjs@^1.20.0

• + Addedreact-simple-code-editor@^0.11.0

• + Addedprismjs@1.29.0(transitive)

• + Addedreact-simple-code-editor@0.11.3(transitive)

• - Removedreact-json-editor-ajrm@^2.5.9

• - Removedreact-json-editor-ajrm@2.5.14(transitive)

• Updated@widget-editor/core@^2.0.46-beta.0

• Updated@widget-editor/renderer@^2.0.46-beta.0

• Updated@widget-editor/shared@^2.0.46-beta.0

• Updated@widget-editor/types@^2.0.46-beta.0