Spelling

README.md

@@ -87,7 +87,7 @@ You can add custom sample datasets that can be used with Charticulator.  To do s
 [
     {
         "name": "<Your dataset display name>",
-        "description": "<Your dataset desription>",
+        "description": "<Your dataset description>",
         "tables": [
             {
                 "name": "<Your dataset file name without extension>",
@@ -128,6 +128,6 @@ contact [[email protected]](mailto:[email protected]) with any additio
 # Documentation
 
 Run `yarn typedoc` to generate documentation pages.
-The page will be awailable in [`./docs/charticulator`](./docs/charticulator/index.html)
+The page will be available in [`./docs/charticulator`](./docs/charticulator/index.html)
 
 Start point of documentation is index page {@link "index"}

public/index.html

@@ -18,16 +18,16 @@
     <script src="scripts/app.bundle.js"></script>
 
     <script type="text/javascript">
-      const responce = fetch(`${CHARTICULATOR_CONFIG.WorkerURL}`).then(
-        (responce) => {
-          if (!responce.ok) {
+      const response = fetch(`${CHARTICULATOR_CONFIG.WorkerURL}`).then(
+        (response) => {
+          if (!response.ok) {
             throw Error(
               `Loading worker script from ${
                 CHARTICULATOR_CONFIG.WorkerURL
               } failed`
             );
           }
-          const script = responce.text().then((script) => {
+          const script = response.text().then((script) => {
             const blob = new Blob([script], { type: "application/javascript" });
 
             const workerScript = URL.createObjectURL(blob);

sass/components/canvas/attribute_editor.scss

@@ -1119,7 +1119,7 @@
           background: lighten($color-active, 30%);
           height: 26px;
 
-          &-attrubutes {
+          &-attributes {
             @extend .el-drag-over;
             width: auto;
           }

src/app/actions/actions.ts

@@ -174,7 +174,7 @@ export class ReplaceDataset extends Action {
   }
 }
 
-/** Invokes updaes all plot segments on the chart,  */
+/** Invokes updates all plot segments on the chart,  */
 export class UpdatePlotSegments extends Action {
   constructor() {
     super();
@@ -283,7 +283,7 @@ export class RemoveMarkFromGlyph extends Action {
 }
 
 /**
- * Dispatches when user binds table coulmns to attributes
+ * Dispatches when user binds table columns to attributes
  */
 export class MapDataToMarkAttribute extends Action {
   /**
@@ -530,7 +530,7 @@ export class MapDataToChartElementAttribute extends Action {
 
   public digest() {
     return {
-      name: "MapChartElementkAttribute",
+      name: "MapChartElementAttribute",
       chartElement: objectDigest(this.chartElement),
       attribute: this.attribute,
       attributeType: this.attributeType,

src/app/application.tsx

@@ -51,7 +51,7 @@ import { EditorType } from "./stores/app_store";
 import { LocalizationConfig } from "../container/container";
 
 export class ApplicationExtensionContext implements ExtensionContext {
-  constructor(public app: Application) {}
+  constructor(public app: Application) { }
 
   public getGlobalDispatcher(): Dispatcher<Action> {
     return this.app.appStore.dispatcher;
@@ -125,7 +125,7 @@ export class Application {
       workerScriptContent?: string;
       worker?: CharticulatorWorkerInterface;
     },
-    localizaiton: LocalizationConfig,
+    localization: LocalizationConfig,
     handlers?: {
       menuBarHandlers?: MenuBarHandlers;
       telemetry?: TelemetryRecorder;
@@ -175,7 +175,7 @@ export class Application {
       );
       const DelimiterSymbol = parseSafe(
         window.localStorage.getItem(LocalStorageKeys.DelimiterSymbol) ||
-          defaultDelimiter,
+        defaultDelimiter,
         defaultDelimiter
       );
       const GroupSymbol = parseSafe(
@@ -184,7 +184,7 @@ export class Application {
       );
       const NumberFormatRemove = parseSafe(
         window.localStorage.getItem(LocalStorageKeys.NumberFormatRemove) ||
-          defaultNumberFormat.remove,
+        defaultNumberFormat.remove,
         defaultNumberFormat.remove
       );
 
@@ -205,13 +205,13 @@ export class Application {
       });
     } catch (ex) {
       setFormatOptions({
-        currency: [localizaiton?.currency, ""] ?? defaultCurrency,
+        currency: [localization?.currency, ""] ?? defaultCurrency,
         grouping: defaultDigitsGroup,
-        decimal: localizaiton?.decemalDelimiter ?? defaultNumberFormat.decimal,
+        decimal: localization?.decimalDelimiter ?? defaultNumberFormat.decimal,
         thousands:
-          localizaiton?.thousandsDelimiter ?? defaultNumberFormat.decimal,
+          localization?.thousandsDelimiter ?? defaultNumberFormat.decimal,
       });
-      console.warn("Loadin localization settings failed");
+      console.warn("Loading localization settings failed");
     }
 
     (window as any).mainStore = this.appStore;
@@ -283,7 +283,7 @@ export class Application {
         deepClone(info.specification)
       );
 
-      // if version wasn't saved in tempalte we asume it is 2.0.3
+      // if version wasn't saved in template we assume it is 2.0.3
       if (info.template && info.template.version == undefined) {
         info.template.version = defaultVersionOfTemplate;
       }

src/app/components/colors/color_space_select.tsx

@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import { ComboBox, IComboBoxOption } from "@fluentui/react";
-import { defultComponentsHeight } from "../../views/panels/widgets/controls/fluentui_customized_components";
+import { defaultComponentsHeight } from "../../views/panels/widgets/controls/fluentui_customized_components";
 import { Color } from "../../../core";
 import {
   ColorSpaceDescription,
@@ -47,7 +47,7 @@ export class ColorSpaceSelect extends React.Component<
         }}
         styles={{
           root: {
-            ...defultComponentsHeight,
+            ...defaultComponentsHeight,
           },
           input: {
             width: "100px !important",

src/app/components/error_boundary.tsx

@@ -6,7 +6,7 @@ import { copyToClipboard } from "../utils";
 
 export enum TelemetryActionType {
   Exception = "exception",
-  ExportTemplate = "exportTempalte",
+  ExportTemplate = "exportTemplate",
 }
 
 export interface TelemetryRecorder {

src/app/components/index.ts

@@ -18,4 +18,4 @@ export * from "./gradient_picker";
 export * from "./minimizable_panel";
 export * from "./error_boundary";
 export * from "./editable_text_view";
-export * from "./messsage_box";
+export * from "./message_box";

src/app/index.tsx

@@ -20,13 +20,13 @@
  *
  * * {@link "app/backend/indexed_db"} contains class {@link IndexedDBBackend}. It wraps [IndexedDB API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) to save user charts in the browser storage.
  *
- * * {@link "app/components/index"} contains general high-level componenets for UI. Other low-level components ("bricks" of UI) are in {@link "app/views/index"} module.
+ * * {@link "app/components/index"} contains general high-level components for UI. Other low-level components ("bricks" of UI) are in {@link "app/views/index"} module.
  *
  * Charticulator has {@link WidgetManager} class for managing those components. It's "facade" over all components.
  *
  * {@link ObjectClass.getAttributePanelWidgets} method uses interface of {@link WidgetManager} to build UI for mark attributes. (See {@link "core/prototypes/marks/index"})
  *
- * * {@link "app/views/index"} module contains general views for dataset displaying, file views for open, save, create chart and different panes like attribure panel link creator, object list editor, scale editor, scale panel with used scales list.
+ * * {@link "app/views/index"} module contains general views for dataset displaying, file views for open, save, create chart and different panes like attribute panel link creator, object list editor, scale editor, scale panel with used scales list.
  *
  * * {@link "app/views/dataset/table_view"} contains view for displaying dataset as table on creating the new chart or for displaying data samples after importing data
  *

src/app/renderer/index.tsx

@@ -71,7 +71,7 @@ export function applyColorFilter(color: Color, colorFilter: ColorFilter) {
 }
 
 /**
- * Coverts {@Color} to `rgb(r,g,b)` string. Or coverts `#RRGGBB` fromat to `rgb(r,g,b)`}
+ * Coverts {@Color} to `rgb(r,g,b)` string. Or coverts `#RRGGBB` format to `rgb(r,g,b)`}
  * @param color {@Color} object or color string in HEX format (`#RRGGBB`)
  */
 export function renderColor(

src/app/stores/app_store.ts

@@ -347,7 +347,7 @@ export class AppStore extends BaseStore {
     this.chartManager?.resetDifference();
   }
 
-  // removes unused scale objecs
+  // removes unused scale objects
   private updateChartState() {
     function hasMappedProperty(
       mappings: Specification.Mappings,
@@ -2105,9 +2105,9 @@ export class AppStore extends BaseStore {
   }
 
   /**
-   * Due to undefined "value" will not saved after JSON.stringfy, need to update all undefined "values" to null
-   * deepClone uses JSON.stringfy to create copy of object. If object losses some property after copy
-   * the function expect_deep_approximately_equals gives difference for identical tempalte/chart state
+   * Due to undefined "value" will not saved after JSON.stringify, need to update all undefined "values" to null
+   * deepClone uses JSON.stringify to create copy of object. If object losses some property after copy
+   * the function expect_deep_approximately_equals gives difference for identical template/chart state
    * See {@link ChartStateManager.hasUnsavedChanges} for details
    * @param dataExpression Data expression for axis
    */

src/app/stores/migrator.ts

@@ -201,7 +201,7 @@ export class Migrator {
   }
 
   /**
-   * Adds enableTooltips, enableSelection, enableContextMenu properties with default balue true
+   * Adds enableTooltips, enableSelection, enableContextMenu properties with default value true
    * @param state current state
    */
   public addInteractivityProperties(state: AppStoreState) {

src/app/template/index.ts

@@ -1,7 +1,7 @@
 /**
- * The {@link ChartTemplateBuilder} creates tempate ({@link ChartTemplate}) from the current chart.
+ * The {@link ChartTemplateBuilder} creates template ({@link ChartTemplate}) from the current chart.
  * {@link ChartTemplate} contains simplified version of {@link Chart} object in {@link ChartTemplate.specification} property.
- * Tempate can be exported as *.tmplt file (JSON format). It also uses on export to HTML file or on export as Power BI visual.
+ * Template can be exported as *.tmplt file (JSON format). It also uses on export to HTML file or on export as Power BI visual.
  *
  * Template can be loaded into container outside of Charticulator app to visualize with custom dataset.
  *

src/app/utils/index.ts

@@ -165,7 +165,7 @@ export function stringToDataURL(mimeType: string, content: string) {
   return "data:" + mimeType + ";base64," + b64EncodeUnicode(content);
 }
 
-function checkConvertion(
+function checkConversion(
   type: DataType,
   dataSample: (string | boolean | Date | number)[]
 ) {
@@ -303,7 +303,7 @@ export function getConvertableTypes(
       return true;
     }
     if (dataSample) {
-      return checkConvertion(
+      return checkConversion(
         t,
         dataSample.map((d) => d && d.toString())
       );
@@ -356,11 +356,11 @@ export function convertColumns(
     applyConvertedValues(table, column.name, convertedValues);
     return null;
   } catch (ex) {
-    const messgae = `Converting column type from ${originColumn.type} to ${type} failed`;
-    console.warn(messgae);
+    const message = `Converting column type from ${originColumn.type} to ${type} failed`;
+    console.warn(message);
     // rollback type
     column.type = typeBeforeChange;
-    return messgae;
+    return message;
   }
 }
 
@@ -381,7 +381,7 @@ export function isInIFrame() {
   }
 }
 
-export function getAligntment(anchor: Element) {
+export function getAlignment(anchor: Element) {
   let alignX:
     | "start-outer"
     | "inner"

src/app/views/canvas/handles/input_curve.tsx

@@ -236,7 +236,7 @@ export class InputCurveHandleView extends React.Component<
                         text={strings.handles.drawSpiral}
                         onClick={() => {
                           context.close();
-                          // Make sprial and emit.
+                          // Make spiral and emit.
                           const dragContext = new HandlesDragContext();
                           const curve: Point[][] = [];
                           this.props.onDragStart(

src/app/views/canvas/snapping/session.ts

@@ -57,7 +57,7 @@ export class SnappingSession<ElementType> {
     }
   }
 
-  private giveProrityToPoint(
+  private givePriorityToPoint(
     a: SnappableGuide<ElementType>,
     b: SnappableGuide<ElementType>
   ) {
@@ -88,7 +88,7 @@ export class SnappingSession<ElementType> {
           let minXDistance: number = null;
           let minYGuide: SnappableGuide<ElementType> = null;
           let minYDistance: number = null;
-          for (const g of this.candidates.sort(this.giveProrityToPoint)) {
+          for (const g of this.candidates.sort(this.givePriorityToPoint)) {
             const guide = g.guide as Prototypes.SnappingGuides.Axis;
             if (this.findClosestSnappingGuide) {
               if (guide.type == "y") {
@@ -142,7 +142,7 @@ export class SnappingSession<ElementType> {
           let minXDistance: number = null;
           let minYGuide: SnappableGuide<ElementType> = null;
           let minYDistance: number = null;
-          for (const g of this.candidates.sort(this.giveProrityToPoint)) {
+          for (const g of this.candidates.sort(this.givePriorityToPoint)) {
             const guide = g.guide as Prototypes.SnappingGuides.Axis;
             if (this.findClosestSnappingGuide) {
               // Find closest point
@@ -280,7 +280,7 @@ export class SnappingSession<ElementType> {
             }
             if (source == "x" || source == "y") {
               for (const candidate of this.currentCandidates.sort(
-                this.giveProrityToPoint
+                this.givePriorityToPoint
               )) {
                 if (
                   (candidate.guide as Prototypes.SnappingGuides.PolarAxis)

src/app/views/dataset/data_field_binding_builder.tsx

@@ -40,7 +40,7 @@ import { AggregationFunctionDescription } from "../../../core/expression";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultBindButtonSize,
+  defaultBindButtonSize,
   FluentDataBindingMenuItem,
   FluentDataBindingMenuLabel,
 } from "../panels/widgets/controls/fluentui_customized_components";
@@ -85,7 +85,7 @@ interface Builder {
   /**
    * Add default value
    */
-  produceDefaultValue(dafaultValue: IDefaultValue): void;
+  produceDefaultValue(defaultValue: IDefaultValue): void;
 
   getMenuItems(): IContextualMenuItem[];
 
@@ -149,7 +149,7 @@ class MenuItemsCreator {
     }
   }
 
-  public setFieds(
+  public setFields(
     datasetStore: AppStore,
     table?: string,
     kinds?: Dataset.DataKind[],
@@ -736,11 +736,11 @@ export class MenuItemBuilder implements Builder {
     kinds?: Dataset.DataKind[],
     types?: Dataset.DataType[]
   ): void {
-    this.menuItemsCreator.setFieds(datasetStore, table, kinds, types);
+    this.menuItemsCreator.setFields(datasetStore, table, kinds, types);
   }
 
-  public produceDefaultValue(dafaultValue: IDefaultValue): void {
-    this.menuItemsCreator.produceDefaultValue(dafaultValue);
+  public produceDefaultValue(defaultValue: IDefaultValue): void {
+    this.menuItemsCreator.produceDefaultValue(defaultValue);
   }
 
   public buildMenu(): void {
@@ -845,12 +845,12 @@ export class Director {
                 ...(defaultStyle as any),
                 title: {
                   ...defaultStyle.title,
-                  lineHeight: defultBindButtonSize.height,
+                  lineHeight: defaultBindButtonSize.height,
                   borderWidth: "0px",
                 },
                 dropdownOptionText: {
                   boxSizing: "unset",
-                  lineHeight: defultBindButtonSize.height,
+                  lineHeight: defaultBindButtonSize.height,
                 },
                 callout: {
                   minWidth: 180,