From b6e1b04e080f3004b103520b2a4598f103b51e3c Mon Sep 17 00:00:00 2001 From: "DESKTOP-G1F3HM6\\Saranya Murugasamy" Date: Wed, 3 Apr 2019 11:04:42 +0530 Subject: [PATCH] move the sample browser changes to github javascript sample browser --- index.html | 13 +- src/accordion/ajax-stack.json | 2 +- src/accordion/ajax.html | 3 +- src/accordion/default-stack.json | 2 +- src/accordion/default.html | 4 +- src/accordion/icons-stack.json | 2 +- src/accordion/icons.html | 21 +- src/accordion/right-to-left-stack.json | 2 +- src/auto-complete/custom-filtering-stack.json | 2 +- src/auto-complete/data-binding-stack.json | 2 +- src/auto-complete/data-binding.html | 4 +- src/auto-complete/default-stack.json | 2 +- .../diacritics-filtering-stack.json | 2 +- src/auto-complete/grouping-icon-stack.json | 2 +- src/auto-complete/grouping-icon.html | 7 + src/auto-complete/highlight-stack.json | 2 +- src/auto-complete/sample.json | 14 +- src/auto-complete/template-stack.json | 2 +- src/auto-complete/template.html | 26 +- src/avatar/badge-stack.json | 2 +- src/avatar/badge.html | 6 +- src/avatar/card-stack.json | 2 +- src/avatar/default-stack.json | 2 +- src/avatar/default.html | 6 +- src/avatar/listview-stack.json | 2 +- src/avatar/listview.html | 11 +- src/avatar/types-stack.json | 2 +- src/avatar/types.html | 10 +- src/badge/accordion-stack.json | 2 +- src/badge/default-stack.json | 2 +- src/badge/default.html | 8 +- src/badge/listview-stack.json | 2 +- src/badge/notification-stack.json | 2 +- src/badge/toolbar-stack.json | 2 +- src/badge/types-stack.json | 2 +- src/button/button-group-stack.json | 2 +- src/button/button-group.html | 28 +- src/button/button-group.js | 3 +- src/button/checkbox-stack.json | 1 + src/button/checkbox.html | 73 + src/button/checkbox.js | 15 + src/button/default-stack.json | 2 +- src/button/default.html | 10 +- src/button/default.js | 2 +- src/button/dropdown-button-stack.json | 1 + src/button/dropdown-button.html | 167 + src/button/dropdown-button.js | 32 + src/button/progress-button-stack.json | 2 +- src/button/progress-button.html | 6 + src/button/radio-button-stack.json | 2 +- src/button/radio-button.html | 15 +- src/button/sample.json | 32 +- src/button/split-button-stack.json | 2 +- src/button/split-button.html | 24 +- src/button/switch-stack.json | 2 +- src/button/switch.html | 6 +- src/calendar/date-range-stack.json | 2 +- src/calendar/date-range.html | 4 +- src/calendar/default-stack.json | 2 +- src/calendar/default.html | 4 +- src/calendar/disabled-stack.json | 2 +- src/calendar/disabled.html | 4 +- src/calendar/islamic-calendar-stack.json | 1 + src/calendar/islamic-calendar.html | 6 +- src/calendar/month-picker-stack.json | 1 + src/calendar/month-picker.html | 39 + src/calendar/month-picker.js | 13 + src/calendar/multi-selection-stack.json | 2 +- src/calendar/multi-selection.html | 4 +- src/calendar/sample.json | 13 +- src/calendar/special-dates-stack.json | 2 +- src/calendar/special-dates.html | 15 +- src/card/basic-stack.json | 2 +- src/card/flip-stack.json | 2 +- src/card/horizontal-stack.json | 2 +- src/card/reveal-stack.json | 2 +- src/card/swipeable-stack.json | 2 +- src/card/tile-stack.json | 2 +- src/card/vertical-stack.json | 2 +- ...mulation-distribution-indicator-stack.json | 1 + .../accumulation-distribution-indicator.js | 5 +- src/chart/area-empty-stack.json | 1 + src/chart/area-empty.js | 2 + src/chart/area-segments-stack.json | 1 + src/chart/area-segments.js | 2 + src/chart/area-stack.json | 1 + src/chart/area.js | 2 + .../average-true-range-indicator-stack.json | 1 + src/chart/average-true-range-indicator.js | 5 +- src/chart/axes-crossing-stack.json | 1 + src/chart/axes-crossing.js | 2 + src/chart/bar-stack.json | 1 + src/chart/bar.js | 2 + src/chart/bollinger-stack.json | 1 + src/chart/bollinger.js | 5 +- src/chart/box-and-whisker-stack.json | 1 + src/chart/box-and-whisker.js | 2 + src/chart/bubble-stack.json | 1 + src/chart/bubble.js | 2 + src/chart/candle-stick-stack.json | 1 + src/chart/candle-stick.js | 6 +- src/chart/category-stack.json | 1 + src/chart/category.js | 6 +- src/chart/chart-performance-stack.json | 1 + src/chart/chart-performance.js | 2 + src/chart/column-placement-stack.json | 1 + src/chart/column-placement.js | 2 + src/chart/column-stack.json | 1 + src/chart/column.js | 2 + src/chart/cross-hair-stack.json | 1 + src/chart/cross-hair.js | 2 + src/chart/dashed-line-stack.json | 1 + src/chart/dashed-line.js | 2 + src/chart/data-label-template-stack.json | 1 + src/chart/data-label-template.js | 2 + src/chart/date-time-category-stack.json | 1 + src/chart/date-time-category.js | 2 + src/chart/date-time-stack.json | 1 + src/chart/date-time.js | 2 + src/chart/default-doughnut-stack.json | 1 + src/chart/default-doughnut.js | 73 +- src/chart/default-pie-stack.json | 1 + src/chart/default-pie.js | 7 + src/chart/donut-stack.json | 1 + src/chart/donut.js | 2 + src/chart/drill-down-pie-stack.json | 1 + src/chart/drill-down-pie.js | 2 + src/chart/empty-point-stack.json | 1 + src/chart/empty-point.js | 2 + src/chart/error-bar-stack.json | 1 + src/chart/error-bar.js | 2 + ...ential-moving-average-indicator-stack.json | 1 + .../exponential-moving-average-indicator.js | 5 +- src/chart/export-stack.json | 1 + src/chart/export.html | 2 +- src/chart/export.js | 2 + src/chart/funnel-stack.json | 1 + src/chart/funnel.js | 2 + src/chart/grouping-stack.json | 1 + src/chart/grouping.js | 2 + src/chart/hilo-open-close-stack.json | 1 + src/chart/hilo-open-close.html | 2 +- src/chart/hilo-open-close.js | 8 +- src/chart/hilo-stack.json | 1 + src/chart/hilo.js | 2 + src/chart/histogram-stack.json | 1 + src/chart/histogram.js | 2 + src/chart/indexed-axis-stack.json | 1 + src/chart/indexed-axis.js | 2 + src/chart/inversed-stack.json | 1 + src/chart/inversed.js | 2 + src/chart/large-stack.json | 1 + src/chart/lazy-loading-stack.json | 1 + src/chart/lazy-loading.js | 2 + src/chart/line-multi-color-stack.json | 1 + src/chart/line-multi-color.js | 2 + src/chart/line-segments-stack.json | 1 + src/chart/line-segments.js | 2 + src/chart/line-stack.json | 1 + src/chart/line.html | 2 +- src/chart/line.js | 2 + src/chart/local-data-stack.json | 1 + src/chart/local-data.js | 2 + src/chart/logarithmic-scale-stack.json | 1 + src/chart/logarithmic-scale.js | 2 + src/chart/marker-chart-stack.json | 1 + src/chart/marker-chart.js | 2 + src/chart/momentum-stack.json | 1 + src/chart/momentum.js | 5 +- ...onvergence-divergence-indicator-stack.json | 1 + ...verage-convergence-divergence-indicator.js | 5 +- src/chart/multi-level-label-stack.json | 1 + src/chart/multi-level-label.js | 2 + src/chart/multi-series-chart-stack.json | 1 + src/chart/multi-series-chart.js | 2 + src/chart/multiple-axis-stack.json | 1 + src/chart/multiple-axis.js | 2 + src/chart/numeric-stack.json | 1 + src/chart/numeric.js | 3 +- src/chart/pareto-stack.json | 1 + src/chart/pareto.js | 2 + src/chart/pie-annotation-stack.json | 1 + src/chart/pie-annotation.js | 6 +- src/chart/pie-empty-point-stack.json | 1 + src/chart/pie-empty-point.js | 2 + src/chart/pie-radius-stack.json | 1 + src/chart/pie-radius.js | 2 + src/chart/polar-area-stack.json | 1 + src/chart/polar-area.js | 2 + src/chart/polar-column-stack.json | 1 + src/chart/polar-column.js | 2 + src/chart/polar-line-stack.json | 1 + src/chart/polar-line.js | 2 + src/chart/polar-range-column-stack.json | 1 + src/chart/polar-range-column.js | 2 + src/chart/polar-scatter-stack.json | 1 + src/chart/polar-scatter.js | 2 + src/chart/polar-spline-stack.json | 1 + src/chart/polar-spline.js | 2 + src/chart/polar-stacking-area-stack.json | 1 + src/chart/polar-stacking-area.js | 2 + src/chart/polar-stacking-column-stack.json | 1 + src/chart/polar-stacking-column.js | 2 + src/chart/print-stack.json | 1 + src/chart/print.html | 2 +- src/chart/print.js | 2 + src/chart/pyramid-stack.json | 1 + src/chart/pyramid.js | 2 + src/chart/range-area-stack.json | 1 + src/chart/range-area.js | 2 + src/chart/range-bar-stack.json | 1 + src/chart/range-bar.js | 2 + src/chart/range-column-stack.json | 1 + src/chart/range-column.js | 2 + src/chart/range-selection-stack.json | 1 + src/chart/range-selection.js | 2 + ...lative-strength-index-indicator-stack.json | 1 + .../relative-strength-index-indicator.js | 5 +- src/chart/remote-data-stack.json | 1 + src/chart/remote-data.js | 2 + src/chart/rounded-column-stack.json | 1 + src/chart/rounded-column.html | 7 +- src/chart/rounded-column.js | 78 +- src/chart/sample.json | 226 +- src/chart/scatter-plot-stack.json | 1 + src/chart/scatter-plot.js | 2 + src/chart/selection-stack.json | 1 + src/chart/selection.js | 2 + src/chart/semi-pie-stack.json | 1 + src/chart/semi-pie.js | 2 + ...simple-moving-average-indicator-stack.json | 1 + src/chart/simple-moving-average-indicator.js | 5 +- src/chart/smart-axis-labels-stack.json | 1 + src/chart/smart-axis-labels.js | 2 + src/chart/smart-labels-stack.json | 1 + src/chart/smart-labels.js | 2 + src/chart/sorting-stack.json | 1 + src/chart/sorting.js | 2 + src/chart/spline-area-stack.json | 1 + src/chart/spline-area.js | 2 + src/chart/spline-inversed-stack.json | 1 + src/chart/spline-inversed.js | 2 + src/chart/spline-stack.json | 1 + src/chart/spline.js | 2 + src/chart/stacked-area-100-stack.json | 1 + src/chart/stacked-area-100.js | 2 + src/chart/stacked-area-stack.json | 1 + src/chart/stacked-area.js | 2 + src/chart/stacked-bar-100-stack.json | 1 + src/chart/stacked-bar-100.js | 2 + src/chart/stacked-bar-stack.json | 1 + src/chart/stacked-bar.js | 2 + src/chart/stacked-column-100-stack.json | 1 + src/chart/stacked-column-100.js | 2 + src/chart/stacked-column-stack.json | 1 + src/chart/stacked-column.js | 2 + src/chart/stacked-line -100-stack.json | 1 + src/chart/stacked-line -100.html | 33 + src/chart/stacked-line -100.js | 67 + src/chart/stacked-line-stack.json | 1 + src/chart/stacked-line.html | 33 + src/chart/stacked-line.js | 72 + src/chart/step-area-stack.json | 1 + src/chart/step-area.js | 2 + src/chart/step-line-stack.json | 1 + src/chart/step-line.js | 2 + src/chart/stochastic-stack.json | 1 + src/chart/stochastic.js | 5 +- src/chart/strip-line-recurrence-stack.json | 1 + src/chart/strip-line-recurrence.js | 2 + src/chart/strip-line-stack.json | 1 + src/chart/strip-line.js | 2 + src/chart/tornado-stack.json | 1 + src/chart/tornado.js | 2 + src/chart/trackball-stack.json | 1 + src/chart/trackball.js | 2 + src/chart/trend-lines-stack.json | 1 + src/chart/trend-lines.js | 4 +- ...ngular-moving-average-indicator-stack.json | 1 + .../triangular-moving-average-indicator.js | 5 +- src/chart/vertical-stack.json | 1 + src/chart/vertical.js | 2 + src/chart/waterfall-stack.json | 1 + src/chart/waterfall.js | 2 + src/chart/zooming-stack.json | 1 + src/chart/zooming.html | 45 +- src/chart/zooming.js | 15 +- src/chips/api-stack.json | 2 +- src/chips/default-stack.json | 2 +- src/chips/sample.json | 5 +- src/circular-gauge/annotation-stack.json | 2 +- src/circular-gauge/annotation.js | 70 +- .../apple-watch-rings-stack.json | 1 + src/circular-gauge/apple-watch-rings.html | 132 + src/circular-gauge/apple-watch-rings.js | 237 + src/circular-gauge/arc-gauge-stack.json | 2 +- src/circular-gauge/arc-gauge.js | 2 + src/circular-gauge/compass-stack.json | 2 +- src/circular-gauge/compass.html | 6 +- src/circular-gauge/compass.js | 15 +- src/circular-gauge/customization-stack.json | 2 +- src/circular-gauge/customization.html | 6 +- src/circular-gauge/customization.js | 11 +- src/circular-gauge/data-sample-stack.json | 2 +- src/circular-gauge/data-sample.html | 2 + src/circular-gauge/data-sample.js | 6 + src/circular-gauge/default-stack.json | 2 +- src/circular-gauge/default.js | 15 +- src/circular-gauge/dynamic-stack.json | 2 +- src/circular-gauge/images/image1.svg | 1 + src/circular-gauge/images/image2.svg | 1 + src/circular-gauge/images/image3.svg | 1 + src/circular-gauge/images/image4.svg | 1 + src/circular-gauge/images/image5.svg | 1 + src/circular-gauge/images/image6.svg | 1 + src/circular-gauge/images/negative.png | Bin 232 -> 232 bytes src/circular-gauge/images/positive.png | Bin 243 -> 243 bytes src/circular-gauge/labels-stack.json | 2 +- src/circular-gauge/labels.html | 5 +- src/circular-gauge/labels.js | 4 + src/circular-gauge/multiple-axis-stack.json | 2 +- src/circular-gauge/multiple-axis.html | 1 + src/circular-gauge/multiple-axis.js | 3 + src/circular-gauge/pointer-image-stack.json | 2 +- src/circular-gauge/pointer-image.js | 2 + src/circular-gauge/pointer-stack.json | 2 +- src/circular-gauge/pointer.js | 27 +- src/circular-gauge/range-stack.json | 2 +- src/circular-gauge/range.html | 6 +- src/circular-gauge/range.js | 9 +- src/circular-gauge/sample.json | 24 +- .../semi-circular-gauge-stack.json | 2 +- src/circular-gauge/semi-circular-gauge.html | 5 +- src/circular-gauge/semi-circular-gauge.js | 3 + src/circular-gauge/speedometer-stack.json | 2 +- src/circular-gauge/speedometer.html | 1 + src/circular-gauge/speedometer.js | 3 + src/circular-gauge/tooltip-stack.json | 2 +- src/circular-gauge/tooltip.html | 44 +- src/circular-gauge/tooltip.js | 2 + .../user-interaction-stack.json | 2 +- src/circular-gauge/user-interaction.html | 1 + src/circular-gauge/user-interaction.js | 3 + src/color-picker/api-stack.json | 2 +- src/color-picker/api.html | 12 +- src/color-picker/custom-stack.json | 2 +- src/color-picker/custom.html | 128 +- src/color-picker/default-stack.json | 2 +- src/color-picker/default.html | 12 +- src/color-picker/inline-stack.json | 2 +- src/color-picker/inline.html | 12 +- src/color-picker/sample.json | 8 +- src/combo-box/cascading-stack.json | 2 +- src/combo-box/custom-value-stack.json | 2 +- src/combo-box/data-binding-stack.json | 2 +- src/combo-box/data-binding.html | 4 +- src/combo-box/default-stack.json | 2 +- src/combo-box/diacritics-filtering-stack.json | 2 +- src/combo-box/filtering-stack.json | 2 +- src/combo-box/grouping-icon-stack.json | 2 +- src/combo-box/grouping-icon.html | 21 +- src/combo-box/sample.json | 16 +- src/combo-box/template-stack.json | 2 +- src/combo-box/template.html | 26 +- src/common/cldr-data/main/ar/all.json | 11811 ++++++++-------- src/common/cldr-data/main/ar/ca-islamic.json | 1003 +- src/common/cldr-data/main/de/all.json | 10365 +++++++------- src/common/cldr-data/main/en/all.json | 2 +- src/common/cldr-data/main/fr-CH/all.json | 10105 ++++++------- src/common/cldr-data/main/vi/ca-islamic.json | 985 +- src/common/cldr-data/main/zh/all.json | 9935 ++++++------- src/common/cldr-data/main/zh/ca-islamic.json | 1003 +- src/common/index.js | 47 +- src/common/plnk-template/index.css | 52 +- src/common/plnk-template/index.html | 104 +- src/common/sampleListseo.js | 2 +- src/common/sampleOrder.json | 16 +- src/context-menu/default-stack.json | 2 +- src/context-menu/default.html | 75 +- src/context-menu/default.js | 4 +- .../analytics-dashboard-stack.json | 1 + src/dashboard-layout/analytics-dashboard.html | 449 + src/dashboard-layout/analytics-dashboard.js | 314 + src/dashboard-layout/datasource.js | 84 + src/dashboard-layout/datasource.json | 43 + src/dashboard-layout/default-stack.json | 1 + src/dashboard-layout/default.html | 121 + src/dashboard-layout/default.js | 33 + .../dynamic-widget-stack.json | 1 + src/dashboard-layout/dynamic-widget.html | 167 + src/dashboard-layout/dynamic-widget.js | 392 + .../predefined-layouts-stack.json | 1 + src/dashboard-layout/predefined-layouts.html | 197 + src/dashboard-layout/predefined-layouts.js | 64 + src/dashboard-layout/properties-stack.json | 1 + src/dashboard-layout/properties.html | 275 + src/dashboard-layout/properties.js | 85 + src/dashboard-layout/sample.json | 18 + src/dashboard-layout/worldmap.json | 182 + src/datepicker/date-format-stack.json | 2 +- src/datepicker/date-format.html | 4 +- src/datepicker/date-range-stack.json | 2 +- src/datepicker/date-range.html | 4 +- src/datepicker/default-stack.json | 2 +- src/datepicker/default.html | 4 +- src/datepicker/disabled-stack.json | 2 +- src/datepicker/disabled.html | 4 +- src/datepicker/month-picker-stack.json | 1 + src/datepicker/month-picker.html | 27 + src/datepicker/month-picker.js | 8 + src/datepicker/sample.json | 13 +- src/datepicker/special-dates-stack.json | 2 +- src/datepicker/special-dates.html | 15 +- src/daterangepicker/date-format-stack.json | 2 +- src/daterangepicker/date-format.html | 4 +- src/daterangepicker/date-range-stack.json | 2 +- src/daterangepicker/date-range.html | 4 +- src/daterangepicker/day-span-stack.json | 2 +- src/daterangepicker/day-span.html | 4 +- src/daterangepicker/default-stack.json | 2 +- src/daterangepicker/default.html | 4 +- .../month-range-picker-stack.json | 1 + src/daterangepicker/month-range-picker.html | 25 + src/daterangepicker/month-range-picker.js | 8 + src/daterangepicker/presets-stack.json | 2 +- src/daterangepicker/presets.html | 4 +- src/daterangepicker/sample.json | 13 +- .../date-time-format-stack.json | 2 +- src/datetimepicker/date-time-format.html | 4 +- src/datetimepicker/date-time-range-stack.json | 2 +- src/datetimepicker/date-time-range.html | 4 +- src/datetimepicker/default-stack.json | 2 +- src/datetimepicker/default.html | 4 +- src/datetimepicker/disabled-stack.json | 2 +- src/datetimepicker/disabled.html | 4 +- src/datetimepicker/sample.json | 10 +- src/datetimepicker/special-dates-stack.json | 2 +- src/datetimepicker/special-dates.html | 12 +- src/diagram/bpmn-editor-stack.json | 2 +- src/diagram/bpmn-editor.js | 4 +- .../complex-hierarchical-tree-stack.json | 2 +- src/diagram/complex-hierarchical-tree.js | 21 +- src/diagram/connector-stack.json | 2 +- src/diagram/connector.js | 4 + src/diagram/crud-stack.json | 2 +- src/diagram/crud.js | 12 +- src/diagram/custom-shapes-stack.json | 2 +- .../default-functionalities-stack.json | 2 +- src/diagram/default-functionalities.html | 2 +- src/diagram/diagram-events-stack.json | 1 + src/diagram/diagram-events.html | 181 + src/diagram/diagram-events.js | 295 + src/diagram/drawing-tool-stack.json | 2 +- src/diagram/drawing-tool.js | 8 +- src/diagram/fishbone-diagram-stack.json | 2 +- src/diagram/flow-execution-stack.json | 1 + src/diagram/flow-execution.html | 89 + src/diagram/flow-execution.js | 256 + .../getting-started-annotation-stack.json | 2 +- src/diagram/getting-started-annotation.js | 29 +- src/diagram/getting-started-node-stack.json | 2 +- src/diagram/getting-started-node.html | 2 +- src/diagram/getting-started-node.js | 7 +- src/diagram/hierarchical-model-stack.json | 2 +- src/diagram/hierarchical-model.js | 4 +- src/diagram/history-manager-stack.json | 1 + src/diagram/history-manager.html | 105 + src/diagram/history-manager.js | 176 + src/diagram/key-board-functions-stack.json | 2 +- src/diagram/key-board-functions.js | 3 +- src/diagram/local-data-stack.json | 2 +- src/diagram/logic-circuit-stack.json | 2 +- src/diagram/mind-map-stack.json | 2 +- src/diagram/network-diagram-stack.json | 2 +- src/diagram/network-diagram.js | 3 +- src/diagram/organization-model-stack.json | 2 +- src/diagram/organization-model.js | 4 + src/diagram/overview-stack.json | 2 +- src/diagram/pert-chart-stack.json | 2 +- src/diagram/port-stack.json | 2 +- src/diagram/port.js | 2 + src/diagram/print-export-stack.json | 2 +- src/diagram/print-export.js | 17 +- src/diagram/quick-commands-stack.json | 2 +- src/diagram/quick-commands.js | 8 + src/diagram/radial-tree-stack.json | 2 +- src/diagram/remote-data-stack.json | 2 +- src/diagram/right-to-left-tree-stack.json | 2 +- src/diagram/sample.json | 186 +- src/diagram/serialization-stack.json | 2 +- src/diagram/shape-gallery-stack.json | 2 +- src/diagram/shape-gallery.html | 2 +- src/diagram/swimlane-stack.json | 1 + src/diagram/swimlane.html | 151 + src/diagram/swimlane.js | 466 + src/diagram/symbol-palette-stack.json | 2 +- src/diagram/symbol-palette.js | 18 +- src/diagram/symmetric-layout-stack.json | 2 +- src/diagram/tooltip-Sample-stack.json | 1 + src/diagram/tooltip-Sample.html | 117 + src/diagram/tooltip-Sample.js | 258 + src/diagram/uml-activity-stack.json | 2 +- src/diagram/uml-activity.js | 4 +- src/diagram/uml-class-diagram-stack.json | 2 +- src/diagram/venn-diagram-stack.json | 2 +- src/diagram/venn-diagram.html | 2 +- src/dialog/animation-stack.json | 2 +- src/dialog/animation.html | 16 +- src/dialog/custom-dialog-stack.json | 2 +- src/dialog/custom-dialog.html | 9 +- src/dialog/default-stack.json | 2 +- src/dialog/default.html | 5 +- .../dialog-contents-via-ajax-stack.json | 2 +- src/dialog/dialog-contents-via-ajax.html | 35 +- src/dialog/draggable-stack.json | 2 +- src/dialog/draggable.html | 63 +- src/dialog/modal-dialog-stack.json | 2 +- src/dialog/modal-dialog.html | 8 +- src/dialog/multiple-dialogs-stack.json | 2 +- src/dialog/multiple-dialogs.html | 65 +- src/dialog/position-stack.json | 2 +- src/dialog/position.html | 34 +- src/dialog/resizable-stack.json | 2 +- src/dialog/resizable.html | 59 +- src/dialog/sample.json | 21 +- src/dialog/template-stack.json | 2 +- src/dialog/template.html | 15 + src/document-editor/default-stack.json | 2 +- src/document-editor/sample.json | 3 +- src/drop-down-list/cascading-stack.json | 2 +- src/drop-down-list/data-binding-stack.json | 2 +- src/drop-down-list/data-binding.html | 4 +- src/drop-down-list/data-source.js | 37 +- src/drop-down-list/default-stack.json | 2 +- .../diacritics-filtering-stack.json | 2 +- src/drop-down-list/filtering-stack.json | 2 +- src/drop-down-list/grouping-icon-stack.json | 2 +- src/drop-down-list/grouping-icon.html | 17 +- src/drop-down-list/inline-stack.json | 2 +- src/drop-down-list/sample.json | 16 +- src/drop-down-list/template-stack.json | 2 +- src/drop-down-list/template.html | 36 +- src/file-manager/api-stack.json | 1 + src/file-manager/api.html | 59 + src/file-manager/api.js | 24 + src/file-manager/custom-thumbnail-stack.json | 1 + src/file-manager/custom-thumbnail.html | 96 + src/file-manager/custom-thumbnail.js | 15 + src/file-manager/locale.json | 377 + src/file-manager/overview-stack.json | 1 + src/file-manager/overview.html | 21 + src/file-manager/overview.js | 14 + src/file-manager/sample.json | 43 + src/form-validator/default-stack.json | 1 + src/form-validator/external-submit-stack.json | 1 + src/form-validator/html5-stack.json | 1 + src/form-validator/html5.html | 7 +- src/form-validator/html5.js | 12 + src/form-validator/wizardform-stack.json | 1 + src/form-validator/wizardform.js | 4 + src/gantt/baseline-stack.json | 1 + src/gantt/baseline.html | 51 + src/gantt/baseline.js | 45 + src/gantt/data-source.js | 1340 ++ src/gantt/default-stack.json | 1 + src/gantt/default.html | 23 + src/gantt/default.js | 39 + src/gantt/editing-stack.json | 1 + src/gantt/editing.html | 39 + src/gantt/editing.js | 70 + src/gantt/filtering-stack.json | 1 + src/gantt/filtering.html | 41 + src/gantt/filtering.js | 57 + src/gantt/images/face-mask.svg | 21 + src/gantt/images/moments.svg | 32 + src/gantt/images/oscar.svg | 27 + src/gantt/remote-data-stack.json | 1 + src/gantt/remote-data.html | 43 + src/gantt/remote-data.js | 61 + src/gantt/sample.json | 207 + src/gantt/taskbar-template-stack.json | 1 + src/gantt/taskbar-template.html | 130 + src/gantt/taskbar-template.js | 78 + src/gantt/timeline-stack.json | 1 + src/gantt/timeline.html | 139 + src/gantt/timeline.js | 248 + src/gantt/unscheduled-tasks-stack.json | 1 + src/gantt/unscheduled-tasks.html | 28 + src/gantt/unscheduled-tasks.js | 48 + src/grid/advanced-exporting-stack.json | 2 +- src/grid/aggregate-default-stack.json | 2 +- src/grid/aggregate-group-stack.json | 2 +- src/grid/auto-wrap-stack.json | 2 +- src/grid/auto-wrap.html | 2 + src/grid/batch-editing-stack.json | 2 +- src/grid/checkbox-selection-stack.json | 2 +- src/grid/clipboard-stack.json | 2 +- src/grid/clipboard.html | 4 +- src/grid/column-chooser-stack.json | 2 +- src/grid/column-menu-stack.json | 2 +- src/grid/column-resize-stack.json | 2 +- src/grid/column-spanning-stack.json | 2 +- src/grid/column-template-stack.json | 2 +- src/grid/column-template.html | 12 +- src/grid/command-column-stack.json | 2 +- src/grid/context-menu-stack.json | 2 +- src/grid/default-exporting-stack.json | 2 +- src/grid/default-paging-stack.json | 2 +- src/grid/default-stack.json | 2 +- src/grid/detail-template-stack.json | 2 +- src/grid/dialog-editing-stack.json | 2 +- src/grid/dialog-template-stack.json | 2 +- src/grid/dialog-template.html | 19 +- src/grid/drag-and-drop-stack.json | 2 +- src/grid/drag-and-drop.html | 3 +- src/grid/drag-drop-within-grid-stack.json | 2 +- src/grid/drag-drop-within-grid.html | 3 +- src/grid/events-stack.json | 2 +- src/grid/events.html | 2 + src/grid/filter-menu-stack.json | 2 +- src/grid/filter-menu.html | 4 +- src/grid/filter-stack.json | 2 +- src/grid/foreign-key-stack.json | 2 +- src/grid/frozen-rows-columns-stack.json | 2 +- src/grid/frozen-rows-columns.html | 2 + src/grid/grid-lines-stack.json | 2 +- src/grid/grid-lines.html | 4 +- src/grid/grid-overview-stack.json | 2 +- src/grid/grouping-stack.json | 2 +- src/grid/grouping.html | 2 + src/grid/header-template-stack.json | 2 +- src/grid/header-template.html | 36 +- src/grid/hierarchy-stack.json | 2 +- src/grid/hover-stack.json | 2 +- src/grid/local-data-stack.json | 2 +- src/grid/master-detail-export-stack.json | 2 +- src/grid/normal-editing-stack.json | 2 +- src/grid/normal-editing.html | 4 +- src/grid/paging-api-stack.json | 2 +- src/grid/paging-api.html | 3 +- src/grid/print-stack.json | 2 +- .../reactive-aggregate-batch-edit-stack.json | 2 +- src/grid/remote-data-stack.json | 2 +- src/grid/reorder-stack.json | 2 +- src/grid/reorder.html | 4 +- src/grid/row-height-stack.json | 2 +- src/grid/row-height.html | 49 +- src/grid/row-spanning-stack.json | 2 +- src/grid/row-template-stack.json | 2 +- src/grid/sample.json | 123 +- src/grid/scrolling-stack.json | 2 +- src/grid/search-stack.json | 2 +- src/grid/selection-api-stack.json | 2 +- src/grid/selection-api.html | 2 + src/grid/selection-stack.json | 2 +- src/grid/selection.html | 4 +- src/grid/show-hide-stack.json | 2 +- src/grid/show-hide.html | 4 +- src/grid/sorting-api-stack.json | 2 +- src/grid/sorting-api.html | 3 +- src/grid/sorting-stack.json | 2 +- src/grid/stacked-header-stack.json | 2 +- src/grid/virtual-scrolling-stack.json | 2 +- src/grid/virtual-scrolling.html | 2 + src/heatmap/array-cell-stack.json | 2 +- src/heatmap/array-cell.html | 4 +- src/heatmap/array-row-stack.json | 2 +- src/heatmap/array-row.html | 4 +- src/heatmap/bubble-types-stack.json | 2 +- src/heatmap/bubble-types.html | 4 +- src/heatmap/calendar-heatmap-stack.json | 2 +- src/heatmap/calendar-heatmap.html | 4 +- src/heatmap/cell-json-binding-stack.json | 2 +- src/heatmap/cell-json-binding.html | 4 +- src/heatmap/cell-selection-stack.json | 2 +- src/heatmap/cell-selection.html | 4 +- .../color-and-size-attributes-stack.json | 2 +- src/heatmap/color-and-size-attributes.html | 4 +- src/heatmap/default-stack.json | 2 +- src/heatmap/default.html | 4 +- src/heatmap/empty-points-stack.json | 2 +- src/heatmap/empty-points.html | 4 +- src/heatmap/inversed-stack.json | 2 +- src/heatmap/inversed.html | 4 +- src/heatmap/large-data-stack.json | 2 +- src/heatmap/large-data.html | 4 +- src/heatmap/legend-stack.json | 2 +- src/heatmap/legend.html | 4 +- src/heatmap/multi-level-labels-stack.json | 2 +- src/heatmap/multi-level-labels.html | 2 + src/heatmap/multi-level-labels.js | 16 +- src/heatmap/opposed-stack.json | 2 +- src/heatmap/opposed.html | 4 +- src/heatmap/palette-stack.json | 2 +- src/heatmap/palette.html | 4 +- src/heatmap/render-mode-stack.json | 2 +- src/heatmap/render-mode.html | 4 +- src/heatmap/row-json-binding-stack.json | 2 +- src/heatmap/row-json-binding.html | 4 +- src/heatmap/sample.json | 17 +- src/heatmap/tooltip-template-stack.json | 2 +- src/heatmap/tooltip-template.html | 4 +- src/inplace-editor/default-stack.json | 2 +- src/inplace-editor/default.html | 54 +- src/inplace-editor/dropdowns-stack.json | 2 +- src/inplace-editor/dropdowns.html | 12 +- src/inplace-editor/dropdowns.js | 1 - src/inplace-editor/edit-post-stack.json | 2 +- src/inplace-editor/edit-post.html | 22 +- src/inplace-editor/edit-post.js | 41 +- src/inplace-editor/pickers-stack.json | 2 +- src/inplace-editor/pickers.html | 26 +- src/inplace-editor/sample.json | 7 +- src/linear-gauge/annotation-stack.json | 2 +- src/linear-gauge/annotation.html | 4 +- src/linear-gauge/annotation.js | 2 + src/linear-gauge/axes-stack.json | 2 +- src/linear-gauge/axes.html | 5 +- src/linear-gauge/axes.js | 12 +- src/linear-gauge/container-stack.json | 2 +- src/linear-gauge/container.html | 13 +- src/linear-gauge/container.js | 3 + src/linear-gauge/data-stack.json | 2 +- src/linear-gauge/data.html | 4 +- src/linear-gauge/data.js | 165 +- src/linear-gauge/default-stack.json | 2 +- src/linear-gauge/default.html | 4 +- src/linear-gauge/default.js | 4 +- src/linear-gauge/images/cycling1.svg | 53 + src/linear-gauge/images/running1.svg | 56 + src/linear-gauge/images/walking1.svg | 54 + src/linear-gauge/ranges-stack.json | 2 +- src/linear-gauge/ranges.html | 5 +- src/linear-gauge/ranges.js | 5 + src/linear-gauge/sample.json | 2 +- src/linear-gauge/style-stack.json | 2 +- src/linear-gauge/style.html | 4 +- src/linear-gauge/style.js | 8 + src/linear-gauge/tooltip-stack.json | 2 +- src/linear-gauge/tooltip.html | 4 +- src/linear-gauge/tooltip.js | 22 +- src/list-box/api-stack.json | 1 + src/list-box/api.html | 69 + src/list-box/api.js | 43 + src/list-box/checkbox-stack.json | 1 + src/list-box/checkbox.html | 32 + src/list-box/checkbox.js | 20 + src/list-box/data-source.js | 71 + src/list-box/default-stack.json | 1 + src/list-box/default.html | 34 + src/list-box/default.js | 12 + src/list-box/drag-and-drop-stack.json | 1 + src/list-box/drag-and-drop.html | 93 + src/list-box/drag-and-drop.js | 85 + src/list-box/dual-list-box-stack.json | 1 + src/list-box/dual-list-box.html | 69 + src/list-box/dual-list-box.js | 38 + src/list-box/sample.json | 15 + src/listview/call-history-stack.json | 2 +- src/listview/call-history.html | 17 +- src/listview/checklist-stack.json | 2 +- src/listview/default-stack.json | 2 +- src/listview/group-template-stack.json | 2 +- src/listview/group-template.html | 4 + src/listview/nested-list-stack.json | 2 +- src/listview/remote-data-stack.json | 2 +- src/listview/templates-stack.json | 2 +- src/listview/templates.html | 6 + src/listview/virtualization-stack.json | 2 +- src/maps/annotation-stack.json | 2 +- src/maps/annotation.html | 3 + src/maps/annotation.js | 8 +- src/maps/bubble-stack.json | 2 +- src/maps/bubble.html | 1 + src/maps/bubble.js | 2 + src/maps/color-mapping-stack.json | 2 +- src/maps/color-mapping.html | 27 +- src/maps/color-mapping.js | 46 +- src/maps/curved-lines-stack.json | 2 +- src/maps/curved-lines.html | 1 + src/maps/curved-lines.js | 8 +- src/maps/cyber-attack-map-stack.json | 1 + src/maps/cyber-attack-map.html | 136 + src/maps/cyber-attack-map.js | 186 + src/maps/data-label-stack.json | 2 +- src/maps/data-label.html | 6 +- src/maps/data-label.js | 3 + src/maps/default-stack.json | 2 +- src/maps/default.html | 1 + src/maps/default.js | 2 + src/maps/drilldown-stack.json | 2 +- src/maps/drilldown.html | 6 +- src/maps/drilldown.js | 10 +- src/maps/earthquake-stack.json | 2 +- src/maps/earthquake.html | 1 + src/maps/earthquake.js | 2 + src/maps/export-stack.json | 2 +- src/maps/export.html | 6 +- src/maps/export.js | 3 + src/maps/heat-map-stack.json | 2 +- src/maps/heat-map.html | 1 + src/maps/heat-map.js | 2 + src/maps/highlighted-region-stack.json | 2 +- src/maps/highlighted-region.html | 1 + src/maps/highlighted-region.js | 2 + src/maps/legend-stack.json | 2 +- src/maps/legend.html | 2 + src/maps/legend.js | 3 + src/maps/map-with-slider-stack.json | 2 +- src/maps/map-with-slider.html | 1 + src/maps/map-with-slider.js | 4 + src/maps/marker-stack.json | 2 +- src/maps/marker-template-stack.json | 2 +- src/maps/marker-template.html | 5 +- src/maps/marker-template.js | 8 +- src/maps/marker.html | 6 +- src/maps/marker.js | 2 + src/maps/multi-layer-stack.json | 2 +- src/maps/multi-layer.html | 6 +- src/maps/multi-layer.js | 2 + src/maps/navigation-line-stack.json | 2 +- src/maps/navigation-line.html | 5 +- src/maps/navigation-line.js | 8 +- src/maps/osm-stack.json | 2 +- src/maps/osm-with-navigation-lines-stack.json | 2 +- src/maps/osm-with-navigation-lines.html | 1 + src/maps/osm-with-navigation-lines.js | 8 +- src/maps/osm-with-sublayers-stack.json | 2 +- src/maps/osm-with-sublayers.html | 1 + src/maps/osm-with-sublayers.js | 2 + src/maps/osm.html | 5 +- src/maps/osm.js | 2 + src/maps/pie-stack.json | 2 +- src/maps/pie.html | 3 + src/maps/pie.js | 8 +- src/maps/print-stack.json | 2 +- src/maps/print.html | 7 +- src/maps/print.js | 3 + src/maps/projection-stack.json | 2 +- src/maps/projection.html | 6 +- src/maps/projection.js | 3 + src/maps/sample.json | 22 +- src/maps/seat-selection-stack.json | 2 +- src/maps/seat-selection.html | 8 +- src/maps/seat-selection.js | 4 +- src/maps/selection-stack.json | 2 +- src/maps/selection.html | 8 +- src/maps/selection.js | 2 + src/maps/tooltip-stack.json | 2 +- src/maps/tooltip.html | 1 + src/maps/tooltip.js | 2 + src/maps/zooming-stack.json | 2 +- src/maps/zooming.html | 149 +- src/maps/zooming.js | 3 + src/maskedtextbox/custom-mask-stack.json | 2 +- src/maskedtextbox/custom-mask.html | 8 +- src/maskedtextbox/default-stack.json | 2 +- src/maskedtextbox/default.html | 6 +- src/maskedtextbox/formats-stack.json | 2 +- src/maskedtextbox/formats.html | 4 +- src/maskedtextbox/sample.json | 4 +- src/menu/api-stack.json | 2 +- src/menu/api.html | 5 +- src/menu/data-binding-stack.json | 2 +- src/menu/data-binding.html | 4 +- src/menu/default-stack.json | 2 +- src/menu/default.html | 44 +- src/menu/default.js | 2 +- src/menu/sample.json | 2 - src/menu/scrollable-stack.json | 2 +- src/menu/scrollable.html | 4 +- src/menu/template-stack.json | 2 +- src/menu/template.html | 13 +- src/menu/toolbar-integration-stack.json | 2 +- src/menu/toolbar-integration.html | 18 +- src/multi-select/checkbox-stack.json | 2 +- .../chip-customization-stack.json | 2 +- src/multi-select/custom-value-stack.json | 2 +- src/multi-select/data-binding-stack.json | 2 +- src/multi-select/data-binding.html | 4 +- src/multi-select/default-stack.json | 2 +- .../diacritics-filtering-stack.json | 2 +- src/multi-select/filtering-stack.json | 2 +- src/multi-select/grouping-icon-stack.json | 2 +- src/multi-select/grouping-icon.html | 4 +- src/multi-select/sample.json | 20 +- src/multi-select/selection-limit-stack.json | 2 +- src/multi-select/template-stack.json | 2 +- src/multi-select/template.html | 43 + src/numerictextbox/custom-format-stack.json | 2 +- src/numerictextbox/custom-format.html | 4 +- src/numerictextbox/default-stack.json | 2 +- src/numerictextbox/default.html | 2 +- .../range-validation-stack.json | 2 +- src/numerictextbox/range-validation.html | 8 +- .../restrict-decimals-stack.json | 2 +- src/numerictextbox/restrict-decimals.html | 4 +- src/numerictextbox/sample.json | 6 +- src/pdfviewer/custom-toolbar.html | 43 +- src/pdfviewer/custom-toolbar.js | 54 +- src/pdfviewer/default.html | 2 +- src/pdfviewer/right-to-left.html | 25 + src/pdfviewer/right-to-left.js | 80 + src/pdfviewer/sample.json | 14 +- src/pivot-view/aggregation-stack.json | 2 +- src/pivot-view/aggregation.html | 4 +- src/pivot-view/calculated-field-stack.json | 2 +- src/pivot-view/calculated-field.html | 5 +- src/pivot-view/cell-template-stack.json | 1 + src/pivot-view/cell-template.html | 68 + src/pivot-view/cell-template.js | 135 + src/pivot-view/charts-stack.json | 2 +- src/pivot-view/charts.html | 121 +- src/pivot-view/charts.js | 156 +- .../conditional-formatting-stack.json | 2 +- src/pivot-view/conditional-formatting.html | 5 +- src/pivot-view/data-source.js | 966 +- src/pivot-view/default-stack.json | 2 +- src/pivot-view/default.html | 3 +- src/pivot-view/defer-update-stack.json | 2 +- src/pivot-view/defer-update.html | 5 +- src/pivot-view/drill-options-stack.json | 2 +- src/pivot-view/drill-options.html | 5 +- src/pivot-view/drill-through-stack.json | 2 +- src/pivot-view/drill-through.html | 5 +- src/pivot-view/editing-stack.json | 2 +- src/pivot-view/editing.html | 5 +- src/pivot-view/exporting-stack.json | 2 +- src/pivot-view/exporting.html | 5 +- src/pivot-view/external-binding-stack.json | 1 + src/pivot-view/external-binding.html | 23 + src/pivot-view/external-binding.js | 135 + src/pivot-view/field-list-stack.json | 2 +- src/pivot-view/field-list.html | 5 +- src/pivot-view/filtering-stack.json | 2 +- src/pivot-view/filtering.html | 5 +- src/pivot-view/grid-configuration-stack.json | 2 +- src/pivot-view/grid-configuration.html | 5 +- src/pivot-view/grouping-bar-stack.json | 2 +- src/pivot-view/grouping-bar.html | 3 +- src/pivot-view/grouping-stack.json | 1 + src/pivot-view/grouping.html | 94 + src/pivot-view/grouping.js | 101 + src/pivot-view/hyper-link-stack.json | 2 +- src/pivot-view/hyper-link.html | 5 +- src/pivot-view/label-filtering-stack.json | 2 +- src/pivot-view/label-filtering.html | 5 +- src/pivot-view/local-stack.json | 2 +- src/pivot-view/local.html | 5 +- src/pivot-view/locale.json | 235 +- src/pivot-view/remote-stack.json | 2 +- src/pivot-view/remote.html | 5 +- src/pivot-view/remote.js | 35 +- src/pivot-view/right-to-left-stack.json | 2 +- src/pivot-view/right-to-left.html | 5 +- src/pivot-view/sample.json | 51 +- src/pivot-view/selection-stack.json | 1 + src/pivot-view/selection.html | 105 + src/pivot-view/selection.js | 68 + src/pivot-view/sorting-stack.json | 2 +- src/pivot-view/sorting.html | 5 +- .../summary-customization-stack.json | 2 +- src/pivot-view/summary-customization.html | 5 +- src/pivot-view/toolbar-stack.json | 1 + src/pivot-view/toolbar.html | 29 + src/pivot-view/toolbar.js | 126 + src/pivot-view/value-filtering-stack.json | 2 +- src/pivot-view/value-filtering.html | 5 +- src/pivot-view/value-sorting-stack.json | 2 +- src/pivot-view/value-sorting.html | 5 +- src/pivot-view/virtual-scrolling-stack.json | 2 +- src/pivot-view/virtual-scrolling.html | 5 +- src/query-builder/default-stack.json | 2 +- src/query-builder/default.html | 5 +- src/query-builder/default.js | 1 + src/query-builder/grid-stack.json | 2 +- src/query-builder/grid.js | 15 +- src/query-builder/sample.json | 22 +- src/query-builder/template-stack.json | 2 +- src/query-builder/template.html | 6 +- src/query-builder/template.js | 110 +- src/range-navigator/date-time-stack.json | 1 + src/range-navigator/date-time.js | 4 +- src/range-navigator/default-stack.json | 1 + src/range-navigator/default.js | 4 +- src/range-navigator/double-stack.json | 1 + src/range-navigator/double.js | 4 +- src/range-navigator/empty-data-stack.json | 1 + src/range-navigator/empty-data.js | 6 +- src/range-navigator/export-stack.json | 1 + src/range-navigator/export.html | 4 +- src/range-navigator/filter-stack.json | 1 + src/range-navigator/filter.js | 4 +- src/range-navigator/light-weight-stack.json | 1 + src/range-navigator/logarithmic-stack.json | 1 + src/range-navigator/multilevel-stack.json | 1 + .../period-selector-default-stack.json | 1 + .../period-selector-stack.json | 1 + .../period-selector-stocks-stack.json | 1 + src/range-navigator/period-selector-stocks.js | 2 +- src/range-navigator/period-selector.html | 3 + src/range-navigator/period-selector.js | 5 +- src/range-navigator/right-to-left-stack.json | 1 + src/range-navigator/right-to-left.js | 4 +- src/range-navigator/sample.json | 6 +- src/rich-text-editor/ajax-load-stack.json | 2 +- src/rich-text-editor/api-stack.json | 2 +- src/rich-text-editor/api.js | 6 +- src/rich-text-editor/blog-posting-stack.json | 2 +- src/rich-text-editor/blog-posting.html | 19 + .../client-side-events-stack.json | 2 +- src/rich-text-editor/client-side-events.html | 29 +- src/rich-text-editor/client-side-events.js | 2 +- src/rich-text-editor/code-mirror-stack.json | 2 +- .../custom-toolbar-stack.json | 2 +- src/rich-text-editor/custom-toolbar.html | 14 +- src/rich-text-editor/custom-toolbar.js | 5 +- .../form-validation-stack.json | 2 +- src/rich-text-editor/form-validation.js | 2 +- src/rich-text-editor/iframe-stack.json | 2 +- src/rich-text-editor/image-stack.json | 2 +- src/rich-text-editor/image.html | 8 + src/rich-text-editor/inline-stack.json | 2 +- src/rich-text-editor/inline.js | 2 +- .../markdown-editor-custom-format-stack.json | 2 +- .../markdown-editor-custom-format.html | 7 + .../markdown-editor-custom-format.js | 4 +- .../markdown-editor-preview-stack.json | 2 +- .../markdown-editor-preview.html | 15 +- .../markdown-editor-preview.js | 6 +- .../markdown-editor-stack.json | 2 +- src/rich-text-editor/markdown-editor.html | 8 + src/rich-text-editor/markdown-editor.js | 4 +- src/rich-text-editor/paste-cleanup-stack.json | 1 + src/rich-text-editor/paste-cleanup.html | 121 + src/rich-text-editor/paste-cleanup.js | 54 + src/rich-text-editor/print-stack.json | 2 +- src/rich-text-editor/quick-toolbar-stack.json | 2 +- .../rich-text-editor-stack.json | 2 +- src/rich-text-editor/sample.json | 11 +- src/rich-text-editor/tools-stack.json | 2 +- src/rich-text-editor/tools.html | 6 + src/rich-text-editor/types-stack.json | 2 +- src/rich-text-editor/types.html | 13 +- src/rich-text-editor/types.js | 2 +- src/schedule/adaptive-rows-stack.json | 1 + src/schedule/adaptive-rows.html | 43 + src/schedule/adaptive-rows.js | 52 + src/schedule/add-remove-resources-stack.json | 2 +- src/schedule/add-remove-resources.html | 10 +- src/schedule/add-remove-resources.js | 2 + src/schedule/agenda-stack.json | 2 +- src/schedule/block-events-stack.json | 2 +- .../calendar-export-import-stack.json | 1 + src/schedule/calendar-export-import.html | 69 + src/schedule/calendar-export-import.js | 31 + src/schedule/calendar-integration-stack.json | 2 +- src/schedule/cell-dimension-stack.json | 2 +- src/schedule/cell-template-stack.json | 2 +- src/schedule/context-menu-stack.json | 2 +- src/schedule/context-menu.html | 26 + src/schedule/context-menu.js | 5 +- src/schedule/datasource.js | 202 +- src/schedule/date-header-template-stack.json | 2 +- src/schedule/date-header-template.js | 2 +- src/schedule/default-stack.json | 2 +- src/schedule/default.js | 4 +- src/schedule/editor-custom-field-stack.json | 2 +- src/schedule/editor-template-stack.json | 2 +- src/schedule/editor-validation-stack.json | 2 +- src/schedule/editor-validation.js | 2 +- src/schedule/event-template-stack.json | 2 +- src/schedule/event-template.html | 2 + src/schedule/events-stack.json | 2 +- src/schedule/events.html | 2 + src/schedule/events.js | 2 +- src/schedule/excel-export-stack.json | 1 + src/schedule/excel-export.html | 38 + src/schedule/excel-export.js | 26 + src/schedule/extended-views-stack.json | 2 +- src/schedule/external-drag-drop-stack.json | 2 +- src/schedule/external-drag-drop.html | 18 +- src/schedule/group-by-child-stack.json | 2 +- src/schedule/group-by-date-stack.json | 2 +- .../group-custom-work-days-stack.json | 2 +- src/schedule/group-editing-stack.json | 2 +- src/schedule/header-bar-stack.json | 2 +- src/schedule/header-bar.html | 7 + src/schedule/header-rows-stack.json | 2 +- src/schedule/hide-weekend-stack.json | 2 +- src/schedule/keyboard-interaction-stack.json | 2 +- src/schedule/local-data-stack.json | 2 +- src/schedule/month-agenda-stack.json | 2 +- src/schedule/month-agenda.html | 2 + src/schedule/read-only-events-stack.json | 2 +- ...recurrence-editor-generate-rule-stack.json | 2 +- .../recurrence-editor-generate-rule.html | 2 + ...recurrence-editor-populate-rule-stack.json | 2 +- .../recurrence-editor-populate-rule.html | 2 + src/schedule/recurrence-events-stack.json | 2 +- src/schedule/remote-data-stack.json | 2 +- src/schedule/resource-grouping-stack.json | 2 +- src/schedule/resource-grouping.html | 7 +- src/schedule/resource-grouping.js | 2 + src/schedule/resource-stack.json | 1 + src/schedule/resource.html | 60 + src/schedule/resource.js | 43 + src/schedule/resources-stack.json | 2 +- src/schedule/resources.html | 16 +- src/schedule/resources.js | 2 + src/schedule/sample.json | 167 +- src/schedule/scroll-to-stack.json | 2 +- src/schedule/scroll-to.js | 2 +- src/schedule/search-events-stack.json | 1 + src/schedule/search-events.html | 88 + src/schedule/search-events.js | 134 + src/schedule/start-end-hour-stack.json | 2 +- src/schedule/time-scale-stack.json | 2 +- src/schedule/time-scale.js | 2 +- .../timeline-resource-grouping-stack.json | 2 +- src/schedule/timeline-resources-stack.json | 2 +- src/schedule/timeline-stack.json | 2 +- src/schedule/timeline.js | 4 +- src/schedule/timezone-stack.json | 2 +- src/schedule/tooltip-stack.json | 2 +- src/schedule/views-configuration-stack.json | 2 +- src/schedule/views-stack.json | 2 +- src/schedule/virtual-scrolling-stack.json | 2 +- src/schedule/virtual-scrolling.js | 2 + src/schedule/work-days-stack.json | 2 +- src/schedule/work-hour-stack.json | 2 +- src/sidebar/api-stack.json | 2 +- src/sidebar/api.html | 2 + src/sidebar/default-stack.json | 2 +- src/sidebar/default.html | 8 +- src/sidebar/docking-sidebar-stack.json | 2 +- src/sidebar/docking-sidebar.html | 6 +- src/sidebar/responsive-panel-stack.json | 1 + src/sidebar/responsive-panel.html | 313 + src/sidebar/responsive-panel.js | 73 + src/sidebar/sample.json | 93 +- src/sidebar/sidebar-list-stack.json | 2 +- src/sidebar/sidebar-list.html | 20 +- src/sidebar/sidebar-menu-stack.json | 1 + src/sidebar/sidebar-menu.html | 385 +- src/sidebar/sidebar-menu.js | 132 +- src/slider/api-stack.json | 2 +- src/slider/api.js | 2 +- src/slider/azure-pricing-stack.json | 2 +- src/slider/azure-pricing.html | 4 + src/slider/default-stack.json | 2 +- src/slider/events-stack.json | 2 +- src/slider/events.js | 2 +- src/slider/format-stack.json | 2 +- src/slider/format.js | 2 +- src/slider/limits-stack.json | 2 +- src/slider/limits.js | 2 +- src/slider/orientation-stack.json | 2 +- src/slider/orientation.js | 2 +- src/slider/rtl-stack.json | 2 +- src/slider/sample.json | 8 +- .../selection-bar-customization-stack.json | 2 +- src/slider/thumb-customization-stack.json | 2 +- src/slider/ticks-customization-stack.json | 2 +- src/slider/ticks-customization.html | 93 +- src/slider/ticks-stack.json | 2 +- src/slider/tooltip-customization-stack.json | 2 +- src/slider/tooltip-customization.html | 17 +- src/slider/tooltip-customization.js | 12 +- src/slider/tooltip-stack.json | 2 +- src/slider/tooltip.js | 2 +- src/smith-chart/custom-stack.json | 2 +- src/smith-chart/custom.html | 5 +- src/smith-chart/custom.js | 3 + src/smith-chart/default-stack.json | 2 +- src/smith-chart/default.html | 5 +- src/smith-chart/default.js | 2 + src/smith-chart/print-export-stack.json | 2 +- src/smith-chart/print-export.html | 7 +- src/smith-chart/print-export.js | 5 +- src/sparkline/axis-types-stack.json | 2 +- src/sparkline/axis-types.html | 7 +- src/sparkline/axis-types.js | 2 + src/sparkline/customization-stack.json | 2 +- src/sparkline/customization.html | 3 + src/sparkline/customization.js | 11 +- src/sparkline/default-stack.json | 2 +- src/sparkline/default.js | 1 - src/sparkline/live-update-stack.json | 2 +- src/sparkline/live-update.html | 4 +- src/sparkline/live-update.js | 19 +- src/sparkline/range-band-stack.json | 2 +- src/sparkline/range-band.html | 5 +- src/sparkline/range-band.js | 4 +- src/sparkline/series-types-stack.json | 2 +- src/sparkline/series-types.js | 42 +- src/sparkline/spark-grid-stack.json | 2 +- src/sparkline/spark-grid.html | 4 +- src/sparkline/spark-grid.js | 2 + .../accordion-navigation-menu-stack.json | 2 +- src/splitter/accordion-navigation-menu.html | 34 +- src/splitter/accordion-navigation-menu.js | 6 +- src/splitter/aspnet-chart-ajax.html | 2 +- src/splitter/aspnet-grid-ajax.html | 2 +- src/splitter/aspnet-schedule-ajax.html | 2 +- src/splitter/aspnetmvc-chart-ajax.html | 2 +- src/splitter/aspnetmvc-grid-ajax.html | 2 +- src/splitter/aspnetmvc-schedule-ajax.html | 2 +- src/splitter/code-editor-layout-stack.json | 2 +- src/splitter/code-editor-layout.html | 27 +- src/splitter/default-stack.json | 2 +- src/splitter/default.html | 35 +- src/splitter/details-view-stack.json | 2 +- src/splitter/details-view.html | 17 +- src/splitter/expand-and-collapse-stack.json | 1 + src/splitter/expand-and-collapse.html | 98 + src/splitter/expand-and-collapse.js | 24 + src/splitter/javascript-chart-ajax.html | 2 +- src/splitter/javascript-grid-ajax.html | 2 +- src/splitter/javascript-schedule-ajax.html | 2 +- src/splitter/outlook-style-layout-stack.json | 2 +- src/splitter/outlook-style-layout.html | 30 +- src/splitter/outlook-style-layout.js | 12 +- src/splitter/sample.json | 13 +- src/stock-chart/area-stack.json | 1 + src/stock-chart/area.js | 2 + src/stock-chart/default-stack.json | 1 + src/stock-chart/default.js | 2 + src/stock-chart/disabled-navigator-stack.json | 1 + src/stock-chart/disabled-navigator.js | 9 + src/stock-chart/disabled-period-stack.json | 1 + src/stock-chart/disabled-period.html | 34 +- src/stock-chart/disabled-period.js | 19 +- src/stock-chart/inversed-area-stack.json | 1 + src/stock-chart/inversed-area.js | 2 + src/stock-chart/live-stack.json | 1 + src/stock-chart/multi-pane-stack.json | 1 + src/stock-chart/multi-pane.js | 2 + src/stock-chart/multiple-series-stack.json | 1 + src/stock-chart/multiple-series.js | 2 + src/stock-chart/ohlc-stack.json | 1 + src/stock-chart/ohlc.js | 2 + .../period-customization-stack.json | 1 + src/stock-chart/period-customization.js | 2 + src/stock-chart/plot-line-stack.json | 1 + src/stock-chart/plot-line.js | 2 + src/stock-chart/sample.json | 18 +- src/stock-chart/spline-area-stack.json | 1 + src/stock-chart/spline-area.js | 8 +- src/stock-chart/spline-live-stack.json | 1 + src/stock-chart/spline-stack.json | 1 + src/stock-chart/spline.js | 9 +- src/stock-chart/stock-events-stack.json | 1 + src/stock-chart/stock-events.html | 15 + src/stock-chart/stock-events.js | 130 + src/stock-chart/strip-line-stack.json | 1 + src/stock-chart/strip-line.js | 2 + src/tab/default-stack.json | 2 +- src/tab/orientation-stack.json | 2 +- src/tab/orientation.html | 5 +- src/tab/responsive-modes-stack.json | 2 +- src/tab/responsive-modes.html | 2 + src/tab/right-to-left-stack.json | 2 +- src/tab/wizard-stack.json | 2 +- src/tab/wizard.html | 2 + src/textbox/default-stack.json | 2 +- src/textbox/default.html | 19 + src/textbox/default.js | 2 + src/textbox/multiline-textbox-stack.json | 1 + src/textbox/multiline-textbox.html | 68 + src/textbox/multiline-textbox.js | 59 + src/textbox/sample.json | 11 +- src/timepicker/default-stack.json | 2 +- src/timepicker/default.html | 4 +- src/timepicker/list-formatting-stack.json | 2 +- src/timepicker/list-formatting.html | 21 +- src/timepicker/sample.json | 8 +- src/timepicker/time-format-stack.json | 2 +- src/timepicker/time-format.html | 4 +- src/timepicker/time-range-stack.json | 2 +- src/timepicker/time-range.html | 4 +- src/toast/api-stack.json | 2 +- src/toast/api.html | 6 +- src/toast/default-stack.json | 2 +- src/toast/default.html | 4 + src/toast/positions-stack.json | 2 +- src/toast/positions.html | 18 +- src/toast/template-stack.json | 2 +- src/toast/template.html | 16 +- src/toast/types-stack.json | 2 +- src/toast/types.html | 16 +- src/toolbar/alignment-stack.json | 2 +- src/toolbar/default-stack.json | 2 +- src/toolbar/default.html | 4 +- src/toolbar/popup-stack.json | 2 +- src/toolbar/popup.html | 29 +- src/toolbar/right-to-left-stack.json | 2 +- src/tooltip/ajax-content-stack.json | 2 +- src/tooltip/ajax-content.html | 9 + src/tooltip/ajax-content.js | 2 + src/tooltip/api-stack.json | 2 +- src/tooltip/default-stack.json | 2 +- src/tooltip/html-template-stack.json | 2 +- src/tooltip/html-template.html | 4 + src/tooltip/menu-stack.json | 2 +- src/tooltip/menu.html | 12 + src/tooltip/sample.json | 8 +- src/tooltip/smart-position-stack.json | 2 +- src/tooltip/template-stack.json | 2 +- src/tree-grid/aggregate.custom-stack.json | 2 +- src/tree-grid/aggregate.custom.html | 6 +- src/tree-grid/aggregate.default-stack.json | 2 +- src/tree-grid/aggregate.default.html | 5 +- src/tree-grid/auto.wrap-stack.json | 2 +- src/tree-grid/auto.wrap.html | 3 +- src/tree-grid/cell.edit.type-stack.json | 2 +- src/tree-grid/cell.edit.type.html | 5 +- src/tree-grid/cellalignment-stack.json | 2 +- src/tree-grid/cellalignment.html | 4 +- src/tree-grid/checkbox-column-stack.json | 1 + src/tree-grid/checkbox-column.html | 27 + src/tree-grid/checkbox-column.js | 18 + src/tree-grid/checkbox-selection-stack.json | 1 + src/tree-grid/checkbox-selection.html | 32 + src/tree-grid/checkbox-selection.js | 19 + src/tree-grid/columnformatting-stack.json | 2 +- src/tree-grid/columnformatting.html | 4 +- src/tree-grid/columnmenu-stack.json | 2 +- src/tree-grid/columnmenu.html | 6 +- src/tree-grid/columntemplate-stack.json | 2 +- src/tree-grid/columntemplate.html | 9 +- src/tree-grid/columntemplate.js | 6 +- src/tree-grid/command-column-stack.json | 2 +- src/tree-grid/command-column.html | 4 +- .../conditional-formatting-stack.json | 2 +- src/tree-grid/conditional-formatting.html | 7 +- src/tree-grid/custom.contextmenu-stack.json | 2 +- src/tree-grid/custom.contextmenu.html | 5 +- src/tree-grid/data-source.js | 47 + src/tree-grid/default-stack.json | 2 +- src/tree-grid/default.contextmenu-stack.json | 2 +- src/tree-grid/default.contextmenu.html | 3 +- src/tree-grid/default.exporting-stack.json | 2 +- src/tree-grid/default.exporting.html | 3 +- src/tree-grid/default.html | 5 +- src/tree-grid/default.paging-stack.json | 2 +- src/tree-grid/default.paging.html | 3 +- src/tree-grid/dialog.editing-stack.json | 2 +- src/tree-grid/dialog.editing.html | 7 +- src/tree-grid/edittemplate-stack.json | 2 +- src/tree-grid/edittemplate.html | 5 +- src/tree-grid/events-stack.json | 2 +- src/tree-grid/events.html | 6 +- src/tree-grid/filter-menu-stack.json | 2 +- src/tree-grid/filter-menu.html | 28 +- src/tree-grid/filter-menu.js | 1 - src/tree-grid/filter-stack.json | 2 +- src/tree-grid/filter.html | 3 +- src/tree-grid/header.template-stack.json | 2 +- src/tree-grid/header.template.html | 5 +- src/tree-grid/images/Bangladesh.png | Bin 0 -> 4269 bytes src/tree-grid/images/Canada.png | Bin 0 -> 3653 bytes src/tree-grid/images/Egypt.png | Bin 0 -> 5733 bytes src/tree-grid/images/Germany.png | Bin 0 -> 1214 bytes src/tree-grid/images/Greece.png | Bin 0 -> 1881 bytes src/tree-grid/images/Map.png | Bin 0 -> 10611 bytes src/tree-grid/images/USA.png | Bin 0 -> 10417 bytes src/tree-grid/inline.editing-stack.json | 2 +- src/tree-grid/inline.editing.html | 3 +- src/tree-grid/keyboard-stack.json | 2 +- src/tree-grid/keyboard.html | 4 +- src/tree-grid/localdata-stack.json | 2 +- src/tree-grid/localdata.html | 3 +- src/tree-grid/lock.row-stack.json | 2 +- src/tree-grid/lock.row.html | 9 +- src/tree-grid/multi.sorting-stack.json | 2 +- src/tree-grid/multi.sorting.html | 4 +- src/tree-grid/paging.api-stack.json | 2 +- src/tree-grid/paging.api.html | 5 +- src/tree-grid/print-stack.json | 2 +- src/tree-grid/print.html | 3 +- src/tree-grid/remote.data-stack.json | 2 +- src/tree-grid/remote.data.html | 11 +- src/tree-grid/reorder-stack.json | 2 +- src/tree-grid/reorder.html | 4 +- src/tree-grid/resizing-stack.json | 2 +- src/tree-grid/resizing.html | 3 +- src/tree-grid/row.hover-stack.json | 2 +- src/tree-grid/row.hover.html | 3 +- src/tree-grid/rowheight-stack.json | 2 +- src/tree-grid/rowheight.html | 17 +- src/tree-grid/sample.json | 22 +- src/tree-grid/search-stack.json | 2 +- src/tree-grid/search.html | 4 +- src/tree-grid/selection-api-stack.json | 2 +- src/tree-grid/selection-api.html | 6 +- src/tree-grid/selection-stack.json | 2 +- src/tree-grid/selection.html | 4 +- src/tree-grid/selfreference-stack.json | 2 +- src/tree-grid/selfreference.html | 3 +- src/tree-grid/showhidecolumn-stack.json | 2 +- src/tree-grid/showhidecolumn.html | 4 +- src/tree-grid/sorting.api-stack.json | 2 +- src/tree-grid/sorting.api.html | 6 +- src/tree-grid/stacked-header-stack.json | 2 +- src/tree-grid/stacked-header.html | 4 +- src/tree-grid/toolbar.template-stack.json | 2 +- src/tree-grid/toolbar.template.html | 5 +- src/tree-grid/treegrid.overview-stack.json | 1 + src/tree-grid/treegrid.overview.html | 165 + src/tree-grid/treegrid.overview.js | 66 + src/tree-grid/treegridlines-stack.json | 2 +- src/tree-grid/treegridlines.html | 4 +- src/treemap/color-mapping-stack.json | 2 +- src/treemap/color-mapping.html | 23 +- src/treemap/color-mapping.js | 34 +- src/treemap/customization-stack.json | 2 +- src/treemap/customization.html | 1 + src/treemap/customization.js | 2 + src/treemap/default-stack.json | 2 +- src/treemap/default.html | 1 + src/treemap/default.js | 2 + src/treemap/drilldown-stack.json | 2 +- src/treemap/drilldown.html | 84 +- src/treemap/drilldown.js | 52 + src/treemap/election-stack.json | 2 +- src/treemap/election.html | 17 +- src/treemap/election.js | 55 +- src/treemap/label-stack.json | 2 +- src/treemap/label.html | 6 +- src/treemap/label.js | 3 + src/treemap/layout-stack.json | 2 +- src/treemap/layout.html | 72 +- src/treemap/layout.js | 13 + src/treemap/map-data.js | 219 +- src/treemap/pie-stack.json | 2 +- src/treemap/pie.html | 1 + src/treemap/pie.js | 3 + src/treemap/print-stack.json | 2 +- src/treemap/print.html | 11 +- src/treemap/print.js | 3 + src/treemap/rtl-stack.json | 1 + src/treemap/rtl.html | 22 + src/treemap/rtl.js | 36 + src/treemap/sample.json | 29 +- src/treemap/selection-stack.json | 2 +- src/treemap/selection.html | 192 +- src/treemap/selection.js | 2 + src/treemap/tooltip-stack.json | 2 +- src/treemap/tooltip.html | 8 +- src/treemap/tooltip.js | 2 + src/treeview/check-box-stack.json | 2 +- src/treeview/check-box.html | 22 +- src/treeview/check-box.js | 9 + src/treeview/default-stack.json | 2 +- src/treeview/default.html | 5 +- src/treeview/drag-and-drop-stack.json | 2 +- src/treeview/drag-and-drop.html | 15 +- src/treeview/icons-stack.json | 2 +- src/treeview/icons.html | 3 +- src/treeview/local-data-stack.json | 2 +- src/treeview/local-data.html | 5 +- src/treeview/multiple-selection-stack.json | 2 +- src/treeview/multiple-selection.html | 5 +- src/treeview/node-editing-stack.json | 2 +- src/treeview/node-editing.html | 5 +- src/treeview/remote-data-stack.json | 2 +- src/treeview/remote-data.html | 5 +- src/treeview/sample.json | 5 +- src/treeview/template-stack.json | 2 +- src/treeview/template.html | 4 +- src/uploader/chunk-upload-stack.json | 2 +- src/uploader/chunk-upload.html | 4 +- src/uploader/custom-drop-area-stack.json | 2 +- src/uploader/custom-drop-area.html | 15 +- src/uploader/custom-file-list-stack.json | 2 +- src/uploader/custom-file-list.html | 30 + src/uploader/default-stack.json | 2 +- .../file-upload-with-forms-stack.json | 2 +- src/uploader/file-upload-with-forms.html | 10 +- src/uploader/file-validation-stack.json | 2 +- src/uploader/image-preview-stack.json | 2 +- src/uploader/preload-files-stack.json | 2 +- src/uploader/sample.json | 17 +- styles/images/SyncfusionLogo.svg | 19 + styles/images/sb-icons/fonts/icons.eot | Bin 9488 -> 16684 bytes styles/images/sb-icons/fonts/icons.svg | 50 +- styles/images/sb-icons/fonts/icons.ttf | Bin 9332 -> 16520 bytes styles/images/sb-icons/fonts/icons.woff | Bin 9408 -> 16596 bytes styles/index.css | 37 +- 1490 files changed, 43193 insertions(+), 25847 deletions(-) create mode 100644 src/button/checkbox-stack.json create mode 100644 src/button/checkbox.html create mode 100644 src/button/checkbox.js create mode 100644 src/button/dropdown-button-stack.json create mode 100644 src/button/dropdown-button.html create mode 100644 src/button/dropdown-button.js create mode 100644 src/calendar/islamic-calendar-stack.json create mode 100644 src/calendar/month-picker-stack.json create mode 100644 src/calendar/month-picker.html create mode 100644 src/calendar/month-picker.js create mode 100644 src/chart/accumulation-distribution-indicator-stack.json create mode 100644 src/chart/area-empty-stack.json create mode 100644 src/chart/area-segments-stack.json create mode 100644 src/chart/area-stack.json create mode 100644 src/chart/average-true-range-indicator-stack.json create mode 100644 src/chart/axes-crossing-stack.json create mode 100644 src/chart/bar-stack.json create mode 100644 src/chart/bollinger-stack.json create mode 100644 src/chart/box-and-whisker-stack.json create mode 100644 src/chart/bubble-stack.json create mode 100644 src/chart/candle-stick-stack.json create mode 100644 src/chart/category-stack.json create mode 100644 src/chart/chart-performance-stack.json create mode 100644 src/chart/column-placement-stack.json create mode 100644 src/chart/column-stack.json create mode 100644 src/chart/cross-hair-stack.json create mode 100644 src/chart/dashed-line-stack.json create mode 100644 src/chart/data-label-template-stack.json create mode 100644 src/chart/date-time-category-stack.json create mode 100644 src/chart/date-time-stack.json create mode 100644 src/chart/default-doughnut-stack.json create mode 100644 src/chart/default-pie-stack.json create mode 100644 src/chart/donut-stack.json create mode 100644 src/chart/drill-down-pie-stack.json create mode 100644 src/chart/empty-point-stack.json create mode 100644 src/chart/error-bar-stack.json create mode 100644 src/chart/exponential-moving-average-indicator-stack.json create mode 100644 src/chart/export-stack.json create mode 100644 src/chart/funnel-stack.json create mode 100644 src/chart/grouping-stack.json create mode 100644 src/chart/hilo-open-close-stack.json create mode 100644 src/chart/hilo-stack.json create mode 100644 src/chart/histogram-stack.json create mode 100644 src/chart/indexed-axis-stack.json create mode 100644 src/chart/inversed-stack.json create mode 100644 src/chart/large-stack.json create mode 100644 src/chart/lazy-loading-stack.json create mode 100644 src/chart/line-multi-color-stack.json create mode 100644 src/chart/line-segments-stack.json create mode 100644 src/chart/line-stack.json create mode 100644 src/chart/local-data-stack.json create mode 100644 src/chart/logarithmic-scale-stack.json create mode 100644 src/chart/marker-chart-stack.json create mode 100644 src/chart/momentum-stack.json create mode 100644 src/chart/moving-average-convergence-divergence-indicator-stack.json create mode 100644 src/chart/multi-level-label-stack.json create mode 100644 src/chart/multi-series-chart-stack.json create mode 100644 src/chart/multiple-axis-stack.json create mode 100644 src/chart/numeric-stack.json create mode 100644 src/chart/pareto-stack.json create mode 100644 src/chart/pie-annotation-stack.json create mode 100644 src/chart/pie-empty-point-stack.json create mode 100644 src/chart/pie-radius-stack.json create mode 100644 src/chart/polar-area-stack.json create mode 100644 src/chart/polar-column-stack.json create mode 100644 src/chart/polar-line-stack.json create mode 100644 src/chart/polar-range-column-stack.json create mode 100644 src/chart/polar-scatter-stack.json create mode 100644 src/chart/polar-spline-stack.json create mode 100644 src/chart/polar-stacking-area-stack.json create mode 100644 src/chart/polar-stacking-column-stack.json create mode 100644 src/chart/print-stack.json create mode 100644 src/chart/pyramid-stack.json create mode 100644 src/chart/range-area-stack.json create mode 100644 src/chart/range-bar-stack.json create mode 100644 src/chart/range-column-stack.json create mode 100644 src/chart/range-selection-stack.json create mode 100644 src/chart/relative-strength-index-indicator-stack.json create mode 100644 src/chart/remote-data-stack.json create mode 100644 src/chart/rounded-column-stack.json create mode 100644 src/chart/scatter-plot-stack.json create mode 100644 src/chart/selection-stack.json create mode 100644 src/chart/semi-pie-stack.json create mode 100644 src/chart/simple-moving-average-indicator-stack.json create mode 100644 src/chart/smart-axis-labels-stack.json create mode 100644 src/chart/smart-labels-stack.json create mode 100644 src/chart/sorting-stack.json create mode 100644 src/chart/spline-area-stack.json create mode 100644 src/chart/spline-inversed-stack.json create mode 100644 src/chart/spline-stack.json create mode 100644 src/chart/stacked-area-100-stack.json create mode 100644 src/chart/stacked-area-stack.json create mode 100644 src/chart/stacked-bar-100-stack.json create mode 100644 src/chart/stacked-bar-stack.json create mode 100644 src/chart/stacked-column-100-stack.json create mode 100644 src/chart/stacked-column-stack.json create mode 100644 src/chart/stacked-line -100-stack.json create mode 100644 src/chart/stacked-line -100.html create mode 100644 src/chart/stacked-line -100.js create mode 100644 src/chart/stacked-line-stack.json create mode 100644 src/chart/stacked-line.html create mode 100644 src/chart/stacked-line.js create mode 100644 src/chart/step-area-stack.json create mode 100644 src/chart/step-line-stack.json create mode 100644 src/chart/stochastic-stack.json create mode 100644 src/chart/strip-line-recurrence-stack.json create mode 100644 src/chart/strip-line-stack.json create mode 100644 src/chart/tornado-stack.json create mode 100644 src/chart/trackball-stack.json create mode 100644 src/chart/trend-lines-stack.json create mode 100644 src/chart/triangular-moving-average-indicator-stack.json create mode 100644 src/chart/vertical-stack.json create mode 100644 src/chart/waterfall-stack.json create mode 100644 src/chart/zooming-stack.json create mode 100644 src/circular-gauge/apple-watch-rings-stack.json create mode 100644 src/circular-gauge/apple-watch-rings.html create mode 100644 src/circular-gauge/apple-watch-rings.js create mode 100644 src/circular-gauge/images/image1.svg create mode 100644 src/circular-gauge/images/image2.svg create mode 100644 src/circular-gauge/images/image3.svg create mode 100644 src/circular-gauge/images/image4.svg create mode 100644 src/circular-gauge/images/image5.svg create mode 100644 src/circular-gauge/images/image6.svg create mode 100644 src/dashboard-layout/analytics-dashboard-stack.json create mode 100644 src/dashboard-layout/analytics-dashboard.html create mode 100644 src/dashboard-layout/analytics-dashboard.js create mode 100644 src/dashboard-layout/datasource.js create mode 100644 src/dashboard-layout/datasource.json create mode 100644 src/dashboard-layout/default-stack.json create mode 100644 src/dashboard-layout/default.html create mode 100644 src/dashboard-layout/default.js create mode 100644 src/dashboard-layout/dynamic-widget-stack.json create mode 100644 src/dashboard-layout/dynamic-widget.html create mode 100644 src/dashboard-layout/dynamic-widget.js create mode 100644 src/dashboard-layout/predefined-layouts-stack.json create mode 100644 src/dashboard-layout/predefined-layouts.html create mode 100644 src/dashboard-layout/predefined-layouts.js create mode 100644 src/dashboard-layout/properties-stack.json create mode 100644 src/dashboard-layout/properties.html create mode 100644 src/dashboard-layout/properties.js create mode 100644 src/dashboard-layout/sample.json create mode 100644 src/dashboard-layout/worldmap.json create mode 100644 src/datepicker/month-picker-stack.json create mode 100644 src/datepicker/month-picker.html create mode 100644 src/datepicker/month-picker.js create mode 100644 src/daterangepicker/month-range-picker-stack.json create mode 100644 src/daterangepicker/month-range-picker.html create mode 100644 src/daterangepicker/month-range-picker.js create mode 100644 src/diagram/diagram-events-stack.json create mode 100644 src/diagram/diagram-events.html create mode 100644 src/diagram/diagram-events.js create mode 100644 src/diagram/flow-execution-stack.json create mode 100644 src/diagram/flow-execution.html create mode 100644 src/diagram/flow-execution.js create mode 100644 src/diagram/history-manager-stack.json create mode 100644 src/diagram/history-manager.html create mode 100644 src/diagram/history-manager.js create mode 100644 src/diagram/swimlane-stack.json create mode 100644 src/diagram/swimlane.html create mode 100644 src/diagram/swimlane.js create mode 100644 src/diagram/tooltip-Sample-stack.json create mode 100644 src/diagram/tooltip-Sample.html create mode 100644 src/diagram/tooltip-Sample.js create mode 100644 src/file-manager/api-stack.json create mode 100644 src/file-manager/api.html create mode 100644 src/file-manager/api.js create mode 100644 src/file-manager/custom-thumbnail-stack.json create mode 100644 src/file-manager/custom-thumbnail.html create mode 100644 src/file-manager/custom-thumbnail.js create mode 100644 src/file-manager/locale.json create mode 100644 src/file-manager/overview-stack.json create mode 100644 src/file-manager/overview.html create mode 100644 src/file-manager/overview.js create mode 100644 src/file-manager/sample.json create mode 100644 src/form-validator/default-stack.json create mode 100644 src/form-validator/external-submit-stack.json create mode 100644 src/form-validator/html5-stack.json create mode 100644 src/form-validator/wizardform-stack.json create mode 100644 src/gantt/baseline-stack.json create mode 100644 src/gantt/baseline.html create mode 100644 src/gantt/baseline.js create mode 100644 src/gantt/data-source.js create mode 100644 src/gantt/default-stack.json create mode 100644 src/gantt/default.html create mode 100644 src/gantt/default.js create mode 100644 src/gantt/editing-stack.json create mode 100644 src/gantt/editing.html create mode 100644 src/gantt/editing.js create mode 100644 src/gantt/filtering-stack.json create mode 100644 src/gantt/filtering.html create mode 100644 src/gantt/filtering.js create mode 100644 src/gantt/images/face-mask.svg create mode 100644 src/gantt/images/moments.svg create mode 100644 src/gantt/images/oscar.svg create mode 100644 src/gantt/remote-data-stack.json create mode 100644 src/gantt/remote-data.html create mode 100644 src/gantt/remote-data.js create mode 100644 src/gantt/sample.json create mode 100644 src/gantt/taskbar-template-stack.json create mode 100644 src/gantt/taskbar-template.html create mode 100644 src/gantt/taskbar-template.js create mode 100644 src/gantt/timeline-stack.json create mode 100644 src/gantt/timeline.html create mode 100644 src/gantt/timeline.js create mode 100644 src/gantt/unscheduled-tasks-stack.json create mode 100644 src/gantt/unscheduled-tasks.html create mode 100644 src/gantt/unscheduled-tasks.js create mode 100644 src/linear-gauge/images/cycling1.svg create mode 100644 src/linear-gauge/images/running1.svg create mode 100644 src/linear-gauge/images/walking1.svg create mode 100644 src/list-box/api-stack.json create mode 100644 src/list-box/api.html create mode 100644 src/list-box/api.js create mode 100644 src/list-box/checkbox-stack.json create mode 100644 src/list-box/checkbox.html create mode 100644 src/list-box/checkbox.js create mode 100644 src/list-box/data-source.js create mode 100644 src/list-box/default-stack.json create mode 100644 src/list-box/default.html create mode 100644 src/list-box/default.js create mode 100644 src/list-box/drag-and-drop-stack.json create mode 100644 src/list-box/drag-and-drop.html create mode 100644 src/list-box/drag-and-drop.js create mode 100644 src/list-box/dual-list-box-stack.json create mode 100644 src/list-box/dual-list-box.html create mode 100644 src/list-box/dual-list-box.js create mode 100644 src/list-box/sample.json create mode 100644 src/maps/cyber-attack-map-stack.json create mode 100644 src/maps/cyber-attack-map.html create mode 100644 src/maps/cyber-attack-map.js create mode 100644 src/pdfviewer/right-to-left.html create mode 100644 src/pdfviewer/right-to-left.js create mode 100644 src/pivot-view/cell-template-stack.json create mode 100644 src/pivot-view/cell-template.html create mode 100644 src/pivot-view/cell-template.js create mode 100644 src/pivot-view/external-binding-stack.json create mode 100644 src/pivot-view/external-binding.html create mode 100644 src/pivot-view/external-binding.js create mode 100644 src/pivot-view/grouping-stack.json create mode 100644 src/pivot-view/grouping.html create mode 100644 src/pivot-view/grouping.js create mode 100644 src/pivot-view/selection-stack.json create mode 100644 src/pivot-view/selection.html create mode 100644 src/pivot-view/selection.js create mode 100644 src/pivot-view/toolbar-stack.json create mode 100644 src/pivot-view/toolbar.html create mode 100644 src/pivot-view/toolbar.js create mode 100644 src/range-navigator/date-time-stack.json create mode 100644 src/range-navigator/default-stack.json create mode 100644 src/range-navigator/double-stack.json create mode 100644 src/range-navigator/empty-data-stack.json create mode 100644 src/range-navigator/export-stack.json create mode 100644 src/range-navigator/filter-stack.json create mode 100644 src/range-navigator/light-weight-stack.json create mode 100644 src/range-navigator/logarithmic-stack.json create mode 100644 src/range-navigator/multilevel-stack.json create mode 100644 src/range-navigator/period-selector-default-stack.json create mode 100644 src/range-navigator/period-selector-stack.json create mode 100644 src/range-navigator/period-selector-stocks-stack.json create mode 100644 src/range-navigator/right-to-left-stack.json create mode 100644 src/rich-text-editor/paste-cleanup-stack.json create mode 100644 src/rich-text-editor/paste-cleanup.html create mode 100644 src/rich-text-editor/paste-cleanup.js create mode 100644 src/schedule/adaptive-rows-stack.json create mode 100644 src/schedule/adaptive-rows.html create mode 100644 src/schedule/adaptive-rows.js create mode 100644 src/schedule/calendar-export-import-stack.json create mode 100644 src/schedule/calendar-export-import.html create mode 100644 src/schedule/calendar-export-import.js create mode 100644 src/schedule/excel-export-stack.json create mode 100644 src/schedule/excel-export.html create mode 100644 src/schedule/excel-export.js create mode 100644 src/schedule/resource-stack.json create mode 100644 src/schedule/resource.html create mode 100644 src/schedule/resource.js create mode 100644 src/schedule/search-events-stack.json create mode 100644 src/schedule/search-events.html create mode 100644 src/schedule/search-events.js create mode 100644 src/sidebar/responsive-panel-stack.json create mode 100644 src/sidebar/responsive-panel.html create mode 100644 src/sidebar/responsive-panel.js create mode 100644 src/sidebar/sidebar-menu-stack.json create mode 100644 src/splitter/expand-and-collapse-stack.json create mode 100644 src/splitter/expand-and-collapse.html create mode 100644 src/splitter/expand-and-collapse.js create mode 100644 src/stock-chart/area-stack.json create mode 100644 src/stock-chart/default-stack.json create mode 100644 src/stock-chart/disabled-navigator-stack.json create mode 100644 src/stock-chart/disabled-period-stack.json create mode 100644 src/stock-chart/inversed-area-stack.json create mode 100644 src/stock-chart/live-stack.json create mode 100644 src/stock-chart/multi-pane-stack.json create mode 100644 src/stock-chart/multiple-series-stack.json create mode 100644 src/stock-chart/ohlc-stack.json create mode 100644 src/stock-chart/period-customization-stack.json create mode 100644 src/stock-chart/plot-line-stack.json create mode 100644 src/stock-chart/spline-area-stack.json create mode 100644 src/stock-chart/spline-live-stack.json create mode 100644 src/stock-chart/spline-stack.json create mode 100644 src/stock-chart/stock-events-stack.json create mode 100644 src/stock-chart/stock-events.html create mode 100644 src/stock-chart/stock-events.js create mode 100644 src/stock-chart/strip-line-stack.json create mode 100644 src/textbox/multiline-textbox-stack.json create mode 100644 src/textbox/multiline-textbox.html create mode 100644 src/textbox/multiline-textbox.js create mode 100644 src/tree-grid/checkbox-column-stack.json create mode 100644 src/tree-grid/checkbox-column.html create mode 100644 src/tree-grid/checkbox-column.js create mode 100644 src/tree-grid/checkbox-selection-stack.json create mode 100644 src/tree-grid/checkbox-selection.html create mode 100644 src/tree-grid/checkbox-selection.js create mode 100644 src/tree-grid/images/Bangladesh.png create mode 100644 src/tree-grid/images/Canada.png create mode 100644 src/tree-grid/images/Egypt.png create mode 100644 src/tree-grid/images/Germany.png create mode 100644 src/tree-grid/images/Greece.png create mode 100644 src/tree-grid/images/Map.png create mode 100644 src/tree-grid/images/USA.png create mode 100644 src/tree-grid/treegrid.overview-stack.json create mode 100644 src/tree-grid/treegrid.overview.html create mode 100644 src/tree-grid/treegrid.overview.js create mode 100644 src/treemap/rtl-stack.json create mode 100644 src/treemap/rtl.html create mode 100644 src/treemap/rtl.js create mode 100644 styles/images/SyncfusionLogo.svg diff --git a/index.html b/index.html index 3155905e..3cc117ce 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@
-
+
All Controls
@@ -82,7 +82,7 @@
- +
About
 @@ -197,9 +197,13 @@ Bootstrap +
  • + + Bootstrap v4 +
  • - - High Contrast + + High Contrast
    • @@ -219,6 +223,7 @@ +
    diff --git a/src/accordion/ajax-stack.json b/src/accordion/ajax-stack.json index b600bd50..9864e0d0 100644 --- a/src/accordion/ajax-stack.json +++ b/src/accordion/ajax-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    iPhone X Product Specification
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Proximity sensorYes
    Face IDYes
    AccelerometerYes
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    HardwareChipApple A11 Bionic chip with 64-bit architecture
    Embedded M11 motion coprocessor
    Capacity64GB/256GB
    SoftwareOperating SystemiOS 11
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Video Recording
    4K video recording
    1080p & 720p HD video recording
    Optical zoom, 6x digital zoom
    Slow motion video support
    Take 8MP still photos while recording 4K video
    Noise reduction
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Camera 12MP wide-angle
    Live Photos with stabilization
    Body and face detection
    TrueDepth Camera 7MP camera
    Animoji
    Face detection
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion Ajax Sample\n */\nvar acrdnObj,nestAcrdn;\n\n var ajax = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/accordion/ajax-content.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n //Initialize Accordion component\n acrdnObj = new ej.navigations.Accordion({\n expandMode: 'Single',\n expanding: expand,\n items: [\n { header: 'Network & Connectivity', content: data, expanded: true },\n { header: 'Feature', content: '
    ' },\n { header: 'Hardware & Software', content: '#Hard_Soft_features' }\n ]\n });\n //Render initialized Accordion component\n acrdnObj.appendTo('#Accordion_Nested');\n };\n\n//Expanding Event function for Accordion component.\nfunction expand(e) {\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n if (e.element.querySelectorAll('.e-accordion').length > 0) {\n return;\n }\n //Initialize Nested Accordion component\n nestAcrdn = new ej.navigations.Accordion({\n expandMode: 'Single',\n items: [\n { header: 'Sensor', content: '#Sensor_features' },\n { header: 'Camera', content: '#Camera_features' },\n { header: 'Video Recording', content: '#Video_Rec_features' },\n ]\n });\n //Render initialized Nested Accordion component\n nestAcrdn.appendTo('#nested_Acc');\n }\n}\n\n\n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    iPhone X Product Specification
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Proximity sensorYes
    Face IDYes
    AccelerometerYes
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    HardwareChipApple A11 Bionic chip with 64-bit architecture
    Embedded M11 motion coprocessor
    Capacity64GB/256GB
    SoftwareOperating SystemiOS 11
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Video Recording
    4K video recording
    1080p & 720p HD video recording
    Optical zoom, 6x digital zoom
    Slow motion video support
    Take 8MP still photos while recording 4K video
    Noise reduction
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Camera 12MP wide-angle
    Live Photos with stabilization
    Body and face detection
    TrueDepth Camera 7MP camera
    Animoji
    Face detection
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion Ajax Sample\n */\nvar acrdnObj,nestAcrdn;\n\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/accordion/ajax-content.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n //Initialize Accordion component\n acrdnObj = new ej.navigations.Accordion({\n expandMode: 'Single',\n expanding: expand,\n items: [\n { header: 'Network & Connectivity', content: data, expanded: true },\n { header: 'Feature', content: '
    ' },\n { header: 'Hardware & Software', content: '#Hard_Soft_features' }\n ]\n });\n //Render initialized Accordion component\n acrdnObj.appendTo('#Accordion_Nested');\n };\n\n//Expanding Event function for Accordion component.\nfunction expand(e) {\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n if (e.element.querySelectorAll('.e-accordion').length > 0) {\n return;\n }\n //Initialize Nested Accordion component\n nestAcrdn = new ej.navigations.Accordion({\n expandMode: 'Single',\n items: [\n { header: 'Sensor', content: '#Sensor_features' },\n { header: 'Camera', content: '#Camera_features' },\n { header: 'Video Recording', content: '#Video_Rec_features' },\n ]\n });\n //Render initialized Nested Accordion component\n nestAcrdn.appendTo('#nested_Acc');\n }\n}\n\n\n "} \ No newline at end of file diff --git a/src/accordion/ajax.html b/src/accordion/ajax.html index 26df2855..67801864 100644 --- a/src/accordion/ajax.html +++ b/src/accordion/ajax.html @@ -141,7 +141,7 @@ margin: 0 10% 0 10%; padding-bottom: 25px; } - + /* custom code start*/ #source_link { float: right; margin-right: 10px; @@ -157,4 +157,5 @@ margin-right: 0px; } } + /* custom code end*/ \ No newline at end of file diff --git a/src/accordion/default-stack.json b/src/accordion/default-stack.json index efe18154..a622971b 100644 --- a/src/accordion/default-stack.json +++ b/src/accordion/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"} \ No newline at end of file diff --git a/src/accordion/default.html b/src/accordion/default.html index c9e2f14f..5accf48a 100644 --- a/src/accordion/default.html +++ b/src/accordion/default.html @@ -19,6 +19,7 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/accordion/icons-stack.json b/src/accordion/icons-stack.json index aa5f33cb..31494317 100644 --- a/src/accordion/icons-stack.json +++ b/src/accordion/icons-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n
  • Marathon
    • \n
  • Javelin Throw
    • \n
  • Discus Throw
    • \n
  • High Jump
    • \n
  • Long Jump
    • \n
    \n
    \n
  • Diving
    • \n
  • Swimming
    • \n
  • Marathon Swimming
    • \n
  • Synchronized Swimming
    • \n
  • Water Polo
    • \n
    \n
    \n
  • Cycling BMX
    • \n
  • Cycling Mountain Bike
    • \n
  • Cycle Racing
    • \n
  • Sailing
    • \n
  • Rowing
    • \n
    \n
    \n
  • Table Tennis
    • \n
  • Badminton
    • \n
  • Volleyball
    • \n
  • Boxing
    • \n
  • Swimming
    • \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
  • Marathon
    • \n
  • Javelin Throw
    • \n
  • Discus Throw
    • \n
  • High Jump
    • \n
  • Long Jump
    • \n
    \n
    \n
  • Diving
    • \n
  • Swimming
    • \n
  • Marathon Swimming
    • \n
  • Synchronized Swimming
    • \n
  • Water Polo
    • \n
    \n
    \n
  • Cycling BMX
    • \n
  • Cycling Mountain Bike
    • \n
  • Cycle Racing
    • \n
  • Sailing
    • \n
  • Rowing
    • \n
    \n
    \n
  • Table Tennis
    • \n
  • Badminton
    • \n
  • Volleyball
    • \n
  • Boxing
    • \n
  • Swimming
    • \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"} \ No newline at end of file diff --git a/src/accordion/icons.html b/src/accordion/icons.html index fb31d3df..5fdfbccf 100644 --- a/src/accordion/icons.html +++ b/src/accordion/icons.html @@ -46,6 +46,7 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/accordion/right-to-left-stack.json b/src/accordion/right-to-left-stack.json index 04fa9856..e6a31b8c 100644 --- a/src/accordion/right-to-left-stack.json +++ b/src/accordion/right-to-left-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n
  • Marathon
    • \n
  • Javelin Throw
    • \n
  • Discus Throw
    • \n
  • High Jump
    • \n
  • Long Jump
    • \n
    \n
    \n
  • Diving
    • \n
  • Swimming
    • \n
  • Marathon Swimming
    • \n
  • Synchronized Swimming
    • \n
  • Water Polo
    • \n
    \n
    \n
  • Cycling BMX
    • \n
  • Cycling Mountain Bike
    • \n
  • Cycle Racing
    • \n
  • Sailing
    • \n
  • Rowing
    • \n
    \n
    \n
  • Table Tennis
    • \n
  • Badminton
    • \n
  • Volleyball
    • \n
  • Boxing
    • \n
  • Swimming
    • \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion RTL Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n enableRtl: true,\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_rtl');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
  • Marathon
    • \n
  • Javelin Throw
    • \n
  • Discus Throw
    • \n
  • High Jump
    • \n
  • Long Jump
    • \n
    \n
    \n
  • Diving
    • \n
  • Swimming
    • \n
  • Marathon Swimming
    • \n
  • Synchronized Swimming
    • \n
  • Water Polo
    • \n
    \n
    \n
  • Cycling BMX
    • \n
  • Cycling Mountain Bike
    • \n
  • Cycle Racing
    • \n
  • Sailing
    • \n
  • Rowing
    • \n
    \n
    \n
  • Table Tennis
    • \n
  • Badminton
    • \n
  • Volleyball
    • \n
  • Boxing
    • \n
  • Swimming
    • \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Accordion RTL Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n enableRtl: true,\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_rtl');\n"} \ No newline at end of file diff --git a/src/auto-complete/custom-filtering-stack.json b/src/auto-complete/custom-filtering-stack.json index aa09f499..5900826f 100644 --- a/src/auto-complete/custom-filtering-stack.json +++ b/src/auto-complete/custom-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"} \ No newline at end of file diff --git a/src/auto-complete/data-binding-stack.json b/src/auto-complete/data-binding-stack.json index 974b6051..f013654e 100644 --- a/src/auto-complete/data-binding-stack.json +++ b/src/auto-complete/data-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n

    Local Data

    \n \n
    \n
    \n
    \n
    \n

    Remote Data

    \n \n
    \n
    \n
    \n
    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n

    Local Data

    \n \n
    \n
    \n
    \n
    \n

    Remote Data

    \n \n
    \n
    \n
    \n
    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n
    \n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { value: 'FirstName' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"} \ No newline at end of file diff --git a/src/auto-complete/data-binding.html b/src/auto-complete/data-binding.html index a25c6434..9954891f 100644 --- a/src/auto-complete/data-binding.html +++ b/src/auto-complete/data-binding.html @@ -54,9 +54,11 @@

    Remote Data

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/auto-complete/default-stack.json b/src/auto-complete/default-stack.json index c6892c54..fdf205eb 100644 --- a/src/auto-complete/default-stack.json +++ b/src/auto-complete/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"} \ No newline at end of file diff --git a/src/auto-complete/diacritics-filtering-stack.json b/src/auto-complete/diacritics-filtering-stack.json index 47ec77ff..95401beb 100644 --- a/src/auto-complete/diacritics-filtering-stack.json +++ b/src/auto-complete/diacritics-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file diff --git a/src/auto-complete/grouping-icon-stack.json b/src/auto-complete/grouping-icon-stack.json index 1156be21..e8aeb4d7 100644 --- a/src/auto-complete/grouping-icon-stack.json +++ b/src/auto-complete/grouping-icon-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n

    Grouping

    \n \n
    \n
    \n\n
    \n
    \n

    Icons

    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n

    Grouping

    \n \n
    \n
    \n\n
    \n
    \n

    Icons

    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"} \ No newline at end of file diff --git a/src/auto-complete/grouping-icon.html b/src/auto-complete/grouping-icon.html index 654ba091..cb543b82 100644 --- a/src/auto-complete/grouping-icon.html +++ b/src/auto-complete/grouping-icon.html @@ -31,6 +31,8 @@

    Icons

    \n
    \n
    \n \n
    \n
    \n
    \n\n
    \n \n \n \n \n \n
    FilterType :
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n
    \n \n \n \n \n \n
    FilterType :
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"} \ No newline at end of file diff --git a/src/auto-complete/sample.json b/src/auto-complete/sample.json index d288f4f9..35b8f7b2 100644 --- a/src/auto-complete/sample.json +++ b/src/auto-complete/sample.json @@ -4,13 +4,13 @@ "category": "Dropdowns", "ftName": "autocomplete", "samples": [ - { "url": "default", "name": "Default Functionalities", "description": "This demo for Syncfusion JavaScript autocomplete control shows the default rendering of the autocomplete with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } }, - { "url": "grouping-icon", "name": "Grouping and Icons", "description": "This demo explains the grouping based on different categories with individual header and icon support in the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } }, - { "url": "data-binding", "name": "Data Binding", "description": "This demo for Syncfusion JavaScript autocomplete control shows how to bind with local data source and how to fetch data from remote data service.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } }, - { "url": "template", "name": "Template", "description": "This demo for Syncfusion JavaScript autocomplete control shows how to customize the appearance of each item in the pop-up list using template option.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } }, - { "url": "highlight", "name": "Highlight", "description": "This demo for Syncfusion JavaScript autocomplete control shows the built-in support to highlight the searched characters in the suggested list items.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } }, - { "url": "custom-filtering", "name": "Custom Filtering", "description": "This demo explains the custom filtering functionalities of the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } }, - { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This demo explains the diacritics filter functionality of the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } } + { "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript(ES5) autocomplete control with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } }, + { "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } }, + { "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } }, + { "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript(ES5) autocomplete control pop-up list using template.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } }, + { "url": "highlight", "name": "Highlight", "description": "This example demonstrates how to highlight the searched characters in the suggested list items of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } }, + { "url": "custom-filtering", "name": "Custom Filtering", "description": "This example demonstrates how to achieve the custom filtering functionalities in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } }, + { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } } ], "dataSourcePath": "src/drop-down-list/data-source.js" } \ No newline at end of file diff --git a/src/auto-complete/template-stack.json b/src/auto-complete/template-stack.json index 6c6209a9..f18d08df 100644 --- a/src/auto-complete/template-stack.json +++ b/src/auto-complete/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '
    Photo Employee Info
    ',\n // set the template content for list items\n itemTemplate: '
    \"employee\"/' +\n '
    ${Name}
    ${Designation}
    ',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '
    Photo Employee Info
    ',\n // set the template content for list items\n itemTemplate: '
    \"employee\"/' +\n '
    ${Name}
    ${Designation}
    ',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"} \ No newline at end of file diff --git a/src/auto-complete/template.html b/src/auto-complete/template.html index cd74688e..ebcadea0 100644 --- a/src/auto-complete/template.html +++ b/src/auto-complete/template.html @@ -7,12 +7,14 @@
    -

    This sample demonstrates the template functionalities of the AutoComplete. Type a character in the AutoComplete element +

    This sample demonstrates the template functionalities of the AutoComplete. Type a character in the AutoComplete + element and choose an item from the customized list

    -

    The AutoComplete has been provided with several options to customize each list items, group title, header and footer +

    The AutoComplete has been provided with several options to customize each list items, group title, header and + footer elements.

    @@ -22,7 +24,8 @@
  • HeaderTemplate - To customize the header element.

    • More information on the template feature configuration can be found in the - documentation section. + documentation + section.

    @@ -42,6 +45,8 @@ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif"; } + /* custom code start*/ + .fabric .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -49,6 +54,10 @@ font-weight: 400; } + .bootstrap4 .header { + color: #6c757d; + } + .bootstrap .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -106,7 +115,18 @@ .e-bigger.bootstrap .empImage { margin: 0px 10px 0 20px; } + .bootstrap4 #employees_popup.e-popup .empImage { + margin: 0px 16px; + } + .bootstrap4 #employees_popup.e-popup .job { + margin-top: 0; + } + + .e-bigger.bootstrap4 #employees_popup.e-popup .job { + margin-top: -15px; + } + /* custom code end*/ .info { margin-left: 17px; } diff --git a/src/avatar/badge-stack.json b/src/avatar/badge-stack.json index 65cc5efb..333ccf35 100644 --- a/src/avatar/badge-stack.json +++ b/src/avatar/badge-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 6\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 12\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 46\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 82\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 99+\n
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 6\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 12\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 46\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 82\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 99+\n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 6\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 12\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 46\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 82\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 99+\n
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 6\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 12\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 46\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 82\n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n \n 99+\n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/avatar/badge.html b/src/avatar/badge.html index faa5890d..973b68a7 100644 --- a/src/avatar/badge.html +++ b/src/avatar/badge.html @@ -194,4 +194,8 @@ padding: 10px 11px 10px 0px; color: rgba(0, 0, 0, 0.75) } - \ No newline at end of file + + .bootstrap4 .e-avatar-showcase.e-card { + box-shadow: none; + } + diff --git a/src/avatar/card-stack.json b/src/avatar/card-stack.json index c990aa60..7c86fe35 100644 --- a/src/avatar/card-stack.json +++ b/src/avatar/card-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n  \n
    \n
    \n
    \n
    Laura Callahan
    \n
    Sales Coordinator
    \n
    \n
    \n
    \n

    Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.

    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n
    \n \n
    \n \"profile_pic\"\n
    \n  \n
    \n
    \n
    \n
    Laura Callahan
    \n
    Sales Coordinator
    \n
    \n
    \n
    \n

    Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.

    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/avatar/default-stack.json b/src/avatar/default-stack.json index 5e0eac96..c6f5ff35 100644 --- a/src/avatar/default-stack.json +++ b/src/avatar/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Default
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Circle
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Default
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Circle
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/avatar/default.html b/src/avatar/default.html index 912e88a6..b5c5c912 100644 --- a/src/avatar/default.html +++ b/src/avatar/default.html @@ -158,4 +158,8 @@ padding: 10px 0 10px 0; overflow: visible; } - \ No newline at end of file + + .bootstrap4 .e-avatar-showcase.e-card { + box-shadow: none; + } + diff --git a/src/avatar/listview-stack.json b/src/avatar/listview-stack.json index 16d7519e..fd0d4863 100644 --- a/src/avatar/listview-stack.json +++ b/src/avatar/listview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Avatar listview\n */\n\n var letterAvatarList = new ej.lists.ListView({\n // Bind listview datasource\n dataSource: window.dataSource,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '
    ' +\n '${if(avatar!==\"\")}' +\n '${avatar}' +\n '${else}' +\n ' ' +\n '${/if}' +\n '' +\n '${text}
    ',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Avatar listview\n */\n\n var letterAvatarList = new ej.lists.ListView({\n // Bind listview datasource\n dataSource: window.dataSource,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '
    ' +\n '${if(avatar!==\"\")}' +\n '${avatar}' +\n '${else}' +\n ' ' +\n '${/if}' +\n '' +\n '${text}
    ',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"} \ No newline at end of file diff --git a/src/avatar/listview.html b/src/avatar/listview.html index 3588f09c..68141354 100644 --- a/src/avatar/listview.html +++ b/src/avatar/listview.html @@ -114,4 +114,13 @@ .pic04 { background-image: url('./src/avatar/images/pic04.png'); } - \ No newline at end of file + + .bootstrap4 #letterAvatarList .e-list-item { + line-height: 30px; + padding: 8px 16px 8px 16px; + } + + .bootstrap4 #letterAvatarList .e-list-item .e-avatar { + top: calc(100% - 48px); + } + diff --git a/src/avatar/types-stack.json b/src/avatar/types-stack.json index 3020ded2..fa950d73 100644 --- a/src/avatar/types-stack.json +++ b/src/avatar/types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n \"avatar\"\n
    \n
    \n
    \n
    Image
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    SVG
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    GR
    \n
    \n
    \n
    Initial
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    Font Icon
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    User
    \n
    \n
    \n
    Word
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    Custom
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n \"avatar\"\n
    \n
    \n
    \n
    Image
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    SVG
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    GR
    \n
    \n
    \n
    Initial
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    Font Icon
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    User
    \n
    \n
    \n
    Word
    \n
    \n
    \n
    \n\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    Custom
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/avatar/types.html b/src/avatar/types.html index ad095c9a..80bb0195 100644 --- a/src/avatar/types.html +++ b/src/avatar/types.html @@ -223,4 +223,12 @@ .e-avatar.custom { background-color: blueviolet; } - \ No newline at end of file + + .bootstrap4 .e-avatar.custom { + background-color: #cfd5ff; + } + + .bootstrap4 .e-avatar .chrome { + background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23666666' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%; + } + diff --git a/src/badge/accordion-stack.json b/src/badge/accordion-stack.json index 97e17f7c..e771f496 100644 --- a/src/badge/accordion-stack.json +++ b/src/badge/accordion-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Accordion Integration\n */\n\n\n // Assigning badge data\n var badgeContent = ['7 New', '27 New', '2 New', '14 New'];\n\n var template = '
  • ' +\n 'Message Thread
  • Message Thread
    • ';\n //Initialize Accordion component\n var acrdnObj = new ej.navigations.Accordion({\n // Assigning accordion data \n items: [\n { header: 'Robert', iconCss: 'e-people e-acrdn-icons', content: template, expanded: true },\n { header: 'Kevin', iconCss: 'e-people e-acrdn-icons', content: template },\n { header: 'Eric', iconCss: 'e-people e-acrdn-icons', content: template },\n { header: 'Peter', iconCss: 'e-people e-acrdn-icons', content: template }\n ],\n created: function () {\n // Appending Badge component after the accordion rendered in created event\n var element = document.getElementById('accordion');\n var iconElement = Array.prototype.slice.call((element).querySelectorAll('.e-toggle-icon'));\n for (var i = 0; i < iconElement.length; i++) {\n // Success Badge Element\n var badge = ej.base.createElement('span', { className: 'e-badge e-badge-success' });\n badge.textContent = badgeContent[i];\n iconElement[i].appendChild(badge);\n }\n }\n });\n //Render initialized Accordion component\n acrdnObj.appendTo('#accordion');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Accordion Integration\n */\n\n\n // Assigning badge data\n var badgeContent = ['7 New', '27 New', '2 New', '14 New'];\n\n var template = '
  • ' +\n 'Message Thread
  • Message Thread
    • ';\n //Initialize Accordion component\n var acrdnObj = new ej.navigations.Accordion({\n // Assigning accordion data \n items: [\n { header: 'Robert', iconCss: 'e-people e-acrdn-icons', content: template, expanded: true },\n { header: 'Kevin', iconCss: 'e-people e-acrdn-icons', content: template },\n { header: 'Eric', iconCss: 'e-people e-acrdn-icons', content: template },\n { header: 'Peter', iconCss: 'e-people e-acrdn-icons', content: template }\n ],\n created: function () {\n // Appending Badge component after the accordion rendered in created event\n var element = document.getElementById('accordion');\n var iconElement = Array.prototype.slice.call((element).querySelectorAll('.e-toggle-icon'));\n for (var i = 0; i < iconElement.length; i++) {\n // Success Badge Element\n var badge = ej.base.createElement('span', { className: 'e-badge e-badge-success' });\n badge.textContent = badgeContent[i];\n iconElement[i].appendChild(badge);\n }\n }\n });\n //Render initialized Accordion component\n acrdnObj.appendTo('#accordion');\n"} \ No newline at end of file diff --git a/src/badge/default-stack.json b/src/badge/default-stack.json index e8a85d81..635cb7a9 100644 --- a/src/badge/default-stack.json +++ b/src/badge/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/badge/default.html b/src/badge/default.html index ff78258b..4f177d29 100644 --- a/src/badge/default.html +++ b/src/badge/default.html @@ -100,16 +100,14 @@ box-shadow: none; } - .highcontrast .e-btn-group.e-custom-button .e-btn { - background: #000; - } - .highcontrast .e-btn-group.e-custom-button .e-btn:focus { outline: 0px; color: white; } - .e-btn-group.e-custom-button .e-btn { + .fabric .e-btn-group.e-custom-button .e-btn, + .material .e-btn-group.e-custom-button .e-btn, + .bootstrap .e-btn-group.e-custom-button .e-btn { background: #F6F7F9; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); text-transform: initial; diff --git a/src/badge/listview-stack.json b/src/badge/listview-stack.json index 9327cf8e..35f640ba 100644 --- a/src/badge/listview-stack.json +++ b/src/badge/listview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS listview integration\n */\n\n var list = new ej.lists.ListView({\n // Bind listview datasource\n dataSource: window.listData,\n // Assign header title\n headerTitle: 'Inbox',\n // Enable header\n showHeader: true,\n // Assign template\n template: '
     ' +\n '${text} ' +\n '${messages}
    ',\n\n // Map fields\n fields: { groupBy: 'type' },\n // Bind actioncomplete event\n actionComplete: function () {\n var list = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];\n list.style.display = 'none';\n }\n });\n list.appendTo('#lists');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS listview integration\n */\n\n var list = new ej.lists.ListView({\n // Bind listview datasource\n dataSource: window.listData,\n // Assign header title\n headerTitle: 'Inbox',\n // Enable header\n showHeader: true,\n // Assign template\n template: '
     ' +\n '${text} ' +\n '${messages}
    ',\n\n // Map fields\n fields: { groupBy: 'type' },\n // Bind actioncomplete event\n actionComplete: function () {\n var list = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];\n list.style.display = 'none';\n }\n });\n list.appendTo('#lists');\n"} \ No newline at end of file diff --git a/src/badge/notification-stack.json b/src/badge/notification-stack.json index 9449a3cf..23dcde33 100644 --- a/src/badge/notification-stack.json +++ b/src/badge/notification-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n \n
    Notification
    \n
    \n
    \n \n 99+\n
    \n\n
    \n
    \n \n 7\n
    \n\n
    \n
    \n \n 99+\n
    \n\n\n
    \n
    \n \n 18\n
    \n\n \n
    Circle
    \n
    \n
    \n \n 19\n
    \n\n
    \n
    \n \n 27\n
    \n\n
    \n
    \n \n 3\n
    \n\n
    \n
    \n \n 85\n
    \n\n \n
    Dot
    \n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Notification Badge\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n \n
    Notification
    \n
    \n
    \n \n 99+\n
    \n\n
    \n
    \n \n 7\n
    \n\n
    \n
    \n \n 99+\n
    \n\n\n
    \n
    \n \n 18\n
    \n\n \n
    Circle
    \n
    \n
    \n \n 19\n
    \n\n
    \n
    \n \n 27\n
    \n\n
    \n
    \n \n 3\n
    \n\n
    \n
    \n \n 85\n
    \n\n \n
    Dot
    \n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Notification Badge\n */\n\n //\n"} \ No newline at end of file diff --git a/src/badge/toolbar-stack.json b/src/badge/toolbar-stack.json index 98ed2394..edabc475 100644 --- a/src/badge/toolbar-stack.json +++ b/src/badge/toolbar-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n Notification\n
    \n
    \n
    \n
    \n \n 35\n
    \n
    \n
    \n
    \n
    \n \n 28\n
    \n
    \n
    \n
    \n
    \n \n 98\n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n Notification\n
    \n
    \n
    \n
    \n \n 35\n
    \n
    \n
    \n
    \n
    \n \n 28\n
    \n
    \n
    \n
    \n
    \n \n 98\n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"} \ No newline at end of file diff --git a/src/badge/types-stack.json b/src/badge/types-stack.json index 3cc8101b..bc02223c 100644 --- a/src/badge/types-stack.json +++ b/src/badge/types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n
    \n \n \n 10\n
    \n
    \n
    \n
    \n .e-badge-primary\n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-secondary\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-success\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-danger\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-warning\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-info\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-light\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-dark\n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Badge Types\n */\n\n //\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n \n 10\n
    \n
    \n
    \n
    \n .e-badge-primary\n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-secondary\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-success\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-danger\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-warning\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-info\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-light\n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n .e-badge-dark\n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for CSS Badge Types\n */\n\n //\n"} \ No newline at end of file diff --git a/src/button/button-group-stack.json b/src/button/button-group-stack.json index 2313a83c..266137a1 100644 --- a/src/button/button-group-stack.json +++ b/src/button/button-group-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n

    Default

    \n
    \n \n \n \n
    \n
    \n
    \n

    Single selection

    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n

    Multiple selection

    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for basic ButtonGroup.\n */\n\n\n var buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-watch'});\n buttonElement.appendTo('#watch');\n\n buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-star'});\n buttonElement.appendTo('#star');\n\n buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-download'});\n buttonElement.appendTo('#download');\n\n // To enable ripple in checkbox/radio type ButtonGroup.\n var buttons = document.querySelectorAll('label.e-btn');\n var button;\n for (var i = 0; i < buttons.length; i++) {\n button = buttons.item(i);\n ej.base.rippleEffect(button, { selector: '.e-btn' });\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n

    Default

    \n
    \n \n \n \n
    \n
    \n
    \n

    Single selection

    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n

    Multiple selection

    \n
    \n \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for basic ButtonGroup.\n */\n\n\n var buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-watch'});\n buttonElement.appendTo('#watch');\n\n buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-star'});\n buttonElement.appendTo('#star');\n\n buttonElement = new ej.buttons.Button({iconCss: 'bg-icons e-btngrp-download'});\n buttonElement.appendTo('#download');\n\n // To enable ripple in checkbox/radio type ButtonGroup.\n var buttons = document.querySelectorAll('label.e-btn'), button;\n for (var i = 0; i < buttons.length; i++) {\n button = buttons.item(i);\n ej.base.rippleEffect(button, { selector: '.e-btn' });\n }\n\n"} \ No newline at end of file diff --git a/src/button/button-group.html b/src/button/button-group.html index 22e9e47c..b1d5ef9c 100644 --- a/src/button/button-group.html +++ b/src/button/button-group.html @@ -40,6 +40,7 @@ +

    The following sample demonstrates the default functionalities of normal, radio, and checkbox button groups.

    @@ -57,10 +58,26 @@

    More information on ButtonGroup can be found in this - + documentation section.

    + + + + \ No newline at end of file diff --git a/src/button/button-group.js b/src/button/button-group.js index b29d7421..47db27a4 100644 --- a/src/button/button-group.js +++ b/src/button/button-group.js @@ -13,8 +13,7 @@ this.default = function() { buttonElement.appendTo('#download'); // To enable ripple in checkbox/radio type ButtonGroup. - var buttons = document.querySelectorAll('label.e-btn'); - var button; + var buttons = document.querySelectorAll('label.e-btn'), button; for (var i = 0; i < buttons.length; i++) { button = buttons.item(i); ej.base.rippleEffect(button, { selector: '.e-btn' }); diff --git a/src/button/checkbox-stack.json b/src/button/checkbox-stack.json new file mode 100644 index 00000000..eb173501 --- /dev/null +++ b/src/button/checkbox-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n","index.js":"{{ripple}}\n var checkBoxObj = new ej.buttons.CheckBox({ label: 'CheckBox: true', checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n\n checkBoxObj = new ej.buttons.CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true });\n checkBoxObj.appendTo('#disabled');\n\n checkBoxObj = new ej.buttons.CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true });\n checkBoxObj.appendTo('#indeterminate');\n\n // function to handle the CheckBox change event\n function onChange(args) {\n this.label = 'CheckBox: ' + args.checked;\n }\n"} \ No newline at end of file diff --git a/src/button/checkbox.html b/src/button/checkbox.html new file mode 100644 index 00000000..8b391122 --- /dev/null +++ b/src/button/checkbox.html @@ -0,0 +1,73 @@ +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    This sample demonstrates the default functionalities of the CheckBox. Click the CheckBox element to toggle states between checked/unchecked.

    +
    +
    +

    + CheckBox is a graphical user interface element that allows to select one or more options from the choices. It contains checked, unchecked, and indeterminate states. +

    +

    + In this sample, checked state is achieved by using the + checked + property, indeterminate state is achieved by using the indeterminate + property, and disabled state is achieved by using the disabled + property. +

    +

    + More information about CheckBox can be found in this + + documentation section. +

    +
    + + + + + \ No newline at end of file diff --git a/src/button/checkbox.js b/src/button/checkbox.js new file mode 100644 index 00000000..12fc7e67 --- /dev/null +++ b/src/button/checkbox.js @@ -0,0 +1,15 @@ +this.default = function() { + var checkBoxObj = new ej.buttons.CheckBox({ label: 'CheckBox: true', checked: true, change: onChange }); + checkBoxObj.appendTo('#checked'); + + checkBoxObj = new ej.buttons.CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true }); + checkBoxObj.appendTo('#disabled'); + + checkBoxObj = new ej.buttons.CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true }); + checkBoxObj.appendTo('#indeterminate'); + + // function to handle the CheckBox change event + function onChange(args) { + this.label = 'CheckBox: ' + args.checked; + } +}; \ No newline at end of file diff --git a/src/button/default-stack.json b/src/button/default-stack.json index 2cbca71a..1cbadfa4 100644 --- a/src/button/default-stack.json +++ b/src/button/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#primarybtn');\n\n button = new ej.buttons.Button({});\n button.appendTo('#normalbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#outlinebtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-flat e-primary' });\n button.appendTo('#flatbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-success' });\n button.appendTo('#successbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-warning' });\n button.appendTo('#warningbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-danger' });\n button.appendTo('#dangerbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-info' });\n button.appendTo('#infobtn');\n\n button = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });\n button.appendTo('#roundbtn');\n\n var toggleBtn = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-play-icon', cssClass: 'e-flat e-primary', isToggle: true });\n toggleBtn.appendTo('#togglebtn');\n\n button = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-open-icon', cssClass: 'e-flat e-primary', iconPosition: 'Right' });\n button.appendTo('#openiconbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-small'});\n button.appendTo('#smallbtn');\n\n //Toggle button click event handler\n toggleBtn.element.onclick = function () {\n if (toggleBtn.element.classList.contains('e-active')) {\n toggleBtn.content = 'Pause';\n toggleBtn.iconCss = 'e-btn-sb-icons e-pause-icon';\n } else {\n toggleBtn.content = 'Play';\n toggleBtn.iconCss = 'e-btn-sb-icons e-play-icon';\n }\n }; \n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#primarybtn');\n\n button = new ej.buttons.Button({});\n button.appendTo('#normalbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#outlinebtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-flat e-primary' });\n button.appendTo('#flatbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-success' });\n button.appendTo('#successbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-warning' });\n button.appendTo('#warningbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-danger' });\n button.appendTo('#dangerbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-info' });\n button.appendTo('#infobtn');\n\n button = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-add-icon', cssClass: 'e-small e-round', isPrimary: true });\n button.appendTo('#roundbtn');\n\n var toggleBtn = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-play-icon', cssClass: 'e-flat e-primary', isToggle: true });\n toggleBtn.appendTo('#togglebtn');\n\n button = new ej.buttons.Button({ iconCss: 'e-btn-sb-icons e-open-icon', cssClass: 'e-flat e-primary', iconPosition: 'Right' });\n button.appendTo('#openiconbtn');\n\n button = new ej.buttons.Button({ cssClass: 'e-small'});\n button.appendTo('#smallbtn');\n\n // Toggle button click event handler\n toggleBtn.element.onclick = function () {\n if (toggleBtn.element.classList.contains('e-active')) {\n toggleBtn.content = 'Pause';\n toggleBtn.iconCss = 'e-btn-sb-icons e-pause-icon';\n } else {\n toggleBtn.content = 'Play';\n toggleBtn.iconCss = 'e-btn-sb-icons e-play-icon';\n }\n }; \n"} \ No newline at end of file diff --git a/src/button/default.html b/src/button/default.html index 4e4f7603..0f07d465 100644 --- a/src/button/default.html +++ b/src/button/default.html @@ -58,6 +58,7 @@
    +

    This sample demonstrates the default functionalities of the Button with different types and predefined styles.

    @@ -77,13 +78,15 @@ documentation section.

    + + + +
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n // DropDownButton items declaration\n var items = [\n {\n text: 'Dashboard',\n iconCss: 'e-ddb-icons e-dashboard'\n },\n {\n text: 'Notifications',\n iconCss: 'e-ddb-icons e-notifications',\n },\n {\n text: 'User Settings',\n iconCss: 'e-ddb-icons e-settings',\n },\n {\n text: 'Log Out',\n iconCss: 'e-ddb-icons e-logout'\n }];\n\n var btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' });\n btnObj.appendTo('#iconbtn');\n\n btnObj = new ej.splitbuttons.DropDownButton({ items: items });\n btnObj.appendTo('#textbtn');\n\n btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' });\n btnObj.appendTo('#icontextbtn');\n\n btnObj = new ej.splitbuttons.DropDownButton({items: items, cssClass: 'e-caret-hide'});\n btnObj.appendTo('#custombtn'); \n"} \ No newline at end of file diff --git a/src/button/dropdown-button.html b/src/button/dropdown-button.html new file mode 100644 index 00000000..e9a9e56b --- /dev/null +++ b/src/button/dropdown-button.html @@ -0,0 +1,167 @@ +
    +
    + +
    +
    + +
    +

    This sample demonstrates the default functionalities of the DropDownButton. + Clicking DropDownButton will display popup with list of action items.

    +
    +
    +

    + The DropDownButton component is used to toggle contextual overlays for displaying list of action items. + It can contain both text and images. +

    +

    + In this sample, DropDownButton contains icon, content and list of action items, and can be added using + + iconCss, + + + + content + + and + + items + + property. +

    +

    + More information about DropDownButton can be found in this + + documentation section. +

    +
    + + + + + + \ No newline at end of file diff --git a/src/button/dropdown-button.js b/src/button/dropdown-button.js new file mode 100644 index 00000000..7b0424bd --- /dev/null +++ b/src/button/dropdown-button.js @@ -0,0 +1,32 @@ +this.default = function() { + // DropDownButton items declaration + var items = [ + { + text: 'Dashboard', + iconCss: 'e-ddb-icons e-dashboard' + }, + { + text: 'Notifications', + iconCss: 'e-ddb-icons e-notifications', + }, + { + text: 'User Settings', + iconCss: 'e-ddb-icons e-settings', + }, + { + text: 'Log Out', + iconCss: 'e-ddb-icons e-logout' + }]; + + var btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' }); + btnObj.appendTo('#iconbtn'); + + btnObj = new ej.splitbuttons.DropDownButton({ items: items }); + btnObj.appendTo('#textbtn'); + + btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' }); + btnObj.appendTo('#icontextbtn'); + + btnObj = new ej.splitbuttons.DropDownButton({items: items, cssClass: 'e-caret-hide'}); + btnObj.appendTo('#custombtn'); +}; \ No newline at end of file diff --git a/src/button/progress-button-stack.json b/src/button/progress-button-stack.json index 2bbd37a0..1125066d 100644 --- a/src/button/progress-button-stack.json +++ b/src/button/progress-button-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Left', isPrimary: true\n });\n progressButton.appendTo('#spinleft');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Right', spinSettings: { position: 'Right' }, isPrimary: true\n });\n progressButton.appendTo('#spinright');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Top', spinSettings: { position: 'Top' }, isPrimary: true\n });\n progressButton.appendTo('#spintop');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Bottom', spinSettings: { position: 'Bottom' }, isPrimary: true\n });\n progressButton.appendTo('#spinbottom');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n animationSettings: { effect: 'ZoomOut' }, cssClass: 'e-round e-small e-success',\n iconCss: 'e-btn-sb-icons e-play-icon', spinSettings: { position: 'Center' }\n });\n progressButton.appendTo('#roundbtn');\n\n var contractProgressButton = new ej.splitbuttons.ProgressButton({\n content: 'Contract', enableProgress: true, cssClass: 'e-success e-small',\n begin: function() {\n contractProgressButton.element.classList.add('e-round');\n },\n end: function() {\n contractProgressButton.element.classList.remove('e-round');\n }\n });\n contractProgressButton.appendTo('#contract');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Slide Left', enableProgress: true, animationSettings: { effect: 'SlideLeft' },\n spinSettings: { position: 'Center' }, cssClass: 'e-flat e-success'\n });\n progressButton.appendTo('#slideleftflat');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Slide Right', enableProgress: true, animationSettings: { effect: 'SlideRight' },\n spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success'\n });\n progressButton.appendTo('#sliderightoutline');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Zoom In', enableProgress: true, animationSettings: { effect: 'ZoomIn' },\n spinSettings: { position: 'Center' }, cssClass: 'e-round-corner e-danger'\n });\n progressButton.appendTo('#zoomin');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Zoom Out', enableProgress: true, animationSettings: { effect: 'ZoomOut' },\n spinSettings: { position: 'Center' }, cssClass: 'e-small e-danger'\n });\n progressButton.appendTo('#zoomout');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Download', duration: 4000, enableProgress: true,\n cssClass: 'e-hide-spinner e-progress-top', iconCss: 'e-btn-sb-icons e-download-icon'\n });\n progressButton.appendTo('#download');\n\n progressButton = new ej.splitbuttons.ProgressButton({ content: 'Disabled', disabled: true });\n progressButton.appendTo('#disabled');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n var progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Left', isPrimary: true\n });\n progressButton.appendTo('#spinleft');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Right', spinSettings: { position: 'Right' }, isPrimary: true\n });\n progressButton.appendTo('#spinright');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Top', spinSettings: { position: 'Top' }, isPrimary: true\n });\n progressButton.appendTo('#spintop');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Spin Bottom', spinSettings: { position: 'Bottom' }, isPrimary: true\n });\n progressButton.appendTo('#spinbottom');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n animationSettings: { effect: 'ZoomOut' }, cssClass: 'e-round e-small e-success',\n iconCss: 'e-btn-sb-icons e-play-icon', spinSettings: { position: 'Center' }\n });\n progressButton.appendTo('#roundbtn');\n\n var contractProgressButton = new ej.splitbuttons.ProgressButton({\n content: 'Contract', enableProgress: true, cssClass: 'e-success e-small',\n begin: function() {\n contractProgressButton.element.classList.add('e-round');\n },\n end: function() {\n contractProgressButton.element.classList.remove('e-round');\n }\n });\n contractProgressButton.appendTo('#contract');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Slide Left', enableProgress: true, animationSettings: { effect: 'SlideLeft' },\n spinSettings: { position: 'Center' }, cssClass: 'e-flat e-success'\n });\n progressButton.appendTo('#slideleftflat');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Slide Right', enableProgress: true, animationSettings: { effect: 'SlideRight' },\n spinSettings: { position: 'Center' }, cssClass: 'e-outline e-success'\n });\n progressButton.appendTo('#sliderightoutline');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Zoom In', enableProgress: true, animationSettings: { effect: 'ZoomIn' },\n spinSettings: { position: 'Center' }, cssClass: 'e-round-corner e-danger'\n });\n progressButton.appendTo('#zoomin');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Zoom Out', enableProgress: true, animationSettings: { effect: 'ZoomOut' },\n spinSettings: { position: 'Center' }, cssClass: 'e-small e-danger'\n });\n progressButton.appendTo('#zoomout');\n\n progressButton = new ej.splitbuttons.ProgressButton({\n content: 'Download', duration: 4000, enableProgress: true,\n cssClass: 'e-hide-spinner e-progress-top', iconCss: 'e-btn-sb-icons e-download-icon'\n });\n progressButton.appendTo('#download');\n\n progressButton = new ej.splitbuttons.ProgressButton({ content: 'Disabled', disabled: true });\n progressButton.appendTo('#disabled');\n"} \ No newline at end of file diff --git a/src/button/progress-button.html b/src/button/progress-button.html index a46a3062..b0c17659 100644 --- a/src/button/progress-button.html +++ b/src/button/progress-button.html @@ -58,6 +58,7 @@ +

    This sample demonstrates the default functionalities of a progress button. Clicking that button will display a spinner and a progress indicator.

    @@ -87,6 +88,8 @@ documentation section.

    + + + +
    \n
    \n

    Select a payment method

    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var radioButton = new ej.buttons.RadioButton({ label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true });\n radioButton.appendTo('#radio1');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Net Banking', name: 'payment', value: 'netbanking' });\n radioButton.appendTo('#radio2');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery' });\n radioButton.appendTo('#radio3');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Other Wallets', name: 'payment', value: 'others' });\n radioButton.appendTo('#radio4');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n

    Select a payment method

    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n var radioButton = new ej.buttons.RadioButton({ label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true });\n radioButton.appendTo('#radio1');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Net Banking', name: 'payment', value: 'netbanking' });\n radioButton.appendTo('#radio2');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery' });\n radioButton.appendTo('#radio3');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Other Wallets', name: 'payment', value: 'others' });\n radioButton.appendTo('#radio4');\n"} \ No newline at end of file diff --git a/src/button/radio-button.html b/src/button/radio-button.html index 1093335b..0c08e0af 100644 --- a/src/button/radio-button.html +++ b/src/button/radio-button.html @@ -15,6 +15,7 @@

    Select a payment method

    +

    This sample demonstrates the default functionalities of the RadioButton. Select the payment mode by clicking the desired RadioButton element.

    @@ -33,6 +34,8 @@

    Select a payment method

    documentation section.

    + + \ No newline at end of file + + + diff --git a/src/button/sample.json b/src/button/sample.json index f7913c7e..a71ce8c4 100644 --- a/src/button/sample.json +++ b/src/button/sample.json @@ -9,46 +9,46 @@ "category": "Button", "ftName": "button", "api":{"Button":["isPrimary","cssClass", "iconCss", "isToggle", "iconPosition", "content"] }, - "description": "This demo for Essential JS2 Button shows its types (flat, toggle, outline, round, icon), sizes and styles (primary, success, info, warning) of buttons." + "description": "This example demonstrates the types (flat, toogle, outline, round), sizes and styles (primary, success, info, warning) of the Syncfusion Javascript ES5 button." }, { "url": "button-group", - "name": "ButtonGroup", + "name": "Button Group", "category": "Button", "ftName": "button-group", - "description": "This demo for Syncfusion Essential JS2 Button Group control shows the horizontal group of buttons. This supports radio and checkbox type behaviors." + "description": "This example demonstrates the behaviors (default, checkbox, radio) of the Syncfusion Javascript ES5 ButtonGroup." }, { - "url": "check-box", - "name": "CheckBox", + "url": "checkbox", + "name": "Checkbox", "category": "Button", "ftName": "checkbox", "api":{"CheckBox":["label", "checked", "indeterminate", "disabled", "change"] }, - "description": "This demo for Essential JS2 Check Box control shows the checked, unchecked, and indeterminate states of checkbox. It also provide supports for specifying label" + "description": "This example demonstrates the three different states (checked, unchecked, indeterminate) of the Syncfusion Javascript ES5 CheckBox." }, { "url": "radio-button", - "name": "RadioButton", + "name": "Radio Button", "category": "Button", "ftName": "radio-button", "api":{"RadioButton":["label", "name", "value", "checked"] }, - "description": "This demo for Syncfusion Essential JS2 RadioButton control shows the radio button group functionality. It contains checked and unchecked state." + "description": "This example demonstrates the group functionality of the Syncfusion Javascript ES5 RadioButton with checked and unchecked states." }, { - "url": "drop-down-button", - "name": "DropDownButton", + "url": "dropdown-button", + "name": "Dropdown Button", "category": "Button", "ftName": "dropdown-menu", "api":{"DropDownButton":["items", "cssClass", "iconCss"] }, - "description": "This demo for Essential JS2 DropDown Button control shows the use cases of drop down button. The popup contains action items with text, icons and separator." + "description": "This example demonstrates the usecases of the Syncfusion Javascript ES5 DropDownButton with icons, text and separator in popup action items." }, { "url": "split-button", - "name": "SplitButton", + "name": "Split Button", "category": "Button", "ftName": "split-button", "api":{"SplitButton":[ "items", "content", "iconCss", "beforeItemRender"] }, - "description": "This demo for Syncfusion Essential JS2 SplitButton control shows the use cases of split button. The icons, text and both can be loaded in primary splitbutton." + "description": "This example demonstrates the usecases of the Syncfusion Javascript ES5 SplitButton with icons and text in primary splitbutton." }, { "url": "switch", @@ -56,15 +56,15 @@ "category": "Button", "ftName": "toggle-switch-button", "api":{"Switch":[ "checked", "disabled"] }, - "description": "This demo for Syncfusion Essential JS2 Switch control allows to toggle between the checked and unchecked states. It also provides support for custom UI." + "description": "This example demonstrates the toggle states (checked, unchecked) of the Syncfusion JavaScript ES5 Switch." }, { "url": "progress-button", - "name": "ProgressButton", + "name": "Progress Button", "category": "Button", "ftName": "progress-button", "api":{"ProgressButton":["content", "iconCss", "cssClass", "duration", "disabled", "isPrimary", "enableProgress", "end", "begin", "spinSettings", "animationSettings"]}, - "description": "This demo for Essential JS2 Progress button has progress indicator and spinner. It supports texts, icons, styles, sizes, positions, and its customization." + "description": "This example demonstrates the different functionalities of the Syncfusion Javascript ES5 ProgressButton with spinner and progress indicator." } ] } \ No newline at end of file diff --git a/src/button/split-button-stack.json b/src/button/split-button-stack.json index e2e3cfa6..ddfc10ca 100644 --- a/src/button/split-button-stack.json +++ b/src/button/split-button-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var items = [\n {\n text: 'Paste',\n iconCss: 'e-btn-icons e-paste'\n },\n {\n text: 'Paste Special',\n iconCss: 'e-btn-icons e-paste-special'\n },\n {\n text: 'Paste as Formula',\n iconCss: 'e-btn-icons e-paste-formula'\n },\n {\n text: 'Paste as Hyperlink',\n iconCss: 'e-btn-icons e-paste-hyperlink'\n }\n ];\n var splitButton = new ej.splitbuttons.SplitButton({ items: items, iconCss: 'e-btn-icons e-paste' });\n splitButton.appendTo('#iconsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({ items: items, content: 'Paste' });\n splitButton.appendTo('#textsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({ items: items, content: 'Paste', iconCss: 'e-btn-icons e-paste' });\n splitButton.appendTo('#icontextsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({\n items: items,\n content: 'Paste',\n iconCss: 'e-btn-icons e-paste',\n beforeItemRender: function(args) {\n if (args.item.text !== 'Paste') {\n args.element.classList.add('e-disabled');\n }\n }\n });\n splitButton.appendTo('#disabledsplitbtn');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n var items = [\n {\n text: 'Paste',\n iconCss: 'e-btn-icons e-paste'\n },\n {\n text: 'Paste Special',\n iconCss: 'e-btn-icons e-paste-special'\n },\n {\n text: 'Paste as Formula',\n iconCss: 'e-btn-icons e-paste-formula'\n },\n {\n text: 'Paste as Hyperlink',\n iconCss: 'e-btn-icons e-paste-hyperlink'\n }\n ];\n var splitButton = new ej.splitbuttons.SplitButton({ items: items, iconCss: 'e-btn-icons e-paste' });\n splitButton.appendTo('#iconsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({ items: items, content: 'Paste' });\n splitButton.appendTo('#textsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({ items: items, content: 'Paste', iconCss: 'e-btn-icons e-paste' });\n splitButton.appendTo('#icontextsplitbtn');\n\n splitButton = new ej.splitbuttons.SplitButton({\n items: items,\n content: 'Paste',\n iconCss: 'e-btn-icons e-paste',\n beforeItemRender: function(args) {\n if (args.item.text !== 'Paste') {\n args.element.classList.add('e-disabled');\n }\n }\n });\n splitButton.appendTo('#disabledsplitbtn');\n\n"} \ No newline at end of file diff --git a/src/button/split-button.html b/src/button/split-button.html index c5dac264..d03c4c18 100644 --- a/src/button/split-button.html +++ b/src/button/split-button.html @@ -18,6 +18,7 @@ +

    This sample demonstrates the default functionalities of the SplitButton. By clicking primary button default action will be triggered and clicking secondary button will display popup with list of action items. @@ -43,6 +44,7 @@ documentation section.

    + + + \ No newline at end of file diff --git a/src/button/switch-stack.json b/src/button/switch-stack.json index 087c0541..52c39e2b 100644 --- a/src/button/switch-stack.json +++ b/src/button/switch-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n

    Hotspot & tethering

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var switchObj = new ejs.buttons.Switch({ checked: true });\n switchObj.appendTo('#checked');\n\n switchObj = new ejs.buttons.Switch({});\n switchObj.appendTo('#unchecked');\n\n switchObj = new ejs.buttons.Switch({ disabled: true });\n switchObj.appendTo('#disabled');\n\n var elemArray = document.querySelectorAll('.switch-control label');\n for (var i = 0, len = elemArray.length; i < len; i++) {\n elemArray[i].addEventListener('mouseup', rippleHandler);\n elemArray[i].addEventListener('mousedown', rippleHandler);\n }\n\n // Function to handle ripple effect for Switch with label.\n function rippleHandler(e) {\n var rippleSpan = this.nextElementSibling.querySelector('.e-ripple-container');\n if (rippleSpan) {\n ejs.buttons.rippleMouseHandler(e, rippleSpan);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n

    Hotspot & tethering

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n var switchObj = new ejs.buttons.Switch({ checked: true });\n switchObj.appendTo('#checked');\n\n switchObj = new ejs.buttons.Switch({});\n switchObj.appendTo('#unchecked');\n\n switchObj = new ejs.buttons.Switch({ disabled: true });\n switchObj.appendTo('#disabled');\n\n var elemArray = document.querySelectorAll('.switch-control label');\n for (var i = 0, len = elemArray.length; i < len; i++) {\n elemArray[i].addEventListener('mouseup', rippleHandler);\n elemArray[i].addEventListener('mousedown', rippleHandler);\n }\n\n // Function to handle ripple effect for Switch with label.\n function rippleHandler(e) {\n var rippleSpan = this.nextElementSibling.querySelector('.e-ripple-container');\n if (rippleSpan) {\n ejs.buttons.rippleMouseHandler(e, rippleSpan);\n }\n }\n"} \ No newline at end of file diff --git a/src/button/switch.html b/src/button/switch.html index 94f6f769..69007072 100644 --- a/src/button/switch.html +++ b/src/button/switch.html @@ -19,6 +19,7 @@

    Hotspot & tethering

    +

    This sample demonstrates the default functionalities of a Switch. Click the Switch element to toggle between checked and unchecked states. @@ -45,6 +46,8 @@

    Hotspot & tethering

    documentation section.

    + + \ No newline at end of file + + diff --git a/src/calendar/date-range-stack.json b/src/calendar/date-range-stack.json index 70373132..fd6e1d73 100644 --- a/src/calendar/date-range-stack.json +++ b/src/calendar/date-range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n

    \n Selected Value: \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'),\n change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n

    \n Selected Value: \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'),\n change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n"} \ No newline at end of file diff --git a/src/calendar/date-range.html b/src/calendar/date-range.html index 5a406ad0..1db7d9e8 100644 --- a/src/calendar/date-range.html +++ b/src/calendar/date-range.html @@ -19,6 +19,7 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/calendar/default-stack.json b/src/calendar/default-stack.json index bf78a96c..2fb5cc25 100644 --- a/src/calendar/default-stack.json +++ b/src/calendar/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n Selected Value: \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n change: function (args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n });\n calendar.appendTo('#calendar');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n Selected Value: \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n change: function (args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n });\n calendar.appendTo('#calendar');\n"} \ No newline at end of file diff --git a/src/calendar/default.html b/src/calendar/default.html index fd6425b0..6745e077 100644 --- a/src/calendar/default.html +++ b/src/calendar/default.html @@ -22,6 +22,7 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/calendar/disabled-stack.json b/src/calendar/disabled-stack.json index 5784441f..e8551439 100644 --- a/src/calendar/disabled-stack.json +++ b/src/calendar/disabled-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n

    \n Selected Value: \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n

    \n Selected Value: \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file diff --git a/src/calendar/disabled.html b/src/calendar/disabled.html index 0030c380..37334dc5 100644 --- a/src/calendar/disabled.html +++ b/src/calendar/disabled.html @@ -19,6 +19,7 @@

    More information on the disabled dates can be found in this documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/calendar/islamic-calendar-stack.json b/src/calendar/islamic-calendar-stack.json new file mode 100644 index 00000000..12297dc5 --- /dev/null +++ b/src/calendar/islamic-calendar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n

    \n Selected Value: \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var span;\n var addClass = ej.base.addClass;\n var calendar = new ej.calendars.Calendar({\n change: valueChange,\n renderDayCell: disableDate,\n calendarMode: 'Islamic'\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n /*Displays selected date in the label*/\n document.getElementById('date_label').textContent = 'Selected Value: ' + this.globalize.formatDate(args.value, { type: 'date', format: 'ddMMMyyyy', calendar: 'islamic' });\n }\n function disableDate(args) {\n /*Date need to be disabled*/\n if (args.date.getDate() === 2 || args.date.getDate() === 10 || args.date.getDate() === 28) {\n args.isDisabled = true;\n }\n if (args.date.getDate() === 13) {\n span = document.createElement('span');\n args.element.children[0].className += 'e-day sf-icon-cup highlight';\n addClass([args.element], ['special', 'e-day', 'dinner']);\n args.element.setAttribute('data-val', ' Dinner !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 23) {\n args.element.children[0].className += 'e-day sf-icon-start highlight';\n span = document.createElement('span');\n span.setAttribute('class', 'sf-icons-star highlight');\n //use the imported method to add the multiple classes to the given element\n addClass([args.element], ['special', 'e-day', 'holiday']);\n args.element.setAttribute('data-val', ' Holiday !');\n args.element.appendChild(span);\n }\n \n }\n"} \ No newline at end of file diff --git a/src/calendar/islamic-calendar.html b/src/calendar/islamic-calendar.html index d1cd7474..062b999a 100644 --- a/src/calendar/islamic-calendar.html +++ b/src/calendar/islamic-calendar.html @@ -23,6 +23,7 @@ target="_blank"> documentation section.

    \ No newline at end of file diff --git a/src/calendar/month-picker-stack.json b/src/calendar/month-picker-stack.json new file mode 100644 index 00000000..47e72029 --- /dev/null +++ b/src/calendar/month-picker-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n Selected Value: \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n start: 'Year',\n depth: 'Year',\n change: valueChange\n });\n calendar.appendTo('#calendar');\n var Intl = new ej.base.Internationalization();\n function valueChange(args) {\n var value = Intl.formatDate(args.value, { type: 'dateTime', format: 'MMMM y' });\n document.getElementById('date_label').textContent = 'Selected Value: ' + value;\n }\n"} \ No newline at end of file diff --git a/src/calendar/month-picker.html b/src/calendar/month-picker.html new file mode 100644 index 00000000..f2935c1e --- /dev/null +++ b/src/calendar/month-picker.html @@ -0,0 +1,39 @@ +
    +
    +
    +
    +
    + Selected Value: +
    +
    +
    +
    +

    + The following sample demonstrates the Calendar control acting as a month picker. It allows you to select values in terms of months. +

    +
    +
    +

    + The Calendar has the Start and the Depth properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).

    +

    More information on the Calendar Start/Depth can be found in the + Start|Depth documentation section.

    +
    + + + \ No newline at end of file diff --git a/src/calendar/month-picker.js b/src/calendar/month-picker.js new file mode 100644 index 00000000..5018c3d5 --- /dev/null +++ b/src/calendar/month-picker.js @@ -0,0 +1,13 @@ +this.default = function () { + var calendar = new ej.calendars.Calendar({ + start: 'Year', + depth: 'Year', + change: valueChange + }); + calendar.appendTo('#calendar'); + var Intl = new ej.base.Internationalization(); + function valueChange(args) { + var value = Intl.formatDate(args.value, { type: 'dateTime', format: 'MMMM y' }); + document.getElementById('date_label').textContent = 'Selected Value: ' + value; + } +}; \ No newline at end of file diff --git a/src/calendar/multi-selection-stack.json b/src/calendar/multi-selection-stack.json index 784de631..b836b322 100644 --- a/src/calendar/multi-selection-stack.json +++ b/src/calendar/multi-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Selected values
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n var currentYear = new Date().getFullYear();\n var currentMonth = new Date().getMonth();\n var calendar = new ej.calendars.Calendar({\n isMultiSelection: true,\n values: [new Date(currentYear, currentMonth, 10), new Date(currentYear, currentMonth, 15), new Date(currentYear, currentMonth, 25)],\n change: changeValue,\n created: changeValue\n });\n calendar.appendTo('#calendar');\n function changeValue() { \n var element = document.getElementById('multiSelect');\n element.innerHTML = '';\n for (var index = 0; index < this.values.length; index++) {\n element.insertBefore(document.createTextNode(this.values[index]), element.childNodes[0]);\n element.insertBefore(document.createElement('br'), element.childNodes[0]);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Selected values
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}\n var currentYear = new Date().getFullYear();\n var currentMonth = new Date().getMonth();\n var calendar = new ej.calendars.Calendar({\n isMultiSelection: true,\n values: [new Date(currentYear, currentMonth, 10), new Date(currentYear, currentMonth, 15), new Date(currentYear, currentMonth, 25)],\n change: changeValue,\n created: changeValue\n });\n calendar.appendTo('#calendar');\n function changeValue() { \n var element = document.getElementById('multiSelect');\n element.innerHTML = '';\n for (var index = 0; index < this.values.length; index++) {\n element.insertBefore(document.createTextNode(this.values[index]), element.childNodes[0]);\n element.insertBefore(document.createElement('br'), element.childNodes[0]);\n }\n }\n"} \ No newline at end of file diff --git a/src/calendar/multi-selection.html b/src/calendar/multi-selection.html index 8c975169..7bcde0ee 100644 --- a/src/calendar/multi-selection.html +++ b/src/calendar/multi-selection.html @@ -27,6 +27,7 @@
    Selected values
    documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/calendar/sample.json b/src/calendar/sample.json index 4710cfa6..0a5b7519 100644 --- a/src/calendar/sample.json +++ b/src/calendar/sample.json @@ -1,8 +1,9 @@ { "name": "Calendar", "directory": "calendar", "category":"Calendars","type": "update", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"Calendar", "api":{"Calendar": [ "change" ]}}, - {"url":"disabled", "name": "Disabled Dates", "category":"Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}}, - {"url":"date-range", "name": "Date Range", "category":"Calendar", "api":{"Calendar": [ "min", "max", "change" ]}}, - {"url":"special-dates", "name": "Special Dates", "category":"Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}}, - {"url":"multi-selection", "name": "Multiple Selection", "category":"Calendar", "api":{"Calendar": [ "isMultiSelection", "values" ]}}, - {"url":"islamic-calendar", "name": "Islamic Calendar", "category":"Calendar","type": "new", "api":{"Calendar": [ "renderDayCell", "values" ]}} + {"url":"default", "name": "Default Functionalities", "category":"Calendar", "api":{"Calendar": [ "change" ]}, "description": "A simple calendar control for JavaScript(ES5) to select dates easily by switching between month, year, and decade views with a rich user interface" }, + {"url":"disabled", "name": "Disabled Dates", "category":"Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}, "description": "Calendar widget for Javascript(ES5) with disabled dates to restrict the user from selecting a defined set of dates by disabling its UI interaction" }, + {"url":"date-range", "name": "Date Range", "category":"Calendar", "api":{"Calendar": [ "min", "max", "change" ]}, "description": "Calendar for JavaScript(ES5) with min and max dates that restrict users from selecting dates outside a defined range, like weekends, range of dates etc"}, + {"url":"special-dates", "name": "Special Dates", "category":"Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}, "description": "Calendar for JavaScript(ES5) that highlights multiple dates like weekends, or a range of days with options to add custom styles and descriptions"}, + {"url":"multi-selection", "name": "Multiple Selection", "category":"Calendar", "api":{"Calendar": [ "isMultiSelection", "values" ]}, "description": "A simple and lightweight calendar control for JavaScript(ES5) that features multiple date selection to allow users to select more than one date"}, + {"url":"month-picker", "name": "Month Picker", "category": "Calendar","type": "new", "api":{"Calendar": [ "start", "depth" ]}, "description": "The JavaScript(ES5) Calendar control can act as a month and year picker. It helps you to select a month or year quickly with all month related properties."}, + {"url":"islamic-calendar", "name": "Islamic Calendar", "category":"Calendar", "api":{"Calendar": [ "renderDayCell", "values" ]}} ]} \ No newline at end of file diff --git a/src/calendar/special-dates-stack.json b/src/calendar/special-dates-stack.json index fb91e068..c1217cdc 100644 --- a/src/calendar/special-dates-stack.json +++ b/src/calendar/special-dates-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n Selected Value: \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n\tvar span;\n var addClass = ej.base.addClass;\n var calendar = new ej.calendars.Calendar({\n renderDayCell: customDates, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n /*Displays selected date in the label*/\n var title = '';\n if (args.event) {\n title = event.currentTarget.getAttribute('data-val');\n title = title == null ? '' : ' ( ' + title + ' )';\n }\n document.getElementById('date_label').textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;\n }\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Birthday !');\n addClass([args.element], [ 'e-day','special', 'birthday']);\n\t\t\targs.element.setAttribute('data-val', ' Birthday !');\n args.element.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Farewell !');\n addClass([args.element], [ 'e-day','special', 'farewell']);\n\t\t\targs.element.setAttribute('data-val', 'Farewell !');\n args.element.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 25) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Vacation !');\n addClass([args.element], [ 'e-day','special', 'vacation']);\n\t\t\targs.element.setAttribute('title', 'Vacation !');\n args.element.setAttribute('data-val', 'Vacation !');\n args.element.appendChild(span);\n\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n Selected Value: \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n\tvar span;\n var addClass = ej.base.addClass;\n var calendar = new ej.calendars.Calendar({\n renderDayCell: customDates, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n /*Displays selected date in the label*/\n var title = '';\n if (args.event) {\n title = event.currentTarget.getAttribute('data-val');\n title = title == null ? '' : ' ( ' + title + ' )';\n }\n document.getElementById('date_label').textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;\n }\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Birthday !');\n addClass([args.element], [ 'e-day','special', 'birthday']);\n\t\t\targs.element.setAttribute('data-val', ' Birthday !');\n args.element.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Farewell !');\n addClass([args.element], [ 'e-day','special', 'farewell']);\n\t\t\targs.element.setAttribute('data-val', 'Farewell !');\n args.element.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 25) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n args.element.firstElementChild.setAttribute('title', 'Vacation !');\n addClass([args.element], [ 'e-day','special', 'vacation']);\n\t\t\targs.element.setAttribute('title', 'Vacation !');\n args.element.setAttribute('data-val', 'Vacation !');\n args.element.appendChild(span);\n\n }\n }\n"} \ No newline at end of file diff --git a/src/calendar/special-dates.html b/src/calendar/special-dates.html index 44848df8..28ee8464 100644 --- a/src/calendar/special-dates.html +++ b/src/calendar/special-dates.html @@ -21,6 +21,7 @@ documentation section.

    \ No newline at end of file diff --git a/src/card/basic-stack.json b/src/card/basic-stack.json index d177029a..dbb1d5ec 100644 --- a/src/card/basic-stack.json +++ b/src/card/basic-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Debunking Five Data Science Myths
    \n
    By John Doe | Jan 20, 2018
    \n
    \n
    \n
    \n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Today
    \n
    New York - Scattered Showers.
    \n
    \n
    \n
    \n
    \n
    \n
    1º / -4º
    \n
    Chance for snow: 100%
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Debunking Five Data Science Myths
    \n
    By John Doe | Jan 20, 2018
    \n
    \n
    \n
    \n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Today
    \n
    New York - Scattered Showers.
    \n
    \n
    \n
    \n
    \n
    \n
    1º / -4º
    \n
    Chance for snow: 100%
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n"} \ No newline at end of file diff --git a/src/card/flip-stack.json b/src/card/flip-stack.json index f564ac25..3e3f01dc 100644 --- a/src/card/flip-stack.json +++ b/src/card/flip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Mayumi Ohno
    \n
    Marketing Representative
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    Address
    \n
    P.O. Box 78934\n
    New Orleans\n
    Los Angeles\n
    Postal Code: 70117\n
    USA
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Address
    \n
    970 Drummond Street\n
    New York\n
    New Jersey\n
    Postal Code: 07102\n
    USA\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Creative One
    \n
    \n
    \n
    \n
    \n
    John Doe
    \n
    Architecture
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    johndoe@mail.com
    011-141-221
    www.johndoe.com
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n document.getElementById('card_flip').onclick = function (e) {\n var cardEle = e.currentTarget;\n if (cardEle.classList.contains('e-flipped')) {\n cardEle.classList.remove('e-flipped');\n }\n else {\n cardEle.classList.add('e-flipped');\n }\n };\n document.getElementById('card_flip').onblur = function (e) {\n var cardEle = e.currentTarget;\n cardEle.classList.remove('e-flipped');\n };\n document.getElementById('card_flip_profile').onclick = function (e) {\n var cardEle = e.currentTarget;\n if (cardEle.classList.contains('e-flipped')) {\n cardEle.classList.remove('e-flipped');\n }\n else {\n cardEle.classList.add('e-flipped');\n }\n };\n document.getElementById('card_flip_profile').onblur = function (e) {\n var cardEle = e.currentTarget;\n cardEle.classList.remove('e-flipped');\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Mayumi Ohno
    \n
    Marketing Representative
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    Address
    \n
    P.O. Box 78934\n
    New Orleans\n
    Los Angeles\n
    Postal Code: 70117\n
    USA
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Address
    \n
    970 Drummond Street\n
    New York\n
    New Jersey\n
    Postal Code: 07102\n
    USA\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Creative One
    \n
    \n
    \n
    \n
    \n
    John Doe
    \n
    Architecture
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    johndoe@mail.com
    011-141-221
    www.johndoe.com
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n document.getElementById('card_flip').onclick = function (e) {\n var cardEle = e.currentTarget;\n if (cardEle.classList.contains('e-flipped')) {\n cardEle.classList.remove('e-flipped');\n }\n else {\n cardEle.classList.add('e-flipped');\n }\n };\n document.getElementById('card_flip').onblur = function (e) {\n var cardEle = e.currentTarget;\n cardEle.classList.remove('e-flipped');\n };\n document.getElementById('card_flip_profile').onclick = function (e) {\n var cardEle = e.currentTarget;\n if (cardEle.classList.contains('e-flipped')) {\n cardEle.classList.remove('e-flipped');\n }\n else {\n cardEle.classList.add('e-flipped');\n }\n };\n document.getElementById('card_flip_profile').onblur = function (e) {\n var cardEle = e.currentTarget;\n cardEle.classList.remove('e-flipped');\n };\n"} \ No newline at end of file diff --git a/src/card/horizontal-stack.json b/src/card/horizontal-stack.json index 817d7682..4ef54701 100644 --- a/src/card/horizontal-stack.json +++ b/src/card/horizontal-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    iPhone X
    \n
    Marketed by Apple Inc
    \n
    \n
    \n
    \n The iPhone X has a 5.8-inch diagonal OLED color-accurate screen, has two cameras on the rear. One is a 12-megapixel with\n support for face detection. It is capable of capturing 4K video at 24, 30 or 60 frames per\n second. It supports Qi-standard wireless charging.\n
    \n
    \n \n \n
    \n
    \n \"iPhone\n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    Philips Trimmer
    \n
    \n
    \n
    \n Philips trimmers are designed to last longer than 4 ordinary trimmers and DuraPower Technology which optimizes power.\n
    \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Canon 135mm
    \n
    \n
    \n
    \n The fastest 135mm telephoto lens in its class. Two UD-glass elements\n correct secondary spectrum for outstanding sharpness and color.\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n\n\n","index.js":"{{ripple}}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    iPhone X
    \n
    Marketed by Apple Inc
    \n
    \n
    \n
    \n The iPhone X has a 5.8-inch diagonal OLED color-accurate screen, has two cameras on the rear. One is a 12-megapixel with\n support for face detection. It is capable of capturing 4K video at 24, 30 or 60 frames per\n second. It supports Qi-standard wireless charging.\n
    \n
    \n \n \n
    \n
    \n \"iPhone\n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    Philips Trimmer
    \n
    \n
    \n
    \n Philips trimmers are designed to last longer than 4 ordinary trimmers and DuraPower Technology which optimizes power.\n
    \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n
    Canon 135mm
    \n
    \n
    \n
    \n The fastest 135mm telephoto lens in its class. Two UD-glass elements\n correct secondary spectrum for outstanding sharpness and color.\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n\n\n","index.js":"{{ripple}}\n"} \ No newline at end of file diff --git a/src/card/reveal-stack.json b/src/card/reveal-stack.json index 5d1b27d8..ef017e9e 100644 --- a/src/card/reveal-stack.json +++ b/src/card/reveal-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \"Force.com\n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Author
    \n     		\n
    Steve Fenton
    \n
    \n
    Published on
    \n     		\n
    Jul 7, 2014
    \n
    \n
    Pages
    \n     		\n
    82
    \n
    \n
    \n \n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    TypeScript
    \n
    \n
    \n \n
    \n
    \n\n
    \n Microsoft has done extensive work to make JavaScript easier to use. Microsoft TypeScript extends many familiar features of\n .NET programming to JavaScript.\n
    \n\n
    \n Go to Download \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n document.getElementById('showcarddata').onclick = function () {\n revealShow();\n \n };\n document.getElementById('card-reveal_collapse').onclick = function (e) {\n var cardEle = e.currentTarget.parentNode.parentNode.parentElement;\n var revealEle = cardEle.querySelector('#card_reveal');\n revealEle.classList.add('e-reveal-hide');\n revealEle.classList.remove('e-reveal-show');\n var revealedEle = cardEle.querySelector('#card_revealed');\n revealedEle.classList.add('e-reveal-show');\n revealedEle.classList.remove('e-reveal-hide');\n };\n document.getElementById('showcarddata_icon').onclick = function () {\n revealShow();\n }; \n function revealShow() {\n var cEle = document.getElementById('card_revealed');\n var cardEle = cEle.parentNode.parentNode;\n var revealEle = cardEle.querySelector('#card_reveal');\n revealEle.classList.add('e-reveal-show');\n revealEle.classList.remove('e-reveal-hide');\n var revealedEle = cardEle.querySelector('#card_revealed');\n revealedEle.classList.add('e-reveal-hide');\n revealedEle.classList.remove('e-reveal-show');\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \"Force.com\n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Author
    \n     		\n
    Steve Fenton
    \n
    \n
    Published on
    \n     		\n
    Jul 7, 2014
    \n
    \n
    Pages
    \n     		\n
    82
    \n
    \n
    \n \n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    TypeScript
    \n
    \n
    \n \n
    \n
    \n\n
    \n Microsoft has done extensive work to make JavaScript easier to use. Microsoft TypeScript extends many familiar features of\n .NET programming to JavaScript.\n
    \n\n
    \n Go to Download \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n document.getElementById('showcarddata').onclick = function () {\n revealShow();\n \n };\n document.getElementById('card-reveal_collapse').onclick = function (e) {\n var cardEle = e.currentTarget.parentNode.parentNode.parentElement;\n var revealEle = cardEle.querySelector('#card_reveal');\n revealEle.classList.add('e-reveal-hide');\n revealEle.classList.remove('e-reveal-show');\n var revealedEle = cardEle.querySelector('#card_revealed');\n revealedEle.classList.add('e-reveal-show');\n revealedEle.classList.remove('e-reveal-hide');\n };\n document.getElementById('showcarddata_icon').onclick = function () {\n revealShow();\n }; \n function revealShow() {\n var cEle = document.getElementById('card_revealed');\n var cardEle = cEle.parentNode.parentNode;\n var revealEle = cardEle.querySelector('#card_reveal');\n revealEle.classList.add('e-reveal-show');\n revealEle.classList.remove('e-reveal-hide');\n var revealedEle = cardEle.querySelector('#card_revealed');\n revealedEle.classList.add('e-reveal-hide');\n revealedEle.classList.remove('e-reveal-show');\n }\n"} \ No newline at end of file diff --git a/src/card/swipeable-stack.json b/src/card/swipeable-stack.json index 8e0a89ca..7821cf48 100644 --- a/src/card/swipeable-stack.json +++ b/src/card/swipeable-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n
    \n New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact\n upon commerce and etc...\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized\n as part of the Asian continent.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It was originally designed by Émile Nouguier\n and Maurice Koechlin.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people\n live in Sydney which makes it the biggest city in Oceania.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}} \n var ele = document.getElementById('horizontal_product');\n var dir;\n swipeable();\n var touch = new ej.base.Touch(ele, { swipe: touchSwipeHandler });\n var temp = 0;\n var cards = document.querySelectorAll('#horizontal_product .e-card');\n [].slice.call(cards).forEach(function (ele) {\n ele.querySelector('img').onmousedown = function () { return false; };\n });\n function swipeable() {\n var fanStructuteCard = document.querySelectorAll('#horizontal_product .e-card');\n var len = fanStructuteCard.length;\n [].slice.call(fanStructuteCard).forEach(function (ele) {\n ele.style.removeProperty('transform');\n });\n var transformRatio = 2;\n var temp;\n var divide = (parseInt((len / 2).toString(), 10));\n temp = transformRatio;\n for (var i = divide - 1; i >= 0; i--) {\n fanStructuteCard[i].style.transform = 'rotate(' + (temp) + 'deg)';\n temp += transformRatio;\n }\n transformRatio = 2;\n temp = transformRatio;\n for (var j = divide + 1; j < len; j++) {\n fanStructuteCard[j].style.transform = 'rotate(' + (-temp) + 'deg)';\n temp += transformRatio;\n }\n }\n function touchSwipeHandler(e) {\n var ele = ej.base.closest(e.originalEvent.target, '.e-card');\n if (!ele.classList.contains('e-card')) {\n return;\n }\n if (ele.parentElement.querySelector('.card-out')) {\n ele.parentElement.querySelector('.card-out').classList.remove('card-out');\n }\n if (ele.parentElement.querySelector('.card-out-left')) {\n ele.parentElement.querySelector('.card-out-left').classList.remove('card-out-left');\n }\n /*jshint -W030 */\n if (e.swipeDirection === 'Right') {\n ele.classList.add('card-out');\n } else if (e.swipeDirection === 'Left') {\n ele.classList.add('card-out-left');\n } else {\n return;\n }\n ele.parentElement.insertBefore(ele, ele.parentElement.children[0]);\n swipeable();\n ele.style.removeProperty('left');\n }\n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n
    \n New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact\n upon commerce and etc...\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized\n as part of the Asian continent.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It was originally designed by Émile Nouguier\n and Maurice Koechlin.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people\n live in Sydney which makes it the biggest city in Oceania.\n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}} \n var ele = document.getElementById('horizontal_product');\n var dir;\n swipeable();\n var touch = new ej.base.Touch(ele, { swipe: touchSwipeHandler });\n var temp = 0;\n var cards = document.querySelectorAll('#horizontal_product .e-card');\n [].slice.call(cards).forEach(function (ele) {\n ele.querySelector('img').onmousedown = function () { return false; };\n });\n function swipeable() {\n var fanStructuteCard = document.querySelectorAll('#horizontal_product .e-card');\n var len = fanStructuteCard.length;\n [].slice.call(fanStructuteCard).forEach(function (ele) {\n ele.style.removeProperty('transform');\n });\n var transformRatio = 2;\n var temp;\n var divide = (parseInt((len / 2).toString(), 10));\n temp = transformRatio;\n for (var i = divide - 1; i >= 0; i--) {\n fanStructuteCard[i].style.transform = 'rotate(' + (temp) + 'deg)';\n temp += transformRatio;\n }\n transformRatio = 2;\n temp = transformRatio;\n for (var j = divide + 1; j < len; j++) {\n fanStructuteCard[j].style.transform = 'rotate(' + (-temp) + 'deg)';\n temp += transformRatio;\n }\n }\n function touchSwipeHandler(e) {\n var ele = ej.base.closest(e.originalEvent.target, '.e-card');\n if (!ele.classList.contains('e-card')) {\n return;\n }\n if (ele.parentElement.querySelector('.card-out')) {\n ele.parentElement.querySelector('.card-out').classList.remove('card-out');\n }\n if (ele.parentElement.querySelector('.card-out-left')) {\n ele.parentElement.querySelector('.card-out-left').classList.remove('card-out-left');\n }\n /*jshint -W030 */\n if (e.swipeDirection === 'Right') {\n ele.classList.add('card-out');\n } else if (e.swipeDirection === 'Left') {\n ele.classList.add('card-out-left');\n } else {\n return;\n }\n ele.parentElement.insertBefore(ele, ele.parentElement.children[0]);\n swipeable();\n ele.style.removeProperty('left');\n }\n "} \ No newline at end of file diff --git a/src/card/tile-stack.json b/src/card/tile-stack.json index 3ac6cd97..40c135ba 100644 --- a/src/card/tile-stack.json +++ b/src/card/tile-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    No results found. Please try a different search.
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n\n\n\n
    ","index.js":"{{ripple}} \n var cardTemplateFn = ej.base.compile(document.getElementById('card_template').innerHTML.trim());\n var card;\n var cardEle;\n var cardObj = window.cardBook;\n var data = [];\n var multiSelectData = [];\n var searchData = [];\n var searchValCount = 0;\n var filterCategory = [{ Name: 'Client-Side', Code: 'client' }, { Name: 'Server-Side', Code: 'server' }, { Name: 'Front-End', Code: 'ui' }];\n var emptyData = true;\n cardRendering(cardObj);\n var multiselectComp = new ej.dropdowns.MultiSelect({\n dataSource: filterCategory,\n fields: { text: 'Name', value: 'Code' },\n placeholder: 'Search by categories',\n select: multiSelectFun,\n removed: multiSelectRemove,\n });\n multiselectComp.appendTo('#local');\n function cardRendering(cardObj) {\n var errorContent = document.querySelector('.tile_layout .row.error');\n if (cardObj.length > 0) {\n errorContent.style.display = 'none';\n cardObj.forEach(function (data, index) {\n card = cardTemplateFn(data);\n cardEle = document.getElementById('card_sample_' + (++index));\n if (cardEle) {\n cardEle.appendChild(card[0]);\n }\n });\n }\n else {\n errorContent.style.display = 'flex';\n }\n }\n function destroyAllCard() {\n var cards = document.querySelectorAll('.card-control-section .e-card');\n [].slice.call(cards).forEach(function (el) {\n ej.base.detach(el);\n });\n }\n function multiSelectRemove(e) {\n var cardDa = searchData.length > 0 ? searchData : (multiSelectData.length > 0 ? multiSelectData : cardObj);\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = cardDa;\n destroyAllCard();\n cardRendering(cardObj);\n }\n else if (multiselectComp.value.length === 0 && searchValCount > 0) {\n searchFilter(document.getElementById('search_Card').value);\n }\n else if (multiselectComp.value.length === 0) {\n destroyAllCard();\n multiSelectData = cardDa;\n cardRendering(cardDa);\n }\n else {\n var keywords = e.itemData.Code.split(',');\n var dublicate_1;\n keywords.forEach(function (key) {\n dublicate_1 = new ej.data.DataManager(cardObj).executeLocal(new ej.data.Query().where('cardImage.tag', 'Contains', key, true));\n dublicate_1.forEach(function (da) {\n if (cardDa.indexOf(da) !== -1) {\n cardDa.splice(cardDa.indexOf(da), 1);\n }\n });\n multiSelectData = cardDa;\n });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n }\n function multiSelectFun(e) {\n var keywords = e.itemData.Code.split(',');\n var dublicate;\n var cardDa = searchData.length > 0 ? searchData : cardObj;\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = [];\n }\n keywords.forEach(function (key) {\n dublicate = new ej.data.DataManager(cardDa).executeLocal(new ej.data.Query().where('cardImage.tag', 'Contains', key, true));\n if (dublicate.length === 0) {\n multiSelectData = [];\n destroyAllCard();\n return;\n }\n dublicate.forEach(function (da) {\n if (multiSelectData.indexOf(da) === -1) {\n multiSelectData.push(da);\n }\n });\n });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n function searchFilter(key) {\n searchValCount = key.length;\n var predicate = new ej.data.Predicate('cardContent', 'Contains', key, true);\n predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);\n var cardDa = (multiSelectData.length > 0 && multiselectComp.value.length > 0) ? multiSelectData : cardObj;\n searchData = data = new ej.data.DataManager(cardDa).executeLocal(new ej.data.Query().where(predicate));\n destroyAllCard();\n cardRendering(data);\n }\n document.getElementById('search_Card').onkeyup = function (e) {\n if (e.code === 'Tab' || e.code === 'Escape' || e.code === 'ShiftLeft' || (e.code === 'Backspace' && emptyData)) {\n return;\n }\n var inputVal = e.target.value;\n /*jshint -W030 */\n inputVal.length === 0 ? emptyData = true : emptyData = false;\n searchFilter(inputVal);\n };\n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    No results found. Please try a different search.
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n\n\n\n
    ","index.js":"{{ripple}} \n var cardTemplateFn = ej.base.compile(document.getElementById('card_template').innerHTML.trim());\n var card;\n var cardEle;\n var cardObj = window.cardBook;\n var data = [];\n var multiSelectData = [];\n var searchData = [];\n var searchValCount = 0;\n var filterCategory = [{ Name: 'Client-Side', Code: 'client' }, { Name: 'Server-Side', Code: 'server' }, { Name: 'Front-End', Code: 'ui' }];\n var emptyData = true;\n cardRendering(cardObj);\n var multiselectComp = new ej.dropdowns.MultiSelect({\n dataSource: filterCategory,\n fields: { text: 'Name', value: 'Code' },\n placeholder: 'Search by categories',\n select: multiSelectFun,\n removed: multiSelectRemove,\n });\n multiselectComp.appendTo('#local');\n function cardRendering(cardObj) {\n var errorContent = document.querySelector('.tile_layout .row.error');\n if (cardObj.length > 0) {\n errorContent.style.display = 'none';\n cardObj.forEach(function (data, index) {\n card = cardTemplateFn(data);\n cardEle = document.getElementById('card_sample_' + (++index));\n if (cardEle) {\n cardEle.appendChild(card[0]);\n }\n });\n }\n else {\n errorContent.style.display = 'flex';\n }\n }\n function destroyAllCard() {\n var cards = document.querySelectorAll('.card-control-section .e-card');\n [].slice.call(cards).forEach(function (el) {\n ej.base.detach(el);\n });\n }\n function multiSelectRemove(e) {\n var cardDa = searchData.length > 0 ? searchData : (multiSelectData.length > 0 ? multiSelectData : cardObj);\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = cardDa;\n destroyAllCard();\n cardRendering(cardObj);\n }\n else if (multiselectComp.value.length === 0 && searchValCount > 0) {\n searchFilter(document.getElementById('search_Card').value);\n }\n else if (multiselectComp.value.length === 0) {\n destroyAllCard();\n multiSelectData = cardDa;\n cardRendering(cardDa);\n }\n else {\n var keywords = e.itemData.Code.split(',');\n var dublicate_1;\n keywords.forEach(function (key) {\n dublicate_1 = new ej.data.DataManager(cardObj).executeLocal(new ej.data.Query().where('cardImage.tag', 'Contains', key, true));\n dublicate_1.forEach(function (da) {\n if (cardDa.indexOf(da) !== -1) {\n cardDa.splice(cardDa.indexOf(da), 1);\n }\n });\n multiSelectData = cardDa;\n });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n }\n function multiSelectFun(e) {\n var keywords = e.itemData.Code.split(',');\n var dublicate;\n var cardDa = searchData.length > 0 ? searchData : cardObj;\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = [];\n }\n keywords.forEach(function (key) {\n dublicate = new ej.data.DataManager(cardDa).executeLocal(new ej.data.Query().where('cardImage.tag', 'Contains', key, true));\n if (dublicate.length === 0) {\n multiSelectData = [];\n destroyAllCard();\n return;\n }\n dublicate.forEach(function (da) {\n if (multiSelectData.indexOf(da) === -1) {\n multiSelectData.push(da);\n }\n });\n });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n function searchFilter(key) {\n searchValCount = key.length;\n var predicate = new ej.data.Predicate('cardContent', 'Contains', key, true);\n predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);\n var cardDa = (multiSelectData.length > 0 && multiselectComp.value.length > 0) ? multiSelectData : cardObj;\n searchData = data = new ej.data.DataManager(cardDa).executeLocal(new ej.data.Query().where(predicate));\n destroyAllCard();\n cardRendering(data);\n }\n document.getElementById('search_Card').onkeyup = function (e) {\n if (e.code === 'Tab' || e.code === 'Escape' || e.code === 'ShiftLeft' || (e.code === 'Backspace' && emptyData)) {\n return;\n }\n var inputVal = e.target.value;\n /*jshint -W030 */\n inputVal.length === 0 ? emptyData = true : emptyData = false;\n searchFilter(inputVal);\n };\n "} \ No newline at end of file diff --git a/src/card/vertical-stack.json b/src/card/vertical-stack.json index dfee62a6..9c09666e 100644 --- a/src/card/vertical-stack.json +++ b/src/card/vertical-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Mayumi Ohno
    \n
    Marketing Representative
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    John Doe
    \n
    Real Estate Agent
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    johndoe@mail.com
    011-141-221
    www.johndoe.com
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Laura Callahan
    \n
    Sales Coordinator
    \n
    \n
    \n
    \n
    \n Laura received a BA in psychology from the University of Washington. She has also completed a course in business French.\n She reads and writes French.\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Mayumi Ohno
    \n
    Marketing Representative
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    John Doe
    \n
    Real Estate Agent
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    johndoe@mail.com
    011-141-221
    www.johndoe.com
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Laura Callahan
    \n
    Sales Coordinator
    \n
    \n
    \n
    \n
    \n Laura received a BA in psychology from the University of Washington. She has also completed a course in business French.\n She reads and writes French.\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n\n"} \ No newline at end of file diff --git a/src/chart/accumulation-distribution-indicator-stack.json b/src/chart/accumulation-distribution-indicator-stack.json new file mode 100644 index 00000000..e6d5cd8e --- /dev/null +++ b/src/chart/accumulation-distribution-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for ADI Indicator\n */\n var _this = this;\n this.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n plotOffset: 25,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,\n interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',\n stripLines: [\n {\n start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, animation: { enable: true }\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n axisLabelRender: function (args) {\n if (args.axis.name === 'secondary') {\n var value = Number(args.text) / 1000000000;\n args.text = String(value) + 'bn';\n }\n },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#adi-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/accumulation-distribution-indicator.js b/src/chart/accumulation-distribution-indicator.js index ba42ee2e..bd065a78 100644 --- a/src/chart/accumulation-distribution-indicator.js +++ b/src/chart/accumulation-distribution-indicator.js @@ -48,7 +48,8 @@ }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -64,12 +65,14 @@ chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } diff --git a/src/chart/area-empty-stack.json b/src/chart/area-empty-stack.json new file mode 100644 index 00000000..b97b75d4 --- /dev/null +++ b/src/chart/area-empty-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 2,\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Rates', \n labelFormat: '{value}M',\n lineStyle: { width: 0},\n majorTickLines: { width: 0}\n },\n chartArea: {\n border: {\n width: 0\n }\n },//Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },\n { x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },\n { x: '2010', y: 2 }, { x: 2011, y: 3.1 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'France',\n opacity: 0.8, marker: { visible : false }\n }, {\n type: 'Area',\n dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },\n { x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },\n { x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'US',\n opacity: 0.8, marker: { visible : false }\n },\n ],\n //Initializing Chart Title\n title: 'Inflation Rate',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#area-container');\n"} \ No newline at end of file diff --git a/src/chart/area-empty.js b/src/chart/area-empty.js index cb62393d..220287eb 100644 --- a/src/chart/area-empty.js +++ b/src/chart/area-empty.js @@ -44,12 +44,14 @@ this.default = function () { //Initializing Chart Title title: 'Inflation Rate', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#area-container'); }; \ No newline at end of file diff --git a/src/chart/area-segments-stack.json b/src/chart/area-segments-stack.json new file mode 100644 index 00000000..35bef3c1 --- /dev/null +++ b/src/chart/area-segments-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    ","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n \n var dataValues = [];\n [150, 71.5, 106.4, 100.25, 70.0, 106.0, 85.6, 78.5, 76.4, 86.1, 155.6, 160.4].map(function (value, index) {\n dataValues.push({ XValue: new Date(2016, index, 1), YValue: value });\n });\n var chart = new ej.charts.Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'MMM',\n intervalType: 'Months',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n labelFormat: '${value}K',\n rangePadding: 'None',\n minimum: 0,\n maximum: 200,\n interval: 50,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n annotations: [\n {\n content: '#templateWrap',\n region: 'Series',\n x: '90%',\n y: '12%'\n }\n ],\n legendSettings: { visible: false },\n //Initializing Chart Series\n series: [\n {\n dataSource: dataValues,\n segmentAxis: 'X',\n segments: [{\n value: new Date(2016, 4, 1),\n color: 'url(#winter)'\n }, {\n value: new Date(2016, 8, 1),\n color: 'url(#summer)'\n }, {\n color: 'url(#spring)'\n }],\n name: 'US', xName: 'XValue', yName: 'YValue', type: 'MultiColoredArea'\n }\n ],\n //Initializing Chart title\n title: 'Organic Revenue in US - 2016',\n //Initializing User Interaction Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/area-segments.js b/src/chart/area-segments.js index 558e1403..feb0aa43 100644 --- a/src/chart/area-segments.js +++ b/src/chart/area-segments.js @@ -67,12 +67,14 @@ this.default = function () { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/area-stack.json b/src/chart/area-stack.json new file mode 100644 index 00000000..90a3cedc --- /dev/null +++ b/src/chart/area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Area Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n majorGridLines: { width: 0 },\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Revenue in Millions',\n minimum: 2,\n maximum: 5,\n interval: 1,\n lineStyle: { width: 0},\n majorTickLines: { width: 0},\n labelFormat: '{value}M'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [{ x: new Date(2000, 0, 1), y: 4 }, { x: new Date(2001, 0, 1), y: 3.0 },\n { x: new Date(2002, 0, 1), y: 3.8 }, { x: new Date(2003, 0, 1), y: 3.4 },\n { x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product A',\n opacity: 0.5, marker: { visible : false }\n },\n {\n type: 'Area',\n dataSource: [{ x: new Date(2000, 0, 1), y: 2.6 }, { x: new Date(2001, 0, 1), y: 2.8 },\n { x: new Date(2002, 0, 1), y: 2.6 }, { x: new Date(2003, 0, 1), y: 3 },\n { x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product B',\n opacity: 0.5, marker: { visible : false }\n }\n ],\n //Initializing Chart Title\n title: 'Average Sales Comparison',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#area-container');\n"} \ No newline at end of file diff --git a/src/chart/area.js b/src/chart/area.js index 1c9b284d..715d9b61 100644 --- a/src/chart/area.js +++ b/src/chart/area.js @@ -50,12 +50,14 @@ this.default = function () { //Initializing Chart Title title: 'Average Sales Comparison', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#area-container'); }; \ No newline at end of file diff --git a/src/chart/average-true-range-indicator-stack.json b/src/chart/average-true-range-indicator-stack.json new file mode 100644 index 00000000..88661d72 --- /dev/null +++ b/src/chart/average-true-range-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for ATR Indicator\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1,\n plotOffset: 25,\n majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },\n maximum: 14, minimum: 0, interval: 7, title: 'ATR',\n stripLines: [\n {\n start: 0, end: 14, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, animation: { enable: true }\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#atr-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/average-true-range-indicator.js b/src/chart/average-true-range-indicator.js index 23e83f18..798abbaa 100644 --- a/src/chart/average-true-range-indicator.js +++ b/src/chart/average-true-range-indicator.js @@ -48,7 +48,8 @@ this.renderChart = function (chartData) { }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -58,12 +59,14 @@ this.renderChart = function (chartData) { chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } diff --git a/src/chart/axes-crossing-stack.json b/src/chart/axes-crossing-stack.json new file mode 100644 index 00000000..61cb3c23 --- /dev/null +++ b/src/chart/axes-crossing-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n
    \n
    Axis:
    \n     		\n
    \n \n
    \n
    \n
    Crosses Value:
    \n     		\n
    \n \n
    \n
    \n
    Placing Label Near to Axis Line:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Axes Crossing Sample\n */\n\n\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n minimum: -8, maximum: 8, interval: 2,\n valueType: 'Double',\n lineStyle: { \n width: 2\n },\n minorTickLines: { width: 0 },\n majorTickLines: { width: 0 },\n crossesAt: 0,\n minorTicksPerInterval: 3\n },\n primaryYAxis: {\n minimum: -8, maximum: 8, interval: 2,\n lineStyle: {\n color: 'Black',\n width: 1\n },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 },\n crossesAt: 0,\n minorTicksPerInterval: 3,\n },\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: -6, y: 2 }, { x: -5, y: 0 }, { x: -4.511, y: -0.977 }, { x: -3, y: -4 }, { x: -1.348, y: -1.247 },\n { x: -0.6, y: 0 }, { x: 0, y: 1 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 },\n ],\n fill: 'Blue', name: 'Linear Interpolation',\n enableTooltip: false, xName: 'x', width: 2, yName: 'y',\n },\n {\n type: 'Spline',\n dataSource: [\n { x: -6, y: 2 }, { x: -5.291, y: 0 }, { x: -5, y: -0.774 }, { x: -3, y: -4 }, { x: -0.6, y: -0.965 },\n { x: -0.175, y: 0 }, { x: 0, y: 0.404 }, { x: 1.5, y: 3.5 }, { x: 3.863, y: 5.163 }, { x: 6, y: 4.5 },\n ],\n fill: 'Green', name: 'Cubic Spline Interpolation',\n xName: 'x', width: 2, enableTooltip: false, yName: 'y',\n }, {\n type: 'Scatter',\n dataSource: [\n { x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 },\n ],\n fill: 'Red', name: 'Data Points', xName: 'x', width: 2,\n yName: 'y', marker: { visible: false, width: 12, height: 12 }\n }\n ],\n\n tooltip: { enable: true },\n title: 'Spline Interpolation',\n });\n chart.appendTo('#container');\n var axes = new ej.dropdowns.DropDownList({\n index: 0, placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var target = document.getElementById('axisElements');\n if (axes.index === 0) {\n target.checked = chart.primaryXAxis.placeNextToAxisLine;\n crossValue.value = +chart.primaryXAxis.crossesAt;\n }\n else {\n target.checked = chart.primaryYAxis.placeNextToAxisLine;\n crossValue.value = +chart.primaryYAxis.crossesAt;\n }\n chart.dataBind();\n }\n });\n axes.appendTo('#selectAxis');\n var crossValue = new ej.inputs.NumericTextBox({\n value: 0, min: -8,\n max: 8, width: 120,\n step: 2,\n change: function () {\n if (axes.index === 0) {\n chart.primaryXAxis.crossesAt = crossValue.value;\n }\n else {\n chart.primaryYAxis.crossesAt = crossValue.value;\n }\n chart.dataBind();\n }\n });\n crossValue.appendTo('#crossingValue');\n document.getElementById('axisElements').onchange = function (e) {\n var value = e.target.checked;\n if (axes.index === 0) {\n chart.primaryXAxis.placeNextToAxisLine = value;\n }\n else {\n chart.primaryYAxis.placeNextToAxisLine = value;\n }\n chart.dataBind();\n };\n"} \ No newline at end of file diff --git a/src/chart/axes-crossing.js b/src/chart/axes-crossing.js index 005ad38b..d61560ba 100644 --- a/src/chart/axes-crossing.js +++ b/src/chart/axes-crossing.js @@ -53,12 +53,14 @@ this.default = function () { yName: 'y', marker: { visible: false, width: 12, height: 12 } } ], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end tooltip: { enable: true }, title: 'Spline Interpolation', }); diff --git a/src/chart/bar-stack.json b/src/chart/bar-stack.json new file mode 100644 index 00000000..e4b17371 --- /dev/null +++ b/src/chart/bar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Source:\n www.gov.uk\n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Bar Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Food',\n interval: 1,\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}B',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },\n { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Imports', marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600', color:'#ffffff'\n }\n }\n }\n },\n {\n type: 'Bar',\n dataSource: [\n { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },\n { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Exports', marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600', color:'#ffffff'\n }\n }\n }\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'UK Trade in Food Groups - 2015',\n\n });\n chart.appendTo('#bar-container');\n"} \ No newline at end of file diff --git a/src/chart/bar.js b/src/chart/bar.js index 55f70218..af0bf003 100644 --- a/src/chart/bar.js +++ b/src/chart/bar.js @@ -70,12 +70,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'UK Trade in Food Groups - 2015', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#bar-container'); }; \ No newline at end of file diff --git a/src/chart/bollinger-stack.json b/src/chart/bollinger-stack.json new file mode 100644 index 00000000..5720c41f --- /dev/null +++ b/src/chart/bollinger-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Bollinger Band Indicator\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorGridLines: { width: 1 },\n lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: false }\n }],\n indicators: [{\n type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },\n lowerLine: { color: '#f2ec2f', width: 1 }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n title: 'AAPL - 2012-2017',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#bollinger-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/bollinger.js b/src/chart/bollinger.js index b599e8b1..fad2ad7c 100644 --- a/src/chart/bollinger.js +++ b/src/chart/bollinger.js @@ -38,17 +38,20 @@ this.renderChart = function (chartData) { crosshair: { enable: true, lineType: 'Vertical' }, zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, width: ej.base.Browser.isDevice ? '100%' : '80%', title: 'AAPL - 2012-2017', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#bollinger-container'); diff --git a/src/chart/box-and-whisker-stack.json b/src/chart/box-and-whisker-stack.json new file mode 100644 index 00000000..b989b19d --- /dev/null +++ b/src/chart/box-and-whisker-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Mode:\n
    \n     		\n
    \n \n
    \n
    \n
    Mean:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Box and Whisker Series \n */\n\n var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n args.border.color = ej.charts.getSaturationColor(args.fill, -0.6);\n };\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n edgeLabelPlacement: 'Shift'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Age',\n minimum: 10,\n maximum: 60,\n interval: 10,\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }\n },\n pointRender: labelRender,\n //Initializing Chart Series\n series: [\n {\n type: 'BoxAndWhisker',\n dataSource: [\n { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },\n { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },\n { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },\n { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },\n { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },\n { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },\n { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },\n { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },\n { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }\n ],\n xName: 'x',\n yName: 'y',\n marker: {\n visible: true,\n width: 10,\n height: 10\n },\n name: 'Department'\n }\n ],\n tooltip: {\n enable: true\n },\n legendSettings: {\n visible: false\n },\n //Initializing Chart Title\n title: 'Employee Age Group in Various Department',\n\n });\n chart.appendTo('#box-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].boxPlotMode = mode.value;\n chart.series[0].animation.enable = false;\n chart.refresh();\n }\n });\n mode.appendTo('#mode');\n document.getElementById('mean').onchange = function () {\n var element = ej.charts.getElement('mean');\n chart.series[0].showMean = element.checked;\n chart.series[0].animation.enable = false;\n chart.refresh();\n };\n"} \ No newline at end of file diff --git a/src/chart/box-and-whisker.js b/src/chart/box-and-whisker.js index 20bf2371..b2ac0153 100644 --- a/src/chart/box-and-whisker.js +++ b/src/chart/box-and-whisker.js @@ -72,12 +72,14 @@ this.default = function () { }, //Initializing Chart Title title: 'Employee Age Group in Various Department', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#box-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/bubble-stack.json b/src/chart/bubble-stack.json new file mode 100644 index 00000000..b73e8b84 --- /dev/null +++ b/src/chart/bubble-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index % 10];\n }\n else if ( selectedTheme === 'highcontrast') {\n args.fill = highContrastColors[args.point.index % 10];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for Bubble Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Literacy Rate',\n minimum: 60,\n maximum: 100,\n interval: 5\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n title: 'GDP Growth Rate',\n minimum: 0,\n maximum: 10,\n interval: 2.5\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Series\n series: [\n {\n type: 'Bubble',\n dataSource: [\n { x: 92.2, y: 7.8, size: 1.347, text: 'China' },\n { x: 74, y: 6.5, size: 1.241, text: 'India' },\n { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },\n { x: 99.4, y: 2.2, size: 0.312, text: 'US' },\n { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },\n { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },\n { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },\n { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },\n { x: 99, y: 0.2, size: 0.128, text: 'Japan' },\n { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },\n { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },\n { x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },\n { x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },\n { x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },\n { x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },\n { x: 81, y: 3.5, size: 0.21, text: 'Australia' },\n { x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },\n { x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }\n ],\n minRadius: 3,\n maxRadius: ej.base.Browser.isDevice ? 6 : 8,\n xName: 'x', yName: 'y', size: 'size', name: 'Pound',\n marker: { dataLabel: { name: 'text' } }\n },\n ],\n\n pointRender: labelRender,\n //Initializing Chart Series\n title: 'World Countries Details',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: '${point.text}
    Literacy Rate : ${point.x}%' +\n '
    GDP Annual Growth Rate : ${point.y}
    Population : ${point.size} Billion'\n },\n legendSettings: { visible: false }\n });\n chart.appendTo('#bubble-container');\n"} \ No newline at end of file diff --git a/src/chart/bubble.js b/src/chart/bubble.js index 9a5ad49b..d2d543a3 100644 --- a/src/chart/bubble.js +++ b/src/chart/bubble.js @@ -72,12 +72,14 @@ this.default = function () { marker: { dataLabel: { name: 'text' } } }, ], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end pointRender: labelRender, //Initializing Chart Series title: 'World Countries Details', diff --git a/src/chart/candle-stick-stack.json b/src/chart/candle-stick-stack.json new file mode 100644 index 00000000..0a186322 --- /dev/null +++ b/src/chart/candle-stick-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n

    AAPL Historical

    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n/**\n * Sample for Candle Series\n */\n var _this = this;\n var pointColors = [];\n var getLabelText = function (value) {\n return (((value) / 1000000000)).toFixed(1) + 'bn';\n };\n this.renderChart2 = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 },\n },\n primaryYAxis: {\n title: 'Volume', valueType: 'Logarithmic', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 },\n stripLines: [\n {\n end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,\n opacity: 0.03, zIndex: 'Behind'\n }\n ]\n },\n axes: [{\n name: 'secondary', opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },\n labelFormat: 'n0', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }, rangePadding: 'None'\n }],\n rows: [{ height: '30%' }, { height: '70%' }],\n series: [\n { type: 'Column', dataSource: chartData, animation: { enable: true }, xName: 'x', yName: 'volume', name: 'Volume' },\n {\n type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n dataSource: chartData, animation: { enable: true }, volume: 'volume',\n xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',\n }\n ], tooltip: { enable: true, shared: true },\n tooltipRender: function (args) {\n if (!args.series.index) {\n args.text = 'Volume : ' + getLabelText(args.text.split('')[1].split('')[0]) + '';\n }\n },\n pointRender: function (args) {\n if (args.series.type === 'Candle') {\n pointColors.push(args.fill);\n }\n else {\n args.fill = pointColors[args.point.index];\n }\n },\n axisLabelRender: function (args) {\n if (args.axis.name === 'primaryYAxis') {\n args.text = getLabelText(+args.text);\n }\n if (args.axis.name === 'secondary') {\n args.text = '$' + args.text;\n }\n },\n\n width: ej.base.Browser.isDevice ? '100%' : '80%', chartArea: { border: { width: 0 } },\n crosshair: { enable: true, lineType: 'Vertical' }\n });\n chart.appendTo('#container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderChart2(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/candle-stick.js b/src/chart/candle-stick.js index d23eae7c..60ed64b9 100644 --- a/src/chart/candle-stick.js +++ b/src/chart/candle-stick.js @@ -7,7 +7,7 @@ var getLabelText = function (value) { return (((value) / 1000000000)).toFixed(1) + 'bn'; }; - this.renderChart = function (chartData) { + this.renderChart2 = function (chartData) { var chart = new ej.charts.Chart({ primaryXAxis: { valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 }, @@ -55,12 +55,14 @@ args.text = '$' + args.text; } }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end width: ej.base.Browser.isDevice ? '100%' : '80%', chartArea: { border: { width: 0 } }, crosshair: { enable: true, lineType: 'Vertical' } }); @@ -75,6 +77,6 @@ chartData.map(function (data) { data.x = new Date(data.x); }); - _this.renderChart(chartData); + _this.renderChart2(chartData); }; }; \ No newline at end of file diff --git a/src/chart/category-stack.json b/src/chart/category-stack.json new file mode 100644 index 00000000..b404d5b2 --- /dev/null +++ b/src/chart/category-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Source:\n www.internetworldstats.com\n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\nvar labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highContrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index % 10];\n }\n else if (selectedTheme === 'highcontrast') {\n args.fill = highContrastColors[args.point.index % 10];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n\n/**\n * Sample for Catergory Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Country',\n valueType: 'Category',\n majorGridLines: { width: 0 },\n enableTrim: false\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 0,\n maximum: 800,\n labelFormat: '{value}M',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Bar', tooltipMappingName: 'country',\n dataSource: [\n { x: 'Germany', y: 72, country: 'GER: 72'},\n { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},\n { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},\n { x: 'India', y: 462.1, country: 'IND: 462.1'},\n { x: 'China', y: 721.4, country: 'CHN: 721.4'},\n { x: 'United States
    Of America', y: 286.9, country: 'USA: 286.9'},\n { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},\n { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'},\n ],\n xName: 'x', width: 2,\n yName: 'y', marker: {\n dataLabel: {\n visible: true,\n position: 'Top', font: {\n fontWeight: '600',\n color: '#ffffff'\n }\n }\n },\n name: 'Users'\n }\n ],\n legendSettings: {\n visible: false\n },\n pointRender: labelRender,\n\n //Initializing Chart Title\n title: 'Internet Users – 2016',\n //Initializing Tooltip\n tooltip: { enable: true, format: '${point.tooltip}' }\n });\n chart.appendTo('#category-container');\n"} \ No newline at end of file diff --git a/src/chart/category.js b/src/chart/category.js index cec0f3ce..28f6fe04 100644 --- a/src/chart/category.js +++ b/src/chart/category.js @@ -34,7 +34,7 @@ this.default = function () { title: 'Country', valueType: 'Category', majorGridLines: { width: 0 }, - enableTrim: true + enableTrim: false }, //Initializing Primary Y Axis primaryYAxis: { @@ -65,7 +65,7 @@ this.default = function () { { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'}, { x: 'India', y: 462.1, country: 'IND: 462.1'}, { x: 'China', y: 721.4, country: 'CHN: 721.4'}, - { x: 'United States Of America', y: 286.9, country: 'USA: 286.9'}, + { x: 'United States
    Of America', y: 286.9, country: 'USA: 286.9'}, { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'}, { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'}, ], @@ -86,12 +86,14 @@ this.default = function () { visible: false }, pointRender: labelRender, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end //Initializing Chart Title title: 'Internet Users – 2016', //Initializing Tooltip diff --git a/src/chart/chart-performance-stack.json b/src/chart/chart-performance-stack.json new file mode 100644 index 00000000..b5d278ae --- /dev/null +++ b/src/chart/chart-performance-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n
    \n
    \n
    Time Taken
    \n     		\n
    \n 0ms\n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}var chart;\nvar loaded;\nvar dt1;\nvar dt2;\n/**\n * Sample for Chart Performance\n */\n\n chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { color: 'transparent' }\n },\n //Initializing Chart Series\n series: [\n {\n name: 'Series1',\n type: 'Line', marker: { visible: false },\n animation: { enable: false }\n }\n ],\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#performance-container');\n var button = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true });\n button.appendTo('#load');\n document.getElementById('load').onclick = function () {\n var series1 = [];\n var point1;\n var value = 0;\n var i;\n for (i = 0; i < 100000; i++) {\n value += (Math.random() * 10 - 5);\n point1 = { x: i, y: value };\n series1.push(point1);\n }\n dt1 = new Date().getTime();\n chart.series[0].dataSource = series1;\n chart.series[0].xName = 'x';\n chart.series[0].yName = 'y';\n chart.legendSettings.visible = false;\n chart.loaded = loaded;\n chart.refresh();\n };\n loaded = function (args) {\n dt2 = new Date().getTime();\n document.getElementById('performanceTime').innerHTML = (dt2 - dt1) + 'ms';\n };\n"} \ No newline at end of file diff --git a/src/chart/chart-performance.js b/src/chart/chart-performance.js index eabedd81..fa38161a 100644 --- a/src/chart/chart-performance.js +++ b/src/chart/chart-performance.js @@ -20,12 +20,14 @@ this.default = function () { } ], legendSettings: { visible: false }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#performance-container'); var button = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true }); diff --git a/src/chart/column-placement-stack.json b/src/chart/column-placement-stack.json new file mode 100644 index 00000000..44fe014e --- /dev/null +++ b/src/chart/column-placement-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Column series series with Side by Side Placement\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n //Initializing Primary Y Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n //Initializing Side by Side Placement\n enableSideBySidePlacement: false,\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',\n dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },\n { x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],\n columnWidth: 0.5,\n marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',\n dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],\n columnWidth: 0.4,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }, {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',\n dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],\n columnWidth: 0.3,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',\n dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],\n columnWidth: 0.2,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }\n ],\n //Initializing Chart Title\n title: 'Fruit Consumption', tooltip: { enable: true, shared: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/column-placement.js b/src/chart/column-placement.js index 4a162463..349475e8 100644 --- a/src/chart/column-placement.js +++ b/src/chart/column-placement.js @@ -45,12 +45,14 @@ this.default = function () { //Initializing Chart Title title: 'Fruit Consumption', tooltip: { enable: true, shared: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/column-stack.json b/src/chart/column-stack.json new file mode 100644 index 00000000..37e12fb3 --- /dev/null +++ b/src/chart/column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Column Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n //Initializing Primary X Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',\n dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',\n dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',\n dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n }\n ],\n //Initializing Chart Title\n title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#column-container');\n"} \ No newline at end of file diff --git a/src/chart/column.js b/src/chart/column.js index 86754355..ba979e26 100644 --- a/src/chart/column.js +++ b/src/chart/column.js @@ -34,6 +34,7 @@ this.default = function () { //Initializing Chart Title title: 'Olympic Medal Counts - RIO', tooltip: { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -45,6 +46,7 @@ this.default = function () { args.chart.series[2].marker.dataLabel.font.color = '#000000'; } } + // custom code end }); chart.appendTo('#column-container'); }; \ No newline at end of file diff --git a/src/chart/cross-hair-stack.json b/src/chart/cross-hair-stack.json new file mode 100644 index 00000000..9a0235dd --- /dev/null +++ b/src/chart/cross-hair-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Crosshair in chart\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n labelFormat: 'MMM'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 83, maximum: 87, interval: 1,\n title: 'Million in USD',\n labelFormat: '{value}M',\n rowIndex: 0,\n crosshairTooltip: {\n enable: true\n }\n },\n //Initializing Axes\n axes: [\n {\n majorGridLines: { width: 0 },\n rowIndex: 0,\n opposedPosition: true,\n minimum: 82, maximum: 88, interval: 2,\n name: 'yAxis',\n title: 'Million in USD (Stock)',\n crosshairTooltip: { enable: true }\n }\n ],\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: window.axesData,\n border: { width: 1.5 },\n xName: 'xDate', width: 2,\n yName: 'High',\n marker: {\n visible: true\n }\n },\n {\n type: 'HiloOpenClose',\n dataSource: window.axesData,\n yAxisName: 'yAxis',\n border: { width: 1.5 },\n bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n xName: 'xDate', width: 2,\n high: 'High', low: 'Low', open: 'Open', close: 'Close'\n }\n ],\n //Initializing Crosshair\n crosshair: { enable: true },\n legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n //Initializing Chart Title\n title: 'Conns,Inc Stock Details',\n\n });\n chart.appendTo('#crosshair-container');\n"} \ No newline at end of file diff --git a/src/chart/cross-hair.js b/src/chart/cross-hair.js index 069b919b..e73a9b15 100644 --- a/src/chart/cross-hair.js +++ b/src/chart/cross-hair.js @@ -60,12 +60,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '80%', //Initializing Chart Title title: 'Conns,Inc Stock Details', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#crosshair-container'); }; \ No newline at end of file diff --git a/src/chart/dashed-line-stack.json b/src/chart/dashed-line-stack.json new file mode 100644 index 00000000..2a9196ab --- /dev/null +++ b/src/chart/dashed-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for line series with dashed line\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n labelFormat: '{value}%',\n rangePadding: 'None',\n minimum: 0,\n maximum: 40,\n interval: 10,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },\n { x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },\n { x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },\n { x: new Date(2011, 0, 1), y: 16.6 }\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n dashArray: '5',\n yName: 'y', name: 'Banana',\n },\n {\n type: 'Line',\n dataSource: [\n { x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },\n { x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },\n { x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10,\n shape: 'Diamond'\n },\n dashArray: '10',\n yName: 'y', name: 'Apple',\n }\n ],\n //Initializing Chart Title\n title: 'Fruits Production Statistics',\n //Initializing Tootlip\n tooltip: {\n enable: true,\n shared: true\n },\n //Initializing Crosshair\n crosshair: {\n enable: true,\n line: {\n color: 'rgba(204,214,235,0.25)',\n width: ej.base.Browser.isDevice ? 50 : 20,\n },\n lineType: 'Vertical'\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/dashed-line.js b/src/chart/dashed-line.js index 3346e2e4..c6813e80 100644 --- a/src/chart/dashed-line.js +++ b/src/chart/dashed-line.js @@ -79,12 +79,14 @@ this.default = function () { lineType: 'Vertical' }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/data-label-template-stack.json b/src/chart/data-label-template-stack.json new file mode 100644 index 00000000..fa06108f --- /dev/null +++ b/src/chart/data-label-template-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n\n\n\n\n\n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Data Label Template\n */\n\n var theme;\n var chart = new ej.charts.Chart({\n //Initializing Chart Title\n title: 'Population of India Statistics',\n subTitle: '(2010 - 2016)',\n subTitleStyle: {\n textAlignment: 'Far'\n },\n titleStyle: {\n fontFamily: 'Roboto',\n fontStyle: 'medium', size: '14px'\n },\n chartArea: { border: { width: 0 } },\n //Initializing Primary X Axis\n primaryXAxis: {\n minimum: 2010, maximum: 2016,\n interval: 1,\n edgeLabelPlacement: 'Shift',\n labelStyle: {\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n majorGridLines: { width: 0 },\n lineStyle: { color: '#eaeaea', width: 1 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 900, maximum: 1300,\n interval: 80,\n labelFormat: '{value}M',\n labelStyle: {\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n majorGridLines: {\n color: '#eaeaea',\n width: 1\n },\n lineStyle: {\n color: '#eaeaea',\n width: 1\n }\n },\n //Initializing Chart Title\n series: [\n {\n name: 'Male',\n dataSource: [\n { x: 2010, y: 1014 }, { x: 2011, y: 1040 },\n { x: 2012, y: 1065 }, { x: 2013, y: 1110 },\n { x: 2014, y: 1130 }, { x: 2015, y: 1153 },\n { x: 2016, y: 1175 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Circle',\n dataLabel: {\n visible: true,\n position: 'Top',\n margin: { right: 30 },\n template: '#Male-Material'\n }\n }, width: 2\n }, {\n name: 'Female',\n dataSource: [\n { x: 2010, y: 990 }, { x: 2011, y: 1010 },\n { x: 2012, y: 1030 }, { x: 2013, y: 1070 },\n { x: 2014, y: 1105 }, { x: 2015, y: 1138 },\n { x: 2016, y: 1155 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Rectangle',\n dataLabel: {\n visible: true,\n position: 'Bottom',\n margin: { right: 15 },\n template: '#Female-Material'\n }\n }, width: 2\n }\n ],\n textRender: function (args) {\n args.template = '#' + args.series.name + '-' + theme;\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: {\n visible: true,\n }\n });\n chart.appendTo('#temp-container');\n"} \ No newline at end of file diff --git a/src/chart/data-label-template.js b/src/chart/data-label-template.js index c60b3585..38666507 100644 --- a/src/chart/data-label-template.js +++ b/src/chart/data-label-template.js @@ -91,6 +91,7 @@ this.default = function () { args.template = '#' + args.series.name + '-' + theme; }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -98,6 +99,7 @@ this.default = function () { selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); args.chart.theme = theme; }, + // custom code end legendSettings: { visible: true, } diff --git a/src/chart/date-time-category-stack.json b/src/chart/date-time-category-stack.json new file mode 100644 index 00000000..5f5ebfd0 --- /dev/null +++ b/src/chart/date-time-category-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Date time category axis\n */\n\n var chart = new ej.charts.Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTimeCategory',\n intervalType: 'Days',\n skeleton: 'Ed',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 },\n stripLines: [\n { visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, },\n { visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 },\n ],\n title: 'Business Days'\n },\n primaryYAxis: {\n labelFormat: '{value}M',\n rangePadding: 'None',\n minimum: 0,\n maximum: 100,\n interval: 20,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: new Date(2017, 11, 20), y: 21 }, { x: new Date(2017, 11, 21), y: 24 },\n { x: new Date(2017, 11, 22), y: 24 }, { x: new Date(2017, 11, 26), y: 70 },\n { x: new Date(2017, 11, 27), y: 75 }, { x: new Date(2018, 0, 2), y: 82 },\n { x: new Date(2018, 0, 3), y: 53 }, { x: new Date(2018, 0, 4), y: 54 },\n { x: new Date(2018, 0, 5), y: 53 }, { x: new Date(2018, 0, 8), y: 45 }\n ],\n xName: 'x', yName: 'y', name: 'Product',\n },\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n legendSettings: { visible: false },\n title: 'Sales Comparison of a Product',\n tooltip: {\n enable: true\n },\n annotations: [\n {\n x: new Date(2017, 11, 22), y: 90, coordinateUnits: 'Point',\n content: '
    Christmas Offer
    Dec 2017
    ',\n },\n {\n x: new Date(2018, 0, 4), y: 90, coordinateUnits: 'Point',\n content: '
    New Year Offer
    Jan 2018
    ',\n }\n ],\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/date-time-category.js b/src/chart/date-time-category.js index dd4839a9..95da3aa3 100644 --- a/src/chart/date-time-category.js +++ b/src/chart/date-time-category.js @@ -61,6 +61,7 @@ this.default = function () { content: '
    New Year Offer
    Jan 2018
    ', } ], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -71,6 +72,7 @@ args.chart.annotations[0].content = '
    Christmas Offer
    Dec 2017
    '; } } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/date-time-stack.json b/src/chart/date-time-stack.json new file mode 100644 index 00000000..feb2309f --- /dev/null +++ b/src/chart/date-time-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Source:\n www.yr.no\n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Saample for DateTime Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'MMM',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: -20,\n maximum: 30,\n interval: 10,\n edgeLabelPlacement: 'Shift',\n labelFormat: '{value}°C',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(2016, 3, 1), y: 6.3 },\n { x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },\n { x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },\n { x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Warmest',\n marker: {\n visible: true,\n height: 10, width: 10,\n shape: 'Pentagon',\n dataLabel: { visible: true, position: 'Top' }\n }\n }, {\n type: 'Line',\n dataSource: [\n { x: new Date(2016, 3, 1), y: -5.3 },\n { x: new Date(2016, 4, 1), y: 1.0 }, { x: new Date(2016, 5, 1), y: 6.9 },\n { x: new Date(2016, 6, 1), y: 9.4 }, { x: new Date(2016, 7, 1), y: 7.6 },\n { x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Coldest',\n marker: {\n visible: true, height: 10, width: 10, shape: 'Diamond',\n dataLabel: { visible: true, position: 'Bottom' }\n }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Alaska Weather Statistics - 2016',\n\n });\n chart.appendTo('#datetime-container');\n"} \ No newline at end of file diff --git a/src/chart/date-time.js b/src/chart/date-time.js index 56b070aa..9b1956d6 100644 --- a/src/chart/date-time.js +++ b/src/chart/date-time.js @@ -63,12 +63,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Alaska Weather Statistics - 2016', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#datetime-container'); }; \ No newline at end of file diff --git a/src/chart/default-doughnut-stack.json b/src/chart/default-doughnut-stack.json new file mode 100644 index 00000000..0a4245b5 --- /dev/null +++ b/src/chart/default-doughnut-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}var centerTitle = document.createElement('div');\ncenterTitle.innerHTML = 'Expenses in Year';\ncenterTitle.style.position = 'absolute';\ncenterTitle.style.visibility = 'hidden';\n/**\n * Sample for Doughnut \n */\n\n var count = 0;\n\tvar pieinterval;\n var pie = new ej.charts.AccumulationChart({\n enableSmartLabels: true,\n //Initializing Selection Mode\n selectionMode: 'Point',\n //Initializing Series\n series: [\n {\n dataSource: [\n { 'x': 'Net-tution and Fees', y: 21, text: '21%' },\n { 'x': 'Self-supporting Operations', y: 21, text: '21%' },\n { 'x': 'Private Gifts', y: 8, text: '8%' },\n { 'x': 'All Other', y: 8, text: '8%' },\n { 'x': 'Local Revenue', y: 4, text: '4%' },\n { 'x': 'State Revenue', y: 21, text: '21%' },\n { 'x': 'Federal Revenue', y: 16, text: '16%' }\n ],\n xName: 'x',\n yName: 'y',\n startAngle: 0,\n endAngle: 360,\n innerRadius: '40%',\n dataLabel: {\n visible: true, position: 'Inside',\n name: '${point.y}',\n font: {\n color: 'white',\n fontWeight: '600',\n size: '14px'\n },\n },\n name: 'Revenue'\n }\n ],\n //Initializing Legend\n legendSettings: {\n visible: true, toggleVisibility: false,\n position: 'Right',\n height: '28%',\n width: '44%'\n },\n animationComplete: function (args) {\n centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);\n var rect = centerTitle.getBoundingClientRect();\n centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px';\n centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px';\n centerTitle.style.visibility = 'visible';\n var points = args.accumulation.visibleSeries[0].points;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n if (point.labelPosition === 'Outside' && point.labelVisible) {\n var label = document.getElementById('doughnut-container_datalabel_Series_0_text_' + point.index);\n label.setAttribute('fill', 'black');\n }\n }\n },\n textRender: function (args) {\n args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);\n args.text = args.text + '%';\n },\n //Initializing Title\n title: 'Education Institutional Revenue',\n\n });\n pie.appendTo('#doughnut-container');\n document.getElementById('doughnut-container').appendChild(centerTitle);\n function getFontSize(width) {\n if (width > 300) {\n return '13px';\n }\n else if (width > 250) {\n return '8px';\n }\n else {\n return '6px';\n }\n }\n"} \ No newline at end of file diff --git a/src/chart/default-doughnut.js b/src/chart/default-doughnut.js index 028fc3ea..73dab4df 100644 --- a/src/chart/default-doughnut.js +++ b/src/chart/default-doughnut.js @@ -1,11 +1,13 @@ var centerTitle = document.createElement('div'); -centerTitle.innerHTML = 'Expenses
    Year   2013'; +centerTitle.innerHTML = 'Expenses in Year'; centerTitle.style.position = 'absolute'; centerTitle.style.visibility = 'hidden'; /** * Sample for Doughnut */ this.default = function () { + var count = 0; + var pieinterval; var pie = new ej.charts.AccumulationChart({ enableSmartLabels: true, //Initializing Selection Mode @@ -29,7 +31,7 @@ this.default = function () { innerRadius: '40%', dataLabel: { visible: true, position: 'Inside', - name: 'text', + name: '${point.y}', font: { color: 'white', fontWeight: '600', @@ -49,8 +51,8 @@ this.default = function () { animationComplete: function (args) { centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width); var rect = centerTitle.getBoundingClientRect(); - centerTitle.style.top = (args.accumulation.center.y - rect.height / 2) + 'px'; - centerTitle.style.left = (args.accumulation.center.x - rect.width / 2) + 'px'; + centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px'; + centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px'; centerTitle.style.visibility = 'visible'; var points = args.accumulation.visibleSeries[0].points; for (var _i = 0, points_1 = points; _i < points_1.length; _i++) { @@ -63,17 +65,78 @@ this.default = function () { }, textRender: function (args) { args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width); - pie.animateSeries = true; + args.text = args.text + '%'; }, //Initializing Title title: 'Education Institutional Revenue', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); args.accumulation.legendSettings.position = ej.base.Browser.isDevice ? 'Bottom' : 'Right'; + }, + loaded: function (args) { + pie.loaded = null; + pieinterval = setInterval( function () { + if (document.getElementById('doughnut-container')) { + if (count === 0) { + pie.series[0].dataSource = [{ 'x': 'Net-tution and Fees', y: 10 }, { 'x': 'Self-supporting Operations', y: 10 }, + { 'x': 'Private Gifts', y: 13 }, { 'x': 'All Other', y: 14 }, + { 'x': 'Local Revenue', y: 9 }, { 'x': 'State Revenue', y: 13 }, + { 'x': 'Federal Revenue', y: 8 } + ]; + pie.animate(); + count++; + } + else if (count === 1) { + pie.series[0].dataSource = [ + { 'x': 'Net-tution and Fees', y: 120 }, { 'x': 'Self-supporting Operations', y: 31 }, + { 'x': 'Private Gifts', y: 6 }, { 'x': 'All Other', y: 12 }, + { 'x': 'Local Revenue', y: 25 }, { 'x': 'State Revenue', y: 11 }, + { 'x': 'Federal Revenue', y: 12 } + ]; + pie.animate(); + count++; + } + else if (count === 2) { + pie.series[0].dataSource = [ + { 'x': 'Net-tution and Fees', y: 6 }, { 'x': 'Self-supporting Operations', y: 22 }, + { 'x': 'Private Gifts', y: 11 }, { 'x': 'All Other', y: 15 }, + { 'x': 'Local Revenue', y: 13 }, { 'x': 'State Revenue', y: 10 }, + { 'x': 'Federal Revenue', y: 8 } + ]; + pie.animate(); + count++; + } + else if (count === 3) { + pie.series[0].dataSource = [ + { 'x': 'Net-tution and Fees', y: 15 }, { 'x': 'Self-supporting Operations', y: 10 }, + { 'x': 'Private Gifts', y: 18 }, { 'x': 'All Other', y: 20 }, + { 'x': 'Local Revenue', y: 30 }, { 'x': 'State Revenue', y: 20 }, + { 'x': 'Federal Revenue', y: 25 } + ]; + pie.animate(); + count++; + } + else if (count === 4) { + pie.series[0].dataSource = [ + { 'x': 'Net-tution and Fees', y: 21 }, { 'x': 'Self-supporting Operations', y: 10 }, + { 'x': 'Private Gifts', y: 15 }, { 'x': 'All Other', y: 15 }, + { 'x': 'Local Revenue', y: 11 }, { 'x': 'State Revenue', y: 20 }, + { 'x': 'Federal Revenue', y: 60 } + ]; + pie.animate(); + count = 0; + } + } else { + clearInterval(pieinterval); + } + }, + 3000); } + // custom code end }); pie.appendTo('#doughnut-container'); document.getElementById('doughnut-container').appendChild(centerTitle); diff --git a/src/chart/default-pie-stack.json b/src/chart/default-pie-stack.json new file mode 100644 index 00000000..671690e6 --- /dev/null +++ b/src/chart/default-pie-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Pie Angle\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    0

    \n
    \n
    \n
    Outer Radius\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    0.70

    \n
    \n
    \n
    Explode Radius\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    0.1

    \n
    \n
    \n
    Explode Index\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    0

    \n
    \n
    \n
    \n Center X\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    50%

    \n
    \n
    \n
    \n Center Y\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    50%

    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pie Chart\n */\n\n var pie = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n dataSource: [\n { 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },\n { 'x': 'iPhone', y: 19, text: '19%' },\n { 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },\n { 'x': 'Android', y: 12, text: '12%' }\n ],\n dataLabel: {\n visible: true,\n position: 'Inside', name: 'text',\n font: {\n fontWeight: '600'\n }\n },\n radius: '70%', xName: 'x',\n yName: 'y', startAngle: 0,\n endAngle: 0, innerRadius: '0%',\n explode: true, explodeOffset: '10%', explodeIndex: 0, name: 'Browser'\n }\n ],\n center: {x: '50%', y: '50%'},\n enableSmartLabels: true,\n enableAnimation: false,\n legendSettings: {\n visible: false,\n },\n //Initializing Tooltip\n tooltip: { enable: false, header: 'Browser', format: '${point.x}: ${point.y}%' },\n //Initializing Title\n title: 'Mobile Browser Statistics',\n\n });\n pie.appendTo('#pie-container');\n function anglechange(value) {\n pie.series[0].startAngle = +value;\n pie.series[0].endAngle = +value;\n\t\tpie.series[0].animation.enable = false;\n document.getElementById('anglevalue').innerHTML = value.toString();\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('pieangle').onpointermove = document.getElementById('pieangle').ontouchmove =\n document.getElementById('pieangle').onchange = function (e) {\n anglechange(+document.getElementById('pieangle').value);\n };\n function radiuschange(value) {\n pie.series[0].radius = value + '%';\n\t\tpie.series[0].animation.enable = false;\n document.getElementById('radius').innerHTML = (value / 100).toFixed(2);\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('pieradius').onpointermove = document.getElementById('pieradius').ontouchmove =\n document.getElementById('pieradius').onchange = function (e) {\n radiuschange(+document.getElementById('pieradius').value);\n };\n function exploderadius(value) {\n pie.visibleSeries[0].explodeOffset = value + '%';\n document.getElementById('exploderadius').innerHTML = (value / 100).toFixed(2);\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('pieexploderadius').onpointermove = document.getElementById('pieexploderadius').ontouchmove =\n document.getElementById('pieexploderadius').onchange = function (e) {\n exploderadius(+document.getElementById('pieexploderadius').value);\n };\n function explodeIndex(value) {\n pie.visibleSeries[0].explodeIndex = +value;\n\t\tpie.series[0].animation.enable = false;\n document.getElementById('explodeindex').innerHTML = value.toString();\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('pieexplodeindex').onpointermove = document.getElementById('pieexplodeindex').ontouchmove =\n document.getElementById('pieexplodeindex').onchange = function (e) {\n explodeIndex(+document.getElementById('pieexplodeindex').value);\n };\n function piecenterx(value) {\n pie.center.x = value + '%';\n\t\tpie.series[0].animation.enable = false;\n document.getElementById('xvalue').innerHTML = value + '%';\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('x').onpointermove = document.getElementById('x').ontouchmove =\n document.getElementById('x').onchange = function (e) {\n piecenterx(+document.getElementById('x').value);\n };\n function piecentery(value) {\n pie.center.y = value + '%';\n\t\tpie.series[0].animation.enable = false;\n document.getElementById('yvalue').innerHTML = value + '%';\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('y').onpointermove = document.getElementById('y').ontouchmove =\n document.getElementById('y').onchange = function (e) {\n piecentery(+document.getElementById('y').value);\n };\n"} \ No newline at end of file diff --git a/src/chart/default-pie.js b/src/chart/default-pie.js index 801f1b75..0efbf4c2 100644 --- a/src/chart/default-pie.js +++ b/src/chart/default-pie.js @@ -35,17 +35,20 @@ this.default = function () { tooltip: { enable: false, header: 'Browser', format: '${point.x}: ${point.y}%' }, //Initializing Title title: 'Mobile Browser Statistics', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); pie.appendTo('#pie-container'); function anglechange(value) { pie.series[0].startAngle = +value; pie.series[0].endAngle = +value; + pie.series[0].animation.enable = false; document.getElementById('anglevalue').innerHTML = value.toString(); pie.removeSvg(); pie.refreshSeries(); @@ -57,6 +60,7 @@ this.default = function () { }; function radiuschange(value) { pie.series[0].radius = value + '%'; + pie.series[0].animation.enable = false; document.getElementById('radius').innerHTML = (value / 100).toFixed(2); pie.removeSvg(); pie.refreshSeries(); @@ -79,6 +83,7 @@ this.default = function () { }; function explodeIndex(value) { pie.visibleSeries[0].explodeIndex = +value; + pie.series[0].animation.enable = false; document.getElementById('explodeindex').innerHTML = value.toString(); pie.removeSvg(); pie.refreshSeries(); @@ -90,6 +95,7 @@ this.default = function () { }; function piecenterx(value) { pie.center.x = value + '%'; + pie.series[0].animation.enable = false; document.getElementById('xvalue').innerHTML = value + '%'; pie.removeSvg(); pie.refreshSeries(); @@ -101,6 +107,7 @@ this.default = function () { }; function piecentery(value) { pie.center.y = value + '%'; + pie.series[0].animation.enable = false; document.getElementById('yvalue').innerHTML = value + '%'; pie.removeSvg(); pie.refreshSeries(); diff --git a/src/chart/donut-stack.json b/src/chart/donut-stack.json new file mode 100644 index 00000000..f39eed1f --- /dev/null +++ b/src/chart/donut-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Doughnut chart\n */\n\n var pie = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n dataSource: [{  x:  'Labour',  y:  18,  text:  '18%'  }, {  x:  'Legal',  y:  8,  text:  '8%'  },\n {  x:  'Production',  y:  15,  text:  '15%'  }, {  x:  'License',  y:  11,  text:  '11%'  },\n {  x:  'Facilities',  y:  18,  text:  '18%'  }, {  x:  'Taxes',  y:  14,  text:  '14%'  },\n {  x:  'Insurance',  y:  16,  text:  '16%'  }],\n dataLabel: {\n visible: true,\n name: 'text',\n position: 'Inside',\n font: {\n fontWeight: '600',\n color: '#ffffff'\n }\n },\n radius: '70%', xName: 'x',\n yName: 'y', startAngle: 0,\n endAngle: 360, innerRadius: '40%', name: 'Project',\n explode: true, explodeOffset: '10%', explodeIndex: 3\n }\n ],\n enableSmartLabels: true,\n legendSettings: {\n visible: true, position: 'Top'\n },\n //Initializing Tooltip\n tooltip: { enable: false },\n //Initializing Title\n title: 'Project Cost Breakdown',\n\n });\n pie.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/donut.js b/src/chart/donut.js index 67b8d449..19e09beb 100644 --- a/src/chart/donut.js +++ b/src/chart/donut.js @@ -33,12 +33,14 @@ this.default = function () { tooltip: { enable: false }, //Initializing Title title: 'Project Cost Breakdown', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); pie.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/drill-down-pie-stack.json b/src/chart/drill-down-pie-stack.json new file mode 100644 index 00000000..a0fda476 --- /dev/null +++ b/src/chart/drill-down-pie-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Drill Down Sample\n */\n\n var suvs = [{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },\n { x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }];\n var cars = [{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }, { x: 'Tata', y: 10 },\n { x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }];\n var pickups = [{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },\n { x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }];\n var minivans = [{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }, { x: 'Jaguar', y: 9 },\n { x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }];\n var clickInstance = {\n //Initializing Series\n series: [\n {\n type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y',\n dataLabel: { visible: true, position: 'Outside' }, innerRadius: '30%',\n }\n ], textRender: function (args) {\n args.text = args.point.x + ' ' + args.point.y + ' %';\n }, annotations: [{\n content: '
    ' +\n '', region: 'Series', x: '50%', y: '50%'\n }], chartMouseClick: function (args) {\n if (args.target.indexOf('back') > -1) {\n var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];\n if (tooltip) {\n tooltip.remove();\n }\n pie.destroy();\n pie.removeSvg();\n pie = null;\n pie = new ej.charts.AccumulationChart(instance);\n pie.appendTo('#drill-container');\n ej.charts.getElement('category').style.visibility = 'hidden';\n ej.charts.getElement('symbol').style.visibility = 'hidden';\n ej.charts.getElement('text').style.visibility = 'hidden';\n }\n },\n legendSettings: { visible: false }, enableSmartLabels: true,\n //Initializing Tooltip\n tooltip: { enable: false, format: '${point.x}
    ${point.y} %' },\n\n };\n var pointClick = function (args) {\n var index = ej.charts.indexFinder(args.target);\n if (ej.charts.getElement(pie.element.id + '_Series_' + index.series + '_Point_' + index.point)) {\n var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];\n if (tooltip) {\n tooltip.remove();\n }\n pie.destroy();\n pie.removeSvg();\n pie = null;\n switch (index.point) {\n case 0:\n clickInstance.series[0].dataSource = suvs;\n ej.charts.getElement('text').innerHTML = 'SUV';\n clickInstance.title = 'Automobile Sales in the SUV Segment';\n break;\n case 1:\n clickInstance.series[0].dataSource = cars;\n ej.charts.getElement('text').innerHTML = 'Car';\n clickInstance.title = 'Automobile Sales in the Car Segment';\n break;\n case 2:\n clickInstance.series[0].dataSource = pickups;\n ej.charts.getElement('text').innerHTML = 'Pickup';\n clickInstance.title = 'Automobile Sales in the Pickup Segment';\n break;\n case 3:\n clickInstance.series[0].dataSource = minivans;\n ej.charts.getElement('text').innerHTML = 'Minivan';\n clickInstance.title = 'Automobile Sales in the Minivan Segment';\n break;\n }\n pie = new ej.charts.AccumulationChart(clickInstance);\n pie.appendTo('#drill-container');\n ej.charts.getElement('symbol').style.visibility = 'visible';\n ej.charts.getElement('category').style.visibility = 'visible';\n ej.charts.getElement('text').style.visibility = 'visible';\n }\n };\n var instance = {\n series: [\n {\n dataSource: [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }],\n dataLabel: {\n visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '10%' },\n font: { fontWeight: '600', color: 'white' }\n },\n radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',\n explode: false\n }\n ], enableSmartLabels: false, legendSettings: { visible: false }, chartMouseClick: pointClick,\n textRender: function (args) { args.text = args.point.x + ' ' + args.point.y + ' %'; },\n tooltip: { enable: false, format: '${point.x}
    ${point.y} %' },\n title: 'Automobile Sales by Category',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n };\n var pie = new ej.charts.AccumulationChart(instance);\n pie.appendTo('#drill-container');\n ej.charts.getElement('category').onclick = function (e) {\n var tooltip = document.getElementsByClassName('e-tooltip-wrap')[0];\n if (tooltip) {\n tooltip.remove();\n }\n pie.destroy();\n pie.removeSvg();\n pie = null;\n pie = new ej.charts.AccumulationChart(instance);\n pie.appendTo('#drill-container');\n e.target.style.visibility = 'hidden';\n ej.charts.getElement('symbol').style.visibility = 'hidden';\n ej.charts.getElement('text').style.visibility = 'hidden';\n };\n"} \ No newline at end of file diff --git a/src/chart/drill-down-pie.js b/src/chart/drill-down-pie.js index 3b4732d1..4b74706c 100644 --- a/src/chart/drill-down-pie.js +++ b/src/chart/drill-down-pie.js @@ -41,6 +41,7 @@ this.default = function () { legendSettings: { visible: false }, enableSmartLabels: true, //Initializing Tooltip tooltip: { enable: false, format: '${point.x}
    ${point.y} %' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -50,6 +51,7 @@ this.default = function () { args.accumulation.annotations[0].content = '#white' ; } } + // custom code end }; var pointClick = function (args) { var index = ej.charts.indexFinder(args.target); diff --git a/src/chart/empty-point-stack.json b/src/chart/empty-point-stack.json new file mode 100644 index 00000000..362743bf --- /dev/null +++ b/src/chart/empty-point-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    Empty Point Mode:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Empty Point\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Product', valueType: 'Category', interval: 1\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n title: 'Profit', minimum: 0, maximum: 100, interval: 20,\n labelFormat: '{value}%'\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: [\n { x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, \n { x: 'Oil', y: 70 },{ x: 'Corn', y: 60 }, { x: 'Gram', y: null }, \n { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 }, \n { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }\n ],\n type: 'Column', xName: 'x', yName: 'y', name: 'Profit', width: 2, \n emptyPointSettings: {\n fill: '#e6e6e6',\n },\n marker: { visible: true, height: 10, width: 10 },\n },\n ],\n legendSettings: { visible: false },\n //Initializing Chart title\n title: 'Annual Product-Wise Profit Analysis',\n //Initializing Tooltip\n tooltip: { enable: true },\n\n });\n chart.appendTo('#empty-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].emptyPointSettings.mode = mode.value;\n chart.refresh();\n }\n });\n mode.appendTo('#emptypointmode');\n var edgeMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = edgeMode.value;\n chart.refresh();\n }\n });\n edgeMode.appendTo('#SelectSeriesType');\n"} \ No newline at end of file diff --git a/src/chart/empty-point.js b/src/chart/empty-point.js index 754c7035..c1e48f8c 100644 --- a/src/chart/empty-point.js +++ b/src/chart/empty-point.js @@ -33,12 +33,14 @@ this.default = function () { title: 'Annual Product-Wise Profit Analysis', //Initializing Tooltip tooltip: { enable: true }, + // custom code start load: function (args) { var emptyPointTheme = location.hash.split('/')[1]; emptyPointTheme = emptyPointTheme ? emptyPointTheme : 'MAterial'; args.chart.theme = (emptyPointTheme.charAt(0).toUpperCase() + emptyPointTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#empty-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/error-bar-stack.json b/src/chart/error-bar-stack.json new file mode 100644 index 00000000..039e6e51 --- /dev/null +++ b/src/chart/error-bar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Error Bar Type:
    \n     		\n
    \n \n
    \n
    \n
    Drawing Mode:
    \n     		\n
    \n \n
    \n
    \n
    Drawing Direction:
    \n     		\n
    \n \n
    \n
    \n
    Vertical Error:
    \n     		\n
    \n \n
    \n
    \n
    Horizontal Error:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var fillRender = function (args) {\n var errorTheme = location.hash.split('/')[1];\n if (errorTheme && errorTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n } else if (errorTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n } else if (errorTheme === 'highcontrast') {\n args.fill = window.highcontrastColors[args.point.index % 10];\n } else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for Error Bar\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1,\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n labelFormat: '{value}%', minimum: 15, maximum: 45,\n lineStyle: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Scatter',\n dataSource: [\n { x: 'IND', y: 24 }, { x: 'AUS', y: 20 }, { x: 'USA', y: 35 },\n { x: 'DEU', y: 27 }, { x: 'ITA', y: 30 },\n { x: 'UK', y: 41 }, { x: 'RUS', y: 26 }\n ],\n xName: 'x', width: 2, yName: 'y', marker: { height: 10, width: 10 }, name: 'Sales',\n //Initializing Error Bar\n errorBar: { visible: true, verticalError: 3, horizontalError: 3 }\n },\n ],\n //Initializing Tootlip\n tooltip: {\n enable: true\n },\n pointRender: fillRender,\n legendSettings: { visible: false },\n //Initializing Chart Title\n title: 'Sales Distribution of Car by Region',\n\n });\n chart.appendTo('#error-container');\n var typemode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].errorBar.type = typemode.value;\n chart.series[0].animation.enable = false;\n chart.refresh();\n }\n });\n typemode.appendTo('#selmode');\n var drawmode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].errorBar.mode = drawmode.value;\n chart.refresh();\n }\n });\n drawmode.appendTo('#drawmode');\n var direction = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].errorBar.direction = direction.value;\n chart.series[0].animation.enable = false;\n chart.refresh();\n }\n });\n direction.appendTo('#direction');\n var verticalerrror = new ej.inputs.NumericTextBox({\n value: 3,\n min: 1,\n max: 20,\n step: 1,\n change: function () {\n chart.series[0].errorBar.verticalError = verticalerrror.value;\n chart.series[0].animation.enable = false;\n chart.refresh();\n }\n });\n verticalerrror.appendTo('#verticalerrror');\n var horizontalerrror = new ej.inputs.NumericTextBox({\n value: 3,\n min: 1,\n max: 20,\n step: 1,\n change: function () {\n chart.series[0].errorBar.horizontalError = horizontalerrror.value;\n chart.series[0].animation.enable = false;\n chart.refresh();\n }\n });\n horizontalerrror.appendTo('#horizontalerrror');\n"} \ No newline at end of file diff --git a/src/chart/error-bar.js b/src/chart/error-bar.js index fad99527..0ecfe661 100644 --- a/src/chart/error-bar.js +++ b/src/chart/error-bar.js @@ -52,12 +52,14 @@ this.default = function () { legendSettings: { visible: false }, //Initializing Chart Title title: 'Sales Distribution of Car by Region', + // custom code start load: function (args) { var errorBarTheme = location.hash.split('/')[1]; errorBarTheme = errorBarTheme ? errorBarTheme : 'Material'; args.chart.theme = (errorBarTheme.charAt(0).toUpperCase() + errorBarTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#error-container'); var typemode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/exponential-moving-average-indicator-stack.json b/src/chart/exponential-moving-average-indicator-stack.json new file mode 100644 index 00000000..1c73bf1d --- /dev/null +++ b/src/chart/exponential-moving-average-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for EMA Indicator\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n }, chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorGridLines: { width: 1 },\n lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: false }\n }],\n indicators: [{\n type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n period: 14, animation: { enable: true }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n title: 'AAPL - 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#ema-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/exponential-moving-average-indicator.js b/src/chart/exponential-moving-average-indicator.js index c788bf5e..957267de 100644 --- a/src/chart/exponential-moving-average-indicator.js +++ b/src/chart/exponential-moving-average-indicator.js @@ -36,17 +36,20 @@ this.renderChart = function (chartData) { crosshair: { enable: true, lineType: 'Vertical' }, zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, title: 'AAPL - 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#ema-container'); diff --git a/src/chart/export-stack.json b/src/chart/export-stack.json new file mode 100644 index 00000000..f05eb50d --- /dev/null +++ b/src/chart/export-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Export Type:\n
    \n     		\n
    \n \n
    \n
    \n
    File Name:
    \n     		\n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for chart export\n */\nvar labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index];\n } \n else if (selectedTheme === 'highcontrast') {\n args.fill = highcontrastColors[args.point.index];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Countries',\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n pointRender: labelRender,\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Measurements',\n labelFormat: '{value}GW',\n minimum: 0,\n maximum: 40,\n interval: 10,\n majorGridLines: { width: 0 }\n },\n //Initializing Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },\n { x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },\n { x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }\n ],\n xName: 'x', width: 2,\n yName: 'y'\n }\n ],\n title: 'Top 10 Countries Using Solar Power',\n\n });\n chart.appendTo('#export-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 100\n });\n mode.appendTo('#mode');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n chart.exportModule.export(mode.value, fileName);\n };\n\n"} \ No newline at end of file diff --git a/src/chart/export.html b/src/chart/export.html index 09d5359a..412ea458 100644 --- a/src/chart/export.html +++ b/src/chart/export.html @@ -66,6 +66,6 @@ } .e-play-icon::before { - content: '\e728'; + content: '\e720'; } \ No newline at end of file diff --git a/src/chart/export.js b/src/chart/export.js index ddca0648..693aad74 100644 --- a/src/chart/export.js +++ b/src/chart/export.js @@ -62,12 +62,14 @@ this.default = function () { } ], title: 'Top 10 Countries Using Solar Power', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#export-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/funnel-stack.json b/src/chart/funnel-stack.json new file mode 100644 index 00000000..a67b902d --- /dev/null +++ b/src/chart/funnel-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Neck Width\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    15%

    \n
    \n
    \n
    Neck Height\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    18%

    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Funnel Chart\n */\n\n var data = [{ x: 'Renewed', y: 18.20, text: '18.20%' },\n { x: 'Subscribed', y: 27.3, text: '27.3%' },\n { x: 'Support', y: 55.9, text: '55.9%' },\n { x: 'Downloaded', y: 76.8, text: '76.8%' },\n { x: 'Visited', y: 100, text: '100%' }];\n var chart = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [{\n type: 'Funnel', dataSource: data, xName: 'x', yName: 'y', width: '60%', height: '80%',\n neckWidth: '15%', gapRatio: 0.03, neckHeight: '18%',\n dataLabel: {\n name: 'text', visible: true, position: 'Inside', font: {\n fontWeight: '600'\n }\n }, explode: true,\n }],\n //Initializing Tooltip\n tooltip: { enable: true, format: '${point.x} : ${point.y} %' },\n legendSettings: { toggleVisibility: false },\n enableAnimation: false,\n\n resized: function (args) {\n var bounds = document.getElementById('funnel-container').getBoundingClientRect();\n if (bounds.width < bounds.height) {\n args.accumulation.series[0].width = '80%';\n args.accumulation.series[0].height = '70%';\n }\n else {\n args.accumulation.series[0].width = '60%';\n args.accumulation.series[0].height = '80%';\n }\n },\n //Initializing Title\n title: 'Website Visitors',\n });\n chart.appendTo('#funnel-container');\n function neckWidth(value) {\n chart.series[0].neckWidth = value + '%';\n document.getElementById('neckWidth').innerHTML = value + '%';\n chart.removeSvg();\n chart.refreshSeries();\n chart.refreshChart();\n }\n document.getElementById('chartneckwidth').onpointermove = document.getElementById('chartneckwidth').ontouchmove =\n document.getElementById('chartneckwidth').onchange = function (e) {\n neckWidth(+document.getElementById('chartneckwidth').value);\n };\n function neckHeight(value) {\n chart.series[0].neckHeight = value + '%';\n document.getElementById('neckHeight').innerHTML = value + '%';\n chart.removeSvg();\n chart.refreshSeries();\n chart.refreshChart();\n }\n document.getElementById('chartneckheight').onpointermove = document.getElementById('chartneckheight').ontouchmove =\n document.getElementById('chartneckheight').onchange = function (e) {\n neckHeight(+document.getElementById('chartneckheight').value);\n };\n\n"} \ No newline at end of file diff --git a/src/chart/funnel.js b/src/chart/funnel.js index 52b123df..c27dd7e5 100644 --- a/src/chart/funnel.js +++ b/src/chart/funnel.js @@ -22,6 +22,7 @@ this.default = function () { tooltip: { enable: true, format: '${point.x} : ${point.y} %' }, legendSettings: { toggleVisibility: false }, enableAnimation: false, + // custom code start load: function (args) { var funnelTheme = location.hash.split('/')[1]; funnelTheme = funnelTheme ? funnelTheme : 'Material'; @@ -32,6 +33,7 @@ this.default = function () { args.accumulation.series[0].width = '80%'; } }, + // custom code end resized: function (args) { var bounds = document.getElementById('funnel-container').getBoundingClientRect(); if (bounds.width < bounds.height) { diff --git a/src/chart/grouping-stack.json b/src/chart/grouping-stack.json new file mode 100644 index 00000000..63da63fa --- /dev/null +++ b/src/chart/grouping-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n
    \n
    GroupMode:\n
    \n     		\n
    \n \n
    \n
    \n
    Group To\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    9

    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for grouping in Pie chart\n */\n\n var pie = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n dataSource: [{ 'x': 'China', text: 'China: 26', y: 26 },\n { 'x': 'Russia', text: 'Russia: 19', y: 19 },\n { 'x': 'Germany', text: 'Germany: 17', y: 17 },\n { 'x': 'Japan', text: 'Japan: 12', y: 12 },\n { 'x': 'France', text: 'France: 10', y: 10 },\n { 'x': 'South Korea', text: 'South Korea: 9', y: 9 },\n { 'x': 'Great Britain', text: 'Great Britain: 27', y: 27 },\n { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n { 'x': 'Australia', text: 'Australia: 8', y: 8 },\n { 'x': 'Netherlands', text: 'Netherlands: 8', y: 8 },\n { 'x': 'Hungary', text: 'Hungary: 8', y: 8 },\n { 'x': 'Brazil', text: 'Brazil: 7', y: 7 },\n { 'x': 'Spain', text: 'Spain: 7', y: 7 },\n { 'x': 'Kenya', text: 'Kenya: 6', y: 6 },\n ],\n animation: { enable: true },\n explode: true,\n dataLabel: {\n visible: true,\n position: 'Outside',\n connectorStyle: { type: 'Line', length: '5%' },\n font: {\n size: '14px'\n }\n },\n radius: '70%', name: 'RIO',\n xName: 'x',\n yName: 'y',\n groupTo: '9',\n\t\t\t\tgroupMode: 'Point',\n startAngle: 0,\n endAngle: 360,\n innerRadius: '0%',\n }\n ],\n pointRender: function (args) {\n if (args.point.isClubbed || args.point.isSliced) {\n args.fill = '#D3D3D3';\n }\n },\n enableSmartLabels: true,\n legendSettings: {\n visible: false,\n },\n textRender: function (args) {\n args.text = args.point.x + ' ' + args.point.y;\n },\n //Initializing Tooltip\n tooltip: { enable: false },\n //Initializing Title\n title: 'RIO Olympics Gold',\n\n });\n pie.appendTo('#grouping-container');\n function clubchange(value) {\n pie.series[0].groupTo = value.toString();\n pie.series[0].animation.enable = false;\n document.getElementById('clubvalue').innerHTML = value.toString();\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('clubpoint').onchange = function (e) {\n clubchange(+document.getElementById('clubpoint').value);\n }; \n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var currentValue = mode.value === 'Point' ? 9 : 8;\n document.getElementById('clubpoint').value = currentValue.toString();\n pie.series[0].groupMode = mode.value;\n clubchange(currentValue);\n }\n });\n mode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/chart/grouping.js b/src/chart/grouping.js index d5394a94..42caecf2 100644 --- a/src/chart/grouping.js +++ b/src/chart/grouping.js @@ -57,12 +57,14 @@ this.default = function () { tooltip: { enable: false }, //Initializing Title title: 'RIO Olympics Gold', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); pie.appendTo('#grouping-container'); function clubchange(value) { diff --git a/src/chart/hilo-open-close-stack.json b/src/chart/hilo-open-close-stack.json new file mode 100644 index 00000000..3803c366 --- /dev/null +++ b/src/chart/hilo-open-close-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n

    AAPL Historical

    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Hilo Open Close Series\n */\nvar _this = this;\nthis.renderChartOhlc = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n majorGridLines: { width: 0 }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: 'n0',\n lineStyle: { width: 0 }, rangePadding: 'None',\n majorTickLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n type: 'HiloOpenClose',\n dataSource: chartData, animation: { enable: true },\n bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc'\n }\n ],\n tooltip: { enable: true, shared: true },\n crosshair: {\n enable: true, lineType: 'Vertical', line: { width: 0 }\n },\n legendSettings: { visible: false }, width: ej.base.Browser.isDevice ? '100%' : '80%',\n axisLabelRender: function (args) {\n if (args.axis.title === 'Price') {\n args.text = '$' + args.text;\n }\n },\n\n });\n chart.appendTo('#container2');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderChartOhlc(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/hilo-open-close.html b/src/chart/hilo-open-close.html index e9b879d4..52f4a7a0 100644 --- a/src/chart/hilo-open-close.html +++ b/src/chart/hilo-open-close.html @@ -1,6 +1,6 @@

    AAPL Historical

    -
    +

    diff --git a/src/chart/hilo-open-close.js b/src/chart/hilo-open-close.js index ef6f2889..996e0d24 100644 --- a/src/chart/hilo-open-close.js +++ b/src/chart/hilo-open-close.js @@ -2,7 +2,7 @@ * Sample for Hilo Open Close Series */ var _this = this; -this.renderChart = function (chartData) { +this.renderChartOhlc = function (chartData) { var chart = new ej.charts.Chart({ primaryXAxis: { valueType: 'DateTime', @@ -34,14 +34,16 @@ this.renderChart = function (chartData) { args.text = '$' + args.text; } }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); - chart.appendTo('#container'); + chart.appendTo('#container2'); }; this.default = function () { var chartData; @@ -52,6 +54,6 @@ this.renderChart = function (chartData) { chartData.map(function (data) { data.x = new Date(data.x); }); - _this.renderChart(chartData); + _this.renderChartOhlc(chartData); }; }; \ No newline at end of file diff --git a/src/chart/hilo-stack.json b/src/chart/hilo-stack.json new file mode 100644 index 00000000..4fa417d8 --- /dev/null +++ b/src/chart/hilo-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n

    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Hilo Series\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n minimum: new Date('2016-12-31'),\n maximum: new Date('2017-09-30'),\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price',\n minimum: 100,\n maximum: 180,\n interval: 20,\n labelFormat: '${value}',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n legendSettings: { visible: false },\n series: [\n {\n type: 'Hilo',\n dataSource: chartData, animation: { enable: true },\n xName: 'x', low: 'low', high: 'high', name: 'Apple Inc'\n }\n ],\n title: 'AAPL Historical',\n tooltip: {\n enable: true, shared: true\n },\n crosshair: {\n enable: true, lineType: 'Vertical', line: {\n width: 0,\n }\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#hilo-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/hilo.js b/src/chart/hilo.js index 64eddbc7..e48b7dfa 100644 --- a/src/chart/hilo.js +++ b/src/chart/hilo.js @@ -42,12 +42,14 @@ this.renderChart = function (chartData) { } }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#hilo-container'); }; diff --git a/src/chart/histogram-stack.json b/src/chart/histogram-stack.json new file mode 100644 index 00000000..0bbcaa84 --- /dev/null +++ b/src/chart/histogram-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Histogram Series\n */\n\n var chartData = [];\n var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,\n 5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,\n 26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,\n 46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,\n 46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,\n 66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,\n 66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,\n 87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250\n ];\n points.map(function (value) {\n chartData.push({\n y: value\n });\n });\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n majorGridLines: { width: 0 }, title: 'Score of Final Examination',\n minimum: 0, maximum: 100\n },\n chartArea: { border: { width: 0 } },\n legendSettings: { visible: false },\n primaryYAxis: {\n title: 'Number of Students',\n minimum: 0, maximum: 50, interval: 10,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Histogram', width: 2, yName: 'y', name: 'Score',\n dataSource: chartData, binInterval: 20,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n showNormalDistribution: true, columnWidth: 0.99\n }\n ],\n resized: function (args) {\n location.reload();\n },\n //Initializing Chart Title\n title: 'Examination Result', tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/histogram.js b/src/chart/histogram.js index c0b0bcea..00103a52 100644 --- a/src/chart/histogram.js +++ b/src/chart/histogram.js @@ -46,6 +46,7 @@ this.default = function () { //Initializing Chart Title title: 'Examination Result', tooltip: { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -55,6 +56,7 @@ this.default = function () { args.chart.series[0].marker.dataLabel.font.color = '#000000'; } } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/indexed-axis-stack.json b/src/chart/indexed-axis-stack.json new file mode 100644 index 00000000..1c8e08e4 --- /dev/null +++ b/src/chart/indexed-axis-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Indexed:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Indexed Category Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 1,\n crosshairTooltip: { enable: true },\n isIndexed: true\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'GDP Growth Rate',\n labelFormat: '{value}%'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'Myanmar', y: 7.3 },\n { x: 'India', y: 7.9 },\n { x: 'Bangladesh', y: 6.8 },\n { x: 'Cambodia', y: 7.0 },\n { x: 'China', y: 6.9 }\n ],\n xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n yName: 'y', name: '2015',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'Poland', y: 2.7 },\n { x: 'Australia', y: 2.5 },\n { x: 'Singapore', y: 2.0 },\n { x: 'Canada', y: 1.4 },\n { x: 'Germany', y: 1.8 }\n ],\n xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10 },\n yName: 'y', name: '2016',\n },\n ],\n //Initializing Tooltip\n tooltip: { enable: true, shared: true },\n //Initializing Crosshair\n crosshair: { enable: true, lineType: 'Vertical' },\n //Initializing Title\n title: 'Real GDP Growth',\n\n });\n chart.appendTo('#index-container');\n document.getElementById('isIndexed').onchange = function () {\n var element = (document.getElementById('isIndexed'));\n chart.primaryXAxis.isIndexed = element.checked;\n if (chart.primaryXAxis.isIndexed) {\n chart.series[0].type = 'Column';\n chart.series[1].type = 'Column';\n chart.series[0].marker.visible = false;\n chart.series[1].marker.visible = false;\n chart.primaryXAxis.labelRotation = 0;\n chart.crosshair.line.width = 1;\n }\n else {\n chart.series[0].type = 'Line';\n chart.series[1].type = 'Line';\n chart.series[0].marker.visible = true;\n chart.series[1].marker.visible = true;\n chart.primaryXAxis.labelRotation = 90;\n chart.crosshair.line.width = 0;\n }\n chart.refresh();\n };\n"} \ No newline at end of file diff --git a/src/chart/indexed-axis.js b/src/chart/indexed-axis.js index 5034d103..18eaa50c 100644 --- a/src/chart/indexed-axis.js +++ b/src/chart/indexed-axis.js @@ -53,12 +53,14 @@ this.default = function () { crosshair: { enable: true, lineType: 'Vertical' }, //Initializing Title title: 'Real GDP Growth', + // custom code start load: function (args) { var indexedTheme = location.hash.split('/')[1]; indexedTheme = indexedTheme ? indexedTheme : 'Material'; args.chart.theme = (indexedTheme.charAt(0).toUpperCase() + indexedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#index-container'); document.getElementById('isIndexed').onchange = function () { diff --git a/src/chart/inversed-stack.json b/src/chart/inversed-stack.json new file mode 100644 index 00000000..caaf3838 --- /dev/null +++ b/src/chart/inversed-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var pointRender = function (args) {\n var inverseTheme = location.hash.split('/')[1];\n inverseTheme = inverseTheme ? inverseTheme : 'Material';\n if (inverseTheme && inverseTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n } else if (inverseTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n } else if (inverseTheme === 'highcontrast') {\n args.fill = window.highcontrastColors[args.point.index % 10];\n } else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n};\n\n/**\n * Sample for Inversed Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n opposedPosition: true,\n isInversed: true,\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n edgeLabelPlacement: 'Shift',\n labelIntersectAction: 'Rotate45',\n isInversed: true,\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n pointRender: pointRender,\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: '2008', y: 15.1 }, { x: '2009', y: 16 }, { x: '2010', y: 21.4 },\n { x: '2011', y: 18 }, { x: '2012', y: 16.2 }, { x: '2013', y: 11 },\n { x: '2014', y: 7.6 }, { x: '2015', y: 1.5 }\n ],\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } },\n xName: 'x',\n yName: 'y',\n name: 'Rate'\n },\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n legendSettings: { visible: false },\n //Initializing Chart Titel\n title: 'Exchange Rate (INR per USD)',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#inverse-container');\n"} \ No newline at end of file diff --git a/src/chart/inversed.js b/src/chart/inversed.js index 4132b013..5595dcc9 100644 --- a/src/chart/inversed.js +++ b/src/chart/inversed.js @@ -65,12 +65,14 @@ this.default = function () { //Initializing Chart Titel title: 'Exchange Rate (INR per USD)', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var inversedTheme = location.hash.split('/')[1]; inversedTheme = inversedTheme ? inversedTheme : 'Material'; args.chart.theme = (inversedTheme.charAt(0).toUpperCase() + inversedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#inverse-container'); }; \ No newline at end of file diff --git a/src/chart/large-stack.json b/src/chart/large-stack.json new file mode 100644 index 00000000..ba9dc527 --- /dev/null +++ b/src/chart/large-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    ","index.js":"{{ripple}}"} \ No newline at end of file diff --git a/src/chart/lazy-loading-stack.json b/src/chart/lazy-loading-stack.json new file mode 100644 index 00000000..f08927b5 --- /dev/null +++ b/src/chart/lazy-loading-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Lazy Load
    \n     		\n \n
    \n
    Min
    \n     		\n \n
    \n
    Max
    \n     		\n \n
    \n
    Point Length
    \n     		\n \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}window.default = function () {\n var intl = new ej.base.Internationalization();\n //var spinnerEle = document.getElementById('spinner');\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n title: 'Day',\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift',\n skeleton: 'yMMM',\n skeletonType: 'Date',\n scrollbarSettings: {\n range: {\n minimum: new Date(2009, 0, 1),\n maximum: new Date(2014, 0, 1)\n },\n enable: true,\n pointsLength: 1000\n }\n },\n primaryYAxis: {\n title: 'Server Load',\n labelFormat: '{value}MB'\n },\n series: [{\n dataSource: GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1)),\n xName: 'x', yName: 'y',\n type: 'Line', animation: { enable: false },\n }],\n height: '450',\n title: 'Network Load',\n crosshair: { enable: false, lineType: 'Vertical' },\n tooltip: { enable: true, shared: true, header : '${point.x}', format : 'Server load : ${point.y}'},\n legendSettings: { visible: true },\n // scrollStart: function (args) {\n // ej.popups.createSpinner({ target: spinnerEle, width: '50px', label: 'Loading' });\n // ej.popups.showSpinner(spinnerEle);\n // },\n scrollEnd: function (args) {\n //ej.popups.hideSpinner(spinnerEle);\n if (lazymode.value === 'Range') {\n chart.series[0].dataSource = GetDateTimeData(args.currentRange.minimum, args.currentRange.maximum);\n }\n else {\n chart.series[0].dataSource = GetNumericData(args.currentRange.minimum, args.currentRange.maximum);\n }\n chart.dataBind();\n },\n width: '100%',\n\n });\n chart.appendTo('#container');\n function GetDateTimeData(start, end) {\n var series1 = [];\n var date;\n var value = 30;\n var option = {\n skeleton: 'full',\n type: 'dateTime'\n };\n var dateParser = intl.getDateParser(option);\n var dateFormatter = intl.getDateFormat(option);\n for (var i = 0; start <= end; i++) {\n date = Date.parse(dateParser(dateFormatter(start)));\n if (Math.random() > 0.5) {\n value += (Math.random() * 10 - 5);\n } \n else {\n value -= (Math.random() * 10 - 5);\n }\n if (value < 0) {\n value = getRandomInt(20, 40);\n }\n var point1 = { x: new Date(date), y: Math.round(value) };\n new Date(start.setDate(start.getDate() + 1));\n series1.push(point1);\n }\n return series1;\n }\n function GetNumericData(start, end) {\n var series1 = [];\n var value = 30;\n for (var i = start; i <= end; i++) {\n if (Math.random() > 0.5) {\n value += (Math.random() * 10 - 5);\n }\n else {\n value -= (Math.random() * 10 - 5);\n }\n if (value < 0) {\n value = getRandomInt(20, 40);\n }\n var point = { x: i, y: Math.round(value) };\n series1.push(point);\n }\n return series1;\n }\n function getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n }\n var lazymode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function (arg) {\n var min;\n var max;\n if (arg.value === 'Range') {\n chart.primaryXAxis.valueType = 'DateTime';\n min = chart.primaryXAxis.scrollbarSettings.range.minimum = new Date(2009, 0, 1);\n max = chart.primaryXAxis.scrollbarSettings.range.maximum = new Date(2014, 0, 1);\n chart.series[0].dataSource = GetDateTimeData(min, max);\n chart.refresh();\n minDate.enabled = true;\n maxDate.enabled = true;\n pointslength.enabled = false;\n }\n else {\n chart.primaryXAxis.valueType = 'Double';\n chart.primaryXAxis.scrollbarSettings.range.minimum = null;\n chart.primaryXAxis.scrollbarSettings.range.maximum = null;\n chart.primaryXAxis.scrollbarSettings.pointsLength = 1000;\n chart.series[0].dataSource = GetNumericData(1, 200);\n chart.refresh();\n minDate.enabled = false;\n maxDate.enabled = false;\n pointslength.enabled = true;\n }\n }\n });\n lazymode.appendTo('#lazymode');\n var minDate = new ej.calendars.DatePicker({\n value: new Date(2009, 0, 1),\n width: 120,\n change: function (args) {\n chart.primaryXAxis.scrollbarSettings.range.minimum = args.value;\n chart.refresh();\n }\n });\n minDate.appendTo('#datepickermin');\n var maxDate = new ej.calendars.DatePicker({\n value: new Date(2014, 0, 1),\n width: 120,\n change: function (args) {\n chart.primaryXAxis.scrollbarSettings.range.maximum = args.value;\n chart.refresh();\n }\n });\n maxDate.appendTo('#datepickermax');\n var pointslength = new ej.inputs.NumericTextBox({\n min: 1000,\n max: 10000,\n value: 1000,\n step: 100,\n enabled: false,\n format: 'n',\n width: 120,\n change: function (args) {\n chart.primaryXAxis.scrollbarSettings.pointsLength = args.value;\n chart.refresh();\n }\n });\n pointslength.appendTo('#pointslength');\n\n\n"} \ No newline at end of file diff --git a/src/chart/lazy-loading.js b/src/chart/lazy-loading.js index 1b6b4e19..000275ad 100644 --- a/src/chart/lazy-loading.js +++ b/src/chart/lazy-loading.js @@ -46,12 +46,14 @@ window.default = function () { chart.dataBind(); }, width: '100%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); function GetDateTimeData(start, end) { diff --git a/src/chart/line-multi-color-stack.json b/src/chart/line-multi-color-stack.json new file mode 100644 index 00000000..fb4b622b --- /dev/null +++ b/src/chart/line-multi-color-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n var dataValues = [];\n var colors = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue',\n 'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy'];\n (window.rainFallData).map(function (value, index) {\n dataValues.push({\n XValue: new Date(2017, -index, 1), YValue: value.toFixed(2),\n color: colors[Math.floor(index / 16)]\n });\n });\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n rangePadding: 'None',\n minimum: 4,\n maximum: 10,\n title: 'Particulate Matter(PM)',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: dataValues,\n width: 1.5,\n name: 'Rainfall', xName: 'XValue', yName: 'YValue', pointColorMapping: 'color',\n type: 'MultiColoredLine'\n }\n ],\n legendSettings: { visible: false },\n\n //Initializing Chart title\n title: 'Particulate Levels in Rainfall',\n //Initializing User Interaction Tooltip\n tooltip: {\n enable: true, shared: true,enableAnimation : false\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/line-multi-color.js b/src/chart/line-multi-color.js index fd2e2ffe..91abef9f 100644 --- a/src/chart/line-multi-color.js +++ b/src/chart/line-multi-color.js @@ -55,12 +55,14 @@ this.default = function () { enable: true, shared: true,enableAnimation : false }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/line-segments-stack.json b/src/chart/line-segments-stack.json new file mode 100644 index 00000000..710d9bea --- /dev/null +++ b/src/chart/line-segments-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Line series\n */\n\n var dataValues = [];\n [\n 380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385, 520, 580, 420, 350, 505,\n 535, 410, 204, 400, 415, 408, 415, 350, 375, 500, 390, 450, 440, 350, 400, 365, 490, 400, 520, 510,\n 395, 380, 404, 400, 500, 390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,\n 320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380, 480, 360, 650, 680, 720,\n 580, 480, 520, 440, 420, 430, 380, 520, 410, 540, 400, 390, 460, 470, 490, 420, 480, 470, 490, 330,\n 520, 480, 580, 590, 600, 310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480,\n ].map(function (value, index) {\n dataValues.push({ XValue: new Date(1900 + index, 0, 1), YValue: value });\n });\n var chart = new ej.charts.Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n labelFormat: '{value}mm',\n rangePadding: 'None',\n minimum: 200,\n maximum: 800,\n interval: 100,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n annotations: [\n {\n content: '#templateWrap',\n region: 'Series',\n x: '90%',\n y: '12%'\n }\n ],\n legendSettings: { visible: false },\n //Initializing Chart Series\n series: [\n {\n dataSource: dataValues,\n width: 2, segmentAxis: 'Y',\n segments: [{\n value: 450,\n color: 'red'\n }, {\n value: 500,\n color: 'green'\n }, {\n color: 'blue'\n }],\n name: 'Australia', xName: 'XValue', yName: 'YValue', type: 'MultiColoredLine'\n }\n ],\n\n //Initializing Chart title\n title: 'Annual Mean Rainfall for Australia',\n //Initializing User Interaction Tooltip\n tooltip: {\n enable: true, shared: true, enableAnimation : false\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/line-segments.js b/src/chart/line-segments.js index 56b8ed41..798a6c77 100644 --- a/src/chart/line-segments.js +++ b/src/chart/line-segments.js @@ -75,6 +75,7 @@ this.default = function () { enable: true, shared: true, enableAnimation : false }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -86,6 +87,7 @@ this.default = function () { args.chart.series[0].segments[2].color = '#3F9BFF'; } } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/line-stack.json b/src/chart/line-stack.json new file mode 100644 index 00000000..4db0b248 --- /dev/null +++ b/src/chart/line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Line Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n labelFormat: '{value}%',\n rangePadding: 'None',\n minimum: 0,\n maximum: 100,\n interval: 20,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },\n { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },\n { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },\n { x: new Date(2011, 0, 1), y: 70 }\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Germany',\n },\n {\n type: 'Line',\n dataSource: [\n { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },\n { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },\n { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }, { x: new Date(2011, 0, 1), y: 84 }\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'England',\n }\n ],\n //Initializing Chart Title\n title: 'Inflation - Consumer Price',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#line-container');\n"} \ No newline at end of file diff --git a/src/chart/line.html b/src/chart/line.html index 4e41c5ad..c533142f 100644 --- a/src/chart/line.html +++ b/src/chart/line.html @@ -18,6 +18,6 @@

    More information on the line series can be found in this - documentation section. + documentation section.

    \ No newline at end of file diff --git a/src/chart/line.js b/src/chart/line.js index 20d1d5f5..fff87e9e 100644 --- a/src/chart/line.js +++ b/src/chart/line.js @@ -66,12 +66,14 @@ this.default = function () { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var lineTheme = location.hash.split('/')[1]; lineTheme = lineTheme ? lineTheme: 'Material'; args.chart.theme = (lineTheme.charAt(0).toUpperCase() + lineTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#line-container'); }; \ No newline at end of file diff --git a/src/chart/local-data-stack.json b/src/chart/local-data-stack.json new file mode 100644 index 00000000..0b777036 --- /dev/null +++ b/src/chart/local-data-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n \n
    ","index.js":"{{ripple}}var series1 = [];\nvar series2 = [];\nvar point1;\nvar point2;\nvar value = 80;\nvar value1 = 90;\nvar i;\nfor (i = 1; i < 500; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n value1 += Math.random();\n }\n else {\n value -= Math.random();\n value1 -= Math.random();\n }\n point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };\n point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };\n series1.push(point1);\n series2.push(point2);\n}\n/**\n * Sample for Local Data binding\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n majorGridLines: { width: 0 },\n skeleton: 'y',\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n rangePadding: 'None',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: series1,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product X',\n animation: { enable: true }, marker: { visible: false }\n },\n {\n type: 'Line',\n dataSource: series2,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product Y',\n animation: { enable: true }, marker: { visible: false }\n }\n ],\n //Initializing Chart Title\n title: 'Stock Price Analysis',\n //Initializing Tooltip and Crosshair\n tooltip: {\n enable: true, shared: true\n },\n // Initializing the crosshair\n crosshair: {\n enable: true,\n line: {\n color: 'rgba(204,214,235,0.25)',\n width: ej.base.Browser.isDevice ? 50 : 20,\n },\n lineType: 'Vertical'\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#local-container');\n"} \ No newline at end of file diff --git a/src/chart/local-data.js b/src/chart/local-data.js index edb12f91..5dcdc61c 100644 --- a/src/chart/local-data.js +++ b/src/chart/local-data.js @@ -79,11 +79,13 @@ this.default = function () { lineType: 'Vertical' }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectTheme = location.hash.split('/')[1]; args.chart.theme = selectTheme && (selectTheme.charAt(0).toUpperCase() + selectTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#local-container'); }; \ No newline at end of file diff --git a/src/chart/logarithmic-scale-stack.json b/src/chart/logarithmic-scale-stack.json new file mode 100644 index 00000000..f5c7bcc1 --- /dev/null +++ b/src/chart/logarithmic-scale-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Logarithmic Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n labelFormat: 'y',\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n valueType: 'Logarithmic',\n edgeLabelPlacement: 'Shift',\n minorTicksPerInterval: 5,\n majorGridLines: { width: 1.5 },\n minorTickLines: { width: 0, height: 4 },\n minimum: 0,\n maximum: 100000,\n interval: 1,\n title: ej.base.Browser.isDevice ? '' : 'Profit',\n labelFormat: '${value}'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(1995, 0, 1), y: 80 },\n { x: new Date(1996, 0, 1), y: 200 },\n { x: new Date(1997, 0, 1), y: 400 },\n { x: new Date(1998, 0, 1), y: 600 },\n { x: new Date(1999, 0, 1), y: 700 },\n { x: new Date(2000, 0, 1), y: 1400 },\n { x: new Date(2001, 0, 1), y: 2000 },\n { x: new Date(2002, 0, 1), y: 4000 },\n { x: new Date(2003, 0, 1), y: 6000 },\n { x: new Date(2004, 0, 1), y: 8000 },\n { x: new Date(2005, 0, 1), y: 11000 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product X',\n marker: {\n visible: true, height: 10, width: 10\n }\n }\n ],\n //Initializing Chart Title\n title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },\n //Initializing Tooltip\n tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#log-container');\n"} \ No newline at end of file diff --git a/src/chart/logarithmic-scale.js b/src/chart/logarithmic-scale.js index 63f5c7e3..c05eb08d 100644 --- a/src/chart/logarithmic-scale.js +++ b/src/chart/logarithmic-scale.js @@ -51,12 +51,14 @@ this.default = function () { //Initializing Tooltip tooltip: { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var logTheme = location.hash.split('/')[1]; logTheme = logTheme ? logTheme : 'Material'; args.chart.theme = (logTheme.charAt(0).toUpperCase() + logTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#log-container'); }; \ No newline at end of file diff --git a/src/chart/marker-chart-stack.json b/src/chart/marker-chart-stack.json new file mode 100644 index 00000000..850e3ac0 --- /dev/null +++ b/src/chart/marker-chart-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Chart Symbols\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Countries', valueType: 'Category',\n interval: 1, labelIntersectAction: 'Rotate45',\n majorGridLines: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Penetration', rangePadding: 'None',\n labelFormat: '{value}%', minimum: 0,\n lineStyle: { width: 0 },\n maximum: 75, interval: 15\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [{ x: 'WW', y: 12, text: 'World Wide' },\n { x: 'EU', y: 9.9, text: 'Europe' },\n { x: 'APAC', y: 4.4, text: 'Asia Pacific' },\n { x: 'LATAM', y: 6.4, text: 'Latin America' },\n { x: 'MEA', y: 30, text: 'Middle East Africa' },\n { x: 'NA', y: 25.3, text: 'North America' }],\n name: 'December 2007',\n marker: {\n visible: true, width: 10, height: 10,\n shape: 'Diamond', dataLabel: { name: 'text' }\n },\n xName: 'x', width: 2,\n yName: 'y',\n },\n {\n type: 'Line',\n dataSource: [{ x: 'WW', y: 22, text: 'World Wide' },\n { x: 'EU', y: 26, text: 'Europe' },\n { x: 'APAC', y: 9.3, text: 'Asia Pacific' },\n { x: 'LATAM', y: 28, text: 'Latin America' },\n { x: 'MEA', y: 45.7, text: 'Middle East Africa' },\n { x: 'NA', y: 35.9, text: 'North America' }],\n xName: 'x', width: 2,\n marker: {\n visible: true, width: 10, height: 10,\n shape: 'Pentagon', dataLabel: { name: 'text' }\n },\n yName: 'y', name: 'December 2008',\n },\n {\n type: 'Line',\n dataSource: [{ x: 'WW', y: 38.3, text: 'World Wide' },\n { x: 'EU', y: 45.2, text: 'Europe' },\n { x: 'APAC', y: 18.2, text: 'Asia Pacific' },\n { x: 'LATAM', y: 46.7, text: 'Latin America' },\n { x: 'MEA', y: 61.5, text: 'Middle East Africa' },\n { x: 'NA', y: 64, text: 'North America' }],\n xName: 'x', width: 2,\n marker: {\n visible: true,\n width: 10, height: 10,\n shape: 'Triangle',\n dataLabel: { name: 'text' }\n },\n yName: 'y', name: 'December 2009',\n }\n ],\n //Initializing Chart Title\n title: 'FB Penetration of Internet Audience',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#marker-container');\n"} \ No newline at end of file diff --git a/src/chart/marker-chart.js b/src/chart/marker-chart.js index 993d245a..f8131d45 100644 --- a/src/chart/marker-chart.js +++ b/src/chart/marker-chart.js @@ -80,12 +80,14 @@ this.default = function () { }, legendSettings: { visible: false }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme :'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#marker-container'); }; \ No newline at end of file diff --git a/src/chart/momentum-stack.json b/src/chart/momentum-stack.json new file mode 100644 index 00000000..f1932e29 --- /dev/null +++ b/src/chart/momentum-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Momentum Indicator\n */\n this.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n plotOffset: 25,\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n },\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,\n majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [\n {\n start: 80, end: 120, text: '', color: 'black', visible: true,\n opacity: 0.03, zIndex: 'Behind'\n }\n ]\n }],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#momentum-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/momentum.js b/src/chart/momentum.js index 3daff249..1a8c01c4 100644 --- a/src/chart/momentum.js +++ b/src/chart/momentum.js @@ -46,7 +46,8 @@ }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -56,12 +57,14 @@ chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#momentum-container'); diff --git a/src/chart/moving-average-convergence-divergence-indicator-stack.json b/src/chart/moving-average-convergence-divergence-indicator-stack.json new file mode 100644 index 00000000..6074cd99 --- /dev/null +++ b/src/chart/moving-average-convergence-divergence-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for MACD Indicator\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n plotOffset: 25,\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n },\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,\n majorTickLines: { width: 0 }, title: 'MACD', stripLines: [\n {\n start: -3.5, end: 3.5, text: '', color: 'black', visible: true,\n opacity: 0.03, zIndex: 'Behind'\n }\n ]\n }],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'Macd',\n period: 3,\n fastPeriod: 8,\n slowPeriod: 5,\n seriesName: 'Apple Inc',\n macdType: 'Both',\n width: 2,\n macdPositiveColor: '#2ecd71',\n macdNegativeColor: '#e74c3d',\n fill: '#6063ff',\n yAxisName: 'secondary'\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#macd-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/moving-average-convergence-divergence-indicator.js b/src/chart/moving-average-convergence-divergence-indicator.js index da597fcf..19104f83 100644 --- a/src/chart/moving-average-convergence-divergence-indicator.js +++ b/src/chart/moving-average-convergence-divergence-indicator.js @@ -55,7 +55,8 @@ this.renderChart = function (chartData) { }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -65,12 +66,14 @@ this.renderChart = function (chartData) { chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#macd-container'); diff --git a/src/chart/multi-level-label-stack.json b/src/chart/multi-level-label-stack.json new file mode 100644 index 00000000..abdc09b1 --- /dev/null +++ b/src/chart/multi-level-label-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Smart Axis Labels\n */\nvar labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else if(selectedTheme === 'highcontrast') {\n args.fill = window.highcontrastColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n};\n\n\n var chart = new ej.charts.Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', labelRotation: 90,\n border: { width: 1, type: 'Rectangle' },\n isIndexed: true, interval: 1, majorGridLines: { width: 0 },\n multiLevelLabels : (ej.base.Browser.isDevice ? ([\n {\n border: { type: 'Rectangle' },\n categories: [\n { start: -0.5, end: 2.5, text: 'In Season', },\n { start: 2.5, end: 5.5, text: 'Out of Season', },\n { start: 5.5, end: 7.5, text: 'In Season', },\n { start: 7.5, end: 9.5, text: 'Out of Season', },\n ]\n }, {\n border: { type: 'Rectangle' },\n textStyle: { fontWeight: 'Bold' },\n categories: [\n { start: -0.5, end: 5.5, text: 'Fruits', },\n { start: 5.5, end: 9.5, text: 'Vegetables', },\n ]\n }]) : [\n {\n border: { type: 'Rectangle' },\n categories: [\n { start: -0.5, end: 0.5, text: 'Seedless', },\n { start: 0.5, end: 2.5, text: 'Seeded', },\n { start: 2.5, end: 3.5, text: 'Seedless', },\n { start: 3.5, end: 5.5, text: 'Seeded', },\n { start: 5.5, end: 6.5, text: 'Seedless', },\n { start: 6.5, end: 7.5, text: 'Seeded', },\n { start: 7.5, end: 8.5, text: 'Seedless', },\n { start: 8.5, end: 9.5, text: 'Seeded', }\n ]\n }, {\n border: { type: 'Rectangle' },\n categories: [\n { start: -0.5, end: 2.5, text: 'In Season', },\n { start: 2.5, end: 5.5, text: 'Out of Season', },\n { start: 5.5, end: 7.5, text: 'In Season', },\n { start: 7.5, end: 9.5, text: 'Out of Season', },\n ]\n }, {\n border: { type: 'Rectangle' },\n textStyle: { fontWeight: 'Bold' },\n categories: [\n { start: -0.5, end: 5.5, text: 'Fruits', },\n { start: 5.5, end: 9.5, text: 'Vegetables', },\n ]\n }])\n },\n chartArea: {\n border: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n minimum: 0, maximum: 120, interval: 30,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', yName: 'y',\n dataSource: [\n { x: 'Grapes', y: 28 }, { x: 'Apples', y: 87 },\n { x: 'Pears', y: 42 }, { x: 'Grapes', y: 13 },\n { x: 'Apples', y: 13 }, { x: 'Pears', y: 10 },\n { x: 'Tomato', y: 31 }, { x: 'Potato', y: 96 },\n { x: 'Cucumber', y: 41 }, { x: 'Onion', y: 59 }],\n marker: {\n dataLabel: {\n visible: true, position: 'Outer'\n }\n }\n },\n ],\n //Initializing Chart title\n title: 'Fruits and Vegetables - Season',\n pointRender: labelRender,\n legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/multi-level-label.js b/src/chart/multi-level-label.js index ac5a9de6..ab3921d4 100644 --- a/src/chart/multi-level-label.js +++ b/src/chart/multi-level-label.js @@ -104,12 +104,14 @@ this.default = function () { pointRender: labelRender, legendSettings: { visible: false }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/multi-series-chart-stack.json b/src/chart/multi-series-chart-stack.json new file mode 100644 index 00000000..190f116f --- /dev/null +++ b/src/chart/multi-series-chart-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Combination Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n interval: 1,\n labelIntersectAction: 'Rotate45',\n valueType: 'Category',\n majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Growth',\n minimum: -3,\n maximum: 3,\n interval: 1,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n minorGridLines: { width: 1 }, minorTickLines: { width: 0 },\n labelFormat: '{value}B',\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingColumn',\n dataSource: [\n { x: '2007', y: 1 }, { x: '2008', y: 0.25 },\n { x: '2009', y: 0.1 }, { x: '2010', y: 1 },\n { x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },\n { x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }\n ],\n xName: 'x', yName: 'y', name: 'Private Consumption',\n }, {\n type: 'StackingColumn',\n dataSource: [\n { x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },\n { x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },\n { x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },\n { x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }\n ],\n xName: 'x', yName: 'y', name: 'Government Consumption',\n }, {\n type: 'StackingColumn',\n dataSource: [\n { x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },\n { x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },\n { x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },\n { x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }\n ],\n xName: 'x', yName: 'y', name: 'Investment',\n }, {\n type: 'StackingColumn',\n dataSource: [\n { x: '2007', y: -1 }, { x: '2008', y: -0.35 },\n { x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },\n { x: '2011', y: 0 }, { x: '2012', y: -0.4 },\n { x: '2013', y: 0 }, { x: '2014', y: -0.6 }\n ],\n xName: 'x', yName: 'y', name: 'Net Foreign Trade'\n }, {\n type: 'Line',\n dataSource: [\n { x: '2007', y: 2 }, { x: '2008', y: 0.1 },\n { x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },\n { x: '2011', y: 2 }, { x: '2012', y: 0.4 },\n { x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }\n ],\n xName: 'x', yName: 'y', name: 'GDP',\n width: 2,\n marker: {\n visible: true,\n width: 10,\n height: 10\n },\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Annual Growth GDP in France',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#series-container');\n"} \ No newline at end of file diff --git a/src/chart/multi-series-chart.js b/src/chart/multi-series-chart.js index 3f09c383..6f419f81 100644 --- a/src/chart/multi-series-chart.js +++ b/src/chart/multi-series-chart.js @@ -91,12 +91,14 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#series-container'); }; \ No newline at end of file diff --git a/src/chart/multiple-axis-stack.json b/src/chart/multiple-axis-stack.json new file mode 100644 index 00000000..5056f627 --- /dev/null +++ b/src/chart/multiple-axis-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Multiple Axes\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 1,\n labelIntersectAction: 'Rotate90',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n minimum: 0, maximum: 100, interval: 20,\n lineStyle: { width: 0 },\n labelFormat: '{value}°F'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Axes\n axes: [\n {\n majorGridLines: { width: 0 },\n rowIndex: 0, opposedPosition: true,\n lineStyle: { width: 0 }, minorTickLines: { width: 0 },\n minimum: 24, maximum: 36, interval: 2,\n name: 'yAxis',\n labelFormat: '{value}°C',\n majorTickLines: { width: 0 }\n }\n ],\n //Initializing Chart Annotations\n annotations: [{\n content: '
    ',\n x: 'Sun', y: 35, coordinateUnits: 'Point', verticalAlignment: 'Top'\n }, {\n content: '
    ',\n x: 'Sat', y: 34, coordinateUnits: 'Point', yAxisName: 'yAxis'\n }],\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },\n { x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },\n { x: 'Sat', y: 50 }\n ],\n width: 2,\n xName: 'x', yName: 'y',\n name: 'Germany',\n },\n {\n type: 'Line',\n dataSource: [\n { x: 'Sun', y: 30 }, { x: 'Mon', y: 28 },\n { x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },\n { x: 'Sat', y: 34 }\n ],\n xName: 'x', yName: 'y',\n width: 2, yAxisName: 'yAxis',\n name: 'Japan',\n marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }\n }\n ],\n legendSettings: {\n visible: false\n },\n //Initializing tooltip\n tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Weather Condition JPN vs DEU',\n\n });\n chart.appendTo('#axes-container');\n"} \ No newline at end of file diff --git a/src/chart/multiple-axis.js b/src/chart/multiple-axis.js index 97936aca..35e00780 100644 --- a/src/chart/multiple-axis.js +++ b/src/chart/multiple-axis.js @@ -75,12 +75,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Weather Condition JPN vs DEU', + // custom code start load: function (args) { var axisTheme = location.hash.split('/')[1]; axisTheme = axisTheme ? axisTheme : 'Material'; args.chart.theme = (axisTheme.charAt(0).toUpperCase() + axisTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#axes-container'); }; \ No newline at end of file diff --git a/src/chart/numeric-stack.json b/src/chart/numeric-stack.json new file mode 100644 index 00000000..45a4365b --- /dev/null +++ b/src/chart/numeric-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}var labelRender = function (args) {\n if (args.axis.orientation === 'Horizontal') {\n args.cancel = args.value === 15 || args.value === 21;\n }\n};\n/**\n * Sample for Numerical Axis\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Death Overs',\n minimum: 15,\n maximum: 21,\n interval: 1,\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n //Initializing Chart Sample\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 16, y: 2 }, { x: 17, y: 14 },\n { x: 18, y: 7 }, { x: 19, y: 7 },\n { x: 20, y: 10 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'England', fill: '#1e90ff',\n marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600'\n }\n }\n }\n },\n {\n type: 'Column',\n dataSource: [\n { x: 16, y: 7 }, { x: 17, y: 7 },\n { x: 18, y: 11 }, { x: 19, y: 8 },\n { x: 20, y: 24 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'West Indies', fill: '#b22222',\n marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600'\n }\n }\n }\n }\n ],\n axisLabelRender: labelRender,\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n //Initializing Chart Title\n title: 'England vs West Indies', tooltip: { enable: true, format: '${point.x}th Over : ${point.y} Runs' }\n });\n chart.appendTo('#numeric-container');\n"} \ No newline at end of file diff --git a/src/chart/numeric.js b/src/chart/numeric.js index be090d0f..ad2468ca 100644 --- a/src/chart/numeric.js +++ b/src/chart/numeric.js @@ -73,6 +73,7 @@ this.default = function () { ], axisLabelRender: labelRender, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -82,7 +83,7 @@ this.default = function () { args.chart.series[0].fill = '#57BCFF'; args.chart.series[1].fill = '#E58184'; } - }, + }, // custom code end //Initializing Chart Title title: 'England vs West Indies', tooltip: { enable: true, format: '${point.x}th Over : ${point.y} Runs' } }); diff --git a/src/chart/pareto-stack.json b/src/chart/pareto-stack.json new file mode 100644 index 00000000..1a033034 --- /dev/null +++ b/src/chart/pareto-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pareto chart\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Defects',\n interval: 1,\n valueType: 'Category',\n majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n title: 'Frequency',\n minimum: 0,\n maximum: 150,\n interval: 30,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n minorGridLines: { width: 1 }, minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Pareto',\n dataSource: [\n { x: 'Traffic', y: 56 }, { x: 'Child Care', y: 44.8 },\n { x: 'Transport', y: 27.2 }, { x: 'Weather', y: 19.6 },\n { x: 'Emergency', y: 6.6 }\n ], marker: { visible: true, width: 10, height: 10 },\n xName: 'x', yName: 'y', name: 'Defect', width: 2\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Defect vs Frequency',\n legendSettings: { visible: false },\n //Initializing Tooltip\n tooltip: {\n enable: true,\n shared: true\n },\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/pareto.js b/src/chart/pareto.js index 2b77e5b4..1ed12ff2 100644 --- a/src/chart/pareto.js +++ b/src/chart/pareto.js @@ -48,12 +48,14 @@ this.default = function () { enable: true, shared: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/pie-annotation-stack.json b/src/chart/pie-annotation-stack.json new file mode 100644 index 00000000..52f19ec7 --- /dev/null +++ b/src/chart/pie-annotation-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Annotation in chart\n */\nfunction getValue(series, pointIndex, y) {\n var totalValue = 0;\n for (var _i = 0, series_1 = series; _i < series_1.length; _i++) {\n var ser = series_1[_i];\n totalValue += ser.points[pointIndex].y;\n }\n return (Math.round((y / totalValue) * 100)) + '%';\n}\n\n var pie;\n var isRender = false;\n var dataSource = [\n { x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },\n { x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },\n { x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },\n { x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }\n ];\n var pieDataSource = [\n { x: 'UK', y: 51, text: '22%' }, { x: 'Germany', y: 77, text: '34%' },\n { x: 'France', y: 66, text: '29%' }, { x: 'Italy', y: 34, text: '15%' }\n ];\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n title: 'Years', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 },\n minorTickLines: { width: 1 }, interval: 1, labelIntersectAction: 'Rotate45',\n },\n primaryYAxis: {\n title: 'Sales', lineStyle: { width: 0 }, minimum: 0, maximum: 700, interval: 100,\n majorGridLines: { width: 1 }, minorGridLines: { width: 1 },\n minorTickLines: { width: 0 }, labelFormat: '{value}B', majorTickLines: { width: 0 }\n },\n series: [\n { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y0', name: 'UK', dataSource: dataSource },\n { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y1', name: 'Germany', dataSource: dataSource },\n { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y2', name: 'France', dataSource: dataSource },\n { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y3', name: 'Italy', dataSource: dataSource }\n ],\n chartArea: { border: { width: 0 } }, title: 'Mobile Game Market by Country',\n selectionMode: 'Cluster', selectedDataIndexes: [{ series: 0, point: 0 }],\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: true, toggleVisibility: false },\n annotations: [{\n content: '
    ',\n x: '20%', y: '25%', coordinateUnits: 'Pixel', region: 'Series'\n }],\n chartMouseUp: function (args) {\n if (args.target.indexOf('Point') > -1 && args.target.indexOf('annotation') === -1) {\n var pointIndex = parseInt(args.target[args.target.length - 1], 10);\n pieDataSource = [];\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n var value = series.points[pointIndex].y;\n pieDataSource.push({\n 'x': series.name, 'y': value, 'text': getValue(chart.visibleSeries, pointIndex, value)\n });\n }\n pie.series[0].dataSource = pieDataSource;\n pie.series[0].xName = 'x';\n pie.series[0].yName = 'y';\n pie.refresh();\n }\n },\n resized: function (args) {\n location.reload();\n },\n loaded: function (args) {\n if (isRender) {\n pie.destroy();\n pie = new ej.charts.AccumulationChart({\n background: 'transparent',\n series: [{\n radius: '65%', animation: { enable: false },\n dataSource: pieDataSource, border: { color: 'transparent'},\n xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' }, name: 'text' },\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n legendSettings: { visible: false },\n });\n pie.appendTo('#chart_annotation');\n }\n },\n animationComplete: function (args) {\n isRender = true;\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n pie = new ej.charts.AccumulationChart({\n background: 'transparent',\n series: [{\n radius: '65%', animation: { enable: false },\n dataSource: pieDataSource, border: { color: 'transparent'},\n xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', name: 'text' },\n }],\n theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)),\n legendSettings: { visible: false }\n });\n pie.appendTo('#chart_annotation');\n }\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/pie-annotation.js b/src/chart/pie-annotation.js index 8e074a04..0f27b426 100644 --- a/src/chart/pie-annotation.js +++ b/src/chart/pie-annotation.js @@ -41,12 +41,14 @@ this.default = function () { chartArea: { border: { width: 0 } }, title: 'Mobile Game Market by Country', selectionMode: 'Cluster', selectedDataIndexes: [{ series: 0, point: 0 }], width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: true, toggleVisibility: false }, annotations: [{ content: '
    ', @@ -79,7 +81,7 @@ this.default = function () { background: 'transparent', series: [{ radius: '65%', animation: { enable: false }, - dataSource: pieDataSource, + dataSource: pieDataSource, border: { color: 'transparent'}, xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' }, name: 'text' }, }], load: function (args) { @@ -100,7 +102,7 @@ this.default = function () { background: 'transparent', series: [{ radius: '65%', animation: { enable: false }, - dataSource: pieDataSource, + dataSource: pieDataSource, border: { color: 'transparent'}, xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', name: 'text' }, }], theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)), diff --git a/src/chart/pie-empty-point-stack.json b/src/chart/pie-empty-point-stack.json new file mode 100644 index 00000000..7bd1a334 --- /dev/null +++ b/src/chart/pie-empty-point-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Empty Point Mode:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Empty Points in Pie Chart\n */\n\n var chart = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n xName: 'x', yName: 'y', name: 'Profit',\n type: 'Pie',\n dataSource: [{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },\n { x: 'Corn', y: 60 }, { x: 'Gram', y: null },\n { x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },\n { x: 'Fruit', y: 60 }, { x: 'Butter', y: null }],\n dataLabel: {\n visible: true, position: 'Inside', font: {\n fontWeight: '600',\n color: '#ffffff'\n }\n },\n emptyPointSettings: {\n fill: '#e6e6e6',\n }\n },\n ],\n //Initializing Title\n title: 'Annual Product-Wise Profit Analysis',\n legendSettings: { visible: false },\n //Initializing Tooltip\n tooltip: { enable: true, header: 'Profit', format: '${point.x} : ${point.y}' },\n\n });\n chart.appendTo('#pie-empty-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].emptyPointSettings.mode = mode.value;\n chart.refresh();\n }\n });\n mode.appendTo('#emptypointmode');\n"} \ No newline at end of file diff --git a/src/chart/pie-empty-point.js b/src/chart/pie-empty-point.js index a5c83528..4e5d2e98 100644 --- a/src/chart/pie-empty-point.js +++ b/src/chart/pie-empty-point.js @@ -28,12 +28,14 @@ this.default = function () { legendSettings: { visible: false }, //Initializing Tooltip tooltip: { enable: true, header: 'Profit', format: '${point.x} : ${point.y}' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#pie-empty-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/pie-radius-stack.json b/src/chart/pie-radius-stack.json new file mode 100644 index 00000000..0458b8eb --- /dev/null +++ b/src/chart/pie-radius-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pie with Various Radius\n */\n\n var pie = new ej.charts.AccumulationChart({\n enableSmartLabels: true,\n //Initializing Series\n series: [\n {\n dataSource: [\n { x: 'Argentina', y: 505370, r: '100' },\n { x: 'Belgium', y: 551500, r: '118.7' },\n { x: 'Cuba', y: 312685, r: '124.6' },\n { x: 'Dominican Republic', y: 350000, r: '137.5' },\n { x: 'Egypt', y: 301000, r: '150.8' },\n { x: 'Kazakhstan', y: 300000, r: '155.5' },\n { x: 'Somalia', y: 357022, r: '160.6' }\n ],\n xName: 'x',\n yName: 'y',\n radius: 'r',\n innerRadius: '20%',\n dataLabel: {\n visible: true, position: 'Outside', name: 'x'\n },\n }\n ],\n //Initializing Legend\n legendSettings: {\n visible: true\n },\n enableAnimation: true,\n tooltip: { enable: true, format: '${point.x} : ${point.y}' },\n\n });\n pie.appendTo('#pieradius-container');\n"} \ No newline at end of file diff --git a/src/chart/pie-radius.js b/src/chart/pie-radius.js index 8b774234..f9ef4c44 100644 --- a/src/chart/pie-radius.js +++ b/src/chart/pie-radius.js @@ -31,6 +31,7 @@ this.default = function () { }, enableAnimation: true, tooltip: { enable: true, format: '${point.x} : ${point.y}' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -38,6 +39,7 @@ this.default = function () { selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); args.accumulation.legendSettings.position = ej.base.Browser.isDevice ? 'Bottom' : 'Right'; } + // custom code end }); pie.appendTo('#pieradius-container'); }; \ No newline at end of file diff --git a/src/chart/polar-area-stack.json b/src/chart/polar-area-stack.json new file mode 100644 index 00000000..db7844f4 --- /dev/null +++ b/src/chart/polar-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Area \n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelPlacement: 'OnTicks',\n interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Revenue in Millions',\n labelFormat: '{value}M'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'Area',\n dataSource: [{ x: '2000', y: 4 }, { x: '2001', y: 3.0 },\n { x: '2002', y: 3.8 }, { x: '2003', y: 3.4 },\n { x: '2004', y: 3.2 }, { x: '2005', y: 3.9 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product A',\n border: { color: 'transparent' },\n opacity: 0.5,\n },\n {\n type: 'Polar', drawType: 'Area',\n dataSource: [{ x: '2000', y: 2.6 }, { x: '2001', y: 2.8 },\n { x: '2002', y: 2.6 }, { x: '2003', y: 3 },\n { x: '2004', y: 3.6 }, { x: '2005', y: 3 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product B',\n opacity: 0.5,\n border: { color: 'transparent' },\n },\n {\n type: 'Polar', drawType: 'Area',\n dataSource: [{ x: '2000', y: 2.8 }, { x: '2001', y: 2.5 },\n { x: '2002', y: 2.8 }, { x: '2003', y: 3.2 },\n { x: '2004', y: 2.9 }, { x: '2005', y: 2 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product C',\n opacity: 0.5,\n border: { color: 'transparent' },\n }\n ],\n //Initializing Chart Title\n title: 'Average Sales Comparison',\n\n });\n chart.appendTo('#polar-area-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#SelectSeriesType');\n"} \ No newline at end of file diff --git a/src/chart/polar-area.js b/src/chart/polar-area.js index 2a18a95f..2aaf4b53 100644 --- a/src/chart/polar-area.js +++ b/src/chart/polar-area.js @@ -50,12 +50,14 @@ this.default = function () { ], //Initializing Chart Title title: 'Average Sales Comparison', + // custom code start load: function (args) { var polarAreaTheme = location.hash.split('/')[1]; polarAreaTheme = polarAreaTheme ? polarAreaTheme : 'Material'; args.chart.theme = (polarAreaTheme.charAt(0).toUpperCase() + polarAreaTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-area-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-column-stack.json b/src/chart/polar-column-stack.json new file mode 100644 index 00000000..d4f00c54 --- /dev/null +++ b/src/chart/polar-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Column\n */\n\n var data = [\n { text: 'Japan', x: 'JPN', y: 137.9, y1: 127.6, y2: 108.8 },\n { text: 'Indonesia', x: 'IDN', y: 85.0, y1: 246.9, y2: 45.5 },\n { text: 'Russia', x: 'RUS', y: 237.1, y1: 143.5, y2: 41.2 },\n { text: 'Vietnam', x: 'VNM', y: 127.7, y1: 88.8, y2: 18.0 },\n { text: 'Pakistan', x: 'PAK', y: 126.1, y1: 179.2, y2: null },\n { text: 'Nigeria', x: 'NGA', y: 175.0, y1: 168.8, y2: 12.7 },\n { text: 'Germany', x: 'DEU', y: 113.6, y1: 81.9, y2: 46.0 },\n { text: 'Bangladesh', x: 'BGS', y: 116.0, y1: 154.7, y2: 34.6 },\n { text: 'Philippines', x: 'PHL', y: 109.5, y1: 96.7, y2: 16.6 },\n { text: 'Mexico', x: 'MEX', y: 102.7, y1: 120.8, y2: 19.8 }\n ];\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelPlacement: 'OnTicks', interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}M'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'Column', dataSource: data,\n animation: { enable: true }, border: { width: 1, color: 'white' },\n xName: 'x', yName: 'y', name: 'Mobile Subscriptions',\n marker: { dataLabel: { name: 'text' } }\n },\n {\n type: 'Polar', drawType: 'Column', dataSource: data,\n animation: { enable: true }, border: { width: 1, color: 'white' },\n xName: 'x', yName: 'y1', name: 'Population in Millions',\n marker: { dataLabel: { name: 'text' } }\n },\n {\n type: 'Polar', drawType: 'Column', dataSource: data,\n animation: { enable: true }, border: { width: 1, color: 'white' },\n xName: 'x', yName: 'y2', name: '3G/4G Subscriptions',\n marker: { dataLabel: { name: 'text' } }\n },\n ],\n //Initializing Chart Title\n title: 'Top 10 Mobile Markets by Number of Subscriptions',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: '${point.text} : ${point.y}%'\n },\n\n });\n chart.appendTo('#polar-column-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#SeriesType');\n"} \ No newline at end of file diff --git a/src/chart/polar-column.js b/src/chart/polar-column.js index f12803ce..e2b5626d 100644 --- a/src/chart/polar-column.js +++ b/src/chart/polar-column.js @@ -53,12 +53,14 @@ this.default = function () { enable: true, format: '${point.text} : ${point.y}%' }, + // custom code start load: function (args) { var polarColumnTheme = location.hash.split('/')[1]; polarColumnTheme = polarColumnTheme ? polarColumnTheme : 'Material'; args.chart.theme = (polarColumnTheme.charAt(0).toUpperCase() + polarColumnTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-column-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-line-stack.json b/src/chart/polar-line-stack.json new file mode 100644 index 00000000..69e0e5a6 --- /dev/null +++ b/src/chart/polar-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    Source:\n www.yr.no\n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    Closed:
    \n     		\n
    \n \n
    \n
    \n
    Start Angle:\n

    0

    \n
    \n     		\n
    \n \n
    \n
    \n
    Inversed:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Line\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Months',\n valueType: 'Category',\n labelPlacement: 'OnTicks',\n interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Temperature (Celsius)',\n minimum: -25,\n maximum: 25,\n interval: 10,\n edgeLabelPlacement: 'Shift',\n labelFormat: '{value}°C'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar',\n dataSource: [\n { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },\n { x: 'Mar', y: 0.8 }, { x: 'Apr', y: 6.3 },\n { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },\n { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },\n { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },\n { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 },\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Warmest',\n marker: {\n visible: true,\n height: 10, width: 10,\n shape: 'Pentagon',\n }\n }, {\n type: 'Polar',\n dataSource: [\n { x: 'Jan', y: -17.4 }, { x: 'Feb', y: -15.6 },\n { x: 'Mar', y: -12.3 }, { x: 'Apr', y: -5.3 },\n { x: 'May', y: 1.0 }, { x: 'Jun', y: 6.9 },\n { x: 'Jul', y: 9.4 }, { x: 'Aug', y: 7.6 },\n { x: 'Sep', y: 2.6 }, { x: 'Oct', y: -4.9 },\n { x: 'Nov', y: -13.4 }, { x: 'Dec', y: -16.4 },\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Coldest',\n marker: {\n visible: true, height: 10, width: 10, shape: 'Diamond',\n }\n }\n ],\n //Initializing Chart Title\n title: 'Alaska Weather Statistics - 2016',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#polar-line-container');\n document.getElementById('isClosed').onchange = function () {\n var element = (document.getElementById('isClosed'));\n chart.series[0].isClosed = element.checked;\n chart.series[1].isClosed = element.checked;\n chart.series[0].animation.enable = false;\n chart.series[1].animation.enable = false;\n chart.refresh();\n };\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#SelectSeriesType');\n document.getElementById('startangle').onpointermove = document.getElementById('startangle').ontouchmove =\n document.getElementById('startangle').onchange = function () {\n var element = (document.getElementById('startangle'));\n chart.primaryXAxis.startAngle = parseInt(element.value, 10);\n document.getElementById('startAngleValue').innerHTML = parseInt(element.value, 10) + '';\n chart.series[0].animation.enable = false;\n chart.series[1].animation.enable = false;\n chart.refresh();\n };\n document.getElementById('isinversed').onchange = function () {\n var element = (document.getElementById('isinversed'));\n chart.primaryXAxis.isInversed = element.checked;\n chart.primaryYAxis.isInversed = element.checked;\n chart.dataBind();\n };\n"} \ No newline at end of file diff --git a/src/chart/polar-line.js b/src/chart/polar-line.js index ae0c7902..9b7aa3f0 100644 --- a/src/chart/polar-line.js +++ b/src/chart/polar-line.js @@ -62,12 +62,14 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var polarLineTheme = location.hash.split('/')[1]; polarLineTheme = polarLineTheme ? polarLineTheme : 'Material'; args.chart.theme = (polarLineTheme.charAt(0).toUpperCase() + polarLineTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-line-container'); document.getElementById('isClosed').onchange = function () { diff --git a/src/chart/polar-range-column-stack.json b/src/chart/polar-range-column-stack.json new file mode 100644 index 00000000..b95c3767 --- /dev/null +++ b/src/chart/polar-range-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType RangeColumn\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Months',\n labelPlacement: 'OnTicks',\n startAngle: 90, interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n minimum: 0, maximum: 20, interval: 5\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jan', low: 2.7, high: 7.1 }, { x: 'Feb', low: 3.9, high: 7.7 },\n { x: 'Mar', low: 3.2, high: 7.5 }, { x: 'Apr', low: 4.5, high: 9.8 },\n { x: 'May', low: 6.7, high: 11.4 }, { x: 'June', low: 8.4, high: 14.4 },\n { x: 'July', low: 11.6, high: 17.2 }, { x: 'Aug', low: 12.7, high: 17.9 },\n { x: 'Sep', low: 9.5, high: 15.1 }, { x: 'Oct', low: 5.0, high: 10.5 },\n { x: 'Nov', low: 3.2, high: 7.9 }, { x: 'Dec', low: 6.1, high: 9.1 }\n ],\n border: { width: 3, color: 'white' },\n },\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n //Initializing Chart Title\n title: 'Maximum and Minimum Temperature',\n\n });\n chart.appendTo('#polar-range-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#SelectType');\n"} \ No newline at end of file diff --git a/src/chart/polar-range-column.js b/src/chart/polar-range-column.js index eb486991..656523b7 100644 --- a/src/chart/polar-range-column.js +++ b/src/chart/polar-range-column.js @@ -37,12 +37,14 @@ this.default = function () { }, //Initializing Chart Title title: 'Maximum and Minimum Temperature', + // custom code start load: function (args) { var polarRangeTheme = location.hash.split('/')[1]; polarRangeTheme = polarRangeTheme ? polarRangeTheme : 'Material'; args.chart.theme = (polarRangeTheme.charAt(0).toUpperCase() + polarRangeTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-range-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-scatter-stack.json b/src/chart/polar-scatter-stack.json new file mode 100644 index 00000000..56189a71 --- /dev/null +++ b/src/chart/polar-scatter-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Scatter\n */\n\n var data = [\n { text: 'Myanmar', x: 'MMR', y: 7.3, y1: 6.3, y2: 7.5 },\n { text: 'India', x: 'IND', y: 7.9, y1: 6.8, y2: 7.2 },\n { text: 'Bangladesh', x: 'BGD', y: 6.8, y1: 6.9, y2: 6.9 },\n { text: 'Cambodia', x: 'KHM', y: 7.0, y1: 7.0, y2: 6.9 },\n { text: 'China', x: 'CHN', y: 6.9, y1: 6.7, y2: 6.6 },\n { text: 'Bhutan', x: 'BTN', y: 6.1, y1: 6.2, y2: 5.9 },\n { text: 'Iceland', x: 'ISL', y: 4.1, y1: 7.2, y2: 5.7 },\n { text: 'Nepal', x: 'NPL', y: 2.7, y1: 0.6, y2: 5.5 },\n { text: 'Pakistan', x: 'PAK', y: 4.0, y1: 4.7, y2: 5.0 },\n { text: 'Poland', x: 'POL', y: 3.9, y1: 2.7, y2: 3.4 },\n { text: 'Australia', x: 'AUS', y: 2.4, y1: 2.5, y2: 3.1 },\n { text: 'Korea', x: 'KOR', y: 2.8, y1: 2.8, y2: 2.7 },\n { text: 'Singapore', x: 'SGP', y: 1.9, y1: 2.0, y2: 2.0 },\n { text: 'Canada', x: 'CAN', y: 0.9, y1: 1.4, y2: 1.9 },\n { text: 'Germany', x: 'DEU', y: 1.5, y1: 1.8, y2: 1.6 },\n { text: 'Denmark', x: 'DNK', y: 1.6, y1: 1.1, y2: 1.5 },\n { text: 'France', x: 'FRA', y: 1.3, y1: 1.3, y2: 1.4 },\n { text: 'Austria', x: 'AUT', y: 1.0, y1: 1.5, y2: 1.4 }\n ];\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelPlacement: 'OnTicks',\n interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 0, maximum: 8, interval: 2\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'Scatter', dataSource: data,\n animation: { enable: true },\n marker: { height: 10, width: 10, dataLabel: { name: 'text' } },\n xName: 'x', yName: 'y', name: '2015'\n },\n {\n type: 'Polar', drawType: 'Scatter', dataSource: data,\n animation: { enable: true },\n marker: { height: 10, width: 10, shape: 'Diamond', dataLabel: { name: 'text' } },\n xName: 'x', yName: 'y1', name: '2016'\n },\n {\n type: 'Polar', drawType: 'Scatter', dataSource: data,\n animation: { enable: true },\n marker: { height: 10, width: 10, shape: 'Triangle', dataLabel: { name: 'text' } },\n xName: 'x', yName: 'y2', name: '2017'\n },\n ],\n //Initializing Chart Title\n title: 'Real GDP Growth',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: '${point.text} : ${point.y}%'\n },\n\n });\n chart.appendTo('#polar-scatter-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#SelectedType');\n"} \ No newline at end of file diff --git a/src/chart/polar-scatter.js b/src/chart/polar-scatter.js index dba98d3b..735dce8c 100644 --- a/src/chart/polar-scatter.js +++ b/src/chart/polar-scatter.js @@ -62,12 +62,14 @@ this.default = function () { enable: true, format: '${point.text} : ${point.y}%' }, + // custom code start load: function (args) { var polarScatterTheme = location.hash.split('/')[1]; polarScatterTheme = polarScatterTheme ? polarScatterTheme : 'Material'; args.chart.theme = (polarScatterTheme.charAt(0).toUpperCase() + polarScatterTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-scatter-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-spline-stack.json b/src/chart/polar-spline-stack.json new file mode 100644 index 00000000..602752a3 --- /dev/null +++ b/src/chart/polar-spline-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType Spline\n */\n\n var cardData = [];\n var biDirData = [];\n var omniDirData = [];\n var point1;\n var point2;\n for (var x = -180; x < 180; x++) {\n point1 = { x: x, y: -12.6 * (1 - Math.cos(x * 3.14 / 180)) };\n cardData.push(point1);\n point2 = { x: x, y: -3 };\n omniDirData.push(point2);\n }\n for (var x1 = -180; x1 < -90; x1++) {\n point1 = { x: x1, y: -26 * (1 + Math.cos(x1 * 3.14 / 180)) };\n biDirData.push(point1);\n }\n for (var x2 = -90; x2 < 90; x2++) {\n point1 = { x: x2, y: -26 * (1 - Math.cos(x2 * 3.14 / 180)) };\n biDirData.push(point1);\n }\n for (var x3 = 90; x3 < 180; x3++) {\n point1 = { x: x3, y: -26 * (1 + Math.cos(x3 * 3.14 / 180)) };\n biDirData.push(point1);\n }\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n minimum: -180,\n maximum: 180,\n interval: 30,\n labelFormat: '{value}°',\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'Spline', dataSource: cardData,\n animation: { enable: true }, width: 2,\n xName: 'x', yName: 'y', name: 'Cardioid (unidirectional)', dashArray: '5 5 2'\n },\n {\n type: 'Polar', drawType: 'Spline', dataSource: omniDirData,\n animation: { enable: true }, dashArray: '2', width: 2,\n xName: 'x', yName: 'y', name: 'Omnidirectional'\n },\n {\n type: 'Polar', drawType: 'Spline', dataSource: biDirData,\n animation: { enable: true }, width: 2,\n xName: 'x', yName: 'y', name: 'Bidirectional'\n },\n ],\n //Initializing Chart Title\n title: 'Microphone Types Polar Patterns',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#polar-spline-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#seriestype');\n"} \ No newline at end of file diff --git a/src/chart/polar-spline.js b/src/chart/polar-spline.js index 201e86bd..1b66a7bf 100644 --- a/src/chart/polar-spline.js +++ b/src/chart/polar-spline.js @@ -58,6 +58,7 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var polarSplineTheme = location.hash.split('/')[1]; polarSplineTheme = polarSplineTheme ? polarSplineTheme : 'Material'; @@ -65,6 +66,7 @@ this.default = function () { args.chart.theme = (polarSplineTheme.charAt(0).toUpperCase() + polarSplineTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-spline-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-stacking-area-stack.json b/src/chart/polar-stacking-area-stack.json new file mode 100644 index 00000000..61167f46 --- /dev/null +++ b/src/chart/polar-stacking-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType StackingArea\n */\n\n var data = [\n { x: 'JPN', text: 'Japan', y: 5156, y1: 4849, y2: 4382, y3: 4939 },\n { x: 'DEU', text: 'Germany', y: 3754, y1: 3885, y2: 3365, y3: 3467 },\n { x: 'FRA', text: 'France', y: 2809, y1: 2844, y2: 2420, y3: 2463 },\n { x: 'GBR', text: 'UK', y: 2721, y1: 3002, y2: 2863, y3: 2629 },\n { x: 'BRA', text: 'Brazil', y: 2472, y1: 2456, y2: 1801, y3: 1799 },\n { x: 'RUS', text: 'Russia', y: 2231, y1: 2064, y2: 1366, y3: 1281 },\n { x: 'ITA', text: 'Italy', y: 2131, y1: 2155, y2: 1826, y3: 1851 },\n { x: 'IND', text: 'India', y: 1857, y1: 2034, y2: 2088, y3: 2256 },\n { x: 'CAN', text: 'Canada', y: 1843, y1: 1793, y2: 1553, y3: 1529 }\n ];\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelPlacement: 'OnTicks',\n interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Polar', drawType: 'StackingArea', dataSource: data,\n animation: { enable: true },\n xName: 'x', yName: 'y', name: '2013'\n },\n {\n type: 'Polar', drawType: 'StackingArea', dataSource: data,\n animation: { enable: true },\n xName: 'x', yName: 'y1', name: '2014'\n },\n {\n type: 'Polar', drawType: 'StackingArea', dataSource: data,\n animation: { enable: true },\n xName: 'x', yName: 'y2', name: '2015'\n },\n {\n type: 'Polar', drawType: 'StackingArea', dataSource: data,\n animation: { enable: true },\n xName: 'x', yName: 'y3', name: '2016'\n },\n ],\n //Initializing Chart Title\n title: 'GDP, Current Prices (in Billions)',\n legendSettings: {\n visible: true\n },\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#polarStack-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[3].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.series[3].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#seriesType');\n"} \ No newline at end of file diff --git a/src/chart/polar-stacking-area.js b/src/chart/polar-stacking-area.js index 6903d918..619a640d 100644 --- a/src/chart/polar-stacking-area.js +++ b/src/chart/polar-stacking-area.js @@ -53,12 +53,14 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var polarStackedTheme = location.hash.split('/')[1]; polarStackedTheme = polarStackedTheme ? polarStackedTheme : 'Material'; args.chart.theme = (polarStackedTheme.charAt(0).toUpperCase() + polarStackedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polarStack-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/polar-stacking-column-stack.json b/src/chart/polar-stacking-column-stack.json new file mode 100644 index 00000000..0124cea1 --- /dev/null +++ b/src/chart/polar-stacking-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Series Type:\n
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Polar Series with DrawType StackingColumn\n */\n\n var data = [\n { x: 'N', y: 1, y1: 0.8, y2: 0.8, y3: 0.3, y4: 0.2, y5: 0.2 },\n { x: 'NNE', y: 0.9, y1: 0.7, y2: 0.7, y3: 0.3, y4: 0.2, y5: 0.2 },\n { x: 'NE', y: 0.7, y1: 0.8, y2: 0.5, y3: 1.1, y4: 1.2, y5: 0.5 },\n { x: 'ENE', y: 0.9, y1: 1, y2: 0.4, y3: 0.9, y4: 1, y5: 0.4 },\n { x: 'E', y: 0.9, y1: 0.6, y2: 0.9, y3: 0.5, y4: 0.7, y5: 0.4 },\n { x: 'ESE', y: 0.8, y1: 0.5, y2: 0.7, y3: 0.3, y4: 0.8, y5: 0.3 },\n { x: 'SE', y: 0.7, y1: 0.4, y2: 0.6, y3: 0.5, y4: 0.5, y5: 0.3 },\n { x: 'SSE', y: 1.4, y1: 0.4, y2: 0.5, y3: 0.4, y4: 0.6, y5: 0.2 },\n { x: 'S', y: 2, y1: 1.2, y2: 0.6, y3: 0.6, y4: 0.4, y5: 0.4 },\n { x: 'SSW', y: 2, y1: 2.5, y2: 2, y3: 1, y4: 0.5, y5: 0.3 },\n { x: 'SW', y: 2.2, y1: 2, y2: 1.8, y3: 1, y4: 0.4, y5: 0.2 },\n { x: 'WSW', y: 1.8, y1: 1.1, y2: 0.8, y3: 0.1, y4: 0.4, y5: 0.2 },\n { x: 'W', y: 1.6, y1: 1.8, y2: 2.1, y3: 1, y4: 0.4, y5: 0.4 },\n { x: 'WNW', y: 1.2, y1: 1.2, y2: 1.5, y3: 1.3, y4: 1.1, y5: 1.2 },\n { x: 'NW', y: 2, y1: 2.5, y2: 2, y3: 1, y4: 0.2, y5: 0.7 },\n { x: 'NNW', y: 1.8, y1: 1.1, y2: 0.8, y3: 0.1, y4: 0.4, y5: 0.2 }\n ];\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelPlacement: 'OnTicks',\n interval: 1,\n coefficient: ej.base.Browser.isDevice ? 80 : 100\n },\n //Initializing Primary Y Axis\n primaryYAxis: {},\n //Initializing Chart Sample\n series: [\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y', name: '6-9',\n },\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y1', name: '9 -11',\n },\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y2', name: '11-14',\n },\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y3', name: '14-17',\n },\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y4', name: '17 - 20',\n },\n {\n type: 'Polar', drawType: 'StackingColumn', dataSource: data,\n animation: { enable: true }, border: { color: 'white', width: 1 },\n xName: 'x', yName: 'y5', name: '23 Above',\n },\n ],\n //Initializing Chart Title\n title: 'Wind Rose Chart',\n legendSettings: {\n visible: true\n },\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#polar-stack-container');\n var polarType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].type = polarType.value;\n chart.series[1].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[3].type = polarType.value;\n chart.series[2].type = polarType.value;\n chart.series[5].type = polarType.value;\n chart.series[0].animation.enable = true;\n chart.series[1].animation.enable = true;\n chart.series[2].animation.enable = true;\n chart.series[3].animation.enable = true;\n chart.series[4].animation.enable = true;\n chart.series[5].animation.enable = true;\n chart.refresh();\n }\n });\n polarType.appendTo('#seltype');\n"} \ No newline at end of file diff --git a/src/chart/polar-stacking-column.js b/src/chart/polar-stacking-column.js index 228d2e03..9a55c5e9 100644 --- a/src/chart/polar-stacking-column.js +++ b/src/chart/polar-stacking-column.js @@ -72,12 +72,14 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#polar-stack-container'); var polarType = new ej.dropdowns.DropDownList({ diff --git a/src/chart/print-stack.json b/src/chart/print-stack.json new file mode 100644 index 00000000..c86e10a8 --- /dev/null +++ b/src/chart/print-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index];\n }\n else if (selectedTheme === 'highcontrast'){\n args.fill = highcontrastColors[args.point.index];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for chart print\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Manager',\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n pointRender: labelRender,\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Sales',\n minimum: 0,\n maximum: 20000,\n majorGridLines: { width: 0 }\n },\n chartMouseClick: function (args) {\n if (args.target.indexOf('print') > -1) {\n chart.print();\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },\n { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }],\n xName: 'x', width: 2,\n yName: 'y'\n }\n ],\n //Initializing Chart Title\n title: 'Sales Comparision',\n\n });\n chart.appendTo('#print-container');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n chart.print();\n };\n"} \ No newline at end of file diff --git a/src/chart/print.html b/src/chart/print.html index d9ab516a..f72bee9d 100644 --- a/src/chart/print.html +++ b/src/chart/print.html @@ -40,6 +40,6 @@ padding: 0px !important; } .e-play-icon::before { - content: '\e813'; + content: '\e34b'; } \ No newline at end of file diff --git a/src/chart/print.js b/src/chart/print.js index 0bc211a5..2cc123e0 100644 --- a/src/chart/print.js +++ b/src/chart/print.js @@ -63,12 +63,14 @@ this.default = function () { ], //Initializing Chart Title title: 'Sales Comparision', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#print-container'); var togglebtn = new ej.buttons.Button({ diff --git a/src/chart/pyramid-stack.json b/src/chart/pyramid-stack.json new file mode 100644 index 00000000..07819718 --- /dev/null +++ b/src/chart/pyramid-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Samples for Pyramid chart\n */\n\n var data = [{ x: 'Sweet Treats', y: 120, text: '120 cal' },\n { x: 'Milk, Youghnut, Cheese', y: 435, text: '435 cal' },\n { x: 'Vegetables', y: 470, text: '470 cal' },\n { x: 'Meat, Poultry, Fish', y: 475, text: '475 cal' },\n { x: 'Fruits', y: 520, text: '520 cal' },\n { x: 'Bread, Rice, Pasta', y: 930, text: '930 cal' }];\n var chart = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [{\n type: 'Pyramid', dataSource: data, xName: 'x', yName: 'y', width: '45%', height: '80%',\n neckWidth: '15%', gapRatio: 0.03,\n dataLabel: {\n name: 'text', visible: true, position: 'Inside', font: {\n fontWeight: '600'\n }\n }, explode: true, emptyPointSettings: { mode: 'Drop', fill: 'red' }, name: 'Food'\n }],\n legendSettings: {\n visible: false\n },\n tooltip: { enable: true, header: 'Food', format: '${point.x} : ${point.y} cal' },\n textRender: function (args) {\n args.text = args.text;\n },\n\n resized: function (args) {\n var bounds = document.getElementById('pyramid-container').getBoundingClientRect();\n if (bounds.width < bounds.height) {\n args.accumulation.series[0].width = '80%';\n args.accumulation.series[0].height = '60%';\n }\n else {\n args.accumulation.series[0].width = '45%';\n args.accumulation.series[0].height = '80%';\n }\n },\n //Initializing Chart Title\n title: 'Food Comparison Chart',\n });\n chart.appendTo('#pyramid-container');\n"} \ No newline at end of file diff --git a/src/chart/pyramid.js b/src/chart/pyramid.js index 4b368308..c322c892 100644 --- a/src/chart/pyramid.js +++ b/src/chart/pyramid.js @@ -26,6 +26,7 @@ this.default = function () { textRender: function (args) { args.text = args.text; }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; args.accumulation.theme = selectedTheme && (selectedTheme.charAt(0).toUpperCase() + @@ -35,6 +36,7 @@ this.default = function () { args.accumulation.series[0].height = '60%'; } }, + // custom code end resized: function (args) { var bounds = document.getElementById('pyramid-container').getBoundingClientRect(); if (bounds.width < bounds.height) { diff --git a/src/chart/range-area-stack.json b/src/chart/range-area-stack.json new file mode 100644 index 00000000..d63f5d8b --- /dev/null +++ b/src/chart/range-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Range Area series\n */\n\n var series1 = [];\n var value = 35;\n var point1;\n for (var i = 1; i < 360; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = {\n x: new Date(2015, 0, i),\n high: value, low: value - 10\n };\n series1.push(point1);\n }\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n //Initializing Zooming\n zoomSettings: {\n enableSelectionZooming: true,\n mode: 'X'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'RangeArea', marker: { visible : false },\n name: 'India',\n dataSource: series1,\n xName: 'x', high: 'high', low: 'low', opacity: 0.4,\n border: { width: 2 }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n //Initializing Chart Title\n title: 'Temperature Variation',\n seriesRender: function (args) {\n var theme = args.series.chart.theme;\n var color;\n if (theme === 'Material') {\n color = '#008E83';\n } else if (theme === 'Bootstrap') {\n color = '#7953AC';\n } else {\n color = '#335693';\n }\n args.series.border.color = color;\n },\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#range-container1');\n"} \ No newline at end of file diff --git a/src/chart/range-area.js b/src/chart/range-area.js index 78380606..a5efc1f4 100644 --- a/src/chart/range-area.js +++ b/src/chart/range-area.js @@ -67,12 +67,14 @@ this.default = function () { args.series.border.color = color; }, legendSettings: { visible: false }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#range-container1'); }; \ No newline at end of file diff --git a/src/chart/range-bar-stack.json b/src/chart/range-bar-stack.json new file mode 100644 index 00000000..5b1d5016 --- /dev/null +++ b/src/chart/range-bar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Range Bar series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚F',\n edgeLabelPlacement: 'Shift',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'RangeColumn', name: 'California', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jul', low: 28, high: 72 },\n { x: 'Aug', low: 18, high: 65 }, { x: 'Sep', low: 56, high: 87 },\n { x: 'Oct', low: 40, high: 78 },\n { x: 'Nov', low: 43, high: 64 }, { x: 'Dec', low: 28, high: 54 }\n ],\n }, {\n type: 'RangeColumn', name: 'Colorado', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jul', low: 38, high: 78 },\n { x: 'Aug', low: 27, high: 78 }, { x: 'Sep', low: 28, high: 79 },\n { x: 'Oct', low: 37, high: 66 },\n { x: 'Nov', low: 25, high: 52 }, { x: 'Dec', low: 20, high: 60 }\n ]\n }\n ],\n isTransposed: true,\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Temperature Variation',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/range-bar.js b/src/chart/range-bar.js index 9d261b89..ca8c0dc9 100644 --- a/src/chart/range-bar.js +++ b/src/chart/range-bar.js @@ -47,12 +47,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Temperature Variation', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/range-column-stack.json b/src/chart/range-column-stack.json new file mode 100644 index 00000000..551af2bc --- /dev/null +++ b/src/chart/range-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for RangeColumn series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary X Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n maximum: 20,\n edgeLabelPlacement: 'Shift',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'RangeColumn', name: 'India', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Sun', low: 3.1, high: 10.8 },\n { x: 'Mon', low: 5.7, high: 14.4 }, { x: 'Tue', low: 8.4, high: 16.9 },\n { x: 'Wed', low: 10.6, high: 19.2 },\n { x: 'Thu', low: 8.5, high: 16.1 }, { x: 'Fri', low: 6.0, high: 12.5 },\n { x: 'Sat', low: 1.5, high: 6.9 }\n ],\n }, {\n type: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Sun', low: 2.5, high: 9.8 },\n { x: 'Mon', low: 4.7, high: 11.4 }, { x: 'Tue', low: 6.4, high: 14.4 },\n { x: 'Wed', low: 9.6, high: 17.2 },\n { x: 'Thu', low: 7.5, high: 15.1 }, { x: 'Fri', low: 3.0, high: 10.5 },\n { x: 'Sat', low: 1.2, high: 7.9 }\n ]\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Temperature Variation',\n\n });\n chart.appendTo('#range-container');\n"} \ No newline at end of file diff --git a/src/chart/range-column.js b/src/chart/range-column.js index 90b58701..888763a1 100644 --- a/src/chart/range-column.js +++ b/src/chart/range-column.js @@ -50,12 +50,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Temperature Variation', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#range-container'); }; \ No newline at end of file diff --git a/src/chart/range-selection-stack.json b/src/chart/range-selection-stack.json new file mode 100644 index 00000000..e86ebf2f --- /dev/null +++ b/src/chart/range-selection-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    Selection Mode:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Range Selection in chart\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n minimum: 1970,\n maximum: 2016,\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Sales',\n labelFormat: '{value}%',\n interval: 25,\n minimum: 0,\n maximum: 100,\n majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n //Initializing Chart Title\n series: [\n {\n type: 'Scatter',\n dataSource: [{ x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },\n { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },\n { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },\n { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },\n { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },\n { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },\n { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },\n { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },\n { x: 2011, y: 9 }, { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }\n ],\n xName: 'x',\n yName: 'y', name: 'Product A',\n marker: {\n shape: 'Triangle',\n width: 10, height: 10\n }\n },\n {\n type: 'Scatter',\n dataSource: [{ x: 1971, y: 23 }, { x: 1972, y: 67 }, { x: 1973, y: 83 }, { x: 1974, y: 43 }, { x: 1975, y: 8 },\n { x: 1976, y: 41 }, { x: 1977, y: 56 }, { x: 1978, y: 31 }, { x: 1979, y: 29 }, { x: 1980, y: 87 },\n { x: 1981, y: 43 }, { x: 1982, y: 12 }, { x: 1983, y: 38 }, { x: 1984, y: 67 }, { x: 1985, y: 49 },\n { x: 1986, y: 67 }, { x: 1987, y: 83 }, { x: 1988, y: 16 }, { x: 1989, y: 89 }, { x: 1990, y: 18 },\n { x: 1991, y: 46 }, { x: 1992, y: 39 }, { x: 1993, y: 68 }, { x: 1994, y: 87 }, { x: 1995, y: 45 },\n { x: 1996, y: 42 }, { x: 1997, y: 28 }, { x: 1998, y: 82 }, { x: 1999, y: 13 }, { x: 2000, y: 83 },\n { x: 2001, y: 26 }, { x: 2002, y: 57 }, { x: 2003, y: 48 }, { x: 2004, y: 84 }, { x: 2005, y: 64 },\n { x: 2006, y: 24 }, { x: 2007, y: 82 }, { x: 2008, y: 37 }, { x: 2009, y: 68 }, { x: 2010, y: 37 },\n { x: 2011, y: 35 }, { x: 2012, y: 81 }, { x: 2013, y: 38 }, { x: 2014, y: 51 }, { x: 2015, y: 58 }\n ],\n xName: 'x',\n yName: 'y', name: 'Product B',\n marker: {\n shape: 'Pentagon',\n width: 10, height: 10\n }\n },\n ],\n //Initializing Chart Title\n title: 'Profit Comparision of A and B', legendSettings: { visible: true, toggleVisibility: false },\n selectionMode: 'DragXY',\n\n });\n chart.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.selectionMode = mode.value;\n chart.dataBind();\n }\n });\n mode.appendTo('#selmode');\n"} \ No newline at end of file diff --git a/src/chart/range-selection.js b/src/chart/range-selection.js index 1170afa3..896ac251 100644 --- a/src/chart/range-selection.js +++ b/src/chart/range-selection.js @@ -63,12 +63,14 @@ this.default = function () { //Initializing Chart Title title: 'Profit Comparision of A and B', legendSettings: { visible: true, toggleVisibility: false }, selectionMode: 'DragXY', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/relative-strength-index-indicator-stack.json b/src/chart/relative-strength-index-indicator-stack.json new file mode 100644 index 00000000..c40f46d2 --- /dev/null +++ b/src/chart/relative-strength-index-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for RSI Indicator\n */\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n plotOffset: 25,\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n },\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,\n majorTickLines: { width: 0 }, title: 'RSI', stripLines: [\n {\n start: 0, end: 120, text: '', color: 'black', visible: true,\n opacity: 0.03, zIndex: 'Behind'\n }\n ]\n }],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'Rsi', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n showZones: true, overBought: 70, overSold: 30,\n period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#rsi-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/relative-strength-index-indicator.js b/src/chart/relative-strength-index-indicator.js index e1c38433..1a0b8187 100644 --- a/src/chart/relative-strength-index-indicator.js +++ b/src/chart/relative-strength-index-indicator.js @@ -47,7 +47,8 @@ this.renderChart = function (chartData) { }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -57,12 +58,14 @@ this.renderChart = function (chartData) { chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#rsi-container'); diff --git a/src/chart/remote-data-stack.json b/src/chart/remote-data-stack.json new file mode 100644 index 00000000..62a50149 --- /dev/null +++ b/src/chart/remote-data-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}var dataManager = new ej.data.DataManager({\n url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'\n});\nvar query = new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false);\nvar labelRender = function (args) {\n if (args.axis.orientation === 'Horizontal') {\n args.text = args.text.split(' ')[0];\n }\n};\nvar loaded = 1;\nvar loadedChart = function (args) {\n var div = document.getElementById('waitingpopup');\n div.style.display = 'none';\n if (loaded) {\n args.chart.refresh();\n }\n loaded = 0;\n};\nvar fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\nvar materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\nvar bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\nvar highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\nvar pointRender = function (args) {\n var dataTheme = location.hash.split('/')[1];\n if (dataTheme && dataTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index % 10];\n }\n else if (dataTheme === 'material') {\n args.fill = materialColors[args.point.index % 10];\n }\n else if (dataTheme === 'highcontrast') {\n args.fill = highcontrastColors[args.point.index % 10];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Samples for remote data binding\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Assignee',\n rangePadding: 'Additional',\n majorGridLines: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Sample\n series: [\n {\n type: 'Column',\n dataSource: dataManager,\n xName: 'Assignee', yName: 'Estimate', query: query,\n name: 'Story Point',\n animation: { enable: false },\n marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600',\n color: '#ffffff'\n }\n }\n }\n }\n ],\n pointRender: pointRender,\n axisLabelRender: labelRender,\n loaded: loadedChart,\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n title: 'Sprint Task Analysis', legendSettings: { visible: false },\n tooltip: {\n enable: true\n }\n });\n chart.appendTo('#remote-container');\n"} \ No newline at end of file diff --git a/src/chart/remote-data.js b/src/chart/remote-data.js index fc93d895..6e863294 100644 --- a/src/chart/remote-data.js +++ b/src/chart/remote-data.js @@ -89,6 +89,7 @@ this.default = function () { axisLabelRender: labelRender, loaded: loadedChart, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var div = document.getElementById('waitingpopup'); div.style.display = 'block'; @@ -102,6 +103,7 @@ this.default = function () { args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end title: 'Sprint Task Analysis', legendSettings: { visible: false }, tooltip: { enable: true diff --git a/src/chart/rounded-column-stack.json b/src/chart/rounded-column-stack.json new file mode 100644 index 00000000..f87a7bc0 --- /dev/null +++ b/src/chart/rounded-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else if (selectedTheme === 'highcontrast') {\n args.fill = window.highcontrastColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for Column series with rounded corners\n */\n\n var count = 0;\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 },\n tickPosition: 'Inside',\n labelPosition: 'Inside', labelStyle: { color: '#ffffff' }\n },\n chartArea: { border: { width: 0 } },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 0, maximum: 300, interval: 50, majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y',\n dataSource: [\n { x: 'Egg', y: 106, text: 'Bangaladesh' },\n { x: 'Fish', y: 103, text: 'Bhutn' },\n { x: 'Misc', y: 198, text: 'Nepal' },\n { x: 'Tea', y: 189, text: 'Thiland' },\n { x: 'Fruits', y: 250, text: 'Malaysia' }\n ], name: 'Tiger',\n cornerRadius: {\n bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10\n },\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }\n ],\n legendSettings: { visible: false },\n title: 'Trade in Food Groups', tooltip: { enable: false },\n pointRender: labelRender,\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#column-container');\n"} \ No newline at end of file diff --git a/src/chart/rounded-column.html b/src/chart/rounded-column.html index 0236e3ce..0fabbee5 100644 --- a/src/chart/rounded-column.html +++ b/src/chart/rounded-column.html @@ -1,8 +1,5 @@
    -
    -
    Source: - Health Statistics -
    +

    @@ -26,7 +23,7 @@

    \ No newline at end of file diff --git a/src/chart/rounded-column.js b/src/chart/rounded-column.js index a49c33aa..23377bc8 100644 --- a/src/chart/rounded-column.js +++ b/src/chart/rounded-column.js @@ -18,6 +18,7 @@ var labelRender = function (args) { * Sample for Column series with rounded corners */ this.default = function () { + var count = 0; var chart = new ej.charts.Chart({ //Initializing Primary X Axis primaryXAxis: { @@ -36,11 +37,11 @@ this.default = function () { { type: 'Column', xName: 'x', width: 2, yName: 'y', dataSource: [ - { x: 'BGD', y: 106, text: 'Bangaladesh' }, - { x: 'BTN', y: 103, text: 'Bhutn' }, - { x: 'NPL', y: 198, text: 'Nepal' }, - { x: 'THA', y: 189, text: 'Thiland' }, - { x: 'MYS', y: 250, text: 'Malaysia' } + { x: 'Egg', y: 106, text: 'Bangaladesh' }, + { x: 'Fish', y: 103, text: 'Bhutn' }, + { x: 'Misc', y: 198, text: 'Nepal' }, + { x: 'Tea', y: 189, text: 'Thiland' }, + { x: 'Fruits', y: 250, text: 'Malaysia' } ], name: 'Tiger', cornerRadius: { bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 @@ -49,34 +50,59 @@ this.default = function () { } ], legendSettings: { visible: false }, - title: 'Tiger Population - 2016', tooltip: { enable: true }, + title: 'Trade in Food Groups', tooltip: { enable: false }, pointRender: labelRender, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, - tooltipRender: function (args) { - var tooltip = args.text; - if (tooltip.indexOf('BGD') > -1) { - tooltip = tooltip.replace('BGD', 'Bangladesh'); - } - else if (tooltip.indexOf('BTN') > -1) { - tooltip = tooltip.replace('BTN', 'Bhutan'); - } - else if (tooltip.indexOf('NPL') > -1) { - tooltip = tooltip.replace('NPL', 'Nepal'); - } - else if (tooltip.indexOf('THA') > -1) { - tooltip = tooltip.replace('THA', 'Thailand'); - } - else { - tooltip = tooltip.replace('MYS', 'Malaysia'); - } - args.text = tooltip; - } + loaded: function (args) { + args.chart.loaded = null; + var columninterval = setInterval(function () { + if (document.getElementById('column-container')) { + if (count === 0) { + chart.series[0].dataSource = [ + { x: 'Egg', y: 206, text: 'Bangaladesh' }, + { x: 'Fish', y: 123, text: 'Bhutn' }, + { x: 'Misc', y: 48, text: 'Nepal' }, + { x: 'Tea', y: 240, text: 'Thiland' }, + { x: 'Fruits', y: 170, text: 'Malaysia' } + ]; + args.chart.animate(); + count++; + } + else if (count === 1) { + chart.series[0].dataSource = [ + { x: 'Egg', y: 86, text: 'Bangaladesh' }, + { x: 'Fish', y: 173, text: 'Bhutn' }, + { x: 'Misc', y: 188, text: 'Nepal' }, + { x: 'Tea', y: 109, text: 'Thiland' }, + { x: 'Fruits', y: 100, text: 'Malaysia' } + ]; + args.chart.animate(); + count++; + } + else if (count === 2) { + chart.series[0].dataSource = [ + { x: 'Egg', y: 156, text: 'Bangaladesh' }, + { x: 'Fish', y: 33, text: 'Bhutn' }, + { x: 'Misc', y: 260, text: 'Nepal' }, + { x: 'Tea', y: 200, text: 'Thiland' }, + { x: 'Fruits', y: 30, text: 'Malaysia' } + ]; + args.chart.animate(); + count = 0; + } + } else { + clearInterval(columninterval); + } + }, 2000); + }, + // custom code end }); - chart.appendTo('#container'); + chart.appendTo('#column-container'); }; \ No newline at end of file diff --git a/src/chart/sample.json b/src/chart/sample.json index 94df55f3..85b0e021 100644 --- a/src/chart/sample.json +++ b/src/chart/sample.json @@ -8,7 +8,7 @@ { "url": "line", "name": "Line", - "description": "This demo for Essential JS2 Chart control shows how to render the line series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the line series.", "category": "Line Charts", "api": { "Chart": [ @@ -22,7 +22,7 @@ { "url": "spline", "name": "Spline", - "description": "This demo for Essential JS2 Chart control shows how to render the spline series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the spline series.", "category": "Line Charts", "api": { "Chart": [ @@ -36,7 +36,7 @@ { "url": "step-line", "name": "Step Line", - "description": "This demo for Essential JS2 Chart control shows how to render the step line series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the step line series.", "category": "Line Charts", "api": { "Chart": [ @@ -50,7 +50,7 @@ { "url": "dashed-line", "name": "Dashed Line", - "description": "This demo for Essential JS2 Chart control shows how to render the dashed line series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the dashed line series.", "category": "Line Charts", "api": { "Chart": [ @@ -64,7 +64,7 @@ { "url": "spline-inversed", "name": "Inversed Spline", - "description": "This demo for Essential JS2 Chart control shows how to render the inversed spline series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the inversed spline series.", "category": "Line Charts", "api": { "Chart": [ @@ -92,7 +92,7 @@ { "url": "line-multi-color", "name": "Multi Colored Line", - "description": "This demo for Essential JS2 Chart control shows how to render the multi colored line series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the multi colored line series.", "category": "Line Charts", "api": { "Chart": [ @@ -103,10 +103,40 @@ ] } }, + { + "url": "stacked-line", + "name": "Stacked Line", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacked line series.", + "category": "Line Charts", + "type":"new", + "api": { + "Chart": [ + "primaryXAxis", + "primaryYAxis", + "series", + "tooltip" + ] + } + }, + { + "url": "stacked-line -100", + "name": "100% Stacked Line", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the 100% stacked line series.", + "category": "Line Charts", + "type":"new", + "api": { + "Chart": [ + "primaryXAxis", + "primaryYAxis", + "series", + "tooltip" + ] + } + }, { "url": "area", "name": "Area", - "description": "This demo for Essential JS2 Chart control shows how to render the area series.", + "description": "This demo sample for Essential JS2 Chart control shows how to render and configure the area series chart.", "category": "Area Charts", "api": { "Chart": [ @@ -119,7 +149,7 @@ { "url": "spline-area", "name": "Spline Area", - "description": "This demo for Essential JS2 Chart control shows how to render the spline area series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the spline area series.", "category": "Area Charts", "api": { "Chart": [ @@ -132,7 +162,7 @@ { "url": "step-area", "name": "Step Area", - "description": "This demo for Essential JS2 Chart control shows how to render the step area series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the step area series.", "category": "Area Charts", "api": { "Chart": [ @@ -145,7 +175,7 @@ { "url": "range-area", "name": "Range Area", - "description": "This demo for Essential JS2 Chart control shows how to render the range area series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the range area series.", "category": "Area Charts", "api": { "Chart": [ @@ -160,7 +190,7 @@ { "url": "stacked-area", "name": "Stacked Area", - "description": "This demo for Essential JS2 Chart control shows how to render the stacking area series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacking area series.", "category": "Area Charts", "api": { "Chart": [ @@ -173,7 +203,7 @@ { "url": "stacked-area-100", "name": "100% Stacked Area", - "description": "This demo for Essential JS2 Chart control shows how to render the 100 percent stacking area series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the 100 percent stacking area series.", "category": "Area Charts", "api": { "Chart": [ @@ -186,7 +216,7 @@ { "url": "area-empty", "name": "Area - Empty Points", - "description": "This demo for Essential JS2 Chart control shows how to render the area series with empty points.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the area series chart with empty points.", "category": "Area Charts", "api": { "Chart": [ @@ -199,7 +229,7 @@ { "url": "area-segments", "name": "Area Zone", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the points in a particular range using MultiColoredArea series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render the points in a particular range using MultiColoredArea series.", "category": "Area Charts", "api": { "Chart": [ @@ -213,7 +243,7 @@ { "url": "column", "name": "Column", - "description": "This demo for Essential JS2 Chart control shows how to render the column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the column series.", "category": "Bar Charts", "api": { "Chart": [ @@ -228,8 +258,9 @@ { "url": "rounded-column", "name": "Rounded Column", - "description": "This demo for Essential JS2 Chart control shows how to render the rounded column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the rounded column series.", "category": "Bar Charts", + "type": "update", "api": { "Chart": [ "primaryXAxis", @@ -243,7 +274,7 @@ { "url": "column-placement", "name": "Back to Back Column", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the column charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the column charts.", "category": "Bar Charts", "api": { "Chart": [ @@ -258,7 +289,7 @@ { "url": "range-column", "name": "Range Column", - "description": "This demo for Essential JS2 Chart control shows how to render the range column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the range column series.", "category": "Bar Charts", "api": { "Chart": [ @@ -273,7 +304,7 @@ { "url": "range-bar", "name": "Inversed Range Column", - "description": "This demo for Essential JS2 Chart control shows how to render the inversed range column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the inversed range column series.", "category": "Bar Charts", "api": { "Chart": [ @@ -288,7 +319,7 @@ { "url": "bar", "name": "Bar", - "description": "This demo for Essential JS2 Chart control shows how to render bar series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bar series.", "category": "Bar Charts", "api": { "Chart": [ @@ -303,7 +334,7 @@ { "url": "stacked-column", "name": "Stacked Column", - "description": "This demo for Essential JS2 Chart control shows how to render the stacking column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacking column series.", "category": "Bar Charts", "api": { "Chart": [ @@ -318,7 +349,7 @@ { "url": "stacked-column-100", "name": "100% Stacked Column", - "description": "This demo for Essential JS2 Chart control shows how to render the 100 percent stacking column series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the 100 percent stacking column series.", "category": "Bar Charts", "api": { "Chart": [ @@ -333,7 +364,7 @@ { "url": "stacked-bar", "name": "Stacked Bar", - "description": "This demo for Essential JS2 Chart control shows how to render the stacking bar series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacking bar series.", "category": "Bar Charts", "api": { "Chart": [ @@ -348,7 +379,7 @@ { "url": "stacked-bar-100", "name": "100% Stacked Bar", - "description": "This demo for Essential JS2 Chart control shows how to render the 100 percent stacking bar series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the 100 percent stacking bar series.", "category": "Bar Charts", "api": { "Chart": [ @@ -363,7 +394,7 @@ { "url": "tornado", "name": "Negative Stack", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the bar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bar charts.", "category": "Bar Charts", "api": { "Chart": [ @@ -378,7 +409,7 @@ { "url": "scatter-plot", "name": "Scatter Plot", - "description": "This demo for Essential JS2 Chart control shows how to render the scatter series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the scatter series.", "category": "Scatter and Bubble", "api": { "Chart": [ @@ -393,7 +424,7 @@ { "url": "bubble", "name": "Bubble", - "description": "This demo for Essential JS2 Chart control shows how to render the bubble series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bubble series.", "category": "Scatter and Bubble", "api": { "Chart": [ @@ -408,7 +439,7 @@ { "url": "waterfall", "name": "Waterfall", - "description": "This demo for Essential JS2 Chart control shows how to render the waterfall series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the waterfall series.", "category": "Other Types", "api": { "Chart": [ @@ -423,7 +454,7 @@ { "url": "histogram", "name": "Histogram", - "description": "This demo for Essential JS2 Chart control shows how to render the histogram series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the histogram series.", "category": "Other Types", "api": { "Chart": [ @@ -438,7 +469,7 @@ { "url": "box-and-whisker", "name": "Box and Whisker", - "description": "This demo for Essential JS2 Chart control shows how to render the box and whisker series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the box and whisker series.", "category": "Other Types", "api": { "Chart": [ @@ -454,7 +485,7 @@ { "url": "error-bar", "name": "Error Bar", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the error bars in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the error bars in charts.", "category": "Other Types", "api": { "Chart": [ @@ -470,13 +501,13 @@ { "url": "trend-lines", "name": "Trendlines", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the trend lines in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the trend lines in charts.", "category": "Other Types" }, { "url": "hilo", "name": "Hilo", - "description": "This demo for Essential JS2 Chart control shows how to render the hilo series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the hilo series.", "category": "Stock Charts", "api": { "Chart": [ @@ -491,7 +522,7 @@ { "url": "hilo-open-close", "name": "Hilo Open Close", - "description": "This demo for Essential JS2 Chart control shows how to render the hilo open close series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the hilo open close series.", "category": "Stock Charts", "api": { "Chart": [ @@ -506,7 +537,7 @@ { "url": "candle-stick", "name": "Candle Stick", - "description": "This demo for Essential JS2 Chart control shows how to render the candle series.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the candle series.", "category": "Stock Charts", "api": { "Chart": [ @@ -521,7 +552,7 @@ { "url": "accumulation-distribution-indicator", "name": "Accumulation Distribution", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the accumulation distribution indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the accumulation distribution indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -536,7 +567,7 @@ { "url": "average-true-range-indicator", "name": "ATR", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the average true range indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the average true range indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -551,7 +582,7 @@ { "url": "bollinger", "name": "Bollinger", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the bollinger band type indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bollinger band type indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -566,7 +597,7 @@ { "url": "exponential-moving-average-indicator", "name": "EMA", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the exponential moving average indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the exponential moving average indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -581,7 +612,7 @@ { "url": "moving-average-convergence-divergence-indicator", "name": "MACD", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the moving average convergence divergence indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the moving average convergence divergence indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -596,7 +627,7 @@ { "url": "momentum", "name": "Momentum", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the momentum indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the momentum indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -611,7 +642,7 @@ { "url": "relative-strength-index-indicator", "name": "RSI", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the relative strength index indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the relative strength index indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -626,7 +657,7 @@ { "url": "simple-moving-average-indicator", "name": "SMA", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the simple moving average indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the simple moving average indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -641,7 +672,7 @@ { "url": "stochastic", "name": "Stochastic", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the stochastic indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stochastic indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -656,7 +687,7 @@ { "url": "triangular-moving-average-indicator", "name": "TMA", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the triangular moving average indicator.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the triangular moving average indicator.", "category": "Technical Indicators", "api": { "Chart": [ @@ -671,7 +702,7 @@ { "url": "multi-series-chart", "name": "Multi-Series Chart", - "description": "This demo for Essential JS2 Chart control shows how to combine different types of charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to combine different types of charts.", "category": "Other Types", "api": { "Chart": [ @@ -684,7 +715,7 @@ { "url": "pareto", "name": "Pareto Chart", - "description": "This demo for Essential JS2 Chart control shows how to render pareto charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure pareto charts.", "category": "Other Types", "api": { "Chart": [ @@ -697,7 +728,7 @@ { "url": "chart-performance", "name": "Chart Performance", - "description": "This demo for Essential JS2 Chart control shows the performance when plotting large volumes of data and handling high frequency real-time data.", + "description": "This demo for Essential JavaScript2 Chart control shows the performance when plotting large volumes of data and handling high frequency real-time data.", "category": "Benchmark", "api": { "Chart": [ @@ -710,8 +741,7 @@ { "url": "default-pie", "name": "Pie", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the pie charts.", - "type": "update", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the pie charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -724,8 +754,7 @@ { "url": "pie-radius", "name": "Pie with Various Radius", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the various radius pie chart.", - "type": "new", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the various radius pie chart.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -738,7 +767,7 @@ { "url": "donut", "name": "Donut", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the doughnut charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the doughnut charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -751,7 +780,7 @@ { "url": "pyramid", "name": "Pyramid", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the pyramid charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the pyramid charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -764,7 +793,7 @@ { "url": "funnel", "name": "Funnel", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the funnel charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the funnel charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -777,8 +806,9 @@ { "url": "default-doughnut", "name": "Pie with Legend", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the legends in pie charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the legends in pie charts.", "category": "Accumulation Charts", + "type": "update", "api": { "AccumulationChart": [ "series", @@ -790,7 +820,7 @@ { "url": "semi-pie", "name": "Semi Pie", - "description": "This demo for Essential JS2 Chart control shows how to render semi-pie and doughnut charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render semi-pie and doughnut charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -803,7 +833,7 @@ { "url": "smart-labels", "name": "Smart Labels", - "description": "This demo for Essential JS2 Chart control shows how to arrange the labels smartly without overlapping with each other.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to arrange the labels smartly without overlapping with each other.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -816,7 +846,7 @@ { "url": "drill-down-pie", "name": "Drilldown", - "description": "This demo for Essential JS2 Chart control shows how to achieve the drill-down concept using pie charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to achieve the drill-down concept using pie charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -829,7 +859,7 @@ { "url": "grouping", "name": "Grouping", - "description": "This demo for Essential JS2 Chart control shows how to group points in pie charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to group points in pie charts.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -842,7 +872,7 @@ { "url": "pie-empty-point", "name": "Empty Points", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the empty points.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the empty points.", "category": "Accumulation Charts", "api": { "AccumulationChart": [ @@ -855,13 +885,13 @@ { "url": "polar-line", "name": "Line", - "description": "This demo for Essential JS2 Chart control shows how to render line in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render line in polar and radar charts.", "category": "Polar Radar" }, { "url": "polar-spline", "name": "Spline", - "description": "This demo for Essential JS2 Chart control shows how to render spline in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render spline in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -875,7 +905,7 @@ { "url": "polar-area", "name": "Area", - "description": "This demo for Essential JS2 Chart control shows how to render area in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render area in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -889,7 +919,7 @@ { "url": "polar-stacking-area", "name": "Stacked Area", - "description": "This demo for Essential JS2 Chart control shows how to render stacking area in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render stacking area in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -903,7 +933,7 @@ { "url": "polar-scatter", "name": "Scatter", - "description": "This demo for Essential JS2 Chart control shows how to render scatter in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render scatter in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -917,7 +947,7 @@ { "url": "polar-column", "name": "Column", - "description": "This demo for Essential JS2 Chart control shows how to render column in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render column in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -931,7 +961,7 @@ { "url": "polar-stacking-column", "name": "Wind Rose", - "description": "This demo for Essential JS2 Chart control shows how to render wind rose using stacking column in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render wind rose using stacking column in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -945,7 +975,7 @@ { "url": "polar-range-column", "name": "Range Column", - "description": "This demo for Essential JS2 Chart control shows how to render range column in polar and radar charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render range column in polar and radar charts.", "category": "Polar Radar", "api": { "Chart": [ @@ -959,7 +989,7 @@ { "url": "local-data", "name": "Local Data", - "description": "This demo for Essential JS2 Chart control shows how to bind JSON data to chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to bind JSON data to chart.", "category": "Data Binding", "api": { "Chart": [ @@ -974,7 +1004,7 @@ { "url": "remote-data", "name": "Remote Data", - "description": "This demo for Essential JS2 Chart control shows how to consume data from remote data service.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to consume data from remote data service.", "category": "Data Binding", "api": { "Chart": [ @@ -988,9 +1018,8 @@ { "url": "lazy-loading", "name": "Lazy Loading", - "description": "This demo for Essential JS2 Chart control demonstrates the Lazy Loading behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the Lazy Loading behavior in chart.", "category": "Data Binding", - "type": "new", "api": { "Chart": [ "primaryXAxis", @@ -1003,7 +1032,7 @@ { "url": "numeric", "name": "Numeric Axis", - "description": "This demo for Essential JS2 Chart control shows how to plot numeric data with the help of numeric axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to plot numeric data with the help of numeric axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1017,13 +1046,13 @@ { "url": "date-time", "name": "Datetime Axis", - "description": "This demo for Essential JS2 Chart control shows how to render the date-time axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the date-time axis in charts.", "category": "Chart Axes" }, { "url": "date-time-category", "name": "DateTime Category Axis", - "description": "This demo for Essential JS2 Chart control shows how to render the date-time category axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the date-time category axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1037,8 +1066,9 @@ { "url": "category", "name": "Category Axis", - "description": "This demo for Essential JS2 Chart control shows how to render the category axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the category axis in charts.", "category": "Chart Axes", + "type":"update", "api": { "Chart": [ "primaryXAxis", @@ -1051,7 +1081,7 @@ { "url": "indexed-axis", "name": "Indexed Category Axis", - "description": "This demo for Essential JS2 Chart control shows how to render the indexed category axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the indexed category axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1065,7 +1095,7 @@ { "url": "logarithmic-scale", "name": "Logarithmic Scale", - "description": "This demo for Essential JS2 Chart control shows how to render the logarithmic axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the logarithmic axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1079,7 +1109,7 @@ { "url": "multiple-axis", "name": "Multiple Axis", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the mulitple axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the mulitple axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1093,7 +1123,7 @@ { "url": "inversed", "name": "Inversed Axis", - "description": "This demo for Essential JS2 Chart control shows how to invert the axis in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to invert the axis in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1107,7 +1137,7 @@ { "url": "strip-line", "name": "Strip Line", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the strip lines in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the strip lines in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1122,7 +1152,7 @@ { "url": "strip-line-recurrence", "name": "Stripline Recurrence", - "description": "This demo for Essential JS2 Chart control shows how to render the strip line recurrence in charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the strip line recurrence in charts.", "category": "Chart Axes", "api": { "Chart": [ @@ -1137,7 +1167,7 @@ { "url": "smart-axis-labels", "name": "Smart Labels", - "description": "This demo for Essential JS2 Chart control shows how to arrange the labels smartly without overlapping with each other.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to arrange the labels smartly without overlapping with each other.", "category": "Chart Axes", "api": { "Chart": [ @@ -1151,7 +1181,7 @@ { "url": "multi-level-label", "name": "Multi Level Labels", - "description": "This demo for Essential JS2 Chart control shows how to group the axis labels.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to group the axis labels .", "category": "Chart Axes", "api": { "Chart": [ @@ -1165,7 +1195,7 @@ { "url": "axes-crossing", "name": "Axes Crossing", - "description": "This demo for Essential JS2 Chart control demonstrates the axis crossing behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the behaviour of the axis crossing in chart.", "category": "Chart Axes", "api": { "Chart": [ @@ -1177,7 +1207,7 @@ { "url": "sorting", "name": "Sorting", - "description": "This demo for Essential JS2 Chart control shows how to sort the series data in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to sort the series data in chart.", "category": "Chart Customization", "api": { "Chart": [ @@ -1191,7 +1221,7 @@ { "url": "marker-chart", "name": "Marker Chart", - "description": "This demo for Essential JS2 Chart control shows how to render the marker symbols for data points.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the marker symbols for data points.", "category": "Chart Customization", "api": { "Chart": [ @@ -1205,7 +1235,7 @@ { "url": "pie-annotation", "name": "Annotation", - "description": "This demo for Essential JS2 Chart control shows how to add more information to the chart using annotation.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to add more information to the chart using annotation.", "category": "Chart Customization", "api": { "Chart": [ @@ -1220,7 +1250,7 @@ { "url": "data-label-template", "name": "DataLabel Template", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the data label template.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the data label template.", "category": "Chart Customization", "api": { "Chart": [ @@ -1234,7 +1264,7 @@ { "url": "vertical", "name": "Vertical Charts", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the vertical type charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the vertical type charts.", "category": "Chart Customization", "api": { "Chart": [ @@ -1250,7 +1280,7 @@ { "url": "empty-point", "name": "Empty Points", - "description": "This demo for Essential JS2 Chart control shows how to render and configure the empty points.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the empty points.", "category": "Chart Customization", "api": { "Chart": [ @@ -1266,7 +1296,7 @@ { "url": "print", "name": "Print", - "description": "This demo for Essential JS2 Chart control shows how to print the charts.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to print the entire chart.", "category": "Print and Export", "api": { "Chart": [ @@ -1298,7 +1328,7 @@ { "url": "selection", "name": "Selection", - "description": "This demo for Essential JS2 Chart control demonstrates the selection behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the selection behavior in chart.", "category": "User Interaction", "api": { "Chart": [ @@ -1312,7 +1342,7 @@ { "url": "range-selection", "name": "Range Selection", - "description": "This demo for Essential JS2 Chart control demonstrates the range selection in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the range selection in chart .", "category": "User Interaction", "api": { "Chart": [ @@ -1326,7 +1356,7 @@ { "url": "cross-hair", "name": "Crosshair", - "description": "This demo for Essential JS2 Chart control demonstrates the crosshair behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the crosshair behavior in chart.", "category": "User Interaction", "api": { "Chart": [ @@ -1340,7 +1370,7 @@ { "url": "trackball", "name": "Trackball", - "description": "This demo for Essential JS2 Chart control demonstrates the trackball behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the trackball behavior in chart.", "category": "User Interaction", "api": { "Chart": [ @@ -1354,7 +1384,7 @@ { "url": "zooming", "name": "Zooming and Panning", - "description": "This demo for Essential JS2 Chart control demonstrates the zooming and panning behavior in chart.", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the zooming and panning behavior in chart.", "category": "User Interaction", "api": { "Chart": [ diff --git a/src/chart/scatter-plot-stack.json b/src/chart/scatter-plot-stack.json new file mode 100644 index 00000000..a647c6b7 --- /dev/null +++ b/src/chart/scatter-plot-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Scatter Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n minimum: 100,\n maximum: 220,\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift',\n title: 'Height in Inches'\n\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary X Axis\n primaryYAxis:\n {\n majorTickLines: {\n width: 0\n },\n lineStyle: {\n width: 0\n },\n minimum: 50,\n maximum: 80,\n title: 'Weight in Pounds',\n rangePadding: 'None'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Scatter',\n dataSource: window.mendData,\n xName: 'x', width: 2, marker: {\n visible: false,\n width: 12,\n height: 12,\n shape: 'Circle'\n },\n yName: 'y', name: 'Male', opacity: 0.6\n },\n {\n type: 'Scatter',\n dataSource: window.womenData,\n xName: 'x', width: 2, marker: {\n visible: false,\n width: 12,\n height: 12,\n shape: 'Diamond'\n },\n yName: 'y', name: 'Female', opacity: 0.6\n },\n\n ],\n //Initializing Chart Title\n title: 'Height vs Weight',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: 'Weight: ${point.x} lbs
    Height: ${point.y}\"'\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#scatter-container');\n"} \ No newline at end of file diff --git a/src/chart/scatter-plot.js b/src/chart/scatter-plot.js index c7936d7e..e0281e40 100644 --- a/src/chart/scatter-plot.js +++ b/src/chart/scatter-plot.js @@ -66,12 +66,14 @@ this.default = function () { format: 'Weight: ${point.x} lbs
    Height: ${point.y}"' }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var scatterTheme = location.hash.split('/')[1]; scatterTheme = scatterTheme ? scatterTheme : 'Material'; args.chart.theme = (scatterTheme.charAt(0).toUpperCase() + scatterTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#scatter-container'); }; \ No newline at end of file diff --git a/src/chart/selection-stack.json b/src/chart/selection-stack.json new file mode 100644 index 00000000..26f11194 --- /dev/null +++ b/src/chart/selection-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Selection Mode:
    \n     		\n \n
    \n
    Enable Multi Selection:
    \n     		\n \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Selection\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Countries',\n valueType: 'Category',\n interval: 1,\n labelIntersectAction: 'Rotate90'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Distribution',\n labelFormat: '{value}%',\n interval: 20\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'CHN', y: 17 }, { x: 'USA', y: 19 },\n { x: 'IDN', y: 29 }, { x: 'JAP', y: 13 },\n { x: 'BRZ', y: 24 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Age 0-14',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'CHN', y: 54 }, { x: 'USA', y: 67 },\n { x: 'IDN', y: 65 }, { x: 'JAP', y: 61 },\n { x: 'BRZ', y: 68 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Age 15-64',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'CHN', y: 9 }, { x: 'USA', y: 14 },\n { x: 'IDN', y: 6 }, { x: 'JAP', y: 26 },\n { x: 'BRZ', y: 8 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Age 65 & Above',\n }\n ],\n //Initializing Chart Title and Legend\n title: 'Age Distribution by Country', legendSettings: { visible: true, toggleVisibility: false },\n //Initializing Selection\n selectionMode: 'Point',\n\n });\n chart.appendTo('#container1');\n var previousType = 'Point';\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.selectionMode = mode.value;\n chart.dataBind();\n }\n });\n mode.appendTo('#selmode');\n document.getElementById('select').onchange = function () {\n var element = (document.getElementById('select'));\n chart.isMultiSelect = element.checked;\n chart.dataBind();\n };\n"} \ No newline at end of file diff --git a/src/chart/selection.js b/src/chart/selection.js index e601bf4a..c42c7cc4 100644 --- a/src/chart/selection.js +++ b/src/chart/selection.js @@ -53,12 +53,14 @@ this.default = function () { title: 'Age Distribution by Country', legendSettings: { visible: true, toggleVisibility: false }, //Initializing Selection selectionMode: 'Point', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container1'); var previousType = 'Point'; diff --git a/src/chart/semi-pie-stack.json b/src/chart/semi-pie-stack.json new file mode 100644 index 00000000..c7392623 --- /dev/null +++ b/src/chart/semi-pie-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Start Angle \n
    \n     		\n
    \n \n
    \n     		\n
    \n

    270

    \n
    \n
    \n
    End Angle\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    90

    \n
    \n
    \n
    Inner Radius\n
    \n     		\n
    \n \n
    \n     		\n
    \n

    0.40

    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for semi Pie chart\n */\n\n var pie = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n dataSource: [\n { x: 'Australia', y: 53, text: 'AUS: 14%' },\n { x: 'China', y: 56, text: 'CHN: 15%' },\n { x: 'India', y: 61, text: 'IND: 16%' },\n { x: 'Japan', y: 13, text: 'JPN: 3%' },\n { x: 'South Africa', y: 79, text: 'ZAF: 21%' },\n { x: 'United Kingdom', y: 71, text: 'UK: 19%' },\n { x: 'United States', y: 45, text: 'USA: 12%' }\n ],\n xName: 'x',\n yName: 'y',\n startAngle: 270,\n endAngle: 90,\n radius: '90%', explode: true,\n innerRadius: '40%', \n name: 'Agricultural', \n dataLabel: {\n visible: true, position: 'Outside',\n connectorStyle: { length: '10%' }, name: 'text',\n font: { size: '14px' }\n },\n }\n ],\n enableAnimation: false,\n //Initializing Tooltip\n tooltip: { enable: true, format: '${point.x} : ${point.y}%' },\n legendSettings: {\n visible: false,\n },\n //Initializing Title\n title: 'Agricultural Land Percentage',\n\n });\n pie.appendTo('#semi-container');\n document.getElementById('inner-radius').onpointermove = document.getElementById('inner-radius').ontouchmove =\n document.getElementById('inner-radius').onchange = function (e) {\n var innerradius = +document.getElementById('inner-radius').value;\n pie.series[0].innerRadius = innerradius + '%';\n document.getElementById('innerradius').innerHTML = (innerradius / 100).toFixed(2);\n pie.series[0].animation.enable = false;\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n };\n document.getElementById('range-min').onpointermove = document.getElementById('range-min').ontouchmove =\n document.getElementById('range-min').onchange = function (e) {\n var rangeMin = (document.getElementById('range-min'));\n pie.series[0].startAngle = parseFloat(rangeMin.value);\n document.getElementById('startangle').innerHTML = rangeMin.value;\n pie.series[0].animation.enable = false;\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n };\n document.getElementById('range-max').onpointermove = document.getElementById('range-max').ontouchmove =\n document.getElementById('range-max').onchange = function (e) {\n var rangeMax = (document.getElementById('range-max'));\n pie.series[0].endAngle = parseFloat(rangeMax.value);\n document.getElementById('endangle').innerHTML = rangeMax.value;\n pie.series[0].animation.enable = false;\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n };\n"} \ No newline at end of file diff --git a/src/chart/semi-pie.js b/src/chart/semi-pie.js index 0aeafdee..98894398 100644 --- a/src/chart/semi-pie.js +++ b/src/chart/semi-pie.js @@ -37,12 +37,14 @@ this.default = function () { }, //Initializing Title title: 'Agricultural Land Percentage', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); pie.appendTo('#semi-container'); document.getElementById('inner-radius').onpointermove = document.getElementById('inner-radius').ontouchmove = diff --git a/src/chart/simple-moving-average-indicator-stack.json b/src/chart/simple-moving-average-indicator-stack.json new file mode 100644 index 00000000..8bd993b9 --- /dev/null +++ b/src/chart/simple-moving-average-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for SMA Indicator\n */\n this.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorGridLines: { width: 1 },\n lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: false }\n }],\n indicators: [{\n type: 'Sma', field: 'Close', seriesName: 'Apple Inc', fill: '#6063ff',\n period: 14, animation: { enable: true }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n title: 'AAPL - 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#sma-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/simple-moving-average-indicator.js b/src/chart/simple-moving-average-indicator.js index c5f5f0d1..fbf907ea 100644 --- a/src/chart/simple-moving-average-indicator.js +++ b/src/chart/simple-moving-average-indicator.js @@ -37,17 +37,20 @@ crosshair: { enable: true, lineType: 'Vertical' }, zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, title: 'AAPL - 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#sma-container'); diff --git a/src/chart/smart-axis-labels-stack.json b/src/chart/smart-axis-labels-stack.json new file mode 100644 index 00000000..ae8b2cfa --- /dev/null +++ b/src/chart/smart-axis-labels-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Intersect Action:
    \n     		\n
    \n \n
    \n
    \n
    Edge Label Placement:
    \n     		\n
    \n \n
    \n
    \n
    Label Position:
    \n     		\n
    \n \n
    \n
    \n
    Enable Trim:
    \n     		\n
    \n
    \n
    \n
    \n
    Maximum Label Width:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else if (selectedTheme === 'highcontrast') {\n args.fill = window.highcontrastColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Samples for Smart Axis Labels\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 1,\n majorGridLines: { width: 0 },\n labelIntersectAction: 'Hide'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelStyle: { size: '0px' },\n majorTickLines: { width: 0 },\n majorGridLines: { width: 0 },\n lineStyle: { width: 0 },\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [{ x: 'South Korea', y: 39 }, { x: 'India', y: 61 },\n { x: 'Pakistan', y: 20 }, { x: 'Germany', y: 65 },\n { x: 'Australia', y: 16 }, { x: 'Italy', y: 29 },\n { x: 'France', y: 45 }, { x: 'United Arab Emirates', y: 10 },\n { x: 'Russia', y: 41 }, { x: 'Mexico', y: 31 },\n { x: 'Brazil', y: 76 }, { x: 'China', y: 51 }],\n xName: 'x', width: 2, name: 'Users',\n yName: 'y', marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }\n },\n ],\n //Initializing Chart Title\n title: 'Internet Users in Millions',\n //Initializing Tooltip\n tooltip : { enable: true },\n pointRender: labelRender,\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#smart-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.primaryXAxis.labelIntersectAction = mode.value;\n chart.refresh();\n }\n });\n mode.appendTo('#selmode');\n var edgeMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.primaryXAxis.edgeLabelPlacement = edgeMode.value;\n chart.dataBind();\n }\n });\n edgeMode.appendTo('#edgemode');\n\n var labelMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.primaryXAxis.labelPosition = labelMode.value;\n chart.dataBind();\n }\n });\n labelMode.appendTo('#labelmode');\n document.getElementById('Trim').onchange = function () {\n var trim = document.getElementById('Trim');\n if (trim.checked) {\n chart.primaryXAxis.enableTrim = (trim.value === 'true');\n }\n else {\n chart.primaryXAxis.enableTrim = (trim.value === 'false');\n }\n chart.refresh();\n };\n var labelWidth = new ej.inputs.NumericTextBox({\n value: 34, min: 1, max: 120, width: 120, step: 1,\n change: function () {\n chart.primaryXAxis.maximumLabelWidth = labelWidth.value;\n chart.refresh();\n }\n });\n labelWidth.appendTo('#LabelWidth');\n"} \ No newline at end of file diff --git a/src/chart/smart-axis-labels.js b/src/chart/smart-axis-labels.js index 893708dc..1bbc097d 100644 --- a/src/chart/smart-axis-labels.js +++ b/src/chart/smart-axis-labels.js @@ -57,12 +57,14 @@ this.default = function () { tooltip : { enable: true }, pointRender: labelRender, legendSettings: { visible: false }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#smart-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/smart-labels-stack.json b/src/chart/smart-labels-stack.json new file mode 100644 index 00000000..ce7b7270 --- /dev/null +++ b/src/chart/smart-labels-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample label for Smart labels in Pie chart\n */\n\n var pie = new ej.charts.AccumulationChart({\n //Initializing Series\n series: [\n {\n dataSource: [\n { 'x':  'USA',  y:  46,  text:  'United States of America: 46'  },\n { 'x': 'China', y: 26, text: 'China: 26' },\n { 'x': 'Russia', y: 19, text: 'Russia: 19' },\n { 'x': 'Germany', y: 17, text: 'Germany: 17' },\n { 'x': 'Japan', y: 12, text: 'Japan: 12' },\n { 'x': 'France', y: 10, text: 'France: 10' },\n { 'x': 'South Korea', y: 9, text: 'South Korea: 9' },\n { 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },\n { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n { 'x': 'Australia', y: 8, text: 'Australia: 8' },\n { 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },\n { 'x': 'NewZealand', y: 4, text: 'New Zealand: 4' },\n { 'x': 'Uzbekistan', y: 4, text: 'Uzbekistan: 4' },\n { 'x': 'Kazakhstan', y: 3, text: 'Kazakhstan: 3' },\n { 'x': 'Colombia', y: 3, text: 'Colombia: 3' },\n { 'x': 'Switzerland', y: 3, text: 'Switzerland: 3' },\n { 'x': 'Argentina', y: 3, text: 'Argentina: 3' },\n { 'x': 'South Africa', y: 2, text: 'South Africa: 2' },\n { 'x': 'North Korea', y: 2, text: 'North Korea: 2' }\n ],\n xName: 'x',\n yName: 'y',\n startAngle: 0,\n endAngle: 360,\n innerRadius: '0%', name: 'RIO',\n dataLabel: {\n visible: true, position: 'Outside',\n connectorStyle: { length: '10%' }, name: 'text',\n },\n }\n ],\n legendSettings: {\n visible: false\n },\n //Initializing Tooltip\n tooltip: { enable: true, format: '${point.x} : ${point.y}%' },\n //Initializing Title\n title: 'RIO Olympics Gold',\n\n });\n pie.appendTo('#container2');\n"} \ No newline at end of file diff --git a/src/chart/smart-labels.js b/src/chart/smart-labels.js index 272e4ba0..85b48f5f 100644 --- a/src/chart/smart-labels.js +++ b/src/chart/smart-labels.js @@ -45,12 +45,14 @@ this.default = function () { tooltip: { enable: true, format: '${point.x} : ${point.y}%' }, //Initializing Title title: 'RIO Olympics Gold', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); pie.appendTo('#container2'); }; \ No newline at end of file diff --git a/src/chart/sorting-stack.json b/src/chart/sorting-stack.json new file mode 100644 index 00000000..2b15603e --- /dev/null +++ b/src/chart/sorting-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Descending:
    \n     		\n
    \n \n
    \n
    \n
    Sort By:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Sorting\n */\n\n var dataValues = [\n { x: 'Asia', car: 120, trucks: 90, bike: 180, cycle: 90 },\n { x: 'Canada', car: 100, trucks: 80, bike: 90, cycle: 80 },\n { x: 'Europe', car: 80, trucks: 90, bike: 60, cycle: 50 },\n { x: 'Africa', car: 40, trucks: 20, bike: 30, cycle: 30 },\n { x: 'Mexico', car: 40, trucks: 50, bike: 80, cycle: 50 },\n { x: 'US', car: 140, trucks: 90, bike: 75, cycle: 70 }\n ];\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n interval: 1, lineStyle: { width: 0 },\n labelIntersectAction: 'Rotate45', valueType: 'Category'\n },\n primaryYAxis: {\n title: 'Sales', lineStyle: { width: 0 },\n majorTickLines: { width: 0 }, majorGridLines: { width: 1 },\n minorGridLines: { width: 1 }, minorTickLines: { width: 0 },\n labelFormat: '{value}K',\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n series: [\n {\n type: 'StackingColumn', dataSource: dataValues,\n xName: 'x', width: 2, yName: 'car', name: 'Car'\n },\n {\n type: 'StackingColumn', dataSource: dataValues,\n xName: 'x', width: 2, yName: 'trucks', name: 'Trucks'\n },\n {\n type: 'StackingColumn', dataSource: dataValues,\n xName: 'x', width: 2, yName: 'bike', name: 'Bike'\n },\n {\n type: 'StackingColumn', dataSource: dataValues,\n xName: 'x', width: 2, yName: 'cycle', name: 'Cycle'\n }\n ],\n title: 'Vehicle Sales by Region',\n tooltip: {\n enable: true\n },\n\n });\n chart.appendTo('#container');\n var sortMode = new ej.dropdowns.DropDownList({\n index: 0, placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n sortDataSource(sortMode.value + '');\n }\n });\n sortMode.appendTo('#sortMode');\n document.getElementById('decending').onchange = function () {\n sortDataSource(sortMode.value + '');\n };\n function sortDataSource(value) {\n var element = document.getElementById('decending');\n var isDecending = element.checked;\n element.disabled = false;\n var sortData;\n if (value === 'X') {\n sortData = ej.charts.sort(dataValues, ['x'], isDecending);\n } else if (value === 'Y') {\n sortData = ej.charts.sort(dataValues, ['car', 'trucks', 'bike', 'cycle'], isDecending);\n } else {\n element.disabled = true;\n sortData = dataValues;\n }\n chart.series[0].animation.enable = false;\n chart.series[1].animation.enable = false;\n chart.series[2].animation.enable = false;\n chart.series[3].animation.enable = false;\n chart.series[0].dataSource = sortData;\n chart.series[1].dataSource = sortData;\n chart.series[2].dataSource = sortData;\n chart.series[3].dataSource = sortData;\n chart.refresh();\n }\n"} \ No newline at end of file diff --git a/src/chart/sorting.js b/src/chart/sorting.js index d3709c75..74f7947c 100644 --- a/src/chart/sorting.js +++ b/src/chart/sorting.js @@ -50,12 +50,14 @@ this.default = function () { tooltip: { enable: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); var sortMode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/spline-area-stack.json b/src/chart/spline-area-stack.json new file mode 100644 index 00000000..b5e72496 --- /dev/null +++ b/src/chart/spline-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Area Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'y',\n majorGridLines: { width: 0 },\n intervalType: 'Years',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n maximum: 4, interval: 1,\n labelFormat: '{value}%',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 },\n { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 },\n { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 },\n { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 }\n ],\n name: 'US', xName: 'x', yName: 'y', type: 'SplineArea',\n border: { color: 'transparent' },\n opacity: 0.5\n },\n {\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 },\n { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.7 },\n { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.8 },\n { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.3 }\n ],\n name: 'France', xName: 'x', yName: 'y', type: 'SplineArea',\n border: { color: 'transparent' },\n opacity: 0.5\n },\n {\n dataSource: [\n { x: new Date(2002, 0, 1), y: 0.8 }, { x: new Date(2003, 0, 1), y: 1.3 },\n { x: new Date(2004, 0, 1), y: 1.1 }, { x: new Date(2005, 0, 1), y: 1.6 },\n { x: new Date(2006, 0, 1), y: 2 }, { x: new Date(2007, 0, 1), y: 1.7 },\n { x: new Date(2008, 0, 1), y: 2.3 }, { x: new Date(2009, 0, 1), y: 2.7 },\n { x: new Date(2010, 0, 1), y: 1.1 }, { x: new Date(2011, 0, 1), y: 2.3 }\n ],\n name: 'Germany', xName: 'x', yName: 'y', type: 'SplineArea',\n border: { color: 'transparent' },\n opacity: 0.5\n }\n ],\n //Initializing Chart title\n title: 'Inflation Rate in Percentage',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/spline-area.js b/src/chart/spline-area.js index daf7f6ed..7322f182 100644 --- a/src/chart/spline-area.js +++ b/src/chart/spline-area.js @@ -66,12 +66,14 @@ this.default = function () { //Initializing Chart title title: 'Inflation Rate in Percentage', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/spline-inversed-stack.json b/src/chart/spline-inversed-stack.json new file mode 100644 index 00000000..f0f1ff68 --- /dev/null +++ b/src/chart/spline-inversed-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Inversed Spline Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 1,\n labelIntersectAction: 'Rotate90',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n isTransposed: true,\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}°C',\n majorGridLines: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Spline',\n dataSource: [\n { x: 'Jan', y: -1 }, { x: 'Mar', y: 12 },\n { x: 'Apr', y: 25 },\n { x: 'Jun', y: 31 },\n { x: 'Aug', y: 26 }, { x: 'Oct', y: 14 },\n { x: 'Dec', y: 8 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'London',\n },\n {\n type: 'Spline',\n dataSource: [\n { x: 'Jan', y: 7 }, { x: 'Mar', y: 2 },\n { x: 'Apr', y: 13 },\n { x: 'Jun', y: 21 },\n { x: 'Aug', y: 26 }, { x: 'Oct', y: 10 },\n { x: 'Dec', y: 0 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'France',\n }\n ],\n //Initializing Chart Title\n title: 'Climate Graph - 2012',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/spline-inversed.js b/src/chart/spline-inversed.js index 4d9d3eb6..27d7c81c 100644 --- a/src/chart/spline-inversed.js +++ b/src/chart/spline-inversed.js @@ -65,12 +65,14 @@ this.default = function () { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/spline-stack.json b/src/chart/spline-stack.json new file mode 100644 index 00000000..4a5c82c3 --- /dev/null +++ b/src/chart/spline-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Spline Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n interval: 1,\n majorGridLines: { width: 0 },\n labelIntersectAction: 'Rotate90'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}°C',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n //Initializing Chart Annotations\n annotations: [{\n content: '
    ',\n x: 'Sun', y: 2, coordinateUnits: 'Point', verticalAlignment: 'Top'\n }, {\n content: '
    ',\n x: 'Tue', y: 33, coordinateUnits: 'Point', verticalAlignment: 'Top'\n }],\n //Initializing Chart Series\n series: [\n {\n type: 'Spline',\n dataSource: [\n { x: 'Sun', y: 15 }, { x: 'Mon', y: 22 },\n { x: 'Tue', y: 32 },\n { x: 'Wed', y: 31 },\n { x: 'Thu', y: 29 }, { x: 'Fri', y: 24 },\n { x: 'Sat', y: 18 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Max Temp',\n },\n {\n type: 'Spline',\n dataSource: [\n { x: 'Sun', y: 10 }, { x: 'Mon', y: 18 },\n { x: 'Tue', y: 28 },\n { x: 'Wed', y: 28 },\n { x: 'Thu', y: 26 }, { x: 'Fri', y: 20 },\n { x: 'Sat', y: 15 }\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Avg Temp',\n },\n {\n type: 'Spline',\n dataSource: [\n { x: 'Sun', y: 2 }, { x: 'Mon', y: 12 },\n { x: 'Tue', y: 22 },\n { x: 'Wed', y: 23 },\n { x: 'Thu', y: 19 }, { x: 'Fri', y: 13 },\n { x: 'Sat', y: 8 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Min Temp',\n }\n ],\n //Initializing Chart Title\n title: 'NC Weather Report - 2016',\n tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#spline-container');\n"} \ No newline at end of file diff --git a/src/chart/spline.js b/src/chart/spline.js index 083af190..a0f19173 100644 --- a/src/chart/spline.js +++ b/src/chart/spline.js @@ -85,12 +85,14 @@ this.default = function () { title: 'NC Weather Report - 2016', tooltip: { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var splineTheme = location.hash.split('/')[1]; splineTheme = splineTheme ? splineTheme : 'Material'; args.chart.theme = (splineTheme.charAt(0).toUpperCase() + splineTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#spline-container'); }; \ No newline at end of file diff --git a/src/chart/stacked-area-100-stack.json b/src/chart/stacked-area-100-stack.json new file mode 100644 index 00000000..9b49a7b8 --- /dev/null +++ b/src/chart/stacked-area-100-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Source:\n www.gov.uk\n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var chartData = [\n { x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },\n { x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },\n { x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },\n { x: new Date(2003, 0, 1), y: 1.00, y1: 0.09, y2: 0.61, y3: 0.20 },\n { x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },\n { x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },\n { x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },\n { x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.51 },\n { x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },\n { x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },\n { x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },\n { x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },\n { x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },\n { x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },\n { x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }\n];\n/**\n * Sample for 100 percent Stacked Area Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n intervalType: 'Years',\n labelFormat: 'y',\n edgeLabelPlacement: 'Shift'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Spends',\n majorGridLines: { width: 0 },\n rangePadding: 'None',\n interval: 20\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: chartData, xName: 'x', yName: 'y',\n type: 'StackingArea100',\n name: 'Organic', marker: { visible : false }\n }, {\n dataSource: chartData, xName: 'x', yName: 'y1',\n type: 'StackingArea100', name: 'Fair-trade', marker: { visible : false }\n }, {\n dataSource: chartData, xName: 'x', yName: 'y2',\n type: 'StackingArea100', name: 'Veg Alternatives', marker: { visible : false }\n }, {\n dataSource: chartData, xName: 'x', yName: 'y3',\n type: 'StackingArea100', name: 'Others', marker: { visible : false }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n title: 'Trend in Sales of Ethical Produce'\n });\n chart.appendTo('#sArea-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-area-100.js b/src/chart/stacked-area-100.js index 3eb9051a..adb1f740 100644 --- a/src/chart/stacked-area-100.js +++ b/src/chart/stacked-area-100.js @@ -58,12 +58,14 @@ this.default = function () { } ], width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end title: 'Trend in Sales of Ethical Produce' }); chart.appendTo('#sArea-container'); diff --git a/src/chart/stacked-area-stack.json b/src/chart/stacked-area-stack.json new file mode 100644 index 00000000..f5ff8f2c --- /dev/null +++ b/src/chart/stacked-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Source:\n www.gov.uk\n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for StackingArea Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n intervalType: 'Years',\n majorGridLines: { width: 0 },\n labelFormat: 'y',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Spends',\n minimum: 0,\n maximum: 7,\n interval: 1,\n lineStyle: { width: 0},\n majorTickLines: { width: 0},\n labelFormat: '{value}B'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingArea',\n dataSource: [\n { x: new Date(2000, 0, 1), y: 0.61 },\n { x: new Date(2001, 0, 1), y: 0.81 }, { x: new Date(2002, 0, 1), y: 0.91 },\n { x: new Date(2003, 0, 1), y: 1 }, { x: new Date(2004, 0, 1), y: 1.19 },\n { x: new Date(2005, 0, 1), y: 1.47 }, { x: new Date(2006, 0, 1), y: 1.74 },\n { x: new Date(2007, 0, 1), y: 1.98 }, { x: new Date(2008, 0, 1), y: 1.99 },\n { x: new Date(2009, 0, 1), y: 1.70 }, { x: new Date(2010, 0, 1), y: 1.48 },\n { x: new Date(2011, 0, 1), y: 1.38 }, { x: new Date(2012, 0, 1), y: 1.66 },\n { x: new Date(2013, 0, 1), y: 1.66 }, { x: new Date(2014, 0, 1), y: 1.67 }\n ],\n xName: 'x', marker: { visible : false },\n yName: 'y', name: 'Organic',\n }, {\n type: 'StackingArea',\n dataSource: [\n { x: new Date(2000, 0, 1), y: 0.03 },\n { x: new Date(2001, 0, 1), y: 0.05 }, { x: new Date(2002, 0, 1), y: 0.06 },\n { x: new Date(2003, 0, 1), y: 0.09 }, { x: new Date(2004, 0, 1), y: 0.14 },\n { x: new Date(2005, 0, 1), y: 0.20 }, { x: new Date(2006, 0, 1), y: 0.29 },\n { x: new Date(2007, 0, 1), y: 0.46 }, { x: new Date(2008, 0, 1), y: 0.64 },\n { x: new Date(2009, 0, 1), y: 0.75 }, { x: new Date(2010, 0, 1), y: 1.06 },\n { x: new Date(2011, 0, 1), y: 1.25 }, { x: new Date(2012, 0, 1), y: 1.55 },\n { x: new Date(2013, 0, 1), y: 1.55 }, { x: new Date(2014, 0, 1), y: 1.65 }\n ],\n xName: 'x', marker: { visible : false },\n yName: 'y', name: 'Fair-trade',\n }, {\n type: 'StackingArea',\n dataSource: [\n { x: new Date(2000, 0, 1), y: 0.48 },\n { x: new Date(2001, 0, 1), y: 0.53 }, { x: new Date(2002, 0, 1), y: 0.57 },\n { x: new Date(2003, 0, 1), y: 0.61 }, { x: new Date(2004, 0, 1), y: 0.63 },\n { x: new Date(2005, 0, 1), y: 0.64 }, { x: new Date(2006, 0, 1), y: 0.66 },\n { x: new Date(2007, 0, 1), y: 0.76 }, { x: new Date(2008, 0, 1), y: 0.77 },\n { x: new Date(2009, 0, 1), y: 0.55 }, { x: new Date(2010, 0, 1), y: 0.54 },\n { x: new Date(2011, 0, 1), y: 0.57 }, { x: new Date(2012, 0, 1), y: 0.61 },\n { x: new Date(2013, 0, 1), y: 0.67 }, { x: new Date(2014, 0, 1), y: 0.67 }\n ],\n xName: 'x', marker: { visible : false },\n yName: 'y', name: 'Veg Alternatives',\n }, {\n type: 'StackingArea',\n dataSource: [\n { x: new Date(2000, 0, 1), y: 0.23 },\n { x: new Date(2001, 0, 1), y: 0.17 }, { x: new Date(2002, 0, 1), y: 0.17 },\n { x: new Date(2003, 0, 1), y: 0.20 }, { x: new Date(2004, 0, 1), y: 0.23 },\n { x: new Date(2005, 0, 1), y: 0.36 }, { x: new Date(2006, 0, 1), y: 0.43 },\n { x: new Date(2007, 0, 1), y: 0.52 }, { x: new Date(2008, 0, 1), y: 0.72 },\n { x: new Date(2009, 0, 1), y: 1.29 }, { x: new Date(2010, 0, 1), y: 1.38 },\n { x: new Date(2011, 0, 1), y: 1.82 }, { x: new Date(2012, 0, 1), y: 2.16 },\n { x: new Date(2013, 0, 1), y: 2.51 }, { x: new Date(2014, 0, 1), y: 2.61 }\n ],\n xName: 'x', marker: { visible : false },\n yName: 'y', name: 'Others',\n }\n ],\n //Initializing Chart Title\n title: 'Trend in Sales of Ethical Produce',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#stacked-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-area.js b/src/chart/stacked-area.js index 78929905..b2efecfe 100644 --- a/src/chart/stacked-area.js +++ b/src/chart/stacked-area.js @@ -89,12 +89,14 @@ this.default = function () { //Initializing Chart Title title: 'Trend in Sales of Ethical Produce', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var stackedTheme = location.hash.split('/')[1]; stackedTheme = stackedTheme ? stackedTheme : 'Material'; args.chart.theme = (stackedTheme.charAt(0).toUpperCase() + stackedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#stacked-container'); }; \ No newline at end of file diff --git a/src/chart/stacked-bar-100-stack.json b/src/chart/stacked-bar-100-stack.json new file mode 100644 index 00000000..26a1addf --- /dev/null +++ b/src/chart/stacked-bar-100-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var chartData = [\n { x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },\n { x: 'Mar', y: 12, y1: 11, y2: 2 }, { x: 'Apr', y: 15, y1: 16, y2: 2.5 },\n { x: 'May', y: 20, y1: 21, y2: 3 }, { x: 'Jun', y: 24, y1: 25, y2: 3.5 }\n];\n/**\n * Sample for 100 percent StackingBar Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n edgeLabelPlacement: 'Shift'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingBar100',\n name: 'Apple',\n dataSource: chartData, xName: 'x', yName: 'y'\n }, {\n type: 'StackingBar100', name: 'Orange',\n dataSource: chartData, xName: 'x', yName: 'y1'\n }, {\n type: 'StackingBar100', name: 'Wastage',\n dataSource: chartData, xName: 'x', yName: 'y2'\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n //Initializing Chartt Title\n title: 'Sales Comparison',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y} (${point.percentage}%)'\n }\n });\n chart.appendTo('#bar100-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-bar-100.js b/src/chart/stacked-bar-100.js index 7ee2deb4..d6c29aa8 100644 --- a/src/chart/stacked-bar-100.js +++ b/src/chart/stacked-bar-100.js @@ -37,12 +37,14 @@ this.default = function () { } ], width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end //Initializing Chartt Title title: 'Sales Comparison', //Initializing Tooltip diff --git a/src/chart/stacked-bar-stack.json b/src/chart/stacked-bar-stack.json new file mode 100644 index 00000000..b3064acd --- /dev/null +++ b/src/chart/stacked-bar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for StackingBar Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n labelFormat: '{value}%',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 12 }, { x: 'Apr', y: 15.5 },\n { x: 'May', y: 20 }, { x: 'Jun', y: 24 }],\n name: 'Apple',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 11 }, { x: 'Apr', y: 16 },\n { x: 'May', y: 21 }, { x: 'Jun', y: 25 }],\n name: 'Orange',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1.5 }, { x: 'Mar', y: -2 }, { x: 'Apr', y: -2.5 },\n { x: 'May', y: -3 }, { x: 'Jun', y: -3.5 }],\n name: 'Wastage', width: 2,\n xName: 'x',\n yName: 'y'\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n //Initializing Chart Title\n title: 'Sales Comparison',\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#sBar-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-bar.js b/src/chart/stacked-bar.js index d5b3ae70..2c282c38 100644 --- a/src/chart/stacked-bar.js +++ b/src/chart/stacked-bar.js @@ -54,12 +54,14 @@ this.default = function () { //Initializing Chart Title title: 'Sales Comparison', width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var stackedBarTheme = location.hash.split('/')[1]; stackedBarTheme = stackedBarTheme ? stackedBarTheme : 'Material'; args.chart.theme = (stackedBarTheme.charAt(0).toUpperCase() + stackedBarTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#sBar-container'); }; \ No newline at end of file diff --git a/src/chart/stacked-column-100-stack.json b/src/chart/stacked-column-100-stack.json new file mode 100644 index 00000000..8830d179 --- /dev/null +++ b/src/chart/stacked-column-100-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var chartData = [\n { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },\n { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },\n { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },\n { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 }\n];\n/**\n * Sample for 100 percent StackingColumn Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n labelIntersectAction: 'Rotate45',\n majorGridLines: { width: 0 },\n minorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'GDP (%) per Annum',\n rangePadding: 'None',\n interval: 20,\n majorTickLines: { width: 0 },\n majorGridLines: { width: 1 },\n minorGridLines: { width: 1 },\n minorTickLines: { width: 0 },\n lineStyle: {\n width: 0\n }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: chartData, xName: 'x', yName: 'y',\n type: 'StackingColumn100',\n name: 'UK'\n }, {\n dataSource: chartData, xName: 'x', yName: 'y1',\n type: 'StackingColumn100', name: 'Germany'\n }, {\n dataSource: chartData, xName: 'x', yName: 'y2',\n type: 'StackingColumn100', name: 'France'\n }, {\n dataSource: chartData, xName: 'x', yName: 'y3',\n type: 'StackingColumn100', name: 'Italy'\n }\n ],\n\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Gross Domestic Product Growth',\n //Initializing Tooltip\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y} (${point.percentage}%)'\n }\n });\n chart.appendTo('#column100-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-column-100.js b/src/chart/stacked-column-100.js index f82b06f1..baf9b8dc 100644 --- a/src/chart/stacked-column-100.js +++ b/src/chart/stacked-column-100.js @@ -53,12 +53,14 @@ this.default = function () { type: 'StackingColumn100', name: 'Italy' } ], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Gross Domestic Product Growth', diff --git a/src/chart/stacked-column-stack.json b/src/chart/stacked-column-stack.json new file mode 100644 index 00000000..9392daeb --- /dev/null +++ b/src/chart/stacked-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Stacked Column Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 },\n minorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 },\n interval: 1,\n lineStyle: { width: 0 },\n labelIntersectAction: 'Rotate45',\n valueType: 'Category'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Sales',\n minimum: 0,\n maximum: 500,\n interval: 100,\n lineStyle: { width: 0 },\n minorGridLines: { width: 1 },\n minorTickLines: { width: 0 },\n majorTickLines: { width: 0 },\n majorGridLines: { width: 1 },\n labelFormat: '{value}B',\n },\n chartArea: { border: { width: 0 } },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingColumn',\n dataSource: [\n { x: '2014', y: 111.1 },\n { x: '2015', y: 127.3 },\n { x: '2016', y: 143.4 },\n { x: '2017', y: 159.9 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'UK'\n },\n {\n type: 'StackingColumn',\n dataSource: [\n { x: '2014', y: 76.9 },\n { x: '2015', y: 99.5 },\n { x: '2016', y: 121.7 },\n { x: '2017', y: 142.5 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Germany'\n },\n {\n type: 'StackingColumn',\n dataSource: [\n { x: '2014', y: 66.1 },\n { x: '2015', y: 79.3 },\n { x: '2016', y: 91.3 },\n { x: '2017', y: 102.4 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'France'\n },\n {\n type: 'StackingColumn',\n dataSource: [\n { x: '2014', y: 34.1 },\n { x: '2015', y: 38.2 },\n { x: '2016', y: 44.0 },\n { x: '2017', y: 51.6 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Italy'\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Mobile Game Market by Country',\n\n });\n chart.appendTo('#sColumn-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-column.js b/src/chart/stacked-column.js index 6b4c5d76..ac5365e6 100644 --- a/src/chart/stacked-column.js +++ b/src/chart/stacked-column.js @@ -82,12 +82,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Mobile Game Market by Country', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#sColumn-container'); }; \ No newline at end of file diff --git a/src/chart/stacked-line -100-stack.json b/src/chart/stacked-line -100-stack.json new file mode 100644 index 00000000..27677f77 --- /dev/null +++ b/src/chart/stacked-line -100-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for StackingArea Series\n */\n\n var chartData = [\n { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },\n { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },\n { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },\n { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },\n { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },\n { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },\n { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },\n { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },\n { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },\n { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },\n { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },\n { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }\n ];\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n interval: 1, lineStyle: { width: 0 }, valueType: 'Category'\n },\n primaryYAxis:\n {\n title: 'Expense', lineStyle: { width: 0 }, interval: 20, minorTickLines: { width: 0 },\n majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 },\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n type: 'StackingLine100', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'\n },\n {\n type: 'StackingLine100', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'\n },\n {\n type: 'StackingLine100', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'\n\n },\n {\n type: 'StackingLine100', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'\n\n }\n ],\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y} (${point.percentage}%)'\n },\n title: 'Family Expense for Month',\n width: ej.base.Browser.isDevice ? '100%' : '90%',\n load: function (args) {\n var stackedTheme = location.hash.split('/')[1];\n stackedTheme = stackedTheme ? stackedTheme : 'Material';\n args.chart.theme = (stackedTheme.charAt(0).toUpperCase() + \n stackedTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n });\n chart.appendTo('#stacked-container-100');\n"} \ No newline at end of file diff --git a/src/chart/stacked-line -100.html b/src/chart/stacked-line -100.html new file mode 100644 index 00000000..f4091831 --- /dev/null +++ b/src/chart/stacked-line -100.html @@ -0,0 +1,33 @@ +
    +
    +
    +
    +

    + This sample visualizes the family expense data with stacked line series in the chart to identify who spent more money in each category. + Data points are enhanced with marker and tooltip. +

    +
    +
    +

    + In this example, you can see how to render and configure the stacked line type charts. 100% Stacked Line type charts are used to represent time-dependent data, showing trends in data at equal intervals with stacked values of multiple series. + You can use dashArray, width, fill properties to customize the line. marker used to represent individual data. +

    +

    + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. +

    +
    +

    Injecting Module

    +

    + Chart component features are segregated into individual feature-wise modules. To use 100% stacking line series, we need to inject + StackingLineSeries module using Chart.Inject(StackingLineSeries) method. +

    +

    + More information on the line series can be found in this + documentation section. +

    +
    + \ No newline at end of file diff --git a/src/chart/stacked-line -100.js b/src/chart/stacked-line -100.js new file mode 100644 index 00000000..4bbf5065 --- /dev/null +++ b/src/chart/stacked-line -100.js @@ -0,0 +1,67 @@ +/** + * Sample for StackingArea Series + */ +this.default = function () { + var chartData = [ + { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 }, + { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 }, + { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 }, + { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 }, + { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 }, + { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 }, + { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 }, + { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 }, + { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 }, + { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 }, + { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 }, + { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 } + ]; + + var chart = new ej.charts.Chart({ + //Initializing Primary X Axis + primaryXAxis: { + majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, + majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, + interval: 1, lineStyle: { width: 0 }, valueType: 'Category' + }, + primaryYAxis: + { + title: 'Expense', lineStyle: { width: 0 }, interval: 20, minorTickLines: { width: 0 }, + majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, + }, + chartArea: { border: { width: 0 } }, + series: [ + { + type: 'StackingLine100', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John' + }, + { + type: 'StackingLine100', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter' + }, + { + type: 'StackingLine100', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve' + + }, + { + type: 'StackingLine100', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle' + + } + ], + tooltip: { + enable: true, + format: '${point.x} : ${point.y} (${point.percentage}%)' + }, + title: 'Family Expense for Month', + width: ej.base.Browser.isDevice ? '100%' : '90%', + load: function (args) { + var stackedTheme = location.hash.split('/')[1]; + stackedTheme = stackedTheme ? stackedTheme : 'Material'; + args.chart.theme = (stackedTheme.charAt(0).toUpperCase() + + stackedTheme.slice(1)).replace(/-dark/i, 'Dark'); + } + }); + chart.appendTo('#stacked-container-100'); +}; \ No newline at end of file diff --git a/src/chart/stacked-line-stack.json b/src/chart/stacked-line-stack.json new file mode 100644 index 00000000..7441c388 --- /dev/null +++ b/src/chart/stacked-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for StackingArea Series\n */\n\n var chartData = [\n { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },\n { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },\n { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },\n { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },\n { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },\n { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },\n { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },\n { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },\n { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },\n { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },\n { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },\n { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }\n ];\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 }, minorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, minorTickLines: { width: 0 },\n interval: 1, lineStyle: { width: 0 }, valueType: 'Category'\n },\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n title: 'Expense', lineStyle: { width: 0 },\n minimum: 0, maximum: 400, interval: 100,\n majorTickLines: { width: 0 },\n majorGridLines: { width: 1 },\n minorGridLines: { width: 1 },\n minorTickLines: { width: 0 },\n labelFormat: '${value}',\n },\n chartArea: { border: { width: 0 } },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingLine', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'\n },\n {\n type: 'StackingLine', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'\n },\n {\n type: 'StackingLine', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'\n },\n {\n type: 'StackingLine', dataSource: chartData, marker: { visible: true },\n dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'\n }\n ],\n //Initializing User Interaction Tooltip\n tooltip: {\n enable: true\n },\n title: 'Family Expense for Month',\n width: ej.base.Browser.isDevice ? '100%' : '90%',\n load: function (args) {\n var stackedTheme = location.hash.split('/')[1];\n stackedTheme = stackedTheme ? stackedTheme : 'Material';\n args.chart.theme = (stackedTheme.charAt(0).toUpperCase() + \n stackedTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n });\n chart.appendTo('#stacked-container');\n"} \ No newline at end of file diff --git a/src/chart/stacked-line.html b/src/chart/stacked-line.html new file mode 100644 index 00000000..837f2450 --- /dev/null +++ b/src/chart/stacked-line.html @@ -0,0 +1,33 @@ +
    +
    +
    +
    +

    + This sample visualizes the family expense data with stacked line series in the chart to identify who spent more money in each category. + Data points are enhanced with marker and tooltip. +

    +
    +
    +

    + In this example, you can see how to render and configure the stacked line type charts. Stacked Line type charts are used to represent time-dependent data, showing trends in data at equal intervals with stacked values of multiple series. + You can use dashArray, width, fill properties to customize the line. marker used to represent individual data. +

    +

    + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. +

    +
    +

    Injecting Module

    +

    + Chart component features are segregated into individual feature-wise modules. To use stacking line series, we need to inject + StackingLineSeries module using Chart.Inject(StackingLineSeries) method. +

    +

    + More information on the line series can be found in this + documentation section. +

    +
    + \ No newline at end of file diff --git a/src/chart/stacked-line.js b/src/chart/stacked-line.js new file mode 100644 index 00000000..ca1eb7bd --- /dev/null +++ b/src/chart/stacked-line.js @@ -0,0 +1,72 @@ +/** + * Sample for StackingArea Series + */ +this.default = function () { + var chartData = [ + { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 }, + { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 }, + { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 }, + { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 }, + { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 }, + { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 }, + { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 }, + { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 }, + { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 }, + { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 }, + { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 }, + { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 } + ]; + + var chart = new ej.charts.Chart({ + //Initializing Primary X Axis + primaryXAxis: { + majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, + majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, + interval: 1, lineStyle: { width: 0 }, valueType: 'Category' + }, + //Initializing Primary Y Axis + primaryYAxis: + { + title: 'Expense', lineStyle: { width: 0 }, + minimum: 0, maximum: 400, interval: 100, + majorTickLines: { width: 0 }, + majorGridLines: { width: 1 }, + minorGridLines: { width: 1 }, + minorTickLines: { width: 0 }, + labelFormat: '${value}', + }, + chartArea: { border: { width: 0 } }, + //Initializing Chart Series + series: [ + { + type: 'StackingLine', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John' + }, + { + type: 'StackingLine', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter' + }, + { + type: 'StackingLine', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve' + }, + { + type: 'StackingLine', dataSource: chartData, marker: { visible: true }, + dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle' + } + ], + //Initializing User Interaction Tooltip + tooltip: { + enable: true + }, + title: 'Family Expense for Month', + width: ej.base.Browser.isDevice ? '100%' : '90%', + load: function (args) { + var stackedTheme = location.hash.split('/')[1]; + stackedTheme = stackedTheme ? stackedTheme : 'Material'; + args.chart.theme = (stackedTheme.charAt(0).toUpperCase() + + stackedTheme.slice(1)).replace(/-dark/i, 'Dark'); + } + }); + chart.appendTo('#stacked-container'); +}; \ No newline at end of file diff --git a/src/chart/step-area-stack.json b/src/chart/step-area-stack.json new file mode 100644 index 00000000..8fdf9e0a --- /dev/null +++ b/src/chart/step-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Step Area Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Double',\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Production (Billion as kWh)',\n valueType: 'Double',\n lineStyle: { width: 0},\n majorTickLines: { width: 0},\n labelFormat: '{value}B'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StepArea',\n dataSource: [{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },\n { x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },\n { x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }],\n name: 'Renewable',\n xName: 'x', width: 2,\n yName: 'y', marker: { visible : false }\n },\n {\n type: 'StepArea',\n dataSource: [{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },\n { x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },\n { x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }],\n name: 'Non-Renewable',\n xName: 'x', width: 2,\n yName: 'y', marker: { visible : false }\n },\n ],\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n //Initializing Chart Title\n title: 'Electricity- Production',\n\n });\n chart.appendTo('#step-container');\n"} \ No newline at end of file diff --git a/src/chart/step-area.js b/src/chart/step-area.js index d6ed8a14..ea0458d5 100644 --- a/src/chart/step-area.js +++ b/src/chart/step-area.js @@ -46,12 +46,14 @@ this.default = function () { width: ej.base.Browser.isDevice ? '100%' : '60%', //Initializing Chart Title title: 'Electricity- Production', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#step-container'); }; \ No newline at end of file diff --git a/src/chart/step-line-stack.json b/src/chart/step-line-stack.json new file mode 100644 index 00000000..5bac65d3 --- /dev/null +++ b/src/chart/step-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Step Line Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n labelFormat: 'y',\n intervalType: 'Years',\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n interval: 5,\n labelFormat: '{value}%'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StepLine',\n dataSource: [\n { x: new Date(1975, 0, 1), y: 16 },\n { x: new Date(1980, 0, 1), y: 12.5 },\n { x: new Date(1985, 0, 1), y: 19 },\n { x: new Date(1990, 0, 1), y: 14.4 },\n { x: new Date(1995, 0, 1), y: 11.5 },\n { x: new Date(2000, 0, 1), y: 14 },\n { x: new Date(2005, 0, 1), y: 10 },\n { x: new Date(2010, 0, 1), y: 16 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'China',\n marker: {\n visible: true,\n width: 10,\n height: 10\n },\n },\n {\n type: 'StepLine',\n dataSource: [\n { x: new Date(1975, 0, 1), y: 10 },\n { x: new Date(1980, 0, 1), y: 7.5 },\n { x: new Date(1985, 0, 1), y: 11 },\n { x: new Date(1990, 0, 1), y: 7 },\n { x: new Date(1995, 0, 1), y: 8 },\n { x: new Date(2000, 0, 1), y: 6 },\n { x: new Date(2005, 0, 1), y: 3.5 },\n { x: new Date(2010, 0, 1), y: 7 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Australia',\n marker: {\n visible: true,\n width: 10,\n height: 10\n },\n }\n ],\n //Initializing Chart Title\n title: 'Unemployment Rates 1975-2010',\n //Initializing Tooltip\n tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#sLine-container');\n"} \ No newline at end of file diff --git a/src/chart/step-line.js b/src/chart/step-line.js index 7017c145..ccc5e20d 100644 --- a/src/chart/step-line.js +++ b/src/chart/step-line.js @@ -71,12 +71,14 @@ this.default = function () { //Initializing Tooltip tooltip: { enable: true }, width: ej.base.Browser.isDevice ? '100%' : '60%', + // custom code start load: function (args) { var stepTheme = location.hash.split('/')[1]; stepTheme = stepTheme ? stepTheme : 'Material'; args.chart.theme = (stepTheme.charAt(0).toUpperCase() + stepTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#sLine-container'); }; \ No newline at end of file diff --git a/src/chart/stochastic-stack.json b/src/chart/stochastic-stack.json new file mode 100644 index 00000000..6d0669a9 --- /dev/null +++ b/src/chart/stochastic-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Stochastic Indicator\n */\nrenderChart =function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 80, maximum: 170,\n plotOffset: 25,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }\n },\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,\n majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [\n {\n start: 0, end: 120, text: '', color: 'black', visible: true,\n opacity: 0.03, zIndex: 'Behind'\n }\n ]\n }],\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'Stochastic', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n kPeriod: 2, dPeriod: 3, showZones: true, periodLine: { color: '#f2ec2f' },\n period: 3, animation: { enable: false }, upperLine: { color: '#e74c3d' }, lowerLine: { color: '#2ecd71' }\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n // custom code start\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + \n selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n },\n // custom code start\n legendSettings: { visible: false }\n });\n chart.appendTo('#sto-container');\n };\n \n var chartData = [];\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data = new Date(data);\n });\n renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/stochastic.js b/src/chart/stochastic.js index 67eb56ab..4b66e791 100644 --- a/src/chart/stochastic.js +++ b/src/chart/stochastic.js @@ -47,7 +47,8 @@ renderChart =function (chartData) { }], zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, tooltip: { @@ -57,12 +58,14 @@ renderChart =function (chartData) { chartArea: { border: { width: 0 } }, title: 'AAPL 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code start legendSettings: { visible: false } }); chart.appendTo('#sto-container'); diff --git a/src/chart/strip-line-recurrence-stack.json b/src/chart/strip-line-recurrence-stack.json new file mode 100644 index 00000000..b065d86a --- /dev/null +++ b/src/chart/strip-line-recurrence-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    X Axis
    \n     		\n
    \n \n
    \n
    \n
    Y Axis
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for StripLine\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X and Y Axis\n primaryXAxis: {\n valueType: 'DateTime', interval: 5, intervalType: 'Years', majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift',\n minimum: new Date(1965, 1, 1), maximum: new Date(2010, 1, 1),\n stripLines: [{\n startFromAxis: true, size: 5, sizeType: 'Years', isRepeat: true, repeatEvery: 10, visible: true,\n color: 'rgba(167,169,171, 0.1)'\n }]\n },\n chartArea: { border: { width: 0 } },\n primaryYAxis:\n {\n minimum: 0, maximum: 18000, interval: 2000, majorGridLines: { color: 'rgba(167,169,171, 0.3)' },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' },\n stripLines: [{\n startFromAxis: true, size: 2000, isRepeat: true, repeatEvery: 4000, visible: true,\n color: 'rgba(167,169,171, 0.1)'\n }]\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'All sources',\n dataSource: [{ x: new Date(1970, 1, 1), y: 16500 }, { x: new Date(1975, 1, 1), y: 16000 },\n { x: new Date(1980, 1, 1), y: 15400 }, { x: new Date(1985, 1, 1), y: 15800 },\n { x: new Date(1990, 1, 1), y: 14000 }, { x: new Date(1995, 1, 1), y: 10500 },\n { x: new Date(2000, 1, 1), y: 13300 }, { x: new Date(2005, 1, 1), y: 12800 }]\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Autos & Light Trucks',\n dataSource: [{ x: new Date(1970, 1, 1), y: 8000 }, { x: new Date(1975, 1, 1), y: 7600 },\n { x: new Date(1980, 1, 1), y: 6400 }, { x: new Date(1985, 1, 1), y: 3700 },\n { x: new Date(1990, 1, 1), y: 7200 }, { x: new Date(1995, 1, 1), y: 2300 },\n { x: new Date(2000, 1, 1), y: 4000 }, { x: new Date(2005, 1, 1), y: 4800 }]\n }\n ],\n //Initializing Chart title\n title: 'World Pollution Report', tooltip: { enable: true, format: ' Year: ${point.x}
    Tons Per Day: ${point.y}' },\n\n });\n chart.appendTo('#container');\n chart.animateSeries = false;\n document.getElementById('xIndex').onchange = function() {\n chart.primaryXAxis.stripLines[0].visible = (document.getElementById('xIndex')).checked;\n };\n document.getElementById('yIndex').onchange = function() {\n chart.primaryYAxis.stripLines[0].visible = (document.getElementById('yIndex')).checked;\n };\n"} \ No newline at end of file diff --git a/src/chart/strip-line-recurrence.js b/src/chart/strip-line-recurrence.js index 23c5a5bb..fbc74439 100644 --- a/src/chart/strip-line-recurrence.js +++ b/src/chart/strip-line-recurrence.js @@ -42,12 +42,14 @@ this.default = function () { ], //Initializing Chart title title: 'World Pollution Report', tooltip: { enable: true, format: ' Year: ${point.x}
    Tons Per Day: ${point.y}' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); chart.animateSeries = false; diff --git a/src/chart/strip-line-stack.json b/src/chart/strip-line-stack.json new file mode 100644 index 00000000..cc7337d5 --- /dev/null +++ b/src/chart/strip-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n
    \n
    StripLine Types:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    ","index.js":"{{ripple}}/**\n * Sample for StripLine\n */\nvar fontSize = ej.base.Browser.isDevice ? '14px' : '18px';\nvar xAxisStripLine = [\n {\n start: -1, end: 1.5, text: 'Winter', color: 'url(#winter)',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' },\n border: { width: 0 }, rotation: -90, visible: true\n }, {\n start: 1.5, end: 3.5, text: 'Summer', color: 'url(#summer)',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' },\n border: { width: 0 }, rotation: -90, visible: true\n }, {\n start: 3.5, end: 4.5, text: 'Spring', color: 'url(#spring)',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' },\n border: { width: 0 }, rotation: -90, visible: true\n }, {\n start: 4.5, end: 5.5, text: 'Autumn', color: 'url(#autumn)',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' },\n border: { width: 0 }, rotation: -90, visible: true\n }, {\n start: 5.5, end: 7, text: 'Winter', color: 'url(#winter)',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' },\n border: { width: 0 }, rotation: -90, visible: true\n }, {\n startFromAxis: true, size: 2, isSegmented: true, segmentStart: 22.5, text: 'Average Temperature',\n segmentEnd: 27.5, visible: false, color: '#fc902a',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 }, rotation: 0\n }, {\n start: 3.5, size: 3, isSegmented: true, segmentStart: 22.5, text: 'Average Temperature',\n segmentEnd: 27.5, visible: false, color: '#fc902a',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 }, rotation: 0\n }, {\n start: 1.5, size: 2, isSegmented: true, segmentStart: 32.5, text: 'High Temperature',\n segmentEnd: 37.5, visible: false, color: '#ff512f',\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 }, rotation: 0\n }\n];\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', majorGridLines: { width: 0 },\n //Initializing StripLines\n stripLines: xAxisStripLine\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 10, maximum: 40, interval: 5,\n lineStyle: { color: '#808080' }, labelFormat: '{value} °C', rangePadding: 'None',\n stripLines: [\n {\n start: 30, end: 40, text: 'High Temperature', color: '#ff512f', visible: false,\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 },\n }, {\n start: 20, end: 30, text: 'Average Temperature', color: '#fc902a', visible: false,\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 },\n }, {\n start: 10, end: 20, text: 'Low Temperature', visible: false,\n textStyle: { size: fontSize, color: '#ffffff', fontWeight: '600' }, border: { width: 0 }, color: '#f9d423'\n }\n ]\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: [\n { x: 'Sun', y: 25 }, { x: 'Mon', y: 27 }, { x: 'Tue', y: 33 }, { x: 'Wed', y: 36 },\n { x: 'Thu', y: 26 }, { x: 'Fri', y: 27.5 }, { x: 'Sat', y: 23 }\n ],\n xName: 'x', width: 2, yName: 'y', fill: '#ffffff', type: 'Line', name: 'Weather',\n marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#ffffff' }, fill: '#666666' },\n },\n ],\n //Initializing Chart Title\n title: 'Weather Report',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n legendSettings: { visible: true },\n\n });\n chart.appendTo('#strip-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n chart.series[0].fill = 'white';\n chart.series[0].marker.fill = 'black';\n chart.series[0].marker.border.color = 'white';\n for (var i = 0; i < 3; i++) {\n chart.primaryYAxis.stripLines[i].visible = false;\n }\n if (mode.value === 'Vertical') {\n for (i = 0; i <= 7; i++) {\n chart.primaryXAxis.stripLines[i].visible = !chart.primaryXAxis.stripLines[i].isSegmented;\n }\n } else if (mode.value === 'Horizontal') {\n for (i = 0; i < 3; i++) {\n chart.primaryYAxis.stripLines[i].visible = true;\n }\n for (i = 0; i <= 7; i++) {\n chart.primaryXAxis.stripLines[i].visible = false;\n }\n } else {\n for (i = 0; i <= 7; i++) {\n chart.primaryXAxis.stripLines[i].visible = chart.primaryXAxis.stripLines[i].isSegmented;\n }\n chart.series[0].fill = 'black';\n chart.series[0].marker.fill = 'white';\n chart.series[0].marker.border.color = 'black';\n }\n chart.refresh();\n }\n });\n mode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/chart/strip-line.js b/src/chart/strip-line.js index a5267825..06855b23 100644 --- a/src/chart/strip-line.js +++ b/src/chart/strip-line.js @@ -80,12 +80,14 @@ this.default = function () { enable: true }, legendSettings: { visible: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#strip-container'); var mode = new ej.dropdowns.DropDownList({ diff --git a/src/chart/tornado-stack.json b/src/chart/tornado-stack.json new file mode 100644 index 00000000..780997f9 --- /dev/null +++ b/src/chart/tornado-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Tornoda chart\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Height in Inches',\n minorGridLines: { width: 0 },\n minorTickLines: { width: 0 },\n interval: 1,\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value} KG',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n labelStyle: {\n color: 'transparent'\n }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'StackingBar',\n dataSource: [\n { x: '4.5', y: 31 }, { x: '4.8', y: 37 },\n { x: '5.1', y: 49 }, { x: '5.4', y: 57 },\n { x: '5.7', y: 63 }, { x: '6', y: 69 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Female', marker: {\n dataLabel: {\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600'\n }\n }\n }\n },\n {\n type: 'StackingBar',\n dataSource: [\n { x: '4.5', y: -31, text: '31 KG' }, { x: '4.8', y: -39, text: '39 KG' },\n { x: '5.1', y: -52, text: '52 KG' }, { x: '5.4', y: -64, text: '64 KG' },\n { x: '5.7', y: -70, text: '70 KG' }, { x: '6', y: -74, text: '74 KG' }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Male', marker: {\n dataLabel: {\n name: 'text',\n visible: true,\n position: 'Top',\n font: {\n fontWeight: '600'\n }\n }\n }\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n tooltipRender: function (args) {\n args.text = args.text.indexOf('-') > 0 ? args.text.replace('-', '') : args.text;\n },\n legendSettings: {\n position: ej.base.Browser.isDevice ? 'Auto' : 'Right'\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n title: 'Height vs Weight',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/tornado.js b/src/chart/tornado.js index f28ec30f..3e7597a7 100644 --- a/src/chart/tornado.js +++ b/src/chart/tornado.js @@ -80,12 +80,14 @@ this.default = function () { }, width: ej.base.Browser.isDevice ? '100%' : '80%', title: 'Height vs Weight', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/trackball-stack.json b/src/chart/trackball-stack.json new file mode 100644 index 00000000..71fe4056 --- /dev/null +++ b/src/chart/trackball-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}var john = [{ x: new Date(2000, 2, 11), y: 15 }, { x: new Date(2000, 9, 14), y: 20 },\n{ x: new Date(2001, 2, 11), y: 25 }, { x: new Date(2001, 9, 16), y: 21 },\n{ x: new Date(2002, 2, 7), y: 13 }, { x: new Date(2002, 9, 7), y: 18 },\n{ x: new Date(2003, 2, 11), y: 24 }, { x: new Date(2003, 9, 14), y: 23 },\n{ x: new Date(2004, 2, 6), y: 19 }, { x: new Date(2004, 9, 6), y: 31 },\n{ x: new Date(2005, 2, 11), y: 39 }, { x: new Date(2005, 9, 11), y: 50 },\n{ x: new Date(2006, 2, 11), y: 24 }];\nvar andrew = [{ x: new Date(2000, 2, 11), y: 39 }, { x: new Date(2000, 9, 14), y: 30 },\n{ x: new Date(2001, 2, 11), y: 28 }, { x: new Date(2001, 9, 16), y: 35 },\n{ x: new Date(2002, 2, 7), y: 39 }, { x: new Date(2002, 9, 7), y: 41 },\n{ x: new Date(2003, 2, 11), y: 45 }, { x: new Date(2003, 9, 14), y: 48 },\n{ x: new Date(2004, 2, 6), y: 54 }, { x: new Date(2004, 9, 6), y: 55 },\n{ x: new Date(2005, 2, 11), y: 57 }, { x: new Date(2005, 9, 11), y: 60 },\n{ x: new Date(2006, 2, 11), y: 60 }];\nvar thomas = [{ x: new Date(2000, 2, 11), y: 60 }, { x: new Date(2000, 9, 14), y: 55 },\n{ x: new Date(2001, 2, 11), y: 48 }, { x: new Date(2001, 9, 16), y: 57 },\n{ x: new Date(2002, 2, 7), y: 62 }, { x: new Date(2002, 9, 7), y: 64 },\n{ x: new Date(2003, 2, 11), y: 57 }, { x: new Date(2003, 9, 14), y: 53 },\n{ x: new Date(2004, 2, 6), y: 63 }, { x: new Date(2004, 9, 6), y: 50 },\n{ x: new Date(2005, 2, 11), y: 66 }, { x: new Date(2005, 9, 11), y: 65 },\n{ x: new Date(2006, 2, 11), y: 79 }];\n/**\n * Sample for Trackball\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),\n valueType: 'DateTime',\n skeleton: 'y',\n lineStyle: { width: 0 },\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Revenue',\n labelFormat: '{value}M',\n majorTickLines: { width: 0 },\n minimum: 10, maximum: 80,\n lineStyle: { width: 0 },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: john,\n name: 'John',\n xName: 'x', width: 2,\n yName: 'y',\n marker: { visible: true }\n },\n {\n type: 'Line',\n dataSource: andrew,\n name: 'Andrew',\n xName: 'x', width: 2,\n yName: 'y',\n marker: { visible: true }\n },\n {\n type: 'Line',\n dataSource: thomas,\n name: 'Thomas',\n xName: 'x', width: 2,\n yName: 'y',\n marker: { visible: true }\n }\n ],\n //Initializing Tooltip and Crosshair\n tooltip: { enable: true, shared: true },\n crosshair: { enable: true, lineType: 'Vertical' },\n //Initializing Chart Title\n title: 'Average Sales per Person',\n\n });\n chart.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/chart/trackball.js b/src/chart/trackball.js index 3988dd2d..a5bd2bf9 100644 --- a/src/chart/trackball.js +++ b/src/chart/trackball.js @@ -78,12 +78,14 @@ this.default = function () { crosshair: { enable: true, lineType: 'Vertical' }, //Initializing Chart Title title: 'Average Sales per Person', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); args.chart.width = ej.base.Browser.isDevice ? '100%' : '60%'; } + // custom code end }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/trend-lines-stack.json b/src/chart/trend-lines-stack.json new file mode 100644 index 00000000..91e0b426 --- /dev/null +++ b/src/chart/trend-lines-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    TrendLine Type:\n
    \n     		\n
    \n \n
    \n
    \n
    Forward Forecast:
    \n     		\n
    \n \n
    \n
    \n
    Backward Forecast:
    \n     		\n
    \n \n
    \n
    \n
    Polynomial Order:
    \n     		\n
    \n \n
    \n
    \n
    Period:
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Samples for trendlines\n */\n\n var series1 = [];\n var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,\n 13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,\n 41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];\n var point1;\n var i;\n var j = 0;\n for (i = 1973; i <= 2013; i++) {\n point1 = { x: i, y: yValue[j] };\n series1.push(point1);\n j++;\n }\n var powerData = [\n { x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },\n { x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x: 9, y: 490 }, { x: 10, y: 500 }\n ];\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift'\n },\n primaryYAxis: {\n title: 'Rupees against Dollars',\n interval: 10, lineStyle: { width: 0 }, majorTickLines: { width: 0 }\n },\n series: [{\n dataSource: series1, xName: 'x', yName: 'y',\n name: 'Rupees', type: 'Spline',\n marker: { visible: true },\n trendlines: [{ type: 'Linear', width: 3, marker: { visible: false }, name: 'Linear' , fill: '#C64A75' }]\n }],\n tooltip: { enable: true },\n title: 'Historical Indian Rupee Rate (INR/USD)',\n chartArea: { border: { width: 0 } },\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#container');\n var forward = new ej.inputs.NumericTextBox({\n value: 0, min: 1, max: 20, width: 120, step: 1,\n change: function () {\n chart.series[0].animation.enable = false;\n chart.series[0].trendlines[0].forwardForecast = forward.value;\n chart.refresh();\n }\n });\n forward.appendTo('#forwardForecast');\n var backward = new ej.inputs.NumericTextBox({\n value: 0, min: 1, max: 20, width: 120, step: 1, change: function () {\n chart.series[0].animation.enable = false;\n chart.series[0].trendlines[0].backwardForecast = backward.value;\n chart.refresh();\n }\n });\n backward.appendTo('#backwardForecast');\n var polynomial = new ej.inputs.NumericTextBox({\n value: 0, min: 1, max: 20, width: 120, step: 1, enabled: false,\n change: function () {\n chart.series[0].animation.enable = false;\n chart.series[0].trendlines[0].polynomialOrder = polynomial.value;\n chart.refresh();\n }\n });\n polynomial.appendTo('#polynomialOrder');\n var periodValue = new ej.inputs.NumericTextBox({\n value: 0, min: 1, max: 20, width: 120, step: 1, enabled: false,\n change: function () {\n chart.series[0].animation.enable = false;\n chart.series[0].trendlines[0].period = periodValue.value;\n chart.refresh();\n }\n });\n periodValue.appendTo('#period');\n var trend = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n chart.series[0].animation.enable = false;\n chart.series[0].dataSource = [];\n chart.series[0].trendlines[0].type = trend.value;\n chart.series[0].trendlines[0].name = trend.value;\n var forwardForecast;\n var backwardForecast;\n var polynomialOrder;\n var period;\n if (trend.value !== 'Power') {\n chart.series[0].dataSource = series1;\n chart.series[0].name = 'Rupees';\n chart.primaryXAxis.title = '';\n chart.primaryYAxis.interval = 10;\n chart.primaryYAxis.title = 'Rupees against Dollars';\n chart.title = 'Historical Indian Rupee Rate (INR USD)';\n if (trend.value === 'MovingAverage') {\n chart.series[0].trendlines[0].marker.visible = false;\n }\n }\n else {\n chart.series[0].dataSource = powerData;\n chart.series[0].name = 'Meters';\n chart.primaryXAxis.title = 'Seconds';\n chart.primaryYAxis.title = 'Meters';\n chart.primaryYAxis.interval = 100;\n chart.title = 'Distance Measurement';\n }\n if (trend.value !== 'Polynomial' && trend.value !== 'MovingAverage') {\n period = polynomialOrder = true;\n forwardForecast = backwardForecast = false;\n }\n else if (trend.value === 'MovingAverage') {\n period = false;\n forwardForecast = backwardForecast = polynomialOrder = true;\n }\n else {\n forwardForecast = backwardForecast = polynomialOrder = false;\n period = true;\n }\n forward.enabled = !forwardForecast;\n backward.enabled = !backwardForecast;\n polynomial.enabled = !polynomialOrder;\n periodValue.enabled = !period;\n chart.refresh();\n }\n });\n trend.appendTo('#trendLineType');\n"} \ No newline at end of file diff --git a/src/chart/trend-lines.js b/src/chart/trend-lines.js index 33c06849..eddd9651 100644 --- a/src/chart/trend-lines.js +++ b/src/chart/trend-lines.js @@ -34,14 +34,16 @@ this.default = function () { trendlines: [{ type: 'Linear', width: 3, marker: { visible: false }, name: 'Linear' , fill: '#C64A75' }] }], tooltip: { enable: true }, - title: 'Historical Indian Rupee Rate (INR USD)', + title: 'Historical Indian Rupee Rate (INR/USD)', chartArea: { border: { width: 0 } }, legendSettings: { visible: false }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end }); chart.appendTo('#container'); var forward = new ej.inputs.NumericTextBox({ diff --git a/src/chart/triangular-moving-average-indicator-stack.json b/src/chart/triangular-moving-average-indicator-stack.json new file mode 100644 index 00000000..7913e8db --- /dev/null +++ b/src/chart/triangular-moving-average-indicator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for TMA Indicator\n */\n var _this = this;\nthis.renderChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorGridLines: { width: 1 }, lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: false }\n }],\n indicators: [{\n type: 'Tma', field: 'Close', seriesName: 'Apple Inc', fill: '#6063ff',\n period: 14, animation: { enable: true }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'XY',\n enablePan: true\n },\n title: 'AAPL - 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#tma-container');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/chart/data-source/financial-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/chart/triangular-moving-average-indicator.js b/src/chart/triangular-moving-average-indicator.js index dc27a6c7..1ac6fcb5 100644 --- a/src/chart/triangular-moving-average-indicator.js +++ b/src/chart/triangular-moving-average-indicator.js @@ -37,16 +37,19 @@ this.renderChart = function (chartData) { crosshair: { enable: true, lineType: 'Vertical' }, zoomSettings: { enableSelectionZooming: true, - mode: 'X', + enablePinchZooming: true, + mode: 'XY', enablePan: true }, title: 'AAPL - 2012-2017', width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end legendSettings: { visible: false } }); chart.appendTo('#tma-container'); diff --git a/src/chart/vertical-stack.json b/src/chart/vertical-stack.json new file mode 100644 index 00000000..6c4571be --- /dev/null +++ b/src/chart/vertical-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for vertical chart\n */\n\n var interval;\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: { title: 'Time (s)', majorGridLines: { width: 0 } },\n //Initializing Primary Y Axis\n primaryYAxis: { title: 'Velocity (m/s)', majorGridLines: { width: 0 }, minimum: -15, maximum: 15, interval: 5 },\n //Initializing Chart Series\n series: [\n {\n type: 'Line', xName: 'x', yName: 'y', dataSource: [{ x: 0, y: 0 }],\n animation: { enable: false }, width: 2\n }\n ],\n chartArea: {\n border: {\n width: 0\n }\n },\n isTransposed: true,\n //Initializing Chart Title\n title: 'Indonesia - Seismograph Analysis',\n //Initializing Tooltip\n tooltip: { enable: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n loaded: function (args) {\n chart.loaded = null;\n interval =\n setInterval(function () {\n chart.series[0].dataSource = liveData(chart.series[0].dataSource, chart.series[0]);\n chart.refresh();\n }, 10);\n }\n });\n chart.appendTo('#vertical-container');\n var count = 0;\n function liveData(data, series) {\n count = count + 1;\n var newData = data;\n if (count > 350 || document.getElementById('vertical-container') === null) {\n clearInterval(interval);\n }\n else if (count > 300) {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(0, 0) });\n }\n else if (count > 250) {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(-2, 1) });\n }\n else if (count > 180) {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(-3, 2) });\n }\n else if (count > 100) {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(-7, 6) });\n }\n else if (count < 50) {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(-3, 3) });\n }\n else {\n newData.push({ x: getXValue(data), y: getRandomArbitrary(-9, 9) });\n }\n return newData;\n }\n function getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n }\n function getXValue(data) {\n return data.length;\n }\n"} \ No newline at end of file diff --git a/src/chart/vertical.js b/src/chart/vertical.js index 93439a53..ea041982 100644 --- a/src/chart/vertical.js +++ b/src/chart/vertical.js @@ -26,11 +26,13 @@ this.default = function () { //Initializing Tooltip tooltip: { enable: false }, width: ej.base.Browser.isDevice ? '100%' : '80%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); }, + // custom code end loaded: function (args) { chart.loaded = null; interval = diff --git a/src/chart/waterfall-stack.json b/src/chart/waterfall-stack.json new file mode 100644 index 00000000..10eeee96 --- /dev/null +++ b/src/chart/waterfall-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Waterfall series\n */\n\n var chartData = [\n { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },\n { x: 'Development', y: -688 },\n { x: 'Revenue', y: 1030 }, { x: 'Balance' },\n { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },\n { x: 'Net Profit' }\n ];\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 },\n plotOffset: 20\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n minimum: 0, maximum: 5000, interval: 1000,\n majorGridLines: { width: 0 },\n title: 'Expenditure'\n },\n //Initializing Chart Series\n series: [{\n dataSource: chartData, width: 2, negativeFillColor: '#e56590',\n xName: 'x', yName: 'y', intermediateSumIndexes: [4], sumIndexes: [7],\n columnWidth: 0.9,\n type: 'Waterfall', animation: { enable: true },\n marker: {\n dataLabel: { visible: true, font: { color: '#ffffff' } }\n }, connector: { color: '#5F6A6A', width: 2 }\n }],\n chartArea: { border: { width: 0 } },\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n //Initializing Chart Title\n title: 'Company Revenue and Profit',\n legendSettings: { visible: false },\n axisLabelRender: function (args) {\n if (args.axis.name === 'primaryYAxis') {\n args.text = '$' + Number(args.text) / 1000 + 'B';\n }\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n textRender: function (args) {\n var value = Number(args.text) / 1000;\n value = Math.round((value * 100)) / 100;\n args.text = value.toString();\n },\n\n });\n chart.appendTo('#waterFall-container');\n"} \ No newline at end of file diff --git a/src/chart/waterfall.js b/src/chart/waterfall.js index 29a773cc..e9fed4de 100644 --- a/src/chart/waterfall.js +++ b/src/chart/waterfall.js @@ -51,11 +51,13 @@ this.default = function () { value = Math.round((value * 100)) / 100; args.text = value.toString(); }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; args.chart.theme = selectedTheme && (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); chart.appendTo('#waterFall-container'); }; \ No newline at end of file diff --git a/src/chart/zooming-stack.json b/src/chart/zooming-stack.json new file mode 100644 index 00000000..2a6c434a --- /dev/null +++ b/src/chart/zooming-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n
    \n\n\n\n\t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    ","index.js":"{{ripple}}\n var series1 = [];\n var point1;\n var value = 80;\n var i;\n for (i = 1; i < 500; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };\n series1.push(point1);\n }\n/**\n * Sample for Zooming in Chart\n */\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\n var chart = new ej.charts.Chart({\n chartArea: { border: { width: 0 } },\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n valueType: 'DateTime',\n skeleton: 'yMMM',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Profit ($)',\n rangePadding: 'None',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: series1,\n name: 'Product X',\n xName: 'x',\n yName: 'y',\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 0.5, color: borderColor[themes.indexOf(theme)] },\n animation: { enable: false }\n },\n ],\n //Initializing Zooming\n zoomSettings: {\n enableMouseWheelZooming: true,\n enablePinchZooming: true,\n enableSelectionZooming: true,\n mode: 'X',\n enableScrollbar: true\n },\n //Initializing Chart Title\n title: 'Sales History of Product X',\n legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme,\n });\n chart.appendTo('#zoom-container');\n"} \ No newline at end of file diff --git a/src/chart/zooming.html b/src/chart/zooming.html index 3c618846..5707fd0a 100644 --- a/src/chart/zooming.html +++ b/src/chart/zooming.html @@ -1,13 +1,22 @@
    \n
    \n
    Janet Leverling
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Color
    \n     		\n
    \n \n
    \n
    \n
    Leading icon
    \n     		\n
    \n \n
    \n
    \n
    Avatar
    \n     		\n
    \n \n
    \n
    \n
    Trailing icon
    \n     		\n
    \n \n
    \n
    \n
    Outline
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Api Chip sample\n */\n\nvar colorCss = '';\nvar outlineCss = '';\nvar chip;\n\n\n // initalizing chips\n chip = new ej.buttons.ChipList({}, '#chip');\n\n // initalizing drop-down list\n var colorObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: colorHandler\n });\n colorObj.appendTo('#chip-color');\n\n // initalizing checkbox\n var leadingIconObj = new ej.buttons.CheckBox({\n checked: false,\n change: iconHandler\n });\n leadingIconObj.appendTo('#chip-leadingicon');\n\n // initalizing drop-down list\n var avatarObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: avatarHandler\n });\n avatarObj.appendTo('#chip-avatar');\n\n // initalizing checkbox\n var trailingIconObj = new ej.buttons.CheckBox({\n checked: false,\n change: deleteIconHandler\n });\n trailingIconObj.appendTo('#chip-trailingicon');\n\n // initalizing checkbox\n var variantObj = new ej.buttons.CheckBox({\n checked: false,\n change: variantHandler\n });\n variantObj.appendTo('#chip-outline');\n\n\n\n// drop-down list change handler for chip color\nfunction colorHandler(e) {\n chip.cssClass = 'e-' + e.value + ' ' + outlineCss.trim();\n colorCss = 'e-' + e.value;\n}\n\n// checkbox change handler for chip leading icon\nfunction iconHandler(e) {\n chip.leadingIconCss = e.checked ? 'janet' : '';\n}\n\n// drop-down list change handler for chip avatar\nfunction avatarHandler(e) {\n chip.avatarIconCss = (e.value === 'icon') ? 'e-icon' : (e.value === 'image') ? 'janet' : '';\n chip.avatarText = (e.value === 'letter' ? 'JL' : '');\n}\n\n// checkbox change handler for chip trailing icon\nfunction deleteIconHandler(e) {\n chip.trailingIconCss = e.checked ? 'e-dlt-btn' : '';\n}\n\n// checkbox change handler for chip outline\nfunction variantHandler(e) {\n outlineCss = e.checked ? 'e-outline' : '';\n chip.cssClass = colorCss + ' ' + outlineCss;\n}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Janet Leverling
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Color
    \n     		\n
    \n \n
    \n
    \n
    Leading icon
    \n     		\n
    \n \n
    \n
    \n
    Avatar
    \n     		\n
    \n \n
    \n
    \n
    Trailing icon
    \n     		\n
    \n \n
    \n
    \n
    Outline
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Api Chip sample\n */\n\nvar colorCss = '';\nvar outlineCss = '';\nvar chip;\n\n\n // initalizing chips\n chip = new ej.buttons.ChipList({}, '#chip');\n\n // initalizing drop-down list\n var colorObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: colorHandler\n });\n colorObj.appendTo('#chip-color');\n\n // initalizing checkbox\n var leadingIconObj = new ej.buttons.CheckBox({\n checked: false,\n change: iconHandler\n });\n leadingIconObj.appendTo('#chip-leadingicon');\n\n // initalizing drop-down list\n var avatarObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: avatarHandler\n });\n avatarObj.appendTo('#chip-avatar');\n\n // initalizing checkbox\n var trailingIconObj = new ej.buttons.CheckBox({\n checked: false,\n change: deleteIconHandler\n });\n trailingIconObj.appendTo('#chip-trailingicon');\n\n // initalizing checkbox\n var variantObj = new ej.buttons.CheckBox({\n checked: false,\n change: variantHandler\n });\n variantObj.appendTo('#chip-outline');\n\n\n\n// drop-down list change handler for chip color\nfunction colorHandler(e) {\n chip.cssClass = 'e-' + e.value + ' ' + outlineCss.trim();\n colorCss = 'e-' + e.value;\n}\n\n// checkbox change handler for chip leading icon\nfunction iconHandler(e) {\n chip.leadingIconCss = e.checked ? 'janet' : '';\n}\n\n// drop-down list change handler for chip avatar\nfunction avatarHandler(e) {\n chip.avatarIconCss = (e.value === 'icon') ? 'e-icon' : (e.value === 'image') ? 'janet' : '';\n chip.avatarText = (e.value === 'letter' ? 'JL' : '');\n}\n\n// checkbox change handler for chip trailing icon\nfunction deleteIconHandler(e) {\n chip.trailingIconCss = e.checked ? 'e-dlt-btn' : '';\n}\n\n// checkbox change handler for chip outline\nfunction variantHandler(e) {\n outlineCss = e.checked ? 'e-outline' : '';\n chip.cssClass = colorCss + ' ' + outlineCss;\n}\n"} \ No newline at end of file diff --git a/src/chips/default-stack.json b/src/chips/default-stack.json index 9958fc56..25bccd18 100644 --- a/src/chips/default-stack.json +++ b/src/chips/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    Chips
    \n\n
    \n
    \n
    \n\n
    Input Chips
    \n\n
    \n
    \n
    \n\n
    Filter Chips
    \n\n
    \n
    \n
    \n\n
    Choice Chips
    \n\n
    \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Default Chip sample\n */\n\n\n // initialize default chip\n new ej.buttons.ChipList({ chips: window.chipsData.defaultData }, '#chip-default');\n\n // initialize avatar chip\n new ej.buttons.ChipList({ chips: window.chipsData.avatarData, enableDelete: true }, '#chip-avatar');\n\n // initialize filter chip\n new ej.buttons.ChipList({ chips: window.chipsData.filterData, selection: 'Multiple', selectedChips: [1, 3] }, '#chip-filter');\n\n // initialize choice chip\n new ej.buttons.ChipList(\n {\n chips: window.chipsData.choiceData, selection: 'Single', cssClass: 'e-outline',\n selectedChips: [1]\n },\n '#chip-choice');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    Chips
    \n\n
    \n
    \n
    \n\n
    Input Chips
    \n\n
    \n
    \n
    \n\n
    Filter Chips
    \n\n
    \n
    \n
    \n\n
    Choice Chips
    \n\n
    \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Default Chip sample\n */\n\n\n // initialize default chip\n new ej.buttons.ChipList({ chips: window.chipsData.defaultData }, '#chip-default');\n\n // initialize avatar chip\n new ej.buttons.ChipList({ chips: window.chipsData.avatarData, enableDelete: true }, '#chip-avatar');\n\n // initialize filter chip\n new ej.buttons.ChipList({ chips: window.chipsData.filterData, selection: 'Multiple', selectedChips: [1, 3] }, '#chip-filter');\n\n // initialize choice chip\n new ej.buttons.ChipList(\n {\n chips: window.chipsData.choiceData, selection: 'Single', cssClass: 'e-outline',\n selectedChips: [1]\n },\n '#chip-choice');\n\n"} \ No newline at end of file diff --git a/src/chips/sample.json b/src/chips/sample.json index b38b9948..0b0a895a 100644 --- a/src/chips/sample.json +++ b/src/chips/sample.json @@ -2,20 +2,19 @@ "name": "Chips", "directory": "chips", "category": "Editors", - "type": "preview", "dataSourcePath": "src/chips/data.js", "samples": [ { "url": "default", "name": "Default Functionalities", "category": "Chips", - "description": "chip component" + "description": "This sample demonstrates functionalities of Chips with different types. Click and interact the chip, to select single or multiple chips from collection." }, { "url": "api", "name": "API", "category": "Chips", - "description": "chip component" + "description": "This sample demonstrates common API of chip control. Select any combination of properties from the property pane to customize the appearance of chip." } ] } \ No newline at end of file diff --git a/src/circular-gauge/annotation-stack.json b/src/circular-gauge/annotation-stack.json index fc0b42e6..010550c7 100644 --- a/src/circular-gauge/annotation-stack.json +++ b/src/circular-gauge/annotation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}function gauge1() {\n var gauge1 = new ej.circulargauge.CircularGauge({\n centerY: '45%',\n resized: function (args) {\n location.reload();\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n titleStyle: { color: 'black', size: '16px' },\n axes: [\n {\n startAngle: 0, endAngle: 0,\n lineStyle: { width: 0 }, radius: ej.base.Browser.isDevice ? '90%' : '70%',\n ranges: [\n {\n start: 0, end: 3,\n color: 'rgba(29,29,29,0.6)'\n }, {\n start: 3, end: 12,\n color: 'rgba(226, 226, 226, 0.6)'\n }\n ],\n annotations: [{\n angle: 270, radius: '50%', zIndex: '1',\n content: '
    '\n }, {\n angle: 180, radius: '50%', zIndex: '1',\n content: '
    '\n }, {\n angle: 90, zIndex: '1',\n radius: '40%',\n content: '
    11:11 AM
    '\n }, {\n angle: 360, radius: '50%', zIndex: '1',\n content: '
    21-06-17
    '\n }],\n labelStyle: {\n hiddenLabel: 'First', font: { color: 'rgb(29,29,29)' }, autoAngle: false\n }, majorTicks: {\n width: 2, height: 14, interval: 1, color: 'rgb(29,29,29)'\n }, minorTicks: {\n height: 4, width: 1, interval: 0.2, color: 'rgb(29,29,29)'\n },\n minimum: 0, maximum: 12,\n pointers: [{\n pointerWidth: 5, radius: '40%', color: 'rgba(29,29,29,0.8)',\n border: { width: 0, color: '#679EEF' },\n cap: { radius: 0, border: { width: 0, color: 'red' } },\n needleTail: { length: '0%' }, animation: { enable: false }\n }, {\n radius: '60%', pointerWidth: 5, color: 'rgba(29,29,29,0.8)',\n border: {\n width: 0,\n color: 'rgba(29,29,29,0.8)'\n },\n cap: {\n color: 'rgba(29,29,29,0.8)',\n radius: 0,\n border: {\n width: 0,\n color: 'red'\n }\n },\n needleTail: {\n length: '0%'\n }, animation: {\n enable: false\n }\n }, {\n radius: '70%',\n pointerWidth: 1,\n color: 'rgba(29,29,29,0.8)',\n cap: {\n color: 'white',\n radius: 4,\n border: {\n width: 2,\n color: 'rgba(29,29,29,0.8)'\n }\n },\n border: {\n width: 2,\n color: 'rgba(29,29,29,0.8)'\n },\n needleTail: {\n color: 'rgba(29,29,29,0.8)',\n length: '20%',\n border: {\n width: 2,\n color: 'rgba(29,29,29,0.8)'\n },\n }, animation: {\n enable: false,\n duration: 500\n }\n }]\n }\n ]\n });\n return gauge1;\n}\nfunction gauge2() {\n var gauge2 = new ej.circulargauge.CircularGauge({\n titleStyle: { color: 'black' },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [\n {\n startAngle: 0, endAngle: 0,\n ranges: [\n {\n startWidth: 4, endWidth: 4,\n start: 0, end: 3,\n color: 'rgba(29,29,29,0.4)'\n }, {\n color: 'rgba(168,145,102,0.1)',\n start: 3, end: 12,\n startWidth: 4, endWidth: 4\n }\n ],\n lineStyle: { width: 0 },\n annotations: [{\n angle: 270,\n radius: '40%',\n content: null\n }, {\n angle: 180,\n radius: '40%',\n content: null\n }, {\n angle: 90,\n radius: '50%',\n content: null\n }, {\n radius: '35%',\n angle: 360, zIndex: '1',\n content: '
    21-06-17
    '\n }], majorTicks: {\n width: 1,\n height: 5,\n interval: 1\n },\n labelStyle: {\n hiddenLabel: 'First',\n font: {\n color: '#8c8c8c',\n size: '0px'\n },\n autoAngle: false\n }, minorTicks: {\n height: 3,\n width: 0.5,\n interval: 0.2\n },\n minimum: 0,\n maximum: 12,\n pointers: [{\n radius: '70%',\n pointerWidth: 2,\n color: 'rgba(29,29,29,1)',\n cap: {\n color: 'rgba(29,29,29,1)',\n radius: 2,\n border: {\n width: 0.2,\n color: 'rgba(168,145,102,1)'\n }\n },\n needleTail: {\n color: 'rgba(168,145,102,1)',\n length: '10%'\n }, animation: {\n enable: false,\n duration: 500\n }\n }]\n }\n ]\n });\n return gauge2;\n}\n\nfunction calcTime(offset) {\n var date = new Date();\n var localTime = date.getTime();\n var localOffset = date.getTimezoneOffset() * 60000;\n var utc = localTime + localOffset;\n var curretDate = new Date(utc + (3600000 * (+offset)));\n return curretDate;\n}\n\n var clockInterval;\n var intervalExecute = true;\n var indianTime = new ej.circulargauge.CircularGauge(gauge1());\n var subGauge1;\n var subGauge2;\n indianTime.appendTo('#clockgauge');\n updateSubGauge1.apply(this);\n updateSubGauge2.apply(this);\n function updateSubGauge1() {\n subGauge1 = new ej.circulargauge.CircularGauge(gauge2());\n subGauge1.appendTo('#minutes');\n }\n function updateSubGauge2() {\n var _this = this;\n subGauge2 = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgba(29,29,29,0.4)' },\n { start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgba(168,145,102,0.1)' }],\n annotations: [{ angle: 270, radius: '40%', content: null },\n { angle: 180, radius: '40%', content: null },\n { angle: 90, radius: '50%', content: null },\n { angle: 360, radius: '35%', zIndex: '1', content: '
    21-06-17
    ' }],\n majorTicks: { width: 1, height: 5, interval: 1 },\n labelStyle: { hiddenLabel: 'First', font: { color: '#8c8c8c', size: '0px' }, autoAngle: false },\n pointers: [{\n cap: {\n color: 'rgba(29,29,29,1)', radius: 2, border: { width: 0.2, color: 'rgba(168,145,102,1)' }\n }, needleTail: { color: 'rgba(168,145,102,1)', length: '10%' }, animation: { enable: false, duration: 500 },\n radius: '70%', pointerWidth: 2, color: 'rgba(29,29,29,1)'\n }], startAngle: 0, endAngle: 0, lineStyle: { width: 0 },\n minorTicks: { height: 3, width: 0.5, interval: 0.2 }, minimum: 0, maximum: 12,\n }],\n loaded: intervalExecute ? (function (args) {\n if (intervalExecute) {\n updateTime(false);\n _this.clockInterval = setInterval(function () {\n updateTime(true, _this.clearInterval);\n }, 1000);\n intervalExecute = false;\n }\n }) : null\n });\n subGauge2.appendTo('#seconds');\n }\n function updateTime(enable, interval) {\n if (document.getElementById('clockgauge') && document.getElementsByClassName('e-circulargauge')) {\n getTime('+5.5', indianTime, enable);\n if (document.getElementById('minutes').childElementCount) {\n getTime('+5.5', subGauge1, enable, true);\n }\n else {\n updateSubGauge1();\n getTime('+5.5', subGauge1, enable, true);\n }\n if (document.getElementById('seconds').childElementCount) {\n getTime('+5.5', subGauge2, enable, true);\n }\n else {\n updateSubGauge2();\n getTime('+5.5', subGauge2, enable, true);\n }\n }\n else {\n clearInterval(interval);\n }\n }\n function getTime(offset, gauge, enable, subGauge) {\n var returnTime = calcTime(offset);\n var seconds = returnTime.getSeconds() * 12 / 60;\n seconds = seconds === 0 ? 12 : seconds;\n if (!subGauge) {\n gauge.axes[0].pointers[2].animation.enable = enable;\n gauge.axes[0].pointers[2].currentValue = seconds === 0.2 ? 0 : gauge.axes[0].pointers[2].currentValue;\n }\n else {\n gauge.axes[0].pointers[0].currentValue = seconds === 0.2 ? 0 : gauge.axes[0].pointers[0].currentValue;\n gauge.axes[0].pointers[0].animation.enable = (gauge.element.id === 'seconds' && enable);\n }\n var hour = (returnTime.getHours() + returnTime.getMinutes() / 60) % 12;\n var minutes = returnTime.getMinutes() * 12 / 60 + returnTime.getSeconds() * 12 / 3600;\n var content;\n var hourValue;\n if (subGauge) {\n if (gauge.element.id === 'minutes') {\n content = '
    ' + Math.floor(returnTime.getMinutes()) + ' M
    ';\n gauge.setPointerValue(0, 0, minutes);\n gauge.setAnnotationValue(0, 3, content);\n }\n else {\n gauge.setPointerValue(0, 0, seconds);\n content = '
    ' + Math.floor(returnTime.getSeconds()) + ' S
    ';\n gauge.setAnnotationValue(0, 3, content);\n }\n }\n else {\n gauge.setPointerValue(0, 0, hour);\n gauge.setPointerValue(0, 1, minutes);\n gauge.setPointerValue(0, 2, seconds);\n hourValue = (Math.floor(returnTime.getHours()) % 12);\n content = '
    ' +\n (hourValue === 0 ? 12 : hourValue) + ':' + Math.floor(returnTime.getMinutes()) +\n (returnTime.getHours() >= 12 ? ' PM' : ' AM') + '
    ';\n gauge.setAnnotationValue(0, 2, content);\n var date = new Date();\n content = '
    ' + date.getDate() + '-' +\n (date.getMonth() + 1) + '-' + date.getFullYear() + '
    ';\n gauge.setAnnotationValue(0, 3, content);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}function gauge1() {\n var gauge1 = new ej.circulargauge.CircularGauge({\n centerY: '45%',\n resized: function (args) {\n location.reload();\n },\n\n titleStyle: { color: 'black', size: '16px' },\n axes: [\n {\n startAngle: 0, endAngle: 0,\n lineStyle: { width: 0 }, radius: ej.base.Browser.isDevice ? '90%' : '70%',\n ranges: [\n {\n start: 0, end: 3,\n color: 'rgb(128,128,128)'\n }, {\n start: 3, end: 12,\n color: 'rgb(192,192,192)'\n }\n ],\n annotations: [{\n angle: 270, radius: '50%', zIndex: '1',\n content: '
    '\n }, {\n angle: 180, radius: '50%', zIndex: '1',\n content: '
    '\n }, {\n angle: 90, zIndex: '1',\n radius: '40%',\n content: '
    11:11 AM
    '\n }, {\n angle: 360, radius: '50%', zIndex: '1',\n content: '
    21-06-17
    '\n }],\n labelStyle: {\n hiddenLabel: 'First', autoAngle: false\n }, majorTicks: {\n width: 2, height: 14, interval: 1\n }, minorTicks: {\n height: 4, width: 1, interval: 0.2\n },\n minimum: 0, maximum: 12,\n pointers: [{\n pointerWidth: 5, radius: '40%',\n border: { width: 0 },\n cap: { radius: 0, border: { width: 0 } },\n needleTail: { length: '0%' }, animation: { enable: false }\n }, {\n radius: '60%', pointerWidth: 5,\n border: {\n width: 0\n },\n cap: {\n radius: 0,\n border: {\n width: 0\n }\n },\n needleTail: {\n length: '0%'\n }, animation: {\n enable: false\n }\n }, {\n radius: '70%',\n pointerWidth: 1,\n cap: {\n radius: 4,\n border: {\n width: 2\n }\n },\n border: {\n width: 2\n },\n needleTail: {\n length: '20%',\n border: {\n width: 2\n },\n }, animation: {\n enable: false,\n duration: 500\n }\n }]\n }\n ]\n });\n return gauge1;\n}\nfunction gauge2() {\n var gauge2 = new ej.circulargauge.CircularGauge({\n background: 'transparent',\n titleStyle: { color: 'black' },\n\n axes: [\n {\n startAngle: 0, endAngle: 0,\n ranges: [\n {\n startWidth: 4, endWidth: 4,\n start: 0, end: 3,\n color: 'rgb(128,128,128)'\n }, {\n color: 'rgb(192,192,192)',\n start: 3, end: 12,\n startWidth: 4, endWidth: 4\n }\n ],\n lineStyle: { width: 0 },\n annotations: [{\n angle: 270,\n radius: '40%',\n content: null\n }, {\n angle: 180,\n radius: '40%',\n content: null\n }, {\n angle: 90,\n radius: '50%',\n content: null\n }, {\n radius: '35%',\n angle: 360, zIndex: '1',\n content: '
    21-06-17
    '\n }], majorTicks: {\n width: 1,\n height: 5,\n interval: 1\n },\n labelStyle: {\n hiddenLabel: 'First',\n font: {\n size: '0px'\n },\n autoAngle: false\n }, minorTicks: {\n height: 3,\n width: 0.5,\n interval: 0.2\n },\n minimum: 0,\n maximum: 12,\n pointers: [{\n radius: '70%',\n pointerWidth: 2,\n cap: {\n radius: 2,\n border: {\n width: 0.2\n }\n },\n needleTail: {\n length: '10%'\n }, animation: {\n enable: false,\n duration: 500\n }\n }]\n }\n ]\n });\n return gauge2;\n}\n\nfunction calcTime(offset) {\n var date = new Date();\n var localTime = date.getTime();\n var localOffset = date.getTimezoneOffset() * 60000;\n var utc = localTime + localOffset;\n var curretDate = new Date(utc + (3600000 * (+offset)));\n return curretDate;\n}\n\n var clockInterval;\n var intervalExecute = true;\n var indianTime = new ej.circulargauge.CircularGauge(gauge1());\n var subGauge1;\n var subGauge2;\n indianTime.appendTo('#clockgauge');\n updateSubGauge1.apply(this);\n updateSubGauge2.apply(this);\n function updateSubGauge1() {\n subGauge1 = new ej.circulargauge.CircularGauge(gauge2());\n subGauge1.appendTo('#minutes');\n }\n function updateSubGauge2() {\n var _this = this;\n subGauge2 = new ej.circulargauge.CircularGauge({\n background: 'transparent',\n\n axes: [{\n ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgb(128,128,128)' },\n { start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgb(192,192,192)' }],\n annotations: [{ angle: 270, radius: '40%', content: null },\n { angle: 180, radius: '40%', content: null },\n { angle: 90, radius: '50%', content: null },\n { angle: 360, radius: '35%', zIndex: '1', content: '
    21-06-17
    ' }],\n majorTicks: { width: 1, height: 5, interval: 1 },\n labelStyle: { hiddenLabel: 'First', font: { size: '0px' }, autoAngle: false },\n pointers: [{\n cap: {\n radius: 2, border: { width: 0.2 }\n }, needleTail: { length: '10%' }, animation: { enable: false, duration: 500 },\n radius: '70%', pointerWidth: 2,\n }], startAngle: 0, endAngle: 0, lineStyle: { width: 0 },\n minorTicks: { height: 3, width: 0.5, interval: 0.2 }, minimum: 0, maximum: 12,\n }],\n loaded: intervalExecute ? (function (args) {\n if (intervalExecute) {\n updateTime(false);\n _this.clockInterval = setInterval(function () {\n updateTime(true, _this.clearInterval);\n }, 1000);\n intervalExecute = false;\n }\n }) : null\n });\n subGauge2.appendTo('#seconds');\n }\n function updateTime(enable, interval) {\n if (document.getElementById('clockgauge') && document.getElementsByClassName('e-circulargauge')) {\n getTime('+5.5', indianTime, enable);\n if (document.getElementById('minutes').childElementCount) {\n getTime('+5.5', subGauge1, enable, true);\n }\n else {\n updateSubGauge1();\n getTime('+5.5', subGauge1, enable, true);\n }\n if (document.getElementById('seconds').childElementCount) {\n getTime('+5.5', subGauge2, enable, true);\n }\n else {\n updateSubGauge2();\n getTime('+5.5', subGauge2, enable, true);\n }\n }\n else {\n clearInterval(interval);\n }\n }\n function getTime(offset, gauge, enable, subGauge) {\n var returnTime = calcTime(offset);\n var seconds = returnTime.getSeconds() * 12 / 60;\n seconds = seconds === 0 ? 12 : seconds;\n if (!subGauge) {\n gauge.axes[0].pointers[2].animation.enable = enable;\n gauge.axes[0].pointers[2].currentValue = seconds === 0.2 ? 0 : gauge.axes[0].pointers[2].currentValue;\n }\n else {\n gauge.axes[0].pointers[0].currentValue = seconds === 0.2 ? 0 : gauge.axes[0].pointers[0].currentValue;\n gauge.axes[0].pointers[0].animation.enable = (gauge.element.id === 'seconds' && enable);\n }\n var hour = (returnTime.getHours() + returnTime.getMinutes() / 60) % 12;\n var minutes = returnTime.getMinutes() * 12 / 60 + returnTime.getSeconds() * 12 / 3600;\n var content;\n var hourValue;\n if (subGauge) {\n if (gauge.element.id === 'minutes') {\n content = '
    ' + Math.floor(returnTime.getMinutes()) + ' M
    ';\n gauge.setPointerValue(0, 0, minutes);\n gauge.setAnnotationValue(0, 3, content);\n }\n else {\n gauge.setPointerValue(0, 0, seconds);\n content = '
    ' + Math.floor(returnTime.getSeconds()) + ' S
    ';\n gauge.setAnnotationValue(0, 3, content);\n }\n }\n else {\n gauge.setPointerValue(0, 0, hour);\n gauge.setPointerValue(0, 1, minutes);\n gauge.setPointerValue(0, 2, seconds);\n hourValue = (Math.floor(returnTime.getHours()) % 12);\n content = '
    ' +\n (hourValue === 0 ? 12 : hourValue) + ':' + Math.floor(returnTime.getMinutes()) +\n (returnTime.getHours() >= 12 ? ' PM' : ' AM') + '
    ';\n gauge.setAnnotationValue(0, 2, content);\n var date = new Date();\n content = '
    ' + date.getDate() + '-' +\n (date.getMonth() + 1) + '-' + date.getFullYear() + '
    ';\n gauge.setAnnotationValue(0, 3, content);\n }\n }\n"} \ No newline at end of file diff --git a/src/circular-gauge/annotation.js b/src/circular-gauge/annotation.js index b6c80ffa..4866aaca 100644 --- a/src/circular-gauge/annotation.js +++ b/src/circular-gauge/annotation.js @@ -4,11 +4,13 @@ function gauge1() { resized: function (args) { location.reload(); }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end titleStyle: { color: 'black', size: '16px' }, axes: [ { @@ -17,10 +19,10 @@ function gauge1() { ranges: [ { start: 0, end: 3, - color: 'rgba(29,29,29,0.6)' + color: 'rgb(128,128,128)' }, { start: 3, end: 12, - color: 'rgba(226, 226, 226, 0.6)' + color: 'rgb(192,192,192)' } ], annotations: [{ @@ -32,36 +34,33 @@ function gauge1() { }, { angle: 90, zIndex: '1', radius: '40%', - content: '
    11:11 AM
    ' + content: '
    11:11 AM
    ' }, { angle: 360, radius: '50%', zIndex: '1', content: '
    21-06-17
    ' }], labelStyle: { - hiddenLabel: 'First', font: { color: 'rgb(29,29,29)' }, autoAngle: false + hiddenLabel: 'First', autoAngle: false }, majorTicks: { - width: 2, height: 14, interval: 1, color: 'rgb(29,29,29)' + width: 2, height: 14, interval: 1 }, minorTicks: { - height: 4, width: 1, interval: 0.2, color: 'rgb(29,29,29)' + height: 4, width: 1, interval: 0.2 }, minimum: 0, maximum: 12, pointers: [{ - pointerWidth: 5, radius: '40%', color: 'rgba(29,29,29,0.8)', - border: { width: 0, color: '#679EEF' }, - cap: { radius: 0, border: { width: 0, color: 'red' } }, + pointerWidth: 5, radius: '40%', + border: { width: 0 }, + cap: { radius: 0, border: { width: 0 } }, needleTail: { length: '0%' }, animation: { enable: false } }, { - radius: '60%', pointerWidth: 5, color: 'rgba(29,29,29,0.8)', + radius: '60%', pointerWidth: 5, border: { - width: 0, - color: 'rgba(29,29,29,0.8)' + width: 0 }, cap: { - color: 'rgba(29,29,29,0.8)', radius: 0, border: { - width: 0, - color: 'red' + width: 0 } }, needleTail: { @@ -72,25 +71,19 @@ function gauge1() { }, { radius: '70%', pointerWidth: 1, - color: 'rgba(29,29,29,0.8)', cap: { - color: 'white', radius: 4, border: { - width: 2, - color: 'rgba(29,29,29,0.8)' + width: 2 } }, border: { - width: 2, - color: 'rgba(29,29,29,0.8)' + width: 2 }, needleTail: { - color: 'rgba(29,29,29,0.8)', length: '20%', border: { - width: 2, - color: 'rgba(29,29,29,0.8)' + width: 2 }, }, animation: { enable: false, @@ -104,12 +97,15 @@ function gauge1() { } function gauge2() { var gauge2 = new ej.circulargauge.CircularGauge({ + background: 'transparent', titleStyle: { color: 'black' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [ { startAngle: 0, endAngle: 0, @@ -117,9 +113,9 @@ function gauge2() { { startWidth: 4, endWidth: 4, start: 0, end: 3, - color: 'rgba(29,29,29,0.4)' + color: 'rgb(128,128,128)' }, { - color: 'rgba(168,145,102,0.1)', + color: 'rgb(192,192,192)', start: 3, end: 12, startWidth: 4, endWidth: 4 } @@ -149,7 +145,6 @@ function gauge2() { labelStyle: { hiddenLabel: 'First', font: { - color: '#8c8c8c', size: '0px' }, autoAngle: false @@ -163,17 +158,13 @@ function gauge2() { pointers: [{ radius: '70%', pointerWidth: 2, - color: 'rgba(29,29,29,1)', cap: { - color: 'rgba(29,29,29,1)', radius: 2, border: { - width: 0.2, - color: 'rgba(168,145,102,1)' + width: 0.2 } }, needleTail: { - color: 'rgba(168,145,102,1)', length: '10%' }, animation: { enable: false, @@ -210,25 +201,28 @@ this.default = function () { function updateSubGauge2() { var _this = this; subGauge2 = new ej.circulargauge.CircularGauge({ + background: 'transparent', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ - ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgba(29,29,29,0.4)' }, - { start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgba(168,145,102,0.1)' }], + ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgb(128,128,128)' }, + { start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgb(192,192,192)' }], annotations: [{ angle: 270, radius: '40%', content: null }, { angle: 180, radius: '40%', content: null }, { angle: 90, radius: '50%', content: null }, { angle: 360, radius: '35%', zIndex: '1', content: '
    21-06-17
    ' }], majorTicks: { width: 1, height: 5, interval: 1 }, - labelStyle: { hiddenLabel: 'First', font: { color: '#8c8c8c', size: '0px' }, autoAngle: false }, + labelStyle: { hiddenLabel: 'First', font: { size: '0px' }, autoAngle: false }, pointers: [{ cap: { - color: 'rgba(29,29,29,1)', radius: 2, border: { width: 0.2, color: 'rgba(168,145,102,1)' } - }, needleTail: { color: 'rgba(168,145,102,1)', length: '10%' }, animation: { enable: false, duration: 500 }, - radius: '70%', pointerWidth: 2, color: 'rgba(29,29,29,1)' + radius: 2, border: { width: 0.2 } + }, needleTail: { length: '10%' }, animation: { enable: false, duration: 500 }, + radius: '70%', pointerWidth: 2, }], startAngle: 0, endAngle: 0, lineStyle: { width: 0 }, minorTicks: { height: 3, width: 0.5, interval: 0.2 }, minimum: 0, maximum: 12, }], diff --git a/src/circular-gauge/apple-watch-rings-stack.json b/src/circular-gauge/apple-watch-rings-stack.json new file mode 100644 index 00000000..df27a4fc --- /dev/null +++ b/src/circular-gauge/apple-watch-rings-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n MOVE\n 65%
    \n 338/520 CAL\n
    \n
    \n
    \n
    \n
    \n EXERCISE\n 43%
    \n 13/30 MIN\n
    \n
    \n
    \n
    \n
    \n STAND\n 58%
    \n 7/12 HR\n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for Apple watch rings\n */\n\n var gauge1 = new ej.circulargauge.CircularGauge(circular1(), '#gauge1');\n var gauge2 = new ej.circulargauge.CircularGauge(circular2(), '#gauge2');\n var gauge3 = new ej.circulargauge.CircularGauge(circular3(), '#gauge3');\n var gauge4 = new ej.circulargauge.CircularGauge(circular4(), '#gauge4');\n function circular1() {\n var circulargauge1 = new ej.circulargauge.CircularGauge({\n\n width: '400px',\n height: '400px',\n axes: [{\n annotations: [{\n angle: 8, radius: '80%', zIndex: '1',\n content: '
    '\n }, {\n angle: 11, radius: '58%', zIndex: '1',\n content: '
    '\n }, {\n angle: 16, radius: '36%', zIndex: '1',\n content: '
    '\n }],\n startAngle: 0,\n endAngle: 360,\n labelStyle: {\n position: 'Inside',\n useRangeColor: true,\n font: {\n size: '0px', color: 'white',\n fontFamily: 'Roboto', fontStyle: 'Regular'\n }\n },\n lineStyle: {\n width: 0\n },\n majorTicks: { height: 0, }, minorTicks: { height: 0 },\n minimum: 0, maximum: 100,\n ranges: [{\n start: 0,\n end: 100,\n radius: '90%',\n startWidth: 40, endWidth: 40,\n color: '#E30219', opacity: 0.2\n },\n {\n start: 0, end: 100,\n radius: '68%',\n startWidth: 40, endWidth: 40,\n color: '#3EDE00', opacity: 0.2\n },\n {\n start: 0, end: 100,\n radius: '46%',\n startWidth: 40, endWidth: 40,\n color: '#18F8F6', opacity: 0.2\n }],\n pointers: [{\n roundedCornerRadius: 25,\n value: 65,\n type: 'RangeBar',\n radius: '90%',\n color: '#E2011A',\n animation: { enable: true },\n pointerWidth: 40\n },\n {\n roundedCornerRadius: 25,\n value: 43,\n type: 'RangeBar',\n radius: '68%',\n color: '#3FE000',\n animation: { enable: true },\n pointerWidth: 40\n },\n {\n roundedCornerRadius: 25,\n value: 58,\n type: 'RangeBar',\n radius: '46%',\n color: '#00C9E6',\n animation: { enable: true },\n pointerWidth: 40\n }]\n }]\n });\n return circulargauge1;\n }\n function circular2() {\n var circulargauge2 = new ej.circulargauge.CircularGauge({\n\n height: '65px',\n width: '65px',\n axes: [{\n annotations: [{\n angle: 0, radius: '0%', zIndex: '1',\n content: '
    '\n }],\n lineStyle: { width: 0 },\n startAngle: 0, endAngle: 360,\n labelStyle: {\n position: 'Inside', useRangeColor: true,\n font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }\n },\n minimum: 0, maximum: 100,\n majorTicks: { height: 0, }, minorTicks: { height: 0 },\n ranges: [{\n start: 0, end: 100,\n radius: '100%',\n startWidth: 8, endWidth: 8,\n color: '#E30219', opacity: 0.2\n }],\n pointers: [{\n roundedCornerRadius: 5,\n value: 65,\n type: 'RangeBar',\n radius: '100%',\n color: '#E2011A',\n animation: { enable: true },\n pointerWidth: 8\n }]\n }]\n });\n return circulargauge2;\n }\n function circular3() {\n var circulargauge3 = new ej.circulargauge.CircularGauge({\n\n height: '65px',\n width: '65px',\n axes: [{\n annotations: [{\n angle: 0, radius: '0%', zIndex: '1',\n content: '
    '\n }],\n startAngle: 0, endAngle: 360,\n lineStyle: { width: 0 },\n majorTicks: { height: 0, }, minorTicks: { height: 0 },\n labelStyle: {\n position: 'Inside', useRangeColor: true,\n font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }\n },\n maximum: 100, minimum: 0,\n ranges: [{\n start: 0, end: 100,\n radius: '100%',\n startWidth: 8, endWidth: 8,\n color: '#3EDE00', opacity: 0.2\n }],\n pointers: [{\n roundedCornerRadius: 5,\n value: 43,\n type: 'RangeBar',\n radius: '100%',\n color: '#3FE000',\n animation: { enable: true },\n pointerWidth: 8\n }]\n }]\n });\n return circulargauge3;\n }\n function circular4() {\n var circulargauge4 = new ej.circulargauge.CircularGauge({\n\n height: '65px',\n width: '65px',\n axes: [{\n annotations: [{\n angle: 0, radius: '0%', zIndex: '1',\n content: '
    '\n }],\n startAngle: 0, endAngle: 360,\n lineStyle: { width: 0 },\n labelStyle: {\n position: 'Inside', useRangeColor: true,\n font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }\n },\n majorTicks: { height: 0, }, minorTicks: { height: 0 },\n minimum: 0, maximum: 100,\n ranges: [{\n start: 0, end: 100,\n radius: '100%',\n startWidth: 8, endWidth: 8,\n color: '#18F8F6', opacity: 0.2\n }],\n pointers: [{\n roundedCornerRadius: 5,\n value: 58,\n type: 'RangeBar',\n radius: '100%',\n color: '#00C9E6',\n animation: { enable: true },\n pointerWidth: 8\n }]\n }]\n });\n return circulargauge4;\n }\n\n"} \ No newline at end of file diff --git a/src/circular-gauge/apple-watch-rings.html b/src/circular-gauge/apple-watch-rings.html new file mode 100644 index 00000000..c23a7b7b --- /dev/null +++ b/src/circular-gauge/apple-watch-rings.html @@ -0,0 +1,132 @@ +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + MOVE + 65%
    + 338/520 CAL +
    +
    +
    +
    +
    + EXERCISE + 43%
    + 13/30 MIN +
    +
    +
    +
    +
    + STAND + 58%
    + 7/12 HR +
    +
    +
    +
    +
    +
    +
    +

    + This sample resembles the appearance of Apple watch rings. This functions similar to an activity tracker that + denotes the move, exercise, and stand details. +

    +
    +
    +

    + In this example, you can see how to make the circular gauge look like the Apple watch rings. Ranges are rendered + with rounded corners and annotations are placed to denote the move, exercise, and stand values. +

    +

    + For more information on ranges, refer to this + documentation + section. +

    +
    + + + \ No newline at end of file diff --git a/src/circular-gauge/apple-watch-rings.js b/src/circular-gauge/apple-watch-rings.js new file mode 100644 index 00000000..ff6b26a0 --- /dev/null +++ b/src/circular-gauge/apple-watch-rings.js @@ -0,0 +1,237 @@ +/** + * Sample for Apple watch rings + */ +this.default = function () { + var gauge1 = new ej.circulargauge.CircularGauge(circular1(), '#gauge1'); + var gauge2 = new ej.circulargauge.CircularGauge(circular2(), '#gauge2'); + var gauge3 = new ej.circulargauge.CircularGauge(circular3(), '#gauge3'); + var gauge4 = new ej.circulargauge.CircularGauge(circular4(), '#gauge4'); + function circular1() { + var circulargauge1 = new ej.circulargauge.CircularGauge({ + // custom code start + load: function (args) { + var selectedTheme1 = location.hash.split('/')[1]; + selectedTheme1 = selectedTheme1 ? selectedTheme1 : 'Material'; + args.gauge.theme = (selectedTheme1.charAt(0).toUpperCase() + selectedTheme1.slice(1)); + }, + // custom code end + width: '400px', + height: '400px', + axes: [{ + annotations: [{ + angle: 8, radius: '80%', zIndex: '1', + content: '
    ' + }, { + angle: 11, radius: '58%', zIndex: '1', + content: '
    ' + }, { + angle: 16, radius: '36%', zIndex: '1', + content: '
    ' + }], + startAngle: 0, + endAngle: 360, + labelStyle: { + position: 'Inside', + useRangeColor: true, + font: { + size: '0px', color: 'white', + fontFamily: 'Roboto', fontStyle: 'Regular' + } + }, + lineStyle: { + width: 0 + }, + majorTicks: { height: 0, }, minorTicks: { height: 0 }, + minimum: 0, maximum: 100, + ranges: [{ + start: 0, + end: 100, + radius: '90%', + startWidth: 40, endWidth: 40, + color: '#E30219', opacity: 0.2 + }, + { + start: 0, end: 100, + radius: '68%', + startWidth: 40, endWidth: 40, + color: '#3EDE00', opacity: 0.2 + }, + { + start: 0, end: 100, + radius: '46%', + startWidth: 40, endWidth: 40, + color: '#18F8F6', opacity: 0.2 + }], + pointers: [{ + roundedCornerRadius: 25, + value: 65, + type: 'RangeBar', + radius: '90%', + color: '#E2011A', + animation: { enable: true }, + pointerWidth: 40 + }, + { + roundedCornerRadius: 25, + value: 43, + type: 'RangeBar', + radius: '68%', + color: '#3FE000', + animation: { enable: true }, + pointerWidth: 40 + }, + { + roundedCornerRadius: 25, + value: 58, + type: 'RangeBar', + radius: '46%', + color: '#00C9E6', + animation: { enable: true }, + pointerWidth: 40 + }] + }] + }); + return circulargauge1; + } + function circular2() { + var circulargauge2 = new ej.circulargauge.CircularGauge({ + // custom code start + load: function (args) { + var selectedTheme2 = location.hash.split('/')[1]; + selectedTheme2 = selectedTheme2 ? selectedTheme2 : 'Material'; + args.gauge.theme = (selectedTheme2.charAt(0).toUpperCase() + selectedTheme2.slice(1)); + if (selectedTheme2 === 'highcontrast') { + args.gauge.axes[0].annotations[0].content = + '
    '; + } + }, + // custom code end + height: '65px', + width: '65px', + axes: [{ + annotations: [{ + angle: 0, radius: '0%', zIndex: '1', + content: '
    ' + }], + lineStyle: { width: 0 }, + startAngle: 0, endAngle: 360, + labelStyle: { + position: 'Inside', useRangeColor: true, + font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' } + }, + minimum: 0, maximum: 100, + majorTicks: { height: 0, }, minorTicks: { height: 0 }, + ranges: [{ + start: 0, end: 100, + radius: '100%', + startWidth: 8, endWidth: 8, + color: '#E30219', opacity: 0.2 + }], + pointers: [{ + roundedCornerRadius: 5, + value: 65, + type: 'RangeBar', + radius: '100%', + color: '#E2011A', + animation: { enable: true }, + pointerWidth: 8 + }] + }] + }); + return circulargauge2; + } + function circular3() { + var circulargauge3 = new ej.circulargauge.CircularGauge({ + // custom code start + load: function (args) { + var selectedTheme3 = location.hash.split('/')[1]; + selectedTheme3 = selectedTheme3 ? selectedTheme3 : 'Material'; + args.gauge.theme = (selectedTheme3.charAt(0).toUpperCase() + selectedTheme3.slice(1)); + if (selectedTheme3 === 'highcontrast') { + args.gauge.axes[0].annotations[0].content = + '
    '; + } + }, + // custom code end + height: '65px', + width: '65px', + axes: [{ + annotations: [{ + angle: 0, radius: '0%', zIndex: '1', + content: '
    ' + }], + startAngle: 0, endAngle: 360, + lineStyle: { width: 0 }, + majorTicks: { height: 0, }, minorTicks: { height: 0 }, + labelStyle: { + position: 'Inside', useRangeColor: true, + font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' } + }, + maximum: 100, minimum: 0, + ranges: [{ + start: 0, end: 100, + radius: '100%', + startWidth: 8, endWidth: 8, + color: '#3EDE00', opacity: 0.2 + }], + pointers: [{ + roundedCornerRadius: 5, + value: 43, + type: 'RangeBar', + radius: '100%', + color: '#3FE000', + animation: { enable: true }, + pointerWidth: 8 + }] + }] + }); + return circulargauge3; + } + function circular4() { + var circulargauge4 = new ej.circulargauge.CircularGauge({ + // custom code start + load: function (args) { + var selectedTheme4 = location.hash.split('/')[1]; + selectedTheme4 = selectedTheme4 ? selectedTheme4 : 'Material'; + args.gauge.theme = (selectedTheme4.charAt(0).toUpperCase() + selectedTheme4.slice(1)); + if (selectedTheme4 === 'highcontrast') { + args.gauge.axes[0].annotations[0].content = + '
    '; + } + }, + // custom code end + height: '65px', + width: '65px', + axes: [{ + annotations: [{ + angle: 0, radius: '0%', zIndex: '1', + content: '
    ' + }], + startAngle: 0, endAngle: 360, + lineStyle: { width: 0 }, + labelStyle: { + position: 'Inside', useRangeColor: true, + font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' } + }, + majorTicks: { height: 0, }, minorTicks: { height: 0 }, + minimum: 0, maximum: 100, + ranges: [{ + start: 0, end: 100, + radius: '100%', + startWidth: 8, endWidth: 8, + color: '#18F8F6', opacity: 0.2 + }], + pointers: [{ + roundedCornerRadius: 5, + value: 58, + type: 'RangeBar', + radius: '100%', + color: '#00C9E6', + animation: { enable: true }, + pointerWidth: 8 + }] + }] + }); + return circulargauge4; + } +}; diff --git a/src/circular-gauge/arc-gauge-stack.json b/src/circular-gauge/arc-gauge-stack.json index 93b1b985..81598f71 100644 --- a/src/circular-gauge/arc-gauge-stack.json +++ b/src/circular-gauge/arc-gauge-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Arc gauge sample\n */\nvar sliderValue = 60;\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var arctheme = location.hash.split('/')[1];\n arctheme = arctheme ? arctheme : 'Material';\n args.gauge.theme = (arctheme.charAt(0).toUpperCase() + arctheme.slice(1));\n },\n loaded: function (args) {\n var annotation = document.getElementById(args.gauge.element.id + '_Annotations_0');\n if (annotation) {\n annotationRender('slider', circulargauge.axes[0].pointers[0].value);\n }\n },\n title: 'Progress Tracker',\n titleStyle: { size: '18px', },\n axes: [{\n annotations: [{\n content: '
    ' +\n sliderValue.toString() + '/100
    ',\n angle: 0,\n zIndex: '1',\n radius: '0%'\n },\n {\n content: '
    ',\n angle: 0,\n zIndex: '1',\n radius: '-100%'\n },\n ],\n lineStyle: { width: 0 },\n labelStyle: {\n position: 'Inside', useRangeColor: true,\n font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 0, }, minorTicks: { height: 0 },\n startAngle: 200, endAngle: 160, minimum: 0, maximum: 100, radius: '80%',\n ranges: [\n {\n start: 0, end: 100,\n radius: '90%',\n startWidth: 30, endWidth: 30,\n color: '#E0E0E0',\n roundedCornerRadius: 20\n },\n ],\n pointers: [{\n roundedCornerRadius: 20,\n value: 60,\n type: 'RangeBar',\n radius: '90%',\n color: '#e5ce20',\n border: {\n color: 'grey',\n width: 0\n },\n animation: {\n enable: false\n },\n pointerWidth: 30\n }]\n }]\n });\n circulargauge.appendTo('#range-container');\n function annotationRender(id, sliderValue) {\n var first = new ej.inputs.Slider({\n min: 0, max: 100,\n type: 'MinRange',\n limits: { enabled: true, minStart: 0, minEnd: 100 },\n value: sliderValue,\n change: function (args) {\n sliderValue = args.value;\n if (!isNaN(sliderValue)) {\n circulargauge.isProtectedOnChange = true;\n if (sliderValue >= 0 && sliderValue < 20) {\n circulargauge.axes[0].pointers[0].color = '#ea501a';\n }\n else if (sliderValue >= 20 && sliderValue < 40) {\n circulargauge.axes[0].pointers[0].color = '#f79c02';\n }\n else if (sliderValue >= 40 && sliderValue < 60) {\n circulargauge.axes[0].pointers[0].color = '#e5ce20';\n }\n else if (sliderValue >= 60 && sliderValue < 80) {\n circulargauge.axes[0].pointers[0].color = '#a1cb43';\n }\n else if (sliderValue >= 80 && sliderValue < 100) {\n circulargauge.axes[0].pointers[0].color = '#82b944';\n }\n circulargauge.setPointerValue(0, 0, sliderValue);\n if (document.getElementById('pointervalue')) {\n document.getElementById('pointervalue').innerHTML = circulargauge.axes[0].pointers[0].value.toString() + '/100';\n }\n }\n }\n });\n first.appendTo('#' + id);\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Arc gauge sample\n */\nvar sliderValue = 60;\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n\n loaded: function (args) {\n var annotation = document.getElementById(args.gauge.element.id + '_Annotations_0');\n if (annotation) {\n annotationRender('slider', circulargauge.axes[0].pointers[0].value);\n }\n },\n title: 'Progress Tracker',\n titleStyle: { size: '18px', },\n axes: [{\n annotations: [{\n content: '
    ' +\n sliderValue.toString() + '/100
    ',\n angle: 0,\n zIndex: '1',\n radius: '0%'\n },\n {\n content: '
    ',\n angle: 0,\n zIndex: '1',\n radius: '-100%'\n },\n ],\n lineStyle: { width: 0 },\n labelStyle: {\n position: 'Inside', useRangeColor: true,\n font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 0, }, minorTicks: { height: 0 },\n startAngle: 200, endAngle: 160, minimum: 0, maximum: 100, radius: '80%',\n ranges: [\n {\n start: 0, end: 100,\n radius: '90%',\n startWidth: 30, endWidth: 30,\n color: '#E0E0E0',\n roundedCornerRadius: 20\n },\n ],\n pointers: [{\n roundedCornerRadius: 20,\n value: 60,\n type: 'RangeBar',\n radius: '90%',\n color: '#e5ce20',\n border: {\n color: 'grey',\n width: 0\n },\n animation: {\n enable: false\n },\n pointerWidth: 30\n }]\n }]\n });\n circulargauge.appendTo('#range-container');\n function annotationRender(id, sliderValue) {\n var first = new ej.inputs.Slider({\n min: 0, max: 100,\n type: 'MinRange',\n limits: { enabled: true, minStart: 0, minEnd: 100 },\n value: sliderValue,\n change: function (args) {\n sliderValue = args.value;\n if (!isNaN(sliderValue)) {\n circulargauge.isProtectedOnChange = true;\n if (sliderValue >= 0 && sliderValue < 20) {\n circulargauge.axes[0].pointers[0].color = '#ea501a';\n }\n else if (sliderValue >= 20 && sliderValue < 40) {\n circulargauge.axes[0].pointers[0].color = '#f79c02';\n }\n else if (sliderValue >= 40 && sliderValue < 60) {\n circulargauge.axes[0].pointers[0].color = '#e5ce20';\n }\n else if (sliderValue >= 60 && sliderValue < 80) {\n circulargauge.axes[0].pointers[0].color = '#a1cb43';\n }\n else if (sliderValue >= 80 && sliderValue < 100) {\n circulargauge.axes[0].pointers[0].color = '#82b944';\n }\n circulargauge.setPointerValue(0, 0, sliderValue);\n if (document.getElementById('pointervalue')) {\n document.getElementById('pointervalue').innerHTML = circulargauge.axes[0].pointers[0].value.toString() + '/100';\n }\n }\n }\n });\n first.appendTo('#' + id);\n }\n"} \ No newline at end of file diff --git a/src/circular-gauge/arc-gauge.js b/src/circular-gauge/arc-gauge.js index 20bbf1a4..8fccc4cf 100644 --- a/src/circular-gauge/arc-gauge.js +++ b/src/circular-gauge/arc-gauge.js @@ -4,11 +4,13 @@ var sliderValue = 60; this.default = function () { var circulargauge = new ej.circulargauge.CircularGauge({ + // custom code start load: function (args) { var arctheme = location.hash.split('/')[1]; arctheme = arctheme ? arctheme : 'Material'; args.gauge.theme = (arctheme.charAt(0).toUpperCase() + arctheme.slice(1)); }, + //custom code end loaded: function (args) { var annotation = document.getElementById(args.gauge.element.id + '_Annotations_0'); if (annotation) { diff --git a/src/circular-gauge/compass-stack.json b/src/circular-gauge/compass-stack.json index 47f634a0..bd8a3e5c 100644 --- a/src/circular-gauge/compass-stack.json +++ b/src/circular-gauge/compass-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Pointer Color
    \n     		\n
    \n \n
    \n
    \n
    Label Color
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for direction compass\n */\n\n var value = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', ''];\n var pointerColor;\n var labelColor;\n var circulargauge = new ej.circulargauge.CircularGauge({\n axisLabelRender: function (args) {\n args.text = value[args.value];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n radius: '70%',\n lineStyle: { width: 10, color: '#E0E0E0' },\n labelStyle: {\n font: {\n size: '12px', fontFamily: 'Roboto'\n },\n useRangeColor: true,\n autoAngle: true,\n hiddenLabel: 'Last'\n }, majorTicks: {\n height: 15,\n interval: 1,\n color: '#9E9E9E'\n }, minorTicks: {\n height: 10,\n interval: 0.5,\n color: '#9E9E9E'\n },\n startAngle: 0,\n endAngle: 360,\n minimum: 0,\n maximum: 8,\n ranges: [{\n start: 7,\n end: 7,\n color: '#f03e3e'\n }],\n pointers: [{\n value: 7,\n radius: '50%',\n color: '#f03e3e',\n pointerWidth: 20,\n cap: {\n radius: 0\n },\n animation: { enable: false }\n }, {\n value: 3,\n radius: '50%',\n color: '#9E9E9E',\n pointerWidth: 20,\n cap: {\n radius: 0\n },\n animation: { enable: false }\n }]\n }]\n });\n circulargauge.appendTo('#direction-container');\n pointerColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var rangeColor = pointerColor.value.toString();\n circulargauge.axes[0].pointers[0].color = rangeColor;\n circulargauge.setPointerValue(0, 0, circulargauge.axes[0].pointers[0].value);\n }\n });\n pointerColor.appendTo('#poiterColor');\n labelColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var rangeColor = labelColor.value.toString();\n circulargauge.axes[0].ranges[0].color = rangeColor;\n circulargauge.refresh();\n }\n });\n labelColor.appendTo('#labelColor');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Pointer Color
    \n     		\n
    \n \n
    \n
    \n
    Label Color
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for direction compass\n */\n\n var value = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', ''];\n var pointerColor;\n var labelColor;\n var circulargauge = new ej.circulargauge.CircularGauge({\n axisLabelRender: function (args) {\n args.text = value[args.value];\n },\n\n axes: [{\n radius: '70%',\n lineStyle: { width: 10 },\n labelStyle: {\n font: {\n size: '12px', fontFamily: 'Roboto'\n },\n autoAngle: true,\n hiddenLabel: 'Last'\n }, majorTicks: {\n height: 15,\n interval: 1\n }, minorTicks: {\n height: 10,\n interval: 0.5\n },\n startAngle: 0,\n endAngle: 360,\n minimum: 0,\n maximum: 8,\n ranges: [{\n start: 7,\n end: 7\n }],\n pointers: [{\n value: 7,\n radius: '50%',\n color: '#f03e3e',\n pointerWidth: 20,\n cap: {\n radius: 0\n },\n animation: { enable: false }\n }, {\n value: 3,\n radius: '50%',\n color: '#9E9E9E',\n pointerWidth: 20,\n cap: {\n radius: 0\n },\n animation: { enable: false }\n }]\n }]\n });\n circulargauge.appendTo('#direction-container');\n // Code for Property\n pointerColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var rangeColor = pointerColor.value.toString();\n circulargauge.axes[0].pointers[0].color = rangeColor;\n circulargauge.setPointerValue(0, 0, circulargauge.axes[0].pointers[0].value);\n }\n });\n pointerColor.appendTo('#poiterColor');\n labelColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var rangeColor = labelColor.value.toString();\n circulargauge.axes[0].ranges[0].color = rangeColor;\n circulargauge.refresh();\n }\n });\n labelColor.appendTo('#labelColor');\n"} \ No newline at end of file diff --git a/src/circular-gauge/compass.html b/src/circular-gauge/compass.html index 20014987..09aafe34 100644 --- a/src/circular-gauge/compass.html +++ b/src/circular-gauge/compass.html @@ -4,6 +4,7 @@
    +
    @@ -53,9 +54,10 @@ documentation section.

    - + \ No newline at end of file + + \ No newline at end of file diff --git a/src/circular-gauge/compass.js b/src/circular-gauge/compass.js index 8f88fbeb..ae789d2e 100644 --- a/src/circular-gauge/compass.js +++ b/src/circular-gauge/compass.js @@ -9,29 +9,28 @@ this.default = function () { axisLabelRender: function (args) { args.text = value[args.value]; }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ radius: '70%', - lineStyle: { width: 10, color: '#E0E0E0' }, + lineStyle: { width: 10 }, labelStyle: { font: { size: '12px', fontFamily: 'Roboto' }, - useRangeColor: true, autoAngle: true, hiddenLabel: 'Last' }, majorTicks: { height: 15, - interval: 1, - color: '#9E9E9E' + interval: 1 }, minorTicks: { height: 10, - interval: 0.5, - color: '#9E9E9E' + interval: 0.5 }, startAngle: 0, endAngle: 360, @@ -39,8 +38,7 @@ this.default = function () { maximum: 8, ranges: [{ start: 7, - end: 7, - color: '#f03e3e' + end: 7 }], pointers: [{ value: 7, @@ -64,6 +62,7 @@ this.default = function () { }] }); circulargauge.appendTo('#direction-container'); + // Code for Property pointerColor = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select Range Bar Color', diff --git a/src/circular-gauge/customization-stack.json b/src/circular-gauge/customization-stack.json index 853aec06..44933afd 100644 --- a/src/circular-gauge/customization-stack.json +++ b/src/circular-gauge/customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n \n
    \n     		\n \n
    \n
    \n
    Current Value    1800
    \n     		\n
    \n \n
    \n
    \n
    RangeBar Color
    \n     		\n
    \n \n
    \n
    \n
    Range Color
    \n     		\n
    \n \n
    \n
    \n
    Pointer Color
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for customization of gauge\n */\nfunction customGauge1() {\n var customGauge1 = new ej.circulargauge.CircularGauge({\n centerY: '70%',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n annotations: [{\n content: '
    1800
    ',\n angle: 0,\n radius: '110%', zIndex: 1\n }],\n lineStyle: { width: 0 },\n startAngle: 300, endAngle: 60,\n radius: '80%',\n labelStyle: { font: { size: '0px' } },\n majorTicks: { width: 0 },\n minorTicks: { height: 0 },\n minimum: 999, maximum: 2000,\n ranges: [{\n start: 1000, end: 2000,\n radius: '90%',\n startWidth: 30, endWidth: 30,\n color: '#E0E0E0'\n }],\n pointers: [{\n type: 'RangeBar',\n value: 1800, radius: '90%',\n color: '#FFDD00', animation: { duration: 0 },\n pointerWidth: 30\n }, {\n radius: '90%', value: 1800,\n color: '#424242',\n animation: { duration: 0 },\n pointerWidth: 9,\n cap: { radius: 10, color: '#424242', border: { width: 0 } }\n }]\n }]\n });\n return customGauge1;\n}\nfunction customGauge2() {\n var customGauge2 = new ej.circulargauge.CircularGauge({\n axes: [{\n annotations: [{\n content: '
    50.5GB
    ',\n angle: 180, radius: '0%', zIndex: 1\n }, {\n content: '
    Used
    ',\n angle: 180, radius: '25%',\n textStyle: {\n fontFamily: 'Roboto',\n color: '#9E9E9E',\n fontStyle: 'Bold',\n fontWeight: 'Regular',\n size: '14px'\n }, zIndex: 1\n }],\n lineStyle: { width: 0 },\n startAngle: 180, endAngle: 180,\n radius: '80%',\n labelStyle: { font: { size: '0px' } },\n majorTicks: { width: 0 },\n minorTicks: { height: 0 },\n minimum: 0, maximum: 100,\n ranges: [{\n start: 0, end: 100,\n radius: '80%', startWidth: 30,\n endWidth: 30, color: '#E0E0E0'\n }],\n pointers: [{\n type: 'RangeBar',\n value: 50.5, radius: '80%',\n color: '#FF2680', animation: { duration: 0 },\n pointerWidth: 30\n }]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return customGauge2;\n}\n\n\n var random = new ej.circulargauge.CircularGauge(customGauge1());\n random.appendTo('#cutomization-container');\n var usage = new ej.circulargauge.CircularGauge(customGauge2());\n var gauge = random;\n var isUsage = false;\n var barColor;\n var rangeColor;\n var pointerColor;\n barColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].color = barColor.value.toString();\n gauge.refresh();\n }\n });\n barColor.appendTo('#barColor');\n rangeColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n gauge.axes[0].ranges[0].color = rangeColor.value.toString();\n gauge.refresh();\n }\n });\n rangeColor.appendTo('#rangeColor');\n pointerColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n var color = pointerColor.value.toString();\n if (!isUsage) {\n gauge.axes[0].pointers[1].color = color;\n gauge.axes[0].pointers[1].cap.border.color = color;\n gauge.axes[0].pointers[1].cap.color = color;\n }\n gauge.refresh();\n }\n });\n pointerColor.appendTo('#pointerColor');\n document.getElementById('usage').onclick = function () {\n random.destroy();\n usage.appendTo('#cutomization-container');\n gauge = usage;\n isUsage = true;\n var element = document.getElementById('currentValue');\n element.min = '0.5';\n element.max = '100';\n element.value = usage.axes[0].pointers[0].value.toString();\n document.getElementById('currentPointerValue').innerHTML =\n 'Current Value    ' + usage.axes[0].pointers[0].value + '';\n barColor.value = usage.axes[0].pointers[0].color;\n rangeColor.value = usage.axes[0].ranges[0].color;\n pointerColor.enabled = false;\n var pointElement = document.getElementById('pointColor');\n pointElement.className = 'e-disabled';\n var currentElement = document.getElementById('usage');\n var existElement = document.getElementById('random');\n var currentLine = document.getElementById('usage_line');\n var exisLine = document.getElementById('random_line');\n currentLine.style.display = 'block';\n exisLine.style.display = 'none';\n };\n document.getElementById('random').onclick = function () {\n if (usage.element) {\n usage.destroy();\n random.appendTo('#cutomization-container');\n gauge = random;\n isUsage = false;\n var currentElement = document.getElementById('random');\n var existElement = document.getElementById('usage');\n var exisLine = document.getElementById('usage_line');\n var currentLine = document.getElementById('random_line');\n currentLine.style.display = 'block';\n exisLine.style.display = 'none';\n var element = document.getElementById('currentValue');\n var pointElement = document.getElementById('pointColor');\n pointElement.className = 'e-enabled';\n pointerColor.enabled = true;\n element.min = '1000';\n element.max = '2000';\n element.value = random.axes[0].pointers[0].value.toString();\n document.getElementById('currentPointerValue').innerHTML = 'Current Value    ' +\n random.axes[0].pointers[0].value + '';\n barColor.value = random.axes[0].pointers[0].color;\n rangeColor.value = random.axes[0].ranges[0].color;\n pointerColor.value = random.axes[0].pointers[1].color;\n }\n \n };\n document.getElementById('currentValue').onpointermove = document.getElementById('currentValue').ontouchmove =\n document.getElementById('currentValue').onchange = function () {\n var value = +document.getElementById('currentValue').value;\n if (isUsage) {\n gauge.setPointerValue(0, 0, value);\n }\n else {\n gauge.setPointerValue(0, 0, value);\n gauge.setPointerValue(0, 1, value);\n }\n gauge.setAnnotationValue(0, 0, '
    ' + value + (isUsage ? 'GB' : '') + '
    ');\n document.getElementById('currentPointerValue').innerHTML = 'Current Value    ' + value + '';\n };\n\n var selectedTheme = location.hash.split('/')[1];\n var color;\n if (selectedTheme === 'bootstrap') {\n color = '#a16ee5';\n }\n else if (selectedTheme === 'fabric') {\n color = '#1783FF';\n }\n else {\n color = '#ff4081';\n }\n var exisLine = document.getElementById('usage_line');\n var currentLine = document.getElementById('random_line');\n exisLine.style.background = color;\n currentLine.style.background = color;\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n \n
    \n     		\n \n
    \n
    \n
    Current Value    1800
    \n     		\n
    \n \n
    \n
    \n
    RangeBar Color
    \n     		\n
    \n \n
    \n
    \n
    Range Color
    \n     		\n
    \n \n
    \n
    \n
    Pointer Color
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for customization of gauge\n */\nfunction customGauge1() {\n var customGauge1 = new ej.circulargauge.CircularGauge({\n centerY: '70%',\n\n axes: [{\n annotations: [{\n content: '
    1800
    ',\n angle: 0,\n radius: '110%', zIndex: 1\n }],\n lineStyle: { width: 0 },\n startAngle: 300, endAngle: 60,\n radius: '80%',\n labelStyle: { font: { size: '0px' } },\n majorTicks: { width: 0 },\n minorTicks: { height: 0 },\n minimum: 999, maximum: 2000,\n ranges: [{\n start: 1000, end: 2000,\n radius: '90%',\n startWidth: 30, endWidth: 30,\n color: '#E0E0E0'\n }],\n pointers: [{\n type: 'RangeBar',\n value: 1800, radius: '90%',\n color: '#FFDD00', animation: { duration: 0 },\n pointerWidth: 30\n }, {\n radius: '90%', value: 1800,\n color: '#424242',\n animation: { duration: 0 },\n pointerWidth: 9,\n cap: { radius: 10, color: '#424242', border: { width: 0 } }\n }]\n }]\n });\n return customGauge1;\n}\nfunction customGauge2() {\n var customGauge2 = new ej.circulargauge.CircularGauge({\n axes: [{\n annotations: [{\n content: '
    50.5GB
    ',\n angle: 180, radius: '0%', zIndex: 1\n }, {\n content: '
    Used
    ',\n angle: 180, radius: '25%',\n textStyle: {\n fontFamily: 'Roboto',\n color: '#9E9E9E',\n fontStyle: 'Bold',\n fontWeight: 'Regular',\n size: '14px'\n }, zIndex: 1\n }],\n lineStyle: { width: 0 },\n startAngle: 180, endAngle: 180,\n radius: '80%',\n labelStyle: { font: { size: '0px' } },\n majorTicks: { width: 0 },\n minorTicks: { height: 0 },\n minimum: 0, maximum: 100,\n ranges: [{\n start: 0, end: 100,\n radius: '80%', startWidth: 30,\n endWidth: 30, color: '#E0E0E0'\n }],\n pointers: [{\n type: 'RangeBar',\n value: 50.5, radius: '80%',\n color: '#FF2680', animation: { duration: 0 },\n pointerWidth: 30\n }]\n }],\n\n });\n return customGauge2;\n}\n\n\n var random = new ej.circulargauge.CircularGauge(customGauge1());\n random.appendTo('#cutomization-container');\n var usage = new ej.circulargauge.CircularGauge(customGauge2());\n var gauge = random;\n var isUsage = false;\n var barColor;\n var rangeColor;\n var pointerColor;\n barColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].color = barColor.value.toString();\n gauge.refresh();\n }\n });\n barColor.appendTo('#barColor');\n rangeColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n gauge.axes[0].ranges[0].color = rangeColor.value.toString();\n gauge.refresh();\n }\n });\n rangeColor.appendTo('#rangeColor');\n pointerColor = new ej.dropdowns.DropDownList({\n index: 0,\n width: 120,\n change: function () {\n var color = pointerColor.value.toString();\n if (!isUsage) {\n gauge.axes[0].pointers[1].color = color;\n gauge.axes[0].pointers[1].cap.border.color = color;\n gauge.axes[0].pointers[1].cap.color = color;\n }\n gauge.refresh();\n }\n });\n pointerColor.appendTo('#pointerColor');\n // Code for Property panel\n document.getElementById('usage').onclick = function () {\n random.destroy();\n usage.appendTo('#cutomization-container');\n gauge = usage;\n isUsage = true;\n var element = document.getElementById('currentValue');\n element.min = '0.5';\n element.max = '100';\n element.value = usage.axes[0].pointers[0].value.toString();\n document.getElementById('currentPointerValue').innerHTML =\n 'Current Value    ' + usage.axes[0].pointers[0].value + '';\n barColor.value = usage.axes[0].pointers[0].color;\n rangeColor.value = usage.axes[0].ranges[0].color;\n pointerColor.enabled = false;\n var pointElement = document.getElementById('pointColor');\n pointElement.className = 'e-disabled';\n var currentElement = document.getElementById('usage');\n var existElement = document.getElementById('random');\n var currentLine = document.getElementById('usage_line');\n var exisLine = document.getElementById('random_line');\n currentLine.style.display = 'block';\n exisLine.style.display = 'none';\n };\n document.getElementById('random').onclick = function () {\n if (usage.element) {\n usage.destroy();\n random.appendTo('#cutomization-container');\n gauge = random;\n isUsage = false;\n var currentElement = document.getElementById('random');\n var existElement = document.getElementById('usage');\n var exisLine = document.getElementById('usage_line');\n var currentLine = document.getElementById('random_line');\n currentLine.style.display = 'block';\n exisLine.style.display = 'none';\n var element = document.getElementById('currentValue');\n var pointElement = document.getElementById('pointColor');\n pointElement.className = 'e-enabled';\n pointerColor.enabled = true;\n element.min = '1000';\n element.max = '2000';\n element.value = random.axes[0].pointers[0].value.toString();\n document.getElementById('currentPointerValue').innerHTML = 'Current Value    ' +\n random.axes[0].pointers[0].value + '';\n barColor.value = random.axes[0].pointers[0].color;\n rangeColor.value = random.axes[0].ranges[0].color;\n pointerColor.value = random.axes[0].pointers[1].color;\n }\n \n };\n document.getElementById('currentValue').onpointermove = document.getElementById('currentValue').ontouchmove =\n document.getElementById('currentValue').onchange = function () {\n var value = +document.getElementById('currentValue').value;\n if (isUsage) {\n gauge.setPointerValue(0, 0, value);\n }\n else {\n gauge.setPointerValue(0, 0, value);\n gauge.setPointerValue(0, 1, value);\n }\n gauge.setAnnotationValue(0, 0, '
    ' + value + (isUsage ? 'GB' : '') + '
    ');\n document.getElementById('currentPointerValue').innerHTML = 'Current Value    ' + value + '';\n };\n\n var selectedTheme = location.hash.split('/')[1];\n var color;\n if (selectedTheme === 'bootstrap') {\n color = '#a16ee5';\n }\n else if (selectedTheme === 'fabric') {\n color = '#1783FF';\n }\n else {\n color = '#ff4081';\n }\n var exisLine = document.getElementById('usage_line');\n var currentLine = document.getElementById('random_line');\n exisLine.style.background = color;\n currentLine.style.background = color;\n"} \ No newline at end of file diff --git a/src/circular-gauge/customization.html b/src/circular-gauge/customization.html index 2b893799..08fc9319 100644 --- a/src/circular-gauge/customization.html +++ b/src/circular-gauge/customization.html @@ -4,6 +4,7 @@
    +
    @@ -89,9 +90,10 @@ documentation section.

    - + \ No newline at end of file + + diff --git a/src/circular-gauge/customization.js b/src/circular-gauge/customization.js index a7e8111b..865ab30b 100644 --- a/src/circular-gauge/customization.js +++ b/src/circular-gauge/customization.js @@ -4,11 +4,13 @@ function customGauge1() { var customGauge1 = new ej.circulargauge.CircularGauge({ centerY: '70%', + // custom code start load: function (args) { - var selectedTheme = location.hash.split('/')[1]; - selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + var selecTheme = location.hash.split('/')[1]; + selecTheme = selecTheme ? selecTheme : 'Material'; + args.gauge.theme = (selecTheme.charAt(0).toUpperCase() + selecTheme.slice(1)); }, + // custom code end axes: [{ annotations: [{ content: '
    1800
    ', @@ -80,11 +82,13 @@ function customGauge2() { pointerWidth: 30 }] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return customGauge2; } @@ -130,6 +134,7 @@ this.default = function () { } }); pointerColor.appendTo('#pointerColor'); + // Code for Property panel document.getElementById('usage').onclick = function () { random.destroy(); usage.appendTo('#cutomization-container'); diff --git a/src/circular-gauge/data-sample-stack.json b/src/circular-gauge/data-sample-stack.json index 073b1bef..913a2220 100644 --- a/src/circular-gauge/data-sample-stack.json +++ b/src/circular-gauge/data-sample-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for data sample\n */\n\n var orderData = [\n {\n 'Country': 'Germany',\n 'Sales': 500,\n 'Target': 400,\n 'vsTarget': 300\n }, {\n 'Country': 'USA',\n 'Sales': 1000,\n 'Target': 600,\n 'vsTarget': 360\n }, {\n 'Country': 'UK',\n 'Sales': 600,\n 'Target': 700,\n 'vsTarget': -100\n }\n ];\n function dataSampleGauge1() {\n var dataSampleGauge1 = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var gauge1Theme = location.hash.split('/')[1];\n gauge1Theme = gauge1Theme ? gauge1Theme : 'Material';\n args.gauge.theme = (gauge1Theme.charAt(0).toUpperCase() + gauge1Theme.slice(1));\n },\n axes: [{\n startAngle: 230,\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n annotations: [{\n content: '#germany',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    Germany
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 75, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge1;\n }\n function dataSampleGauge2() {\n var dataSampleGauge2 = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var gauge2Theme = location.hash.split('/')[1];\n gauge2Theme = gauge2Theme ? gauge2Theme : 'Material';\n args.gauge.theme = (gauge2Theme.charAt(0).toUpperCase() + gauge2Theme.slice(1));\n },\n axes: [{\n annotations: [{\n content: '#usa',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    USA
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n startAngle: 230,\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 60, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge2;\n }\n function dataSampleGauge3() {\n var dataSampleGauge3 = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var gauge3Theme = location.hash.split('/')[1];\n gauge3Theme = gauge3Theme ? gauge3Theme : 'Material';\n args.gauge.theme = (gauge3Theme.charAt(0).toUpperCase() + gauge3Theme.slice(1));\n },\n axes: [{\n annotations: [{\n content: '#uk',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    UK
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n startAngle: 230,\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 25, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge3;\n }\n var germany = new ej.circulargauge.CircularGauge(dataSampleGauge1(), '#container1');\n var usa = new ej.circulargauge.CircularGauge(dataSampleGauge2(), '#container2');\n var uk = new ej.circulargauge.CircularGauge(dataSampleGauge3(), '#container3');\n var data = new ej.data.DataManager(orderData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'Country', headerText: 'Country', width: 80 },\n { field: 'Sales', headerText: 'Sales $', width: 80 },\n { field: 'Target', headerText: 'Target $', width: 80 },\n { field: 'vsTarget', headerText: 'vs Target', width: 80 }\n ]\n });\n grid.appendTo('#container5');\n this.toolTipInterval1 = setInterval(function () {\n if (document.getElementById('container5')) {\n var value1 = Math.round(Math.random() * (90 - 55) + 55);\n var value2 = Math.round(Math.random() * (75 - 60) + 60);\n var value3 = Math.round(Math.random() * (40 - 10) + 10);\n var gridData1 = 4 * value1;\n var gridData2 = 6 * value2;\n var gridData3 = 7 * value3;\n var orderData_1 = [\n {\n 'Country': 'Germany',\n 'Sales': 500,\n 'Target': 400,\n 'vsTarget': gridData1\n }, {\n 'Country': 'USA',\n 'Sales': 1000,\n 'Target': 600,\n 'vsTarget': gridData2\n }, {\n 'Country': 'UK',\n 'Sales': 600,\n 'Target': 700,\n 'vsTarget': -gridData3\n }\n ];\n var data_1 = new ej.data.DataManager(orderData_1).executeLocal(new ej.data.Query().take(3));\n grid.dataSource = data_1;\n grid.refresh();\n germany.axes[0].pointers[0].animation.enable = true;\n usa.axes[0].pointers[0].animation.enable = true;\n uk.axes[0].pointers[0].animation.enable = true;\n germany.setPointerValue(0, 0, value1);\n usa.setPointerValue(0, 0, value2);\n uk.setPointerValue(0, 0, value3);\n germany.setAnnotationValue(0, 0, '#germany');\n usa.setAnnotationValue(0, 0, '#usa');\n uk.setAnnotationValue(0, 0, '#uk');\n }\n else {\n clearInterval(this.toolTipInterval1);\n }\n }, 2000);\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Sample for data sample\n */\n\n var orderData = [\n {\n 'Country': 'Germany',\n 'Sales': 500,\n 'Target': 400,\n 'vsTarget': 300\n }, {\n 'Country': 'USA',\n 'Sales': 1000,\n 'Target': 600,\n 'vsTarget': 360\n }, {\n 'Country': 'UK',\n 'Sales': 600,\n 'Target': 700,\n 'vsTarget': -100\n }\n ];\n function dataSampleGauge1() {\n var dataSampleGauge1 = new ej.circulargauge.CircularGauge({\n\n axes: [{\n startAngle: 230,\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n annotations: [{\n content: '#germany',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    Germany
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 75, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge1;\n }\n function dataSampleGauge2() {\n var dataSampleGauge2 = new ej.circulargauge.CircularGauge({\n\n axes: [{\n annotations: [{\n content: '#usa',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    USA
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n startAngle: 230,\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 60, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge2;\n }\n function dataSampleGauge3() {\n var dataSampleGauge3 = new ej.circulargauge.CircularGauge({\n\n axes: [{\n annotations: [{\n content: '#uk',\n angle: 180, zIndex: 1,\n radius: '30%'\n }, {\n content: '
    UK
    ',\n angle: 180, zIndex: 1,\n radius: '65%'\n }],\n startAngle: 230,\n minorTicks: { width: 0 },\n labelStyle: { font: { size: '0' } },\n endAngle: 130,\n majorTicks: { width: 0 },\n lineStyle: { width: 0 },\n ranges: [{\n start: 0, end: 50,\n startWidth: 15, endWidth: 15,\n color: '#EC121C'\n }, {\n start: 50, end: 100,\n startWidth: 15, endWidth: 15,\n color: '#45EA0C'\n }],\n pointers: [{\n value: 25, radius: '60%',\n animation: { enable: false },\n color: '#777777', pointerWidth: 5,\n cap: {\n radius: 6,\n border: { width: 0 },\n color: '#777777'\n },\n needleTail: {\n length: '25%',\n color: '#777777'\n }\n }]\n }]\n });\n return dataSampleGauge3;\n }\n var germany = new ej.circulargauge.CircularGauge(dataSampleGauge1(), '#container1');\n var usa = new ej.circulargauge.CircularGauge(dataSampleGauge2(), '#container2');\n var uk = new ej.circulargauge.CircularGauge(dataSampleGauge3(), '#container3');\n var data = new ej.data.DataManager(orderData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'Country', headerText: 'Country', width: 80 },\n { field: 'Sales', headerText: 'Sales $', width: 80 },\n { field: 'Target', headerText: 'Target $', width: 80 },\n { field: 'vsTarget', headerText: 'vs Target', width: 80 }\n ]\n });\n grid.appendTo('#container5');\n this.toolTipInterval1 = setInterval(function () {\n if (document.getElementById('container5')) {\n var value1 = Math.round(Math.random() * (90 - 55) + 55);\n var value2 = Math.round(Math.random() * (75 - 60) + 60);\n var value3 = Math.round(Math.random() * (40 - 10) + 10);\n var gridData1 = 4 * value1;\n var gridData2 = 6 * value2;\n var gridData3 = 7 * value3;\n var orderData_1 = [\n {\n 'Country': 'Germany',\n 'Sales': 500,\n 'Target': 400,\n 'vsTarget': gridData1\n }, {\n 'Country': 'USA',\n 'Sales': 1000,\n 'Target': 600,\n 'vsTarget': gridData2\n }, {\n 'Country': 'UK',\n 'Sales': 600,\n 'Target': 700,\n 'vsTarget': -gridData3\n }\n ];\n var data_1 = new ej.data.DataManager(orderData_1).executeLocal(new ej.data.Query().take(3));\n grid.dataSource = data_1;\n grid.refresh();\n germany.axes[0].pointers[0].animation.enable = true;\n usa.axes[0].pointers[0].animation.enable = true;\n uk.axes[0].pointers[0].animation.enable = true;\n germany.setPointerValue(0, 0, value1);\n usa.setPointerValue(0, 0, value2);\n uk.setPointerValue(0, 0, value3);\n germany.setAnnotationValue(0, 0, '#germany');\n usa.setAnnotationValue(0, 0, '#usa');\n uk.setAnnotationValue(0, 0, '#uk');\n }\n else {\n clearInterval(this.toolTipInterval1);\n }\n }, 2000);\n"} \ No newline at end of file diff --git a/src/circular-gauge/data-sample.html b/src/circular-gauge/data-sample.html index 99c42cce..ec35eeb9 100644 --- a/src/circular-gauge/data-sample.html +++ b/src/circular-gauge/data-sample.html @@ -27,6 +27,7 @@ + +\n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for default gauge\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n radius: '80%',\n startAngle: 230,\n endAngle: 130,\n majorTicks: {\n width: 0\n },\n lineStyle: { width: 8, color: '#E0E0E0' },\n minorTicks: {\n width: 0\n },\n labelStyle: {\n font: {\n fontFamily: 'Roboto',\n size: '12px',\n fontWeight: 'Regular'\n },\n offset: -5\n },\n pointers: [{\n value: 60,\n radius: '60%',\n color: '#757575',\n pointerWidth: 7,\n cap: {\n radius: 8,\n color: '#757575',\n border: { width: 0 }\n },\n needleTail: {\n length: '25%',\n color: '#757575'\n }\n }]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n circulargauge.appendTo('#gauge');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for default gauge\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n radius: '80%',\n startAngle: 230,\n endAngle: 130,\n majorTicks: {\n width: 0\n },\n lineStyle: { width: 8 },\n minorTicks: {\n width: 0\n },\n labelStyle: {\n font: {\n fontFamily: 'Roboto',\n size: '12px',\n fontWeight: 'Regular'\n },\n offset: -5\n },\n pointers: [{\n value: 60,\n radius: '60%',\n pointerWidth: 7,\n cap: {\n radius: 8,\n border: { width: 0 }\n },\n needleTail: {\n length: '25%'\n }\n }]\n }],\n\n });\n circulargauge.appendTo('#gauge');\n"} \ No newline at end of file diff --git a/src/circular-gauge/default.js b/src/circular-gauge/default.js index 091ebeee..3b21381f 100644 --- a/src/circular-gauge/default.js +++ b/src/circular-gauge/default.js @@ -10,7 +10,7 @@ this.default = function () { majorTicks: { width: 0 }, - lineStyle: { width: 8, color: '#E0E0E0' }, + lineStyle: { width: 8 }, minorTicks: { width: 0 }, @@ -25,24 +25,23 @@ this.default = function () { pointers: [{ value: 60, radius: '60%', - color: '#757575', pointerWidth: 7, cap: { radius: 8, - color: '#757575', border: { width: 0 } }, needleTail: { - length: '25%', - color: '#757575' + length: '25%' } }] }], + // custom code start load: function (args) { - var selectedTheme = location.hash.split('/')[1]; - selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + var selectTheme = location.hash.split('/')[1]; + selectTheme = selectTheme ? selectTheme : 'Material'; + args.gauge.theme = (selectTheme.charAt(0).toUpperCase() + selectTheme.slice(1)); } + // custom code end }); circulargauge.appendTo('#gauge'); }; \ No newline at end of file diff --git a/src/circular-gauge/dynamic-stack.json b/src/circular-gauge/dynamic-stack.json index 98608145..1f6ef6c2 100644 --- a/src/circular-gauge/dynamic-stack.json +++ b/src/circular-gauge/dynamic-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n \n \n \n \n \n \n \n \n\n\n\n\n
    ","index.js":"{{ripple}}define([\"require\", \"exports\", \"@syncfusion/ej2-circulargauge\", \"@syncfusion/ej2-circulargauge\", \"./dynamic-gauge\"], function (require, exports, ej2_circulargauge_1, ej2_circulargauge_2, dynamic_gauge_1) {\n \"use strict\";\n var _this = this;\n Object.defineProperty(exports, \"__esModule\", { value: true });\n \n var toolTipInterval;\n var toolTipInterval1;\n var GEARS = [0.14, 0.06, 0.035, 0.027, 0.019];\n var speed = 0;\n var skip = 0;\n var gear = 0;\n var count = 0;\n var start = true;\n var circulargauge1 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge());\n circulargauge1.appendTo('#dynamic-container');\n var circulargauge2 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge1());\n circulargauge2.appendTo('#rpm');\n var circulargauge3 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge2());\n circulargauge3.appendTo('#fuel');\n var circulargauge4 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge3());\n circulargauge4.appendTo('#battery');\n _this.toolTipInterval1 = setInterval(function () {\n if (document.getElementById('dynamic-container')) {\n if (speed < 200 && start) {\n count = 0;\n circulargauge1.axes[0].pointers[0].animation.duration = 30;\n circulargauge2.axes[0].pointers[0].animation.duration = 30;\n if (GEARS[gear] * speed > 4 && gear < GEARS.length) {\n gear++;\n skip = 400 / 50;\n }\n if (skip-- < 0) {\n speed += 0.6 - (0.0017 * speed);\n }\n circulargauge1.setPointerValue(0, 0, speed);\n circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');\n circulargauge2.setPointerValue(0, 0, GEARS[gear] * speed + 0.9);\n }\n else {\n count = count + 1;\n if (start) {\n if (count < 200) {\n circulargauge1.setAnnotationValue(1, 3, Math.round((Math.random() * (200 - 202) + 202)) + ' KM');\n circulargauge1.setPointerValue(0, 0, Math.random() * (200 - 202) + 202);\n }\n else {\n speed = 0;\n gear = 0;\n circulargauge1.axes[0].pointers[0].animation.duration = 2000;\n circulargauge2.axes[0].pointers[0].animation.duration = 2000;\n circulargauge1.setPointerValue(0, 0, speed);\n circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');\n circulargauge2.setPointerValue(0, 0, 0);\n start = false;\n }\n }\n else {\n start = count > 350;\n }\n }\n }\n else {\n clearInterval(_this.toolTipInterval1);\n }\n }, 50);\n \n});\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n \n \n \n \n \n \n \n \n\n\n\n\n
    ","index.js":"{{ripple}}define([\"require\", \"exports\", \"@syncfusion/ej2-circulargauge\", \"@syncfusion/ej2-circulargauge\", \"./dynamic-gauge\"], function (require, exports, ej2_circulargauge_1, ej2_circulargauge_2, dynamic_gauge_1) {\n \"use strict\";\n var _this = this;\n Object.defineProperty(exports, \"__esModule\", { value: true });\n \n var toolTipInterval;\n var toolTipInterval1;\n var GEARS = [0.14, 0.06, 0.035, 0.027, 0.019];\n var speed = 0;\n var skip = 0;\n var gear = 0;\n var count = 0;\n var start = true;\n var circulargauge1 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge());\n circulargauge1.appendTo('#dynamic-container');\n var circulargauge2 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge1());\n circulargauge2.appendTo('#rpm');\n var circulargauge3 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge2());\n circulargauge3.appendTo('#fuel');\n var circulargauge4 = new ej2_circulargauge_1.CircularGauge(dynamic_gauge_1.gauge3());\n circulargauge4.appendTo('#battery');\n _this.toolTipInterval1 = setInterval(function () {\n if (document.getElementById('dynamic-container')) {\n if (speed < 200 && start) {\n count = 0;\n circulargauge1.axes[0].pointers[0].animation.duration = 30;\n circulargauge2.axes[0].pointers[0].animation.duration = 30;\n if (GEARS[gear] * speed > 4 && gear < GEARS.length) {\n gear++;\n skip = 400 / 50;\n }\n if (skip-- < 0) {\n speed += 0.6 - (0.0017 * speed);\n }\n circulargauge1.setPointerValue(0, 0, speed);\n circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');\n circulargauge2.setPointerValue(0, 0, GEARS[gear] * speed + 0.9);\n }\n else {\n count = count + 1;\n if (start) {\n if (count < 200) {\n circulargauge1.setAnnotationValue(1, 3, Math.round((Math.random() * (200 - 202) + 202)) + ' KM');\n circulargauge1.setPointerValue(0, 0, Math.random() * (200 - 202) + 202);\n }\n else {\n speed = 0;\n gear = 0;\n circulargauge1.axes[0].pointers[0].animation.duration = 2000;\n circulargauge2.axes[0].pointers[0].animation.duration = 2000;\n circulargauge1.setPointerValue(0, 0, speed);\n circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');\n circulargauge2.setPointerValue(0, 0, 0);\n start = false;\n }\n }\n else {\n start = count > 350;\n }\n }\n }\n else {\n clearInterval(_this.toolTipInterval1);\n }\n }, 50);\n \n});\n"} \ No newline at end of file diff --git a/src/circular-gauge/images/image1.svg b/src/circular-gauge/images/image1.svg new file mode 100644 index 00000000..ba1ee962 --- /dev/null +++ b/src/circular-gauge/images/image1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/image2.svg b/src/circular-gauge/images/image2.svg new file mode 100644 index 00000000..b5782acb --- /dev/null +++ b/src/circular-gauge/images/image2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/image3.svg b/src/circular-gauge/images/image3.svg new file mode 100644 index 00000000..bebe0a45 --- /dev/null +++ b/src/circular-gauge/images/image3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/image4.svg b/src/circular-gauge/images/image4.svg new file mode 100644 index 00000000..97a904bf --- /dev/null +++ b/src/circular-gauge/images/image4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/image5.svg b/src/circular-gauge/images/image5.svg new file mode 100644 index 00000000..55643d7e --- /dev/null +++ b/src/circular-gauge/images/image5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/image6.svg b/src/circular-gauge/images/image6.svg new file mode 100644 index 00000000..92a62133 --- /dev/null +++ b/src/circular-gauge/images/image6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/circular-gauge/images/negative.png b/src/circular-gauge/images/negative.png index 9ac6b6d97f6f610670c6795ac88fbda98279f6da..1c26d46948f0c17d288c040cd0349d0b83665024 100644 GIT binary patch literal 232 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GGLLkg|>2BR0px`V| z7sn8b(|7xK^By+faf$EY5#Z1Yt!T}e(DO*prZfB^+c^$NM^^8~4;-3K%xwy{17^k? zKX3i%!Shna6MA19?w?RwKWSaqorawkAMjmZte9$UV0K`!;eC$Po4AcXSTx4RJ>4l5 zYbew3lp!vseN|()=ToQ317$aUGprYCjA&eZ*23h5%gwl3f7fI^2tBo?`RlDIu`@Pt d3;$oszw?c*e3sF^7N9E`JYD@<);T3K0RRFaT4MkJ literal 232 LcmZQz7#RQn0O$Y# diff --git a/src/circular-gauge/images/positive.png b/src/circular-gauge/images/positive.png index a8e4fbddb059d1b05c6e3a6efffe24962c9fcc08..c412ab69d15d1728fdcd0acf9ef6c3837f9ca3ef 100644 GIT binary patch literal 243 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GGLLkg|>2BR0px{zZ z7sn8b)5!@E_YQm&?QeLkEyq}s6~Qs%BL7n1Ld}FD$<++Z%!jKq%nP>Pn9l1W%~1NS zmW_>V#%Fs20|SkBV!uBz#_9_5v9EEzbcP{y{qbcJIJ@7n^6>ERMO?9Rcv?_>5NIqT z(1<#d+Y=A61GOH%n-s72py*(Y&8)<@nf+I}*R8LRl8}(#>F|(a3)sq`zhmE{!Un6k kA`f;%zd7BQI3b>4CcBFK_JBh`moqSUy85}Sb4q9e0EoF$Qvd(} literal 243 LcmZQz7;yjq0P_F= diff --git a/src/circular-gauge/labels-stack.json b/src/circular-gauge/labels-stack.json index 188978b4..bc200888 100644 --- a/src/circular-gauge/labels-stack.json +++ b/src/circular-gauge/labels-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n  \n  \n  \n  \n  \n  \n\t\t\t\t
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t\t\t\t\t\n \n \n \n \n
    \n
    Ticks
    \n     		\n
    \n \n
    \n
    \n
    Tick Position
    \n     		\n
    \n \n
    \n
    \n
    Label Position
    \n     		\n
    \n \n
    \n
    \n
    Tick Offset    0
    \n     		\n
    \n \n
    \n
    \n
    Tick Height    10
    \n     		\n
    \n \n
    \n
    \n
    Label Offset    0
    \n     		\n
    \n \n
    \n
    \n\t\t\t\t\t\t
    Show Last Label
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n\n","index.js":"{{ripple}}/**\n * Sample for label\n */\n\n var isMajorTicks = true;\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n annotations: [{\n content: '
    145
    ',\n angle: 0, radius: '0%', zIndex: '1',\n }],\n startAngle: 210, endAngle: 150,\n lineStyle: { width: 2, color: '#9E9E9E' },\n labelStyle: {\n position: 'Outside', autoAngle: true,\n font: { size: '10px' }\n }, majorTicks: {\n position: 'Inside', color: '#757575', width: 2, height: 10, interval: 20\n }, minorTicks: {\n position: 'Inside', color: '#757575', height: 5, width: 2, interval: 10\n },\n radius: '75%', minimum: 0, maximum: 170,\n pointers: [{\n animation: { enable: false }, value: 145,\n type: 'RangeBar', roundedCornerRadius: 10,\n color: '#8BC34A', radius: '60%', pointerWidth: 10,\n }]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n circulargauge.appendTo('#labels-container');\n var ticks;\n var tickPosition;\n var labelPosition;\n ticks = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var value = ticks.value.toString();\n var tick;\n isMajorTicks = value === 'major';\n if (isMajorTicks) {\n tick = circulargauge.axes[0].majorTicks;\n }\n else {\n tick = circulargauge.axes[0].minorTicks;\n }\n tickPosition.value = tick.position;\n document.getElementById('tickOffset').value = tick.offset.toString();\n document.getElementById('tickHeight').value = tick.height.toString();\n document.getElementById('offset').innerHTML = 'Tick Offset    ' + tick.offset;\n document.getElementById('height').innerHTML = 'Tick Height    ' + tick.height;\n }\n });\n ticks.appendTo('#Ticks');\n tickPosition = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var value = tickPosition.value.toString();\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.position = value;\n }\n else {\n circulargauge.axes[0].minorTicks.position = value;\n }\n circulargauge.refresh();\n }\n });\n tickPosition.appendTo('#tickposition');\n labelPosition = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[0].labelStyle.position = labelPosition.value.toString();\n circulargauge.refresh();\n }\n });\n labelPosition.appendTo('#labelposition');\n document.getElementById('tickOffset').onpointermove = document.getElementById('tickOffset').ontouchmove =\n document.getElementById('tickOffset').onchange = function () {\n var value = parseInt(document.getElementById('tickOffset').value, 10);\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.offset = value;\n }\n else {\n circulargauge.axes[0].minorTicks.offset = value;\n }\n document.getElementById('offset').innerHTML = 'Tick Offset    ' + value;\n circulargauge.refresh();\n };\n document.getElementById('tickHeight').onpointermove = document.getElementById('tickHeight').ontouchmove =\n document.getElementById('tickHeight').onchange = function () {\n var value = parseInt(document.getElementById('tickHeight').value, 10);\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.height = value;\n }\n else {\n circulargauge.axes[0].minorTicks.height = value;\n }\n document.getElementById('height').innerHTML = 'Tick Height    ' + value;\n circulargauge.refresh();\n };\n document.getElementById('labelOffset').onpointermove = document.getElementById('labelOffset').ontouchmove =\n document.getElementById('labelOffset').onchange = function () {\n var value = parseInt(document.getElementById('labelOffset').value, 10);\n circulargauge.axes[0].labelStyle.offset = value;\n document.getElementById('labelOffsetValue').innerHTML = 'Label Offset    ' + value;\n circulargauge.refresh();\n };\n var enableRTLChange;\n var enableRTLCheckbox = new ej.buttons.CheckBox({\n change: enableRTLChange, checked: false,\n }, '#showLastLabel');\n enableRTLCheckbox.change = enableRTLChange = function (e) {\n var showLabel = e.checked;\n circulargauge.axes[0].showLastLabel = showLabel;\n circulargauge.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n  \n  \n  \n  \n  \n  \n\t\t\t\t
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t\t\t\t\t\n \n \n \n \n
    \n
    Ticks
    \n     		\n
    \n \n
    \n
    \n
    Tick Position
    \n     		\n
    \n \n
    \n
    \n
    Label Position
    \n     		\n
    \n \n
    \n
    \n
    Tick Offset    0
    \n     		\n
    \n \n
    \n
    \n
    Tick Height    10
    \n     		\n
    \n \n
    \n
    \n
    Label Offset    0
    \n     		\n
    \n \n
    \n
    \n\t\t\t\t\t\t
    Show Last Label
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for label\n */\n\n var isMajorTicks = true;\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n annotations: [{\n content: '
    145
    ',\n angle: 0, radius: '0%', zIndex: '1',\n }],\n startAngle: 210, endAngle: 150,\n lineStyle: { width: 2, color: '#9E9E9E' },\n labelStyle: {\n position: 'Outside', autoAngle: true,\n font: { size: '10px' }\n }, majorTicks: {\n position: 'Inside', color: '#757575', width: 2, height: 10, interval: 20\n }, minorTicks: {\n position: 'Inside', color: '#757575', height: 5, width: 2, interval: 10\n },\n radius: '75%', minimum: 0, maximum: 170,\n pointers: [{\n animation: { enable: false }, value: 145,\n type: 'RangeBar', roundedCornerRadius: 10,\n color: '#8BC34A', radius: '60%', pointerWidth: 10,\n }]\n }],\n\n });\n circulargauge.appendTo('#labels-container');\n var ticks;\n var tickPosition;\n var labelPosition;\n ticks = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var value = ticks.value.toString();\n var tick;\n isMajorTicks = value === 'major';\n if (isMajorTicks) {\n tick = circulargauge.axes[0].majorTicks;\n }\n else {\n tick = circulargauge.axes[0].minorTicks;\n }\n tickPosition.value = tick.position;\n document.getElementById('tickOffset').value = tick.offset.toString();\n document.getElementById('tickHeight').value = tick.height.toString();\n document.getElementById('offset').innerHTML = 'Tick Offset    ' + tick.offset;\n document.getElementById('height').innerHTML = 'Tick Height    ' + tick.height;\n }\n });\n ticks.appendTo('#Ticks');\n tickPosition = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var value = tickPosition.value.toString();\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.position = value;\n }\n else {\n circulargauge.axes[0].minorTicks.position = value;\n }\n circulargauge.refresh();\n }\n });\n tickPosition.appendTo('#tickposition');\n\n // Code for property panel\n labelPosition = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[0].labelStyle.position = labelPosition.value.toString();\n circulargauge.refresh();\n }\n });\n labelPosition.appendTo('#labelposition');\n document.getElementById('tickOffset').onpointermove = document.getElementById('tickOffset').ontouchmove =\n document.getElementById('tickOffset').onchange = function () {\n var value = parseInt(document.getElementById('tickOffset').value, 10);\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.offset = value;\n }\n else {\n circulargauge.axes[0].minorTicks.offset = value;\n }\n document.getElementById('offset').innerHTML = 'Tick Offset    ' + value;\n circulargauge.refresh();\n };\n document.getElementById('tickHeight').onpointermove = document.getElementById('tickHeight').ontouchmove =\n document.getElementById('tickHeight').onchange = function () {\n var value = parseInt(document.getElementById('tickHeight').value, 10);\n if (isMajorTicks) {\n circulargauge.axes[0].majorTicks.height = value;\n }\n else {\n circulargauge.axes[0].minorTicks.height = value;\n }\n document.getElementById('height').innerHTML = 'Tick Height    ' + value;\n circulargauge.refresh();\n };\n document.getElementById('labelOffset').onpointermove = document.getElementById('labelOffset').ontouchmove =\n document.getElementById('labelOffset').onchange = function () {\n var value = parseInt(document.getElementById('labelOffset').value, 10);\n circulargauge.axes[0].labelStyle.offset = value;\n document.getElementById('labelOffsetValue').innerHTML = 'Label Offset    ' + value;\n circulargauge.refresh();\n };\n var enableRTLChange;\n var enableRTLCheckbox = new ej.buttons.CheckBox({\n change: enableRTLChange, checked: false,\n }, '#showLastLabel');\n enableRTLCheckbox.change = enableRTLChange = function (e) {\n var showLabel = e.checked;\n circulargauge.axes[0].showLastLabel = showLabel;\n circulargauge.refresh();\n };\n"} \ No newline at end of file diff --git a/src/circular-gauge/labels.html b/src/circular-gauge/labels.html index d9d3d76f..ab0875bd 100644 --- a/src/circular-gauge/labels.html +++ b/src/circular-gauge/labels.html @@ -4,6 +4,7 @@
    +
    @@ -111,8 +112,10 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/circular-gauge/labels.js b/src/circular-gauge/labels.js index 41ca990a..af2fabca 100644 --- a/src/circular-gauge/labels.js +++ b/src/circular-gauge/labels.js @@ -26,11 +26,13 @@ this.default = function () { color: '#8BC34A', radius: '60%', pointerWidth: 10, }] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); circulargauge.appendTo('#labels-container'); var ticks; @@ -70,6 +72,8 @@ this.default = function () { } }); tickPosition.appendTo('#tickposition'); + + // Code for property panel labelPosition = new ej.dropdowns.DropDownList({ index: 0, width: 120, change: function () { diff --git a/src/circular-gauge/multiple-axis-stack.json b/src/circular-gauge/multiple-axis-stack.json index e0752f27..095d584b 100644 --- a/src/circular-gauge/multiple-axis-stack.json +++ b/src/circular-gauge/multiple-axis-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n  \n  \n  \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Axis
    \n     		\n
    \n \n
    \n
    \n
    Direction
    \n     		\n
    \n \n
    \n
    \n
    Start Angle    220
    \n     		\n
    \n \n
    \n
    \n
    End Angle    140
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for Multiple Axes\n */\n\n var axisIndex = 0;\n var axis;\n var direction;\n var circulargauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n title: 'Gauge with Multiple Axes',\n titleStyle: { color: 'gray', size: '16px' },\n axes: [{\n lineStyle: { width: 1.5, color: ' #9E9E9E' },\n radius: '95%',\n labelStyle: {\n position: 'Inside', autoAngle: true,\n hiddenLabel: 'None'\n }, majorTicks: {\n position: 'Inside',\n width: 2, height: 10, color: '#757575'\n }, minorTicks: {\n position: 'Inside', width: 2,\n height: 5, color: '#757575'\n },\n minimum: 0, maximum: 160, startAngle: 220, endAngle: 140,\n pointers: [{\n value: 80, radius: '100%', color: '#333333',\n markerHeight: 15, markerWidth: 15, type: 'Marker',\n markerShape: 'Triangle',\n }]\n }, {\n lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',\n labelStyle: {\n position: 'Outside', autoAngle: true,\n hiddenLabel: 'None', font: { color: '#E84011' }\n }, majorTicks: {\n position: 'Outside', width: 2, height: 10,\n color: '#E84011'\n }, minorTicks: {\n position: 'Outside', width: 2,\n height: 5, color: '#E84011'\n },\n minimum: 0, maximum: 240, startAngle: 220, endAngle: 140,\n pointers: [{\n value: 120, radius: '100%', color: '#C62E0A',\n markerHeight: 15, markerWidth: 15, type: 'Marker',\n markerShape: 'InvertedTriangle',\n }]\n }]\n });\n circulargauge.appendTo('#axis-container');\n axis = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n axisIndex = +axis.value;\n direction.value = circulargauge.axes[axisIndex].direction;\n var startAngle = circulargauge.axes[axisIndex].startAngle;\n var endAngle = circulargauge.axes[axisIndex].endAngle;\n document.getElementById('start').innerHTML = 'Start Angle    ' + startAngle;\n document.getElementById('end').innerHTML = 'End Angle    ' + endAngle;\n document.getElementById('startAngle').value = startAngle.toString();\n document.getElementById('endAngle').value = endAngle.toString();\n }\n });\n axis.appendTo('#axisIndex');\n direction = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[axisIndex].direction = direction.value.toString();\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n });\n direction.appendTo('#axisDirection');\n document.getElementById('startAngle').onpointermove = document.getElementById('startAngle').ontouchmove =\n document.getElementById('startAngle').onchange = function () {\n var value = parseInt(document.getElementById('startAngle').value, 10);\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.axes[axisIndex].startAngle = value;\n document.getElementById('start').innerHTML = 'Start Angle    ' + value;\n circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n ej.circulargauge.isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n 'First' : 'None';\n circulargauge.refresh();\n };\n document.getElementById('endAngle').onpointermove = document.getElementById('endAngle').ontouchmove =\n document.getElementById('endAngle').onchange = function () {\n var value = parseInt(document.getElementById('endAngle').value, 10);\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.axes[axisIndex].endAngle = value;\n document.getElementById('end').innerHTML = 'End Angle    ' + value;\n circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n ej.circulargauge.isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n 'First' : 'None';\n circulargauge.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n  \n  \n  \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Axis
    \n     		\n
    \n \n
    \n
    \n
    Direction
    \n     		\n
    \n \n
    \n
    \n
    Start Angle    220
    \n     		\n
    \n \n
    \n
    \n
    End Angle    140
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Multiple Axes\n */\n\n var axisIndex = 0;\n var axis;\n var direction;\n var circulargauge = new ej.circulargauge.CircularGauge({\n\n title: 'Gauge with Multiple Axes',\n titleStyle: { color: 'gray', size: '16px' },\n axes: [{\n lineStyle: { width: 1.5, color: ' #9E9E9E' },\n radius: '95%',\n labelStyle: {\n position: 'Inside', autoAngle: true,\n hiddenLabel: 'None'\n }, majorTicks: {\n position: 'Inside',\n width: 2, height: 10, color: '#757575'\n }, minorTicks: {\n position: 'Inside', width: 2,\n height: 5, color: '#757575'\n },\n minimum: 0, maximum: 160, startAngle: 220, endAngle: 140,\n pointers: [{\n value: 80, radius: '100%', color: '#333333',\n markerHeight: 15, markerWidth: 15, type: 'Marker',\n markerShape: 'Triangle',\n }]\n }, {\n lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',\n labelStyle: {\n position: 'Outside', autoAngle: true,\n hiddenLabel: 'None', font: { color: '#E84011' }\n }, majorTicks: {\n position: 'Outside', width: 2, height: 10,\n color: '#E84011'\n }, minorTicks: {\n position: 'Outside', width: 2,\n height: 5, color: '#E84011'\n },\n minimum: 0, maximum: 240, startAngle: 220, endAngle: 140,\n pointers: [{\n value: 120, radius: '100%', color: '#C62E0A',\n markerHeight: 15, markerWidth: 15, type: 'Marker',\n markerShape: 'InvertedTriangle',\n }]\n }]\n });\n circulargauge.appendTo('#axis-container');\n // code for Property Panel\n axis = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n axisIndex = +axis.value;\n direction.value = circulargauge.axes[axisIndex].direction;\n var startAngle = circulargauge.axes[axisIndex].startAngle;\n var endAngle = circulargauge.axes[axisIndex].endAngle;\n document.getElementById('start').innerHTML = 'Start Angle    ' + startAngle;\n document.getElementById('end').innerHTML = 'End Angle    ' + endAngle;\n document.getElementById('startAngle').value = startAngle.toString();\n document.getElementById('endAngle').value = endAngle.toString();\n }\n });\n axis.appendTo('#axisIndex');\n direction = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[axisIndex].direction = direction.value.toString();\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n });\n direction.appendTo('#axisDirection');\n document.getElementById('startAngle').onpointermove = document.getElementById('startAngle').ontouchmove =\n document.getElementById('startAngle').onchange = function () {\n var value = parseInt(document.getElementById('startAngle').value, 10);\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.axes[axisIndex].startAngle = value;\n document.getElementById('start').innerHTML = 'Start Angle    ' + value;\n circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n ej.circulargauge.isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n 'First' : 'None';\n circulargauge.refresh();\n };\n document.getElementById('endAngle').onpointermove = document.getElementById('endAngle').ontouchmove =\n document.getElementById('endAngle').onchange = function () {\n var value = parseInt(document.getElementById('endAngle').value, 10);\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.axes[1].pointers[0].animation.enable = false;\n circulargauge.axes[axisIndex].endAngle = value;\n document.getElementById('end').innerHTML = 'End Angle    ' + value;\n circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n ej.circulargauge.isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n 'First' : 'None';\n circulargauge.refresh();\n };\n"} \ No newline at end of file diff --git a/src/circular-gauge/multiple-axis.html b/src/circular-gauge/multiple-axis.html index 1de1e77e..ce799f6f 100644 --- a/src/circular-gauge/multiple-axis.html +++ b/src/circular-gauge/multiple-axis.html @@ -4,6 +4,7 @@
    +
    diff --git a/src/circular-gauge/multiple-axis.js b/src/circular-gauge/multiple-axis.js index 39ce07d1..0d8f4638 100644 --- a/src/circular-gauge/multiple-axis.js +++ b/src/circular-gauge/multiple-axis.js @@ -6,11 +6,13 @@ this.default = function () { var axis; var direction; var circulargauge = new ej.circulargauge.CircularGauge({ + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + //custom code end title: 'Gauge with Multiple Axes', titleStyle: { color: 'gray', size: '16px' }, axes: [{ @@ -53,6 +55,7 @@ this.default = function () { }] }); circulargauge.appendTo('#axis-container'); + // code for Property Panel axis = new ej.dropdowns.DropDownList({ index: 0, width: 120, change: function () { diff --git a/src/circular-gauge/pointer-image-stack.json b/src/circular-gauge/pointer-image-stack.json index 36a815ea..838ce5e7 100644 --- a/src/circular-gauge/pointer-image-stack.json +++ b/src/circular-gauge/pointer-image-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pointer Image in gauge\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n title: 'Short Put Distance',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n titleStyle: {\n size: '18px'\n },\n centerY: '57%',\n axes: [{\n annotations: [{\n content: '12 M', radius: '108%', angle: 98, zIndex: '1'\n }, {\n content: '11 M', radius: '80%', angle: 81, zIndex: '1'\n }, {\n content: '10 M', radius: '50%', angle: 69, zIndex: '1'\n }, {\n content: 'Doe', radius: '108%', angle: 190, zIndex: '1'\n }, {\n content: 'Almaida', radius: '80%', angle: 185, zIndex: '1'\n }, {\n content: 'John', radius: '50%', angle: 180, zIndex: '1'\n }],\n lineStyle: {\n width: 0, color: '#1d1d1d'\n },\n radius: '90%',\n labelStyle: {\n font: {\n size: '0px'\n }\n }, majorTicks: {\n interval: 20, width: 0,\n }, minorTicks: {\n width: 0,\n },\n startAngle: 200, endAngle: 130,\n minimum: 0, maximum: 14,\n ranges: [{\n start: 0, end: 12, radius: '115%',\n color: '#01aebe', startWidth: 25, endWidth: 25\n }, {\n start: 0, end: 11, radius: '85%',\n color: '#3bceac', startWidth: 25, endWidth: 25\n }, {\n start: 0, end: 10, radius: '55%',\n color: '#ee4266', startWidth: 25, endWidth: 25\n }],\n pointers: [{\n type: 'Marker', value: 12, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/football.png',\n radius: '108%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 11, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/basketball.png',\n radius: '78%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1200 }\n }, {\n type: 'Marker', value: 10, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/golfball.png',\n radius: '48%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 900 }\n }, {\n type: 'Marker', value: 12, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/athletic.png',\n radius: '0%', markerWidth: 90, markerHeight: 90,\n animation: { duration: 0 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/girl-1.png',\n radius: '108%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/man-1.png',\n radius: '78%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//npmci.syncfusion.com/development/demos/src/circular-gauge/images/man-2.png',\n radius: '48%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }]\n }]\n });\n circulargauge.appendTo('#pointer-container');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pointer Image in gauge\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n title: 'Short Put Distance',\n\n titleStyle: {\n size: '18px'\n },\n centerY: '57%',\n axes: [{\n annotations: [{\n content: '12 M', radius: '108%', angle: 98, zIndex: '1'\n }, {\n content: '11 M', radius: '80%', angle: 81, zIndex: '1'\n }, {\n content: '10 M', radius: '50%', angle: 69, zIndex: '1'\n }, {\n content: 'Doe', radius: '108%', angle: 190, zIndex: '1'\n }, {\n content: 'Almaida', radius: '80%', angle: 185, zIndex: '1'\n }, {\n content: 'John', radius: '50%', angle: 180, zIndex: '1'\n }],\n lineStyle: {\n width: 0, color: '#1d1d1d'\n },\n radius: '90%',\n labelStyle: {\n font: {\n size: '0px'\n }\n }, majorTicks: {\n interval: 20, width: 0,\n }, minorTicks: {\n width: 0,\n },\n startAngle: 200, endAngle: 130,\n minimum: 0, maximum: 14,\n ranges: [{\n start: 0, end: 12, radius: '115%',\n color: '#01aebe', startWidth: 25, endWidth: 25\n }, {\n start: 0, end: 11, radius: '85%',\n color: '#3bceac', startWidth: 25, endWidth: 25\n }, {\n start: 0, end: 10, radius: '55%',\n color: '#ee4266', startWidth: 25, endWidth: 25\n }],\n pointers: [{\n type: 'Marker', value: 12, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/football.png',\n radius: '108%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 11, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/basketball.png',\n radius: '78%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1200 }\n }, {\n type: 'Marker', value: 10, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/golfball.png',\n radius: '48%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 900 }\n }, {\n type: 'Marker', value: 12, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/athletic.png',\n radius: '0%', markerWidth: 90, markerHeight: 90,\n animation: { duration: 0 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/girl-1.png',\n radius: '108%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/man-1.png',\n radius: '78%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }, {\n type: 'Marker', value: 0.1, markerShape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/circular-gauge/images/man-2.png',\n radius: '48%', markerWidth: 28, markerHeight: 28,\n animation: { duration: 1500 }\n }]\n }]\n });\n circulargauge.appendTo('#pointer-container');\n"} \ No newline at end of file diff --git a/src/circular-gauge/pointer-image.js b/src/circular-gauge/pointer-image.js index 04677549..8e1f11ea 100644 --- a/src/circular-gauge/pointer-image.js +++ b/src/circular-gauge/pointer-image.js @@ -4,11 +4,13 @@ this.default = function () { var circulargauge = new ej.circulargauge.CircularGauge({ title: 'Short Put Distance', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end titleStyle: { size: '18px' }, diff --git a/src/circular-gauge/pointer-stack.json b/src/circular-gauge/pointer-stack.json index 6947b417..d901eb25 100644 --- a/src/circular-gauge/pointer-stack.json +++ b/src/circular-gauge/pointer-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pointers\n */\nfunction pointeGauge1() {\n var pointeGauge1 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#ff5985' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#ff5985' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n type: 'RangeBar',\n value: 66,\n radius: '90%',\n color: '#ff5985',\n pointerWidth: 10,\n animation: { enable: true, duration: 1000 }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Range Bar
    '\n }\n ]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return pointeGauge1;\n}\nfunction pointeGauge2() {\n var pointeGauge2 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#01aebe' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#01aebe' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n value: 80,\n type: 'Marker',\n markerShape: 'InvertedTriangle',\n markerWidth: 15,\n markerHeight: 15,\n color: 'rgb(0,171,169)'\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Inverted Triangle
    '\n }\n ]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return pointeGauge2;\n}\nfunction pointeGauge3() {\n var pointeGauge3 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#1E7145' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#1E7145' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n type: 'Marker',\n markerShape: 'Triangle',\n radius: '100%',\n animation: { enable: true, duration: 1000 },\n value: 70,\n markerWidth: 15,\n markerHeight: 15,\n color: '#1E7145',\n border: {\n width: 1,\n color: ' #1E7145'\n }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Triangle
    '\n }\n ]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return pointeGauge3;\n}\nfunction pointeGauge4() {\n var pointeGauge4 = new ej.circulargauge.CircularGauge({\n centerY: '40%',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#9250e6' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#9250e6' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n animation: { enable: true, duration: 900 },\n value: 70,\n color: '#923C99',\n pointerWidth: 6,\n cap: { radius: 0 },\n needleTail: { length: '4%', color: '#923C99' }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Needle
    '\n }\n ]\n }],\n });\n return pointeGauge4;\n}\nfunction pointeGauge5() {\n var pointeGauge5 = new ej.circulargauge.CircularGauge({\n centerY: '40%',\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 0 },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#067bc2' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n animation: { enable: true, duration: 900 },\n value: 40,\n color: '#067bc2',\n pointerWidth: 6,\n cap: { radius: 0 },\n needleTail: { length: '4%', color: '#067bc2' }\n }, {\n radius: '100%',\n type: 'RangeBar',\n animation: { enable: true, duration: 900 },\n value: 40,\n color: '#067bc2',\n pointerWidth: 5\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Live Update
    '\n }\n ]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return pointeGauge5;\n}\n\n var firstgauge = new ej.circulargauge.CircularGauge(pointeGauge1());\n var pointeGauge5Interval1;\n var gauge6Interval1;\n firstgauge.appendTo('#container2');\n var secondgauge = new ej.circulargauge.CircularGauge(pointeGauge2());\n secondgauge.appendTo('#container1');\n var thirdgauge = new ej.circulargauge.CircularGauge(pointeGauge3());\n thirdgauge.appendTo('#container3');\n var fourthgauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n centerY: '40%',\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#e3a21a' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#e3a21a' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '80%',\n value: 80,\n markerWidth: 5,\n markerHeight: 5,\n animation: { enable: true, duration: 1000 },\n color: '#e3a21a',\n pointerWidth: 10,\n cap: {\n radius: 8,\n color: 'white',\n border: {\n color: '#e3a21a',\n width: 1\n }\n },\n needleTail: {\n length: '20%',\n color: '#e3a21a'\n }\n }, {\n radius: '60%', value: 40,\n markerWidth: 5, markerHeight: 5,\n animation: { duration: 1000 },\n color: '#ffb133',\n pointerWidth: 10,\n cap: {\n radius: 8, color: 'white',\n border: { color: '#ffb133', width: 1 }\n },\n needleTail: { length: '20%', color: '#e3a21a' }\n }],\n annotations: [\n {\n angle: 180,\n radius: '25%', zIndex:1,\n content: '
    Multiple Needle
    '\n }\n ]\n }],\n });\n fourthgauge.appendTo('#container5');\n var fifthGauge = new ej.circulargauge.CircularGauge(pointeGauge4());\n fifthGauge.appendTo('#container4');\n var sixthGauge = new ej.circulargauge.CircularGauge(pointeGauge5());\n sixthGauge.appendTo('#container6');\n this.pointeGauge5Interval1 = setInterval(function () {\n var newVal = Math.random() * (90 - 20) + 20;\n if (document.getElementById('container5')) {\n fifthGauge.setPointerValue(0, 0, newVal);\n }\n else {\n clearInterval(this.pointeGauge5Interval1);\n }\n }, 1000);\n this.gauge6Interval1 = setInterval(function () {\n var newVal = Math.random() * (80 - 30) + 30;\n if (document.getElementById('container6')) {\n sixthGauge.setPointerValue(0, 0, newVal);\n sixthGauge.setPointerValue(0, 1, newVal);\n }\n else {\n clearInterval(this.gauge6Interval1);\n }\n }, 1000);\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Code for first gauge\n */\nfunction pointeGauge1() {\n var pointeGauge1 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#ff5985' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#ff5985' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n type: 'RangeBar',\n value: 66,\n radius: '90%',\n color: '#ff5985',\n pointerWidth: 10,\n animation: { enable: true, duration: 1000 }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Range Bar
    '\n }\n ]\n }],\n\n });\n return pointeGauge1;\n}\n\n/**\n * Code for second gauge\n*/ \nfunction pointeGauge2() {\n var pointeGauge2 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#01aebe' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#01aebe' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n value: 80,\n type: 'Marker',\n markerShape: 'InvertedTriangle',\n markerWidth: 15,\n markerHeight: 15,\n color: 'rgb(0,171,169)'\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Inverted Triangle
    '\n }\n ]\n }],\n\n });\n return pointeGauge2;\n}\n/**\n * Code for Third Gauge\n */\nfunction pointeGauge3() {\n var pointeGauge3 = new ej.circulargauge.CircularGauge({\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#1E7145' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#1E7145' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n type: 'Marker',\n markerShape: 'Triangle',\n radius: '100%',\n animation: { enable: true, duration: 1000 },\n value: 70,\n markerWidth: 15,\n markerHeight: 15,\n color: '#1E7145',\n border: {\n width: 1,\n color: ' #1E7145'\n }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Triangle
    '\n }\n ]\n }],\n\n });\n return pointeGauge3;\n}\n/**\n * Code for Fourth gauge\n */\nfunction pointeGauge4() {\n var pointeGauge4 = new ej.circulargauge.CircularGauge({\n centerY: '40%',\n\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#9250e6' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#9250e6' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n animation: { enable: true, duration: 900 },\n value: 70,\n color: '#923C99',\n pointerWidth: 6,\n cap: { radius: 0 },\n needleTail: { length: '4%', color: '#923C99' }\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Needle
    '\n }\n ]\n }],\n });\n return pointeGauge4;\n}\n/**\n * Code for Fifth gauge\n */\nfunction pointeGauge5() {\n var pointeGauge5 = new ej.circulargauge.CircularGauge({\n centerY: '40%',\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 0 },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#067bc2' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '100%',\n animation: { enable: true, duration: 900 },\n value: 40,\n color: '#067bc2',\n pointerWidth: 6,\n cap: { radius: 0 },\n needleTail: { length: '4%', color: '#067bc2' }\n }, {\n radius: '100%',\n type: 'RangeBar',\n animation: { enable: true, duration: 900 },\n value: 40,\n color: '#067bc2',\n pointerWidth: 5\n }],\n annotations: [\n {\n angle: 180,\n radius: '20%', zIndex:1,\n content: '
    Live Update
    '\n }\n ]\n }],\n\n });\n return pointeGauge5;\n}\n\n var firstgauge = new ej.circulargauge.CircularGauge(pointeGauge1());\n var pointeGauge5Interval1;\n var gauge6Interval1;\n firstgauge.appendTo('#container2');\n var secondgauge = new ej.circulargauge.CircularGauge(pointeGauge2());\n secondgauge.appendTo('#container1');\n var thirdgauge = new ej.circulargauge.CircularGauge(pointeGauge3());\n thirdgauge.appendTo('#container3');\n var fourthgauge = new ej.circulargauge.CircularGauge({\n\n centerY: '40%',\n axes: [{\n startAngle: 270,\n endAngle: 90,\n lineStyle: { width: 3, color: '#e3a21a' },\n labelStyle: {\n position: 'Outside',\n font: { size: '0px', color: '#e3a21a' }\n }, majorTicks: {\n width: 1,\n height: 0,\n interval: 100\n }, minorTicks: {\n height: 0,\n width: 0,\n },\n radius: '90%',\n minimum: 0,\n maximum: 100,\n pointers: [{\n radius: '80%',\n value: 80,\n markerWidth: 5,\n markerHeight: 5,\n animation: { enable: true, duration: 1000 },\n color: '#e3a21a',\n pointerWidth: 10,\n cap: {\n radius: 8,\n color: 'white',\n border: {\n color: '#e3a21a',\n width: 1\n }\n },\n needleTail: {\n length: '20%',\n color: '#e3a21a'\n }\n }, {\n radius: '60%', value: 40,\n markerWidth: 5, markerHeight: 5,\n animation: { duration: 1000 },\n color: '#ffb133',\n pointerWidth: 10,\n cap: {\n radius: 8, color: 'white',\n border: { color: '#ffb133', width: 1 }\n },\n needleTail: { length: '20%', color: '#e3a21a' }\n }],\n annotations: [\n {\n angle: 180,\n radius: '25%', zIndex:1,\n content: '
    Multiple Needle
    '\n }\n ]\n }],\n });\n fourthgauge.appendTo('#container5');\n var fifthGauge = new ej.circulargauge.CircularGauge(pointeGauge4());\n fifthGauge.appendTo('#container4');\n var sixthGauge = new ej.circulargauge.CircularGauge(pointeGauge5());\n sixthGauge.appendTo('#container6');\n this.pointeGauge5Interval1 = setInterval(function () {\n var newVal = Math.random() * (90 - 20) + 20;\n if (document.getElementById('container5')) {\n fifthGauge.setPointerValue(0, 0, newVal);\n }\n else {\n clearInterval(this.pointeGauge5Interval1);\n }\n }, 1000);\n this.gauge6Interval1 = setInterval(function () {\n var newVal = Math.random() * (80 - 30) + 30;\n if (document.getElementById('container6')) {\n sixthGauge.setPointerValue(0, 0, newVal);\n sixthGauge.setPointerValue(0, 1, newVal);\n }\n else {\n clearInterval(this.gauge6Interval1);\n }\n }, 1000);\n"} \ No newline at end of file diff --git a/src/circular-gauge/pointer.js b/src/circular-gauge/pointer.js index c60b051f..d9a4c664 100644 --- a/src/circular-gauge/pointer.js +++ b/src/circular-gauge/pointer.js @@ -1,5 +1,5 @@ /** - * Sample for Pointers + * Code for first gauge */ function pointeGauge1() { var pointeGauge1 = new ej.circulargauge.CircularGauge({ @@ -37,14 +37,20 @@ function pointeGauge1() { } ] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return pointeGauge1; } + +/** + * Code for second gauge +*/ function pointeGauge2() { var pointeGauge2 = new ej.circulargauge.CircularGauge({ axes: [{ @@ -82,14 +88,19 @@ function pointeGauge2() { } ] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return pointeGauge2; } +/** + * Code for Third Gauge + */ function pointeGauge3() { var pointeGauge3 = new ej.circulargauge.CircularGauge({ axes: [{ @@ -132,22 +143,29 @@ function pointeGauge3() { } ] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return pointeGauge3; } +/** + * Code for Fourth gauge + */ function pointeGauge4() { var pointeGauge4 = new ej.circulargauge.CircularGauge({ centerY: '40%', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ startAngle: 270, endAngle: 90, @@ -186,6 +204,9 @@ function pointeGauge4() { }); return pointeGauge4; } +/** + * Code for Fifth gauge + */ function pointeGauge5() { var pointeGauge5 = new ej.circulargauge.CircularGauge({ centerY: '40%', @@ -231,11 +252,13 @@ function pointeGauge5() { } ] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return pointeGauge5; } @@ -249,11 +272,13 @@ this.default = function () { var thirdgauge = new ej.circulargauge.CircularGauge(pointeGauge3()); thirdgauge.appendTo('#container3'); var fourthgauge = new ej.circulargauge.CircularGauge({ + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end centerY: '40%', axes: [{ startAngle: 270, diff --git a/src/circular-gauge/range-stack.json b/src/circular-gauge/range-stack.json index 2fdfa1ee..ba328902 100644 --- a/src/circular-gauge/range-stack.json +++ b/src/circular-gauge/range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Select Range
    \n     		\n
    \n \n
    \n
    \n
    Range Start    0
    \n     		\n
    \n \n
    \n
    \n
    Range End    40
    \n     		\n
    \n \n
    \n
    \n
    Range Color
    \n     		\n
    \n \n
    \n
    \n
    Range Font Color
    \n     		\n
    \n \n
    \n
    \n
    Start Width    10
    \n     		\n
    \n \n
    \n
    \n
    End Width    10
    \n     		\n
    \n \n
    \n
    \n
    Corner Radius    0
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for Range\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, width: 0.5, offset: 10, color: 'black' }, minorTicks: { height: 0, width: 0.5 },\n annotations: [{\n content: '
    Speedometer
    ',\n radius: '30%', angle: 0, zIndex: 1\n }, {\n content: '
    65 MPH
    ',\n radius: '40%', angle: 180, zIndex: 1\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', color: '#757575', pointerWidth: 8,\n cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }\n }]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n });\n circulargauge.appendTo('#range-container');\n var colortObj;\n var listObj = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var index = +listObj.value;\n colortObj.value = circulargauge.axes[0].ranges[index].color;\n (document.getElementById('endWidth')).value = circulargauge.axes[0].ranges[index].endWidth.toString();\n document.getElementById('rangeEndWidth').innerHTML = 'End Width    ' +\n circulargauge.axes[0].ranges[index].endWidth;\n (document.getElementById('startWidth')).value = circulargauge.axes[0].ranges[index].startWidth.toString();\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width    ' +\n circulargauge.axes[0].ranges[index].startWidth;\n (document.getElementById('end')).value = circulargauge.axes[0].ranges[index].end.toString();\n document.getElementById('rangeEnd').innerHTML = 'Range End    ' +\n circulargauge.axes[0].ranges[index].end;\n (document.getElementById('start')).value = circulargauge.axes[0].ranges[index].start.toString();\n document.getElementById('rangeStart').innerHTML = 'Range Start    ' +\n circulargauge.axes[0].ranges[index].start;\n document.getElementById('radius').value = circulargauge.axes[0].ranges[index].roundedCornerRadius.toString();\n document.getElementById('cornerRadius').innerHTML = 'Corner Radius ' +\n circulargauge.axes[0].ranges[index].roundedCornerRadius;\n }\n });\n listObj.appendTo('#rangeSelect');\n\n colortObj = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[0].ranges[+listObj.value].color = colortObj.value.toString();\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n }\n });\n colortObj.appendTo('#rangeColor');\n\n document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =\n document.getElementById('start').onchange = function () {\n var min = parseInt((document.getElementById('start')).value, 10);\n document.getElementById('rangeStart').innerHTML = 'Range Start    ' + min;\n circulargauge.axes[0].ranges[+listObj.value].start = min;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =\n document.getElementById('end').onchange = function () {\n var max = parseInt((document.getElementById('end')).value, 10);\n document.getElementById('rangeEnd').innerHTML = 'Range End    ' + max;\n circulargauge.axes[0].ranges[+listObj.value].end = max;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('startWidth').onpointermove = document.getElementById('startWidth').ontouchmove =\n document.getElementById('startWidth').onchange = function () {\n var startWidth = parseInt((document.getElementById('startWidth')).value, 10);\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width    ' + startWidth;\n circulargauge.axes[0].ranges[+listObj.value].startWidth = startWidth;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('endWidth').onpointermove = document.getElementById('endWidth').ontouchmove =\n document.getElementById('endWidth').onchange = function () {\n var endWidth = parseInt((document.getElementById('endWidth')).value, 10);\n document.getElementById('rangeEndWidth').innerHTML = 'End Width    ' + endWidth;\n circulargauge.axes[0].ranges[+listObj.value].endWidth = endWidth;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =\n document.getElementById('radius').onchange = function () {\n var radius = parseInt((document.getElementById('radius')).value, 10);\n document.getElementById('cornerRadius').innerHTML = 'Corner Radius    ' + radius;\n circulargauge.axes[0].ranges[+listObj.value].roundedCornerRadius = radius;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('enable').onchange = function () {\n var useRangeColor = (document.getElementById('enable')).checked;\n circulargauge.axes[0].labelStyle.useRangeColor = useRangeColor;\n circulargauge.axes[0].majorTicks.useRangeColor = useRangeColor;\n circulargauge.axes[0].minorTicks.useRangeColor = useRangeColor;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Select Range
    \n     		\n
    \n \n
    \n
    \n
    Range Start    0
    \n     		\n
    \n \n
    \n
    \n
    Range End    40
    \n     		\n
    \n \n
    \n
    \n
    Range Color
    \n     		\n
    \n \n
    \n
    \n
    Range Font Color
    \n     		\n
    \n \n
    \n
    \n
    Start Width    10
    \n     		\n
    \n \n
    \n
    \n
    End Width    10
    \n     		\n
    \n \n
    \n
    \n
    Corner Radius    0
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for Range\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, width: 0.5, offset: 10 }, minorTicks: { height: 0, width: 0.5 },\n annotations: [{\n content: '
    Speedometer
    ',\n radius: '30%', angle: 0, zIndex: 1\n }, {\n content: '
    65 MPH
    ',\n radius: '40%', angle: 180, zIndex: 1\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', pointerWidth: 8,\n cap: { radius: 7 }, needleTail: { length: '18%' }\n }]\n }],\n\n });\n circulargauge.appendTo('#range-container');\n // Code for Property Panel\n var colortObj;\n var listObj = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n var index = +listObj.value;\n colortObj.value = circulargauge.axes[0].ranges[index].color;\n (document.getElementById('endWidth')).value = circulargauge.axes[0].ranges[index].endWidth.toString();\n document.getElementById('rangeEndWidth').innerHTML = 'End Width    ' +\n circulargauge.axes[0].ranges[index].endWidth;\n (document.getElementById('startWidth')).value = circulargauge.axes[0].ranges[index].startWidth.toString();\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width    ' +\n circulargauge.axes[0].ranges[index].startWidth;\n (document.getElementById('end')).value = circulargauge.axes[0].ranges[index].end.toString();\n document.getElementById('rangeEnd').innerHTML = 'Range End    ' +\n circulargauge.axes[0].ranges[index].end;\n (document.getElementById('start')).value = circulargauge.axes[0].ranges[index].start.toString();\n document.getElementById('rangeStart').innerHTML = 'Range Start    ' +\n circulargauge.axes[0].ranges[index].start;\n document.getElementById('radius').value = circulargauge.axes[0].ranges[index].roundedCornerRadius.toString();\n document.getElementById('cornerRadius').innerHTML = 'Corner Radius ' +\n circulargauge.axes[0].ranges[index].roundedCornerRadius;\n }\n });\n listObj.appendTo('#rangeSelect');\n\n colortObj = new ej.dropdowns.DropDownList({\n index: 0, width: 120,\n change: function () {\n circulargauge.axes[0].ranges[+listObj.value].color = colortObj.value.toString();\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n }\n });\n colortObj.appendTo('#rangeColor');\n\n document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =\n document.getElementById('start').onchange = function () {\n var min = parseInt((document.getElementById('start')).value, 10);\n document.getElementById('rangeStart').innerHTML = 'Range Start    ' + min;\n circulargauge.axes[0].ranges[+listObj.value].start = min;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =\n document.getElementById('end').onchange = function () {\n var max = parseInt((document.getElementById('end')).value, 10);\n document.getElementById('rangeEnd').innerHTML = 'Range End    ' + max;\n circulargauge.axes[0].ranges[+listObj.value].end = max;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('startWidth').onpointermove = document.getElementById('startWidth').ontouchmove =\n document.getElementById('startWidth').onchange = function () {\n var startWidth = parseInt((document.getElementById('startWidth')).value, 10);\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width    ' + startWidth;\n circulargauge.axes[0].ranges[+listObj.value].startWidth = startWidth;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('endWidth').onpointermove = document.getElementById('endWidth').ontouchmove =\n document.getElementById('endWidth').onchange = function () {\n var endWidth = parseInt((document.getElementById('endWidth')).value, 10);\n document.getElementById('rangeEndWidth').innerHTML = 'End Width    ' + endWidth;\n circulargauge.axes[0].ranges[+listObj.value].endWidth = endWidth;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =\n document.getElementById('radius').onchange = function () {\n var radius = parseInt((document.getElementById('radius')).value, 10);\n document.getElementById('cornerRadius').innerHTML = 'Corner Radius    ' + radius;\n circulargauge.axes[0].ranges[+listObj.value].roundedCornerRadius = radius;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n\n document.getElementById('enable').onchange = function () {\n var useRangeColor = (document.getElementById('enable')).checked;\n circulargauge.axes[0].labelStyle.useRangeColor = useRangeColor;\n circulargauge.axes[0].majorTicks.useRangeColor = useRangeColor;\n circulargauge.axes[0].minorTicks.useRangeColor = useRangeColor;\n circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();\n };\n"} \ No newline at end of file diff --git a/src/circular-gauge/range.html b/src/circular-gauge/range.html index 17b6b494..d1ad1b64 100644 --- a/src/circular-gauge/range.html +++ b/src/circular-gauge/range.html @@ -4,6 +4,7 @@
    +
    @@ -116,9 +117,10 @@ documentation section.

    - + \ No newline at end of file + + \ No newline at end of file diff --git a/src/circular-gauge/range.js b/src/circular-gauge/range.js index 2f1b84ac..c7b67de8 100644 --- a/src/circular-gauge/range.js +++ b/src/circular-gauge/range.js @@ -8,7 +8,7 @@ this.default = function () { labelStyle: { position: 'Inside', useRangeColor: false, font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' } - }, majorTicks: { height: 10, width: 0.5, offset: 10, color: 'black' }, minorTicks: { height: 0, width: 0.5 }, + }, majorTicks: { height: 10, width: 0.5, offset: 10 }, minorTicks: { height: 0, width: 0.5 }, annotations: [{ content: '
    Speedometer
    ', radius: '30%', angle: 0, zIndex: 1 @@ -20,17 +20,20 @@ this.default = function () { ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' }, { start: 80, end: 120, color: '#F03E3E' }], pointers: [{ - value: 65, radius: '60%', color: '#757575', pointerWidth: 8, - cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' } + value: 65, radius: '60%', pointerWidth: 8, + cap: { radius: 7 }, needleTail: { length: '18%' } }] }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end }); circulargauge.appendTo('#range-container'); + // Code for Property Panel var colortObj; var listObj = new ej.dropdowns.DropDownList({ index: 0, width: 120, diff --git a/src/circular-gauge/sample.json b/src/circular-gauge/sample.json index 8d640e48..cbc63956 100644 --- a/src/circular-gauge/sample.json +++ b/src/circular-gauge/sample.json @@ -2,8 +2,8 @@ "name": "Circular Gauge", "directory": "circular-gauge", "category": "Data Visualization", - "type": "update", - "ftName": "circulargauge", + "type": "update", + "ftName": "circulargauge", "samples": [ { "url": "default", @@ -22,7 +22,7 @@ "name": "Tick and Labels", "description": "This demo for Essential JS2 Circular Gauge control shows various properties available to customize the ticks and labels of an axis.", "category": "Circular Gauge", - "type": "update" + "type": "update" }, { "url": "annotation", @@ -39,14 +39,12 @@ { "url": "semi-circular-gauge", "name": "Semi-circular Gauge", - "category": "Circular Gauge", - "type": "new" + "category": "Circular Gauge" }, { "url": "arc-gauge", "name": "Arc Gauge", - "category": "Circular Gauge", - "type": "new" + "category": "Circular Gauge" }, { "url": "compass", @@ -88,13 +86,19 @@ "url": "data-sample", "name": "Data Sample", "description": "This demo for Essential JS2 Circular Gauge control demonstrates live data, along with the data grid control.", - "category": "Live" + "category": "Use Cases" + }, + { + "url": "apple-watch-rings", + "name": "Apple Watch Rings", + "description": "This demo for Essential JS2 Circular Gauge control illustrates how to highlight specific regions in an axis by using ranges.", + "type": "new", + "category": "Use Cases" }, { "url": "speedometer", "name": "Speedometer", - "category": "Live", - "type": "new" + "category": "Use Cases" } ] } \ No newline at end of file diff --git a/src/circular-gauge/semi-circular-gauge-stack.json b/src/circular-gauge/semi-circular-gauge-stack.json index b78fa97f..016fc650 100644 --- a/src/circular-gauge/semi-circular-gauge-stack.json +++ b/src/circular-gauge/semi-circular-gauge-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Start Angle    270°
    \n     		\n
    \n \n
    \n
    \n
    End Angle    90°
    \n     		\n
    \n \n
    \n
    \n
    Radius    80
    \n     		\n
    \n \n
    \n
    \n
    Radius based on angle
    \n     		\n
    \n \n
    \n
    \n
    Center X    50%
    \n     		\n
    \n \n
    \n
    \n
    Center Y    50%
    \n     		\n
    \n \n
    \n
    \n
    \n \n \n \n ","index.js":"{{ripple}}/** \n * Semi circular gauge sample.\n*/\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var semitheme = location.hash.split('/')[1];\n semitheme = semitheme ? semitheme : 'Material';\n args.gauge.theme = (semitheme.charAt(0).toUpperCase() + semitheme.slice(1));\n },\n moveToCenter: false,\n axes: [{\n startAngle: 270, endAngle: 90,\n lineStyle: { width: 0, color: '#0450C2' },\n labelStyle: {\n position: 'Outside', autoAngle: true,\n font: { fontWeight: 'normal' }\n }, majorTicks: {\n position: 'Inside', width: 2, height: 12, interval: 20\n }, minorTicks: {\n position: 'Inside', height: 5, width: 1, interval: 2\n },\n radius: '80%', minimum: 0, maximum: 100,\n pointers: [{\n animation: { enable: false },\n value: 30,\n radius: '75%',\n color: '#FF9200',\n pointerWidth: 7,\n cap: { radius: 8, color: '#565656', border: { width: 0 } },\n needleTail: { length: '13%', color: '#FF9200' }\n }]\n }]\n });\n circulargauge.appendTo('#gauge');\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false,\n }, '#angle');\n highlightCheckBox.change = opacity = function (e) {\n var centerX = document.getElementById('centerX');\n var centerY = document.getElementById('centerY');\n if (e.checked) {\n circulargauge.centerX = null;\n circulargauge.centerY = null;\n circulargauge.moveToCenter = true;\n centerX.disabled = true;\n centerY.disabled = true;\n }\n else {\n circulargauge.centerX = centerX.value + '%';\n circulargauge.centerY = centerY.value + '%';\n centerX.disabled = false;\n centerY.disabled = false;\n circulargauge.moveToCenter = false;\n }\n circulargauge.refresh();\n };\n document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =\n document.getElementById('start').onchange = function () {\n var min = parseInt(document.getElementById('start').value, 10);\n document.getElementById('rangeStart').innerHTML = 'Start Angle    ' + min + '°';\n circulargauge.axes[0].startAngle = min;\n circulargauge.refresh();\n };\n document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =\n document.getElementById('end').onchange = function () {\n var max = parseInt(document.getElementById('end').value, 10);\n document.getElementById('rangeEnd').innerHTML = 'End Angle    ' + max + '°';\n circulargauge.axes[0].endAngle = max;\n circulargauge.refresh();\n };\n document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =\n document.getElementById('radius').onchange = function () {\n var max = parseInt(document.getElementById('radius').value, 10);\n document.getElementById('radius1').innerHTML = 'Radius    ' + max + '%';\n circulargauge.axes[0].radius = '' + max + '%';\n circulargauge.refresh();\n };\n document.getElementById('centerX').onpointermove = document.getElementById('centerX').ontouchmove =\n document.getElementById('centerX').onchange = function () {\n if (!highlightCheckBox.checked) {\n var max = parseInt(document.getElementById('centerX').value, 10);\n document.getElementById('center1').innerHTML = 'Center X    ' + max + '%';\n circulargauge.centerX = '' + max + '%';\n circulargauge.refresh();\n }\n };\n document.getElementById('centerY').onpointermove = document.getElementById('centerY').ontouchmove =\n document.getElementById('centerY').onchange = function () {\n if (!highlightCheckBox.checked) {\n var max = parseInt(document.getElementById('centerY').value, 10);\n document.getElementById('center2').innerHTML = 'Center Y    ' + max + '%';\n circulargauge.centerY = '' + max + '%';\n circulargauge.refresh();\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Start Angle    270°
    \n     		\n
    \n \n
    \n
    \n
    End Angle    90°
    \n     		\n
    \n \n
    \n
    \n
    Radius    80
    \n     		\n
    \n \n
    \n
    \n
    Radius based on angle
    \n     		\n
    \n \n
    \n
    \n
    Center X    50%
    \n     		\n
    \n \n
    \n
    \n
    Center Y    50%
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n \n \n","index.js":"{{ripple}}/** \n * Semi circular gauge sample.\n*/\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n\n moveToCenter: false,\n axes: [{\n startAngle: 270, endAngle: 90,\n lineStyle: { width: 0, color: '#0450C2' },\n labelStyle: {\n position: 'Outside', autoAngle: true,\n font: { fontWeight: 'normal' }\n }, majorTicks: {\n position: 'Inside', width: 2, height: 12, interval: 20\n }, minorTicks: {\n position: 'Inside', height: 5, width: 1, interval: 2\n },\n radius: '80%', minimum: 0, maximum: 100,\n pointers: [{\n animation: { enable: false },\n value: 30,\n radius: '75%',\n color: '#FF9200',\n pointerWidth: 7,\n cap: { radius: 8, color: '#565656', border: { width: 0 } },\n needleTail: { length: '13%', color: '#FF9200' }\n }]\n }]\n });\n circulargauge.appendTo('#gauge');\n // code for Property Panel\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false,\n }, '#angle');\n highlightCheckBox.change = opacity = function (e) {\n var centerX = document.getElementById('centerX');\n var centerY = document.getElementById('centerY');\n if (e.checked) {\n circulargauge.centerX = null;\n circulargauge.centerY = null;\n circulargauge.moveToCenter = true;\n centerX.disabled = true;\n centerY.disabled = true;\n }\n else {\n circulargauge.centerX = centerX.value + '%';\n circulargauge.centerY = centerY.value + '%';\n centerX.disabled = false;\n centerY.disabled = false;\n circulargauge.moveToCenter = false;\n }\n circulargauge.refresh();\n };\n document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =\n document.getElementById('start').onchange = function () {\n var min = parseInt(document.getElementById('start').value, 10);\n document.getElementById('rangeStart').innerHTML = 'Start Angle    ' + min + '°';\n circulargauge.axes[0].startAngle = min;\n circulargauge.refresh();\n };\n document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =\n document.getElementById('end').onchange = function () {\n var max = parseInt(document.getElementById('end').value, 10);\n document.getElementById('rangeEnd').innerHTML = 'End Angle    ' + max + '°';\n circulargauge.axes[0].endAngle = max;\n circulargauge.refresh();\n };\n document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =\n document.getElementById('radius').onchange = function () {\n var max = parseInt(document.getElementById('radius').value, 10);\n document.getElementById('radius1').innerHTML = 'Radius    ' + max + '%';\n circulargauge.axes[0].radius = '' + max + '%';\n circulargauge.refresh();\n };\n document.getElementById('centerX').onpointermove = document.getElementById('centerX').ontouchmove =\n document.getElementById('centerX').onchange = function () {\n if (!highlightCheckBox.checked) {\n var max = parseInt(document.getElementById('centerX').value, 10);\n document.getElementById('center1').innerHTML = 'Center X    ' + max + '%';\n circulargauge.centerX = '' + max + '%';\n circulargauge.refresh();\n }\n };\n document.getElementById('centerY').onpointermove = document.getElementById('centerY').ontouchmove =\n document.getElementById('centerY').onchange = function () {\n if (!highlightCheckBox.checked) {\n var max = parseInt(document.getElementById('centerY').value, 10);\n document.getElementById('center2').innerHTML = 'Center Y    ' + max + '%';\n circulargauge.centerY = '' + max + '%';\n circulargauge.refresh();\n }\n };\n\n"} \ No newline at end of file diff --git a/src/circular-gauge/semi-circular-gauge.html b/src/circular-gauge/semi-circular-gauge.html index 52dcd125..00abc7e4 100644 --- a/src/circular-gauge/semi-circular-gauge.html +++ b/src/circular-gauge/semi-circular-gauge.html @@ -4,6 +4,7 @@
    +
    @@ -85,8 +86,10 @@ documentation section.

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/circular-gauge/semi-circular-gauge.js b/src/circular-gauge/semi-circular-gauge.js index 1879c211..e147d27c 100644 --- a/src/circular-gauge/semi-circular-gauge.js +++ b/src/circular-gauge/semi-circular-gauge.js @@ -3,11 +3,13 @@ */ this.default = function () { var circulargauge = new ej.circulargauge.CircularGauge({ + // custom code start load: function (args) { var semitheme = location.hash.split('/')[1]; semitheme = semitheme ? semitheme : 'Material'; args.gauge.theme = (semitheme.charAt(0).toUpperCase() + semitheme.slice(1)); }, + // custom code end moveToCenter: false, axes: [{ startAngle: 270, endAngle: 90, @@ -33,6 +35,7 @@ this.default = function () { }] }); circulargauge.appendTo('#gauge'); + // code for Property Panel var opacity; var highlightCheckBox = new ej.buttons.CheckBox({ change: opacity, checked: false, diff --git a/src/circular-gauge/speedometer-stack.json b/src/circular-gauge/speedometer-stack.json index e8682663..debbe451 100644 --- a/src/circular-gauge/speedometer-stack.json +++ b/src/circular-gauge/speedometer-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Show text labels
    \n     		\n
    \n \n
    \n
    \n
    Combine ranges
    \n     		\n
    \n \n
    \n
    \n
    Gap between ranges
    \n     		\n
    \n \n
    \n
    \n
    \n \n\n \n \n \n \n \n \n \n \n \n","index.js":"{{ripple}}/**\n * Speedometer sample\n */\n\nfunction gauge6() {\n var gauge6 = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var speedTheme = location.hash.split('/')[1];\n speedTheme = speedTheme ? speedTheme : 'Material';\n args.gauge.theme = (speedTheme.charAt(0).toUpperCase() + speedTheme.slice(1));\n },\n title: 'Speedometer',\n titleStyle: { size: '18px' },\n centerY: '75%',\n axes: [{\n radius: '120%',\n minimum: 0,\n maximum: 120,\n lineStyle: { width: 0 },\n majorTicks: { width: 0, },\n minorTicks: { width: 0 },\n labelStyle: { useRangeColor: false, position: 'Outside', autoAngle: true,\n font: { size: '13px', fontFamily: 'Roboto' } },\n startAngle: 270, endAngle: 90,\n pointers: [{\n animation: { enable: true, duration: 900 },\n value: 40,\n radius: '80%',\n color: '#757575',\n pointerWidth: 7,\n cap: {\n radius: 8,\n color: '#757575',\n border: { width: 0 }\n },\n needleTail: {\n color: '#757575',\n length: '15%'\n },\n }],\n annotations: [\n {\n content: '#pointerValue',\n angle: 0, zIndex: '1',\n radius: '30%'\n }\n ],\n ranges: [\n {\n start: 0,\n end: 20,\n startWidth: 5, endWidth: 10,\n radius: '102%',\n color: '#82b944',\n },\n {\n start: 20,\n end: 40,\n startWidth: 10, endWidth: 15,\n radius: '102%',\n color: '#a1cb43',\n }, {\n start: 40,\n end: 60,\n startWidth: 15, endWidth: 20,\n radius: '102%',\n color: '#ddec12',\n },\n {\n start: 60,\n end: 80,\n startWidth: 20, endWidth: 25,\n radius: '102%',\n color: '#ffbc00',\n },\n {\n start: 80,\n end: 100,\n startWidth: 25, endWidth: 30,\n radius: '102%',\n color: '#ff6000',\n },\n {\n start: 100,\n end: 120,\n startWidth: 30, endWidth: 35,\n radius: '102%',\n color: 'red',\n }\n ]\n }],\n });\n return gauge6;\n}\n\n var circulargauge = new ej.circulargauge.CircularGauge(this.gauge6());\n circulargauge.appendTo('#container');\n\n var gauge5Interval1 = setInterval(function () {\n var newVal = circulargauge.axes[0].pointers[0].value + (Math.floor(Math.random() * (10 - (-10))) - 10);\n if (newVal <= 0) {\n newVal = 5;\n }\n if (document.getElementById('container')) {\n circulargauge.axes[0].pointers[0].animation.enable = true;\n circulargauge.setPointerValue(0, 0, newVal);\n if (!ej.base.isNullOrUndefined(document.getElementById('pointerannotation'))) {\n document.getElementById('pointerannotation').innerHTML = newVal.toString() + ' km/h';\n }\n }\n else {\n clearInterval(this.gauge5Interval1);\n }\n }, 1000);\n var showText;\n var interval = new ej.buttons.CheckBox({\n change: showText, checked: false\n }, '#showText');\n var combineRange;\n var rangeSet = new ej.buttons.CheckBox({\n change: combineRange, checked: false\n }, '#combineRange');\n var range;\n var showCheckBox = new ej.buttons.CheckBox({\n change: range, checked: false\n }, '#range');\n rangeSet.change = combineRange = function (e) {\n if (e.checked === true) {\n showCheckBox.disabled = true;\n circulargauge.axes[0].ranges[0].start = 0;\n circulargauge.axes[0].ranges[0].end = 120;\n circulargauge.axes[0].ranges[0].startWidth = 5;\n circulargauge.axes[0].ranges[0].endWidth = 35;\n circulargauge.axes[0].ranges[0].color = 'url(#grad1)';\n circulargauge.axes[0].ranges[1].start = null;\n circulargauge.axes[0].ranges[1].end = null;\n circulargauge.axes[0].ranges[1].startWidth = '';\n circulargauge.axes[0].ranges[1].endWidth = '';\n circulargauge.axes[0].ranges[1].color = '';\n circulargauge.axes[0].ranges[2].start = null;\n circulargauge.axes[0].ranges[2].end = null;\n circulargauge.axes[0].ranges[2].startWidth = '';\n circulargauge.axes[0].ranges[2].endWidth = '';\n circulargauge.axes[0].ranges[2].color = '';\n circulargauge.axes[0].ranges[3].start = null;\n circulargauge.axes[0].ranges[3].end = null;\n circulargauge.axes[0].ranges[3].startWidth = '';\n circulargauge.axes[0].ranges[3].endWidth = '';\n circulargauge.axes[0].ranges[3].color = '';\n circulargauge.axes[0].ranges[4].start = null;\n circulargauge.axes[0].ranges[4].end = null;\n circulargauge.axes[0].ranges[4].startWidth = '';\n circulargauge.axes[0].ranges[4].endWidth = '';\n circulargauge.axes[0].ranges[4].color = '';\n circulargauge.axes[0].ranges[5].start = null;\n circulargauge.axes[0].ranges[5].end = null;\n circulargauge.axes[0].ranges[5].startWidth = '';\n circulargauge.axes[0].ranges[5].endWidth = '';\n circulargauge.axes[0].ranges[5].color = '';\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n else {\n showCheckBox.disabled = false;\n circulargauge.axes[0].ranges[0].start = 0;\n circulargauge.axes[0].ranges[0].end = 20;\n circulargauge.axes[0].ranges[0].startWidth = 5;\n circulargauge.axes[0].ranges[0].endWidth = 10;\n circulargauge.axes[0].ranges[0].color = '#82b944';\n circulargauge.axes[0].ranges[1].start = 20;\n circulargauge.axes[0].ranges[1].end = 40;\n circulargauge.axes[0].ranges[1].startWidth = 10;\n circulargauge.axes[0].ranges[1].endWidth = 15;\n circulargauge.axes[0].ranges[1].color = '#a1cb43';\n circulargauge.axes[0].ranges[2].start = 40;\n circulargauge.axes[0].ranges[2].end = 60;\n circulargauge.axes[0].ranges[2].startWidth = 15;\n circulargauge.axes[0].ranges[2].endWidth = 20;\n circulargauge.axes[0].ranges[2].color = '#ddec12';\n circulargauge.axes[0].ranges[3].start = 60;\n circulargauge.axes[0].ranges[3].end = 80;\n circulargauge.axes[0].ranges[3].startWidth = 20;\n circulargauge.axes[0].ranges[3].endWidth = 25;\n circulargauge.axes[0].ranges[3].color = '#ffbc00';\n circulargauge.axes[0].ranges[4].start = 80;\n circulargauge.axes[0].ranges[4].end = 100;\n circulargauge.axes[0].ranges[4].startWidth = 25;\n circulargauge.axes[0].ranges[4].endWidth = 30;\n circulargauge.axes[0].ranges[4].color = '#ff6000';\n circulargauge.axes[0].ranges[5].start = 100;\n circulargauge.axes[0].ranges[5].end = 120;\n circulargauge.axes[0].ranges[5].startWidth = 30;\n circulargauge.axes[0].ranges[5].endWidth = 35;\n circulargauge.axes[0].ranges[5].color = 'red';\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n };\n interval.change = range = function (e) {\n if (e.checked === true) {\n circulargauge.axes[0].majorTicks.interval = 10;\n circulargauge.axisLabelRender = function (args) {\n var text;\n switch (parseInt(args.text)) {\n case 10:\n text = 'Ideal';\n break;\n case 30:\n text = 'Safe';\n break;\n case 50:\n text = 'Good';\n break;\n case 70:\n text = 'Ok';\n break;\n case 90:\n text = 'Risk';\n break;\n case 110:\n text = 'Danger';\n break;\n default:\n text = '';\n break;\n }\n args.text = text;\n };\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n else {\n circulargauge.axes[0].majorTicks.interval = 20;\n circulargauge.axes[0].minimum = 0;\n circulargauge.axes[0].maximum = 120;\n circulargauge.axisLabelRender = function (args) { };\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n };\n showCheckBox.change = range = function (e) {\n if (e.checked) {\n circulargauge.axes[0].rangeGap = 5;\n }\n else {\n circulargauge.axes[0].rangeGap = null;\n }\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Show text labels
    \n     		\n
    \n \n
    \n
    \n
    Combine ranges
    \n     		\n
    \n \n
    \n
    \n
    Gap between ranges
    \n     		\n
    \n \n
    \n
    \n
    \n \n\n \n \n \n \n \n \n \n \n \n
    ","index.js":"{{ripple}}/**\n * Speedometer sample\n */\n\nfunction gauge6() {\n var gauge6 = new ej.circulargauge.CircularGauge({\n\n title: 'Speedometer',\n titleStyle: { size: '18px' },\n centerY: '75%',\n axes: [{\n radius: '120%',\n minimum: 0,\n maximum: 120,\n lineStyle: { width: 0 },\n majorTicks: { width: 0, },\n minorTicks: { width: 0 },\n labelStyle: { useRangeColor: false, position: 'Outside', autoAngle: true,\n font: { size: '13px', fontFamily: 'Roboto' } },\n startAngle: 270, endAngle: 90,\n pointers: [{\n animation: { enable: true, duration: 900 },\n value: 40,\n radius: '80%',\n color: '#757575',\n pointerWidth: 7,\n cap: {\n radius: 8,\n color: '#757575',\n border: { width: 0 }\n },\n needleTail: {\n color: '#757575',\n length: '15%'\n },\n }],\n annotations: [\n {\n content: '#pointerValue',\n angle: 0, zIndex: '1',\n radius: '30%'\n }\n ],\n ranges: [\n {\n start: 0,\n end: 20,\n startWidth: 5, endWidth: 10,\n radius: '102%',\n color: '#82b944',\n },\n {\n start: 20,\n end: 40,\n startWidth: 10, endWidth: 15,\n radius: '102%',\n color: '#a1cb43',\n }, {\n start: 40,\n end: 60,\n startWidth: 15, endWidth: 20,\n radius: '102%',\n color: '#ddec12',\n },\n {\n start: 60,\n end: 80,\n startWidth: 20, endWidth: 25,\n radius: '102%',\n color: '#ffbc00',\n },\n {\n start: 80,\n end: 100,\n startWidth: 25, endWidth: 30,\n radius: '102%',\n color: '#ff6000',\n },\n {\n start: 100,\n end: 120,\n startWidth: 30, endWidth: 35,\n radius: '102%',\n color: 'red',\n }\n ]\n }],\n });\n return gauge6;\n}\n\n var circulargauge = new ej.circulargauge.CircularGauge(this.gauge6());\n circulargauge.appendTo('#container');\n\n var gauge5Interval1 = setInterval(function () {\n var newVal = circulargauge.axes[0].pointers[0].value + (Math.floor(Math.random() * (10 - (-10))) - 10);\n if (newVal <= 0) {\n newVal = 5;\n }\n if (document.getElementById('container')) {\n circulargauge.axes[0].pointers[0].animation.enable = true;\n circulargauge.setPointerValue(0, 0, newVal);\n if (!ej.base.isNullOrUndefined(document.getElementById('pointerannotation'))) {\n document.getElementById('pointerannotation').innerHTML = newVal.toString() + ' km/h';\n }\n }\n else {\n clearInterval(this.gauge5Interval1);\n }\n }, 1000);\n // Code for Property Panel\n var showText;\n var interval = new ej.buttons.CheckBox({\n change: showText, checked: false\n }, '#showText');\n var combineRange;\n var rangeSet = new ej.buttons.CheckBox({\n change: combineRange, checked: false\n }, '#combineRange');\n var range;\n var showCheckBox = new ej.buttons.CheckBox({\n change: range, checked: false\n }, '#range');\n rangeSet.change = combineRange = function (e) {\n if (e.checked === true) {\n showCheckBox.disabled = true;\n circulargauge.axes[0].ranges[0].start = 0;\n circulargauge.axes[0].ranges[0].end = 120;\n circulargauge.axes[0].ranges[0].startWidth = 5;\n circulargauge.axes[0].ranges[0].endWidth = 35;\n circulargauge.axes[0].ranges[0].color = 'url(#grad1)';\n circulargauge.axes[0].ranges[1].start = null;\n circulargauge.axes[0].ranges[1].end = null;\n circulargauge.axes[0].ranges[1].startWidth = '';\n circulargauge.axes[0].ranges[1].endWidth = '';\n circulargauge.axes[0].ranges[1].color = '';\n circulargauge.axes[0].ranges[2].start = null;\n circulargauge.axes[0].ranges[2].end = null;\n circulargauge.axes[0].ranges[2].startWidth = '';\n circulargauge.axes[0].ranges[2].endWidth = '';\n circulargauge.axes[0].ranges[2].color = '';\n circulargauge.axes[0].ranges[3].start = null;\n circulargauge.axes[0].ranges[3].end = null;\n circulargauge.axes[0].ranges[3].startWidth = '';\n circulargauge.axes[0].ranges[3].endWidth = '';\n circulargauge.axes[0].ranges[3].color = '';\n circulargauge.axes[0].ranges[4].start = null;\n circulargauge.axes[0].ranges[4].end = null;\n circulargauge.axes[0].ranges[4].startWidth = '';\n circulargauge.axes[0].ranges[4].endWidth = '';\n circulargauge.axes[0].ranges[4].color = '';\n circulargauge.axes[0].ranges[5].start = null;\n circulargauge.axes[0].ranges[5].end = null;\n circulargauge.axes[0].ranges[5].startWidth = '';\n circulargauge.axes[0].ranges[5].endWidth = '';\n circulargauge.axes[0].ranges[5].color = '';\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n else {\n showCheckBox.disabled = false;\n circulargauge.axes[0].ranges[0].start = 0;\n circulargauge.axes[0].ranges[0].end = 20;\n circulargauge.axes[0].ranges[0].startWidth = 5;\n circulargauge.axes[0].ranges[0].endWidth = 10;\n circulargauge.axes[0].ranges[0].color = '#82b944';\n circulargauge.axes[0].ranges[1].start = 20;\n circulargauge.axes[0].ranges[1].end = 40;\n circulargauge.axes[0].ranges[1].startWidth = 10;\n circulargauge.axes[0].ranges[1].endWidth = 15;\n circulargauge.axes[0].ranges[1].color = '#a1cb43';\n circulargauge.axes[0].ranges[2].start = 40;\n circulargauge.axes[0].ranges[2].end = 60;\n circulargauge.axes[0].ranges[2].startWidth = 15;\n circulargauge.axes[0].ranges[2].endWidth = 20;\n circulargauge.axes[0].ranges[2].color = '#ddec12';\n circulargauge.axes[0].ranges[3].start = 60;\n circulargauge.axes[0].ranges[3].end = 80;\n circulargauge.axes[0].ranges[3].startWidth = 20;\n circulargauge.axes[0].ranges[3].endWidth = 25;\n circulargauge.axes[0].ranges[3].color = '#ffbc00';\n circulargauge.axes[0].ranges[4].start = 80;\n circulargauge.axes[0].ranges[4].end = 100;\n circulargauge.axes[0].ranges[4].startWidth = 25;\n circulargauge.axes[0].ranges[4].endWidth = 30;\n circulargauge.axes[0].ranges[4].color = '#ff6000';\n circulargauge.axes[0].ranges[5].start = 100;\n circulargauge.axes[0].ranges[5].end = 120;\n circulargauge.axes[0].ranges[5].startWidth = 30;\n circulargauge.axes[0].ranges[5].endWidth = 35;\n circulargauge.axes[0].ranges[5].color = 'red';\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n };\n interval.change = range = function (e) {\n if (e.checked === true) {\n circulargauge.axes[0].majorTicks.interval = 10;\n circulargauge.axisLabelRender = function (args) {\n var text;\n switch (parseInt(args.text)) {\n case 10:\n text = 'Ideal';\n break;\n case 30:\n text = 'Safe';\n break;\n case 50:\n text = 'Good';\n break;\n case 70:\n text = 'Ok';\n break;\n case 90:\n text = 'Risk';\n break;\n case 110:\n text = 'Danger';\n break;\n default:\n text = '';\n break;\n }\n args.text = text;\n };\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n else {\n circulargauge.axes[0].majorTicks.interval = 20;\n circulargauge.axes[0].minimum = 0;\n circulargauge.axes[0].maximum = 120;\n circulargauge.axisLabelRender = function (args) { };\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n }\n };\n showCheckBox.change = range = function (e) {\n if (e.checked) {\n circulargauge.axes[0].rangeGap = 5;\n }\n else {\n circulargauge.axes[0].rangeGap = null;\n }\n circulargauge.axes[0].pointers[0].animation.enable = false;\n circulargauge.refresh();\n };\n"} \ No newline at end of file diff --git a/src/circular-gauge/speedometer.html b/src/circular-gauge/speedometer.html index ace1425d..c695a030 100644 --- a/src/circular-gauge/speedometer.html +++ b/src/circular-gauge/speedometer.html @@ -5,6 +5,7 @@ +
    diff --git a/src/circular-gauge/speedometer.js b/src/circular-gauge/speedometer.js index e782fd9e..adc911c1 100644 --- a/src/circular-gauge/speedometer.js +++ b/src/circular-gauge/speedometer.js @@ -4,11 +4,13 @@ function gauge6() { var gauge6 = new ej.circulargauge.CircularGauge({ + // custom code start load: function (args) { var speedTheme = location.hash.split('/')[1]; speedTheme = speedTheme ? speedTheme : 'Material'; args.gauge.theme = (speedTheme.charAt(0).toUpperCase() + speedTheme.slice(1)); }, + // custom code end title: 'Speedometer', titleStyle: { size: '18px' }, centerY: '75%', @@ -112,6 +114,7 @@ this.default = function () { clearInterval(this.gauge5Interval1); } }, 1000); + // Code for Property Panel var showText; var interval = new ej.buttons.CheckBox({ change: showText, checked: false diff --git a/src/circular-gauge/tooltip-stack.json b/src/circular-gauge/tooltip-stack.json index ec33bb46..83f17db2 100644 --- a/src/circular-gauge/tooltip-stack.json +++ b/src/circular-gauge/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Tooltip\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n title: 'Tooltip Customization',\n titleStyle: { size: '15px', color: 'grey' },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n radius: '90%',\n minimum: 0,\n maximum: 120,\n startAngle: 240,\n endAngle: 120,\n lineStyle: { width: 0 },\n majorTicks: { color: 'white', offset: -5, height: 12 },\n minorTicks: { width: 0 },\n labelStyle: { useRangeColor: true, font: { color: '#424242', size: '13px', fontFamily: 'Roboto' } },\n pointers: [{\n value: 70,\n radius: '60%',\n color: '#33BCBD',\n cap: { radius: 10, border: { color: '#33BCBD', width: 5 } },\n animation: { enable: true, duration: 1500 }\n }],\n ranges: [{\n start: 0,\n end: 50,\n startWidth: 10, endWidth: 10,\n radius: '102%',\n color: '#3A5DC8',\n }, {\n start: 50,\n end: 120,\n radius: '102%',\n startWidth: 10, endWidth: 10,\n color: '#33BCBD',\n }]\n }],\n tooltip: {\n enable: true,\n enableAnimation: false\n },\n tooltipRender: function (args) {\n var imageName = ((args.pointer.currentValue >= 0 && args.pointer.currentValue <= 50) ? 'min' : 'max');\n var borderColor = ((args.pointer.currentValue >= 0 && args.pointer.currentValue <= 50) ? '#3A5DC8' : '#33BCBD');\n args.tooltip.template = '
    ${value} MPH
    ';\n\n },\n enablePointerDrag: true\n });\n circulargauge.appendTo('#tooltip-container');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for Tooltip\n */\n\n var circulargauge = new ej.circulargauge.CircularGauge({\n title: 'Tooltip Customization',\n titleStyle: { size: '15px', color: 'grey' },\n\n axes: [{\n radius: '90%',\n minimum: 0,\n maximum: 120,\n startAngle: 240,\n endAngle: 120,\n lineStyle: { width: 0 },\n majorTicks: { color: 'white', offset: -5, height: 12 },\n minorTicks: { width: 0 },\n labelStyle: { useRangeColor: true, font: { color: '#424242', size: '13px', fontFamily: 'Roboto' } },\n pointers: [{\n value: 70,\n radius: '60%',\n color: '#33BCBD',\n cap: { radius: 10, border: { color: '#33BCBD', width: 5 } },\n animation: { enable: true, duration: 1500 }\n }],\n ranges: [{\n start: 0,\n end: 50,\n startWidth: 10, endWidth: 10,\n radius: '102%',\n color: '#3A5DC8',\n }, {\n start: 50,\n end: 120,\n radius: '102%',\n startWidth: 10, endWidth: 10,\n color: '#33BCBD',\n }]\n }],\n tooltip: {\n enable: true,\n enableAnimation: false\n },\n tooltipRender: function (args) {\n var imageName = ((args.pointer.currentValue >= 0 && args.pointer.currentValue <= 50) ? 'min' : 'max');\n var borderColor = ((args.pointer.currentValue >= 0 && args.pointer.currentValue <= 50) ? '#3A5DC8' : '#33BCBD');\n args.tooltip.template = '
    ${value} MPH
    ';\n\n },\n enablePointerDrag: true\n });\n circulargauge.appendTo('#tooltip-container');\n"} \ No newline at end of file diff --git a/src/circular-gauge/tooltip.html b/src/circular-gauge/tooltip.html index b52f1ce3..1ba626dd 100644 --- a/src/circular-gauge/tooltip.html +++ b/src/circular-gauge/tooltip.html @@ -1,23 +1,3 @@ -
    @@ -40,4 +20,26 @@ More information on the tooltip can be found in this documentation section.

    -
    \ No newline at end of file + + + + \ No newline at end of file diff --git a/src/circular-gauge/tooltip.js b/src/circular-gauge/tooltip.js index 535c9006..01c7a593 100644 --- a/src/circular-gauge/tooltip.js +++ b/src/circular-gauge/tooltip.js @@ -5,11 +5,13 @@ this.default = function () { var circulargauge = new ej.circulargauge.CircularGauge({ title: 'Tooltip Customization', titleStyle: { size: '15px', color: 'grey' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ radius: '90%', minimum: 0, diff --git a/src/circular-gauge/user-interaction-stack.json b/src/circular-gauge/user-interaction-stack.json index dad82d51..72e23700 100644 --- a/src/circular-gauge/user-interaction-stack.json +++ b/src/circular-gauge/user-interaction-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n
    Pointer Value    70
    \n     		\n
    \n \n
    \n
    \n
    Enable Drag
    \n     		\n
    \n \n
    \n
    \n
    \n\n\n","index.js":"{{ripple}}/**\n * Sample for Pointer drag\n */\n\n var content = '
    ';\n var pointerValue;\n var circulargauge = new ej.circulargauge.CircularGauge({\n enablePointerDrag: true,\n dragMove: function (args) {\n pointerValue = Math.round(args.currentValue);\n document.getElementById('pointerValue').innerHTML = 'Pointer Value    ' + pointerValue;\n document.getElementById('value').value = pointerValue.toString();\n circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH
    ');\n },\n dragEnd: function (args) {\n pointerValue = Math.round(args.currentValue);\n setPointersValue(circulargauge, pointerValue);\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n annotations: [{\n content: content + '70 MPH    ',\n angle: 180, zIndex: '1',\n radius: '45%'\n }],\n endAngle: 140,\n startAngle: 220,\n lineStyle: { width: 0, color: '#9E9E9E' },\n radius: '80%', minimum: 0,\n maximum: 120,\n majorTicks: { useRangeColor: true },\n minorTicks: { useRangeColor: true },\n labelStyle: { useRangeColor: true },\n ranges: [{\n start: 0,\n end: 40,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#30B32D'\n }, {\n start: 40,\n end: 100,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#E5C31C'\n }, {\n start: 100, end: 120,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#F03E3E'\n }],\n pointers: [{\n type: 'Marker', value: 70,\n markerShape: 'InvertedTriangle',\n radius: '110%',\n markerHeight: 20,\n color: '#E5C31C',\n markerWidth: 20\n }, {\n value: 70,\n radius: '60%',\n cap: { radius: 10, border: { width: 5, color: '#E5C31C' } },\n needleTail: { length: '0%', color: '#E5C31C' },\n color: '#E5C31C',\n markerWidth: 5\n }]\n }]\n });\n circulargauge.appendTo('#user-container');\n function setPointersValue(circulargauge, pointerValue) {\n var color = ej.circulargauge.getRangeColor(pointerValue, (circulargauge.axes[0].ranges), circulargauge.axes[0].pointers[0].color);\n circulargauge.axes[0].pointers[0].color = color;\n circulargauge.axes[0].pointers[1].color = color;\n circulargauge.axes[0].pointers[0].animation.enable = true;\n circulargauge.axes[0].pointers[1].animation.enable = true;\n circulargauge.axes[0].pointers[0].needleTail.color = color;\n circulargauge.axes[0].pointers[1].needleTail.color = color;\n circulargauge.axes[0].pointers[0].cap.border.color = color;\n circulargauge.axes[0].pointers[1].cap.border.color = color;\n circulargauge.setPointerValue(0, 1, pointerValue);\n circulargauge.setPointerValue(0, 0, pointerValue);\n content = '
    ';\n circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH
    ');\n }\n document.getElementById('value').ontouchmove = document.getElementById('value').onpointermove =\n document.getElementById('value').onchange = function () {\n var pointerValue = parseInt(document.getElementById('value').value, 10);\n setPointersValue(circulargauge, pointerValue);\n document.getElementById('pointerValue').innerHTML = 'Pointer Value    ' + pointerValue;\n };\n document.getElementById('enable').onchange = function () {\n var value = document.getElementById('enable').checked;\n circulargauge.enablePointerDrag = value;\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    Pointer Value    70
    \n     		\n
    \n \n
    \n
    \n
    Enable Drag
    \n     		\n
    \n \n
    \n
    \n
    \n
    \n\n
    ","index.js":"{{ripple}}/**\n * Sample for Pointer drag\n */\n\n var content = '
    ';\n var pointerValue;\n var circulargauge = new ej.circulargauge.CircularGauge({\n enablePointerDrag: true,\n dragMove: function (args) {\n pointerValue = Math.round(args.currentValue);\n document.getElementById('pointerValue').innerHTML = 'Pointer Value    ' + pointerValue;\n document.getElementById('value').value = pointerValue.toString();\n circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH
    ');\n },\n dragEnd: function (args) {\n pointerValue = Math.round(args.currentValue);\n setPointersValue(circulargauge, pointerValue);\n },\n\n axes: [{\n annotations: [{\n content: content + '70 MPH    ',\n angle: 180, zIndex: '1',\n radius: '45%'\n }],\n endAngle: 140,\n startAngle: 220,\n lineStyle: { width: 0, color: '#9E9E9E' },\n radius: '80%', minimum: 0,\n maximum: 120,\n majorTicks: { useRangeColor: true },\n minorTicks: { useRangeColor: true },\n labelStyle: { useRangeColor: true },\n ranges: [{\n start: 0,\n end: 40,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#30B32D'\n }, {\n start: 40,\n end: 100,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#E5C31C'\n }, {\n start: 100, end: 120,\n startWidth: 8, endWidth: 8,\n radius: '108%',\n color: '#F03E3E'\n }],\n pointers: [{\n type: 'Marker', value: 70,\n markerShape: 'InvertedTriangle',\n radius: '110%',\n markerHeight: 20,\n color: '#E5C31C',\n markerWidth: 20\n }, {\n value: 70,\n radius: '60%',\n cap: { radius: 10, border: { width: 5, color: '#E5C31C' } },\n needleTail: { length: '0%', color: '#E5C31C' },\n color: '#E5C31C',\n markerWidth: 5\n }]\n }]\n });\n circulargauge.appendTo('#user-container');\n function setPointersValue(circulargauge, pointerValue) {\n var color = ej.circulargauge.getRangeColor(pointerValue, (circulargauge.axes[0].ranges), circulargauge.axes[0].pointers[0].color);\n circulargauge.axes[0].pointers[0].color = color;\n circulargauge.axes[0].pointers[1].color = color;\n circulargauge.axes[0].pointers[0].animation.enable = true;\n circulargauge.axes[0].pointers[1].animation.enable = true;\n circulargauge.axes[0].pointers[0].needleTail.color = color;\n circulargauge.axes[0].pointers[1].needleTail.color = color;\n circulargauge.axes[0].pointers[0].cap.border.color = color;\n circulargauge.axes[0].pointers[1].cap.border.color = color;\n circulargauge.setPointerValue(0, 1, pointerValue);\n circulargauge.setPointerValue(0, 0, pointerValue);\n content = '
    ';\n circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH
    ');\n }\n //Code for Property Panel \n document.getElementById('value').ontouchmove = document.getElementById('value').onpointermove =\n document.getElementById('value').onchange = function () {\n var pointerValue = parseInt(document.getElementById('value').value, 10);\n setPointersValue(circulargauge, pointerValue);\n document.getElementById('pointerValue').innerHTML = 'Pointer Value    ' + pointerValue;\n };\n document.getElementById('enable').onchange = function () {\n var value = document.getElementById('enable').checked;\n circulargauge.enablePointerDrag = value;\n };\n"} \ No newline at end of file diff --git a/src/circular-gauge/user-interaction.html b/src/circular-gauge/user-interaction.html index 7ef578ea..a9f45e23 100644 --- a/src/circular-gauge/user-interaction.html +++ b/src/circular-gauge/user-interaction.html @@ -4,6 +4,7 @@
    +
    diff --git a/src/circular-gauge/user-interaction.js b/src/circular-gauge/user-interaction.js index 29c31290..fc6b0423 100644 --- a/src/circular-gauge/user-interaction.js +++ b/src/circular-gauge/user-interaction.js @@ -16,11 +16,13 @@ this.default = function () { pointerValue = Math.round(args.currentValue); setPointersValue(circulargauge, pointerValue); }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ annotations: [{ content: content + '70 MPH', @@ -86,6 +88,7 @@ this.default = function () { content = '
    '; circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH
    '); } + //Code for Property Panel document.getElementById('value').ontouchmove = document.getElementById('value').onpointermove = document.getElementById('value').onchange = function () { var pointerValue = parseInt(document.getElementById('value').value, 10); diff --git a/src/color-picker/api-stack.json b/src/color-picker/api-stack.json index 6414a867..6525cfe3 100644 --- a/src/color-picker/api-stack.json +++ b/src/color-picker/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n

    Choose a color

    \n \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Value
    \n     		\n
    \n \n
    \n
    \n
    Mode
    \n     		\n
    \n \n
    \n
    \n
    Disable
    \n     		\n \n
    \n
    Show Buttons
    \n     		\n \n
    \n
    Mode Switcher
    \n     		\n \n
    \n
    \n\n\n","index.js":"{{ripple}}\n //Initialize ColorPicker\n var colorPickerObj = new ej.inputs.ColorPicker({ change: change }, '#color-picker');\n \n var hexInput = document.getElementById('hex-input');\n\n // Triggers while changing colors.\n function change(args) {\n hexInput.value = args.currentValue.hex;\n }\n\n var ddlObj = new ej.dropdowns.DropDownList({\n value: 'Picker',\n popupHeight: '200px',\n change: function () {\n colorPickerObj.mode = ddlObj.value;\n }\n },\n '#ddl');\n\n new ej.buttons.CheckBox({\n checked: true,\n change: function (args) {\n colorPickerObj.showButtons = args.checked;\n\n }\n },\n '#show-btn');\n\n new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n colorPickerObj.disabled = args.checked;\n }\n },\n '#disabled');\n\n new ej.buttons.CheckBox({\n checked: true,\n change: function (args) {\n colorPickerObj.modeSwitcher = args.checked;\n }\n },\n '#mode-switch');\n\n hexInput.oninput = function () {\n var val = hexInput.value;\n // Sets to color picker default color value if user types the invalid hex code.\n colorPickerObj.value = val && val.length > 2 ? (val[0] !== '#' ? '#' + val : val) : '#008000';\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n

    Choose a color

    \n \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    Value
    \n     		\n
    \n \n
    \n
    \n
    Mode
    \n     		\n
    \n \n
    \n
    \n
    Disable
    \n     		\n \n
    \n
    Show Buttons
    \n     		\n \n
    \n
    Mode Switcher
    \n     		\n \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n //Initialize ColorPicker\n var colorPickerObj = new ej.inputs.ColorPicker({ change: change }, '#color-picker');\n \n var hexInput = document.getElementById('hex-input');\n\n // Triggers while changing colors.\n function change(args) {\n hexInput.value = args.currentValue.hex;\n }\n\n var ddlObj = new ej.dropdowns.DropDownList({\n value: 'Picker',\n popupHeight: '200px',\n change: function () {\n colorPickerObj.mode = ddlObj.value;\n }\n },\n '#ddl');\n\n new ej.buttons.CheckBox({\n checked: true,\n change: function (args) {\n colorPickerObj.showButtons = args.checked;\n\n }\n },\n '#show-btn');\n\n new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n colorPickerObj.disabled = args.checked;\n }\n },\n '#disabled');\n\n new ej.buttons.CheckBox({\n checked: true,\n change: function (args) {\n colorPickerObj.modeSwitcher = args.checked;\n }\n },\n '#mode-switch');\n\n hexInput.oninput = function () {\n var val = hexInput.value;\n // Sets to color picker default color value if user types the invalid hex code.\n colorPickerObj.value = val && val.length > 2 ? (val[0] !== '#' ? '#' + val : val) : '#008000';\n };\n"} \ No newline at end of file diff --git a/src/color-picker/api.html b/src/color-picker/api.html index 9a36d0bc..79d6e417 100644 --- a/src/color-picker/api.html +++ b/src/color-picker/api.html @@ -86,6 +86,9 @@

    Choose a color

    documentation section.

    + + + \ No newline at end of file + + + diff --git a/src/color-picker/custom-stack.json b/src/color-picker/custom-stack.json index 8a02857b..5918b34c 100644 --- a/src/color-picker/custom-stack.json +++ b/src/color-picker/custom-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Custom Sample\n */\n\n\n var defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 4,\n presetColors: {\n 'custom': ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4',\n '#009688', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-circle-palette');\n args.element.appendChild(ej.base.createElement('span', {\n className: 'e-circle-selection'\n }));\n },\n change: change\n });\n defaultObj.appendTo('#circle-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 8,\n presetColors: {\n 'custom1': ['#b80000', '#db3e00', '#fccb00', '#008b02', '#006b76', '#1273de', '#004dcf',\n '#5300eb', '#eb9694', '#fad0c3', '#fef3bd', '#c1e1c5', '#bedadc', '#c4def6', '#bed3f3',\n '#d4c4fb']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-square-palette');\n },\n change: change\n });\n defaultObj.appendTo('#square-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 5,\n presetColors: {\n 'custom1': ['#ff6900', '#fcb900', '#7bdcb5', '#00d084', '#8ed1fc', '#0693e3', '#abb8c3', '#eb144c',\n '#f78da7', '#9900ef']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-rounded-palette');\n },\n change: function (args) {\n ej.base.select('.e-selected').style.boxShadow = args.currentValue.hex + ' 0 0 4px';\n document.getElementById('e-shirt-preview').style.backgroundColor = args.currentValue.hex;\n }\n });\n defaultObj.appendTo('#rounded-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 4,\n presetColors: {\n 'custom1': ['#ef9a9a', '#e57373', '#ef5350', '#f44336', '#f48fb1', '#f06292',\n '#ec407a', '#e91e63', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#b39ddb',\n '#9575cd', '#7e57c2', '#673AB7'],\n 'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#90CAF9', '#64B5F6',\n '#42A5F5', '#2196F3', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',\n '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],\n 'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#A5D6A7', '#81C784',\n '#66BB6A', '#4CAF50', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',\n '#DCE775', '#D4E157', '#CDDC39'],\n 'custom4': ['#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FFE082', '#FFD54F',\n '#FFCA28', '#FFC107', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FFAB91',\n '#FF8A65', '#FF7043', '#FF5722']\n },\n beforeTileRender: function (args) {\n ej.base.addClass([args.element], ['e-icons', 'e-scroll-palette']);\n },\n change: change\n });\n defaultObj.appendTo('#scroll-palette');\n\n if (ej.base.Browser.isDevice) {\n document.getElementById('colorpicker-control').classList.add('e-mobile-control');\n }\n\n /**\n * Triggers while changing colors\n */\n function change(args) {\n document.getElementById('e-shirt-preview').style.backgroundColor = args.currentValue.hex;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Custom Sample\n */\n\n\n var defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 4,\n presetColors: {\n 'custom': ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4',\n '#009688', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-circle-palette');\n args.element.appendChild(ej.base.createElement('span', {\n className: 'e-circle-selection'\n }));\n },\n change: change\n });\n defaultObj.appendTo('#circle-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 8,\n presetColors: {\n 'custom1': ['#b80000', '#db3e00', '#fccb00', '#008b02', '#006b76', '#1273de', '#004dcf',\n '#5300eb', '#eb9694', '#fad0c3', '#fef3bd', '#c1e1c5', '#bedadc', '#c4def6', '#bed3f3',\n '#d4c4fb']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-square-palette');\n },\n change: change\n });\n defaultObj.appendTo('#square-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 5,\n presetColors: {\n 'custom1': ['#ff6900', '#fcb900', '#7bdcb5', '#00d084', '#8ed1fc', '#0693e3', '#abb8c3', '#eb144c',\n '#f78da7', '#9900ef']\n },\n beforeTileRender: function (args) {\n args.element.classList.add('e-rounded-palette');\n },\n change: function (args) {\n ej.base.select('.e-selected').style.boxShadow = args.currentValue.hex + ' 0 0 4px';\n document.getElementById('e-shirt-preview').style.backgroundColor = args.currentValue.hex;\n }\n });\n defaultObj.appendTo('#rounded-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n columns: 4,\n presetColors: {\n 'custom1': ['#ef9a9a', '#e57373', '#ef5350', '#f44336', '#f48fb1', '#f06292',\n '#ec407a', '#e91e63', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#b39ddb',\n '#9575cd', '#7e57c2', '#673AB7'],\n 'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#90CAF9', '#64B5F6',\n '#42A5F5', '#2196F3', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',\n '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],\n 'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#A5D6A7', '#81C784',\n '#66BB6A', '#4CAF50', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',\n '#DCE775', '#D4E157', '#CDDC39'],\n 'custom4': ['#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FFE082', '#FFD54F',\n '#FFCA28', '#FFC107', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FFAB91',\n '#FF8A65', '#FF7043', '#FF5722']\n },\n beforeTileRender: function (args) {\n ej.base.addClass([args.element], ['e-icons', 'e-scroll-palette']);\n },\n change: change\n });\n defaultObj.appendTo('#scroll-palette');\n\n if (ej.base.Browser.isDevice) {\n document.getElementById('colorpicker-control').classList.add('e-mobile-control');\n }\n\n /**\n * Triggers while changing colors\n */\n function change(args) {\n document.getElementById('e-shirt-preview').style.backgroundColor = args.currentValue.hex;\n }\n"} \ No newline at end of file diff --git a/src/color-picker/custom.html b/src/color-picker/custom.html index 7f919868..3fa8071b 100644 --- a/src/color-picker/custom.html +++ b/src/color-picker/custom.html @@ -47,66 +47,7 @@

    \ No newline at end of file + + + + + + + diff --git a/src/color-picker/default-stack.json b/src/color-picker/default-stack.json index 2a95431a..d9be7a53 100644 --- a/src/color-picker/default-stack.json +++ b/src/color-picker/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n

    Choose a color

    \n \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}\n \n var defaultObj = new ej.inputs.ColorPicker({}, '#color-picker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n

    Choose a color

    \n \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}\n \n var defaultObj = new ej.inputs.ColorPicker({}, '#color-picker');\n"} \ No newline at end of file diff --git a/src/color-picker/default.html b/src/color-picker/default.html index 72533997..6a55baf6 100644 --- a/src/color-picker/default.html +++ b/src/color-picker/default.html @@ -34,6 +34,9 @@

    Choose a color

    documentation section.

    + + + \ No newline at end of file + + + diff --git a/src/color-picker/inline-stack.json b/src/color-picker/inline-stack.json index 6ea198af..7555714b 100644 --- a/src/color-picker/inline-stack.json +++ b/src/color-picker/inline-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Inline Palette

    \n \n
    \n
    \n

    Inline Picker

    \n \n
    \n
    \n
    \n
    \n\n\n
    ","index.js":"{{ripple}}/**\n * Inline Sample\n */\n\n\n var defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n change: change\n });\n defaultObj.appendTo('#inline-color-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Picker',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n change: change\n });\n defaultObj.appendTo('#inline-color-picker');\n\n if (ej.base.Browser.isDevice) {\n document.getElementById('colorpicker-control').classList.add('e-mobile-control');\n\n }\n\n /**\n * Triggers while changing colors\n */\n function change(args) {\n document.getElementById('preview').style.backgroundColor = args.currentValue.rgba;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Inline Palette

    \n \n
    \n
    \n

    Inline Picker

    \n \n
    \n
    \n
    \n
    \n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * Inline Sample\n */\n\n\n var defaultObj = new ej.inputs.ColorPicker({\n mode: 'Palette',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n change: change\n });\n defaultObj.appendTo('#inline-color-palette');\n\n defaultObj = new ej.inputs.ColorPicker({\n mode: 'Picker',\n modeSwitcher: false,\n inline: true,\n showButtons: false,\n change: change\n });\n defaultObj.appendTo('#inline-color-picker');\n\n if (ej.base.Browser.isDevice) {\n document.getElementById('colorpicker-control').classList.add('e-mobile-control');\n\n }\n\n /**\n * Triggers while changing colors\n */\n function change(args) {\n document.getElementById('preview').style.backgroundColor = args.currentValue.rgba;\n }\n"} \ No newline at end of file diff --git a/src/color-picker/inline.html b/src/color-picker/inline.html index 5f062eac..a3809868 100644 --- a/src/color-picker/inline.html +++ b/src/color-picker/inline.html @@ -49,6 +49,9 @@

    Inline Picker

    documentation section.

    + + + \ No newline at end of file + + + diff --git a/src/color-picker/sample.json b/src/color-picker/sample.json index 7bafd44b..ab2302f7 100644 --- a/src/color-picker/sample.json +++ b/src/color-picker/sample.json @@ -9,28 +9,28 @@ "name": "Default Functionalities", "category": "Color Picker", "api": { "ColorPicker": ["value"] }, - "description": "This demo for Essential JS2 ColorPicker shows the default functionalities of color picker. It supports RGB, HSV, and Hex codes (three, six and eight digit)." + "description": "This example demonstrates the default functionalities of the Syncfusion Javascript ES5 ColorPicker with RGB, HSV and Hex codes(three, six and eight digit)." }, { "url": "inline", "name": "Inline Mode", "category": "Color Picker", "api": {"ColorPicker":["inline", "value", "mode", "modeSwitcher", "showButtons"] }, - "description": "This demo for Syncfusion Essential JS2 ColorPicker control shows the inline / flat mode rendering of color picker. It supports hue and opacity colors option." + "description": "This example demonstrates the inline / flat mode rendering of the Syncfusion Javascript ES5 ColorPicker with hue and opacity color options." }, { "url": "custom", "name": "Custom Palettes", "category": "Color Picker", "api": {"ColorPicker": ["cssClass", "inline", "value", "columns", "mode", "modeSwitcher", "showButtons", "presetColors"] }, - "description": "This demo for Syncfusion Essential JS2 ColorPicker control shows the custom UI of color palette with different palette structures and its state." + "description": "This example demonstrates the Syncfusion Javascript ES5 ColorPicker, custom UI of the color palette with different structures and its state." }, { "url": "api", "name": "API", "category": "Color Picker", "api": { "ColorPicker": ["cssClass", "inline", "value", "columns", "showButtons", "presetColors"] }, - "description": "This demo for Syncfusion Essential JS2 ColorPicker control shows the color picker supported properties and its functionality." + "description": "This example demonstrates the supported API's and its functionalities of the Syncfusion Javascript ES5 ColorPicker." } ] } \ No newline at end of file diff --git a/src/combo-box/cascading-stack.json b/src/combo-box/cascading-stack.json index 9ab88cf2..37e3f5af 100644 --- a/src/combo-box/cascading-stack.json +++ b/src/combo-box/cascading-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n var countryList = new ej.dropdowns.ComboBox({\n // set the country data to dataSource property\n dataSource: window.ddCountry,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'CountryId', text: 'CountryName' },\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // bind change event\n change: function () {\n if (countryList.value === null) {\n stateList.enabled = false;\n cityList.enabled = false;\n // clear the selection\n stateList.value = null;\n // clear the selection\n cityList.value = null;\n }\n else {\n stateList.enabled = true;\n // frame the query based on selected value in country ComboBox.\n var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryList.value);\n stateList.query = tempQuery;\n // clear the selection\n stateList.value = null;\n // clear the selection\n cityList.value = null;\n cityList.enabled = false;\n }\n // bind the property change to state ComboBox\n stateList.dataBind();\n // bind the property change to city ComboBox\n cityList.dataBind();\n },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country'\n });\n countryList.appendTo('#country');\n var stateList = new ej.dropdowns.ComboBox({\n // set the state data to dataSource property\n dataSource: window.ddState,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'StateId', text: 'StateName' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // bind change event\n change: function () {\n if (stateList.value === null) {\n cityList.enabled = false;\n // clear the selection\n cityList.value = null;\n }\n else {\n cityList.enabled = true;\n // frame the query based on selected value in state ComboBox.\n var tempQuery = new ej.data.Query().where('StateId', 'equal', stateList.value);\n // set the framed query based on selected value in state ComboBox.\n cityList.query = tempQuery;\n // clear the selection\n cityList.value = null;\n }\n // bind the property change to city ComboBox\n cityList.dataBind();\n },\n placeholder: 'Select a state'\n });\n stateList.appendTo('#state');\n var cityList = new ej.dropdowns.ComboBox({\n // set the city data to dataSource property\n dataSource: window.ddCities,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { text: 'CityName', value: 'CityId' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // set the placeholder to ComboBox input element\n placeholder: 'Select a city'\n });\n cityList.appendTo('#city');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n var countryList = new ej.dropdowns.ComboBox({\n // set the country data to dataSource property\n dataSource: window.ddCountry,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'CountryId', text: 'CountryName' },\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // bind change event\n change: function () {\n if (countryList.value === null) {\n stateList.enabled = false;\n cityList.enabled = false;\n // clear the selection\n stateList.value = null;\n // clear the selection\n cityList.value = null;\n }\n else {\n stateList.enabled = true;\n // frame the query based on selected value in country ComboBox.\n var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryList.value);\n stateList.query = tempQuery;\n // clear the selection\n stateList.value = null;\n // clear the selection\n cityList.value = null;\n cityList.enabled = false;\n }\n // bind the property change to state ComboBox\n stateList.dataBind();\n // bind the property change to city ComboBox\n cityList.dataBind();\n },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country'\n });\n countryList.appendTo('#country');\n var stateList = new ej.dropdowns.ComboBox({\n // set the state data to dataSource property\n dataSource: window.ddState,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'StateId', text: 'StateName' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // bind change event\n change: function () {\n if (stateList.value === null) {\n cityList.enabled = false;\n // clear the selection\n cityList.value = null;\n }\n else {\n cityList.enabled = true;\n // frame the query based on selected value in state ComboBox.\n var tempQuery = new ej.data.Query().where('StateId', 'equal', stateList.value);\n // set the framed query based on selected value in state ComboBox.\n cityList.query = tempQuery;\n // clear the selection\n cityList.value = null;\n }\n // bind the property change to city ComboBox\n cityList.dataBind();\n },\n placeholder: 'Select a state'\n });\n stateList.appendTo('#state');\n var cityList = new ej.dropdowns.ComboBox({\n // set the city data to dataSource property\n dataSource: window.ddCities,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { text: 'CityName', value: 'CityId' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // set false for disable the behavior of custom value rendering\n allowCustom: false,\n // set the placeholder to ComboBox input element\n placeholder: 'Select a city'\n });\n cityList.appendTo('#city');\n"} \ No newline at end of file diff --git a/src/combo-box/custom-value-stack.json b/src/combo-box/custom-value-stack.json index bad06e7a..09a22e92 100644 --- a/src/combo-box/custom-value-stack.json +++ b/src/combo-box/custom-value-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '300px',\n // set true for enable the filtering support\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var query = new ej.data.Query();\n // frame the query based on search string with filter type.\n query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, query);\n if (document.getElementById('nodata')) {\n // bind click event to button element\n document.getElementById('btn').onclick = function () {\n // get the typed characters\n var customValue = document.getElementById('country').value;\n // make new object based on typed characters\n var newItem = { 'Name': customValue, 'Code': customValue };\n // new object added to data source.\n comboBoxObj.dataSource.push(newItem);\n // close the popup element.\n comboBoxObj.hidePopup();\n // pass new object to addItem method.\n comboBoxObj.addItem(newItem);\n // select the newly added item.\n comboBoxObj.value = customValue;\n };\n }\n },\n // set the template content when the typed character(s) is not present in the list\n noRecordsTemplate: '
    No matched item, do you want to add it as new item in list?
    ',\n });\n comboBoxObj.appendTo('#country');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '300px',\n // set true for enable the filtering support\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var query = new ej.data.Query();\n // frame the query based on search string with filter type.\n query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, query);\n if (document.getElementById('nodata')) {\n // bind click event to button element\n document.getElementById('btn').onclick = function () {\n // get the typed characters\n var customValue = document.getElementById('country').value;\n // make new object based on typed characters\n var newItem = { 'Name': customValue, 'Code': customValue };\n // new object added to data source.\n comboBoxObj.dataSource.push(newItem);\n // close the popup element.\n comboBoxObj.hidePopup();\n // pass new object to addItem method.\n comboBoxObj.addItem(newItem);\n // select the newly added item.\n comboBoxObj.value = customValue;\n };\n }\n },\n // set the template content when the typed character(s) is not present in the list\n noRecordsTemplate: '
    No matched item, do you want to add it as new item in list?
    ',\n });\n comboBoxObj.appendTo('#country');\n\n"} \ No newline at end of file diff --git a/src/combo-box/data-binding-stack.json b/src/combo-box/data-binding-stack.json index dbd58687..8d885f21 100644 --- a/src/combo-box/data-binding-stack.json +++ b/src/combo-box/data-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n

    Local Data

    \n \n
    \n
    \n
    \n
    \n

    Remote Data

    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj1 = new ej.dropdowns.ComboBox({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url:'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // set the placeholder to ComboBox input element\n placeholder: 'Select a name',\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // set the height of the popup element\n popupHeight: '200px',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n comboBoxObj1.appendTo('#customers');\n\n // initialize ComboBox component\n var comboBoxObj2 = new ej.dropdowns.ComboBox({\n // set the sports data to dataSource property\n dataSource: window.ddSportsData,\n // map the appropriate columns to fields property\n fields: { text: 'Game', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a game',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the height of the popup element\n popupHeight: '230px',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n comboBoxObj2.appendTo('#games');\n\n // Initialize the CheckBox component\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data ComboBox based on CheckBox checked state\n comboBoxObj1.autofill = args.checked;\n // enable or disable the autofill in local data ComboBox based on CheckBox checked state\n comboBoxObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n

    Local Data

    \n \n
    \n
    \n
    \n
    \n

    Remote Data

    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj1 = new ej.dropdowns.ComboBox({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url:'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // set the placeholder to ComboBox input element\n placeholder: 'Select a name',\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // set the height of the popup element\n popupHeight: '200px',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n comboBoxObj1.appendTo('#customers');\n\n // initialize ComboBox component\n var comboBoxObj2 = new ej.dropdowns.ComboBox({\n // set the sports data to dataSource property\n dataSource: window.ddSportsData,\n // map the appropriate columns to fields property\n fields: { text: 'Game', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a game',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the height of the popup element\n popupHeight: '230px',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n comboBoxObj2.appendTo('#games');\n\n // Initialize the CheckBox component\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data ComboBox based on CheckBox checked state\n comboBoxObj1.autofill = args.checked;\n // enable or disable the autofill in local data ComboBox based on CheckBox checked state\n comboBoxObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"} \ No newline at end of file diff --git a/src/combo-box/data-binding.html b/src/combo-box/data-binding.html index 48ab7f3f..3ae1b5e7 100644 --- a/src/combo-box/data-binding.html +++ b/src/combo-box/data-binding.html @@ -53,9 +53,11 @@

    Remote Data

    + \ No newline at end of file + + \ No newline at end of file diff --git a/src/combo-box/default-stack.json b/src/combo-box/default-stack.json index 3078366c..d7613690 100644 --- a/src/combo-box/default-stack.json +++ b/src/combo-box/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    Value:
    Text:
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the height of the popup element\n popupHeight: '230px',\n // set the index value to select an item based on index at initial rendering\n index: 2,\n // set the placeholder to ComboBox input element\n placeholder: 'Select a game',\n // bind the change event\n change: function () { valueChange(); }\n });\n comboBoxObj.appendTo('#games');\n // call the change event's function after initialized the component.\n valueChange();\n\n function valueChange() {\n var value = document.getElementById('value');\n var text = document.getElementById('text');\n value.innerHTML = comboBoxObj.value === null ? 'null' : comboBoxObj.value.toString();\n text.innerHTML = comboBoxObj.text === null ? 'null' : comboBoxObj.text.toString();\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n
    Value:
    Text:
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the height of the popup element\n popupHeight: '230px',\n // set the index value to select an item based on index at initial rendering\n index: 2,\n // set the placeholder to ComboBox input element\n placeholder: 'Select a game',\n // bind the change event\n change: function () { valueChange(); }\n });\n comboBoxObj.appendTo('#games');\n // call the change event's function after initialized the component.\n valueChange();\n\n function valueChange() {\n var value = document.getElementById('value');\n var text = document.getElementById('text');\n value.innerHTML = comboBoxObj.value === null ? 'null' : comboBoxObj.value.toString();\n text.innerHTML = comboBoxObj.text === null ? 'null' : comboBoxObj.text.toString();\n }\n"} \ No newline at end of file diff --git a/src/combo-box/diacritics-filtering-stack.json b/src/combo-box/diacritics-filtering-stack.json index 5f51dce0..393d2c3e 100644 --- a/src/combo-box/diacritics-filtering-stack.json +++ b/src/combo-box/diacritics-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * ComboBox Diacritics functionality Sample\n */\n\n // initialize ComboBox component\n var dropdownObj = new ej.dropdowns.ComboBox({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to ComboBox input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}/**\n * ComboBox Diacritics functionality Sample\n */\n\n // initialize ComboBox component\n var dropdownObj = new ej.dropdowns.ComboBox({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to ComboBox input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file diff --git a/src/combo-box/filtering-stack.json b/src/combo-box/filtering-stack.json index 199aa58c..1a9f674c 100644 --- a/src/combo-box/filtering-stack.json +++ b/src/combo-box/filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n \n\n\n
    ","index.js":"{{ripple}}\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '270px',\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var combobox_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n combobox_query = (e.text !== '') ? combobox_query.where('Name', 'startswith', e.text, true) : combobox_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, combobox_query);\n }\n });\n comboBoxObj.appendTo('#country');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n \n\n\n
    ","index.js":"{{ripple}}\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '270px',\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var combobox_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n combobox_query = (e.text !== '') ? combobox_query.where('Name', 'startswith', e.text, true) : combobox_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, combobox_query);\n }\n });\n comboBoxObj.appendTo('#country');\n"} \ No newline at end of file diff --git a/src/combo-box/grouping-icon-stack.json b/src/combo-box/grouping-icon-stack.json index 13fbe950..c18ef110 100644 --- a/src/combo-box/grouping-icon-stack.json +++ b/src/combo-box/grouping-icon-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
    \n
    \n
    \n

    Grouping

    \n \n
    \n
    \n\n
    \n
    \n

    Icons

    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var groupComboBoxObj = new ej.dropdowns.ComboBox({\n //set the vegetable data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a vegetable',\n // set the height of the popup element\n popupHeight: '200px'\n });\n groupComboBoxObj.appendTo('#vegetables');\n\n // initialize ComboBox component\n var iconComboBoxObj = new ej.dropdowns.ComboBox({\n //set the social media data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { text: 'SocialMedia', iconCss: 'Class', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a social media',\n // set the height of the popup element\n popupHeight: '200px'\n });\n iconComboBoxObj.appendTo('#icons');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n

    Grouping

    \n \n
    \n
    \n\n
    \n
    \n

    Icons

    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var groupComboBoxObj = new ej.dropdowns.ComboBox({\n //set the vegetable data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a vegetable',\n // set the height of the popup element\n popupHeight: '200px'\n });\n groupComboBoxObj.appendTo('#vegetables');\n\n // initialize ComboBox component\n var iconComboBoxObj = new ej.dropdowns.ComboBox({\n //set the social media data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { text: 'SocialMedia', iconCss: 'Class', value: 'Id' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a social media',\n // set the height of the popup element\n popupHeight: '200px'\n });\n iconComboBoxObj.appendTo('#icons');\n"} \ No newline at end of file diff --git a/src/combo-box/grouping-icon.html b/src/combo-box/grouping-icon.html index bd500e8d..d27e8b19 100644 --- a/src/combo-box/grouping-icon.html +++ b/src/combo-box/grouping-icon.html @@ -14,22 +14,26 @@

    Icons

    -
    -

    This sample demonstrates the grouping and icons supports of the ComboBox. Type a character in the ComboBox element or click on the drodown icon to choose an item from the categorized list/icons list.

    +
    +

    This sample demonstrates the grouping and icons supports of the ComboBox. Type a character in the ComboBox + element or click on the drodown icon to choose an item from the categorized list/icons list.

    -

    The ComboBox allows to group the relevant items under a corresponding category by mapping the groupBy field, and allows to load the list items with icons.

    +

    The ComboBox allows to group the relevant items under a corresponding category by mapping the + groupBy field, and allows to load the list items with icons.

    The grouping sample illustrates how the vegetables are grouped based on its category.

    The 2nd ComboBox is populated with icons that is rendered by mapping the iconCss field.

    More information on the grouping feature configuration can be found in the - documentation section. + documentation + section.

    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Eimg' },\n // set the template content for popup header element\n headerTemplate: '
    Photo Employee Info
    ',\n // set the template content for list items\n itemTemplate: '
    \"employee\"/' +\n '
    ${Name}
    ${Designation}
    ',\n // set the placeholder to ComboBox input element\n placeholder: 'Select an employee',\n // set the height of the popup element\n popupHeight: '270px'\n });\n comboBoxObj.appendTo('#employees');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n\n\n\n\n\n
    ","index.js":"{{ripple}}\n\n // initialize ComboBox component\n var comboBoxObj = new ej.dropdowns.ComboBox({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Eimg' },\n // set the template content for popup header element\n headerTemplate: '
    Photo Employee Info
    ',\n // set the template content for list items\n itemTemplate: '
    \"employee\"/' +\n '
    ${Name}
    ${Designation}
    ',\n // set the placeholder to ComboBox input element\n placeholder: 'Select an employee',\n // set the height of the popup element\n popupHeight: '270px'\n });\n comboBoxObj.appendTo('#employees');\n"} \ No newline at end of file diff --git a/src/combo-box/template.html b/src/combo-box/template.html index 90b8f352..b4b04bd4 100644 --- a/src/combo-box/template.html +++ b/src/combo-box/template.html @@ -7,12 +7,14 @@
    -

    This sample demonstrates the template functionalities of the ComboBox. Type a character in the ComboBox element or click +

    This sample demonstrates the template functionalities of the ComboBox. Type a character in the ComboBox element + or click on the drodown icon to choose an item from the customized list.

    -

    The ComboBox has been provided with several options to customize each list items, group title, header and footer elements. +

    The ComboBox has been provided with several options to customize each list items, group title, header and footer + elements.

    This sample uses the following list of templates in ComboBox

    @@ -21,7 +23,8 @@
  • HeaderTemplate - To customize the header element.

    • More information on the template feature configuration can be found in the - documentation section. + documentation + section.

    @@ -41,6 +44,11 @@ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif"; } + /* custom code start*/ + .bootstrap4 .header { + color: #6c757d; + } + .fabric .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -109,6 +117,18 @@ .info { margin-left: 17px; } + .bootstrap4 #employees_popup.e-popup .empImage { + margin: 0px 16px; + } + + .bootstrap4 #employees_popup.e-popup .job { + margin-top: 0; + } + + .e-bigger.bootstrap4 #employees_popup.e-popup .job { + margin-top: -15px; + } + /* custom code end*/ .ename { display: block !important; diff --git a/src/common/cldr-data/main/ar/all.json b/src/common/cldr-data/main/ar/all.json index 9e6b4464..9b976d52 100644 --- a/src/common/cldr-data/main/ar/all.json +++ b/src/common/cldr-data/main/ar/all.json @@ -1,6050 +1,6051 @@ { - "main": { - "ar": { - "identity": { - "version": { - "_number": "$Revision: 13286 $", - "_cldrVersion": "31.0.1" + "main": { + "ar": { + "identity": { + "version": { + "_number": "$Revision: 13286 $", + "_cldrVersion": "31.0.1" + }, + "language": "ar" }, - "language": "ar" - }, - "dates": { - "calendars": { - "gregorian": { - "months": { - "format": { - "abbreviated": { - "1": "يناير", - "2": "فبراير", - "3": "مارس", - "4": "أبريل", - "5": "مايو", - "6": "يونيو", - "7": "يوليو", - "8": "أغسطس", - "9": "سبتمبر", - "10": "أكتوبر", - "11": "نوفمبر", - "12": "ديسمبر" - }, - "narrow": { - "1": "ي", - "2": "ف", - "3": "م", - "4": "أ", - "5": "و", - "6": "ن", - "7": "ل", - "8": "غ", - "9": "س", - "10": "ك", - "11": "ب", - "12": "د" - }, - "wide": { - "1": "يناير", - "2": "فبراير", - "3": "مارس", - "4": "أبريل", - "5": "مايو", - "6": "يونيو", - "7": "يوليو", - "8": "أغسطس", - "9": "سبتمبر", - "10": "أكتوبر", - "11": "نوفمبر", - "12": "ديسمبر" - } - }, - "stand-alone": { - "abbreviated": { - "1": "يناير", - "2": "فبراير", - "3": "مارس", - "4": "أبريل", - "5": "مايو", - "6": "يونيو", - "7": "يوليو", - "8": "أغسطس", - "9": "سبتمبر", - "10": "أكتوبر", - "11": "نوفمبر", - "12": "ديسمبر" - }, - "narrow": { - "1": "ي", - "2": "ف", - "3": "م", - "4": "أ", - "5": "و", - "6": "ن", - "7": "ل", - "8": "غ", - "9": "س", - "10": "ك", - "11": "ب", - "12": "د" - }, - "wide": { - "1": "يناير", - "2": "فبراير", - "3": "مارس", - "4": "أبريل", - "5": "مايو", - "6": "يونيو", - "7": "يوليو", - "8": "أغسطس", - "9": "سبتمبر", - "10": "أكتوبر", - "11": "نوفمبر", - "12": "ديسمبر" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "narrow": { - "sun": "ح", - "mon": "ن", - "tue": "ث", - "wed": "ر", - "thu": "خ", - "fri": "ج", - "sat": "س" - }, - "short": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "wide": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" + "dates": { + "calendars": { + "gregorian": { + "months": { + "format": { + "abbreviated": { + "1": "يناير", + "2": "فبراير", + "3": "مارس", + "4": "أبريل", + "5": "مايو", + "6": "يونيو", + "7": "يوليو", + "8": "أغسطس", + "9": "سبتمبر", + "10": "أكتوبر", + "11": "نوفمبر", + "12": "ديسمبر" + }, + "narrow": { + "1": "ي", + "2": "ف", + "3": "م", + "4": "أ", + "5": "و", + "6": "ن", + "7": "ل", + "8": "غ", + "9": "س", + "10": "ك", + "11": "ب", + "12": "د" + }, + "wide": { + "1": "يناير", + "2": "فبراير", + "3": "مارس", + "4": "أبريل", + "5": "مايو", + "6": "يونيو", + "7": "يوليو", + "8": "أغسطس", + "9": "سبتمبر", + "10": "أكتوبر", + "11": "نوفمبر", + "12": "ديسمبر" + } + }, + "stand-alone": { + "abbreviated": { + "1": "يناير", + "2": "فبراير", + "3": "مارس", + "4": "أبريل", + "5": "مايو", + "6": "يونيو", + "7": "يوليو", + "8": "أغسطس", + "9": "سبتمبر", + "10": "أكتوبر", + "11": "نوفمبر", + "12": "ديسمبر" + }, + "narrow": { + "1": "ي", + "2": "ف", + "3": "م", + "4": "أ", + "5": "و", + "6": "ن", + "7": "ل", + "8": "غ", + "9": "س", + "10": "ك", + "11": "ب", + "12": "د" + }, + "wide": { + "1": "يناير", + "2": "فبراير", + "3": "مارس", + "4": "أبريل", + "5": "مايو", + "6": "يونيو", + "7": "يوليو", + "8": "أغسطس", + "9": "سبتمبر", + "10": "أكتوبر", + "11": "نوفمبر", + "12": "ديسمبر" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "narrow": { - "sun": "ح", - "mon": "ن", - "tue": "ث", - "wed": "ر", - "thu": "خ", - "fri": "ج", - "sat": "س" - }, - "short": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "wide": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤" - }, - "wide": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" + "days": { + "format": { + "abbreviated": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "narrow": { + "sun": "ح", + "mon": "ن", + "tue": "ث", + "wed": "ر", + "thu": "خ", + "fri": "ج", + "sat": "س" + }, + "short": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "wide": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "narrow": { + "sun": "ح", + "mon": "ن", + "tue": "ث", + "wed": "ر", + "thu": "خ", + "fri": "ج", + "sat": "س" + }, + "short": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "wide": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + } } }, - "stand-alone": { - "abbreviated": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤" - }, - "wide": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "am": "ص", - "pm": "م", - "morning1": "فجرا", - "morning2": "ص", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ل" - }, - "narrow": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "wide": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" + "quarters": { + "format": { + "abbreviated": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤" + }, + "wide": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + } + }, + "stand-alone": { + "abbreviated": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤" + }, + "wide": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + } } }, - "stand-alone": { - "abbreviated": { - "am": "ص", - "pm": "م", - "morning1": "فجرا", - "morning2": "ص", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "narrow": { - "am": "ص", - "pm": "م", - "morning1": "فجرا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "wide": { - "am": "صباحًا", - "pm": "مساءً", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - } - } - }, - "eras": { - "eraNames": { - "0": "قبل الميلاد", - "0-alt-variant": "BCE", - "1": "ميلادي", - "1-alt-variant": "بعد الميلاد" - }, - "eraAbbr": { - "0": "ق.م", - "0-alt-variant": "BCE", - "1": "م", - "1-alt-variant": "ب.م" - }, - "eraNarrow": { - "0": "ق.م", - "0-alt-variant": "BCE", - "1": "م", - "1-alt-variant": "ب.م" - } - }, - "dateFormats": { - "full": "EEEE، d MMMM، y", - "long": "d MMMM، y", - "medium": "dd‏/MM‏/y", - "short": "d‏/M‏/y" - }, - "timeFormats": { - "full": "h:mm:ss a zzzz", - "long": "h:mm:ss a z", - "medium": "h:mm:ss a", - "short": "h:mm a" - }, - "dateTimeFormats": { - "full": "{1} {0}", - "long": "{1} {0}", - "medium": "{1} {0}", - "short": "{1} {0}", - "availableFormats": { - "d": "d", - "E": "ccc", - "Ed": "E، d", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d MMM، y G", - "GyMMMEd": "E، d MMM، y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "hmsv": "h:mm:ss a v", - "Hmsv": "HH:mm:ss v", - "hmv": "h:mm a v", - "Hmv": "HH:mm v", - "M": "L", - "Md": "d/‏M", - "MEd": "E، d/M", - "MMdd": "dd‏/MM", - "MMM": "LLL", - "MMMd": "d MMM", - "MMMEd": "E، d MMM", - "MMMMd": "d MMMM", - "MMMMEd": "E، d MMMM", - "MMMMW-count-zero": "الأسبوع W من MMM", - "MMMMW-count-one": "الأسبوع W من MMM", - "MMMMW-count-two": "الأسبوع W من MMM", - "MMMMW-count-few": "الأسبوع W من MMM", - "MMMMW-count-many": "الأسبوع W من MMM", - "MMMMW-count-other": "الأسبوع W من MMM", - "ms": "mm:ss", - "y": "y", - "yM": "M‏/y", - "yMd": "d‏/M‏/y", - "yMEd": "E، d/‏M/‏y", - "yMM": "MM‏/y", - "yMMM": "MMM y", - "yMMMd": "d MMM، y", - "yMMMEd": "E، d MMM، y", - "yMMMM": "MMMM y", - "yQQQ": "QQQ y", - "yQQQQ": "QQQQ y", - "yw-count-zero": "الأسبوع w من سنة y", - "yw-count-one": "الأسبوع w من سنة y", - "yw-count-two": "الأسبوع w من سنة y", - "yw-count-few": "الأسبوع w من سنة y", - "yw-count-many": "الأسبوع w من سنة y", - "yw-count-other": "الأسبوع w من سنة y" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d–d" - }, - "h": { - "a": "h a – h a", - "h": "h–h a" - }, - "H": { - "H": "HH–HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm–h:mm a", - "m": "h:mm–h:mm a" - }, - "Hm": { - "H": "HH:mm–HH:mm", - "m": "HH:mm–HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm–h:mm a v", - "m": "h:mm–h:mm a v" - }, - "Hmv": { - "H": "HH:mm–HH:mm v", - "m": "HH:mm–HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h–h a v" - }, - "Hv": { - "H": "HH–HH v" - }, - "M": { - "M": "M–M" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "E، d/‏M –‏ E، d/‏M", - "M": "E، d/‏M – E، d/‏M" - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "d–d MMM", - "M": "d MMM – d MMM" - }, - "MMMEd": { - "d": "E، d – E، d MMM", - "M": "E، d MMM – E، d MMM" - }, - "MMMM": { - "M": "LLLL–LLLL" - }, - "y": { - "y": "y–y" - }, - "yM": { - "M": "M‏/y – M‏/y", - "y": "M‏/y – M‏/y" - }, - "yMd": { - "d": "d‏/M‏/y – d‏/M‏/y", - "M": "d‏/M‏/y – d‏/M‏/y", - "y": "d‏/M‏/y – d‏/M‏/y" - }, - "yMEd": { - "d": "E، dd‏/MM‏/y – E، dd‏/MM‏/y", - "M": "E، d‏/M‏/y – E، d‏/M‏/y", - "y": "E، d‏/M‏/y – E، d‏/M‏/y" - }, - "yMMM": { - "M": "MMM – MMM، y", - "y": "MMM، y – MMM، y" - }, - "yMMMd": { - "d": "d–d MMM، y", - "M": "d MMM – d MMM، y", - "y": "d MMM، y – d MMM، y" - }, - "yMMMEd": { - "d": "E، d – E، d MMM، y", - "M": "E، d MMM – E، d MMM، y", - "y": "E، d MMM، y – E، d MMM، y" - }, - "yMMMM": { - "M": "MMMM – MMMM، y", - "y": "MMMM، y – MMMM، y" - } - } - } - }, - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "محرم", - "2": "صفر", - "3": "ربيع الأول", - "4": "ربيع الآخر", - "5": "جمادى الأولى", - "6": "جمادى الآخرة", - "7": "رجب", - "8": "شعبان", - "9": "رمضان", - "10": "شوال", - "11": "ذو القعدة", - "12": "ذو الحجة" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤", - "5": "٥", - "6": "٦", - "7": "٧", - "8": "٨", - "9": "٩", - "10": "١٠", - "11": "١١", - "12": "١٢" - }, - "wide": { - "1": "محرم", - "2": "صفر", - "3": "ربيع الأول", - "4": "ربيع الآخر", - "5": "جمادى الأولى", - "6": "جمادى الآخرة", - "7": "رجب", - "8": "شعبان", - "9": "رمضان", - "10": "شوال", - "11": "ذو القعدة", - "12": "ذو الحجة" + "dayPeriods": { + "format": { + "abbreviated": { + "am": "ص", + "pm": "م", + "morning1": "فجرا", + "morning2": "ص", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ل" + }, + "narrow": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "wide": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + } + }, + "stand-alone": { + "abbreviated": { + "am": "ص", + "pm": "م", + "morning1": "فجرا", + "morning2": "ص", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "narrow": { + "am": "ص", + "pm": "م", + "morning1": "فجرا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "wide": { + "am": "صباحًا", + "pm": "مساءً", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + } } }, - "stand-alone": { - "abbreviated": { - "1": "محرم", - "2": "صفر", - "3": "ربيع الأول", - "4": "ربيع الآخر", - "5": "جمادى الأولى", - "6": "جمادى الآخرة", - "7": "رجب", - "8": "شعبان", - "9": "رمضان", - "10": "شوال", - "11": "ذو القعدة", - "12": "ذو الحجة" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤", - "5": "٥", - "6": "٦", - "7": "٧", - "8": "٨", - "9": "٩", - "10": "١٠", - "11": "١١", - "12": "١٢" - }, - "wide": { - "1": "محرم", - "2": "صفر", - "3": "ربيع الأول", - "4": "ربيع الآخر", - "5": "جمادى الأولى", - "6": "جمادى الآخرة", - "7": "رجب", - "8": "شعبان", - "9": "رمضان", - "10": "شوال", - "11": "ذو القعدة", - "12": "ذو الحجة" + "eras": { + "eraNames": { + "0": "قبل الميلاد", + "0-alt-variant": "BCE", + "1": "ميلادي", + "1-alt-variant": "بعد الميلاد" + }, + "eraAbbr": { + "0": "ق.م", + "0-alt-variant": "BCE", + "1": "م", + "1-alt-variant": "ب.م" + }, + "eraNarrow": { + "0": "ق.م", + "0-alt-variant": "BCE", + "1": "م", + "1-alt-variant": "ب.م" + } + }, + "dateFormats": { + "full": "EEEE، d MMMM، y", + "long": "d MMMM، y", + "medium": "dd‏/MM‏/y", + "short": "d‏/M‏/y" + }, + "timeFormats": { + "full": "h:mm:ss a zzzz", + "long": "h:mm:ss a z", + "medium": "h:mm:ss a", + "short": "h:mm a" + }, + "dateTimeFormats": { + "full": "{1} {0}", + "long": "{1} {0}", + "medium": "{1} {0}", + "short": "{1} {0}", + "availableFormats": { + "d": "d", + "E": "ccc", + "Ed": "E، d", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d MMM، y G", + "GyMMMEd": "E، d MMM، y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "hmsv": "h:mm:ss a v", + "Hmsv": "HH:mm:ss v", + "hmv": "h:mm a v", + "Hmv": "HH:mm v", + "M": "L", + "Md": "d/‏M", + "MEd": "E، d/M", + "MMdd": "dd‏/MM", + "MMM": "LLL", + "MMMd": "d MMM", + "MMMEd": "E، d MMM", + "MMMMd": "d MMMM", + "MMMMEd": "E، d MMMM", + "MMMMW-count-zero": "الأسبوع W من MMM", + "MMMMW-count-one": "الأسبوع W من MMM", + "MMMMW-count-two": "الأسبوع W من MMM", + "MMMMW-count-few": "الأسبوع W من MMM", + "MMMMW-count-many": "الأسبوع W من MMM", + "MMMMW-count-other": "الأسبوع W من MMM", + "ms": "mm:ss", + "y": "y", + "yM": "M‏/y", + "yMd": "d‏/M‏/y", + "yMEd": "E، d/‏M/‏y", + "yMM": "MM‏/y", + "yMMM": "MMM y", + "yMMMd": "d MMM، y", + "yMMMEd": "E، d MMM، y", + "yMMMM": "MMMM y", + "yQQQ": "QQQ y", + "yQQQQ": "QQQQ y", + "yw-count-zero": "الأسبوع w من سنة y", + "yw-count-one": "الأسبوع w من سنة y", + "yw-count-two": "الأسبوع w من سنة y", + "yw-count-few": "الأسبوع w من سنة y", + "yw-count-many": "الأسبوع w من سنة y", + "yw-count-other": "الأسبوع w من سنة y" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d–d" + }, + "h": { + "a": "h a – h a", + "h": "h–h a" + }, + "H": { + "H": "HH–HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm–h:mm a", + "m": "h:mm–h:mm a" + }, + "Hm": { + "H": "HH:mm–HH:mm", + "m": "HH:mm–HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm–h:mm a v", + "m": "h:mm–h:mm a v" + }, + "Hmv": { + "H": "HH:mm–HH:mm v", + "m": "HH:mm–HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h–h a v" + }, + "Hv": { + "H": "HH–HH v" + }, + "M": { + "M": "M–M" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "E، d/‏M –‏ E، d/‏M", + "M": "E، d/‏M – E، d/‏M" + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "d–d MMM", + "M": "d MMM – d MMM" + }, + "MMMEd": { + "d": "E، d – E، d MMM", + "M": "E، d MMM – E، d MMM" + }, + "MMMM": { + "M": "LLLL–LLLL" + }, + "y": { + "y": "y–y" + }, + "yM": { + "M": "M‏/y – M‏/y", + "y": "M‏/y – M‏/y" + }, + "yMd": { + "d": "d‏/M‏/y – d‏/M‏/y", + "M": "d‏/M‏/y – d‏/M‏/y", + "y": "d‏/M‏/y – d‏/M‏/y" + }, + "yMEd": { + "d": "E، dd‏/MM‏/y – E، dd‏/MM‏/y", + "M": "E، d‏/M‏/y – E، d‏/M‏/y", + "y": "E، d‏/M‏/y – E، d‏/M‏/y" + }, + "yMMM": { + "M": "MMM – MMM، y", + "y": "MMM، y – MMM، y" + }, + "yMMMd": { + "d": "d–d MMM، y", + "M": "d MMM – d MMM، y", + "y": "d MMM، y – d MMM، y" + }, + "yMMMEd": { + "d": "E، d – E، d MMM، y", + "M": "E، d MMM – E، d MMM، y", + "y": "E، d MMM، y – E، d MMM، y" + }, + "yMMMM": { + "M": "MMMM – MMMM، y", + "y": "MMMM، y – MMMM، y" + } } } }, - "days": { - "format": { - "abbreviated": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "narrow": { - "sun": "ح", - "mon": "ن", - "tue": "ث", - "wed": "ر", - "thu": "خ", - "fri": "ج", - "sat": "س" - }, - "short": { - "sun": "أحد", - "mon": "إثنين", - "tue": "ثلاثاء", - "wed": "أربعاء", - "thu": "خميس", - "fri": "جمعة", - "sat": "سبت" - }, - "wide": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "محرم", + "2": "صفر", + "3": "ربيع الأول", + "4": "ربيع الآخر", + "5": "جمادى الأولى", + "6": "جمادى الآخرة", + "7": "رجب", + "8": "شعبان", + "9": "رمضان", + "10": "شوال", + "11": "ذو القعدة", + "12": "ذو الحجة" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤", + "5": "٥", + "6": "٦", + "7": "٧", + "8": "٨", + "9": "٩", + "10": "١٠", + "11": "١١", + "12": "١٢" + }, + "wide": { + "1": "محرم", + "2": "صفر", + "3": "ربيع الأول", + "4": "ربيع الآخر", + "5": "جمادى الأولى", + "6": "جمادى الآخرة", + "7": "رجب", + "8": "شعبان", + "9": "رمضان", + "10": "شوال", + "11": "ذو القعدة", + "12": "ذو الحجة" + } + }, + "stand-alone": { + "abbreviated": { + "1": "محرم", + "2": "صفر", + "3": "ربيع الأول", + "4": "ربيع الآخر", + "5": "جمادى الأولى", + "6": "جمادى الآخرة", + "7": "رجب", + "8": "شعبان", + "9": "رمضان", + "10": "شوال", + "11": "ذو القعدة", + "12": "ذو الحجة" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤", + "5": "٥", + "6": "٦", + "7": "٧", + "8": "٨", + "9": "٩", + "10": "١٠", + "11": "١١", + "12": "١٢" + }, + "wide": { + "1": "محرم", + "2": "صفر", + "3": "ربيع الأول", + "4": "ربيع الآخر", + "5": "جمادى الأولى", + "6": "جمادى الآخرة", + "7": "رجب", + "8": "شعبان", + "9": "رمضان", + "10": "شوال", + "11": "ذو القعدة", + "12": "ذو الحجة" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - }, - "narrow": { - "sun": "ح", - "mon": "ن", - "tue": "ث", - "wed": "ر", - "thu": "خ", - "fri": "ج", - "sat": "س" - }, - "short": { - "sun": "أحد", - "mon": "إثنين", - "tue": "ثلاثاء", - "wed": "أربعاء", - "thu": "خميس", - "fri": "جمعة", - "sat": "سبت" - }, - "wide": { - "sun": "الأحد", - "mon": "الاثنين", - "tue": "الثلاثاء", - "wed": "الأربعاء", - "thu": "الخميس", - "fri": "الجمعة", - "sat": "السبت" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤" - }, - "wide": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" + "days": { + "format": { + "abbreviated": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "narrow": { + "sun": "ح", + "mon": "ن", + "tue": "ث", + "wed": "ر", + "thu": "خ", + "fri": "ج", + "sat": "س" + }, + "short": { + "sun": "أحد", + "mon": "إثنين", + "tue": "ثلاثاء", + "wed": "أربعاء", + "thu": "خميس", + "fri": "جمعة", + "sat": "سبت" + }, + "wide": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + }, + "narrow": { + "sun": "ح", + "mon": "ن", + "tue": "ث", + "wed": "ر", + "thu": "خ", + "fri": "ج", + "sat": "س" + }, + "short": { + "sun": "أحد", + "mon": "إثنين", + "tue": "ثلاثاء", + "wed": "أربعاء", + "thu": "خميس", + "fri": "جمعة", + "sat": "سبت" + }, + "wide": { + "sun": "الأحد", + "mon": "الاثنين", + "tue": "الثلاثاء", + "wed": "الأربعاء", + "thu": "الخميس", + "fri": "الجمعة", + "sat": "السبت" + } } }, - "stand-alone": { - "abbreviated": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - }, - "narrow": { - "1": "١", - "2": "٢", - "3": "٣", - "4": "٤" - }, - "wide": { - "1": "الربع الأول", - "2": "الربع الثاني", - "3": "الربع الثالث", - "4": "الربع الرابع" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "ص", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "narrow": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "wide": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" + "quarters": { + "format": { + "abbreviated": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤" + }, + "wide": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + } + }, + "stand-alone": { + "abbreviated": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + }, + "narrow": { + "1": "١", + "2": "٢", + "3": "٣", + "4": "٤" + }, + "wide": { + "1": "الربع الأول", + "2": "الربع الثاني", + "3": "الربع الثالث", + "4": "الربع الرابع" + } } }, - "stand-alone": { - "abbreviated": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "ص", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "narrow": { - "am": "ص", - "pm": "م", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" - }, - "wide": { - "am": "صباحًا", - "pm": "مساءً", - "morning1": "فجرًا", - "morning2": "صباحًا", - "afternoon1": "ظهرًا", - "afternoon2": "بعد الظهر", - "evening1": "مساءً", - "night1": "منتصف الليل", - "night2": "ليلاً" + "dayPeriods": { + "format": { + "abbreviated": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "ص", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "narrow": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "wide": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + } + }, + "stand-alone": { + "abbreviated": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "ص", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "narrow": { + "am": "ص", + "pm": "م", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + }, + "wide": { + "am": "صباحًا", + "pm": "مساءً", + "morning1": "فجرًا", + "morning2": "صباحًا", + "afternoon1": "ظهرًا", + "afternoon2": "بعد الظهر", + "evening1": "مساءً", + "night1": "منتصف الليل", + "night2": "ليلاً" + } } - } - }, - "eras": { - "eraNames": { - "0": "هـ" - }, - "eraAbbr": { - "0": "هـ" }, - "eraNarrow": { - "0": "هـ" - } - }, - "dateFormats": { - "full": "EEEE، d MMMM y G", - "long": "d MMMM y G", - "medium": "d MMM y G", - "short": "d‏/M‏/y GGGGG" - }, - "timeFormats": { - "full": "h:mm:ss a zzzz", - "long": "h:mm:ss a z", - "medium": "h:mm:ss a", - "short": "h:mm a" - }, - "dateTimeFormats": { - "full": "{1} {0}", - "long": "{1} {0}", - "medium": "{1} {0}", - "short": "{1} {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "E، d", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d MMM y G", - "GyMMMEd": "E، d MMM y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "d/‏M", - "MEd": "E، d/M", - "MMM": "LLL", - "MMMd": "d MMM", - "MMMEd": "E، d MMM", - "MMMMd": "d MMMM", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M‏/y G", - "yyyyMd": "d‏/M‏/y G", - "yyyyMEd": "E، d/‏M/‏y G", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "d MMM y G", - "yyyyMMMEd": "E، d MMM y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d–d" - }, - "Gy": { - "G": "G y – G y", - "y": "G y–y" - }, - "GyM": { - "G": "GGGGG y-MM – GGGGG y-MM", - "M": "GGGGG y-MM – y-MM", - "y": "GGGGG y-MM – y-MM" - }, - "GyMd": { - "d": "GGGGG y-MM-dd – y-MM-dd", - "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", - "M": "GGGGG y-MM-dd – y-MM-dd", - "y": "GGGGG y-MM-dd – y-MM-dd" - }, - "GyMEd": { - "d": "GGGGG y-MM-dd, E – y-MM-dd, E", - "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", - "M": "GGGGG y-MM-dd, E – y-MM-dd, E", - "y": "GGGGG y-MM-dd, E – y-MM-dd, E" - }, - "GyMMM": { - "G": "G y MMM – G y MMM", - "M": "G y MMM–MMM", - "y": "G y MMM – y MMM" - }, - "GyMMMd": { - "d": "G y MMM d–d", - "G": "G y MMM d – G y MMM d", - "M": "G y MMM d – MMM d", - "y": "G y MMM d – y MMM d" - }, - "GyMMMEd": { - "d": "G y MMM d, E – MMM d, E", - "G": "G y MMM d, E – G y MMM d, E", - "M": "G y MMM d, E – MMM d, E", - "y": "G y MMM d, E – y MMM d, E" - }, - "h": { - "a": "h a – h a", - "h": "h–h a" - }, - "H": { - "H": "HH–HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm–h:mm a", - "m": "h:mm–h:mm a" - }, - "Hm": { - "H": "HH:mm–HH:mm", - "m": "HH:mm–HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm–h:mm a v", - "m": "h:mm–h:mm a v" - }, - "Hmv": { - "H": "HH:mm–HH:mm v", - "m": "HH:mm–HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h–h a v" - }, - "Hv": { - "H": "HH–HH v" - }, - "M": { - "M": "M–M" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "E، d/‏M –‏ E، d/‏M", - "M": "E، d/‏M – E، d/‏M" - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "MMM d–d", - "M": "d MMM – d MMM" - }, - "MMMEd": { - "d": "E، d – E، d MMM", - "M": "E، d MMM – E، d MMM" - }, - "MMMM": { - "M": "LLLL–LLLL" - }, - "y": { - "y": "y–y G" - }, - "yM": { - "M": "M‏/y – M‏/y G", - "y": "M‏/y – M‏/y G" - }, - "yMd": { - "d": "d‏/M‏/y – d‏/M‏/y G", - "M": "d‏/M‏/y – d‏/M‏/y G", - "y": "d‏/M‏/y – d‏/M‏/y G" - }, - "yMEd": { - "d": "E، dd‏/MM‏/y – E، dd‏/MM‏/y G", - "M": "E، d‏/M‏/y – E، d‏/M‏/y G", - "y": "E، d‏/M‏/y – E، d‏/M‏/y G" - }, - "yMMM": { - "M": "MMM – MMM y G", - "y": "MMM، y – MMM y G" - }, - "yMMMd": { - "d": "d–d MMM y G", - "M": "d MMM – d MMM y G", - "y": "d MMM y – d MMM y G" - }, - "yMMMEd": { - "d": "E، d – E، d MMM y G", - "M": "E، d MMM – E، d MMM y G", - "y": "E، d MMM y – E، d MMM y G" - }, - "yMMMM": { - "M": "MMMM – MMMM y G", - "y": "MMMM y – MMMM y G" + "eras": { + "eraNames": { + "0": "هـ" + }, + "eraAbbr": { + "0": "هـ" + }, + "eraNarrow": { + "0": "هـ" + } + }, + "dateFormats": { + "full": "EEEE، d MMMM y G", + "long": "d MMMM y G", + "medium": "d MMM y G", + "short": "d‏/M‏/y GGGGG" + }, + "timeFormats": { + "full": "h:mm:ss a zzzz", + "long": "h:mm:ss a z", + "medium": "h:mm:ss a", + "short": "h:mm a" + }, + "dateTimeFormats": { + "full": "{1} {0}", + "long": "{1} {0}", + "medium": "{1} {0}", + "short": "{1} {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "E، d", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d MMM y G", + "GyMMMEd": "E، d MMM y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "d/‏M", + "MEd": "E، d/M", + "MMM": "LLL", + "MMMd": "d MMM", + "MMMEd": "E، d MMM", + "MMMMd": "d MMMM", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M‏/y G", + "yyyyMd": "d‏/M‏/y G", + "yyyyMEd": "E، d/‏M/‏y G", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "d MMM y G", + "yyyyMMMEd": "E، d MMM y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d–d" + }, + "Gy": { + "G": "G y – G y", + "y": "G y–y" + }, + "GyM": { + "G": "GGGGG y-MM – GGGGG y-MM", + "M": "GGGGG y-MM – y-MM", + "y": "GGGGG y-MM – y-MM" + }, + "GyMd": { + "d": "GGGGG y-MM-dd – y-MM-dd", + "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", + "M": "GGGGG y-MM-dd – y-MM-dd", + "y": "GGGGG y-MM-dd – y-MM-dd" + }, + "GyMEd": { + "d": "GGGGG y-MM-dd, E – y-MM-dd, E", + "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", + "M": "GGGGG y-MM-dd, E – y-MM-dd, E", + "y": "GGGGG y-MM-dd, E – y-MM-dd, E" + }, + "GyMMM": { + "G": "G y MMM – G y MMM", + "M": "G y MMM–MMM", + "y": "G y MMM – y MMM" + }, + "GyMMMd": { + "d": "G y MMM d–d", + "G": "G y MMM d – G y MMM d", + "M": "G y MMM d – MMM d", + "y": "G y MMM d – y MMM d" + }, + "GyMMMEd": { + "d": "G y MMM d, E – MMM d, E", + "G": "G y MMM d, E – G y MMM d, E", + "M": "G y MMM d, E – MMM d, E", + "y": "G y MMM d, E – y MMM d, E" + }, + "h": { + "a": "h a – h a", + "h": "h–h a" + }, + "H": { + "H": "HH–HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm–h:mm a", + "m": "h:mm–h:mm a" + }, + "Hm": { + "H": "HH:mm–HH:mm", + "m": "HH:mm–HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm–h:mm a v", + "m": "h:mm–h:mm a v" + }, + "Hmv": { + "H": "HH:mm–HH:mm v", + "m": "HH:mm–HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h–h a v" + }, + "Hv": { + "H": "HH–HH v" + }, + "M": { + "M": "M–M" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "E، d/‏M –‏ E، d/‏M", + "M": "E، d/‏M – E، d/‏M" + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "MMM d–d", + "M": "d MMM – d MMM" + }, + "MMMEd": { + "d": "E، d – E، d MMM", + "M": "E، d MMM – E، d MMM" + }, + "MMMM": { + "M": "LLLL–LLLL" + }, + "y": { + "y": "y–y G" + }, + "yM": { + "M": "M‏/y – M‏/y G", + "y": "M‏/y – M‏/y G" + }, + "yMd": { + "d": "d‏/M‏/y – d‏/M‏/y G", + "M": "d‏/M‏/y – d‏/M‏/y G", + "y": "d‏/M‏/y – d‏/M‏/y G" + }, + "yMEd": { + "d": "E، dd‏/MM‏/y – E، dd‏/MM‏/y G", + "M": "E، d‏/M‏/y – E، d‏/M‏/y G", + "y": "E، d‏/M‏/y – E، d‏/M‏/y G" + }, + "yMMM": { + "M": "MMM – MMM y G", + "y": "MMM، y – MMM y G" + }, + "yMMMd": { + "d": "d–d MMM y G", + "M": "d MMM – d MMM y G", + "y": "d MMM y – d MMM y G" + }, + "yMMMEd": { + "d": "E، d – E، d MMM y G", + "M": "E، d MMM – E، d MMM y G", + "y": "E، d MMM y – E، d MMM y G" + }, + "yMMMM": { + "M": "MMMM – MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } - } - }, - "timeZoneNames": { - "hourFormat": "+HH:mm;-HH:mm", - "gmtFormat": "جرينتش{0}", - "gmtZeroFormat": "جرينتش", - "regionFormat": "توقيت {0}", - "regionFormat-type-daylight": "توقيت {0} الصيفي", - "regionFormat-type-standard": "توقيت {0} الرسمي", - "fallbackFormat": "{1} ({0})", - "zone": { - "America": { - "Adak": { - "exemplarCity": "أداك" - }, - "Anchorage": { - "exemplarCity": "أنشوراج" - }, - "Anguilla": { - "exemplarCity": "أنغيلا" - }, - "Antigua": { - "exemplarCity": "أنتيغوا" - }, - "Araguaina": { - "exemplarCity": "أروجوانيا" - }, - "Argentina": { - "Rio_Gallegos": { - "exemplarCity": "ريو جالييوس" + }, + "timeZoneNames": { + "hourFormat": "+HH:mm;-HH:mm", + "gmtFormat": "جرينتش{0}", + "gmtZeroFormat": "جرينتش", + "regionFormat": "توقيت {0}", + "regionFormat-type-daylight": "توقيت {0} الصيفي", + "regionFormat-type-standard": "توقيت {0} الرسمي", + "fallbackFormat": "{1} ({0})", + "zone": { + "America": { + "Adak": { + "exemplarCity": "أداك" }, - "San_Juan": { - "exemplarCity": "سان خوان" + "Anchorage": { + "exemplarCity": "أنشوراج" }, - "Ushuaia": { - "exemplarCity": "أشوا" + "Anguilla": { + "exemplarCity": "أنغيلا" }, - "La_Rioja": { - "exemplarCity": "لا ريوجا" + "Antigua": { + "exemplarCity": "أنتيغوا" }, - "San_Luis": { - "exemplarCity": "سان لويس" + "Araguaina": { + "exemplarCity": "أروجوانيا" }, - "Salta": { - "exemplarCity": "سالطا" + "Argentina": { + "Rio_Gallegos": { + "exemplarCity": "ريو جالييوس" + }, + "San_Juan": { + "exemplarCity": "سان خوان" + }, + "Ushuaia": { + "exemplarCity": "أشوا" + }, + "La_Rioja": { + "exemplarCity": "لا ريوجا" + }, + "San_Luis": { + "exemplarCity": "سان لويس" + }, + "Salta": { + "exemplarCity": "سالطا" + }, + "Tucuman": { + "exemplarCity": "تاكمان" + } }, - "Tucuman": { - "exemplarCity": "تاكمان" - } - }, - "Aruba": { - "exemplarCity": "أروبا" - }, - "Asuncion": { - "exemplarCity": "أسونسيون" - }, - "Bahia": { - "exemplarCity": "باهيا" - }, - "Bahia_Banderas": { - "exemplarCity": "باهيا بانديراس" - }, - "Barbados": { - "exemplarCity": "بربادوس" - }, - "Belem": { - "exemplarCity": "بلم" - }, - "Belize": { - "exemplarCity": "بليز" - }, - "Blanc-Sablon": { - "exemplarCity": "بلانك-سابلون" - }, - "Boa_Vista": { - "exemplarCity": "باو فيستا" - }, - "Bogota": { - "exemplarCity": "بوغوتا" - }, - "Boise": { - "exemplarCity": "بويس" - }, - "Buenos_Aires": { - "exemplarCity": "بوينوس أيرس" - }, - "Cambridge_Bay": { - "exemplarCity": "كامبرديج باي" - }, - "Campo_Grande": { - "exemplarCity": "كومبو جراند" - }, - "Cancun": { - "exemplarCity": "كانكون" - }, - "Caracas": { - "exemplarCity": "كاراكاس" - }, - "Catamarca": { - "exemplarCity": "كاتاماركا" - }, - "Cayenne": { - "exemplarCity": "كايين" - }, - "Cayman": { - "exemplarCity": "كيمان" - }, - "Chicago": { - "exemplarCity": "شيكاغو" - }, - "Chihuahua": { - "exemplarCity": "تشيواوا" - }, - "Coral_Harbour": { - "exemplarCity": "كورال هاربر" - }, - "Cordoba": { - "exemplarCity": "كوردوبا" - }, - "Costa_Rica": { - "exemplarCity": "كوستاريكا" - }, - "Creston": { - "exemplarCity": "كريستون" - }, - "Cuiaba": { - "exemplarCity": "كيابا" - }, - "Curacao": { - "exemplarCity": "كوراكاو" - }, - "Danmarkshavn": { - "exemplarCity": "دانمرك شافن" - }, - "Dawson": { - "exemplarCity": "داوسان" - }, - "Dawson_Creek": { - "exemplarCity": "داوسن كريك" - }, - "Denver": { - "exemplarCity": "دنفر" - }, - "Detroit": { - "exemplarCity": "ديترويت" - }, - "Dominica": { - "exemplarCity": "دومينيكا" - }, - "Edmonton": { - "exemplarCity": "ايدمونتون" - }, - "Eirunepe": { - "exemplarCity": "ايرونبي" - }, - "El_Salvador": { - "exemplarCity": "السلفادور" - }, - "Fort_Nelson": { - "exemplarCity": "فورت نيلسون" - }, - "Fortaleza": { - "exemplarCity": "فورتاليزا" - }, - "Glace_Bay": { - "exemplarCity": "جلاس باي" - }, - "Godthab": { - "exemplarCity": "غودثاب" - }, - "Goose_Bay": { - "exemplarCity": "جوس باي" - }, - "Grand_Turk": { - "exemplarCity": "غراند ترك" - }, - "Grenada": { - "exemplarCity": "غرينادا" - }, - "Guadeloupe": { - "exemplarCity": "غوادلوب" - }, - "Guatemala": { - "exemplarCity": "غواتيمالا" - }, - "Guayaquil": { - "exemplarCity": "غواياكويل" - }, - "Guyana": { - "exemplarCity": "غيانا" - }, - "Halifax": { - "exemplarCity": "هاليفاكس" - }, - "Havana": { - "exemplarCity": "هافانا" - }, - "Hermosillo": { - "exemplarCity": "هيرموسيلو" - }, - "Indiana": { - "Vincennes": { - "exemplarCity": "فينسينس" + "Aruba": { + "exemplarCity": "أروبا" }, - "Petersburg": { - "exemplarCity": "بيترسبرغ" + "Asuncion": { + "exemplarCity": "أسونسيون" }, - "Tell_City": { - "exemplarCity": "مدينة تل، إنديانا" + "Bahia": { + "exemplarCity": "باهيا" }, - "Knox": { - "exemplarCity": "كونكس" + "Bahia_Banderas": { + "exemplarCity": "باهيا بانديراس" }, - "Winamac": { - "exemplarCity": "ويناماك" + "Barbados": { + "exemplarCity": "بربادوس" }, - "Marengo": { - "exemplarCity": "مارنجو" + "Belem": { + "exemplarCity": "بلم" }, - "Vevay": { - "exemplarCity": "فيفاي" - } - }, - "Indianapolis": { - "exemplarCity": "إنديانابوليس" - }, - "Inuvik": { - "exemplarCity": "اينوفيك" - }, - "Iqaluit": { - "exemplarCity": "اكويلت" - }, - "Jamaica": { - "exemplarCity": "جامايكا" - }, - "Jujuy": { - "exemplarCity": "جوجو" - }, - "Juneau": { - "exemplarCity": "جوني" - }, - "Kentucky": { - "Monticello": { - "exemplarCity": "مونتيسيلو" - } - }, - "Kralendijk": { - "exemplarCity": "كرالنديك" - }, - "La_Paz": { - "exemplarCity": "لا باز" - }, - "Lima": { - "exemplarCity": "ليما" - }, - "Los_Angeles": { - "exemplarCity": "لوس انجلوس" - }, - "Louisville": { - "exemplarCity": "لويس فيل" - }, - "Lower_Princes": { - "exemplarCity": "حي الأمير السفلي" - }, - "Maceio": { - "exemplarCity": "ماشيو" - }, - "Managua": { - "exemplarCity": "ماناغوا" - }, - "Manaus": { - "exemplarCity": "ماناوس" - }, - "Marigot": { - "exemplarCity": "ماريغوت" - }, - "Martinique": { - "exemplarCity": "المارتينيك" - }, - "Matamoros": { - "exemplarCity": "ماتاموروس" - }, - "Mazatlan": { - "exemplarCity": "مازاتلان" - }, - "Mendoza": { - "exemplarCity": "ميندوزا" - }, - "Menominee": { - "exemplarCity": "مينوميني" - }, - "Merida": { - "exemplarCity": "ميريدا" - }, - "Metlakatla": { - "exemplarCity": "ميتلاكاتلا" - }, - "Mexico_City": { - "exemplarCity": "مدينة المكسيك" - }, - "Miquelon": { - "exemplarCity": "ميكولن" - }, - "Moncton": { - "exemplarCity": "وينكتون" - }, - "Monterrey": { - "exemplarCity": "مونتيري" - }, - "Montevideo": { - "exemplarCity": "مونتفيديو" - }, - "Montserrat": { - "exemplarCity": "مونتسيرات" - }, - "Nassau": { - "exemplarCity": "ناسو" - }, - "New_York": { - "exemplarCity": "نيويورك" - }, - "Nipigon": { - "exemplarCity": "نيبيجون" - }, - "Nome": { - "exemplarCity": "نوم" - }, - "Noronha": { - "exemplarCity": "نوروناه" - }, - "North_Dakota": { - "Beulah": { - "exemplarCity": "بيولا، داكوتا الشمالية" + "Belize": { + "exemplarCity": "بليز" }, - "New_Salem": { - "exemplarCity": "نيو ساليم" + "Blanc-Sablon": { + "exemplarCity": "بلانك-سابلون" }, - "Center": { - "exemplarCity": "سنتر" - } - }, - "Ojinaga": { - "exemplarCity": "أوجيناجا" - }, - "Panama": { - "exemplarCity": "بنما" - }, - "Pangnirtung": { - "exemplarCity": "بانجينتينج" - }, - "Paramaribo": { - "exemplarCity": "باراماريبو" - }, - "Phoenix": { - "exemplarCity": "فينكس" - }, - "Port-au-Prince": { - "exemplarCity": "بورت أو برنس" - }, - "Port_of_Spain": { - "exemplarCity": "بورت أوف سبين" - }, - "Porto_Velho": { - "exemplarCity": "بورتو فيلو" - }, - "Puerto_Rico": { - "exemplarCity": "بورتوريكو" - }, - "Rainy_River": { - "exemplarCity": "راني ريفر" - }, - "Rankin_Inlet": { - "exemplarCity": "رانكن انلت" - }, - "Recife": { - "exemplarCity": "ريسيف" - }, - "Regina": { - "exemplarCity": "ريجينا" - }, - "Resolute": { - "exemplarCity": "ريزولوت" - }, - "Rio_Branco": { - "exemplarCity": "ريوبرانكو" - }, - "Santa_Isabel": { - "exemplarCity": "سانتا إيزابيل" - }, - "Santarem": { - "exemplarCity": "سانتاريم" - }, - "Santiago": { - "exemplarCity": "سانتياغو" - }, - "Santo_Domingo": { - "exemplarCity": "سانتو دومينغو" - }, - "Sao_Paulo": { - "exemplarCity": "ساو باولو" - }, - "Scoresbysund": { - "exemplarCity": "سكورسبيسند" - }, - "Sitka": { - "exemplarCity": "سيتكا" - }, - "St_Barthelemy": { - "exemplarCity": "سانت بارتيليمي" - }, - "St_Johns": { - "exemplarCity": "سانت جونس" - }, - "St_Kitts": { - "exemplarCity": "سانت كيتس" - }, - "St_Lucia": { - "exemplarCity": "سانت لوشيا" - }, - "St_Thomas": { - "exemplarCity": "سانت توماس" - }, - "St_Vincent": { - "exemplarCity": "سانت فنسنت" - }, - "Swift_Current": { - "exemplarCity": "سوفت كارنت" - }, - "Tegucigalpa": { - "exemplarCity": "تيغوسيغالبا" - }, - "Thule": { - "exemplarCity": "ثيل" - }, - "Thunder_Bay": { - "exemplarCity": "ثندر باي" - }, - "Tijuana": { - "exemplarCity": "تيخوانا" - }, - "Toronto": { - "exemplarCity": "تورونتو" - }, - "Tortola": { - "exemplarCity": "تورتولا" - }, - "Vancouver": { - "exemplarCity": "فانكوفر" - }, - "Whitehorse": { - "exemplarCity": "وايت هورس" - }, - "Winnipeg": { - "exemplarCity": "وينيبيج" - }, - "Yakutat": { - "exemplarCity": "ياكوتات" - }, - "Yellowknife": { - "exemplarCity": "يلونيف" - } - }, - "Atlantic": { - "Azores": { - "exemplarCity": "أزورس" - }, - "Bermuda": { - "exemplarCity": "برمودا" - }, - "Canary": { - "exemplarCity": "كناري" - }, - "Cape_Verde": { - "exemplarCity": "الرأس الأخضر" - }, - "Faeroe": { - "exemplarCity": "فارو" - }, - "Madeira": { - "exemplarCity": "ماديرا" - }, - "Reykjavik": { - "exemplarCity": "ريكيافيك" - }, - "South_Georgia": { - "exemplarCity": "جورجيا الجنوبية" - }, - "St_Helena": { - "exemplarCity": "سانت هيلينا" - }, - "Stanley": { - "exemplarCity": "استانلي" - } - }, - "Europe": { - "Amsterdam": { - "exemplarCity": "أمستردام" - }, - "Andorra": { - "exemplarCity": "أندورا" - }, - "Astrakhan": { - "exemplarCity": "أستراخان" - }, - "Athens": { - "exemplarCity": "أثينا" - }, - "Belgrade": { - "exemplarCity": "بلغراد" - }, - "Berlin": { - "exemplarCity": "برلين" - }, - "Bratislava": { - "exemplarCity": "براتيسلافا" - }, - "Brussels": { - "exemplarCity": "بروكسل" - }, - "Bucharest": { - "exemplarCity": "بوخارست" - }, - "Budapest": { - "exemplarCity": "بودابست" - }, - "Busingen": { - "exemplarCity": "بوسنغن" - }, - "Chisinau": { - "exemplarCity": "تشيسيناو" - }, - "Copenhagen": { - "exemplarCity": "كوبنهاغن" - }, - "Dublin": { - "long": { - "daylight": "توقيت أيرلندا الرسمي" + "Boa_Vista": { + "exemplarCity": "باو فيستا" }, - "exemplarCity": "دبلن" - }, - "Gibraltar": { - "exemplarCity": "جبل طارق" - }, - "Guernsey": { - "exemplarCity": "غيرنسي" - }, - "Helsinki": { - "exemplarCity": "هلسنكي" - }, - "Isle_of_Man": { - "exemplarCity": "جزيرة مان" - }, - "Istanbul": { - "exemplarCity": "إسطنبول" - }, - "Jersey": { - "exemplarCity": "جيرسي" - }, - "Kaliningrad": { - "exemplarCity": "كالينجراد" - }, - "Kiev": { - "exemplarCity": "كييف" - }, - "Kirov": { - "exemplarCity": "كيروف" - }, - "Lisbon": { - "exemplarCity": "لشبونة" - }, - "Ljubljana": { - "exemplarCity": "ليوبليانا" - }, - "London": { - "long": { - "daylight": "توقيت بريطانيا الصيفي" + "Bogota": { + "exemplarCity": "بوغوتا" }, - "exemplarCity": "لندن" - }, - "Luxembourg": { - "exemplarCity": "لوكسمبورغ" - }, - "Madrid": { - "exemplarCity": "مدريد" - }, - "Malta": { - "exemplarCity": "مالطة" - }, - "Mariehamn": { - "exemplarCity": "ماريهامن" - }, - "Minsk": { - "exemplarCity": "مينسك" - }, - "Monaco": { - "exemplarCity": "موناكو" - }, - "Moscow": { - "exemplarCity": "موسكو" - }, - "Oslo": { - "exemplarCity": "أوسلو" - }, - "Paris": { - "exemplarCity": "باريس" - }, - "Podgorica": { - "exemplarCity": "بودغوريكا" - }, - "Prague": { - "exemplarCity": "براغ" - }, - "Riga": { - "exemplarCity": "ريغا" - }, - "Rome": { - "exemplarCity": "روما" - }, - "Samara": { - "exemplarCity": "سمراء" - }, - "San_Marino": { - "exemplarCity": "سان مارينو" - }, - "Sarajevo": { - "exemplarCity": "سراييفو" - }, - "Simferopol": { - "exemplarCity": "سيمفروبول" - }, - "Skopje": { - "exemplarCity": "سكوبي" - }, - "Sofia": { - "exemplarCity": "صوفيا" - }, - "Stockholm": { - "exemplarCity": "ستوكهولم" - }, - "Tallinn": { - "exemplarCity": "تالين" - }, - "Tirane": { - "exemplarCity": "تيرانا" - }, - "Ulyanovsk": { - "exemplarCity": "أوليانوفسك" - }, - "Uzhgorod": { - "exemplarCity": "أوزجرود" - }, - "Vaduz": { - "exemplarCity": "فادوز" - }, - "Vatican": { - "exemplarCity": "الفاتيكان" - }, - "Vienna": { - "exemplarCity": "فيينا" - }, - "Vilnius": { - "exemplarCity": "فيلنيوس" - }, - "Volgograd": { - "exemplarCity": "فولوجراد" - }, - "Warsaw": { - "exemplarCity": "وارسو" - }, - "Zagreb": { - "exemplarCity": "زغرب" - }, - "Zaporozhye": { - "exemplarCity": "زابوروزي" - }, - "Zurich": { - "exemplarCity": "زيورخ" - } - }, - "Africa": { - "Abidjan": { - "exemplarCity": "أبيدجان" - }, - "Accra": { - "exemplarCity": "أكرا" - }, - "Addis_Ababa": { - "exemplarCity": "أديس أبابا" - }, - "Algiers": { - "exemplarCity": "الجزائر" - }, - "Asmera": { - "exemplarCity": "أسمرة" - }, - "Bamako": { - "exemplarCity": "باماكو" - }, - "Bangui": { - "exemplarCity": "بانغوي" - }, - "Banjul": { - "exemplarCity": "بانجول" - }, - "Bissau": { - "exemplarCity": "بيساو" - }, - "Blantyre": { - "exemplarCity": "بلانتاير" - }, - "Brazzaville": { - "exemplarCity": "برازافيل" - }, - "Bujumbura": { - "exemplarCity": "بوجومبورا" - }, - "Cairo": { - "exemplarCity": "القاهرة" + "Boise": { + "exemplarCity": "بويس" + }, + "Buenos_Aires": { + "exemplarCity": "بوينوس أيرس" + }, + "Cambridge_Bay": { + "exemplarCity": "كامبرديج باي" + }, + "Campo_Grande": { + "exemplarCity": "كومبو جراند" + }, + "Cancun": { + "exemplarCity": "كانكون" + }, + "Caracas": { + "exemplarCity": "كاراكاس" + }, + "Catamarca": { + "exemplarCity": "كاتاماركا" + }, + "Cayenne": { + "exemplarCity": "كايين" + }, + "Cayman": { + "exemplarCity": "كيمان" + }, + "Chicago": { + "exemplarCity": "شيكاغو" + }, + "Chihuahua": { + "exemplarCity": "تشيواوا" + }, + "Coral_Harbour": { + "exemplarCity": "كورال هاربر" + }, + "Cordoba": { + "exemplarCity": "كوردوبا" + }, + "Costa_Rica": { + "exemplarCity": "كوستاريكا" + }, + "Creston": { + "exemplarCity": "كريستون" + }, + "Cuiaba": { + "exemplarCity": "كيابا" + }, + "Curacao": { + "exemplarCity": "كوراكاو" + }, + "Danmarkshavn": { + "exemplarCity": "دانمرك شافن" + }, + "Dawson": { + "exemplarCity": "داوسان" + }, + "Dawson_Creek": { + "exemplarCity": "داوسن كريك" + }, + "Denver": { + "exemplarCity": "دنفر" + }, + "Detroit": { + "exemplarCity": "ديترويت" + }, + "Dominica": { + "exemplarCity": "دومينيكا" + }, + "Edmonton": { + "exemplarCity": "ايدمونتون" + }, + "Eirunepe": { + "exemplarCity": "ايرونبي" + }, + "El_Salvador": { + "exemplarCity": "السلفادور" + }, + "Fort_Nelson": { + "exemplarCity": "فورت نيلسون" + }, + "Fortaleza": { + "exemplarCity": "فورتاليزا" + }, + "Glace_Bay": { + "exemplarCity": "جلاس باي" + }, + "Godthab": { + "exemplarCity": "غودثاب" + }, + "Goose_Bay": { + "exemplarCity": "جوس باي" + }, + "Grand_Turk": { + "exemplarCity": "غراند ترك" + }, + "Grenada": { + "exemplarCity": "غرينادا" + }, + "Guadeloupe": { + "exemplarCity": "غوادلوب" + }, + "Guatemala": { + "exemplarCity": "غواتيمالا" + }, + "Guayaquil": { + "exemplarCity": "غواياكويل" + }, + "Guyana": { + "exemplarCity": "غيانا" + }, + "Halifax": { + "exemplarCity": "هاليفاكس" + }, + "Havana": { + "exemplarCity": "هافانا" + }, + "Hermosillo": { + "exemplarCity": "هيرموسيلو" + }, + "Indiana": { + "Vincennes": { + "exemplarCity": "فينسينس" + }, + "Petersburg": { + "exemplarCity": "بيترسبرغ" + }, + "Tell_City": { + "exemplarCity": "مدينة تل، إنديانا" + }, + "Knox": { + "exemplarCity": "كونكس" + }, + "Winamac": { + "exemplarCity": "ويناماك" + }, + "Marengo": { + "exemplarCity": "مارنجو" + }, + "Vevay": { + "exemplarCity": "فيفاي" + } + }, + "Indianapolis": { + "exemplarCity": "إنديانابوليس" + }, + "Inuvik": { + "exemplarCity": "اينوفيك" + }, + "Iqaluit": { + "exemplarCity": "اكويلت" + }, + "Jamaica": { + "exemplarCity": "جامايكا" + }, + "Jujuy": { + "exemplarCity": "جوجو" + }, + "Juneau": { + "exemplarCity": "جوني" + }, + "Kentucky": { + "Monticello": { + "exemplarCity": "مونتيسيلو" + } + }, + "Kralendijk": { + "exemplarCity": "كرالنديك" + }, + "La_Paz": { + "exemplarCity": "لا باز" + }, + "Lima": { + "exemplarCity": "ليما" + }, + "Los_Angeles": { + "exemplarCity": "لوس انجلوس" + }, + "Louisville": { + "exemplarCity": "لويس فيل" + }, + "Lower_Princes": { + "exemplarCity": "حي الأمير السفلي" + }, + "Maceio": { + "exemplarCity": "ماشيو" + }, + "Managua": { + "exemplarCity": "ماناغوا" + }, + "Manaus": { + "exemplarCity": "ماناوس" + }, + "Marigot": { + "exemplarCity": "ماريغوت" + }, + "Martinique": { + "exemplarCity": "المارتينيك" + }, + "Matamoros": { + "exemplarCity": "ماتاموروس" + }, + "Mazatlan": { + "exemplarCity": "مازاتلان" + }, + "Mendoza": { + "exemplarCity": "ميندوزا" + }, + "Menominee": { + "exemplarCity": "مينوميني" + }, + "Merida": { + "exemplarCity": "ميريدا" + }, + "Metlakatla": { + "exemplarCity": "ميتلاكاتلا" + }, + "Mexico_City": { + "exemplarCity": "مدينة المكسيك" + }, + "Miquelon": { + "exemplarCity": "ميكولن" + }, + "Moncton": { + "exemplarCity": "وينكتون" + }, + "Monterrey": { + "exemplarCity": "مونتيري" + }, + "Montevideo": { + "exemplarCity": "مونتفيديو" + }, + "Montserrat": { + "exemplarCity": "مونتسيرات" + }, + "Nassau": { + "exemplarCity": "ناسو" + }, + "New_York": { + "exemplarCity": "نيويورك" + }, + "Nipigon": { + "exemplarCity": "نيبيجون" + }, + "Nome": { + "exemplarCity": "نوم" + }, + "Noronha": { + "exemplarCity": "نوروناه" + }, + "North_Dakota": { + "Beulah": { + "exemplarCity": "بيولا، داكوتا الشمالية" + }, + "New_Salem": { + "exemplarCity": "نيو ساليم" + }, + "Center": { + "exemplarCity": "سنتر" + } + }, + "Ojinaga": { + "exemplarCity": "أوجيناجا" + }, + "Panama": { + "exemplarCity": "بنما" + }, + "Pangnirtung": { + "exemplarCity": "بانجينتينج" + }, + "Paramaribo": { + "exemplarCity": "باراماريبو" + }, + "Phoenix": { + "exemplarCity": "فينكس" + }, + "Port-au-Prince": { + "exemplarCity": "بورت أو برنس" + }, + "Port_of_Spain": { + "exemplarCity": "بورت أوف سبين" + }, + "Porto_Velho": { + "exemplarCity": "بورتو فيلو" + }, + "Puerto_Rico": { + "exemplarCity": "بورتوريكو" + }, + "Rainy_River": { + "exemplarCity": "راني ريفر" + }, + "Rankin_Inlet": { + "exemplarCity": "رانكن انلت" + }, + "Recife": { + "exemplarCity": "ريسيف" + }, + "Regina": { + "exemplarCity": "ريجينا" + }, + "Resolute": { + "exemplarCity": "ريزولوت" + }, + "Rio_Branco": { + "exemplarCity": "ريوبرانكو" + }, + "Santa_Isabel": { + "exemplarCity": "سانتا إيزابيل" + }, + "Santarem": { + "exemplarCity": "سانتاريم" + }, + "Santiago": { + "exemplarCity": "سانتياغو" + }, + "Santo_Domingo": { + "exemplarCity": "سانتو دومينغو" + }, + "Sao_Paulo": { + "exemplarCity": "ساو باولو" + }, + "Scoresbysund": { + "exemplarCity": "سكورسبيسند" + }, + "Sitka": { + "exemplarCity": "سيتكا" + }, + "St_Barthelemy": { + "exemplarCity": "سانت بارتيليمي" + }, + "St_Johns": { + "exemplarCity": "سانت جونس" + }, + "St_Kitts": { + "exemplarCity": "سانت كيتس" + }, + "St_Lucia": { + "exemplarCity": "سانت لوشيا" + }, + "St_Thomas": { + "exemplarCity": "سانت توماس" + }, + "St_Vincent": { + "exemplarCity": "سانت فنسنت" + }, + "Swift_Current": { + "exemplarCity": "سوفت كارنت" + }, + "Tegucigalpa": { + "exemplarCity": "تيغوسيغالبا" + }, + "Thule": { + "exemplarCity": "ثيل" + }, + "Thunder_Bay": { + "exemplarCity": "ثندر باي" + }, + "Tijuana": { + "exemplarCity": "تيخوانا" + }, + "Toronto": { + "exemplarCity": "تورونتو" + }, + "Tortola": { + "exemplarCity": "تورتولا" + }, + "Vancouver": { + "exemplarCity": "فانكوفر" + }, + "Whitehorse": { + "exemplarCity": "وايت هورس" + }, + "Winnipeg": { + "exemplarCity": "وينيبيج" + }, + "Yakutat": { + "exemplarCity": "ياكوتات" + }, + "Yellowknife": { + "exemplarCity": "يلونيف" + } }, - "Casablanca": { - "exemplarCity": "الدار البيضاء" + "Atlantic": { + "Azores": { + "exemplarCity": "أزورس" + }, + "Bermuda": { + "exemplarCity": "برمودا" + }, + "Canary": { + "exemplarCity": "كناري" + }, + "Cape_Verde": { + "exemplarCity": "الرأس الأخضر" + }, + "Faeroe": { + "exemplarCity": "فارو" + }, + "Madeira": { + "exemplarCity": "ماديرا" + }, + "Reykjavik": { + "exemplarCity": "ريكيافيك" + }, + "South_Georgia": { + "exemplarCity": "جورجيا الجنوبية" + }, + "St_Helena": { + "exemplarCity": "سانت هيلينا" + }, + "Stanley": { + "exemplarCity": "استانلي" + } }, - "Ceuta": { - "exemplarCity": "سيتا" - }, - "Conakry": { - "exemplarCity": "كوناكري" - }, - "Dakar": { - "exemplarCity": "داكار" + "Europe": { + "Amsterdam": { + "exemplarCity": "أمستردام" + }, + "Andorra": { + "exemplarCity": "أندورا" + }, + "Astrakhan": { + "exemplarCity": "أستراخان" + }, + "Athens": { + "exemplarCity": "أثينا" + }, + "Belgrade": { + "exemplarCity": "بلغراد" + }, + "Berlin": { + "exemplarCity": "برلين" + }, + "Bratislava": { + "exemplarCity": "براتيسلافا" + }, + "Brussels": { + "exemplarCity": "بروكسل" + }, + "Bucharest": { + "exemplarCity": "بوخارست" + }, + "Budapest": { + "exemplarCity": "بودابست" + }, + "Busingen": { + "exemplarCity": "بوسنغن" + }, + "Chisinau": { + "exemplarCity": "تشيسيناو" + }, + "Copenhagen": { + "exemplarCity": "كوبنهاغن" + }, + "Dublin": { + "long": { + "daylight": "توقيت أيرلندا الرسمي" + }, + "exemplarCity": "دبلن" + }, + "Gibraltar": { + "exemplarCity": "جبل طارق" + }, + "Guernsey": { + "exemplarCity": "غيرنسي" + }, + "Helsinki": { + "exemplarCity": "هلسنكي" + }, + "Isle_of_Man": { + "exemplarCity": "جزيرة مان" + }, + "Istanbul": { + "exemplarCity": "إسطنبول" + }, + "Jersey": { + "exemplarCity": "جيرسي" + }, + "Kaliningrad": { + "exemplarCity": "كالينجراد" + }, + "Kiev": { + "exemplarCity": "كييف" + }, + "Kirov": { + "exemplarCity": "كيروف" + }, + "Lisbon": { + "exemplarCity": "لشبونة" + }, + "Ljubljana": { + "exemplarCity": "ليوبليانا" + }, + "London": { + "long": { + "daylight": "توقيت بريطانيا الصيفي" + }, + "exemplarCity": "لندن" + }, + "Luxembourg": { + "exemplarCity": "لوكسمبورغ" + }, + "Madrid": { + "exemplarCity": "مدريد" + }, + "Malta": { + "exemplarCity": "مالطة" + }, + "Mariehamn": { + "exemplarCity": "ماريهامن" + }, + "Minsk": { + "exemplarCity": "مينسك" + }, + "Monaco": { + "exemplarCity": "موناكو" + }, + "Moscow": { + "exemplarCity": "موسكو" + }, + "Oslo": { + "exemplarCity": "أوسلو" + }, + "Paris": { + "exemplarCity": "باريس" + }, + "Podgorica": { + "exemplarCity": "بودغوريكا" + }, + "Prague": { + "exemplarCity": "براغ" + }, + "Riga": { + "exemplarCity": "ريغا" + }, + "Rome": { + "exemplarCity": "روما" + }, + "Samara": { + "exemplarCity": "سمراء" + }, + "San_Marino": { + "exemplarCity": "سان مارينو" + }, + "Sarajevo": { + "exemplarCity": "سراييفو" + }, + "Simferopol": { + "exemplarCity": "سيمفروبول" + }, + "Skopje": { + "exemplarCity": "سكوبي" + }, + "Sofia": { + "exemplarCity": "صوفيا" + }, + "Stockholm": { + "exemplarCity": "ستوكهولم" + }, + "Tallinn": { + "exemplarCity": "تالين" + }, + "Tirane": { + "exemplarCity": "تيرانا" + }, + "Ulyanovsk": { + "exemplarCity": "أوليانوفسك" + }, + "Uzhgorod": { + "exemplarCity": "أوزجرود" + }, + "Vaduz": { + "exemplarCity": "فادوز" + }, + "Vatican": { + "exemplarCity": "الفاتيكان" + }, + "Vienna": { + "exemplarCity": "فيينا" + }, + "Vilnius": { + "exemplarCity": "فيلنيوس" + }, + "Volgograd": { + "exemplarCity": "فولوجراد" + }, + "Warsaw": { + "exemplarCity": "وارسو" + }, + "Zagreb": { + "exemplarCity": "زغرب" + }, + "Zaporozhye": { + "exemplarCity": "زابوروزي" + }, + "Zurich": { + "exemplarCity": "زيورخ" + } }, - "Dar_es_Salaam": { - "exemplarCity": "دار السلام" + "Africa": { + "Abidjan": { + "exemplarCity": "أبيدجان" + }, + "Accra": { + "exemplarCity": "أكرا" + }, + "Addis_Ababa": { + "exemplarCity": "أديس أبابا" + }, + "Algiers": { + "exemplarCity": "الجزائر" + }, + "Asmera": { + "exemplarCity": "أسمرة" + }, + "Bamako": { + "exemplarCity": "باماكو" + }, + "Bangui": { + "exemplarCity": "بانغوي" + }, + "Banjul": { + "exemplarCity": "بانجول" + }, + "Bissau": { + "exemplarCity": "بيساو" + }, + "Blantyre": { + "exemplarCity": "بلانتاير" + }, + "Brazzaville": { + "exemplarCity": "برازافيل" + }, + "Bujumbura": { + "exemplarCity": "بوجومبورا" + }, + "Cairo": { + "exemplarCity": "القاهرة" + }, + "Casablanca": { + "exemplarCity": "الدار البيضاء" + }, + "Ceuta": { + "exemplarCity": "سيتا" + }, + "Conakry": { + "exemplarCity": "كوناكري" + }, + "Dakar": { + "exemplarCity": "داكار" + }, + "Dar_es_Salaam": { + "exemplarCity": "دار السلام" + }, + "Djibouti": { + "exemplarCity": "جيبوتي" + }, + "Douala": { + "exemplarCity": "دوالا" + }, + "El_Aaiun": { + "exemplarCity": "العيون" + }, + "Freetown": { + "exemplarCity": "فري تاون" + }, + "Gaborone": { + "exemplarCity": "غابورون" + }, + "Harare": { + "exemplarCity": "هراري" + }, + "Johannesburg": { + "exemplarCity": "جوهانسبرغ" + }, + "Juba": { + "exemplarCity": "جوبا" + }, + "Kampala": { + "exemplarCity": "كامبالا" + }, + "Khartoum": { + "exemplarCity": "الخرطوم" + }, + "Kigali": { + "exemplarCity": "كيغالي" + }, + "Kinshasa": { + "exemplarCity": "كينشاسا" + }, + "Lagos": { + "exemplarCity": "لاغوس" + }, + "Libreville": { + "exemplarCity": "ليبرفيل" + }, + "Lome": { + "exemplarCity": "لومي" + }, + "Luanda": { + "exemplarCity": "لواندا" + }, + "Lubumbashi": { + "exemplarCity": "لومبباشا" + }, + "Lusaka": { + "exemplarCity": "لوساكا" + }, + "Malabo": { + "exemplarCity": "مالابو" + }, + "Maputo": { + "exemplarCity": "مابوتو" + }, + "Maseru": { + "exemplarCity": "ماسيرو" + }, + "Mbabane": { + "exemplarCity": "مباباني" + }, + "Mogadishu": { + "exemplarCity": "مقديشيو" + }, + "Monrovia": { + "exemplarCity": "مونروفيا" + }, + "Nairobi": { + "exemplarCity": "نيروبي" + }, + "Ndjamena": { + "exemplarCity": "نجامينا" + }, + "Niamey": { + "exemplarCity": "نيامي" + }, + "Nouakchott": { + "exemplarCity": "نواكشوط" + }, + "Ouagadougou": { + "exemplarCity": "واغادوغو" + }, + "Porto-Novo": { + "exemplarCity": "بورتو نوفو" + }, + "Sao_Tome": { + "exemplarCity": "ساو تومي" + }, + "Tripoli": { + "exemplarCity": "طرابلس" + }, + "Tunis": { + "exemplarCity": "تونس" + }, + "Windhoek": { + "exemplarCity": "ويندهوك" + } }, - "Djibouti": { - "exemplarCity": "جيبوتي" + "Asia": { + "Aden": { + "exemplarCity": "عدن" + }, + "Almaty": { + "exemplarCity": "ألماتي" + }, + "Amman": { + "exemplarCity": "عمان" + }, + "Anadyr": { + "exemplarCity": "أندير" + }, + "Aqtau": { + "exemplarCity": "أكتاو" + }, + "Aqtobe": { + "exemplarCity": "أكتوب" + }, + "Ashgabat": { + "exemplarCity": "عشق آباد" + }, + "Baghdad": { + "exemplarCity": "بغداد" + }, + "Bahrain": { + "exemplarCity": "البحرين" + }, + "Baku": { + "exemplarCity": "باكو" + }, + "Bangkok": { + "exemplarCity": "بانكوك" + }, + "Barnaul": { + "exemplarCity": "بارناول" + }, + "Beirut": { + "exemplarCity": "بيروت" + }, + "Bishkek": { + "exemplarCity": "بشكيك" + }, + "Brunei": { + "exemplarCity": "بروناي" + }, + "Calcutta": { + "exemplarCity": "كالكتا" + }, + "Chita": { + "exemplarCity": "تشيتا" + }, + "Choibalsan": { + "exemplarCity": "تشوبالسان" + }, + "Colombo": { + "exemplarCity": "كولومبو" + }, + "Damascus": { + "exemplarCity": "دمشق" + }, + "Dhaka": { + "exemplarCity": "دكا" + }, + "Dili": { + "exemplarCity": "ديلي" + }, + "Dubai": { + "exemplarCity": "دبي" + }, + "Dushanbe": { + "exemplarCity": "دوشانبي" + }, + "Gaza": { + "exemplarCity": "غزة" + }, + "Hebron": { + "exemplarCity": "هيبرون (مدينة الخليل)" + }, + "Hong_Kong": { + "exemplarCity": "هونغ كونغ" + }, + "Hovd": { + "exemplarCity": "هوفد" + }, + "Irkutsk": { + "exemplarCity": "ايركيتسك" + }, + "Jakarta": { + "exemplarCity": "جاكرتا" + }, + "Jayapura": { + "exemplarCity": "جايابيورا" + }, + "Jerusalem": { + "exemplarCity": "القدس" + }, + "Kabul": { + "exemplarCity": "كابول" + }, + "Kamchatka": { + "exemplarCity": "كامتشاتكا" + }, + "Karachi": { + "exemplarCity": "كراتشي" + }, + "Katmandu": { + "exemplarCity": "كاتماندو" + }, + "Khandyga": { + "exemplarCity": "خانديجا" + }, + "Krasnoyarsk": { + "exemplarCity": "كراسنويارسك" + }, + "Kuala_Lumpur": { + "exemplarCity": "كوالا لامبور" + }, + "Kuching": { + "exemplarCity": "كيشينج" + }, + "Kuwait": { + "exemplarCity": "الكويت" + }, + "Macau": { + "exemplarCity": "ماكاو" + }, + "Magadan": { + "exemplarCity": "مجادن" + }, + "Makassar": { + "exemplarCity": "ماكسار" + }, + "Manila": { + "exemplarCity": "مانيلا" + }, + "Muscat": { + "exemplarCity": "مسقط" + }, + "Nicosia": { + "exemplarCity": "نيقوسيا" + }, + "Novokuznetsk": { + "exemplarCity": "نوفوكوزنتسك" + }, + "Novosibirsk": { + "exemplarCity": "نوفوسبيرسك" + }, + "Omsk": { + "exemplarCity": "أومسك" + }, + "Oral": { + "exemplarCity": "أورال" + }, + "Phnom_Penh": { + "exemplarCity": "بنوم بنه" + }, + "Pontianak": { + "exemplarCity": "بونتيانك" + }, + "Pyongyang": { + "exemplarCity": "بيونغ يانغ" + }, + "Qatar": { + "exemplarCity": "قطر" + }, + "Qyzylorda": { + "exemplarCity": "كيزيلوردا" + }, + "Rangoon": { + "exemplarCity": "رانغون" + }, + "Riyadh": { + "exemplarCity": "الرياض" + }, + "Saigon": { + "exemplarCity": "مدينة هو تشي منة" + }, + "Sakhalin": { + "exemplarCity": "سكالين" + }, + "Samarkand": { + "exemplarCity": "سمرقند" + }, + "Seoul": { + "exemplarCity": "سول" + }, + "Shanghai": { + "exemplarCity": "شنغهاي" + }, + "Singapore": { + "exemplarCity": "سنغافورة" + }, + "Srednekolymsk": { + "exemplarCity": "سريدنكوليمسك" + }, + "Taipei": { + "exemplarCity": "تايبيه" + }, + "Tashkent": { + "exemplarCity": "طشقند" + }, + "Tbilisi": { + "exemplarCity": "تبليسي" + }, + "Tehran": { + "exemplarCity": "طهران" + }, + "Thimphu": { + "exemplarCity": "تيمفو" + }, + "Tokyo": { + "exemplarCity": "طوكيو" + }, + "Tomsk": { + "exemplarCity": "تومسك" + }, + "Ulaanbaatar": { + "exemplarCity": "آلانباتار" + }, + "Urumqi": { + "exemplarCity": "أرومكي" + }, + "Ust-Nera": { + "exemplarCity": "أوست نيرا" + }, + "Vientiane": { + "exemplarCity": "فيانتيان" + }, + "Vladivostok": { + "exemplarCity": "فلاديفوستك" + }, + "Yakutsk": { + "exemplarCity": "ياكتسك" + }, + "Yekaterinburg": { + "exemplarCity": "يكاترنبيرج" + }, + "Yerevan": { + "exemplarCity": "يريفان" + } }, - "Douala": { - "exemplarCity": "دوالا" + "Indian": { + "Antananarivo": { + "exemplarCity": "أنتاناناريفو" + }, + "Chagos": { + "exemplarCity": "تشاغوس" + }, + "Christmas": { + "exemplarCity": "كريسماس" + }, + "Cocos": { + "exemplarCity": "كوكوس" + }, + "Comoro": { + "exemplarCity": "جزر القمر" + }, + "Kerguelen": { + "exemplarCity": "كيرغويلين" + }, + "Mahe": { + "exemplarCity": "ماهي" + }, + "Maldives": { + "exemplarCity": "المالديف" + }, + "Mauritius": { + "exemplarCity": "موريشيوس" + }, + "Mayotte": { + "exemplarCity": "مايوت" + }, + "Reunion": { + "exemplarCity": "ريونيون" + } }, - "El_Aaiun": { - "exemplarCity": "العيون" + "Australia": { + "Adelaide": { + "exemplarCity": "أديليد" + }, + "Brisbane": { + "exemplarCity": "برسيبان" + }, + "Broken_Hill": { + "exemplarCity": "بروكن هيل" + }, + "Currie": { + "exemplarCity": "كوري" + }, + "Darwin": { + "exemplarCity": "دارون" + }, + "Eucla": { + "exemplarCity": "أوكلا" + }, + "Hobart": { + "exemplarCity": "هوبارت" + }, + "Lindeman": { + "exemplarCity": "ليندمان" + }, + "Lord_Howe": { + "exemplarCity": "لورد هاو" + }, + "Melbourne": { + "exemplarCity": "ميلبورن" + }, + "Perth": { + "exemplarCity": "برثا" + }, + "Sydney": { + "exemplarCity": "سيدني" + } }, - "Freetown": { - "exemplarCity": "فري تاون" + "Pacific": { + "Apia": { + "exemplarCity": "أبيا" + }, + "Auckland": { + "exemplarCity": "أوكلاند" + }, + "Bougainville": { + "exemplarCity": "بوغانفيل" + }, + "Chatham": { + "exemplarCity": "تشاثام" + }, + "Easter": { + "exemplarCity": "استر" + }, + "Efate": { + "exemplarCity": "إيفات" + }, + "Enderbury": { + "exemplarCity": "اندربيرج" + }, + "Fakaofo": { + "exemplarCity": "فاكاوفو" + }, + "Fiji": { + "exemplarCity": "فيجي" + }, + "Funafuti": { + "exemplarCity": "فونافوتي" + }, + "Galapagos": { + "exemplarCity": "جلاباجوس" + }, + "Gambier": { + "exemplarCity": "جامبير" + }, + "Guadalcanal": { + "exemplarCity": "غوادالكانال" + }, + "Guam": { + "exemplarCity": "غوام" + }, + "Honolulu": { + "exemplarCity": "هونولولو" + }, + "Johnston": { + "exemplarCity": "جونستون" + }, + "Kiritimati": { + "exemplarCity": "كيريتي ماتي" + }, + "Kosrae": { + "exemplarCity": "كوسرا" + }, + "Kwajalein": { + "exemplarCity": "كواجالين" + }, + "Majuro": { + "exemplarCity": "ماجورو" + }, + "Marquesas": { + "exemplarCity": "ماركيساس" + }, + "Midway": { + "exemplarCity": "ميدواي" + }, + "Nauru": { + "exemplarCity": "ناورو" + }, + "Niue": { + "exemplarCity": "نيوي" + }, + "Norfolk": { + "exemplarCity": "نورفولك" + }, + "Noumea": { + "exemplarCity": "نوميا" + }, + "Pago_Pago": { + "exemplarCity": "باغو باغو" + }, + "Palau": { + "exemplarCity": "بالاو" + }, + "Pitcairn": { + "exemplarCity": "بيتكيرن" + }, + "Ponape": { + "exemplarCity": "باناب" + }, + "Port_Moresby": { + "exemplarCity": "بور مورسبي" + }, + "Rarotonga": { + "exemplarCity": "راروتونغا" + }, + "Saipan": { + "exemplarCity": "سايبان" + }, + "Tahiti": { + "exemplarCity": "تاهيتي" + }, + "Tarawa": { + "exemplarCity": "تاراوا" + }, + "Tongatapu": { + "exemplarCity": "تونغاتابو" + }, + "Truk": { + "exemplarCity": "ترك" + }, + "Wake": { + "exemplarCity": "واك" + }, + "Wallis": { + "exemplarCity": "واليس" + } }, - "Gaborone": { - "exemplarCity": "غابورون" + "Arctic": { + "Longyearbyen": { + "exemplarCity": "لونجيربين" + } }, - "Harare": { - "exemplarCity": "هراري" - }, - "Johannesburg": { - "exemplarCity": "جوهانسبرغ" - }, - "Juba": { - "exemplarCity": "جوبا" - }, - "Kampala": { - "exemplarCity": "كامبالا" - }, - "Khartoum": { - "exemplarCity": "الخرطوم" - }, - "Kigali": { - "exemplarCity": "كيغالي" - }, - "Kinshasa": { - "exemplarCity": "كينشاسا" + "Antarctica": { + "Casey": { + "exemplarCity": "كاساي" + }, + "Davis": { + "exemplarCity": "دافيز" + }, + "DumontDUrville": { + "exemplarCity": "دي مونت دو روفيل" + }, + "Macquarie": { + "exemplarCity": "ماكواري" + }, + "Mawson": { + "exemplarCity": "ماوسون" + }, + "McMurdo": { + "exemplarCity": "ماك موردو" + }, + "Palmer": { + "exemplarCity": "بالمير" + }, + "Rothera": { + "exemplarCity": "روثيرا" + }, + "Syowa": { + "exemplarCity": "سايووا" + }, + "Troll": { + "exemplarCity": "ترول" + }, + "Vostok": { + "exemplarCity": "فوستوك" + } }, - "Lagos": { - "exemplarCity": "لاغوس" + "Etc": { + "GMT": { + "exemplarCity": "GMT" + }, + "GMT1": { + "exemplarCity": "GMT+1" + }, + "GMT10": { + "exemplarCity": "GMT+10" + }, + "GMT11": { + "exemplarCity": "GMT+11" + }, + "GMT12": { + "exemplarCity": "GMT+12" + }, + "GMT2": { + "exemplarCity": "GMT+2" + }, + "GMT3": { + "exemplarCity": "GMT+3" + }, + "GMT4": { + "exemplarCity": "GMT+4" + }, + "GMT5": { + "exemplarCity": "GMT+5" + }, + "GMT6": { + "exemplarCity": "GMT+6" + }, + "GMT7": { + "exemplarCity": "GMT+7" + }, + "GMT8": { + "exemplarCity": "GMT+8" + }, + "GMT9": { + "exemplarCity": "GMT+9" + }, + "GMT-1": { + "exemplarCity": "GMT-1" + }, + "GMT-10": { + "exemplarCity": "GMT-10" + }, + "GMT-11": { + "exemplarCity": "GMT-11" + }, + "GMT-12": { + "exemplarCity": "GMT-12" + }, + "GMT-13": { + "exemplarCity": "GMT-13" + }, + "GMT-14": { + "exemplarCity": "GMT-14" + }, + "GMT-2": { + "exemplarCity": "GMT-2" + }, + "GMT-3": { + "exemplarCity": "GMT-3" + }, + "GMT-4": { + "exemplarCity": "GMT-4" + }, + "GMT-5": { + "exemplarCity": "GMT-5" + }, + "GMT-6": { + "exemplarCity": "GMT-6" + }, + "GMT-7": { + "exemplarCity": "GMT-7" + }, + "GMT-8": { + "exemplarCity": "GMT-8" + }, + "GMT-9": { + "exemplarCity": "GMT-9" + }, + "UTC": { + "long": { + "standard": "التوقيت العالمي المنسق" + }, + "short": { + "standard": "UTC" + }, + "exemplarCity": "UTC" + }, + "Unknown": { + "exemplarCity": "مدينة غير معروفة" + } + } + }, + "metazone": { + "Afghanistan": { + "long": { + "standard": "توقيت أفغانستان" + } }, - "Libreville": { - "exemplarCity": "ليبرفيل" + "Africa_Central": { + "long": { + "standard": "توقيت وسط أفريقيا" + } }, - "Lome": { - "exemplarCity": "لومي" + "Africa_Eastern": { + "long": { + "standard": "توقيت شرق أفريقيا" + } }, - "Luanda": { - "exemplarCity": "لواندا" + "Africa_Southern": { + "long": { + "standard": "توقيت جنوب أفريقيا" + } }, - "Lubumbashi": { - "exemplarCity": "لومبباشا" + "Africa_Western": { + "long": { + "generic": "توقيت غرب أفريقيا", + "standard": "توقيت غرب أفريقيا الرسمي", + "daylight": "توقيت غرب أفريقيا الصيفي" + } }, - "Lusaka": { - "exemplarCity": "لوساكا" + "Alaska": { + "long": { + "generic": "توقيت ألاسكا", + "standard": "التوقيت الرسمي لألاسكا", + "daylight": "توقيت ألاسكا الصيفي" + } }, - "Malabo": { - "exemplarCity": "مالابو" + "Amazon": { + "long": { + "generic": "توقيت الأمازون", + "standard": "توقيت الأمازون الرسمي", + "daylight": "توقيت الأمازون الصيفي" + } }, - "Maputo": { - "exemplarCity": "مابوتو" + "America_Central": { + "long": { + "generic": "التوقيت المركزي لأمريكا الشمالية", + "standard": "التوقيت الرسمي المركزي لأمريكا الشمالية", + "daylight": "التوقيت الصيفي المركزي لأمريكا الشمالية" + } }, - "Maseru": { - "exemplarCity": "ماسيرو" + "America_Eastern": { + "long": { + "generic": "التوقيت الشرقي لأمريكا الشمالية", + "standard": "التوقيت الرسمي الشرقي لأمريكا الشمالية", + "daylight": "التوقيت الصيفي الشرقي لأمريكا الشمالية" + } }, - "Mbabane": { - "exemplarCity": "مباباني" + "America_Mountain": { + "long": { + "generic": "التوقيت الجبلي لأمريكا الشمالية", + "standard": "التوقيت الجبلي الرسمي لأمريكا الشمالية", + "daylight": "التوقيت الجبلي الصيفي لأمريكا الشمالية" + } }, - "Mogadishu": { - "exemplarCity": "مقديشيو" + "America_Pacific": { + "long": { + "generic": "توقيت المحيط الهادي", + "standard": "توقيت المحيط الهادي الرسمي", + "daylight": "توقيت المحيط الهادي الصيفي" + } }, - "Monrovia": { - "exemplarCity": "مونروفيا" + "Anadyr": { + "long": { + "generic": "توقيت أنادير", + "standard": "توقيت أنادير الرسمي", + "daylight": "التوقيت الصيفي لأنادير" + } }, - "Nairobi": { - "exemplarCity": "نيروبي" + "Apia": { + "long": { + "generic": "توقيت آبيا", + "standard": "التوقيت الرسمي لآبيا", + "daylight": "التوقيت الصيفي لأبيا" + } }, - "Ndjamena": { - "exemplarCity": "نجامينا" + "Arabian": { + "long": { + "generic": "التوقيت العربي", + "standard": "التوقيت العربي الرسمي", + "daylight": "التوقيت العربي الصيفي" + } }, - "Niamey": { - "exemplarCity": "نيامي" + "Argentina": { + "long": { + "generic": "توقيت الأرجنتين", + "standard": "توقيت الأرجنتين الرسمي", + "daylight": "توقيت الأرجنتين الصيفي" + } }, - "Nouakchott": { - "exemplarCity": "نواكشوط" + "Argentina_Western": { + "long": { + "generic": "توقيت غرب الأرجنتين", + "standard": "توقيت غرب الأرجنتين الرسمي", + "daylight": "توقيت غرب الأرجنتين الصيفي" + } }, - "Ouagadougou": { - "exemplarCity": "واغادوغو" + "Armenia": { + "long": { + "generic": "توقيت أرمينيا", + "standard": "توقيت أرمينيا الرسمي", + "daylight": "توقيت أرمينيا الصيفي" + } }, - "Porto-Novo": { - "exemplarCity": "بورتو نوفو" + "Atlantic": { + "long": { + "generic": "توقيت الأطلسي", + "standard": "التوقيت الرسمي الأطلسي", + "daylight": "التوقيت الصيفي الأطلسي" + } }, - "Sao_Tome": { - "exemplarCity": "ساو تومي" + "Australia_Central": { + "long": { + "generic": "توقيت وسط أستراليا", + "standard": "توقيت وسط أستراليا الرسمي", + "daylight": "توقيت وسط أستراليا الصيفي" + } }, - "Tripoli": { - "exemplarCity": "طرابلس" + "Australia_CentralWestern": { + "long": { + "generic": "توقيت غرب وسط أستراليا", + "standard": "توقيت غرب وسط أستراليا الرسمي", + "daylight": "توقيت غرب وسط أستراليا الصيفي" + } }, - "Tunis": { - "exemplarCity": "تونس" + "Australia_Eastern": { + "long": { + "generic": "توقيت شرق أستراليا", + "standard": "توقيت شرق أستراليا الرسمي", + "daylight": "توقيت شرق أستراليا الصيفي" + } }, - "Windhoek": { - "exemplarCity": "ويندهوك" - } - }, - "Asia": { - "Aden": { - "exemplarCity": "عدن" + "Australia_Western": { + "long": { + "generic": "توقيت غرب أستراليا", + "standard": "توقيت غرب أستراليا الرسمي", + "daylight": "توقيت غرب أستراليا الصيفي" + } }, - "Almaty": { - "exemplarCity": "ألماتي" + "Azerbaijan": { + "long": { + "generic": "توقيت أذربيجان", + "standard": "توقيت أذربيجان الرسمي", + "daylight": "توقيت أذربيجان الصيفي" + } }, - "Amman": { - "exemplarCity": "عمان" + "Azores": { + "long": { + "generic": "توقيت أزورس", + "standard": "توقيت أزورس الرسمي", + "daylight": "توقيت أزورس الصيفي" + } }, - "Anadyr": { - "exemplarCity": "أندير" + "Bangladesh": { + "long": { + "generic": "توقيت بنجلاديش", + "standard": "توقيت بنجلاديش الرسمي", + "daylight": "توقيت بنجلاديش الصيفي" + } }, - "Aqtau": { - "exemplarCity": "أكتاو" + "Bhutan": { + "long": { + "standard": "توقيت بوتان" + } }, - "Aqtobe": { - "exemplarCity": "أكتوب" + "Bolivia": { + "long": { + "standard": "توقيت بوليفيا" + } }, - "Ashgabat": { - "exemplarCity": "عشق آباد" + "Brasilia": { + "long": { + "generic": "توقيت برازيليا", + "standard": "توقيت برازيليا الرسمي", + "daylight": "توقيت برازيليا الصيفي" + } }, - "Baghdad": { - "exemplarCity": "بغداد" + "Brunei": { + "long": { + "standard": "توقيت بروناي" + } }, - "Bahrain": { - "exemplarCity": "البحرين" + "Cape_Verde": { + "long": { + "generic": "توقيت الرأس الأخضر", + "standard": "توقيت الرأس الأخضر الرسمي", + "daylight": "توقيت الرأس الأخضر الصيفي" + } }, - "Baku": { - "exemplarCity": "باكو" + "Chamorro": { + "long": { + "standard": "توقيت تشامورو" + } }, - "Bangkok": { - "exemplarCity": "بانكوك" + "Chatham": { + "long": { + "generic": "توقيت تشاتام", + "standard": "توقيت تشاتام الرسمي", + "daylight": "توقيت تشاتام الصيفي" + } }, - "Barnaul": { - "exemplarCity": "بارناول" + "Chile": { + "long": { + "generic": "توقيت شيلي", + "standard": "توقيت شيلي الرسمي", + "daylight": "توقيت شيلي الصيفي" + } }, - "Beirut": { - "exemplarCity": "بيروت" + "China": { + "long": { + "generic": "توقيت الصين", + "standard": "توقيت الصين الرسمي", + "daylight": "توقيت الصين الصيفي" + } }, - "Bishkek": { - "exemplarCity": "بشكيك" + "Choibalsan": { + "long": { + "generic": "توقيت شويبالسان", + "standard": "توقيت شويبالسان الرسمي", + "daylight": "التوقيت الصيفي لشويبالسان" + } }, - "Brunei": { - "exemplarCity": "بروناي" + "Christmas": { + "long": { + "standard": "توقيت جزر الكريسماس" + } }, - "Calcutta": { - "exemplarCity": "كالكتا" + "Cocos": { + "long": { + "standard": "توقيت جزر كوكوس" + } }, - "Chita": { - "exemplarCity": "تشيتا" + "Colombia": { + "long": { + "generic": "توقيت كولومبيا", + "standard": "توقيت كولومبيا الرسمي", + "daylight": "توقيت كولومبيا الصيفي" + } }, - "Choibalsan": { - "exemplarCity": "تشوبالسان" + "Cook": { + "long": { + "generic": "توقيت جزر كووك", + "standard": "توقيت جزر كووك الرسمي", + "daylight": "توقيت جزر كووك الصيفي" + } }, - "Colombo": { - "exemplarCity": "كولومبو" + "Cuba": { + "long": { + "generic": "توقيت كوبا", + "standard": "توقيت كوبا الرسمي", + "daylight": "توقيت كوبا الصيفي" + } }, - "Damascus": { - "exemplarCity": "دمشق" + "Davis": { + "long": { + "standard": "توقيت دافيز" + } }, - "Dhaka": { - "exemplarCity": "دكا" + "DumontDUrville": { + "long": { + "standard": "توقيت دي مونت دو روفيل" + } }, - "Dili": { - "exemplarCity": "ديلي" + "East_Timor": { + "long": { + "standard": "توقيت تيمور الشرقية" + } }, - "Dubai": { - "exemplarCity": "دبي" + "Easter": { + "long": { + "generic": "توقيت جزيرة استر", + "standard": "توقيت جزيرة استر الرسمي", + "daylight": "توقيت جزيرة استر الصيفي" + } }, - "Dushanbe": { - "exemplarCity": "دوشانبي" + "Ecuador": { + "long": { + "standard": "توقيت الإكوادور" + } }, - "Gaza": { - "exemplarCity": "غزة" + "Europe_Central": { + "long": { + "generic": "توقيت وسط أوروبا", + "standard": "توقيت وسط أوروبا الرسمي", + "daylight": "توقيت وسط أوروبا الصيفي" + } }, - "Hebron": { - "exemplarCity": "هيبرون (مدينة الخليل)" + "Europe_Eastern": { + "long": { + "generic": "توقيت شرق أوروبا", + "standard": "توقيت شرق أوروبا الرسمي", + "daylight": "توقيت شرق أوروبا الصيفي" + } }, - "Hong_Kong": { - "exemplarCity": "هونغ كونغ" + "Europe_Further_Eastern": { + "long": { + "standard": "التوقيت الأوروبي (أكثر شرقًا)" + } }, - "Hovd": { - "exemplarCity": "هوفد" + "Europe_Western": { + "long": { + "generic": "توقيت غرب أوروبا", + "standard": "توقيت غرب أوروبا الرسمي", + "daylight": "توقيت غرب أوروبا الصيفي" + } }, - "Irkutsk": { - "exemplarCity": "ايركيتسك" + "Falkland": { + "long": { + "generic": "توقيت جزر فوكلاند", + "standard": "توقيت جزر فوكلاند الرسمي", + "daylight": "توقيت جزر فوكلاند الصيفي" + } }, - "Jakarta": { - "exemplarCity": "جاكرتا" + "Fiji": { + "long": { + "generic": "توقيت فيجي", + "standard": "توقيت فيجي الرسمي", + "daylight": "توقيت فيجي الصيفي" + } }, - "Jayapura": { - "exemplarCity": "جايابيورا" + "French_Guiana": { + "long": { + "standard": "توقيت غايانا الفرنسية" + } }, - "Jerusalem": { - "exemplarCity": "القدس" + "French_Southern": { + "long": { + "standard": "توقيت المقاطعات الفرنسية الجنوبية والأنتارتيكية" + } }, - "Kabul": { - "exemplarCity": "كابول" + "Galapagos": { + "long": { + "standard": "توقيت غلاباغوس" + } }, - "Kamchatka": { - "exemplarCity": "كامتشاتكا" + "Gambier": { + "long": { + "standard": "توقيت جامبير" + } }, - "Karachi": { - "exemplarCity": "كراتشي" + "Georgia": { + "long": { + "generic": "توقيت جورجيا", + "standard": "توقيت جورجيا الرسمي", + "daylight": "توقيت جورجيا الصيفي" + } }, - "Katmandu": { - "exemplarCity": "كاتماندو" + "Gilbert_Islands": { + "long": { + "standard": "توقيت جزر جيلبرت" + } }, - "Khandyga": { - "exemplarCity": "خانديجا" + "GMT": { + "long": { + "standard": "توقيت غرينتش" + } }, - "Krasnoyarsk": { - "exemplarCity": "كراسنويارسك" + "Greenland_Eastern": { + "long": { + "generic": "توقيت شرق غرينلاند", + "standard": "توقيت شرق غرينلاند الرسمي", + "daylight": "توقيت شرق غرينلاند الصيفي" + } }, - "Kuala_Lumpur": { - "exemplarCity": "كوالا لامبور" + "Greenland_Western": { + "long": { + "generic": "توقيت غرب غرينلاند", + "standard": "توقيت غرب غرينلاند الرسمي", + "daylight": "توقيت غرب غرينلاند الصيفي" + } }, - "Kuching": { - "exemplarCity": "كيشينج" + "Guam": { + "long": { + "standard": "توقيت غوام" + } }, - "Kuwait": { - "exemplarCity": "الكويت" + "Gulf": { + "long": { + "standard": "توقيت الخليج" + } }, - "Macau": { - "exemplarCity": "ماكاو" + "Guyana": { + "long": { + "standard": "توقيت غيانا" + } }, - "Magadan": { - "exemplarCity": "مجادن" + "Hawaii_Aleutian": { + "long": { + "generic": "توقيت هاواي ألوتيان", + "standard": "توقيت هاواي ألوتيان الرسمي", + "daylight": "توقيت هاواي ألوتيان الصيفي" + } }, - "Makassar": { - "exemplarCity": "ماكسار" + "Hong_Kong": { + "long": { + "generic": "توقيت هونغ كونغ", + "standard": "توقيت هونغ كونغ الرسمي", + "daylight": "توقيت هونغ كونغ الصيفي" + } }, - "Manila": { - "exemplarCity": "مانيلا" + "Hovd": { + "long": { + "generic": "توقيت هوفد", + "standard": "توقيت هوفد الرسمي", + "daylight": "توقيت هوفد الصيفي" + } }, - "Muscat": { - "exemplarCity": "مسقط" + "India": { + "long": { + "standard": "توقيت الهند" + } }, - "Nicosia": { - "exemplarCity": "نيقوسيا" + "Indian_Ocean": { + "long": { + "standard": "توقيت المحيط الهندي" + } }, - "Novokuznetsk": { - "exemplarCity": "نوفوكوزنتسك" + "Indochina": { + "long": { + "standard": "توقيت الهند الصينية" + } }, - "Novosibirsk": { - "exemplarCity": "نوفوسبيرسك" + "Indonesia_Central": { + "long": { + "standard": "توقيت وسط إندونيسيا" + } }, - "Omsk": { - "exemplarCity": "أومسك" + "Indonesia_Eastern": { + "long": { + "standard": "توقيت شرق إندونيسيا" + } }, - "Oral": { - "exemplarCity": "أورال" + "Indonesia_Western": { + "long": { + "standard": "توقيت غرب إندونيسيا" + } }, - "Phnom_Penh": { - "exemplarCity": "بنوم بنه" + "Iran": { + "long": { + "generic": "توقيت إيران", + "standard": "توقيت إيران الرسمي", + "daylight": "توقيت إيران الصيفي" + } }, - "Pontianak": { - "exemplarCity": "بونتيانك" + "Irkutsk": { + "long": { + "generic": "توقيت إركوتسك", + "standard": "توقيت إركوتسك الرسمي", + "daylight": "توقيت إركوتسك الصيفي" + } }, - "Pyongyang": { - "exemplarCity": "بيونغ يانغ" + "Israel": { + "long": { + "generic": "توقيت إسرائيل", + "standard": "توقيت إسرائيل الرسمي", + "daylight": "توقيت إسرائيل الصيفي" + } }, - "Qatar": { - "exemplarCity": "قطر" + "Japan": { + "long": { + "generic": "توقيت اليابان", + "standard": "توقيت اليابان الرسمي", + "daylight": "توقيت اليابان الصيفي" + } }, - "Qyzylorda": { - "exemplarCity": "كيزيلوردا" + "Kamchatka": { + "long": { + "generic": "توقيت كامشاتكا", + "standard": "توقيت بيتروبافلوفسك-كامتشاتسكي", + "daylight": "توقيت بيتروبافلوفسك-كامتشاتسكي الصيفي" + } }, - "Rangoon": { - "exemplarCity": "رانغون" + "Kazakhstan_Eastern": { + "long": { + "standard": "توقيت شرق كازاخستان" + } }, - "Riyadh": { - "exemplarCity": "الرياض" + "Kazakhstan_Western": { + "long": { + "standard": "توقيت غرب كازاخستان" + } }, - "Saigon": { - "exemplarCity": "مدينة هو تشي منة" + "Korea": { + "long": { + "generic": "توقيت كوريا", + "standard": "توقيت كوريا الرسمي", + "daylight": "توقيت كوريا الصيفي" + } }, - "Sakhalin": { - "exemplarCity": "سكالين" + "Kosrae": { + "long": { + "standard": "توقيت كوسرا" + } }, - "Samarkand": { - "exemplarCity": "سمرقند" + "Krasnoyarsk": { + "long": { + "generic": "توقيت كراسنويارسك", + "standard": "توقيت كراسنويارسك الرسمي", + "daylight": "التوقيت الصيفي لكراسنويارسك" + } }, - "Seoul": { - "exemplarCity": "سول" + "Kyrgystan": { + "long": { + "standard": "توقيت قرغيزستان" + } }, - "Shanghai": { - "exemplarCity": "شنغهاي" - }, - "Singapore": { - "exemplarCity": "سنغافورة" - }, - "Srednekolymsk": { - "exemplarCity": "سريدنكوليمسك" - }, - "Taipei": { - "exemplarCity": "تايبيه" - }, - "Tashkent": { - "exemplarCity": "طشقند" - }, - "Tbilisi": { - "exemplarCity": "تبليسي" - }, - "Tehran": { - "exemplarCity": "طهران" - }, - "Thimphu": { - "exemplarCity": "تيمفو" - }, - "Tokyo": { - "exemplarCity": "طوكيو" - }, - "Tomsk": { - "exemplarCity": "تومسك" - }, - "Ulaanbaatar": { - "exemplarCity": "آلانباتار" - }, - "Urumqi": { - "exemplarCity": "أرومكي" - }, - "Ust-Nera": { - "exemplarCity": "أوست نيرا" - }, - "Vientiane": { - "exemplarCity": "فيانتيان" - }, - "Vladivostok": { - "exemplarCity": "فلاديفوستك" - }, - "Yakutsk": { - "exemplarCity": "ياكتسك" - }, - "Yekaterinburg": { - "exemplarCity": "يكاترنبيرج" - }, - "Yerevan": { - "exemplarCity": "يريفان" - } - }, - "Indian": { - "Antananarivo": { - "exemplarCity": "أنتاناناريفو" - }, - "Chagos": { - "exemplarCity": "تشاغوس" - }, - "Christmas": { - "exemplarCity": "كريسماس" - }, - "Cocos": { - "exemplarCity": "كوكوس" - }, - "Comoro": { - "exemplarCity": "جزر القمر" - }, - "Kerguelen": { - "exemplarCity": "كيرغويلين" - }, - "Mahe": { - "exemplarCity": "ماهي" - }, - "Maldives": { - "exemplarCity": "المالديف" - }, - "Mauritius": { - "exemplarCity": "موريشيوس" - }, - "Mayotte": { - "exemplarCity": "مايوت" - }, - "Reunion": { - "exemplarCity": "ريونيون" - } - }, - "Australia": { - "Adelaide": { - "exemplarCity": "أديليد" - }, - "Brisbane": { - "exemplarCity": "برسيبان" - }, - "Broken_Hill": { - "exemplarCity": "بروكن هيل" - }, - "Currie": { - "exemplarCity": "كوري" - }, - "Darwin": { - "exemplarCity": "دارون" - }, - "Eucla": { - "exemplarCity": "أوكلا" - }, - "Hobart": { - "exemplarCity": "هوبارت" - }, - "Lindeman": { - "exemplarCity": "ليندمان" + "Line_Islands": { + "long": { + "standard": "توقيت جزر لاين" + } }, "Lord_Howe": { - "exemplarCity": "لورد هاو" - }, - "Melbourne": { - "exemplarCity": "ميلبورن" - }, - "Perth": { - "exemplarCity": "برثا" - }, - "Sydney": { - "exemplarCity": "سيدني" - } - }, - "Pacific": { - "Apia": { - "exemplarCity": "أبيا" - }, - "Auckland": { - "exemplarCity": "أوكلاند" - }, - "Bougainville": { - "exemplarCity": "بوغانفيل" - }, - "Chatham": { - "exemplarCity": "تشاثام" - }, - "Easter": { - "exemplarCity": "استر" - }, - "Efate": { - "exemplarCity": "إيفات" - }, - "Enderbury": { - "exemplarCity": "اندربيرج" - }, - "Fakaofo": { - "exemplarCity": "فاكاوفو" - }, - "Fiji": { - "exemplarCity": "فيجي" - }, - "Funafuti": { - "exemplarCity": "فونافوتي" - }, - "Galapagos": { - "exemplarCity": "جلاباجوس" - }, - "Gambier": { - "exemplarCity": "جامبير" - }, - "Guadalcanal": { - "exemplarCity": "غوادالكانال" - }, - "Guam": { - "exemplarCity": "غوام" - }, - "Honolulu": { - "exemplarCity": "هونولولو" - }, - "Johnston": { - "exemplarCity": "جونستون" - }, - "Kiritimati": { - "exemplarCity": "كيريتي ماتي" - }, - "Kosrae": { - "exemplarCity": "كوسرا" - }, - "Kwajalein": { - "exemplarCity": "كواجالين" - }, - "Majuro": { - "exemplarCity": "ماجورو" - }, - "Marquesas": { - "exemplarCity": "ماركيساس" - }, - "Midway": { - "exemplarCity": "ميدواي" - }, - "Nauru": { - "exemplarCity": "ناورو" - }, - "Niue": { - "exemplarCity": "نيوي" - }, - "Norfolk": { - "exemplarCity": "نورفولك" - }, - "Noumea": { - "exemplarCity": "نوميا" - }, - "Pago_Pago": { - "exemplarCity": "باغو باغو" - }, - "Palau": { - "exemplarCity": "بالاو" - }, - "Pitcairn": { - "exemplarCity": "بيتكيرن" - }, - "Ponape": { - "exemplarCity": "باناب" - }, - "Port_Moresby": { - "exemplarCity": "بور مورسبي" - }, - "Rarotonga": { - "exemplarCity": "راروتونغا" - }, - "Saipan": { - "exemplarCity": "سايبان" - }, - "Tahiti": { - "exemplarCity": "تاهيتي" - }, - "Tarawa": { - "exemplarCity": "تاراوا" - }, - "Tongatapu": { - "exemplarCity": "تونغاتابو" - }, - "Truk": { - "exemplarCity": "ترك" - }, - "Wake": { - "exemplarCity": "واك" - }, - "Wallis": { - "exemplarCity": "واليس" - } - }, - "Arctic": { - "Longyearbyen": { - "exemplarCity": "لونجيربين" - } - }, - "Antarctica": { - "Casey": { - "exemplarCity": "كاساي" - }, - "Davis": { - "exemplarCity": "دافيز" - }, - "DumontDUrville": { - "exemplarCity": "دي مونت دو روفيل" - }, - "Macquarie": { - "exemplarCity": "ماكواري" - }, - "Mawson": { - "exemplarCity": "ماوسون" - }, - "McMurdo": { - "exemplarCity": "ماك موردو" - }, - "Palmer": { - "exemplarCity": "بالمير" - }, - "Rothera": { - "exemplarCity": "روثيرا" - }, - "Syowa": { - "exemplarCity": "سايووا" - }, - "Troll": { - "exemplarCity": "ترول" - }, - "Vostok": { - "exemplarCity": "فوستوك" - } - }, - "Etc": { - "GMT": { - "exemplarCity": "GMT" - }, - "GMT1": { - "exemplarCity": "GMT+1" - }, - "GMT10": { - "exemplarCity": "GMT+10" - }, - "GMT11": { - "exemplarCity": "GMT+11" - }, - "GMT12": { - "exemplarCity": "GMT+12" - }, - "GMT2": { - "exemplarCity": "GMT+2" - }, - "GMT3": { - "exemplarCity": "GMT+3" - }, - "GMT4": { - "exemplarCity": "GMT+4" - }, - "GMT5": { - "exemplarCity": "GMT+5" - }, - "GMT6": { - "exemplarCity": "GMT+6" - }, - "GMT7": { - "exemplarCity": "GMT+7" - }, - "GMT8": { - "exemplarCity": "GMT+8" - }, - "GMT9": { - "exemplarCity": "GMT+9" - }, - "GMT-1": { - "exemplarCity": "GMT-1" - }, - "GMT-10": { - "exemplarCity": "GMT-10" - }, - "GMT-11": { - "exemplarCity": "GMT-11" - }, - "GMT-12": { - "exemplarCity": "GMT-12" - }, - "GMT-13": { - "exemplarCity": "GMT-13" - }, - "GMT-14": { - "exemplarCity": "GMT-14" - }, - "GMT-2": { - "exemplarCity": "GMT-2" - }, - "GMT-3": { - "exemplarCity": "GMT-3" - }, - "GMT-4": { - "exemplarCity": "GMT-4" - }, - "GMT-5": { - "exemplarCity": "GMT-5" - }, - "GMT-6": { - "exemplarCity": "GMT-6" - }, - "GMT-7": { - "exemplarCity": "GMT-7" - }, - "GMT-8": { - "exemplarCity": "GMT-8" - }, - "GMT-9": { - "exemplarCity": "GMT-9" - }, - "UTC": { "long": { - "standard": "التوقيت العالمي المنسق" - }, - "short": { - "standard": "UTC" - }, - "exemplarCity": "UTC" - }, - "Unknown": { - "exemplarCity": "مدينة غير معروفة" - } - } - }, - "metazone": { - "Afghanistan": { - "long": { - "standard": "توقيت أفغانستان" - } - }, - "Africa_Central": { - "long": { - "standard": "توقيت وسط أفريقيا" - } - }, - "Africa_Eastern": { - "long": { - "standard": "توقيت شرق أفريقيا" - } - }, - "Africa_Southern": { - "long": { - "standard": "توقيت جنوب أفريقيا" - } - }, - "Africa_Western": { - "long": { - "generic": "توقيت غرب أفريقيا", - "standard": "توقيت غرب أفريقيا الرسمي", - "daylight": "توقيت غرب أفريقيا الصيفي" - } - }, - "Alaska": { - "long": { - "generic": "توقيت ألاسكا", - "standard": "التوقيت الرسمي لألاسكا", - "daylight": "توقيت ألاسكا الصيفي" - } - }, - "Amazon": { - "long": { - "generic": "توقيت الأمازون", - "standard": "توقيت الأمازون الرسمي", - "daylight": "توقيت الأمازون الصيفي" - } - }, - "America_Central": { - "long": { - "generic": "التوقيت المركزي لأمريكا الشمالية", - "standard": "التوقيت الرسمي المركزي لأمريكا الشمالية", - "daylight": "التوقيت الصيفي المركزي لأمريكا الشمالية" - } - }, - "America_Eastern": { - "long": { - "generic": "التوقيت الشرقي لأمريكا الشمالية", - "standard": "التوقيت الرسمي الشرقي لأمريكا الشمالية", - "daylight": "التوقيت الصيفي الشرقي لأمريكا الشمالية" - } - }, - "America_Mountain": { - "long": { - "generic": "التوقيت الجبلي لأمريكا الشمالية", - "standard": "التوقيت الجبلي الرسمي لأمريكا الشمالية", - "daylight": "التوقيت الجبلي الصيفي لأمريكا الشمالية" - } - }, - "America_Pacific": { - "long": { - "generic": "توقيت المحيط الهادي", - "standard": "توقيت المحيط الهادي الرسمي", - "daylight": "توقيت المحيط الهادي الصيفي" - } - }, - "Anadyr": { - "long": { - "generic": "توقيت أنادير", - "standard": "توقيت أنادير الرسمي", - "daylight": "التوقيت الصيفي لأنادير" - } - }, - "Apia": { - "long": { - "generic": "توقيت آبيا", - "standard": "التوقيت الرسمي لآبيا", - "daylight": "التوقيت الصيفي لأبيا" - } - }, - "Arabian": { - "long": { - "generic": "التوقيت العربي", - "standard": "التوقيت العربي الرسمي", - "daylight": "التوقيت العربي الصيفي" - } - }, - "Argentina": { - "long": { - "generic": "توقيت الأرجنتين", - "standard": "توقيت الأرجنتين الرسمي", - "daylight": "توقيت الأرجنتين الصيفي" - } - }, - "Argentina_Western": { - "long": { - "generic": "توقيت غرب الأرجنتين", - "standard": "توقيت غرب الأرجنتين الرسمي", - "daylight": "توقيت غرب الأرجنتين الصيفي" - } - }, - "Armenia": { - "long": { - "generic": "توقيت أرمينيا", - "standard": "توقيت أرمينيا الرسمي", - "daylight": "توقيت أرمينيا الصيفي" - } - }, - "Atlantic": { - "long": { - "generic": "توقيت الأطلسي", - "standard": "التوقيت الرسمي الأطلسي", - "daylight": "التوقيت الصيفي الأطلسي" - } - }, - "Australia_Central": { - "long": { - "generic": "توقيت وسط أستراليا", - "standard": "توقيت وسط أستراليا الرسمي", - "daylight": "توقيت وسط أستراليا الصيفي" - } - }, - "Australia_CentralWestern": { - "long": { - "generic": "توقيت غرب وسط أستراليا", - "standard": "توقيت غرب وسط أستراليا الرسمي", - "daylight": "توقيت غرب وسط أستراليا الصيفي" - } - }, - "Australia_Eastern": { - "long": { - "generic": "توقيت شرق أستراليا", - "standard": "توقيت شرق أستراليا الرسمي", - "daylight": "توقيت شرق أستراليا الصيفي" - } - }, - "Australia_Western": { - "long": { - "generic": "توقيت غرب أستراليا", - "standard": "توقيت غرب أستراليا الرسمي", - "daylight": "توقيت غرب أستراليا الصيفي" - } - }, - "Azerbaijan": { - "long": { - "generic": "توقيت أذربيجان", - "standard": "توقيت أذربيجان الرسمي", - "daylight": "توقيت أذربيجان الصيفي" - } - }, - "Azores": { - "long": { - "generic": "توقيت أزورس", - "standard": "توقيت أزورس الرسمي", - "daylight": "توقيت أزورس الصيفي" - } - }, - "Bangladesh": { - "long": { - "generic": "توقيت بنجلاديش", - "standard": "توقيت بنجلاديش الرسمي", - "daylight": "توقيت بنجلاديش الصيفي" - } - }, - "Bhutan": { - "long": { - "standard": "توقيت بوتان" - } - }, - "Bolivia": { - "long": { - "standard": "توقيت بوليفيا" - } - }, - "Brasilia": { - "long": { - "generic": "توقيت برازيليا", - "standard": "توقيت برازيليا الرسمي", - "daylight": "توقيت برازيليا الصيفي" - } - }, - "Brunei": { - "long": { - "standard": "توقيت بروناي" - } - }, - "Cape_Verde": { - "long": { - "generic": "توقيت الرأس الأخضر", - "standard": "توقيت الرأس الأخضر الرسمي", - "daylight": "توقيت الرأس الأخضر الصيفي" - } - }, - "Chamorro": { - "long": { - "standard": "توقيت تشامورو" - } - }, - "Chatham": { - "long": { - "generic": "توقيت تشاتام", - "standard": "توقيت تشاتام الرسمي", - "daylight": "توقيت تشاتام الصيفي" - } - }, - "Chile": { - "long": { - "generic": "توقيت شيلي", - "standard": "توقيت شيلي الرسمي", - "daylight": "توقيت شيلي الصيفي" - } - }, - "China": { - "long": { - "generic": "توقيت الصين", - "standard": "توقيت الصين الرسمي", - "daylight": "توقيت الصين الصيفي" - } - }, - "Choibalsan": { - "long": { - "generic": "توقيت شويبالسان", - "standard": "توقيت شويبالسان الرسمي", - "daylight": "التوقيت الصيفي لشويبالسان" - } - }, - "Christmas": { - "long": { - "standard": "توقيت جزر الكريسماس" - } - }, - "Cocos": { - "long": { - "standard": "توقيت جزر كوكوس" - } - }, - "Colombia": { - "long": { - "generic": "توقيت كولومبيا", - "standard": "توقيت كولومبيا الرسمي", - "daylight": "توقيت كولومبيا الصيفي" - } - }, - "Cook": { - "long": { - "generic": "توقيت جزر كووك", - "standard": "توقيت جزر كووك الرسمي", - "daylight": "توقيت جزر كووك الصيفي" - } - }, - "Cuba": { - "long": { - "generic": "توقيت كوبا", - "standard": "توقيت كوبا الرسمي", - "daylight": "توقيت كوبا الصيفي" - } - }, - "Davis": { - "long": { - "standard": "توقيت دافيز" - } - }, - "DumontDUrville": { - "long": { - "standard": "توقيت دي مونت دو روفيل" - } - }, - "East_Timor": { - "long": { - "standard": "توقيت تيمور الشرقية" - } - }, - "Easter": { - "long": { - "generic": "توقيت جزيرة استر", - "standard": "توقيت جزيرة استر الرسمي", - "daylight": "توقيت جزيرة استر الصيفي" - } - }, - "Ecuador": { - "long": { - "standard": "توقيت الإكوادور" - } - }, - "Europe_Central": { - "long": { - "generic": "توقيت وسط أوروبا", - "standard": "توقيت وسط أوروبا الرسمي", - "daylight": "توقيت وسط أوروبا الصيفي" - } - }, - "Europe_Eastern": { - "long": { - "generic": "توقيت شرق أوروبا", - "standard": "توقيت شرق أوروبا الرسمي", - "daylight": "توقيت شرق أوروبا الصيفي" - } - }, - "Europe_Further_Eastern": { - "long": { - "standard": "التوقيت الأوروبي (أكثر شرقًا)" - } - }, - "Europe_Western": { - "long": { - "generic": "توقيت غرب أوروبا", - "standard": "توقيت غرب أوروبا الرسمي", - "daylight": "توقيت غرب أوروبا الصيفي" - } - }, - "Falkland": { - "long": { - "generic": "توقيت جزر فوكلاند", - "standard": "توقيت جزر فوكلاند الرسمي", - "daylight": "توقيت جزر فوكلاند الصيفي" - } - }, - "Fiji": { - "long": { - "generic": "توقيت فيجي", - "standard": "توقيت فيجي الرسمي", - "daylight": "توقيت فيجي الصيفي" - } - }, - "French_Guiana": { - "long": { - "standard": "توقيت غايانا الفرنسية" - } - }, - "French_Southern": { - "long": { - "standard": "توقيت المقاطعات الفرنسية الجنوبية والأنتارتيكية" - } - }, - "Galapagos": { - "long": { - "standard": "توقيت غلاباغوس" - } - }, - "Gambier": { - "long": { - "standard": "توقيت جامبير" - } - }, - "Georgia": { - "long": { - "generic": "توقيت جورجيا", - "standard": "توقيت جورجيا الرسمي", - "daylight": "توقيت جورجيا الصيفي" - } - }, - "Gilbert_Islands": { - "long": { - "standard": "توقيت جزر جيلبرت" - } - }, - "GMT": { - "long": { - "standard": "توقيت غرينتش" - } - }, - "Greenland_Eastern": { - "long": { - "generic": "توقيت شرق غرينلاند", - "standard": "توقيت شرق غرينلاند الرسمي", - "daylight": "توقيت شرق غرينلاند الصيفي" - } - }, - "Greenland_Western": { - "long": { - "generic": "توقيت غرب غرينلاند", - "standard": "توقيت غرب غرينلاند الرسمي", - "daylight": "توقيت غرب غرينلاند الصيفي" - } - }, - "Guam": { - "long": { - "standard": "توقيت غوام" - } - }, - "Gulf": { - "long": { - "standard": "توقيت الخليج" - } - }, - "Guyana": { - "long": { - "standard": "توقيت غيانا" - } - }, - "Hawaii_Aleutian": { - "long": { - "generic": "توقيت هاواي ألوتيان", - "standard": "توقيت هاواي ألوتيان الرسمي", - "daylight": "توقيت هاواي ألوتيان الصيفي" - } - }, - "Hong_Kong": { - "long": { - "generic": "توقيت هونغ كونغ", - "standard": "توقيت هونغ كونغ الرسمي", - "daylight": "توقيت هونغ كونغ الصيفي" - } - }, - "Hovd": { - "long": { - "generic": "توقيت هوفد", - "standard": "توقيت هوفد الرسمي", - "daylight": "توقيت هوفد الصيفي" - } - }, - "India": { - "long": { - "standard": "توقيت الهند" - } - }, - "Indian_Ocean": { - "long": { - "standard": "توقيت المحيط الهندي" - } - }, - "Indochina": { - "long": { - "standard": "توقيت الهند الصينية" - } - }, - "Indonesia_Central": { - "long": { - "standard": "توقيت وسط إندونيسيا" - } - }, - "Indonesia_Eastern": { - "long": { - "standard": "توقيت شرق إندونيسيا" - } - }, - "Indonesia_Western": { - "long": { - "standard": "توقيت غرب إندونيسيا" - } - }, - "Iran": { - "long": { - "generic": "توقيت إيران", - "standard": "توقيت إيران الرسمي", - "daylight": "توقيت إيران الصيفي" - } - }, - "Irkutsk": { - "long": { - "generic": "توقيت إركوتسك", - "standard": "توقيت إركوتسك الرسمي", - "daylight": "توقيت إركوتسك الصيفي" - } - }, - "Israel": { - "long": { - "generic": "توقيت إسرائيل", - "standard": "توقيت إسرائيل الرسمي", - "daylight": "توقيت إسرائيل الصيفي" - } - }, - "Japan": { - "long": { - "generic": "توقيت اليابان", - "standard": "توقيت اليابان الرسمي", - "daylight": "توقيت اليابان الصيفي" - } - }, - "Kamchatka": { - "long": { - "generic": "توقيت كامشاتكا", - "standard": "توقيت بيتروبافلوفسك-كامتشاتسكي", - "daylight": "توقيت بيتروبافلوفسك-كامتشاتسكي الصيفي" - } - }, - "Kazakhstan_Eastern": { - "long": { - "standard": "توقيت شرق كازاخستان" - } - }, - "Kazakhstan_Western": { - "long": { - "standard": "توقيت غرب كازاخستان" - } - }, - "Korea": { - "long": { - "generic": "توقيت كوريا", - "standard": "توقيت كوريا الرسمي", - "daylight": "توقيت كوريا الصيفي" - } - }, - "Kosrae": { - "long": { - "standard": "توقيت كوسرا" - } - }, - "Krasnoyarsk": { - "long": { - "generic": "توقيت كراسنويارسك", - "standard": "توقيت كراسنويارسك الرسمي", - "daylight": "التوقيت الصيفي لكراسنويارسك" - } - }, - "Kyrgystan": { - "long": { - "standard": "توقيت قرغيزستان" - } - }, - "Line_Islands": { - "long": { - "standard": "توقيت جزر لاين" - } - }, - "Lord_Howe": { - "long": { - "generic": "توقيت لورد هاو", - "standard": "توقيت لورد هاو الرسمي", - "daylight": "التوقيت الصيفي للورد هاو" - } - }, - "Macquarie": { - "long": { - "standard": "توقيت ماكواري" - } - }, - "Magadan": { - "long": { - "generic": "توقيت ماغادان", - "standard": "توقيت ماغادان الرسمي", - "daylight": "توقيت ماغادان الصيفي" - } - }, - "Malaysia": { - "long": { - "standard": "توقيت ماليزيا" - } - }, - "Maldives": { - "long": { - "standard": "توقيت الـمالديف" - } - }, - "Marquesas": { - "long": { - "standard": "توقيت ماركيساس" - } - }, - "Marshall_Islands": { - "long": { - "standard": "توقيت جزر مارشال" - } - }, - "Mauritius": { - "long": { - "generic": "توقيت موريشيوس", - "standard": "توقيت موريشيوس الرسمي", - "daylight": "توقيت موريشيوس الصيفي" - } - }, - "Mawson": { - "long": { - "standard": "توقيت ماوسون" - } - }, - "Mexico_Northwest": { - "long": { - "generic": "توقيت شمال غرب المكسيك", - "standard": "التوقيت الرسمي لشمال غرب المكسيك", - "daylight": "التوقيت الصيفي لشمال غرب المكسيك" - } - }, - "Mexico_Pacific": { - "long": { - "generic": "توقيت المحيط الهادي للمكسيك", - "standard": "توقيت المحيط الهادي الرسمي للمكسيك", - "daylight": "توقيت المحيط الهادي الصيفي للمكسيك" - } - }, - "Mongolia": { - "long": { - "generic": "توقيت أولان باتور", - "standard": "توقيت أولان باتور الرسمي", - "daylight": "توقيت أولان باتور الصيفي" - } - }, - "Moscow": { - "long": { - "generic": "توقيت موسكو", - "standard": "توقيت موسكو الرسمي", - "daylight": "توقيت موسكو الصيفي" - } - }, - "Myanmar": { - "long": { - "standard": "توقيت ميانمار" - } - }, - "Nauru": { - "long": { - "standard": "توقيت ناورو" - } - }, - "Nepal": { - "long": { - "standard": "توقيت نيبال" - } - }, - "New_Caledonia": { - "long": { - "generic": "توقيت كاليدونيا الجديدة", - "standard": "توقيت كاليدونيا الجديدة الرسمي", - "daylight": "توقيت كاليدونيا الجديدة الصيفي" - } - }, - "New_Zealand": { - "long": { - "generic": "توقيت نيوزيلندا", - "standard": "توقيت نيوزيلندا الرسمي", - "daylight": "توقيت نيوزيلندا الصيفي" - } - }, - "Newfoundland": { - "long": { - "generic": "توقيت نيوفاوندلاند", - "standard": "توقيت نيوفاوندلاند الرسمي", - "daylight": "توقيت نيوفاوندلاند الصيفي" - } - }, - "Niue": { - "long": { - "standard": "توقيت نيوي" - } - }, - "Norfolk": { - "long": { - "standard": "توقيت جزيرة نورفولك" - } - }, - "Noronha": { - "long": { - "generic": "توقيت فيرناندو دي نورونها", - "standard": "توقيت فرناندو دي نورونها الرسمي", - "daylight": "توقيت فرناندو دي نورونها الصيفي" - } - }, - "North_Mariana": { - "long": { - "standard": "توقيت جزر ماريانا الشمالية" - } - }, - "Novosibirsk": { - "long": { - "generic": "توقيت نوفوسيبيرسك", - "standard": "توقيت نوفوسيبيرسك الرسمي", - "daylight": "توقيت نوفوسيبيرسك الصيفي" - } - }, - "Omsk": { - "long": { - "generic": "توقيت أومسك", - "standard": "توقيت أومسك الرسمي", - "daylight": "توقيت أومسك الصيفي" - } - }, - "Pakistan": { - "long": { - "generic": "توقيت باكستان", - "standard": "توقيت باكستان الرسمي", - "daylight": "توقيت باكستان الصيفي" - } - }, - "Palau": { - "long": { - "standard": "توقيت بالاو" - } - }, - "Papua_New_Guinea": { - "long": { - "standard": "توقيت بابوا غينيا الجديدة" - } - }, - "Paraguay": { - "long": { - "generic": "توقيت باراغواي", - "standard": "توقيت باراغواي الرسمي", - "daylight": "توقيت باراغواي الصيفي" - } - }, - "Peru": { - "long": { - "generic": "توقيت بيرو", - "standard": "توقيت بيرو الرسمي", - "daylight": "توقيت بيرو الصيفي" - } - }, - "Philippines": { - "long": { - "generic": "توقيت الفيلبين", - "standard": "توقيت الفيلبين الرسمي", - "daylight": "توقيت الفيلبين الصيفي" - } - }, - "Phoenix_Islands": { - "long": { - "standard": "توقيت جزر فينكس" - } - }, - "Pierre_Miquelon": { - "long": { - "generic": "توقيت سانت بيير وميكولون", - "standard": "توقيت سانت بيير وميكولون الرسمي", - "daylight": "توقيت سانت بيير وميكولون الصيفي" - } - }, - "Pitcairn": { - "long": { - "standard": "توقيت بيتكيرن" - } - }, - "Ponape": { - "long": { - "standard": "توقيت بونابي" - } - }, - "Pyongyang": { - "long": { - "standard": "توقيت بيونغ يانغ" - } - }, - "Reunion": { - "long": { - "standard": "توقيت ريونيون" - } - }, - "Rothera": { - "long": { - "standard": "توقيت روثيرا" - } - }, - "Sakhalin": { - "long": { - "generic": "توقيت ساخالين", - "standard": "توقيت ساخالين الرسمي", - "daylight": "توقيت ساخالين الصيفي" - } - }, - "Samara": { - "long": { - "generic": "توقيت سامارا", - "standard": "توقيت سمارا", - "daylight": "توقيت سمارا الصيفي" - } - }, - "Samoa": { - "long": { - "generic": "توقيت ساموا", - "standard": "توقيت ساموا الرسمي", - "daylight": "توقيت ساموا الصيفي" - } - }, - "Seychelles": { - "long": { - "standard": "توقيت سيشل" - } - }, - "Singapore": { - "long": { - "standard": "توقيت سنغافورة" - } - }, - "Solomon": { - "long": { - "standard": "توقيت جزر سليمان" - } - }, - "South_Georgia": { - "long": { - "standard": "توقيت جنوب جورجيا" - } - }, - "Suriname": { - "long": { - "standard": "توقيت سورينام" - } - }, - "Syowa": { - "long": { - "standard": "توقيت سايووا" - } - }, - "Tahiti": { - "long": { - "standard": "توقيت تاهيتي" - } - }, - "Taipei": { - "long": { - "generic": "توقيت تايبيه", - "standard": "توقيت تايبيه الرسمي", - "daylight": "توقيت تايبيه الصيفي" - } - }, - "Tajikistan": { - "long": { - "standard": "توقيت طاجكستان" - } - }, - "Tokelau": { - "long": { - "standard": "توقيت توكيلاو" - } - }, - "Tonga": { - "long": { - "generic": "توقيت تونغا", - "standard": "توقيت تونغا الرسمي", - "daylight": "توقيت تونغا الصيفي" - } - }, - "Truk": { - "long": { - "standard": "توقيت شوك" - } - }, - "Turkmenistan": { - "long": { - "generic": "توقيت تركمانستان", - "standard": "توقيت تركمانستان الرسمي", - "daylight": "توقيت تركمانستان الصيفي" - } - }, - "Tuvalu": { - "long": { - "standard": "توقيت توفالو" - } - }, - "Uruguay": { - "long": { - "generic": "توقيت أورغواي", - "standard": "توقيت أورغواي الرسمي", - "daylight": "توقيت أورغواي الصيفي" - } - }, - "Uzbekistan": { - "long": { - "generic": "توقيت أوزبكستان", - "standard": "توقيت أوزبكستان الرسمي", - "daylight": "توقيت أوزبكستان الصيفي" - } - }, - "Vanuatu": { - "long": { - "generic": "توقيت فانواتو", - "standard": "توقيت فانواتو الرسمي", - "daylight": "توقيت فانواتو الصيفي" - } - }, - "Venezuela": { - "long": { - "standard": "توقيت فنزويلا" - } - }, - "Vladivostok": { - "long": { - "generic": "توقيت فلاديفوستوك", - "standard": "توقيت فلاديفوستوك الرسمي", - "daylight": "توقيت فلاديفوستوك الصيفي" - } - }, - "Volgograd": { - "long": { - "generic": "توقيت فولغوغراد", - "standard": "توقيت فولغوغراد الرسمي", - "daylight": "توقيت فولغوغراد الصيفي" - } - }, - "Vostok": { - "long": { - "standard": "توقيت فوستوك" - } - }, - "Wake": { - "long": { - "standard": "توقيت جزيرة ويك" - } - }, - "Wallis": { - "long": { - "standard": "توقيت واليس و فوتونا" - } - }, - "Yakutsk": { - "long": { - "generic": "توقيت ياكوتسك", - "standard": "توقيت ياكوتسك الرسمي", - "daylight": "توقيت ياكوتسك الصيفي" - } - }, - "Yekaterinburg": { - "long": { - "generic": "توقيت يكاترينبورغ", - "standard": "توقيت يكاترينبورغ الرسمي", - "daylight": "توقيت يكاترينبورغ الصيفي" - } - } - } - } - }, - "numbers": { - "defaultNumberingSystem": "arab", - "otherNumberingSystems": { - "native": "arab" - }, - "minimumGroupingDigits": "1", - "symbols-numberSystem-arab": { - "decimal": "٫", - "group": "٬", - "list": "؛", - "percentSign": "٪؜", - "plusSign": "؜+", - "minusSign": "؜-", - "exponential": "اس", - "superscriptingExponent": "×", - "perMille": "؉", - "infinity": "∞", - "nan": "ليس رقم", - "timeSeparator": ":" - }, - "symbols-numberSystem-latn": { - "decimal": ".", - "group": ",", - "list": ";", - "percentSign": "‎%‎", - "plusSign": "‎+", - "minusSign": "‎-", - "exponential": "E", - "superscriptingExponent": "×", - "perMille": "‰", - "infinity": "∞", - "nan": "ليس رقمًا", - "timeSeparator": ":" - }, - "decimalFormats-numberSystem-arab": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-zero": "0 ألف", - "1000-count-one": "0 ألف", - "1000-count-two": "0 ألف", - "1000-count-few": "0 آلاف", - "1000-count-many": "0 ألف", - "1000-count-other": "0 ألف", - "10000-count-zero": "00 ألف", - "10000-count-one": "00 ألف", - "10000-count-two": "00 ألف", - "10000-count-few": "00 ألف", - "10000-count-many": "00 ألف", - "10000-count-other": "00 ألف", - "100000-count-zero": "000 ألف", - "100000-count-one": "000 ألف", - "100000-count-two": "000 ألف", - "100000-count-few": "000 ألف", - "100000-count-many": "000 ألف", - "100000-count-other": "000 ألف", - "1000000-count-zero": "0 مليون", - "1000000-count-one": "0 مليون", - "1000000-count-two": "0 مليون", - "1000000-count-few": "0 ملايين", - "1000000-count-many": "0 مليون", - "1000000-count-other": "0 مليون", - "10000000-count-zero": "00 مليون", - "10000000-count-one": "00 مليون", - "10000000-count-two": "00 مليون", - "10000000-count-few": "00 ملايين", - "10000000-count-many": "00 مليون", - "10000000-count-other": "00 مليون", - "100000000-count-zero": "000 مليون", - "100000000-count-one": "000 مليون", - "100000000-count-two": "000 مليون", - "100000000-count-few": "000 مليون", - "100000000-count-many": "000 مليون", - "100000000-count-other": "000 مليون", - "1000000000-count-zero": "0 مليار", - "1000000000-count-one": "0 مليار", - "1000000000-count-two": "0 مليار", - "1000000000-count-few": "0 مليار", - "1000000000-count-many": "0 مليار", - "1000000000-count-other": "0 مليار", - "10000000000-count-zero": "00 مليار", - "10000000000-count-one": "00 مليار", - "10000000000-count-two": "00 مليار", - "10000000000-count-few": "00 مليار", - "10000000000-count-many": "00 مليار", - "10000000000-count-other": "00 مليار", - "100000000000-count-zero": "000 مليار", - "100000000000-count-one": "000 مليار", - "100000000000-count-two": "000 مليار", - "100000000000-count-few": "000 مليار", - "100000000000-count-many": "000 مليار", - "100000000000-count-other": "000 مليار", - "1000000000000-count-zero": "0 تريليون", - "1000000000000-count-one": "0 تريليون", - "1000000000000-count-two": "0 تريليون", - "1000000000000-count-few": "0 تريليونات", - "1000000000000-count-many": "0 تريليون", - "1000000000000-count-other": "0 تريليون", - "10000000000000-count-zero": "00 تريليون", - "10000000000000-count-one": "00 تريليون", - "10000000000000-count-two": "00 تريليون", - "10000000000000-count-few": "00 تريليون", - "10000000000000-count-many": "00 تريليون", - "10000000000000-count-other": "00 تريليون", - "100000000000000-count-zero": "000 تريليون", - "100000000000000-count-one": "000 تريليون", - "100000000000000-count-two": "000 تريليون", - "100000000000000-count-few": "000 تريليون", - "100000000000000-count-many": "000 تريليون", - "100000000000000-count-other": "000 تريليون" - } - }, - "short": { - "decimalFormat": { - "1000-count-zero": "0 ألف", - "1000-count-one": "0 ألف", - "1000-count-two": "0 ألف", - "1000-count-few": "0 آلاف", - "1000-count-many": "0 ألف", - "1000-count-other": "0 ألف", - "10000-count-zero": "00 ألف", - "10000-count-one": "00 ألف", - "10000-count-two": "00 ألف", - "10000-count-few": "00 ألف", - "10000-count-many": "00 ألف", - "10000-count-other": "00 ألف", - "100000-count-zero": "000 ألف", - "100000-count-one": "000 ألف", - "100000-count-two": "000 ألف", - "100000-count-few": "000 ألف", - "100000-count-many": "000 ألف", - "100000-count-other": "000 ألف", - "1000000-count-zero": "0 مليو", - "1000000-count-one": "0 مليو", - "1000000-count-two": "0 مليو", - "1000000-count-few": "0 مليو", - "1000000-count-many": "0 مليو", - "1000000-count-other": "0 مليو", - "10000000-count-zero": "00 مليو", - "10000000-count-one": "00 مليو", - "10000000-count-two": "00 مليو", - "10000000-count-few": "00 مليو", - "10000000-count-many": "00 مليو", - "10000000-count-other": "00 مليو", - "100000000-count-zero": "000 مليو", - "100000000-count-one": "000 مليو", - "100000000-count-two": "000 مليو", - "100000000-count-few": "000 مليو", - "100000000-count-many": "000 مليو", - "100000000-count-other": "000 مليو", - "1000000000-count-zero": "0 مليا", - "1000000000-count-one": "0 مليا", - "1000000000-count-two": "0 مليا", - "1000000000-count-few": "0 مليا", - "1000000000-count-many": "0 مليا", - "1000000000-count-other": "0 مليا", - "10000000000-count-zero": "00 مليا", - "10000000000-count-one": "00 مليا", - "10000000000-count-two": "00 مليا", - "10000000000-count-few": "00 مليا", - "10000000000-count-many": "00 مليا", - "10000000000-count-other": "00 مليا", - "100000000000-count-zero": "000 مليا", - "100000000000-count-one": "000 مليا", - "100000000000-count-two": "000 مليا", - "100000000000-count-few": "000 مليا", - "100000000000-count-many": "000 مليا", - "100000000000-count-other": "000 مليا", - "1000000000000-count-zero": "0 ترليو", - "1000000000000-count-one": "0 ترليو", - "1000000000000-count-two": "0 ترليو", - "1000000000000-count-few": "0 ترليو", - "1000000000000-count-many": "0 ترليو", - "1000000000000-count-other": "0 ترليو", - "10000000000000-count-zero": "00 ترليو", - "10000000000000-count-one": "00 ترليو", - "10000000000000-count-two": "00 ترليو", - "10000000000000-count-few": "00 ترليو", - "10000000000000-count-many": "00 ترليو", - "10000000000000-count-other": "00 ترليو", - "100000000000000-count-zero": "000 ترليو", - "100000000000000-count-one": "000 ترليو", - "100000000000000-count-two": "000 ترليو", - "100000000000000-count-few": "000 ترليو", - "100000000000000-count-many": "000 ترليو", - "100000000000000-count-other": "000 ترليو" - } - } - }, - "decimalFormats-numberSystem-latn": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-zero": "0 ألف", - "1000-count-one": "0 ألف", - "1000-count-two": "0 ألف", - "1000-count-few": "0 آلاف", - "1000-count-many": "0 ألف", - "1000-count-other": "0 ألف", - "10000-count-zero": "00 ألف", - "10000-count-one": "00 ألف", - "10000-count-two": "00 ألف", - "10000-count-few": "00 ألف", - "10000-count-many": "00 ألف", - "10000-count-other": "00 ألف", - "100000-count-zero": "000 ألف", - "100000-count-one": "000 ألف", - "100000-count-two": "000 ألف", - "100000-count-few": "000 ألف", - "100000-count-many": "000 ألف", - "100000-count-other": "000 ألف", - "1000000-count-zero": "0 مليون", - "1000000-count-one": "0 مليون", - "1000000-count-two": "0 مليون", - "1000000-count-few": "0 ملايين", - "1000000-count-many": "0 مليون", - "1000000-count-other": "0 مليون", - "10000000-count-zero": "00 مليون", - "10000000-count-one": "00 مليون", - "10000000-count-two": "00 مليون", - "10000000-count-few": "00 ملايين", - "10000000-count-many": "00 مليون", - "10000000-count-other": "00 مليون", - "100000000-count-zero": "000 مليون", - "100000000-count-one": "000 مليون", - "100000000-count-two": "000 مليون", - "100000000-count-few": "000 مليون", - "100000000-count-many": "000 مليون", - "100000000-count-other": "000 مليون", - "1000000000-count-zero": "0 مليار", - "1000000000-count-one": "0 مليار", - "1000000000-count-two": "0 مليار", - "1000000000-count-few": "0 مليار", - "1000000000-count-many": "0 مليار", - "1000000000-count-other": "0 مليار", - "10000000000-count-zero": "00 مليار", - "10000000000-count-one": "00 مليار", - "10000000000-count-two": "00 مليار", - "10000000000-count-few": "00 مليار", - "10000000000-count-many": "00 مليار", - "10000000000-count-other": "00 مليار", - "100000000000-count-zero": "000 مليار", - "100000000000-count-one": "000 مليار", - "100000000000-count-two": "000 مليار", - "100000000000-count-few": "000 مليار", - "100000000000-count-many": "000 مليار", - "100000000000-count-other": "000 مليار", - "1000000000000-count-zero": "0 تريليون", - "1000000000000-count-one": "0 تريليون", - "1000000000000-count-two": "0 تريليون", - "1000000000000-count-few": "0 تريليونات", - "1000000000000-count-many": "0 تريليون", - "1000000000000-count-other": "0 تريليون", - "10000000000000-count-zero": "00 تريليون", - "10000000000000-count-one": "00 تريليون", - "10000000000000-count-two": "00 تريليون", - "10000000000000-count-few": "00 تريليون", - "10000000000000-count-many": "00 تريليون", - "10000000000000-count-other": "00 تريليون", - "100000000000000-count-zero": "000 تريليون", - "100000000000000-count-one": "000 تريليون", - "100000000000000-count-two": "000 تريليون", - "100000000000000-count-few": "000 تريليون", - "100000000000000-count-many": "000 تريليون", - "100000000000000-count-other": "000 تريليون" - } - }, - "short": { - "decimalFormat": { - "1000-count-zero": "0 ألف", - "1000-count-one": "0 ألف", - "1000-count-two": "0 ألف", - "1000-count-few": "0 آلاف", - "1000-count-many": "0 ألف", - "1000-count-other": "0 ألف", - "10000-count-zero": "00 ألف", - "10000-count-one": "00 ألف", - "10000-count-two": "00 ألف", - "10000-count-few": "00 ألف", - "10000-count-many": "00 ألف", - "10000-count-other": "00 ألف", - "100000-count-zero": "000 ألف", - "100000-count-one": "000 ألف", - "100000-count-two": "000 ألف", - "100000-count-few": "000 ألف", - "100000-count-many": "000 ألف", - "100000-count-other": "000 ألف", - "1000000-count-zero": "0 مليو", - "1000000-count-one": "0 مليو", - "1000000-count-two": "0 مليو", - "1000000-count-few": "0 مليو", - "1000000-count-many": "0 مليو", - "1000000-count-other": "0 مليو", - "10000000-count-zero": "00 مليو", - "10000000-count-one": "00 مليو", - "10000000-count-two": "00 مليو", - "10000000-count-few": "00 مليو", - "10000000-count-many": "00 مليو", - "10000000-count-other": "00 مليو", - "100000000-count-zero": "000 مليو", - "100000000-count-one": "000 مليو", - "100000000-count-two": "000 مليو", - "100000000-count-few": "000 مليو", - "100000000-count-many": "000 مليو", - "100000000-count-other": "000 مليو", - "1000000000-count-zero": "0 مليا", - "1000000000-count-one": "0 مليا", - "1000000000-count-two": "0 مليا", - "1000000000-count-few": "0 مليا", - "1000000000-count-many": "0 مليا", - "1000000000-count-other": "0 مليا", - "10000000000-count-zero": "00 مليا", - "10000000000-count-one": "00 مليا", - "10000000000-count-two": "00 مليا", - "10000000000-count-few": "00 مليا", - "10000000000-count-many": "00 مليا", - "10000000000-count-other": "00 مليا", - "100000000000-count-zero": "000 مليا", - "100000000000-count-one": "000 مليا", - "100000000000-count-two": "000 مليا", - "100000000000-count-few": "000 مليا", - "100000000000-count-many": "000 مليا", - "100000000000-count-other": "000 مليا", - "1000000000000-count-zero": "0 ترليو", - "1000000000000-count-one": "0 ترليو", - "1000000000000-count-two": "0 ترليو", - "1000000000000-count-few": "0 ترليو", - "1000000000000-count-many": "0 ترليو", - "1000000000000-count-other": "0 ترليو", - "10000000000000-count-zero": "00 ترليو", - "10000000000000-count-one": "00 ترليو", - "10000000000000-count-two": "00 ترليو", - "10000000000000-count-few": "00 ترليو", - "10000000000000-count-many": "00 ترليو", - "10000000000000-count-other": "00 ترليو", - "100000000000000-count-zero": "000 ترليو", - "100000000000000-count-one": "000 ترليو", - "100000000000000-count-two": "000 ترليو", - "100000000000000-count-few": "000 ترليو", - "100000000000000-count-many": "000 ترليو", - "100000000000000-count-other": "000 ترليو" - } - } - }, - "scientificFormats-numberSystem-arab": { - "standard": "#E0" - }, - "scientificFormats-numberSystem-latn": { - "standard": "#E0" - }, - "percentFormats-numberSystem-arab": { - "standard": "#,##0 %" - }, - "percentFormats-numberSystem-latn": { - "standard": "#,##0%" - }, - "currencyFormats-numberSystem-arab": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } - }, - "standard": "#,##0.00 ¤", - "accounting": "#,##0.00 ¤", - "unitPattern-count-zero": "{0} {1}", - "unitPattern-count-one": "{0} {1}", - "unitPattern-count-two": "{0} {1}", - "unitPattern-count-few": "{0} {1}", - "unitPattern-count-many": "{0} {1}", - "unitPattern-count-other": "{0} {1}" - }, - "currencyFormats-numberSystem-latn": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } - }, - "standard": "¤ #,##0.00", - "accounting": "¤#,##0.00;(¤#,##0.00)", - "short": { - "standard": { - "1000-count-zero": "¤ 0 ألف", - "1000-count-one": "¤ 0 ألف", - "1000-count-two": "¤ 0 ألف", - "1000-count-few": "¤ 0 ألف", - "1000-count-many": "¤ 0 ألف", - "1000-count-other": "¤ 0 ألف", - "10000-count-zero": "¤ 00 ألف", - "10000-count-one": "¤ 00 ألف", - "10000-count-two": "¤ 00 ألف", - "10000-count-few": "¤ 00 ألف", - "10000-count-many": "¤ 00 ألف", - "10000-count-other": "¤ 00 ألف", - "100000-count-zero": "¤ 000 ألف", - "100000-count-one": "¤ 000 ألف", - "100000-count-two": "¤ 000 ألف", - "100000-count-few": "¤ 000 ألف", - "100000-count-many": "¤ 000 ألف", - "100000-count-other": "¤ 000 ألف", - "1000000-count-zero": "¤ 0 مليو", - "1000000-count-one": "¤ 0 مليو", - "1000000-count-two": "¤ 0 مليو", - "1000000-count-few": "¤ 0 مليو", - "1000000-count-many": "¤ 0 مليو", - "1000000-count-other": "¤ 0 مليو", - "10000000-count-zero": "¤ 00 مليو", - "10000000-count-one": "¤ 00 مليو", - "10000000-count-two": "¤ 00 مليو", - "10000000-count-few": "¤ 00 مليو", - "10000000-count-many": "¤ 00 مليو", - "10000000-count-other": "¤ 00 مليو", - "100000000-count-zero": "¤ 000 مليو", - "100000000-count-one": "¤ 000 مليو", - "100000000-count-two": "¤ 000 مليو", - "100000000-count-few": "¤ 000 مليو", - "100000000-count-many": "¤ 000 مليو", - "100000000-count-other": "¤ 000 مليو", - "1000000000-count-zero": "¤ 0 مليا", - "1000000000-count-one": "¤ 0 مليا", - "1000000000-count-two": "¤ 0 مليا", - "1000000000-count-few": "¤ 0 مليا", - "1000000000-count-many": "¤ 0 مليا", - "1000000000-count-other": "¤ 0 مليا", - "10000000000-count-zero": "¤ 00 مليا", - "10000000000-count-one": "¤ 00 مليا", - "10000000000-count-two": "¤ 00 مليا", - "10000000000-count-few": "¤ 00 مليا", - "10000000000-count-many": "¤ 00 مليا", - "10000000000-count-other": "¤ 00 مليا", - "100000000000-count-zero": "¤ 000 مليا", - "100000000000-count-one": "¤ 000 مليا", - "100000000000-count-two": "¤ 000 مليا", - "100000000000-count-few": "¤ 000 مليا", - "100000000000-count-many": "¤ 000 مليا", - "100000000000-count-other": "¤ 000 مليا", - "1000000000000-count-zero": "¤ 0 ترليو", - "1000000000000-count-one": "¤ 0 ترليو", - "1000000000000-count-two": "¤ 0 ترليو", - "1000000000000-count-few": "¤ 0 ترليو", - "1000000000000-count-many": "¤ 0 ترليو", - "1000000000000-count-other": "¤ 0 ترليو", - "10000000000000-count-zero": "¤ 00 ترليو", - "10000000000000-count-one": "¤ 00 ترليو", - "10000000000000-count-two": "¤ 00 ترليو", - "10000000000000-count-few": "¤ 00 ترليو", - "10000000000000-count-many": "¤ 00 ترليو", - "10000000000000-count-other": "¤ 00 ترليو", - "100000000000000-count-zero": "¤ 000 ترليو", - "100000000000000-count-one": "¤ 000 ترليو", - "100000000000000-count-two": "¤ 000 ترليو", - "100000000000000-count-few": "¤ 000 ترليو", - "100000000000000-count-many": "¤ 000 ترليو", - "100000000000000-count-other": "¤ 000 ترليو" - } - }, - "unitPattern-count-zero": "{0} {1}", - "unitPattern-count-one": "{0} {1}", - "unitPattern-count-two": "{0} {1}", - "unitPattern-count-few": "{0} {1}", - "unitPattern-count-many": "{0} {1}", - "unitPattern-count-other": "{0} {1}" - }, - "miscPatterns-numberSystem-arab": { - "atLeast": "+{0}", - "range": "{0}–{1}" - }, - "miscPatterns-numberSystem-latn": { - "atLeast": "+{0}", - "range": "{0}–{1}" - }, - "minimalPairs": { - "pluralMinimalPairs": "{0} كتاب", - "pluralMinimalPairs": "ولد واحد حضر", - "pluralMinimalPairs": "ولدان حضرا", - "pluralMinimalPairs": "{0} أولاد حضروا", - "pluralMinimalPairs": "{0} ولدًا حضروا", - "pluralMinimalPairs": "{0} ولد حضروا", - "other": "اتجه إلى المنعطف الـ {0} يمينًا." - }, "currencies": { - "ADP": { - "displayName": "بيستا أندوري", - "symbol": "ADP" - }, - "AED": { - "displayName": "درهم إماراتي", - "displayName-count-zero": "درهم إماراتي", - "displayName-count-one": "درهم إماراتي", - "displayName-count-two": "درهم إماراتي", - "displayName-count-few": "درهم إماراتي", - "displayName-count-many": "درهم إماراتي", - "displayName-count-other": "درهم إماراتي", - "symbol": "د.إ.‏" - }, - "AFA": { - "displayName": "أفغاني - 1927-2002", - "symbol": "AFA" - }, - "AFN": { - "displayName": "أفغاني", - "displayName-count-zero": "أفغاني أفغانستاني", - "displayName-count-one": "أفغاني أفغانستاني", - "displayName-count-two": "أفغاني أفغانستاني", - "displayName-count-few": "أفغاني أفغانستاني", - "displayName-count-many": "أفغاني أفغانستاني", - "displayName-count-other": "أفغاني أفغانستاني", - "symbol": "AFN" - }, - "ALL": { - "displayName": "ليك ألباني", - "displayName-count-zero": "ليك ألباني", - "displayName-count-one": "ليك ألباني", - "displayName-count-two": "ليك ألباني", - "displayName-count-few": "ليك ألباني", - "displayName-count-many": "ليك ألباني", - "displayName-count-other": "ليك ألباني", - "symbol": "ALL" - }, - "AMD": { - "displayName": "درام أرميني", - "displayName-count-zero": "درام أرميني", - "displayName-count-one": "درام أرميني", - "displayName-count-two": "درام أرميني", - "displayName-count-few": "درام أرميني", - "displayName-count-many": "درام أرميني", - "displayName-count-other": "درام أرميني", - "symbol": "AMD" - }, - "ANG": { - "displayName": "غيلدر أنتيلي هولندي", - "displayName-count-zero": "غيلدر أنتيلي هولندي", - "displayName-count-one": "غيلدر أنتيلي هولندي", - "displayName-count-two": "غيلدر أنتيلي هولندي", - "displayName-count-few": "غيلدر أنتيلي هولندي", - "displayName-count-many": "غيلدر أنتيلي هولندي", - "displayName-count-other": "غيلدر أنتيلي هولندي", - "symbol": "ANG" - }, - "AOA": { - "displayName": "كوانزا أنجولي", - "displayName-count-zero": "كوانزا أنجولي", - "displayName-count-one": "كوانزا أنجولي", - "displayName-count-two": "كوانزا أنجولي", - "displayName-count-few": "كوانزا أنجولي", - "displayName-count-many": "كوانزا أنجولي", - "displayName-count-other": "كوانزا أنجولي", - "symbol": "AOA", - "symbol-alt-narrow": "Kz" - }, - "AOK": { - "displayName": "كوانزا أنجولي - 1977-1990", - "symbol": "AOK" - }, - "AON": { - "displayName": "كوانزا أنجولي جديدة - 1990-2000", - "symbol": "AON" - }, - "AOR": { - "displayName": "كوانزا أنجولي معدلة - 1995 - 1999", - "symbol": "AOR" - }, - "ARA": { - "displayName": "استرال أرجنتيني", - "symbol": "ARA" - }, - "ARL": { - "displayName": "ARL", - "symbol": "ARL" - }, - "ARM": { - "displayName": "ARM", - "symbol": "ARM" - }, - "ARP": { - "displayName": "بيزو أرجنتيني - 1983-1985", - "symbol": "ARP" - }, - "ARS": { - "displayName": "بيزو أرجنتيني", - "displayName-count-zero": "بيزو أرجنتيني", - "displayName-count-one": "بيزو أرجنتيني", - "displayName-count-two": "بيزو أرجنتيني", - "displayName-count-few": "بيزو أرجنتيني", - "displayName-count-many": "بيزو أرجنتيني", - "displayName-count-other": "بيزو أرجنتيني", - "symbol": "ARS", - "symbol-alt-narrow": "AR$" - }, - "ATS": { - "displayName": "شلن نمساوي", - "symbol": "ATS" - }, - "AUD": { - "displayName": "دولار أسترالي", - "displayName-count-zero": "دولار أسترالي", - "displayName-count-one": "دولار أسترالي", - "displayName-count-two": "دولار أسترالي", - "displayName-count-few": "دولار أسترالي", - "displayName-count-many": "دولار أسترالي", - "displayName-count-other": "دولار أسترالي", - "symbol": "AU$", - "symbol-alt-narrow": "AU$" - }, - "AWG": { - "displayName": "فلورن أروبي", - "displayName-count-zero": "فلورن أروبي", - "displayName-count-one": "فلورن أروبي", - "displayName-count-two": "فلورن أروبي", - "displayName-count-few": "فلورن أروبي", - "displayName-count-many": "فلورن أروبي", - "displayName-count-other": "فلورن أروبي", - "symbol": "AWG" - }, - "AZM": { - "displayName": "مانات أذريبجاني", - "symbol": "AZM" - }, - "AZN": { - "displayName": "مانات أذربيجان", - "displayName-count-zero": "مانت أذربيجاني", - "displayName-count-one": "مانت أذربيجاني", - "displayName-count-two": "مانت أذربيجاني", - "displayName-count-few": "مانت أذربيجاني", - "displayName-count-many": "مانت أذربيجاني", - "displayName-count-other": "مانت أذربيجاني", - "symbol": "AZN" - }, - "BAD": { - "displayName": "دينار البوسنة والهرسك", - "symbol": "BAD" - }, - "BAM": { - "displayName": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-zero": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-one": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-two": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-few": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-many": "مارك البوسنة والهرسك قابل للتحويل", - "displayName-count-other": "مارك البوسنة والهرسك قابل للتحويل", - "symbol": "BAM", - "symbol-alt-narrow": "KM" - }, - "BAN": { - "displayName": "BAN", - "symbol": "BAN" - }, - "BBD": { - "displayName": "دولار بربادوسي", - "displayName-count-zero": "دولار بربادوسي", - "displayName-count-one": "دولار بربادوسي", - "displayName-count-two": "دولار بربادوسي", - "displayName-count-few": "دولار بربادوسي", - "displayName-count-many": "دولار بربادوسي", - "displayName-count-other": "دولار بربادوسي", - "symbol": "BBD", - "symbol-alt-narrow": "BB$" - }, - "BDT": { - "displayName": "تاكا بنجلاديشي", - "displayName-count-zero": "تاكا بنجلاديشي", - "displayName-count-one": "تاكا بنجلاديشي", - "displayName-count-two": "تاكا بنجلاديشي", - "displayName-count-few": "تاكا بنجلاديشي", - "displayName-count-many": "تاكا بنجلاديشي", - "displayName-count-other": "تاكا بنجلاديشي", - "symbol": "BDT", - "symbol-alt-narrow": "৳" - }, - "BEC": { - "displayName": "فرنك بلجيكي قابل للتحويل", - "symbol": "BEC" - }, - "BEF": { - "displayName": "فرنك بلجيكي", - "symbol": "BEF" - }, - "BEL": { - "displayName": "فرنك بلجيكي مالي", - "symbol": "BEL" - }, - "BGL": { - "displayName": "BGL", - "symbol": "BGL" - }, - "BGM": { - "displayName": "BGM", - "symbol": "BGM" - }, - "BGN": { - "displayName": "ليف بلغاري", - "displayName-count-zero": "ليف بلغاري", - "displayName-count-one": "ليف بلغاري", - "displayName-count-two": "ليف بلغاري", - "displayName-count-few": "ليف بلغاري", - "displayName-count-many": "ليف بلغاري", - "displayName-count-other": "ليف بلغاري", - "symbol": "BGN" - }, - "BGO": { - "displayName": "BGO", - "symbol": "BGO" - }, - "BHD": { - "displayName": "دينار بحريني", - "displayName-count-zero": "دينار بحريني", - "displayName-count-one": "دينار بحريني", - "displayName-count-two": "دينار بحريني", - "displayName-count-few": "دينار بحريني", - "displayName-count-many": "دينار بحريني", - "displayName-count-other": "دينار بحريني", - "symbol": "د.ب.‏" - }, - "BIF": { - "displayName": "فرنك بروندي", - "displayName-count-zero": "فرنك بروندي", - "displayName-count-one": "فرنك بروندي", - "displayName-count-two": "فرنك بروندي", - "displayName-count-few": "فرنك بروندي", - "displayName-count-many": "فرنك بروندي", - "displayName-count-other": "فرنك بروندي", - "symbol": "BIF" - }, - "BMD": { - "displayName": "دولار برمودي", - "displayName-count-zero": "دولار برمودي", - "displayName-count-one": "دولار برمودي", - "displayName-count-two": "دولار برمودي", - "displayName-count-few": "دولار برمودي", - "displayName-count-many": "دولار برمودي", - "displayName-count-other": "دولار برمودي", - "symbol": "BMD", - "symbol-alt-narrow": "BM$" - }, - "BND": { - "displayName": "دولار بروناي", - "displayName-count-zero": "دولار بروناي", - "displayName-count-one": "دولار بروناي", - "displayName-count-two": "دولار بروناي", - "displayName-count-few": "دولار بروناي", - "displayName-count-many": "دولار بروناي", - "displayName-count-other": "دولار بروناي", - "symbol": "BND", - "symbol-alt-narrow": "BN$" - }, - "BOB": { - "displayName": "بوليفيانو بوليفي", - "displayName-count-zero": "بوليفيانو بوليفي", - "displayName-count-one": "بوليفيانو بوليفي", - "displayName-count-two": "بوليفيانو بوليفي", - "displayName-count-few": "بوليفيانو بوليفي", - "displayName-count-many": "بوليفيانو بوليفي", - "displayName-count-other": "بوليفيانو بوليفي", - "symbol": "BOB", - "symbol-alt-narrow": "Bs" - }, - "BOL": { - "displayName": "BOL", - "symbol": "BOL" - }, - "BOP": { - "displayName": "بيزو بوليفي", - "symbol": "BOP" - }, - "BOV": { - "displayName": "مفدول بوليفي", - "symbol": "BOV" - }, - "BRB": { - "displayName": "نوفو كروزايرو برازيلي - 1967-1986", - "symbol": "BRB" - }, - "BRC": { - "displayName": "كروزادو برازيلي", - "symbol": "BRC" - }, - "BRE": { - "displayName": "كروزايرو برازيلي - 1990-1993", - "symbol": "BRE" - }, - "BRL": { - "displayName": "ريال برازيلي", - "displayName-count-zero": "ريال برازيلي", - "displayName-count-one": "ريال برازيلي", - "displayName-count-two": "ريال برازيلي", - "displayName-count-few": "ريال برازيلي", - "displayName-count-many": "ريال برازيلي", - "displayName-count-other": "ريال برازيلي", - "symbol": "R$", - "symbol-alt-narrow": "R$" - }, - "BRN": { - "displayName": "BRN", - "symbol": "BRN" - }, - "BRR": { - "displayName": "BRR", - "symbol": "BRR" - }, - "BRZ": { - "displayName": "BRZ", - "symbol": "BRZ" - }, - "BSD": { - "displayName": "دولار باهامي", - "displayName-count-zero": "دولار باهامي", - "displayName-count-one": "دولار باهامي", - "displayName-count-two": "دولار باهامي", - "displayName-count-few": "دولار باهامي", - "displayName-count-many": "دولار باهامي", - "displayName-count-other": "دولار باهامي", - "symbol": "BSD", - "symbol-alt-narrow": "BS$" - }, - "BTN": { - "displayName": "نولتوم بوتاني", - "displayName-count-zero": "نولتوم بوتاني", - "displayName-count-one": "نولتوم بوتاني", - "displayName-count-two": "نولتوم بوتاني", - "displayName-count-few": "نولتوم بوتاني", - "displayName-count-many": "نولتوم بوتاني", - "displayName-count-other": "نولتوم بوتاني", - "symbol": "BTN" - }, - "BUK": { - "displayName": "كيات بورمي", - "symbol": "BUK" - }, - "BWP": { - "displayName": "بولا بتسواني", - "displayName-count-zero": "بولا بتسواني", - "displayName-count-one": "بولا بتسواني", - "displayName-count-two": "بولا بتسواني", - "displayName-count-few": "بولا بتسواني", - "displayName-count-many": "بولا بتسواني", - "displayName-count-other": "بولا بتسواني", - "symbol": "BWP", - "symbol-alt-narrow": "P" - }, - "BYB": { - "displayName": "روبل بيلاروسي جديد - 1994-1999", - "symbol": "BYB" - }, - "BYN": { - "displayName": "روبل بيلاروسي", - "displayName-count-zero": "روبل بيلاروسي", - "displayName-count-one": "روبل بيلاروسي", - "displayName-count-two": "روبل بيلاروسي", - "displayName-count-few": "روبل بيلاروسي", - "displayName-count-many": "روبل بيلاروسي", - "displayName-count-other": "روبل بيلاروسي", - "symbol": "BYN", - "symbol-alt-narrow": "р." - }, - "BYR": { - "displayName": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-zero": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-one": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-two": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-few": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-many": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "displayName-count-other": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", - "symbol": "BYR" - }, - "BZD": { - "displayName": "دولار بليزي", - "displayName-count-zero": "دولار بليزي", - "displayName-count-one": "دولار بليزي", - "displayName-count-two": "دولاران بليزيان", - "displayName-count-few": "دولار بليزي", - "displayName-count-many": "دولار بليزي", - "displayName-count-other": "دولار بليزي", - "symbol": "BZD", - "symbol-alt-narrow": "BZ$" - }, - "CAD": { - "displayName": "دولار كندي", - "displayName-count-zero": "دولار كندي", - "displayName-count-one": "دولار كندي", - "displayName-count-two": "دولار كندي", - "displayName-count-few": "دولار كندي", - "displayName-count-many": "دولار كندي", - "displayName-count-other": "دولار كندي", - "symbol": "CA$", - "symbol-alt-narrow": "CA$" - }, - "CDF": { - "displayName": "فرنك كونغولي", - "displayName-count-zero": "فرنك كونغولي", - "displayName-count-one": "فرنك كونغولي", - "displayName-count-two": "فرنك كونغولي", - "displayName-count-few": "فرنك كونغولي", - "displayName-count-many": "فرنك كونغولي", - "displayName-count-other": "فرنك كونغولي", - "symbol": "CDF" - }, - "CHE": { - "displayName": "CHE", - "symbol": "CHE" - }, - "CHF": { - "displayName": "فرنك سويسري", - "displayName-count-zero": "فرنك سويسري", - "displayName-count-one": "فرنك سويسري", - "displayName-count-two": "فرنك سويسري", - "displayName-count-few": "فرنك سويسري", - "displayName-count-many": "فرنك سويسري", - "displayName-count-other": "فرنك سويسري", - "symbol": "CHF" - }, - "CHW": { - "displayName": "CHW", - "symbol": "CHW" - }, - "CLE": { - "displayName": "CLE", - "symbol": "CLE" - }, - "CLF": { - "displayName": "CLF", - "symbol": "CLF" - }, - "CLP": { - "displayName": "بيزو شيلي", - "displayName-count-zero": "بيزو شيلي", - "displayName-count-one": "بيزو شيلي", - "displayName-count-two": "بيزو شيلي", - "displayName-count-few": "بيزو شيلي", - "displayName-count-many": "بيزو شيلي", - "displayName-count-other": "بيزو شيلي", - "symbol": "CLP", - "symbol-alt-narrow": "CL$" - }, - "CNY": { - "displayName": "يوان صيني", - "displayName-count-zero": "يوان صيني", - "displayName-count-one": "يوان صيني", - "displayName-count-two": "يوان صيني", - "displayName-count-few": "يوان صيني", - "displayName-count-many": "يوان صيني", - "displayName-count-other": "يوان صيني", - "symbol": "CN¥", - "symbol-alt-narrow": "CN¥" - }, - "COP": { - "displayName": "بيزو كولومبي", - "displayName-count-zero": "بيزو كولومبي", - "displayName-count-one": "بيزو كولومبي", - "displayName-count-two": "بيزو كولومبي", - "displayName-count-few": "بيزو كولومبي", - "displayName-count-many": "بيزو كولومبي", - "displayName-count-other": "بيزو كولومبي", - "symbol": "COP", - "symbol-alt-narrow": "CO$" - }, - "COU": { - "displayName": "COU", - "symbol": "COU" - }, - "CRC": { - "displayName": "كولن كوستا ريكي", - "displayName-count-zero": "كولن كوستا ريكي", - "displayName-count-one": "كولن كوستا ريكي", - "displayName-count-two": "كولن كوستا ريكي", - "displayName-count-few": "كولن كوستا ريكي", - "displayName-count-many": "كولن كوستا ريكي", - "displayName-count-other": "كولن كوستا ريكي", - "symbol": "CRC", - "symbol-alt-narrow": "₡" - }, - "CSD": { - "displayName": "دينار صربي قديم", - "symbol": "CSD" - }, - "CSK": { - "displayName": "كرونة تشيكوسلوفاكيا", - "symbol": "CSK" - }, - "CUC": { - "displayName": "بيزو كوبي قابل للتحويل", - "displayName-count-zero": "بيزو كوبي قابل للتحويل", - "displayName-count-one": "بيزو كوبي قابل للتحويل", - "displayName-count-two": "بيزو كوبي قابل للتحويل", - "displayName-count-few": "بيزو كوبي قابل للتحويل", - "displayName-count-many": "بيزو كوبي قابل للتحويل", - "displayName-count-other": "بيزو كوبي قابل للتحويل", - "symbol": "CUC", - "symbol-alt-narrow": "$" - }, - "CUP": { - "displayName": "بيزو كوبي", - "displayName-count-zero": "بيزو كوبي", - "displayName-count-one": "بيزو كوبي", - "displayName-count-two": "بيزو كوبي", - "displayName-count-few": "بيزو كوبي", - "displayName-count-many": "بيزو كوبي", - "displayName-count-other": "بيزو كوبي", - "symbol": "CUP", - "symbol-alt-narrow": "CU$" - }, - "CVE": { - "displayName": "اسكودو الرأس الخضراء", - "displayName-count-zero": "اسكودو الرأس الخضراء", - "displayName-count-one": "اسكودو الرأس الخضراء", - "displayName-count-two": "اسكودو الرأس الخضراء", - "displayName-count-few": "اسكودو الرأس الخضراء", - "displayName-count-many": "اسكودو الرأس الخضراء", - "displayName-count-other": "اسكودو الرأس الخضراء", - "symbol": "CVE" - }, - "CYP": { - "displayName": "جنيه قبرصي", - "symbol": "CYP" - }, - "CZK": { - "displayName": "كرونة تشيكية", - "displayName-count-zero": "كرونة تشيكية", - "displayName-count-one": "كرونة تشيكية", - "displayName-count-two": "كرونة تشيكية", - "displayName-count-few": "كرونة تشيكية", - "displayName-count-many": "كرونة تشيكية", - "displayName-count-other": "كرونة تشيكية", - "symbol": "CZK", - "symbol-alt-narrow": "Kč" - }, - "DDM": { - "displayName": "أوستمارك ألماني شرقي", - "symbol": "DDM" - }, - "DEM": { - "displayName": "مارك ألماني", - "symbol": "DEM" - }, - "DJF": { - "displayName": "فرنك جيبوتي", - "displayName-count-zero": "فرنك جيبوتي", - "displayName-count-one": "فرنك جيبوتي", - "displayName-count-two": "فرنك جيبوتي", - "displayName-count-few": "فرنك جيبوتي", - "displayName-count-many": "فرنك جيبوتي", - "displayName-count-other": "فرنك جيبوتي", - "symbol": "DJF" - }, - "DKK": { - "displayName": "كرونة دانماركي", - "displayName-count-zero": "كرونة دانماركي", - "displayName-count-one": "كرونة دانماركي", - "displayName-count-two": "كرونة دانماركي", - "displayName-count-few": "كرونة دانماركي", - "displayName-count-many": "كرونة دانماركي", - "displayName-count-other": "كرونة دانماركي", - "symbol": "DKK", - "symbol-alt-narrow": "kr" - }, - "DOP": { - "displayName": "بيزو الدومنيكان", - "displayName-count-zero": "بيزو الدومنيكان", - "displayName-count-one": "بيزو الدومنيكان", - "displayName-count-two": "بيزو الدومنيكان", - "displayName-count-few": "بيزو الدومنيكان", - "displayName-count-many": "بيزو الدومنيكان", - "displayName-count-other": "بيزو الدومنيكان", - "symbol": "DOP", - "symbol-alt-narrow": "DO$" - }, - "DZD": { - "displayName": "دينار جزائري", - "displayName-count-zero": "دينار جزائري", - "displayName-count-one": "دينار جزائري", - "displayName-count-two": "ديناران جزائريان", - "displayName-count-few": "دينارات جزائرية", - "displayName-count-many": "دينارًا جزائريًا", - "displayName-count-other": "دينار جزائري", - "symbol": "د.ج.‏" - }, - "ECS": { - "displayName": "ECS", - "symbol": "ECS" - }, - "ECV": { - "displayName": "ECV", - "symbol": "ECV" - }, - "EEK": { - "displayName": "كرونة استونية", - "symbol": "EEK" - }, - "EGP": { - "displayName": "جنيه مصري", - "displayName-count-zero": "جنيه مصري", - "displayName-count-one": "جنيه مصري", - "displayName-count-two": "جنيهان مصريان", - "displayName-count-few": "جنيهات مصرية", - "displayName-count-many": "جنيهًا مصريًا", - "displayName-count-other": "جنيه مصري", - "symbol": "ج.م.‏", - "symbol-alt-narrow": "E£" - }, - "ERN": { - "displayName": "ناكفا أريتري", - "displayName-count-zero": "ناكفا أريتري", - "displayName-count-one": "ناكفا أريتري", - "displayName-count-two": "ناكفا أريتري", - "displayName-count-few": "ناكفا أريتري", - "displayName-count-many": "ناكفا أريتري", - "displayName-count-other": "ناكفا أريتري", - "symbol": "ERN" - }, - "ESA": { - "displayName": "ESA", - "symbol": "ESA" - }, - "ESB": { - "displayName": "ESB", - "symbol": "ESB" - }, - "ESP": { - "displayName": "بيزيتا إسباني", - "symbol": "ESP", - "symbol-alt-narrow": "₧" - }, - "ETB": { - "displayName": "بير أثيوبي", - "displayName-count-zero": "بير أثيوبي", - "displayName-count-one": "بير أثيوبي", - "displayName-count-two": "بير أثيوبي", - "displayName-count-few": "بير أثيوبي", - "displayName-count-many": "بير أثيوبي", - "displayName-count-other": "بير أثيوبي", - "symbol": "ETB" - }, - "EUR": { - "displayName": "يورو", - "displayName-count-zero": "يورو", - "displayName-count-one": "يورو", - "displayName-count-two": "يورو", - "displayName-count-few": "يورو", - "displayName-count-many": "يورو", - "displayName-count-other": "يورو", - "symbol": "€", - "symbol-alt-narrow": "€" - }, - "FIM": { - "displayName": "ماركا فنلندي", - "symbol": "FIM" - }, - "FJD": { - "displayName": "دولار فيجي", - "displayName-count-zero": "دولار فيجي", - "displayName-count-one": "دولار فيجي", - "displayName-count-two": "دولار فيجي", - "displayName-count-few": "دولار فيجي", - "displayName-count-many": "دولار فيجي", - "displayName-count-other": "دولار فيجي", - "symbol": "FJD", - "symbol-alt-narrow": "FJ$" - }, - "FKP": { - "displayName": "جنيه جزر فوكلاند", - "displayName-count-zero": "جنيه جزر فوكلاند", - "displayName-count-one": "جنيه جزر فوكلاند", - "displayName-count-two": "جنيه جزر فوكلاند", - "displayName-count-few": "جنيه جزر فوكلاند", - "displayName-count-many": "جنيه جزر فوكلاند", - "displayName-count-other": "جنيه جزر فوكلاند", - "symbol": "FKP", - "symbol-alt-narrow": "£" - }, - "FRF": { - "displayName": "فرنك فرنسي", - "symbol": "FRF" - }, - "GBP": { - "displayName": "جنيه إسترليني", - "displayName-count-zero": "جنيه إسترليني", - "displayName-count-one": "جنيه إسترليني", - "displayName-count-two": "جنيه إسترليني", - "displayName-count-few": "جنيه إسترليني", - "displayName-count-many": "جنيه إسترليني", - "displayName-count-other": "جنيه إسترليني", - "symbol": "£", - "symbol-alt-narrow": "UK£" - }, - "GEK": { - "displayName": "GEK", - "symbol": "GEK" - }, - "GEL": { - "displayName": "لارى جورجي", - "displayName-count-zero": "لاري جورجي", - "displayName-count-one": "لاري جورجي", - "displayName-count-two": "لاري جورجي", - "displayName-count-few": "لاري جورجي", - "displayName-count-many": "لاري جورجي", - "displayName-count-other": "لاري جورجي", - "symbol": "GEL", - "symbol-alt-narrow": "₾", - "symbol-alt-variant": "₾" - }, - "GHC": { - "displayName": "سيدي غاني", - "symbol": "GHC" - }, - "GHS": { - "displayName": "سيدي غانا", - "displayName-count-zero": "سيدي غانا", - "displayName-count-one": "سيدي غانا", - "displayName-count-two": "سيدي غانا", - "displayName-count-few": "سيدي غانا", - "displayName-count-many": "سيدي غانا", - "displayName-count-other": "سيدي غانا", - "symbol": "GHS" - }, - "GIP": { - "displayName": "جنيه جبل طارق", - "displayName-count-zero": "جنيه جبل طارق", - "displayName-count-one": "جنيه جبل طارق", - "displayName-count-two": "جنيه جبل طارق", - "displayName-count-few": "جنيه جبل طارق", - "displayName-count-many": "جنيه جبل طارق", - "displayName-count-other": "جنيه جبل طارق", - "symbol": "GIP", - "symbol-alt-narrow": "£" - }, - "GMD": { - "displayName": "دلاسي جامبي", - "displayName-count-zero": "دلاسي جامبي", - "displayName-count-one": "دلاسي جامبي", - "displayName-count-two": "دلاسي جامبي", - "displayName-count-few": "دلاسي جامبي", - "displayName-count-many": "دلاسي جامبي", - "displayName-count-other": "دلاسي جامبي", - "symbol": "GMD" - }, - "GNF": { - "displayName": "فرنك غينيا", - "displayName-count-zero": "فرنك غينيا", - "displayName-count-one": "فرنك غينيا", - "displayName-count-two": "فرنك غينيا", - "displayName-count-few": "فرنك غينيا", - "displayName-count-many": "فرنك غينيا", - "displayName-count-other": "فرنك غينيا", - "symbol": "GNF", - "symbol-alt-narrow": "FG" - }, - "GNS": { - "displayName": "سيلي غينيا", - "symbol": "GNS" - }, - "GQE": { - "displayName": "اكويل جونينا غينيا الاستوائيّة", - "symbol": "GQE" - }, - "GRD": { - "displayName": "دراخما يوناني", - "symbol": "GRD" - }, - "GTQ": { - "displayName": "كوتزال جواتيمالا", - "displayName-count-zero": "كوتزال جواتيمالا", - "displayName-count-one": "كوتزال جواتيمالا", - "displayName-count-two": "كوتزال جواتيمالا", - "displayName-count-few": "كوتزال جواتيمالا", - "displayName-count-many": "كوتزال جواتيمالا", - "displayName-count-other": "كوتزال جواتيمالا", - "symbol": "GTQ", - "symbol-alt-narrow": "Q" - }, - "GWE": { - "displayName": "اسكود برتغالي غينيا", - "symbol": "GWE" - }, - "GWP": { - "displayName": "بيزو غينيا بيساو", - "symbol": "GWP" - }, - "GYD": { - "displayName": "دولار غيانا", - "displayName-count-zero": "دولار غيانا", - "displayName-count-one": "دولار غيانا", - "displayName-count-two": "دولار غيانا", - "displayName-count-few": "دولار غيانا", - "displayName-count-many": "دولار غيانا", - "displayName-count-other": "دولار غيانا", - "symbol": "GYD", - "symbol-alt-narrow": "GY$" - }, - "HKD": { - "displayName": "دولار هونغ كونغ", - "displayName-count-zero": "دولار هونغ كونغ", - "displayName-count-one": "دولار هونغ كونغ", - "displayName-count-two": "دولار هونغ كونغ", - "displayName-count-few": "دولار هونغ كونغ", - "displayName-count-many": "دولار هونغ كونغ", - "displayName-count-other": "دولار هونغ كونغ", - "symbol": "HK$", - "symbol-alt-narrow": "HK$" - }, - "HNL": { - "displayName": "ليمبيرا هنداروس", - "displayName-count-zero": "ليمبيرا هندوراس", - "displayName-count-one": "ليمبيرا هندوراس", - "displayName-count-two": "ليمبيرا هندوراس", - "displayName-count-few": "ليمبيرا هندوراس", - "displayName-count-many": "ليمبيرا هندوراس", - "displayName-count-other": "ليمبيرا هندوراس", - "symbol": "HNL", - "symbol-alt-narrow": "L" - }, - "HRD": { - "displayName": "دينار كرواتي", - "symbol": "HRD" - }, - "HRK": { - "displayName": "كونا كرواتي", - "displayName-count-zero": "كونا كرواتي", - "displayName-count-one": "كونا كرواتي", - "displayName-count-two": "كونا كرواتي", - "displayName-count-few": "كونا كرواتي", - "displayName-count-many": "كونا كرواتي", - "displayName-count-other": "كونا كرواتي", - "symbol": "HRK", - "symbol-alt-narrow": "kn" - }, - "HTG": { - "displayName": "جوردى هايتي", - "displayName-count-zero": "جوردى هايتي", - "displayName-count-one": "جوردى هايتي", - "displayName-count-two": "جوردى هايتي", - "displayName-count-few": "جوردى هايتي", - "displayName-count-many": "جوردى هايتي", - "displayName-count-other": "جوردى هايتي", - "symbol": "HTG" - }, - "HUF": { - "displayName": "فورينت مجري", - "displayName-count-zero": "فورينت مجري", - "displayName-count-one": "فورينت مجري", - "displayName-count-two": "فورينت مجري", - "displayName-count-few": "فورينت مجري", - "displayName-count-many": "فورينت مجري", - "displayName-count-other": "فورينت مجري", - "symbol": "HUF", - "symbol-alt-narrow": "Ft" - }, - "IDR": { - "displayName": "روبية إندونيسية", - "displayName-count-zero": "روبية إندونيسية", - "displayName-count-one": "روبية إندونيسية", - "displayName-count-two": "روبية إندونيسية", - "displayName-count-few": "روبية إندونيسية", - "displayName-count-many": "روبية إندونيسية", - "displayName-count-other": "روبية إندونيسية", - "symbol": "IDR", - "symbol-alt-narrow": "Rp" - }, - "IEP": { - "displayName": "جنيه إيرلندي", - "symbol": "IEP" - }, - "ILP": { - "displayName": "جنيه إسرائيلي", - "symbol": "ILP" - }, - "ILS": { - "displayName": "شيكل إسرائيلي جديد", - "displayName-count-zero": "شيكل إسرائيلي جديد", - "displayName-count-one": "شيكل إسرائيلي جديد", - "displayName-count-two": "شيكل إسرائيلي جديد", - "displayName-count-few": "شيكل إسرائيلي جديد", - "displayName-count-many": "شيكل إسرائيلي جديد", - "displayName-count-other": "شيكل إسرائيلي جديد", - "symbol": "₪", - "symbol-alt-narrow": "₪" - }, - "INR": { - "displayName": "روبية هندي", - "displayName-count-zero": "روبية هندي", - "displayName-count-one": "روبية هندي", - "displayName-count-two": "روبية هندي", - "displayName-count-few": "روبية هندي", - "displayName-count-many": "روبية هندي", - "displayName-count-other": "روبية هندي", - "symbol": "₹", - "symbol-alt-narrow": "₹" - }, - "IQD": { - "displayName": "دينار عراقي", - "displayName-count-zero": "دينار عراقي", - "displayName-count-one": "دينار عراقي", - "displayName-count-two": "دينار عراقي", - "displayName-count-few": "دينار عراقي", - "displayName-count-many": "دينار عراقي", - "displayName-count-other": "دينار عراقي", - "symbol": "د.ع.‏" - }, - "IRR": { - "displayName": "ريال إيراني", - "displayName-count-zero": "ريال إيراني", - "displayName-count-one": "ريال إيراني", - "displayName-count-two": "ريال إيراني", - "displayName-count-few": "ريال إيراني", - "displayName-count-many": "ريال إيراني", - "displayName-count-other": "ريال إيراني", - "symbol": "ر.إ." - }, - "ISK": { - "displayName": "كرونه أيسلندي", - "displayName-count-zero": "كرونه أيسلندي", - "displayName-count-one": "كرونه أيسلندي", - "displayName-count-two": "كرونه أيسلندي", - "displayName-count-few": "كرونه أيسلندي", - "displayName-count-many": "كرونه أيسلندي", - "displayName-count-other": "كرونه أيسلندي", - "symbol": "ISK", - "symbol-alt-narrow": "kr" - }, - "ITL": { - "displayName": "ليرة إيطالية", - "symbol": "ITL" - }, - "JMD": { - "displayName": "دولار جامايكي", - "displayName-count-zero": "دولار جامايكي", - "displayName-count-one": "دولار جامايكي", - "displayName-count-two": "دولار جامايكي", - "displayName-count-few": "دولار جامايكي", - "displayName-count-many": "دولار جامايكي", - "displayName-count-other": "دولار جامايكي", - "symbol": "JMD", - "symbol-alt-narrow": "JM$" - }, - "JOD": { - "displayName": "دينار أردني", - "displayName-count-zero": "دينار أردني", - "displayName-count-one": "دينار أردني", - "displayName-count-two": "دينار أردني", - "displayName-count-few": "دينار أردني", - "displayName-count-many": "دينار أردني", - "displayName-count-other": "دينار أردني", - "symbol": "د.أ.‏" - }, - "JPY": { - "displayName": "ين ياباني", - "displayName-count-zero": "ين ياباني", - "displayName-count-one": "ين ياباني", - "displayName-count-two": "ين ياباني", - "displayName-count-few": "ين ياباني", - "displayName-count-many": "ين ياباني", - "displayName-count-other": "ين ياباني", - "symbol": "JP¥", - "symbol-alt-narrow": "JP¥" - }, - "KES": { - "displayName": "شلن كينيي", - "displayName-count-zero": "شلن كينيي", - "displayName-count-one": "شلن كينيي", - "displayName-count-two": "شلن كينيي", - "displayName-count-few": "شلن كينيي", - "displayName-count-many": "شلن كينيي", - "displayName-count-other": "شلن كينيي", - "symbol": "KES" - }, - "KGS": { - "displayName": "سوم قيرغستاني", - "displayName-count-zero": "سوم قيرغستاني", - "displayName-count-one": "سوم قيرغستاني", - "displayName-count-two": "سوم قيرغستاني", - "displayName-count-few": "سوم قيرغستاني", - "displayName-count-many": "سوم قيرغستاني", - "displayName-count-other": "سوم قيرغستاني", - "symbol": "KGS" - }, - "KHR": { - "displayName": "رييال كمبودي", - "displayName-count-zero": "رييال كمبودي", - "displayName-count-one": "رييال كمبودي", - "displayName-count-two": "رييال كمبودي", - "displayName-count-few": "رييال كمبودي", - "displayName-count-many": "رييال كمبودي", - "displayName-count-other": "رييال كمبودي", - "symbol": "KHR", - "symbol-alt-narrow": "៛" - }, - "KMF": { - "displayName": "فرنك جزر القمر", - "displayName-count-zero": "فرنك جزر القمر", - "displayName-count-one": "فرنك جزر القمر", - "displayName-count-two": "فرنك جزر القمر", - "displayName-count-few": "فرنك جزر القمر", - "displayName-count-many": "فرنك جزر القمر", - "displayName-count-other": "فرنك جزر القمر", - "symbol": "ف.ج.ق.‏", - "symbol-alt-narrow": "CF" - }, - "KPW": { - "displayName": "وون كوريا الشمالية", - "displayName-count-zero": "وون كوريا الشمالية", - "displayName-count-one": "وون كوريا الشمالية", - "displayName-count-two": "وون كوريا الشمالية", - "displayName-count-few": "وون كوريا الشمالية", - "displayName-count-many": "وون كوريا الشمالية", - "displayName-count-other": "وون كوريا الشمالية", - "symbol": "KPW", - "symbol-alt-narrow": "₩" - }, - "KRH": { - "displayName": "KRH", - "symbol": "KRH" - }, - "KRO": { - "displayName": "KRO", - "symbol": "KRO" - }, - "KRW": { - "displayName": "وون كوريا الجنوبية", - "displayName-count-zero": "وون كوريا الجنوبية", - "displayName-count-one": "وون كوريا الجنوبية", - "displayName-count-two": "وون كوريا الجنوبية", - "displayName-count-few": "وون كوريا الجنوبية", - "displayName-count-many": "وون كوريا الجنوبية", - "displayName-count-other": "وون كوريا الجنوبية", - "symbol": "₩", - "symbol-alt-narrow": "₩" - }, - "KWD": { - "displayName": "دينار كويتي", - "displayName-count-zero": "دينار كويتي", - "displayName-count-one": "دينار كويتي", - "displayName-count-two": "دينار كويتي", - "displayName-count-few": "دينار كويتي", - "displayName-count-many": "دينار كويتي", - "displayName-count-other": "دينار كويتي", - "symbol": "د.ك.‏" - }, - "KYD": { - "displayName": "دولار جزر كيمن", - "displayName-count-zero": "دولار جزر كيمن", - "displayName-count-one": "دولار جزر كيمن", - "displayName-count-two": "دولار جزر كيمن", - "displayName-count-few": "دولار جزر كيمن", - "displayName-count-many": "دولار جزر كيمن", - "displayName-count-other": "دولار جزر كيمن", - "symbol": "KYD", - "symbol-alt-narrow": "KY$" - }, - "KZT": { - "displayName": "تينغ كازاخستاني", - "displayName-count-zero": "تينغ كازاخستاني", - "displayName-count-one": "تينغ كازاخستاني", - "displayName-count-two": "تينغ كازاخستاني", - "displayName-count-few": "تينغ كازاخستاني", - "displayName-count-many": "تينغ كازاخستاني", - "displayName-count-other": "تينغ كازاخستاني", - "symbol": "KZT", - "symbol-alt-narrow": "₸" - }, - "LAK": { - "displayName": "كيب لاوسي", - "displayName-count-zero": "كيب لاوسي", - "displayName-count-one": "كيب لاوسي", - "displayName-count-two": "كيب لاوسي", - "displayName-count-few": "كيب لاوسي", - "displayName-count-many": "كيب لاوسي", - "displayName-count-other": "كيب لاوسي", - "symbol": "LAK", - "symbol-alt-narrow": "₭" - }, - "LBP": { - "displayName": "جنيه لبناني", - "displayName-count-zero": "جنيه لبناني", - "displayName-count-one": "جنيه لبناني", - "displayName-count-two": "جنيه لبناني", - "displayName-count-few": "جنيه لبناني", - "displayName-count-many": "جنيه لبناني", - "displayName-count-other": "جنيه لبناني", - "symbol": "ل.ل.‏", - "symbol-alt-narrow": "L£" - }, - "LKR": { - "displayName": "روبية سريلانكية", - "displayName-count-zero": "روبية سريلانكية", - "displayName-count-one": "روبية سريلانكية", - "displayName-count-two": "روبية سريلانكية", - "displayName-count-few": "روبية سريلانكية", - "displayName-count-many": "روبية سريلانكية", - "displayName-count-other": "روبية سريلانكية", - "symbol": "LKR", - "symbol-alt-narrow": "Rs" - }, - "LRD": { - "displayName": "دولار ليبيري", - "displayName-count-zero": "دولار ليبيري", - "displayName-count-one": "دولار ليبيري", - "displayName-count-two": "دولاران ليبيريان", - "displayName-count-few": "دولارات ليبيرية", - "displayName-count-many": "دولارًا ليبيريًا", - "displayName-count-other": "دولار ليبيري", - "symbol": "LRD", - "symbol-alt-narrow": "$" - }, - "LSL": { - "displayName": "لوتي ليسوتو", - "symbol": "LSL" - }, - "LTL": { - "displayName": "ليتا ليتوانية", - "displayName-count-zero": "ليتا ليتوانية", - "displayName-count-one": "ليتا ليتوانية", - "displayName-count-two": "ليتا ليتوانية", - "displayName-count-few": "ليتا ليتوانية", - "displayName-count-many": "ليتا ليتوانية", - "displayName-count-other": "ليتا ليتوانية", - "symbol": "LTL", - "symbol-alt-narrow": "Lt" - }, - "LTT": { - "displayName": "تالوناس ليتواني", - "symbol": "LTT" - }, - "LUC": { - "displayName": "فرنك لوكسمبرج قابل للتحويل", - "symbol": "LUC" - }, - "LUF": { - "displayName": "فرنك لوكسمبرج", - "symbol": "LUF" - }, - "LUL": { - "displayName": "فرنك لوكسمبرج المالي", - "symbol": "LUL" - }, - "LVL": { - "displayName": "لاتس لاتفيا", - "displayName-count-zero": "لاتس لاتفي", - "displayName-count-one": "لاتس لاتفي", - "displayName-count-two": "لاتس لاتفي", - "displayName-count-few": "لاتس لاتفي", - "displayName-count-many": "لاتس لاتفي", - "displayName-count-other": "لاتس لاتفي", - "symbol": "LVL", - "symbol-alt-narrow": "Ls" - }, - "LVR": { - "displayName": "روبل لاتفيا", - "symbol": "LVR" - }, - "LYD": { - "displayName": "دينار ليبي", - "displayName-count-zero": "دينار ليبي", - "displayName-count-one": "دينار ليبي", - "displayName-count-two": "ديناران ليبيان", - "displayName-count-few": "دينارات ليبية", - "displayName-count-many": "دينارًا ليبيًا", - "displayName-count-other": "دينار ليبي", - "symbol": "د.ل.‏" - }, - "MAD": { - "displayName": "درهم مغربي", - "displayName-count-zero": "درهم مغربي", - "displayName-count-one": "درهم مغربي", - "displayName-count-two": "درهمان مغربيان", - "displayName-count-few": "دراهم مغربية", - "displayName-count-many": "درهمًا مغربيًا", - "displayName-count-other": "درهم مغربي", - "symbol": "د.م.‏" - }, - "MAF": { - "displayName": "فرنك مغربي", - "symbol": "MAF" - }, - "MCF": { - "displayName": "MCF", - "symbol": "MCF" - }, - "MDC": { - "displayName": "MDC", - "symbol": "MDC" - }, - "MDL": { - "displayName": "ليو مولدوفي", - "displayName-count-zero": "ليو مولدوفي", - "displayName-count-one": "ليو مولدوفي", - "displayName-count-two": "ليو مولدوفي", - "displayName-count-few": "ليو مولدوفي", - "displayName-count-many": "ليو مولدوفي", - "displayName-count-other": "ليو مولدوفي", - "symbol": "MDL" - }, - "MGA": { - "displayName": "أرياري مدغشقر", - "displayName-count-zero": "أرياري مدغشقر", - "displayName-count-one": "أرياري مدغشقر", - "displayName-count-two": "أرياري مدغشقر", - "displayName-count-few": "أرياري مدغشقر", - "displayName-count-many": "أرياري مدغشقر", - "displayName-count-other": "أرياري مدغشقر", - "symbol": "MGA", - "symbol-alt-narrow": "Ar" - }, - "MGF": { - "displayName": "فرنك مدغشقر", - "symbol": "MGF" - }, - "MKD": { - "displayName": "دينار مقدوني", - "displayName-count-zero": "دينار مقدوني", - "displayName-count-one": "دينار مقدوني", - "displayName-count-two": "ديناران مقدونيان", - "displayName-count-few": "دينارات مقدونية", - "displayName-count-many": "دينارًا مقدونيًا", - "displayName-count-other": "دينار مقدوني", - "symbol": "MKD" - }, - "MKN": { - "displayName": "MKN", - "symbol": "MKN" - }, - "MLF": { - "displayName": "فرنك مالي", - "symbol": "MLF" - }, - "MMK": { - "displayName": "كيات ميانمار", - "displayName-count-zero": "كيات ميانمار", - "displayName-count-one": "كيات ميانمار", - "displayName-count-two": "كيات ميانمار", - "displayName-count-few": "كيات ميانمار", - "displayName-count-many": "كيات ميانمار", - "displayName-count-other": "كيات ميانمار", - "symbol": "MMK", - "symbol-alt-narrow": "K" - }, - "MNT": { - "displayName": "توغروغ منغولي", - "displayName-count-zero": "توغروغ منغولي", - "displayName-count-one": "توغروغ منغولي", - "displayName-count-two": "توغروغ منغولي", - "displayName-count-few": "توغروغ منغولي", - "displayName-count-many": "توغروغ منغولي", - "displayName-count-other": "توغروغ منغولي", - "symbol": "MNT", - "symbol-alt-narrow": "₮" - }, - "MOP": { - "displayName": "باتاكا ماكاوي", - "displayName-count-zero": "باتاكا ماكاوي", - "displayName-count-one": "باتاكا ماكاوي", - "displayName-count-two": "باتاكا ماكاوي", - "displayName-count-few": "باتاكا ماكاوي", - "displayName-count-many": "باتاكا ماكاوي", - "displayName-count-other": "باتاكا ماكاوي", - "symbol": "MOP" - }, - "MRO": { - "displayName": "أوقية موريتانية", - "displayName-count-zero": "أوقية موريتانية", - "displayName-count-one": "أوقية موريتانية", - "displayName-count-two": "أوقية موريتانية", - "displayName-count-few": "أوقية موريتانية", - "displayName-count-many": "أوقية موريتانية", - "displayName-count-other": "أوقية موريتانية", - "symbol": "أ.م.‏" - }, - "MTL": { - "displayName": "ليرة مالطية", - "symbol": "MTL" - }, - "MTP": { - "displayName": "جنيه مالطي", - "symbol": "MTP" - }, - "MUR": { - "displayName": "روبية موريشيوسية", - "displayName-count-zero": "روبية موريشيوسية", - "displayName-count-one": "روبية موريشيوسية", - "displayName-count-two": "روبية موريشيوسية", - "displayName-count-few": "روبية موريشيوسية", - "displayName-count-many": "روبية موريشيوسية", - "displayName-count-other": "روبية موريشيوسية", - "symbol": "MUR", - "symbol-alt-narrow": "Rs" - }, - "MVR": { - "displayName": "روفيه جزر المالديف", - "displayName-count-zero": "روفيه جزر المالديف", - "displayName-count-one": "روفيه جزر المالديف", - "displayName-count-two": "روفيه جزر المالديف", - "displayName-count-few": "روفيه جزر المالديف", - "displayName-count-many": "روفيه جزر المالديف", - "displayName-count-other": "روفيه جزر المالديف", - "symbol": "MVR" - }, - "MWK": { - "displayName": "كواشا مالاوي", - "displayName-count-zero": "كواشا مالاوي", - "displayName-count-one": "كواشا مالاوي", - "displayName-count-two": "كواشا مالاوي", - "displayName-count-few": "كواشا مالاوي", - "displayName-count-many": "كواشا مالاوي", - "displayName-count-other": "كواشا مالاوي", - "symbol": "MWK" - }, - "MXN": { - "displayName": "بيزو مكسيكي", - "displayName-count-zero": "بيزو مكسيكي", - "displayName-count-one": "بيزو مكسيكي", - "displayName-count-two": "بيزو مكسيكي", - "displayName-count-few": "بيزو مكسيكي", - "displayName-count-many": "بيزو مكسيكي", - "displayName-count-other": "بيزو مكسيكي", - "symbol": "MX$", - "symbol-alt-narrow": "MX$" - }, - "MXP": { - "displayName": "بيزو فضي مكسيكي - 1861-1992", - "symbol": "MXP" - }, - "MXV": { - "displayName": "MXV", - "symbol": "MXV" - }, - "MYR": { - "displayName": "رينغيت ماليزي", - "displayName-count-zero": "رينغيت ماليزي", - "displayName-count-one": "رينغيت ماليزي", - "displayName-count-two": "رينغيت ماليزي", - "displayName-count-few": "رينغيت ماليزي", - "displayName-count-many": "رينغيت ماليزي", - "displayName-count-other": "رينغيت ماليزي", - "symbol": "MYR", - "symbol-alt-narrow": "RM" - }, - "MZE": { - "displayName": "اسكود موزمبيقي", - "symbol": "MZE" - }, - "MZM": { - "displayName": "MZM", - "symbol": "MZM" - }, - "MZN": { - "displayName": "متكال موزمبيقي", - "displayName-count-zero": "متكال موزمبيقي", - "displayName-count-one": "متكال موزمبيقي", - "displayName-count-two": "متكال موزمبيقي", - "displayName-count-few": "متكال موزمبيقي", - "displayName-count-many": "متكال موزمبيقي", - "displayName-count-other": "متكال موزمبيقي", - "symbol": "MZN" - }, - "NAD": { - "displayName": "دولار ناميبي", - "displayName-count-zero": "دولار ناميبي", - "displayName-count-one": "دولار ناميبي", - "displayName-count-two": "دولار ناميبي", - "displayName-count-few": "دولار ناميبي", - "displayName-count-many": "دولار ناميبي", - "displayName-count-other": "دولار ناميبي", - "symbol": "NAD", - "symbol-alt-narrow": "$" - }, - "NGN": { - "displayName": "نايرا نيجيري", - "displayName-count-zero": "نايرا نيجيري", - "displayName-count-one": "نايرا نيجيري", - "displayName-count-two": "نايرا نيجيري", - "displayName-count-few": "نايرا نيجيري", - "displayName-count-many": "نايرا نيجيري", - "displayName-count-other": "نايرا نيجيري", - "symbol": "NGN", - "symbol-alt-narrow": "₦" - }, - "NIC": { - "displayName": "كوردوبة نيكاراجوا", - "symbol": "NIC" - }, - "NIO": { - "displayName": "قرطبة نيكاراغوا", - "displayName-count-zero": "قرطبة نيكاراغوا", - "displayName-count-one": "قرطبة نيكاراغوا", - "displayName-count-two": "قرطبة نيكاراغوا", - "displayName-count-few": "قرطبة نيكاراغوا", - "displayName-count-many": "قرطبة نيكاراغوا", - "displayName-count-other": "قرطبة نيكاراغوا", - "symbol": "NIO", - "symbol-alt-narrow": "C$" - }, - "NLG": { - "displayName": "جلدر هولندي", - "symbol": "NLG" - }, - "NOK": { - "displayName": "كرونة نرويجية", - "displayName-count-zero": "كرونة نرويجية", - "displayName-count-one": "كرونة نرويجية", - "displayName-count-two": "كرونة نرويجية", - "displayName-count-few": "كرونة نرويجية", - "displayName-count-many": "كرونة نرويجية", - "displayName-count-other": "كرونة نرويجية", - "symbol": "NOK", - "symbol-alt-narrow": "kr" - }, - "NPR": { - "displayName": "روبية نيبالي", - "displayName-count-zero": "روبية نيبالي", - "displayName-count-one": "روبية نيبالي", - "displayName-count-two": "روبية نيبالي", - "displayName-count-few": "روبية نيبالي", - "displayName-count-many": "روبية نيبالي", - "displayName-count-other": "روبية نيبالي", - "symbol": "NPR", - "symbol-alt-narrow": "Rs" - }, - "NZD": { - "displayName": "دولار نيوزيلندي", - "displayName-count-zero": "دولار نيوزيلندي", - "displayName-count-one": "دولار نيوزيلندي", - "displayName-count-two": "دولار نيوزيلندي", - "displayName-count-few": "دولار نيوزيلندي", - "displayName-count-many": "دولار نيوزيلندي", - "displayName-count-other": "دولار نيوزيلندي", - "symbol": "NZ$", - "symbol-alt-narrow": "NZ$" - }, - "OMR": { - "displayName": "ريال عماني", - "displayName-count-zero": "ريال عماني", - "displayName-count-one": "ريال عماني", - "displayName-count-two": "ريال عماني", - "displayName-count-few": "ريال عماني", - "displayName-count-many": "ريال عماني", - "displayName-count-other": "ريال عماني", - "symbol": "ر.ع.‏" - }, - "PAB": { - "displayName": "بالبوا بنمي", - "displayName-count-zero": "بالبوا بنمي", - "displayName-count-one": "بالبوا بنمي", - "displayName-count-two": "بالبوا بنمي", - "displayName-count-few": "بالبوا بنمي", - "displayName-count-many": "بالبوا بنمي", - "displayName-count-other": "بالبوا بنمي", - "symbol": "PAB" - }, - "PEI": { - "displayName": "PEI", - "symbol": "PEI" - }, - "PEN": { - "displayName": "سول البيرو", - "displayName-count-zero": "سول البيرو", - "displayName-count-one": "سول البيرو", - "displayName-count-two": "سول البيرو", - "displayName-count-few": "سول البيرو", - "displayName-count-many": "سول البيرو", - "displayName-count-other": "سول البيرو", - "symbol": "PEN" - }, - "PES": { - "displayName": "PES", - "symbol": "PES" - }, - "PGK": { - "displayName": "كينا بابوا غينيا الجديدة", - "displayName-count-zero": "كينا بابوا غينيا الجديدة", - "displayName-count-one": "كينا بابوا غينيا الجديدة", - "displayName-count-two": "كينا بابوا غينيا الجديدة", - "displayName-count-few": "كينا بابوا غينيا الجديدة", - "displayName-count-many": "كينا بابوا غينيا الجديدة", - "displayName-count-other": "كينا بابوا غينيا الجديدة", - "symbol": "PGK" - }, - "PHP": { - "displayName": "بيزو فلبيني", - "displayName-count-zero": "بيزو فلبيني", - "displayName-count-one": "بيزو فلبيني", - "displayName-count-two": "بيزو فلبيني", - "displayName-count-few": "بيزو فلبيني", - "displayName-count-many": "بيزو فلبيني", - "displayName-count-other": "بيزو فلبيني", - "symbol": "PHP", - "symbol-alt-narrow": "₱" - }, - "PKR": { - "displayName": "روبية باكستاني", - "displayName-count-zero": "روبية باكستاني", - "displayName-count-one": "روبية باكستاني", - "displayName-count-two": "روبية باكستاني", - "displayName-count-few": "روبية باكستاني", - "displayName-count-many": "روبية باكستاني", - "displayName-count-other": "روبية باكستاني", - "symbol": "PKR", - "symbol-alt-narrow": "Rs" - }, - "PLN": { - "displayName": "زلوتي بولندي", - "displayName-count-zero": "زلوتي بولندي", - "displayName-count-one": "زلوتي بولندي", - "displayName-count-two": "زلوتي بولندي", - "displayName-count-few": "زلوتي بولندي", - "displayName-count-many": "زلوتي بولندي", - "displayName-count-other": "زلوتي بولندي", - "symbol": "PLN", - "symbol-alt-narrow": "zł" - }, - "PLZ": { - "displayName": "زلوتي بولندي - 1950-1995", - "symbol": "PLZ" - }, - "PTE": { - "displayName": "اسكود برتغالي", - "symbol": "PTE" - }, - "PYG": { - "displayName": "جواراني باراجواي", - "displayName-count-zero": "جواراني باراجواي", - "displayName-count-one": "جواراني باراجواي", - "displayName-count-two": "جواراني باراجواي", - "displayName-count-few": "جواراني باراجواي", - "displayName-count-many": "جواراني باراجواي", - "displayName-count-other": "جواراني باراجواي", - "symbol": "PYG", - "symbol-alt-narrow": "₲" - }, - "QAR": { - "displayName": "ريال قطري", - "displayName-count-zero": "ريال قطري", - "displayName-count-one": "ريال قطري", - "displayName-count-two": "ريال قطري", - "displayName-count-few": "ريال قطري", - "displayName-count-many": "ريال قطري", - "displayName-count-other": "ريال قطري", - "symbol": "ر.ق.‏" - }, - "RHD": { - "displayName": "دولار روديسي", - "symbol": "RHD" - }, - "ROL": { - "displayName": "ليو روماني قديم", - "symbol": "ROL" - }, - "RON": { - "displayName": "ليو روماني", - "displayName-count-zero": "ليو روماني", - "displayName-count-one": "ليو روماني", - "displayName-count-two": "ليو روماني", - "displayName-count-few": "ليو روماني", - "displayName-count-many": "ليو روماني", - "displayName-count-other": "ليو روماني", - "symbol": "RON", - "symbol-alt-narrow": "lei" - }, - "RSD": { - "displayName": "دينار صربي", - "displayName-count-zero": "دينار صربي", - "displayName-count-one": "دينار صربي", - "displayName-count-two": "ديناران صربيان", - "displayName-count-few": "دينارات صربية", - "displayName-count-many": "دينارًا صربيًا", - "displayName-count-other": "دينار صربي", - "symbol": "RSD" - }, - "RUB": { - "displayName": "روبل روسي", - "displayName-count-zero": "روبل روسي", - "displayName-count-one": "روبل روسي", - "displayName-count-two": "روبل روسي", - "displayName-count-few": "روبل روسي", - "displayName-count-many": "روبل روسي", - "displayName-count-other": "روبل روسي", - "symbol": "RUB", - "symbol-alt-narrow": "₽" - }, - "RUR": { - "displayName": "روبل روسي - 1991-1998", - "symbol": "RUR", - "symbol-alt-narrow": "р." - }, - "RWF": { - "displayName": "فرنك رواندي", - "displayName-count-zero": "فرنك رواندي", - "displayName-count-one": "فرنك رواندي", - "displayName-count-two": "فرنك رواندي", - "displayName-count-few": "فرنك رواندي", - "displayName-count-many": "فرنك رواندي", - "displayName-count-other": "فرنك رواندي", - "symbol": "RWF", - "symbol-alt-narrow": "RF" - }, - "SAR": { - "displayName": "ريال سعودي", - "displayName-count-zero": "ريال سعودي", - "displayName-count-one": "ريال سعودي", - "displayName-count-two": "ريال سعودي", - "displayName-count-few": "ريال سعودي", - "displayName-count-many": "ريال سعودي", - "displayName-count-other": "ريال سعودي", - "symbol": "ر.س.‏" - }, - "SBD": { - "displayName": "دولار جزر سليمان", - "displayName-count-zero": "دولار جزر سليمان", - "displayName-count-one": "دولار جزر سليمان", - "displayName-count-two": "دولار جزر سليمان", - "displayName-count-few": "دولار جزر سليمان", - "displayName-count-many": "دولار جزر سليمان", - "displayName-count-other": "دولار جزر سليمان", - "symbol": "SBD", - "symbol-alt-narrow": "SB$" - }, - "SCR": { - "displayName": "روبية سيشيلية", - "displayName-count-zero": "روبية سيشيلية", - "displayName-count-one": "روبية سيشيلية", - "displayName-count-two": "روبية سيشيلية", - "displayName-count-few": "روبية سيشيلية", - "displayName-count-many": "روبية سيشيلية", - "displayName-count-other": "روبية سيشيلية", - "symbol": "SCR" - }, - "SDD": { - "displayName": "دينار سوداني", - "symbol": "د.س.‏" - }, - "SDG": { - "displayName": "جنيه سوداني", - "displayName-count-zero": "جنيه سوداني", - "displayName-count-one": "جنيه سوداني", - "displayName-count-two": "جنيه سوداني", - "displayName-count-few": "جنيهات سودانية", - "displayName-count-many": "جنيهًا سودانيًا", - "displayName-count-other": "جنيه سوداني", - "symbol": "ج.س." - }, - "SDP": { - "displayName": "جنيه سوداني قديم", - "symbol": "SDP" - }, - "SEK": { - "displayName": "كرونة سويدية", - "displayName-count-zero": "كرونة سويدية", - "displayName-count-one": "كرونة سويدية", - "displayName-count-two": "كرونة سويدية", - "displayName-count-few": "كرونة سويدية", - "displayName-count-many": "كرونة سويدية", - "displayName-count-other": "كرونة سويدية", - "symbol": "SEK", - "symbol-alt-narrow": "kr" - }, - "SGD": { - "displayName": "دولار سنغافوري", - "displayName-count-zero": "دولار سنغافوري", - "displayName-count-one": "دولار سنغافوري", - "displayName-count-two": "دولار سنغافوري", - "displayName-count-few": "دولار سنغافوري", - "displayName-count-many": "دولار سنغافوري", - "displayName-count-other": "دولار سنغافوري", - "symbol": "SGD", - "symbol-alt-narrow": "$" - }, - "SHP": { - "displayName": "جنيه سانت هيلين", - "displayName-count-zero": "جنيه سانت هيلين", - "displayName-count-one": "جنيه سانت هيلين", - "displayName-count-two": "جنيه سانت هيلين", - "displayName-count-few": "جنيه سانت هيلين", - "displayName-count-many": "جنيه سانت هيلين", - "displayName-count-other": "جنيه سانت هيلين", - "symbol": "SHP", - "symbol-alt-narrow": "£" - }, - "SIT": { - "displayName": "تولار سلوفيني", - "symbol": "SIT" - }, - "SKK": { - "displayName": "كرونة سلوفاكية", - "symbol": "SKK" - }, - "SLL": { - "displayName": "ليون سيراليوني", - "displayName-count-zero": "ليون سيراليوني", - "displayName-count-one": "ليون سيراليوني", - "displayName-count-two": "ليون سيراليوني", - "displayName-count-few": "ليون سيراليوني", - "displayName-count-many": "ليون سيراليوني", - "displayName-count-other": "ليون سيراليوني", - "symbol": "SLL" - }, - "SOS": { - "displayName": "شلن صومالي", - "displayName-count-zero": "شلن صومالي", - "displayName-count-one": "شلن صومالي", - "displayName-count-two": "شلن صومالي", - "displayName-count-few": "شلن صومالي", - "displayName-count-many": "شلن صومالي", - "displayName-count-other": "شلن صومالي", - "symbol": "SOS" - }, - "SRD": { - "displayName": "دولار سورينامي", - "displayName-count-zero": "دولار سورينامي", - "displayName-count-one": "دولار سورينامي", - "displayName-count-two": "دولار سورينامي", - "displayName-count-few": "دولار سورينامي", - "displayName-count-many": "دولار سورينامي", - "displayName-count-other": "دولار سورينامي", - "symbol": "SRD", - "symbol-alt-narrow": "SR$" - }, - "SRG": { - "displayName": "جلدر سورينامي", - "symbol": "SRG" - }, - "SSP": { - "displayName": "جنيه جنوب السودان", - "displayName-count-zero": "جنيه جنوب السودان", - "displayName-count-one": "جنيه جنوب السودان", - "displayName-count-two": "جنيهان جنوب السودان", - "displayName-count-few": "جنيهات جنوب السودان", - "displayName-count-many": "جنيهًا جنوب السودان", - "displayName-count-other": "جنيه جنوب السودان", - "symbol": "SSP", - "symbol-alt-narrow": "£" - }, - "STD": { - "displayName": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-zero": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-one": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-two": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-few": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-many": "دوبرا ساو تومي وبرينسيبي", - "displayName-count-other": "دوبرا ساو تومي وبرينسيبي", - "symbol": "STD", - "symbol-alt-narrow": "Db" - }, - "SUR": { - "displayName": "روبل سوفيتي", - "symbol": "SUR" - }, - "SVC": { - "displayName": "كولون سلفادوري", - "symbol": "SVC" - }, - "SYP": { - "displayName": "ليرة سورية", - "displayName-count-zero": "ليرة سورية", - "displayName-count-one": "ليرة سورية", - "displayName-count-two": "ليرة سورية", - "displayName-count-few": "ليرة سورية", - "displayName-count-many": "ليرة سورية", - "displayName-count-other": "ليرة سورية", - "symbol": "ل.س.‏", - "symbol-alt-narrow": "£" - }, - "SZL": { - "displayName": "ليلانجيني سوازيلندي", - "displayName-count-zero": "ليلانجيني سوازيلندي", - "displayName-count-one": "ليلانجيني سوازيلندي", - "displayName-count-two": "ليلانجيني سوازيلندي", - "displayName-count-few": "ليلانجيني سوازيلندي", - "displayName-count-many": "ليلانجيني سوازيلندي", - "displayName-count-other": "ليلانجيني سوازيلندي", - "symbol": "SZL" - }, - "THB": { - "displayName": "باخت تايلاندي", - "displayName-count-zero": "باخت تايلاندي", - "displayName-count-one": "باخت تايلاندي", - "displayName-count-two": "باخت تايلاندي", - "displayName-count-few": "باخت تايلاندي", - "displayName-count-many": "باخت تايلاندي", - "displayName-count-other": "باخت تايلاندي", - "symbol": "฿", - "symbol-alt-narrow": "฿" - }, - "TJR": { - "displayName": "روبل طاجيكستاني", - "symbol": "TJR" - }, - "TJS": { - "displayName": "سوموني طاجيكستاني", - "displayName-count-zero": "سوموني طاجيكستاني", - "displayName-count-one": "سوموني طاجيكستاني", - "displayName-count-two": "سوموني طاجيكستاني", - "displayName-count-few": "سوموني طاجيكستاني", - "displayName-count-many": "سوموني طاجيكستاني", - "displayName-count-other": "سوموني طاجيكستاني", - "symbol": "TJS" - }, - "TMM": { - "displayName": "مانات تركمنستاني", - "symbol": "TMM" - }, - "TMT": { - "displayName": "مانات تركمانستان", - "displayName-count-zero": "مانات تركمانستان", - "displayName-count-one": "مانات تركمانستان", - "displayName-count-two": "مانات تركمانستان", - "displayName-count-few": "مانات تركمانستان", - "displayName-count-many": "مانات تركمانستان", - "displayName-count-other": "مانات تركمانستان", - "symbol": "TMT" - }, - "TND": { - "displayName": "دينار تونسي", - "displayName-count-zero": "دينار تونسي", - "displayName-count-one": "دينار تونسي", - "displayName-count-two": "ديناران تونسيان", - "displayName-count-few": "دينارات تونسية", - "displayName-count-many": "دينارًا تونسيًا", - "displayName-count-other": "دينار تونسي", - "symbol": "د.ت.‏" - }, - "TOP": { - "displayName": "بانغا تونغا", - "displayName-count-zero": "بانغا تونغا", - "displayName-count-one": "بانغا تونغا", - "displayName-count-two": "بانغا تونغا", - "displayName-count-few": "بانغا تونغا", - "displayName-count-many": "بانغا تونغا", - "displayName-count-other": "بانغا تونغا", - "symbol": "TOP", - "symbol-alt-narrow": "T$" - }, - "TPE": { - "displayName": "اسكود تيموري", - "symbol": "TPE" - }, - "TRL": { - "displayName": "ليرة تركي", - "symbol": "TRL" - }, - "TRY": { - "displayName": "ليرة تركية", - "displayName-count-zero": "ليرة تركية", - "displayName-count-one": "ليرة تركية", - "displayName-count-two": "ليرة تركية", - "displayName-count-few": "ليرة تركية", - "displayName-count-many": "ليرة تركية", - "displayName-count-other": "ليرة تركية", - "symbol": "TRY", - "symbol-alt-narrow": "₺", - "symbol-alt-variant": "TL" - }, - "TTD": { - "displayName": "دولار ترينداد وتوباجو", - "displayName-count-zero": "دولار ترينداد وتوباجو", - "displayName-count-one": "دولار ترينداد وتوباجو", - "displayName-count-two": "دولار ترينداد وتوباجو", - "displayName-count-few": "دولار ترينداد وتوباجو", - "displayName-count-many": "دولار ترينداد وتوباجو", - "displayName-count-other": "دولار ترينداد وتوباجو", - "symbol": "TTD", - "symbol-alt-narrow": "TT$" - }, - "TWD": { - "displayName": "دولار تايواني", - "displayName-count-zero": "دولار تايواني", - "displayName-count-one": "دولار تايواني", - "displayName-count-two": "دولار تايواني", - "displayName-count-few": "دولار تايواني", - "displayName-count-many": "دولار تايواني", - "displayName-count-other": "دولار تايواني", - "symbol": "NT$", - "symbol-alt-narrow": "NT$" - }, - "TZS": { - "displayName": "شلن تنزاني", - "displayName-count-zero": "شلن تنزاني", - "displayName-count-one": "شلن تنزاني", - "displayName-count-two": "شلن تنزاني", - "displayName-count-few": "شلن تنزاني", - "displayName-count-many": "شلن تنزاني", - "displayName-count-other": "شلن تنزاني", - "symbol": "TZS" - }, - "UAH": { - "displayName": "هريفنيا أوكراني", - "displayName-count-zero": "هريفنيا أوكراني", - "displayName-count-one": "هريفنيا أوكراني", - "displayName-count-two": "هريفنيا أوكراني", - "displayName-count-few": "هريفنيا أوكراني", - "displayName-count-many": "هريفنيا أوكراني", - "displayName-count-other": "هريفنيا أوكراني", - "symbol": "UAH", - "symbol-alt-narrow": "₴" - }, - "UAK": { - "displayName": "UAK", - "symbol": "UAK" - }, - "UGS": { - "displayName": "شلن أوغندي - 1966-1987", - "symbol": "UGS" - }, - "UGX": { - "displayName": "شلن أوغندي", - "displayName-count-zero": "شلن أوغندي", - "displayName-count-one": "شلن أوغندي", - "displayName-count-two": "شلن أوغندي", - "displayName-count-few": "شلن أوغندي", - "displayName-count-many": "شلن أوغندي", - "displayName-count-other": "شلن أوغندي", - "symbol": "UGX" - }, - "USD": { - "displayName": "دولار أمريكي", - "displayName-count-zero": "دولار أمريكي", - "displayName-count-one": "دولار أمريكي", - "displayName-count-two": "دولار أمريكي", - "displayName-count-few": "دولار أمريكي", - "displayName-count-many": "دولار أمريكي", - "displayName-count-other": "دولار أمريكي", - "symbol": "US$", - "symbol-alt-narrow": "US$" - }, - "USN": { - "displayName": "دولار أمريكي (اليوم التالي)‏", - "symbol": "USN" - }, - "USS": { - "displayName": "دولار أمريكي (نفس اليوم)‏", - "symbol": "USS" - }, - "UYI": { - "displayName": "UYI", - "symbol": "UYI" - }, - "UYP": { - "displayName": "بيزو أوروجواي - 1975-1993", - "symbol": "UYP" - }, - "UYU": { - "displayName": "بيزو اوروغواي", - "displayName-count-zero": "بيزو اوروغواي", - "displayName-count-one": "بيزو اوروغواي", - "displayName-count-two": "بيزو اوروغواي", - "displayName-count-few": "بيزو اوروغواي", - "displayName-count-many": "بيزو اوروغواي", - "displayName-count-other": "بيزو اوروغواي", - "symbol": "UYU", - "symbol-alt-narrow": "UY$" - }, - "UZS": { - "displayName": "سوم أوزبكستاني", - "displayName-count-zero": "سوم أوزبكستاني", - "displayName-count-one": "سوم أوزبكستاني", - "displayName-count-two": "سوم أوزبكستاني", - "displayName-count-few": "سوم أوزبكستاني", - "displayName-count-many": "سوم أوزبكستاني", - "displayName-count-other": "سوم أوزبكستاني", - "symbol": "UZS" - }, - "VEB": { - "displayName": "بوليفار فنزويلي - 1871-2008", - "symbol": "VEB" - }, - "VEF": { - "displayName": "بوليفار فنزويلي", - "displayName-count-zero": "بوليفار فنزويلي", - "displayName-count-one": "بوليفار فنزويلي", - "displayName-count-two": "بوليفار فنزويلي", - "displayName-count-few": "بوليفار فنزويلي", - "displayName-count-many": "بوليفار فنزويلي", - "displayName-count-other": "بوليفار فنزويلي", - "symbol": "VEF", - "symbol-alt-narrow": "Bs" - }, - "VND": { - "displayName": "دونج فيتنامي", - "displayName-count-zero": "دونج فيتنامي", - "displayName-count-one": "دونج فيتنامي", - "displayName-count-two": "دونج فيتنامي", - "displayName-count-few": "دونج فيتنامي", - "displayName-count-many": "دونج فيتنامي", - "displayName-count-other": "دونج فيتنامي", - "symbol": "₫", - "symbol-alt-narrow": "₫" - }, - "VNN": { - "displayName": "VNN", - "symbol": "VNN" - }, - "VUV": { - "displayName": "فاتو فانواتو", - "displayName-count-zero": "فاتو فانواتو", - "displayName-count-one": "فاتو فانواتو", - "displayName-count-two": "فاتو فانواتو", - "displayName-count-few": "فاتو فانواتو", - "displayName-count-many": "فاتو فانواتو", - "displayName-count-other": "فاتو فانواتو", - "symbol": "VUV" - }, - "WST": { - "displayName": "تالا ساموا", - "displayName-count-zero": "تالا ساموا", - "displayName-count-one": "تالا ساموا", - "displayName-count-two": "تالا ساموا", - "displayName-count-few": "تالا ساموا", - "displayName-count-many": "تالا ساموا", - "displayName-count-other": "تالا ساموا", - "symbol": "WST" - }, - "XAF": { - "displayName": "فرنك وسط أفريقي", - "displayName-count-zero": "فرنك وسط أفريقي", - "displayName-count-one": "فرنك وسط أفريقي", - "displayName-count-two": "فرنك وسط أفريقي", - "displayName-count-few": "فرنك وسط أفريقي", - "displayName-count-many": "فرنك وسط أفريقي", - "displayName-count-other": "فرنك وسط أفريقي", - "symbol": "FCFA" - }, - "XAG": { - "displayName": "فضة", - "symbol": "XAG" - }, - "XAU": { - "displayName": "ذهب", - "symbol": "XAU" - }, - "XBA": { - "displayName": "الوحدة الأوروبية المركبة", - "symbol": "XBA" - }, - "XBB": { - "displayName": "الوحدة المالية الأوروبية", - "symbol": "XBB" - }, - "XBC": { - "displayName": "الوحدة الحسابية الأوروبية", - "symbol": "XBC" - }, - "XBD": { - "displayName": "(XBD)وحدة الحساب الأوروبية", - "symbol": "XBD" - }, - "XCD": { - "displayName": "دولار شرق الكاريبي", - "displayName-count-zero": "دولار شرق الكاريبي", - "displayName-count-one": "دولار شرق الكاريبي", - "displayName-count-two": "دولار شرق الكاريبي", - "displayName-count-few": "دولار شرق الكاريبي", - "displayName-count-many": "دولار شرق الكاريبي", - "displayName-count-other": "دولار شرق الكاريبي", - "symbol": "EC$", - "symbol-alt-narrow": "$" - }, - "XDR": { - "displayName": "حقوق السحب الخاصة", - "symbol": "XDR" - }, - "XEU": { - "displayName": "وحدة النقد الأوروبية", - "symbol": "XEU" - }, - "XFO": { - "displayName": "فرنك فرنسي ذهبي", - "symbol": "XFO" - }, - "XFU": { - "displayName": "(UIC)فرنك فرنسي", - "symbol": "XFU" - }, - "XOF": { - "displayName": "فرنك غرب أفريقي", - "displayName-count-zero": "فرنك غرب أفريقي", - "displayName-count-one": "فرنك غرب أفريقي", - "displayName-count-two": "فرنك غرب أفريقي", - "displayName-count-few": "فرنك غرب أفريقي", - "displayName-count-many": "فرنك غرب أفريقي", - "displayName-count-other": "فرنك غرب أفريقي", - "symbol": "CFA" - }, - "XPD": { - "displayName": "بالاديوم", - "symbol": "XPD" - }, - "XPF": { - "displayName": "فرنك سي إف بي", - "displayName-count-zero": "فرنك سي إف بي", - "displayName-count-one": "فرنك سي إف بي", - "displayName-count-two": "فرنك سي إف بي", - "displayName-count-few": "فرنك سي إف بي", - "displayName-count-many": "فرنك سي إف بي", - "displayName-count-other": "فرنك سي إف بي", - "symbol": "CFPF" - }, - "XPT": { - "displayName": "البلاتين", - "symbol": "XPT" - }, - "XRE": { - "displayName": "XRE", - "symbol": "XRE" - }, - "XSU": { - "displayName": "XSU", - "symbol": "XSU" - }, - "XTS": { - "displayName": "كود اختبار العملة", - "symbol": "XTS" - }, - "XUA": { - "displayName": "XUA", - "symbol": "XUA" - }, - "XXX": { - "displayName": "عملة غير معروفة", - "displayName-count-zero": "(عملة غير معروفة)", - "displayName-count-one": "(عملة غير معروفة)", - "displayName-count-two": "(عملة غير معروفة)", - "displayName-count-few": "(عملة غير معروفة)", - "displayName-count-many": "(عملة غير معروفة)", - "displayName-count-other": "(عملة غير معروفة)", - "symbol": "***" - }, - "YDD": { - "displayName": "دينار يمني", - "symbol": "YDD" - }, - "YER": { - "displayName": "ريال يمني", - "displayName-count-zero": "ريال يمني", - "displayName-count-one": "ريال يمني", - "displayName-count-two": "ريال يمني", - "displayName-count-few": "ريال يمني", - "displayName-count-many": "ريال يمني", - "displayName-count-other": "ريال يمني", - "symbol": "ر.ي.‏" - }, - "YUD": { - "displayName": "دينار يوغسلافي", - "symbol": "YUD" - }, - "YUM": { - "displayName": "YUM", - "symbol": "YUM" - }, - "YUN": { - "displayName": "دينار يوغسلافي قابل للتحويل", - "symbol": "YUN" - }, - "YUR": { - "displayName": "YUR", - "symbol": "YUR" - }, - "ZAL": { - "displayName": "راند جنوب أفريقيا -مالي", - "symbol": "ZAL" - }, - "ZAR": { - "displayName": "راند جنوب أفريقيا", - "displayName-count-zero": "راند جنوب أفريقيا", - "displayName-count-one": "راند جنوب أفريقيا", - "displayName-count-two": "راند جنوب أفريقيا", - "displayName-count-few": "راند جنوب أفريقيا", - "displayName-count-many": "راند جنوب أفريقيا", - "displayName-count-other": "راند جنوب أفريقيا", - "symbol": "ZAR", - "symbol-alt-narrow": "R" - }, - "ZMK": { - "displayName": "كواشا زامبي - 1968-2012", - "displayName-count-zero": "كواشا زامبي - 1968-2012", - "displayName-count-one": "كواشا زامبي - 1968-2012", - "displayName-count-two": "كواشا زامبي - 1968-2012", - "displayName-count-few": "كواشا زامبي - 1968-2012", - "displayName-count-many": "كواشا زامبي - 1968-2012", - "displayName-count-other": "كواشا زامبي - 1968-2012", - "symbol": "ZMK" - }, - "ZMW": { - "displayName": "كواشا زامبي", - "displayName-count-zero": "كواشا زامبي", - "displayName-count-one": "كواشا زامبي", - "displayName-count-two": "كواشا زامبي", - "displayName-count-few": "كواشا زامبي", - "displayName-count-many": "كواشا زامبي", - "displayName-count-other": "كواشا زامبي", - "symbol": "ZMW", - "symbol-alt-narrow": "ZK" + "generic": "توقيت لورد هاو", + "standard": "توقيت لورد هاو الرسمي", + "daylight": "التوقيت الصيفي للورد هاو" + } + }, + "Macquarie": { + "long": { + "standard": "توقيت ماكواري" + } + }, + "Magadan": { + "long": { + "generic": "توقيت ماغادان", + "standard": "توقيت ماغادان الرسمي", + "daylight": "توقيت ماغادان الصيفي" + } + }, + "Malaysia": { + "long": { + "standard": "توقيت ماليزيا" + } + }, + "Maldives": { + "long": { + "standard": "توقيت الـمالديف" + } + }, + "Marquesas": { + "long": { + "standard": "توقيت ماركيساس" + } + }, + "Marshall_Islands": { + "long": { + "standard": "توقيت جزر مارشال" + } + }, + "Mauritius": { + "long": { + "generic": "توقيت موريشيوس", + "standard": "توقيت موريشيوس الرسمي", + "daylight": "توقيت موريشيوس الصيفي" + } + }, + "Mawson": { + "long": { + "standard": "توقيت ماوسون" + } + }, + "Mexico_Northwest": { + "long": { + "generic": "توقيت شمال غرب المكسيك", + "standard": "التوقيت الرسمي لشمال غرب المكسيك", + "daylight": "التوقيت الصيفي لشمال غرب المكسيك" + } + }, + "Mexico_Pacific": { + "long": { + "generic": "توقيت المحيط الهادي للمكسيك", + "standard": "توقيت المحيط الهادي الرسمي للمكسيك", + "daylight": "توقيت المحيط الهادي الصيفي للمكسيك" + } + }, + "Mongolia": { + "long": { + "generic": "توقيت أولان باتور", + "standard": "توقيت أولان باتور الرسمي", + "daylight": "توقيت أولان باتور الصيفي" + } + }, + "Moscow": { + "long": { + "generic": "توقيت موسكو", + "standard": "توقيت موسكو الرسمي", + "daylight": "توقيت موسكو الصيفي" + } + }, + "Myanmar": { + "long": { + "standard": "توقيت ميانمار" + } + }, + "Nauru": { + "long": { + "standard": "توقيت ناورو" + } + }, + "Nepal": { + "long": { + "standard": "توقيت نيبال" + } + }, + "New_Caledonia": { + "long": { + "generic": "توقيت كاليدونيا الجديدة", + "standard": "توقيت كاليدونيا الجديدة الرسمي", + "daylight": "توقيت كاليدونيا الجديدة الصيفي" + } + }, + "New_Zealand": { + "long": { + "generic": "توقيت نيوزيلندا", + "standard": "توقيت نيوزيلندا الرسمي", + "daylight": "توقيت نيوزيلندا الصيفي" + } + }, + "Newfoundland": { + "long": { + "generic": "توقيت نيوفاوندلاند", + "standard": "توقيت نيوفاوندلاند الرسمي", + "daylight": "توقيت نيوفاوندلاند الصيفي" + } + }, + "Niue": { + "long": { + "standard": "توقيت نيوي" + } + }, + "Norfolk": { + "long": { + "standard": "توقيت جزيرة نورفولك" + } + }, + "Noronha": { + "long": { + "generic": "توقيت فيرناندو دي نورونها", + "standard": "توقيت فرناندو دي نورونها الرسمي", + "daylight": "توقيت فرناندو دي نورونها الصيفي" + } + }, + "North_Mariana": { + "long": { + "standard": "توقيت جزر ماريانا الشمالية" + } + }, + "Novosibirsk": { + "long": { + "generic": "توقيت نوفوسيبيرسك", + "standard": "توقيت نوفوسيبيرسك الرسمي", + "daylight": "توقيت نوفوسيبيرسك الصيفي" + } + }, + "Omsk": { + "long": { + "generic": "توقيت أومسك", + "standard": "توقيت أومسك الرسمي", + "daylight": "توقيت أومسك الصيفي" + } + }, + "Pakistan": { + "long": { + "generic": "توقيت باكستان", + "standard": "توقيت باكستان الرسمي", + "daylight": "توقيت باكستان الصيفي" + } + }, + "Palau": { + "long": { + "standard": "توقيت بالاو" + } + }, + "Papua_New_Guinea": { + "long": { + "standard": "توقيت بابوا غينيا الجديدة" + } + }, + "Paraguay": { + "long": { + "generic": "توقيت باراغواي", + "standard": "توقيت باراغواي الرسمي", + "daylight": "توقيت باراغواي الصيفي" + } + }, + "Peru": { + "long": { + "generic": "توقيت بيرو", + "standard": "توقيت بيرو الرسمي", + "daylight": "توقيت بيرو الصيفي" + } + }, + "Philippines": { + "long": { + "generic": "توقيت الفيلبين", + "standard": "توقيت الفيلبين الرسمي", + "daylight": "توقيت الفيلبين الصيفي" + } + }, + "Phoenix_Islands": { + "long": { + "standard": "توقيت جزر فينكس" + } + }, + "Pierre_Miquelon": { + "long": { + "generic": "توقيت سانت بيير وميكولون", + "standard": "توقيت سانت بيير وميكولون الرسمي", + "daylight": "توقيت سانت بيير وميكولون الصيفي" + } + }, + "Pitcairn": { + "long": { + "standard": "توقيت بيتكيرن" + } + }, + "Ponape": { + "long": { + "standard": "توقيت بونابي" + } + }, + "Pyongyang": { + "long": { + "standard": "توقيت بيونغ يانغ" + } + }, + "Reunion": { + "long": { + "standard": "توقيت ريونيون" + } + }, + "Rothera": { + "long": { + "standard": "توقيت روثيرا" + } + }, + "Sakhalin": { + "long": { + "generic": "توقيت ساخالين", + "standard": "توقيت ساخالين الرسمي", + "daylight": "توقيت ساخالين الصيفي" + } + }, + "Samara": { + "long": { + "generic": "توقيت سامارا", + "standard": "توقيت سمارا", + "daylight": "توقيت سمارا الصيفي" + } + }, + "Samoa": { + "long": { + "generic": "توقيت ساموا", + "standard": "توقيت ساموا الرسمي", + "daylight": "توقيت ساموا الصيفي" + } + }, + "Seychelles": { + "long": { + "standard": "توقيت سيشل" + } + }, + "Singapore": { + "long": { + "standard": "توقيت سنغافورة" + } + }, + "Solomon": { + "long": { + "standard": "توقيت جزر سليمان" + } + }, + "South_Georgia": { + "long": { + "standard": "توقيت جنوب جورجيا" + } + }, + "Suriname": { + "long": { + "standard": "توقيت سورينام" + } + }, + "Syowa": { + "long": { + "standard": "توقيت سايووا" + } + }, + "Tahiti": { + "long": { + "standard": "توقيت تاهيتي" + } + }, + "Taipei": { + "long": { + "generic": "توقيت تايبيه", + "standard": "توقيت تايبيه الرسمي", + "daylight": "توقيت تايبيه الصيفي" + } + }, + "Tajikistan": { + "long": { + "standard": "توقيت طاجكستان" + } + }, + "Tokelau": { + "long": { + "standard": "توقيت توكيلاو" + } + }, + "Tonga": { + "long": { + "generic": "توقيت تونغا", + "standard": "توقيت تونغا الرسمي", + "daylight": "توقيت تونغا الصيفي" + } + }, + "Truk": { + "long": { + "standard": "توقيت شوك" + } + }, + "Turkmenistan": { + "long": { + "generic": "توقيت تركمانستان", + "standard": "توقيت تركمانستان الرسمي", + "daylight": "توقيت تركمانستان الصيفي" + } + }, + "Tuvalu": { + "long": { + "standard": "توقيت توفالو" + } + }, + "Uruguay": { + "long": { + "generic": "توقيت أورغواي", + "standard": "توقيت أورغواي الرسمي", + "daylight": "توقيت أورغواي الصيفي" + } + }, + "Uzbekistan": { + "long": { + "generic": "توقيت أوزبكستان", + "standard": "توقيت أوزبكستان الرسمي", + "daylight": "توقيت أوزبكستان الصيفي" + } + }, + "Vanuatu": { + "long": { + "generic": "توقيت فانواتو", + "standard": "توقيت فانواتو الرسمي", + "daylight": "توقيت فانواتو الصيفي" + } + }, + "Venezuela": { + "long": { + "standard": "توقيت فنزويلا" + } + }, + "Vladivostok": { + "long": { + "generic": "توقيت فلاديفوستوك", + "standard": "توقيت فلاديفوستوك الرسمي", + "daylight": "توقيت فلاديفوستوك الصيفي" + } + }, + "Volgograd": { + "long": { + "generic": "توقيت فولغوغراد", + "standard": "توقيت فولغوغراد الرسمي", + "daylight": "توقيت فولغوغراد الصيفي" + } + }, + "Vostok": { + "long": { + "standard": "توقيت فوستوك" + } + }, + "Wake": { + "long": { + "standard": "توقيت جزيرة ويك" + } + }, + "Wallis": { + "long": { + "standard": "توقيت واليس و فوتونا" + } + }, + "Yakutsk": { + "long": { + "generic": "توقيت ياكوتسك", + "standard": "توقيت ياكوتسك الرسمي", + "daylight": "توقيت ياكوتسك الصيفي" + } + }, + "Yekaterinburg": { + "long": { + "generic": "توقيت يكاترينبورغ", + "standard": "توقيت يكاترينبورغ الرسمي", + "daylight": "توقيت يكاترينبورغ الصيفي" + } + } + } + } + }, + "numbers": { + "defaultNumberingSystem": "arab", + "otherNumberingSystems": { + "native": "arab" + }, + "minimumGroupingDigits": "1", + "symbols-numberSystem-arab": { + "decimal": "٫", + "group": "٬", + "list": "؛", + "percentSign": "٪؜", + "plusSign": "؜+", + "minusSign": "؜-", + "exponential": "اس", + "superscriptingExponent": "×", + "perMille": "؉", + "infinity": "∞", + "nan": "ليس رقم", + "timeSeparator": ":" + }, + "symbols-numberSystem-latn": { + "decimal": ".", + "group": ",", + "list": ";", + "percentSign": "‎%‎", + "plusSign": "‎+", + "minusSign": "‎-", + "exponential": "E", + "superscriptingExponent": "×", + "perMille": "‰", + "infinity": "∞", + "nan": "ليس رقمًا", + "timeSeparator": ":" + }, + "decimalFormats-numberSystem-arab": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-zero": "0 ألف", + "1000-count-one": "0 ألف", + "1000-count-two": "0 ألف", + "1000-count-few": "0 آلاف", + "1000-count-many": "0 ألف", + "1000-count-other": "0 ألف", + "10000-count-zero": "00 ألف", + "10000-count-one": "00 ألف", + "10000-count-two": "00 ألف", + "10000-count-few": "00 ألف", + "10000-count-many": "00 ألف", + "10000-count-other": "00 ألف", + "100000-count-zero": "000 ألف", + "100000-count-one": "000 ألف", + "100000-count-two": "000 ألف", + "100000-count-few": "000 ألف", + "100000-count-many": "000 ألف", + "100000-count-other": "000 ألف", + "1000000-count-zero": "0 مليون", + "1000000-count-one": "0 مليون", + "1000000-count-two": "0 مليون", + "1000000-count-few": "0 ملايين", + "1000000-count-many": "0 مليون", + "1000000-count-other": "0 مليون", + "10000000-count-zero": "00 مليون", + "10000000-count-one": "00 مليون", + "10000000-count-two": "00 مليون", + "10000000-count-few": "00 ملايين", + "10000000-count-many": "00 مليون", + "10000000-count-other": "00 مليون", + "100000000-count-zero": "000 مليون", + "100000000-count-one": "000 مليون", + "100000000-count-two": "000 مليون", + "100000000-count-few": "000 مليون", + "100000000-count-many": "000 مليون", + "100000000-count-other": "000 مليون", + "1000000000-count-zero": "0 مليار", + "1000000000-count-one": "0 مليار", + "1000000000-count-two": "0 مليار", + "1000000000-count-few": "0 مليار", + "1000000000-count-many": "0 مليار", + "1000000000-count-other": "0 مليار", + "10000000000-count-zero": "00 مليار", + "10000000000-count-one": "00 مليار", + "10000000000-count-two": "00 مليار", + "10000000000-count-few": "00 مليار", + "10000000000-count-many": "00 مليار", + "10000000000-count-other": "00 مليار", + "100000000000-count-zero": "000 مليار", + "100000000000-count-one": "000 مليار", + "100000000000-count-two": "000 مليار", + "100000000000-count-few": "000 مليار", + "100000000000-count-many": "000 مليار", + "100000000000-count-other": "000 مليار", + "1000000000000-count-zero": "0 تريليون", + "1000000000000-count-one": "0 تريليون", + "1000000000000-count-two": "0 تريليون", + "1000000000000-count-few": "0 تريليونات", + "1000000000000-count-many": "0 تريليون", + "1000000000000-count-other": "0 تريليون", + "10000000000000-count-zero": "00 تريليون", + "10000000000000-count-one": "00 تريليون", + "10000000000000-count-two": "00 تريليون", + "10000000000000-count-few": "00 تريليون", + "10000000000000-count-many": "00 تريليون", + "10000000000000-count-other": "00 تريليون", + "100000000000000-count-zero": "000 تريليون", + "100000000000000-count-one": "000 تريليون", + "100000000000000-count-two": "000 تريليون", + "100000000000000-count-few": "000 تريليون", + "100000000000000-count-many": "000 تريليون", + "100000000000000-count-other": "000 تريليون" + } }, - "ZRN": { - "displayName": "زائير زائيري جديد", - "symbol": "ZRN" + "short": { + "decimalFormat": { + "1000-count-zero": "0 ألف", + "1000-count-one": "0 ألف", + "1000-count-two": "0 ألف", + "1000-count-few": "0 آلاف", + "1000-count-many": "0 ألف", + "1000-count-other": "0 ألف", + "10000-count-zero": "00 ألف", + "10000-count-one": "00 ألف", + "10000-count-two": "00 ألف", + "10000-count-few": "00 ألف", + "10000-count-many": "00 ألف", + "10000-count-other": "00 ألف", + "100000-count-zero": "000 ألف", + "100000-count-one": "000 ألف", + "100000-count-two": "000 ألف", + "100000-count-few": "000 ألف", + "100000-count-many": "000 ألف", + "100000-count-other": "000 ألف", + "1000000-count-zero": "0 مليو", + "1000000-count-one": "0 مليو", + "1000000-count-two": "0 مليو", + "1000000-count-few": "0 مليو", + "1000000-count-many": "0 مليو", + "1000000-count-other": "0 مليو", + "10000000-count-zero": "00 مليو", + "10000000-count-one": "00 مليو", + "10000000-count-two": "00 مليو", + "10000000-count-few": "00 مليو", + "10000000-count-many": "00 مليو", + "10000000-count-other": "00 مليو", + "100000000-count-zero": "000 مليو", + "100000000-count-one": "000 مليو", + "100000000-count-two": "000 مليو", + "100000000-count-few": "000 مليو", + "100000000-count-many": "000 مليو", + "100000000-count-other": "000 مليو", + "1000000000-count-zero": "0 مليا", + "1000000000-count-one": "0 مليا", + "1000000000-count-two": "0 مليا", + "1000000000-count-few": "0 مليا", + "1000000000-count-many": "0 مليا", + "1000000000-count-other": "0 مليا", + "10000000000-count-zero": "00 مليا", + "10000000000-count-one": "00 مليا", + "10000000000-count-two": "00 مليا", + "10000000000-count-few": "00 مليا", + "10000000000-count-many": "00 مليا", + "10000000000-count-other": "00 مليا", + "100000000000-count-zero": "000 مليا", + "100000000000-count-one": "000 مليا", + "100000000000-count-two": "000 مليا", + "100000000000-count-few": "000 مليا", + "100000000000-count-many": "000 مليا", + "100000000000-count-other": "000 مليا", + "1000000000000-count-zero": "0 ترليو", + "1000000000000-count-one": "0 ترليو", + "1000000000000-count-two": "0 ترليو", + "1000000000000-count-few": "0 ترليو", + "1000000000000-count-many": "0 ترليو", + "1000000000000-count-other": "0 ترليو", + "10000000000000-count-zero": "00 ترليو", + "10000000000000-count-one": "00 ترليو", + "10000000000000-count-two": "00 ترليو", + "10000000000000-count-few": "00 ترليو", + "10000000000000-count-many": "00 ترليو", + "10000000000000-count-other": "00 ترليو", + "100000000000000-count-zero": "000 ترليو", + "100000000000000-count-one": "000 ترليو", + "100000000000000-count-two": "000 ترليو", + "100000000000000-count-few": "000 ترليو", + "100000000000000-count-many": "000 ترليو", + "100000000000000-count-other": "000 ترليو" + } + } + }, + "decimalFormats-numberSystem-latn": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-zero": "0 ألف", + "1000-count-one": "0 ألف", + "1000-count-two": "0 ألف", + "1000-count-few": "0 آلاف", + "1000-count-many": "0 ألف", + "1000-count-other": "0 ألف", + "10000-count-zero": "00 ألف", + "10000-count-one": "00 ألف", + "10000-count-two": "00 ألف", + "10000-count-few": "00 ألف", + "10000-count-many": "00 ألف", + "10000-count-other": "00 ألف", + "100000-count-zero": "000 ألف", + "100000-count-one": "000 ألف", + "100000-count-two": "000 ألف", + "100000-count-few": "000 ألف", + "100000-count-many": "000 ألف", + "100000-count-other": "000 ألف", + "1000000-count-zero": "0 مليون", + "1000000-count-one": "0 مليون", + "1000000-count-two": "0 مليون", + "1000000-count-few": "0 ملايين", + "1000000-count-many": "0 مليون", + "1000000-count-other": "0 مليون", + "10000000-count-zero": "00 مليون", + "10000000-count-one": "00 مليون", + "10000000-count-two": "00 مليون", + "10000000-count-few": "00 ملايين", + "10000000-count-many": "00 مليون", + "10000000-count-other": "00 مليون", + "100000000-count-zero": "000 مليون", + "100000000-count-one": "000 مليون", + "100000000-count-two": "000 مليون", + "100000000-count-few": "000 مليون", + "100000000-count-many": "000 مليون", + "100000000-count-other": "000 مليون", + "1000000000-count-zero": "0 مليار", + "1000000000-count-one": "0 مليار", + "1000000000-count-two": "0 مليار", + "1000000000-count-few": "0 مليار", + "1000000000-count-many": "0 مليار", + "1000000000-count-other": "0 مليار", + "10000000000-count-zero": "00 مليار", + "10000000000-count-one": "00 مليار", + "10000000000-count-two": "00 مليار", + "10000000000-count-few": "00 مليار", + "10000000000-count-many": "00 مليار", + "10000000000-count-other": "00 مليار", + "100000000000-count-zero": "000 مليار", + "100000000000-count-one": "000 مليار", + "100000000000-count-two": "000 مليار", + "100000000000-count-few": "000 مليار", + "100000000000-count-many": "000 مليار", + "100000000000-count-other": "000 مليار", + "1000000000000-count-zero": "0 تريليون", + "1000000000000-count-one": "0 تريليون", + "1000000000000-count-two": "0 تريليون", + "1000000000000-count-few": "0 تريليونات", + "1000000000000-count-many": "0 تريليون", + "1000000000000-count-other": "0 تريليون", + "10000000000000-count-zero": "00 تريليون", + "10000000000000-count-one": "00 تريليون", + "10000000000000-count-two": "00 تريليون", + "10000000000000-count-few": "00 تريليون", + "10000000000000-count-many": "00 تريليون", + "10000000000000-count-other": "00 تريليون", + "100000000000000-count-zero": "000 تريليون", + "100000000000000-count-one": "000 تريليون", + "100000000000000-count-two": "000 تريليون", + "100000000000000-count-few": "000 تريليون", + "100000000000000-count-many": "000 تريليون", + "100000000000000-count-other": "000 تريليون" + } }, - "ZRZ": { - "displayName": "زائير زائيري", - "symbol": "ZRZ" + "short": { + "decimalFormat": { + "1000-count-zero": "0 ألف", + "1000-count-one": "0 ألف", + "1000-count-two": "0 ألف", + "1000-count-few": "0 آلاف", + "1000-count-many": "0 ألف", + "1000-count-other": "0 ألف", + "10000-count-zero": "00 ألف", + "10000-count-one": "00 ألف", + "10000-count-two": "00 ألف", + "10000-count-few": "00 ألف", + "10000-count-many": "00 ألف", + "10000-count-other": "00 ألف", + "100000-count-zero": "000 ألف", + "100000-count-one": "000 ألف", + "100000-count-two": "000 ألف", + "100000-count-few": "000 ألف", + "100000-count-many": "000 ألف", + "100000-count-other": "000 ألف", + "1000000-count-zero": "0 مليو", + "1000000-count-one": "0 مليو", + "1000000-count-two": "0 مليو", + "1000000-count-few": "0 مليو", + "1000000-count-many": "0 مليو", + "1000000-count-other": "0 مليو", + "10000000-count-zero": "00 مليو", + "10000000-count-one": "00 مليو", + "10000000-count-two": "00 مليو", + "10000000-count-few": "00 مليو", + "10000000-count-many": "00 مليو", + "10000000-count-other": "00 مليو", + "100000000-count-zero": "000 مليو", + "100000000-count-one": "000 مليو", + "100000000-count-two": "000 مليو", + "100000000-count-few": "000 مليو", + "100000000-count-many": "000 مليو", + "100000000-count-other": "000 مليو", + "1000000000-count-zero": "0 مليا", + "1000000000-count-one": "0 مليا", + "1000000000-count-two": "0 مليا", + "1000000000-count-few": "0 مليا", + "1000000000-count-many": "0 مليا", + "1000000000-count-other": "0 مليا", + "10000000000-count-zero": "00 مليا", + "10000000000-count-one": "00 مليا", + "10000000000-count-two": "00 مليا", + "10000000000-count-few": "00 مليا", + "10000000000-count-many": "00 مليا", + "10000000000-count-other": "00 مليا", + "100000000000-count-zero": "000 مليا", + "100000000000-count-one": "000 مليا", + "100000000000-count-two": "000 مليا", + "100000000000-count-few": "000 مليا", + "100000000000-count-many": "000 مليا", + "100000000000-count-other": "000 مليا", + "1000000000000-count-zero": "0 ترليو", + "1000000000000-count-one": "0 ترليو", + "1000000000000-count-two": "0 ترليو", + "1000000000000-count-few": "0 ترليو", + "1000000000000-count-many": "0 ترليو", + "1000000000000-count-other": "0 ترليو", + "10000000000000-count-zero": "00 ترليو", + "10000000000000-count-one": "00 ترليو", + "10000000000000-count-two": "00 ترليو", + "10000000000000-count-few": "00 ترليو", + "10000000000000-count-many": "00 ترليو", + "10000000000000-count-other": "00 ترليو", + "100000000000000-count-zero": "000 ترليو", + "100000000000000-count-one": "000 ترليو", + "100000000000000-count-two": "000 ترليو", + "100000000000000-count-few": "000 ترليو", + "100000000000000-count-many": "000 ترليو", + "100000000000000-count-other": "000 ترليو" + } + } + }, + "scientificFormats-numberSystem-arab": { + "standard": "#E0" + }, + "scientificFormats-numberSystem-latn": { + "standard": "#E0" + }, + "percentFormats-numberSystem-arab": { + "standard": "#,##0 %" + }, + "percentFormats-numberSystem-latn": { + "standard": "#,##0%" + }, + "currencyFormats-numberSystem-arab": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZWD": { - "displayName": "دولار زمبابوي", - "symbol": "ZWD" + "standard": "#,##0.00 ¤", + "accounting": "#,##0.00 ¤", + "unitPattern-count-zero": "{0} {1}", + "unitPattern-count-one": "{0} {1}", + "unitPattern-count-two": "{0} {1}", + "unitPattern-count-few": "{0} {1}", + "unitPattern-count-many": "{0} {1}", + "unitPattern-count-other": "{0} {1}" + }, + "currencyFormats-numberSystem-latn": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZWL": { - "displayName": "دولار زمبابوي 2009", - "symbol": "ZWL" + "standard": "¤ #,##0.00", + "accounting": "¤#,##0.00;(¤#,##0.00)", + "short": { + "standard": { + "1000-count-zero": "¤ 0 ألف", + "1000-count-one": "¤ 0 ألف", + "1000-count-two": "¤ 0 ألف", + "1000-count-few": "¤ 0 ألف", + "1000-count-many": "¤ 0 ألف", + "1000-count-other": "¤ 0 ألف", + "10000-count-zero": "¤ 00 ألف", + "10000-count-one": "¤ 00 ألف", + "10000-count-two": "¤ 00 ألف", + "10000-count-few": "¤ 00 ألف", + "10000-count-many": "¤ 00 ألف", + "10000-count-other": "¤ 00 ألف", + "100000-count-zero": "¤ 000 ألف", + "100000-count-one": "¤ 000 ألف", + "100000-count-two": "¤ 000 ألف", + "100000-count-few": "¤ 000 ألف", + "100000-count-many": "¤ 000 ألف", + "100000-count-other": "¤ 000 ألف", + "1000000-count-zero": "¤ 0 مليو", + "1000000-count-one": "¤ 0 مليو", + "1000000-count-two": "¤ 0 مليو", + "1000000-count-few": "¤ 0 مليو", + "1000000-count-many": "¤ 0 مليو", + "1000000-count-other": "¤ 0 مليو", + "10000000-count-zero": "¤ 00 مليو", + "10000000-count-one": "¤ 00 مليو", + "10000000-count-two": "¤ 00 مليو", + "10000000-count-few": "¤ 00 مليو", + "10000000-count-many": "¤ 00 مليو", + "10000000-count-other": "¤ 00 مليو", + "100000000-count-zero": "¤ 000 مليو", + "100000000-count-one": "¤ 000 مليو", + "100000000-count-two": "¤ 000 مليو", + "100000000-count-few": "¤ 000 مليو", + "100000000-count-many": "¤ 000 مليو", + "100000000-count-other": "¤ 000 مليو", + "1000000000-count-zero": "¤ 0 مليا", + "1000000000-count-one": "¤ 0 مليا", + "1000000000-count-two": "¤ 0 مليا", + "1000000000-count-few": "¤ 0 مليا", + "1000000000-count-many": "¤ 0 مليا", + "1000000000-count-other": "¤ 0 مليا", + "10000000000-count-zero": "¤ 00 مليا", + "10000000000-count-one": "¤ 00 مليا", + "10000000000-count-two": "¤ 00 مليا", + "10000000000-count-few": "¤ 00 مليا", + "10000000000-count-many": "¤ 00 مليا", + "10000000000-count-other": "¤ 00 مليا", + "100000000000-count-zero": "¤ 000 مليا", + "100000000000-count-one": "¤ 000 مليا", + "100000000000-count-two": "¤ 000 مليا", + "100000000000-count-few": "¤ 000 مليا", + "100000000000-count-many": "¤ 000 مليا", + "100000000000-count-other": "¤ 000 مليا", + "1000000000000-count-zero": "¤ 0 ترليو", + "1000000000000-count-one": "¤ 0 ترليو", + "1000000000000-count-two": "¤ 0 ترليو", + "1000000000000-count-few": "¤ 0 ترليو", + "1000000000000-count-many": "¤ 0 ترليو", + "1000000000000-count-other": "¤ 0 ترليو", + "10000000000000-count-zero": "¤ 00 ترليو", + "10000000000000-count-one": "¤ 00 ترليو", + "10000000000000-count-two": "¤ 00 ترليو", + "10000000000000-count-few": "¤ 00 ترليو", + "10000000000000-count-many": "¤ 00 ترليو", + "10000000000000-count-other": "¤ 00 ترليو", + "100000000000000-count-zero": "¤ 000 ترليو", + "100000000000000-count-one": "¤ 000 ترليو", + "100000000000000-count-two": "¤ 000 ترليو", + "100000000000000-count-few": "¤ 000 ترليو", + "100000000000000-count-many": "¤ 000 ترليو", + "100000000000000-count-other": "¤ 000 ترليو" + } }, - "ZWR": { - "displayName": "ZWR", - "symbol": "ZWR" + "unitPattern-count-zero": "{0} {1}", + "unitPattern-count-one": "{0} {1}", + "unitPattern-count-two": "{0} {1}", + "unitPattern-count-few": "{0} {1}", + "unitPattern-count-many": "{0} {1}", + "unitPattern-count-other": "{0} {1}" + }, + "miscPatterns-numberSystem-arab": { + "atLeast": "+{0}", + "range": "{0}–{1}" + }, + "miscPatterns-numberSystem-latn": { + "atLeast": "+{0}", + "range": "{0}–{1}" + }, + "minimalPairs": { + "pluralMinimalPairs": "{0} كتاب", + "pluralMinimalPairs": "ولد واحد حضر", + "pluralMinimalPairs": "ولدان حضرا", + "pluralMinimalPairs": "{0} أولاد حضروا", + "pluralMinimalPairs": "{0} ولدًا حضروا", + "pluralMinimalPairs": "{0} ولد حضروا", + "other": "اتجه إلى المنعطف الـ {0} يمينًا." + }, "currencies": { + "ADP": { + "displayName": "بيستا أندوري", + "symbol": "ADP" + }, + "AED": { + "displayName": "درهم إماراتي", + "displayName-count-zero": "درهم إماراتي", + "displayName-count-one": "درهم إماراتي", + "displayName-count-two": "درهم إماراتي", + "displayName-count-few": "درهم إماراتي", + "displayName-count-many": "درهم إماراتي", + "displayName-count-other": "درهم إماراتي", + "symbol": "د.إ.‏" + }, + "AFA": { + "displayName": "أفغاني - 1927-2002", + "symbol": "AFA" + }, + "AFN": { + "displayName": "أفغاني", + "displayName-count-zero": "أفغاني أفغانستاني", + "displayName-count-one": "أفغاني أفغانستاني", + "displayName-count-two": "أفغاني أفغانستاني", + "displayName-count-few": "أفغاني أفغانستاني", + "displayName-count-many": "أفغاني أفغانستاني", + "displayName-count-other": "أفغاني أفغانستاني", + "symbol": "AFN" + }, + "ALL": { + "displayName": "ليك ألباني", + "displayName-count-zero": "ليك ألباني", + "displayName-count-one": "ليك ألباني", + "displayName-count-two": "ليك ألباني", + "displayName-count-few": "ليك ألباني", + "displayName-count-many": "ليك ألباني", + "displayName-count-other": "ليك ألباني", + "symbol": "ALL" + }, + "AMD": { + "displayName": "درام أرميني", + "displayName-count-zero": "درام أرميني", + "displayName-count-one": "درام أرميني", + "displayName-count-two": "درام أرميني", + "displayName-count-few": "درام أرميني", + "displayName-count-many": "درام أرميني", + "displayName-count-other": "درام أرميني", + "symbol": "AMD" + }, + "ANG": { + "displayName": "غيلدر أنتيلي هولندي", + "displayName-count-zero": "غيلدر أنتيلي هولندي", + "displayName-count-one": "غيلدر أنتيلي هولندي", + "displayName-count-two": "غيلدر أنتيلي هولندي", + "displayName-count-few": "غيلدر أنتيلي هولندي", + "displayName-count-many": "غيلدر أنتيلي هولندي", + "displayName-count-other": "غيلدر أنتيلي هولندي", + "symbol": "ANG" + }, + "AOA": { + "displayName": "كوانزا أنجولي", + "displayName-count-zero": "كوانزا أنجولي", + "displayName-count-one": "كوانزا أنجولي", + "displayName-count-two": "كوانزا أنجولي", + "displayName-count-few": "كوانزا أنجولي", + "displayName-count-many": "كوانزا أنجولي", + "displayName-count-other": "كوانزا أنجولي", + "symbol": "AOA", + "symbol-alt-narrow": "Kz" + }, + "AOK": { + "displayName": "كوانزا أنجولي - 1977-1990", + "symbol": "AOK" + }, + "AON": { + "displayName": "كوانزا أنجولي جديدة - 1990-2000", + "symbol": "AON" + }, + "AOR": { + "displayName": "كوانزا أنجولي معدلة - 1995 - 1999", + "symbol": "AOR" + }, + "ARA": { + "displayName": "استرال أرجنتيني", + "symbol": "ARA" + }, + "ARL": { + "displayName": "ARL", + "symbol": "ARL" + }, + "ARM": { + "displayName": "ARM", + "symbol": "ARM" + }, + "ARP": { + "displayName": "بيزو أرجنتيني - 1983-1985", + "symbol": "ARP" + }, + "ARS": { + "displayName": "بيزو أرجنتيني", + "displayName-count-zero": "بيزو أرجنتيني", + "displayName-count-one": "بيزو أرجنتيني", + "displayName-count-two": "بيزو أرجنتيني", + "displayName-count-few": "بيزو أرجنتيني", + "displayName-count-many": "بيزو أرجنتيني", + "displayName-count-other": "بيزو أرجنتيني", + "symbol": "ARS", + "symbol-alt-narrow": "AR$" + }, + "ATS": { + "displayName": "شلن نمساوي", + "symbol": "ATS" + }, + "AUD": { + "displayName": "دولار أسترالي", + "displayName-count-zero": "دولار أسترالي", + "displayName-count-one": "دولار أسترالي", + "displayName-count-two": "دولار أسترالي", + "displayName-count-few": "دولار أسترالي", + "displayName-count-many": "دولار أسترالي", + "displayName-count-other": "دولار أسترالي", + "symbol": "AU$", + "symbol-alt-narrow": "AU$" + }, + "AWG": { + "displayName": "فلورن أروبي", + "displayName-count-zero": "فلورن أروبي", + "displayName-count-one": "فلورن أروبي", + "displayName-count-two": "فلورن أروبي", + "displayName-count-few": "فلورن أروبي", + "displayName-count-many": "فلورن أروبي", + "displayName-count-other": "فلورن أروبي", + "symbol": "AWG" + }, + "AZM": { + "displayName": "مانات أذريبجاني", + "symbol": "AZM" + }, + "AZN": { + "displayName": "مانات أذربيجان", + "displayName-count-zero": "مانت أذربيجاني", + "displayName-count-one": "مانت أذربيجاني", + "displayName-count-two": "مانت أذربيجاني", + "displayName-count-few": "مانت أذربيجاني", + "displayName-count-many": "مانت أذربيجاني", + "displayName-count-other": "مانت أذربيجاني", + "symbol": "AZN" + }, + "BAD": { + "displayName": "دينار البوسنة والهرسك", + "symbol": "BAD" + }, + "BAM": { + "displayName": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-zero": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-one": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-two": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-few": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-many": "مارك البوسنة والهرسك قابل للتحويل", + "displayName-count-other": "مارك البوسنة والهرسك قابل للتحويل", + "symbol": "BAM", + "symbol-alt-narrow": "KM" + }, + "BAN": { + "displayName": "BAN", + "symbol": "BAN" + }, + "BBD": { + "displayName": "دولار بربادوسي", + "displayName-count-zero": "دولار بربادوسي", + "displayName-count-one": "دولار بربادوسي", + "displayName-count-two": "دولار بربادوسي", + "displayName-count-few": "دولار بربادوسي", + "displayName-count-many": "دولار بربادوسي", + "displayName-count-other": "دولار بربادوسي", + "symbol": "BBD", + "symbol-alt-narrow": "BB$" + }, + "BDT": { + "displayName": "تاكا بنجلاديشي", + "displayName-count-zero": "تاكا بنجلاديشي", + "displayName-count-one": "تاكا بنجلاديشي", + "displayName-count-two": "تاكا بنجلاديشي", + "displayName-count-few": "تاكا بنجلاديشي", + "displayName-count-many": "تاكا بنجلاديشي", + "displayName-count-other": "تاكا بنجلاديشي", + "symbol": "BDT", + "symbol-alt-narrow": "৳" + }, + "BEC": { + "displayName": "فرنك بلجيكي قابل للتحويل", + "symbol": "BEC" + }, + "BEF": { + "displayName": "فرنك بلجيكي", + "symbol": "BEF" + }, + "BEL": { + "displayName": "فرنك بلجيكي مالي", + "symbol": "BEL" + }, + "BGL": { + "displayName": "BGL", + "symbol": "BGL" + }, + "BGM": { + "displayName": "BGM", + "symbol": "BGM" + }, + "BGN": { + "displayName": "ليف بلغاري", + "displayName-count-zero": "ليف بلغاري", + "displayName-count-one": "ليف بلغاري", + "displayName-count-two": "ليف بلغاري", + "displayName-count-few": "ليف بلغاري", + "displayName-count-many": "ليف بلغاري", + "displayName-count-other": "ليف بلغاري", + "symbol": "BGN" + }, + "BGO": { + "displayName": "BGO", + "symbol": "BGO" + }, + "BHD": { + "displayName": "دينار بحريني", + "displayName-count-zero": "دينار بحريني", + "displayName-count-one": "دينار بحريني", + "displayName-count-two": "دينار بحريني", + "displayName-count-few": "دينار بحريني", + "displayName-count-many": "دينار بحريني", + "displayName-count-other": "دينار بحريني", + "symbol": "د.ب.‏" + }, + "BIF": { + "displayName": "فرنك بروندي", + "displayName-count-zero": "فرنك بروندي", + "displayName-count-one": "فرنك بروندي", + "displayName-count-two": "فرنك بروندي", + "displayName-count-few": "فرنك بروندي", + "displayName-count-many": "فرنك بروندي", + "displayName-count-other": "فرنك بروندي", + "symbol": "BIF" + }, + "BMD": { + "displayName": "دولار برمودي", + "displayName-count-zero": "دولار برمودي", + "displayName-count-one": "دولار برمودي", + "displayName-count-two": "دولار برمودي", + "displayName-count-few": "دولار برمودي", + "displayName-count-many": "دولار برمودي", + "displayName-count-other": "دولار برمودي", + "symbol": "BMD", + "symbol-alt-narrow": "BM$" + }, + "BND": { + "displayName": "دولار بروناي", + "displayName-count-zero": "دولار بروناي", + "displayName-count-one": "دولار بروناي", + "displayName-count-two": "دولار بروناي", + "displayName-count-few": "دولار بروناي", + "displayName-count-many": "دولار بروناي", + "displayName-count-other": "دولار بروناي", + "symbol": "BND", + "symbol-alt-narrow": "BN$" + }, + "BOB": { + "displayName": "بوليفيانو بوليفي", + "displayName-count-zero": "بوليفيانو بوليفي", + "displayName-count-one": "بوليفيانو بوليفي", + "displayName-count-two": "بوليفيانو بوليفي", + "displayName-count-few": "بوليفيانو بوليفي", + "displayName-count-many": "بوليفيانو بوليفي", + "displayName-count-other": "بوليفيانو بوليفي", + "symbol": "BOB", + "symbol-alt-narrow": "Bs" + }, + "BOL": { + "displayName": "BOL", + "symbol": "BOL" + }, + "BOP": { + "displayName": "بيزو بوليفي", + "symbol": "BOP" + }, + "BOV": { + "displayName": "مفدول بوليفي", + "symbol": "BOV" + }, + "BRB": { + "displayName": "نوفو كروزايرو برازيلي - 1967-1986", + "symbol": "BRB" + }, + "BRC": { + "displayName": "كروزادو برازيلي", + "symbol": "BRC" + }, + "BRE": { + "displayName": "كروزايرو برازيلي - 1990-1993", + "symbol": "BRE" + }, + "BRL": { + "displayName": "ريال برازيلي", + "displayName-count-zero": "ريال برازيلي", + "displayName-count-one": "ريال برازيلي", + "displayName-count-two": "ريال برازيلي", + "displayName-count-few": "ريال برازيلي", + "displayName-count-many": "ريال برازيلي", + "displayName-count-other": "ريال برازيلي", + "symbol": "R$", + "symbol-alt-narrow": "R$" + }, + "BRN": { + "displayName": "BRN", + "symbol": "BRN" + }, + "BRR": { + "displayName": "BRR", + "symbol": "BRR" + }, + "BRZ": { + "displayName": "BRZ", + "symbol": "BRZ" + }, + "BSD": { + "displayName": "دولار باهامي", + "displayName-count-zero": "دولار باهامي", + "displayName-count-one": "دولار باهامي", + "displayName-count-two": "دولار باهامي", + "displayName-count-few": "دولار باهامي", + "displayName-count-many": "دولار باهامي", + "displayName-count-other": "دولار باهامي", + "symbol": "BSD", + "symbol-alt-narrow": "BS$" + }, + "BTN": { + "displayName": "نولتوم بوتاني", + "displayName-count-zero": "نولتوم بوتاني", + "displayName-count-one": "نولتوم بوتاني", + "displayName-count-two": "نولتوم بوتاني", + "displayName-count-few": "نولتوم بوتاني", + "displayName-count-many": "نولتوم بوتاني", + "displayName-count-other": "نولتوم بوتاني", + "symbol": "BTN" + }, + "BUK": { + "displayName": "كيات بورمي", + "symbol": "BUK" + }, + "BWP": { + "displayName": "بولا بتسواني", + "displayName-count-zero": "بولا بتسواني", + "displayName-count-one": "بولا بتسواني", + "displayName-count-two": "بولا بتسواني", + "displayName-count-few": "بولا بتسواني", + "displayName-count-many": "بولا بتسواني", + "displayName-count-other": "بولا بتسواني", + "symbol": "BWP", + "symbol-alt-narrow": "P" + }, + "BYB": { + "displayName": "روبل بيلاروسي جديد - 1994-1999", + "symbol": "BYB" + }, + "BYN": { + "displayName": "روبل بيلاروسي", + "displayName-count-zero": "روبل بيلاروسي", + "displayName-count-one": "روبل بيلاروسي", + "displayName-count-two": "روبل بيلاروسي", + "displayName-count-few": "روبل بيلاروسي", + "displayName-count-many": "روبل بيلاروسي", + "displayName-count-other": "روبل بيلاروسي", + "symbol": "BYN", + "symbol-alt-narrow": "р." + }, + "BYR": { + "displayName": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-zero": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-one": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-two": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-few": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-many": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "displayName-count-other": "روبل بيلاروسي (٢٠٠٠–٢٠١٦)", + "symbol": "BYR" + }, + "BZD": { + "displayName": "دولار بليزي", + "displayName-count-zero": "دولار بليزي", + "displayName-count-one": "دولار بليزي", + "displayName-count-two": "دولاران بليزيان", + "displayName-count-few": "دولار بليزي", + "displayName-count-many": "دولار بليزي", + "displayName-count-other": "دولار بليزي", + "symbol": "BZD", + "symbol-alt-narrow": "BZ$" + }, + "CAD": { + "displayName": "دولار كندي", + "displayName-count-zero": "دولار كندي", + "displayName-count-one": "دولار كندي", + "displayName-count-two": "دولار كندي", + "displayName-count-few": "دولار كندي", + "displayName-count-many": "دولار كندي", + "displayName-count-other": "دولار كندي", + "symbol": "CA$", + "symbol-alt-narrow": "CA$" + }, + "CDF": { + "displayName": "فرنك كونغولي", + "displayName-count-zero": "فرنك كونغولي", + "displayName-count-one": "فرنك كونغولي", + "displayName-count-two": "فرنك كونغولي", + "displayName-count-few": "فرنك كونغولي", + "displayName-count-many": "فرنك كونغولي", + "displayName-count-other": "فرنك كونغولي", + "symbol": "CDF" + }, + "CHE": { + "displayName": "CHE", + "symbol": "CHE" + }, + "CHF": { + "displayName": "فرنك سويسري", + "displayName-count-zero": "فرنك سويسري", + "displayName-count-one": "فرنك سويسري", + "displayName-count-two": "فرنك سويسري", + "displayName-count-few": "فرنك سويسري", + "displayName-count-many": "فرنك سويسري", + "displayName-count-other": "فرنك سويسري", + "symbol": "CHF" + }, + "CHW": { + "displayName": "CHW", + "symbol": "CHW" + }, + "CLE": { + "displayName": "CLE", + "symbol": "CLE" + }, + "CLF": { + "displayName": "CLF", + "symbol": "CLF" + }, + "CLP": { + "displayName": "بيزو شيلي", + "displayName-count-zero": "بيزو شيلي", + "displayName-count-one": "بيزو شيلي", + "displayName-count-two": "بيزو شيلي", + "displayName-count-few": "بيزو شيلي", + "displayName-count-many": "بيزو شيلي", + "displayName-count-other": "بيزو شيلي", + "symbol": "CLP", + "symbol-alt-narrow": "CL$" + }, + "CNY": { + "displayName": "يوان صيني", + "displayName-count-zero": "يوان صيني", + "displayName-count-one": "يوان صيني", + "displayName-count-two": "يوان صيني", + "displayName-count-few": "يوان صيني", + "displayName-count-many": "يوان صيني", + "displayName-count-other": "يوان صيني", + "symbol": "CN¥", + "symbol-alt-narrow": "CN¥" + }, + "COP": { + "displayName": "بيزو كولومبي", + "displayName-count-zero": "بيزو كولومبي", + "displayName-count-one": "بيزو كولومبي", + "displayName-count-two": "بيزو كولومبي", + "displayName-count-few": "بيزو كولومبي", + "displayName-count-many": "بيزو كولومبي", + "displayName-count-other": "بيزو كولومبي", + "symbol": "COP", + "symbol-alt-narrow": "CO$" + }, + "COU": { + "displayName": "COU", + "symbol": "COU" + }, + "CRC": { + "displayName": "كولن كوستا ريكي", + "displayName-count-zero": "كولن كوستا ريكي", + "displayName-count-one": "كولن كوستا ريكي", + "displayName-count-two": "كولن كوستا ريكي", + "displayName-count-few": "كولن كوستا ريكي", + "displayName-count-many": "كولن كوستا ريكي", + "displayName-count-other": "كولن كوستا ريكي", + "symbol": "CRC", + "symbol-alt-narrow": "₡" + }, + "CSD": { + "displayName": "دينار صربي قديم", + "symbol": "CSD" + }, + "CSK": { + "displayName": "كرونة تشيكوسلوفاكيا", + "symbol": "CSK" + }, + "CUC": { + "displayName": "بيزو كوبي قابل للتحويل", + "displayName-count-zero": "بيزو كوبي قابل للتحويل", + "displayName-count-one": "بيزو كوبي قابل للتحويل", + "displayName-count-two": "بيزو كوبي قابل للتحويل", + "displayName-count-few": "بيزو كوبي قابل للتحويل", + "displayName-count-many": "بيزو كوبي قابل للتحويل", + "displayName-count-other": "بيزو كوبي قابل للتحويل", + "symbol": "CUC", + "symbol-alt-narrow": "$" + }, + "CUP": { + "displayName": "بيزو كوبي", + "displayName-count-zero": "بيزو كوبي", + "displayName-count-one": "بيزو كوبي", + "displayName-count-two": "بيزو كوبي", + "displayName-count-few": "بيزو كوبي", + "displayName-count-many": "بيزو كوبي", + "displayName-count-other": "بيزو كوبي", + "symbol": "CUP", + "symbol-alt-narrow": "CU$" + }, + "CVE": { + "displayName": "اسكودو الرأس الخضراء", + "displayName-count-zero": "اسكودو الرأس الخضراء", + "displayName-count-one": "اسكودو الرأس الخضراء", + "displayName-count-two": "اسكودو الرأس الخضراء", + "displayName-count-few": "اسكودو الرأس الخضراء", + "displayName-count-many": "اسكودو الرأس الخضراء", + "displayName-count-other": "اسكودو الرأس الخضراء", + "symbol": "CVE" + }, + "CYP": { + "displayName": "جنيه قبرصي", + "symbol": "CYP" + }, + "CZK": { + "displayName": "كرونة تشيكية", + "displayName-count-zero": "كرونة تشيكية", + "displayName-count-one": "كرونة تشيكية", + "displayName-count-two": "كرونة تشيكية", + "displayName-count-few": "كرونة تشيكية", + "displayName-count-many": "كرونة تشيكية", + "displayName-count-other": "كرونة تشيكية", + "symbol": "CZK", + "symbol-alt-narrow": "Kč" + }, + "DDM": { + "displayName": "أوستمارك ألماني شرقي", + "symbol": "DDM" + }, + "DEM": { + "displayName": "مارك ألماني", + "symbol": "DEM" + }, + "DJF": { + "displayName": "فرنك جيبوتي", + "displayName-count-zero": "فرنك جيبوتي", + "displayName-count-one": "فرنك جيبوتي", + "displayName-count-two": "فرنك جيبوتي", + "displayName-count-few": "فرنك جيبوتي", + "displayName-count-many": "فرنك جيبوتي", + "displayName-count-other": "فرنك جيبوتي", + "symbol": "DJF" + }, + "DKK": { + "displayName": "كرونة دانماركي", + "displayName-count-zero": "كرونة دانماركي", + "displayName-count-one": "كرونة دانماركي", + "displayName-count-two": "كرونة دانماركي", + "displayName-count-few": "كرونة دانماركي", + "displayName-count-many": "كرونة دانماركي", + "displayName-count-other": "كرونة دانماركي", + "symbol": "DKK", + "symbol-alt-narrow": "kr" + }, + "DOP": { + "displayName": "بيزو الدومنيكان", + "displayName-count-zero": "بيزو الدومنيكان", + "displayName-count-one": "بيزو الدومنيكان", + "displayName-count-two": "بيزو الدومنيكان", + "displayName-count-few": "بيزو الدومنيكان", + "displayName-count-many": "بيزو الدومنيكان", + "displayName-count-other": "بيزو الدومنيكان", + "symbol": "DOP", + "symbol-alt-narrow": "DO$" + }, + "DZD": { + "displayName": "دينار جزائري", + "displayName-count-zero": "دينار جزائري", + "displayName-count-one": "دينار جزائري", + "displayName-count-two": "ديناران جزائريان", + "displayName-count-few": "دينارات جزائرية", + "displayName-count-many": "دينارًا جزائريًا", + "displayName-count-other": "دينار جزائري", + "symbol": "د.ج.‏" + }, + "ECS": { + "displayName": "ECS", + "symbol": "ECS" + }, + "ECV": { + "displayName": "ECV", + "symbol": "ECV" + }, + "EEK": { + "displayName": "كرونة استونية", + "symbol": "EEK" + }, + "EGP": { + "displayName": "جنيه مصري", + "displayName-count-zero": "جنيه مصري", + "displayName-count-one": "جنيه مصري", + "displayName-count-two": "جنيهان مصريان", + "displayName-count-few": "جنيهات مصرية", + "displayName-count-many": "جنيهًا مصريًا", + "displayName-count-other": "جنيه مصري", + "symbol": "ج.م.‏", + "symbol-alt-narrow": "E£" + }, + "ERN": { + "displayName": "ناكفا أريتري", + "displayName-count-zero": "ناكفا أريتري", + "displayName-count-one": "ناكفا أريتري", + "displayName-count-two": "ناكفا أريتري", + "displayName-count-few": "ناكفا أريتري", + "displayName-count-many": "ناكفا أريتري", + "displayName-count-other": "ناكفا أريتري", + "symbol": "ERN" + }, + "ESA": { + "displayName": "ESA", + "symbol": "ESA" + }, + "ESB": { + "displayName": "ESB", + "symbol": "ESB" + }, + "ESP": { + "displayName": "بيزيتا إسباني", + "symbol": "ESP", + "symbol-alt-narrow": "₧" + }, + "ETB": { + "displayName": "بير أثيوبي", + "displayName-count-zero": "بير أثيوبي", + "displayName-count-one": "بير أثيوبي", + "displayName-count-two": "بير أثيوبي", + "displayName-count-few": "بير أثيوبي", + "displayName-count-many": "بير أثيوبي", + "displayName-count-other": "بير أثيوبي", + "symbol": "ETB" + }, + "EUR": { + "displayName": "يورو", + "displayName-count-zero": "يورو", + "displayName-count-one": "يورو", + "displayName-count-two": "يورو", + "displayName-count-few": "يورو", + "displayName-count-many": "يورو", + "displayName-count-other": "يورو", + "symbol": "€", + "symbol-alt-narrow": "€" + }, + "FIM": { + "displayName": "ماركا فنلندي", + "symbol": "FIM" + }, + "FJD": { + "displayName": "دولار فيجي", + "displayName-count-zero": "دولار فيجي", + "displayName-count-one": "دولار فيجي", + "displayName-count-two": "دولار فيجي", + "displayName-count-few": "دولار فيجي", + "displayName-count-many": "دولار فيجي", + "displayName-count-other": "دولار فيجي", + "symbol": "FJD", + "symbol-alt-narrow": "FJ$" + }, + "FKP": { + "displayName": "جنيه جزر فوكلاند", + "displayName-count-zero": "جنيه جزر فوكلاند", + "displayName-count-one": "جنيه جزر فوكلاند", + "displayName-count-two": "جنيه جزر فوكلاند", + "displayName-count-few": "جنيه جزر فوكلاند", + "displayName-count-many": "جنيه جزر فوكلاند", + "displayName-count-other": "جنيه جزر فوكلاند", + "symbol": "FKP", + "symbol-alt-narrow": "£" + }, + "FRF": { + "displayName": "فرنك فرنسي", + "symbol": "FRF" + }, + "GBP": { + "displayName": "جنيه إسترليني", + "displayName-count-zero": "جنيه إسترليني", + "displayName-count-one": "جنيه إسترليني", + "displayName-count-two": "جنيه إسترليني", + "displayName-count-few": "جنيه إسترليني", + "displayName-count-many": "جنيه إسترليني", + "displayName-count-other": "جنيه إسترليني", + "symbol": "£", + "symbol-alt-narrow": "UK£" + }, + "GEK": { + "displayName": "GEK", + "symbol": "GEK" + }, + "GEL": { + "displayName": "لارى جورجي", + "displayName-count-zero": "لاري جورجي", + "displayName-count-one": "لاري جورجي", + "displayName-count-two": "لاري جورجي", + "displayName-count-few": "لاري جورجي", + "displayName-count-many": "لاري جورجي", + "displayName-count-other": "لاري جورجي", + "symbol": "GEL", + "symbol-alt-narrow": "₾", + "symbol-alt-variant": "₾" + }, + "GHC": { + "displayName": "سيدي غاني", + "symbol": "GHC" + }, + "GHS": { + "displayName": "سيدي غانا", + "displayName-count-zero": "سيدي غانا", + "displayName-count-one": "سيدي غانا", + "displayName-count-two": "سيدي غانا", + "displayName-count-few": "سيدي غانا", + "displayName-count-many": "سيدي غانا", + "displayName-count-other": "سيدي غانا", + "symbol": "GHS" + }, + "GIP": { + "displayName": "جنيه جبل طارق", + "displayName-count-zero": "جنيه جبل طارق", + "displayName-count-one": "جنيه جبل طارق", + "displayName-count-two": "جنيه جبل طارق", + "displayName-count-few": "جنيه جبل طارق", + "displayName-count-many": "جنيه جبل طارق", + "displayName-count-other": "جنيه جبل طارق", + "symbol": "GIP", + "symbol-alt-narrow": "£" + }, + "GMD": { + "displayName": "دلاسي جامبي", + "displayName-count-zero": "دلاسي جامبي", + "displayName-count-one": "دلاسي جامبي", + "displayName-count-two": "دلاسي جامبي", + "displayName-count-few": "دلاسي جامبي", + "displayName-count-many": "دلاسي جامبي", + "displayName-count-other": "دلاسي جامبي", + "symbol": "GMD" + }, + "GNF": { + "displayName": "فرنك غينيا", + "displayName-count-zero": "فرنك غينيا", + "displayName-count-one": "فرنك غينيا", + "displayName-count-two": "فرنك غينيا", + "displayName-count-few": "فرنك غينيا", + "displayName-count-many": "فرنك غينيا", + "displayName-count-other": "فرنك غينيا", + "symbol": "GNF", + "symbol-alt-narrow": "FG" + }, + "GNS": { + "displayName": "سيلي غينيا", + "symbol": "GNS" + }, + "GQE": { + "displayName": "اكويل جونينا غينيا الاستوائيّة", + "symbol": "GQE" + }, + "GRD": { + "displayName": "دراخما يوناني", + "symbol": "GRD" + }, + "GTQ": { + "displayName": "كوتزال جواتيمالا", + "displayName-count-zero": "كوتزال جواتيمالا", + "displayName-count-one": "كوتزال جواتيمالا", + "displayName-count-two": "كوتزال جواتيمالا", + "displayName-count-few": "كوتزال جواتيمالا", + "displayName-count-many": "كوتزال جواتيمالا", + "displayName-count-other": "كوتزال جواتيمالا", + "symbol": "GTQ", + "symbol-alt-narrow": "Q" + }, + "GWE": { + "displayName": "اسكود برتغالي غينيا", + "symbol": "GWE" + }, + "GWP": { + "displayName": "بيزو غينيا بيساو", + "symbol": "GWP" + }, + "GYD": { + "displayName": "دولار غيانا", + "displayName-count-zero": "دولار غيانا", + "displayName-count-one": "دولار غيانا", + "displayName-count-two": "دولار غيانا", + "displayName-count-few": "دولار غيانا", + "displayName-count-many": "دولار غيانا", + "displayName-count-other": "دولار غيانا", + "symbol": "GYD", + "symbol-alt-narrow": "GY$" + }, + "HKD": { + "displayName": "دولار هونغ كونغ", + "displayName-count-zero": "دولار هونغ كونغ", + "displayName-count-one": "دولار هونغ كونغ", + "displayName-count-two": "دولار هونغ كونغ", + "displayName-count-few": "دولار هونغ كونغ", + "displayName-count-many": "دولار هونغ كونغ", + "displayName-count-other": "دولار هونغ كونغ", + "symbol": "HK$", + "symbol-alt-narrow": "HK$" + }, + "HNL": { + "displayName": "ليمبيرا هنداروس", + "displayName-count-zero": "ليمبيرا هندوراس", + "displayName-count-one": "ليمبيرا هندوراس", + "displayName-count-two": "ليمبيرا هندوراس", + "displayName-count-few": "ليمبيرا هندوراس", + "displayName-count-many": "ليمبيرا هندوراس", + "displayName-count-other": "ليمبيرا هندوراس", + "symbol": "HNL", + "symbol-alt-narrow": "L" + }, + "HRD": { + "displayName": "دينار كرواتي", + "symbol": "HRD" + }, + "HRK": { + "displayName": "كونا كرواتي", + "displayName-count-zero": "كونا كرواتي", + "displayName-count-one": "كونا كرواتي", + "displayName-count-two": "كونا كرواتي", + "displayName-count-few": "كونا كرواتي", + "displayName-count-many": "كونا كرواتي", + "displayName-count-other": "كونا كرواتي", + "symbol": "HRK", + "symbol-alt-narrow": "kn" + }, + "HTG": { + "displayName": "جوردى هايتي", + "displayName-count-zero": "جوردى هايتي", + "displayName-count-one": "جوردى هايتي", + "displayName-count-two": "جوردى هايتي", + "displayName-count-few": "جوردى هايتي", + "displayName-count-many": "جوردى هايتي", + "displayName-count-other": "جوردى هايتي", + "symbol": "HTG" + }, + "HUF": { + "displayName": "فورينت مجري", + "displayName-count-zero": "فورينت مجري", + "displayName-count-one": "فورينت مجري", + "displayName-count-two": "فورينت مجري", + "displayName-count-few": "فورينت مجري", + "displayName-count-many": "فورينت مجري", + "displayName-count-other": "فورينت مجري", + "symbol": "HUF", + "symbol-alt-narrow": "Ft" + }, + "IDR": { + "displayName": "روبية إندونيسية", + "displayName-count-zero": "روبية إندونيسية", + "displayName-count-one": "روبية إندونيسية", + "displayName-count-two": "روبية إندونيسية", + "displayName-count-few": "روبية إندونيسية", + "displayName-count-many": "روبية إندونيسية", + "displayName-count-other": "روبية إندونيسية", + "symbol": "IDR", + "symbol-alt-narrow": "Rp" + }, + "IEP": { + "displayName": "جنيه إيرلندي", + "symbol": "IEP" + }, + "ILP": { + "displayName": "جنيه إسرائيلي", + "symbol": "ILP" + }, + "ILS": { + "displayName": "شيكل إسرائيلي جديد", + "displayName-count-zero": "شيكل إسرائيلي جديد", + "displayName-count-one": "شيكل إسرائيلي جديد", + "displayName-count-two": "شيكل إسرائيلي جديد", + "displayName-count-few": "شيكل إسرائيلي جديد", + "displayName-count-many": "شيكل إسرائيلي جديد", + "displayName-count-other": "شيكل إسرائيلي جديد", + "symbol": "₪", + "symbol-alt-narrow": "₪" + }, + "INR": { + "displayName": "روبية هندي", + "displayName-count-zero": "روبية هندي", + "displayName-count-one": "روبية هندي", + "displayName-count-two": "روبية هندي", + "displayName-count-few": "روبية هندي", + "displayName-count-many": "روبية هندي", + "displayName-count-other": "روبية هندي", + "symbol": "₹", + "symbol-alt-narrow": "₹" + }, + "IQD": { + "displayName": "دينار عراقي", + "displayName-count-zero": "دينار عراقي", + "displayName-count-one": "دينار عراقي", + "displayName-count-two": "دينار عراقي", + "displayName-count-few": "دينار عراقي", + "displayName-count-many": "دينار عراقي", + "displayName-count-other": "دينار عراقي", + "symbol": "د.ع.‏" + }, + "IRR": { + "displayName": "ريال إيراني", + "displayName-count-zero": "ريال إيراني", + "displayName-count-one": "ريال إيراني", + "displayName-count-two": "ريال إيراني", + "displayName-count-few": "ريال إيراني", + "displayName-count-many": "ريال إيراني", + "displayName-count-other": "ريال إيراني", + "symbol": "ر.إ." + }, + "ISK": { + "displayName": "كرونه أيسلندي", + "displayName-count-zero": "كرونه أيسلندي", + "displayName-count-one": "كرونه أيسلندي", + "displayName-count-two": "كرونه أيسلندي", + "displayName-count-few": "كرونه أيسلندي", + "displayName-count-many": "كرونه أيسلندي", + "displayName-count-other": "كرونه أيسلندي", + "symbol": "ISK", + "symbol-alt-narrow": "kr" + }, + "ITL": { + "displayName": "ليرة إيطالية", + "symbol": "ITL" + }, + "JMD": { + "displayName": "دولار جامايكي", + "displayName-count-zero": "دولار جامايكي", + "displayName-count-one": "دولار جامايكي", + "displayName-count-two": "دولار جامايكي", + "displayName-count-few": "دولار جامايكي", + "displayName-count-many": "دولار جامايكي", + "displayName-count-other": "دولار جامايكي", + "symbol": "JMD", + "symbol-alt-narrow": "JM$" + }, + "JOD": { + "displayName": "دينار أردني", + "displayName-count-zero": "دينار أردني", + "displayName-count-one": "دينار أردني", + "displayName-count-two": "دينار أردني", + "displayName-count-few": "دينار أردني", + "displayName-count-many": "دينار أردني", + "displayName-count-other": "دينار أردني", + "symbol": "د.أ.‏" + }, + "JPY": { + "displayName": "ين ياباني", + "displayName-count-zero": "ين ياباني", + "displayName-count-one": "ين ياباني", + "displayName-count-two": "ين ياباني", + "displayName-count-few": "ين ياباني", + "displayName-count-many": "ين ياباني", + "displayName-count-other": "ين ياباني", + "symbol": "JP¥", + "symbol-alt-narrow": "JP¥" + }, + "KES": { + "displayName": "شلن كينيي", + "displayName-count-zero": "شلن كينيي", + "displayName-count-one": "شلن كينيي", + "displayName-count-two": "شلن كينيي", + "displayName-count-few": "شلن كينيي", + "displayName-count-many": "شلن كينيي", + "displayName-count-other": "شلن كينيي", + "symbol": "KES" + }, + "KGS": { + "displayName": "سوم قيرغستاني", + "displayName-count-zero": "سوم قيرغستاني", + "displayName-count-one": "سوم قيرغستاني", + "displayName-count-two": "سوم قيرغستاني", + "displayName-count-few": "سوم قيرغستاني", + "displayName-count-many": "سوم قيرغستاني", + "displayName-count-other": "سوم قيرغستاني", + "symbol": "KGS" + }, + "KHR": { + "displayName": "رييال كمبودي", + "displayName-count-zero": "رييال كمبودي", + "displayName-count-one": "رييال كمبودي", + "displayName-count-two": "رييال كمبودي", + "displayName-count-few": "رييال كمبودي", + "displayName-count-many": "رييال كمبودي", + "displayName-count-other": "رييال كمبودي", + "symbol": "KHR", + "symbol-alt-narrow": "៛" + }, + "KMF": { + "displayName": "فرنك جزر القمر", + "displayName-count-zero": "فرنك جزر القمر", + "displayName-count-one": "فرنك جزر القمر", + "displayName-count-two": "فرنك جزر القمر", + "displayName-count-few": "فرنك جزر القمر", + "displayName-count-many": "فرنك جزر القمر", + "displayName-count-other": "فرنك جزر القمر", + "symbol": "ف.ج.ق.‏", + "symbol-alt-narrow": "CF" + }, + "KPW": { + "displayName": "وون كوريا الشمالية", + "displayName-count-zero": "وون كوريا الشمالية", + "displayName-count-one": "وون كوريا الشمالية", + "displayName-count-two": "وون كوريا الشمالية", + "displayName-count-few": "وون كوريا الشمالية", + "displayName-count-many": "وون كوريا الشمالية", + "displayName-count-other": "وون كوريا الشمالية", + "symbol": "KPW", + "symbol-alt-narrow": "₩" + }, + "KRH": { + "displayName": "KRH", + "symbol": "KRH" + }, + "KRO": { + "displayName": "KRO", + "symbol": "KRO" + }, + "KRW": { + "displayName": "وون كوريا الجنوبية", + "displayName-count-zero": "وون كوريا الجنوبية", + "displayName-count-one": "وون كوريا الجنوبية", + "displayName-count-two": "وون كوريا الجنوبية", + "displayName-count-few": "وون كوريا الجنوبية", + "displayName-count-many": "وون كوريا الجنوبية", + "displayName-count-other": "وون كوريا الجنوبية", + "symbol": "₩", + "symbol-alt-narrow": "₩" + }, + "KWD": { + "displayName": "دينار كويتي", + "displayName-count-zero": "دينار كويتي", + "displayName-count-one": "دينار كويتي", + "displayName-count-two": "دينار كويتي", + "displayName-count-few": "دينار كويتي", + "displayName-count-many": "دينار كويتي", + "displayName-count-other": "دينار كويتي", + "symbol": "د.ك.‏" + }, + "KYD": { + "displayName": "دولار جزر كيمن", + "displayName-count-zero": "دولار جزر كيمن", + "displayName-count-one": "دولار جزر كيمن", + "displayName-count-two": "دولار جزر كيمن", + "displayName-count-few": "دولار جزر كيمن", + "displayName-count-many": "دولار جزر كيمن", + "displayName-count-other": "دولار جزر كيمن", + "symbol": "KYD", + "symbol-alt-narrow": "KY$" + }, + "KZT": { + "displayName": "تينغ كازاخستاني", + "displayName-count-zero": "تينغ كازاخستاني", + "displayName-count-one": "تينغ كازاخستاني", + "displayName-count-two": "تينغ كازاخستاني", + "displayName-count-few": "تينغ كازاخستاني", + "displayName-count-many": "تينغ كازاخستاني", + "displayName-count-other": "تينغ كازاخستاني", + "symbol": "KZT", + "symbol-alt-narrow": "₸" + }, + "LAK": { + "displayName": "كيب لاوسي", + "displayName-count-zero": "كيب لاوسي", + "displayName-count-one": "كيب لاوسي", + "displayName-count-two": "كيب لاوسي", + "displayName-count-few": "كيب لاوسي", + "displayName-count-many": "كيب لاوسي", + "displayName-count-other": "كيب لاوسي", + "symbol": "LAK", + "symbol-alt-narrow": "₭" + }, + "LBP": { + "displayName": "جنيه لبناني", + "displayName-count-zero": "جنيه لبناني", + "displayName-count-one": "جنيه لبناني", + "displayName-count-two": "جنيه لبناني", + "displayName-count-few": "جنيه لبناني", + "displayName-count-many": "جنيه لبناني", + "displayName-count-other": "جنيه لبناني", + "symbol": "ل.ل.‏", + "symbol-alt-narrow": "L£" + }, + "LKR": { + "displayName": "روبية سريلانكية", + "displayName-count-zero": "روبية سريلانكية", + "displayName-count-one": "روبية سريلانكية", + "displayName-count-two": "روبية سريلانكية", + "displayName-count-few": "روبية سريلانكية", + "displayName-count-many": "روبية سريلانكية", + "displayName-count-other": "روبية سريلانكية", + "symbol": "LKR", + "symbol-alt-narrow": "Rs" + }, + "LRD": { + "displayName": "دولار ليبيري", + "displayName-count-zero": "دولار ليبيري", + "displayName-count-one": "دولار ليبيري", + "displayName-count-two": "دولاران ليبيريان", + "displayName-count-few": "دولارات ليبيرية", + "displayName-count-many": "دولارًا ليبيريًا", + "displayName-count-other": "دولار ليبيري", + "symbol": "LRD", + "symbol-alt-narrow": "$" + }, + "LSL": { + "displayName": "لوتي ليسوتو", + "symbol": "LSL" + }, + "LTL": { + "displayName": "ليتا ليتوانية", + "displayName-count-zero": "ليتا ليتوانية", + "displayName-count-one": "ليتا ليتوانية", + "displayName-count-two": "ليتا ليتوانية", + "displayName-count-few": "ليتا ليتوانية", + "displayName-count-many": "ليتا ليتوانية", + "displayName-count-other": "ليتا ليتوانية", + "symbol": "LTL", + "symbol-alt-narrow": "Lt" + }, + "LTT": { + "displayName": "تالوناس ليتواني", + "symbol": "LTT" + }, + "LUC": { + "displayName": "فرنك لوكسمبرج قابل للتحويل", + "symbol": "LUC" + }, + "LUF": { + "displayName": "فرنك لوكسمبرج", + "symbol": "LUF" + }, + "LUL": { + "displayName": "فرنك لوكسمبرج المالي", + "symbol": "LUL" + }, + "LVL": { + "displayName": "لاتس لاتفيا", + "displayName-count-zero": "لاتس لاتفي", + "displayName-count-one": "لاتس لاتفي", + "displayName-count-two": "لاتس لاتفي", + "displayName-count-few": "لاتس لاتفي", + "displayName-count-many": "لاتس لاتفي", + "displayName-count-other": "لاتس لاتفي", + "symbol": "LVL", + "symbol-alt-narrow": "Ls" + }, + "LVR": { + "displayName": "روبل لاتفيا", + "symbol": "LVR" + }, + "LYD": { + "displayName": "دينار ليبي", + "displayName-count-zero": "دينار ليبي", + "displayName-count-one": "دينار ليبي", + "displayName-count-two": "ديناران ليبيان", + "displayName-count-few": "دينارات ليبية", + "displayName-count-many": "دينارًا ليبيًا", + "displayName-count-other": "دينار ليبي", + "symbol": "د.ل.‏" + }, + "MAD": { + "displayName": "درهم مغربي", + "displayName-count-zero": "درهم مغربي", + "displayName-count-one": "درهم مغربي", + "displayName-count-two": "درهمان مغربيان", + "displayName-count-few": "دراهم مغربية", + "displayName-count-many": "درهمًا مغربيًا", + "displayName-count-other": "درهم مغربي", + "symbol": "د.م.‏" + }, + "MAF": { + "displayName": "فرنك مغربي", + "symbol": "MAF" + }, + "MCF": { + "displayName": "MCF", + "symbol": "MCF" + }, + "MDC": { + "displayName": "MDC", + "symbol": "MDC" + }, + "MDL": { + "displayName": "ليو مولدوفي", + "displayName-count-zero": "ليو مولدوفي", + "displayName-count-one": "ليو مولدوفي", + "displayName-count-two": "ليو مولدوفي", + "displayName-count-few": "ليو مولدوفي", + "displayName-count-many": "ليو مولدوفي", + "displayName-count-other": "ليو مولدوفي", + "symbol": "MDL" + }, + "MGA": { + "displayName": "أرياري مدغشقر", + "displayName-count-zero": "أرياري مدغشقر", + "displayName-count-one": "أرياري مدغشقر", + "displayName-count-two": "أرياري مدغشقر", + "displayName-count-few": "أرياري مدغشقر", + "displayName-count-many": "أرياري مدغشقر", + "displayName-count-other": "أرياري مدغشقر", + "symbol": "MGA", + "symbol-alt-narrow": "Ar" + }, + "MGF": { + "displayName": "فرنك مدغشقر", + "symbol": "MGF" + }, + "MKD": { + "displayName": "دينار مقدوني", + "displayName-count-zero": "دينار مقدوني", + "displayName-count-one": "دينار مقدوني", + "displayName-count-two": "ديناران مقدونيان", + "displayName-count-few": "دينارات مقدونية", + "displayName-count-many": "دينارًا مقدونيًا", + "displayName-count-other": "دينار مقدوني", + "symbol": "MKD" + }, + "MKN": { + "displayName": "MKN", + "symbol": "MKN" + }, + "MLF": { + "displayName": "فرنك مالي", + "symbol": "MLF" + }, + "MMK": { + "displayName": "كيات ميانمار", + "displayName-count-zero": "كيات ميانمار", + "displayName-count-one": "كيات ميانمار", + "displayName-count-two": "كيات ميانمار", + "displayName-count-few": "كيات ميانمار", + "displayName-count-many": "كيات ميانمار", + "displayName-count-other": "كيات ميانمار", + "symbol": "MMK", + "symbol-alt-narrow": "K" + }, + "MNT": { + "displayName": "توغروغ منغولي", + "displayName-count-zero": "توغروغ منغولي", + "displayName-count-one": "توغروغ منغولي", + "displayName-count-two": "توغروغ منغولي", + "displayName-count-few": "توغروغ منغولي", + "displayName-count-many": "توغروغ منغولي", + "displayName-count-other": "توغروغ منغولي", + "symbol": "MNT", + "symbol-alt-narrow": "₮" + }, + "MOP": { + "displayName": "باتاكا ماكاوي", + "displayName-count-zero": "باتاكا ماكاوي", + "displayName-count-one": "باتاكا ماكاوي", + "displayName-count-two": "باتاكا ماكاوي", + "displayName-count-few": "باتاكا ماكاوي", + "displayName-count-many": "باتاكا ماكاوي", + "displayName-count-other": "باتاكا ماكاوي", + "symbol": "MOP" + }, + "MRO": { + "displayName": "أوقية موريتانية", + "displayName-count-zero": "أوقية موريتانية", + "displayName-count-one": "أوقية موريتانية", + "displayName-count-two": "أوقية موريتانية", + "displayName-count-few": "أوقية موريتانية", + "displayName-count-many": "أوقية موريتانية", + "displayName-count-other": "أوقية موريتانية", + "symbol": "أ.م.‏" + }, + "MTL": { + "displayName": "ليرة مالطية", + "symbol": "MTL" + }, + "MTP": { + "displayName": "جنيه مالطي", + "symbol": "MTP" + }, + "MUR": { + "displayName": "روبية موريشيوسية", + "displayName-count-zero": "روبية موريشيوسية", + "displayName-count-one": "روبية موريشيوسية", + "displayName-count-two": "روبية موريشيوسية", + "displayName-count-few": "روبية موريشيوسية", + "displayName-count-many": "روبية موريشيوسية", + "displayName-count-other": "روبية موريشيوسية", + "symbol": "MUR", + "symbol-alt-narrow": "Rs" + }, + "MVR": { + "displayName": "روفيه جزر المالديف", + "displayName-count-zero": "روفيه جزر المالديف", + "displayName-count-one": "روفيه جزر المالديف", + "displayName-count-two": "روفيه جزر المالديف", + "displayName-count-few": "روفيه جزر المالديف", + "displayName-count-many": "روفيه جزر المالديف", + "displayName-count-other": "روفيه جزر المالديف", + "symbol": "MVR" + }, + "MWK": { + "displayName": "كواشا مالاوي", + "displayName-count-zero": "كواشا مالاوي", + "displayName-count-one": "كواشا مالاوي", + "displayName-count-two": "كواشا مالاوي", + "displayName-count-few": "كواشا مالاوي", + "displayName-count-many": "كواشا مالاوي", + "displayName-count-other": "كواشا مالاوي", + "symbol": "MWK" + }, + "MXN": { + "displayName": "بيزو مكسيكي", + "displayName-count-zero": "بيزو مكسيكي", + "displayName-count-one": "بيزو مكسيكي", + "displayName-count-two": "بيزو مكسيكي", + "displayName-count-few": "بيزو مكسيكي", + "displayName-count-many": "بيزو مكسيكي", + "displayName-count-other": "بيزو مكسيكي", + "symbol": "MX$", + "symbol-alt-narrow": "MX$" + }, + "MXP": { + "displayName": "بيزو فضي مكسيكي - 1861-1992", + "symbol": "MXP" + }, + "MXV": { + "displayName": "MXV", + "symbol": "MXV" + }, + "MYR": { + "displayName": "رينغيت ماليزي", + "displayName-count-zero": "رينغيت ماليزي", + "displayName-count-one": "رينغيت ماليزي", + "displayName-count-two": "رينغيت ماليزي", + "displayName-count-few": "رينغيت ماليزي", + "displayName-count-many": "رينغيت ماليزي", + "displayName-count-other": "رينغيت ماليزي", + "symbol": "MYR", + "symbol-alt-narrow": "RM" + }, + "MZE": { + "displayName": "اسكود موزمبيقي", + "symbol": "MZE" + }, + "MZM": { + "displayName": "MZM", + "symbol": "MZM" + }, + "MZN": { + "displayName": "متكال موزمبيقي", + "displayName-count-zero": "متكال موزمبيقي", + "displayName-count-one": "متكال موزمبيقي", + "displayName-count-two": "متكال موزمبيقي", + "displayName-count-few": "متكال موزمبيقي", + "displayName-count-many": "متكال موزمبيقي", + "displayName-count-other": "متكال موزمبيقي", + "symbol": "MZN" + }, + "NAD": { + "displayName": "دولار ناميبي", + "displayName-count-zero": "دولار ناميبي", + "displayName-count-one": "دولار ناميبي", + "displayName-count-two": "دولار ناميبي", + "displayName-count-few": "دولار ناميبي", + "displayName-count-many": "دولار ناميبي", + "displayName-count-other": "دولار ناميبي", + "symbol": "NAD", + "symbol-alt-narrow": "$" + }, + "NGN": { + "displayName": "نايرا نيجيري", + "displayName-count-zero": "نايرا نيجيري", + "displayName-count-one": "نايرا نيجيري", + "displayName-count-two": "نايرا نيجيري", + "displayName-count-few": "نايرا نيجيري", + "displayName-count-many": "نايرا نيجيري", + "displayName-count-other": "نايرا نيجيري", + "symbol": "NGN", + "symbol-alt-narrow": "₦" + }, + "NIC": { + "displayName": "كوردوبة نيكاراجوا", + "symbol": "NIC" + }, + "NIO": { + "displayName": "قرطبة نيكاراغوا", + "displayName-count-zero": "قرطبة نيكاراغوا", + "displayName-count-one": "قرطبة نيكاراغوا", + "displayName-count-two": "قرطبة نيكاراغوا", + "displayName-count-few": "قرطبة نيكاراغوا", + "displayName-count-many": "قرطبة نيكاراغوا", + "displayName-count-other": "قرطبة نيكاراغوا", + "symbol": "NIO", + "symbol-alt-narrow": "C$" + }, + "NLG": { + "displayName": "جلدر هولندي", + "symbol": "NLG" + }, + "NOK": { + "displayName": "كرونة نرويجية", + "displayName-count-zero": "كرونة نرويجية", + "displayName-count-one": "كرونة نرويجية", + "displayName-count-two": "كرونة نرويجية", + "displayName-count-few": "كرونة نرويجية", + "displayName-count-many": "كرونة نرويجية", + "displayName-count-other": "كرونة نرويجية", + "symbol": "NOK", + "symbol-alt-narrow": "kr" + }, + "NPR": { + "displayName": "روبية نيبالي", + "displayName-count-zero": "روبية نيبالي", + "displayName-count-one": "روبية نيبالي", + "displayName-count-two": "روبية نيبالي", + "displayName-count-few": "روبية نيبالي", + "displayName-count-many": "روبية نيبالي", + "displayName-count-other": "روبية نيبالي", + "symbol": "NPR", + "symbol-alt-narrow": "Rs" + }, + "NZD": { + "displayName": "دولار نيوزيلندي", + "displayName-count-zero": "دولار نيوزيلندي", + "displayName-count-one": "دولار نيوزيلندي", + "displayName-count-two": "دولار نيوزيلندي", + "displayName-count-few": "دولار نيوزيلندي", + "displayName-count-many": "دولار نيوزيلندي", + "displayName-count-other": "دولار نيوزيلندي", + "symbol": "NZ$", + "symbol-alt-narrow": "NZ$" + }, + "OMR": { + "displayName": "ريال عماني", + "displayName-count-zero": "ريال عماني", + "displayName-count-one": "ريال عماني", + "displayName-count-two": "ريال عماني", + "displayName-count-few": "ريال عماني", + "displayName-count-many": "ريال عماني", + "displayName-count-other": "ريال عماني", + "symbol": "ر.ع.‏" + }, + "PAB": { + "displayName": "بالبوا بنمي", + "displayName-count-zero": "بالبوا بنمي", + "displayName-count-one": "بالبوا بنمي", + "displayName-count-two": "بالبوا بنمي", + "displayName-count-few": "بالبوا بنمي", + "displayName-count-many": "بالبوا بنمي", + "displayName-count-other": "بالبوا بنمي", + "symbol": "PAB" + }, + "PEI": { + "displayName": "PEI", + "symbol": "PEI" + }, + "PEN": { + "displayName": "سول البيرو", + "displayName-count-zero": "سول البيرو", + "displayName-count-one": "سول البيرو", + "displayName-count-two": "سول البيرو", + "displayName-count-few": "سول البيرو", + "displayName-count-many": "سول البيرو", + "displayName-count-other": "سول البيرو", + "symbol": "PEN" + }, + "PES": { + "displayName": "PES", + "symbol": "PES" + }, + "PGK": { + "displayName": "كينا بابوا غينيا الجديدة", + "displayName-count-zero": "كينا بابوا غينيا الجديدة", + "displayName-count-one": "كينا بابوا غينيا الجديدة", + "displayName-count-two": "كينا بابوا غينيا الجديدة", + "displayName-count-few": "كينا بابوا غينيا الجديدة", + "displayName-count-many": "كينا بابوا غينيا الجديدة", + "displayName-count-other": "كينا بابوا غينيا الجديدة", + "symbol": "PGK" + }, + "PHP": { + "displayName": "بيزو فلبيني", + "displayName-count-zero": "بيزو فلبيني", + "displayName-count-one": "بيزو فلبيني", + "displayName-count-two": "بيزو فلبيني", + "displayName-count-few": "بيزو فلبيني", + "displayName-count-many": "بيزو فلبيني", + "displayName-count-other": "بيزو فلبيني", + "symbol": "PHP", + "symbol-alt-narrow": "₱" + }, + "PKR": { + "displayName": "روبية باكستاني", + "displayName-count-zero": "روبية باكستاني", + "displayName-count-one": "روبية باكستاني", + "displayName-count-two": "روبية باكستاني", + "displayName-count-few": "روبية باكستاني", + "displayName-count-many": "روبية باكستاني", + "displayName-count-other": "روبية باكستاني", + "symbol": "PKR", + "symbol-alt-narrow": "Rs" + }, + "PLN": { + "displayName": "زلوتي بولندي", + "displayName-count-zero": "زلوتي بولندي", + "displayName-count-one": "زلوتي بولندي", + "displayName-count-two": "زلوتي بولندي", + "displayName-count-few": "زلوتي بولندي", + "displayName-count-many": "زلوتي بولندي", + "displayName-count-other": "زلوتي بولندي", + "symbol": "PLN", + "symbol-alt-narrow": "zł" + }, + "PLZ": { + "displayName": "زلوتي بولندي - 1950-1995", + "symbol": "PLZ" + }, + "PTE": { + "displayName": "اسكود برتغالي", + "symbol": "PTE" + }, + "PYG": { + "displayName": "جواراني باراجواي", + "displayName-count-zero": "جواراني باراجواي", + "displayName-count-one": "جواراني باراجواي", + "displayName-count-two": "جواراني باراجواي", + "displayName-count-few": "جواراني باراجواي", + "displayName-count-many": "جواراني باراجواي", + "displayName-count-other": "جواراني باراجواي", + "symbol": "PYG", + "symbol-alt-narrow": "₲" + }, + "QAR": { + "displayName": "ريال قطري", + "displayName-count-zero": "ريال قطري", + "displayName-count-one": "ريال قطري", + "displayName-count-two": "ريال قطري", + "displayName-count-few": "ريال قطري", + "displayName-count-many": "ريال قطري", + "displayName-count-other": "ريال قطري", + "symbol": "ر.ق.‏" + }, + "RHD": { + "displayName": "دولار روديسي", + "symbol": "RHD" + }, + "ROL": { + "displayName": "ليو روماني قديم", + "symbol": "ROL" + }, + "RON": { + "displayName": "ليو روماني", + "displayName-count-zero": "ليو روماني", + "displayName-count-one": "ليو روماني", + "displayName-count-two": "ليو روماني", + "displayName-count-few": "ليو روماني", + "displayName-count-many": "ليو روماني", + "displayName-count-other": "ليو روماني", + "symbol": "RON", + "symbol-alt-narrow": "lei" + }, + "RSD": { + "displayName": "دينار صربي", + "displayName-count-zero": "دينار صربي", + "displayName-count-one": "دينار صربي", + "displayName-count-two": "ديناران صربيان", + "displayName-count-few": "دينارات صربية", + "displayName-count-many": "دينارًا صربيًا", + "displayName-count-other": "دينار صربي", + "symbol": "RSD" + }, + "RUB": { + "displayName": "روبل روسي", + "displayName-count-zero": "روبل روسي", + "displayName-count-one": "روبل روسي", + "displayName-count-two": "روبل روسي", + "displayName-count-few": "روبل روسي", + "displayName-count-many": "روبل روسي", + "displayName-count-other": "روبل روسي", + "symbol": "RUB", + "symbol-alt-narrow": "₽" + }, + "RUR": { + "displayName": "روبل روسي - 1991-1998", + "symbol": "RUR", + "symbol-alt-narrow": "р." + }, + "RWF": { + "displayName": "فرنك رواندي", + "displayName-count-zero": "فرنك رواندي", + "displayName-count-one": "فرنك رواندي", + "displayName-count-two": "فرنك رواندي", + "displayName-count-few": "فرنك رواندي", + "displayName-count-many": "فرنك رواندي", + "displayName-count-other": "فرنك رواندي", + "symbol": "RWF", + "symbol-alt-narrow": "RF" + }, + "SAR": { + "displayName": "ريال سعودي", + "displayName-count-zero": "ريال سعودي", + "displayName-count-one": "ريال سعودي", + "displayName-count-two": "ريال سعودي", + "displayName-count-few": "ريال سعودي", + "displayName-count-many": "ريال سعودي", + "displayName-count-other": "ريال سعودي", + "symbol": "ر.س.‏" + }, + "SBD": { + "displayName": "دولار جزر سليمان", + "displayName-count-zero": "دولار جزر سليمان", + "displayName-count-one": "دولار جزر سليمان", + "displayName-count-two": "دولار جزر سليمان", + "displayName-count-few": "دولار جزر سليمان", + "displayName-count-many": "دولار جزر سليمان", + "displayName-count-other": "دولار جزر سليمان", + "symbol": "SBD", + "symbol-alt-narrow": "SB$" + }, + "SCR": { + "displayName": "روبية سيشيلية", + "displayName-count-zero": "روبية سيشيلية", + "displayName-count-one": "روبية سيشيلية", + "displayName-count-two": "روبية سيشيلية", + "displayName-count-few": "روبية سيشيلية", + "displayName-count-many": "روبية سيشيلية", + "displayName-count-other": "روبية سيشيلية", + "symbol": "SCR" + }, + "SDD": { + "displayName": "دينار سوداني", + "symbol": "د.س.‏" + }, + "SDG": { + "displayName": "جنيه سوداني", + "displayName-count-zero": "جنيه سوداني", + "displayName-count-one": "جنيه سوداني", + "displayName-count-two": "جنيه سوداني", + "displayName-count-few": "جنيهات سودانية", + "displayName-count-many": "جنيهًا سودانيًا", + "displayName-count-other": "جنيه سوداني", + "symbol": "ج.س." + }, + "SDP": { + "displayName": "جنيه سوداني قديم", + "symbol": "SDP" + }, + "SEK": { + "displayName": "كرونة سويدية", + "displayName-count-zero": "كرونة سويدية", + "displayName-count-one": "كرونة سويدية", + "displayName-count-two": "كرونة سويدية", + "displayName-count-few": "كرونة سويدية", + "displayName-count-many": "كرونة سويدية", + "displayName-count-other": "كرونة سويدية", + "symbol": "SEK", + "symbol-alt-narrow": "kr" + }, + "SGD": { + "displayName": "دولار سنغافوري", + "displayName-count-zero": "دولار سنغافوري", + "displayName-count-one": "دولار سنغافوري", + "displayName-count-two": "دولار سنغافوري", + "displayName-count-few": "دولار سنغافوري", + "displayName-count-many": "دولار سنغافوري", + "displayName-count-other": "دولار سنغافوري", + "symbol": "SGD", + "symbol-alt-narrow": "$" + }, + "SHP": { + "displayName": "جنيه سانت هيلين", + "displayName-count-zero": "جنيه سانت هيلين", + "displayName-count-one": "جنيه سانت هيلين", + "displayName-count-two": "جنيه سانت هيلين", + "displayName-count-few": "جنيه سانت هيلين", + "displayName-count-many": "جنيه سانت هيلين", + "displayName-count-other": "جنيه سانت هيلين", + "symbol": "SHP", + "symbol-alt-narrow": "£" + }, + "SIT": { + "displayName": "تولار سلوفيني", + "symbol": "SIT" + }, + "SKK": { + "displayName": "كرونة سلوفاكية", + "symbol": "SKK" + }, + "SLL": { + "displayName": "ليون سيراليوني", + "displayName-count-zero": "ليون سيراليوني", + "displayName-count-one": "ليون سيراليوني", + "displayName-count-two": "ليون سيراليوني", + "displayName-count-few": "ليون سيراليوني", + "displayName-count-many": "ليون سيراليوني", + "displayName-count-other": "ليون سيراليوني", + "symbol": "SLL" + }, + "SOS": { + "displayName": "شلن صومالي", + "displayName-count-zero": "شلن صومالي", + "displayName-count-one": "شلن صومالي", + "displayName-count-two": "شلن صومالي", + "displayName-count-few": "شلن صومالي", + "displayName-count-many": "شلن صومالي", + "displayName-count-other": "شلن صومالي", + "symbol": "SOS" + }, + "SRD": { + "displayName": "دولار سورينامي", + "displayName-count-zero": "دولار سورينامي", + "displayName-count-one": "دولار سورينامي", + "displayName-count-two": "دولار سورينامي", + "displayName-count-few": "دولار سورينامي", + "displayName-count-many": "دولار سورينامي", + "displayName-count-other": "دولار سورينامي", + "symbol": "SRD", + "symbol-alt-narrow": "SR$" + }, + "SRG": { + "displayName": "جلدر سورينامي", + "symbol": "SRG" + }, + "SSP": { + "displayName": "جنيه جنوب السودان", + "displayName-count-zero": "جنيه جنوب السودان", + "displayName-count-one": "جنيه جنوب السودان", + "displayName-count-two": "جنيهان جنوب السودان", + "displayName-count-few": "جنيهات جنوب السودان", + "displayName-count-many": "جنيهًا جنوب السودان", + "displayName-count-other": "جنيه جنوب السودان", + "symbol": "SSP", + "symbol-alt-narrow": "£" + }, + "STD": { + "displayName": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-zero": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-one": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-two": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-few": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-many": "دوبرا ساو تومي وبرينسيبي", + "displayName-count-other": "دوبرا ساو تومي وبرينسيبي", + "symbol": "STD", + "symbol-alt-narrow": "Db" + }, + "SUR": { + "displayName": "روبل سوفيتي", + "symbol": "SUR" + }, + "SVC": { + "displayName": "كولون سلفادوري", + "symbol": "SVC" + }, + "SYP": { + "displayName": "ليرة سورية", + "displayName-count-zero": "ليرة سورية", + "displayName-count-one": "ليرة سورية", + "displayName-count-two": "ليرة سورية", + "displayName-count-few": "ليرة سورية", + "displayName-count-many": "ليرة سورية", + "displayName-count-other": "ليرة سورية", + "symbol": "ل.س.‏", + "symbol-alt-narrow": "£" + }, + "SZL": { + "displayName": "ليلانجيني سوازيلندي", + "displayName-count-zero": "ليلانجيني سوازيلندي", + "displayName-count-one": "ليلانجيني سوازيلندي", + "displayName-count-two": "ليلانجيني سوازيلندي", + "displayName-count-few": "ليلانجيني سوازيلندي", + "displayName-count-many": "ليلانجيني سوازيلندي", + "displayName-count-other": "ليلانجيني سوازيلندي", + "symbol": "SZL" + }, + "THB": { + "displayName": "باخت تايلاندي", + "displayName-count-zero": "باخت تايلاندي", + "displayName-count-one": "باخت تايلاندي", + "displayName-count-two": "باخت تايلاندي", + "displayName-count-few": "باخت تايلاندي", + "displayName-count-many": "باخت تايلاندي", + "displayName-count-other": "باخت تايلاندي", + "symbol": "฿", + "symbol-alt-narrow": "฿" + }, + "TJR": { + "displayName": "روبل طاجيكستاني", + "symbol": "TJR" + }, + "TJS": { + "displayName": "سوموني طاجيكستاني", + "displayName-count-zero": "سوموني طاجيكستاني", + "displayName-count-one": "سوموني طاجيكستاني", + "displayName-count-two": "سوموني طاجيكستاني", + "displayName-count-few": "سوموني طاجيكستاني", + "displayName-count-many": "سوموني طاجيكستاني", + "displayName-count-other": "سوموني طاجيكستاني", + "symbol": "TJS" + }, + "TMM": { + "displayName": "مانات تركمنستاني", + "symbol": "TMM" + }, + "TMT": { + "displayName": "مانات تركمانستان", + "displayName-count-zero": "مانات تركمانستان", + "displayName-count-one": "مانات تركمانستان", + "displayName-count-two": "مانات تركمانستان", + "displayName-count-few": "مانات تركمانستان", + "displayName-count-many": "مانات تركمانستان", + "displayName-count-other": "مانات تركمانستان", + "symbol": "TMT" + }, + "TND": { + "displayName": "دينار تونسي", + "displayName-count-zero": "دينار تونسي", + "displayName-count-one": "دينار تونسي", + "displayName-count-two": "ديناران تونسيان", + "displayName-count-few": "دينارات تونسية", + "displayName-count-many": "دينارًا تونسيًا", + "displayName-count-other": "دينار تونسي", + "symbol": "د.ت.‏" + }, + "TOP": { + "displayName": "بانغا تونغا", + "displayName-count-zero": "بانغا تونغا", + "displayName-count-one": "بانغا تونغا", + "displayName-count-two": "بانغا تونغا", + "displayName-count-few": "بانغا تونغا", + "displayName-count-many": "بانغا تونغا", + "displayName-count-other": "بانغا تونغا", + "symbol": "TOP", + "symbol-alt-narrow": "T$" + }, + "TPE": { + "displayName": "اسكود تيموري", + "symbol": "TPE" + }, + "TRL": { + "displayName": "ليرة تركي", + "symbol": "TRL" + }, + "TRY": { + "displayName": "ليرة تركية", + "displayName-count-zero": "ليرة تركية", + "displayName-count-one": "ليرة تركية", + "displayName-count-two": "ليرة تركية", + "displayName-count-few": "ليرة تركية", + "displayName-count-many": "ليرة تركية", + "displayName-count-other": "ليرة تركية", + "symbol": "TRY", + "symbol-alt-narrow": "₺", + "symbol-alt-variant": "TL" + }, + "TTD": { + "displayName": "دولار ترينداد وتوباجو", + "displayName-count-zero": "دولار ترينداد وتوباجو", + "displayName-count-one": "دولار ترينداد وتوباجو", + "displayName-count-two": "دولار ترينداد وتوباجو", + "displayName-count-few": "دولار ترينداد وتوباجو", + "displayName-count-many": "دولار ترينداد وتوباجو", + "displayName-count-other": "دولار ترينداد وتوباجو", + "symbol": "TTD", + "symbol-alt-narrow": "TT$" + }, + "TWD": { + "displayName": "دولار تايواني", + "displayName-count-zero": "دولار تايواني", + "displayName-count-one": "دولار تايواني", + "displayName-count-two": "دولار تايواني", + "displayName-count-few": "دولار تايواني", + "displayName-count-many": "دولار تايواني", + "displayName-count-other": "دولار تايواني", + "symbol": "NT$", + "symbol-alt-narrow": "NT$" + }, + "TZS": { + "displayName": "شلن تنزاني", + "displayName-count-zero": "شلن تنزاني", + "displayName-count-one": "شلن تنزاني", + "displayName-count-two": "شلن تنزاني", + "displayName-count-few": "شلن تنزاني", + "displayName-count-many": "شلن تنزاني", + "displayName-count-other": "شلن تنزاني", + "symbol": "TZS" + }, + "UAH": { + "displayName": "هريفنيا أوكراني", + "displayName-count-zero": "هريفنيا أوكراني", + "displayName-count-one": "هريفنيا أوكراني", + "displayName-count-two": "هريفنيا أوكراني", + "displayName-count-few": "هريفنيا أوكراني", + "displayName-count-many": "هريفنيا أوكراني", + "displayName-count-other": "هريفنيا أوكراني", + "symbol": "UAH", + "symbol-alt-narrow": "₴" + }, + "UAK": { + "displayName": "UAK", + "symbol": "UAK" + }, + "UGS": { + "displayName": "شلن أوغندي - 1966-1987", + "symbol": "UGS" + }, + "UGX": { + "displayName": "شلن أوغندي", + "displayName-count-zero": "شلن أوغندي", + "displayName-count-one": "شلن أوغندي", + "displayName-count-two": "شلن أوغندي", + "displayName-count-few": "شلن أوغندي", + "displayName-count-many": "شلن أوغندي", + "displayName-count-other": "شلن أوغندي", + "symbol": "UGX" + }, + "USD": { + "displayName": "دولار أمريكي", + "displayName-count-zero": "دولار أمريكي", + "displayName-count-one": "دولار أمريكي", + "displayName-count-two": "دولار أمريكي", + "displayName-count-few": "دولار أمريكي", + "displayName-count-many": "دولار أمريكي", + "displayName-count-other": "دولار أمريكي", + "symbol": "US$", + "symbol-alt-narrow": "US$" + }, + "USN": { + "displayName": "دولار أمريكي (اليوم التالي)‏", + "symbol": "USN" + }, + "USS": { + "displayName": "دولار أمريكي (نفس اليوم)‏", + "symbol": "USS" + }, + "UYI": { + "displayName": "UYI", + "symbol": "UYI" + }, + "UYP": { + "displayName": "بيزو أوروجواي - 1975-1993", + "symbol": "UYP" + }, + "UYU": { + "displayName": "بيزو اوروغواي", + "displayName-count-zero": "بيزو اوروغواي", + "displayName-count-one": "بيزو اوروغواي", + "displayName-count-two": "بيزو اوروغواي", + "displayName-count-few": "بيزو اوروغواي", + "displayName-count-many": "بيزو اوروغواي", + "displayName-count-other": "بيزو اوروغواي", + "symbol": "UYU", + "symbol-alt-narrow": "UY$" + }, + "UZS": { + "displayName": "سوم أوزبكستاني", + "displayName-count-zero": "سوم أوزبكستاني", + "displayName-count-one": "سوم أوزبكستاني", + "displayName-count-two": "سوم أوزبكستاني", + "displayName-count-few": "سوم أوزبكستاني", + "displayName-count-many": "سوم أوزبكستاني", + "displayName-count-other": "سوم أوزبكستاني", + "symbol": "UZS" + }, + "VEB": { + "displayName": "بوليفار فنزويلي - 1871-2008", + "symbol": "VEB" + }, + "VEF": { + "displayName": "بوليفار فنزويلي", + "displayName-count-zero": "بوليفار فنزويلي", + "displayName-count-one": "بوليفار فنزويلي", + "displayName-count-two": "بوليفار فنزويلي", + "displayName-count-few": "بوليفار فنزويلي", + "displayName-count-many": "بوليفار فنزويلي", + "displayName-count-other": "بوليفار فنزويلي", + "symbol": "VEF", + "symbol-alt-narrow": "Bs" + }, + "VND": { + "displayName": "دونج فيتنامي", + "displayName-count-zero": "دونج فيتنامي", + "displayName-count-one": "دونج فيتنامي", + "displayName-count-two": "دونج فيتنامي", + "displayName-count-few": "دونج فيتنامي", + "displayName-count-many": "دونج فيتنامي", + "displayName-count-other": "دونج فيتنامي", + "symbol": "₫", + "symbol-alt-narrow": "₫" + }, + "VNN": { + "displayName": "VNN", + "symbol": "VNN" + }, + "VUV": { + "displayName": "فاتو فانواتو", + "displayName-count-zero": "فاتو فانواتو", + "displayName-count-one": "فاتو فانواتو", + "displayName-count-two": "فاتو فانواتو", + "displayName-count-few": "فاتو فانواتو", + "displayName-count-many": "فاتو فانواتو", + "displayName-count-other": "فاتو فانواتو", + "symbol": "VUV" + }, + "WST": { + "displayName": "تالا ساموا", + "displayName-count-zero": "تالا ساموا", + "displayName-count-one": "تالا ساموا", + "displayName-count-two": "تالا ساموا", + "displayName-count-few": "تالا ساموا", + "displayName-count-many": "تالا ساموا", + "displayName-count-other": "تالا ساموا", + "symbol": "WST" + }, + "XAF": { + "displayName": "فرنك وسط أفريقي", + "displayName-count-zero": "فرنك وسط أفريقي", + "displayName-count-one": "فرنك وسط أفريقي", + "displayName-count-two": "فرنك وسط أفريقي", + "displayName-count-few": "فرنك وسط أفريقي", + "displayName-count-many": "فرنك وسط أفريقي", + "displayName-count-other": "فرنك وسط أفريقي", + "symbol": "FCFA" + }, + "XAG": { + "displayName": "فضة", + "symbol": "XAG" + }, + "XAU": { + "displayName": "ذهب", + "symbol": "XAU" + }, + "XBA": { + "displayName": "الوحدة الأوروبية المركبة", + "symbol": "XBA" + }, + "XBB": { + "displayName": "الوحدة المالية الأوروبية", + "symbol": "XBB" + }, + "XBC": { + "displayName": "الوحدة الحسابية الأوروبية", + "symbol": "XBC" + }, + "XBD": { + "displayName": "(XBD)وحدة الحساب الأوروبية", + "symbol": "XBD" + }, + "XCD": { + "displayName": "دولار شرق الكاريبي", + "displayName-count-zero": "دولار شرق الكاريبي", + "displayName-count-one": "دولار شرق الكاريبي", + "displayName-count-two": "دولار شرق الكاريبي", + "displayName-count-few": "دولار شرق الكاريبي", + "displayName-count-many": "دولار شرق الكاريبي", + "displayName-count-other": "دولار شرق الكاريبي", + "symbol": "EC$", + "symbol-alt-narrow": "$" + }, + "XDR": { + "displayName": "حقوق السحب الخاصة", + "symbol": "XDR" + }, + "XEU": { + "displayName": "وحدة النقد الأوروبية", + "symbol": "XEU" + }, + "XFO": { + "displayName": "فرنك فرنسي ذهبي", + "symbol": "XFO" + }, + "XFU": { + "displayName": "(UIC)فرنك فرنسي", + "symbol": "XFU" + }, + "XOF": { + "displayName": "فرنك غرب أفريقي", + "displayName-count-zero": "فرنك غرب أفريقي", + "displayName-count-one": "فرنك غرب أفريقي", + "displayName-count-two": "فرنك غرب أفريقي", + "displayName-count-few": "فرنك غرب أفريقي", + "displayName-count-many": "فرنك غرب أفريقي", + "displayName-count-other": "فرنك غرب أفريقي", + "symbol": "CFA" + }, + "XPD": { + "displayName": "بالاديوم", + "symbol": "XPD" + }, + "XPF": { + "displayName": "فرنك سي إف بي", + "displayName-count-zero": "فرنك سي إف بي", + "displayName-count-one": "فرنك سي إف بي", + "displayName-count-two": "فرنك سي إف بي", + "displayName-count-few": "فرنك سي إف بي", + "displayName-count-many": "فرنك سي إف بي", + "displayName-count-other": "فرنك سي إف بي", + "symbol": "CFPF" + }, + "XPT": { + "displayName": "البلاتين", + "symbol": "XPT" + }, + "XRE": { + "displayName": "XRE", + "symbol": "XRE" + }, + "XSU": { + "displayName": "XSU", + "symbol": "XSU" + }, + "XTS": { + "displayName": "كود اختبار العملة", + "symbol": "XTS" + }, + "XUA": { + "displayName": "XUA", + "symbol": "XUA" + }, + "XXX": { + "displayName": "عملة غير معروفة", + "displayName-count-zero": "(عملة غير معروفة)", + "displayName-count-one": "(عملة غير معروفة)", + "displayName-count-two": "(عملة غير معروفة)", + "displayName-count-few": "(عملة غير معروفة)", + "displayName-count-many": "(عملة غير معروفة)", + "displayName-count-other": "(عملة غير معروفة)", + "symbol": "***" + }, + "YDD": { + "displayName": "دينار يمني", + "symbol": "YDD" + }, + "YER": { + "displayName": "ريال يمني", + "displayName-count-zero": "ريال يمني", + "displayName-count-one": "ريال يمني", + "displayName-count-two": "ريال يمني", + "displayName-count-few": "ريال يمني", + "displayName-count-many": "ريال يمني", + "displayName-count-other": "ريال يمني", + "symbol": "ر.ي.‏" + }, + "YUD": { + "displayName": "دينار يوغسلافي", + "symbol": "YUD" + }, + "YUM": { + "displayName": "YUM", + "symbol": "YUM" + }, + "YUN": { + "displayName": "دينار يوغسلافي قابل للتحويل", + "symbol": "YUN" + }, + "YUR": { + "displayName": "YUR", + "symbol": "YUR" + }, + "ZAL": { + "displayName": "راند جنوب أفريقيا -مالي", + "symbol": "ZAL" + }, + "ZAR": { + "displayName": "راند جنوب أفريقيا", + "displayName-count-zero": "راند جنوب أفريقيا", + "displayName-count-one": "راند جنوب أفريقيا", + "displayName-count-two": "راند جنوب أفريقيا", + "displayName-count-few": "راند جنوب أفريقيا", + "displayName-count-many": "راند جنوب أفريقيا", + "displayName-count-other": "راند جنوب أفريقيا", + "symbol": "ZAR", + "symbol-alt-narrow": "R" + }, + "ZMK": { + "displayName": "كواشا زامبي - 1968-2012", + "displayName-count-zero": "كواشا زامبي - 1968-2012", + "displayName-count-one": "كواشا زامبي - 1968-2012", + "displayName-count-two": "كواشا زامبي - 1968-2012", + "displayName-count-few": "كواشا زامبي - 1968-2012", + "displayName-count-many": "كواشا زامبي - 1968-2012", + "displayName-count-other": "كواشا زامبي - 1968-2012", + "symbol": "ZMK" + }, + "ZMW": { + "displayName": "كواشا زامبي", + "displayName-count-zero": "كواشا زامبي", + "displayName-count-one": "كواشا زامبي", + "displayName-count-two": "كواشا زامبي", + "displayName-count-few": "كواشا زامبي", + "displayName-count-many": "كواشا زامبي", + "displayName-count-other": "كواشا زامبي", + "symbol": "ZMW", + "symbol-alt-narrow": "ZK" + }, + "ZRN": { + "displayName": "زائير زائيري جديد", + "symbol": "ZRN" + }, + "ZRZ": { + "displayName": "زائير زائيري", + "symbol": "ZRZ" + }, + "ZWD": { + "displayName": "دولار زمبابوي", + "symbol": "ZWD" + }, + "ZWL": { + "displayName": "دولار زمبابوي 2009", + "symbol": "ZWL" + }, + "ZWR": { + "displayName": "ZWR", + "symbol": "ZWR" + } } - } + } } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/ar/ca-islamic.json b/src/common/cldr-data/main/ar/ca-islamic.json index 1a4ffdb2..596197cb 100644 --- a/src/common/cldr-data/main/ar/ca-islamic.json +++ b/src/common/cldr-data/main/ar/ca-islamic.json @@ -1,519 +1,520 @@ { - "main": { - "en": { - "identity": { - "version": { - "_number": "$Revision: 14491 $", - "_cldrVersion": "34" + "main": { + "en": { + "identity": { + "version": { + "_number": "$Revision: 14491 $", + "_cldrVersion": "34" + }, + "language": "en" }, - "language": "en" - }, - "dates": { - "calendars": { - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" + "dates": { + "calendars": { + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" + "days": { + "format": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "narrow": { - "midnight": "mi", - "am": "a", - "am-alt-variant": "am", - "noon": "n", - "pm": "p", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "narrow": { + "midnight": "mi", + "am": "a", + "am-alt-variant": "am", + "noon": "n", + "pm": "p", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "narrow": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eras": { + "eraNames": { + "0": "AH" }, - "narrow": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eraAbbr": { + "0": "AH" }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eraNarrow": { + "0": "AH" } - } - }, - "eras": { - "eraNames": { - "0": "AH" - }, - "eraAbbr": { - "0": "AH" }, - "eraNarrow": { - "0": "AH" - } - }, - "dateFormats": { - "full": "EEEE, MMMM d, y G", - "long": "MMMM d, y G", - "medium": "MMM d, y G", - "short": "M/d/y GGGGG" - }, - "timeFormats": { - "full": "h:mm:ss a zzzz", - "long": "h:mm:ss a z", - "medium": "h:mm:ss a", - "short": "h:mm a" - }, - "dateTimeFormats": { - "full": "{1} 'at' {0}", - "long": "{1} 'at' {0}", - "medium": "{1}, {0}", - "short": "{1}, {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "d E", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "MMM d, y G", - "GyMMMEd": "E, MMM d, y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "M/d", - "MEd": "E, M/d", - "MMM": "LLL", - "MMMd": "MMM d", - "MMMEd": "E, MMM d", - "MMMMd": "MMMM d", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M/y GGGGG", - "yyyyMd": "M/d/y GGGGG", - "yyyyMEd": "E, M/d/y GGGGG", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "MMM d, y G", - "yyyyMMMEd": "E, MMM d, y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" + "dateFormats": { + "full": "EEEE, MMMM d, y G", + "long": "MMMM d, y G", + "medium": "MMM d, y G", + "short": "M/d/y GGGGG" }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{0} {1}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{0} {1}" + "timeFormats": { + "full": "h:mm:ss a zzzz", + "long": "h:mm:ss a z", + "medium": "h:mm:ss a", + "short": "h:mm a" }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d – d" - }, - "Gy": { - "G": "y G – y G", - "y": "y – y G" - }, - "GyM": { - "G": "M/y GGGGG – M/y GGGGG", - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "GyMd": { - "d": "M/d/y – M/d/y GGGGG", - "G": "M/d/y GGGGG – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "GyMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "GyMMM": { - "G": "MMM y G – MMM y G", - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "GyMMMd": { - "d": "MMM d – d, y G", - "G": "MMM d, y G – MMM d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "GyMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "G": "E, MMM d, y G – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "h": { - "a": "h a – h a", - "h": "h – h a" - }, - "H": { - "H": "HH – HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm – h:mm a", - "m": "h:mm – h:mm a" - }, - "Hm": { - "H": "HH:mm – HH:mm", - "m": "HH:mm – HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm – h:mm a v", - "m": "h:mm – h:mm a v" - }, - "Hmv": { - "H": "HH:mm – HH:mm v", - "m": "HH:mm – HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h – h a v" - }, - "Hv": { - "H": "HH – HH v" - }, - "M": { - "M": "M – M" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "E, M/d – E, M/d", - "M": "E, M/d – E, M/d" - }, - "MMM": { - "M": "MMM – MMM" - }, - "MMMd": { - "d": "MMM d – d", - "M": "MMM d – MMM d" - }, - "MMMEd": { - "d": "E, MMM d – E, MMM d", - "M": "E, MMM d – E, MMM d" - }, - "y": { - "y": "y – y G" - }, - "yM": { - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "yMd": { - "d": "M/d/y – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "yMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "yMMM": { - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "yMMMd": { - "d": "MMM d – d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "yMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "yMMMM": { - "M": "MMMM – MMMM y G", - "y": "MMMM y – MMMM y G" + "dateTimeFormats": { + "full": "{1} 'at' {0}", + "long": "{1} 'at' {0}", + "medium": "{1}, {0}", + "short": "{1}, {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "d E", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "MMM d, y G", + "GyMMMEd": "E, MMM d, y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "M/d", + "MEd": "E, M/d", + "MMM": "LLL", + "MMMd": "MMM d", + "MMMEd": "E, MMM d", + "MMMMd": "MMMM d", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M/y GGGGG", + "yyyyMd": "M/d/y GGGGG", + "yyyyMEd": "E, M/d/y GGGGG", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "MMM d, y G", + "yyyyMMMEd": "E, MMM d, y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{0} {1}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{0} {1}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d – d" + }, + "Gy": { + "G": "y G – y G", + "y": "y – y G" + }, + "GyM": { + "G": "M/y GGGGG – M/y GGGGG", + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "GyMd": { + "d": "M/d/y – M/d/y GGGGG", + "G": "M/d/y GGGGG – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "GyMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "GyMMM": { + "G": "MMM y G – MMM y G", + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "GyMMMd": { + "d": "MMM d – d, y G", + "G": "MMM d, y G – MMM d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "GyMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "G": "E, MMM d, y G – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "h": { + "a": "h a – h a", + "h": "h – h a" + }, + "H": { + "H": "HH – HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm – h:mm a", + "m": "h:mm – h:mm a" + }, + "Hm": { + "H": "HH:mm – HH:mm", + "m": "HH:mm – HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm – h:mm a v", + "m": "h:mm – h:mm a v" + }, + "Hmv": { + "H": "HH:mm – HH:mm v", + "m": "HH:mm – HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h – h a v" + }, + "Hv": { + "H": "HH – HH v" + }, + "M": { + "M": "M – M" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "E, M/d – E, M/d", + "M": "E, M/d – E, M/d" + }, + "MMM": { + "M": "MMM – MMM" + }, + "MMMd": { + "d": "MMM d – d", + "M": "MMM d – MMM d" + }, + "MMMEd": { + "d": "E, MMM d – E, MMM d", + "M": "E, MMM d – E, MMM d" + }, + "y": { + "y": "y – y G" + }, + "yM": { + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "yMd": { + "d": "M/d/y – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "yMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "yMMM": { + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "yMMMd": { + "d": "MMM d – d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "yMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "yMMMM": { + "M": "MMMM – MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } @@ -522,4 +523,4 @@ } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/de/all.json b/src/common/cldr-data/main/de/all.json index 1da8a518..423e9803 100644 --- a/src/common/cldr-data/main/de/all.json +++ b/src/common/cldr-data/main/de/all.json @@ -1,5408 +1,5409 @@ { - "main": { - "de": { - "identity": { - "version": { - "_number": "$Revision: 12879 $", - "_cldrVersion": "30.0.3" + "main": { + "de": { + "identity": { + "version": { + "_number": "$Revision: 12879 $", + "_cldrVersion": "30.0.3" + }, + "language": "de" }, - "language": "de" - }, - "dates": { - "calendars": { - "gregorian": { - "months": { - "format": { - "abbreviated": { - "1": "Jan.", - "2": "Feb.", - "3": "März", - "4": "Apr.", - "5": "Mai", - "6": "Juni", - "7": "Juli", - "8": "Aug.", - "9": "Sep.", - "10": "Okt.", - "11": "Nov.", - "12": "Dez." - }, - "narrow": { - "1": "J", - "2": "F", - "3": "M", - "4": "A", - "5": "M", - "6": "J", - "7": "J", - "8": "A", - "9": "S", - "10": "O", - "11": "N", - "12": "D" - }, - "wide": { - "1": "Januar", - "2": "Februar", - "3": "März", - "4": "April", - "5": "Mai", - "6": "Juni", - "7": "Juli", - "8": "August", - "9": "September", - "10": "Oktober", - "11": "November", - "12": "Dezember" - } - }, - "stand-alone": { - "abbreviated": { - "1": "Jan", - "2": "Feb", - "3": "Mär", - "4": "Apr", - "5": "Mai", - "6": "Jun", - "7": "Jul", - "8": "Aug", - "9": "Sep", - "10": "Okt", - "11": "Nov", - "12": "Dez" - }, - "narrow": { - "1": "J", - "2": "F", - "3": "M", - "4": "A", - "5": "M", - "6": "J", - "7": "J", - "8": "A", - "9": "S", - "10": "O", - "11": "N", - "12": "D" - }, - "wide": { - "1": "Januar", - "2": "Februar", - "3": "März", - "4": "April", - "5": "Mai", - "6": "Juni", - "7": "Juli", - "8": "August", - "9": "September", - "10": "Oktober", - "11": "November", - "12": "Dezember" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "D", - "wed": "M", - "thu": "D", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "wide": { - "sun": "Sonntag", - "mon": "Montag", - "tue": "Dienstag", - "wed": "Mittwoch", - "thu": "Donnerstag", - "fri": "Freitag", - "sat": "Samstag" + "dates": { + "calendars": { + "gregorian": { + "months": { + "format": { + "abbreviated": { + "1": "Jan.", + "2": "Feb.", + "3": "März", + "4": "Apr.", + "5": "Mai", + "6": "Juni", + "7": "Juli", + "8": "Aug.", + "9": "Sep.", + "10": "Okt.", + "11": "Nov.", + "12": "Dez." + }, + "narrow": { + "1": "J", + "2": "F", + "3": "M", + "4": "A", + "5": "M", + "6": "J", + "7": "J", + "8": "A", + "9": "S", + "10": "O", + "11": "N", + "12": "D" + }, + "wide": { + "1": "Januar", + "2": "Februar", + "3": "März", + "4": "April", + "5": "Mai", + "6": "Juni", + "7": "Juli", + "8": "August", + "9": "September", + "10": "Oktober", + "11": "November", + "12": "Dezember" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Jan", + "2": "Feb", + "3": "Mär", + "4": "Apr", + "5": "Mai", + "6": "Jun", + "7": "Jul", + "8": "Aug", + "9": "Sep", + "10": "Okt", + "11": "Nov", + "12": "Dez" + }, + "narrow": { + "1": "J", + "2": "F", + "3": "M", + "4": "A", + "5": "M", + "6": "J", + "7": "J", + "8": "A", + "9": "S", + "10": "O", + "11": "N", + "12": "D" + }, + "wide": { + "1": "Januar", + "2": "Februar", + "3": "März", + "4": "April", + "5": "Mai", + "6": "Juni", + "7": "Juli", + "8": "August", + "9": "September", + "10": "Oktober", + "11": "November", + "12": "Dezember" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "So", - "mon": "Mo", - "tue": "Di", - "wed": "Mi", - "thu": "Do", - "fri": "Fr", - "sat": "Sa" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "D", - "wed": "M", - "thu": "D", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "wide": { - "sun": "Sonntag", - "mon": "Montag", - "tue": "Dienstag", - "wed": "Mittwoch", - "thu": "Donnerstag", - "fri": "Freitag", - "sat": "Samstag" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1. Quartal", - "2": "2. Quartal", - "3": "3. Quartal", - "4": "4. Quartal" + "days": { + "format": { + "abbreviated": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "D", + "wed": "M", + "thu": "D", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "wide": { + "sun": "Sonntag", + "mon": "Montag", + "tue": "Dienstag", + "wed": "Mittwoch", + "thu": "Donnerstag", + "fri": "Freitag", + "sat": "Samstag" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "So", + "mon": "Mo", + "tue": "Di", + "wed": "Mi", + "thu": "Do", + "fri": "Fr", + "sat": "Sa" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "D", + "wed": "M", + "thu": "D", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "wide": { + "sun": "Sonntag", + "mon": "Montag", + "tue": "Dienstag", + "wed": "Mittwoch", + "thu": "Donnerstag", + "fri": "Freitag", + "sat": "Samstag" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1. Quartal", - "2": "2. Quartal", - "3": "3. Quartal", - "4": "4. Quartal" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "Mitternacht", - "am": "vorm.", - "pm": "nachm.", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" - }, - "narrow": { - "midnight": "Mitternacht", - "am": "vm.", - "pm": "nm.", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" - }, - "wide": { - "midnight": "Mitternacht", - "am": "vorm.", - "pm": "nachm.", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1. Quartal", + "2": "2. Quartal", + "3": "3. Quartal", + "4": "4. Quartal" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1. Quartal", + "2": "2. Quartal", + "3": "3. Quartal", + "4": "4. Quartal" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "Mitternacht", - "am": "vorm.", - "pm": "nachm.", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" - }, - "narrow": { - "midnight": "Mitternacht", - "am": "vorm.", - "pm": "nachm.", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" - }, - "wide": { - "midnight": "Mitternacht", - "am": "vorm.", - "pm": "nachm.", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" - } - } - }, - "eras": { - "eraNames": { - "0": "v. Chr.", - "0-alt-variant": "vor unserer Zeitrechnung", - "1": "n. Chr.", - "1-alt-variant": "unserer Zeitrechnung" - }, - "eraAbbr": { - "0": "v. Chr.", - "0-alt-variant": "v. u. Z.", - "1": "n. Chr.", - "1-alt-variant": "u. Z." - }, - "eraNarrow": { - "0": "v. Chr.", - "0-alt-variant": "v. u. Z.", - "1": "n. Chr.", - "1-alt-variant": "u. Z." - } - }, - "dateFormats": { - "full": "EEEE, d. MMMM y", - "long": "d. MMMM y", - "medium": "dd.MM.y", - "short": "dd.MM.yy" - }, - "timeFormats": { - "full": "HH:mm:ss zzzz", - "long": "HH:mm:ss z", - "medium": "HH:mm:ss", - "short": "HH:mm" - }, - "dateTimeFormats": { - "full": "{1} 'um' {0}", - "long": "{1} 'um' {0}", - "medium": "{1}, {0}", - "short": "{1}, {0}", - "availableFormats": { - "d": "d", - "E": "ccc", - "Ed": "E, d.", - "Ehm": "E h:mm a", - "EHm": "E, HH:mm", - "Ehms": "E, h:mm:ss a", - "EHms": "E, HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d. MMM y G", - "GyMMMEd": "E, d. MMM y G", - "h": "h 'Uhr' a", - "H": "HH 'Uhr'", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "hmsv": "h:mm:ss a v", - "Hmsv": "HH:mm:ss v", - "hmv": "h:mm a v", - "Hmv": "HH:mm v", - "M": "L", - "Md": "d.M.", - "MEd": "E, d.M.", - "MMd": "d.MM.", - "MMdd": "dd.MM.", - "MMM": "LLL", - "MMMd": "d. MMM", - "MMMEd": "E, d. MMM", - "MMMMd": "d. MMMM", - "MMMMEd": "E, d. MMMM", - "MMMMW": "'Woche' W 'im' MMM", - "MMMMW": "'Woche' W 'im' MMM", - "ms": "mm:ss", - "y": "y", - "yM": "M.y", - "yMd": "d.M.y", - "yMEd": "E, d.M.y", - "yMM": "MM.y", - "yMMdd": "dd.MM.y", - "yMMM": "MMM y", - "yMMMd": "d. MMM y", - "yMMMEd": "E, d. MMM y", - "yMMMM": "MMMM y", - "yQQQ": "QQQ y", - "yQQQQ": "QQQQ y", - "yw": "'Woche' w 'des' 'Jahres' y", - "yw": "'Woche' w 'des' 'Jahres' y" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d.–d." - }, - "h": { - "a": "h 'Uhr' a – h 'Uhr' a", - "h": "h – h 'Uhr' a" - }, - "H": { - "H": "HH–HH 'Uhr'" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm–h:mm a", - "m": "h:mm–h:mm a" - }, - "Hm": { - "H": "HH:mm–HH:mm 'Uhr'", - "m": "HH:mm–HH:mm 'Uhr'" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm–h:mm a v", - "m": "h:mm–h:mm a v" - }, - "Hmv": { - "H": "HH:mm–HH:mm 'Uhr' v", - "m": "HH:mm–HH:mm 'Uhr' v" - }, - "hv": { - "a": "h a – h a v", - "h": "h–h a v" - }, - "Hv": { - "H": "HH–HH 'Uhr' v" - }, - "M": { - "M": "M.–M." - }, - "Md": { - "d": "dd.MM. – dd.MM.", - "M": "dd.MM. – dd.MM." - }, - "MEd": { - "d": "E, dd.MM. – E, dd.MM.", - "M": "E, dd.MM. – E, dd.MM." - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "d.–d. MMM", - "M": "d. MMM – d. MMM" - }, - "MMMEd": { - "d": "E, d. – E, d. MMM", - "M": "E, d. MMM – E, d. MMM" - }, - "MMMM": { - "M": "LLLL–LLLL" - }, - "y": { - "y": "y–y" - }, - "yM": { - "M": "MM.y – MM.y", - "y": "MM.y – MM.y" - }, - "yMd": { - "d": "dd.MM.y – dd.MM.y", - "M": "dd.MM.y – dd.MM.y", - "y": "dd.MM.y – dd.MM.y" - }, - "yMEd": { - "d": "E, dd.MM.y – E, dd.MM.y", - "M": "E, dd.MM.y – E, dd.MM.y", - "y": "E, dd.MM.y – E, dd.MM.y" - }, - "yMMM": { - "M": "MMM–MMM y", - "y": "MMM y – MMM y" - }, - "yMMMd": { - "d": "d.–d. MMM y", - "M": "d. MMM – d. MMM y", - "y": "d. MMM y – d. MMM y" - }, - "yMMMEd": { - "d": "E, d. – E, d. MMM y", - "M": "E, d. MMM – E, d. MMM y", - "y": "E, d. MMM y – E, d. MMM y" - }, - "yMMMM": { - "M": "MMMM–MMMM y", - "y": "MMMM y – MMMM y" - } - } - } - }, - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Dschumada I", - "6": "Dschumada II", - "7": "Radschab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhu l-qaʿda", - "12": "Dhu l-Hiddscha" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "Mitternacht", + "am": "vorm.", + "pm": "nachm.", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + }, + "narrow": { + "midnight": "Mitternacht", + "am": "vm.", + "pm": "nm.", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + }, + "wide": { + "midnight": "Mitternacht", + "am": "vorm.", + "pm": "nachm.", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "Mitternacht", + "am": "vorm.", + "pm": "nachm.", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + }, + "narrow": { + "midnight": "Mitternacht", + "am": "vorm.", + "pm": "nachm.", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + }, + "wide": { + "midnight": "Mitternacht", + "am": "vorm.", + "pm": "nachm.", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Dschumada I", - "6": "Dschumada II", - "7": "Radschab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhu l-qaʿda", - "12": "Dhu l-Hiddscha" + "eras": { + "eraNames": { + "0": "v. Chr.", + "0-alt-variant": "vor unserer Zeitrechnung", + "1": "n. Chr.", + "1-alt-variant": "unserer Zeitrechnung" + }, + "eraAbbr": { + "0": "v. Chr.", + "0-alt-variant": "v. u. Z.", + "1": "n. Chr.", + "1-alt-variant": "u. Z." + }, + "eraNarrow": { + "0": "v. Chr.", + "0-alt-variant": "v. u. Z.", + "1": "n. Chr.", + "1-alt-variant": "u. Z." + } + }, + "dateFormats": { + "full": "EEEE, d. MMMM y", + "long": "d. MMMM y", + "medium": "dd.MM.y", + "short": "dd.MM.yy" + }, + "timeFormats": { + "full": "HH:mm:ss zzzz", + "long": "HH:mm:ss z", + "medium": "HH:mm:ss", + "short": "HH:mm" + }, + "dateTimeFormats": { + "full": "{1} 'um' {0}", + "long": "{1} 'um' {0}", + "medium": "{1}, {0}", + "short": "{1}, {0}", + "availableFormats": { + "d": "d", + "E": "ccc", + "Ed": "E, d.", + "Ehm": "E h:mm a", + "EHm": "E, HH:mm", + "Ehms": "E, h:mm:ss a", + "EHms": "E, HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d. MMM y G", + "GyMMMEd": "E, d. MMM y G", + "h": "h 'Uhr' a", + "H": "HH 'Uhr'", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "hmsv": "h:mm:ss a v", + "Hmsv": "HH:mm:ss v", + "hmv": "h:mm a v", + "Hmv": "HH:mm v", + "M": "L", + "Md": "d.M.", + "MEd": "E, d.M.", + "MMd": "d.MM.", + "MMdd": "dd.MM.", + "MMM": "LLL", + "MMMd": "d. MMM", + "MMMEd": "E, d. MMM", + "MMMMd": "d. MMMM", + "MMMMEd": "E, d. MMMM", + "MMMMW": "'Woche' W 'im' MMM", + "MMMMW": "'Woche' W 'im' MMM", + "ms": "mm:ss", + "y": "y", + "yM": "M.y", + "yMd": "d.M.y", + "yMEd": "E, d.M.y", + "yMM": "MM.y", + "yMMdd": "dd.MM.y", + "yMMM": "MMM y", + "yMMMd": "d. MMM y", + "yMMMEd": "E, d. MMM y", + "yMMMM": "MMMM y", + "yQQQ": "QQQ y", + "yQQQQ": "QQQQ y", + "yw": "'Woche' w 'des' 'Jahres' y", + "yw": "'Woche' w 'des' 'Jahres' y" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d.–d." + }, + "h": { + "a": "h 'Uhr' a – h 'Uhr' a", + "h": "h – h 'Uhr' a" + }, + "H": { + "H": "HH–HH 'Uhr'" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm–h:mm a", + "m": "h:mm–h:mm a" + }, + "Hm": { + "H": "HH:mm–HH:mm 'Uhr'", + "m": "HH:mm–HH:mm 'Uhr'" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm–h:mm a v", + "m": "h:mm–h:mm a v" + }, + "Hmv": { + "H": "HH:mm–HH:mm 'Uhr' v", + "m": "HH:mm–HH:mm 'Uhr' v" + }, + "hv": { + "a": "h a – h a v", + "h": "h–h a v" + }, + "Hv": { + "H": "HH–HH 'Uhr' v" + }, + "M": { + "M": "M.–M." + }, + "Md": { + "d": "dd.MM. – dd.MM.", + "M": "dd.MM. – dd.MM." + }, + "MEd": { + "d": "E, dd.MM. – E, dd.MM.", + "M": "E, dd.MM. – E, dd.MM." + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "d.–d. MMM", + "M": "d. MMM – d. MMM" + }, + "MMMEd": { + "d": "E, d. – E, d. MMM", + "M": "E, d. MMM – E, d. MMM" + }, + "MMMM": { + "M": "LLLL–LLLL" + }, + "y": { + "y": "y–y" + }, + "yM": { + "M": "MM.y – MM.y", + "y": "MM.y – MM.y" + }, + "yMd": { + "d": "dd.MM.y – dd.MM.y", + "M": "dd.MM.y – dd.MM.y", + "y": "dd.MM.y – dd.MM.y" + }, + "yMEd": { + "d": "E, dd.MM.y – E, dd.MM.y", + "M": "E, dd.MM.y – E, dd.MM.y", + "y": "E, dd.MM.y – E, dd.MM.y" + }, + "yMMM": { + "M": "MMM–MMM y", + "y": "MMM y – MMM y" + }, + "yMMMd": { + "d": "d.–d. MMM y", + "M": "d. MMM – d. MMM y", + "y": "d. MMM y – d. MMM y" + }, + "yMMMEd": { + "d": "E, d. – E, d. MMM y", + "M": "E, d. MMM – E, d. MMM y", + "y": "E, d. MMM y – E, d. MMM y" + }, + "yMMMM": { + "M": "MMMM–MMMM y", + "y": "MMMM y – MMMM y" + } } } }, - "days": { - "format": { - "abbreviated": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "D", - "wed": "M", - "thu": "D", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "wide": { - "sun": "Sonntag", - "mon": "Montag", - "tue": "Dienstag", - "wed": "Mittwoch", - "thu": "Donnerstag", - "fri": "Freitag", - "sat": "Samstag" + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Dschumada I", + "6": "Dschumada II", + "7": "Radschab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhu l-qaʿda", + "12": "Dhu l-Hiddscha" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Dschumada I", + "6": "Dschumada II", + "7": "Radschab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhu l-qaʿda", + "12": "Dhu l-Hiddscha" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "So", - "mon": "Mo", - "tue": "Di", - "wed": "Mi", - "thu": "Do", - "fri": "Fr", - "sat": "Sa" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "D", - "wed": "M", - "thu": "D", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "So.", - "mon": "Mo.", - "tue": "Di.", - "wed": "Mi.", - "thu": "Do.", - "fri": "Fr.", - "sat": "Sa." - }, - "wide": { - "sun": "Sonntag", - "mon": "Montag", - "tue": "Dienstag", - "wed": "Mittwoch", - "thu": "Donnerstag", - "fri": "Freitag", - "sat": "Samstag" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1. Quartal", - "2": "2. Quartal", - "3": "3. Quartal", - "4": "4. Quartal" + "days": { + "format": { + "abbreviated": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "D", + "wed": "M", + "thu": "D", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "wide": { + "sun": "Sonntag", + "mon": "Montag", + "tue": "Dienstag", + "wed": "Mittwoch", + "thu": "Donnerstag", + "fri": "Freitag", + "sat": "Samstag" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "So", + "mon": "Mo", + "tue": "Di", + "wed": "Mi", + "thu": "Do", + "fri": "Fr", + "sat": "Sa" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "D", + "wed": "M", + "thu": "D", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "So.", + "mon": "Mo.", + "tue": "Di.", + "wed": "Mi.", + "thu": "Do.", + "fri": "Fr.", + "sat": "Sa." + }, + "wide": { + "sun": "Sonntag", + "mon": "Montag", + "tue": "Dienstag", + "wed": "Mittwoch", + "thu": "Donnerstag", + "fri": "Freitag", + "sat": "Samstag" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1. Quartal", - "2": "2. Quartal", - "3": "3. Quartal", - "4": "4. Quartal" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "Mitternacht", - "am": "AM", - "pm": "PM", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" - }, - "narrow": { - "midnight": "Mitternacht", - "am": "a", - "pm": "p", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" - }, - "wide": { - "midnight": "Mitternacht", - "am": "AM", - "pm": "PM", - "morning1": "morgens", - "morning2": "vormittags", - "afternoon1": "mittags", - "afternoon2": "nachmittags", - "evening1": "abends", - "night1": "nachts" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1. Quartal", + "2": "2. Quartal", + "3": "3. Quartal", + "4": "4. Quartal" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1. Quartal", + "2": "2. Quartal", + "3": "3. Quartal", + "4": "4. Quartal" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "Mitternacht", - "am": "AM", - "pm": "PM", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" - }, - "narrow": { - "midnight": "Mitternacht", - "am": "a", - "pm": "p", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" - }, - "wide": { - "midnight": "Mitternacht", - "am": "AM", - "pm": "PM", - "morning1": "Morgen", - "morning2": "Vormittag", - "afternoon1": "Mittag", - "afternoon2": "Nachmittag", - "evening1": "Abend", - "night1": "Nacht" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "Mitternacht", + "am": "AM", + "pm": "PM", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + }, + "narrow": { + "midnight": "Mitternacht", + "am": "a", + "pm": "p", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + }, + "wide": { + "midnight": "Mitternacht", + "am": "AM", + "pm": "PM", + "morning1": "morgens", + "morning2": "vormittags", + "afternoon1": "mittags", + "afternoon2": "nachmittags", + "evening1": "abends", + "night1": "nachts" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "Mitternacht", + "am": "AM", + "pm": "PM", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + }, + "narrow": { + "midnight": "Mitternacht", + "am": "a", + "pm": "p", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + }, + "wide": { + "midnight": "Mitternacht", + "am": "AM", + "pm": "PM", + "morning1": "Morgen", + "morning2": "Vormittag", + "afternoon1": "Mittag", + "afternoon2": "Nachmittag", + "evening1": "Abend", + "night1": "Nacht" + } } - } - }, - "eras": { - "eraNames": { - "0": "AH" - }, - "eraAbbr": { - "0": "AH" }, - "eraNarrow": { - "0": "AH" - } - }, - "dateFormats": { - "full": "EEEE, d. MMMM y G", - "long": "d. MMMM y G", - "medium": "dd.MM.y G", - "short": "dd.MM.yy GGGGG" - }, - "timeFormats": { - "full": "HH:mm:ss zzzz", - "long": "HH:mm:ss z", - "medium": "HH:mm:ss", - "short": "HH:mm" - }, - "dateTimeFormats": { - "full": "{1} 'um' {0}", - "long": "{1} 'um' {0}", - "medium": "{1}, {0}", - "short": "{1}, {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "E, d.", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d. MMM y G", - "GyMMMEd": "E, d. MMM y G", - "h": "h a", - "H": "HH 'Uhr'", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "d.M.", - "MEd": "E, d.M.", - "MMM": "LLL", - "MMMd": "d. MMM", - "MMMEd": "E, d. MMM", - "MMMMd": "d. MMMM", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M.y GGGGG", - "yyyyMd": "d.M.y GGGGG", - "yyyyMEd": "E, d.M.y GGGGG", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "d. MMM y G", - "yyyyMMMEd": "E, d. MMM y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d.–d." - }, - "Gy": { - "G": "G y – G y", - "y": "G y–y" - }, - "GyM": { - "G": "GGGGG y-MM – GGGGG y-MM", - "M": "GGGGG y-MM – y-MM", - "y": "GGGGG y-MM – y-MM" - }, - "GyMd": { - "d": "GGGGG y-MM-dd – y-MM-dd", - "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", - "M": "GGGGG y-MM-dd – y-MM-dd", - "y": "GGGGG y-MM-dd – y-MM-dd" - }, - "GyMEd": { - "d": "GGGGG y-MM-dd, E – y-MM-dd, E", - "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", - "M": "GGGGG y-MM-dd, E – y-MM-dd, E", - "y": "GGGGG y-MM-dd, E – y-MM-dd, E" - }, - "GyMMM": { - "G": "G y MMM – G y MMM", - "M": "G y MMM–MMM", - "y": "G y MMM – y MMM" - }, - "GyMMMd": { - "d": "G y MMM d–d", - "G": "G y MMM d – G y MMM d", - "M": "G y MMM d – MMM d", - "y": "G y MMM d – y MMM d" - }, - "GyMMMEd": { - "d": "G y MMM d, E – MMM d, E", - "G": "G y MMM d, E – G y MMM d, E", - "M": "G y MMM d, E – MMM d, E", - "y": "G y MMM d, E – y MMM d, E" - }, - "h": { - "a": "h a – h a", - "h": "h–h a" - }, - "H": { - "H": "HH–HH 'Uhr'" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm–h:mm a", - "m": "h:mm–h:mm a" - }, - "Hm": { - "H": "HH:mm–HH:mm", - "m": "HH:mm–HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm–h:mm a v", - "m": "h:mm–h:mm a v" - }, - "Hmv": { - "H": "HH:mm–HH:mm v", - "m": "HH:mm–HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h–h a v" - }, - "Hv": { - "H": "HH–HH 'Uhr' v" - }, - "M": { - "M": "M.–M." - }, - "Md": { - "d": "dd.MM. – dd.MM.", - "M": "dd.MM. – dd.MM." - }, - "MEd": { - "d": "E, dd.MM. – E, dd.MM.", - "M": "E, dd.MM. – E, dd.MM." - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "d.–d. MMM", - "M": "d. MMM – d. MMM" - }, - "MMMEd": { - "d": "E, d. – E, d. MMM", - "M": "E, d. MMM – E, d. MMM" - }, - "MMMM": { - "M": "LLLL–LLLL" - }, - "y": { - "y": "y–y G" - }, - "yM": { - "M": "MM.y – MM.y G", - "y": "MM.y – MM.y G" - }, - "yMd": { - "d": "dd.MM.y – dd.MM.y G", - "M": "dd.MM.y – dd.MM.y G", - "y": "dd.MM.y – dd.MM.y G" - }, - "yMEd": { - "d": "E, dd.MM.y – E, dd.MM.y G", - "M": "E, dd.MM.y – E, dd.MM.y G", - "y": "E, dd.MM.y – E, dd.MM.y G" - }, - "yMMM": { - "M": "MMM–MMM y G", - "y": "MMM y – MMM y G" - }, - "yMMMd": { - "d": "d.–d. MMM y G", - "M": "d. MMM – d. MMM y G", - "y": "d. MMM y – d. MMM y G" - }, - "yMMMEd": { - "d": "E, d. – E, d. MMM y G", - "M": "E, d. MMM – E, d. MMM y G", - "y": "E, d. MMM y – E, d. MMM y G" - }, - "yMMMM": { - "M": "MMMM–MMMM y G", - "y": "MMMM y – MMMM y G" + "eras": { + "eraNames": { + "0": "AH" + }, + "eraAbbr": { + "0": "AH" + }, + "eraNarrow": { + "0": "AH" + } + }, + "dateFormats": { + "full": "EEEE, d. MMMM y G", + "long": "d. MMMM y G", + "medium": "dd.MM.y G", + "short": "dd.MM.yy GGGGG" + }, + "timeFormats": { + "full": "HH:mm:ss zzzz", + "long": "HH:mm:ss z", + "medium": "HH:mm:ss", + "short": "HH:mm" + }, + "dateTimeFormats": { + "full": "{1} 'um' {0}", + "long": "{1} 'um' {0}", + "medium": "{1}, {0}", + "short": "{1}, {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "E, d.", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d. MMM y G", + "GyMMMEd": "E, d. MMM y G", + "h": "h a", + "H": "HH 'Uhr'", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "d.M.", + "MEd": "E, d.M.", + "MMM": "LLL", + "MMMd": "d. MMM", + "MMMEd": "E, d. MMM", + "MMMMd": "d. MMMM", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M.y GGGGG", + "yyyyMd": "d.M.y GGGGG", + "yyyyMEd": "E, d.M.y GGGGG", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "d. MMM y G", + "yyyyMMMEd": "E, d. MMM y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d.–d." + }, + "Gy": { + "G": "G y – G y", + "y": "G y–y" + }, + "GyM": { + "G": "GGGGG y-MM – GGGGG y-MM", + "M": "GGGGG y-MM – y-MM", + "y": "GGGGG y-MM – y-MM" + }, + "GyMd": { + "d": "GGGGG y-MM-dd – y-MM-dd", + "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", + "M": "GGGGG y-MM-dd – y-MM-dd", + "y": "GGGGG y-MM-dd – y-MM-dd" + }, + "GyMEd": { + "d": "GGGGG y-MM-dd, E – y-MM-dd, E", + "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", + "M": "GGGGG y-MM-dd, E – y-MM-dd, E", + "y": "GGGGG y-MM-dd, E – y-MM-dd, E" + }, + "GyMMM": { + "G": "G y MMM – G y MMM", + "M": "G y MMM–MMM", + "y": "G y MMM – y MMM" + }, + "GyMMMd": { + "d": "G y MMM d–d", + "G": "G y MMM d – G y MMM d", + "M": "G y MMM d – MMM d", + "y": "G y MMM d – y MMM d" + }, + "GyMMMEd": { + "d": "G y MMM d, E – MMM d, E", + "G": "G y MMM d, E – G y MMM d, E", + "M": "G y MMM d, E – MMM d, E", + "y": "G y MMM d, E – y MMM d, E" + }, + "h": { + "a": "h a – h a", + "h": "h–h a" + }, + "H": { + "H": "HH–HH 'Uhr'" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm–h:mm a", + "m": "h:mm–h:mm a" + }, + "Hm": { + "H": "HH:mm–HH:mm", + "m": "HH:mm–HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm–h:mm a v", + "m": "h:mm–h:mm a v" + }, + "Hmv": { + "H": "HH:mm–HH:mm v", + "m": "HH:mm–HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h–h a v" + }, + "Hv": { + "H": "HH–HH 'Uhr' v" + }, + "M": { + "M": "M.–M." + }, + "Md": { + "d": "dd.MM. – dd.MM.", + "M": "dd.MM. – dd.MM." + }, + "MEd": { + "d": "E, dd.MM. – E, dd.MM.", + "M": "E, dd.MM. – E, dd.MM." + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "d.–d. MMM", + "M": "d. MMM – d. MMM" + }, + "MMMEd": { + "d": "E, d. – E, d. MMM", + "M": "E, d. MMM – E, d. MMM" + }, + "MMMM": { + "M": "LLLL–LLLL" + }, + "y": { + "y": "y–y G" + }, + "yM": { + "M": "MM.y – MM.y G", + "y": "MM.y – MM.y G" + }, + "yMd": { + "d": "dd.MM.y – dd.MM.y G", + "M": "dd.MM.y – dd.MM.y G", + "y": "dd.MM.y – dd.MM.y G" + }, + "yMEd": { + "d": "E, dd.MM.y – E, dd.MM.y G", + "M": "E, dd.MM.y – E, dd.MM.y G", + "y": "E, dd.MM.y – E, dd.MM.y G" + }, + "yMMM": { + "M": "MMM–MMM y G", + "y": "MMM y – MMM y G" + }, + "yMMMd": { + "d": "d.–d. MMM y G", + "M": "d. MMM – d. MMM y G", + "y": "d. MMM y – d. MMM y G" + }, + "yMMMEd": { + "d": "E, d. – E, d. MMM y G", + "M": "E, d. MMM – E, d. MMM y G", + "y": "E, d. MMM y – E, d. MMM y G" + }, + "yMMMM": { + "M": "MMMM–MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } - } - }, - "timeZoneNames": { - "hourFormat": "+HH:mm;-HH:mm", - "gmtFormat": "GMT{0}", - "gmtZeroFormat": "GMT", - "regionFormat": "{0} Zeit", - "regionFormat-type-daylight": "{0} Sommerzeit", - "regionFormat-type-standard": "{0} Normalzeit", - "fallbackFormat": "{1} ({0})", - "zone": { - "America": { - "Adak": { - "exemplarCity": "Adak" - }, - "Anchorage": { - "exemplarCity": "Anchorage" - }, - "Anguilla": { - "exemplarCity": "Anguilla" - }, - "Antigua": { - "exemplarCity": "Antigua" - }, - "Araguaina": { - "exemplarCity": "Araguaina" - }, - "Argentina": { - "Rio_Gallegos": { - "exemplarCity": "Rio Gallegos" + }, + "timeZoneNames": { + "hourFormat": "+HH:mm;-HH:mm", + "gmtFormat": "GMT{0}", + "gmtZeroFormat": "GMT", + "regionFormat": "{0} Zeit", + "regionFormat-type-daylight": "{0} Sommerzeit", + "regionFormat-type-standard": "{0} Normalzeit", + "fallbackFormat": "{1} ({0})", + "zone": { + "America": { + "Adak": { + "exemplarCity": "Adak" }, - "San_Juan": { - "exemplarCity": "San Juan" + "Anchorage": { + "exemplarCity": "Anchorage" }, - "Ushuaia": { - "exemplarCity": "Ushuaia" + "Anguilla": { + "exemplarCity": "Anguilla" }, - "La_Rioja": { - "exemplarCity": "La Rioja" + "Antigua": { + "exemplarCity": "Antigua" }, - "San_Luis": { - "exemplarCity": "San Luis" + "Araguaina": { + "exemplarCity": "Araguaina" }, - "Salta": { - "exemplarCity": "Salta" + "Argentina": { + "Rio_Gallegos": { + "exemplarCity": "Rio Gallegos" + }, + "San_Juan": { + "exemplarCity": "San Juan" + }, + "Ushuaia": { + "exemplarCity": "Ushuaia" + }, + "La_Rioja": { + "exemplarCity": "La Rioja" + }, + "San_Luis": { + "exemplarCity": "San Luis" + }, + "Salta": { + "exemplarCity": "Salta" + }, + "Tucuman": { + "exemplarCity": "Tucuman" + } }, - "Tucuman": { - "exemplarCity": "Tucuman" - } - }, - "Aruba": { - "exemplarCity": "Aruba" - }, - "Asuncion": { - "exemplarCity": "Asunción" - }, - "Bahia": { - "exemplarCity": "Bahia" - }, - "Bahia_Banderas": { - "exemplarCity": "Bahia Banderas" - }, - "Barbados": { - "exemplarCity": "Barbados" - }, - "Belem": { - "exemplarCity": "Belem" - }, - "Belize": { - "exemplarCity": "Belize" - }, - "Blanc-Sablon": { - "exemplarCity": "Blanc-Sablon" - }, - "Boa_Vista": { - "exemplarCity": "Boa Vista" - }, - "Bogota": { - "exemplarCity": "Bogotá" - }, - "Boise": { - "exemplarCity": "Boise" - }, - "Buenos_Aires": { - "exemplarCity": "Buenos Aires" - }, - "Cambridge_Bay": { - "exemplarCity": "Cambridge Bay" - }, - "Campo_Grande": { - "exemplarCity": "Campo Grande" - }, - "Cancun": { - "exemplarCity": "Cancún" - }, - "Caracas": { - "exemplarCity": "Caracas" - }, - "Catamarca": { - "exemplarCity": "Catamarca" - }, - "Cayenne": { - "exemplarCity": "Cayenne" - }, - "Cayman": { - "exemplarCity": "Kaimaninseln" - }, - "Chicago": { - "exemplarCity": "Chicago" - }, - "Chihuahua": { - "exemplarCity": "Chihuahua" - }, - "Coral_Harbour": { - "exemplarCity": "Atikokan" - }, - "Cordoba": { - "exemplarCity": "Córdoba" - }, - "Costa_Rica": { - "exemplarCity": "Costa Rica" - }, - "Creston": { - "exemplarCity": "Creston" - }, - "Cuiaba": { - "exemplarCity": "Cuiaba" - }, - "Curacao": { - "exemplarCity": "Curaçao" - }, - "Danmarkshavn": { - "exemplarCity": "Danmarkshavn" - }, - "Dawson": { - "exemplarCity": "Dawson" - }, - "Dawson_Creek": { - "exemplarCity": "Dawson Creek" - }, - "Denver": { - "exemplarCity": "Denver" - }, - "Detroit": { - "exemplarCity": "Detroit" - }, - "Dominica": { - "exemplarCity": "Dominica" - }, - "Edmonton": { - "exemplarCity": "Edmonton" - }, - "Eirunepe": { - "exemplarCity": "Eirunepe" - }, - "El_Salvador": { - "exemplarCity": "El Salvador" - }, - "Fort_Nelson": { - "exemplarCity": "Fort Nelson" - }, - "Fortaleza": { - "exemplarCity": "Fortaleza" - }, - "Glace_Bay": { - "exemplarCity": "Glace Bay" - }, - "Godthab": { - "exemplarCity": "Nuuk" - }, - "Goose_Bay": { - "exemplarCity": "Goose Bay" - }, - "Grand_Turk": { - "exemplarCity": "Grand Turk" - }, - "Grenada": { - "exemplarCity": "Grenada" - }, - "Guadeloupe": { - "exemplarCity": "Guadeloupe" - }, - "Guatemala": { - "exemplarCity": "Guatemala" - }, - "Guayaquil": { - "exemplarCity": "Guayaquil" - }, - "Guyana": { - "exemplarCity": "Guyana" - }, - "Halifax": { - "exemplarCity": "Halifax" - }, - "Havana": { - "exemplarCity": "Havanna" - }, - "Hermosillo": { - "exemplarCity": "Hermosillo" - }, - "Indiana": { - "Vincennes": { - "exemplarCity": "Vincennes, Indiana" + "Aruba": { + "exemplarCity": "Aruba" }, - "Petersburg": { - "exemplarCity": "Petersburg, Indiana" + "Asuncion": { + "exemplarCity": "Asunción" }, - "Tell_City": { - "exemplarCity": "Tell City, Indiana" + "Bahia": { + "exemplarCity": "Bahia" }, - "Knox": { - "exemplarCity": "Knox, Indiana" + "Bahia_Banderas": { + "exemplarCity": "Bahia Banderas" }, - "Winamac": { - "exemplarCity": "Winamac, Indiana" + "Barbados": { + "exemplarCity": "Barbados" }, - "Marengo": { - "exemplarCity": "Marengo, Indiana" + "Belem": { + "exemplarCity": "Belem" }, - "Vevay": { - "exemplarCity": "Vevay, Indiana" - } - }, - "Indianapolis": { - "exemplarCity": "Indianapolis" - }, - "Inuvik": { - "exemplarCity": "Inuvik" - }, - "Iqaluit": { - "exemplarCity": "Iqaluit" - }, - "Jamaica": { - "exemplarCity": "Jamaika" - }, - "Jujuy": { - "exemplarCity": "Jujuy" - }, - "Juneau": { - "exemplarCity": "Juneau" - }, - "Kentucky": { - "Monticello": { - "exemplarCity": "Monticello, Kentucky" - } - }, - "Kralendijk": { - "exemplarCity": "Kralendijk" - }, - "La_Paz": { - "exemplarCity": "La Paz" - }, - "Lima": { - "exemplarCity": "Lima" - }, - "Los_Angeles": { - "exemplarCity": "Los Angeles" - }, - "Louisville": { - "exemplarCity": "Louisville" - }, - "Lower_Princes": { - "exemplarCity": "Lower Prince’s Quarter" - }, - "Maceio": { - "exemplarCity": "Maceio" - }, - "Managua": { - "exemplarCity": "Managua" - }, - "Manaus": { - "exemplarCity": "Manaus" - }, - "Marigot": { - "exemplarCity": "Marigot" - }, - "Martinique": { - "exemplarCity": "Martinique" - }, - "Matamoros": { - "exemplarCity": "Matamoros" - }, - "Mazatlan": { - "exemplarCity": "Mazatlan" - }, - "Mendoza": { - "exemplarCity": "Mendoza" - }, - "Menominee": { - "exemplarCity": "Menominee" - }, - "Merida": { - "exemplarCity": "Merida" - }, - "Metlakatla": { - "exemplarCity": "Metlakatla" - }, - "Mexico_City": { - "exemplarCity": "Mexiko-Stadt" - }, - "Miquelon": { - "exemplarCity": "Miquelon" - }, - "Moncton": { - "exemplarCity": "Moncton" - }, - "Monterrey": { - "exemplarCity": "Monterrey" - }, - "Montevideo": { - "exemplarCity": "Montevideo" - }, - "Montserrat": { - "exemplarCity": "Montserrat" - }, - "Nassau": { - "exemplarCity": "Nassau" - }, - "New_York": { - "exemplarCity": "New York" - }, - "Nipigon": { - "exemplarCity": "Nipigon" - }, - "Nome": { - "exemplarCity": "Nome" - }, - "Noronha": { - "exemplarCity": "Noronha" - }, - "North_Dakota": { - "Beulah": { - "exemplarCity": "Beulah, North Dakota" + "Belize": { + "exemplarCity": "Belize" }, - "New_Salem": { - "exemplarCity": "New Salem, North Dakota" + "Blanc-Sablon": { + "exemplarCity": "Blanc-Sablon" }, - "Center": { - "exemplarCity": "Center, North Dakota" - } - }, - "Ojinaga": { - "exemplarCity": "Ojinaga" - }, - "Panama": { - "exemplarCity": "Panama" - }, - "Pangnirtung": { - "exemplarCity": "Pangnirtung" - }, - "Paramaribo": { - "exemplarCity": "Paramaribo" - }, - "Phoenix": { - "exemplarCity": "Phoenix" - }, - "Port-au-Prince": { - "exemplarCity": "Port-au-Prince" - }, - "Port_of_Spain": { - "exemplarCity": "Port of Spain" - }, - "Porto_Velho": { - "exemplarCity": "Porto Velho" - }, - "Puerto_Rico": { - "exemplarCity": "Puerto Rico" - }, - "Rainy_River": { - "exemplarCity": "Rainy River" - }, - "Rankin_Inlet": { - "exemplarCity": "Rankin Inlet" - }, - "Recife": { - "exemplarCity": "Recife" - }, - "Regina": { - "exemplarCity": "Regina" - }, - "Resolute": { - "exemplarCity": "Resolute" - }, - "Rio_Branco": { - "exemplarCity": "Rio Branco" - }, - "Santa_Isabel": { - "exemplarCity": "Santa Isabel" - }, - "Santarem": { - "exemplarCity": "Santarem" - }, - "Santiago": { - "exemplarCity": "Santiago" - }, - "Santo_Domingo": { - "exemplarCity": "Santo Domingo" - }, - "Sao_Paulo": { - "exemplarCity": "São Paulo" - }, - "Scoresbysund": { - "exemplarCity": "Ittoqqortoormiit" - }, - "Sitka": { - "exemplarCity": "Sitka" - }, - "St_Barthelemy": { - "exemplarCity": "Saint-Barthélemy" - }, - "St_Johns": { - "exemplarCity": "St. John’s" - }, - "St_Kitts": { - "exemplarCity": "St. Kitts" - }, - "St_Lucia": { - "exemplarCity": "St. Lucia" - }, - "St_Thomas": { - "exemplarCity": "St. Thomas" - }, - "St_Vincent": { - "exemplarCity": "St. Vincent" - }, - "Swift_Current": { - "exemplarCity": "Swift Current" - }, - "Tegucigalpa": { - "exemplarCity": "Tegucigalpa" - }, - "Thule": { - "exemplarCity": "Thule" - }, - "Thunder_Bay": { - "exemplarCity": "Thunder Bay" - }, - "Tijuana": { - "exemplarCity": "Tijuana" - }, - "Toronto": { - "exemplarCity": "Toronto" - }, - "Tortola": { - "exemplarCity": "Tortola" - }, - "Vancouver": { - "exemplarCity": "Vancouver" - }, - "Whitehorse": { - "exemplarCity": "Whitehorse" - }, - "Winnipeg": { - "exemplarCity": "Winnipeg" - }, - "Yakutat": { - "exemplarCity": "Yakutat" - }, - "Yellowknife": { - "exemplarCity": "Yellowknife" - } - }, - "Atlantic": { - "Azores": { - "exemplarCity": "Azoren" - }, - "Bermuda": { - "exemplarCity": "Bermudas" - }, - "Canary": { - "exemplarCity": "Kanaren" - }, - "Cape_Verde": { - "exemplarCity": "Cabo Verde" - }, - "Faeroe": { - "exemplarCity": "Färöer" - }, - "Madeira": { - "exemplarCity": "Madeira" - }, - "Reykjavik": { - "exemplarCity": "Reyk­ja­vík" - }, - "South_Georgia": { - "exemplarCity": "Südgeorgien" - }, - "St_Helena": { - "exemplarCity": "St. Helena" - }, - "Stanley": { - "exemplarCity": "Stanley" - } - }, - "Europe": { - "Amsterdam": { - "exemplarCity": "Amsterdam" - }, - "Andorra": { - "exemplarCity": "Andorra" - }, - "Astrakhan": { - "exemplarCity": "Astrachan" - }, - "Athens": { - "exemplarCity": "Athen" - }, - "Belgrade": { - "exemplarCity": "Belgrad" - }, - "Berlin": { - "exemplarCity": "Berlin" - }, - "Bratislava": { - "exemplarCity": "Bratislava" - }, - "Brussels": { - "exemplarCity": "Brüssel" - }, - "Bucharest": { - "exemplarCity": "Bukarest" - }, - "Budapest": { - "exemplarCity": "Budapest" - }, - "Busingen": { - "exemplarCity": "Büsingen" - }, - "Chisinau": { - "exemplarCity": "Kischinau" - }, - "Copenhagen": { - "exemplarCity": "Kopenhagen" - }, - "Dublin": { - "long": { - "daylight": "Irische Sommerzeit" + "Boa_Vista": { + "exemplarCity": "Boa Vista" }, - "exemplarCity": "Dublin" - }, - "Gibraltar": { - "exemplarCity": "Gibraltar" - }, - "Guernsey": { - "exemplarCity": "Guernsey" - }, - "Helsinki": { - "exemplarCity": "Helsinki" - }, - "Isle_of_Man": { - "exemplarCity": "Isle of Man" - }, - "Istanbul": { - "exemplarCity": "Istanbul" - }, - "Jersey": { - "exemplarCity": "Jersey" - }, - "Kaliningrad": { - "exemplarCity": "Kaliningrad" - }, - "Kiev": { - "exemplarCity": "Kiew" - }, - "Kirov": { - "exemplarCity": "Kirow" - }, - "Lisbon": { - "exemplarCity": "Lissabon" - }, - "Ljubljana": { - "exemplarCity": "Ljubljana" - }, - "London": { - "long": { - "daylight": "Britische Sommerzeit" + "Bogota": { + "exemplarCity": "Bogotá" }, - "exemplarCity": "London" - }, - "Luxembourg": { - "exemplarCity": "Luxemburg" - }, - "Madrid": { - "exemplarCity": "Madrid" - }, - "Malta": { - "exemplarCity": "Malta" - }, - "Mariehamn": { - "exemplarCity": "Mariehamn" - }, - "Minsk": { - "exemplarCity": "Minsk" - }, - "Monaco": { - "exemplarCity": "Monaco" - }, - "Moscow": { - "exemplarCity": "Moskau" - }, - "Oslo": { - "exemplarCity": "Oslo" - }, - "Paris": { - "exemplarCity": "Paris" - }, - "Podgorica": { - "exemplarCity": "Podgorica" - }, - "Prague": { - "exemplarCity": "Prag" - }, - "Riga": { - "exemplarCity": "Riga" - }, - "Rome": { - "exemplarCity": "Rom" - }, - "Samara": { - "exemplarCity": "Samara" - }, - "San_Marino": { - "exemplarCity": "San Marino" - }, - "Sarajevo": { - "exemplarCity": "Sarajevo" - }, - "Simferopol": { - "exemplarCity": "Simferopol" - }, - "Skopje": { - "exemplarCity": "Skopje" - }, - "Sofia": { - "exemplarCity": "Sofia" - }, - "Stockholm": { - "exemplarCity": "Stockholm" - }, - "Tallinn": { - "exemplarCity": "Tallinn" - }, - "Tirane": { - "exemplarCity": "Tirana" - }, - "Ulyanovsk": { - "exemplarCity": "Uljanowsk" - }, - "Uzhgorod": { - "exemplarCity": "Uschgorod" - }, - "Vaduz": { - "exemplarCity": "Vaduz" - }, - "Vatican": { - "exemplarCity": "Vatikan" - }, - "Vienna": { - "exemplarCity": "Wien" - }, - "Vilnius": { - "exemplarCity": "Vilnius" - }, - "Volgograd": { - "exemplarCity": "Wolgograd" - }, - "Warsaw": { - "exemplarCity": "Warschau" - }, - "Zagreb": { - "exemplarCity": "Zagreb" - }, - "Zaporozhye": { - "exemplarCity": "Saporischja" - }, - "Zurich": { - "exemplarCity": "Zürich" - } - }, - "Africa": { - "Abidjan": { - "exemplarCity": "Abidjan" - }, - "Accra": { - "exemplarCity": "Accra" - }, - "Addis_Ababa": { - "exemplarCity": "Addis Abeba" - }, - "Algiers": { - "exemplarCity": "Algier" - }, - "Asmera": { - "exemplarCity": "Asmara" - }, - "Bamako": { - "exemplarCity": "Bamako" - }, - "Bangui": { - "exemplarCity": "Bangui" - }, - "Banjul": { - "exemplarCity": "Banjul" - }, - "Bissau": { - "exemplarCity": "Bissau" - }, - "Blantyre": { - "exemplarCity": "Blantyre" - }, - "Brazzaville": { - "exemplarCity": "Brazzaville" - }, - "Bujumbura": { - "exemplarCity": "Bujumbura" - }, - "Cairo": { - "exemplarCity": "Kairo" - }, - "Casablanca": { - "exemplarCity": "Casablanca" - }, - "Ceuta": { - "exemplarCity": "Ceuta" - }, - "Conakry": { - "exemplarCity": "Conakry" - }, - "Dakar": { - "exemplarCity": "Dakar" + "Boise": { + "exemplarCity": "Boise" + }, + "Buenos_Aires": { + "exemplarCity": "Buenos Aires" + }, + "Cambridge_Bay": { + "exemplarCity": "Cambridge Bay" + }, + "Campo_Grande": { + "exemplarCity": "Campo Grande" + }, + "Cancun": { + "exemplarCity": "Cancún" + }, + "Caracas": { + "exemplarCity": "Caracas" + }, + "Catamarca": { + "exemplarCity": "Catamarca" + }, + "Cayenne": { + "exemplarCity": "Cayenne" + }, + "Cayman": { + "exemplarCity": "Kaimaninseln" + }, + "Chicago": { + "exemplarCity": "Chicago" + }, + "Chihuahua": { + "exemplarCity": "Chihuahua" + }, + "Coral_Harbour": { + "exemplarCity": "Atikokan" + }, + "Cordoba": { + "exemplarCity": "Córdoba" + }, + "Costa_Rica": { + "exemplarCity": "Costa Rica" + }, + "Creston": { + "exemplarCity": "Creston" + }, + "Cuiaba": { + "exemplarCity": "Cuiaba" + }, + "Curacao": { + "exemplarCity": "Curaçao" + }, + "Danmarkshavn": { + "exemplarCity": "Danmarkshavn" + }, + "Dawson": { + "exemplarCity": "Dawson" + }, + "Dawson_Creek": { + "exemplarCity": "Dawson Creek" + }, + "Denver": { + "exemplarCity": "Denver" + }, + "Detroit": { + "exemplarCity": "Detroit" + }, + "Dominica": { + "exemplarCity": "Dominica" + }, + "Edmonton": { + "exemplarCity": "Edmonton" + }, + "Eirunepe": { + "exemplarCity": "Eirunepe" + }, + "El_Salvador": { + "exemplarCity": "El Salvador" + }, + "Fort_Nelson": { + "exemplarCity": "Fort Nelson" + }, + "Fortaleza": { + "exemplarCity": "Fortaleza" + }, + "Glace_Bay": { + "exemplarCity": "Glace Bay" + }, + "Godthab": { + "exemplarCity": "Nuuk" + }, + "Goose_Bay": { + "exemplarCity": "Goose Bay" + }, + "Grand_Turk": { + "exemplarCity": "Grand Turk" + }, + "Grenada": { + "exemplarCity": "Grenada" + }, + "Guadeloupe": { + "exemplarCity": "Guadeloupe" + }, + "Guatemala": { + "exemplarCity": "Guatemala" + }, + "Guayaquil": { + "exemplarCity": "Guayaquil" + }, + "Guyana": { + "exemplarCity": "Guyana" + }, + "Halifax": { + "exemplarCity": "Halifax" + }, + "Havana": { + "exemplarCity": "Havanna" + }, + "Hermosillo": { + "exemplarCity": "Hermosillo" + }, + "Indiana": { + "Vincennes": { + "exemplarCity": "Vincennes, Indiana" + }, + "Petersburg": { + "exemplarCity": "Petersburg, Indiana" + }, + "Tell_City": { + "exemplarCity": "Tell City, Indiana" + }, + "Knox": { + "exemplarCity": "Knox, Indiana" + }, + "Winamac": { + "exemplarCity": "Winamac, Indiana" + }, + "Marengo": { + "exemplarCity": "Marengo, Indiana" + }, + "Vevay": { + "exemplarCity": "Vevay, Indiana" + } + }, + "Indianapolis": { + "exemplarCity": "Indianapolis" + }, + "Inuvik": { + "exemplarCity": "Inuvik" + }, + "Iqaluit": { + "exemplarCity": "Iqaluit" + }, + "Jamaica": { + "exemplarCity": "Jamaika" + }, + "Jujuy": { + "exemplarCity": "Jujuy" + }, + "Juneau": { + "exemplarCity": "Juneau" + }, + "Kentucky": { + "Monticello": { + "exemplarCity": "Monticello, Kentucky" + } + }, + "Kralendijk": { + "exemplarCity": "Kralendijk" + }, + "La_Paz": { + "exemplarCity": "La Paz" + }, + "Lima": { + "exemplarCity": "Lima" + }, + "Los_Angeles": { + "exemplarCity": "Los Angeles" + }, + "Louisville": { + "exemplarCity": "Louisville" + }, + "Lower_Princes": { + "exemplarCity": "Lower Prince’s Quarter" + }, + "Maceio": { + "exemplarCity": "Maceio" + }, + "Managua": { + "exemplarCity": "Managua" + }, + "Manaus": { + "exemplarCity": "Manaus" + }, + "Marigot": { + "exemplarCity": "Marigot" + }, + "Martinique": { + "exemplarCity": "Martinique" + }, + "Matamoros": { + "exemplarCity": "Matamoros" + }, + "Mazatlan": { + "exemplarCity": "Mazatlan" + }, + "Mendoza": { + "exemplarCity": "Mendoza" + }, + "Menominee": { + "exemplarCity": "Menominee" + }, + "Merida": { + "exemplarCity": "Merida" + }, + "Metlakatla": { + "exemplarCity": "Metlakatla" + }, + "Mexico_City": { + "exemplarCity": "Mexiko-Stadt" + }, + "Miquelon": { + "exemplarCity": "Miquelon" + }, + "Moncton": { + "exemplarCity": "Moncton" + }, + "Monterrey": { + "exemplarCity": "Monterrey" + }, + "Montevideo": { + "exemplarCity": "Montevideo" + }, + "Montserrat": { + "exemplarCity": "Montserrat" + }, + "Nassau": { + "exemplarCity": "Nassau" + }, + "New_York": { + "exemplarCity": "New York" + }, + "Nipigon": { + "exemplarCity": "Nipigon" + }, + "Nome": { + "exemplarCity": "Nome" + }, + "Noronha": { + "exemplarCity": "Noronha" + }, + "North_Dakota": { + "Beulah": { + "exemplarCity": "Beulah, North Dakota" + }, + "New_Salem": { + "exemplarCity": "New Salem, North Dakota" + }, + "Center": { + "exemplarCity": "Center, North Dakota" + } + }, + "Ojinaga": { + "exemplarCity": "Ojinaga" + }, + "Panama": { + "exemplarCity": "Panama" + }, + "Pangnirtung": { + "exemplarCity": "Pangnirtung" + }, + "Paramaribo": { + "exemplarCity": "Paramaribo" + }, + "Phoenix": { + "exemplarCity": "Phoenix" + }, + "Port-au-Prince": { + "exemplarCity": "Port-au-Prince" + }, + "Port_of_Spain": { + "exemplarCity": "Port of Spain" + }, + "Porto_Velho": { + "exemplarCity": "Porto Velho" + }, + "Puerto_Rico": { + "exemplarCity": "Puerto Rico" + }, + "Rainy_River": { + "exemplarCity": "Rainy River" + }, + "Rankin_Inlet": { + "exemplarCity": "Rankin Inlet" + }, + "Recife": { + "exemplarCity": "Recife" + }, + "Regina": { + "exemplarCity": "Regina" + }, + "Resolute": { + "exemplarCity": "Resolute" + }, + "Rio_Branco": { + "exemplarCity": "Rio Branco" + }, + "Santa_Isabel": { + "exemplarCity": "Santa Isabel" + }, + "Santarem": { + "exemplarCity": "Santarem" + }, + "Santiago": { + "exemplarCity": "Santiago" + }, + "Santo_Domingo": { + "exemplarCity": "Santo Domingo" + }, + "Sao_Paulo": { + "exemplarCity": "São Paulo" + }, + "Scoresbysund": { + "exemplarCity": "Ittoqqortoormiit" + }, + "Sitka": { + "exemplarCity": "Sitka" + }, + "St_Barthelemy": { + "exemplarCity": "Saint-Barthélemy" + }, + "St_Johns": { + "exemplarCity": "St. John’s" + }, + "St_Kitts": { + "exemplarCity": "St. Kitts" + }, + "St_Lucia": { + "exemplarCity": "St. Lucia" + }, + "St_Thomas": { + "exemplarCity": "St. Thomas" + }, + "St_Vincent": { + "exemplarCity": "St. Vincent" + }, + "Swift_Current": { + "exemplarCity": "Swift Current" + }, + "Tegucigalpa": { + "exemplarCity": "Tegucigalpa" + }, + "Thule": { + "exemplarCity": "Thule" + }, + "Thunder_Bay": { + "exemplarCity": "Thunder Bay" + }, + "Tijuana": { + "exemplarCity": "Tijuana" + }, + "Toronto": { + "exemplarCity": "Toronto" + }, + "Tortola": { + "exemplarCity": "Tortola" + }, + "Vancouver": { + "exemplarCity": "Vancouver" + }, + "Whitehorse": { + "exemplarCity": "Whitehorse" + }, + "Winnipeg": { + "exemplarCity": "Winnipeg" + }, + "Yakutat": { + "exemplarCity": "Yakutat" + }, + "Yellowknife": { + "exemplarCity": "Yellowknife" + } }, - "Dar_es_Salaam": { - "exemplarCity": "Daressalam" + "Atlantic": { + "Azores": { + "exemplarCity": "Azoren" + }, + "Bermuda": { + "exemplarCity": "Bermudas" + }, + "Canary": { + "exemplarCity": "Kanaren" + }, + "Cape_Verde": { + "exemplarCity": "Cabo Verde" + }, + "Faeroe": { + "exemplarCity": "Färöer" + }, + "Madeira": { + "exemplarCity": "Madeira" + }, + "Reykjavik": { + "exemplarCity": "Reyk­ja­vík" + }, + "South_Georgia": { + "exemplarCity": "Südgeorgien" + }, + "St_Helena": { + "exemplarCity": "St. Helena" + }, + "Stanley": { + "exemplarCity": "Stanley" + } }, - "Djibouti": { - "exemplarCity": "Dschibuti" - }, - "Douala": { - "exemplarCity": "Douala" - }, - "El_Aaiun": { - "exemplarCity": "El Aaiún" + "Europe": { + "Amsterdam": { + "exemplarCity": "Amsterdam" + }, + "Andorra": { + "exemplarCity": "Andorra" + }, + "Astrakhan": { + "exemplarCity": "Astrachan" + }, + "Athens": { + "exemplarCity": "Athen" + }, + "Belgrade": { + "exemplarCity": "Belgrad" + }, + "Berlin": { + "exemplarCity": "Berlin" + }, + "Bratislava": { + "exemplarCity": "Bratislava" + }, + "Brussels": { + "exemplarCity": "Brüssel" + }, + "Bucharest": { + "exemplarCity": "Bukarest" + }, + "Budapest": { + "exemplarCity": "Budapest" + }, + "Busingen": { + "exemplarCity": "Büsingen" + }, + "Chisinau": { + "exemplarCity": "Kischinau" + }, + "Copenhagen": { + "exemplarCity": "Kopenhagen" + }, + "Dublin": { + "long": { + "daylight": "Irische Sommerzeit" + }, + "exemplarCity": "Dublin" + }, + "Gibraltar": { + "exemplarCity": "Gibraltar" + }, + "Guernsey": { + "exemplarCity": "Guernsey" + }, + "Helsinki": { + "exemplarCity": "Helsinki" + }, + "Isle_of_Man": { + "exemplarCity": "Isle of Man" + }, + "Istanbul": { + "exemplarCity": "Istanbul" + }, + "Jersey": { + "exemplarCity": "Jersey" + }, + "Kaliningrad": { + "exemplarCity": "Kaliningrad" + }, + "Kiev": { + "exemplarCity": "Kiew" + }, + "Kirov": { + "exemplarCity": "Kirow" + }, + "Lisbon": { + "exemplarCity": "Lissabon" + }, + "Ljubljana": { + "exemplarCity": "Ljubljana" + }, + "London": { + "long": { + "daylight": "Britische Sommerzeit" + }, + "exemplarCity": "London" + }, + "Luxembourg": { + "exemplarCity": "Luxemburg" + }, + "Madrid": { + "exemplarCity": "Madrid" + }, + "Malta": { + "exemplarCity": "Malta" + }, + "Mariehamn": { + "exemplarCity": "Mariehamn" + }, + "Minsk": { + "exemplarCity": "Minsk" + }, + "Monaco": { + "exemplarCity": "Monaco" + }, + "Moscow": { + "exemplarCity": "Moskau" + }, + "Oslo": { + "exemplarCity": "Oslo" + }, + "Paris": { + "exemplarCity": "Paris" + }, + "Podgorica": { + "exemplarCity": "Podgorica" + }, + "Prague": { + "exemplarCity": "Prag" + }, + "Riga": { + "exemplarCity": "Riga" + }, + "Rome": { + "exemplarCity": "Rom" + }, + "Samara": { + "exemplarCity": "Samara" + }, + "San_Marino": { + "exemplarCity": "San Marino" + }, + "Sarajevo": { + "exemplarCity": "Sarajevo" + }, + "Simferopol": { + "exemplarCity": "Simferopol" + }, + "Skopje": { + "exemplarCity": "Skopje" + }, + "Sofia": { + "exemplarCity": "Sofia" + }, + "Stockholm": { + "exemplarCity": "Stockholm" + }, + "Tallinn": { + "exemplarCity": "Tallinn" + }, + "Tirane": { + "exemplarCity": "Tirana" + }, + "Ulyanovsk": { + "exemplarCity": "Uljanowsk" + }, + "Uzhgorod": { + "exemplarCity": "Uschgorod" + }, + "Vaduz": { + "exemplarCity": "Vaduz" + }, + "Vatican": { + "exemplarCity": "Vatikan" + }, + "Vienna": { + "exemplarCity": "Wien" + }, + "Vilnius": { + "exemplarCity": "Vilnius" + }, + "Volgograd": { + "exemplarCity": "Wolgograd" + }, + "Warsaw": { + "exemplarCity": "Warschau" + }, + "Zagreb": { + "exemplarCity": "Zagreb" + }, + "Zaporozhye": { + "exemplarCity": "Saporischja" + }, + "Zurich": { + "exemplarCity": "Zürich" + } }, - "Freetown": { - "exemplarCity": "Freetown" + "Africa": { + "Abidjan": { + "exemplarCity": "Abidjan" + }, + "Accra": { + "exemplarCity": "Accra" + }, + "Addis_Ababa": { + "exemplarCity": "Addis Abeba" + }, + "Algiers": { + "exemplarCity": "Algier" + }, + "Asmera": { + "exemplarCity": "Asmara" + }, + "Bamako": { + "exemplarCity": "Bamako" + }, + "Bangui": { + "exemplarCity": "Bangui" + }, + "Banjul": { + "exemplarCity": "Banjul" + }, + "Bissau": { + "exemplarCity": "Bissau" + }, + "Blantyre": { + "exemplarCity": "Blantyre" + }, + "Brazzaville": { + "exemplarCity": "Brazzaville" + }, + "Bujumbura": { + "exemplarCity": "Bujumbura" + }, + "Cairo": { + "exemplarCity": "Kairo" + }, + "Casablanca": { + "exemplarCity": "Casablanca" + }, + "Ceuta": { + "exemplarCity": "Ceuta" + }, + "Conakry": { + "exemplarCity": "Conakry" + }, + "Dakar": { + "exemplarCity": "Dakar" + }, + "Dar_es_Salaam": { + "exemplarCity": "Daressalam" + }, + "Djibouti": { + "exemplarCity": "Dschibuti" + }, + "Douala": { + "exemplarCity": "Douala" + }, + "El_Aaiun": { + "exemplarCity": "El Aaiún" + }, + "Freetown": { + "exemplarCity": "Freetown" + }, + "Gaborone": { + "exemplarCity": "Gaborone" + }, + "Harare": { + "exemplarCity": "Harare" + }, + "Johannesburg": { + "exemplarCity": "Johannesburg" + }, + "Juba": { + "exemplarCity": "Juba" + }, + "Kampala": { + "exemplarCity": "Kampala" + }, + "Khartoum": { + "exemplarCity": "Khartum" + }, + "Kigali": { + "exemplarCity": "Kigali" + }, + "Kinshasa": { + "exemplarCity": "Kinshasa" + }, + "Lagos": { + "exemplarCity": "Lagos" + }, + "Libreville": { + "exemplarCity": "Libreville" + }, + "Lome": { + "exemplarCity": "Lomé" + }, + "Luanda": { + "exemplarCity": "Luanda" + }, + "Lubumbashi": { + "exemplarCity": "Lubumbashi" + }, + "Lusaka": { + "exemplarCity": "Lusaka" + }, + "Malabo": { + "exemplarCity": "Malabo" + }, + "Maputo": { + "exemplarCity": "Maputo" + }, + "Maseru": { + "exemplarCity": "Maseru" + }, + "Mbabane": { + "exemplarCity": "Mbabane" + }, + "Mogadishu": { + "exemplarCity": "Mogadischu" + }, + "Monrovia": { + "exemplarCity": "Monrovia" + }, + "Nairobi": { + "exemplarCity": "Nairobi" + }, + "Ndjamena": { + "exemplarCity": "N’Djamena" + }, + "Niamey": { + "exemplarCity": "Niamey" + }, + "Nouakchott": { + "exemplarCity": "Nouakchott" + }, + "Ouagadougou": { + "exemplarCity": "Ouagadougou" + }, + "Porto-Novo": { + "exemplarCity": "Porto Novo" + }, + "Sao_Tome": { + "exemplarCity": "São Tomé" + }, + "Tripoli": { + "exemplarCity": "Tripolis" + }, + "Tunis": { + "exemplarCity": "Tunis" + }, + "Windhoek": { + "exemplarCity": "Windhoek" + } }, - "Gaborone": { - "exemplarCity": "Gaborone" + "Asia": { + "Aden": { + "exemplarCity": "Aden" + }, + "Almaty": { + "exemplarCity": "Almaty" + }, + "Amman": { + "exemplarCity": "Amman" + }, + "Anadyr": { + "exemplarCity": "Anadyr" + }, + "Aqtau": { + "exemplarCity": "Aqtau" + }, + "Aqtobe": { + "exemplarCity": "Aktobe" + }, + "Ashgabat": { + "exemplarCity": "Aşgabat" + }, + "Baghdad": { + "exemplarCity": "Bagdad" + }, + "Bahrain": { + "exemplarCity": "Bahrain" + }, + "Baku": { + "exemplarCity": "Baku" + }, + "Bangkok": { + "exemplarCity": "Bangkok" + }, + "Barnaul": { + "exemplarCity": "Barnaul" + }, + "Beirut": { + "exemplarCity": "Beirut" + }, + "Bishkek": { + "exemplarCity": "Bischkek" + }, + "Brunei": { + "exemplarCity": "Brunei" + }, + "Calcutta": { + "exemplarCity": "Kalkutta" + }, + "Chita": { + "exemplarCity": "Tschita" + }, + "Choibalsan": { + "exemplarCity": "Tschoibalsan" + }, + "Colombo": { + "exemplarCity": "Colombo" + }, + "Damascus": { + "exemplarCity": "Damaskus" + }, + "Dhaka": { + "exemplarCity": "Dhaka" + }, + "Dili": { + "exemplarCity": "Dili" + }, + "Dubai": { + "exemplarCity": "Dubai" + }, + "Dushanbe": { + "exemplarCity": "Duschanbe" + }, + "Gaza": { + "exemplarCity": "Gaza" + }, + "Hebron": { + "exemplarCity": "Hebron" + }, + "Hong_Kong": { + "exemplarCity": "Hongkong" + }, + "Hovd": { + "exemplarCity": "Chowd" + }, + "Irkutsk": { + "exemplarCity": "Irkutsk" + }, + "Jakarta": { + "exemplarCity": "Jakarta" + }, + "Jayapura": { + "exemplarCity": "Jayapura" + }, + "Jerusalem": { + "exemplarCity": "Jerusalem" + }, + "Kabul": { + "exemplarCity": "Kabul" + }, + "Kamchatka": { + "exemplarCity": "Kamtschatka" + }, + "Karachi": { + "exemplarCity": "Karatschi" + }, + "Katmandu": { + "exemplarCity": "Kathmandu" + }, + "Khandyga": { + "exemplarCity": "Chandyga" + }, + "Krasnoyarsk": { + "exemplarCity": "Krasnojarsk" + }, + "Kuala_Lumpur": { + "exemplarCity": "Kuala Lumpur" + }, + "Kuching": { + "exemplarCity": "Kuching" + }, + "Kuwait": { + "exemplarCity": "Kuwait" + }, + "Macau": { + "exemplarCity": "Macao" + }, + "Magadan": { + "exemplarCity": "Magadan" + }, + "Makassar": { + "exemplarCity": "Makassar" + }, + "Manila": { + "exemplarCity": "Manila" + }, + "Muscat": { + "exemplarCity": "Maskat" + }, + "Nicosia": { + "exemplarCity": "Nikosia" + }, + "Novokuznetsk": { + "exemplarCity": "Nowokuznetsk" + }, + "Novosibirsk": { + "exemplarCity": "Nowosibirsk" + }, + "Omsk": { + "exemplarCity": "Omsk" + }, + "Oral": { + "exemplarCity": "Oral" + }, + "Phnom_Penh": { + "exemplarCity": "Phnom Penh" + }, + "Pontianak": { + "exemplarCity": "Pontianak" + }, + "Pyongyang": { + "exemplarCity": "Pjöngjang" + }, + "Qatar": { + "exemplarCity": "Katar" + }, + "Qyzylorda": { + "exemplarCity": "Qysylorda" + }, + "Rangoon": { + "exemplarCity": "Rangun" + }, + "Riyadh": { + "exemplarCity": "Riad" + }, + "Saigon": { + "exemplarCity": "Ho-Chi-Minh-Stadt" + }, + "Sakhalin": { + "exemplarCity": "Sachalin" + }, + "Samarkand": { + "exemplarCity": "Samarkand" + }, + "Seoul": { + "exemplarCity": "Seoul" + }, + "Shanghai": { + "exemplarCity": "Shanghai" + }, + "Singapore": { + "exemplarCity": "Singapur" + }, + "Srednekolymsk": { + "exemplarCity": "Srednekolymsk" + }, + "Taipei": { + "exemplarCity": "Taipeh" + }, + "Tashkent": { + "exemplarCity": "Taschkent" + }, + "Tbilisi": { + "exemplarCity": "Tiflis" + }, + "Tehran": { + "exemplarCity": "Teheran" + }, + "Thimphu": { + "exemplarCity": "Thimphu" + }, + "Tokyo": { + "exemplarCity": "Tokio" + }, + "Tomsk": { + "exemplarCity": "Tomsk" + }, + "Ulaanbaatar": { + "exemplarCity": "Ulaanbaatar" + }, + "Urumqi": { + "exemplarCity": "Ürümqi" + }, + "Ust-Nera": { + "exemplarCity": "Ust-Nera" + }, + "Vientiane": { + "exemplarCity": "Vientiane" + }, + "Vladivostok": { + "exemplarCity": "Wladiwostok" + }, + "Yakutsk": { + "exemplarCity": "Jakutsk" + }, + "Yekaterinburg": { + "exemplarCity": "Jekaterinburg" + }, + "Yerevan": { + "exemplarCity": "Eriwan" + } }, - "Harare": { - "exemplarCity": "Harare" + "Indian": { + "Antananarivo": { + "exemplarCity": "Antananarivo" + }, + "Chagos": { + "exemplarCity": "Chagos" + }, + "Christmas": { + "exemplarCity": "Weihnachtsinsel" + }, + "Cocos": { + "exemplarCity": "Cocos" + }, + "Comoro": { + "exemplarCity": "Komoren" + }, + "Kerguelen": { + "exemplarCity": "Kerguelen" + }, + "Mahe": { + "exemplarCity": "Mahe" + }, + "Maldives": { + "exemplarCity": "Malediven" + }, + "Mauritius": { + "exemplarCity": "Mauritius" + }, + "Mayotte": { + "exemplarCity": "Mayotte" + }, + "Reunion": { + "exemplarCity": "Réunion" + } }, - "Johannesburg": { - "exemplarCity": "Johannesburg" + "Australia": { + "Adelaide": { + "exemplarCity": "Adelaide" + }, + "Brisbane": { + "exemplarCity": "Brisbane" + }, + "Broken_Hill": { + "exemplarCity": "Broken Hill" + }, + "Currie": { + "exemplarCity": "Currie" + }, + "Darwin": { + "exemplarCity": "Darwin" + }, + "Eucla": { + "exemplarCity": "Eucla" + }, + "Hobart": { + "exemplarCity": "Hobart" + }, + "Lindeman": { + "exemplarCity": "Lindeman" + }, + "Lord_Howe": { + "exemplarCity": "Lord Howe" + }, + "Melbourne": { + "exemplarCity": "Melbourne" + }, + "Perth": { + "exemplarCity": "Perth" + }, + "Sydney": { + "exemplarCity": "Sydney" + } }, - "Juba": { - "exemplarCity": "Juba" + "Pacific": { + "Apia": { + "exemplarCity": "Apia" + }, + "Auckland": { + "exemplarCity": "Auckland" + }, + "Bougainville": { + "exemplarCity": "Bougainville" + }, + "Chatham": { + "exemplarCity": "Chatham" + }, + "Easter": { + "exemplarCity": "Osterinsel" + }, + "Efate": { + "exemplarCity": "Efate" + }, + "Enderbury": { + "exemplarCity": "Enderbury" + }, + "Fakaofo": { + "exemplarCity": "Fakaofo" + }, + "Fiji": { + "exemplarCity": "Fidschi" + }, + "Funafuti": { + "exemplarCity": "Funafuti" + }, + "Galapagos": { + "exemplarCity": "Galapagos" + }, + "Gambier": { + "exemplarCity": "Gambier" + }, + "Guadalcanal": { + "exemplarCity": "Guadalcanal" + }, + "Guam": { + "exemplarCity": "Guam" + }, + "Honolulu": { + "exemplarCity": "Honolulu" + }, + "Johnston": { + "exemplarCity": "Johnston" + }, + "Kiritimati": { + "exemplarCity": "Kiritimati" + }, + "Kosrae": { + "exemplarCity": "Kosrae" + }, + "Kwajalein": { + "exemplarCity": "Kwajalein" + }, + "Majuro": { + "exemplarCity": "Majuro" + }, + "Marquesas": { + "exemplarCity": "Marquesas" + }, + "Midway": { + "exemplarCity": "Midway" + }, + "Nauru": { + "exemplarCity": "Nauru" + }, + "Niue": { + "exemplarCity": "Niue" + }, + "Norfolk": { + "exemplarCity": "Norfolk" + }, + "Noumea": { + "exemplarCity": "Noumea" + }, + "Pago_Pago": { + "exemplarCity": "Pago Pago" + }, + "Palau": { + "exemplarCity": "Palau" + }, + "Pitcairn": { + "exemplarCity": "Pitcairn" + }, + "Ponape": { + "exemplarCity": "Pohnpei" + }, + "Port_Moresby": { + "exemplarCity": "Port Moresby" + }, + "Rarotonga": { + "exemplarCity": "Rarotonga" + }, + "Saipan": { + "exemplarCity": "Saipan" + }, + "Tahiti": { + "exemplarCity": "Tahiti" + }, + "Tarawa": { + "exemplarCity": "Tarawa" + }, + "Tongatapu": { + "exemplarCity": "Tongatapu" + }, + "Truk": { + "exemplarCity": "Chuuk" + }, + "Wake": { + "exemplarCity": "Wake" + }, + "Wallis": { + "exemplarCity": "Wallis" + } }, - "Kampala": { - "exemplarCity": "Kampala" + "Arctic": { + "Longyearbyen": { + "exemplarCity": "Longyearbyen" + } }, - "Khartoum": { - "exemplarCity": "Khartum" - }, - "Kigali": { - "exemplarCity": "Kigali" + "Antarctica": { + "Casey": { + "exemplarCity": "Casey" + }, + "Davis": { + "exemplarCity": "Davis" + }, + "DumontDUrville": { + "exemplarCity": "Dumont d’Urville" + }, + "Macquarie": { + "exemplarCity": "Macquarie" + }, + "Mawson": { + "exemplarCity": "Mawson" + }, + "McMurdo": { + "exemplarCity": "McMurdo" + }, + "Palmer": { + "exemplarCity": "Palmer" + }, + "Rothera": { + "exemplarCity": "Rothera" + }, + "Syowa": { + "exemplarCity": "Syowa" + }, + "Troll": { + "exemplarCity": "Troll" + }, + "Vostok": { + "exemplarCity": "Wostok" + } }, - "Kinshasa": { - "exemplarCity": "Kinshasa" + "Etc": { + "GMT": { + "exemplarCity": "GMT" + }, + "GMT1": { + "exemplarCity": "GMT+1" + }, + "GMT10": { + "exemplarCity": "GMT+10" + }, + "GMT11": { + "exemplarCity": "GMT+11" + }, + "GMT12": { + "exemplarCity": "GMT+12" + }, + "GMT2": { + "exemplarCity": "GMT+2" + }, + "GMT3": { + "exemplarCity": "GMT+3" + }, + "GMT4": { + "exemplarCity": "GMT+4" + }, + "GMT5": { + "exemplarCity": "GMT+5" + }, + "GMT6": { + "exemplarCity": "GMT+6" + }, + "GMT7": { + "exemplarCity": "GMT+7" + }, + "GMT8": { + "exemplarCity": "GMT+8" + }, + "GMT9": { + "exemplarCity": "GMT+9" + }, + "GMT-1": { + "exemplarCity": "GMT-1" + }, + "GMT-10": { + "exemplarCity": "GMT-10" + }, + "GMT-11": { + "exemplarCity": "GMT-11" + }, + "GMT-12": { + "exemplarCity": "GMT-12" + }, + "GMT-13": { + "exemplarCity": "GMT-13" + }, + "GMT-14": { + "exemplarCity": "GMT-14" + }, + "GMT-2": { + "exemplarCity": "GMT-2" + }, + "GMT-3": { + "exemplarCity": "GMT-3" + }, + "GMT-4": { + "exemplarCity": "GMT-4" + }, + "GMT-5": { + "exemplarCity": "GMT-5" + }, + "GMT-6": { + "exemplarCity": "GMT-6" + }, + "GMT-7": { + "exemplarCity": "GMT-7" + }, + "GMT-8": { + "exemplarCity": "GMT-8" + }, + "GMT-9": { + "exemplarCity": "GMT-9" + }, + "Unknown": { + "exemplarCity": "Unbekannt" + } + } + }, + "metazone": { + "Acre": { + "long": { + "generic": "Acre-Zeit", + "standard": "Acre-Normalzeit", + "daylight": "Acre-Sommerzeit" + } }, - "Lagos": { - "exemplarCity": "Lagos" + "Afghanistan": { + "long": { + "standard": "Afghanistan-Zeit" + } }, - "Libreville": { - "exemplarCity": "Libreville" + "Africa_Central": { + "long": { + "standard": "Zentralafrikanische Zeit" + } }, - "Lome": { - "exemplarCity": "Lomé" + "Africa_Eastern": { + "long": { + "standard": "Ostafrikanische Zeit" + } }, - "Luanda": { - "exemplarCity": "Luanda" + "Africa_Southern": { + "long": { + "standard": "Südafrikanische Zeit" + } }, - "Lubumbashi": { - "exemplarCity": "Lubumbashi" + "Africa_Western": { + "long": { + "generic": "Westafrikanische Zeit", + "standard": "Westafrikanische Normalzeit", + "daylight": "Westafrikanische Sommerzeit" + } }, - "Lusaka": { - "exemplarCity": "Lusaka" + "Alaska": { + "long": { + "generic": "Alaska-Zeit", + "standard": "Alaska-Normalzeit", + "daylight": "Alaska-Sommerzeit" + } }, - "Malabo": { - "exemplarCity": "Malabo" + "Almaty": { + "long": { + "generic": "Almaty-Zeit", + "standard": "Almaty-Normalzeit", + "daylight": "Almaty-Sommerzeit" + } }, - "Maputo": { - "exemplarCity": "Maputo" + "Amazon": { + "long": { + "generic": "Amazonas-Zeit", + "standard": "Amazonas-Normalzeit", + "daylight": "Amazonas-Sommerzeit" + } }, - "Maseru": { - "exemplarCity": "Maseru" + "America_Central": { + "long": { + "generic": "Nordamerikanische Inlandzeit", + "standard": "Nordamerikanische Inland-Normalzeit", + "daylight": "Nordamerikanische Inland-Sommerzeit" + } }, - "Mbabane": { - "exemplarCity": "Mbabane" + "America_Eastern": { + "long": { + "generic": "Nordamerikanische Ostküstenzeit", + "standard": "Nordamerikanische Ostküsten-Normalzeit", + "daylight": "Nordamerikanische Ostküsten-Sommerzeit" + } }, - "Mogadishu": { - "exemplarCity": "Mogadischu" + "America_Mountain": { + "long": { + "generic": "Rocky-Mountain-Zeit", + "standard": "Rocky Mountain-Normalzeit", + "daylight": "Rocky-Mountain-Sommerzeit" + } }, - "Monrovia": { - "exemplarCity": "Monrovia" + "America_Pacific": { + "long": { + "generic": "Nordamerikanische Westküstenzeit", + "standard": "Nordamerikanische Westküsten-Normalzeit", + "daylight": "Nordamerikanische Westküsten-Sommerzeit" + } }, - "Nairobi": { - "exemplarCity": "Nairobi" + "Anadyr": { + "long": { + "generic": "Anadyr Zeit", + "standard": "Anadyr Normalzeit", + "daylight": "Anadyr Sommerzeit" + } }, - "Ndjamena": { - "exemplarCity": "N’Djamena" + "Apia": { + "long": { + "generic": "Apia-Zeit", + "standard": "Apia-Normalzeit", + "daylight": "Apia-Sommerzeit" + } }, - "Niamey": { - "exemplarCity": "Niamey" + "Aqtau": { + "long": { + "generic": "Aqtau-Zeit", + "standard": "Aqtau-Normalzeit", + "daylight": "Aqtau-Sommerzeit" + } }, - "Nouakchott": { - "exemplarCity": "Nouakchott" + "Aqtobe": { + "long": { + "generic": "Aqtöbe-Zeit", + "standard": "Aqtöbe-Normalzeit", + "daylight": "Aqtöbe-Sommerzeit" + } }, - "Ouagadougou": { - "exemplarCity": "Ouagadougou" + "Arabian": { + "long": { + "generic": "Arabische Zeit", + "standard": "Arabische Normalzeit", + "daylight": "Arabische Sommerzeit" + } }, - "Porto-Novo": { - "exemplarCity": "Porto Novo" + "Argentina": { + "long": { + "generic": "Argentinische Zeit", + "standard": "Argentinische Normalzeit", + "daylight": "Argentinische Sommerzeit" + } }, - "Sao_Tome": { - "exemplarCity": "São Tomé" + "Argentina_Western": { + "long": { + "generic": "Westargentinische Zeit", + "standard": "Westargentinische Normalzeit", + "daylight": "Westargentinische Sommerzeit" + } }, - "Tripoli": { - "exemplarCity": "Tripolis" + "Armenia": { + "long": { + "generic": "Armenische Zeit", + "standard": "Armenische Normalzeit", + "daylight": "Armenische Sommerzeit" + } }, - "Tunis": { - "exemplarCity": "Tunis" + "Atlantic": { + "long": { + "generic": "Atlantik-Zeit", + "standard": "Atlantik-Normalzeit", + "daylight": "Atlantik-Sommerzeit" + } }, - "Windhoek": { - "exemplarCity": "Windhoek" - } - }, - "Asia": { - "Aden": { - "exemplarCity": "Aden" + "Australia_Central": { + "long": { + "generic": "Zentralaustralische Zeit", + "standard": "Zentralaustralische Normalzeit", + "daylight": "Zentralaustralische Sommerzeit" + } }, - "Almaty": { - "exemplarCity": "Almaty" + "Australia_CentralWestern": { + "long": { + "generic": "Zentral-/Westaustralische Zeit", + "standard": "Zentral-/Westaustralische Normalzeit", + "daylight": "Zentral-/Westaustralische Sommerzeit" + } }, - "Amman": { - "exemplarCity": "Amman" + "Australia_Eastern": { + "long": { + "generic": "Ostaustralische Zeit", + "standard": "Ostaustralische Normalzeit", + "daylight": "Ostaustralische Sommerzeit" + } }, - "Anadyr": { - "exemplarCity": "Anadyr" + "Australia_Western": { + "long": { + "generic": "Westaustralische Zeit", + "standard": "Westaustralische Normalzeit", + "daylight": "Westaustralische Sommerzeit" + } }, - "Aqtau": { - "exemplarCity": "Aqtau" + "Azerbaijan": { + "long": { + "generic": "Aserbaidschanische Zeit", + "standard": "Aserbeidschanische Normalzeit", + "daylight": "Aserbaidschanische Sommerzeit" + } }, - "Aqtobe": { - "exemplarCity": "Aktobe" + "Azores": { + "long": { + "generic": "Azoren-Zeit", + "standard": "Azoren-Normalzeit", + "daylight": "Azoren-Sommerzeit" + } }, - "Ashgabat": { - "exemplarCity": "Aşgabat" + "Bangladesh": { + "long": { + "generic": "Bangladesch-Zeit", + "standard": "Bangladesch-Normalzeit", + "daylight": "Bangladesch-Sommerzeit" + } }, - "Baghdad": { - "exemplarCity": "Bagdad" + "Bhutan": { + "long": { + "standard": "Bhutan-Zeit" + } }, - "Bahrain": { - "exemplarCity": "Bahrain" + "Bolivia": { + "long": { + "standard": "Bolivianische Zeit" + } }, - "Baku": { - "exemplarCity": "Baku" + "Brasilia": { + "long": { + "generic": "Brasília-Zeit", + "standard": "Brasília-Normalzeit", + "daylight": "Brasília-Sommerzeit" + } }, - "Bangkok": { - "exemplarCity": "Bangkok" + "Brunei": { + "long": { + "standard": "Brunei-Zeit" + } }, - "Barnaul": { - "exemplarCity": "Barnaul" + "Cape_Verde": { + "long": { + "generic": "Cabo-Verde-Zeit", + "standard": "Cabo-Verde-Normalzeit", + "daylight": "Cabo-Verde-Sommerzeit" + } }, - "Beirut": { - "exemplarCity": "Beirut" + "Casey": { + "long": { + "standard": "Casey-Zeit" + } }, - "Bishkek": { - "exemplarCity": "Bischkek" + "Chamorro": { + "long": { + "standard": "Chamorro-Zeit" + } }, - "Brunei": { - "exemplarCity": "Brunei" + "Chatham": { + "long": { + "generic": "Chatham-Zeit", + "standard": "Chatham-Normalzeit", + "daylight": "Chatham-Sommerzeit" + } }, - "Calcutta": { - "exemplarCity": "Kalkutta" + "Chile": { + "long": { + "generic": "Chilenische Zeit", + "standard": "Chilenische Normalzeit", + "daylight": "Chilenische Sommerzeit" + } }, - "Chita": { - "exemplarCity": "Tschita" + "China": { + "long": { + "generic": "Chinesische Zeit", + "standard": "Chinesische Normalzeit", + "daylight": "Chinesische Sommerzeit" + } }, "Choibalsan": { - "exemplarCity": "Tschoibalsan" + "long": { + "generic": "Tschoibalsan-Zeit", + "standard": "Tschoibalsan-Normalzeit", + "daylight": "Tschoibalsan-Sommerzeit" + } }, - "Colombo": { - "exemplarCity": "Colombo" + "Christmas": { + "long": { + "standard": "Weihnachtsinsel-Zeit" + } }, - "Damascus": { - "exemplarCity": "Damaskus" + "Cocos": { + "long": { + "standard": "Kokosinseln-Zeit" + } }, - "Dhaka": { - "exemplarCity": "Dhaka" + "Colombia": { + "long": { + "generic": "Kolumbianische Zeit", + "standard": "Kolumbianische Normalzeit", + "daylight": "Kolumbianische Sommerzeit" + } }, - "Dili": { - "exemplarCity": "Dili" + "Cook": { + "long": { + "generic": "Cookinseln-Zeit", + "standard": "Cookinseln-Normalzeit", + "daylight": "Cookinseln-Sommerzeit" + } }, - "Dubai": { - "exemplarCity": "Dubai" + "Cuba": { + "long": { + "generic": "Kubanische Zeit", + "standard": "Kubanische Normalzeit", + "daylight": "Kubanische Sommerzeit" + } }, - "Dushanbe": { - "exemplarCity": "Duschanbe" + "Davis": { + "long": { + "standard": "Davis-Zeit" + } }, - "Gaza": { - "exemplarCity": "Gaza" + "DumontDUrville": { + "long": { + "standard": "Dumont-d’Urville-Zeit" + } }, - "Hebron": { - "exemplarCity": "Hebron" + "East_Timor": { + "long": { + "standard": "Osttimor-Zeit" + } }, - "Hong_Kong": { - "exemplarCity": "Hongkong" + "Easter": { + "long": { + "generic": "Osterinsel-Zeit", + "standard": "Osterinsel-Normalzeit", + "daylight": "Osterinsel-Sommerzeit" + } }, - "Hovd": { - "exemplarCity": "Chowd" + "Ecuador": { + "long": { + "standard": "Ecuadorianische Zeit" + } }, - "Irkutsk": { - "exemplarCity": "Irkutsk" + "Europe_Central": { + "long": { + "generic": "Mitteleuropäische Zeit", + "standard": "Mitteleuropäische Normalzeit", + "daylight": "Mitteleuropäische Sommerzeit" + }, + "short": { + "generic": "MEZ", + "standard": "MEZ", + "daylight": "MESZ" + } }, - "Jakarta": { - "exemplarCity": "Jakarta" + "Europe_Eastern": { + "long": { + "generic": "Osteuropäische Zeit", + "standard": "Osteuropäische Normalzeit", + "daylight": "Osteuropäische Sommerzeit" + }, + "short": { + "generic": "OEZ", + "standard": "OEZ", + "daylight": "OESZ" + } }, - "Jayapura": { - "exemplarCity": "Jayapura" + "Europe_Further_Eastern": { + "long": { + "standard": "Kaliningrader Zeit" + } }, - "Jerusalem": { - "exemplarCity": "Jerusalem" + "Europe_Western": { + "long": { + "generic": "Westeuropäische Zeit", + "standard": "Westeuropäische Normalzeit", + "daylight": "Westeuropäische Sommerzeit" + }, + "short": { + "generic": "WEZ", + "standard": "WEZ", + "daylight": "WESZ" + } }, - "Kabul": { - "exemplarCity": "Kabul" + "Falkland": { + "long": { + "generic": "Falklandinseln-Zeit", + "standard": "Falklandinseln-Normalzeit", + "daylight": "Falklandinseln-Sommerzeit" + } }, - "Kamchatka": { - "exemplarCity": "Kamtschatka" + "Fiji": { + "long": { + "generic": "Fidschi-Zeit", + "standard": "Fidschi-Normalzeit", + "daylight": "Fidschi-Sommerzeit" + } }, - "Karachi": { - "exemplarCity": "Karatschi" + "French_Guiana": { + "long": { + "standard": "Französisch-Guayana-Zeit" + } }, - "Katmandu": { - "exemplarCity": "Kathmandu" + "French_Southern": { + "long": { + "standard": "Französische Süd- und Antarktisgebiete-Zeit" + } }, - "Khandyga": { - "exemplarCity": "Chandyga" + "Galapagos": { + "long": { + "standard": "Galapagos-Zeit" + } }, - "Krasnoyarsk": { - "exemplarCity": "Krasnojarsk" + "Gambier": { + "long": { + "standard": "Gambier-Zeit" + } }, - "Kuala_Lumpur": { - "exemplarCity": "Kuala Lumpur" + "Georgia": { + "long": { + "generic": "Georgische Zeit", + "standard": "Georgische Normalzeit", + "daylight": "Georgische Sommerzeit" + } }, - "Kuching": { - "exemplarCity": "Kuching" + "Gilbert_Islands": { + "long": { + "standard": "Gilbert-Inseln-Zeit" + } }, - "Kuwait": { - "exemplarCity": "Kuwait" + "GMT": { + "long": { + "standard": "Mittlere Greenwich-Zeit" + } }, - "Macau": { - "exemplarCity": "Macao" + "Greenland_Eastern": { + "long": { + "generic": "Ostgrönland-Zeit", + "standard": "Ostgrönland-Normalzeit", + "daylight": "Ostgrönland-Sommerzeit" + } }, - "Magadan": { - "exemplarCity": "Magadan" + "Greenland_Western": { + "long": { + "generic": "Westgrönland-Zeit", + "standard": "Westgrönland-Normalzeit", + "daylight": "Westgrönland-Sommerzeit" + } }, - "Makassar": { - "exemplarCity": "Makassar" + "Guam": { + "long": { + "standard": "Guam-Zeit" + } }, - "Manila": { - "exemplarCity": "Manila" + "Gulf": { + "long": { + "standard": "Golf-Zeit" + } }, - "Muscat": { - "exemplarCity": "Maskat" + "Guyana": { + "long": { + "standard": "Guyana-Zeit" + } }, - "Nicosia": { - "exemplarCity": "Nikosia" + "Hawaii_Aleutian": { + "long": { + "generic": "Hawaii-Aleuten-Zeit", + "standard": "Hawaii-Aleuten-Normalzeit", + "daylight": "Hawaii-Aleuten-Sommerzeit" + } }, - "Novokuznetsk": { - "exemplarCity": "Nowokuznetsk" + "Hong_Kong": { + "long": { + "generic": "Hongkong-Zeit", + "standard": "Hongkong-Normalzeit", + "daylight": "Hongkong-Sommerzeit" + } }, - "Novosibirsk": { - "exemplarCity": "Nowosibirsk" + "Hovd": { + "long": { + "generic": "Chowd-Zeit", + "standard": "Chowd-Normalzeit", + "daylight": "Chowd-Sommerzeit" + } }, - "Omsk": { - "exemplarCity": "Omsk" + "India": { + "long": { + "standard": "Indische Zeit" + } }, - "Oral": { - "exemplarCity": "Oral" + "Indian_Ocean": { + "long": { + "standard": "Indischer Ozean-Zeit" + } }, - "Phnom_Penh": { - "exemplarCity": "Phnom Penh" + "Indochina": { + "long": { + "standard": "Indochina-Zeit" + } }, - "Pontianak": { - "exemplarCity": "Pontianak" + "Indonesia_Central": { + "long": { + "standard": "Zentralindonesische Zeit" + } }, - "Pyongyang": { - "exemplarCity": "Pjöngjang" + "Indonesia_Eastern": { + "long": { + "standard": "Ostindonesische Zeit" + } }, - "Qatar": { - "exemplarCity": "Katar" + "Indonesia_Western": { + "long": { + "standard": "Westindonesische Zeit" + } }, - "Qyzylorda": { - "exemplarCity": "Qysylorda" + "Iran": { + "long": { + "generic": "Iranische Zeit", + "standard": "Iranische Normalzeit", + "daylight": "Iranische Sommerzeit" + } }, - "Rangoon": { - "exemplarCity": "Rangun" + "Irkutsk": { + "long": { + "generic": "Irkutsk-Zeit", + "standard": "Irkutsk-Normalzeit", + "daylight": "Irkutsk-Sommerzeit" + } }, - "Riyadh": { - "exemplarCity": "Riad" + "Israel": { + "long": { + "generic": "Israelische Zeit", + "standard": "Israelische Normalzeit", + "daylight": "Israelische Sommerzeit" + } }, - "Saigon": { - "exemplarCity": "Ho-Chi-Minh-Stadt" + "Japan": { + "long": { + "generic": "Japanische Zeit", + "standard": "Japanische Normalzeit", + "daylight": "Japanische Sommerzeit" + } }, - "Sakhalin": { - "exemplarCity": "Sachalin" + "Kamchatka": { + "long": { + "generic": "Kamtschatka-Zeit", + "standard": "Kamtschatka-Normalzeit", + "daylight": "Kamtschatka-Sommerzeit" + } }, - "Samarkand": { - "exemplarCity": "Samarkand" + "Kazakhstan_Eastern": { + "long": { + "standard": "Ostkasachische Zeit" + } }, - "Seoul": { - "exemplarCity": "Seoul" - }, - "Shanghai": { - "exemplarCity": "Shanghai" - }, - "Singapore": { - "exemplarCity": "Singapur" - }, - "Srednekolymsk": { - "exemplarCity": "Srednekolymsk" - }, - "Taipei": { - "exemplarCity": "Taipeh" - }, - "Tashkent": { - "exemplarCity": "Taschkent" - }, - "Tbilisi": { - "exemplarCity": "Tiflis" - }, - "Tehran": { - "exemplarCity": "Teheran" - }, - "Thimphu": { - "exemplarCity": "Thimphu" - }, - "Tokyo": { - "exemplarCity": "Tokio" - }, - "Tomsk": { - "exemplarCity": "Tomsk" - }, - "Ulaanbaatar": { - "exemplarCity": "Ulaanbaatar" - }, - "Urumqi": { - "exemplarCity": "Ürümqi" - }, - "Ust-Nera": { - "exemplarCity": "Ust-Nera" + "Kazakhstan_Western": { + "long": { + "standard": "Westkasachische Zeit" + } }, - "Vientiane": { - "exemplarCity": "Vientiane" + "Korea": { + "long": { + "generic": "Koreanische Zeit", + "standard": "Koreanische Normalzeit", + "daylight": "Koreanische Sommerzeit" + } }, - "Vladivostok": { - "exemplarCity": "Wladiwostok" + "Kosrae": { + "long": { + "standard": "Kosrae-Zeit" + } }, - "Yakutsk": { - "exemplarCity": "Jakutsk" + "Krasnoyarsk": { + "long": { + "generic": "Krasnojarsk-Zeit", + "standard": "Krasnojarsk-Normalzeit", + "daylight": "Krasnojarsk-Sommerzeit" + } }, - "Yekaterinburg": { - "exemplarCity": "Jekaterinburg" + "Kyrgystan": { + "long": { + "standard": "Kirgisistan-Zeit" + } }, - "Yerevan": { - "exemplarCity": "Eriwan" - } - }, - "Indian": { - "Antananarivo": { - "exemplarCity": "Antananarivo" + "Lanka": { + "long": { + "standard": "Sri-Lanka-Zeit" + } }, - "Chagos": { - "exemplarCity": "Chagos" + "Line_Islands": { + "long": { + "standard": "Linieninseln-Zeit" + } }, - "Christmas": { - "exemplarCity": "Weihnachtsinsel" + "Lord_Howe": { + "long": { + "generic": "Lord-Howe-Zeit", + "standard": "Lord-Howe-Normalzeit", + "daylight": "Lord-Howe-Sommerzeit" + } }, - "Cocos": { - "exemplarCity": "Cocos" + "Macau": { + "long": { + "generic": "Macau-Zeit", + "standard": "Macau-Normalzeit", + "daylight": "Macau-Sommerzeit" + } }, - "Comoro": { - "exemplarCity": "Komoren" + "Macquarie": { + "long": { + "standard": "Macquarieinsel-Zeit" + } }, - "Kerguelen": { - "exemplarCity": "Kerguelen" + "Magadan": { + "long": { + "generic": "Magadan-Zeit", + "standard": "Magadan-Normalzeit", + "daylight": "Magadan-Sommerzeit" + } }, - "Mahe": { - "exemplarCity": "Mahe" + "Malaysia": { + "long": { + "standard": "Malaysische Zeit" + } }, "Maldives": { - "exemplarCity": "Malediven" - }, - "Mauritius": { - "exemplarCity": "Mauritius" - }, - "Mayotte": { - "exemplarCity": "Mayotte" - }, - "Reunion": { - "exemplarCity": "Réunion" - } - }, - "Australia": { - "Adelaide": { - "exemplarCity": "Adelaide" - }, - "Brisbane": { - "exemplarCity": "Brisbane" - }, - "Broken_Hill": { - "exemplarCity": "Broken Hill" - }, - "Currie": { - "exemplarCity": "Currie" - }, - "Darwin": { - "exemplarCity": "Darwin" - }, - "Eucla": { - "exemplarCity": "Eucla" - }, - "Hobart": { - "exemplarCity": "Hobart" - }, - "Lindeman": { - "exemplarCity": "Lindeman" - }, - "Lord_Howe": { - "exemplarCity": "Lord Howe" - }, - "Melbourne": { - "exemplarCity": "Melbourne" - }, - "Perth": { - "exemplarCity": "Perth" + "long": { + "standard": "Malediven-Zeit" + } }, - "Sydney": { - "exemplarCity": "Sydney" - } - }, - "Pacific": { - "Apia": { - "exemplarCity": "Apia" + "Marquesas": { + "long": { + "standard": "Marquesas-Zeit" + } }, - "Auckland": { - "exemplarCity": "Auckland" + "Marshall_Islands": { + "long": { + "standard": "Marshallinseln-Zeit" + } }, - "Bougainville": { - "exemplarCity": "Bougainville" + "Mauritius": { + "long": { + "generic": "Mauritius-Zeit", + "standard": "Mauritius-Normalzeit", + "daylight": "Mauritius-Sommerzeit" + } }, - "Chatham": { - "exemplarCity": "Chatham" + "Mawson": { + "long": { + "standard": "Mawson-Zeit" + } }, - "Easter": { - "exemplarCity": "Osterinsel" + "Mexico_Northwest": { + "long": { + "generic": "Mexiko Nordwestliche Zone-Zeit", + "standard": "Mexiko Nordwestliche Zone-Normalzeit", + "daylight": "Mexiko Nordwestliche Zone-Sommerzeit" + } }, - "Efate": { - "exemplarCity": "Efate" + "Mexico_Pacific": { + "long": { + "generic": "Mexiko Pazifikzone-Zeit", + "standard": "Mexiko Pazifikzone-Normalzeit", + "daylight": "Mexiko Pazifikzone-Sommerzeit" + } }, - "Enderbury": { - "exemplarCity": "Enderbury" + "Mongolia": { + "long": { + "generic": "Ulaanbaatar-Zeit", + "standard": "Ulaanbaatar-Normalzeit", + "daylight": "Ulaanbaatar-Sommerzeit" + } }, - "Fakaofo": { - "exemplarCity": "Fakaofo" + "Moscow": { + "long": { + "generic": "Moskauer Zeit", + "standard": "Moskauer Normalzeit", + "daylight": "Moskauer Sommerzeit" + } }, - "Fiji": { - "exemplarCity": "Fidschi" + "Myanmar": { + "long": { + "standard": "Myanmar-Zeit" + } }, - "Funafuti": { - "exemplarCity": "Funafuti" + "Nauru": { + "long": { + "standard": "Nauru-Zeit" + } }, - "Galapagos": { - "exemplarCity": "Galapagos" + "Nepal": { + "long": { + "standard": "Nepalesische Zeit" + } }, - "Gambier": { - "exemplarCity": "Gambier" + "New_Caledonia": { + "long": { + "generic": "Neukaledonische Zeit", + "standard": "Neukaledonische Normalzeit", + "daylight": "Neukaledonische Sommerzeit" + } }, - "Guadalcanal": { - "exemplarCity": "Guadalcanal" + "New_Zealand": { + "long": { + "generic": "Neuseeland-Zeit", + "standard": "Neuseeland-Normalzeit", + "daylight": "Neuseeland-Sommerzeit" + } }, - "Guam": { - "exemplarCity": "Guam" + "Newfoundland": { + "long": { + "generic": "Neufundland-Zeit", + "standard": "Neufundland-Normalzeit", + "daylight": "Neufundland-Sommerzeit" + } }, - "Honolulu": { - "exemplarCity": "Honolulu" + "Niue": { + "long": { + "standard": "Niue-Zeit" + } }, - "Johnston": { - "exemplarCity": "Johnston" + "Norfolk": { + "long": { + "standard": "Norfolkinsel-Zeit" + } }, - "Kiritimati": { - "exemplarCity": "Kiritimati" + "Noronha": { + "long": { + "generic": "Fernando de Noronha-Zeit", + "standard": "Fernando de Noronha-Normalzeit", + "daylight": "Fernando de Noronha-Sommerzeit" + } }, - "Kosrae": { - "exemplarCity": "Kosrae" + "North_Mariana": { + "long": { + "standard": "Nördliche-Marianen-Zeit" + } }, - "Kwajalein": { - "exemplarCity": "Kwajalein" + "Novosibirsk": { + "long": { + "generic": "Nowosibirsk-Zeit", + "standard": "Nowosibirsk-Normalzeit", + "daylight": "Nowosibirsk-Sommerzeit" + } }, - "Majuro": { - "exemplarCity": "Majuro" + "Omsk": { + "long": { + "generic": "Omsk-Zeit", + "standard": "Omsk-Normalzeit", + "daylight": "Omsk-Sommerzeit" + } }, - "Marquesas": { - "exemplarCity": "Marquesas" + "Pakistan": { + "long": { + "generic": "Pakistanische Zeit", + "standard": "Pakistanische Normalzeit", + "daylight": "Pakistanische Sommerzeit" + } }, - "Midway": { - "exemplarCity": "Midway" + "Palau": { + "long": { + "standard": "Palau-Zeit" + } }, - "Nauru": { - "exemplarCity": "Nauru" + "Papua_New_Guinea": { + "long": { + "standard": "Papua-Neuguinea-Zeit" + } }, - "Niue": { - "exemplarCity": "Niue" + "Paraguay": { + "long": { + "generic": "Paraguayanische Zeit", + "standard": "Paraguayanische Normalzeit", + "daylight": "Paraguayanische Sommerzeit" + } }, - "Norfolk": { - "exemplarCity": "Norfolk" + "Peru": { + "long": { + "generic": "Peruanische Zeit", + "standard": "Peruanische Normalzeit", + "daylight": "Peruanische Sommerzeit" + } }, - "Noumea": { - "exemplarCity": "Noumea" + "Philippines": { + "long": { + "generic": "Philippinische Zeit", + "standard": "Philippinische Normalzeit", + "daylight": "Philippinische Sommerzeit" + } }, - "Pago_Pago": { - "exemplarCity": "Pago Pago" + "Phoenix_Islands": { + "long": { + "standard": "Phoenixinseln-Zeit" + } }, - "Palau": { - "exemplarCity": "Palau" + "Pierre_Miquelon": { + "long": { + "generic": "Saint-Pierre-und-Miquelon-Zeit", + "standard": "Saint-Pierre-und-Miquelon-Normalzeit", + "daylight": "Saint-Pierre-und-Miquelon-Sommerzeit" + } }, "Pitcairn": { - "exemplarCity": "Pitcairn" + "long": { + "standard": "Pitcairninseln-Zeit" + } }, "Ponape": { - "exemplarCity": "Pohnpei" - }, - "Port_Moresby": { - "exemplarCity": "Port Moresby" - }, - "Rarotonga": { - "exemplarCity": "Rarotonga" - }, - "Saipan": { - "exemplarCity": "Saipan" - }, - "Tahiti": { - "exemplarCity": "Tahiti" + "long": { + "standard": "Ponape-Zeit" + } }, - "Tarawa": { - "exemplarCity": "Tarawa" + "Pyongyang": { + "long": { + "standard": "Pjöngjang-Zeit" + } }, - "Tongatapu": { - "exemplarCity": "Tongatapu" + "Qyzylorda": { + "long": { + "generic": "Quysylorda-Zeit", + "standard": "Quysylorda-Normalzeit", + "daylight": "Qysylorda-Sommerzeit" + } }, - "Truk": { - "exemplarCity": "Chuuk" + "Reunion": { + "long": { + "standard": "Réunion-Zeit" + } }, - "Wake": { - "exemplarCity": "Wake" + "Rothera": { + "long": { + "standard": "Rothera-Zeit" + } }, - "Wallis": { - "exemplarCity": "Wallis" - } - }, - "Arctic": { - "Longyearbyen": { - "exemplarCity": "Longyearbyen" - } - }, - "Antarctica": { - "Casey": { - "exemplarCity": "Casey" + "Sakhalin": { + "long": { + "generic": "Sachalin-Zeit", + "standard": "Sachalin-Normalzeit", + "daylight": "Sachalin-Sommerzeit" + } }, - "Davis": { - "exemplarCity": "Davis" + "Samara": { + "long": { + "generic": "Samara-Zeit", + "standard": "Samara-Normalzeit", + "daylight": "Samara-Sommerzeit" + } }, - "DumontDUrville": { - "exemplarCity": "Dumont d’Urville" + "Samoa": { + "long": { + "generic": "Samoa-Zeit", + "standard": "Samoa-Normalzeit", + "daylight": "Samoa-Sommerzeit" + } }, - "Macquarie": { - "exemplarCity": "Macquarie" + "Seychelles": { + "long": { + "standard": "Seychellen-Zeit" + } }, - "Mawson": { - "exemplarCity": "Mawson" + "Singapore": { + "long": { + "standard": "Singapur-Zeit" + } }, - "McMurdo": { - "exemplarCity": "McMurdo" + "Solomon": { + "long": { + "standard": "Salomoninseln-Zeit" + } }, - "Palmer": { - "exemplarCity": "Palmer" + "South_Georgia": { + "long": { + "standard": "Südgeorgische Zeit" + } }, - "Rothera": { - "exemplarCity": "Rothera" + "Suriname": { + "long": { + "standard": "Suriname-Zeit" + } }, "Syowa": { - "exemplarCity": "Syowa" + "long": { + "standard": "Syowa-Zeit" + } }, - "Troll": { - "exemplarCity": "Troll" + "Tahiti": { + "long": { + "standard": "Tahiti-Zeit" + } }, - "Vostok": { - "exemplarCity": "Wostok" - } - }, - "Etc": { - "GMT": { - "exemplarCity": "GMT" + "Taipei": { + "long": { + "generic": "Taipeh-Zeit", + "standard": "Taipeh-Normalzeit", + "daylight": "Taipeh-Sommerzeit" + } }, - "GMT1": { - "exemplarCity": "GMT+1" + "Tajikistan": { + "long": { + "standard": "Tadschikistan-Zeit" + } }, - "GMT10": { - "exemplarCity": "GMT+10" + "Tokelau": { + "long": { + "standard": "Tokelau-Zeit" + } }, - "GMT11": { - "exemplarCity": "GMT+11" + "Tonga": { + "long": { + "generic": "Tonganische Zeit", + "standard": "Tonganische Normalzeit", + "daylight": "Tonganische Sommerzeit" + } }, - "GMT12": { - "exemplarCity": "GMT+12" + "Truk": { + "long": { + "standard": "Chuuk-Zeit" + } }, - "GMT2": { - "exemplarCity": "GMT+2" + "Turkmenistan": { + "long": { + "generic": "Turkmenistan-Zeit", + "standard": "Turkmenistan-Normalzeit", + "daylight": "Turkmenistan-Sommerzeit" + } }, - "GMT3": { - "exemplarCity": "GMT+3" + "Tuvalu": { + "long": { + "standard": "Tuvalu-Zeit" + } }, - "GMT4": { - "exemplarCity": "GMT+4" + "Uruguay": { + "long": { + "generic": "Uruguayanische Zeit", + "standard": "Uruguyanische Normalzeit", + "daylight": "Uruguayanische Sommerzeit" + } }, - "GMT5": { - "exemplarCity": "GMT+5" + "Uzbekistan": { + "long": { + "generic": "Usbekistan-Zeit", + "standard": "Usbekistan-Normalzeit", + "daylight": "Usbekistan-Sommerzeit" + } }, - "GMT6": { - "exemplarCity": "GMT+6" + "Vanuatu": { + "long": { + "generic": "Vanuatu-Zeit", + "standard": "Vanuatu-Normalzeit", + "daylight": "Vanuatu-Sommerzeit" + } }, - "GMT7": { - "exemplarCity": "GMT+7" + "Venezuela": { + "long": { + "standard": "Venezuela-Zeit" + } }, - "GMT8": { - "exemplarCity": "GMT+8" + "Vladivostok": { + "long": { + "generic": "Wladiwostok-Zeit", + "standard": "Wladiwostok-Normalzeit", + "daylight": "Wladiwostok-Sommerzeit" + } }, - "GMT9": { - "exemplarCity": "GMT+9" + "Volgograd": { + "long": { + "generic": "Wolgograd-Zeit", + "standard": "Wolgograd-Normalzeit", + "daylight": "Wolgograd-Sommerzeit" + } }, - "GMT-1": { - "exemplarCity": "GMT-1" + "Vostok": { + "long": { + "standard": "Wostok-Zeit" + } }, - "GMT-10": { - "exemplarCity": "GMT-10" + "Wake": { + "long": { + "standard": "Wake-Insel-Zeit" + } }, - "GMT-11": { - "exemplarCity": "GMT-11" + "Wallis": { + "long": { + "standard": "Wallis-und-Futuna-Zeit" + } }, - "GMT-12": { - "exemplarCity": "GMT-12" - }, - "GMT-13": { - "exemplarCity": "GMT-13" - }, - "GMT-14": { - "exemplarCity": "GMT-14" - }, - "GMT-2": { - "exemplarCity": "GMT-2" - }, - "GMT-3": { - "exemplarCity": "GMT-3" - }, - "GMT-4": { - "exemplarCity": "GMT-4" - }, - "GMT-5": { - "exemplarCity": "GMT-5" - }, - "GMT-6": { - "exemplarCity": "GMT-6" - }, - "GMT-7": { - "exemplarCity": "GMT-7" - }, - "GMT-8": { - "exemplarCity": "GMT-8" - }, - "GMT-9": { - "exemplarCity": "GMT-9" + "Yakutsk": { + "long": { + "generic": "Jakutsk-Zeit", + "standard": "Jakutsk-Normalzeit", + "daylight": "Jakutsk-Sommerzeit" + } }, - "Unknown": { - "exemplarCity": "Unbekannt" + "Yekaterinburg": { + "long": { + "generic": "Jekaterinburg-Zeit", + "standard": "Jekaterinburg-Normalzeit", + "daylight": "Jekaterinburg-Sommerzeit" + } } } + } + }, + "numbers": { + "defaultNumberingSystem": "latn", + "otherNumberingSystems": { + "native": "latn" + }, + "minimumGroupingDigits": "1", + "symbols-numberSystem-latn": { + "decimal": ",", + "group": ".", + "list": ";", + "percentSign": "%", + "plusSign": "+", + "minusSign": "-", + "exponential": "E", + "superscriptingExponent": "·", + "perMille": "‰", + "infinity": "∞", + "nan": "NaN", + "timeSeparator": ":" + }, + "decimalFormats-numberSystem-latn": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-one": "0 Tausend", + "1000-count-other": "0 Tausend", + "10000-count-one": "00 Tausend", + "10000-count-other": "00 Tausend", + "100000-count-one": "000 Tausend", + "100000-count-other": "000 Tausend", + "1000000-count-one": "0 Million", + "1000000-count-other": "0 Millionen", + "10000000-count-one": "00 Millionen", + "10000000-count-other": "00 Millionen", + "100000000-count-one": "000 Millionen", + "100000000-count-other": "000 Millionen", + "1000000000-count-one": "0 Milliarde", + "1000000000-count-other": "0 Milliarden", + "10000000000-count-one": "00 Milliarden", + "10000000000-count-other": "00 Milliarden", + "100000000000-count-one": "000 Milliarden", + "100000000000-count-other": "000 Milliarden", + "1000000000000-count-one": "0 Billion", + "1000000000000-count-other": "0 Billionen", + "10000000000000-count-one": "00 Billionen", + "10000000000000-count-other": "00 Billionen", + "100000000000000-count-one": "000 Billionen", + "100000000000000-count-other": "000 Billionen" + } }, - "metazone": { - "Acre": { - "long": { - "generic": "Acre-Zeit", - "standard": "Acre-Normalzeit", - "daylight": "Acre-Sommerzeit" - } - }, - "Afghanistan": { - "long": { - "standard": "Afghanistan-Zeit" - } - }, - "Africa_Central": { - "long": { - "standard": "Zentralafrikanische Zeit" - } - }, - "Africa_Eastern": { - "long": { - "standard": "Ostafrikanische Zeit" - } - }, - "Africa_Southern": { - "long": { - "standard": "Südafrikanische Zeit" - } - }, - "Africa_Western": { - "long": { - "generic": "Westafrikanische Zeit", - "standard": "Westafrikanische Normalzeit", - "daylight": "Westafrikanische Sommerzeit" - } - }, - "Alaska": { - "long": { - "generic": "Alaska-Zeit", - "standard": "Alaska-Normalzeit", - "daylight": "Alaska-Sommerzeit" - } - }, - "Almaty": { - "long": { - "generic": "Almaty-Zeit", - "standard": "Almaty-Normalzeit", - "daylight": "Almaty-Sommerzeit" - } - }, - "Amazon": { - "long": { - "generic": "Amazonas-Zeit", - "standard": "Amazonas-Normalzeit", - "daylight": "Amazonas-Sommerzeit" - } - }, - "America_Central": { - "long": { - "generic": "Nordamerikanische Inlandzeit", - "standard": "Nordamerikanische Inland-Normalzeit", - "daylight": "Nordamerikanische Inland-Sommerzeit" - } - }, - "America_Eastern": { - "long": { - "generic": "Nordamerikanische Ostküstenzeit", - "standard": "Nordamerikanische Ostküsten-Normalzeit", - "daylight": "Nordamerikanische Ostküsten-Sommerzeit" - } - }, - "America_Mountain": { - "long": { - "generic": "Rocky-Mountain-Zeit", - "standard": "Rocky Mountain-Normalzeit", - "daylight": "Rocky-Mountain-Sommerzeit" - } - }, - "America_Pacific": { - "long": { - "generic": "Nordamerikanische Westküstenzeit", - "standard": "Nordamerikanische Westküsten-Normalzeit", - "daylight": "Nordamerikanische Westküsten-Sommerzeit" - } - }, - "Anadyr": { - "long": { - "generic": "Anadyr Zeit", - "standard": "Anadyr Normalzeit", - "daylight": "Anadyr Sommerzeit" - } - }, - "Apia": { - "long": { - "generic": "Apia-Zeit", - "standard": "Apia-Normalzeit", - "daylight": "Apia-Sommerzeit" - } - }, - "Aqtau": { - "long": { - "generic": "Aqtau-Zeit", - "standard": "Aqtau-Normalzeit", - "daylight": "Aqtau-Sommerzeit" - } - }, - "Aqtobe": { - "long": { - "generic": "Aqtöbe-Zeit", - "standard": "Aqtöbe-Normalzeit", - "daylight": "Aqtöbe-Sommerzeit" - } - }, - "Arabian": { - "long": { - "generic": "Arabische Zeit", - "standard": "Arabische Normalzeit", - "daylight": "Arabische Sommerzeit" - } - }, - "Argentina": { - "long": { - "generic": "Argentinische Zeit", - "standard": "Argentinische Normalzeit", - "daylight": "Argentinische Sommerzeit" - } - }, - "Argentina_Western": { - "long": { - "generic": "Westargentinische Zeit", - "standard": "Westargentinische Normalzeit", - "daylight": "Westargentinische Sommerzeit" - } - }, - "Armenia": { - "long": { - "generic": "Armenische Zeit", - "standard": "Armenische Normalzeit", - "daylight": "Armenische Sommerzeit" - } - }, - "Atlantic": { - "long": { - "generic": "Atlantik-Zeit", - "standard": "Atlantik-Normalzeit", - "daylight": "Atlantik-Sommerzeit" - } - }, - "Australia_Central": { - "long": { - "generic": "Zentralaustralische Zeit", - "standard": "Zentralaustralische Normalzeit", - "daylight": "Zentralaustralische Sommerzeit" - } - }, - "Australia_CentralWestern": { - "long": { - "generic": "Zentral-/Westaustralische Zeit", - "standard": "Zentral-/Westaustralische Normalzeit", - "daylight": "Zentral-/Westaustralische Sommerzeit" - } - }, - "Australia_Eastern": { - "long": { - "generic": "Ostaustralische Zeit", - "standard": "Ostaustralische Normalzeit", - "daylight": "Ostaustralische Sommerzeit" - } - }, - "Australia_Western": { - "long": { - "generic": "Westaustralische Zeit", - "standard": "Westaustralische Normalzeit", - "daylight": "Westaustralische Sommerzeit" - } - }, - "Azerbaijan": { - "long": { - "generic": "Aserbaidschanische Zeit", - "standard": "Aserbeidschanische Normalzeit", - "daylight": "Aserbaidschanische Sommerzeit" - } - }, - "Azores": { - "long": { - "generic": "Azoren-Zeit", - "standard": "Azoren-Normalzeit", - "daylight": "Azoren-Sommerzeit" - } - }, - "Bangladesh": { - "long": { - "generic": "Bangladesch-Zeit", - "standard": "Bangladesch-Normalzeit", - "daylight": "Bangladesch-Sommerzeit" - } - }, - "Bhutan": { - "long": { - "standard": "Bhutan-Zeit" - } - }, - "Bolivia": { - "long": { - "standard": "Bolivianische Zeit" - } - }, - "Brasilia": { - "long": { - "generic": "Brasília-Zeit", - "standard": "Brasília-Normalzeit", - "daylight": "Brasília-Sommerzeit" - } - }, - "Brunei": { - "long": { - "standard": "Brunei-Zeit" - } - }, - "Cape_Verde": { - "long": { - "generic": "Cabo-Verde-Zeit", - "standard": "Cabo-Verde-Normalzeit", - "daylight": "Cabo-Verde-Sommerzeit" - } - }, - "Casey": { - "long": { - "standard": "Casey-Zeit" - } - }, - "Chamorro": { - "long": { - "standard": "Chamorro-Zeit" - } - }, - "Chatham": { - "long": { - "generic": "Chatham-Zeit", - "standard": "Chatham-Normalzeit", - "daylight": "Chatham-Sommerzeit" - } - }, - "Chile": { - "long": { - "generic": "Chilenische Zeit", - "standard": "Chilenische Normalzeit", - "daylight": "Chilenische Sommerzeit" - } - }, - "China": { - "long": { - "generic": "Chinesische Zeit", - "standard": "Chinesische Normalzeit", - "daylight": "Chinesische Sommerzeit" - } - }, - "Choibalsan": { - "long": { - "generic": "Tschoibalsan-Zeit", - "standard": "Tschoibalsan-Normalzeit", - "daylight": "Tschoibalsan-Sommerzeit" - } - }, - "Christmas": { - "long": { - "standard": "Weihnachtsinsel-Zeit" - } - }, - "Cocos": { - "long": { - "standard": "Kokosinseln-Zeit" - } - }, - "Colombia": { - "long": { - "generic": "Kolumbianische Zeit", - "standard": "Kolumbianische Normalzeit", - "daylight": "Kolumbianische Sommerzeit" - } - }, - "Cook": { - "long": { - "generic": "Cookinseln-Zeit", - "standard": "Cookinseln-Normalzeit", - "daylight": "Cookinseln-Sommerzeit" - } - }, - "Cuba": { - "long": { - "generic": "Kubanische Zeit", - "standard": "Kubanische Normalzeit", - "daylight": "Kubanische Sommerzeit" - } - }, - "Davis": { - "long": { - "standard": "Davis-Zeit" - } - }, - "DumontDUrville": { - "long": { - "standard": "Dumont-d’Urville-Zeit" - } - }, - "East_Timor": { - "long": { - "standard": "Osttimor-Zeit" - } - }, - "Easter": { - "long": { - "generic": "Osterinsel-Zeit", - "standard": "Osterinsel-Normalzeit", - "daylight": "Osterinsel-Sommerzeit" - } - }, - "Ecuador": { - "long": { - "standard": "Ecuadorianische Zeit" - } - }, - "Europe_Central": { - "long": { - "generic": "Mitteleuropäische Zeit", - "standard": "Mitteleuropäische Normalzeit", - "daylight": "Mitteleuropäische Sommerzeit" - }, - "short": { - "generic": "MEZ", - "standard": "MEZ", - "daylight": "MESZ" - } - }, - "Europe_Eastern": { - "long": { - "generic": "Osteuropäische Zeit", - "standard": "Osteuropäische Normalzeit", - "daylight": "Osteuropäische Sommerzeit" - }, - "short": { - "generic": "OEZ", - "standard": "OEZ", - "daylight": "OESZ" - } - }, - "Europe_Further_Eastern": { - "long": { - "standard": "Kaliningrader Zeit" - } - }, - "Europe_Western": { - "long": { - "generic": "Westeuropäische Zeit", - "standard": "Westeuropäische Normalzeit", - "daylight": "Westeuropäische Sommerzeit" - }, - "short": { - "generic": "WEZ", - "standard": "WEZ", - "daylight": "WESZ" - } - }, - "Falkland": { - "long": { - "generic": "Falklandinseln-Zeit", - "standard": "Falklandinseln-Normalzeit", - "daylight": "Falklandinseln-Sommerzeit" - } - }, - "Fiji": { - "long": { - "generic": "Fidschi-Zeit", - "standard": "Fidschi-Normalzeit", - "daylight": "Fidschi-Sommerzeit" - } - }, - "French_Guiana": { - "long": { - "standard": "Französisch-Guayana-Zeit" - } - }, - "French_Southern": { - "long": { - "standard": "Französische Süd- und Antarktisgebiete-Zeit" - } - }, - "Galapagos": { - "long": { - "standard": "Galapagos-Zeit" - } - }, - "Gambier": { - "long": { - "standard": "Gambier-Zeit" - } - }, - "Georgia": { - "long": { - "generic": "Georgische Zeit", - "standard": "Georgische Normalzeit", - "daylight": "Georgische Sommerzeit" - } - }, - "Gilbert_Islands": { - "long": { - "standard": "Gilbert-Inseln-Zeit" - } - }, - "GMT": { - "long": { - "standard": "Mittlere Greenwich-Zeit" - } - }, - "Greenland_Eastern": { - "long": { - "generic": "Ostgrönland-Zeit", - "standard": "Ostgrönland-Normalzeit", - "daylight": "Ostgrönland-Sommerzeit" - } - }, - "Greenland_Western": { - "long": { - "generic": "Westgrönland-Zeit", - "standard": "Westgrönland-Normalzeit", - "daylight": "Westgrönland-Sommerzeit" - } - }, - "Guam": { - "long": { - "standard": "Guam-Zeit" - } - }, - "Gulf": { - "long": { - "standard": "Golf-Zeit" - } - }, - "Guyana": { - "long": { - "standard": "Guyana-Zeit" - } - }, - "Hawaii_Aleutian": { - "long": { - "generic": "Hawaii-Aleuten-Zeit", - "standard": "Hawaii-Aleuten-Normalzeit", - "daylight": "Hawaii-Aleuten-Sommerzeit" - } - }, - "Hong_Kong": { - "long": { - "generic": "Hongkong-Zeit", - "standard": "Hongkong-Normalzeit", - "daylight": "Hongkong-Sommerzeit" - } - }, - "Hovd": { - "long": { - "generic": "Chowd-Zeit", - "standard": "Chowd-Normalzeit", - "daylight": "Chowd-Sommerzeit" - } - }, - "India": { - "long": { - "standard": "Indische Zeit" - } - }, - "Indian_Ocean": { - "long": { - "standard": "Indischer Ozean-Zeit" - } - }, - "Indochina": { - "long": { - "standard": "Indochina-Zeit" - } - }, - "Indonesia_Central": { - "long": { - "standard": "Zentralindonesische Zeit" - } - }, - "Indonesia_Eastern": { - "long": { - "standard": "Ostindonesische Zeit" - } - }, - "Indonesia_Western": { - "long": { - "standard": "Westindonesische Zeit" - } - }, - "Iran": { - "long": { - "generic": "Iranische Zeit", - "standard": "Iranische Normalzeit", - "daylight": "Iranische Sommerzeit" - } - }, - "Irkutsk": { - "long": { - "generic": "Irkutsk-Zeit", - "standard": "Irkutsk-Normalzeit", - "daylight": "Irkutsk-Sommerzeit" - } - }, - "Israel": { - "long": { - "generic": "Israelische Zeit", - "standard": "Israelische Normalzeit", - "daylight": "Israelische Sommerzeit" - } - }, - "Japan": { - "long": { - "generic": "Japanische Zeit", - "standard": "Japanische Normalzeit", - "daylight": "Japanische Sommerzeit" - } - }, - "Kamchatka": { - "long": { - "generic": "Kamtschatka-Zeit", - "standard": "Kamtschatka-Normalzeit", - "daylight": "Kamtschatka-Sommerzeit" - } - }, - "Kazakhstan_Eastern": { - "long": { - "standard": "Ostkasachische Zeit" - } - }, - "Kazakhstan_Western": { - "long": { - "standard": "Westkasachische Zeit" - } - }, - "Korea": { - "long": { - "generic": "Koreanische Zeit", - "standard": "Koreanische Normalzeit", - "daylight": "Koreanische Sommerzeit" - } - }, - "Kosrae": { - "long": { - "standard": "Kosrae-Zeit" - } - }, - "Krasnoyarsk": { - "long": { - "generic": "Krasnojarsk-Zeit", - "standard": "Krasnojarsk-Normalzeit", - "daylight": "Krasnojarsk-Sommerzeit" - } - }, - "Kyrgystan": { - "long": { - "standard": "Kirgisistan-Zeit" - } - }, - "Lanka": { - "long": { - "standard": "Sri-Lanka-Zeit" - } - }, - "Line_Islands": { - "long": { - "standard": "Linieninseln-Zeit" - } - }, - "Lord_Howe": { - "long": { - "generic": "Lord-Howe-Zeit", - "standard": "Lord-Howe-Normalzeit", - "daylight": "Lord-Howe-Sommerzeit" - } - }, - "Macau": { - "long": { - "generic": "Macau-Zeit", - "standard": "Macau-Normalzeit", - "daylight": "Macau-Sommerzeit" - } - }, - "Macquarie": { - "long": { - "standard": "Macquarieinsel-Zeit" - } - }, - "Magadan": { - "long": { - "generic": "Magadan-Zeit", - "standard": "Magadan-Normalzeit", - "daylight": "Magadan-Sommerzeit" - } - }, - "Malaysia": { - "long": { - "standard": "Malaysische Zeit" - } - }, - "Maldives": { - "long": { - "standard": "Malediven-Zeit" - } - }, - "Marquesas": { - "long": { - "standard": "Marquesas-Zeit" - } - }, - "Marshall_Islands": { - "long": { - "standard": "Marshallinseln-Zeit" - } - }, - "Mauritius": { - "long": { - "generic": "Mauritius-Zeit", - "standard": "Mauritius-Normalzeit", - "daylight": "Mauritius-Sommerzeit" - } - }, - "Mawson": { - "long": { - "standard": "Mawson-Zeit" - } - }, - "Mexico_Northwest": { - "long": { - "generic": "Mexiko Nordwestliche Zone-Zeit", - "standard": "Mexiko Nordwestliche Zone-Normalzeit", - "daylight": "Mexiko Nordwestliche Zone-Sommerzeit" - } - }, - "Mexico_Pacific": { - "long": { - "generic": "Mexiko Pazifikzone-Zeit", - "standard": "Mexiko Pazifikzone-Normalzeit", - "daylight": "Mexiko Pazifikzone-Sommerzeit" - } - }, - "Mongolia": { - "long": { - "generic": "Ulaanbaatar-Zeit", - "standard": "Ulaanbaatar-Normalzeit", - "daylight": "Ulaanbaatar-Sommerzeit" - } - }, - "Moscow": { - "long": { - "generic": "Moskauer Zeit", - "standard": "Moskauer Normalzeit", - "daylight": "Moskauer Sommerzeit" - } - }, - "Myanmar": { - "long": { - "standard": "Myanmar-Zeit" - } - }, - "Nauru": { - "long": { - "standard": "Nauru-Zeit" - } - }, - "Nepal": { - "long": { - "standard": "Nepalesische Zeit" - } - }, - "New_Caledonia": { - "long": { - "generic": "Neukaledonische Zeit", - "standard": "Neukaledonische Normalzeit", - "daylight": "Neukaledonische Sommerzeit" - } - }, - "New_Zealand": { - "long": { - "generic": "Neuseeland-Zeit", - "standard": "Neuseeland-Normalzeit", - "daylight": "Neuseeland-Sommerzeit" - } - }, - "Newfoundland": { - "long": { - "generic": "Neufundland-Zeit", - "standard": "Neufundland-Normalzeit", - "daylight": "Neufundland-Sommerzeit" - } - }, - "Niue": { - "long": { - "standard": "Niue-Zeit" - } - }, - "Norfolk": { - "long": { - "standard": "Norfolkinsel-Zeit" - } - }, - "Noronha": { - "long": { - "generic": "Fernando de Noronha-Zeit", - "standard": "Fernando de Noronha-Normalzeit", - "daylight": "Fernando de Noronha-Sommerzeit" - } - }, - "North_Mariana": { - "long": { - "standard": "Nördliche-Marianen-Zeit" - } - }, - "Novosibirsk": { - "long": { - "generic": "Nowosibirsk-Zeit", - "standard": "Nowosibirsk-Normalzeit", - "daylight": "Nowosibirsk-Sommerzeit" - } - }, - "Omsk": { - "long": { - "generic": "Omsk-Zeit", - "standard": "Omsk-Normalzeit", - "daylight": "Omsk-Sommerzeit" - } - }, - "Pakistan": { - "long": { - "generic": "Pakistanische Zeit", - "standard": "Pakistanische Normalzeit", - "daylight": "Pakistanische Sommerzeit" - } - }, - "Palau": { - "long": { - "standard": "Palau-Zeit" - } - }, - "Papua_New_Guinea": { - "long": { - "standard": "Papua-Neuguinea-Zeit" - } - }, - "Paraguay": { - "long": { - "generic": "Paraguayanische Zeit", - "standard": "Paraguayanische Normalzeit", - "daylight": "Paraguayanische Sommerzeit" - } - }, - "Peru": { - "long": { - "generic": "Peruanische Zeit", - "standard": "Peruanische Normalzeit", - "daylight": "Peruanische Sommerzeit" - } - }, - "Philippines": { - "long": { - "generic": "Philippinische Zeit", - "standard": "Philippinische Normalzeit", - "daylight": "Philippinische Sommerzeit" - } - }, - "Phoenix_Islands": { - "long": { - "standard": "Phoenixinseln-Zeit" - } - }, - "Pierre_Miquelon": { - "long": { - "generic": "Saint-Pierre-und-Miquelon-Zeit", - "standard": "Saint-Pierre-und-Miquelon-Normalzeit", - "daylight": "Saint-Pierre-und-Miquelon-Sommerzeit" - } - }, - "Pitcairn": { - "long": { - "standard": "Pitcairninseln-Zeit" - } - }, - "Ponape": { - "long": { - "standard": "Ponape-Zeit" - } - }, - "Pyongyang": { - "long": { - "standard": "Pjöngjang-Zeit" - } - }, - "Qyzylorda": { - "long": { - "generic": "Quysylorda-Zeit", - "standard": "Quysylorda-Normalzeit", - "daylight": "Qysylorda-Sommerzeit" - } - }, - "Reunion": { - "long": { - "standard": "Réunion-Zeit" - } - }, - "Rothera": { - "long": { - "standard": "Rothera-Zeit" - } - }, - "Sakhalin": { - "long": { - "generic": "Sachalin-Zeit", - "standard": "Sachalin-Normalzeit", - "daylight": "Sachalin-Sommerzeit" - } - }, - "Samara": { - "long": { - "generic": "Samara-Zeit", - "standard": "Samara-Normalzeit", - "daylight": "Samara-Sommerzeit" - } - }, - "Samoa": { - "long": { - "generic": "Samoa-Zeit", - "standard": "Samoa-Normalzeit", - "daylight": "Samoa-Sommerzeit" - } - }, - "Seychelles": { - "long": { - "standard": "Seychellen-Zeit" - } - }, - "Singapore": { - "long": { - "standard": "Singapur-Zeit" - } - }, - "Solomon": { - "long": { - "standard": "Salomoninseln-Zeit" - } - }, - "South_Georgia": { - "long": { - "standard": "Südgeorgische Zeit" - } - }, - "Suriname": { - "long": { - "standard": "Suriname-Zeit" - } - }, - "Syowa": { - "long": { - "standard": "Syowa-Zeit" - } - }, - "Tahiti": { - "long": { - "standard": "Tahiti-Zeit" - } - }, - "Taipei": { - "long": { - "generic": "Taipeh-Zeit", - "standard": "Taipeh-Normalzeit", - "daylight": "Taipeh-Sommerzeit" - } - }, - "Tajikistan": { - "long": { - "standard": "Tadschikistan-Zeit" - } - }, - "Tokelau": { - "long": { - "standard": "Tokelau-Zeit" - } - }, - "Tonga": { - "long": { - "generic": "Tonganische Zeit", - "standard": "Tonganische Normalzeit", - "daylight": "Tonganische Sommerzeit" - } - }, - "Truk": { - "long": { - "standard": "Chuuk-Zeit" - } - }, - "Turkmenistan": { - "long": { - "generic": "Turkmenistan-Zeit", - "standard": "Turkmenistan-Normalzeit", - "daylight": "Turkmenistan-Sommerzeit" - } - }, - "Tuvalu": { - "long": { - "standard": "Tuvalu-Zeit" - } - }, - "Uruguay": { - "long": { - "generic": "Uruguayanische Zeit", - "standard": "Uruguyanische Normalzeit", - "daylight": "Uruguayanische Sommerzeit" - } - }, - "Uzbekistan": { - "long": { - "generic": "Usbekistan-Zeit", - "standard": "Usbekistan-Normalzeit", - "daylight": "Usbekistan-Sommerzeit" - } - }, - "Vanuatu": { - "long": { - "generic": "Vanuatu-Zeit", - "standard": "Vanuatu-Normalzeit", - "daylight": "Vanuatu-Sommerzeit" - } - }, - "Venezuela": { - "long": { - "standard": "Venezuela-Zeit" - } - }, - "Vladivostok": { - "long": { - "generic": "Wladiwostok-Zeit", - "standard": "Wladiwostok-Normalzeit", - "daylight": "Wladiwostok-Sommerzeit" - } - }, - "Volgograd": { - "long": { - "generic": "Wolgograd-Zeit", - "standard": "Wolgograd-Normalzeit", - "daylight": "Wolgograd-Sommerzeit" - } - }, - "Vostok": { - "long": { - "standard": "Wostok-Zeit" - } - }, - "Wake": { - "long": { - "standard": "Wake-Insel-Zeit" - } - }, - "Wallis": { - "long": { - "standard": "Wallis-und-Futuna-Zeit" - } - }, - "Yakutsk": { - "long": { - "generic": "Jakutsk-Zeit", - "standard": "Jakutsk-Normalzeit", - "daylight": "Jakutsk-Sommerzeit" - } - }, - "Yekaterinburg": { - "long": { - "generic": "Jekaterinburg-Zeit", - "standard": "Jekaterinburg-Normalzeit", - "daylight": "Jekaterinburg-Sommerzeit" - } + "short": { + "decimalFormat": { + "1000-count-one": "0", + "1000-count-other": "0", + "10000-count-one": "0", + "10000-count-other": "0", + "100000-count-one": "0", + "100000-count-other": "0", + "1000000-count-one": "0 Mio'.'", + "1000000-count-other": "0 Mio'.'", + "10000000-count-one": "00 Mio'.'", + "10000000-count-other": "00 Mio'.'", + "100000000-count-one": "000 Mio'.'", + "100000000-count-other": "000 Mio'.'", + "1000000000-count-one": "0 Mrd'.'", + "1000000000-count-other": "0 Mrd'.'", + "10000000000-count-one": "00 Mrd'.'", + "10000000000-count-other": "00 Mrd'.'", + "100000000000-count-one": "000 Mrd'.'", + "100000000000-count-other": "000 Mrd'.'", + "1000000000000-count-one": "0 Bio'.'", + "1000000000000-count-other": "0 Bio'.'", + "10000000000000-count-one": "00 Bio'.'", + "10000000000000-count-other": "00 Bio'.'", + "100000000000000-count-one": "000 Bio'.'", + "100000000000000-count-other": "000 Bio'.'" } } - } - }, - "numbers": { - "defaultNumberingSystem": "latn", - "otherNumberingSystems": { - "native": "latn" - }, - "minimumGroupingDigits": "1", - "symbols-numberSystem-latn": { - "decimal": ",", - "group": ".", - "list": ";", - "percentSign": "%", - "plusSign": "+", - "minusSign": "-", - "exponential": "E", - "superscriptingExponent": "·", - "perMille": "‰", - "infinity": "∞", - "nan": "NaN", - "timeSeparator": ":" - }, - "decimalFormats-numberSystem-latn": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-one": "0 Tausend", - "1000-count-other": "0 Tausend", - "10000-count-one": "00 Tausend", - "10000-count-other": "00 Tausend", - "100000-count-one": "000 Tausend", - "100000-count-other": "000 Tausend", - "1000000-count-one": "0 Million", - "1000000-count-other": "0 Millionen", - "10000000-count-one": "00 Millionen", - "10000000-count-other": "00 Millionen", - "100000000-count-one": "000 Millionen", - "100000000-count-other": "000 Millionen", - "1000000000-count-one": "0 Milliarde", - "1000000000-count-other": "0 Milliarden", - "10000000000-count-one": "00 Milliarden", - "10000000000-count-other": "00 Milliarden", - "100000000000-count-one": "000 Milliarden", - "100000000000-count-other": "000 Milliarden", - "1000000000000-count-one": "0 Billion", - "1000000000000-count-other": "0 Billionen", - "10000000000000-count-one": "00 Billionen", - "10000000000000-count-other": "00 Billionen", - "100000000000000-count-one": "000 Billionen", - "100000000000000-count-other": "000 Billionen" - } }, - "short": { - "decimalFormat": { - "1000-count-one": "0", - "1000-count-other": "0", - "10000-count-one": "0", - "10000-count-other": "0", - "100000-count-one": "0", - "100000-count-other": "0", - "1000000-count-one": "0 Mio'.'", - "1000000-count-other": "0 Mio'.'", - "10000000-count-one": "00 Mio'.'", - "10000000-count-other": "00 Mio'.'", - "100000000-count-one": "000 Mio'.'", - "100000000-count-other": "000 Mio'.'", - "1000000000-count-one": "0 Mrd'.'", - "1000000000-count-other": "0 Mrd'.'", - "10000000000-count-one": "00 Mrd'.'", - "10000000000-count-other": "00 Mrd'.'", - "100000000000-count-one": "000 Mrd'.'", - "100000000000-count-other": "000 Mrd'.'", - "1000000000000-count-one": "0 Bio'.'", - "1000000000000-count-other": "0 Bio'.'", - "10000000000000-count-one": "00 Bio'.'", - "10000000000000-count-other": "00 Bio'.'", - "100000000000000-count-one": "000 Bio'.'", - "100000000000000-count-other": "000 Bio'.'" - } - } - }, - "scientificFormats-numberSystem-latn": { - "standard": "#E0" - }, - "percentFormats-numberSystem-latn": { - "standard": "#,##0 %" - }, - "currencyFormats-numberSystem-latn": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } + "scientificFormats-numberSystem-latn": { + "standard": "#E0" }, - "standard": "#,##0.00 ¤", - "accounting": "#,##0.00 ¤", - "short": { - "standard": { - "1000-count-one": "0 Tsd'.' ¤", - "1000-count-other": "0 Tsd'.' ¤", - "10000-count-one": "00 Tsd'.' ¤", - "10000-count-other": "00 Tsd'.' ¤", - "100000-count-one": "000 Tsd'.' ¤", - "100000-count-other": "000 Tsd'.' ¤", - "1000000-count-one": "0 Mio'.' ¤", - "1000000-count-other": "0 Mio'.' ¤", - "10000000-count-one": "00 Mio'.' ¤", - "10000000-count-other": "00 Mio'.' ¤", - "100000000-count-one": "000 Mio'.' ¤", - "100000000-count-other": "000 Mio'.' ¤", - "1000000000-count-one": "0 Mrd'.' ¤", - "1000000000-count-other": "0 Mrd'.' ¤", - "10000000000-count-one": "00 Mrd'.' ¤", - "10000000000-count-other": "00 Mrd'.' ¤", - "100000000000-count-one": "000 Mrd'.' ¤", - "100000000000-count-other": "000 Mrd'.' ¤", - "1000000000000-count-one": "0 Bio'.' ¤", - "1000000000000-count-other": "0 Bio'.' ¤", - "10000000000000-count-one": "00 Bio'.' ¤", - "10000000000000-count-other": "00 Bio'.' ¤", - "100000000000000-count-one": "000 Bio'.' ¤", - "100000000000000-count-other": "000 Bio'.' ¤" - } + "percentFormats-numberSystem-latn": { + "standard": "#,##0 %" }, - "unitPattern-count-one": "{0} {1}", - "unitPattern-count-other": "{0} {1}" - }, - "miscPatterns-numberSystem-latn": { - "atLeast": "{0}+", - "range": "{0}–{1}" - }, - "minimalPairs": { - "pluralMinimalPairs": "{0} Tag", - "pluralMinimalPairs": "{0} Tage", - "other": "{0}. Abzweigung nach rechts nehmen" - }, - "currencies": { - "ADP": { - "displayName": "Andorranische Pesete", - "displayName-count-one": "Andorranische Pesete", - "displayName-count-other": "Andorranische Peseten", - "symbol": "ADP" - }, - "AED": { - "displayName": "VAE-Dirham", - "displayName-count-one": "VAE-Dirham", - "displayName-count-other": "VAE-Dirham", - "symbol": "AED" - }, - "AFA": { - "displayName": "Afghanische Afghani (1927–2002)", - "displayName-count-one": "Afghanische Afghani (1927–2002)", - "displayName-count-other": "Afghanische Afghani (1927–2002)", - "symbol": "AFA" - }, - "AFN": { - "displayName": "Afghanischer Afghani", - "displayName-count-one": "Afghanischer Afghani", - "displayName-count-other": "Afghanische Afghani", - "symbol": "AFN" - }, - "ALK": { - "displayName": "Albanischer Lek (1946–1965)", - "displayName-count-one": "Albanischer Lek (1946–1965)", - "displayName-count-other": "Albanische Lek (1946–1965)" - }, - "ALL": { - "displayName": "Albanischer Lek", - "displayName-count-one": "Albanischer Lek", - "displayName-count-other": "Albanische Lek", - "symbol": "ALL" - }, - "AMD": { - "displayName": "Armenischer Dram", - "displayName-count-one": "Armenischer Dram", - "displayName-count-other": "Armenische Dram", - "symbol": "AMD" - }, - "ANG": { - "displayName": "Niederländische-Antillen-Gulden", - "displayName-count-one": "Niederländische-Antillen-Gulden", - "displayName-count-other": "Niederländische-Antillen-Gulden", - "symbol": "ANG" - }, - "AOA": { - "displayName": "Angolanischer Kwanza", - "displayName-count-one": "Angolanischer Kwanza", - "displayName-count-other": "Angolanische Kwanza", - "symbol": "AOA", - "symbol-alt-narrow": "Kz" - }, - "AOK": { - "displayName": "Angolanischer Kwanza (1977–1990)", - "displayName-count-one": "Angolanischer Kwanza (1977–1990)", - "displayName-count-other": "Angolanische Kwanza (1977–1990)", - "symbol": "AOK" - }, - "AON": { - "displayName": "Angolanischer Neuer Kwanza (1990–2000)", - "displayName-count-one": "Angolanischer Neuer Kwanza (1990–2000)", - "displayName-count-other": "Angolanische Neue Kwanza (1990–2000)", - "symbol": "AON" - }, - "AOR": { - "displayName": "Angolanischer Kwanza Reajustado (1995–1999)", - "displayName-count-one": "Angolanischer Kwanza Reajustado (1995–1999)", - "displayName-count-other": "Angolanische Kwanza Reajustado (1995–1999)", - "symbol": "AOR" - }, - "ARA": { - "displayName": "Argentinischer Austral", - "displayName-count-one": "Argentinischer Austral", - "displayName-count-other": "Argentinische Austral", - "symbol": "ARA" - }, - "ARL": { - "displayName": "Argentinischer Peso Ley (1970–1983)", - "displayName-count-one": "Argentinischer Peso Ley (1970–1983)", - "displayName-count-other": "Argentinische Pesos Ley (1970–1983)", - "symbol": "ARL" - }, - "ARM": { - "displayName": "Argentinischer Peso (1881–1970)", - "displayName-count-one": "Argentinischer Peso (1881–1970)", - "displayName-count-other": "Argentinische Pesos (1881–1970)", - "symbol": "ARM" - }, - "ARP": { - "displayName": "Argentinischer Peso (1983–1985)", - "displayName-count-one": "Argentinischer Peso (1983–1985)", - "displayName-count-other": "Argentinische Peso (1983–1985)", - "symbol": "ARP" - }, - "ARS": { - "displayName": "Argentinischer Peso", - "displayName-count-one": "Argentinischer Peso", - "displayName-count-other": "Argentinische Pesos", - "symbol": "ARS", - "symbol-alt-narrow": "$" - }, - "ATS": { - "displayName": "Österreichischer Schilling", - "displayName-count-one": "Österreichischer Schilling", - "displayName-count-other": "Österreichische Schilling", - "symbol": "öS" - }, - "AUD": { - "displayName": "Australischer Dollar", - "displayName-count-one": "Australischer Dollar", - "displayName-count-other": "Australische Dollar", - "symbol": "AU$", - "symbol-alt-narrow": "$" - }, - "AWG": { - "displayName": "Aruba-Florin", - "displayName-count-one": "Aruba-Florin", - "displayName-count-other": "Aruba-Florin", - "symbol": "AWG" - }, - "AZM": { - "displayName": "Aserbaidschan-Manat (1993–2006)", - "displayName-count-one": "Aserbaidschan-Manat (1993–2006)", - "displayName-count-other": "Aserbaidschan-Manat (1993–2006)", - "symbol": "AZM" - }, - "AZN": { - "displayName": "Aserbaidschan-Manat", - "displayName-count-one": "Aserbaidschan-Manat", - "displayName-count-other": "Aserbaidschan-Manat", - "symbol": "AZN" - }, - "BAD": { - "displayName": "Bosnien und Herzegowina Dinar (1992–1994)", - "displayName-count-one": "Bosnien und Herzegowina Dinar (1992–1994)", - "displayName-count-other": "Bosnien und Herzegowina Dinar (1992–1994)", - "symbol": "BAD" - }, - "BAM": { - "displayName": "Bosnien und Herzegowina Konvertierbare Mark", - "displayName-count-one": "Bosnien und Herzegowina Konvertierbare Mark", - "displayName-count-other": "Bosnien und Herzegowina Konvertierbare Mark", - "symbol": "BAM", - "symbol-alt-narrow": "KM" - }, - "BAN": { - "displayName": "Bosnien und Herzegowina Neuer Dinar (1994–1997)", - "displayName-count-one": "Bosnien und Herzegowina Neuer Dinar (1994–1997)", - "displayName-count-other": "Bosnien und Herzegowina Neue Dinar (1994–1997)", - "symbol": "BAN" - }, - "BBD": { - "displayName": "Barbados-Dollar", - "displayName-count-one": "Barbados-Dollar", - "displayName-count-other": "Barbados-Dollar", - "symbol": "BBD", - "symbol-alt-narrow": "$" - }, - "BDT": { - "displayName": "Bangladesch-Taka", - "displayName-count-one": "Bangladesch-Taka", - "displayName-count-other": "Bangladesch-Taka", - "symbol": "BDT", - "symbol-alt-narrow": "৳" - }, - "BEC": { - "displayName": "Belgischer Franc (konvertibel)", - "displayName-count-one": "Belgischer Franc (konvertibel)", - "displayName-count-other": "Belgische Franc (konvertibel)", - "symbol": "BEC" - }, - "BEF": { - "displayName": "Belgischer Franc", - "displayName-count-one": "Belgischer Franc", - "displayName-count-other": "Belgische Franc", - "symbol": "BEF" - }, - "BEL": { - "displayName": "Belgischer Finanz-Franc", - "displayName-count-one": "Belgischer Finanz-Franc", - "displayName-count-other": "Belgische Finanz-Franc", - "symbol": "BEL" - }, - "BGL": { - "displayName": "Bulgarische Lew (1962–1999)", - "displayName-count-one": "Bulgarische Lew (1962–1999)", - "displayName-count-other": "Bulgarische Lew (1962–1999)", - "symbol": "BGL" - }, - "BGM": { - "displayName": "Bulgarischer Lew (1952–1962)", - "displayName-count-one": "Bulgarischer Lew (1952–1962)", - "displayName-count-other": "Bulgarische Lew (1952–1962)", - "symbol": "BGK" - }, - "BGN": { - "displayName": "Bulgarischer Lew", - "displayName-count-one": "Bulgarischer Lew", - "displayName-count-other": "Bulgarische Lew", - "symbol": "BGN" - }, - "BGO": { - "displayName": "Bulgarischer Lew (1879–1952)", - "displayName-count-one": "Bulgarischer Lew (1879–1952)", - "displayName-count-other": "Bulgarische Lew (1879–1952)", - "symbol": "BGJ" - }, - "BHD": { - "displayName": "Bahrain-Dinar", - "displayName-count-one": "Bahrain-Dinar", - "displayName-count-other": "Bahrain-Dinar", - "symbol": "BHD" - }, - "BIF": { - "displayName": "Burundi-Franc", - "displayName-count-one": "Burundi-Franc", - "displayName-count-other": "Burundi-Francs", - "symbol": "BIF" - }, - "BMD": { - "displayName": "Bermuda-Dollar", - "displayName-count-one": "Bermuda-Dollar", - "displayName-count-other": "Bermuda-Dollar", - "symbol": "BMD", - "symbol-alt-narrow": "$" - }, - "BND": { - "displayName": "Brunei-Dollar", - "displayName-count-one": "Brunei-Dollar", - "displayName-count-other": "Brunei-Dollar", - "symbol": "BND", - "symbol-alt-narrow": "$" - }, - "BOB": { - "displayName": "Bolivanischer Boliviano", - "displayName-count-one": "Bolivanischer Boliviano", - "displayName-count-other": "Bolivianische Bolivianos", - "symbol": "BOB", - "symbol-alt-narrow": "Bs" - }, - "BOL": { - "displayName": "Bolivianischer Boliviano (1863–1963)", - "displayName-count-one": "Bolivianischer Boliviano (1863–1963)", - "displayName-count-other": "Bolivianische Bolivianos (1863–1963)", - "symbol": "BOL" - }, - "BOP": { - "displayName": "Bolivianischer Peso", - "displayName-count-one": "Bolivianischer Peso", - "displayName-count-other": "Bolivianische Peso", - "symbol": "BOP" - }, - "BOV": { - "displayName": "Boliviansiche Mvdol", - "displayName-count-one": "Boliviansiche Mvdol", - "displayName-count-other": "Bolivianische Mvdol", - "symbol": "BOV" - }, - "BRB": { - "displayName": "Brasilianischer Cruzeiro Novo (1967–1986)", - "displayName-count-one": "Brasilianischer Cruzeiro Novo (1967–1986)", - "displayName-count-other": "Brasilianische Cruzeiro Novo (1967–1986)", - "symbol": "BRB" - }, - "BRC": { - "displayName": "Brasilianischer Cruzado (1986–1989)", - "displayName-count-one": "Brasilianischer Cruzado (1986–1989)", - "displayName-count-other": "Brasilianische Cruzado (1986–1989)", - "symbol": "BRC" - }, - "BRE": { - "displayName": "Brasilianischer Cruzeiro (1990–1993)", - "displayName-count-one": "Brasilianischer Cruzeiro (1990–1993)", - "displayName-count-other": "Brasilianische Cruzeiro (1990–1993)", - "symbol": "BRE" - }, - "BRL": { - "displayName": "Brasilianischer Real", - "displayName-count-one": "Brasilianischer Real", - "displayName-count-other": "Brasilianische Real", - "symbol": "R$", - "symbol-alt-narrow": "R$" - }, - "BRN": { - "displayName": "Brasilianischer Cruzado Novo (1989–1990)", - "displayName-count-one": "Brasilianischer Cruzado Novo (1989–1990)", - "displayName-count-other": "Brasilianische Cruzado Novo (1989–1990)", - "symbol": "BRN" - }, - "BRR": { - "displayName": "Brasilianischer Cruzeiro (1993–1994)", - "displayName-count-one": "Brasilianischer Cruzeiro (1993–1994)", - "displayName-count-other": "Brasilianische Cruzeiro (1993–1994)", - "symbol": "BRR" - }, - "BRZ": { - "displayName": "Brasilianischer Cruzeiro (1942–1967)", - "displayName-count-one": "Brasilianischer Cruzeiro (1942–1967)", - "displayName-count-other": "Brasilianischer Cruzeiro (1942–1967)", - "symbol": "BRZ" - }, - "BSD": { - "displayName": "Bahamas-Dollar", - "displayName-count-one": "Bahamas-Dollar", - "displayName-count-other": "Bahamas-Dollar", - "symbol": "BSD", - "symbol-alt-narrow": "$" - }, - "BTN": { - "displayName": "Bhutan-Ngultrum", - "displayName-count-one": "Bhutan-Ngultrum", - "displayName-count-other": "Bhutan-Ngultrum", - "symbol": "BTN" - }, - "BUK": { - "displayName": "Birmanischer Kyat", - "displayName-count-one": "Birmanischer Kyat", - "displayName-count-other": "Birmanische Kyat", - "symbol": "BUK" - }, - "BWP": { - "displayName": "Botswanischer Pula", - "displayName-count-one": "Botswanischer Pula", - "displayName-count-other": "Botswanische Pula", - "symbol": "BWP", - "symbol-alt-narrow": "P" - }, - "BYB": { - "displayName": "Belarus-Rubel (1994–1999)", - "displayName-count-one": "Belarus-Rubel (1994–1999)", - "displayName-count-other": "Belarus-Rubel (1994–1999)", - "symbol": "BYB" - }, - "BYN": { - "displayName": "Weißrussischer Rubel", - "displayName-count-one": "Weißrussischer Rubel", - "displayName-count-other": "Weißrussische Rubel", - "symbol": "BYN", - "symbol-alt-narrow": "р." - }, - "BYR": { - "displayName": "Weißrussischer Rubel (2000–2016)", - "displayName-count-one": "Weißrussischer Rubel (2000–2016)", - "displayName-count-other": "Weißrussische Rubel (2000–2016)", - "symbol": "BYR" - }, - "BZD": { - "displayName": "Belize-Dollar", - "displayName-count-one": "Belize-Dollar", - "displayName-count-other": "Belize-Dollar", - "symbol": "BZD", - "symbol-alt-narrow": "$" - }, - "CAD": { - "displayName": "Kanadischer Dollar", - "displayName-count-one": "Kanadischer Dollar", - "displayName-count-other": "Kanadische Dollar", - "symbol": "CA$", - "symbol-alt-narrow": "$" - }, - "CDF": { - "displayName": "Kongo-Franc", - "displayName-count-one": "Kongo-Franc", - "displayName-count-other": "Kongo-Francs", - "symbol": "CDF" - }, - "CHE": { - "displayName": "WIR-Euro", - "displayName-count-one": "WIR-Euro", - "displayName-count-other": "WIR-Euro", - "symbol": "CHE" - }, - "CHF": { - "displayName": "Schweizer Franken", - "displayName-count-one": "Schweizer Franken", - "displayName-count-other": "Schweizer Franken", - "symbol": "CHF" - }, - "CHW": { - "displayName": "WIR Franken", - "displayName-count-one": "WIR Franken", - "displayName-count-other": "WIR Franken", - "symbol": "CHW" - }, - "CLE": { - "displayName": "Chilenischer Escudo", - "displayName-count-one": "Chilenischer Escudo", - "displayName-count-other": "Chilenische Escudo", - "symbol": "CLE" - }, - "CLF": { - "displayName": "Chilenische Unidades de Fomento", - "displayName-count-one": "Chilenische Unidades de Fomento", - "displayName-count-other": "Chilenische Unidades de Fomento", - "symbol": "CLF" - }, - "CLP": { - "displayName": "Chilenischer Peso", - "displayName-count-one": "Chilenischer Peso", - "displayName-count-other": "Chilenische Pesos", - "symbol": "CLP", - "symbol-alt-narrow": "$" - }, - "CNX": { - "displayName": "Dollar der Chinesischen Volksbank", - "displayName-count-one": "Dollar der Chinesischen Volksbank", - "displayName-count-other": "Dollar der Chinesischen Volksbank", - "symbol": "CNX" - }, - "CNY": { - "displayName": "Renminbi Yuan", - "displayName-count-one": "Chinesischer Yuan", - "displayName-count-other": "Renminbi Yuan", - "symbol": "CN¥", - "symbol-alt-narrow": "¥" - }, - "COP": { - "displayName": "Kolumbianischer Peso", - "displayName-count-one": "Kolumbianischer Peso", - "displayName-count-other": "Kolumbianische Pesos", - "symbol": "COP", - "symbol-alt-narrow": "$" - }, - "COU": { - "displayName": "Kolumbianische Unidades de valor real", - "displayName-count-one": "Kolumbianische Unidad de valor real", - "displayName-count-other": "Kolumbianische Unidades de valor real", - "symbol": "COU" - }, - "CRC": { - "displayName": "Costa-Rica-Colón", - "displayName-count-one": "Costa-Rica-Colón", - "displayName-count-other": "Costa-Rica-Colón", - "symbol": "CRC", - "symbol-alt-narrow": "₡" - }, - "CSD": { - "displayName": "Serbischer Dinar (2002–2006)", - "displayName-count-one": "Serbischer Dinar (2002–2006)", - "displayName-count-other": "Serbische Dinar (2002–2006)", - "symbol": "CSD" - }, - "CSK": { - "displayName": "Tschechoslowakische Krone", - "displayName-count-one": "Tschechoslowakische Kronen", - "displayName-count-other": "Tschechoslowakische Kronen", - "symbol": "CSK" - }, - "CUC": { - "displayName": "Kubanischer Peso (konvertibel)", - "displayName-count-one": "Kubanischer Peso (konvertibel)", - "displayName-count-other": "Kubanische Pesos (konvertibel)", - "symbol": "CUC", - "symbol-alt-narrow": "Cub$" - }, - "CUP": { - "displayName": "Kubanischer Peso", - "displayName-count-one": "Kubanischer Peso", - "displayName-count-other": "Kubanische Pesos", - "symbol": "CUP", - "symbol-alt-narrow": "$" - }, - "CVE": { - "displayName": "Cabo-Verde-Escudo", - "displayName-count-one": "Cabo-Verde-Escudo", - "displayName-count-other": "Cabo-Verde-Escudos", - "symbol": "CVE" - }, - "CYP": { - "displayName": "Zypern-Pfund", - "displayName-count-one": "Zypern Pfund", - "displayName-count-other": "Zypern Pfund", - "symbol": "CYP" - }, - "CZK": { - "displayName": "Tschechische Krone", - "displayName-count-one": "Tschechische Krone", - "displayName-count-other": "Tschechische Kronen", - "symbol": "CZK", - "symbol-alt-narrow": "Kč" - }, - "DDM": { - "displayName": "Mark der DDR", - "displayName-count-one": "Mark der DDR", - "displayName-count-other": "Mark der DDR", - "symbol": "DDM" - }, - "DEM": { - "displayName": "Deutsche Mark", - "displayName-count-one": "Deutsche Mark", - "displayName-count-other": "Deutsche Mark", - "symbol": "DM" - }, - "DJF": { - "displayName": "Dschibuti-Franc", - "displayName-count-one": "Dschibuti-Franc", - "displayName-count-other": "Dschibuti-Franc", - "symbol": "DJF" - }, - "DKK": { - "displayName": "Dänische Krone", - "displayName-count-one": "Dänische Krone", - "displayName-count-other": "Dänische Kronen", - "symbol": "DKK", - "symbol-alt-narrow": "kr" - }, - "DOP": { - "displayName": "Dominikanischer Peso", - "displayName-count-one": "Dominikanischer Peso", - "displayName-count-other": "Dominikanische Pesos", - "symbol": "DOP", - "symbol-alt-narrow": "$" - }, - "DZD": { - "displayName": "Algerischer Dinar", - "displayName-count-one": "Algerischer Dinar", - "displayName-count-other": "Algerische Dinar", - "symbol": "DZD" - }, - "ECS": { - "displayName": "Ecuadorianischer Sucre", - "displayName-count-one": "Ecuadorianischer Sucre", - "displayName-count-other": "Ecuadorianische Sucre", - "symbol": "ECS" - }, - "ECV": { - "displayName": "Verrechnungseinheit für Ecuador", - "displayName-count-one": "Verrechnungseinheiten für Ecuador", - "displayName-count-other": "Verrechnungseinheiten für Ecuador", - "symbol": "ECV" - }, - "EEK": { - "displayName": "Estnische Krone", - "displayName-count-one": "Estnische Krone", - "displayName-count-other": "Estnische Kronen", - "symbol": "EEK" - }, - "EGP": { - "displayName": "Ägyptisches Pfund", - "displayName-count-one": "Ägyptisches Pfund", - "displayName-count-other": "Ägyptische Pfund", - "symbol": "EGP", - "symbol-alt-narrow": "E£" - }, - "ERN": { - "displayName": "Eritreischer Nakfa", - "displayName-count-one": "Eritreischer Nakfa", - "displayName-count-other": "Eritreische Nakfa", - "symbol": "ERN" - }, - "ESA": { - "displayName": "Spanische Peseta (A–Konten)", - "displayName-count-one": "Spanische Peseta (A–Konten)", - "displayName-count-other": "Spanische Peseten (A–Konten)", - "symbol": "ESA" - }, - "ESB": { - "displayName": "Spanische Peseta (konvertibel)", - "displayName-count-one": "Spanische Peseta (konvertibel)", - "displayName-count-other": "Spanische Peseten (konvertibel)", - "symbol": "ESB" - }, - "ESP": { - "displayName": "Spanische Peseta", - "displayName-count-one": "Spanische Peseta", - "displayName-count-other": "Spanische Peseten", - "symbol": "ESP", - "symbol-alt-narrow": "₧" - }, - "ETB": { - "displayName": "Äthiopischer Birr", - "displayName-count-one": "Äthiopischer Birr", - "displayName-count-other": "Äthiopische Birr", - "symbol": "ETB" - }, - "EUR": { - "displayName": "Euro", - "displayName-count-one": "Euro", - "displayName-count-other": "Euro", - "symbol": "€", - "symbol-alt-narrow": "€" - }, - "FIM": { - "displayName": "Finnische Mark", - "displayName-count-one": "Finnische Mark", - "displayName-count-other": "Finnische Mark", - "symbol": "FIM" - }, - "FJD": { - "displayName": "Fidschi-Dollar", - "displayName-count-one": "Fidschi-Dollar", - "displayName-count-other": "Fidschi-Dollar", - "symbol": "FJD", - "symbol-alt-narrow": "$" - }, - "FKP": { - "displayName": "Falkland-Pfund", - "displayName-count-one": "Falkland-Pfund", - "displayName-count-other": "Falkland-Pfund", - "symbol": "FKP", - "symbol-alt-narrow": "Fl£" - }, - "FRF": { - "displayName": "Französischer Franc", - "displayName-count-one": "Französischer Franc", - "displayName-count-other": "Französische Franc", - "symbol": "FRF" - }, - "GBP": { - "displayName": "Britisches Pfund", - "displayName-count-one": "Britisches Pfund", - "displayName-count-other": "Britische Pfund", - "symbol": "£", - "symbol-alt-narrow": "£" - }, - "GEK": { - "displayName": "Georgischer Kupon Larit", - "displayName-count-one": "Georgischer Kupon Larit", - "displayName-count-other": "Georgische Kupon Larit", - "symbol": "GEK" - }, - "GEL": { - "displayName": "Georgischer Lari", - "displayName-count-one": "Georgischer Lari", - "displayName-count-other": "Georgische Lari", - "symbol": "GEL", - "symbol-alt-narrow": "₾", - "symbol-alt-variant": "₾" - }, - "GHC": { - "displayName": "Ghanaischer Cedi (1979–2007)", - "displayName-count-one": "Ghanaischer Cedi (1979–2007)", - "displayName-count-other": "Ghanaische Cedi (1979–2007)", - "symbol": "GHC" - }, - "GHS": { - "displayName": "Ghanaischer Cedi", - "displayName-count-one": "Ghanaischer Cedi", - "displayName-count-other": "Ghanaische Cedi", - "symbol": "GHS" - }, - "GIP": { - "displayName": "Gibraltar-Pfund", - "displayName-count-one": "Gibraltar-Pfund", - "displayName-count-other": "Gibraltar Pfund", - "symbol": "GIP", - "symbol-alt-narrow": "£" - }, - "GMD": { - "displayName": "Gambia-Dalasi", - "displayName-count-one": "Gambia-Dalasi", - "displayName-count-other": "Gambia-Dalasi", - "symbol": "GMD" - }, - "GNF": { - "displayName": "Guinea-Franc", - "displayName-count-one": "Guinea-Franc", - "displayName-count-other": "Guinea-Franc", - "symbol": "GNF", - "symbol-alt-narrow": "F.G." - }, - "GNS": { - "displayName": "Guineischer Syli", - "displayName-count-one": "Guineischer Syli", - "displayName-count-other": "Guineische Syli", - "symbol": "GNS" - }, - "GQE": { - "displayName": "Äquatorialguinea-Ekwele", - "displayName-count-one": "Äquatorialguinea-Ekwele", - "displayName-count-other": "Äquatorialguinea-Ekwele", - "symbol": "GQE" - }, - "GRD": { - "displayName": "Griechische Drachme", - "displayName-count-one": "Griechische Drachme", - "displayName-count-other": "Griechische Drachmen", - "symbol": "GRD" - }, - "GTQ": { - "displayName": "Guatemaltekischer Quetzal", - "displayName-count-one": "Guatemaltekischer Quetzal", - "displayName-count-other": "Guatemaltekische Quetzales", - "symbol": "GTQ", - "symbol-alt-narrow": "Q" - }, - "GWE": { - "displayName": "Portugiesisch Guinea Escudo", - "displayName-count-one": "Portugiesisch Guinea Escudo", - "displayName-count-other": "Portugiesisch Guinea Escudo", - "symbol": "GWE" - }, - "GWP": { - "displayName": "Guinea-Bissau Peso", - "displayName-count-one": "Guinea-Bissau Peso", - "displayName-count-other": "Guinea-Bissau Pesos", - "symbol": "GWP" - }, - "GYD": { - "displayName": "Guyana-Dollar", - "displayName-count-one": "Guyana-Dollar", - "displayName-count-other": "Guyana-Dollar", - "symbol": "GYD", - "symbol-alt-narrow": "$" - }, - "HKD": { - "displayName": "Hongkong-Dollar", - "displayName-count-one": "Hongkong-Dollar", - "displayName-count-other": "Hongkong-Dollar", - "symbol": "HK$", - "symbol-alt-narrow": "$" - }, - "HNL": { - "displayName": "Honduras-Lempira", - "displayName-count-one": "Honduras-Lempira", - "displayName-count-other": "Honduras-Lempira", - "symbol": "HNL", - "symbol-alt-narrow": "L" - }, - "HRD": { - "displayName": "Kroatischer Dinar", - "displayName-count-one": "Kroatischer Dinar", - "displayName-count-other": "Kroatische Dinar", - "symbol": "HRD" - }, - "HRK": { - "displayName": "Kroatischer Kuna", - "displayName-count-one": "Kroatischer Kuna", - "displayName-count-other": "Kroatische Kuna", - "symbol": "HRK", - "symbol-alt-narrow": "kn" - }, - "HTG": { - "displayName": "Haitianische Gourde", - "displayName-count-one": "Haitianische Gourde", - "displayName-count-other": "Haitianische Gourdes", - "symbol": "HTG" - }, - "HUF": { - "displayName": "Ungarischer Forint", - "displayName-count-one": "Ungarischer Forint", - "displayName-count-other": "Ungarische Forint", - "symbol": "HUF", - "symbol-alt-narrow": "Ft" - }, - "IDR": { - "displayName": "Indonesische Rupiah", - "displayName-count-one": "Indonesische Rupiah", - "displayName-count-other": "Indonesische Rupiah", - "symbol": "IDR", - "symbol-alt-narrow": "Rp" - }, - "IEP": { - "displayName": "Irisches Pfund", - "displayName-count-one": "Irisches Pfund", - "displayName-count-other": "Irische Pfund", - "symbol": "IEP" - }, - "ILP": { - "displayName": "Israelisches Pfund", - "displayName-count-one": "Israelisches Pfund", - "displayName-count-other": "Israelische Pfund", - "symbol": "ILP" - }, - "ILR": { - "displayName": "Israelischer Schekel (1980–1985)", - "displayName-count-one": "Israelischer Schekel (1980–1985)", - "displayName-count-other": "Israelische Schekel (1980–1985)" - }, - "ILS": { - "displayName": "Israelischer Neuer Schekel", - "displayName-count-one": "Israelischer Neuer Schekel", - "displayName-count-other": "Israelische Neue Schekel", - "symbol": "₪", - "symbol-alt-narrow": "₪" - }, - "INR": { - "displayName": "Indische Rupie", - "displayName-count-one": "Indische Rupie", - "displayName-count-other": "Indische Rupien", - "symbol": "₹", - "symbol-alt-narrow": "₹" - }, - "IQD": { - "displayName": "Irakischer Dinar", - "displayName-count-one": "Irakischer Dinar", - "displayName-count-other": "Irakische Dinar", - "symbol": "IQD" - }, - "IRR": { - "displayName": "Iranischer Rial", - "displayName-count-one": "Iranischer Rial", - "displayName-count-other": "Iranische Rial", - "symbol": "IRR" - }, - "ISJ": { - "displayName": "Isländische Krone (1918–1981)", - "displayName-count-one": "Isländische Krone (1918–1981)", - "displayName-count-other": "Isländische Kronen (1918–1981)" - }, - "ISK": { - "displayName": "Isländische Krone", - "displayName-count-one": "Isländische Krone", - "displayName-count-other": "Isländische Kronen", - "symbol": "ISK", - "symbol-alt-narrow": "kr" - }, - "ITL": { - "displayName": "Italienische Lira", - "displayName-count-one": "Italienische Lira", - "displayName-count-other": "Italienische Lire", - "symbol": "ITL" - }, - "JMD": { - "displayName": "Jamaika-Dollar", - "displayName-count-one": "Jamaika-Dollar", - "displayName-count-other": "Jamaika-Dollar", - "symbol": "JMD", - "symbol-alt-narrow": "$" - }, - "JOD": { - "displayName": "Jordanischer Dinar", - "displayName-count-one": "Jordanischer Dinar", - "displayName-count-other": "Jordanische Dinar", - "symbol": "JOD" - }, - "JPY": { - "displayName": "Japanischer Yen", - "displayName-count-one": "Japanischer Yen", - "displayName-count-other": "Japanische Yen", - "symbol": "¥", - "symbol-alt-narrow": "¥" - }, - "KES": { - "displayName": "Kenia-Schilling", - "displayName-count-one": "Kenia-Schilling", - "displayName-count-other": "Kenia-Schilling", - "symbol": "KES" - }, - "KGS": { - "displayName": "Kirgisischer Som", - "displayName-count-one": "Kirgisischer Som", - "displayName-count-other": "Kirgisische Som", - "symbol": "KGS" - }, - "KHR": { - "displayName": "Kambodschanischer Riel", - "displayName-count-one": "Kambodschanischer Riel", - "displayName-count-other": "Kambodschanische Riel", - "symbol": "KHR", - "symbol-alt-narrow": "៛" - }, - "KMF": { - "displayName": "Komoren-Franc", - "displayName-count-one": "Komoren-Franc", - "displayName-count-other": "Komoren-Francs", - "symbol": "KMF", - "symbol-alt-narrow": "FC" - }, - "KPW": { - "displayName": "Nordkoreanischer Won", - "displayName-count-one": "Nordkoreanischer Won", - "displayName-count-other": "Nordkoreanische Won", - "symbol": "KPW", - "symbol-alt-narrow": "₩" - }, - "KRH": { - "displayName": "Südkoreanischer Hwan (1953–1962)", - "displayName-count-one": "Südkoreanischer Hwan (1953–1962)", - "displayName-count-other": "Südkoreanischer Hwan (1953–1962)", - "symbol": "KRH" - }, - "KRO": { - "displayName": "Südkoreanischer Won (1945–1953)", - "displayName-count-one": "Südkoreanischer Won (1945–1953)", - "displayName-count-other": "Südkoreanischer Won (1945–1953)", - "symbol": "KRO" - }, - "KRW": { - "displayName": "Südkoreanischer Won", - "displayName-count-one": "Südkoreanischer Won", - "displayName-count-other": "Südkoreanische Won", - "symbol": "₩", - "symbol-alt-narrow": "₩" - }, - "KWD": { - "displayName": "Kuwait-Dinar", - "displayName-count-one": "Kuwait-Dinar", - "displayName-count-other": "Kuwait-Dinar", - "symbol": "KWD" - }, - "KYD": { - "displayName": "Kaiman-Dollar", - "displayName-count-one": "Kaiman-Dollar", - "displayName-count-other": "Kaiman-Dollar", - "symbol": "KYD", - "symbol-alt-narrow": "$" - }, - "KZT": { - "displayName": "Kasachischer Tenge", - "displayName-count-one": "Kasachischer Tenge", - "displayName-count-other": "Kasachische Tenge", - "symbol": "KZT", - "symbol-alt-narrow": "₸" - }, - "LAK": { - "displayName": "Laotischer Kip", - "displayName-count-one": "Laotischer Kip", - "displayName-count-other": "Laotische Kip", - "symbol": "LAK", - "symbol-alt-narrow": "₭" - }, - "LBP": { - "displayName": "Libanesisches Pfund", - "displayName-count-one": "Libanesisches Pfund", - "displayName-count-other": "Libanesische Pfund", - "symbol": "LBP", - "symbol-alt-narrow": "L£" - }, - "LKR": { - "displayName": "Sri-Lanka-Rupie", - "displayName-count-one": "Sri-Lanka-Rupie", - "displayName-count-other": "Sri-Lanka-Rupien", - "symbol": "LKR", - "symbol-alt-narrow": "Rs" - }, - "LRD": { - "displayName": "Liberianischer Dollar", - "displayName-count-one": "Liberianischer Dollar", - "displayName-count-other": "Liberianische Dollar", - "symbol": "LRD", - "symbol-alt-narrow": "$" - }, - "LSL": { - "displayName": "Loti", - "displayName-count-one": "Loti", - "displayName-count-other": "Loti", - "symbol": "LSL" - }, - "LTL": { - "displayName": "Litauischer Litas", - "displayName-count-one": "Litauischer Litas", - "displayName-count-other": "Litauische Litas", - "symbol": "LTL", - "symbol-alt-narrow": "Lt" - }, - "LTT": { - "displayName": "Litauischer Talonas", - "displayName-count-one": "Litauische Talonas", - "displayName-count-other": "Litauische Talonas", - "symbol": "LTT" - }, - "LUC": { - "displayName": "Luxemburgischer Franc (konvertibel)", - "displayName-count-one": "Luxemburgische Franc (konvertibel)", - "displayName-count-other": "Luxemburgische Franc (konvertibel)", - "symbol": "LUC" - }, - "LUF": { - "displayName": "Luxemburgischer Franc", - "displayName-count-one": "Luxemburgische Franc", - "displayName-count-other": "Luxemburgische Franc", - "symbol": "LUF" - }, - "LUL": { - "displayName": "Luxemburgischer Finanz-Franc", - "displayName-count-one": "Luxemburgische Finanz-Franc", - "displayName-count-other": "Luxemburgische Finanz-Franc", - "symbol": "LUL" - }, - "LVL": { - "displayName": "Lettischer Lats", - "displayName-count-one": "Lettischer Lats", - "displayName-count-other": "Lettische Lats", - "symbol": "LVL", - "symbol-alt-narrow": "Ls" - }, - "LVR": { - "displayName": "Lettischer Rubel", - "displayName-count-one": "Lettische Rubel", - "displayName-count-other": "Lettische Rubel", - "symbol": "LVR" - }, - "LYD": { - "displayName": "Libyscher Dinar", - "displayName-count-one": "Libyscher Dinar", - "displayName-count-other": "Libysche Dinar", - "symbol": "LYD" - }, - "MAD": { - "displayName": "Marokkanischer Dirham", - "displayName-count-one": "Marokkanischer Dirham", - "displayName-count-other": "Marokkanische Dirham", - "symbol": "MAD" - }, - "MAF": { - "displayName": "Marokkanischer Franc", - "displayName-count-one": "Marokkanische Franc", - "displayName-count-other": "Marokkanische Franc", - "symbol": "MAF" - }, - "MCF": { - "displayName": "Monegassischer Franc", - "displayName-count-one": "Monegassischer Franc", - "displayName-count-other": "Monegassische Franc", - "symbol": "MCF" - }, - "MDC": { - "displayName": "Moldau-Cupon", - "displayName-count-one": "Moldau-Cupon", - "displayName-count-other": "Moldau-Cupon", - "symbol": "MDC" - }, - "MDL": { - "displayName": "Moldau-Leu", - "displayName-count-one": "Moldau-Leu", - "displayName-count-other": "Moldau-Leu", - "symbol": "MDL" - }, - "MGA": { - "displayName": "Madagaskar-Ariary", - "displayName-count-one": "Madagaskar-Ariary", - "displayName-count-other": "Madagaskar-Ariary", - "symbol": "MGA", - "symbol-alt-narrow": "Ar" - }, - "MGF": { - "displayName": "Madagaskar-Franc", - "displayName-count-one": "Madagaskar-Franc", - "displayName-count-other": "Madagaskar-Franc", - "symbol": "MGF" - }, - "MKD": { - "displayName": "Mazedonischer Denar", - "displayName-count-one": "Mazedonischer Denar", - "displayName-count-other": "Mazedonische Denari", - "symbol": "MKD" - }, - "MKN": { - "displayName": "Mazedonischer Denar (1992–1993)", - "displayName-count-one": "Mazedonischer Denar (1992–1993)", - "displayName-count-other": "Mazedonische Denar (1992–1993)", - "symbol": "MKN" - }, - "MLF": { - "displayName": "Malischer Franc", - "displayName-count-one": "Malische Franc", - "displayName-count-other": "Malische Franc", - "symbol": "MLF" - }, - "MMK": { - "displayName": "Myanmarischer Kyat", - "displayName-count-one": "Myanmarischer Kyat", - "displayName-count-other": "Myanmarische Kyat", - "symbol": "MMK", - "symbol-alt-narrow": "K" - }, - "MNT": { - "displayName": "Mongolischer Tögrög", - "displayName-count-one": "Mongolischer Tögrög", - "displayName-count-other": "Mongolische Tögrög", - "symbol": "MNT", - "symbol-alt-narrow": "₮" - }, - "MOP": { - "displayName": "Macao-Pataca", - "displayName-count-one": "Macao-Pataca", - "displayName-count-other": "Macao-Pataca", - "symbol": "MOP" - }, - "MRO": { - "displayName": "Mauretanischer Ouguiya", - "displayName-count-one": "Mauretanischer Ouguiya", - "displayName-count-other": "Mauretanische Ouguiya", - "symbol": "MRO" - }, - "MTL": { - "displayName": "Maltesische Lira", - "displayName-count-one": "Maltesische Lira", - "displayName-count-other": "Maltesische Lira", - "symbol": "MTL" - }, - "MTP": { - "displayName": "Maltesisches Pfund", - "displayName-count-one": "Maltesische Pfund", - "displayName-count-other": "Maltesische Pfund", - "symbol": "MTP" - }, - "MUR": { - "displayName": "Mauritius-Rupie", - "displayName-count-one": "Mauritius-Rupie", - "displayName-count-other": "Mauritius-Rupien", - "symbol": "MUR", - "symbol-alt-narrow": "Rs" - }, - "MVP": { - "displayName": "Malediven-Rupie (alt)", - "displayName-count-one": "Malediven-Rupie (alt)", - "displayName-count-other": "Malediven-Rupien (alt)" - }, - "MVR": { - "displayName": "Malediven-Rufiyaa", - "displayName-count-one": "Malediven-Rufiyaa", - "displayName-count-other": "Malediven-Rupien", - "symbol": "MVR" - }, - "MWK": { - "displayName": "Malawi-Kwacha", - "displayName-count-one": "Malawi-Kwacha", - "displayName-count-other": "Malawi-Kwacha", - "symbol": "MWK" - }, - "MXN": { - "displayName": "Mexikanischer Peso", - "displayName-count-one": "Mexikanischer Peso", - "displayName-count-other": "Mexikanische Pesos", - "symbol": "MX$", - "symbol-alt-narrow": "$" - }, - "MXP": { - "displayName": "Mexikanischer Silber-Peso (1861–1992)", - "displayName-count-one": "Mexikanische Silber-Peso (1861–1992)", - "displayName-count-other": "Mexikanische Silber-Pesos (1861–1992)", - "symbol": "MXP" - }, - "MXV": { - "displayName": "Mexicanischer Unidad de Inversion (UDI)", - "displayName-count-one": "Mexicanischer Unidad de Inversion (UDI)", - "displayName-count-other": "Mexikanische Unidad de Inversion (UDI)", - "symbol": "MXV" - }, - "MYR": { - "displayName": "Malaysischer Ringgit", - "displayName-count-one": "Malaysischer Ringgit", - "displayName-count-other": "Malaysische Ringgit", - "symbol": "MYR", - "symbol-alt-narrow": "RM" - }, - "MZE": { - "displayName": "Mosambikanischer Escudo", - "displayName-count-one": "Mozambikanische Escudo", - "displayName-count-other": "Mozambikanische Escudo", - "symbol": "MZE" - }, - "MZM": { - "displayName": "Mosambikanischer Metical (1980–2006)", - "displayName-count-one": "Mosambikanischer Metical (1980–2006)", - "displayName-count-other": "Mosambikanische Meticais (1980–2006)", - "symbol": "MZM" - }, - "MZN": { - "displayName": "Mosambikanischer Metical", - "displayName-count-one": "Mosambikanischer Metical", - "displayName-count-other": "Mosambikanische Meticais", - "symbol": "MZN" - }, - "NAD": { - "displayName": "Namibia-Dollar", - "displayName-count-one": "Namibia-Dollar", - "displayName-count-other": "Namibia-Dollar", - "symbol": "NAD", - "symbol-alt-narrow": "$" - }, - "NGN": { - "displayName": "Nigerianischer Naira", - "displayName-count-one": "Nigerianischer Naira", - "displayName-count-other": "Nigerianische Naira", - "symbol": "NGN", - "symbol-alt-narrow": "₦" - }, - "NIC": { - "displayName": "Nicaraguanischer Córdoba (1988–1991)", - "displayName-count-one": "Nicaraguanischer Córdoba (1988–1991)", - "displayName-count-other": "Nicaraguanische Córdoba (1988–1991)", - "symbol": "NIC" - }, - "NIO": { - "displayName": "Nicaragua-Córdoba", - "displayName-count-one": "Nicaragua-Córdoba", - "displayName-count-other": "Nicaragua-Córdobas", - "symbol": "NIO", - "symbol-alt-narrow": "C$" - }, - "NLG": { - "displayName": "Niederländischer Gulden", - "displayName-count-one": "Niederländischer Gulden", - "displayName-count-other": "Niederländische Gulden", - "symbol": "NLG" - }, - "NOK": { - "displayName": "Norwegische Krone", - "displayName-count-one": "Norwegische Krone", - "displayName-count-other": "Norwegische Kronen", - "symbol": "NOK", - "symbol-alt-narrow": "kr" - }, - "NPR": { - "displayName": "Nepalesische Rupie", - "displayName-count-one": "Nepalesische Rupie", - "displayName-count-other": "Nepalesische Rupien", - "symbol": "NPR", - "symbol-alt-narrow": "Rs" - }, - "NZD": { - "displayName": "Neuseeland-Dollar", - "displayName-count-one": "Neuseeland-Dollar", - "displayName-count-other": "Neuseeland-Dollar", - "symbol": "NZ$", - "symbol-alt-narrow": "$" - }, - "OMR": { - "displayName": "Omanischer Rial", - "displayName-count-one": "Omanischer Rial", - "displayName-count-other": "Omanische Rials", - "symbol": "OMR" - }, - "PAB": { - "displayName": "Panamaischer Balboa", - "displayName-count-one": "Panamaischer Balboa", - "displayName-count-other": "Panamaische Balboas", - "symbol": "PAB" - }, - "PEI": { - "displayName": "Peruanischer Inti", - "displayName-count-one": "Peruanische Inti", - "displayName-count-other": "Peruanische Inti", - "symbol": "PEI" - }, - "PEN": { - "displayName": "Peruanischer Sol", - "displayName-count-one": "Peruanischer Sol", - "displayName-count-other": "Peruanische Sol", - "symbol": "PEN" - }, - "PES": { - "displayName": "Peruanischer Sol (1863–1965)", - "displayName-count-one": "Peruanischer Sol (1863–1965)", - "displayName-count-other": "Peruanische Sol (1863–1965)", - "symbol": "PES" - }, - "PGK": { - "displayName": "Papua-Neuguineischer Kina", - "displayName-count-one": "Papua-Neuguineischer Kina", - "displayName-count-other": "Papua-Neuguineische Kina", - "symbol": "PGK" - }, - "PHP": { - "displayName": "Philippinischer Peso", - "displayName-count-one": "Philippinischer Peso", - "displayName-count-other": "Philippinische Pesos", - "symbol": "PHP", - "symbol-alt-narrow": "₱" - }, - "PKR": { - "displayName": "Pakistanische Rupie", - "displayName-count-one": "Pakistanische Rupie", - "displayName-count-other": "Pakistanische Rupien", - "symbol": "PKR", - "symbol-alt-narrow": "Rs" - }, - "PLN": { - "displayName": "Polnischer Złoty", - "displayName-count-one": "Polnischer Złoty", - "displayName-count-other": "Polnische Złoty", - "symbol": "PLN", - "symbol-alt-narrow": "zł" - }, - "PLZ": { - "displayName": "Polnischer Zloty (1950–1995)", - "displayName-count-one": "Polnischer Zloty (1950–1995)", - "displayName-count-other": "Polnische Zloty (1950–1995)", - "symbol": "PLZ" - }, - "PTE": { - "displayName": "Portugiesischer Escudo", - "displayName-count-one": "Portugiesische Escudo", - "displayName-count-other": "Portugiesische Escudo", - "symbol": "PTE" - }, - "PYG": { - "displayName": "Paraguayischer Guaraní", - "displayName-count-one": "Paraguayischer Guaraní", - "displayName-count-other": "Paraguayische Guaraníes", - "symbol": "PYG", - "symbol-alt-narrow": "₲" - }, - "QAR": { - "displayName": "Katar-Riyal", - "displayName-count-one": "Katar-Riyal", - "displayName-count-other": "Katar-Riyal", - "symbol": "QAR" - }, - "RHD": { - "displayName": "Rhodesischer Dollar", - "displayName-count-one": "Rhodesische Dollar", - "displayName-count-other": "Rhodesische Dollar", - "symbol": "RHD" - }, - "ROL": { - "displayName": "Rumänischer Leu (1952–2006)", - "displayName-count-one": "Rumänischer Leu (1952–2006)", - "displayName-count-other": "Rumänische Leu (1952–2006)", - "symbol": "ROL" - }, - "RON": { - "displayName": "Rumänischer Leu", - "displayName-count-one": "Rumänischer Leu", - "displayName-count-other": "Rumänische Leu", - "symbol": "RON", - "symbol-alt-narrow": "L" - }, - "RSD": { - "displayName": "Serbischer Dinar", - "displayName-count-one": "Serbischer Dinar", - "displayName-count-other": "Serbische Dinaren", - "symbol": "RSD" - }, - "RUB": { - "displayName": "Russischer Rubel", - "displayName-count-one": "Russischer Rubel", - "displayName-count-other": "Russische Rubel", - "symbol": "RUB", - "symbol-alt-narrow": "₽" - }, - "RUR": { - "displayName": "Russischer Rubel (1991–1998)", - "displayName-count-one": "Russischer Rubel (1991–1998)", - "displayName-count-other": "Russische Rubel (1991–1998)", - "symbol": "RUR", - "symbol-alt-narrow": "р." - }, - "RWF": { - "displayName": "Ruanda-Franc", - "displayName-count-one": "Ruanda-Franc", - "displayName-count-other": "Ruanda-Francs", - "symbol": "RWF", - "symbol-alt-narrow": "F.Rw" - }, - "SAR": { - "displayName": "Saudi-Rial", - "displayName-count-one": "Saudi-Rial", - "displayName-count-other": "Saudi-Rial", - "symbol": "SAR" - }, - "SBD": { - "displayName": "Salomonen-Dollar", - "displayName-count-one": "Salomonen-Dollar", - "displayName-count-other": "Salomonen-Dollar", - "symbol": "SBD", - "symbol-alt-narrow": "$" - }, - "SCR": { - "displayName": "Seychellen-Rupie", - "displayName-count-one": "Seychellen-Rupie", - "displayName-count-other": "Seychellen-Rupien", - "symbol": "SCR" - }, - "SDD": { - "displayName": "Sudanesischer Dinar (1992–2007)", - "displayName-count-one": "Sudanesischer Dinar (1992–2007)", - "displayName-count-other": "Sudanesische Dinar (1992–2007)", - "symbol": "SDD" - }, - "SDG": { - "displayName": "Sudanesisches Pfund", - "displayName-count-one": "Sudanesisches Pfund", - "displayName-count-other": "Sudanesische Pfund", - "symbol": "SDG" - }, - "SDP": { - "displayName": "Sudanesisches Pfund (1957–1998)", - "displayName-count-one": "Sudanesisches Pfund (1957–1998)", - "displayName-count-other": "Sudanesische Pfund (1957–1998)", - "symbol": "SDP" - }, - "SEK": { - "displayName": "Schwedische Krone", - "displayName-count-one": "Schwedische Krone", - "displayName-count-other": "Schwedische Kronen", - "symbol": "SEK", - "symbol-alt-narrow": "kr" - }, - "SGD": { - "displayName": "Singapur-Dollar", - "displayName-count-one": "Singapur-Dollar", - "displayName-count-other": "Singapur-Dollar", - "symbol": "SGD", - "symbol-alt-narrow": "$" - }, - "SHP": { - "displayName": "St. Helena-Pfund", - "displayName-count-one": "St. Helena-Pfund", - "displayName-count-other": "St. Helena-Pfund", - "symbol": "SHP", - "symbol-alt-narrow": "£" - }, - "SIT": { - "displayName": "Slowenischer Tolar", - "displayName-count-one": "Slowenischer Tolar", - "displayName-count-other": "Slowenische Tolar", - "symbol": "SIT" - }, - "SKK": { - "displayName": "Slowakische Krone", - "displayName-count-one": "Slowakische Kronen", - "displayName-count-other": "Slowakische Kronen", - "symbol": "SKK" - }, - "SLL": { - "displayName": "Sierra-leonischer Leone", - "displayName-count-one": "Sierra-leonischer Leone", - "displayName-count-other": "Sierra-leonische Leones", - "symbol": "SLL" - }, - "SOS": { - "displayName": "Somalia-Schilling", - "displayName-count-one": "Somalia-Schilling", - "displayName-count-other": "Somalia-Schilling", - "symbol": "SOS" - }, - "SRD": { - "displayName": "Suriname-Dollar", - "displayName-count-one": "Suriname-Dollar", - "displayName-count-other": "Suriname-Dollar", - "symbol": "SRD", - "symbol-alt-narrow": "$" - }, - "SRG": { - "displayName": "Suriname Gulden", - "displayName-count-one": "Suriname-Gulden", - "displayName-count-other": "Suriname-Gulden", - "symbol": "SRG" - }, - "SSP": { - "displayName": "Südsudanesisches Pfund", - "displayName-count-one": "Südsudanesisches Pfund", - "displayName-count-other": "Südsudanesische Pfund", - "symbol": "SSP", - "symbol-alt-narrow": "£" - }, - "STD": { - "displayName": "São-toméischer Dobra", - "displayName-count-one": "São-toméischer Dobra", - "displayName-count-other": "São-toméische Dobra", - "symbol": "STD", - "symbol-alt-narrow": "Db" - }, - "SUR": { - "displayName": "Sowjetischer Rubel", - "displayName-count-one": "Sowjetische Rubel", - "displayName-count-other": "Sowjetische Rubel", - "symbol": "SUR" - }, - "SVC": { - "displayName": "El Salvador Colon", - "displayName-count-one": "El Salvador-Colon", - "displayName-count-other": "El Salvador-Colon", - "symbol": "SVC" - }, - "SYP": { - "displayName": "Syrisches Pfund", - "displayName-count-one": "Syrisches Pfund", - "displayName-count-other": "Syrische Pfund", - "symbol": "SYP", - "symbol-alt-narrow": "SYP" - }, - "SZL": { - "displayName": "Swasiländischer Lilangeni", - "displayName-count-one": "Swasiländischer Lilangeni", - "displayName-count-other": "Swasiländische Emalangeni", - "symbol": "SZL" - }, - "THB": { - "displayName": "Thailändischer Baht", - "displayName-count-one": "Thailändischer Baht", - "displayName-count-other": "Thailändische Baht", - "symbol": "฿", - "symbol-alt-narrow": "฿" - }, - "TJR": { - "displayName": "Tadschikistan Rubel", - "displayName-count-one": "Tadschikistan-Rubel", - "displayName-count-other": "Tadschikistan-Rubel", - "symbol": "TJR" - }, - "TJS": { - "displayName": "Tadschikistan-Somoni", - "displayName-count-one": "Tadschikistan-Somoni", - "displayName-count-other": "Tadschikistan-Somoni", - "symbol": "TJS" - }, - "TMM": { - "displayName": "Turkmenistan-Manat (1993–2009)", - "displayName-count-one": "Turkmenistan-Manat (1993–2009)", - "displayName-count-other": "Turkmenistan-Manat (1993–2009)", - "symbol": "TMM" - }, - "TMT": { - "displayName": "Turkmenistan-Manat", - "displayName-count-one": "Turkmenistan-Manat", - "displayName-count-other": "Turkmenistan-Manat", - "symbol": "TMT" - }, - "TND": { - "displayName": "Tunesischer Dinar", - "displayName-count-one": "Tunesischer Dinar", - "displayName-count-other": "Tunesische Dinar", - "symbol": "TND" - }, - "TOP": { - "displayName": "Tongaischer Paʻanga", - "displayName-count-one": "Tongaischer Paʻanga", - "displayName-count-other": "Tongaische Paʻanga", - "symbol": "TOP", - "symbol-alt-narrow": "T$" - }, - "TPE": { - "displayName": "Timor-Escudo", - "displayName-count-one": "Timor-Escudo", - "displayName-count-other": "Timor-Escudo", - "symbol": "TPE" - }, - "TRL": { - "displayName": "Türkische Lira (1922–2005)", - "displayName-count-one": "Türkische Lira (1922–2005)", - "displayName-count-other": "Türkische Lira (1922–2005)", - "symbol": "TRL" - }, - "TRY": { - "displayName": "Türkische Lira", - "displayName-count-one": "Türkische Lira", - "displayName-count-other": "Türkische Lira", - "symbol": "TRY", - "symbol-alt-narrow": "₺", - "symbol-alt-variant": "TL" - }, - "TTD": { - "displayName": "Trinidad und Tobago-Dollar", - "displayName-count-one": "Trinidad und Tobago-Dollar", - "displayName-count-other": "Trinidad und Tobago-Dollar", - "symbol": "TTD", - "symbol-alt-narrow": "$" - }, - "TWD": { - "displayName": "Neuer Taiwan-Dollar", - "displayName-count-one": "Neuer Taiwan-Dollar", - "displayName-count-other": "Neue Taiwan-Dollar", - "symbol": "NT$", - "symbol-alt-narrow": "NT$" - }, - "TZS": { - "displayName": "Tansania-Schilling", - "displayName-count-one": "Tansania-Schilling", - "displayName-count-other": "Tansania-Schilling", - "symbol": "TZS" - }, - "UAH": { - "displayName": "Ukrainische Hrywnja", - "displayName-count-one": "Ukrainische Hrywnja", - "displayName-count-other": "Ukrainische Hrywen", - "symbol": "UAH", - "symbol-alt-narrow": "₴" - }, - "UAK": { - "displayName": "Ukrainischer Karbovanetz", - "displayName-count-one": "Ukrainische Karbovanetz", - "displayName-count-other": "Ukrainische Karbovanetz", - "symbol": "UAK" - }, - "UGS": { - "displayName": "Uganda-Schilling (1966–1987)", - "displayName-count-one": "Uganda-Schilling (1966–1987)", - "displayName-count-other": "Uganda-Schilling (1966–1987)", - "symbol": "UGS" - }, - "UGX": { - "displayName": "Uganda-Schilling", - "displayName-count-one": "Uganda-Schilling", - "displayName-count-other": "Uganda-Schilling", - "symbol": "UGX" - }, - "USD": { - "displayName": "US-Dollar", - "displayName-count-one": "US-Dollar", - "displayName-count-other": "US-Dollar", - "symbol": "$", - "symbol-alt-narrow": "$" - }, - "USN": { - "displayName": "US Dollar (Nächster Tag)", - "displayName-count-one": "US-Dollar (Nächster Tag)", - "displayName-count-other": "US-Dollar (Nächster Tag)", - "symbol": "USN" - }, - "USS": { - "displayName": "US Dollar (Gleicher Tag)", - "displayName-count-one": "US-Dollar (Gleicher Tag)", - "displayName-count-other": "US-Dollar (Gleicher Tag)", - "symbol": "USS" - }, - "UYI": { - "displayName": "Uruguayischer Peso (Indexierte Rechnungseinheiten)", - "displayName-count-one": "Uruguayischer Peso (Indexierte Rechnungseinheiten)", - "displayName-count-other": "Uruguayische Pesos (Indexierte Rechnungseinheiten)", - "symbol": "UYI" - }, - "UYP": { - "displayName": "Uruguayischer Peso (1975–1993)", - "displayName-count-one": "Uruguayischer Peso (1975–1993)", - "displayName-count-other": "Uruguayische Pesos (1975–1993)", - "symbol": "UYP" - }, - "UYU": { - "displayName": "Uruguayischer Peso", - "displayName-count-one": "Uruguayischer Peso", - "displayName-count-other": "Uruguayische Pesos", - "symbol": "UYU", - "symbol-alt-narrow": "$" - }, - "UZS": { - "displayName": "Usbekistan-Sum", - "displayName-count-one": "Usbekistan-Sum", - "displayName-count-other": "Usbekistan-Sum", - "symbol": "UZS" - }, - "VEB": { - "displayName": "Venezolanischer Bolívar (1871–2008)", - "displayName-count-one": "Venezolanischer Bolívar (1871–2008)", - "displayName-count-other": "Venezolanische Bolívares (1871–2008)", - "symbol": "VEB" - }, - "VEF": { - "displayName": "Venezolanischer Bolívar", - "displayName-count-one": "Venezolanischer Bolívar", - "displayName-count-other": "Venezolanische Bolívares", - "symbol": "VEF", - "symbol-alt-narrow": "Bs" - }, - "VND": { - "displayName": "Vietnamesischer Dong", - "displayName-count-one": "Vietnamesischer Dong", - "displayName-count-other": "Vietnamesische Dong", - "symbol": "₫", - "symbol-alt-narrow": "₫" - }, - "VNN": { - "displayName": "Vietnamesischer Dong(1978–1985)", - "displayName-count-one": "Vietnamesischer Dong(1978–1985)", - "displayName-count-other": "Vietnamesische Dong(1978–1985)", - "symbol": "VNN" - }, - "VUV": { - "displayName": "Vanuatu-Vatu", - "displayName-count-one": "Vanuatu-Vatu", - "displayName-count-other": "Vanuatu-Vatu", - "symbol": "VUV" - }, - "WST": { - "displayName": "Samoanischer Tala", - "displayName-count-one": "Samoanischer Tala", - "displayName-count-other": "Samoanische Tala", - "symbol": "WST" - }, - "XAF": { - "displayName": "CFA-Franc (BEAC)", - "displayName-count-one": "CFA-Franc (BEAC)", - "displayName-count-other": "CFA-Franc (BEAC)", - "symbol": "FCFA" - }, - "XAG": { - "displayName": "Unze Silber", - "displayName-count-one": "Unze Silber", - "displayName-count-other": "Unzen Silber", - "symbol": "XAG" - }, - "XAU": { - "displayName": "Unze Gold", - "displayName-count-one": "Unze Gold", - "displayName-count-other": "Unzen Gold", - "symbol": "XAU" - }, - "XBA": { - "displayName": "Europäische Rechnungseinheit", - "displayName-count-one": "Europäische Rechnungseinheiten", - "displayName-count-other": "Europäische Rechnungseinheiten", - "symbol": "XBA" - }, - "XBB": { - "displayName": "Europäische Währungseinheit (XBB)", - "displayName-count-one": "Europäische Währungseinheiten (XBB)", - "displayName-count-other": "Europäische Währungseinheiten (XBB)", - "symbol": "XBB" - }, - "XBC": { - "displayName": "Europäische Rechnungseinheit (XBC)", - "displayName-count-one": "Europäische Rechnungseinheiten (XBC)", - "displayName-count-other": "Europäische Rechnungseinheiten (XBC)", - "symbol": "XBC" - }, - "XBD": { - "displayName": "Europäische Rechnungseinheit (XBD)", - "displayName-count-one": "Europäische Rechnungseinheiten (XBD)", - "displayName-count-other": "Europäische Rechnungseinheiten (XBD)", - "symbol": "XBD" - }, - "XCD": { - "displayName": "Ostkaribischer Dollar", - "displayName-count-one": "Ostkaribischer Dollar", - "displayName-count-other": "Ostkaribische Dollar", - "symbol": "EC$", - "symbol-alt-narrow": "$" - }, - "XDR": { - "displayName": "Sonderziehungsrechte", - "displayName-count-one": "Sonderziehungsrechte", - "displayName-count-other": "Sonderziehungsrechte", - "symbol": "XDR" - }, - "XEU": { - "displayName": "Europäische Währungseinheit (XEU)", - "displayName-count-one": "Europäische Währungseinheiten (XEU)", - "displayName-count-other": "Europäische Währungseinheiten (XEU)", - "symbol": "XEU" - }, - "XFO": { - "displayName": "Französischer Gold-Franc", - "displayName-count-one": "Französische Gold-Franc", - "displayName-count-other": "Französische Gold-Franc", - "symbol": "XFO" - }, - "XFU": { - "displayName": "Französischer UIC-Franc", - "displayName-count-one": "Französische UIC-Franc", - "displayName-count-other": "Französische UIC-Franc", - "symbol": "XFU" - }, - "XOF": { - "displayName": "CFA-Franc (BCEAO)", - "displayName-count-one": "CFA-Franc (BCEAO)", - "displayName-count-other": "CFA-Francs (BCEAO)", - "symbol": "CFA" - }, - "XPD": { - "displayName": "Unze Palladium", - "displayName-count-one": "Unze Palladium", - "displayName-count-other": "Unzen Palladium", - "symbol": "XPD" - }, - "XPF": { - "displayName": "CFP-Franc", - "displayName-count-one": "CFP-Franc", - "displayName-count-other": "CFP-Franc", - "symbol": "CFPF" - }, - "XPT": { - "displayName": "Unze Platin", - "displayName-count-one": "Unze Platin", - "displayName-count-other": "Unzen Platin", - "symbol": "XPT" - }, - "XRE": { - "displayName": "RINET Funds", - "displayName-count-one": "RINET Funds", - "displayName-count-other": "RINET Funds", - "symbol": "XRE" - }, - "XSU": { - "displayName": "SUCRE", - "displayName-count-one": "SUCRE", - "displayName-count-other": "SUCRE", - "symbol": "XSU" - }, - "XTS": { - "displayName": "Testwährung", - "displayName-count-one": "Testwährung", - "displayName-count-other": "Testwährung", - "symbol": "XTS" - }, - "XUA": { - "displayName": "Rechnungseinheit der AfEB", - "displayName-count-one": "Rechnungseinheit der AfEB", - "displayName-count-other": "Rechnungseinheiten der AfEB", - "symbol": "XUA" - }, - "XXX": { - "displayName": "Unbekannte Währung", - "displayName-count-one": "(unbekannte Währung)", - "displayName-count-other": "(unbekannte Währung)", - "symbol": "XXX" - }, - "YDD": { - "displayName": "Jemen-Dinar", - "displayName-count-one": "Jemen-Dinar", - "displayName-count-other": "Jemen-Dinar", - "symbol": "YDD" - }, - "YER": { - "displayName": "Jemen-Rial", - "displayName-count-one": "Jemen-Rial", - "displayName-count-other": "Jemen-Rial", - "symbol": "YER" - }, - "YUD": { - "displayName": "Jugoslawischer Dinar (1966–1990)", - "displayName-count-one": "Jugoslawischer Dinar (1966–1990)", - "displayName-count-other": "Jugoslawische Dinar (1966–1990)", - "symbol": "YUD" - }, - "YUM": { - "displayName": "Jugoslawischer Neuer Dinar (1994–2002)", - "displayName-count-one": "Jugoslawischer Neuer Dinar (1994–2002)", - "displayName-count-other": "Jugoslawische Neue Dinar (1994–2002)", - "symbol": "YUM" - }, - "YUN": { - "displayName": "Jugoslawischer Dinar (konvertibel)", - "displayName-count-one": "Jugoslawische Dinar (konvertibel)", - "displayName-count-other": "Jugoslawische Dinar (konvertibel)", - "symbol": "YUN" - }, - "YUR": { - "displayName": "Jugoslawischer reformierter Dinar (1992–1993)", - "displayName-count-one": "Jugoslawischer reformierter Dinar (1992–1993)", - "displayName-count-other": "Jugoslawische reformierte Dinar (1992–1993)", - "symbol": "YUR" - }, - "ZAL": { - "displayName": "Südafrikanischer Rand (Finanz)", - "displayName-count-one": "Südafrikanischer Rand (Finanz)", - "displayName-count-other": "Südafrikanischer Rand (Finanz)", - "symbol": "ZAL" - }, - "ZAR": { - "displayName": "Südafrikanischer Rand", - "displayName-count-one": "Südafrikanischer Rand", - "displayName-count-other": "Südafrikanische Rand", - "symbol": "ZAR", - "symbol-alt-narrow": "R" - }, - "ZMK": { - "displayName": "Kwacha (1968–2012)", - "displayName-count-one": "Kwacha (1968–2012)", - "displayName-count-other": "Kwacha (1968–2012)", - "symbol": "ZMK" - }, - "ZMW": { - "displayName": "Kwacha", - "displayName-count-one": "Kwacha", - "displayName-count-other": "Kwacha", - "symbol": "ZMW", - "symbol-alt-narrow": "K" - }, - "ZRN": { - "displayName": "Zaire-Neuer Zaïre (1993–1998)", - "displayName-count-one": "Zaire-Neuer Zaïre (1993–1998)", - "displayName-count-other": "Zaire-Neue Zaïre (1993–1998)", - "symbol": "ZRN" - }, - "ZRZ": { - "displayName": "Zaire-Zaïre (1971–1993)", - "displayName-count-one": "Zaire-Zaïre (1971–1993)", - "displayName-count-other": "Zaire-Zaïre (1971–1993)", - "symbol": "ZRZ" - }, - "ZWD": { - "displayName": "Simbabwe-Dollar (1980–2008)", - "displayName-count-one": "Simbabwe-Dollar (1980–2008)", - "displayName-count-other": "Simbabwe-Dollar (1980–2008)", - "symbol": "ZWD" + "currencyFormats-numberSystem-latn": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZWL": { - "displayName": "Simbabwe-Dollar (2009)", - "displayName-count-one": "Simbabwe-Dollar (2009)", - "displayName-count-other": "Simbabwe-Dollar (2009)", - "symbol": "ZWL" + "standard": "#,##0.00 ¤", + "accounting": "#,##0.00 ¤", + "short": { + "standard": { + "1000-count-one": "0 Tsd'.' ¤", + "1000-count-other": "0 Tsd'.' ¤", + "10000-count-one": "00 Tsd'.' ¤", + "10000-count-other": "00 Tsd'.' ¤", + "100000-count-one": "000 Tsd'.' ¤", + "100000-count-other": "000 Tsd'.' ¤", + "1000000-count-one": "0 Mio'.' ¤", + "1000000-count-other": "0 Mio'.' ¤", + "10000000-count-one": "00 Mio'.' ¤", + "10000000-count-other": "00 Mio'.' ¤", + "100000000-count-one": "000 Mio'.' ¤", + "100000000-count-other": "000 Mio'.' ¤", + "1000000000-count-one": "0 Mrd'.' ¤", + "1000000000-count-other": "0 Mrd'.' ¤", + "10000000000-count-one": "00 Mrd'.' ¤", + "10000000000-count-other": "00 Mrd'.' ¤", + "100000000000-count-one": "000 Mrd'.' ¤", + "100000000000-count-other": "000 Mrd'.' ¤", + "1000000000000-count-one": "0 Bio'.' ¤", + "1000000000000-count-other": "0 Bio'.' ¤", + "10000000000000-count-one": "00 Bio'.' ¤", + "10000000000000-count-other": "00 Bio'.' ¤", + "100000000000000-count-one": "000 Bio'.' ¤", + "100000000000000-count-other": "000 Bio'.' ¤" + } }, - "ZWR": { - "displayName": "Simbabwe-Dollar (2008)", - "displayName-count-one": "Simbabwe-Dollar (2008)", - "displayName-count-other": "Simbabwe-Dollar (2008)", - "symbol": "ZWR" + "unitPattern-count-one": "{0} {1}", + "unitPattern-count-other": "{0} {1}" + }, + "miscPatterns-numberSystem-latn": { + "atLeast": "{0}+", + "range": "{0}–{1}" + }, + "minimalPairs": { + "pluralMinimalPairs": "{0} Tag", + "pluralMinimalPairs": "{0} Tage", + "other": "{0}. Abzweigung nach rechts nehmen" + }, + "currencies": { + "ADP": { + "displayName": "Andorranische Pesete", + "displayName-count-one": "Andorranische Pesete", + "displayName-count-other": "Andorranische Peseten", + "symbol": "ADP" + }, + "AED": { + "displayName": "VAE-Dirham", + "displayName-count-one": "VAE-Dirham", + "displayName-count-other": "VAE-Dirham", + "symbol": "AED" + }, + "AFA": { + "displayName": "Afghanische Afghani (1927–2002)", + "displayName-count-one": "Afghanische Afghani (1927–2002)", + "displayName-count-other": "Afghanische Afghani (1927–2002)", + "symbol": "AFA" + }, + "AFN": { + "displayName": "Afghanischer Afghani", + "displayName-count-one": "Afghanischer Afghani", + "displayName-count-other": "Afghanische Afghani", + "symbol": "AFN" + }, + "ALK": { + "displayName": "Albanischer Lek (1946–1965)", + "displayName-count-one": "Albanischer Lek (1946–1965)", + "displayName-count-other": "Albanische Lek (1946–1965)" + }, + "ALL": { + "displayName": "Albanischer Lek", + "displayName-count-one": "Albanischer Lek", + "displayName-count-other": "Albanische Lek", + "symbol": "ALL" + }, + "AMD": { + "displayName": "Armenischer Dram", + "displayName-count-one": "Armenischer Dram", + "displayName-count-other": "Armenische Dram", + "symbol": "AMD" + }, + "ANG": { + "displayName": "Niederländische-Antillen-Gulden", + "displayName-count-one": "Niederländische-Antillen-Gulden", + "displayName-count-other": "Niederländische-Antillen-Gulden", + "symbol": "ANG" + }, + "AOA": { + "displayName": "Angolanischer Kwanza", + "displayName-count-one": "Angolanischer Kwanza", + "displayName-count-other": "Angolanische Kwanza", + "symbol": "AOA", + "symbol-alt-narrow": "Kz" + }, + "AOK": { + "displayName": "Angolanischer Kwanza (1977–1990)", + "displayName-count-one": "Angolanischer Kwanza (1977–1990)", + "displayName-count-other": "Angolanische Kwanza (1977–1990)", + "symbol": "AOK" + }, + "AON": { + "displayName": "Angolanischer Neuer Kwanza (1990–2000)", + "displayName-count-one": "Angolanischer Neuer Kwanza (1990–2000)", + "displayName-count-other": "Angolanische Neue Kwanza (1990–2000)", + "symbol": "AON" + }, + "AOR": { + "displayName": "Angolanischer Kwanza Reajustado (1995–1999)", + "displayName-count-one": "Angolanischer Kwanza Reajustado (1995–1999)", + "displayName-count-other": "Angolanische Kwanza Reajustado (1995–1999)", + "symbol": "AOR" + }, + "ARA": { + "displayName": "Argentinischer Austral", + "displayName-count-one": "Argentinischer Austral", + "displayName-count-other": "Argentinische Austral", + "symbol": "ARA" + }, + "ARL": { + "displayName": "Argentinischer Peso Ley (1970–1983)", + "displayName-count-one": "Argentinischer Peso Ley (1970–1983)", + "displayName-count-other": "Argentinische Pesos Ley (1970–1983)", + "symbol": "ARL" + }, + "ARM": { + "displayName": "Argentinischer Peso (1881–1970)", + "displayName-count-one": "Argentinischer Peso (1881–1970)", + "displayName-count-other": "Argentinische Pesos (1881–1970)", + "symbol": "ARM" + }, + "ARP": { + "displayName": "Argentinischer Peso (1983–1985)", + "displayName-count-one": "Argentinischer Peso (1983–1985)", + "displayName-count-other": "Argentinische Peso (1983–1985)", + "symbol": "ARP" + }, + "ARS": { + "displayName": "Argentinischer Peso", + "displayName-count-one": "Argentinischer Peso", + "displayName-count-other": "Argentinische Pesos", + "symbol": "ARS", + "symbol-alt-narrow": "$" + }, + "ATS": { + "displayName": "Österreichischer Schilling", + "displayName-count-one": "Österreichischer Schilling", + "displayName-count-other": "Österreichische Schilling", + "symbol": "öS" + }, + "AUD": { + "displayName": "Australischer Dollar", + "displayName-count-one": "Australischer Dollar", + "displayName-count-other": "Australische Dollar", + "symbol": "AU$", + "symbol-alt-narrow": "$" + }, + "AWG": { + "displayName": "Aruba-Florin", + "displayName-count-one": "Aruba-Florin", + "displayName-count-other": "Aruba-Florin", + "symbol": "AWG" + }, + "AZM": { + "displayName": "Aserbaidschan-Manat (1993–2006)", + "displayName-count-one": "Aserbaidschan-Manat (1993–2006)", + "displayName-count-other": "Aserbaidschan-Manat (1993–2006)", + "symbol": "AZM" + }, + "AZN": { + "displayName": "Aserbaidschan-Manat", + "displayName-count-one": "Aserbaidschan-Manat", + "displayName-count-other": "Aserbaidschan-Manat", + "symbol": "AZN" + }, + "BAD": { + "displayName": "Bosnien und Herzegowina Dinar (1992–1994)", + "displayName-count-one": "Bosnien und Herzegowina Dinar (1992–1994)", + "displayName-count-other": "Bosnien und Herzegowina Dinar (1992–1994)", + "symbol": "BAD" + }, + "BAM": { + "displayName": "Bosnien und Herzegowina Konvertierbare Mark", + "displayName-count-one": "Bosnien und Herzegowina Konvertierbare Mark", + "displayName-count-other": "Bosnien und Herzegowina Konvertierbare Mark", + "symbol": "BAM", + "symbol-alt-narrow": "KM" + }, + "BAN": { + "displayName": "Bosnien und Herzegowina Neuer Dinar (1994–1997)", + "displayName-count-one": "Bosnien und Herzegowina Neuer Dinar (1994–1997)", + "displayName-count-other": "Bosnien und Herzegowina Neue Dinar (1994–1997)", + "symbol": "BAN" + }, + "BBD": { + "displayName": "Barbados-Dollar", + "displayName-count-one": "Barbados-Dollar", + "displayName-count-other": "Barbados-Dollar", + "symbol": "BBD", + "symbol-alt-narrow": "$" + }, + "BDT": { + "displayName": "Bangladesch-Taka", + "displayName-count-one": "Bangladesch-Taka", + "displayName-count-other": "Bangladesch-Taka", + "symbol": "BDT", + "symbol-alt-narrow": "৳" + }, + "BEC": { + "displayName": "Belgischer Franc (konvertibel)", + "displayName-count-one": "Belgischer Franc (konvertibel)", + "displayName-count-other": "Belgische Franc (konvertibel)", + "symbol": "BEC" + }, + "BEF": { + "displayName": "Belgischer Franc", + "displayName-count-one": "Belgischer Franc", + "displayName-count-other": "Belgische Franc", + "symbol": "BEF" + }, + "BEL": { + "displayName": "Belgischer Finanz-Franc", + "displayName-count-one": "Belgischer Finanz-Franc", + "displayName-count-other": "Belgische Finanz-Franc", + "symbol": "BEL" + }, + "BGL": { + "displayName": "Bulgarische Lew (1962–1999)", + "displayName-count-one": "Bulgarische Lew (1962–1999)", + "displayName-count-other": "Bulgarische Lew (1962–1999)", + "symbol": "BGL" + }, + "BGM": { + "displayName": "Bulgarischer Lew (1952–1962)", + "displayName-count-one": "Bulgarischer Lew (1952–1962)", + "displayName-count-other": "Bulgarische Lew (1952–1962)", + "symbol": "BGK" + }, + "BGN": { + "displayName": "Bulgarischer Lew", + "displayName-count-one": "Bulgarischer Lew", + "displayName-count-other": "Bulgarische Lew", + "symbol": "BGN" + }, + "BGO": { + "displayName": "Bulgarischer Lew (1879–1952)", + "displayName-count-one": "Bulgarischer Lew (1879–1952)", + "displayName-count-other": "Bulgarische Lew (1879–1952)", + "symbol": "BGJ" + }, + "BHD": { + "displayName": "Bahrain-Dinar", + "displayName-count-one": "Bahrain-Dinar", + "displayName-count-other": "Bahrain-Dinar", + "symbol": "BHD" + }, + "BIF": { + "displayName": "Burundi-Franc", + "displayName-count-one": "Burundi-Franc", + "displayName-count-other": "Burundi-Francs", + "symbol": "BIF" + }, + "BMD": { + "displayName": "Bermuda-Dollar", + "displayName-count-one": "Bermuda-Dollar", + "displayName-count-other": "Bermuda-Dollar", + "symbol": "BMD", + "symbol-alt-narrow": "$" + }, + "BND": { + "displayName": "Brunei-Dollar", + "displayName-count-one": "Brunei-Dollar", + "displayName-count-other": "Brunei-Dollar", + "symbol": "BND", + "symbol-alt-narrow": "$" + }, + "BOB": { + "displayName": "Bolivanischer Boliviano", + "displayName-count-one": "Bolivanischer Boliviano", + "displayName-count-other": "Bolivianische Bolivianos", + "symbol": "BOB", + "symbol-alt-narrow": "Bs" + }, + "BOL": { + "displayName": "Bolivianischer Boliviano (1863–1963)", + "displayName-count-one": "Bolivianischer Boliviano (1863–1963)", + "displayName-count-other": "Bolivianische Bolivianos (1863–1963)", + "symbol": "BOL" + }, + "BOP": { + "displayName": "Bolivianischer Peso", + "displayName-count-one": "Bolivianischer Peso", + "displayName-count-other": "Bolivianische Peso", + "symbol": "BOP" + }, + "BOV": { + "displayName": "Boliviansiche Mvdol", + "displayName-count-one": "Boliviansiche Mvdol", + "displayName-count-other": "Bolivianische Mvdol", + "symbol": "BOV" + }, + "BRB": { + "displayName": "Brasilianischer Cruzeiro Novo (1967–1986)", + "displayName-count-one": "Brasilianischer Cruzeiro Novo (1967–1986)", + "displayName-count-other": "Brasilianische Cruzeiro Novo (1967–1986)", + "symbol": "BRB" + }, + "BRC": { + "displayName": "Brasilianischer Cruzado (1986–1989)", + "displayName-count-one": "Brasilianischer Cruzado (1986–1989)", + "displayName-count-other": "Brasilianische Cruzado (1986–1989)", + "symbol": "BRC" + }, + "BRE": { + "displayName": "Brasilianischer Cruzeiro (1990–1993)", + "displayName-count-one": "Brasilianischer Cruzeiro (1990–1993)", + "displayName-count-other": "Brasilianische Cruzeiro (1990–1993)", + "symbol": "BRE" + }, + "BRL": { + "displayName": "Brasilianischer Real", + "displayName-count-one": "Brasilianischer Real", + "displayName-count-other": "Brasilianische Real", + "symbol": "R$", + "symbol-alt-narrow": "R$" + }, + "BRN": { + "displayName": "Brasilianischer Cruzado Novo (1989–1990)", + "displayName-count-one": "Brasilianischer Cruzado Novo (1989–1990)", + "displayName-count-other": "Brasilianische Cruzado Novo (1989–1990)", + "symbol": "BRN" + }, + "BRR": { + "displayName": "Brasilianischer Cruzeiro (1993–1994)", + "displayName-count-one": "Brasilianischer Cruzeiro (1993–1994)", + "displayName-count-other": "Brasilianische Cruzeiro (1993–1994)", + "symbol": "BRR" + }, + "BRZ": { + "displayName": "Brasilianischer Cruzeiro (1942–1967)", + "displayName-count-one": "Brasilianischer Cruzeiro (1942–1967)", + "displayName-count-other": "Brasilianischer Cruzeiro (1942–1967)", + "symbol": "BRZ" + }, + "BSD": { + "displayName": "Bahamas-Dollar", + "displayName-count-one": "Bahamas-Dollar", + "displayName-count-other": "Bahamas-Dollar", + "symbol": "BSD", + "symbol-alt-narrow": "$" + }, + "BTN": { + "displayName": "Bhutan-Ngultrum", + "displayName-count-one": "Bhutan-Ngultrum", + "displayName-count-other": "Bhutan-Ngultrum", + "symbol": "BTN" + }, + "BUK": { + "displayName": "Birmanischer Kyat", + "displayName-count-one": "Birmanischer Kyat", + "displayName-count-other": "Birmanische Kyat", + "symbol": "BUK" + }, + "BWP": { + "displayName": "Botswanischer Pula", + "displayName-count-one": "Botswanischer Pula", + "displayName-count-other": "Botswanische Pula", + "symbol": "BWP", + "symbol-alt-narrow": "P" + }, + "BYB": { + "displayName": "Belarus-Rubel (1994–1999)", + "displayName-count-one": "Belarus-Rubel (1994–1999)", + "displayName-count-other": "Belarus-Rubel (1994–1999)", + "symbol": "BYB" + }, + "BYN": { + "displayName": "Weißrussischer Rubel", + "displayName-count-one": "Weißrussischer Rubel", + "displayName-count-other": "Weißrussische Rubel", + "symbol": "BYN", + "symbol-alt-narrow": "р." + }, + "BYR": { + "displayName": "Weißrussischer Rubel (2000–2016)", + "displayName-count-one": "Weißrussischer Rubel (2000–2016)", + "displayName-count-other": "Weißrussische Rubel (2000–2016)", + "symbol": "BYR" + }, + "BZD": { + "displayName": "Belize-Dollar", + "displayName-count-one": "Belize-Dollar", + "displayName-count-other": "Belize-Dollar", + "symbol": "BZD", + "symbol-alt-narrow": "$" + }, + "CAD": { + "displayName": "Kanadischer Dollar", + "displayName-count-one": "Kanadischer Dollar", + "displayName-count-other": "Kanadische Dollar", + "symbol": "CA$", + "symbol-alt-narrow": "$" + }, + "CDF": { + "displayName": "Kongo-Franc", + "displayName-count-one": "Kongo-Franc", + "displayName-count-other": "Kongo-Francs", + "symbol": "CDF" + }, + "CHE": { + "displayName": "WIR-Euro", + "displayName-count-one": "WIR-Euro", + "displayName-count-other": "WIR-Euro", + "symbol": "CHE" + }, + "CHF": { + "displayName": "Schweizer Franken", + "displayName-count-one": "Schweizer Franken", + "displayName-count-other": "Schweizer Franken", + "symbol": "CHF" + }, + "CHW": { + "displayName": "WIR Franken", + "displayName-count-one": "WIR Franken", + "displayName-count-other": "WIR Franken", + "symbol": "CHW" + }, + "CLE": { + "displayName": "Chilenischer Escudo", + "displayName-count-one": "Chilenischer Escudo", + "displayName-count-other": "Chilenische Escudo", + "symbol": "CLE" + }, + "CLF": { + "displayName": "Chilenische Unidades de Fomento", + "displayName-count-one": "Chilenische Unidades de Fomento", + "displayName-count-other": "Chilenische Unidades de Fomento", + "symbol": "CLF" + }, + "CLP": { + "displayName": "Chilenischer Peso", + "displayName-count-one": "Chilenischer Peso", + "displayName-count-other": "Chilenische Pesos", + "symbol": "CLP", + "symbol-alt-narrow": "$" + }, + "CNX": { + "displayName": "Dollar der Chinesischen Volksbank", + "displayName-count-one": "Dollar der Chinesischen Volksbank", + "displayName-count-other": "Dollar der Chinesischen Volksbank", + "symbol": "CNX" + }, + "CNY": { + "displayName": "Renminbi Yuan", + "displayName-count-one": "Chinesischer Yuan", + "displayName-count-other": "Renminbi Yuan", + "symbol": "CN¥", + "symbol-alt-narrow": "¥" + }, + "COP": { + "displayName": "Kolumbianischer Peso", + "displayName-count-one": "Kolumbianischer Peso", + "displayName-count-other": "Kolumbianische Pesos", + "symbol": "COP", + "symbol-alt-narrow": "$" + }, + "COU": { + "displayName": "Kolumbianische Unidades de valor real", + "displayName-count-one": "Kolumbianische Unidad de valor real", + "displayName-count-other": "Kolumbianische Unidades de valor real", + "symbol": "COU" + }, + "CRC": { + "displayName": "Costa-Rica-Colón", + "displayName-count-one": "Costa-Rica-Colón", + "displayName-count-other": "Costa-Rica-Colón", + "symbol": "CRC", + "symbol-alt-narrow": "₡" + }, + "CSD": { + "displayName": "Serbischer Dinar (2002–2006)", + "displayName-count-one": "Serbischer Dinar (2002–2006)", + "displayName-count-other": "Serbische Dinar (2002–2006)", + "symbol": "CSD" + }, + "CSK": { + "displayName": "Tschechoslowakische Krone", + "displayName-count-one": "Tschechoslowakische Kronen", + "displayName-count-other": "Tschechoslowakische Kronen", + "symbol": "CSK" + }, + "CUC": { + "displayName": "Kubanischer Peso (konvertibel)", + "displayName-count-one": "Kubanischer Peso (konvertibel)", + "displayName-count-other": "Kubanische Pesos (konvertibel)", + "symbol": "CUC", + "symbol-alt-narrow": "Cub$" + }, + "CUP": { + "displayName": "Kubanischer Peso", + "displayName-count-one": "Kubanischer Peso", + "displayName-count-other": "Kubanische Pesos", + "symbol": "CUP", + "symbol-alt-narrow": "$" + }, + "CVE": { + "displayName": "Cabo-Verde-Escudo", + "displayName-count-one": "Cabo-Verde-Escudo", + "displayName-count-other": "Cabo-Verde-Escudos", + "symbol": "CVE" + }, + "CYP": { + "displayName": "Zypern-Pfund", + "displayName-count-one": "Zypern Pfund", + "displayName-count-other": "Zypern Pfund", + "symbol": "CYP" + }, + "CZK": { + "displayName": "Tschechische Krone", + "displayName-count-one": "Tschechische Krone", + "displayName-count-other": "Tschechische Kronen", + "symbol": "CZK", + "symbol-alt-narrow": "Kč" + }, + "DDM": { + "displayName": "Mark der DDR", + "displayName-count-one": "Mark der DDR", + "displayName-count-other": "Mark der DDR", + "symbol": "DDM" + }, + "DEM": { + "displayName": "Deutsche Mark", + "displayName-count-one": "Deutsche Mark", + "displayName-count-other": "Deutsche Mark", + "symbol": "DM" + }, + "DJF": { + "displayName": "Dschibuti-Franc", + "displayName-count-one": "Dschibuti-Franc", + "displayName-count-other": "Dschibuti-Franc", + "symbol": "DJF" + }, + "DKK": { + "displayName": "Dänische Krone", + "displayName-count-one": "Dänische Krone", + "displayName-count-other": "Dänische Kronen", + "symbol": "DKK", + "symbol-alt-narrow": "kr" + }, + "DOP": { + "displayName": "Dominikanischer Peso", + "displayName-count-one": "Dominikanischer Peso", + "displayName-count-other": "Dominikanische Pesos", + "symbol": "DOP", + "symbol-alt-narrow": "$" + }, + "DZD": { + "displayName": "Algerischer Dinar", + "displayName-count-one": "Algerischer Dinar", + "displayName-count-other": "Algerische Dinar", + "symbol": "DZD" + }, + "ECS": { + "displayName": "Ecuadorianischer Sucre", + "displayName-count-one": "Ecuadorianischer Sucre", + "displayName-count-other": "Ecuadorianische Sucre", + "symbol": "ECS" + }, + "ECV": { + "displayName": "Verrechnungseinheit für Ecuador", + "displayName-count-one": "Verrechnungseinheiten für Ecuador", + "displayName-count-other": "Verrechnungseinheiten für Ecuador", + "symbol": "ECV" + }, + "EEK": { + "displayName": "Estnische Krone", + "displayName-count-one": "Estnische Krone", + "displayName-count-other": "Estnische Kronen", + "symbol": "EEK" + }, + "EGP": { + "displayName": "Ägyptisches Pfund", + "displayName-count-one": "Ägyptisches Pfund", + "displayName-count-other": "Ägyptische Pfund", + "symbol": "EGP", + "symbol-alt-narrow": "E£" + }, + "ERN": { + "displayName": "Eritreischer Nakfa", + "displayName-count-one": "Eritreischer Nakfa", + "displayName-count-other": "Eritreische Nakfa", + "symbol": "ERN" + }, + "ESA": { + "displayName": "Spanische Peseta (A–Konten)", + "displayName-count-one": "Spanische Peseta (A–Konten)", + "displayName-count-other": "Spanische Peseten (A–Konten)", + "symbol": "ESA" + }, + "ESB": { + "displayName": "Spanische Peseta (konvertibel)", + "displayName-count-one": "Spanische Peseta (konvertibel)", + "displayName-count-other": "Spanische Peseten (konvertibel)", + "symbol": "ESB" + }, + "ESP": { + "displayName": "Spanische Peseta", + "displayName-count-one": "Spanische Peseta", + "displayName-count-other": "Spanische Peseten", + "symbol": "ESP", + "symbol-alt-narrow": "₧" + }, + "ETB": { + "displayName": "Äthiopischer Birr", + "displayName-count-one": "Äthiopischer Birr", + "displayName-count-other": "Äthiopische Birr", + "symbol": "ETB" + }, + "EUR": { + "displayName": "Euro", + "displayName-count-one": "Euro", + "displayName-count-other": "Euro", + "symbol": "€", + "symbol-alt-narrow": "€" + }, + "FIM": { + "displayName": "Finnische Mark", + "displayName-count-one": "Finnische Mark", + "displayName-count-other": "Finnische Mark", + "symbol": "FIM" + }, + "FJD": { + "displayName": "Fidschi-Dollar", + "displayName-count-one": "Fidschi-Dollar", + "displayName-count-other": "Fidschi-Dollar", + "symbol": "FJD", + "symbol-alt-narrow": "$" + }, + "FKP": { + "displayName": "Falkland-Pfund", + "displayName-count-one": "Falkland-Pfund", + "displayName-count-other": "Falkland-Pfund", + "symbol": "FKP", + "symbol-alt-narrow": "Fl£" + }, + "FRF": { + "displayName": "Französischer Franc", + "displayName-count-one": "Französischer Franc", + "displayName-count-other": "Französische Franc", + "symbol": "FRF" + }, + "GBP": { + "displayName": "Britisches Pfund", + "displayName-count-one": "Britisches Pfund", + "displayName-count-other": "Britische Pfund", + "symbol": "£", + "symbol-alt-narrow": "£" + }, + "GEK": { + "displayName": "Georgischer Kupon Larit", + "displayName-count-one": "Georgischer Kupon Larit", + "displayName-count-other": "Georgische Kupon Larit", + "symbol": "GEK" + }, + "GEL": { + "displayName": "Georgischer Lari", + "displayName-count-one": "Georgischer Lari", + "displayName-count-other": "Georgische Lari", + "symbol": "GEL", + "symbol-alt-narrow": "₾", + "symbol-alt-variant": "₾" + }, + "GHC": { + "displayName": "Ghanaischer Cedi (1979–2007)", + "displayName-count-one": "Ghanaischer Cedi (1979–2007)", + "displayName-count-other": "Ghanaische Cedi (1979–2007)", + "symbol": "GHC" + }, + "GHS": { + "displayName": "Ghanaischer Cedi", + "displayName-count-one": "Ghanaischer Cedi", + "displayName-count-other": "Ghanaische Cedi", + "symbol": "GHS" + }, + "GIP": { + "displayName": "Gibraltar-Pfund", + "displayName-count-one": "Gibraltar-Pfund", + "displayName-count-other": "Gibraltar Pfund", + "symbol": "GIP", + "symbol-alt-narrow": "£" + }, + "GMD": { + "displayName": "Gambia-Dalasi", + "displayName-count-one": "Gambia-Dalasi", + "displayName-count-other": "Gambia-Dalasi", + "symbol": "GMD" + }, + "GNF": { + "displayName": "Guinea-Franc", + "displayName-count-one": "Guinea-Franc", + "displayName-count-other": "Guinea-Franc", + "symbol": "GNF", + "symbol-alt-narrow": "F.G." + }, + "GNS": { + "displayName": "Guineischer Syli", + "displayName-count-one": "Guineischer Syli", + "displayName-count-other": "Guineische Syli", + "symbol": "GNS" + }, + "GQE": { + "displayName": "Äquatorialguinea-Ekwele", + "displayName-count-one": "Äquatorialguinea-Ekwele", + "displayName-count-other": "Äquatorialguinea-Ekwele", + "symbol": "GQE" + }, + "GRD": { + "displayName": "Griechische Drachme", + "displayName-count-one": "Griechische Drachme", + "displayName-count-other": "Griechische Drachmen", + "symbol": "GRD" + }, + "GTQ": { + "displayName": "Guatemaltekischer Quetzal", + "displayName-count-one": "Guatemaltekischer Quetzal", + "displayName-count-other": "Guatemaltekische Quetzales", + "symbol": "GTQ", + "symbol-alt-narrow": "Q" + }, + "GWE": { + "displayName": "Portugiesisch Guinea Escudo", + "displayName-count-one": "Portugiesisch Guinea Escudo", + "displayName-count-other": "Portugiesisch Guinea Escudo", + "symbol": "GWE" + }, + "GWP": { + "displayName": "Guinea-Bissau Peso", + "displayName-count-one": "Guinea-Bissau Peso", + "displayName-count-other": "Guinea-Bissau Pesos", + "symbol": "GWP" + }, + "GYD": { + "displayName": "Guyana-Dollar", + "displayName-count-one": "Guyana-Dollar", + "displayName-count-other": "Guyana-Dollar", + "symbol": "GYD", + "symbol-alt-narrow": "$" + }, + "HKD": { + "displayName": "Hongkong-Dollar", + "displayName-count-one": "Hongkong-Dollar", + "displayName-count-other": "Hongkong-Dollar", + "symbol": "HK$", + "symbol-alt-narrow": "$" + }, + "HNL": { + "displayName": "Honduras-Lempira", + "displayName-count-one": "Honduras-Lempira", + "displayName-count-other": "Honduras-Lempira", + "symbol": "HNL", + "symbol-alt-narrow": "L" + }, + "HRD": { + "displayName": "Kroatischer Dinar", + "displayName-count-one": "Kroatischer Dinar", + "displayName-count-other": "Kroatische Dinar", + "symbol": "HRD" + }, + "HRK": { + "displayName": "Kroatischer Kuna", + "displayName-count-one": "Kroatischer Kuna", + "displayName-count-other": "Kroatische Kuna", + "symbol": "HRK", + "symbol-alt-narrow": "kn" + }, + "HTG": { + "displayName": "Haitianische Gourde", + "displayName-count-one": "Haitianische Gourde", + "displayName-count-other": "Haitianische Gourdes", + "symbol": "HTG" + }, + "HUF": { + "displayName": "Ungarischer Forint", + "displayName-count-one": "Ungarischer Forint", + "displayName-count-other": "Ungarische Forint", + "symbol": "HUF", + "symbol-alt-narrow": "Ft" + }, + "IDR": { + "displayName": "Indonesische Rupiah", + "displayName-count-one": "Indonesische Rupiah", + "displayName-count-other": "Indonesische Rupiah", + "symbol": "IDR", + "symbol-alt-narrow": "Rp" + }, + "IEP": { + "displayName": "Irisches Pfund", + "displayName-count-one": "Irisches Pfund", + "displayName-count-other": "Irische Pfund", + "symbol": "IEP" + }, + "ILP": { + "displayName": "Israelisches Pfund", + "displayName-count-one": "Israelisches Pfund", + "displayName-count-other": "Israelische Pfund", + "symbol": "ILP" + }, + "ILR": { + "displayName": "Israelischer Schekel (1980–1985)", + "displayName-count-one": "Israelischer Schekel (1980–1985)", + "displayName-count-other": "Israelische Schekel (1980–1985)" + }, + "ILS": { + "displayName": "Israelischer Neuer Schekel", + "displayName-count-one": "Israelischer Neuer Schekel", + "displayName-count-other": "Israelische Neue Schekel", + "symbol": "₪", + "symbol-alt-narrow": "₪" + }, + "INR": { + "displayName": "Indische Rupie", + "displayName-count-one": "Indische Rupie", + "displayName-count-other": "Indische Rupien", + "symbol": "₹", + "symbol-alt-narrow": "₹" + }, + "IQD": { + "displayName": "Irakischer Dinar", + "displayName-count-one": "Irakischer Dinar", + "displayName-count-other": "Irakische Dinar", + "symbol": "IQD" + }, + "IRR": { + "displayName": "Iranischer Rial", + "displayName-count-one": "Iranischer Rial", + "displayName-count-other": "Iranische Rial", + "symbol": "IRR" + }, + "ISJ": { + "displayName": "Isländische Krone (1918–1981)", + "displayName-count-one": "Isländische Krone (1918–1981)", + "displayName-count-other": "Isländische Kronen (1918–1981)" + }, + "ISK": { + "displayName": "Isländische Krone", + "displayName-count-one": "Isländische Krone", + "displayName-count-other": "Isländische Kronen", + "symbol": "ISK", + "symbol-alt-narrow": "kr" + }, + "ITL": { + "displayName": "Italienische Lira", + "displayName-count-one": "Italienische Lira", + "displayName-count-other": "Italienische Lire", + "symbol": "ITL" + }, + "JMD": { + "displayName": "Jamaika-Dollar", + "displayName-count-one": "Jamaika-Dollar", + "displayName-count-other": "Jamaika-Dollar", + "symbol": "JMD", + "symbol-alt-narrow": "$" + }, + "JOD": { + "displayName": "Jordanischer Dinar", + "displayName-count-one": "Jordanischer Dinar", + "displayName-count-other": "Jordanische Dinar", + "symbol": "JOD" + }, + "JPY": { + "displayName": "Japanischer Yen", + "displayName-count-one": "Japanischer Yen", + "displayName-count-other": "Japanische Yen", + "symbol": "¥", + "symbol-alt-narrow": "¥" + }, + "KES": { + "displayName": "Kenia-Schilling", + "displayName-count-one": "Kenia-Schilling", + "displayName-count-other": "Kenia-Schilling", + "symbol": "KES" + }, + "KGS": { + "displayName": "Kirgisischer Som", + "displayName-count-one": "Kirgisischer Som", + "displayName-count-other": "Kirgisische Som", + "symbol": "KGS" + }, + "KHR": { + "displayName": "Kambodschanischer Riel", + "displayName-count-one": "Kambodschanischer Riel", + "displayName-count-other": "Kambodschanische Riel", + "symbol": "KHR", + "symbol-alt-narrow": "៛" + }, + "KMF": { + "displayName": "Komoren-Franc", + "displayName-count-one": "Komoren-Franc", + "displayName-count-other": "Komoren-Francs", + "symbol": "KMF", + "symbol-alt-narrow": "FC" + }, + "KPW": { + "displayName": "Nordkoreanischer Won", + "displayName-count-one": "Nordkoreanischer Won", + "displayName-count-other": "Nordkoreanische Won", + "symbol": "KPW", + "symbol-alt-narrow": "₩" + }, + "KRH": { + "displayName": "Südkoreanischer Hwan (1953–1962)", + "displayName-count-one": "Südkoreanischer Hwan (1953–1962)", + "displayName-count-other": "Südkoreanischer Hwan (1953–1962)", + "symbol": "KRH" + }, + "KRO": { + "displayName": "Südkoreanischer Won (1945–1953)", + "displayName-count-one": "Südkoreanischer Won (1945–1953)", + "displayName-count-other": "Südkoreanischer Won (1945–1953)", + "symbol": "KRO" + }, + "KRW": { + "displayName": "Südkoreanischer Won", + "displayName-count-one": "Südkoreanischer Won", + "displayName-count-other": "Südkoreanische Won", + "symbol": "₩", + "symbol-alt-narrow": "₩" + }, + "KWD": { + "displayName": "Kuwait-Dinar", + "displayName-count-one": "Kuwait-Dinar", + "displayName-count-other": "Kuwait-Dinar", + "symbol": "KWD" + }, + "KYD": { + "displayName": "Kaiman-Dollar", + "displayName-count-one": "Kaiman-Dollar", + "displayName-count-other": "Kaiman-Dollar", + "symbol": "KYD", + "symbol-alt-narrow": "$" + }, + "KZT": { + "displayName": "Kasachischer Tenge", + "displayName-count-one": "Kasachischer Tenge", + "displayName-count-other": "Kasachische Tenge", + "symbol": "KZT", + "symbol-alt-narrow": "₸" + }, + "LAK": { + "displayName": "Laotischer Kip", + "displayName-count-one": "Laotischer Kip", + "displayName-count-other": "Laotische Kip", + "symbol": "LAK", + "symbol-alt-narrow": "₭" + }, + "LBP": { + "displayName": "Libanesisches Pfund", + "displayName-count-one": "Libanesisches Pfund", + "displayName-count-other": "Libanesische Pfund", + "symbol": "LBP", + "symbol-alt-narrow": "L£" + }, + "LKR": { + "displayName": "Sri-Lanka-Rupie", + "displayName-count-one": "Sri-Lanka-Rupie", + "displayName-count-other": "Sri-Lanka-Rupien", + "symbol": "LKR", + "symbol-alt-narrow": "Rs" + }, + "LRD": { + "displayName": "Liberianischer Dollar", + "displayName-count-one": "Liberianischer Dollar", + "displayName-count-other": "Liberianische Dollar", + "symbol": "LRD", + "symbol-alt-narrow": "$" + }, + "LSL": { + "displayName": "Loti", + "displayName-count-one": "Loti", + "displayName-count-other": "Loti", + "symbol": "LSL" + }, + "LTL": { + "displayName": "Litauischer Litas", + "displayName-count-one": "Litauischer Litas", + "displayName-count-other": "Litauische Litas", + "symbol": "LTL", + "symbol-alt-narrow": "Lt" + }, + "LTT": { + "displayName": "Litauischer Talonas", + "displayName-count-one": "Litauische Talonas", + "displayName-count-other": "Litauische Talonas", + "symbol": "LTT" + }, + "LUC": { + "displayName": "Luxemburgischer Franc (konvertibel)", + "displayName-count-one": "Luxemburgische Franc (konvertibel)", + "displayName-count-other": "Luxemburgische Franc (konvertibel)", + "symbol": "LUC" + }, + "LUF": { + "displayName": "Luxemburgischer Franc", + "displayName-count-one": "Luxemburgische Franc", + "displayName-count-other": "Luxemburgische Franc", + "symbol": "LUF" + }, + "LUL": { + "displayName": "Luxemburgischer Finanz-Franc", + "displayName-count-one": "Luxemburgische Finanz-Franc", + "displayName-count-other": "Luxemburgische Finanz-Franc", + "symbol": "LUL" + }, + "LVL": { + "displayName": "Lettischer Lats", + "displayName-count-one": "Lettischer Lats", + "displayName-count-other": "Lettische Lats", + "symbol": "LVL", + "symbol-alt-narrow": "Ls" + }, + "LVR": { + "displayName": "Lettischer Rubel", + "displayName-count-one": "Lettische Rubel", + "displayName-count-other": "Lettische Rubel", + "symbol": "LVR" + }, + "LYD": { + "displayName": "Libyscher Dinar", + "displayName-count-one": "Libyscher Dinar", + "displayName-count-other": "Libysche Dinar", + "symbol": "LYD" + }, + "MAD": { + "displayName": "Marokkanischer Dirham", + "displayName-count-one": "Marokkanischer Dirham", + "displayName-count-other": "Marokkanische Dirham", + "symbol": "MAD" + }, + "MAF": { + "displayName": "Marokkanischer Franc", + "displayName-count-one": "Marokkanische Franc", + "displayName-count-other": "Marokkanische Franc", + "symbol": "MAF" + }, + "MCF": { + "displayName": "Monegassischer Franc", + "displayName-count-one": "Monegassischer Franc", + "displayName-count-other": "Monegassische Franc", + "symbol": "MCF" + }, + "MDC": { + "displayName": "Moldau-Cupon", + "displayName-count-one": "Moldau-Cupon", + "displayName-count-other": "Moldau-Cupon", + "symbol": "MDC" + }, + "MDL": { + "displayName": "Moldau-Leu", + "displayName-count-one": "Moldau-Leu", + "displayName-count-other": "Moldau-Leu", + "symbol": "MDL" + }, + "MGA": { + "displayName": "Madagaskar-Ariary", + "displayName-count-one": "Madagaskar-Ariary", + "displayName-count-other": "Madagaskar-Ariary", + "symbol": "MGA", + "symbol-alt-narrow": "Ar" + }, + "MGF": { + "displayName": "Madagaskar-Franc", + "displayName-count-one": "Madagaskar-Franc", + "displayName-count-other": "Madagaskar-Franc", + "symbol": "MGF" + }, + "MKD": { + "displayName": "Mazedonischer Denar", + "displayName-count-one": "Mazedonischer Denar", + "displayName-count-other": "Mazedonische Denari", + "symbol": "MKD" + }, + "MKN": { + "displayName": "Mazedonischer Denar (1992–1993)", + "displayName-count-one": "Mazedonischer Denar (1992–1993)", + "displayName-count-other": "Mazedonische Denar (1992–1993)", + "symbol": "MKN" + }, + "MLF": { + "displayName": "Malischer Franc", + "displayName-count-one": "Malische Franc", + "displayName-count-other": "Malische Franc", + "symbol": "MLF" + }, + "MMK": { + "displayName": "Myanmarischer Kyat", + "displayName-count-one": "Myanmarischer Kyat", + "displayName-count-other": "Myanmarische Kyat", + "symbol": "MMK", + "symbol-alt-narrow": "K" + }, + "MNT": { + "displayName": "Mongolischer Tögrög", + "displayName-count-one": "Mongolischer Tögrög", + "displayName-count-other": "Mongolische Tögrög", + "symbol": "MNT", + "symbol-alt-narrow": "₮" + }, + "MOP": { + "displayName": "Macao-Pataca", + "displayName-count-one": "Macao-Pataca", + "displayName-count-other": "Macao-Pataca", + "symbol": "MOP" + }, + "MRO": { + "displayName": "Mauretanischer Ouguiya", + "displayName-count-one": "Mauretanischer Ouguiya", + "displayName-count-other": "Mauretanische Ouguiya", + "symbol": "MRO" + }, + "MTL": { + "displayName": "Maltesische Lira", + "displayName-count-one": "Maltesische Lira", + "displayName-count-other": "Maltesische Lira", + "symbol": "MTL" + }, + "MTP": { + "displayName": "Maltesisches Pfund", + "displayName-count-one": "Maltesische Pfund", + "displayName-count-other": "Maltesische Pfund", + "symbol": "MTP" + }, + "MUR": { + "displayName": "Mauritius-Rupie", + "displayName-count-one": "Mauritius-Rupie", + "displayName-count-other": "Mauritius-Rupien", + "symbol": "MUR", + "symbol-alt-narrow": "Rs" + }, + "MVP": { + "displayName": "Malediven-Rupie (alt)", + "displayName-count-one": "Malediven-Rupie (alt)", + "displayName-count-other": "Malediven-Rupien (alt)" + }, + "MVR": { + "displayName": "Malediven-Rufiyaa", + "displayName-count-one": "Malediven-Rufiyaa", + "displayName-count-other": "Malediven-Rupien", + "symbol": "MVR" + }, + "MWK": { + "displayName": "Malawi-Kwacha", + "displayName-count-one": "Malawi-Kwacha", + "displayName-count-other": "Malawi-Kwacha", + "symbol": "MWK" + }, + "MXN": { + "displayName": "Mexikanischer Peso", + "displayName-count-one": "Mexikanischer Peso", + "displayName-count-other": "Mexikanische Pesos", + "symbol": "MX$", + "symbol-alt-narrow": "$" + }, + "MXP": { + "displayName": "Mexikanischer Silber-Peso (1861–1992)", + "displayName-count-one": "Mexikanische Silber-Peso (1861–1992)", + "displayName-count-other": "Mexikanische Silber-Pesos (1861–1992)", + "symbol": "MXP" + }, + "MXV": { + "displayName": "Mexicanischer Unidad de Inversion (UDI)", + "displayName-count-one": "Mexicanischer Unidad de Inversion (UDI)", + "displayName-count-other": "Mexikanische Unidad de Inversion (UDI)", + "symbol": "MXV" + }, + "MYR": { + "displayName": "Malaysischer Ringgit", + "displayName-count-one": "Malaysischer Ringgit", + "displayName-count-other": "Malaysische Ringgit", + "symbol": "MYR", + "symbol-alt-narrow": "RM" + }, + "MZE": { + "displayName": "Mosambikanischer Escudo", + "displayName-count-one": "Mozambikanische Escudo", + "displayName-count-other": "Mozambikanische Escudo", + "symbol": "MZE" + }, + "MZM": { + "displayName": "Mosambikanischer Metical (1980–2006)", + "displayName-count-one": "Mosambikanischer Metical (1980–2006)", + "displayName-count-other": "Mosambikanische Meticais (1980–2006)", + "symbol": "MZM" + }, + "MZN": { + "displayName": "Mosambikanischer Metical", + "displayName-count-one": "Mosambikanischer Metical", + "displayName-count-other": "Mosambikanische Meticais", + "symbol": "MZN" + }, + "NAD": { + "displayName": "Namibia-Dollar", + "displayName-count-one": "Namibia-Dollar", + "displayName-count-other": "Namibia-Dollar", + "symbol": "NAD", + "symbol-alt-narrow": "$" + }, + "NGN": { + "displayName": "Nigerianischer Naira", + "displayName-count-one": "Nigerianischer Naira", + "displayName-count-other": "Nigerianische Naira", + "symbol": "NGN", + "symbol-alt-narrow": "₦" + }, + "NIC": { + "displayName": "Nicaraguanischer Córdoba (1988–1991)", + "displayName-count-one": "Nicaraguanischer Córdoba (1988–1991)", + "displayName-count-other": "Nicaraguanische Córdoba (1988–1991)", + "symbol": "NIC" + }, + "NIO": { + "displayName": "Nicaragua-Córdoba", + "displayName-count-one": "Nicaragua-Córdoba", + "displayName-count-other": "Nicaragua-Córdobas", + "symbol": "NIO", + "symbol-alt-narrow": "C$" + }, + "NLG": { + "displayName": "Niederländischer Gulden", + "displayName-count-one": "Niederländischer Gulden", + "displayName-count-other": "Niederländische Gulden", + "symbol": "NLG" + }, + "NOK": { + "displayName": "Norwegische Krone", + "displayName-count-one": "Norwegische Krone", + "displayName-count-other": "Norwegische Kronen", + "symbol": "NOK", + "symbol-alt-narrow": "kr" + }, + "NPR": { + "displayName": "Nepalesische Rupie", + "displayName-count-one": "Nepalesische Rupie", + "displayName-count-other": "Nepalesische Rupien", + "symbol": "NPR", + "symbol-alt-narrow": "Rs" + }, + "NZD": { + "displayName": "Neuseeland-Dollar", + "displayName-count-one": "Neuseeland-Dollar", + "displayName-count-other": "Neuseeland-Dollar", + "symbol": "NZ$", + "symbol-alt-narrow": "$" + }, + "OMR": { + "displayName": "Omanischer Rial", + "displayName-count-one": "Omanischer Rial", + "displayName-count-other": "Omanische Rials", + "symbol": "OMR" + }, + "PAB": { + "displayName": "Panamaischer Balboa", + "displayName-count-one": "Panamaischer Balboa", + "displayName-count-other": "Panamaische Balboas", + "symbol": "PAB" + }, + "PEI": { + "displayName": "Peruanischer Inti", + "displayName-count-one": "Peruanische Inti", + "displayName-count-other": "Peruanische Inti", + "symbol": "PEI" + }, + "PEN": { + "displayName": "Peruanischer Sol", + "displayName-count-one": "Peruanischer Sol", + "displayName-count-other": "Peruanische Sol", + "symbol": "PEN" + }, + "PES": { + "displayName": "Peruanischer Sol (1863–1965)", + "displayName-count-one": "Peruanischer Sol (1863–1965)", + "displayName-count-other": "Peruanische Sol (1863–1965)", + "symbol": "PES" + }, + "PGK": { + "displayName": "Papua-Neuguineischer Kina", + "displayName-count-one": "Papua-Neuguineischer Kina", + "displayName-count-other": "Papua-Neuguineische Kina", + "symbol": "PGK" + }, + "PHP": { + "displayName": "Philippinischer Peso", + "displayName-count-one": "Philippinischer Peso", + "displayName-count-other": "Philippinische Pesos", + "symbol": "PHP", + "symbol-alt-narrow": "₱" + }, + "PKR": { + "displayName": "Pakistanische Rupie", + "displayName-count-one": "Pakistanische Rupie", + "displayName-count-other": "Pakistanische Rupien", + "symbol": "PKR", + "symbol-alt-narrow": "Rs" + }, + "PLN": { + "displayName": "Polnischer Złoty", + "displayName-count-one": "Polnischer Złoty", + "displayName-count-other": "Polnische Złoty", + "symbol": "PLN", + "symbol-alt-narrow": "zł" + }, + "PLZ": { + "displayName": "Polnischer Zloty (1950–1995)", + "displayName-count-one": "Polnischer Zloty (1950–1995)", + "displayName-count-other": "Polnische Zloty (1950–1995)", + "symbol": "PLZ" + }, + "PTE": { + "displayName": "Portugiesischer Escudo", + "displayName-count-one": "Portugiesische Escudo", + "displayName-count-other": "Portugiesische Escudo", + "symbol": "PTE" + }, + "PYG": { + "displayName": "Paraguayischer Guaraní", + "displayName-count-one": "Paraguayischer Guaraní", + "displayName-count-other": "Paraguayische Guaraníes", + "symbol": "PYG", + "symbol-alt-narrow": "₲" + }, + "QAR": { + "displayName": "Katar-Riyal", + "displayName-count-one": "Katar-Riyal", + "displayName-count-other": "Katar-Riyal", + "symbol": "QAR" + }, + "RHD": { + "displayName": "Rhodesischer Dollar", + "displayName-count-one": "Rhodesische Dollar", + "displayName-count-other": "Rhodesische Dollar", + "symbol": "RHD" + }, + "ROL": { + "displayName": "Rumänischer Leu (1952–2006)", + "displayName-count-one": "Rumänischer Leu (1952–2006)", + "displayName-count-other": "Rumänische Leu (1952–2006)", + "symbol": "ROL" + }, + "RON": { + "displayName": "Rumänischer Leu", + "displayName-count-one": "Rumänischer Leu", + "displayName-count-other": "Rumänische Leu", + "symbol": "RON", + "symbol-alt-narrow": "L" + }, + "RSD": { + "displayName": "Serbischer Dinar", + "displayName-count-one": "Serbischer Dinar", + "displayName-count-other": "Serbische Dinaren", + "symbol": "RSD" + }, + "RUB": { + "displayName": "Russischer Rubel", + "displayName-count-one": "Russischer Rubel", + "displayName-count-other": "Russische Rubel", + "symbol": "RUB", + "symbol-alt-narrow": "₽" + }, + "RUR": { + "displayName": "Russischer Rubel (1991–1998)", + "displayName-count-one": "Russischer Rubel (1991–1998)", + "displayName-count-other": "Russische Rubel (1991–1998)", + "symbol": "RUR", + "symbol-alt-narrow": "р." + }, + "RWF": { + "displayName": "Ruanda-Franc", + "displayName-count-one": "Ruanda-Franc", + "displayName-count-other": "Ruanda-Francs", + "symbol": "RWF", + "symbol-alt-narrow": "F.Rw" + }, + "SAR": { + "displayName": "Saudi-Rial", + "displayName-count-one": "Saudi-Rial", + "displayName-count-other": "Saudi-Rial", + "symbol": "SAR" + }, + "SBD": { + "displayName": "Salomonen-Dollar", + "displayName-count-one": "Salomonen-Dollar", + "displayName-count-other": "Salomonen-Dollar", + "symbol": "SBD", + "symbol-alt-narrow": "$" + }, + "SCR": { + "displayName": "Seychellen-Rupie", + "displayName-count-one": "Seychellen-Rupie", + "displayName-count-other": "Seychellen-Rupien", + "symbol": "SCR" + }, + "SDD": { + "displayName": "Sudanesischer Dinar (1992–2007)", + "displayName-count-one": "Sudanesischer Dinar (1992–2007)", + "displayName-count-other": "Sudanesische Dinar (1992–2007)", + "symbol": "SDD" + }, + "SDG": { + "displayName": "Sudanesisches Pfund", + "displayName-count-one": "Sudanesisches Pfund", + "displayName-count-other": "Sudanesische Pfund", + "symbol": "SDG" + }, + "SDP": { + "displayName": "Sudanesisches Pfund (1957–1998)", + "displayName-count-one": "Sudanesisches Pfund (1957–1998)", + "displayName-count-other": "Sudanesische Pfund (1957–1998)", + "symbol": "SDP" + }, + "SEK": { + "displayName": "Schwedische Krone", + "displayName-count-one": "Schwedische Krone", + "displayName-count-other": "Schwedische Kronen", + "symbol": "SEK", + "symbol-alt-narrow": "kr" + }, + "SGD": { + "displayName": "Singapur-Dollar", + "displayName-count-one": "Singapur-Dollar", + "displayName-count-other": "Singapur-Dollar", + "symbol": "SGD", + "symbol-alt-narrow": "$" + }, + "SHP": { + "displayName": "St. Helena-Pfund", + "displayName-count-one": "St. Helena-Pfund", + "displayName-count-other": "St. Helena-Pfund", + "symbol": "SHP", + "symbol-alt-narrow": "£" + }, + "SIT": { + "displayName": "Slowenischer Tolar", + "displayName-count-one": "Slowenischer Tolar", + "displayName-count-other": "Slowenische Tolar", + "symbol": "SIT" + }, + "SKK": { + "displayName": "Slowakische Krone", + "displayName-count-one": "Slowakische Kronen", + "displayName-count-other": "Slowakische Kronen", + "symbol": "SKK" + }, + "SLL": { + "displayName": "Sierra-leonischer Leone", + "displayName-count-one": "Sierra-leonischer Leone", + "displayName-count-other": "Sierra-leonische Leones", + "symbol": "SLL" + }, + "SOS": { + "displayName": "Somalia-Schilling", + "displayName-count-one": "Somalia-Schilling", + "displayName-count-other": "Somalia-Schilling", + "symbol": "SOS" + }, + "SRD": { + "displayName": "Suriname-Dollar", + "displayName-count-one": "Suriname-Dollar", + "displayName-count-other": "Suriname-Dollar", + "symbol": "SRD", + "symbol-alt-narrow": "$" + }, + "SRG": { + "displayName": "Suriname Gulden", + "displayName-count-one": "Suriname-Gulden", + "displayName-count-other": "Suriname-Gulden", + "symbol": "SRG" + }, + "SSP": { + "displayName": "Südsudanesisches Pfund", + "displayName-count-one": "Südsudanesisches Pfund", + "displayName-count-other": "Südsudanesische Pfund", + "symbol": "SSP", + "symbol-alt-narrow": "£" + }, + "STD": { + "displayName": "São-toméischer Dobra", + "displayName-count-one": "São-toméischer Dobra", + "displayName-count-other": "São-toméische Dobra", + "symbol": "STD", + "symbol-alt-narrow": "Db" + }, + "SUR": { + "displayName": "Sowjetischer Rubel", + "displayName-count-one": "Sowjetische Rubel", + "displayName-count-other": "Sowjetische Rubel", + "symbol": "SUR" + }, + "SVC": { + "displayName": "El Salvador Colon", + "displayName-count-one": "El Salvador-Colon", + "displayName-count-other": "El Salvador-Colon", + "symbol": "SVC" + }, + "SYP": { + "displayName": "Syrisches Pfund", + "displayName-count-one": "Syrisches Pfund", + "displayName-count-other": "Syrische Pfund", + "symbol": "SYP", + "symbol-alt-narrow": "SYP" + }, + "SZL": { + "displayName": "Swasiländischer Lilangeni", + "displayName-count-one": "Swasiländischer Lilangeni", + "displayName-count-other": "Swasiländische Emalangeni", + "symbol": "SZL" + }, + "THB": { + "displayName": "Thailändischer Baht", + "displayName-count-one": "Thailändischer Baht", + "displayName-count-other": "Thailändische Baht", + "symbol": "฿", + "symbol-alt-narrow": "฿" + }, + "TJR": { + "displayName": "Tadschikistan Rubel", + "displayName-count-one": "Tadschikistan-Rubel", + "displayName-count-other": "Tadschikistan-Rubel", + "symbol": "TJR" + }, + "TJS": { + "displayName": "Tadschikistan-Somoni", + "displayName-count-one": "Tadschikistan-Somoni", + "displayName-count-other": "Tadschikistan-Somoni", + "symbol": "TJS" + }, + "TMM": { + "displayName": "Turkmenistan-Manat (1993–2009)", + "displayName-count-one": "Turkmenistan-Manat (1993–2009)", + "displayName-count-other": "Turkmenistan-Manat (1993–2009)", + "symbol": "TMM" + }, + "TMT": { + "displayName": "Turkmenistan-Manat", + "displayName-count-one": "Turkmenistan-Manat", + "displayName-count-other": "Turkmenistan-Manat", + "symbol": "TMT" + }, + "TND": { + "displayName": "Tunesischer Dinar", + "displayName-count-one": "Tunesischer Dinar", + "displayName-count-other": "Tunesische Dinar", + "symbol": "TND" + }, + "TOP": { + "displayName": "Tongaischer Paʻanga", + "displayName-count-one": "Tongaischer Paʻanga", + "displayName-count-other": "Tongaische Paʻanga", + "symbol": "TOP", + "symbol-alt-narrow": "T$" + }, + "TPE": { + "displayName": "Timor-Escudo", + "displayName-count-one": "Timor-Escudo", + "displayName-count-other": "Timor-Escudo", + "symbol": "TPE" + }, + "TRL": { + "displayName": "Türkische Lira (1922–2005)", + "displayName-count-one": "Türkische Lira (1922–2005)", + "displayName-count-other": "Türkische Lira (1922–2005)", + "symbol": "TRL" + }, + "TRY": { + "displayName": "Türkische Lira", + "displayName-count-one": "Türkische Lira", + "displayName-count-other": "Türkische Lira", + "symbol": "TRY", + "symbol-alt-narrow": "₺", + "symbol-alt-variant": "TL" + }, + "TTD": { + "displayName": "Trinidad und Tobago-Dollar", + "displayName-count-one": "Trinidad und Tobago-Dollar", + "displayName-count-other": "Trinidad und Tobago-Dollar", + "symbol": "TTD", + "symbol-alt-narrow": "$" + }, + "TWD": { + "displayName": "Neuer Taiwan-Dollar", + "displayName-count-one": "Neuer Taiwan-Dollar", + "displayName-count-other": "Neue Taiwan-Dollar", + "symbol": "NT$", + "symbol-alt-narrow": "NT$" + }, + "TZS": { + "displayName": "Tansania-Schilling", + "displayName-count-one": "Tansania-Schilling", + "displayName-count-other": "Tansania-Schilling", + "symbol": "TZS" + }, + "UAH": { + "displayName": "Ukrainische Hrywnja", + "displayName-count-one": "Ukrainische Hrywnja", + "displayName-count-other": "Ukrainische Hrywen", + "symbol": "UAH", + "symbol-alt-narrow": "₴" + }, + "UAK": { + "displayName": "Ukrainischer Karbovanetz", + "displayName-count-one": "Ukrainische Karbovanetz", + "displayName-count-other": "Ukrainische Karbovanetz", + "symbol": "UAK" + }, + "UGS": { + "displayName": "Uganda-Schilling (1966–1987)", + "displayName-count-one": "Uganda-Schilling (1966–1987)", + "displayName-count-other": "Uganda-Schilling (1966–1987)", + "symbol": "UGS" + }, + "UGX": { + "displayName": "Uganda-Schilling", + "displayName-count-one": "Uganda-Schilling", + "displayName-count-other": "Uganda-Schilling", + "symbol": "UGX" + }, + "USD": { + "displayName": "US-Dollar", + "displayName-count-one": "US-Dollar", + "displayName-count-other": "US-Dollar", + "symbol": "$", + "symbol-alt-narrow": "$" + }, + "USN": { + "displayName": "US Dollar (Nächster Tag)", + "displayName-count-one": "US-Dollar (Nächster Tag)", + "displayName-count-other": "US-Dollar (Nächster Tag)", + "symbol": "USN" + }, + "USS": { + "displayName": "US Dollar (Gleicher Tag)", + "displayName-count-one": "US-Dollar (Gleicher Tag)", + "displayName-count-other": "US-Dollar (Gleicher Tag)", + "symbol": "USS" + }, + "UYI": { + "displayName": "Uruguayischer Peso (Indexierte Rechnungseinheiten)", + "displayName-count-one": "Uruguayischer Peso (Indexierte Rechnungseinheiten)", + "displayName-count-other": "Uruguayische Pesos (Indexierte Rechnungseinheiten)", + "symbol": "UYI" + }, + "UYP": { + "displayName": "Uruguayischer Peso (1975–1993)", + "displayName-count-one": "Uruguayischer Peso (1975–1993)", + "displayName-count-other": "Uruguayische Pesos (1975–1993)", + "symbol": "UYP" + }, + "UYU": { + "displayName": "Uruguayischer Peso", + "displayName-count-one": "Uruguayischer Peso", + "displayName-count-other": "Uruguayische Pesos", + "symbol": "UYU", + "symbol-alt-narrow": "$" + }, + "UZS": { + "displayName": "Usbekistan-Sum", + "displayName-count-one": "Usbekistan-Sum", + "displayName-count-other": "Usbekistan-Sum", + "symbol": "UZS" + }, + "VEB": { + "displayName": "Venezolanischer Bolívar (1871–2008)", + "displayName-count-one": "Venezolanischer Bolívar (1871–2008)", + "displayName-count-other": "Venezolanische Bolívares (1871–2008)", + "symbol": "VEB" + }, + "VEF": { + "displayName": "Venezolanischer Bolívar", + "displayName-count-one": "Venezolanischer Bolívar", + "displayName-count-other": "Venezolanische Bolívares", + "symbol": "VEF", + "symbol-alt-narrow": "Bs" + }, + "VND": { + "displayName": "Vietnamesischer Dong", + "displayName-count-one": "Vietnamesischer Dong", + "displayName-count-other": "Vietnamesische Dong", + "symbol": "₫", + "symbol-alt-narrow": "₫" + }, + "VNN": { + "displayName": "Vietnamesischer Dong(1978–1985)", + "displayName-count-one": "Vietnamesischer Dong(1978–1985)", + "displayName-count-other": "Vietnamesische Dong(1978–1985)", + "symbol": "VNN" + }, + "VUV": { + "displayName": "Vanuatu-Vatu", + "displayName-count-one": "Vanuatu-Vatu", + "displayName-count-other": "Vanuatu-Vatu", + "symbol": "VUV" + }, + "WST": { + "displayName": "Samoanischer Tala", + "displayName-count-one": "Samoanischer Tala", + "displayName-count-other": "Samoanische Tala", + "symbol": "WST" + }, + "XAF": { + "displayName": "CFA-Franc (BEAC)", + "displayName-count-one": "CFA-Franc (BEAC)", + "displayName-count-other": "CFA-Franc (BEAC)", + "symbol": "FCFA" + }, + "XAG": { + "displayName": "Unze Silber", + "displayName-count-one": "Unze Silber", + "displayName-count-other": "Unzen Silber", + "symbol": "XAG" + }, + "XAU": { + "displayName": "Unze Gold", + "displayName-count-one": "Unze Gold", + "displayName-count-other": "Unzen Gold", + "symbol": "XAU" + }, + "XBA": { + "displayName": "Europäische Rechnungseinheit", + "displayName-count-one": "Europäische Rechnungseinheiten", + "displayName-count-other": "Europäische Rechnungseinheiten", + "symbol": "XBA" + }, + "XBB": { + "displayName": "Europäische Währungseinheit (XBB)", + "displayName-count-one": "Europäische Währungseinheiten (XBB)", + "displayName-count-other": "Europäische Währungseinheiten (XBB)", + "symbol": "XBB" + }, + "XBC": { + "displayName": "Europäische Rechnungseinheit (XBC)", + "displayName-count-one": "Europäische Rechnungseinheiten (XBC)", + "displayName-count-other": "Europäische Rechnungseinheiten (XBC)", + "symbol": "XBC" + }, + "XBD": { + "displayName": "Europäische Rechnungseinheit (XBD)", + "displayName-count-one": "Europäische Rechnungseinheiten (XBD)", + "displayName-count-other": "Europäische Rechnungseinheiten (XBD)", + "symbol": "XBD" + }, + "XCD": { + "displayName": "Ostkaribischer Dollar", + "displayName-count-one": "Ostkaribischer Dollar", + "displayName-count-other": "Ostkaribische Dollar", + "symbol": "EC$", + "symbol-alt-narrow": "$" + }, + "XDR": { + "displayName": "Sonderziehungsrechte", + "displayName-count-one": "Sonderziehungsrechte", + "displayName-count-other": "Sonderziehungsrechte", + "symbol": "XDR" + }, + "XEU": { + "displayName": "Europäische Währungseinheit (XEU)", + "displayName-count-one": "Europäische Währungseinheiten (XEU)", + "displayName-count-other": "Europäische Währungseinheiten (XEU)", + "symbol": "XEU" + }, + "XFO": { + "displayName": "Französischer Gold-Franc", + "displayName-count-one": "Französische Gold-Franc", + "displayName-count-other": "Französische Gold-Franc", + "symbol": "XFO" + }, + "XFU": { + "displayName": "Französischer UIC-Franc", + "displayName-count-one": "Französische UIC-Franc", + "displayName-count-other": "Französische UIC-Franc", + "symbol": "XFU" + }, + "XOF": { + "displayName": "CFA-Franc (BCEAO)", + "displayName-count-one": "CFA-Franc (BCEAO)", + "displayName-count-other": "CFA-Francs (BCEAO)", + "symbol": "CFA" + }, + "XPD": { + "displayName": "Unze Palladium", + "displayName-count-one": "Unze Palladium", + "displayName-count-other": "Unzen Palladium", + "symbol": "XPD" + }, + "XPF": { + "displayName": "CFP-Franc", + "displayName-count-one": "CFP-Franc", + "displayName-count-other": "CFP-Franc", + "symbol": "CFPF" + }, + "XPT": { + "displayName": "Unze Platin", + "displayName-count-one": "Unze Platin", + "displayName-count-other": "Unzen Platin", + "symbol": "XPT" + }, + "XRE": { + "displayName": "RINET Funds", + "displayName-count-one": "RINET Funds", + "displayName-count-other": "RINET Funds", + "symbol": "XRE" + }, + "XSU": { + "displayName": "SUCRE", + "displayName-count-one": "SUCRE", + "displayName-count-other": "SUCRE", + "symbol": "XSU" + }, + "XTS": { + "displayName": "Testwährung", + "displayName-count-one": "Testwährung", + "displayName-count-other": "Testwährung", + "symbol": "XTS" + }, + "XUA": { + "displayName": "Rechnungseinheit der AfEB", + "displayName-count-one": "Rechnungseinheit der AfEB", + "displayName-count-other": "Rechnungseinheiten der AfEB", + "symbol": "XUA" + }, + "XXX": { + "displayName": "Unbekannte Währung", + "displayName-count-one": "(unbekannte Währung)", + "displayName-count-other": "(unbekannte Währung)", + "symbol": "XXX" + }, + "YDD": { + "displayName": "Jemen-Dinar", + "displayName-count-one": "Jemen-Dinar", + "displayName-count-other": "Jemen-Dinar", + "symbol": "YDD" + }, + "YER": { + "displayName": "Jemen-Rial", + "displayName-count-one": "Jemen-Rial", + "displayName-count-other": "Jemen-Rial", + "symbol": "YER" + }, + "YUD": { + "displayName": "Jugoslawischer Dinar (1966–1990)", + "displayName-count-one": "Jugoslawischer Dinar (1966–1990)", + "displayName-count-other": "Jugoslawische Dinar (1966–1990)", + "symbol": "YUD" + }, + "YUM": { + "displayName": "Jugoslawischer Neuer Dinar (1994–2002)", + "displayName-count-one": "Jugoslawischer Neuer Dinar (1994–2002)", + "displayName-count-other": "Jugoslawische Neue Dinar (1994–2002)", + "symbol": "YUM" + }, + "YUN": { + "displayName": "Jugoslawischer Dinar (konvertibel)", + "displayName-count-one": "Jugoslawische Dinar (konvertibel)", + "displayName-count-other": "Jugoslawische Dinar (konvertibel)", + "symbol": "YUN" + }, + "YUR": { + "displayName": "Jugoslawischer reformierter Dinar (1992–1993)", + "displayName-count-one": "Jugoslawischer reformierter Dinar (1992–1993)", + "displayName-count-other": "Jugoslawische reformierte Dinar (1992–1993)", + "symbol": "YUR" + }, + "ZAL": { + "displayName": "Südafrikanischer Rand (Finanz)", + "displayName-count-one": "Südafrikanischer Rand (Finanz)", + "displayName-count-other": "Südafrikanischer Rand (Finanz)", + "symbol": "ZAL" + }, + "ZAR": { + "displayName": "Südafrikanischer Rand", + "displayName-count-one": "Südafrikanischer Rand", + "displayName-count-other": "Südafrikanische Rand", + "symbol": "ZAR", + "symbol-alt-narrow": "R" + }, + "ZMK": { + "displayName": "Kwacha (1968–2012)", + "displayName-count-one": "Kwacha (1968–2012)", + "displayName-count-other": "Kwacha (1968–2012)", + "symbol": "ZMK" + }, + "ZMW": { + "displayName": "Kwacha", + "displayName-count-one": "Kwacha", + "displayName-count-other": "Kwacha", + "symbol": "ZMW", + "symbol-alt-narrow": "K" + }, + "ZRN": { + "displayName": "Zaire-Neuer Zaïre (1993–1998)", + "displayName-count-one": "Zaire-Neuer Zaïre (1993–1998)", + "displayName-count-other": "Zaire-Neue Zaïre (1993–1998)", + "symbol": "ZRN" + }, + "ZRZ": { + "displayName": "Zaire-Zaïre (1971–1993)", + "displayName-count-one": "Zaire-Zaïre (1971–1993)", + "displayName-count-other": "Zaire-Zaïre (1971–1993)", + "symbol": "ZRZ" + }, + "ZWD": { + "displayName": "Simbabwe-Dollar (1980–2008)", + "displayName-count-one": "Simbabwe-Dollar (1980–2008)", + "displayName-count-other": "Simbabwe-Dollar (1980–2008)", + "symbol": "ZWD" + }, + "ZWL": { + "displayName": "Simbabwe-Dollar (2009)", + "displayName-count-one": "Simbabwe-Dollar (2009)", + "displayName-count-other": "Simbabwe-Dollar (2009)", + "symbol": "ZWL" + }, + "ZWR": { + "displayName": "Simbabwe-Dollar (2008)", + "displayName-count-one": "Simbabwe-Dollar (2008)", + "displayName-count-other": "Simbabwe-Dollar (2008)", + "symbol": "ZWR" + } } - } + } } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/en/all.json b/src/common/cldr-data/main/en/all.json index 72a5877d..cce5e094 100644 --- a/src/common/cldr-data/main/en/all.json +++ b/src/common/cldr-data/main/en/all.json @@ -11111,4 +11111,4 @@ } } } - \ No newline at end of file + diff --git a/src/common/cldr-data/main/fr-CH/all.json b/src/common/cldr-data/main/fr-CH/all.json index 47db3b7b..9668ff21 100644 --- a/src/common/cldr-data/main/fr-CH/all.json +++ b/src/common/cldr-data/main/fr-CH/all.json @@ -1,5268 +1,5269 @@ { - "main": { - "fr-CH": { - "identity": { - "version": { - "_number": "$Revision: 13706 $", - "_cldrVersion": "32" + "main": { + "fr-CH": { + "identity": { + "version": { + "_number": "$Revision: 13706 $", + "_cldrVersion": "32" + }, + "language": "fr", + "territory": "CH" }, - "language": "fr", - "territory": "CH" - }, - "dates": { - "calendars": { - "gregorian": { - "months": { - "format": { - "abbreviated": { - "1": "janv.", - "2": "févr.", - "3": "mars", - "4": "avr.", - "5": "mai", - "6": "juin", - "7": "juil.", - "8": "août", - "9": "sept.", - "10": "oct.", - "11": "nov.", - "12": "déc." - }, - "narrow": { - "1": "J", - "2": "F", - "3": "M", - "4": "A", - "5": "M", - "6": "J", - "7": "J", - "8": "A", - "9": "S", - "10": "O", - "11": "N", - "12": "D" - }, - "wide": { - "1": "janvier", - "2": "février", - "3": "mars", - "4": "avril", - "5": "mai", - "6": "juin", - "7": "juillet", - "8": "août", - "9": "septembre", - "10": "octobre", - "11": "novembre", - "12": "décembre" - } - }, - "stand-alone": { - "abbreviated": { - "1": "janv.", - "2": "févr.", - "3": "mars", - "4": "avr.", - "5": "mai", - "6": "juin", - "7": "juil.", - "8": "août", - "9": "sept.", - "10": "oct.", - "11": "nov.", - "12": "déc." - }, - "narrow": { - "1": "J", - "2": "F", - "3": "M", - "4": "A", - "5": "M", - "6": "J", - "7": "J", - "8": "A", - "9": "S", - "10": "O", - "11": "N", - "12": "D" - }, - "wide": { - "1": "janvier", - "2": "février", - "3": "mars", - "4": "avril", - "5": "mai", - "6": "juin", - "7": "juillet", - "8": "août", - "9": "septembre", - "10": "octobre", - "11": "novembre", - "12": "décembre" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "dim.", - "mon": "lun.", - "tue": "mar.", - "wed": "mer.", - "thu": "jeu.", - "fri": "ven.", - "sat": "sam." - }, - "narrow": { - "sun": "D", - "mon": "L", - "tue": "M", - "wed": "M", - "thu": "J", - "fri": "V", - "sat": "S" - }, - "short": { - "sun": "di", - "mon": "lu", - "tue": "ma", - "wed": "me", - "thu": "je", - "fri": "ve", - "sat": "sa" - }, - "wide": { - "sun": "dimanche", - "mon": "lundi", - "tue": "mardi", - "wed": "mercredi", - "thu": "jeudi", - "fri": "vendredi", - "sat": "samedi" + "dates": { + "calendars": { + "gregorian": { + "months": { + "format": { + "abbreviated": { + "1": "janv.", + "2": "févr.", + "3": "mars", + "4": "avr.", + "5": "mai", + "6": "juin", + "7": "juil.", + "8": "août", + "9": "sept.", + "10": "oct.", + "11": "nov.", + "12": "déc." + }, + "narrow": { + "1": "J", + "2": "F", + "3": "M", + "4": "A", + "5": "M", + "6": "J", + "7": "J", + "8": "A", + "9": "S", + "10": "O", + "11": "N", + "12": "D" + }, + "wide": { + "1": "janvier", + "2": "février", + "3": "mars", + "4": "avril", + "5": "mai", + "6": "juin", + "7": "juillet", + "8": "août", + "9": "septembre", + "10": "octobre", + "11": "novembre", + "12": "décembre" + } + }, + "stand-alone": { + "abbreviated": { + "1": "janv.", + "2": "févr.", + "3": "mars", + "4": "avr.", + "5": "mai", + "6": "juin", + "7": "juil.", + "8": "août", + "9": "sept.", + "10": "oct.", + "11": "nov.", + "12": "déc." + }, + "narrow": { + "1": "J", + "2": "F", + "3": "M", + "4": "A", + "5": "M", + "6": "J", + "7": "J", + "8": "A", + "9": "S", + "10": "O", + "11": "N", + "12": "D" + }, + "wide": { + "1": "janvier", + "2": "février", + "3": "mars", + "4": "avril", + "5": "mai", + "6": "juin", + "7": "juillet", + "8": "août", + "9": "septembre", + "10": "octobre", + "11": "novembre", + "12": "décembre" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "dim.", - "mon": "lun.", - "tue": "mar.", - "wed": "mer.", - "thu": "jeu.", - "fri": "ven.", - "sat": "sam." - }, - "narrow": { - "sun": "D", - "mon": "L", - "tue": "M", - "wed": "M", - "thu": "J", - "fri": "V", - "sat": "S" - }, - "short": { - "sun": "di", - "mon": "lu", - "tue": "ma", - "wed": "me", - "thu": "je", - "fri": "ve", - "sat": "sa" - }, - "wide": { - "sun": "dimanche", - "mon": "lundi", - "tue": "mardi", - "wed": "mercredi", - "thu": "jeudi", - "fri": "vendredi", - "sat": "samedi" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "T1", - "2": "T2", - "3": "T3", - "4": "T4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1er trimestre", - "2": "2e trimestre", - "3": "3e trimestre", - "4": "4e trimestre" + "days": { + "format": { + "abbreviated": { + "sun": "dim.", + "mon": "lun.", + "tue": "mar.", + "wed": "mer.", + "thu": "jeu.", + "fri": "ven.", + "sat": "sam." + }, + "narrow": { + "sun": "D", + "mon": "L", + "tue": "M", + "wed": "M", + "thu": "J", + "fri": "V", + "sat": "S" + }, + "short": { + "sun": "di", + "mon": "lu", + "tue": "ma", + "wed": "me", + "thu": "je", + "fri": "ve", + "sat": "sa" + }, + "wide": { + "sun": "dimanche", + "mon": "lundi", + "tue": "mardi", + "wed": "mercredi", + "thu": "jeudi", + "fri": "vendredi", + "sat": "samedi" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "dim.", + "mon": "lun.", + "tue": "mar.", + "wed": "mer.", + "thu": "jeu.", + "fri": "ven.", + "sat": "sam." + }, + "narrow": { + "sun": "D", + "mon": "L", + "tue": "M", + "wed": "M", + "thu": "J", + "fri": "V", + "sat": "S" + }, + "short": { + "sun": "di", + "mon": "lu", + "tue": "ma", + "wed": "me", + "thu": "je", + "fri": "ve", + "sat": "sa" + }, + "wide": { + "sun": "dimanche", + "mon": "lundi", + "tue": "mardi", + "wed": "mercredi", + "thu": "jeudi", + "fri": "vendredi", + "sat": "samedi" + } } }, - "stand-alone": { - "abbreviated": { - "1": "T1", - "2": "T2", - "3": "T3", - "4": "T4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1er trimestre", - "2": "2e trimestre", - "3": "3e trimestre", - "4": "4e trimestre" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du mat.", - "afternoon1": "de l’ap.m.", - "evening1": "du soir", - "night1": "du mat." - }, - "narrow": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du mat.", - "afternoon1": "de l’ap.m.", - "evening1": "du soir", - "night1": "du mat." - }, - "wide": { - "midnight": "minuit", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du matin", - "afternoon1": "de l’après-midi", - "evening1": "du soir", - "night1": "du matin" + "quarters": { + "format": { + "abbreviated": { + "1": "T1", + "2": "T2", + "3": "T3", + "4": "T4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1er trimestre", + "2": "2e trimestre", + "3": "3e trimestre", + "4": "4e trimestre" + } + }, + "stand-alone": { + "abbreviated": { + "1": "T1", + "2": "T2", + "3": "T3", + "4": "T4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1er trimestre", + "2": "2e trimestre", + "3": "3e trimestre", + "4": "4e trimestre" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "mat.", - "afternoon1": "ap.m.", - "evening1": "soir", - "night1": "nuit" - }, - "narrow": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "mat.", - "afternoon1": "ap.m.", - "evening1": "soir", - "night1": "nuit" - }, - "wide": { - "midnight": "minuit", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "matin", - "afternoon1": "après-midi", - "evening1": "soir", - "night1": "nuit" - } - } - }, - "eras": { - "eraNames": { - "0": "avant Jésus-Christ", - "0-alt-variant": "avant l’ère commune", - "1": "après Jésus-Christ", - "1-alt-variant": "de l’ère commune" - }, - "eraAbbr": { - "0": "av. J.-C.", - "0-alt-variant": "AEC", - "1": "ap. J.-C.", - "1-alt-variant": "EC" - }, - "eraNarrow": { - "0": "av. J.-C.", - "0-alt-variant": "AEC", - "1": "ap. J.-C.", - "1-alt-variant": "EC" - } - }, - "dateFormats": { - "full": "EEEE, d MMMM y", - "long": "d MMMM y", - "medium": "d MMM y", - "short": "dd.MM.yy" - }, - "timeFormats": { - "full": "HH.mm:ss 'h' zzzz", - "long": "HH:mm:ss z", - "medium": "HH:mm:ss", - "short": "HH:mm" - }, - "dateTimeFormats": { - "full": "{1} 'à' {0}", - "long": "{1} 'à' {0}", - "medium": "{1} 'à' {0}", - "short": "{1} {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "E", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "E d", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d MMM y G", - "GyMMMEd": "E d MMM y G", - "h": "h a", - "H": "HH 'h'", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "hmsv": "h:mm:ss a v", - "Hmsv": "HH:mm:ss v", - "hmv": "h:mm a v", - "Hmv": "HH:mm v", - "M": "L", - "Md": "dd.MM.", - "MEd": "E, dd.MM.", - "MMdd": "dd.MM", - "MMM": "LLL", - "MMMd": "d MMM", - "MMMEd": "E d MMM", - "MMMMd": "d MMMM", - "MMMMW-count-one": "'semaine' W (MMMM)", - "MMMMW-count-other": "'semaine' W (MMMM)", - "ms": "mm:ss", - "y": "y", - "yM": "MM.y", - "yMd": "dd.MM.y", - "yMEd": "E, dd.MM.y", - "yMMM": "MMM y", - "yMMMd": "d MMM y", - "yMMMEd": "E d MMM y", - "yMMMM": "MMMM y", - "yQQQ": "QQQ y", - "yQQQQ": "QQQQ y", - "yw-count-one": "'semaine' w 'de' Y", - "yw-count-other": "'semaine' w 'de' Y" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d–d" - }, - "h": { - "a": "h a – h a", - "h": "h – h a" - }, - "H": { - "H": "HH – HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm – h:mm a", - "m": "h:mm – h:mm a" - }, - "Hm": { - "H": "HH:mm – HH:mm", - "m": "HH:mm – HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm – h:mm a v", - "m": "h:mm – h:mm a v" - }, - "Hmv": { - "H": "HH:mm – HH:mm v", - "m": "HH:mm – HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h – h a v" - }, - "Hv": { - "H": "HH – HH v" - }, - "M": { - "M": "M–M" - }, - "Md": { - "d": "dd.MM – dd.MM", - "M": "dd.MM – dd.MM" - }, - "MEd": { - "d": "E, dd.MM – E, dd.MM", - "M": "E, dd.MM – E, dd.MM" - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "d–d MMM", - "M": "d MMM – d MMM" - }, - "MMMEd": { - "d": "E d – E d MMM", - "M": "E d MMM – E d MMM" - }, - "y": { - "y": "y–y" - }, - "yM": { - "M": "MM.y – MM.y", - "y": "MM.y – MM.y" - }, - "yMd": { - "d": "dd.MM.y – dd.MM.y", - "M": "dd.MM.y – dd.MM.y", - "y": "dd.MM.y – dd.MM.y" - }, - "yMEd": { - "d": "E, dd.MM.y – E, dd.MM.y", - "M": "E, dd.MM.y – E, dd.MM.y", - "y": "E, dd.MM.y – E, dd.MM.y" - }, - "yMMM": { - "M": "MMM–MMM y", - "y": "MMM y – MMM y" - }, - "yMMMd": { - "d": "d–d MMM y", - "M": "d MMM – d MMM y", - "y": "d MMM y – d MMM y" - }, - "yMMMEd": { - "d": "E d – E d MMM y", - "M": "E d MMM – E d MMM y", - "y": "E d MMM y – E d MMM y" - }, - "yMMMM": { - "M": "MMMM – MMMM y", - "y": "MMMM y – MMMM y" - } - } - } - }, - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "mouh.", - "2": "saf.", - "3": "rab. aw.", - "4": "rab. th.", - "5": "joum. oul.", - "6": "joum. tha.", - "7": "raj.", - "8": "chaa.", - "9": "ram.", - "10": "chaw.", - "11": "dhou. q.", - "12": "dhou. h." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "mouharram", - "2": "safar", - "3": "rabia al awal", - "4": "rabia ath-thani", - "5": "joumada al oula", - "6": "joumada ath-thania", - "7": "rajab", - "8": "chaabane", - "9": "ramadan", - "10": "chawwal", - "11": "dhou al qi`da", - "12": "dhou al-hijja" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du mat.", + "afternoon1": "de l’ap.m.", + "evening1": "du soir", + "night1": "du mat." + }, + "narrow": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du mat.", + "afternoon1": "de l’ap.m.", + "evening1": "du soir", + "night1": "du mat." + }, + "wide": { + "midnight": "minuit", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du matin", + "afternoon1": "de l’après-midi", + "evening1": "du soir", + "night1": "du matin" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "mat.", + "afternoon1": "ap.m.", + "evening1": "soir", + "night1": "nuit" + }, + "narrow": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "mat.", + "afternoon1": "ap.m.", + "evening1": "soir", + "night1": "nuit" + }, + "wide": { + "midnight": "minuit", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "matin", + "afternoon1": "après-midi", + "evening1": "soir", + "night1": "nuit" + } } }, - "stand-alone": { - "abbreviated": { - "1": "mouh.", - "2": "saf.", - "3": "rab. aw.", - "4": "rab. th.", - "5": "joum. ou.", - "6": "joum. th.", - "7": "raj.", - "8": "chaa.", - "9": "ram.", - "10": "chaw.", - "11": "dhou. qi.", - "12": "dhou. hi." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "mouharram", - "2": "safar", - "3": "rabia al awal", - "4": "rabia ath-thani", - "5": "joumada al oula", - "6": "joumada ath-thania", - "7": "rajab", - "8": "chaabane", - "9": "ramadan", - "10": "chawwal", - "11": "dhou al qi`da", - "12": "dhou al-hijja" + "eras": { + "eraNames": { + "0": "avant Jésus-Christ", + "0-alt-variant": "avant l’ère commune", + "1": "après Jésus-Christ", + "1-alt-variant": "de l’ère commune" + }, + "eraAbbr": { + "0": "av. J.-C.", + "0-alt-variant": "AEC", + "1": "ap. J.-C.", + "1-alt-variant": "EC" + }, + "eraNarrow": { + "0": "av. J.-C.", + "0-alt-variant": "AEC", + "1": "ap. J.-C.", + "1-alt-variant": "EC" + } + }, + "dateFormats": { + "full": "EEEE, d MMMM y", + "long": "d MMMM y", + "medium": "d MMM y", + "short": "dd.MM.yy" + }, + "timeFormats": { + "full": "HH.mm:ss 'h' zzzz", + "long": "HH:mm:ss z", + "medium": "HH:mm:ss", + "short": "HH:mm" + }, + "dateTimeFormats": { + "full": "{1} 'à' {0}", + "long": "{1} 'à' {0}", + "medium": "{1} 'à' {0}", + "short": "{1} {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "E", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "E d", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d MMM y G", + "GyMMMEd": "E d MMM y G", + "h": "h a", + "H": "HH 'h'", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "hmsv": "h:mm:ss a v", + "Hmsv": "HH:mm:ss v", + "hmv": "h:mm a v", + "Hmv": "HH:mm v", + "M": "L", + "Md": "dd.MM.", + "MEd": "E, dd.MM.", + "MMdd": "dd.MM", + "MMM": "LLL", + "MMMd": "d MMM", + "MMMEd": "E d MMM", + "MMMMd": "d MMMM", + "MMMMW-count-one": "'semaine' W (MMMM)", + "MMMMW-count-other": "'semaine' W (MMMM)", + "ms": "mm:ss", + "y": "y", + "yM": "MM.y", + "yMd": "dd.MM.y", + "yMEd": "E, dd.MM.y", + "yMMM": "MMM y", + "yMMMd": "d MMM y", + "yMMMEd": "E d MMM y", + "yMMMM": "MMMM y", + "yQQQ": "QQQ y", + "yQQQQ": "QQQQ y", + "yw-count-one": "'semaine' w 'de' Y", + "yw-count-other": "'semaine' w 'de' Y" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d–d" + }, + "h": { + "a": "h a – h a", + "h": "h – h a" + }, + "H": { + "H": "HH – HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm – h:mm a", + "m": "h:mm – h:mm a" + }, + "Hm": { + "H": "HH:mm – HH:mm", + "m": "HH:mm – HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm – h:mm a v", + "m": "h:mm – h:mm a v" + }, + "Hmv": { + "H": "HH:mm – HH:mm v", + "m": "HH:mm – HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h – h a v" + }, + "Hv": { + "H": "HH – HH v" + }, + "M": { + "M": "M–M" + }, + "Md": { + "d": "dd.MM – dd.MM", + "M": "dd.MM – dd.MM" + }, + "MEd": { + "d": "E, dd.MM – E, dd.MM", + "M": "E, dd.MM – E, dd.MM" + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "d–d MMM", + "M": "d MMM – d MMM" + }, + "MMMEd": { + "d": "E d – E d MMM", + "M": "E d MMM – E d MMM" + }, + "y": { + "y": "y–y" + }, + "yM": { + "M": "MM.y – MM.y", + "y": "MM.y – MM.y" + }, + "yMd": { + "d": "dd.MM.y – dd.MM.y", + "M": "dd.MM.y – dd.MM.y", + "y": "dd.MM.y – dd.MM.y" + }, + "yMEd": { + "d": "E, dd.MM.y – E, dd.MM.y", + "M": "E, dd.MM.y – E, dd.MM.y", + "y": "E, dd.MM.y – E, dd.MM.y" + }, + "yMMM": { + "M": "MMM–MMM y", + "y": "MMM y – MMM y" + }, + "yMMMd": { + "d": "d–d MMM y", + "M": "d MMM – d MMM y", + "y": "d MMM y – d MMM y" + }, + "yMMMEd": { + "d": "E d – E d MMM y", + "M": "E d MMM – E d MMM y", + "y": "E d MMM y – E d MMM y" + }, + "yMMMM": { + "M": "MMMM – MMMM y", + "y": "MMMM y – MMMM y" + } } } }, - "days": { - "format": { - "abbreviated": { - "sun": "dim.", - "mon": "lun.", - "tue": "mar.", - "wed": "mer.", - "thu": "jeu.", - "fri": "ven.", - "sat": "sam." - }, - "narrow": { - "sun": "D", - "mon": "L", - "tue": "M", - "wed": "M", - "thu": "J", - "fri": "V", - "sat": "S" - }, - "short": { - "sun": "di", - "mon": "lu", - "tue": "ma", - "wed": "me", - "thu": "je", - "fri": "ve", - "sat": "sa" - }, - "wide": { - "sun": "dimanche", - "mon": "lundi", - "tue": "mardi", - "wed": "mercredi", - "thu": "jeudi", - "fri": "vendredi", - "sat": "samedi" + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "mouh.", + "2": "saf.", + "3": "rab. aw.", + "4": "rab. th.", + "5": "joum. oul.", + "6": "joum. tha.", + "7": "raj.", + "8": "chaa.", + "9": "ram.", + "10": "chaw.", + "11": "dhou. q.", + "12": "dhou. h." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "mouharram", + "2": "safar", + "3": "rabia al awal", + "4": "rabia ath-thani", + "5": "joumada al oula", + "6": "joumada ath-thania", + "7": "rajab", + "8": "chaabane", + "9": "ramadan", + "10": "chawwal", + "11": "dhou al qi`da", + "12": "dhou al-hijja" + } + }, + "stand-alone": { + "abbreviated": { + "1": "mouh.", + "2": "saf.", + "3": "rab. aw.", + "4": "rab. th.", + "5": "joum. ou.", + "6": "joum. th.", + "7": "raj.", + "8": "chaa.", + "9": "ram.", + "10": "chaw.", + "11": "dhou. qi.", + "12": "dhou. hi." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "mouharram", + "2": "safar", + "3": "rabia al awal", + "4": "rabia ath-thani", + "5": "joumada al oula", + "6": "joumada ath-thania", + "7": "rajab", + "8": "chaabane", + "9": "ramadan", + "10": "chawwal", + "11": "dhou al qi`da", + "12": "dhou al-hijja" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "dim.", - "mon": "lun.", - "tue": "mar.", - "wed": "mer.", - "thu": "jeu.", - "fri": "ven.", - "sat": "sam." - }, - "narrow": { - "sun": "D", - "mon": "L", - "tue": "M", - "wed": "M", - "thu": "J", - "fri": "V", - "sat": "S" - }, - "short": { - "sun": "di", - "mon": "lu", - "tue": "ma", - "wed": "me", - "thu": "je", - "fri": "ve", - "sat": "sa" - }, - "wide": { - "sun": "dimanche", - "mon": "lundi", - "tue": "mardi", - "wed": "mercredi", - "thu": "jeudi", - "fri": "vendredi", - "sat": "samedi" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "T1", - "2": "T2", - "3": "T3", - "4": "T4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1er trimestre", - "2": "2e trimestre", - "3": "3e trimestre", - "4": "4e trimestre" + "days": { + "format": { + "abbreviated": { + "sun": "dim.", + "mon": "lun.", + "tue": "mar.", + "wed": "mer.", + "thu": "jeu.", + "fri": "ven.", + "sat": "sam." + }, + "narrow": { + "sun": "D", + "mon": "L", + "tue": "M", + "wed": "M", + "thu": "J", + "fri": "V", + "sat": "S" + }, + "short": { + "sun": "di", + "mon": "lu", + "tue": "ma", + "wed": "me", + "thu": "je", + "fri": "ve", + "sat": "sa" + }, + "wide": { + "sun": "dimanche", + "mon": "lundi", + "tue": "mardi", + "wed": "mercredi", + "thu": "jeudi", + "fri": "vendredi", + "sat": "samedi" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "dim.", + "mon": "lun.", + "tue": "mar.", + "wed": "mer.", + "thu": "jeu.", + "fri": "ven.", + "sat": "sam." + }, + "narrow": { + "sun": "D", + "mon": "L", + "tue": "M", + "wed": "M", + "thu": "J", + "fri": "V", + "sat": "S" + }, + "short": { + "sun": "di", + "mon": "lu", + "tue": "ma", + "wed": "me", + "thu": "je", + "fri": "ve", + "sat": "sa" + }, + "wide": { + "sun": "dimanche", + "mon": "lundi", + "tue": "mardi", + "wed": "mercredi", + "thu": "jeudi", + "fri": "vendredi", + "sat": "samedi" + } } }, - "stand-alone": { - "abbreviated": { - "1": "T1", - "2": "T2", - "3": "T3", - "4": "T4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1er trimestre", - "2": "2e trimestre", - "3": "3e trimestre", - "4": "4e trimestre" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du mat.", - "afternoon1": "de l’ap.m.", - "evening1": "du soir", - "night1": "du mat." - }, - "narrow": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du mat.", - "afternoon1": "de l’ap.m.", - "evening1": "du soir", - "night1": "du mat." - }, - "wide": { - "midnight": "minuit", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "du matin", - "afternoon1": "de l’après-midi", - "evening1": "du soir", - "night1": "du matin" + "quarters": { + "format": { + "abbreviated": { + "1": "T1", + "2": "T2", + "3": "T3", + "4": "T4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1er trimestre", + "2": "2e trimestre", + "3": "3e trimestre", + "4": "4e trimestre" + } + }, + "stand-alone": { + "abbreviated": { + "1": "T1", + "2": "T2", + "3": "T3", + "4": "T4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1er trimestre", + "2": "2e trimestre", + "3": "3e trimestre", + "4": "4e trimestre" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "mat.", - "afternoon1": "ap.m.", - "evening1": "soir", - "night1": "nuit" - }, - "narrow": { - "midnight": "min.", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "mat.", - "afternoon1": "ap.m.", - "evening1": "soir", - "night1": "nuit" - }, - "wide": { - "midnight": "minuit", - "am": "AM", - "noon": "midi", - "pm": "PM", - "morning1": "matin", - "afternoon1": "après-midi", - "evening1": "soir", - "night1": "nuit" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du mat.", + "afternoon1": "de l’ap.m.", + "evening1": "du soir", + "night1": "du mat." + }, + "narrow": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du mat.", + "afternoon1": "de l’ap.m.", + "evening1": "du soir", + "night1": "du mat." + }, + "wide": { + "midnight": "minuit", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "du matin", + "afternoon1": "de l’après-midi", + "evening1": "du soir", + "night1": "du matin" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "mat.", + "afternoon1": "ap.m.", + "evening1": "soir", + "night1": "nuit" + }, + "narrow": { + "midnight": "min.", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "mat.", + "afternoon1": "ap.m.", + "evening1": "soir", + "night1": "nuit" + }, + "wide": { + "midnight": "minuit", + "am": "AM", + "noon": "midi", + "pm": "PM", + "morning1": "matin", + "afternoon1": "après-midi", + "evening1": "soir", + "night1": "nuit" + } } - } - }, - "eras": { - "eraNames": { - "0": "ère de l’Hégire" }, - "eraAbbr": { - "0": "AH" - }, - "eraNarrow": { - "0": "H" - } - }, - "dateFormats": { - "full": "EEEE d MMMM y G", - "long": "d MMMM y G", - "medium": "d MMM y G", - "short": "dd/MM/y GGGGG" - }, - "timeFormats": { - "full": "HH.mm:ss 'h' zzzz", - "long": "HH:mm:ss z", - "medium": "HH:mm:ss", - "short": "HH:mm" - }, - "dateTimeFormats": { - "full": "{1} 'à' {0}", - "long": "{1} 'à' {0}", - "medium": "{1} {0}", - "short": "{1} {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "E d", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d MMM y G", - "GyMMMEd": "E d MMM y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "dd/MM", - "MEd": "E dd/MM", - "MMdd": "dd.MM", - "MMM": "LLL", - "MMMd": "d MMM", - "MMMEd": "E d MMM", - "MMMMd": "d MMMM", - "ms": "mm:ss", - "y": "y G", - "yM": "MM.y GGGGG", - "yMd": "dd.MM.y GGGGG", - "yMEd": "E, dd.MM.y GGGGG", - "yyyy": "y G", - "yyyyM": "M/y GGGGG", - "yyyyMd": "d/M/y GGGGG", - "yyyyMEd": "E d/M/y GGGGG", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "d MMM y G", - "yyyyMMMEd": "E d MMM y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "du {0} au {1}", - "d": { - "d": "d – d" - }, - "Gy": { - "G": "G y – G y", - "y": "G y–y" - }, - "GyM": { - "G": "GGGGG y-MM – GGGGG y-MM", - "M": "GGGGG y-MM – y-MM", - "y": "GGGGG y-MM – y-MM" - }, - "GyMd": { - "d": "GGGGG y-MM-dd – y-MM-dd", - "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", - "M": "GGGGG y-MM-dd – y-MM-dd", - "y": "GGGGG y-MM-dd – y-MM-dd" - }, - "GyMEd": { - "d": "GGGGG y-MM-dd, E – y-MM-dd, E", - "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", - "M": "GGGGG y-MM-dd, E – y-MM-dd, E", - "y": "GGGGG y-MM-dd, E – y-MM-dd, E" - }, - "GyMMM": { - "G": "G y MMM – G y MMM", - "M": "G y MMM–MMM", - "y": "G y MMM – y MMM" - }, - "GyMMMd": { - "d": "G y MMM d–d", - "G": "G y MMM d – G y MMM d", - "M": "G y MMM d – MMM d", - "y": "G y MMM d – y MMM d" - }, - "GyMMMEd": { - "d": "G y MMM d, E – MMM d, E", - "G": "G y MMM d, E – G y MMM d, E", - "M": "G y MMM d, E – MMM d, E", - "y": "G y MMM d, E – y MMM d, E" - }, - "h": { - "a": "h a – h a", - "h": "h – h a" - }, - "H": { - "H": "HH – HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm – h:mm a", - "m": "h:mm – h:mm a" - }, - "Hm": { - "H": "HH:mm – HH:mm", - "m": "HH:mm – HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm – h:mm a v", - "m": "h:mm – h:mm a v" - }, - "Hmv": { - "H": "HH:mm – HH:mm v", - "m": "HH:mm – HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h – h a v" - }, - "Hv": { - "H": "HH – HH v" - }, - "M": { - "M": "M–M" - }, - "Md": { - "d": "dd.MM – dd.MM", - "M": "dd.MM – dd.MM" - }, - "MEd": { - "d": "E, dd.MM – E, dd.MM", - "M": "E, dd.MM – E, dd.MM" - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "d–d MMM", - "M": "d MMM 'au' d MMM" - }, - "MMMEd": { - "d": "E, d 'au' E, d MMM", - "M": "E, d MMM 'au' E, d MMM" - }, - "y": { - "y": "y – y G" - }, - "yM": { - "M": "MM.y – MM.y GGGGG", - "y": "MM.y – MM.y GGGGG" - }, - "yMd": { - "d": "dd.MM.y – dd.MM.y GGGGG", - "M": "dd.MM.y – dd.MM.y GGGGG", - "y": "dd.MM.y – dd.MM.y GGGGG" - }, - "yMEd": { - "d": "E, dd.MM.y – E, dd.MM.y GGGGG", - "M": "E, dd.MM.y – E, dd.MM.y GGGGG", - "y": "E, dd.MM.y – E, dd.MM.y GGGGG" - }, - "yMMM": { - "M": "MMM–MMM y G", - "y": "MMM y 'a'` MMM y G" - }, - "yMMMd": { - "d": "d–d MMM y G", - "M": "d MMM 'au' d MMM y G", - "y": "d MMM y 'au' d MMM y G" - }, - "yMMMEd": { - "d": "E, d 'au' E, d MMM y G", - "M": "E, d MMM 'au' E, d MMM y G", - "y": "E, d MMM y 'au' E, d MMM y G" - }, - "yMMMM": { - "M": "MMMM – MMMM y G", - "y": "MMMM y – MMMM y G" + "eras": { + "eraNames": { + "0": "ère de l’Hégire" + }, + "eraAbbr": { + "0": "AH" + }, + "eraNarrow": { + "0": "H" + } + }, + "dateFormats": { + "full": "EEEE d MMMM y G", + "long": "d MMMM y G", + "medium": "d MMM y G", + "short": "dd/MM/y GGGGG" + }, + "timeFormats": { + "full": "HH.mm:ss 'h' zzzz", + "long": "HH:mm:ss z", + "medium": "HH:mm:ss", + "short": "HH:mm" + }, + "dateTimeFormats": { + "full": "{1} 'à' {0}", + "long": "{1} 'à' {0}", + "medium": "{1} {0}", + "short": "{1} {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "E d", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d MMM y G", + "GyMMMEd": "E d MMM y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "dd/MM", + "MEd": "E dd/MM", + "MMdd": "dd.MM", + "MMM": "LLL", + "MMMd": "d MMM", + "MMMEd": "E d MMM", + "MMMMd": "d MMMM", + "ms": "mm:ss", + "y": "y G", + "yM": "MM.y GGGGG", + "yMd": "dd.MM.y GGGGG", + "yMEd": "E, dd.MM.y GGGGG", + "yyyy": "y G", + "yyyyM": "M/y GGGGG", + "yyyyMd": "d/M/y GGGGG", + "yyyyMEd": "E d/M/y GGGGG", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "d MMM y G", + "yyyyMMMEd": "E d MMM y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "du {0} au {1}", + "d": { + "d": "d – d" + }, + "Gy": { + "G": "G y – G y", + "y": "G y–y" + }, + "GyM": { + "G": "GGGGG y-MM – GGGGG y-MM", + "M": "GGGGG y-MM – y-MM", + "y": "GGGGG y-MM – y-MM" + }, + "GyMd": { + "d": "GGGGG y-MM-dd – y-MM-dd", + "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", + "M": "GGGGG y-MM-dd – y-MM-dd", + "y": "GGGGG y-MM-dd – y-MM-dd" + }, + "GyMEd": { + "d": "GGGGG y-MM-dd, E – y-MM-dd, E", + "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", + "M": "GGGGG y-MM-dd, E – y-MM-dd, E", + "y": "GGGGG y-MM-dd, E – y-MM-dd, E" + }, + "GyMMM": { + "G": "G y MMM – G y MMM", + "M": "G y MMM–MMM", + "y": "G y MMM – y MMM" + }, + "GyMMMd": { + "d": "G y MMM d–d", + "G": "G y MMM d – G y MMM d", + "M": "G y MMM d – MMM d", + "y": "G y MMM d – y MMM d" + }, + "GyMMMEd": { + "d": "G y MMM d, E – MMM d, E", + "G": "G y MMM d, E – G y MMM d, E", + "M": "G y MMM d, E – MMM d, E", + "y": "G y MMM d, E – y MMM d, E" + }, + "h": { + "a": "h a – h a", + "h": "h – h a" + }, + "H": { + "H": "HH – HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm – h:mm a", + "m": "h:mm – h:mm a" + }, + "Hm": { + "H": "HH:mm – HH:mm", + "m": "HH:mm – HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm – h:mm a v", + "m": "h:mm – h:mm a v" + }, + "Hmv": { + "H": "HH:mm – HH:mm v", + "m": "HH:mm – HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h – h a v" + }, + "Hv": { + "H": "HH – HH v" + }, + "M": { + "M": "M–M" + }, + "Md": { + "d": "dd.MM – dd.MM", + "M": "dd.MM – dd.MM" + }, + "MEd": { + "d": "E, dd.MM – E, dd.MM", + "M": "E, dd.MM – E, dd.MM" + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "d–d MMM", + "M": "d MMM 'au' d MMM" + }, + "MMMEd": { + "d": "E, d 'au' E, d MMM", + "M": "E, d MMM 'au' E, d MMM" + }, + "y": { + "y": "y – y G" + }, + "yM": { + "M": "MM.y – MM.y GGGGG", + "y": "MM.y – MM.y GGGGG" + }, + "yMd": { + "d": "dd.MM.y – dd.MM.y GGGGG", + "M": "dd.MM.y – dd.MM.y GGGGG", + "y": "dd.MM.y – dd.MM.y GGGGG" + }, + "yMEd": { + "d": "E, dd.MM.y – E, dd.MM.y GGGGG", + "M": "E, dd.MM.y – E, dd.MM.y GGGGG", + "y": "E, dd.MM.y – E, dd.MM.y GGGGG" + }, + "yMMM": { + "M": "MMM–MMM y G", + "y": "MMM y 'a'` MMM y G" + }, + "yMMMd": { + "d": "d–d MMM y G", + "M": "d MMM 'au' d MMM y G", + "y": "d MMM y 'au' d MMM y G" + }, + "yMMMEd": { + "d": "E, d 'au' E, d MMM y G", + "M": "E, d MMM 'au' E, d MMM y G", + "y": "E, d MMM y 'au' E, d MMM y G" + }, + "yMMMM": { + "M": "MMMM – MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } - } - }, - "timeZoneNames": { - "hourFormat": "+HH:mm;−HH:mm", - "gmtFormat": "UTC{0}", - "gmtZeroFormat": "UTC", - "regionFormat": "heure : {0}", - "regionFormat-type-daylight": "{0} (heure d’été)", - "regionFormat-type-standard": "{0} (heure standard)", - "fallbackFormat": "{1} ({0})", - "zone": { - "America": { - "Adak": { - "exemplarCity": "Adak" - }, - "Anchorage": { - "exemplarCity": "Anchorage" - }, - "Anguilla": { - "exemplarCity": "Anguilla" - }, - "Antigua": { - "exemplarCity": "Antigua" - }, - "Araguaina": { - "exemplarCity": "Araguaína" - }, - "Argentina": { - "Rio_Gallegos": { - "exemplarCity": "Río Gallegos" + }, + "timeZoneNames": { + "hourFormat": "+HH:mm;−HH:mm", + "gmtFormat": "UTC{0}", + "gmtZeroFormat": "UTC", + "regionFormat": "heure : {0}", + "regionFormat-type-daylight": "{0} (heure d’été)", + "regionFormat-type-standard": "{0} (heure standard)", + "fallbackFormat": "{1} ({0})", + "zone": { + "America": { + "Adak": { + "exemplarCity": "Adak" }, - "San_Juan": { - "exemplarCity": "San Juan" + "Anchorage": { + "exemplarCity": "Anchorage" }, - "Ushuaia": { - "exemplarCity": "Ushuaïa" + "Anguilla": { + "exemplarCity": "Anguilla" }, - "La_Rioja": { - "exemplarCity": "La Rioja" + "Antigua": { + "exemplarCity": "Antigua" }, - "San_Luis": { - "exemplarCity": "San Luis" + "Araguaina": { + "exemplarCity": "Araguaína" }, - "Salta": { - "exemplarCity": "Salta" + "Argentina": { + "Rio_Gallegos": { + "exemplarCity": "Río Gallegos" + }, + "San_Juan": { + "exemplarCity": "San Juan" + }, + "Ushuaia": { + "exemplarCity": "Ushuaïa" + }, + "La_Rioja": { + "exemplarCity": "La Rioja" + }, + "San_Luis": { + "exemplarCity": "San Luis" + }, + "Salta": { + "exemplarCity": "Salta" + }, + "Tucuman": { + "exemplarCity": "Tucumán" + } }, - "Tucuman": { - "exemplarCity": "Tucumán" - } - }, - "Aruba": { - "exemplarCity": "Aruba" - }, - "Asuncion": { - "exemplarCity": "Asunción" - }, - "Bahia": { - "exemplarCity": "Bahia" - }, - "Bahia_Banderas": { - "exemplarCity": "Bahia de Banderas" - }, - "Barbados": { - "exemplarCity": "La Barbade" - }, - "Belem": { - "exemplarCity": "Belém" - }, - "Belize": { - "exemplarCity": "Belize" - }, - "Blanc-Sablon": { - "exemplarCity": "Blanc-Sablon" - }, - "Boa_Vista": { - "exemplarCity": "Boa Vista" - }, - "Bogota": { - "exemplarCity": "Bogota" - }, - "Boise": { - "exemplarCity": "Boise" - }, - "Buenos_Aires": { - "exemplarCity": "Buenos Aires" - }, - "Cambridge_Bay": { - "exemplarCity": "Cambridge Bay" - }, - "Campo_Grande": { - "exemplarCity": "Campo Grande" - }, - "Cancun": { - "exemplarCity": "Cancún" - }, - "Caracas": { - "exemplarCity": "Caracas" - }, - "Catamarca": { - "exemplarCity": "Catamarca" - }, - "Cayenne": { - "exemplarCity": "Cayenne" - }, - "Cayman": { - "exemplarCity": "Caïmans" - }, - "Chicago": { - "exemplarCity": "Chicago" - }, - "Chihuahua": { - "exemplarCity": "Chihuahua" - }, - "Coral_Harbour": { - "exemplarCity": "Atikokan" - }, - "Cordoba": { - "exemplarCity": "Córdoba" - }, - "Costa_Rica": { - "exemplarCity": "Costa Rica" - }, - "Creston": { - "exemplarCity": "Creston" - }, - "Cuiaba": { - "exemplarCity": "Cuiabá" - }, - "Curacao": { - "exemplarCity": "Curaçao" - }, - "Danmarkshavn": { - "exemplarCity": "Danmarkshavn" - }, - "Dawson": { - "exemplarCity": "Dawson" - }, - "Dawson_Creek": { - "exemplarCity": "Dawson Creek" - }, - "Denver": { - "exemplarCity": "Denver" - }, - "Detroit": { - "exemplarCity": "Détroit" - }, - "Dominica": { - "exemplarCity": "Dominique" - }, - "Edmonton": { - "exemplarCity": "Edmonton" - }, - "Eirunepe": { - "exemplarCity": "Eirunepé" - }, - "El_Salvador": { - "exemplarCity": "El Salvador" - }, - "Fort_Nelson": { - "exemplarCity": "Fort Nelson" - }, - "Fortaleza": { - "exemplarCity": "Fortaleza" - }, - "Glace_Bay": { - "exemplarCity": "Glace Bay" - }, - "Godthab": { - "exemplarCity": "Nuuk" - }, - "Goose_Bay": { - "exemplarCity": "Goose Bay" - }, - "Grand_Turk": { - "exemplarCity": "Grand Turk" - }, - "Grenada": { - "exemplarCity": "Grenade" - }, - "Guadeloupe": { - "exemplarCity": "Guadeloupe" - }, - "Guatemala": { - "exemplarCity": "Guatemala" - }, - "Guayaquil": { - "exemplarCity": "Guayaquil" - }, - "Guyana": { - "exemplarCity": "Guyana" - }, - "Halifax": { - "exemplarCity": "Halifax" - }, - "Havana": { - "exemplarCity": "La Havane" - }, - "Hermosillo": { - "exemplarCity": "Hermosillo" - }, - "Indiana": { - "Vincennes": { - "exemplarCity": "Vincennes [Indiana]" + "Aruba": { + "exemplarCity": "Aruba" }, - "Petersburg": { - "exemplarCity": "Petersburg [Indiana]" + "Asuncion": { + "exemplarCity": "Asunción" }, - "Tell_City": { - "exemplarCity": "Tell City [Indiana]" + "Bahia": { + "exemplarCity": "Bahia" }, - "Knox": { - "exemplarCity": "Knox [Indiana]" + "Bahia_Banderas": { + "exemplarCity": "Bahia de Banderas" }, - "Winamac": { - "exemplarCity": "Winamac [Indiana]" + "Barbados": { + "exemplarCity": "La Barbade" }, - "Marengo": { - "exemplarCity": "Marengo [Indiana]" + "Belem": { + "exemplarCity": "Belém" }, - "Vevay": { - "exemplarCity": "Vevay [Indiana]" - } - }, - "Indianapolis": { - "exemplarCity": "Indianapolis" - }, - "Inuvik": { - "exemplarCity": "Inuvik" - }, - "Iqaluit": { - "exemplarCity": "Iqaluit" - }, - "Jamaica": { - "exemplarCity": "Jamaïque" - }, - "Jujuy": { - "exemplarCity": "Jujuy" - }, - "Juneau": { - "exemplarCity": "Juneau" - }, - "Kentucky": { - "Monticello": { - "exemplarCity": "Monticello [Kentucky]" - } - }, - "Kralendijk": { - "exemplarCity": "Kralendijk" - }, - "La_Paz": { - "exemplarCity": "La Paz" - }, - "Lima": { - "exemplarCity": "Lima" - }, - "Los_Angeles": { - "exemplarCity": "Los Angeles" - }, - "Louisville": { - "exemplarCity": "Louisville" - }, - "Lower_Princes": { - "exemplarCity": "Lower Prince’s Quarter" - }, - "Maceio": { - "exemplarCity": "Maceió" - }, - "Managua": { - "exemplarCity": "Managua" - }, - "Manaus": { - "exemplarCity": "Manaos" - }, - "Marigot": { - "exemplarCity": "Marigot" - }, - "Martinique": { - "exemplarCity": "Martinique" - }, - "Matamoros": { - "exemplarCity": "Matamoros" - }, - "Mazatlan": { - "exemplarCity": "Mazatlán" - }, - "Mendoza": { - "exemplarCity": "Mendoza" - }, - "Menominee": { - "exemplarCity": "Menominee" - }, - "Merida": { - "exemplarCity": "Mérida" - }, - "Metlakatla": { - "exemplarCity": "Metlakatla" - }, - "Mexico_City": { - "exemplarCity": "Mexico" - }, - "Miquelon": { - "exemplarCity": "Miquelon" - }, - "Moncton": { - "exemplarCity": "Moncton" - }, - "Monterrey": { - "exemplarCity": "Monterrey" - }, - "Montevideo": { - "exemplarCity": "Montevideo" - }, - "Montserrat": { - "exemplarCity": "Montserrat" - }, - "Nassau": { - "exemplarCity": "Nassau" - }, - "New_York": { - "exemplarCity": "New York" - }, - "Nipigon": { - "exemplarCity": "Nipigon" - }, - "Nome": { - "exemplarCity": "Nome" - }, - "Noronha": { - "exemplarCity": "Noronha" - }, - "North_Dakota": { - "Beulah": { - "exemplarCity": "Beulah (Dakota du Nord)" + "Belize": { + "exemplarCity": "Belize" }, - "New_Salem": { - "exemplarCity": "New Salem (Dakota du Nord)" + "Blanc-Sablon": { + "exemplarCity": "Blanc-Sablon" }, - "Center": { - "exemplarCity": "Center (Dakota du Nord)" - } - }, - "Ojinaga": { - "exemplarCity": "Ojinaga" - }, - "Panama": { - "exemplarCity": "Panama" - }, - "Pangnirtung": { - "exemplarCity": "Pangnirtung" - }, - "Paramaribo": { - "exemplarCity": "Paramaribo" - }, - "Phoenix": { - "exemplarCity": "Phoenix" - }, - "Port-au-Prince": { - "exemplarCity": "Port-au-Prince" - }, - "Port_of_Spain": { - "exemplarCity": "Port-d’Espagne" - }, - "Porto_Velho": { - "exemplarCity": "Porto Velho" - }, - "Puerto_Rico": { - "exemplarCity": "Porto Rico" - }, - "Punta_Arenas": { - "exemplarCity": "Punta Arenas" - }, - "Rainy_River": { - "exemplarCity": "Rainy River" - }, - "Rankin_Inlet": { - "exemplarCity": "Rankin Inlet" - }, - "Recife": { - "exemplarCity": "Recife" - }, - "Regina": { - "exemplarCity": "Regina" - }, - "Resolute": { - "exemplarCity": "Resolute" - }, - "Rio_Branco": { - "exemplarCity": "Rio Branco" - }, - "Santa_Isabel": { - "exemplarCity": "Santa Isabel" - }, - "Santarem": { - "exemplarCity": "Santarém" - }, - "Santiago": { - "exemplarCity": "Santiago" - }, - "Santo_Domingo": { - "exemplarCity": "Saint-Domingue" - }, - "Sao_Paulo": { - "exemplarCity": "São Paulo" - }, - "Scoresbysund": { - "exemplarCity": "Ittoqqortoormiit" - }, - "Sitka": { - "exemplarCity": "Sitka" - }, - "St_Barthelemy": { - "exemplarCity": "Saint-Barthélemy" - }, - "St_Johns": { - "exemplarCity": "Saint-Jean de Terre-Neuve" - }, - "St_Kitts": { - "exemplarCity": "Saint-Christophe" - }, - "St_Lucia": { - "exemplarCity": "Sainte-Lucie" - }, - "St_Thomas": { - "exemplarCity": "Saint-Thomas" - }, - "St_Vincent": { - "exemplarCity": "Saint-Vincent" - }, - "Swift_Current": { - "exemplarCity": "Swift Current" - }, - "Tegucigalpa": { - "exemplarCity": "Tégucigalpa" - }, - "Thule": { - "exemplarCity": "Thulé" - }, - "Thunder_Bay": { - "exemplarCity": "Thunder Bay" - }, - "Tijuana": { - "exemplarCity": "Tijuana" - }, - "Toronto": { - "exemplarCity": "Toronto" - }, - "Tortola": { - "exemplarCity": "Tortola" - }, - "Vancouver": { - "exemplarCity": "Vancouver" - }, - "Whitehorse": { - "exemplarCity": "Whitehorse" - }, - "Winnipeg": { - "exemplarCity": "Winnipeg" - }, - "Yakutat": { - "exemplarCity": "Yakutat" - }, - "Yellowknife": { - "exemplarCity": "Yellowknife" - } - }, - "Atlantic": { - "Azores": { - "exemplarCity": "Açores" - }, - "Bermuda": { - "exemplarCity": "Bermudes" - }, - "Canary": { - "exemplarCity": "Îles Canaries" - }, - "Cape_Verde": { - "exemplarCity": "Cap-Vert" - }, - "Faeroe": { - "exemplarCity": "Féroé" - }, - "Madeira": { - "exemplarCity": "Madère" - }, - "Reykjavik": { - "exemplarCity": "Reykjavik" - }, - "South_Georgia": { - "exemplarCity": "Géorgie du Sud" - }, - "St_Helena": { - "exemplarCity": "Sainte-Hélène" - }, - "Stanley": { - "exemplarCity": "Stanley" - } - }, - "Europe": { - "Amsterdam": { - "exemplarCity": "Amsterdam" - }, - "Andorra": { - "exemplarCity": "Andorre" - }, - "Astrakhan": { - "exemplarCity": "Astrakhan" - }, - "Athens": { - "exemplarCity": "Athènes" - }, - "Belgrade": { - "exemplarCity": "Belgrade" - }, - "Berlin": { - "exemplarCity": "Berlin" - }, - "Bratislava": { - "exemplarCity": "Bratislava" - }, - "Brussels": { - "exemplarCity": "Bruxelles" - }, - "Bucharest": { - "exemplarCity": "Bucarest" - }, - "Budapest": { - "exemplarCity": "Budapest" - }, - "Busingen": { - "exemplarCity": "Büsingen" - }, - "Chisinau": { - "exemplarCity": "Chisinau" - }, - "Copenhagen": { - "exemplarCity": "Copenhague" - }, - "Dublin": { - "long": { - "daylight": "heure d’été irlandaise" + "Boa_Vista": { + "exemplarCity": "Boa Vista" }, - "exemplarCity": "Dublin" - }, - "Gibraltar": { - "exemplarCity": "Gibraltar" - }, - "Guernsey": { - "exemplarCity": "Guernesey" - }, - "Helsinki": { - "exemplarCity": "Helsinki" - }, - "Isle_of_Man": { - "exemplarCity": "Île de Man" - }, - "Istanbul": { - "exemplarCity": "Istanbul" - }, - "Jersey": { - "exemplarCity": "Jersey" - }, - "Kaliningrad": { - "exemplarCity": "Kaliningrad" - }, - "Kiev": { - "exemplarCity": "Kiev" - }, - "Kirov": { - "exemplarCity": "Kirov" - }, - "Lisbon": { - "exemplarCity": "Lisbonne" - }, - "Ljubljana": { - "exemplarCity": "Ljubljana" - }, - "London": { - "long": { - "daylight": "heure d’été britannique" + "Bogota": { + "exemplarCity": "Bogota" }, - "exemplarCity": "Londres" - }, - "Luxembourg": { - "exemplarCity": "Luxembourg" - }, - "Madrid": { - "exemplarCity": "Madrid" - }, - "Malta": { - "exemplarCity": "Malte" - }, - "Mariehamn": { - "exemplarCity": "Mariehamn" - }, - "Minsk": { - "exemplarCity": "Minsk" - }, - "Monaco": { - "exemplarCity": "Monaco" - }, - "Moscow": { - "exemplarCity": "Moscou" - }, - "Oslo": { - "exemplarCity": "Oslo" - }, - "Paris": { - "exemplarCity": "Paris" - }, - "Podgorica": { - "exemplarCity": "Podgorica" - }, - "Prague": { - "exemplarCity": "Prague" - }, - "Riga": { - "exemplarCity": "Riga" - }, - "Rome": { - "exemplarCity": "Rome" - }, - "Samara": { - "exemplarCity": "Samara" - }, - "San_Marino": { - "exemplarCity": "Saint-Marin" - }, - "Sarajevo": { - "exemplarCity": "Sarajevo" - }, - "Saratov": { - "exemplarCity": "Saratov" - }, - "Simferopol": { - "exemplarCity": "Simferopol" - }, - "Skopje": { - "exemplarCity": "Skopje" - }, - "Sofia": { - "exemplarCity": "Sofia" - }, - "Stockholm": { - "exemplarCity": "Stockholm" - }, - "Tallinn": { - "exemplarCity": "Tallinn" - }, - "Tirane": { - "exemplarCity": "Tirana" - }, - "Ulyanovsk": { - "exemplarCity": "Oulianovsk" - }, - "Uzhgorod": { - "exemplarCity": "Oujgorod" - }, - "Vaduz": { - "exemplarCity": "Vaduz" - }, - "Vatican": { - "exemplarCity": "Le Vatican" - }, - "Vienna": { - "exemplarCity": "Vienne" - }, - "Vilnius": { - "exemplarCity": "Vilnius" - }, - "Volgograd": { - "exemplarCity": "Volgograd" - }, - "Warsaw": { - "exemplarCity": "Varsovie" - }, - "Zagreb": { - "exemplarCity": "Zagreb" - }, - "Zaporozhye": { - "exemplarCity": "Zaporojie" - }, - "Zurich": { - "exemplarCity": "Zurich" - } - }, - "Africa": { - "Abidjan": { - "exemplarCity": "Abidjan" - }, - "Accra": { - "exemplarCity": "Accra" - }, - "Addis_Ababa": { - "exemplarCity": "Addis-Abeba" - }, - "Algiers": { - "exemplarCity": "Alger" - }, - "Asmera": { - "exemplarCity": "Asmara" - }, - "Bamako": { - "exemplarCity": "Bamako" - }, - "Bangui": { - "exemplarCity": "Bangui" - }, - "Banjul": { - "exemplarCity": "Banjul" - }, - "Bissau": { - "exemplarCity": "Bissau" - }, - "Blantyre": { - "exemplarCity": "Blantyre" - }, - "Brazzaville": { - "exemplarCity": "Brazzaville" - }, - "Bujumbura": { - "exemplarCity": "Bujumbura" - }, - "Cairo": { - "exemplarCity": "Le Caire" - }, - "Casablanca": { - "exemplarCity": "Casablanca" + "Boise": { + "exemplarCity": "Boise" + }, + "Buenos_Aires": { + "exemplarCity": "Buenos Aires" + }, + "Cambridge_Bay": { + "exemplarCity": "Cambridge Bay" + }, + "Campo_Grande": { + "exemplarCity": "Campo Grande" + }, + "Cancun": { + "exemplarCity": "Cancún" + }, + "Caracas": { + "exemplarCity": "Caracas" + }, + "Catamarca": { + "exemplarCity": "Catamarca" + }, + "Cayenne": { + "exemplarCity": "Cayenne" + }, + "Cayman": { + "exemplarCity": "Caïmans" + }, + "Chicago": { + "exemplarCity": "Chicago" + }, + "Chihuahua": { + "exemplarCity": "Chihuahua" + }, + "Coral_Harbour": { + "exemplarCity": "Atikokan" + }, + "Cordoba": { + "exemplarCity": "Córdoba" + }, + "Costa_Rica": { + "exemplarCity": "Costa Rica" + }, + "Creston": { + "exemplarCity": "Creston" + }, + "Cuiaba": { + "exemplarCity": "Cuiabá" + }, + "Curacao": { + "exemplarCity": "Curaçao" + }, + "Danmarkshavn": { + "exemplarCity": "Danmarkshavn" + }, + "Dawson": { + "exemplarCity": "Dawson" + }, + "Dawson_Creek": { + "exemplarCity": "Dawson Creek" + }, + "Denver": { + "exemplarCity": "Denver" + }, + "Detroit": { + "exemplarCity": "Détroit" + }, + "Dominica": { + "exemplarCity": "Dominique" + }, + "Edmonton": { + "exemplarCity": "Edmonton" + }, + "Eirunepe": { + "exemplarCity": "Eirunepé" + }, + "El_Salvador": { + "exemplarCity": "El Salvador" + }, + "Fort_Nelson": { + "exemplarCity": "Fort Nelson" + }, + "Fortaleza": { + "exemplarCity": "Fortaleza" + }, + "Glace_Bay": { + "exemplarCity": "Glace Bay" + }, + "Godthab": { + "exemplarCity": "Nuuk" + }, + "Goose_Bay": { + "exemplarCity": "Goose Bay" + }, + "Grand_Turk": { + "exemplarCity": "Grand Turk" + }, + "Grenada": { + "exemplarCity": "Grenade" + }, + "Guadeloupe": { + "exemplarCity": "Guadeloupe" + }, + "Guatemala": { + "exemplarCity": "Guatemala" + }, + "Guayaquil": { + "exemplarCity": "Guayaquil" + }, + "Guyana": { + "exemplarCity": "Guyana" + }, + "Halifax": { + "exemplarCity": "Halifax" + }, + "Havana": { + "exemplarCity": "La Havane" + }, + "Hermosillo": { + "exemplarCity": "Hermosillo" + }, + "Indiana": { + "Vincennes": { + "exemplarCity": "Vincennes [Indiana]" + }, + "Petersburg": { + "exemplarCity": "Petersburg [Indiana]" + }, + "Tell_City": { + "exemplarCity": "Tell City [Indiana]" + }, + "Knox": { + "exemplarCity": "Knox [Indiana]" + }, + "Winamac": { + "exemplarCity": "Winamac [Indiana]" + }, + "Marengo": { + "exemplarCity": "Marengo [Indiana]" + }, + "Vevay": { + "exemplarCity": "Vevay [Indiana]" + } + }, + "Indianapolis": { + "exemplarCity": "Indianapolis" + }, + "Inuvik": { + "exemplarCity": "Inuvik" + }, + "Iqaluit": { + "exemplarCity": "Iqaluit" + }, + "Jamaica": { + "exemplarCity": "Jamaïque" + }, + "Jujuy": { + "exemplarCity": "Jujuy" + }, + "Juneau": { + "exemplarCity": "Juneau" + }, + "Kentucky": { + "Monticello": { + "exemplarCity": "Monticello [Kentucky]" + } + }, + "Kralendijk": { + "exemplarCity": "Kralendijk" + }, + "La_Paz": { + "exemplarCity": "La Paz" + }, + "Lima": { + "exemplarCity": "Lima" + }, + "Los_Angeles": { + "exemplarCity": "Los Angeles" + }, + "Louisville": { + "exemplarCity": "Louisville" + }, + "Lower_Princes": { + "exemplarCity": "Lower Prince’s Quarter" + }, + "Maceio": { + "exemplarCity": "Maceió" + }, + "Managua": { + "exemplarCity": "Managua" + }, + "Manaus": { + "exemplarCity": "Manaos" + }, + "Marigot": { + "exemplarCity": "Marigot" + }, + "Martinique": { + "exemplarCity": "Martinique" + }, + "Matamoros": { + "exemplarCity": "Matamoros" + }, + "Mazatlan": { + "exemplarCity": "Mazatlán" + }, + "Mendoza": { + "exemplarCity": "Mendoza" + }, + "Menominee": { + "exemplarCity": "Menominee" + }, + "Merida": { + "exemplarCity": "Mérida" + }, + "Metlakatla": { + "exemplarCity": "Metlakatla" + }, + "Mexico_City": { + "exemplarCity": "Mexico" + }, + "Miquelon": { + "exemplarCity": "Miquelon" + }, + "Moncton": { + "exemplarCity": "Moncton" + }, + "Monterrey": { + "exemplarCity": "Monterrey" + }, + "Montevideo": { + "exemplarCity": "Montevideo" + }, + "Montserrat": { + "exemplarCity": "Montserrat" + }, + "Nassau": { + "exemplarCity": "Nassau" + }, + "New_York": { + "exemplarCity": "New York" + }, + "Nipigon": { + "exemplarCity": "Nipigon" + }, + "Nome": { + "exemplarCity": "Nome" + }, + "Noronha": { + "exemplarCity": "Noronha" + }, + "North_Dakota": { + "Beulah": { + "exemplarCity": "Beulah (Dakota du Nord)" + }, + "New_Salem": { + "exemplarCity": "New Salem (Dakota du Nord)" + }, + "Center": { + "exemplarCity": "Center (Dakota du Nord)" + } + }, + "Ojinaga": { + "exemplarCity": "Ojinaga" + }, + "Panama": { + "exemplarCity": "Panama" + }, + "Pangnirtung": { + "exemplarCity": "Pangnirtung" + }, + "Paramaribo": { + "exemplarCity": "Paramaribo" + }, + "Phoenix": { + "exemplarCity": "Phoenix" + }, + "Port-au-Prince": { + "exemplarCity": "Port-au-Prince" + }, + "Port_of_Spain": { + "exemplarCity": "Port-d’Espagne" + }, + "Porto_Velho": { + "exemplarCity": "Porto Velho" + }, + "Puerto_Rico": { + "exemplarCity": "Porto Rico" + }, + "Punta_Arenas": { + "exemplarCity": "Punta Arenas" + }, + "Rainy_River": { + "exemplarCity": "Rainy River" + }, + "Rankin_Inlet": { + "exemplarCity": "Rankin Inlet" + }, + "Recife": { + "exemplarCity": "Recife" + }, + "Regina": { + "exemplarCity": "Regina" + }, + "Resolute": { + "exemplarCity": "Resolute" + }, + "Rio_Branco": { + "exemplarCity": "Rio Branco" + }, + "Santa_Isabel": { + "exemplarCity": "Santa Isabel" + }, + "Santarem": { + "exemplarCity": "Santarém" + }, + "Santiago": { + "exemplarCity": "Santiago" + }, + "Santo_Domingo": { + "exemplarCity": "Saint-Domingue" + }, + "Sao_Paulo": { + "exemplarCity": "São Paulo" + }, + "Scoresbysund": { + "exemplarCity": "Ittoqqortoormiit" + }, + "Sitka": { + "exemplarCity": "Sitka" + }, + "St_Barthelemy": { + "exemplarCity": "Saint-Barthélemy" + }, + "St_Johns": { + "exemplarCity": "Saint-Jean de Terre-Neuve" + }, + "St_Kitts": { + "exemplarCity": "Saint-Christophe" + }, + "St_Lucia": { + "exemplarCity": "Sainte-Lucie" + }, + "St_Thomas": { + "exemplarCity": "Saint-Thomas" + }, + "St_Vincent": { + "exemplarCity": "Saint-Vincent" + }, + "Swift_Current": { + "exemplarCity": "Swift Current" + }, + "Tegucigalpa": { + "exemplarCity": "Tégucigalpa" + }, + "Thule": { + "exemplarCity": "Thulé" + }, + "Thunder_Bay": { + "exemplarCity": "Thunder Bay" + }, + "Tijuana": { + "exemplarCity": "Tijuana" + }, + "Toronto": { + "exemplarCity": "Toronto" + }, + "Tortola": { + "exemplarCity": "Tortola" + }, + "Vancouver": { + "exemplarCity": "Vancouver" + }, + "Whitehorse": { + "exemplarCity": "Whitehorse" + }, + "Winnipeg": { + "exemplarCity": "Winnipeg" + }, + "Yakutat": { + "exemplarCity": "Yakutat" + }, + "Yellowknife": { + "exemplarCity": "Yellowknife" + } }, - "Ceuta": { - "exemplarCity": "Ceuta" + "Atlantic": { + "Azores": { + "exemplarCity": "Açores" + }, + "Bermuda": { + "exemplarCity": "Bermudes" + }, + "Canary": { + "exemplarCity": "Îles Canaries" + }, + "Cape_Verde": { + "exemplarCity": "Cap-Vert" + }, + "Faeroe": { + "exemplarCity": "Féroé" + }, + "Madeira": { + "exemplarCity": "Madère" + }, + "Reykjavik": { + "exemplarCity": "Reykjavik" + }, + "South_Georgia": { + "exemplarCity": "Géorgie du Sud" + }, + "St_Helena": { + "exemplarCity": "Sainte-Hélène" + }, + "Stanley": { + "exemplarCity": "Stanley" + } }, - "Conakry": { - "exemplarCity": "Conakry" + "Europe": { + "Amsterdam": { + "exemplarCity": "Amsterdam" + }, + "Andorra": { + "exemplarCity": "Andorre" + }, + "Astrakhan": { + "exemplarCity": "Astrakhan" + }, + "Athens": { + "exemplarCity": "Athènes" + }, + "Belgrade": { + "exemplarCity": "Belgrade" + }, + "Berlin": { + "exemplarCity": "Berlin" + }, + "Bratislava": { + "exemplarCity": "Bratislava" + }, + "Brussels": { + "exemplarCity": "Bruxelles" + }, + "Bucharest": { + "exemplarCity": "Bucarest" + }, + "Budapest": { + "exemplarCity": "Budapest" + }, + "Busingen": { + "exemplarCity": "Büsingen" + }, + "Chisinau": { + "exemplarCity": "Chisinau" + }, + "Copenhagen": { + "exemplarCity": "Copenhague" + }, + "Dublin": { + "long": { + "daylight": "heure d’été irlandaise" + }, + "exemplarCity": "Dublin" + }, + "Gibraltar": { + "exemplarCity": "Gibraltar" + }, + "Guernsey": { + "exemplarCity": "Guernesey" + }, + "Helsinki": { + "exemplarCity": "Helsinki" + }, + "Isle_of_Man": { + "exemplarCity": "Île de Man" + }, + "Istanbul": { + "exemplarCity": "Istanbul" + }, + "Jersey": { + "exemplarCity": "Jersey" + }, + "Kaliningrad": { + "exemplarCity": "Kaliningrad" + }, + "Kiev": { + "exemplarCity": "Kiev" + }, + "Kirov": { + "exemplarCity": "Kirov" + }, + "Lisbon": { + "exemplarCity": "Lisbonne" + }, + "Ljubljana": { + "exemplarCity": "Ljubljana" + }, + "London": { + "long": { + "daylight": "heure d’été britannique" + }, + "exemplarCity": "Londres" + }, + "Luxembourg": { + "exemplarCity": "Luxembourg" + }, + "Madrid": { + "exemplarCity": "Madrid" + }, + "Malta": { + "exemplarCity": "Malte" + }, + "Mariehamn": { + "exemplarCity": "Mariehamn" + }, + "Minsk": { + "exemplarCity": "Minsk" + }, + "Monaco": { + "exemplarCity": "Monaco" + }, + "Moscow": { + "exemplarCity": "Moscou" + }, + "Oslo": { + "exemplarCity": "Oslo" + }, + "Paris": { + "exemplarCity": "Paris" + }, + "Podgorica": { + "exemplarCity": "Podgorica" + }, + "Prague": { + "exemplarCity": "Prague" + }, + "Riga": { + "exemplarCity": "Riga" + }, + "Rome": { + "exemplarCity": "Rome" + }, + "Samara": { + "exemplarCity": "Samara" + }, + "San_Marino": { + "exemplarCity": "Saint-Marin" + }, + "Sarajevo": { + "exemplarCity": "Sarajevo" + }, + "Saratov": { + "exemplarCity": "Saratov" + }, + "Simferopol": { + "exemplarCity": "Simferopol" + }, + "Skopje": { + "exemplarCity": "Skopje" + }, + "Sofia": { + "exemplarCity": "Sofia" + }, + "Stockholm": { + "exemplarCity": "Stockholm" + }, + "Tallinn": { + "exemplarCity": "Tallinn" + }, + "Tirane": { + "exemplarCity": "Tirana" + }, + "Ulyanovsk": { + "exemplarCity": "Oulianovsk" + }, + "Uzhgorod": { + "exemplarCity": "Oujgorod" + }, + "Vaduz": { + "exemplarCity": "Vaduz" + }, + "Vatican": { + "exemplarCity": "Le Vatican" + }, + "Vienna": { + "exemplarCity": "Vienne" + }, + "Vilnius": { + "exemplarCity": "Vilnius" + }, + "Volgograd": { + "exemplarCity": "Volgograd" + }, + "Warsaw": { + "exemplarCity": "Varsovie" + }, + "Zagreb": { + "exemplarCity": "Zagreb" + }, + "Zaporozhye": { + "exemplarCity": "Zaporojie" + }, + "Zurich": { + "exemplarCity": "Zurich" + } }, - "Dakar": { - "exemplarCity": "Dakar" + "Africa": { + "Abidjan": { + "exemplarCity": "Abidjan" + }, + "Accra": { + "exemplarCity": "Accra" + }, + "Addis_Ababa": { + "exemplarCity": "Addis-Abeba" + }, + "Algiers": { + "exemplarCity": "Alger" + }, + "Asmera": { + "exemplarCity": "Asmara" + }, + "Bamako": { + "exemplarCity": "Bamako" + }, + "Bangui": { + "exemplarCity": "Bangui" + }, + "Banjul": { + "exemplarCity": "Banjul" + }, + "Bissau": { + "exemplarCity": "Bissau" + }, + "Blantyre": { + "exemplarCity": "Blantyre" + }, + "Brazzaville": { + "exemplarCity": "Brazzaville" + }, + "Bujumbura": { + "exemplarCity": "Bujumbura" + }, + "Cairo": { + "exemplarCity": "Le Caire" + }, + "Casablanca": { + "exemplarCity": "Casablanca" + }, + "Ceuta": { + "exemplarCity": "Ceuta" + }, + "Conakry": { + "exemplarCity": "Conakry" + }, + "Dakar": { + "exemplarCity": "Dakar" + }, + "Dar_es_Salaam": { + "exemplarCity": "Dar es Salaam" + }, + "Djibouti": { + "exemplarCity": "Djibouti" + }, + "Douala": { + "exemplarCity": "Douala" + }, + "El_Aaiun": { + "exemplarCity": "Laâyoune" + }, + "Freetown": { + "exemplarCity": "Freetown" + }, + "Gaborone": { + "exemplarCity": "Gaborone" + }, + "Harare": { + "exemplarCity": "Harare" + }, + "Johannesburg": { + "exemplarCity": "Johannesburg" + }, + "Juba": { + "exemplarCity": "Juba" + }, + "Kampala": { + "exemplarCity": "Kampala" + }, + "Khartoum": { + "exemplarCity": "Khartoum" + }, + "Kigali": { + "exemplarCity": "Kigali" + }, + "Kinshasa": { + "exemplarCity": "Kinshasa" + }, + "Lagos": { + "exemplarCity": "Lagos" + }, + "Libreville": { + "exemplarCity": "Libreville" + }, + "Lome": { + "exemplarCity": "Lomé" + }, + "Luanda": { + "exemplarCity": "Luanda" + }, + "Lubumbashi": { + "exemplarCity": "Lubumbashi" + }, + "Lusaka": { + "exemplarCity": "Lusaka" + }, + "Malabo": { + "exemplarCity": "Malabo" + }, + "Maputo": { + "exemplarCity": "Maputo" + }, + "Maseru": { + "exemplarCity": "Maseru" + }, + "Mbabane": { + "exemplarCity": "Mbabane" + }, + "Mogadishu": { + "exemplarCity": "Mogadiscio" + }, + "Monrovia": { + "exemplarCity": "Monrovia" + }, + "Nairobi": { + "exemplarCity": "Nairobi" + }, + "Ndjamena": { + "exemplarCity": "N’Djamena" + }, + "Niamey": { + "exemplarCity": "Niamey" + }, + "Nouakchott": { + "exemplarCity": "Nouakchott" + }, + "Ouagadougou": { + "exemplarCity": "Ouagadougou" + }, + "Porto-Novo": { + "exemplarCity": "Porto-Novo" + }, + "Sao_Tome": { + "exemplarCity": "São Tomé" + }, + "Tripoli": { + "exemplarCity": "Tripoli (Libye)" + }, + "Tunis": { + "exemplarCity": "Tunis" + }, + "Windhoek": { + "exemplarCity": "Windhoek" + } }, - "Dar_es_Salaam": { - "exemplarCity": "Dar es Salaam" + "Asia": { + "Aden": { + "exemplarCity": "Aden" + }, + "Almaty": { + "exemplarCity": "Alma Ata" + }, + "Amman": { + "exemplarCity": "Amman" + }, + "Anadyr": { + "exemplarCity": "Anadyr" + }, + "Aqtau": { + "exemplarCity": "Aktaou" + }, + "Aqtobe": { + "exemplarCity": "Aktioubinsk" + }, + "Ashgabat": { + "exemplarCity": "Achgabat" + }, + "Atyrau": { + "exemplarCity": "Atyraou" + }, + "Baghdad": { + "exemplarCity": "Bagdad" + }, + "Bahrain": { + "exemplarCity": "Bahreïn" + }, + "Baku": { + "exemplarCity": "Bakou" + }, + "Bangkok": { + "exemplarCity": "Bangkok" + }, + "Barnaul": { + "exemplarCity": "Barnaul" + }, + "Beirut": { + "exemplarCity": "Beyrouth" + }, + "Bishkek": { + "exemplarCity": "Bichkek" + }, + "Brunei": { + "exemplarCity": "Brunei" + }, + "Calcutta": { + "exemplarCity": "Calcutta" + }, + "Chita": { + "exemplarCity": "Tchita" + }, + "Choibalsan": { + "exemplarCity": "Tchoïbalsan" + }, + "Colombo": { + "exemplarCity": "Colombo" + }, + "Damascus": { + "exemplarCity": "Damas" + }, + "Dhaka": { + "exemplarCity": "Dhaka" + }, + "Dili": { + "exemplarCity": "Dili" + }, + "Dubai": { + "exemplarCity": "Dubaï" + }, + "Dushanbe": { + "exemplarCity": "Douchanbé" + }, + "Famagusta": { + "exemplarCity": "Famagouste" + }, + "Gaza": { + "exemplarCity": "Gaza" + }, + "Hebron": { + "exemplarCity": "Hébron" + }, + "Hong_Kong": { + "exemplarCity": "Hong Kong" + }, + "Hovd": { + "exemplarCity": "Hovd" + }, + "Irkutsk": { + "exemplarCity": "Irkoutsk" + }, + "Jakarta": { + "exemplarCity": "Jakarta" + }, + "Jayapura": { + "exemplarCity": "Jayapura" + }, + "Jerusalem": { + "exemplarCity": "Jérusalem" + }, + "Kabul": { + "exemplarCity": "Kaboul" + }, + "Kamchatka": { + "exemplarCity": "Kamtchatka" + }, + "Karachi": { + "exemplarCity": "Karachi" + }, + "Katmandu": { + "exemplarCity": "Katmandou" + }, + "Khandyga": { + "exemplarCity": "Khandyga" + }, + "Krasnoyarsk": { + "exemplarCity": "Krasnoïarsk" + }, + "Kuala_Lumpur": { + "exemplarCity": "Kuala Lumpur" + }, + "Kuching": { + "exemplarCity": "Kuching" + }, + "Kuwait": { + "exemplarCity": "Koweït" + }, + "Macau": { + "exemplarCity": "Macao" + }, + "Magadan": { + "exemplarCity": "Magadan" + }, + "Makassar": { + "exemplarCity": "Macassar" + }, + "Manila": { + "exemplarCity": "Manille" + }, + "Muscat": { + "exemplarCity": "Mascate" + }, + "Nicosia": { + "exemplarCity": "Nicosie" + }, + "Novokuznetsk": { + "exemplarCity": "Novokuznetsk" + }, + "Novosibirsk": { + "exemplarCity": "Novossibirsk" + }, + "Omsk": { + "exemplarCity": "Omsk" + }, + "Oral": { + "exemplarCity": "Ouralsk" + }, + "Phnom_Penh": { + "exemplarCity": "Phnom Penh" + }, + "Pontianak": { + "exemplarCity": "Pontianak" + }, + "Pyongyang": { + "exemplarCity": "Pyongyang" + }, + "Qatar": { + "exemplarCity": "Qatar" + }, + "Qyzylorda": { + "exemplarCity": "Kzyl Orda" + }, + "Rangoon": { + "exemplarCity": "Rangoun" + }, + "Riyadh": { + "exemplarCity": "Riyad" + }, + "Saigon": { + "exemplarCity": "Hô-Chi-Minh-Ville" + }, + "Sakhalin": { + "exemplarCity": "Sakhaline" + }, + "Samarkand": { + "exemplarCity": "Samarcande" + }, + "Seoul": { + "exemplarCity": "Séoul" + }, + "Shanghai": { + "exemplarCity": "Shanghai" + }, + "Singapore": { + "exemplarCity": "Singapour" + }, + "Srednekolymsk": { + "exemplarCity": "Srednekolymsk" + }, + "Taipei": { + "exemplarCity": "Taipei" + }, + "Tashkent": { + "exemplarCity": "Tachkent" + }, + "Tbilisi": { + "exemplarCity": "Tbilissi" + }, + "Tehran": { + "exemplarCity": "Téhéran" + }, + "Thimphu": { + "exemplarCity": "Thimphu" + }, + "Tokyo": { + "exemplarCity": "Tokyo" + }, + "Tomsk": { + "exemplarCity": "Tomsk" + }, + "Ulaanbaatar": { + "exemplarCity": "Oulan-Bator" + }, + "Urumqi": { + "exemplarCity": "Ürümqi" + }, + "Ust-Nera": { + "exemplarCity": "Ust-Nera" + }, + "Vientiane": { + "exemplarCity": "Vientiane" + }, + "Vladivostok": { + "exemplarCity": "Vladivostok" + }, + "Yakutsk": { + "exemplarCity": "Iakoutsk" + }, + "Yekaterinburg": { + "exemplarCity": "Ekaterinbourg" + }, + "Yerevan": { + "exemplarCity": "Erevan" + } }, - "Djibouti": { - "exemplarCity": "Djibouti" + "Indian": { + "Antananarivo": { + "exemplarCity": "Antananarivo" + }, + "Chagos": { + "exemplarCity": "Chagos" + }, + "Christmas": { + "exemplarCity": "Christmas" + }, + "Cocos": { + "exemplarCity": "Cocos" + }, + "Comoro": { + "exemplarCity": "Comores" + }, + "Kerguelen": { + "exemplarCity": "Kerguelen" + }, + "Mahe": { + "exemplarCity": "Mahé" + }, + "Maldives": { + "exemplarCity": "Maldives" + }, + "Mauritius": { + "exemplarCity": "Maurice" + }, + "Mayotte": { + "exemplarCity": "Mayotte" + }, + "Reunion": { + "exemplarCity": "La Réunion" + } }, - "Douala": { - "exemplarCity": "Douala" + "Australia": { + "Adelaide": { + "exemplarCity": "Adélaïde" + }, + "Brisbane": { + "exemplarCity": "Brisbane" + }, + "Broken_Hill": { + "exemplarCity": "Broken Hill" + }, + "Currie": { + "exemplarCity": "Currie" + }, + "Darwin": { + "exemplarCity": "Darwin" + }, + "Eucla": { + "exemplarCity": "Eucla" + }, + "Hobart": { + "exemplarCity": "Hobart" + }, + "Lindeman": { + "exemplarCity": "Lindeman" + }, + "Lord_Howe": { + "exemplarCity": "Lord Howe" + }, + "Melbourne": { + "exemplarCity": "Melbourne" + }, + "Perth": { + "exemplarCity": "Perth" + }, + "Sydney": { + "exemplarCity": "Sydney" + } }, - "El_Aaiun": { - "exemplarCity": "Laâyoune" + "Pacific": { + "Apia": { + "exemplarCity": "Apia" + }, + "Auckland": { + "exemplarCity": "Auckland" + }, + "Bougainville": { + "exemplarCity": "Bougainville" + }, + "Chatham": { + "exemplarCity": "Chatham" + }, + "Easter": { + "exemplarCity": "Île de Pâques" + }, + "Efate": { + "exemplarCity": "Éfaté" + }, + "Enderbury": { + "exemplarCity": "Enderbury" + }, + "Fakaofo": { + "exemplarCity": "Fakaofo" + }, + "Fiji": { + "exemplarCity": "Fidji" + }, + "Funafuti": { + "exemplarCity": "Funafuti" + }, + "Galapagos": { + "exemplarCity": "Galápagos" + }, + "Gambier": { + "exemplarCity": "Gambier" + }, + "Guadalcanal": { + "exemplarCity": "Guadalcanal" + }, + "Guam": { + "exemplarCity": "Guam" + }, + "Honolulu": { + "exemplarCity": "Honolulu" + }, + "Johnston": { + "exemplarCity": "Johnston" + }, + "Kiritimati": { + "exemplarCity": "Kiritimati" + }, + "Kosrae": { + "exemplarCity": "Kosrae" + }, + "Kwajalein": { + "exemplarCity": "Kwajalein" + }, + "Majuro": { + "exemplarCity": "Majuro" + }, + "Marquesas": { + "exemplarCity": "Marquises" + }, + "Midway": { + "exemplarCity": "Midway" + }, + "Nauru": { + "exemplarCity": "Nauru" + }, + "Niue": { + "exemplarCity": "Niue" + }, + "Norfolk": { + "exemplarCity": "Norfolk" + }, + "Noumea": { + "exemplarCity": "Nouméa" + }, + "Pago_Pago": { + "exemplarCity": "Pago Pago" + }, + "Palau": { + "exemplarCity": "Palau" + }, + "Pitcairn": { + "exemplarCity": "Pitcairn" + }, + "Ponape": { + "exemplarCity": "Pohnpei" + }, + "Port_Moresby": { + "exemplarCity": "Port Moresby" + }, + "Rarotonga": { + "exemplarCity": "Rarotonga" + }, + "Saipan": { + "exemplarCity": "Saipan" + }, + "Tahiti": { + "exemplarCity": "Tahiti" + }, + "Tarawa": { + "exemplarCity": "Tarawa" + }, + "Tongatapu": { + "exemplarCity": "Tongatapu" + }, + "Truk": { + "exemplarCity": "Chuuk" + }, + "Wake": { + "exemplarCity": "Wake" + }, + "Wallis": { + "exemplarCity": "Wallis" + } }, - "Freetown": { - "exemplarCity": "Freetown" - }, - "Gaborone": { - "exemplarCity": "Gaborone" + "Arctic": { + "Longyearbyen": { + "exemplarCity": "Longyearbyen" + } }, - "Harare": { - "exemplarCity": "Harare" + "Antarctica": { + "Casey": { + "exemplarCity": "Casey" + }, + "Davis": { + "exemplarCity": "Davis" + }, + "DumontDUrville": { + "exemplarCity": "Dumont d’Urville" + }, + "Macquarie": { + "exemplarCity": "Macquarie" + }, + "Mawson": { + "exemplarCity": "Mawson" + }, + "McMurdo": { + "exemplarCity": "McMurdo" + }, + "Palmer": { + "exemplarCity": "Palmer" + }, + "Rothera": { + "exemplarCity": "Rothera" + }, + "Syowa": { + "exemplarCity": "Showa" + }, + "Troll": { + "exemplarCity": "Troll" + }, + "Vostok": { + "exemplarCity": "Vostok" + } }, - "Johannesburg": { - "exemplarCity": "Johannesburg" + "Etc": { + "UTC": { + "long": { + "standard": "Temps universel coordonné" + }, + "short": { + "standard": "UTC" + } + }, + "Unknown": { + "exemplarCity": "ville inconnue" + } + } + }, + "metazone": { + "Acre": { + "long": { + "generic": "heure de l’Acre", + "standard": "heure normale de l’Acre", + "daylight": "heure d’été de l’Acre" + } }, - "Juba": { - "exemplarCity": "Juba" + "Afghanistan": { + "long": { + "standard": "heure de l’Afghanistan" + } }, - "Kampala": { - "exemplarCity": "Kampala" + "Africa_Central": { + "long": { + "standard": "heure normale d’Afrique centrale" + } }, - "Khartoum": { - "exemplarCity": "Khartoum" + "Africa_Eastern": { + "long": { + "standard": "heure normale d’Afrique de l’Est" + } }, - "Kigali": { - "exemplarCity": "Kigali" + "Africa_Southern": { + "long": { + "standard": "heure normale d’Afrique méridionale" + } }, - "Kinshasa": { - "exemplarCity": "Kinshasa" + "Africa_Western": { + "long": { + "generic": "heure d’Afrique de l’Ouest", + "standard": "heure normale d’Afrique de l’Ouest", + "daylight": "heure d’été d’Afrique de l’Ouest" + } }, - "Lagos": { - "exemplarCity": "Lagos" + "Alaska": { + "long": { + "generic": "heure de l’Alaska", + "standard": "heure normale de l’Alaska", + "daylight": "heure d’été de l’Alaska" + } }, - "Libreville": { - "exemplarCity": "Libreville" + "Almaty": { + "long": { + "generic": "heure d’Alma Ata", + "standard": "heure normale d’Alma Ata", + "daylight": "heure d’été d’Alma Ata" + } }, - "Lome": { - "exemplarCity": "Lomé" + "Amazon": { + "long": { + "generic": "heure de l’Amazonie", + "standard": "heure normale de l’Amazonie", + "daylight": "heure d’été de l’Amazonie" + } }, - "Luanda": { - "exemplarCity": "Luanda" + "America_Central": { + "long": { + "generic": "heure du centre nord-américain", + "standard": "heure normale du centre nord-américain", + "daylight": "heure d’été du Centre" + } }, - "Lubumbashi": { - "exemplarCity": "Lubumbashi" + "America_Eastern": { + "long": { + "generic": "heure de l’Est nord-américain", + "standard": "heure normale de l’Est nord-américain", + "daylight": "heure d’été de l’Est" + } }, - "Lusaka": { - "exemplarCity": "Lusaka" + "America_Mountain": { + "long": { + "generic": "heure des Rocheuses", + "standard": "heure normale des Rocheuses", + "daylight": "heure d’été des Rocheuses" + } }, - "Malabo": { - "exemplarCity": "Malabo" + "America_Pacific": { + "long": { + "generic": "heure du Pacifique nord-américain", + "standard": "heure normale du Pacifique nord-américain", + "daylight": "heure d’été du Pacifique" + } }, - "Maputo": { - "exemplarCity": "Maputo" + "Anadyr": { + "long": { + "generic": "heure d’Anadyr", + "standard": "heure normale d’Anadyr", + "daylight": "heure d’été d’Anadyr" + } }, - "Maseru": { - "exemplarCity": "Maseru" + "Apia": { + "long": { + "generic": "heure d’Apia", + "standard": "heure normale d’Apia", + "daylight": "heure d’été d’Apia" + } }, - "Mbabane": { - "exemplarCity": "Mbabane" + "Aqtau": { + "long": { + "generic": "heure d’Aktaou", + "standard": "heure normale d’Aktaou", + "daylight": "heure d’été d’Aktaou" + } }, - "Mogadishu": { - "exemplarCity": "Mogadiscio" + "Aqtobe": { + "long": { + "generic": "heure d’Aqtöbe", + "standard": "heure normale d’Aqtöbe", + "daylight": "heure d’été d’Aqtöbe" + } }, - "Monrovia": { - "exemplarCity": "Monrovia" + "Arabian": { + "long": { + "generic": "heure de l’Arabie", + "standard": "heure normale de l’Arabie", + "daylight": "heure d’été de l’Arabie" + } }, - "Nairobi": { - "exemplarCity": "Nairobi" + "Argentina": { + "long": { + "generic": "heure de l’Argentine", + "standard": "heure normale d’Argentine", + "daylight": "heure d’été de l’Argentine" + } }, - "Ndjamena": { - "exemplarCity": "N’Djamena" + "Argentina_Western": { + "long": { + "generic": "heure de l’Ouest argentin", + "standard": "heure normale de l’Ouest argentin", + "daylight": "heure d’été de l’Ouest argentin" + } }, - "Niamey": { - "exemplarCity": "Niamey" + "Armenia": { + "long": { + "generic": "heure de l’Arménie", + "standard": "heure normale de l’Arménie", + "daylight": "heure d’été d’Arménie" + } }, - "Nouakchott": { - "exemplarCity": "Nouakchott" + "Atlantic": { + "long": { + "generic": "heure de l’Atlantique", + "standard": "heure normale de l’Atlantique", + "daylight": "heure d’été de l’Atlantique" + } }, - "Ouagadougou": { - "exemplarCity": "Ouagadougou" + "Australia_Central": { + "long": { + "generic": "heure du centre de l’Australie", + "standard": "heure normale du centre de l’Australie", + "daylight": "heure d’été du centre de l’Australie" + } }, - "Porto-Novo": { - "exemplarCity": "Porto-Novo" + "Australia_CentralWestern": { + "long": { + "generic": "heure du centre-ouest de l’Australie", + "standard": "heure normale du centre-ouest de l’Australie", + "daylight": "heure d’été du centre-ouest de l’Australie" + } }, - "Sao_Tome": { - "exemplarCity": "São Tomé" + "Australia_Eastern": { + "long": { + "generic": "heure de l’Est de l’Australie", + "standard": "heure normale de l’Est de l’Australie", + "daylight": "heure d’été de l’Est de l’Australie" + } }, - "Tripoli": { - "exemplarCity": "Tripoli (Libye)" + "Australia_Western": { + "long": { + "generic": "heure de l’Ouest de l’Australie", + "standard": "heure normale de l’Ouest de l’Australie", + "daylight": "heure d’été de l’Ouest de l’Australie" + } }, - "Tunis": { - "exemplarCity": "Tunis" + "Azerbaijan": { + "long": { + "generic": "heure de l’Azerbaïdjan", + "standard": "heure normale de l’Azerbaïdjan", + "daylight": "heure d’été d’Azerbaïdjan" + } }, - "Windhoek": { - "exemplarCity": "Windhoek" - } - }, - "Asia": { - "Aden": { - "exemplarCity": "Aden" + "Azores": { + "long": { + "generic": "heure des Açores", + "standard": "heure normale des Açores", + "daylight": "heure d’été des Açores" + } }, - "Almaty": { - "exemplarCity": "Alma Ata" + "Bangladesh": { + "long": { + "generic": "heure du Bangladesh", + "standard": "heure normale du Bangladesh", + "daylight": "heure d’été du Bangladesh" + } }, - "Amman": { - "exemplarCity": "Amman" + "Bhutan": { + "long": { + "standard": "heure du Bhoutan" + } }, - "Anadyr": { - "exemplarCity": "Anadyr" + "Bolivia": { + "long": { + "standard": "heure de Bolivie" + } }, - "Aqtau": { - "exemplarCity": "Aktaou" + "Brasilia": { + "long": { + "generic": "heure de Brasilia", + "standard": "heure normale de Brasilia", + "daylight": "heure d’été de Brasilia" + } }, - "Aqtobe": { - "exemplarCity": "Aktioubinsk" + "Brunei": { + "long": { + "standard": "heure du Brunéi" + } }, - "Ashgabat": { - "exemplarCity": "Achgabat" + "Cape_Verde": { + "long": { + "generic": "heure du Cap-Vert", + "standard": "heure normale du Cap-Vert", + "daylight": "heure d’été du Cap-Vert" + } }, - "Atyrau": { - "exemplarCity": "Atyraou" + "Chamorro": { + "long": { + "standard": "heure des Chamorro" + } }, - "Baghdad": { - "exemplarCity": "Bagdad" + "Chatham": { + "long": { + "generic": "heure des îles Chatham", + "standard": "heure normale des îles Chatham", + "daylight": "heure d’été des îles Chatham" + } }, - "Bahrain": { - "exemplarCity": "Bahreïn" + "Chile": { + "long": { + "generic": "heure du Chili", + "standard": "heure normale du Chili", + "daylight": "heure d’été du Chili" + } }, - "Baku": { - "exemplarCity": "Bakou" + "China": { + "long": { + "generic": "heure de la Chine", + "standard": "heure normale de la Chine", + "daylight": "heure d’été de Chine" + } }, - "Bangkok": { - "exemplarCity": "Bangkok" + "Choibalsan": { + "long": { + "generic": "heure de Choibalsan", + "standard": "heure normale de Choibalsan", + "daylight": "heure d’été de Choibalsan" + } }, - "Barnaul": { - "exemplarCity": "Barnaul" + "Christmas": { + "long": { + "standard": "heure de l’île Christmas" + } }, - "Beirut": { - "exemplarCity": "Beyrouth" + "Cocos": { + "long": { + "standard": "heure des îles Cocos" + } }, - "Bishkek": { - "exemplarCity": "Bichkek" + "Colombia": { + "long": { + "generic": "heure de Colombie", + "standard": "heure normale de Colombie", + "daylight": "heure d’été de Colombie" + } }, - "Brunei": { - "exemplarCity": "Brunei" + "Cook": { + "long": { + "generic": "heure des îles Cook", + "standard": "heure normale des îles Cook", + "daylight": "heure d’été des îles Cook" + } }, - "Calcutta": { - "exemplarCity": "Calcutta" + "Cuba": { + "long": { + "generic": "heure de Cuba", + "standard": "heure normale de Cuba", + "daylight": "heure d’été de Cuba" + } }, - "Chita": { - "exemplarCity": "Tchita" + "Davis": { + "long": { + "standard": "heure de Davis" + } }, - "Choibalsan": { - "exemplarCity": "Tchoïbalsan" + "DumontDUrville": { + "long": { + "standard": "heure de Dumont-d’Urville" + } }, - "Colombo": { - "exemplarCity": "Colombo" + "East_Timor": { + "long": { + "standard": "heure du Timor oriental" + } }, - "Damascus": { - "exemplarCity": "Damas" + "Easter": { + "long": { + "generic": "heure de l’île de Pâques", + "standard": "heure normale de l’île de Pâques", + "daylight": "heure d’été de l’île de Pâques" + } }, - "Dhaka": { - "exemplarCity": "Dhaka" + "Ecuador": { + "long": { + "standard": "heure de l’Équateur" + } }, - "Dili": { - "exemplarCity": "Dili" + "Europe_Central": { + "long": { + "generic": "heure d’Europe centrale", + "standard": "heure normale d’Europe centrale", + "daylight": "heure d’été d’Europe centrale" + } }, - "Dubai": { - "exemplarCity": "Dubaï" + "Europe_Eastern": { + "long": { + "generic": "heure d’Europe de l’Est", + "standard": "heure normale d’Europe de l’Est", + "daylight": "heure d’été d’Europe de l’Est" + } }, - "Dushanbe": { - "exemplarCity": "Douchanbé" + "Europe_Further_Eastern": { + "long": { + "standard": "heure de Kaliningrad" + } }, - "Famagusta": { - "exemplarCity": "Famagouste" + "Europe_Western": { + "long": { + "generic": "heure d’Europe de l’Ouest", + "standard": "heure normale d’Europe de l’Ouest", + "daylight": "heure d’été d’Europe de l’Ouest" + } }, - "Gaza": { - "exemplarCity": "Gaza" + "Falkland": { + "long": { + "generic": "heure des îles Malouines", + "standard": "heure normale des îles Malouines", + "daylight": "heure d’été des îles Malouines" + } }, - "Hebron": { - "exemplarCity": "Hébron" + "Fiji": { + "long": { + "generic": "heure des îles Fidji", + "standard": "heure normale des îles Fidji", + "daylight": "heure d’été des îles Fidji" + } }, - "Hong_Kong": { - "exemplarCity": "Hong Kong" + "French_Guiana": { + "long": { + "standard": "heure de la Guyane française" + } }, - "Hovd": { - "exemplarCity": "Hovd" + "French_Southern": { + "long": { + "standard": "heure des Terres australes et antarctiques françaises" + } }, - "Irkutsk": { - "exemplarCity": "Irkoutsk" + "Galapagos": { + "long": { + "standard": "heure des îles Galápagos" + } }, - "Jakarta": { - "exemplarCity": "Jakarta" + "Gambier": { + "long": { + "standard": "heure des îles Gambier" + } }, - "Jayapura": { - "exemplarCity": "Jayapura" + "Georgia": { + "long": { + "generic": "heure de la Géorgie", + "standard": "heure normale de la Géorgie", + "daylight": "heure d’été de Géorgie" + } }, - "Jerusalem": { - "exemplarCity": "Jérusalem" + "Gilbert_Islands": { + "long": { + "standard": "heure des îles Gilbert" + } }, - "Kabul": { - "exemplarCity": "Kaboul" + "GMT": { + "long": { + "standard": "heure moyenne de Greenwich" + } }, - "Kamchatka": { - "exemplarCity": "Kamtchatka" + "Greenland_Eastern": { + "long": { + "generic": "heure de l’Est du Groenland", + "standard": "heure normale de l’Est du Groenland", + "daylight": "heure d’été de l’Est du Groenland" + } }, - "Karachi": { - "exemplarCity": "Karachi" + "Greenland_Western": { + "long": { + "generic": "heure de l’Ouest du Groenland", + "standard": "heure normale de l’Ouest du Groenland", + "daylight": "heure d’été de l’Ouest du Groenland" + } }, - "Katmandu": { - "exemplarCity": "Katmandou" + "Guam": { + "long": { + "standard": "heure de Guam" + } }, - "Khandyga": { - "exemplarCity": "Khandyga" + "Gulf": { + "long": { + "standard": "heure du Golfe" + } }, - "Krasnoyarsk": { - "exemplarCity": "Krasnoïarsk" + "Guyana": { + "long": { + "standard": "heure du Guyana" + } }, - "Kuala_Lumpur": { - "exemplarCity": "Kuala Lumpur" + "Hawaii_Aleutian": { + "long": { + "generic": "heure d’Hawaii - Aléoutiennes", + "standard": "heure normale d’Hawaii - Aléoutiennes", + "daylight": "heure d’été d’Hawaii - Aléoutiennes" + } }, - "Kuching": { - "exemplarCity": "Kuching" + "Hong_Kong": { + "long": { + "generic": "heure de Hong Kong", + "standard": "heure normale de Hong Kong", + "daylight": "heure d’été de Hong Kong" + } }, - "Kuwait": { - "exemplarCity": "Koweït" + "Hovd": { + "long": { + "generic": "heure de Hovd", + "standard": "heure normale de Hovd", + "daylight": "heure d’été de Hovd" + } }, - "Macau": { - "exemplarCity": "Macao" + "India": { + "long": { + "standard": "heure de l’Inde" + } }, - "Magadan": { - "exemplarCity": "Magadan" + "Indian_Ocean": { + "long": { + "standard": "heure de l’Océan Indien" + } }, - "Makassar": { - "exemplarCity": "Macassar" + "Indochina": { + "long": { + "standard": "heure d’Indochine" + } }, - "Manila": { - "exemplarCity": "Manille" + "Indonesia_Central": { + "long": { + "standard": "heure du Centre indonésien" + } }, - "Muscat": { - "exemplarCity": "Mascate" + "Indonesia_Eastern": { + "long": { + "standard": "heure de l’Est indonésien" + } }, - "Nicosia": { - "exemplarCity": "Nicosie" + "Indonesia_Western": { + "long": { + "standard": "heure de l’Ouest indonésien" + } }, - "Novokuznetsk": { - "exemplarCity": "Novokuznetsk" + "Iran": { + "long": { + "generic": "heure de l’Iran", + "standard": "heure normale d’Iran", + "daylight": "heure d’été d’Iran" + } }, - "Novosibirsk": { - "exemplarCity": "Novossibirsk" + "Irkutsk": { + "long": { + "generic": "heure d’Irkoutsk", + "standard": "heure normale d’Irkoutsk", + "daylight": "heure d’été d’Irkoutsk" + } }, - "Omsk": { - "exemplarCity": "Omsk" + "Israel": { + "long": { + "generic": "heure d’Israël", + "standard": "heure normale d’Israël", + "daylight": "heure d’été d’Israël" + } }, - "Oral": { - "exemplarCity": "Ouralsk" + "Japan": { + "long": { + "generic": "heure du Japon", + "standard": "heure normale du Japon", + "daylight": "heure d’été du Japon" + } }, - "Phnom_Penh": { - "exemplarCity": "Phnom Penh" + "Kamchatka": { + "long": { + "generic": "heure de Petropavlovsk-Kamchatski", + "standard": "heure normale de Petropavlovsk-Kamchatski", + "daylight": "heure d’été de Petropavlovsk-Kamchatski" + } }, - "Pontianak": { - "exemplarCity": "Pontianak" + "Kazakhstan_Eastern": { + "long": { + "standard": "heure de l’Est du Kazakhstan" + } }, - "Pyongyang": { - "exemplarCity": "Pyongyang" + "Kazakhstan_Western": { + "long": { + "standard": "heure de l’Ouest du Kazakhstan" + } }, - "Qatar": { - "exemplarCity": "Qatar" + "Korea": { + "long": { + "generic": "heure de la Corée", + "standard": "heure normale de la Corée", + "daylight": "heure d’été de Corée" + } }, - "Qyzylorda": { - "exemplarCity": "Kzyl Orda" + "Kosrae": { + "long": { + "standard": "heure de Kosrae" + } }, - "Rangoon": { - "exemplarCity": "Rangoun" + "Krasnoyarsk": { + "long": { + "generic": "heure de Krasnoïarsk", + "standard": "heure normale de Krasnoïarsk", + "daylight": "heure d’été de Krasnoïarsk" + } }, - "Riyadh": { - "exemplarCity": "Riyad" + "Kyrgystan": { + "long": { + "standard": "heure du Kirghizistan" + } }, - "Saigon": { - "exemplarCity": "Hô-Chi-Minh-Ville" + "Line_Islands": { + "long": { + "standard": "heure des îles de la Ligne" + } }, - "Sakhalin": { - "exemplarCity": "Sakhaline" + "Lord_Howe": { + "long": { + "generic": "heure de Lord Howe", + "standard": "heure normale de Lord Howe", + "daylight": "heure d’été de Lord Howe" + } }, - "Samarkand": { - "exemplarCity": "Samarcande" + "Macquarie": { + "long": { + "standard": "heure de l’île Macquarie" + } }, - "Seoul": { - "exemplarCity": "Séoul" + "Magadan": { + "long": { + "generic": "heure de Magadan", + "standard": "heure normale de Magadan", + "daylight": "heure d’été de Magadan" + } }, - "Shanghai": { - "exemplarCity": "Shanghai" + "Malaysia": { + "long": { + "standard": "heure de la Malaisie" + } }, - "Singapore": { - "exemplarCity": "Singapour" + "Maldives": { + "long": { + "standard": "heure des Maldives" + } }, - "Srednekolymsk": { - "exemplarCity": "Srednekolymsk" + "Marquesas": { + "long": { + "standard": "heure des îles Marquises" + } }, - "Taipei": { - "exemplarCity": "Taipei" - }, - "Tashkent": { - "exemplarCity": "Tachkent" - }, - "Tbilisi": { - "exemplarCity": "Tbilissi" - }, - "Tehran": { - "exemplarCity": "Téhéran" - }, - "Thimphu": { - "exemplarCity": "Thimphu" - }, - "Tokyo": { - "exemplarCity": "Tokyo" - }, - "Tomsk": { - "exemplarCity": "Tomsk" - }, - "Ulaanbaatar": { - "exemplarCity": "Oulan-Bator" - }, - "Urumqi": { - "exemplarCity": "Ürümqi" - }, - "Ust-Nera": { - "exemplarCity": "Ust-Nera" - }, - "Vientiane": { - "exemplarCity": "Vientiane" - }, - "Vladivostok": { - "exemplarCity": "Vladivostok" - }, - "Yakutsk": { - "exemplarCity": "Iakoutsk" - }, - "Yekaterinburg": { - "exemplarCity": "Ekaterinbourg" - }, - "Yerevan": { - "exemplarCity": "Erevan" - } - }, - "Indian": { - "Antananarivo": { - "exemplarCity": "Antananarivo" - }, - "Chagos": { - "exemplarCity": "Chagos" - }, - "Christmas": { - "exemplarCity": "Christmas" - }, - "Cocos": { - "exemplarCity": "Cocos" - }, - "Comoro": { - "exemplarCity": "Comores" - }, - "Kerguelen": { - "exemplarCity": "Kerguelen" - }, - "Mahe": { - "exemplarCity": "Mahé" - }, - "Maldives": { - "exemplarCity": "Maldives" + "Marshall_Islands": { + "long": { + "standard": "heure des îles Marshall" + } }, "Mauritius": { - "exemplarCity": "Maurice" - }, - "Mayotte": { - "exemplarCity": "Mayotte" - }, - "Reunion": { - "exemplarCity": "La Réunion" - } - }, - "Australia": { - "Adelaide": { - "exemplarCity": "Adélaïde" - }, - "Brisbane": { - "exemplarCity": "Brisbane" - }, - "Broken_Hill": { - "exemplarCity": "Broken Hill" + "long": { + "generic": "heure de Maurice", + "standard": "heure normale de Maurice", + "daylight": "heure d’été de Maurice" + } }, - "Currie": { - "exemplarCity": "Currie" + "Mawson": { + "long": { + "standard": "heure de Mawson" + } }, - "Darwin": { - "exemplarCity": "Darwin" + "Mexico_Northwest": { + "long": { + "generic": "heure du Nord-Ouest du Mexique", + "standard": "heure normale du Nord-Ouest du Mexique", + "daylight": "heure d’été du Nord-Ouest du Mexique" + } }, - "Eucla": { - "exemplarCity": "Eucla" + "Mexico_Pacific": { + "long": { + "generic": "heure du Pacifique mexicain", + "standard": "heure normale du Pacifique mexicain", + "daylight": "heure d’été du Pacifique mexicain" + } }, - "Hobart": { - "exemplarCity": "Hobart" + "Mongolia": { + "long": { + "generic": "heure d’Oulan-Bator", + "standard": "heure normale d’Oulan-Bator", + "daylight": "heure d’été d’Oulan-Bator" + } }, - "Lindeman": { - "exemplarCity": "Lindeman" + "Moscow": { + "long": { + "generic": "heure de Moscou", + "standard": "heure normale de Moscou", + "daylight": "heure d’été de Moscou" + } }, - "Lord_Howe": { - "exemplarCity": "Lord Howe" + "Myanmar": { + "long": { + "standard": "heure du Myanmar" + } }, - "Melbourne": { - "exemplarCity": "Melbourne" + "Nauru": { + "long": { + "standard": "heure de Nauru" + } }, - "Perth": { - "exemplarCity": "Perth" + "Nepal": { + "long": { + "standard": "heure du Népal" + } }, - "Sydney": { - "exemplarCity": "Sydney" - } - }, - "Pacific": { - "Apia": { - "exemplarCity": "Apia" + "New_Caledonia": { + "long": { + "generic": "heure de la Nouvelle-Calédonie", + "standard": "heure normale de la Nouvelle-Calédonie", + "daylight": "heure d’été de Nouvelle-Calédonie" + } }, - "Auckland": { - "exemplarCity": "Auckland" + "New_Zealand": { + "long": { + "generic": "heure de la Nouvelle-Zélande", + "standard": "heure normale de la Nouvelle-Zélande", + "daylight": "heure d’été de la Nouvelle-Zélande" + } }, - "Bougainville": { - "exemplarCity": "Bougainville" + "Newfoundland": { + "long": { + "generic": "heure de Terre-Neuve", + "standard": "heure normale de Terre-Neuve", + "daylight": "heure d’été de Terre-Neuve" + } }, - "Chatham": { - "exemplarCity": "Chatham" + "Niue": { + "long": { + "standard": "heure de Nioué" + } }, - "Easter": { - "exemplarCity": "Île de Pâques" + "Norfolk": { + "long": { + "standard": "heure de l’île Norfolk" + } }, - "Efate": { - "exemplarCity": "Éfaté" + "Noronha": { + "long": { + "generic": "heure de Fernando de Noronha", + "standard": "heure normale de Fernando de Noronha", + "daylight": "heure d’été de Fernando de Noronha" + } }, - "Enderbury": { - "exemplarCity": "Enderbury" + "North_Mariana": { + "long": { + "standard": "heure des îles Mariannes du Nord" + } }, - "Fakaofo": { - "exemplarCity": "Fakaofo" + "Novosibirsk": { + "long": { + "generic": "heure de Novossibirsk", + "standard": "heure normale de Novossibirsk", + "daylight": "heure d’été de Novossibirsk" + } }, - "Fiji": { - "exemplarCity": "Fidji" + "Omsk": { + "long": { + "generic": "heure de Omsk", + "standard": "heure normale de Omsk", + "daylight": "heure d’été de Omsk" + } }, - "Funafuti": { - "exemplarCity": "Funafuti" + "Pakistan": { + "long": { + "generic": "heure du Pakistan", + "standard": "heure normale du Pakistan", + "daylight": "heure d’été du Pakistan" + } }, - "Galapagos": { - "exemplarCity": "Galápagos" + "Palau": { + "long": { + "standard": "heure des Palaos" + } }, - "Gambier": { - "exemplarCity": "Gambier" + "Papua_New_Guinea": { + "long": { + "standard": "heure de la Papouasie-Nouvelle-Guinée" + } }, - "Guadalcanal": { - "exemplarCity": "Guadalcanal" + "Paraguay": { + "long": { + "generic": "heure du Paraguay", + "standard": "heure normale du Paraguay", + "daylight": "heure d’été du Paraguay" + } }, - "Guam": { - "exemplarCity": "Guam" + "Peru": { + "long": { + "generic": "heure du Pérou", + "standard": "heure normale du Pérou", + "daylight": "heure d’été du Pérou" + } }, - "Honolulu": { - "exemplarCity": "Honolulu" + "Philippines": { + "long": { + "generic": "heure des Philippines", + "standard": "heure normale des Philippines", + "daylight": "heure d’été des Philippines" + } }, - "Johnston": { - "exemplarCity": "Johnston" + "Phoenix_Islands": { + "long": { + "standard": "heure des îles Phoenix" + } }, - "Kiritimati": { - "exemplarCity": "Kiritimati" + "Pierre_Miquelon": { + "long": { + "generic": "heure de Saint-Pierre-et-Miquelon", + "standard": "heure normale de Saint-Pierre-et-Miquelon", + "daylight": "heure d’été de Saint-Pierre-et-Miquelon" + } }, - "Kosrae": { - "exemplarCity": "Kosrae" + "Pitcairn": { + "long": { + "standard": "heure des îles Pitcairn" + } }, - "Kwajalein": { - "exemplarCity": "Kwajalein" + "Ponape": { + "long": { + "standard": "heure de l’île de Pohnpei" + } }, - "Majuro": { - "exemplarCity": "Majuro" + "Pyongyang": { + "long": { + "standard": "heure de Pyongyang" + } }, - "Marquesas": { - "exemplarCity": "Marquises" + "Reunion": { + "long": { + "standard": "heure de La Réunion" + } }, - "Midway": { - "exemplarCity": "Midway" + "Rothera": { + "long": { + "standard": "heure de Rothera" + } }, - "Nauru": { - "exemplarCity": "Nauru" + "Sakhalin": { + "long": { + "generic": "heure de Sakhaline", + "standard": "heure normale de Sakhaline", + "daylight": "heure d’été de Sakhaline" + } }, - "Niue": { - "exemplarCity": "Niue" + "Samara": { + "long": { + "generic": "heure de Samara", + "standard": "heure normale de Samara", + "daylight": "heure d’été de Samara" + } }, - "Norfolk": { - "exemplarCity": "Norfolk" + "Samoa": { + "long": { + "generic": "heure des Samoa", + "standard": "heure normale des Samoa", + "daylight": "heure d’été des Samoa" + } }, - "Noumea": { - "exemplarCity": "Nouméa" + "Seychelles": { + "long": { + "standard": "heure des Seychelles" + } }, - "Pago_Pago": { - "exemplarCity": "Pago Pago" + "Singapore": { + "long": { + "standard": "heure de Singapour" + } }, - "Palau": { - "exemplarCity": "Palau" + "Solomon": { + "long": { + "standard": "heure des îles Salomon" + } }, - "Pitcairn": { - "exemplarCity": "Pitcairn" + "South_Georgia": { + "long": { + "standard": "heure de Géorgie du Sud" + } }, - "Ponape": { - "exemplarCity": "Pohnpei" + "Suriname": { + "long": { + "standard": "heure du Suriname" + } }, - "Port_Moresby": { - "exemplarCity": "Port Moresby" + "Syowa": { + "long": { + "standard": "heure de Syowa" + } }, - "Rarotonga": { - "exemplarCity": "Rarotonga" + "Tahiti": { + "long": { + "standard": "heure de Tahiti" + } }, - "Saipan": { - "exemplarCity": "Saipan" + "Taipei": { + "long": { + "generic": "heure de Taipei", + "standard": "heure normale de Taipei", + "daylight": "heure d’été de Taipei" + } }, - "Tahiti": { - "exemplarCity": "Tahiti" + "Tajikistan": { + "long": { + "standard": "heure du Tadjikistan" + } }, - "Tarawa": { - "exemplarCity": "Tarawa" + "Tokelau": { + "long": { + "standard": "heure de Tokelau" + } }, - "Tongatapu": { - "exemplarCity": "Tongatapu" + "Tonga": { + "long": { + "generic": "heure des Tonga", + "standard": "heure normale des Tonga", + "daylight": "heure d’été de Tonga" + } }, "Truk": { - "exemplarCity": "Chuuk" + "long": { + "standard": "heure de Chuuk" + } }, - "Wake": { - "exemplarCity": "Wake" + "Turkmenistan": { + "long": { + "generic": "heure du Turkménistan", + "standard": "heure normale du Turkménistan", + "daylight": "heure d’été du Turkménistan" + } }, - "Wallis": { - "exemplarCity": "Wallis" - } - }, - "Arctic": { - "Longyearbyen": { - "exemplarCity": "Longyearbyen" - } - }, - "Antarctica": { - "Casey": { - "exemplarCity": "Casey" + "Tuvalu": { + "long": { + "standard": "heure des Tuvalu" + } }, - "Davis": { - "exemplarCity": "Davis" + "Uruguay": { + "long": { + "generic": "heure de l’Uruguay", + "standard": "heure normale de l’Uruguay", + "daylight": "heure d’été de l’Uruguay" + } }, - "DumontDUrville": { - "exemplarCity": "Dumont d’Urville" + "Uzbekistan": { + "long": { + "generic": "heure de l’Ouzbékistan", + "standard": "heure normale de l’Ouzbékistan", + "daylight": "heure d’été de l’Ouzbékistan" + } }, - "Macquarie": { - "exemplarCity": "Macquarie" + "Vanuatu": { + "long": { + "generic": "heure du Vanuatu", + "standard": "heure normale du Vanuatu", + "daylight": "heure d’été de Vanuatu" + } }, - "Mawson": { - "exemplarCity": "Mawson" + "Venezuela": { + "long": { + "standard": "heure du Venezuela" + } }, - "McMurdo": { - "exemplarCity": "McMurdo" + "Vladivostok": { + "long": { + "generic": "heure de Vladivostok", + "standard": "heure normale de Vladivostok", + "daylight": "heure d’été de Vladivostok" + } }, - "Palmer": { - "exemplarCity": "Palmer" + "Volgograd": { + "long": { + "generic": "heure de Volgograd", + "standard": "heure normale de Volgograd", + "daylight": "heure d’été de Volgograd" + } }, - "Rothera": { - "exemplarCity": "Rothera" + "Vostok": { + "long": { + "standard": "heure de Vostok" + } }, - "Syowa": { - "exemplarCity": "Showa" + "Wake": { + "long": { + "standard": "heure de l’île Wake" + } }, - "Troll": { - "exemplarCity": "Troll" + "Wallis": { + "long": { + "standard": "heure de Wallis-et-Futuna" + } }, - "Vostok": { - "exemplarCity": "Vostok" - } - }, - "Etc": { - "UTC": { + "Yakutsk": { "long": { - "standard": "Temps universel coordonné" - }, - "short": { - "standard": "UTC" + "generic": "heure de Iakoutsk", + "standard": "heure normale de Iakoutsk", + "daylight": "heure d’été de Iakoutsk" } }, - "Unknown": { - "exemplarCity": "ville inconnue" + "Yekaterinburg": { + "long": { + "generic": "heure d’Ekaterinbourg", + "standard": "heure normale d’Ekaterinbourg", + "daylight": "heure d’été d’Ekaterinbourg" + } } } + } + }, + "numbers": { + "defaultNumberingSystem": "latn", + "otherNumberingSystems": { + "native": "latn" + }, + "minimumGroupingDigits": "1", + "symbols-numberSystem-latn": { + "decimal": ",", + "group": " ", + "list": ";", + "percentSign": "%", + "plusSign": "+", + "minusSign": "-", + "exponential": "E", + "superscriptingExponent": "×", + "perMille": "‰", + "infinity": "∞", + "nan": "NaN", + "currencyDecimal": ".", + "timeSeparator": ":" + }, + "decimalFormats-numberSystem-latn": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-one": "0 millier", + "1000-count-other": "0 mille", + "10000-count-one": "00 mille", + "10000-count-other": "00 mille", + "100000-count-one": "000 mille", + "100000-count-other": "000 mille", + "1000000-count-one": "0 million", + "1000000-count-other": "0 millions", + "10000000-count-one": "00 million", + "10000000-count-other": "00 millions", + "100000000-count-one": "000 million", + "100000000-count-other": "000 millions", + "1000000000-count-one": "0 milliard", + "1000000000-count-other": "0 milliards", + "10000000000-count-one": "00 milliard", + "10000000000-count-other": "00 milliards", + "100000000000-count-one": "000 milliard", + "100000000000-count-other": "000 milliards", + "1000000000000-count-one": "0 billion", + "1000000000000-count-other": "0 billions", + "10000000000000-count-one": "00 billion", + "10000000000000-count-other": "00 billions", + "100000000000000-count-one": "000 billion", + "100000000000000-count-other": "000 billions" + } }, - "metazone": { - "Acre": { - "long": { - "generic": "heure de l’Acre", - "standard": "heure normale de l’Acre", - "daylight": "heure d’été de l’Acre" - } - }, - "Afghanistan": { - "long": { - "standard": "heure de l’Afghanistan" - } - }, - "Africa_Central": { - "long": { - "standard": "heure normale d’Afrique centrale" - } - }, - "Africa_Eastern": { - "long": { - "standard": "heure normale d’Afrique de l’Est" - } - }, - "Africa_Southern": { - "long": { - "standard": "heure normale d’Afrique méridionale" - } - }, - "Africa_Western": { - "long": { - "generic": "heure d’Afrique de l’Ouest", - "standard": "heure normale d’Afrique de l’Ouest", - "daylight": "heure d’été d’Afrique de l’Ouest" - } - }, - "Alaska": { - "long": { - "generic": "heure de l’Alaska", - "standard": "heure normale de l’Alaska", - "daylight": "heure d’été de l’Alaska" - } - }, - "Almaty": { - "long": { - "generic": "heure d’Alma Ata", - "standard": "heure normale d’Alma Ata", - "daylight": "heure d’été d’Alma Ata" - } - }, - "Amazon": { - "long": { - "generic": "heure de l’Amazonie", - "standard": "heure normale de l’Amazonie", - "daylight": "heure d’été de l’Amazonie" - } - }, - "America_Central": { - "long": { - "generic": "heure du centre nord-américain", - "standard": "heure normale du centre nord-américain", - "daylight": "heure d’été du Centre" - } - }, - "America_Eastern": { - "long": { - "generic": "heure de l’Est nord-américain", - "standard": "heure normale de l’Est nord-américain", - "daylight": "heure d’été de l’Est" - } - }, - "America_Mountain": { - "long": { - "generic": "heure des Rocheuses", - "standard": "heure normale des Rocheuses", - "daylight": "heure d’été des Rocheuses" - } - }, - "America_Pacific": { - "long": { - "generic": "heure du Pacifique nord-américain", - "standard": "heure normale du Pacifique nord-américain", - "daylight": "heure d’été du Pacifique" - } - }, - "Anadyr": { - "long": { - "generic": "heure d’Anadyr", - "standard": "heure normale d’Anadyr", - "daylight": "heure d’été d’Anadyr" - } - }, - "Apia": { - "long": { - "generic": "heure d’Apia", - "standard": "heure normale d’Apia", - "daylight": "heure d’été d’Apia" - } - }, - "Aqtau": { - "long": { - "generic": "heure d’Aktaou", - "standard": "heure normale d’Aktaou", - "daylight": "heure d’été d’Aktaou" - } - }, - "Aqtobe": { - "long": { - "generic": "heure d’Aqtöbe", - "standard": "heure normale d’Aqtöbe", - "daylight": "heure d’été d’Aqtöbe" - } - }, - "Arabian": { - "long": { - "generic": "heure de l’Arabie", - "standard": "heure normale de l’Arabie", - "daylight": "heure d’été de l’Arabie" - } - }, - "Argentina": { - "long": { - "generic": "heure de l’Argentine", - "standard": "heure normale d’Argentine", - "daylight": "heure d’été de l’Argentine" - } - }, - "Argentina_Western": { - "long": { - "generic": "heure de l’Ouest argentin", - "standard": "heure normale de l’Ouest argentin", - "daylight": "heure d’été de l’Ouest argentin" - } - }, - "Armenia": { - "long": { - "generic": "heure de l’Arménie", - "standard": "heure normale de l’Arménie", - "daylight": "heure d’été d’Arménie" - } - }, - "Atlantic": { - "long": { - "generic": "heure de l’Atlantique", - "standard": "heure normale de l’Atlantique", - "daylight": "heure d’été de l’Atlantique" - } - }, - "Australia_Central": { - "long": { - "generic": "heure du centre de l’Australie", - "standard": "heure normale du centre de l’Australie", - "daylight": "heure d’été du centre de l’Australie" - } - }, - "Australia_CentralWestern": { - "long": { - "generic": "heure du centre-ouest de l’Australie", - "standard": "heure normale du centre-ouest de l’Australie", - "daylight": "heure d’été du centre-ouest de l’Australie" - } - }, - "Australia_Eastern": { - "long": { - "generic": "heure de l’Est de l’Australie", - "standard": "heure normale de l’Est de l’Australie", - "daylight": "heure d’été de l’Est de l’Australie" - } - }, - "Australia_Western": { - "long": { - "generic": "heure de l’Ouest de l’Australie", - "standard": "heure normale de l’Ouest de l’Australie", - "daylight": "heure d’été de l’Ouest de l’Australie" - } - }, - "Azerbaijan": { - "long": { - "generic": "heure de l’Azerbaïdjan", - "standard": "heure normale de l’Azerbaïdjan", - "daylight": "heure d’été d’Azerbaïdjan" - } - }, - "Azores": { - "long": { - "generic": "heure des Açores", - "standard": "heure normale des Açores", - "daylight": "heure d’été des Açores" - } - }, - "Bangladesh": { - "long": { - "generic": "heure du Bangladesh", - "standard": "heure normale du Bangladesh", - "daylight": "heure d’été du Bangladesh" - } - }, - "Bhutan": { - "long": { - "standard": "heure du Bhoutan" - } - }, - "Bolivia": { - "long": { - "standard": "heure de Bolivie" - } - }, - "Brasilia": { - "long": { - "generic": "heure de Brasilia", - "standard": "heure normale de Brasilia", - "daylight": "heure d’été de Brasilia" - } - }, - "Brunei": { - "long": { - "standard": "heure du Brunéi" - } - }, - "Cape_Verde": { - "long": { - "generic": "heure du Cap-Vert", - "standard": "heure normale du Cap-Vert", - "daylight": "heure d’été du Cap-Vert" - } - }, - "Chamorro": { - "long": { - "standard": "heure des Chamorro" - } - }, - "Chatham": { - "long": { - "generic": "heure des îles Chatham", - "standard": "heure normale des îles Chatham", - "daylight": "heure d’été des îles Chatham" - } - }, - "Chile": { - "long": { - "generic": "heure du Chili", - "standard": "heure normale du Chili", - "daylight": "heure d’été du Chili" - } - }, - "China": { - "long": { - "generic": "heure de la Chine", - "standard": "heure normale de la Chine", - "daylight": "heure d’été de Chine" - } - }, - "Choibalsan": { - "long": { - "generic": "heure de Choibalsan", - "standard": "heure normale de Choibalsan", - "daylight": "heure d’été de Choibalsan" - } - }, - "Christmas": { - "long": { - "standard": "heure de l’île Christmas" - } - }, - "Cocos": { - "long": { - "standard": "heure des îles Cocos" - } - }, - "Colombia": { - "long": { - "generic": "heure de Colombie", - "standard": "heure normale de Colombie", - "daylight": "heure d’été de Colombie" - } - }, - "Cook": { - "long": { - "generic": "heure des îles Cook", - "standard": "heure normale des îles Cook", - "daylight": "heure d’été des îles Cook" - } - }, - "Cuba": { - "long": { - "generic": "heure de Cuba", - "standard": "heure normale de Cuba", - "daylight": "heure d’été de Cuba" - } - }, - "Davis": { - "long": { - "standard": "heure de Davis" - } - }, - "DumontDUrville": { - "long": { - "standard": "heure de Dumont-d’Urville" - } - }, - "East_Timor": { - "long": { - "standard": "heure du Timor oriental" - } - }, - "Easter": { - "long": { - "generic": "heure de l’île de Pâques", - "standard": "heure normale de l’île de Pâques", - "daylight": "heure d’été de l’île de Pâques" - } - }, - "Ecuador": { - "long": { - "standard": "heure de l’Équateur" - } - }, - "Europe_Central": { - "long": { - "generic": "heure d’Europe centrale", - "standard": "heure normale d’Europe centrale", - "daylight": "heure d’été d’Europe centrale" - } - }, - "Europe_Eastern": { - "long": { - "generic": "heure d’Europe de l’Est", - "standard": "heure normale d’Europe de l’Est", - "daylight": "heure d’été d’Europe de l’Est" - } - }, - "Europe_Further_Eastern": { - "long": { - "standard": "heure de Kaliningrad" - } - }, - "Europe_Western": { - "long": { - "generic": "heure d’Europe de l’Ouest", - "standard": "heure normale d’Europe de l’Ouest", - "daylight": "heure d’été d’Europe de l’Ouest" - } - }, - "Falkland": { - "long": { - "generic": "heure des îles Malouines", - "standard": "heure normale des îles Malouines", - "daylight": "heure d’été des îles Malouines" - } - }, - "Fiji": { - "long": { - "generic": "heure des îles Fidji", - "standard": "heure normale des îles Fidji", - "daylight": "heure d’été des îles Fidji" - } - }, - "French_Guiana": { - "long": { - "standard": "heure de la Guyane française" - } - }, - "French_Southern": { - "long": { - "standard": "heure des Terres australes et antarctiques françaises" - } - }, - "Galapagos": { - "long": { - "standard": "heure des îles Galápagos" - } - }, - "Gambier": { - "long": { - "standard": "heure des îles Gambier" - } - }, - "Georgia": { - "long": { - "generic": "heure de la Géorgie", - "standard": "heure normale de la Géorgie", - "daylight": "heure d’été de Géorgie" - } - }, - "Gilbert_Islands": { - "long": { - "standard": "heure des îles Gilbert" - } - }, - "GMT": { - "long": { - "standard": "heure moyenne de Greenwich" - } - }, - "Greenland_Eastern": { - "long": { - "generic": "heure de l’Est du Groenland", - "standard": "heure normale de l’Est du Groenland", - "daylight": "heure d’été de l’Est du Groenland" - } - }, - "Greenland_Western": { - "long": { - "generic": "heure de l’Ouest du Groenland", - "standard": "heure normale de l’Ouest du Groenland", - "daylight": "heure d’été de l’Ouest du Groenland" - } - }, - "Guam": { - "long": { - "standard": "heure de Guam" - } - }, - "Gulf": { - "long": { - "standard": "heure du Golfe" - } - }, - "Guyana": { - "long": { - "standard": "heure du Guyana" - } - }, - "Hawaii_Aleutian": { - "long": { - "generic": "heure d’Hawaii - Aléoutiennes", - "standard": "heure normale d’Hawaii - Aléoutiennes", - "daylight": "heure d’été d’Hawaii - Aléoutiennes" - } - }, - "Hong_Kong": { - "long": { - "generic": "heure de Hong Kong", - "standard": "heure normale de Hong Kong", - "daylight": "heure d’été de Hong Kong" - } - }, - "Hovd": { - "long": { - "generic": "heure de Hovd", - "standard": "heure normale de Hovd", - "daylight": "heure d’été de Hovd" - } - }, - "India": { - "long": { - "standard": "heure de l’Inde" - } - }, - "Indian_Ocean": { - "long": { - "standard": "heure de l’Océan Indien" - } - }, - "Indochina": { - "long": { - "standard": "heure d’Indochine" - } - }, - "Indonesia_Central": { - "long": { - "standard": "heure du Centre indonésien" - } - }, - "Indonesia_Eastern": { - "long": { - "standard": "heure de l’Est indonésien" - } - }, - "Indonesia_Western": { - "long": { - "standard": "heure de l’Ouest indonésien" - } - }, - "Iran": { - "long": { - "generic": "heure de l’Iran", - "standard": "heure normale d’Iran", - "daylight": "heure d’été d’Iran" - } - }, - "Irkutsk": { - "long": { - "generic": "heure d’Irkoutsk", - "standard": "heure normale d’Irkoutsk", - "daylight": "heure d’été d’Irkoutsk" - } - }, - "Israel": { - "long": { - "generic": "heure d’Israël", - "standard": "heure normale d’Israël", - "daylight": "heure d’été d’Israël" - } - }, - "Japan": { - "long": { - "generic": "heure du Japon", - "standard": "heure normale du Japon", - "daylight": "heure d’été du Japon" - } - }, - "Kamchatka": { - "long": { - "generic": "heure de Petropavlovsk-Kamchatski", - "standard": "heure normale de Petropavlovsk-Kamchatski", - "daylight": "heure d’été de Petropavlovsk-Kamchatski" - } - }, - "Kazakhstan_Eastern": { - "long": { - "standard": "heure de l’Est du Kazakhstan" - } - }, - "Kazakhstan_Western": { - "long": { - "standard": "heure de l’Ouest du Kazakhstan" - } - }, - "Korea": { - "long": { - "generic": "heure de la Corée", - "standard": "heure normale de la Corée", - "daylight": "heure d’été de Corée" - } - }, - "Kosrae": { - "long": { - "standard": "heure de Kosrae" - } - }, - "Krasnoyarsk": { - "long": { - "generic": "heure de Krasnoïarsk", - "standard": "heure normale de Krasnoïarsk", - "daylight": "heure d’été de Krasnoïarsk" - } - }, - "Kyrgystan": { - "long": { - "standard": "heure du Kirghizistan" - } - }, - "Line_Islands": { - "long": { - "standard": "heure des îles de la Ligne" - } - }, - "Lord_Howe": { - "long": { - "generic": "heure de Lord Howe", - "standard": "heure normale de Lord Howe", - "daylight": "heure d’été de Lord Howe" - } - }, - "Macquarie": { - "long": { - "standard": "heure de l’île Macquarie" - } - }, - "Magadan": { - "long": { - "generic": "heure de Magadan", - "standard": "heure normale de Magadan", - "daylight": "heure d’été de Magadan" - } - }, - "Malaysia": { - "long": { - "standard": "heure de la Malaisie" - } - }, - "Maldives": { - "long": { - "standard": "heure des Maldives" - } - }, - "Marquesas": { - "long": { - "standard": "heure des îles Marquises" - } - }, - "Marshall_Islands": { - "long": { - "standard": "heure des îles Marshall" - } - }, - "Mauritius": { - "long": { - "generic": "heure de Maurice", - "standard": "heure normale de Maurice", - "daylight": "heure d’été de Maurice" - } - }, - "Mawson": { - "long": { - "standard": "heure de Mawson" - } - }, - "Mexico_Northwest": { - "long": { - "generic": "heure du Nord-Ouest du Mexique", - "standard": "heure normale du Nord-Ouest du Mexique", - "daylight": "heure d’été du Nord-Ouest du Mexique" - } - }, - "Mexico_Pacific": { - "long": { - "generic": "heure du Pacifique mexicain", - "standard": "heure normale du Pacifique mexicain", - "daylight": "heure d’été du Pacifique mexicain" - } - }, - "Mongolia": { - "long": { - "generic": "heure d’Oulan-Bator", - "standard": "heure normale d’Oulan-Bator", - "daylight": "heure d’été d’Oulan-Bator" - } - }, - "Moscow": { - "long": { - "generic": "heure de Moscou", - "standard": "heure normale de Moscou", - "daylight": "heure d’été de Moscou" - } - }, - "Myanmar": { - "long": { - "standard": "heure du Myanmar" - } - }, - "Nauru": { - "long": { - "standard": "heure de Nauru" - } - }, - "Nepal": { - "long": { - "standard": "heure du Népal" - } - }, - "New_Caledonia": { - "long": { - "generic": "heure de la Nouvelle-Calédonie", - "standard": "heure normale de la Nouvelle-Calédonie", - "daylight": "heure d’été de Nouvelle-Calédonie" - } - }, - "New_Zealand": { - "long": { - "generic": "heure de la Nouvelle-Zélande", - "standard": "heure normale de la Nouvelle-Zélande", - "daylight": "heure d’été de la Nouvelle-Zélande" - } - }, - "Newfoundland": { - "long": { - "generic": "heure de Terre-Neuve", - "standard": "heure normale de Terre-Neuve", - "daylight": "heure d’été de Terre-Neuve" - } - }, - "Niue": { - "long": { - "standard": "heure de Nioué" - } - }, - "Norfolk": { - "long": { - "standard": "heure de l’île Norfolk" - } - }, - "Noronha": { - "long": { - "generic": "heure de Fernando de Noronha", - "standard": "heure normale de Fernando de Noronha", - "daylight": "heure d’été de Fernando de Noronha" - } - }, - "North_Mariana": { - "long": { - "standard": "heure des îles Mariannes du Nord" - } - }, - "Novosibirsk": { - "long": { - "generic": "heure de Novossibirsk", - "standard": "heure normale de Novossibirsk", - "daylight": "heure d’été de Novossibirsk" - } - }, - "Omsk": { - "long": { - "generic": "heure de Omsk", - "standard": "heure normale de Omsk", - "daylight": "heure d’été de Omsk" - } - }, - "Pakistan": { - "long": { - "generic": "heure du Pakistan", - "standard": "heure normale du Pakistan", - "daylight": "heure d’été du Pakistan" - } - }, - "Palau": { - "long": { - "standard": "heure des Palaos" - } - }, - "Papua_New_Guinea": { - "long": { - "standard": "heure de la Papouasie-Nouvelle-Guinée" - } - }, - "Paraguay": { - "long": { - "generic": "heure du Paraguay", - "standard": "heure normale du Paraguay", - "daylight": "heure d’été du Paraguay" - } - }, - "Peru": { - "long": { - "generic": "heure du Pérou", - "standard": "heure normale du Pérou", - "daylight": "heure d’été du Pérou" - } - }, - "Philippines": { - "long": { - "generic": "heure des Philippines", - "standard": "heure normale des Philippines", - "daylight": "heure d’été des Philippines" - } - }, - "Phoenix_Islands": { - "long": { - "standard": "heure des îles Phoenix" - } - }, - "Pierre_Miquelon": { - "long": { - "generic": "heure de Saint-Pierre-et-Miquelon", - "standard": "heure normale de Saint-Pierre-et-Miquelon", - "daylight": "heure d’été de Saint-Pierre-et-Miquelon" - } - }, - "Pitcairn": { - "long": { - "standard": "heure des îles Pitcairn" - } - }, - "Ponape": { - "long": { - "standard": "heure de l’île de Pohnpei" - } - }, - "Pyongyang": { - "long": { - "standard": "heure de Pyongyang" - } - }, - "Reunion": { - "long": { - "standard": "heure de La Réunion" - } - }, - "Rothera": { - "long": { - "standard": "heure de Rothera" - } - }, - "Sakhalin": { - "long": { - "generic": "heure de Sakhaline", - "standard": "heure normale de Sakhaline", - "daylight": "heure d’été de Sakhaline" - } - }, - "Samara": { - "long": { - "generic": "heure de Samara", - "standard": "heure normale de Samara", - "daylight": "heure d’été de Samara" - } - }, - "Samoa": { - "long": { - "generic": "heure des Samoa", - "standard": "heure normale des Samoa", - "daylight": "heure d’été des Samoa" - } - }, - "Seychelles": { - "long": { - "standard": "heure des Seychelles" - } - }, - "Singapore": { - "long": { - "standard": "heure de Singapour" - } - }, - "Solomon": { - "long": { - "standard": "heure des îles Salomon" - } - }, - "South_Georgia": { - "long": { - "standard": "heure de Géorgie du Sud" - } - }, - "Suriname": { - "long": { - "standard": "heure du Suriname" - } - }, - "Syowa": { - "long": { - "standard": "heure de Syowa" - } - }, - "Tahiti": { - "long": { - "standard": "heure de Tahiti" - } - }, - "Taipei": { - "long": { - "generic": "heure de Taipei", - "standard": "heure normale de Taipei", - "daylight": "heure d’été de Taipei" - } - }, - "Tajikistan": { - "long": { - "standard": "heure du Tadjikistan" - } - }, - "Tokelau": { - "long": { - "standard": "heure de Tokelau" - } - }, - "Tonga": { - "long": { - "generic": "heure des Tonga", - "standard": "heure normale des Tonga", - "daylight": "heure d’été de Tonga" - } - }, - "Truk": { - "long": { - "standard": "heure de Chuuk" - } - }, - "Turkmenistan": { - "long": { - "generic": "heure du Turkménistan", - "standard": "heure normale du Turkménistan", - "daylight": "heure d’été du Turkménistan" - } - }, - "Tuvalu": { - "long": { - "standard": "heure des Tuvalu" - } - }, - "Uruguay": { - "long": { - "generic": "heure de l’Uruguay", - "standard": "heure normale de l’Uruguay", - "daylight": "heure d’été de l’Uruguay" - } - }, - "Uzbekistan": { - "long": { - "generic": "heure de l’Ouzbékistan", - "standard": "heure normale de l’Ouzbékistan", - "daylight": "heure d’été de l’Ouzbékistan" - } - }, - "Vanuatu": { - "long": { - "generic": "heure du Vanuatu", - "standard": "heure normale du Vanuatu", - "daylight": "heure d’été de Vanuatu" - } - }, - "Venezuela": { - "long": { - "standard": "heure du Venezuela" - } - }, - "Vladivostok": { - "long": { - "generic": "heure de Vladivostok", - "standard": "heure normale de Vladivostok", - "daylight": "heure d’été de Vladivostok" - } - }, - "Volgograd": { - "long": { - "generic": "heure de Volgograd", - "standard": "heure normale de Volgograd", - "daylight": "heure d’été de Volgograd" - } - }, - "Vostok": { - "long": { - "standard": "heure de Vostok" - } - }, - "Wake": { - "long": { - "standard": "heure de l’île Wake" - } - }, - "Wallis": { - "long": { - "standard": "heure de Wallis-et-Futuna" - } - }, - "Yakutsk": { - "long": { - "generic": "heure de Iakoutsk", - "standard": "heure normale de Iakoutsk", - "daylight": "heure d’été de Iakoutsk" - } - }, - "Yekaterinburg": { - "long": { - "generic": "heure d’Ekaterinbourg", - "standard": "heure normale d’Ekaterinbourg", - "daylight": "heure d’été d’Ekaterinbourg" - } - } - } - } - }, - "numbers": { - "defaultNumberingSystem": "latn", - "otherNumberingSystems": { - "native": "latn" - }, - "minimumGroupingDigits": "1", - "symbols-numberSystem-latn": { - "decimal": ",", - "group": " ", - "list": ";", - "percentSign": "%", - "plusSign": "+", - "minusSign": "-", - "exponential": "E", - "superscriptingExponent": "×", - "perMille": "‰", - "infinity": "∞", - "nan": "NaN", - "currencyDecimal": ".", - "timeSeparator": ":" - }, - "decimalFormats-numberSystem-latn": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-one": "0 millier", - "1000-count-other": "0 mille", - "10000-count-one": "00 mille", - "10000-count-other": "00 mille", - "100000-count-one": "000 mille", - "100000-count-other": "000 mille", - "1000000-count-one": "0 million", - "1000000-count-other": "0 millions", - "10000000-count-one": "00 million", - "10000000-count-other": "00 millions", - "100000000-count-one": "000 million", - "100000000-count-other": "000 millions", - "1000000000-count-one": "0 milliard", - "1000000000-count-other": "0 milliards", - "10000000000-count-one": "00 milliard", - "10000000000-count-other": "00 milliards", - "100000000000-count-one": "000 milliard", - "100000000000-count-other": "000 milliards", - "1000000000000-count-one": "0 billion", - "1000000000000-count-other": "0 billions", - "10000000000000-count-one": "00 billion", - "10000000000000-count-other": "00 billions", - "100000000000000-count-one": "000 billion", - "100000000000000-count-other": "000 billions" - } - }, - "short": { - "decimalFormat": { - "1000-count-one": "0 k", - "1000-count-other": "0 k", - "10000-count-one": "00 k", - "10000-count-other": "00 k", - "100000-count-one": "000 k", - "100000-count-other": "000 k", - "1000000-count-one": "0 M", - "1000000-count-other": "0 M", - "10000000-count-one": "00 M", - "10000000-count-other": "00 M", - "100000000-count-one": "000 M", - "100000000-count-other": "000 M", - "1000000000-count-one": "0 Md", - "1000000000-count-other": "0 Md", - "10000000000-count-one": "00 Md", - "10000000000-count-other": "00 Md", - "100000000000-count-one": "000 Md", - "100000000000-count-other": "000 Md", - "1000000000000-count-one": "0 Bn", - "1000000000000-count-other": "0 Bn", - "10000000000000-count-one": "00 Bn", - "10000000000000-count-other": "00 Bn", - "100000000000000-count-one": "000 Bn", - "100000000000000-count-other": "000 Bn" - } - } - }, - "scientificFormats-numberSystem-latn": { - "standard": "#E0" - }, - "percentFormats-numberSystem-latn": { - "standard": "#,##0%" - }, - "currencyFormats-numberSystem-latn": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } - }, - "standard": "#,##0.00 ¤ ;-#,##0.00 ¤", - "accounting": "#,##0.00 ¤;(#,##0.00 ¤)", - "short": { - "standard": { - "1000-count-one": "0 k ¤", - "1000-count-other": "0 k ¤", - "10000-count-one": "00 k ¤", - "10000-count-other": "00 k ¤", - "100000-count-one": "000 k ¤", - "100000-count-other": "000 k ¤", - "1000000-count-one": "0 M ¤", - "1000000-count-other": "0 M ¤", - "10000000-count-one": "00 M ¤", - "10000000-count-other": "00 M ¤", - "100000000-count-one": "000 M ¤", - "100000000-count-other": "000 M ¤", - "1000000000-count-one": "0 Md ¤", - "1000000000-count-other": "0 Md ¤", - "10000000000-count-one": "00 Md ¤", - "10000000000-count-other": "00 Md ¤", - "100000000000-count-one": "000 Md ¤", - "100000000000-count-other": "000 Md ¤", - "1000000000000-count-one": "0 Bn ¤", - "1000000000000-count-other": "0 Bn ¤", - "10000000000000-count-one": "00 Bn ¤", - "10000000000000-count-other": "00 Bn ¤", - "100000000000000-count-one": "000 Bn ¤", - "100000000000000-count-other": "000 Bn ¤" - } - }, - "unitPattern-count-one": "{0} {1}", - "unitPattern-count-other": "{0} {1}" - }, - "miscPatterns-numberSystem-latn": { - "atLeast": "⩾{0}", - "range": "{0}–{1}" - }, - "minimalPairs": { - "pluralMinimalPairs-count-one": "{0} jour", - "pluralMinimalPairs-count-other": "{0} jours", - "one": "Prenez la {0}re à droite.", - "other": "Prenez la {0}e à droite." - }, - "currencies": { - "ADP": { - "displayName": "peseta andorrane", - "displayName-count-one": "peseta andorrane", - "displayName-count-other": "pesetas andorranes", - "symbol": "ADP" - }, - "AED": { - "displayName": "dirham des Émirats arabes unis", - "displayName-count-one": "dirham des Émirats arabes unis", - "displayName-count-other": "dirhams des Émirats arabes unis", - "symbol": "AED" - }, - "AFA": { - "displayName": "afghani (1927–2002)", - "displayName-count-one": "afghani (1927–2002)", - "displayName-count-other": "afghanis (1927–2002)", - "symbol": "AFA" - }, - "AFN": { - "displayName": "afghani afghan", - "displayName-count-one": "afghani afghan", - "displayName-count-other": "afghanis afghan", - "symbol": "AFN" - }, - "ALK": { - "displayName": "lek albanais (1947–1961)", - "displayName-count-one": "lek albanais (1947–1961)", - "displayName-count-other": "leks albanais (1947–1961)", - "symbol": "ALK" - }, - "ALL": { - "displayName": "lek albanais", - "displayName-count-one": "lek albanais", - "displayName-count-other": "leks albanais", - "symbol": "ALL" - }, - "AMD": { - "displayName": "dram arménien", - "displayName-count-one": "dram arménien", - "displayName-count-other": "drams arméniens", - "symbol": "AMD" - }, - "ANG": { - "displayName": "florin antillais", - "displayName-count-one": "florin antillais", - "displayName-count-other": "florins antillais", - "symbol": "ANG" - }, - "AOA": { - "displayName": "kwanza angolais", - "displayName-count-one": "kwanza angolais", - "displayName-count-other": "kwanzas angolais", - "symbol": "AOA", - "symbol-alt-narrow": "Kz" - }, - "AOK": { - "displayName": "kwanza angolais (1977–1990)", - "displayName-count-one": "kwanza angolais (1977–1990)", - "displayName-count-other": "kwanzas angolais (1977–1990)", - "symbol": "AOK" - }, - "AON": { - "displayName": "nouveau kwanza angolais (1990–2000)", - "displayName-count-one": "nouveau kwanza angolais (1990–2000)", - "displayName-count-other": "nouveaux kwanzas angolais (1990–2000)", - "symbol": "AON" - }, - "AOR": { - "displayName": "kwanza angolais réajusté (1995–1999)", - "displayName-count-one": "kwanza angolais réajusté (1995–1999)", - "displayName-count-other": "kwanzas angolais réajustés (1995–1999)", - "symbol": "AOR" - }, - "ARA": { - "displayName": "austral argentin", - "displayName-count-one": "austral argentin", - "displayName-count-other": "australs argentins", - "symbol": "ARA" - }, - "ARL": { - "displayName": "ARL", - "symbol": "ARL" - }, - "ARM": { - "displayName": "ARM", - "symbol": "ARM" - }, - "ARP": { - "displayName": "peso argentin (1983–1985)", - "displayName-count-one": "peso argentin (1983–1985)", - "displayName-count-other": "pesos argentins (1983–1985)", - "symbol": "ARP" - }, - "ARS": { - "displayName": "peso argentin", - "displayName-count-one": "peso argentin", - "displayName-count-other": "pesos argentins", - "symbol": "$AR", - "symbol-alt-narrow": "$" - }, - "ATS": { - "displayName": "schilling autrichien", - "displayName-count-one": "schilling autrichien", - "displayName-count-other": "schillings autrichiens", - "symbol": "ATS" - }, - "AUD": { - "displayName": "dollar australien", - "displayName-count-one": "dollar australien", - "displayName-count-other": "dollars australiens", - "symbol": "$AU", - "symbol-alt-narrow": "$" - }, - "AWG": { - "displayName": "florin arubais", - "displayName-count-one": "florin arubais", - "displayName-count-other": "florins arubais", - "symbol": "AWG" - }, - "AZM": { - "displayName": "manat azéri (1993–2006)", - "displayName-count-one": "manat azéri (1993–2006)", - "displayName-count-other": "manats azéris (1993–2006)", - "symbol": "AZM" - }, - "AZN": { - "displayName": "manat azéri", - "displayName-count-one": "manat azéri", - "displayName-count-other": "manats azéris", - "symbol": "AZN" - }, - "BAD": { - "displayName": "dinar bosniaque", - "displayName-count-one": "dinar bosniaque", - "displayName-count-other": "dinars bosniaques", - "symbol": "BAD" - }, - "BAM": { - "displayName": "mark convertible bosniaque", - "displayName-count-one": "mark convertible bosniaque", - "displayName-count-other": "marks convertibles bosniaques", - "symbol": "BAM", - "symbol-alt-narrow": "KM" - }, - "BAN": { - "displayName": "BAN", - "symbol": "BAN" - }, - "BBD": { - "displayName": "dollar barbadien", - "displayName-count-one": "dollar barbadien", - "displayName-count-other": "dollars barbadiens", - "symbol": "BBD", - "symbol-alt-narrow": "$" - }, - "BDT": { - "displayName": "taka bangladeshi", - "displayName-count-one": "taka bangladeshi", - "displayName-count-other": "takas bangladeshis", - "symbol": "BDT", - "symbol-alt-narrow": "৳" - }, - "BEC": { - "displayName": "franc belge (convertible)", - "displayName-count-one": "franc belge (convertible)", - "displayName-count-other": "francs belges (convertibles)", - "symbol": "BEC" - }, - "BEF": { - "displayName": "franc belge", - "displayName-count-one": "franc belge", - "displayName-count-other": "francs belges", - "symbol": "FB" - }, - "BEL": { - "displayName": "franc belge (financier)", - "displayName-count-one": "franc belge (financier)", - "displayName-count-other": "francs belges (financiers)", - "symbol": "BEL" - }, - "BGL": { - "displayName": "lev bulgare (1962–1999)", - "displayName-count-one": "lev bulgare (1962–1999)", - "displayName-count-other": "levs bulgares (1962–1999)", - "symbol": "BGL" - }, - "BGM": { - "displayName": "BGM", - "symbol": "BGM" - }, - "BGN": { - "displayName": "lev bulgare", - "displayName-count-one": "lev bulgare", - "displayName-count-other": "levs bulgares", - "symbol": "BGN" - }, - "BGO": { - "displayName": "BGO", - "symbol": "BGO" - }, - "BHD": { - "displayName": "dinar bahreïni", - "displayName-count-one": "dinar bahreïni", - "displayName-count-other": "dinars bahreïnis", - "symbol": "BHD" - }, - "BIF": { - "displayName": "franc burundais", - "displayName-count-one": "franc burundais", - "displayName-count-other": "francs burundais", - "symbol": "BIF" - }, - "BMD": { - "displayName": "dollar bermudien", - "displayName-count-one": "dollar bermudien", - "displayName-count-other": "dollars bermudiens", - "symbol": "$BM", - "symbol-alt-narrow": "$" - }, - "BND": { - "displayName": "dollar brunéien", - "displayName-count-one": "dollar brunéien", - "displayName-count-other": "dollars brunéiens", - "symbol": "$BN", - "symbol-alt-narrow": "$" - }, - "BOB": { - "displayName": "boliviano bolivien", - "displayName-count-one": "boliviano bolivien", - "displayName-count-other": "bolivianos boliviens", - "symbol": "BOB", - "symbol-alt-narrow": "Bs" - }, - "BOL": { - "displayName": "BOL", - "symbol": "BOL" - }, - "BOP": { - "displayName": "peso bolivien", - "displayName-count-one": "peso bolivien", - "displayName-count-other": "pesos boliviens", - "symbol": "BOP" - }, - "BOV": { - "displayName": "mvdol bolivien", - "displayName-count-one": "mvdol bolivien", - "displayName-count-other": "mvdols boliviens", - "symbol": "BOV" - }, - "BRB": { - "displayName": "nouveau cruzeiro brésilien (1967–1986)", - "displayName-count-one": "nouveau cruzeiro brésilien (1967–1986)", - "displayName-count-other": "nouveaux cruzeiros brésiliens (1967–1986)", - "symbol": "BRB" - }, - "BRC": { - "displayName": "cruzado brésilien (1986–1989)", - "displayName-count-one": "cruzado brésilien (1986–1989)", - "displayName-count-other": "cruzados brésiliens (1986–1989)", - "symbol": "BRC" - }, - "BRE": { - "displayName": "cruzeiro brésilien (1990–1993)", - "displayName-count-one": "cruzeiro brésilien (1990–1993)", - "displayName-count-other": "cruzeiros brésiliens (1990–1993)", - "symbol": "BRE" - }, - "BRL": { - "displayName": "réal brésilien", - "displayName-count-one": "réal brésilien", - "displayName-count-other": "réals brésiliens", - "symbol": "R$", - "symbol-alt-narrow": "R$" - }, - "BRN": { - "displayName": "nouveau cruzado", - "displayName-count-one": "nouveau cruzado brésilien (1989–1990)", - "displayName-count-other": "nouveaux cruzados brésiliens (1989–1990)", - "symbol": "BRN" - }, - "BRR": { - "displayName": "cruzeiro", - "displayName-count-one": "cruzeiro réal brésilien (1993–1994)", - "displayName-count-other": "cruzeiros réals brésiliens (1993–1994)", - "symbol": "BRR" - }, - "BRZ": { - "displayName": "BRZ", - "symbol": "BRZ" - }, - "BSD": { - "displayName": "dollar bahaméen", - "displayName-count-one": "dollar bahaméen", - "displayName-count-other": "dollars bahaméens", - "symbol": "$BS", - "symbol-alt-narrow": "$" - }, - "BTN": { - "displayName": "ngultrum bouthanais", - "displayName-count-one": "ngultrum bouthanais", - "displayName-count-other": "ngultrums bouthanais", - "symbol": "BTN" - }, - "BUK": { - "displayName": "kyat birman", - "displayName-count-one": "kyat birman", - "displayName-count-other": "kyats birmans", - "symbol": "BUK" - }, - "BWP": { - "displayName": "pula botswanais", - "displayName-count-one": "pula botswanais", - "displayName-count-other": "pulas botswanais", - "symbol": "BWP", - "symbol-alt-narrow": "P" - }, - "BYB": { - "displayName": "nouveau rouble biélorusse (1994–1999)", - "displayName-count-one": "nouveau rouble biélorusse (1994–1999)", - "displayName-count-other": "nouveaux roubles biélorusses (1994–1999)", - "symbol": "BYB" - }, - "BYN": { - "displayName": "rouble biélorusse", - "displayName-count-one": "rouble biélorusse", - "displayName-count-other": "roubles biélorusses", - "symbol": "BYN", - "symbol-alt-narrow": "р." - }, - "BYR": { - "displayName": "rouble biélorusse (2000–2016)", - "displayName-count-one": "rouble biélorusse (2000–2016)", - "displayName-count-other": "roubles biélorusses (2000–2016)", - "symbol": "BYR" - }, - "BZD": { - "displayName": "dollar bélizéen", - "displayName-count-one": "dollar bélizéen", - "displayName-count-other": "dollars bélizéens", - "symbol": "$BZ", - "symbol-alt-narrow": "$" - }, - "CAD": { - "displayName": "dollar canadien", - "displayName-count-one": "dollar canadien", - "displayName-count-other": "dollars canadiens", - "symbol": "$CA", - "symbol-alt-narrow": "$" - }, - "CDF": { - "displayName": "franc congolais", - "displayName-count-one": "franc congolais", - "displayName-count-other": "francs congolais", - "symbol": "CDF" - }, - "CHE": { - "displayName": "euro WIR", - "displayName-count-one": "euro WIR", - "displayName-count-other": "euros WIR", - "symbol": "CHE" - }, - "CHF": { - "displayName": "franc suisse", - "displayName-count-one": "franc suisse", - "displayName-count-other": "francs suisses", - "symbol": "CHF" - }, - "CHW": { - "displayName": "franc WIR", - "displayName-count-one": "franc WIR", - "displayName-count-other": "francs WIR", - "symbol": "CHW" - }, - "CLE": { - "displayName": "CLE", - "symbol": "CLE" - }, - "CLF": { - "displayName": "unité d’investissement chilienne", - "displayName-count-one": "unité d’investissement chilienne", - "displayName-count-other": "unités d’investissement chiliennes", - "symbol": "CLF" - }, - "CLP": { - "displayName": "peso chilien", - "displayName-count-one": "peso chilien", - "displayName-count-other": "pesos chiliens", - "symbol": "$CL", - "symbol-alt-narrow": "$" - }, - "CNH": { - "displayName": "yuan chinois (zone extracôtière)", - "displayName-count-one": "yuan chinois (zone extracôtière)", - "displayName-count-other": "yuans chinois (zone extracôtière)", - "symbol": "CNH" - }, - "CNX": { - "displayName": "CNX", - "symbol": "CNX" - }, - "CNY": { - "displayName": "yuan renminbi chinois", - "displayName-count-one": "yuan renminbi chinois", - "displayName-count-other": "yuans renminbi chinois", - "symbol": "CNY", - "symbol-alt-narrow": "¥" - }, - "COP": { - "displayName": "peso colombien", - "displayName-count-one": "peso colombien", - "displayName-count-other": "pesos colombiens", - "symbol": "$CO", - "symbol-alt-narrow": "$" - }, - "COU": { - "displayName": "unité de valeur réelle colombienne", - "displayName-count-one": "unité de valeur réelle colombienne", - "displayName-count-other": "unités de valeur réelle colombiennes", - "symbol": "COU" - }, - "CRC": { - "displayName": "colón costaricain", - "displayName-count-one": "colón costaricain", - "displayName-count-other": "colóns costaricains", - "symbol": "CRC", - "symbol-alt-narrow": "₡" - }, - "CSD": { - "displayName": "dinar serbo-monténégrin", - "displayName-count-one": "dinar serbo-monténégrin", - "displayName-count-other": "dinars serbo-monténégrins", - "symbol": "CSD" - }, - "CSK": { - "displayName": "couronne forte tchécoslovaque", - "displayName-count-one": "couronne forte tchécoslovaque", - "displayName-count-other": "couronnes fortes tchécoslovaques", - "symbol": "CSK" - }, - "CUC": { - "displayName": "peso cubain convertible", - "displayName-count-one": "peso cubain convertible", - "displayName-count-other": "pesos cubains convertibles", - "symbol": "CUC", - "symbol-alt-narrow": "$" - }, - "CUP": { - "displayName": "peso cubain", - "displayName-count-one": "peso cubain", - "displayName-count-other": "pesos cubains", - "symbol": "CUP", - "symbol-alt-narrow": "$" - }, - "CVE": { - "displayName": "escudo capverdien", - "displayName-count-one": "escudo capverdien", - "displayName-count-other": "escudos capverdiens", - "symbol": "CVE" - }, - "CYP": { - "displayName": "livre chypriote", - "displayName-count-one": "livre chypriote", - "displayName-count-other": "livres chypriotes", - "symbol": "£CY" - }, - "CZK": { - "displayName": "couronne tchèque", - "displayName-count-one": "couronne tchèque", - "displayName-count-other": "couronnes tchèques", - "symbol": "CZK", - "symbol-alt-narrow": "Kč" - }, - "DDM": { - "displayName": "mark est-allemand", - "displayName-count-one": "mark est-allemand", - "displayName-count-other": "marks est-allemands", - "symbol": "DDM" - }, - "DEM": { - "displayName": "mark allemand", - "displayName-count-one": "mark allemand", - "displayName-count-other": "marks allemands", - "symbol": "DEM" - }, - "DJF": { - "displayName": "franc djiboutien", - "displayName-count-one": "franc djiboutien", - "displayName-count-other": "francs djiboutiens", - "symbol": "DJF" - }, - "DKK": { - "displayName": "couronne danoise", - "displayName-count-one": "couronne danoise", - "displayName-count-other": "couronnes danoises", - "symbol": "DKK", - "symbol-alt-narrow": "kr" - }, - "DOP": { - "displayName": "peso dominicain", - "displayName-count-one": "peso dominicain", - "displayName-count-other": "pesos dominicains", - "symbol": "DOP", - "symbol-alt-narrow": "$" - }, - "DZD": { - "displayName": "dinar algérien", - "displayName-count-one": "dinar algérien", - "displayName-count-other": "dinars algériens", - "symbol": "DZD" - }, - "ECS": { - "displayName": "sucre équatorien", - "displayName-count-one": "sucre équatorien", - "displayName-count-other": "sucres équatoriens", - "symbol": "ECS" - }, - "ECV": { - "displayName": "unité de valeur constante équatoriale (UVC)", - "displayName-count-one": "unité de valeur constante équatorienne (UVC)", - "displayName-count-other": "unités de valeur constante équatoriennes (UVC)", - "symbol": "ECV" - }, - "EEK": { - "displayName": "couronne estonienne", - "displayName-count-one": "couronne estonienne", - "displayName-count-other": "couronnes estoniennes", - "symbol": "EEK" - }, - "EGP": { - "displayName": "livre égyptienne", - "displayName-count-one": "livre égyptienne", - "displayName-count-other": "livres égyptiennes", - "symbol": "EGP", - "symbol-alt-narrow": "£E" - }, - "ERN": { - "displayName": "nafka érythréen", - "displayName-count-one": "nafka érythréen", - "displayName-count-other": "nafkas érythréens", - "symbol": "ERN" - }, - "ESA": { - "displayName": "peseta espagnole (compte A)", - "displayName-count-one": "peseta espagnole (compte A)", - "displayName-count-other": "pesetas espagnoles (compte A)", - "symbol": "ESA" - }, - "ESB": { - "displayName": "peseta espagnole (compte convertible)", - "displayName-count-one": "peseta espagnole (compte convertible)", - "displayName-count-other": "pesetas espagnoles (compte convertible)", - "symbol": "ESB" - }, - "ESP": { - "displayName": "peseta espagnole", - "displayName-count-one": "peseta espagnole", - "displayName-count-other": "pesetas espagnoles", - "symbol": "ESP", - "symbol-alt-narrow": "₧" - }, - "ETB": { - "displayName": "birr éthiopien", - "displayName-count-one": "birr éthiopien", - "displayName-count-other": "birrs éthiopiens", - "symbol": "ETB" - }, - "EUR": { - "displayName": "euro", - "displayName-count-one": "euro", - "displayName-count-other": "euros", - "symbol": "€", - "symbol-alt-narrow": "€" - }, - "FIM": { - "displayName": "mark finlandais", - "displayName-count-one": "mark finlandais", - "displayName-count-other": "marks finlandais", - "symbol": "FIM" - }, - "FJD": { - "displayName": "dollar fidjien", - "displayName-count-one": "dollar fidjien", - "displayName-count-other": "dollars fidjiens", - "symbol": "$FJ", - "symbol-alt-narrow": "$" - }, - "FKP": { - "displayName": "livre des îles Malouines", - "displayName-count-one": "livre des îles Malouines", - "displayName-count-other": "livres des îles Malouines", - "symbol": "£FK", - "symbol-alt-narrow": "£" - }, - "FRF": { - "displayName": "franc français", - "displayName-count-one": "franc français", - "displayName-count-other": "francs français", - "symbol": "F" - }, - "GBP": { - "displayName": "livre sterling", - "displayName-count-one": "livre sterling", - "displayName-count-other": "livres sterling", - "symbol": "£GB", - "symbol-alt-narrow": "£" - }, - "GEK": { - "displayName": "coupon de lari géorgien", - "displayName-count-one": "coupon de lari géorgien", - "displayName-count-other": "coupons de lari géorgiens", - "symbol": "GEK" - }, - "GEL": { - "displayName": "lari géorgien", - "displayName-count-one": "lari géorgien", - "displayName-count-other": "lari géorgiens", - "symbol": "GEL", - "symbol-alt-narrow": "₾", - "symbol-alt-variant": "₾" - }, - "GHC": { - "displayName": "cédi", - "displayName-count-one": "cédi ghanéen (1967–2007)", - "displayName-count-other": "cédis ghanéens (1967–2007)", - "symbol": "GHC" - }, - "GHS": { - "displayName": "cédi ghanéen", - "displayName-count-one": "cédi ghanéen", - "displayName-count-other": "cédis ghanéens", - "symbol": "GHS" - }, - "GIP": { - "displayName": "livre de Gibraltar", - "displayName-count-one": "livre de Gibraltar", - "displayName-count-other": "livres de Gibraltar", - "symbol": "£GI", - "symbol-alt-narrow": "£" - }, - "GMD": { - "displayName": "dalasi gambien", - "displayName-count-one": "dalasi gambien", - "displayName-count-other": "dalasis gambiens", - "symbol": "GMD" - }, - "GNF": { - "displayName": "franc guinéen", - "displayName-count-one": "franc guinéen", - "displayName-count-other": "francs guinéens", - "symbol": "GNF", - "symbol-alt-narrow": "FG" - }, - "GNS": { - "displayName": "syli guinéen", - "displayName-count-one": "syli guinéen", - "displayName-count-other": "sylis guinéens", - "symbol": "GNS" - }, - "GQE": { - "displayName": "ekwélé équatoguinéen", - "displayName-count-one": "ekwélé équatoguinéen", - "displayName-count-other": "ekwélés équatoguinéens", - "symbol": "GQE" - }, - "GRD": { - "displayName": "drachme grecque", - "displayName-count-one": "drachme grecque", - "displayName-count-other": "drachmes grecques", - "symbol": "GRD" - }, - "GTQ": { - "displayName": "quetzal guatémaltèque", - "displayName-count-one": "quetzal guatémaltèque", - "displayName-count-other": "quetzals guatémaltèques", - "symbol": "GTQ", - "symbol-alt-narrow": "Q" - }, - "GWE": { - "displayName": "escudo de Guinée portugaise", - "displayName-count-one": "escudo de Guinée portugaise", - "displayName-count-other": "escudos de Guinée portugaise", - "symbol": "GWE" - }, - "GWP": { - "displayName": "peso bissau-guinéen", - "displayName-count-one": "peso bissau-guinéen", - "displayName-count-other": "pesos bissau-guinéens", - "symbol": "GWP" - }, - "GYD": { - "displayName": "dollar du Guyana", - "displayName-count-one": "dollar du Guyana", - "displayName-count-other": "dollars du Guyana", - "symbol": "GYD", - "symbol-alt-narrow": "$" - }, - "HKD": { - "displayName": "dollar de Hong Kong", - "displayName-count-one": "dollar de Hong Kong", - "displayName-count-other": "dollars de Hong Kong", - "symbol": "HKD", - "symbol-alt-narrow": "$" - }, - "HNL": { - "displayName": "lempira hondurien", - "displayName-count-one": "lempira hondurien", - "displayName-count-other": "lempiras honduriens", - "symbol": "HNL", - "symbol-alt-narrow": "L" - }, - "HRD": { - "displayName": "dinar croate", - "displayName-count-one": "dinar croate", - "displayName-count-other": "dinars croates", - "symbol": "HRD" - }, - "HRK": { - "displayName": "kuna croate", - "displayName-count-one": "kuna croate", - "displayName-count-other": "kunas croates", - "symbol": "HRK", - "symbol-alt-narrow": "kn" - }, - "HTG": { - "displayName": "gourde haïtienne", - "displayName-count-one": "gourde haïtienne", - "displayName-count-other": "gourdes haïtiennes", - "symbol": "HTG" - }, - "HUF": { - "displayName": "forint hongrois", - "displayName-count-one": "forint hongrois", - "displayName-count-other": "forints hongrois", - "symbol": "HUF", - "symbol-alt-narrow": "Ft" - }, - "IDR": { - "displayName": "roupie indonésienne", - "displayName-count-one": "roupie indonésienne", - "displayName-count-other": "roupies indonésiennes", - "symbol": "IDR", - "symbol-alt-narrow": "Rp" - }, - "IEP": { - "displayName": "livre irlandaise", - "displayName-count-one": "livre irlandaise", - "displayName-count-other": "livres irlandaises", - "symbol": "£IE" - }, - "ILP": { - "displayName": "livre israélienne", - "displayName-count-one": "livre israélienne", - "displayName-count-other": "livres israéliennes", - "symbol": "£IL" - }, - "ILR": { - "displayName": "ILR", - "symbol": "ILR" - }, - "ILS": { - "displayName": "nouveau shekel israélien", - "displayName-count-one": "nouveau shekel israélien", - "displayName-count-other": "nouveaux shekels israéliens", - "symbol": "₪", - "symbol-alt-narrow": "₪" - }, - "INR": { - "displayName": "roupie indienne", - "displayName-count-one": "roupie indienne", - "displayName-count-other": "roupies indiennes", - "symbol": "₹", - "symbol-alt-narrow": "₹" - }, - "IQD": { - "displayName": "dinar irakien", - "displayName-count-one": "dinar irakien", - "displayName-count-other": "dinars irakiens", - "symbol": "IQD" - }, - "IRR": { - "displayName": "riyal iranien", - "displayName-count-one": "riyal iranien", - "displayName-count-other": "riyals iraniens", - "symbol": "IRR" - }, - "ISJ": { - "displayName": "ISJ", - "symbol": "ISJ" - }, - "ISK": { - "displayName": "couronne islandaise", - "displayName-count-one": "couronne islandaise", - "displayName-count-other": "couronnes islandaises", - "symbol": "ISK", - "symbol-alt-narrow": "kr" - }, - "ITL": { - "displayName": "lire italienne", - "displayName-count-one": "lire italienne", - "displayName-count-other": "lires italiennes", - "symbol": "₤IT" - }, - "JMD": { - "displayName": "dollar jamaïcain", - "displayName-count-one": "dollar jamaïcain", - "displayName-count-other": "dollars jamaïcains", - "symbol": "JMD", - "symbol-alt-narrow": "$" - }, - "JOD": { - "displayName": "dinar jordanien", - "displayName-count-one": "dinar jordanien", - "displayName-count-other": "dinars jordaniens", - "symbol": "JOD" - }, - "JPY": { - "displayName": "yen japonais", - "displayName-count-one": "yen japonais", - "displayName-count-other": "yens japonais", - "symbol": "JPY", - "symbol-alt-narrow": "¥" - }, - "KES": { - "displayName": "shilling kényan", - "displayName-count-one": "shilling kényan", - "displayName-count-other": "shillings kényans", - "symbol": "KES" - }, - "KGS": { - "displayName": "som kirghize", - "displayName-count-one": "som kirghize", - "displayName-count-other": "soms kirghizes", - "symbol": "KGS" - }, - "KHR": { - "displayName": "riel cambodgien", - "displayName-count-one": "riel cambodgien", - "displayName-count-other": "riels cambodgiens", - "symbol": "KHR", - "symbol-alt-narrow": "៛" - }, - "KMF": { - "displayName": "franc comorien", - "displayName-count-one": "franc comorien", - "displayName-count-other": "francs comoriens", - "symbol": "KMF", - "symbol-alt-narrow": "FC" - }, - "KPW": { - "displayName": "won nord-coréen", - "displayName-count-one": "won nord-coréen", - "displayName-count-other": "wons nord-coréens", - "symbol": "KPW", - "symbol-alt-narrow": "₩" - }, - "KRH": { - "displayName": "KRH", - "symbol": "KRH" - }, - "KRO": { - "displayName": "KRO", - "symbol": "KRO" - }, - "KRW": { - "displayName": "won sud-coréen", - "displayName-count-one": "won sud-coréen", - "displayName-count-other": "wons sud-coréens", - "symbol": "₩", - "symbol-alt-narrow": "₩" - }, - "KWD": { - "displayName": "dinar koweïtien", - "displayName-count-one": "dinar koweïtien", - "displayName-count-other": "dinar koweïtiens", - "symbol": "KWD" - }, - "KYD": { - "displayName": "dollar des îles Caïmans", - "displayName-count-one": "dollar des îles Caïmans", - "displayName-count-other": "dollars des îles Caïmans", - "symbol": "KYD", - "symbol-alt-narrow": "$" - }, - "KZT": { - "displayName": "tenge kazakh", - "displayName-count-one": "tenge kazakh", - "displayName-count-other": "tenges kazakhs", - "symbol": "KZT", - "symbol-alt-narrow": "₸" - }, - "LAK": { - "displayName": "kip loatien", - "displayName-count-one": "kip loatien", - "displayName-count-other": "kips loatiens", - "symbol": "LAK", - "symbol-alt-narrow": "₭" - }, - "LBP": { - "displayName": "livre libanaise", - "displayName-count-one": "livre libanaise", - "displayName-count-other": "livres libanaises", - "symbol": "£LB", - "symbol-alt-narrow": "£L" - }, - "LKR": { - "displayName": "roupie srilankaise", - "displayName-count-one": "roupie srilankaise", - "displayName-count-other": "roupies srilankaises", - "symbol": "LKR", - "symbol-alt-narrow": "Rs" - }, - "LRD": { - "displayName": "dollar libérien", - "displayName-count-one": "dollar libérien", - "displayName-count-other": "dollars libériens", - "symbol": "LRD", - "symbol-alt-narrow": "$" - }, - "LSL": { - "displayName": "loti lesothan", - "displayName-count-one": "loti lesothan", - "displayName-count-other": "maloti lesothans", - "symbol": "LSL" - }, - "LTL": { - "displayName": "litas lituanien", - "displayName-count-one": "litas lituanien", - "displayName-count-other": "litas lituaniens", - "symbol": "LTL", - "symbol-alt-narrow": "Lt" - }, - "LTT": { - "displayName": "talonas lituanien", - "displayName-count-one": "talonas lituanien", - "displayName-count-other": "talonas lituaniens", - "symbol": "LTT" - }, - "LUC": { - "displayName": "franc convertible luxembourgeois", - "displayName-count-one": "franc convertible luxembourgeois", - "displayName-count-other": "francs convertibles luxembourgeois", - "symbol": "LUC" - }, - "LUF": { - "displayName": "franc luxembourgeois", - "displayName-count-one": "franc luxembourgeois", - "displayName-count-other": "francs luxembourgeois", - "symbol": "LUF" - }, - "LUL": { - "displayName": "franc financier luxembourgeois", - "displayName-count-one": "franc financier luxembourgeois", - "displayName-count-other": "francs financiers luxembourgeois", - "symbol": "LUL" - }, - "LVL": { - "displayName": "lats letton", - "displayName-count-one": "lats letton", - "displayName-count-other": "lats lettons", - "symbol": "LVL", - "symbol-alt-narrow": "Ls" - }, - "LVR": { - "displayName": "rouble letton", - "displayName-count-one": "rouble letton", - "displayName-count-other": "roubles lettons", - "symbol": "LVR" - }, - "LYD": { - "displayName": "dinar libyen", - "displayName-count-one": "dinar libyen", - "displayName-count-other": "dinars libyens", - "symbol": "LYD" - }, - "MAD": { - "displayName": "dirham marocain", - "displayName-count-one": "dirham marocain", - "displayName-count-other": "dirhams marocains", - "symbol": "MAD" - }, - "MAF": { - "displayName": "franc marocain", - "displayName-count-one": "franc marocain", - "displayName-count-other": "francs marocains", - "symbol": "MAF" - }, - "MCF": { - "displayName": "MCF", - "symbol": "MCF" - }, - "MDC": { - "displayName": "MDC", - "symbol": "MDC" - }, - "MDL": { - "displayName": "leu moldave", - "displayName-count-one": "leu moldave", - "displayName-count-other": "leus moldaves", - "symbol": "MDL" - }, - "MGA": { - "displayName": "ariary malgache", - "displayName-count-one": "ariary malgache", - "displayName-count-other": "ariarys malgaches", - "symbol": "MGA", - "symbol-alt-narrow": "Ar" - }, - "MGF": { - "displayName": "franc malgache", - "displayName-count-one": "franc malgache", - "displayName-count-other": "francs malgaches", - "symbol": "MGF" - }, - "MKD": { - "displayName": "denar macédonien", - "displayName-count-one": "denar macédonien", - "displayName-count-other": "denars macédoniens", - "symbol": "MKD" - }, - "MKN": { - "displayName": "MKN", - "symbol": "MKN" - }, - "MLF": { - "displayName": "franc malien", - "displayName-count-one": "franc malien", - "displayName-count-other": "francs maliens", - "symbol": "MLF" - }, - "MMK": { - "displayName": "kyat myanmarais", - "displayName-count-one": "kyat myanmarais", - "displayName-count-other": "kyats myanmarais", - "symbol": "MMK", - "symbol-alt-narrow": "K" - }, - "MNT": { - "displayName": "tugrik mongol", - "displayName-count-one": "tugrik mongol", - "displayName-count-other": "tugriks mongols", - "symbol": "MNT", - "symbol-alt-narrow": "₮" - }, - "MOP": { - "displayName": "pataca macanaise", - "displayName-count-one": "pataca macanaise", - "displayName-count-other": "patacas macanaises", - "symbol": "MOP" - }, - "MRO": { - "displayName": "ouguiya mauritanien", - "displayName-count-one": "ouguiya mauritanien", - "displayName-count-other": "ouguiyas mauritaniens", - "symbol": "MRO" - }, - "MTL": { - "displayName": "lire maltaise", - "displayName-count-one": "lire maltaise", - "displayName-count-other": "lires maltaises", - "symbol": "MTL" - }, - "MTP": { - "displayName": "livre maltaise", - "displayName-count-one": "livre maltaise", - "displayName-count-other": "livres maltaises", - "symbol": "£MT" - }, - "MUR": { - "displayName": "roupie mauricienne", - "displayName-count-one": "roupie mauricienne", - "displayName-count-other": "roupies mauriciennes", - "symbol": "MUR", - "symbol-alt-narrow": "Rs" - }, - "MVP": { - "displayName": "MVP", - "symbol": "MVP" - }, - "MVR": { - "displayName": "rufiyaa maldivien", - "displayName-count-one": "rufiyaa maldivienne", - "displayName-count-other": "rufiyaas maldiviennes", - "symbol": "MVR" - }, - "MWK": { - "displayName": "kwacha malawite", - "displayName-count-one": "kwacha malawite", - "displayName-count-other": "kwachas malawites", - "symbol": "MWK" - }, - "MXN": { - "displayName": "peso mexicain", - "displayName-count-one": "peso mexicain", - "displayName-count-other": "pesos mexicains", - "symbol": "$MX", - "symbol-alt-narrow": "$" - }, - "MXP": { - "displayName": "peso d’argent mexicain (1861–1992)", - "displayName-count-one": "peso d’argent mexicain (1861–1992)", - "displayName-count-other": "pesos d’argent mexicains (1861–1992)", - "symbol": "MXP" - }, - "MXV": { - "displayName": "unité de conversion mexicaine (UDI)", - "displayName-count-one": "unité de conversion mexicaine (UDI)", - "displayName-count-other": "unités de conversion mexicaines (UDI)", - "symbol": "MXV" - }, - "MYR": { - "displayName": "ringgit malais", - "displayName-count-one": "ringgit malais", - "displayName-count-other": "ringgits malais", - "symbol": "MYR", - "symbol-alt-narrow": "RM" - }, - "MZE": { - "displayName": "escudo mozambicain", - "displayName-count-one": "escudo mozambicain", - "displayName-count-other": "escudos mozambicains", - "symbol": "MZE" - }, - "MZM": { - "displayName": "métical", - "displayName-count-one": "metical mozambicain (1980–2006)", - "displayName-count-other": "meticais mozambicains (1980–2006)", - "symbol": "MZM" - }, - "MZN": { - "displayName": "metical mozambicain", - "displayName-count-one": "metical mozambicain", - "displayName-count-other": "meticais mozambicains", - "symbol": "MZN" - }, - "NAD": { - "displayName": "dollar namibien", - "displayName-count-one": "dollar namibien", - "displayName-count-other": "dollars namibiens", - "symbol": "$NA", - "symbol-alt-narrow": "$" - }, - "NGN": { - "displayName": "naira nigérian", - "displayName-count-one": "naira nigérian", - "displayName-count-other": "nairas nigérians", - "symbol": "NGN", - "symbol-alt-narrow": "₦" - }, - "NIC": { - "displayName": "cordoba", - "displayName-count-one": "córdoba nicaraguayen (1912–1988)", - "displayName-count-other": "córdobas nicaraguayens (1912–1988)", - "symbol": "NIC" - }, - "NIO": { - "displayName": "córdoba oro nicaraguayen", - "displayName-count-one": "córdoba oro nicaraguayen", - "displayName-count-other": "córdobas oro nicaraguayens", - "symbol": "NIO", - "symbol-alt-narrow": "$C" - }, - "NLG": { - "displayName": "florin néerlandais", - "displayName-count-one": "florin néerlandais", - "displayName-count-other": "florins néerlandais", - "symbol": "NLG" - }, - "NOK": { - "displayName": "couronne norvégienne", - "displayName-count-one": "couronne norvégienne", - "displayName-count-other": "couronnes norvégiennes", - "symbol": "NOK", - "symbol-alt-narrow": "kr" - }, - "NPR": { - "displayName": "roupie népalaise", - "displayName-count-one": "roupie népalaise", - "displayName-count-other": "roupies népalaises", - "symbol": "NPR", - "symbol-alt-narrow": "Rs" - }, - "NZD": { - "displayName": "dollar néo-zélandais", - "displayName-count-one": "dollar néo-zélandais", - "displayName-count-other": "dollars néo-zélandais", - "symbol": "$NZ", - "symbol-alt-narrow": "$" - }, - "OMR": { - "displayName": "riyal omanais", - "displayName-count-one": "riyal omanais", - "displayName-count-other": "riyals omanis", - "symbol": "OMR" - }, - "PAB": { - "displayName": "balboa panaméen", - "displayName-count-one": "balboa panaméen", - "displayName-count-other": "balboas panaméens", - "symbol": "PAB" - }, - "PEI": { - "displayName": "inti péruvien", - "displayName-count-one": "inti péruvien", - "displayName-count-other": "intis péruviens", - "symbol": "PEI" - }, - "PEN": { - "displayName": "sol péruvien", - "displayName-count-one": "sol péruvien", - "displayName-count-other": "sols péruviens", - "symbol": "PEN" - }, - "PES": { - "displayName": "sol péruvien (1863–1985)", - "displayName-count-one": "sol péruvien (1863–1985)", - "displayName-count-other": "sols péruviens (1863–1985)", - "symbol": "PES" - }, - "PGK": { - "displayName": "kina papouan-néo-guinéen", - "displayName-count-one": "kina papouan-néo-guinéen", - "displayName-count-other": "kinas papouan-néo-guinéens", - "symbol": "PGK" - }, - "PHP": { - "displayName": "peso philippin", - "displayName-count-one": "peso philippin", - "displayName-count-other": "pesos philippins", - "symbol": "PHP", - "symbol-alt-narrow": "₱" - }, - "PKR": { - "displayName": "roupie pakistanaise", - "displayName-count-one": "roupie pakistanaise", - "displayName-count-other": "roupies pakistanaises", - "symbol": "PKR", - "symbol-alt-narrow": "Rs" - }, - "PLN": { - "displayName": "zloty polonais", - "displayName-count-one": "zloty polonais", - "displayName-count-other": "zlotys polonais", - "symbol": "PLN", - "symbol-alt-narrow": "zł" - }, - "PLZ": { - "displayName": "zloty (1950–1995)", - "displayName-count-one": "zloty polonais (1950–1995)", - "displayName-count-other": "zlotys polonais (1950–1995)", - "symbol": "PLZ" - }, - "PTE": { - "displayName": "escudo portugais", - "displayName-count-one": "escudo portugais", - "displayName-count-other": "escudos portugais", - "symbol": "PTE" - }, - "PYG": { - "displayName": "guaraní paraguayen", - "displayName-count-one": "guaraní paraguayen", - "displayName-count-other": "guaranís paraguayens", - "symbol": "PYG", - "symbol-alt-narrow": "₲" - }, - "QAR": { - "displayName": "riyal qatari", - "displayName-count-one": "riyal qatari", - "displayName-count-other": "riyals qataris", - "symbol": "QAR" - }, - "RHD": { - "displayName": "dollar rhodésien", - "displayName-count-one": "dollar rhodésien", - "displayName-count-other": "dollars rhodésiens", - "symbol": "$RH" - }, - "ROL": { - "displayName": "ancien leu roumain", - "displayName-count-one": "leu roumain (1952–2005)", - "displayName-count-other": "lei roumains (1952–2005)", - "symbol": "ROL" - }, - "RON": { - "displayName": "leu roumain", - "displayName-count-one": "leu roumain", - "displayName-count-other": "lei roumains", - "symbol": "RON", - "symbol-alt-narrow": "L" - }, - "RSD": { - "displayName": "dinar serbe", - "displayName-count-one": "dinar serbe", - "displayName-count-other": "dinars serbes", - "symbol": "RSD" - }, - "RUB": { - "displayName": "rouble russe", - "displayName-count-one": "rouble russe", - "displayName-count-other": "roubles russes", - "symbol": "RUB", - "symbol-alt-narrow": "₽" - }, - "RUR": { - "displayName": "rouble russe (1991–1998)", - "displayName-count-one": "rouble russe (1991–1998)", - "displayName-count-other": "roubles russes (1991–1998)", - "symbol": "RUR", - "symbol-alt-narrow": "р." - }, - "RWF": { - "displayName": "franc rwandais", - "displayName-count-one": "franc rwandais", - "displayName-count-other": "francs rwandais", - "symbol": "RWF", - "symbol-alt-narrow": "FR" - }, - "SAR": { - "displayName": "riyal saoudien", - "displayName-count-one": "riyal saoudien", - "displayName-count-other": "riyals saoudiens", - "symbol": "SAR" - }, - "SBD": { - "displayName": "dollar des îles Salomon", - "displayName-count-one": "dollar des îles Salomon", - "displayName-count-other": "dollars des îles Salomon", - "symbol": "$SB", - "symbol-alt-narrow": "$" - }, - "SCR": { - "displayName": "roupie des Seychelles", - "displayName-count-one": "roupie des Seychelles", - "displayName-count-other": "roupies des Seychelles", - "symbol": "SCR" - }, - "SDD": { - "displayName": "dinar soudanais", - "displayName-count-one": "dinar soudanais (1992–2007)", - "displayName-count-other": "dinars soudanais (1992–2007)", - "symbol": "SDD" - }, - "SDG": { - "displayName": "livre soudanaise", - "displayName-count-one": "livre soudanaise", - "displayName-count-other": "livres soudanaises", - "symbol": "SDG" - }, - "SDP": { - "displayName": "livre soudanaise (1956–2007)", - "displayName-count-one": "livre soudanaise (1956–2007)", - "displayName-count-other": "livres soudanaises (1956–2007)", - "symbol": "SDP" - }, - "SEK": { - "displayName": "couronne suédoise", - "displayName-count-one": "couronne suédoise", - "displayName-count-other": "couronnes suédoises", - "symbol": "SEK", - "symbol-alt-narrow": "kr" - }, - "SGD": { - "displayName": "dollar de Singapour", - "displayName-count-one": "dollar de Singapour", - "displayName-count-other": "dollars de Singapour", - "symbol": "$SG", - "symbol-alt-narrow": "$" - }, - "SHP": { - "displayName": "livre de Sainte-Hélène", - "displayName-count-one": "livre de Sainte-Hélène", - "displayName-count-other": "livres de Sainte-Hélène", - "symbol": "SHP", - "symbol-alt-narrow": "£" - }, - "SIT": { - "displayName": "tolar slovène", - "displayName-count-one": "tolar slovène", - "displayName-count-other": "tolars slovènes", - "symbol": "SIT" - }, - "SKK": { - "displayName": "couronne slovaque", - "displayName-count-one": "couronne slovaque", - "displayName-count-other": "couronnes slovaques", - "symbol": "SKK" - }, - "SLL": { - "displayName": "leone sierra-léonais", - "displayName-count-one": "leone sierra-léonais", - "displayName-count-other": "leones sierra-léonais", - "symbol": "SLL" - }, - "SOS": { - "displayName": "shilling somalien", - "displayName-count-one": "shilling somalien", - "displayName-count-other": "shillings somaliens", - "symbol": "SOS" - }, - "SRD": { - "displayName": "dollar surinamais", - "displayName-count-one": "dollar surinamais", - "displayName-count-other": "dollars surinamais", - "symbol": "$SR", - "symbol-alt-narrow": "$" - }, - "SRG": { - "displayName": "florin surinamais", - "displayName-count-one": "florin surinamais", - "displayName-count-other": "florins surinamais", - "symbol": "SRG" - }, - "SSP": { - "displayName": "livre sud-soudanaise", - "displayName-count-one": "livre sud-soudanaise", - "displayName-count-other": "livres sud-soudanaises", - "symbol": "SSP", - "symbol-alt-narrow": "£" - }, - "STD": { - "displayName": "dobra santoméen", - "displayName-count-one": "dobra santoméen", - "displayName-count-other": "dobras santoméens", - "symbol": "STD", - "symbol-alt-narrow": "Db" - }, - "STN": { - "displayName": "STN", - "symbol": "STN" - }, - "SUR": { - "displayName": "rouble soviétique", - "displayName-count-one": "rouble soviétique", - "displayName-count-other": "roubles soviétiques", - "symbol": "SUR" - }, - "SVC": { - "displayName": "colón salvadorien", - "displayName-count-one": "colón salvadorien", - "displayName-count-other": "colóns salvadoriens", - "symbol": "SVC" - }, - "SYP": { - "displayName": "livre syrienne", - "displayName-count-one": "livre syrienne", - "displayName-count-other": "livres syriennes", - "symbol": "SYP", - "symbol-alt-narrow": "£" - }, - "SZL": { - "displayName": "lilangeni swazi", - "displayName-count-one": "lilangeni swazi", - "displayName-count-other": "lilangenis swazis", - "symbol": "SZL" - }, - "THB": { - "displayName": "baht thaïlandais", - "displayName-count-one": "baht thaïlandais", - "displayName-count-other": "bahts thaïlandais", - "symbol": "THB", - "symbol-alt-narrow": "฿" - }, - "TJR": { - "displayName": "rouble tadjik", - "displayName-count-one": "rouble tadjik", - "displayName-count-other": "roubles tadjiks", - "symbol": "TJR" - }, - "TJS": { - "displayName": "somoni tadjik", - "displayName-count-one": "somoni tadjik", - "displayName-count-other": "somonis tadjiks", - "symbol": "TJS" - }, - "TMM": { - "displayName": "manat turkmène", - "displayName-count-one": "manat turkmène", - "displayName-count-other": "manats turkmènes", - "symbol": "TMM" - }, - "TMT": { - "displayName": "nouveau manat turkmène", - "displayName-count-one": "nouveau manat turkmène", - "displayName-count-other": "nouveaux manats turkmènes", - "symbol": "TMT" - }, - "TND": { - "displayName": "dinar tunisien", - "displayName-count-one": "dinar tunisien", - "displayName-count-other": "dinars tunisiens", - "symbol": "TND" - }, - "TOP": { - "displayName": "pa’anga tongan", - "displayName-count-one": "pa’anga tongan", - "displayName-count-other": "pa’angas tongans", - "symbol": "TOP", - "symbol-alt-narrow": "T$" - }, - "TPE": { - "displayName": "escudo timorais", - "displayName-count-one": "escudo timorais", - "displayName-count-other": "escudos timorais", - "symbol": "TPE" - }, - "TRL": { - "displayName": "livre turque (1844–2005)", - "displayName-count-one": "livre turque (1844–2005)", - "displayName-count-other": "livres turques (1844–2005)", - "symbol": "TRL" - }, - "TRY": { - "displayName": "livre turque", - "displayName-count-one": "livre turque", - "displayName-count-other": "livres turques", - "symbol": "TRY", - "symbol-alt-narrow": "₺", - "symbol-alt-variant": "LT" - }, - "TTD": { - "displayName": "dollar trinidadien", - "displayName-count-one": "dollar de Trinité-et-Tobago", - "displayName-count-other": "dollars de Trinité-et-Tobago", - "symbol": "$TT", - "symbol-alt-narrow": "$" - }, - "TWD": { - "displayName": "nouveau dollar taïwanais", - "displayName-count-one": "nouveau dollar taïwanais", - "displayName-count-other": "nouveaux dollars taïwanais", - "symbol": "TWD", - "symbol-alt-narrow": "NT$" - }, - "TZS": { - "displayName": "shilling tanzanien", - "displayName-count-one": "shilling tanzanien", - "displayName-count-other": "shillings tanzaniens", - "symbol": "TZS" - }, - "UAH": { - "displayName": "hryvnia ukrainienne", - "displayName-count-one": "hryvnia ukrainienne", - "displayName-count-other": "hryvnias ukrainiennes", - "symbol": "UAH", - "symbol-alt-narrow": "₴" - }, - "UAK": { - "displayName": "karbovanetz", - "displayName-count-one": "karbovanets ukrainien (1992–1996)", - "displayName-count-other": "karbovanets ukrainiens (1992–1996)", - "symbol": "UAK" - }, - "UGS": { - "displayName": "shilling ougandais (1966–1987)", - "displayName-count-one": "shilling ougandais (1966–1987)", - "displayName-count-other": "shillings ougandais (1966–1987)", - "symbol": "UGS" - }, - "UGX": { - "displayName": "shilling ougandais", - "displayName-count-one": "shilling ougandais", - "displayName-count-other": "shillings ougandais", - "symbol": "UGX" - }, - "USD": { - "displayName": "dollar des États-Unis", - "displayName-count-one": "dollar des États-Unis", - "displayName-count-other": "dollars des États-Unis", - "symbol": "$US", - "symbol-alt-narrow": "$" - }, - "USN": { - "displayName": "dollar des Etats-Unis (jour suivant)", - "displayName-count-one": "dollar des États-Unis (jour suivant)", - "displayName-count-other": "dollars des États-Unis (jour suivant)", - "symbol": "USN" - }, - "USS": { - "displayName": "dollar des Etats-Unis (jour même)", - "displayName-count-one": "dollar des États-Unis (jour même)", - "displayName-count-other": "dollars des États-Unis (jour même)", - "symbol": "USS" - }, - "UYI": { - "displayName": "peso uruguayen (unités indexées)", - "displayName-count-one": "peso uruguayen (unités indexées)", - "displayName-count-other": "pesos uruguayen (unités indexées)", - "symbol": "UYI" - }, - "UYP": { - "displayName": "peso uruguayen (1975–1993)", - "displayName-count-one": "peso uruguayen (1975–1993)", - "displayName-count-other": "pesos uruguayens (1975–1993)", - "symbol": "UYP" - }, - "UYU": { - "displayName": "peso uruguayen", - "displayName-count-one": "peso uruguayen", - "displayName-count-other": "pesos uruguayens", - "symbol": "$UY", - "symbol-alt-narrow": "$" - }, - "UZS": { - "displayName": "sum ouzbek", - "displayName-count-one": "sum ouzbek", - "displayName-count-other": "sums ouzbeks", - "symbol": "UZS" - }, - "VEB": { - "displayName": "bolivar vénézuélien (1871–2008)", - "displayName-count-one": "bolivar vénézuélien (1871–2008)", - "displayName-count-other": "bolivar vénézuélien (1871–2008)", - "symbol": "VEB" - }, - "VEF": { - "displayName": "bolivar vénézuélien", - "displayName-count-one": "bolivar vénézuélien", - "displayName-count-other": "bolivars vénézuéliens", - "symbol": "VEF", - "symbol-alt-narrow": "Bs" - }, - "VND": { - "displayName": "dông vietnamien", - "displayName-count-one": "dông vietnamien", - "displayName-count-other": "dôngs vietnamiens", - "symbol": "₫", - "symbol-alt-narrow": "₫" - }, - "VNN": { - "displayName": "VNN", - "symbol": "VNN" - }, - "VUV": { - "displayName": "vatu vanuatuan", - "displayName-count-one": "vatu vanuatuan", - "displayName-count-other": "vatus vanuatuans", - "symbol": "VUV" - }, - "WST": { - "displayName": "tala samoan", - "displayName-count-one": "tala samoan", - "displayName-count-other": "talas samoans", - "symbol": "WS$" - }, - "XAF": { - "displayName": "franc CFA (BEAC)", - "displayName-count-one": "franc CFA (BEAC)", - "displayName-count-other": "francs CFA (BEAC)", - "symbol": "FCFA" - }, - "XAG": { - "displayName": "argent", - "displayName-count-one": "once troy d’argent", - "displayName-count-other": "onces troy d’argent", - "symbol": "XAG" - }, - "XAU": { - "displayName": "or", - "displayName-count-one": "once troy d’or", - "displayName-count-other": "onces troy d’or", - "symbol": "XAU" - }, - "XBA": { - "displayName": "unité européenne composée", - "displayName-count-one": "unité composée européenne (EURCO)", - "displayName-count-other": "unités composées européennes (EURCO)", - "symbol": "XBA" - }, - "XBB": { - "displayName": "unité monétaire européenne", - "displayName-count-one": "unité monétaire européenne (UME–6)", - "displayName-count-other": "unités monétaires européennes (UME–6)", - "symbol": "XBB" - }, - "XBC": { - "displayName": "unité de compte européenne (XBC)", - "displayName-count-one": "unité de compte 9 européenne (UEC–9)", - "displayName-count-other": "unités de compte 9 européennes (UEC–9)", - "symbol": "XBC" - }, - "XBD": { - "displayName": "unité de compte européenne (XBD)", - "displayName-count-one": "unité de compte 17 européenne (UEC–17)", - "displayName-count-other": "unités de compte 17 européennes (UEC–17)", - "symbol": "XBD" - }, - "XCD": { - "displayName": "dollar des Caraïbes orientales", - "displayName-count-one": "dollar des Caraïbes orientales", - "displayName-count-other": "dollars des Caraïbes orientales", - "symbol": "XCD", - "symbol-alt-narrow": "$" - }, - "XDR": { - "displayName": "droit de tirage spécial", - "displayName-count-one": "droit de tirage spécial", - "displayName-count-other": "droits de tirage spéciaux", - "symbol": "XDR" - }, - "XEU": { - "displayName": "unité de compte européenne (ECU)", - "symbol": "XEU" - }, - "XFO": { - "displayName": "franc or", - "displayName-count-one": "franc or", - "displayName-count-other": "francs or", - "symbol": "XFO" - }, - "XFU": { - "displayName": "franc UIC", - "displayName-count-one": "franc UIC", - "displayName-count-other": "francs UIC", - "symbol": "XFU" - }, - "XOF": { - "displayName": "franc CFA (BCEAO)", - "displayName-count-one": "franc CFA (BCEAO)", - "displayName-count-other": "francs CFA (BCEAO)", - "symbol": "CFA" - }, - "XPD": { - "displayName": "palladium", - "displayName-count-one": "once troy de palladium", - "displayName-count-other": "onces troy de palladium", - "symbol": "XPD" - }, - "XPF": { - "displayName": "franc CFP", - "displayName-count-one": "franc CFP", - "displayName-count-other": "francs CFP", - "symbol": "FCFP" - }, - "XPT": { - "displayName": "platine", - "displayName-count-one": "once troy de platine", - "displayName-count-other": "onces troy de platine", - "symbol": "XPT" - }, - "XRE": { - "displayName": "type de fonds RINET", - "displayName-count-one": "unité de fonds RINET", - "displayName-count-other": "unités de fonds RINET", - "symbol": "XRE" - }, - "XSU": { - "displayName": "XSU", - "symbol": "XSU" - }, - "XTS": { - "displayName": "(devise de test)", - "displayName-count-one": "(devise de test)", - "displayName-count-other": "(devises de test)", - "symbol": "XTS" - }, - "XUA": { - "displayName": "XUA", - "symbol": "XUA" - }, - "XXX": { - "displayName": "devise inconnue ou non valide", - "displayName-count-one": "devise inconnue", - "displayName-count-other": "devises inconnues", - "symbol": "XXX" - }, - "YDD": { - "displayName": "dinar du Yémen", - "displayName-count-one": "dinar nord-yéménite", - "displayName-count-other": "dinars nord-yéménites", - "symbol": "YDD" - }, - "YER": { - "displayName": "riyal yéménite", - "displayName-count-one": "riyal yéménite", - "displayName-count-other": "riyals yéménites", - "symbol": "YER" - }, - "YUD": { - "displayName": "nouveau dinar yougoslave", - "displayName-count-one": "dinar fort yougoslave (1966–1989)", - "displayName-count-other": "dinars forts yougoslaves (1966–1989)", - "symbol": "YUD" - }, - "YUM": { - "displayName": "dinar yougoslave Noviy", - "displayName-count-one": "nouveau dinar yougoslave (1994–2003)", - "displayName-count-other": "nouveaux dinars yougoslaves (1994–2003)", - "symbol": "YUM" - }, - "YUN": { - "displayName": "dinar yougoslave convertible", - "displayName-count-one": "dinar convertible yougoslave (1990–1992)", - "displayName-count-other": "dinars convertibles yougoslaves (1990–1992)", - "symbol": "YUN" - }, - "YUR": { - "displayName": "YUR", - "symbol": "YUR" - }, - "ZAL": { - "displayName": "rand sud-africain (financier)", - "displayName-count-one": "rand sud-africain (financier)", - "displayName-count-other": "rands sud-africains (financiers)", - "symbol": "ZAL" - }, - "ZAR": { - "displayName": "rand sud-africain", - "displayName-count-one": "rand sud-africain", - "displayName-count-other": "rands sud-africains", - "symbol": "ZAR", - "symbol-alt-narrow": "R" - }, - "ZMK": { - "displayName": "kwacha zambien (1968–2012)", - "displayName-count-one": "kwacha zambien (1968–2012)", - "displayName-count-other": "kwachas zambiens (1968–2012)", - "symbol": "ZMK" - }, - "ZMW": { - "displayName": "kwacha zambien", - "displayName-count-one": "kwacha zambien", - "displayName-count-other": "kwachas zambiens", - "symbol": "ZMW", - "symbol-alt-narrow": "Kw" - }, - "ZRN": { - "displayName": "nouveau zaïre zaïrien", - "displayName-count-one": "nouveau zaïre zaïrien", - "displayName-count-other": "nouveaux zaïres zaïriens", - "symbol": "ZRN" - }, - "ZRZ": { - "displayName": "zaïre zaïrois", - "displayName-count-one": "zaïre zaïrois", - "displayName-count-other": "zaïres zaïrois", - "symbol": "ZRZ" - }, - "ZWD": { - "displayName": "dollar zimbabwéen", - "displayName-count-one": "dollar zimbabwéen", - "displayName-count-other": "dollars zimbabwéens", - "symbol": "ZWD" + "short": { + "decimalFormat": { + "1000-count-one": "0 k", + "1000-count-other": "0 k", + "10000-count-one": "00 k", + "10000-count-other": "00 k", + "100000-count-one": "000 k", + "100000-count-other": "000 k", + "1000000-count-one": "0 M", + "1000000-count-other": "0 M", + "10000000-count-one": "00 M", + "10000000-count-other": "00 M", + "100000000-count-one": "000 M", + "100000000-count-other": "000 M", + "1000000000-count-one": "0 Md", + "1000000000-count-other": "0 Md", + "10000000000-count-one": "00 Md", + "10000000000-count-other": "00 Md", + "100000000000-count-one": "000 Md", + "100000000000-count-other": "000 Md", + "1000000000000-count-one": "0 Bn", + "1000000000000-count-other": "0 Bn", + "10000000000000-count-one": "00 Bn", + "10000000000000-count-other": "00 Bn", + "100000000000000-count-one": "000 Bn", + "100000000000000-count-other": "000 Bn" + } + } + }, + "scientificFormats-numberSystem-latn": { + "standard": "#E0" + }, + "percentFormats-numberSystem-latn": { + "standard": "#,##0%" + }, + "currencyFormats-numberSystem-latn": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZWL": { - "displayName": "dollar zimbabwéen (2009)", - "displayName-count-one": "dollar zimbabwéen (2009)", - "displayName-count-other": "dollars zimbabwéens (2009)", - "symbol": "ZWL" + "standard": "#,##0.00 ¤ ;-#,##0.00 ¤", + "accounting": "#,##0.00 ¤;(#,##0.00 ¤)", + "short": { + "standard": { + "1000-count-one": "0 k ¤", + "1000-count-other": "0 k ¤", + "10000-count-one": "00 k ¤", + "10000-count-other": "00 k ¤", + "100000-count-one": "000 k ¤", + "100000-count-other": "000 k ¤", + "1000000-count-one": "0 M ¤", + "1000000-count-other": "0 M ¤", + "10000000-count-one": "00 M ¤", + "10000000-count-other": "00 M ¤", + "100000000-count-one": "000 M ¤", + "100000000-count-other": "000 M ¤", + "1000000000-count-one": "0 Md ¤", + "1000000000-count-other": "0 Md ¤", + "10000000000-count-one": "00 Md ¤", + "10000000000-count-other": "00 Md ¤", + "100000000000-count-one": "000 Md ¤", + "100000000000-count-other": "000 Md ¤", + "1000000000000-count-one": "0 Bn ¤", + "1000000000000-count-other": "0 Bn ¤", + "10000000000000-count-one": "00 Bn ¤", + "10000000000000-count-other": "00 Bn ¤", + "100000000000000-count-one": "000 Bn ¤", + "100000000000000-count-other": "000 Bn ¤" + } }, - "ZWR": { - "displayName": "dollar zimbabwéen (2008)", - "displayName-count-one": "dollar zimbabwéen (2008)", - "displayName-count-other": "dollars zimbabwéens (2008)", - "symbol": "ZWR" + "unitPattern-count-one": "{0} {1}", + "unitPattern-count-other": "{0} {1}" + }, + "miscPatterns-numberSystem-latn": { + "atLeast": "⩾{0}", + "range": "{0}–{1}" + }, + "minimalPairs": { + "pluralMinimalPairs-count-one": "{0} jour", + "pluralMinimalPairs-count-other": "{0} jours", + "one": "Prenez la {0}re à droite.", + "other": "Prenez la {0}e à droite." + }, + "currencies": { + "ADP": { + "displayName": "peseta andorrane", + "displayName-count-one": "peseta andorrane", + "displayName-count-other": "pesetas andorranes", + "symbol": "ADP" + }, + "AED": { + "displayName": "dirham des Émirats arabes unis", + "displayName-count-one": "dirham des Émirats arabes unis", + "displayName-count-other": "dirhams des Émirats arabes unis", + "symbol": "AED" + }, + "AFA": { + "displayName": "afghani (1927–2002)", + "displayName-count-one": "afghani (1927–2002)", + "displayName-count-other": "afghanis (1927–2002)", + "symbol": "AFA" + }, + "AFN": { + "displayName": "afghani afghan", + "displayName-count-one": "afghani afghan", + "displayName-count-other": "afghanis afghan", + "symbol": "AFN" + }, + "ALK": { + "displayName": "lek albanais (1947–1961)", + "displayName-count-one": "lek albanais (1947–1961)", + "displayName-count-other": "leks albanais (1947–1961)", + "symbol": "ALK" + }, + "ALL": { + "displayName": "lek albanais", + "displayName-count-one": "lek albanais", + "displayName-count-other": "leks albanais", + "symbol": "ALL" + }, + "AMD": { + "displayName": "dram arménien", + "displayName-count-one": "dram arménien", + "displayName-count-other": "drams arméniens", + "symbol": "AMD" + }, + "ANG": { + "displayName": "florin antillais", + "displayName-count-one": "florin antillais", + "displayName-count-other": "florins antillais", + "symbol": "ANG" + }, + "AOA": { + "displayName": "kwanza angolais", + "displayName-count-one": "kwanza angolais", + "displayName-count-other": "kwanzas angolais", + "symbol": "AOA", + "symbol-alt-narrow": "Kz" + }, + "AOK": { + "displayName": "kwanza angolais (1977–1990)", + "displayName-count-one": "kwanza angolais (1977–1990)", + "displayName-count-other": "kwanzas angolais (1977–1990)", + "symbol": "AOK" + }, + "AON": { + "displayName": "nouveau kwanza angolais (1990–2000)", + "displayName-count-one": "nouveau kwanza angolais (1990–2000)", + "displayName-count-other": "nouveaux kwanzas angolais (1990–2000)", + "symbol": "AON" + }, + "AOR": { + "displayName": "kwanza angolais réajusté (1995–1999)", + "displayName-count-one": "kwanza angolais réajusté (1995–1999)", + "displayName-count-other": "kwanzas angolais réajustés (1995–1999)", + "symbol": "AOR" + }, + "ARA": { + "displayName": "austral argentin", + "displayName-count-one": "austral argentin", + "displayName-count-other": "australs argentins", + "symbol": "ARA" + }, + "ARL": { + "displayName": "ARL", + "symbol": "ARL" + }, + "ARM": { + "displayName": "ARM", + "symbol": "ARM" + }, + "ARP": { + "displayName": "peso argentin (1983–1985)", + "displayName-count-one": "peso argentin (1983–1985)", + "displayName-count-other": "pesos argentins (1983–1985)", + "symbol": "ARP" + }, + "ARS": { + "displayName": "peso argentin", + "displayName-count-one": "peso argentin", + "displayName-count-other": "pesos argentins", + "symbol": "$AR", + "symbol-alt-narrow": "$" + }, + "ATS": { + "displayName": "schilling autrichien", + "displayName-count-one": "schilling autrichien", + "displayName-count-other": "schillings autrichiens", + "symbol": "ATS" + }, + "AUD": { + "displayName": "dollar australien", + "displayName-count-one": "dollar australien", + "displayName-count-other": "dollars australiens", + "symbol": "$AU", + "symbol-alt-narrow": "$" + }, + "AWG": { + "displayName": "florin arubais", + "displayName-count-one": "florin arubais", + "displayName-count-other": "florins arubais", + "symbol": "AWG" + }, + "AZM": { + "displayName": "manat azéri (1993–2006)", + "displayName-count-one": "manat azéri (1993–2006)", + "displayName-count-other": "manats azéris (1993–2006)", + "symbol": "AZM" + }, + "AZN": { + "displayName": "manat azéri", + "displayName-count-one": "manat azéri", + "displayName-count-other": "manats azéris", + "symbol": "AZN" + }, + "BAD": { + "displayName": "dinar bosniaque", + "displayName-count-one": "dinar bosniaque", + "displayName-count-other": "dinars bosniaques", + "symbol": "BAD" + }, + "BAM": { + "displayName": "mark convertible bosniaque", + "displayName-count-one": "mark convertible bosniaque", + "displayName-count-other": "marks convertibles bosniaques", + "symbol": "BAM", + "symbol-alt-narrow": "KM" + }, + "BAN": { + "displayName": "BAN", + "symbol": "BAN" + }, + "BBD": { + "displayName": "dollar barbadien", + "displayName-count-one": "dollar barbadien", + "displayName-count-other": "dollars barbadiens", + "symbol": "BBD", + "symbol-alt-narrow": "$" + }, + "BDT": { + "displayName": "taka bangladeshi", + "displayName-count-one": "taka bangladeshi", + "displayName-count-other": "takas bangladeshis", + "symbol": "BDT", + "symbol-alt-narrow": "৳" + }, + "BEC": { + "displayName": "franc belge (convertible)", + "displayName-count-one": "franc belge (convertible)", + "displayName-count-other": "francs belges (convertibles)", + "symbol": "BEC" + }, + "BEF": { + "displayName": "franc belge", + "displayName-count-one": "franc belge", + "displayName-count-other": "francs belges", + "symbol": "FB" + }, + "BEL": { + "displayName": "franc belge (financier)", + "displayName-count-one": "franc belge (financier)", + "displayName-count-other": "francs belges (financiers)", + "symbol": "BEL" + }, + "BGL": { + "displayName": "lev bulgare (1962–1999)", + "displayName-count-one": "lev bulgare (1962–1999)", + "displayName-count-other": "levs bulgares (1962–1999)", + "symbol": "BGL" + }, + "BGM": { + "displayName": "BGM", + "symbol": "BGM" + }, + "BGN": { + "displayName": "lev bulgare", + "displayName-count-one": "lev bulgare", + "displayName-count-other": "levs bulgares", + "symbol": "BGN" + }, + "BGO": { + "displayName": "BGO", + "symbol": "BGO" + }, + "BHD": { + "displayName": "dinar bahreïni", + "displayName-count-one": "dinar bahreïni", + "displayName-count-other": "dinars bahreïnis", + "symbol": "BHD" + }, + "BIF": { + "displayName": "franc burundais", + "displayName-count-one": "franc burundais", + "displayName-count-other": "francs burundais", + "symbol": "BIF" + }, + "BMD": { + "displayName": "dollar bermudien", + "displayName-count-one": "dollar bermudien", + "displayName-count-other": "dollars bermudiens", + "symbol": "$BM", + "symbol-alt-narrow": "$" + }, + "BND": { + "displayName": "dollar brunéien", + "displayName-count-one": "dollar brunéien", + "displayName-count-other": "dollars brunéiens", + "symbol": "$BN", + "symbol-alt-narrow": "$" + }, + "BOB": { + "displayName": "boliviano bolivien", + "displayName-count-one": "boliviano bolivien", + "displayName-count-other": "bolivianos boliviens", + "symbol": "BOB", + "symbol-alt-narrow": "Bs" + }, + "BOL": { + "displayName": "BOL", + "symbol": "BOL" + }, + "BOP": { + "displayName": "peso bolivien", + "displayName-count-one": "peso bolivien", + "displayName-count-other": "pesos boliviens", + "symbol": "BOP" + }, + "BOV": { + "displayName": "mvdol bolivien", + "displayName-count-one": "mvdol bolivien", + "displayName-count-other": "mvdols boliviens", + "symbol": "BOV" + }, + "BRB": { + "displayName": "nouveau cruzeiro brésilien (1967–1986)", + "displayName-count-one": "nouveau cruzeiro brésilien (1967–1986)", + "displayName-count-other": "nouveaux cruzeiros brésiliens (1967–1986)", + "symbol": "BRB" + }, + "BRC": { + "displayName": "cruzado brésilien (1986–1989)", + "displayName-count-one": "cruzado brésilien (1986–1989)", + "displayName-count-other": "cruzados brésiliens (1986–1989)", + "symbol": "BRC" + }, + "BRE": { + "displayName": "cruzeiro brésilien (1990–1993)", + "displayName-count-one": "cruzeiro brésilien (1990–1993)", + "displayName-count-other": "cruzeiros brésiliens (1990–1993)", + "symbol": "BRE" + }, + "BRL": { + "displayName": "réal brésilien", + "displayName-count-one": "réal brésilien", + "displayName-count-other": "réals brésiliens", + "symbol": "R$", + "symbol-alt-narrow": "R$" + }, + "BRN": { + "displayName": "nouveau cruzado", + "displayName-count-one": "nouveau cruzado brésilien (1989–1990)", + "displayName-count-other": "nouveaux cruzados brésiliens (1989–1990)", + "symbol": "BRN" + }, + "BRR": { + "displayName": "cruzeiro", + "displayName-count-one": "cruzeiro réal brésilien (1993–1994)", + "displayName-count-other": "cruzeiros réals brésiliens (1993–1994)", + "symbol": "BRR" + }, + "BRZ": { + "displayName": "BRZ", + "symbol": "BRZ" + }, + "BSD": { + "displayName": "dollar bahaméen", + "displayName-count-one": "dollar bahaméen", + "displayName-count-other": "dollars bahaméens", + "symbol": "$BS", + "symbol-alt-narrow": "$" + }, + "BTN": { + "displayName": "ngultrum bouthanais", + "displayName-count-one": "ngultrum bouthanais", + "displayName-count-other": "ngultrums bouthanais", + "symbol": "BTN" + }, + "BUK": { + "displayName": "kyat birman", + "displayName-count-one": "kyat birman", + "displayName-count-other": "kyats birmans", + "symbol": "BUK" + }, + "BWP": { + "displayName": "pula botswanais", + "displayName-count-one": "pula botswanais", + "displayName-count-other": "pulas botswanais", + "symbol": "BWP", + "symbol-alt-narrow": "P" + }, + "BYB": { + "displayName": "nouveau rouble biélorusse (1994–1999)", + "displayName-count-one": "nouveau rouble biélorusse (1994–1999)", + "displayName-count-other": "nouveaux roubles biélorusses (1994–1999)", + "symbol": "BYB" + }, + "BYN": { + "displayName": "rouble biélorusse", + "displayName-count-one": "rouble biélorusse", + "displayName-count-other": "roubles biélorusses", + "symbol": "BYN", + "symbol-alt-narrow": "р." + }, + "BYR": { + "displayName": "rouble biélorusse (2000–2016)", + "displayName-count-one": "rouble biélorusse (2000–2016)", + "displayName-count-other": "roubles biélorusses (2000–2016)", + "symbol": "BYR" + }, + "BZD": { + "displayName": "dollar bélizéen", + "displayName-count-one": "dollar bélizéen", + "displayName-count-other": "dollars bélizéens", + "symbol": "$BZ", + "symbol-alt-narrow": "$" + }, + "CAD": { + "displayName": "dollar canadien", + "displayName-count-one": "dollar canadien", + "displayName-count-other": "dollars canadiens", + "symbol": "$CA", + "symbol-alt-narrow": "$" + }, + "CDF": { + "displayName": "franc congolais", + "displayName-count-one": "franc congolais", + "displayName-count-other": "francs congolais", + "symbol": "CDF" + }, + "CHE": { + "displayName": "euro WIR", + "displayName-count-one": "euro WIR", + "displayName-count-other": "euros WIR", + "symbol": "CHE" + }, + "CHF": { + "displayName": "franc suisse", + "displayName-count-one": "franc suisse", + "displayName-count-other": "francs suisses", + "symbol": "CHF" + }, + "CHW": { + "displayName": "franc WIR", + "displayName-count-one": "franc WIR", + "displayName-count-other": "francs WIR", + "symbol": "CHW" + }, + "CLE": { + "displayName": "CLE", + "symbol": "CLE" + }, + "CLF": { + "displayName": "unité d’investissement chilienne", + "displayName-count-one": "unité d’investissement chilienne", + "displayName-count-other": "unités d’investissement chiliennes", + "symbol": "CLF" + }, + "CLP": { + "displayName": "peso chilien", + "displayName-count-one": "peso chilien", + "displayName-count-other": "pesos chiliens", + "symbol": "$CL", + "symbol-alt-narrow": "$" + }, + "CNH": { + "displayName": "yuan chinois (zone extracôtière)", + "displayName-count-one": "yuan chinois (zone extracôtière)", + "displayName-count-other": "yuans chinois (zone extracôtière)", + "symbol": "CNH" + }, + "CNX": { + "displayName": "CNX", + "symbol": "CNX" + }, + "CNY": { + "displayName": "yuan renminbi chinois", + "displayName-count-one": "yuan renminbi chinois", + "displayName-count-other": "yuans renminbi chinois", + "symbol": "CNY", + "symbol-alt-narrow": "¥" + }, + "COP": { + "displayName": "peso colombien", + "displayName-count-one": "peso colombien", + "displayName-count-other": "pesos colombiens", + "symbol": "$CO", + "symbol-alt-narrow": "$" + }, + "COU": { + "displayName": "unité de valeur réelle colombienne", + "displayName-count-one": "unité de valeur réelle colombienne", + "displayName-count-other": "unités de valeur réelle colombiennes", + "symbol": "COU" + }, + "CRC": { + "displayName": "colón costaricain", + "displayName-count-one": "colón costaricain", + "displayName-count-other": "colóns costaricains", + "symbol": "CRC", + "symbol-alt-narrow": "₡" + }, + "CSD": { + "displayName": "dinar serbo-monténégrin", + "displayName-count-one": "dinar serbo-monténégrin", + "displayName-count-other": "dinars serbo-monténégrins", + "symbol": "CSD" + }, + "CSK": { + "displayName": "couronne forte tchécoslovaque", + "displayName-count-one": "couronne forte tchécoslovaque", + "displayName-count-other": "couronnes fortes tchécoslovaques", + "symbol": "CSK" + }, + "CUC": { + "displayName": "peso cubain convertible", + "displayName-count-one": "peso cubain convertible", + "displayName-count-other": "pesos cubains convertibles", + "symbol": "CUC", + "symbol-alt-narrow": "$" + }, + "CUP": { + "displayName": "peso cubain", + "displayName-count-one": "peso cubain", + "displayName-count-other": "pesos cubains", + "symbol": "CUP", + "symbol-alt-narrow": "$" + }, + "CVE": { + "displayName": "escudo capverdien", + "displayName-count-one": "escudo capverdien", + "displayName-count-other": "escudos capverdiens", + "symbol": "CVE" + }, + "CYP": { + "displayName": "livre chypriote", + "displayName-count-one": "livre chypriote", + "displayName-count-other": "livres chypriotes", + "symbol": "£CY" + }, + "CZK": { + "displayName": "couronne tchèque", + "displayName-count-one": "couronne tchèque", + "displayName-count-other": "couronnes tchèques", + "symbol": "CZK", + "symbol-alt-narrow": "Kč" + }, + "DDM": { + "displayName": "mark est-allemand", + "displayName-count-one": "mark est-allemand", + "displayName-count-other": "marks est-allemands", + "symbol": "DDM" + }, + "DEM": { + "displayName": "mark allemand", + "displayName-count-one": "mark allemand", + "displayName-count-other": "marks allemands", + "symbol": "DEM" + }, + "DJF": { + "displayName": "franc djiboutien", + "displayName-count-one": "franc djiboutien", + "displayName-count-other": "francs djiboutiens", + "symbol": "DJF" + }, + "DKK": { + "displayName": "couronne danoise", + "displayName-count-one": "couronne danoise", + "displayName-count-other": "couronnes danoises", + "symbol": "DKK", + "symbol-alt-narrow": "kr" + }, + "DOP": { + "displayName": "peso dominicain", + "displayName-count-one": "peso dominicain", + "displayName-count-other": "pesos dominicains", + "symbol": "DOP", + "symbol-alt-narrow": "$" + }, + "DZD": { + "displayName": "dinar algérien", + "displayName-count-one": "dinar algérien", + "displayName-count-other": "dinars algériens", + "symbol": "DZD" + }, + "ECS": { + "displayName": "sucre équatorien", + "displayName-count-one": "sucre équatorien", + "displayName-count-other": "sucres équatoriens", + "symbol": "ECS" + }, + "ECV": { + "displayName": "unité de valeur constante équatoriale (UVC)", + "displayName-count-one": "unité de valeur constante équatorienne (UVC)", + "displayName-count-other": "unités de valeur constante équatoriennes (UVC)", + "symbol": "ECV" + }, + "EEK": { + "displayName": "couronne estonienne", + "displayName-count-one": "couronne estonienne", + "displayName-count-other": "couronnes estoniennes", + "symbol": "EEK" + }, + "EGP": { + "displayName": "livre égyptienne", + "displayName-count-one": "livre égyptienne", + "displayName-count-other": "livres égyptiennes", + "symbol": "EGP", + "symbol-alt-narrow": "£E" + }, + "ERN": { + "displayName": "nafka érythréen", + "displayName-count-one": "nafka érythréen", + "displayName-count-other": "nafkas érythréens", + "symbol": "ERN" + }, + "ESA": { + "displayName": "peseta espagnole (compte A)", + "displayName-count-one": "peseta espagnole (compte A)", + "displayName-count-other": "pesetas espagnoles (compte A)", + "symbol": "ESA" + }, + "ESB": { + "displayName": "peseta espagnole (compte convertible)", + "displayName-count-one": "peseta espagnole (compte convertible)", + "displayName-count-other": "pesetas espagnoles (compte convertible)", + "symbol": "ESB" + }, + "ESP": { + "displayName": "peseta espagnole", + "displayName-count-one": "peseta espagnole", + "displayName-count-other": "pesetas espagnoles", + "symbol": "ESP", + "symbol-alt-narrow": "₧" + }, + "ETB": { + "displayName": "birr éthiopien", + "displayName-count-one": "birr éthiopien", + "displayName-count-other": "birrs éthiopiens", + "symbol": "ETB" + }, + "EUR": { + "displayName": "euro", + "displayName-count-one": "euro", + "displayName-count-other": "euros", + "symbol": "€", + "symbol-alt-narrow": "€" + }, + "FIM": { + "displayName": "mark finlandais", + "displayName-count-one": "mark finlandais", + "displayName-count-other": "marks finlandais", + "symbol": "FIM" + }, + "FJD": { + "displayName": "dollar fidjien", + "displayName-count-one": "dollar fidjien", + "displayName-count-other": "dollars fidjiens", + "symbol": "$FJ", + "symbol-alt-narrow": "$" + }, + "FKP": { + "displayName": "livre des îles Malouines", + "displayName-count-one": "livre des îles Malouines", + "displayName-count-other": "livres des îles Malouines", + "symbol": "£FK", + "symbol-alt-narrow": "£" + }, + "FRF": { + "displayName": "franc français", + "displayName-count-one": "franc français", + "displayName-count-other": "francs français", + "symbol": "F" + }, + "GBP": { + "displayName": "livre sterling", + "displayName-count-one": "livre sterling", + "displayName-count-other": "livres sterling", + "symbol": "£GB", + "symbol-alt-narrow": "£" + }, + "GEK": { + "displayName": "coupon de lari géorgien", + "displayName-count-one": "coupon de lari géorgien", + "displayName-count-other": "coupons de lari géorgiens", + "symbol": "GEK" + }, + "GEL": { + "displayName": "lari géorgien", + "displayName-count-one": "lari géorgien", + "displayName-count-other": "lari géorgiens", + "symbol": "GEL", + "symbol-alt-narrow": "₾", + "symbol-alt-variant": "₾" + }, + "GHC": { + "displayName": "cédi", + "displayName-count-one": "cédi ghanéen (1967–2007)", + "displayName-count-other": "cédis ghanéens (1967–2007)", + "symbol": "GHC" + }, + "GHS": { + "displayName": "cédi ghanéen", + "displayName-count-one": "cédi ghanéen", + "displayName-count-other": "cédis ghanéens", + "symbol": "GHS" + }, + "GIP": { + "displayName": "livre de Gibraltar", + "displayName-count-one": "livre de Gibraltar", + "displayName-count-other": "livres de Gibraltar", + "symbol": "£GI", + "symbol-alt-narrow": "£" + }, + "GMD": { + "displayName": "dalasi gambien", + "displayName-count-one": "dalasi gambien", + "displayName-count-other": "dalasis gambiens", + "symbol": "GMD" + }, + "GNF": { + "displayName": "franc guinéen", + "displayName-count-one": "franc guinéen", + "displayName-count-other": "francs guinéens", + "symbol": "GNF", + "symbol-alt-narrow": "FG" + }, + "GNS": { + "displayName": "syli guinéen", + "displayName-count-one": "syli guinéen", + "displayName-count-other": "sylis guinéens", + "symbol": "GNS" + }, + "GQE": { + "displayName": "ekwélé équatoguinéen", + "displayName-count-one": "ekwélé équatoguinéen", + "displayName-count-other": "ekwélés équatoguinéens", + "symbol": "GQE" + }, + "GRD": { + "displayName": "drachme grecque", + "displayName-count-one": "drachme grecque", + "displayName-count-other": "drachmes grecques", + "symbol": "GRD" + }, + "GTQ": { + "displayName": "quetzal guatémaltèque", + "displayName-count-one": "quetzal guatémaltèque", + "displayName-count-other": "quetzals guatémaltèques", + "symbol": "GTQ", + "symbol-alt-narrow": "Q" + }, + "GWE": { + "displayName": "escudo de Guinée portugaise", + "displayName-count-one": "escudo de Guinée portugaise", + "displayName-count-other": "escudos de Guinée portugaise", + "symbol": "GWE" + }, + "GWP": { + "displayName": "peso bissau-guinéen", + "displayName-count-one": "peso bissau-guinéen", + "displayName-count-other": "pesos bissau-guinéens", + "symbol": "GWP" + }, + "GYD": { + "displayName": "dollar du Guyana", + "displayName-count-one": "dollar du Guyana", + "displayName-count-other": "dollars du Guyana", + "symbol": "GYD", + "symbol-alt-narrow": "$" + }, + "HKD": { + "displayName": "dollar de Hong Kong", + "displayName-count-one": "dollar de Hong Kong", + "displayName-count-other": "dollars de Hong Kong", + "symbol": "HKD", + "symbol-alt-narrow": "$" + }, + "HNL": { + "displayName": "lempira hondurien", + "displayName-count-one": "lempira hondurien", + "displayName-count-other": "lempiras honduriens", + "symbol": "HNL", + "symbol-alt-narrow": "L" + }, + "HRD": { + "displayName": "dinar croate", + "displayName-count-one": "dinar croate", + "displayName-count-other": "dinars croates", + "symbol": "HRD" + }, + "HRK": { + "displayName": "kuna croate", + "displayName-count-one": "kuna croate", + "displayName-count-other": "kunas croates", + "symbol": "HRK", + "symbol-alt-narrow": "kn" + }, + "HTG": { + "displayName": "gourde haïtienne", + "displayName-count-one": "gourde haïtienne", + "displayName-count-other": "gourdes haïtiennes", + "symbol": "HTG" + }, + "HUF": { + "displayName": "forint hongrois", + "displayName-count-one": "forint hongrois", + "displayName-count-other": "forints hongrois", + "symbol": "HUF", + "symbol-alt-narrow": "Ft" + }, + "IDR": { + "displayName": "roupie indonésienne", + "displayName-count-one": "roupie indonésienne", + "displayName-count-other": "roupies indonésiennes", + "symbol": "IDR", + "symbol-alt-narrow": "Rp" + }, + "IEP": { + "displayName": "livre irlandaise", + "displayName-count-one": "livre irlandaise", + "displayName-count-other": "livres irlandaises", + "symbol": "£IE" + }, + "ILP": { + "displayName": "livre israélienne", + "displayName-count-one": "livre israélienne", + "displayName-count-other": "livres israéliennes", + "symbol": "£IL" + }, + "ILR": { + "displayName": "ILR", + "symbol": "ILR" + }, + "ILS": { + "displayName": "nouveau shekel israélien", + "displayName-count-one": "nouveau shekel israélien", + "displayName-count-other": "nouveaux shekels israéliens", + "symbol": "₪", + "symbol-alt-narrow": "₪" + }, + "INR": { + "displayName": "roupie indienne", + "displayName-count-one": "roupie indienne", + "displayName-count-other": "roupies indiennes", + "symbol": "₹", + "symbol-alt-narrow": "₹" + }, + "IQD": { + "displayName": "dinar irakien", + "displayName-count-one": "dinar irakien", + "displayName-count-other": "dinars irakiens", + "symbol": "IQD" + }, + "IRR": { + "displayName": "riyal iranien", + "displayName-count-one": "riyal iranien", + "displayName-count-other": "riyals iraniens", + "symbol": "IRR" + }, + "ISJ": { + "displayName": "ISJ", + "symbol": "ISJ" + }, + "ISK": { + "displayName": "couronne islandaise", + "displayName-count-one": "couronne islandaise", + "displayName-count-other": "couronnes islandaises", + "symbol": "ISK", + "symbol-alt-narrow": "kr" + }, + "ITL": { + "displayName": "lire italienne", + "displayName-count-one": "lire italienne", + "displayName-count-other": "lires italiennes", + "symbol": "₤IT" + }, + "JMD": { + "displayName": "dollar jamaïcain", + "displayName-count-one": "dollar jamaïcain", + "displayName-count-other": "dollars jamaïcains", + "symbol": "JMD", + "symbol-alt-narrow": "$" + }, + "JOD": { + "displayName": "dinar jordanien", + "displayName-count-one": "dinar jordanien", + "displayName-count-other": "dinars jordaniens", + "symbol": "JOD" + }, + "JPY": { + "displayName": "yen japonais", + "displayName-count-one": "yen japonais", + "displayName-count-other": "yens japonais", + "symbol": "JPY", + "symbol-alt-narrow": "¥" + }, + "KES": { + "displayName": "shilling kényan", + "displayName-count-one": "shilling kényan", + "displayName-count-other": "shillings kényans", + "symbol": "KES" + }, + "KGS": { + "displayName": "som kirghize", + "displayName-count-one": "som kirghize", + "displayName-count-other": "soms kirghizes", + "symbol": "KGS" + }, + "KHR": { + "displayName": "riel cambodgien", + "displayName-count-one": "riel cambodgien", + "displayName-count-other": "riels cambodgiens", + "symbol": "KHR", + "symbol-alt-narrow": "៛" + }, + "KMF": { + "displayName": "franc comorien", + "displayName-count-one": "franc comorien", + "displayName-count-other": "francs comoriens", + "symbol": "KMF", + "symbol-alt-narrow": "FC" + }, + "KPW": { + "displayName": "won nord-coréen", + "displayName-count-one": "won nord-coréen", + "displayName-count-other": "wons nord-coréens", + "symbol": "KPW", + "symbol-alt-narrow": "₩" + }, + "KRH": { + "displayName": "KRH", + "symbol": "KRH" + }, + "KRO": { + "displayName": "KRO", + "symbol": "KRO" + }, + "KRW": { + "displayName": "won sud-coréen", + "displayName-count-one": "won sud-coréen", + "displayName-count-other": "wons sud-coréens", + "symbol": "₩", + "symbol-alt-narrow": "₩" + }, + "KWD": { + "displayName": "dinar koweïtien", + "displayName-count-one": "dinar koweïtien", + "displayName-count-other": "dinar koweïtiens", + "symbol": "KWD" + }, + "KYD": { + "displayName": "dollar des îles Caïmans", + "displayName-count-one": "dollar des îles Caïmans", + "displayName-count-other": "dollars des îles Caïmans", + "symbol": "KYD", + "symbol-alt-narrow": "$" + }, + "KZT": { + "displayName": "tenge kazakh", + "displayName-count-one": "tenge kazakh", + "displayName-count-other": "tenges kazakhs", + "symbol": "KZT", + "symbol-alt-narrow": "₸" + }, + "LAK": { + "displayName": "kip loatien", + "displayName-count-one": "kip loatien", + "displayName-count-other": "kips loatiens", + "symbol": "LAK", + "symbol-alt-narrow": "₭" + }, + "LBP": { + "displayName": "livre libanaise", + "displayName-count-one": "livre libanaise", + "displayName-count-other": "livres libanaises", + "symbol": "£LB", + "symbol-alt-narrow": "£L" + }, + "LKR": { + "displayName": "roupie srilankaise", + "displayName-count-one": "roupie srilankaise", + "displayName-count-other": "roupies srilankaises", + "symbol": "LKR", + "symbol-alt-narrow": "Rs" + }, + "LRD": { + "displayName": "dollar libérien", + "displayName-count-one": "dollar libérien", + "displayName-count-other": "dollars libériens", + "symbol": "LRD", + "symbol-alt-narrow": "$" + }, + "LSL": { + "displayName": "loti lesothan", + "displayName-count-one": "loti lesothan", + "displayName-count-other": "maloti lesothans", + "symbol": "LSL" + }, + "LTL": { + "displayName": "litas lituanien", + "displayName-count-one": "litas lituanien", + "displayName-count-other": "litas lituaniens", + "symbol": "LTL", + "symbol-alt-narrow": "Lt" + }, + "LTT": { + "displayName": "talonas lituanien", + "displayName-count-one": "talonas lituanien", + "displayName-count-other": "talonas lituaniens", + "symbol": "LTT" + }, + "LUC": { + "displayName": "franc convertible luxembourgeois", + "displayName-count-one": "franc convertible luxembourgeois", + "displayName-count-other": "francs convertibles luxembourgeois", + "symbol": "LUC" + }, + "LUF": { + "displayName": "franc luxembourgeois", + "displayName-count-one": "franc luxembourgeois", + "displayName-count-other": "francs luxembourgeois", + "symbol": "LUF" + }, + "LUL": { + "displayName": "franc financier luxembourgeois", + "displayName-count-one": "franc financier luxembourgeois", + "displayName-count-other": "francs financiers luxembourgeois", + "symbol": "LUL" + }, + "LVL": { + "displayName": "lats letton", + "displayName-count-one": "lats letton", + "displayName-count-other": "lats lettons", + "symbol": "LVL", + "symbol-alt-narrow": "Ls" + }, + "LVR": { + "displayName": "rouble letton", + "displayName-count-one": "rouble letton", + "displayName-count-other": "roubles lettons", + "symbol": "LVR" + }, + "LYD": { + "displayName": "dinar libyen", + "displayName-count-one": "dinar libyen", + "displayName-count-other": "dinars libyens", + "symbol": "LYD" + }, + "MAD": { + "displayName": "dirham marocain", + "displayName-count-one": "dirham marocain", + "displayName-count-other": "dirhams marocains", + "symbol": "MAD" + }, + "MAF": { + "displayName": "franc marocain", + "displayName-count-one": "franc marocain", + "displayName-count-other": "francs marocains", + "symbol": "MAF" + }, + "MCF": { + "displayName": "MCF", + "symbol": "MCF" + }, + "MDC": { + "displayName": "MDC", + "symbol": "MDC" + }, + "MDL": { + "displayName": "leu moldave", + "displayName-count-one": "leu moldave", + "displayName-count-other": "leus moldaves", + "symbol": "MDL" + }, + "MGA": { + "displayName": "ariary malgache", + "displayName-count-one": "ariary malgache", + "displayName-count-other": "ariarys malgaches", + "symbol": "MGA", + "symbol-alt-narrow": "Ar" + }, + "MGF": { + "displayName": "franc malgache", + "displayName-count-one": "franc malgache", + "displayName-count-other": "francs malgaches", + "symbol": "MGF" + }, + "MKD": { + "displayName": "denar macédonien", + "displayName-count-one": "denar macédonien", + "displayName-count-other": "denars macédoniens", + "symbol": "MKD" + }, + "MKN": { + "displayName": "MKN", + "symbol": "MKN" + }, + "MLF": { + "displayName": "franc malien", + "displayName-count-one": "franc malien", + "displayName-count-other": "francs maliens", + "symbol": "MLF" + }, + "MMK": { + "displayName": "kyat myanmarais", + "displayName-count-one": "kyat myanmarais", + "displayName-count-other": "kyats myanmarais", + "symbol": "MMK", + "symbol-alt-narrow": "K" + }, + "MNT": { + "displayName": "tugrik mongol", + "displayName-count-one": "tugrik mongol", + "displayName-count-other": "tugriks mongols", + "symbol": "MNT", + "symbol-alt-narrow": "₮" + }, + "MOP": { + "displayName": "pataca macanaise", + "displayName-count-one": "pataca macanaise", + "displayName-count-other": "patacas macanaises", + "symbol": "MOP" + }, + "MRO": { + "displayName": "ouguiya mauritanien", + "displayName-count-one": "ouguiya mauritanien", + "displayName-count-other": "ouguiyas mauritaniens", + "symbol": "MRO" + }, + "MTL": { + "displayName": "lire maltaise", + "displayName-count-one": "lire maltaise", + "displayName-count-other": "lires maltaises", + "symbol": "MTL" + }, + "MTP": { + "displayName": "livre maltaise", + "displayName-count-one": "livre maltaise", + "displayName-count-other": "livres maltaises", + "symbol": "£MT" + }, + "MUR": { + "displayName": "roupie mauricienne", + "displayName-count-one": "roupie mauricienne", + "displayName-count-other": "roupies mauriciennes", + "symbol": "MUR", + "symbol-alt-narrow": "Rs" + }, + "MVP": { + "displayName": "MVP", + "symbol": "MVP" + }, + "MVR": { + "displayName": "rufiyaa maldivien", + "displayName-count-one": "rufiyaa maldivienne", + "displayName-count-other": "rufiyaas maldiviennes", + "symbol": "MVR" + }, + "MWK": { + "displayName": "kwacha malawite", + "displayName-count-one": "kwacha malawite", + "displayName-count-other": "kwachas malawites", + "symbol": "MWK" + }, + "MXN": { + "displayName": "peso mexicain", + "displayName-count-one": "peso mexicain", + "displayName-count-other": "pesos mexicains", + "symbol": "$MX", + "symbol-alt-narrow": "$" + }, + "MXP": { + "displayName": "peso d’argent mexicain (1861–1992)", + "displayName-count-one": "peso d’argent mexicain (1861–1992)", + "displayName-count-other": "pesos d’argent mexicains (1861–1992)", + "symbol": "MXP" + }, + "MXV": { + "displayName": "unité de conversion mexicaine (UDI)", + "displayName-count-one": "unité de conversion mexicaine (UDI)", + "displayName-count-other": "unités de conversion mexicaines (UDI)", + "symbol": "MXV" + }, + "MYR": { + "displayName": "ringgit malais", + "displayName-count-one": "ringgit malais", + "displayName-count-other": "ringgits malais", + "symbol": "MYR", + "symbol-alt-narrow": "RM" + }, + "MZE": { + "displayName": "escudo mozambicain", + "displayName-count-one": "escudo mozambicain", + "displayName-count-other": "escudos mozambicains", + "symbol": "MZE" + }, + "MZM": { + "displayName": "métical", + "displayName-count-one": "metical mozambicain (1980–2006)", + "displayName-count-other": "meticais mozambicains (1980–2006)", + "symbol": "MZM" + }, + "MZN": { + "displayName": "metical mozambicain", + "displayName-count-one": "metical mozambicain", + "displayName-count-other": "meticais mozambicains", + "symbol": "MZN" + }, + "NAD": { + "displayName": "dollar namibien", + "displayName-count-one": "dollar namibien", + "displayName-count-other": "dollars namibiens", + "symbol": "$NA", + "symbol-alt-narrow": "$" + }, + "NGN": { + "displayName": "naira nigérian", + "displayName-count-one": "naira nigérian", + "displayName-count-other": "nairas nigérians", + "symbol": "NGN", + "symbol-alt-narrow": "₦" + }, + "NIC": { + "displayName": "cordoba", + "displayName-count-one": "córdoba nicaraguayen (1912–1988)", + "displayName-count-other": "córdobas nicaraguayens (1912–1988)", + "symbol": "NIC" + }, + "NIO": { + "displayName": "córdoba oro nicaraguayen", + "displayName-count-one": "córdoba oro nicaraguayen", + "displayName-count-other": "córdobas oro nicaraguayens", + "symbol": "NIO", + "symbol-alt-narrow": "$C" + }, + "NLG": { + "displayName": "florin néerlandais", + "displayName-count-one": "florin néerlandais", + "displayName-count-other": "florins néerlandais", + "symbol": "NLG" + }, + "NOK": { + "displayName": "couronne norvégienne", + "displayName-count-one": "couronne norvégienne", + "displayName-count-other": "couronnes norvégiennes", + "symbol": "NOK", + "symbol-alt-narrow": "kr" + }, + "NPR": { + "displayName": "roupie népalaise", + "displayName-count-one": "roupie népalaise", + "displayName-count-other": "roupies népalaises", + "symbol": "NPR", + "symbol-alt-narrow": "Rs" + }, + "NZD": { + "displayName": "dollar néo-zélandais", + "displayName-count-one": "dollar néo-zélandais", + "displayName-count-other": "dollars néo-zélandais", + "symbol": "$NZ", + "symbol-alt-narrow": "$" + }, + "OMR": { + "displayName": "riyal omanais", + "displayName-count-one": "riyal omanais", + "displayName-count-other": "riyals omanis", + "symbol": "OMR" + }, + "PAB": { + "displayName": "balboa panaméen", + "displayName-count-one": "balboa panaméen", + "displayName-count-other": "balboas panaméens", + "symbol": "PAB" + }, + "PEI": { + "displayName": "inti péruvien", + "displayName-count-one": "inti péruvien", + "displayName-count-other": "intis péruviens", + "symbol": "PEI" + }, + "PEN": { + "displayName": "sol péruvien", + "displayName-count-one": "sol péruvien", + "displayName-count-other": "sols péruviens", + "symbol": "PEN" + }, + "PES": { + "displayName": "sol péruvien (1863–1985)", + "displayName-count-one": "sol péruvien (1863–1985)", + "displayName-count-other": "sols péruviens (1863–1985)", + "symbol": "PES" + }, + "PGK": { + "displayName": "kina papouan-néo-guinéen", + "displayName-count-one": "kina papouan-néo-guinéen", + "displayName-count-other": "kinas papouan-néo-guinéens", + "symbol": "PGK" + }, + "PHP": { + "displayName": "peso philippin", + "displayName-count-one": "peso philippin", + "displayName-count-other": "pesos philippins", + "symbol": "PHP", + "symbol-alt-narrow": "₱" + }, + "PKR": { + "displayName": "roupie pakistanaise", + "displayName-count-one": "roupie pakistanaise", + "displayName-count-other": "roupies pakistanaises", + "symbol": "PKR", + "symbol-alt-narrow": "Rs" + }, + "PLN": { + "displayName": "zloty polonais", + "displayName-count-one": "zloty polonais", + "displayName-count-other": "zlotys polonais", + "symbol": "PLN", + "symbol-alt-narrow": "zł" + }, + "PLZ": { + "displayName": "zloty (1950–1995)", + "displayName-count-one": "zloty polonais (1950–1995)", + "displayName-count-other": "zlotys polonais (1950–1995)", + "symbol": "PLZ" + }, + "PTE": { + "displayName": "escudo portugais", + "displayName-count-one": "escudo portugais", + "displayName-count-other": "escudos portugais", + "symbol": "PTE" + }, + "PYG": { + "displayName": "guaraní paraguayen", + "displayName-count-one": "guaraní paraguayen", + "displayName-count-other": "guaranís paraguayens", + "symbol": "PYG", + "symbol-alt-narrow": "₲" + }, + "QAR": { + "displayName": "riyal qatari", + "displayName-count-one": "riyal qatari", + "displayName-count-other": "riyals qataris", + "symbol": "QAR" + }, + "RHD": { + "displayName": "dollar rhodésien", + "displayName-count-one": "dollar rhodésien", + "displayName-count-other": "dollars rhodésiens", + "symbol": "$RH" + }, + "ROL": { + "displayName": "ancien leu roumain", + "displayName-count-one": "leu roumain (1952–2005)", + "displayName-count-other": "lei roumains (1952–2005)", + "symbol": "ROL" + }, + "RON": { + "displayName": "leu roumain", + "displayName-count-one": "leu roumain", + "displayName-count-other": "lei roumains", + "symbol": "RON", + "symbol-alt-narrow": "L" + }, + "RSD": { + "displayName": "dinar serbe", + "displayName-count-one": "dinar serbe", + "displayName-count-other": "dinars serbes", + "symbol": "RSD" + }, + "RUB": { + "displayName": "rouble russe", + "displayName-count-one": "rouble russe", + "displayName-count-other": "roubles russes", + "symbol": "RUB", + "symbol-alt-narrow": "₽" + }, + "RUR": { + "displayName": "rouble russe (1991–1998)", + "displayName-count-one": "rouble russe (1991–1998)", + "displayName-count-other": "roubles russes (1991–1998)", + "symbol": "RUR", + "symbol-alt-narrow": "р." + }, + "RWF": { + "displayName": "franc rwandais", + "displayName-count-one": "franc rwandais", + "displayName-count-other": "francs rwandais", + "symbol": "RWF", + "symbol-alt-narrow": "FR" + }, + "SAR": { + "displayName": "riyal saoudien", + "displayName-count-one": "riyal saoudien", + "displayName-count-other": "riyals saoudiens", + "symbol": "SAR" + }, + "SBD": { + "displayName": "dollar des îles Salomon", + "displayName-count-one": "dollar des îles Salomon", + "displayName-count-other": "dollars des îles Salomon", + "symbol": "$SB", + "symbol-alt-narrow": "$" + }, + "SCR": { + "displayName": "roupie des Seychelles", + "displayName-count-one": "roupie des Seychelles", + "displayName-count-other": "roupies des Seychelles", + "symbol": "SCR" + }, + "SDD": { + "displayName": "dinar soudanais", + "displayName-count-one": "dinar soudanais (1992–2007)", + "displayName-count-other": "dinars soudanais (1992–2007)", + "symbol": "SDD" + }, + "SDG": { + "displayName": "livre soudanaise", + "displayName-count-one": "livre soudanaise", + "displayName-count-other": "livres soudanaises", + "symbol": "SDG" + }, + "SDP": { + "displayName": "livre soudanaise (1956–2007)", + "displayName-count-one": "livre soudanaise (1956–2007)", + "displayName-count-other": "livres soudanaises (1956–2007)", + "symbol": "SDP" + }, + "SEK": { + "displayName": "couronne suédoise", + "displayName-count-one": "couronne suédoise", + "displayName-count-other": "couronnes suédoises", + "symbol": "SEK", + "symbol-alt-narrow": "kr" + }, + "SGD": { + "displayName": "dollar de Singapour", + "displayName-count-one": "dollar de Singapour", + "displayName-count-other": "dollars de Singapour", + "symbol": "$SG", + "symbol-alt-narrow": "$" + }, + "SHP": { + "displayName": "livre de Sainte-Hélène", + "displayName-count-one": "livre de Sainte-Hélène", + "displayName-count-other": "livres de Sainte-Hélène", + "symbol": "SHP", + "symbol-alt-narrow": "£" + }, + "SIT": { + "displayName": "tolar slovène", + "displayName-count-one": "tolar slovène", + "displayName-count-other": "tolars slovènes", + "symbol": "SIT" + }, + "SKK": { + "displayName": "couronne slovaque", + "displayName-count-one": "couronne slovaque", + "displayName-count-other": "couronnes slovaques", + "symbol": "SKK" + }, + "SLL": { + "displayName": "leone sierra-léonais", + "displayName-count-one": "leone sierra-léonais", + "displayName-count-other": "leones sierra-léonais", + "symbol": "SLL" + }, + "SOS": { + "displayName": "shilling somalien", + "displayName-count-one": "shilling somalien", + "displayName-count-other": "shillings somaliens", + "symbol": "SOS" + }, + "SRD": { + "displayName": "dollar surinamais", + "displayName-count-one": "dollar surinamais", + "displayName-count-other": "dollars surinamais", + "symbol": "$SR", + "symbol-alt-narrow": "$" + }, + "SRG": { + "displayName": "florin surinamais", + "displayName-count-one": "florin surinamais", + "displayName-count-other": "florins surinamais", + "symbol": "SRG" + }, + "SSP": { + "displayName": "livre sud-soudanaise", + "displayName-count-one": "livre sud-soudanaise", + "displayName-count-other": "livres sud-soudanaises", + "symbol": "SSP", + "symbol-alt-narrow": "£" + }, + "STD": { + "displayName": "dobra santoméen", + "displayName-count-one": "dobra santoméen", + "displayName-count-other": "dobras santoméens", + "symbol": "STD", + "symbol-alt-narrow": "Db" + }, + "STN": { + "displayName": "STN", + "symbol": "STN" + }, + "SUR": { + "displayName": "rouble soviétique", + "displayName-count-one": "rouble soviétique", + "displayName-count-other": "roubles soviétiques", + "symbol": "SUR" + }, + "SVC": { + "displayName": "colón salvadorien", + "displayName-count-one": "colón salvadorien", + "displayName-count-other": "colóns salvadoriens", + "symbol": "SVC" + }, + "SYP": { + "displayName": "livre syrienne", + "displayName-count-one": "livre syrienne", + "displayName-count-other": "livres syriennes", + "symbol": "SYP", + "symbol-alt-narrow": "£" + }, + "SZL": { + "displayName": "lilangeni swazi", + "displayName-count-one": "lilangeni swazi", + "displayName-count-other": "lilangenis swazis", + "symbol": "SZL" + }, + "THB": { + "displayName": "baht thaïlandais", + "displayName-count-one": "baht thaïlandais", + "displayName-count-other": "bahts thaïlandais", + "symbol": "THB", + "symbol-alt-narrow": "฿" + }, + "TJR": { + "displayName": "rouble tadjik", + "displayName-count-one": "rouble tadjik", + "displayName-count-other": "roubles tadjiks", + "symbol": "TJR" + }, + "TJS": { + "displayName": "somoni tadjik", + "displayName-count-one": "somoni tadjik", + "displayName-count-other": "somonis tadjiks", + "symbol": "TJS" + }, + "TMM": { + "displayName": "manat turkmène", + "displayName-count-one": "manat turkmène", + "displayName-count-other": "manats turkmènes", + "symbol": "TMM" + }, + "TMT": { + "displayName": "nouveau manat turkmène", + "displayName-count-one": "nouveau manat turkmène", + "displayName-count-other": "nouveaux manats turkmènes", + "symbol": "TMT" + }, + "TND": { + "displayName": "dinar tunisien", + "displayName-count-one": "dinar tunisien", + "displayName-count-other": "dinars tunisiens", + "symbol": "TND" + }, + "TOP": { + "displayName": "pa’anga tongan", + "displayName-count-one": "pa’anga tongan", + "displayName-count-other": "pa’angas tongans", + "symbol": "TOP", + "symbol-alt-narrow": "T$" + }, + "TPE": { + "displayName": "escudo timorais", + "displayName-count-one": "escudo timorais", + "displayName-count-other": "escudos timorais", + "symbol": "TPE" + }, + "TRL": { + "displayName": "livre turque (1844–2005)", + "displayName-count-one": "livre turque (1844–2005)", + "displayName-count-other": "livres turques (1844–2005)", + "symbol": "TRL" + }, + "TRY": { + "displayName": "livre turque", + "displayName-count-one": "livre turque", + "displayName-count-other": "livres turques", + "symbol": "TRY", + "symbol-alt-narrow": "₺", + "symbol-alt-variant": "LT" + }, + "TTD": { + "displayName": "dollar trinidadien", + "displayName-count-one": "dollar de Trinité-et-Tobago", + "displayName-count-other": "dollars de Trinité-et-Tobago", + "symbol": "$TT", + "symbol-alt-narrow": "$" + }, + "TWD": { + "displayName": "nouveau dollar taïwanais", + "displayName-count-one": "nouveau dollar taïwanais", + "displayName-count-other": "nouveaux dollars taïwanais", + "symbol": "TWD", + "symbol-alt-narrow": "NT$" + }, + "TZS": { + "displayName": "shilling tanzanien", + "displayName-count-one": "shilling tanzanien", + "displayName-count-other": "shillings tanzaniens", + "symbol": "TZS" + }, + "UAH": { + "displayName": "hryvnia ukrainienne", + "displayName-count-one": "hryvnia ukrainienne", + "displayName-count-other": "hryvnias ukrainiennes", + "symbol": "UAH", + "symbol-alt-narrow": "₴" + }, + "UAK": { + "displayName": "karbovanetz", + "displayName-count-one": "karbovanets ukrainien (1992–1996)", + "displayName-count-other": "karbovanets ukrainiens (1992–1996)", + "symbol": "UAK" + }, + "UGS": { + "displayName": "shilling ougandais (1966–1987)", + "displayName-count-one": "shilling ougandais (1966–1987)", + "displayName-count-other": "shillings ougandais (1966–1987)", + "symbol": "UGS" + }, + "UGX": { + "displayName": "shilling ougandais", + "displayName-count-one": "shilling ougandais", + "displayName-count-other": "shillings ougandais", + "symbol": "UGX" + }, + "USD": { + "displayName": "dollar des États-Unis", + "displayName-count-one": "dollar des États-Unis", + "displayName-count-other": "dollars des États-Unis", + "symbol": "$US", + "symbol-alt-narrow": "$" + }, + "USN": { + "displayName": "dollar des Etats-Unis (jour suivant)", + "displayName-count-one": "dollar des États-Unis (jour suivant)", + "displayName-count-other": "dollars des États-Unis (jour suivant)", + "symbol": "USN" + }, + "USS": { + "displayName": "dollar des Etats-Unis (jour même)", + "displayName-count-one": "dollar des États-Unis (jour même)", + "displayName-count-other": "dollars des États-Unis (jour même)", + "symbol": "USS" + }, + "UYI": { + "displayName": "peso uruguayen (unités indexées)", + "displayName-count-one": "peso uruguayen (unités indexées)", + "displayName-count-other": "pesos uruguayen (unités indexées)", + "symbol": "UYI" + }, + "UYP": { + "displayName": "peso uruguayen (1975–1993)", + "displayName-count-one": "peso uruguayen (1975–1993)", + "displayName-count-other": "pesos uruguayens (1975–1993)", + "symbol": "UYP" + }, + "UYU": { + "displayName": "peso uruguayen", + "displayName-count-one": "peso uruguayen", + "displayName-count-other": "pesos uruguayens", + "symbol": "$UY", + "symbol-alt-narrow": "$" + }, + "UZS": { + "displayName": "sum ouzbek", + "displayName-count-one": "sum ouzbek", + "displayName-count-other": "sums ouzbeks", + "symbol": "UZS" + }, + "VEB": { + "displayName": "bolivar vénézuélien (1871–2008)", + "displayName-count-one": "bolivar vénézuélien (1871–2008)", + "displayName-count-other": "bolivar vénézuélien (1871–2008)", + "symbol": "VEB" + }, + "VEF": { + "displayName": "bolivar vénézuélien", + "displayName-count-one": "bolivar vénézuélien", + "displayName-count-other": "bolivars vénézuéliens", + "symbol": "VEF", + "symbol-alt-narrow": "Bs" + }, + "VND": { + "displayName": "dông vietnamien", + "displayName-count-one": "dông vietnamien", + "displayName-count-other": "dôngs vietnamiens", + "symbol": "₫", + "symbol-alt-narrow": "₫" + }, + "VNN": { + "displayName": "VNN", + "symbol": "VNN" + }, + "VUV": { + "displayName": "vatu vanuatuan", + "displayName-count-one": "vatu vanuatuan", + "displayName-count-other": "vatus vanuatuans", + "symbol": "VUV" + }, + "WST": { + "displayName": "tala samoan", + "displayName-count-one": "tala samoan", + "displayName-count-other": "talas samoans", + "symbol": "WS$" + }, + "XAF": { + "displayName": "franc CFA (BEAC)", + "displayName-count-one": "franc CFA (BEAC)", + "displayName-count-other": "francs CFA (BEAC)", + "symbol": "FCFA" + }, + "XAG": { + "displayName": "argent", + "displayName-count-one": "once troy d’argent", + "displayName-count-other": "onces troy d’argent", + "symbol": "XAG" + }, + "XAU": { + "displayName": "or", + "displayName-count-one": "once troy d’or", + "displayName-count-other": "onces troy d’or", + "symbol": "XAU" + }, + "XBA": { + "displayName": "unité européenne composée", + "displayName-count-one": "unité composée européenne (EURCO)", + "displayName-count-other": "unités composées européennes (EURCO)", + "symbol": "XBA" + }, + "XBB": { + "displayName": "unité monétaire européenne", + "displayName-count-one": "unité monétaire européenne (UME–6)", + "displayName-count-other": "unités monétaires européennes (UME–6)", + "symbol": "XBB" + }, + "XBC": { + "displayName": "unité de compte européenne (XBC)", + "displayName-count-one": "unité de compte 9 européenne (UEC–9)", + "displayName-count-other": "unités de compte 9 européennes (UEC–9)", + "symbol": "XBC" + }, + "XBD": { + "displayName": "unité de compte européenne (XBD)", + "displayName-count-one": "unité de compte 17 européenne (UEC–17)", + "displayName-count-other": "unités de compte 17 européennes (UEC–17)", + "symbol": "XBD" + }, + "XCD": { + "displayName": "dollar des Caraïbes orientales", + "displayName-count-one": "dollar des Caraïbes orientales", + "displayName-count-other": "dollars des Caraïbes orientales", + "symbol": "XCD", + "symbol-alt-narrow": "$" + }, + "XDR": { + "displayName": "droit de tirage spécial", + "displayName-count-one": "droit de tirage spécial", + "displayName-count-other": "droits de tirage spéciaux", + "symbol": "XDR" + }, + "XEU": { + "displayName": "unité de compte européenne (ECU)", + "symbol": "XEU" + }, + "XFO": { + "displayName": "franc or", + "displayName-count-one": "franc or", + "displayName-count-other": "francs or", + "symbol": "XFO" + }, + "XFU": { + "displayName": "franc UIC", + "displayName-count-one": "franc UIC", + "displayName-count-other": "francs UIC", + "symbol": "XFU" + }, + "XOF": { + "displayName": "franc CFA (BCEAO)", + "displayName-count-one": "franc CFA (BCEAO)", + "displayName-count-other": "francs CFA (BCEAO)", + "symbol": "CFA" + }, + "XPD": { + "displayName": "palladium", + "displayName-count-one": "once troy de palladium", + "displayName-count-other": "onces troy de palladium", + "symbol": "XPD" + }, + "XPF": { + "displayName": "franc CFP", + "displayName-count-one": "franc CFP", + "displayName-count-other": "francs CFP", + "symbol": "FCFP" + }, + "XPT": { + "displayName": "platine", + "displayName-count-one": "once troy de platine", + "displayName-count-other": "onces troy de platine", + "symbol": "XPT" + }, + "XRE": { + "displayName": "type de fonds RINET", + "displayName-count-one": "unité de fonds RINET", + "displayName-count-other": "unités de fonds RINET", + "symbol": "XRE" + }, + "XSU": { + "displayName": "XSU", + "symbol": "XSU" + }, + "XTS": { + "displayName": "(devise de test)", + "displayName-count-one": "(devise de test)", + "displayName-count-other": "(devises de test)", + "symbol": "XTS" + }, + "XUA": { + "displayName": "XUA", + "symbol": "XUA" + }, + "XXX": { + "displayName": "devise inconnue ou non valide", + "displayName-count-one": "devise inconnue", + "displayName-count-other": "devises inconnues", + "symbol": "XXX" + }, + "YDD": { + "displayName": "dinar du Yémen", + "displayName-count-one": "dinar nord-yéménite", + "displayName-count-other": "dinars nord-yéménites", + "symbol": "YDD" + }, + "YER": { + "displayName": "riyal yéménite", + "displayName-count-one": "riyal yéménite", + "displayName-count-other": "riyals yéménites", + "symbol": "YER" + }, + "YUD": { + "displayName": "nouveau dinar yougoslave", + "displayName-count-one": "dinar fort yougoslave (1966–1989)", + "displayName-count-other": "dinars forts yougoslaves (1966–1989)", + "symbol": "YUD" + }, + "YUM": { + "displayName": "dinar yougoslave Noviy", + "displayName-count-one": "nouveau dinar yougoslave (1994–2003)", + "displayName-count-other": "nouveaux dinars yougoslaves (1994–2003)", + "symbol": "YUM" + }, + "YUN": { + "displayName": "dinar yougoslave convertible", + "displayName-count-one": "dinar convertible yougoslave (1990–1992)", + "displayName-count-other": "dinars convertibles yougoslaves (1990–1992)", + "symbol": "YUN" + }, + "YUR": { + "displayName": "YUR", + "symbol": "YUR" + }, + "ZAL": { + "displayName": "rand sud-africain (financier)", + "displayName-count-one": "rand sud-africain (financier)", + "displayName-count-other": "rands sud-africains (financiers)", + "symbol": "ZAL" + }, + "ZAR": { + "displayName": "rand sud-africain", + "displayName-count-one": "rand sud-africain", + "displayName-count-other": "rands sud-africains", + "symbol": "ZAR", + "symbol-alt-narrow": "R" + }, + "ZMK": { + "displayName": "kwacha zambien (1968–2012)", + "displayName-count-one": "kwacha zambien (1968–2012)", + "displayName-count-other": "kwachas zambiens (1968–2012)", + "symbol": "ZMK" + }, + "ZMW": { + "displayName": "kwacha zambien", + "displayName-count-one": "kwacha zambien", + "displayName-count-other": "kwachas zambiens", + "symbol": "ZMW", + "symbol-alt-narrow": "Kw" + }, + "ZRN": { + "displayName": "nouveau zaïre zaïrien", + "displayName-count-one": "nouveau zaïre zaïrien", + "displayName-count-other": "nouveaux zaïres zaïriens", + "symbol": "ZRN" + }, + "ZRZ": { + "displayName": "zaïre zaïrois", + "displayName-count-one": "zaïre zaïrois", + "displayName-count-other": "zaïres zaïrois", + "symbol": "ZRZ" + }, + "ZWD": { + "displayName": "dollar zimbabwéen", + "displayName-count-one": "dollar zimbabwéen", + "displayName-count-other": "dollars zimbabwéens", + "symbol": "ZWD" + }, + "ZWL": { + "displayName": "dollar zimbabwéen (2009)", + "displayName-count-one": "dollar zimbabwéen (2009)", + "displayName-count-other": "dollars zimbabwéens (2009)", + "symbol": "ZWL" + }, + "ZWR": { + "displayName": "dollar zimbabwéen (2008)", + "displayName-count-one": "dollar zimbabwéen (2008)", + "displayName-count-other": "dollars zimbabwéens (2008)", + "symbol": "ZWR" + } } - } + } } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/vi/ca-islamic.json b/src/common/cldr-data/main/vi/ca-islamic.json index 8606534c..b1b7086c 100644 --- a/src/common/cldr-data/main/vi/ca-islamic.json +++ b/src/common/cldr-data/main/vi/ca-islamic.json @@ -1,510 +1,511 @@ { - "main": { - "vi": { - "identity": { - "version": { - "_number": "$Revision: 14365 $", - "_cldrVersion": "34" + "main": { + "vi": { + "identity": { + "version": { + "_number": "$Revision: 14365 $", + "_cldrVersion": "34" + }, + "language": "vi" }, - "language": "vi" - }, - "dates": { - "calendars": { - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" + "dates": { + "calendars": { + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "CN", - "mon": "Th 2", - "tue": "Th 3", - "wed": "Th 4", - "thu": "Th 5", - "fri": "Th 6", - "sat": "Th 7" - }, - "narrow": { - "sun": "CN", - "mon": "T2", - "tue": "T3", - "wed": "T4", - "thu": "T5", - "fri": "T6", - "sat": "T7" - }, - "short": { - "sun": "CN", - "mon": "T2", - "tue": "T3", - "wed": "T4", - "thu": "T5", - "fri": "T6", - "sat": "T7" - }, - "wide": { - "sun": "Chủ Nhật", - "mon": "Thứ Hai", - "tue": "Thứ Ba", - "wed": "Thứ Tư", - "thu": "Thứ Năm", - "fri": "Thứ Sáu", - "sat": "Thứ Bảy" + "days": { + "format": { + "abbreviated": { + "sun": "CN", + "mon": "Th 2", + "tue": "Th 3", + "wed": "Th 4", + "thu": "Th 5", + "fri": "Th 6", + "sat": "Th 7" + }, + "narrow": { + "sun": "CN", + "mon": "T2", + "tue": "T3", + "wed": "T4", + "thu": "T5", + "fri": "T6", + "sat": "T7" + }, + "short": { + "sun": "CN", + "mon": "T2", + "tue": "T3", + "wed": "T4", + "thu": "T5", + "fri": "T6", + "sat": "T7" + }, + "wide": { + "sun": "Chủ Nhật", + "mon": "Thứ Hai", + "tue": "Thứ Ba", + "wed": "Thứ Tư", + "thu": "Thứ Năm", + "fri": "Thứ Sáu", + "sat": "Thứ Bảy" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "CN", + "mon": "Th 2", + "tue": "Th 3", + "wed": "Th 4", + "thu": "Th 5", + "fri": "Th 6", + "sat": "Th 7" + }, + "narrow": { + "sun": "CN", + "mon": "T2", + "tue": "T3", + "wed": "T4", + "thu": "T5", + "fri": "T6", + "sat": "T7" + }, + "short": { + "sun": "CN", + "mon": "T2", + "tue": "T3", + "wed": "T4", + "thu": "T5", + "fri": "T6", + "sat": "T7" + }, + "wide": { + "sun": "Chủ Nhật", + "mon": "Thứ Hai", + "tue": "Thứ Ba", + "wed": "Thứ Tư", + "thu": "Thứ Năm", + "fri": "Thứ Sáu", + "sat": "Thứ Bảy" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "CN", - "mon": "Th 2", - "tue": "Th 3", - "wed": "Th 4", - "thu": "Th 5", - "fri": "Th 6", - "sat": "Th 7" - }, - "narrow": { - "sun": "CN", - "mon": "T2", - "tue": "T3", - "wed": "T4", - "thu": "T5", - "fri": "T6", - "sat": "T7" - }, - "short": { - "sun": "CN", - "mon": "T2", - "tue": "T3", - "wed": "T4", - "thu": "T5", - "fri": "T6", - "sat": "T7" - }, - "wide": { - "sun": "Chủ Nhật", - "mon": "Thứ Hai", - "tue": "Thứ Ba", - "wed": "Thứ Tư", - "thu": "Thứ Năm", - "fri": "Thứ Sáu", - "sat": "Thứ Bảy" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "Quý 1", - "2": "Quý 2", - "3": "Quý 3", - "4": "Quý 4" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "Quý 1", + "2": "Quý 2", + "3": "Quý 3", + "4": "Quý 4" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "quý 1", + "2": "quý 2", + "3": "quý 3", + "4": "quý 4" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "quý 1", - "2": "quý 2", - "3": "quý 3", - "4": "quý 4" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "nửa đêm", - "am": "SA", - "noon": "TR", - "pm": "CH", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" - }, - "narrow": { - "midnight": "nửa đêm", - "am": "s", - "noon": "tr", - "pm": "c", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" - }, - "wide": { - "midnight": "nửa đêm", - "am": "SA", - "noon": "TR", - "pm": "CH", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "nửa đêm", + "am": "SA", + "noon": "TR", + "pm": "CH", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + }, + "narrow": { + "midnight": "nửa đêm", + "am": "s", + "noon": "tr", + "pm": "c", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + }, + "wide": { + "midnight": "nửa đêm", + "am": "SA", + "noon": "TR", + "pm": "CH", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "nửa đêm", + "am": "SA", + "noon": "TR", + "pm": "CH", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + }, + "narrow": { + "midnight": "nửa đêm", + "am": "SA", + "noon": "trưa", + "pm": "CH", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + }, + "wide": { + "midnight": "nửa đêm", + "am": "SA", + "noon": "trưa", + "pm": "CH", + "morning1": "sáng", + "afternoon1": "chiều", + "evening1": "tối", + "night1": "đêm" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "nửa đêm", - "am": "SA", - "noon": "TR", - "pm": "CH", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" + "eras": { + "eraNames": { + "0": "AH" }, - "narrow": { - "midnight": "nửa đêm", - "am": "SA", - "noon": "trưa", - "pm": "CH", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" + "eraAbbr": { + "0": "AH" }, - "wide": { - "midnight": "nửa đêm", - "am": "SA", - "noon": "trưa", - "pm": "CH", - "morning1": "sáng", - "afternoon1": "chiều", - "evening1": "tối", - "night1": "đêm" + "eraNarrow": { + "0": "AH" } - } - }, - "eras": { - "eraNames": { - "0": "AH" - }, - "eraAbbr": { - "0": "AH" }, - "eraNarrow": { - "0": "AH" - } - }, - "dateFormats": { - "full": "EEEE, 'ngày' dd 'tháng' MM 'năm' y G", - "long": "'Ngày' dd 'tháng' M 'năm' y G", - "medium": "dd-MM-y G", - "short": "dd/MM/y GGGGG" - }, - "timeFormats": { - "full": "HH:mm:ss zzzz", - "long": "HH:mm:ss z", - "medium": "HH:mm:ss", - "short": "HH:mm" - }, - "dateTimeFormats": { - "full": "{1} 'lúc' {0}", - "long": "{1} 'lúc' {0}", - "medium": "{1} {0}", - "short": "{1} {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "'Ngày' dd", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "E, dd", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "d MMM, y G", - "GyMMMEd": "E, d MMM, y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "dd/M", - "MEd": "E, dd/M", - "MMdd": "dd-MM", - "MMM": "LLL", - "MMMd": "d MMM", - "MMMEd": "E, d MMM", - "MMMMd": "dd MMMM", - "MMMMEd": "E, dd MMMM", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M/y G", - "yyyyMd": "d/M/y G", - "yyyyMEd": "E, d/M/y GGGGG", - "yyyyMM": "MM-y G", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "d MMM, y G", - "yyyyMMMEd": "E, d MMM, y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" + "dateFormats": { + "full": "EEEE, 'ngày' dd 'tháng' MM 'năm' y G", + "long": "'Ngày' dd 'tháng' M 'năm' y G", + "medium": "dd-MM-y G", + "short": "dd/MM/y GGGGG" }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" + "timeFormats": { + "full": "HH:mm:ss zzzz", + "long": "HH:mm:ss z", + "medium": "HH:mm:ss", + "short": "HH:mm" }, - "intervalFormats": { - "intervalFormatFallback": "{0} - {1}", - "d": { - "d": "'Ngày' dd–dd" - }, - "Gy": { - "G": "G y – G y", - "y": "G y–y" - }, - "GyM": { - "G": "GGGGG y-MM – GGGGG y-MM", - "M": "GGGGG y-MM – y-MM", - "y": "GGGGG y-MM – y-MM" - }, - "GyMd": { - "d": "GGGGG y-MM-dd – y-MM-dd", - "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", - "M": "GGGGG y-MM-dd – y-MM-dd", - "y": "GGGGG y-MM-dd – y-MM-dd" - }, - "GyMEd": { - "d": "GGGGG y-MM-dd, E – y-MM-dd, E", - "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", - "M": "GGGGG y-MM-dd, E – y-MM-dd, E", - "y": "GGGGG y-MM-dd, E – y-MM-dd, E" - }, - "GyMMM": { - "G": "G y MMM – G y MMM", - "M": "G y MMM–MMM", - "y": "G y MMM – y MMM" - }, - "GyMMMd": { - "d": "G y MMM d–d", - "G": "G y MMM d – G y MMM d", - "M": "G y MMM d – MMM d", - "y": "G y MMM d – y MMM d" - }, - "GyMMMEd": { - "d": "G y MMM d, E – MMM d, E", - "G": "G y MMM d, E – G y MMM d, E", - "M": "G y MMM d, E – MMM d, E", - "y": "G y MMM d, E – y MMM d, E" - }, - "h": { - "a": "h'h' a – h'h' a", - "h": "h'h' - h'h' a" - }, - "H": { - "H": "HH'h' - HH'h'" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm–h:mm a", - "m": "h:mm–h:mm a" - }, - "Hm": { - "H": "HH:mm–HH:mm", - "m": "HH:mm–HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm–h:mm a v", - "m": "h:mm–h:mm a v" - }, - "Hmv": { - "H": "HH:mm–HH:mm v", - "m": "HH:mm–HH:mm v" - }, - "hv": { - "a": "h'h' a – h'h' a v", - "h": "h'h'-h'h' a v" - }, - "Hv": { - "H": "HH'h'-HH'h' v" - }, - "M": { - "M": "'Tháng' M - 'Tháng' M" - }, - "Md": { - "d": "dd/MM – dd/MM", - "M": "dd/MM – dd/MM" - }, - "MEd": { - "d": "EEEE, dd/MM – EEEE, dd/MM", - "M": "EEEE, dd/MM – EEEE, dd/MM" - }, - "MMM": { - "M": "MMM–MMM" - }, - "MMMd": { - "d": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M", - "M": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M" - }, - "MMMEd": { - "d": "EEEE, 'ngày' dd – EEEE, 'ngày' dd 'tháng' M", - "M": "EEEE, 'ngày' dd 'tháng' M – EEEE, 'ngày' dd 'tháng' M" - }, - "y": { - "y": "y–y G" - }, - "yM": { - "M": "MM/y – MM/y G", - "y": "MM/y – MM/y G" - }, - "yMd": { - "d": "dd/MM/y – dd/MM/y G", - "M": "dd/MM/y – dd/MM/y G", - "y": "dd/MM/y – dd/MM/y G" - }, - "yMEd": { - "d": "EEEE, dd/MM/y – EEEE, dd/MM/y G", - "M": "EEEE, dd/MM/y – EEEE, dd/MM/y G", - "y": "EEEE, dd/MM/y – EEEE, dd/MM/y G" - }, - "yMMM": { - "M": "'Tháng' M - 'Tháng' M 'năm' y G", - "y": "'Tháng' M 'năm' y - 'Tháng' M 'năm' y G" - }, - "yMMMd": { - "d": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M 'năm' y G", - "M": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M 'năm' y G", - "y": "'Ngày' dd 'tháng' M 'năm' y - 'Ngày' dd 'tháng' M 'năm' y G" - }, - "yMMMEd": { - "d": "EEEE, 'ngày' dd MMM – EEEE, 'ngày' dd MMM 'năm' y G", - "M": "E, dd 'tháng' M – E, dd 'tháng' M, y G", - "y": "E, dd 'tháng' M, y – E, dd 'tháng' M, y G" - }, - "yMMMM": { - "M": "MMMM–MMMM y G", - "y": "MMMM y – MMMM y G" + "dateTimeFormats": { + "full": "{1} 'lúc' {0}", + "long": "{1} 'lúc' {0}", + "medium": "{1} {0}", + "short": "{1} {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "'Ngày' dd", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "E, dd", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "d MMM, y G", + "GyMMMEd": "E, d MMM, y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "dd/M", + "MEd": "E, dd/M", + "MMdd": "dd-MM", + "MMM": "LLL", + "MMMd": "d MMM", + "MMMEd": "E, d MMM", + "MMMMd": "dd MMMM", + "MMMMEd": "E, dd MMMM", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M/y G", + "yyyyMd": "d/M/y G", + "yyyyMEd": "E, d/M/y GGGGG", + "yyyyMM": "MM-y G", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "d MMM, y G", + "yyyyMMMEd": "E, d MMM, y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} - {1}", + "d": { + "d": "'Ngày' dd–dd" + }, + "Gy": { + "G": "G y – G y", + "y": "G y–y" + }, + "GyM": { + "G": "GGGGG y-MM – GGGGG y-MM", + "M": "GGGGG y-MM – y-MM", + "y": "GGGGG y-MM – y-MM" + }, + "GyMd": { + "d": "GGGGG y-MM-dd – y-MM-dd", + "G": "GGGGG y-MM-dd – GGGGG y-MM-dd", + "M": "GGGGG y-MM-dd – y-MM-dd", + "y": "GGGGG y-MM-dd – y-MM-dd" + }, + "GyMEd": { + "d": "GGGGG y-MM-dd, E – y-MM-dd, E", + "G": "GGGGG y-MM-dd, E – GGGGG y-MM-dd, E", + "M": "GGGGG y-MM-dd, E – y-MM-dd, E", + "y": "GGGGG y-MM-dd, E – y-MM-dd, E" + }, + "GyMMM": { + "G": "G y MMM – G y MMM", + "M": "G y MMM–MMM", + "y": "G y MMM – y MMM" + }, + "GyMMMd": { + "d": "G y MMM d–d", + "G": "G y MMM d – G y MMM d", + "M": "G y MMM d – MMM d", + "y": "G y MMM d – y MMM d" + }, + "GyMMMEd": { + "d": "G y MMM d, E – MMM d, E", + "G": "G y MMM d, E – G y MMM d, E", + "M": "G y MMM d, E – MMM d, E", + "y": "G y MMM d, E – y MMM d, E" + }, + "h": { + "a": "h'h' a – h'h' a", + "h": "h'h' - h'h' a" + }, + "H": { + "H": "HH'h' - HH'h'" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm–h:mm a", + "m": "h:mm–h:mm a" + }, + "Hm": { + "H": "HH:mm–HH:mm", + "m": "HH:mm–HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm–h:mm a v", + "m": "h:mm–h:mm a v" + }, + "Hmv": { + "H": "HH:mm–HH:mm v", + "m": "HH:mm–HH:mm v" + }, + "hv": { + "a": "h'h' a – h'h' a v", + "h": "h'h'-h'h' a v" + }, + "Hv": { + "H": "HH'h'-HH'h' v" + }, + "M": { + "M": "'Tháng' M - 'Tháng' M" + }, + "Md": { + "d": "dd/MM – dd/MM", + "M": "dd/MM – dd/MM" + }, + "MEd": { + "d": "EEEE, dd/MM – EEEE, dd/MM", + "M": "EEEE, dd/MM – EEEE, dd/MM" + }, + "MMM": { + "M": "MMM–MMM" + }, + "MMMd": { + "d": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M", + "M": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M" + }, + "MMMEd": { + "d": "EEEE, 'ngày' dd – EEEE, 'ngày' dd 'tháng' M", + "M": "EEEE, 'ngày' dd 'tháng' M – EEEE, 'ngày' dd 'tháng' M" + }, + "y": { + "y": "y–y G" + }, + "yM": { + "M": "MM/y – MM/y G", + "y": "MM/y – MM/y G" + }, + "yMd": { + "d": "dd/MM/y – dd/MM/y G", + "M": "dd/MM/y – dd/MM/y G", + "y": "dd/MM/y – dd/MM/y G" + }, + "yMEd": { + "d": "EEEE, dd/MM/y – EEEE, dd/MM/y G", + "M": "EEEE, dd/MM/y – EEEE, dd/MM/y G", + "y": "EEEE, dd/MM/y – EEEE, dd/MM/y G" + }, + "yMMM": { + "M": "'Tháng' M - 'Tháng' M 'năm' y G", + "y": "'Tháng' M 'năm' y - 'Tháng' M 'năm' y G" + }, + "yMMMd": { + "d": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M 'năm' y G", + "M": "'Ngày' dd 'tháng' M - 'Ngày' dd 'tháng' M 'năm' y G", + "y": "'Ngày' dd 'tháng' M 'năm' y - 'Ngày' dd 'tháng' M 'năm' y G" + }, + "yMMMEd": { + "d": "EEEE, 'ngày' dd MMM – EEEE, 'ngày' dd MMM 'năm' y G", + "M": "E, dd 'tháng' M – E, dd 'tháng' M, y G", + "y": "E, dd 'tháng' M, y – E, dd 'tháng' M, y G" + }, + "yMMMM": { + "M": "MMMM–MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } @@ -513,4 +514,4 @@ } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/zh/all.json b/src/common/cldr-data/main/zh/all.json index 5cd5548f..0df9aa3c 100644 --- a/src/common/cldr-data/main/zh/all.json +++ b/src/common/cldr-data/main/zh/all.json @@ -1,5123 +1,5124 @@ { - "main": { - "zh": { - "identity": { - "version": { - "_number": "$Revision: 12984 $", - "_cldrVersion": "30.0.3" + "main": { + "zh": { + "identity": { + "version": { + "_number": "$Revision: 12984 $", + "_cldrVersion": "30.0.3" + }, + "language": "zh" }, - "language": "zh" - }, - "dates": { - "calendars": { - "gregorian": { - "months": { - "format": { - "abbreviated": { - "1": "1月", - "2": "2月", - "3": "3月", - "4": "4月", - "5": "5月", - "6": "6月", - "7": "7月", - "8": "8月", - "9": "9月", - "10": "10月", - "11": "11月", - "12": "12月" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "一月", - "2": "二月", - "3": "三月", - "4": "四月", - "5": "五月", - "6": "六月", - "7": "七月", - "8": "八月", - "9": "九月", - "10": "十月", - "11": "十一月", - "12": "十二月" - } - }, - "stand-alone": { - "abbreviated": { - "1": "1月", - "2": "2月", - "3": "3月", - "4": "4月", - "5": "5月", - "6": "6月", - "7": "7月", - "8": "8月", - "9": "9月", - "10": "10月", - "11": "11月", - "12": "12月" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "一月", - "2": "二月", - "3": "三月", - "4": "四月", - "5": "五月", - "6": "六月", - "7": "七月", - "8": "八月", - "9": "九月", - "10": "十月", - "11": "十一月", - "12": "十二月" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "周日", - "mon": "周一", - "tue": "周二", - "wed": "周三", - "thu": "周四", - "fri": "周五", - "sat": "周六" - }, - "narrow": { - "sun": "日", - "mon": "一", - "tue": "二", - "wed": "三", - "thu": "四", - "fri": "五", - "sat": "六" - }, - "short": { - "sun": "周日", - "mon": "周一", - "tue": "周二", - "wed": "周三", - "thu": "周四", - "fri": "周五", - "sat": "周六" - }, - "wide": { - "sun": "星期日", - "mon": "星期一", - "tue": "星期二", - "wed": "星期三", - "thu": "星期四", - "fri": "星期五", - "sat": "星期六" + "dates": { + "calendars": { + "gregorian": { + "months": { + "format": { + "abbreviated": { + "1": "1月", + "2": "2月", + "3": "3月", + "4": "4月", + "5": "5月", + "6": "6月", + "7": "7月", + "8": "8月", + "9": "9月", + "10": "10月", + "11": "11月", + "12": "12月" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "一月", + "2": "二月", + "3": "三月", + "4": "四月", + "5": "五月", + "6": "六月", + "7": "七月", + "8": "八月", + "9": "九月", + "10": "十月", + "11": "十一月", + "12": "十二月" + } + }, + "stand-alone": { + "abbreviated": { + "1": "1月", + "2": "2月", + "3": "3月", + "4": "4月", + "5": "5月", + "6": "6月", + "7": "7月", + "8": "8月", + "9": "9月", + "10": "10月", + "11": "11月", + "12": "12月" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "一月", + "2": "二月", + "3": "三月", + "4": "四月", + "5": "五月", + "6": "六月", + "7": "七月", + "8": "八月", + "9": "九月", + "10": "十月", + "11": "十一月", + "12": "十二月" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "周日", - "mon": "周一", - "tue": "周二", - "wed": "周三", - "thu": "周四", - "fri": "周五", - "sat": "周六" - }, - "narrow": { - "sun": "日", - "mon": "一", - "tue": "二", - "wed": "三", - "thu": "四", - "fri": "五", - "sat": "六" - }, - "short": { - "sun": "周日", - "mon": "周一", - "tue": "周二", - "wed": "周三", - "thu": "周四", - "fri": "周五", - "sat": "周六" - }, - "wide": { - "sun": "星期日", - "mon": "星期一", - "tue": "星期二", - "wed": "星期三", - "thu": "星期四", - "fri": "星期五", - "sat": "星期六" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "1季度", - "2": "2季度", - "3": "3季度", - "4": "4季度" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "第一季度", - "2": "第二季度", - "3": "第三季度", - "4": "第四季度" + "days": { + "format": { + "abbreviated": { + "sun": "周日", + "mon": "周一", + "tue": "周二", + "wed": "周三", + "thu": "周四", + "fri": "周五", + "sat": "周六" + }, + "narrow": { + "sun": "日", + "mon": "一", + "tue": "二", + "wed": "三", + "thu": "四", + "fri": "五", + "sat": "六" + }, + "short": { + "sun": "周日", + "mon": "周一", + "tue": "周二", + "wed": "周三", + "thu": "周四", + "fri": "周五", + "sat": "周六" + }, + "wide": { + "sun": "星期日", + "mon": "星期一", + "tue": "星期二", + "wed": "星期三", + "thu": "星期四", + "fri": "星期五", + "sat": "星期六" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "周日", + "mon": "周一", + "tue": "周二", + "wed": "周三", + "thu": "周四", + "fri": "周五", + "sat": "周六" + }, + "narrow": { + "sun": "日", + "mon": "一", + "tue": "二", + "wed": "三", + "thu": "四", + "fri": "五", + "sat": "六" + }, + "short": { + "sun": "周日", + "mon": "周一", + "tue": "周二", + "wed": "周三", + "thu": "周四", + "fri": "周五", + "sat": "周六" + }, + "wide": { + "sun": "星期日", + "mon": "星期一", + "tue": "星期二", + "wed": "星期三", + "thu": "星期四", + "fri": "星期五", + "sat": "星期六" + } } }, - "stand-alone": { - "abbreviated": { - "1": "1季度", - "2": "2季度", - "3": "3季度", - "4": "4季度" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "第一季度", - "2": "第二季度", - "3": "第三季度", - "4": "第四季度" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "清晨", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" - }, - "narrow": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "清晨", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" - }, - "wide": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "清晨", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" + "quarters": { + "format": { + "abbreviated": { + "1": "1季度", + "2": "2季度", + "3": "3季度", + "4": "4季度" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "第一季度", + "2": "第二季度", + "3": "第三季度", + "4": "第四季度" + } + }, + "stand-alone": { + "abbreviated": { + "1": "1季度", + "2": "2季度", + "3": "3季度", + "4": "4季度" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "第一季度", + "2": "第二季度", + "3": "第三季度", + "4": "第四季度" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "清晨", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" - }, - "narrow": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "早上", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" - }, - "wide": { - "midnight": "午夜", - "am": "上午", - "pm": "下午", - "morning1": "早上", - "morning2": "上午", - "afternoon1": "中午", - "afternoon2": "下午", - "evening1": "晚上", - "night1": "凌晨" - } - } - }, - "eras": { - "eraNames": { - "0": "公元前", - "0-alt-variant": "BCE", - "1": "公元", - "1-alt-variant": "CE" - }, - "eraAbbr": { - "0": "公元前", - "0-alt-variant": "BCE", - "1": "公元", - "1-alt-variant": "CE" - }, - "eraNarrow": { - "0": "公元前", - "0-alt-variant": "BCE", - "1": "公元", - "1-alt-variant": "CE" - } - }, - "dateFormats": { - "full": "y年M月d日EEEE", - "long": "y年M月d日", - "medium": "y年M月d日", - "short": "y/M/d" - }, - "timeFormats": { - "full": "zzzz ah:mm:ss", - "long": "z ah:mm:ss", - "medium": "ah:mm:ss", - "short": "ah:mm" - }, - "dateTimeFormats": { - "full": "{1} {0}", - "long": "{1} {0}", - "medium": "{1} {0}", - "short": "{1} {0}", - "availableFormats": { - "d": "d日", - "E": "ccc", - "Ed": "d日E", - "Ehm": "Eah:mm", - "EHm": "EHH:mm", - "Ehms": "Eah:mm:ss", - "EHms": "EHH:mm:ss", - "Gy": "Gy年", - "GyMMM": "Gy年M月", - "GyMMMd": "Gy年M月d日", - "GyMMMEd": "Gy年M月d日E", - "h": "ah时", - "H": "H时", - "hm": "ah:mm", - "Hm": "HH:mm", - "hms": "ah:mm:ss", - "Hms": "HH:mm:ss", - "hmsv": "v ah:mm:ss", - "Hmsv": "v HH:mm:ss", - "hmv": "v ah:mm", - "Hmv": "v HH:mm", - "M": "M月", - "Md": "M/d", - "MEd": "M/dE", - "MMdd": "MM/dd", - "MMM": "LLL", - "MMMd": "M月d日", - "MMMEd": "M月d日E", - "MMMMd": "M月d日", - "MMMMW": "MMM第W周", - "ms": "mm:ss", - "y": "y年", - "yM": "y年M月", - "yMd": "y/M/d", - "yMEd": "y/M/dE", - "yMM": "y年M月", - "yMMM": "y年M月", - "yMMMd": "y年M月d日", - "yMMMEd": "y年M月d日E", - "yMMMM": "y年M月", - "yQQQ": "y年第Q季度", - "yQQQQ": "y年第Q季度", - "yw": "y年第w周" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{1} {0}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{1}{0}", - "Week": "{0} ({2}: {1})", - "Year": "{1} {0}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d–d日" - }, - "h": { - "a": "ah时至ah时", - "h": "ah时至h时" - }, - "H": { - "H": "HH–HH" - }, - "hm": { - "a": "ah:mm至ah:mm", - "h": "ah:mm至h:mm", - "m": "ah:mm至h:mm" - }, - "Hm": { - "H": "HH:mm–HH:mm", - "m": "HH:mm–HH:mm" - }, - "hmv": { - "a": "vah:mm至ah:mm", - "h": "vah:mm至h:mm", - "m": "vah:mm至h:mm" - }, - "Hmv": { - "H": "v HH:mm–HH:mm", - "m": "v HH:mm–HH:mm" - }, - "hv": { - "a": "vah时至ah时", - "h": "vah时至h时" - }, - "Hv": { - "H": "v HH–HH" - }, - "M": { - "M": "M–M月" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "M/dE至M/dE", - "M": "M/dE至M/dE" - }, - "MMM": { - "M": "MMM – MMM" - }, - "MMMd": { - "d": "M月d日至d日", - "M": "M月d日至M月d日" - }, - "MMMEd": { - "d": "M月d日E至d日E", - "M": "M月d日E至M月d日E" - }, - "y": { - "y": "y–y年" - }, - "yM": { - "M": "y年M月至M月", - "y": "y年M月至y年M月" - }, - "yMd": { - "d": "y/M/d – y/M/d", - "M": "y/M/d – y/M/d", - "y": "y/M/d – y/M/d" - }, - "yMEd": { - "d": "y/M/dE至y/M/dE", - "M": "y/M/dE至y/M/dE", - "y": "y/M/dE至y/M/dE" - }, - "yMMM": { - "M": "y年M月至M月", - "y": "y年M月至y年M月" - }, - "yMMMd": { - "d": "y年M月d日至d日", - "M": "y年M月d日至M月d日", - "y": "y年M月d日至y年M月d日" - }, - "yMMMEd": { - "d": "y年M月d日E至d日E", - "M": "y年M月d日E至M月d日E", - "y": "y年M月d日E至y年M月d日E" - }, - "yMMMM": { - "M": "y年M月至M月", - "y": "y年M月至y年M月" - } - } - } - }, - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "清晨", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + }, + "narrow": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "清晨", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + }, + "wide": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "清晨", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "清晨", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + }, + "narrow": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "早上", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + }, + "wide": { + "midnight": "午夜", + "am": "上午", + "pm": "下午", + "morning1": "早上", + "morning2": "上午", + "afternoon1": "中午", + "afternoon2": "下午", + "evening1": "晚上", + "night1": "凌晨" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" + "eras": { + "eraNames": { + "0": "公元前", + "0-alt-variant": "BCE", + "1": "公元", + "1-alt-variant": "CE" + }, + "eraAbbr": { + "0": "公元前", + "0-alt-variant": "BCE", + "1": "公元", + "1-alt-variant": "CE" + }, + "eraNarrow": { + "0": "公元前", + "0-alt-variant": "BCE", + "1": "公元", + "1-alt-variant": "CE" + } + }, + "dateFormats": { + "full": "y年M月d日EEEE", + "long": "y年M月d日", + "medium": "y年M月d日", + "short": "y/M/d" + }, + "timeFormats": { + "full": "zzzz ah:mm:ss", + "long": "z ah:mm:ss", + "medium": "ah:mm:ss", + "short": "ah:mm" + }, + "dateTimeFormats": { + "full": "{1} {0}", + "long": "{1} {0}", + "medium": "{1} {0}", + "short": "{1} {0}", + "availableFormats": { + "d": "d日", + "E": "ccc", + "Ed": "d日E", + "Ehm": "Eah:mm", + "EHm": "EHH:mm", + "Ehms": "Eah:mm:ss", + "EHms": "EHH:mm:ss", + "Gy": "Gy年", + "GyMMM": "Gy年M月", + "GyMMMd": "Gy年M月d日", + "GyMMMEd": "Gy年M月d日E", + "h": "ah时", + "H": "H时", + "hm": "ah:mm", + "Hm": "HH:mm", + "hms": "ah:mm:ss", + "Hms": "HH:mm:ss", + "hmsv": "v ah:mm:ss", + "Hmsv": "v HH:mm:ss", + "hmv": "v ah:mm", + "Hmv": "v HH:mm", + "M": "M月", + "Md": "M/d", + "MEd": "M/dE", + "MMdd": "MM/dd", + "MMM": "LLL", + "MMMd": "M月d日", + "MMMEd": "M月d日E", + "MMMMd": "M月d日", + "MMMMW": "MMM第W周", + "ms": "mm:ss", + "y": "y年", + "yM": "y年M月", + "yMd": "y/M/d", + "yMEd": "y/M/dE", + "yMM": "y年M月", + "yMMM": "y年M月", + "yMMMd": "y年M月d日", + "yMMMEd": "y年M月d日E", + "yMMMM": "y年M月", + "yQQQ": "y年第Q季度", + "yQQQQ": "y年第Q季度", + "yw": "y年第w周" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{1} {0}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{1}{0}", + "Week": "{0} ({2}: {1})", + "Year": "{1} {0}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d–d日" + }, + "h": { + "a": "ah时至ah时", + "h": "ah时至h时" + }, + "H": { + "H": "HH–HH" + }, + "hm": { + "a": "ah:mm至ah:mm", + "h": "ah:mm至h:mm", + "m": "ah:mm至h:mm" + }, + "Hm": { + "H": "HH:mm–HH:mm", + "m": "HH:mm–HH:mm" + }, + "hmv": { + "a": "vah:mm至ah:mm", + "h": "vah:mm至h:mm", + "m": "vah:mm至h:mm" + }, + "Hmv": { + "H": "v HH:mm–HH:mm", + "m": "v HH:mm–HH:mm" + }, + "hv": { + "a": "vah时至ah时", + "h": "vah时至h时" + }, + "Hv": { + "H": "v HH–HH" + }, + "M": { + "M": "M–M月" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "M/dE至M/dE", + "M": "M/dE至M/dE" + }, + "MMM": { + "M": "MMM – MMM" + }, + "MMMd": { + "d": "M月d日至d日", + "M": "M月d日至M月d日" + }, + "MMMEd": { + "d": "M月d日E至d日E", + "M": "M月d日E至M月d日E" + }, + "y": { + "y": "y–y年" + }, + "yM": { + "M": "y年M月至M月", + "y": "y年M月至y年M月" + }, + "yMd": { + "d": "y/M/d – y/M/d", + "M": "y/M/d – y/M/d", + "y": "y/M/d – y/M/d" + }, + "yMEd": { + "d": "y/M/dE至y/M/dE", + "M": "y/M/dE至y/M/dE", + "y": "y/M/dE至y/M/dE" + }, + "yMMM": { + "M": "y年M月至M月", + "y": "y年M月至y年M月" + }, + "yMMMd": { + "d": "y年M月d日至d日", + "M": "y年M月d日至M月d日", + "y": "y年M月d日至y年M月d日" + }, + "yMMMEd": { + "d": "y年M月d日E至d日E", + "M": "y年M月d日E至M月d日E", + "y": "y年M月d日E至y年M月d日E" + }, + "yMMMM": { + "M": "y年M月至M月", + "y": "y年M月至y年M月" + } } } }, - "days": { - "format": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" + "days": { + "format": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "narrow": { - "midnight": "mi", - "am": "a", - "am-alt-variant": "am", - "noon": "n", - "pm": "p", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" - }, - "narrow": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" - }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "narrow": { + "midnight": "mi", + "am": "a", + "am-alt-variant": "am", + "noon": "n", + "pm": "p", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "narrow": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + } } - } - }, - "eras": { - "eraNames": { - "0": "AH" }, - "eraAbbr": { - "0": "AH" - }, - "eraNarrow": { - "0": "AH" - } - }, - "dateFormats": { - "full": "EEEE, MMMM d, y G", - "long": "MMMM d, y G", - "medium": "MMM d, y G", - "short": "M/d/y GGGGG" - }, - "timeFormats": { - "full": "h:mm:ss a zzzz", - "long": "h:mm:ss a z", - "medium": "h:mm:ss a", - "short": "h:mm a" - }, - "dateTimeFormats": { - "full": "{1} 'at' {0}", - "long": "{1} 'at' {0}", - "medium": "{1}, {0}", - "short": "{1}, {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "d E", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "MMM d, y G", - "GyMMMEd": "E, MMM d, y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "M/d", - "MEd": "E, M/d", - "MMM": "LLL", - "MMMd": "MMM d", - "MMMEd": "E, MMM d", - "MMMMd": "MMMM d", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M/y GGGGG", - "yyyyMd": "M/d/y GGGGG", - "yyyyMEd": "E, M/d/y GGGGG", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "MMM d, y G", - "yyyyMMMEd": "E, MMM d, y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" - }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{0} {1}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{0} {1}" - }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d – d" - }, - "Gy": { - "G": "y G – y G", - "y": "y – y G" - }, - "GyM": { - "G": "M/y GGGGG – M/y GGGGG", - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "GyMd": { - "d": "M/d/y – M/d/y GGGGG", - "G": "M/d/y GGGGG – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "GyMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "GyMMM": { - "G": "MMM y G – MMM y G", - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "GyMMMd": { - "d": "MMM d – d, y G", - "G": "MMM d, y G – MMM d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "GyMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "G": "E, MMM d, y G – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "h": { - "a": "h a – h a", - "h": "h – h a" - }, - "H": { - "H": "HH – HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm – h:mm a", - "m": "h:mm – h:mm a" - }, - "Hm": { - "H": "HH:mm – HH:mm", - "m": "HH:mm – HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm – h:mm a v", - "m": "h:mm – h:mm a v" - }, - "Hmv": { - "H": "HH:mm – HH:mm v", - "m": "HH:mm – HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h – h a v" - }, - "Hv": { - "H": "HH – HH v" - }, - "M": { - "M": "M – M" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "E, M/d – E, M/d", - "M": "E, M/d – E, M/d" - }, - "MMM": { - "M": "MMM – MMM" - }, - "MMMd": { - "d": "MMM d – d", - "M": "MMM d – MMM d" - }, - "MMMEd": { - "d": "E, MMM d – E, MMM d", - "M": "E, MMM d – E, MMM d" - }, - "y": { - "y": "y – y G" - }, - "yM": { - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "yMd": { - "d": "M/d/y – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "yMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "yMMM": { - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "yMMMd": { - "d": "MMM d – d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "yMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "yMMMM": { - "M": "MMMM – MMMM y G", - "y": "MMMM y – MMMM y G" + "eras": { + "eraNames": { + "0": "AH" + }, + "eraAbbr": { + "0": "AH" + }, + "eraNarrow": { + "0": "AH" + } + }, + "dateFormats": { + "full": "EEEE, MMMM d, y G", + "long": "MMMM d, y G", + "medium": "MMM d, y G", + "short": "M/d/y GGGGG" + }, + "timeFormats": { + "full": "h:mm:ss a zzzz", + "long": "h:mm:ss a z", + "medium": "h:mm:ss a", + "short": "h:mm a" + }, + "dateTimeFormats": { + "full": "{1} 'at' {0}", + "long": "{1} 'at' {0}", + "medium": "{1}, {0}", + "short": "{1}, {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "d E", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "MMM d, y G", + "GyMMMEd": "E, MMM d, y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "M/d", + "MEd": "E, M/d", + "MMM": "LLL", + "MMMd": "MMM d", + "MMMEd": "E, MMM d", + "MMMMd": "MMMM d", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M/y GGGGG", + "yyyyMd": "M/d/y GGGGG", + "yyyyMEd": "E, M/d/y GGGGG", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "MMM d, y G", + "yyyyMMMEd": "E, MMM d, y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{0} {1}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{0} {1}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d – d" + }, + "Gy": { + "G": "y G – y G", + "y": "y – y G" + }, + "GyM": { + "G": "M/y GGGGG – M/y GGGGG", + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "GyMd": { + "d": "M/d/y – M/d/y GGGGG", + "G": "M/d/y GGGGG – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "GyMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "GyMMM": { + "G": "MMM y G – MMM y G", + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "GyMMMd": { + "d": "MMM d – d, y G", + "G": "MMM d, y G – MMM d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "GyMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "G": "E, MMM d, y G – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "h": { + "a": "h a – h a", + "h": "h – h a" + }, + "H": { + "H": "HH – HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm – h:mm a", + "m": "h:mm – h:mm a" + }, + "Hm": { + "H": "HH:mm – HH:mm", + "m": "HH:mm – HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm – h:mm a v", + "m": "h:mm – h:mm a v" + }, + "Hmv": { + "H": "HH:mm – HH:mm v", + "m": "HH:mm – HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h – h a v" + }, + "Hv": { + "H": "HH – HH v" + }, + "M": { + "M": "M – M" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "E, M/d – E, M/d", + "M": "E, M/d – E, M/d" + }, + "MMM": { + "M": "MMM – MMM" + }, + "MMMd": { + "d": "MMM d – d", + "M": "MMM d – MMM d" + }, + "MMMEd": { + "d": "E, MMM d – E, MMM d", + "M": "E, MMM d – E, MMM d" + }, + "y": { + "y": "y – y G" + }, + "yM": { + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "yMd": { + "d": "M/d/y – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "yMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "yMMM": { + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "yMMMd": { + "d": "MMM d – d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "yMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "yMMMM": { + "M": "MMMM – MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } - } - }, - "timeZoneNames": { - "hourFormat": "+HH:mm;-HH:mm", - "gmtFormat": "GMT{0}", - "gmtZeroFormat": "GMT", - "regionFormat": "{0}时间", - "regionFormat-type-daylight": "{0}夏令时间", - "regionFormat-type-standard": "{0}标准时间", - "fallbackFormat": "{1}（{0}）", - "zone": { - "America": { - "Adak": { - "exemplarCity": "埃达克" - }, - "Anchorage": { - "exemplarCity": "安克雷奇" - }, - "Anguilla": { - "exemplarCity": "安圭拉" - }, - "Antigua": { - "exemplarCity": "安提瓜" - }, - "Araguaina": { - "exemplarCity": "阿拉瓜伊纳" - }, - "Argentina": { - "Rio_Gallegos": { - "exemplarCity": "里奥加耶戈斯" + }, + "timeZoneNames": { + "hourFormat": "+HH:mm;-HH:mm", + "gmtFormat": "GMT{0}", + "gmtZeroFormat": "GMT", + "regionFormat": "{0}时间", + "regionFormat-type-daylight": "{0}夏令时间", + "regionFormat-type-standard": "{0}标准时间", + "fallbackFormat": "{1}（{0}）", + "zone": { + "America": { + "Adak": { + "exemplarCity": "埃达克" }, - "San_Juan": { - "exemplarCity": "圣胡安" + "Anchorage": { + "exemplarCity": "安克雷奇" }, - "Ushuaia": { - "exemplarCity": "乌斯怀亚" + "Anguilla": { + "exemplarCity": "安圭拉" }, - "La_Rioja": { - "exemplarCity": "拉里奥哈" + "Antigua": { + "exemplarCity": "安提瓜" }, - "San_Luis": { - "exemplarCity": "圣路易斯" + "Araguaina": { + "exemplarCity": "阿拉瓜伊纳" }, - "Salta": { - "exemplarCity": "萨尔塔" + "Argentina": { + "Rio_Gallegos": { + "exemplarCity": "里奥加耶戈斯" + }, + "San_Juan": { + "exemplarCity": "圣胡安" + }, + "Ushuaia": { + "exemplarCity": "乌斯怀亚" + }, + "La_Rioja": { + "exemplarCity": "拉里奥哈" + }, + "San_Luis": { + "exemplarCity": "圣路易斯" + }, + "Salta": { + "exemplarCity": "萨尔塔" + }, + "Tucuman": { + "exemplarCity": "图库曼" + } }, - "Tucuman": { - "exemplarCity": "图库曼" - } - }, - "Aruba": { - "exemplarCity": "阿鲁巴" - }, - "Asuncion": { - "exemplarCity": "亚松森" - }, - "Bahia": { - "exemplarCity": "巴伊亚" - }, - "Bahia_Banderas": { - "exemplarCity": "巴伊亚班德拉斯" - }, - "Barbados": { - "exemplarCity": "巴巴多斯" - }, - "Belem": { - "exemplarCity": "贝伦" - }, - "Belize": { - "exemplarCity": "伯利兹" - }, - "Blanc-Sablon": { - "exemplarCity": "布兰克萨布隆" - }, - "Boa_Vista": { - "exemplarCity": "博阿维斯塔" - }, - "Bogota": { - "exemplarCity": "波哥大" - }, - "Boise": { - "exemplarCity": "博伊西" - }, - "Buenos_Aires": { - "exemplarCity": "布宜诺斯艾利斯" - }, - "Cambridge_Bay": { - "exemplarCity": "剑桥湾" - }, - "Campo_Grande": { - "exemplarCity": "大坎普" - }, - "Cancun": { - "exemplarCity": "坎昆" - }, - "Caracas": { - "exemplarCity": "加拉加斯" - }, - "Catamarca": { - "exemplarCity": "卡塔马卡" - }, - "Cayenne": { - "exemplarCity": "卡宴" - }, - "Cayman": { - "exemplarCity": "开曼" - }, - "Chicago": { - "exemplarCity": "芝加哥" - }, - "Chihuahua": { - "exemplarCity": "奇瓦瓦" - }, - "Coral_Harbour": { - "exemplarCity": "阿蒂科肯" - }, - "Cordoba": { - "exemplarCity": "科尔多瓦" - }, - "Costa_Rica": { - "exemplarCity": "哥斯达黎加" - }, - "Creston": { - "exemplarCity": "克雷斯顿" - }, - "Cuiaba": { - "exemplarCity": "库亚巴" - }, - "Curacao": { - "exemplarCity": "库拉索" - }, - "Danmarkshavn": { - "exemplarCity": "丹马沙文" - }, - "Dawson": { - "exemplarCity": "道森" - }, - "Dawson_Creek": { - "exemplarCity": "道森克里克" - }, - "Denver": { - "exemplarCity": "丹佛" - }, - "Detroit": { - "exemplarCity": "底特律" - }, - "Dominica": { - "exemplarCity": "多米尼加" - }, - "Edmonton": { - "exemplarCity": "埃德蒙顿" - }, - "Eirunepe": { - "exemplarCity": "依伦尼贝" - }, - "El_Salvador": { - "exemplarCity": "萨尔瓦多" - }, - "Fort_Nelson": { - "exemplarCity": "纳尔逊堡" - }, - "Fortaleza": { - "exemplarCity": "福塔雷萨" - }, - "Glace_Bay": { - "exemplarCity": "格莱斯贝" - }, - "Godthab": { - "exemplarCity": "戈特霍布" - }, - "Goose_Bay": { - "exemplarCity": "古斯湾" - }, - "Grand_Turk": { - "exemplarCity": "大特克" - }, - "Grenada": { - "exemplarCity": "格林纳达" - }, - "Guadeloupe": { - "exemplarCity": "瓜德罗普" - }, - "Guatemala": { - "exemplarCity": "危地马拉" - }, - "Guayaquil": { - "exemplarCity": "瓜亚基尔" - }, - "Guyana": { - "exemplarCity": "圭亚那" - }, - "Halifax": { - "exemplarCity": "哈利法克斯" - }, - "Havana": { - "exemplarCity": "哈瓦那" - }, - "Hermosillo": { - "exemplarCity": "埃莫西约" - }, - "Indiana": { - "Vincennes": { - "exemplarCity": "印第安纳州温森斯" + "Aruba": { + "exemplarCity": "阿鲁巴" }, - "Petersburg": { - "exemplarCity": "印第安纳州彼得斯堡" + "Asuncion": { + "exemplarCity": "亚松森" }, - "Tell_City": { - "exemplarCity": "印第安纳州特尔城" + "Bahia": { + "exemplarCity": "巴伊亚" }, - "Knox": { - "exemplarCity": "印第安纳州诺克斯" + "Bahia_Banderas": { + "exemplarCity": "巴伊亚班德拉斯" }, - "Winamac": { - "exemplarCity": "印第安纳州威纳马克" + "Barbados": { + "exemplarCity": "巴巴多斯" }, - "Marengo": { - "exemplarCity": "印第安纳州马伦戈" + "Belem": { + "exemplarCity": "贝伦" }, - "Vevay": { - "exemplarCity": "印第安纳州维维市" - } - }, - "Indianapolis": { - "exemplarCity": "印第安纳波利斯" - }, - "Inuvik": { - "exemplarCity": "伊努维克" - }, - "Iqaluit": { - "exemplarCity": "伊魁特" - }, - "Jamaica": { - "exemplarCity": "牙买加" - }, - "Jujuy": { - "exemplarCity": "胡胡伊" - }, - "Juneau": { - "exemplarCity": "朱诺" - }, - "Kentucky": { - "Monticello": { - "exemplarCity": "肯塔基州蒙蒂塞洛" - } - }, - "Kralendijk": { - "exemplarCity": "克拉伦代克" - }, - "La_Paz": { - "exemplarCity": "拉巴斯" - }, - "Lima": { - "exemplarCity": "利马" - }, - "Los_Angeles": { - "exemplarCity": "洛杉矶" - }, - "Louisville": { - "exemplarCity": "路易斯维尔" - }, - "Lower_Princes": { - "exemplarCity": "下太子区" - }, - "Maceio": { - "exemplarCity": "马塞约" - }, - "Managua": { - "exemplarCity": "马那瓜" - }, - "Manaus": { - "exemplarCity": "马瑙斯" - }, - "Marigot": { - "exemplarCity": "马里戈特" - }, - "Martinique": { - "exemplarCity": "马提尼克" - }, - "Matamoros": { - "exemplarCity": "马塔莫罗斯" - }, - "Mazatlan": { - "exemplarCity": "马萨特兰" - }, - "Mendoza": { - "exemplarCity": "门多萨" - }, - "Menominee": { - "exemplarCity": "梅诺米尼" - }, - "Merida": { - "exemplarCity": "梅里达" - }, - "Metlakatla": { - "exemplarCity": "梅特拉卡特拉" - }, - "Mexico_City": { - "exemplarCity": "墨西哥城" - }, - "Miquelon": { - "exemplarCity": "密克隆" - }, - "Moncton": { - "exemplarCity": "蒙克顿" - }, - "Monterrey": { - "exemplarCity": "蒙特雷" - }, - "Montevideo": { - "exemplarCity": "蒙得维的亚" - }, - "Montserrat": { - "exemplarCity": "蒙特塞拉特" - }, - "Nassau": { - "exemplarCity": "拿骚" - }, - "New_York": { - "exemplarCity": "纽约" - }, - "Nipigon": { - "exemplarCity": "尼皮贡" - }, - "Nome": { - "exemplarCity": "诺姆" - }, - "Noronha": { - "exemplarCity": "洛罗尼亚" - }, - "North_Dakota": { - "Beulah": { - "exemplarCity": "北达科他州比尤拉" + "Belize": { + "exemplarCity": "伯利兹" }, - "New_Salem": { - "exemplarCity": "北达科他州新塞勒姆" + "Blanc-Sablon": { + "exemplarCity": "布兰克萨布隆" }, - "Center": { - "exemplarCity": "北达科他州申特" - } - }, - "Ojinaga": { - "exemplarCity": "奥希纳加" - }, - "Panama": { - "exemplarCity": "巴拿马" - }, - "Pangnirtung": { - "exemplarCity": "旁涅唐" - }, - "Paramaribo": { - "exemplarCity": "帕拉马里博" - }, - "Phoenix": { - "exemplarCity": "凤凰城" - }, - "Port-au-Prince": { - "exemplarCity": "太子港" - }, - "Port_of_Spain": { - "exemplarCity": "西班牙港" - }, - "Porto_Velho": { - "exemplarCity": "波多韦柳" - }, - "Puerto_Rico": { - "exemplarCity": "波多黎各" - }, - "Rainy_River": { - "exemplarCity": "雷尼河" - }, - "Rankin_Inlet": { - "exemplarCity": "兰今湾" - }, - "Recife": { - "exemplarCity": "累西腓" - }, - "Regina": { - "exemplarCity": "里贾纳" - }, - "Resolute": { - "exemplarCity": "雷索卢特" - }, - "Rio_Branco": { - "exemplarCity": "里奥布郎库" - }, - "Santa_Isabel": { - "exemplarCity": "圣伊萨贝尔" - }, - "Santarem": { - "exemplarCity": "圣塔伦" - }, - "Santiago": { - "exemplarCity": "圣地亚哥" - }, - "Santo_Domingo": { - "exemplarCity": "圣多明各" - }, - "Sao_Paulo": { - "exemplarCity": "圣保罗" - }, - "Scoresbysund": { - "exemplarCity": "斯科列斯比桑德" - }, - "Sitka": { - "exemplarCity": "锡特卡" - }, - "St_Barthelemy": { - "exemplarCity": "圣巴泰勒米岛" - }, - "St_Johns": { - "exemplarCity": "圣约翰斯" - }, - "St_Kitts": { - "exemplarCity": "圣基茨" - }, - "St_Lucia": { - "exemplarCity": "圣卢西亚" - }, - "St_Thomas": { - "exemplarCity": "圣托马斯" - }, - "St_Vincent": { - "exemplarCity": "圣文森特" - }, - "Swift_Current": { - "exemplarCity": "斯威夫特卡伦特" - }, - "Tegucigalpa": { - "exemplarCity": "特古西加尔巴" - }, - "Thule": { - "exemplarCity": "图勒" - }, - "Thunder_Bay": { - "exemplarCity": "桑德贝" - }, - "Tijuana": { - "exemplarCity": "蒂华纳" - }, - "Toronto": { - "exemplarCity": "多伦多" - }, - "Tortola": { - "exemplarCity": "托尔托拉" - }, - "Vancouver": { - "exemplarCity": "温哥华" - }, - "Whitehorse": { - "exemplarCity": "怀特霍斯" - }, - "Winnipeg": { - "exemplarCity": "温尼伯" - }, - "Yakutat": { - "exemplarCity": "亚库塔特" - }, - "Yellowknife": { - "exemplarCity": "耶洛奈夫" - } - }, - "Atlantic": { - "Azores": { - "exemplarCity": "亚速尔群岛" - }, - "Bermuda": { - "exemplarCity": "百慕大" - }, - "Canary": { - "exemplarCity": "加那利" - }, - "Cape_Verde": { - "exemplarCity": "佛得角" - }, - "Faeroe": { - "exemplarCity": "法罗" - }, - "Madeira": { - "exemplarCity": "马德拉" - }, - "Reykjavik": { - "exemplarCity": "雷克雅未克" - }, - "South_Georgia": { - "exemplarCity": "南乔治亚" - }, - "St_Helena": { - "exemplarCity": "圣赫勒拿" - }, - "Stanley": { - "exemplarCity": "斯坦利" - } - }, - "Europe": { - "Amsterdam": { - "exemplarCity": "阿姆斯特丹" - }, - "Andorra": { - "exemplarCity": "安道尔" - }, - "Astrakhan": { - "exemplarCity": "阿斯特拉罕" - }, - "Athens": { - "exemplarCity": "雅典" - }, - "Belgrade": { - "exemplarCity": "贝尔格莱德" - }, - "Berlin": { - "exemplarCity": "柏林" - }, - "Bratislava": { - "exemplarCity": "布拉迪斯拉发" - }, - "Brussels": { - "exemplarCity": "布鲁塞尔" - }, - "Bucharest": { - "exemplarCity": "布加勒斯特" - }, - "Budapest": { - "exemplarCity": "布达佩斯" - }, - "Busingen": { - "exemplarCity": "布辛根" - }, - "Chisinau": { - "exemplarCity": "基希讷乌" - }, - "Copenhagen": { - "exemplarCity": "哥本哈根" - }, - "Dublin": { - "long": { - "daylight": "爱尔兰标准时间" + "Boa_Vista": { + "exemplarCity": "博阿维斯塔" }, - "exemplarCity": "都柏林" - }, - "Gibraltar": { - "exemplarCity": "直布罗陀" - }, - "Guernsey": { - "exemplarCity": "根西岛" - }, - "Helsinki": { - "exemplarCity": "赫尔辛基" - }, - "Isle_of_Man": { - "exemplarCity": "曼岛" - }, - "Istanbul": { - "exemplarCity": "伊斯坦布尔" - }, - "Jersey": { - "exemplarCity": "泽西岛" - }, - "Kaliningrad": { - "exemplarCity": "加里宁格勒" - }, - "Kiev": { - "exemplarCity": "基辅" - }, - "Kirov": { - "exemplarCity": "基洛夫" - }, - "Lisbon": { - "exemplarCity": "里斯本" - }, - "Ljubljana": { - "exemplarCity": "卢布尔雅那" - }, - "London": { - "long": { - "daylight": "英国夏令时间" + "Bogota": { + "exemplarCity": "波哥大" }, - "exemplarCity": "伦敦" - }, - "Luxembourg": { - "exemplarCity": "卢森堡" - }, - "Madrid": { - "exemplarCity": "马德里" - }, - "Malta": { - "exemplarCity": "马耳他" - }, - "Mariehamn": { - "exemplarCity": "玛丽港" - }, - "Minsk": { - "exemplarCity": "明斯克" - }, - "Monaco": { - "exemplarCity": "摩纳哥" - }, - "Moscow": { - "exemplarCity": "莫斯科" - }, - "Oslo": { - "exemplarCity": "奥斯陆" - }, - "Paris": { - "exemplarCity": "巴黎" - }, - "Podgorica": { - "exemplarCity": "波德戈里察" - }, - "Prague": { - "exemplarCity": "布拉格" - }, - "Riga": { - "exemplarCity": "里加" - }, - "Rome": { - "exemplarCity": "罗马" - }, - "Samara": { - "exemplarCity": "萨马拉" - }, - "San_Marino": { - "exemplarCity": "圣马力诺" - }, - "Sarajevo": { - "exemplarCity": "萨拉热窝" - }, - "Simferopol": { - "exemplarCity": "辛菲罗波尔" - }, - "Skopje": { - "exemplarCity": "斯科普里" - }, - "Sofia": { - "exemplarCity": "索非亚" - }, - "Stockholm": { - "exemplarCity": "斯德哥尔摩" - }, - "Tallinn": { - "exemplarCity": "塔林" - }, - "Tirane": { - "exemplarCity": "地拉那" - }, - "Ulyanovsk": { - "exemplarCity": "乌里扬诺夫斯克" - }, - "Uzhgorod": { - "exemplarCity": "乌日哥罗德" - }, - "Vaduz": { - "exemplarCity": "瓦杜兹" - }, - "Vatican": { - "exemplarCity": "梵蒂冈" - }, - "Vienna": { - "exemplarCity": "维也纳" - }, - "Vilnius": { - "exemplarCity": "维尔纽斯" - }, - "Volgograd": { - "exemplarCity": "伏尔加格勒" - }, - "Warsaw": { - "exemplarCity": "华沙" - }, - "Zagreb": { - "exemplarCity": "萨格勒布" - }, - "Zaporozhye": { - "exemplarCity": "扎波罗热" - }, - "Zurich": { - "exemplarCity": "苏黎世" - } - }, - "Africa": { - "Abidjan": { - "exemplarCity": "阿比让" - }, - "Accra": { - "exemplarCity": "阿克拉" - }, - "Addis_Ababa": { - "exemplarCity": "亚的斯亚贝巴" - }, - "Algiers": { - "exemplarCity": "阿尔及尔" - }, - "Asmera": { - "exemplarCity": "阿斯马拉" - }, - "Bamako": { - "exemplarCity": "巴马科" - }, - "Bangui": { - "exemplarCity": "班吉" - }, - "Banjul": { - "exemplarCity": "班珠尔" - }, - "Bissau": { - "exemplarCity": "比绍" - }, - "Blantyre": { - "exemplarCity": "布兰太尔" - }, - "Brazzaville": { - "exemplarCity": "布拉柴维尔" - }, - "Bujumbura": { - "exemplarCity": "布琼布拉" - }, - "Cairo": { - "exemplarCity": "开罗" - }, - "Casablanca": { - "exemplarCity": "卡萨布兰卡" - }, - "Ceuta": { - "exemplarCity": "休达" - }, - "Conakry": { - "exemplarCity": "科纳克里" - }, - "Dakar": { - "exemplarCity": "达喀尔" - }, - "Dar_es_Salaam": { - "exemplarCity": "达累斯萨拉姆" - }, - "Djibouti": { - "exemplarCity": "吉布提" + "Boise": { + "exemplarCity": "博伊西" + }, + "Buenos_Aires": { + "exemplarCity": "布宜诺斯艾利斯" + }, + "Cambridge_Bay": { + "exemplarCity": "剑桥湾" + }, + "Campo_Grande": { + "exemplarCity": "大坎普" + }, + "Cancun": { + "exemplarCity": "坎昆" + }, + "Caracas": { + "exemplarCity": "加拉加斯" + }, + "Catamarca": { + "exemplarCity": "卡塔马卡" + }, + "Cayenne": { + "exemplarCity": "卡宴" + }, + "Cayman": { + "exemplarCity": "开曼" + }, + "Chicago": { + "exemplarCity": "芝加哥" + }, + "Chihuahua": { + "exemplarCity": "奇瓦瓦" + }, + "Coral_Harbour": { + "exemplarCity": "阿蒂科肯" + }, + "Cordoba": { + "exemplarCity": "科尔多瓦" + }, + "Costa_Rica": { + "exemplarCity": "哥斯达黎加" + }, + "Creston": { + "exemplarCity": "克雷斯顿" + }, + "Cuiaba": { + "exemplarCity": "库亚巴" + }, + "Curacao": { + "exemplarCity": "库拉索" + }, + "Danmarkshavn": { + "exemplarCity": "丹马沙文" + }, + "Dawson": { + "exemplarCity": "道森" + }, + "Dawson_Creek": { + "exemplarCity": "道森克里克" + }, + "Denver": { + "exemplarCity": "丹佛" + }, + "Detroit": { + "exemplarCity": "底特律" + }, + "Dominica": { + "exemplarCity": "多米尼加" + }, + "Edmonton": { + "exemplarCity": "埃德蒙顿" + }, + "Eirunepe": { + "exemplarCity": "依伦尼贝" + }, + "El_Salvador": { + "exemplarCity": "萨尔瓦多" + }, + "Fort_Nelson": { + "exemplarCity": "纳尔逊堡" + }, + "Fortaleza": { + "exemplarCity": "福塔雷萨" + }, + "Glace_Bay": { + "exemplarCity": "格莱斯贝" + }, + "Godthab": { + "exemplarCity": "戈特霍布" + }, + "Goose_Bay": { + "exemplarCity": "古斯湾" + }, + "Grand_Turk": { + "exemplarCity": "大特克" + }, + "Grenada": { + "exemplarCity": "格林纳达" + }, + "Guadeloupe": { + "exemplarCity": "瓜德罗普" + }, + "Guatemala": { + "exemplarCity": "危地马拉" + }, + "Guayaquil": { + "exemplarCity": "瓜亚基尔" + }, + "Guyana": { + "exemplarCity": "圭亚那" + }, + "Halifax": { + "exemplarCity": "哈利法克斯" + }, + "Havana": { + "exemplarCity": "哈瓦那" + }, + "Hermosillo": { + "exemplarCity": "埃莫西约" + }, + "Indiana": { + "Vincennes": { + "exemplarCity": "印第安纳州温森斯" + }, + "Petersburg": { + "exemplarCity": "印第安纳州彼得斯堡" + }, + "Tell_City": { + "exemplarCity": "印第安纳州特尔城" + }, + "Knox": { + "exemplarCity": "印第安纳州诺克斯" + }, + "Winamac": { + "exemplarCity": "印第安纳州威纳马克" + }, + "Marengo": { + "exemplarCity": "印第安纳州马伦戈" + }, + "Vevay": { + "exemplarCity": "印第安纳州维维市" + } + }, + "Indianapolis": { + "exemplarCity": "印第安纳波利斯" + }, + "Inuvik": { + "exemplarCity": "伊努维克" + }, + "Iqaluit": { + "exemplarCity": "伊魁特" + }, + "Jamaica": { + "exemplarCity": "牙买加" + }, + "Jujuy": { + "exemplarCity": "胡胡伊" + }, + "Juneau": { + "exemplarCity": "朱诺" + }, + "Kentucky": { + "Monticello": { + "exemplarCity": "肯塔基州蒙蒂塞洛" + } + }, + "Kralendijk": { + "exemplarCity": "克拉伦代克" + }, + "La_Paz": { + "exemplarCity": "拉巴斯" + }, + "Lima": { + "exemplarCity": "利马" + }, + "Los_Angeles": { + "exemplarCity": "洛杉矶" + }, + "Louisville": { + "exemplarCity": "路易斯维尔" + }, + "Lower_Princes": { + "exemplarCity": "下太子区" + }, + "Maceio": { + "exemplarCity": "马塞约" + }, + "Managua": { + "exemplarCity": "马那瓜" + }, + "Manaus": { + "exemplarCity": "马瑙斯" + }, + "Marigot": { + "exemplarCity": "马里戈特" + }, + "Martinique": { + "exemplarCity": "马提尼克" + }, + "Matamoros": { + "exemplarCity": "马塔莫罗斯" + }, + "Mazatlan": { + "exemplarCity": "马萨特兰" + }, + "Mendoza": { + "exemplarCity": "门多萨" + }, + "Menominee": { + "exemplarCity": "梅诺米尼" + }, + "Merida": { + "exemplarCity": "梅里达" + }, + "Metlakatla": { + "exemplarCity": "梅特拉卡特拉" + }, + "Mexico_City": { + "exemplarCity": "墨西哥城" + }, + "Miquelon": { + "exemplarCity": "密克隆" + }, + "Moncton": { + "exemplarCity": "蒙克顿" + }, + "Monterrey": { + "exemplarCity": "蒙特雷" + }, + "Montevideo": { + "exemplarCity": "蒙得维的亚" + }, + "Montserrat": { + "exemplarCity": "蒙特塞拉特" + }, + "Nassau": { + "exemplarCity": "拿骚" + }, + "New_York": { + "exemplarCity": "纽约" + }, + "Nipigon": { + "exemplarCity": "尼皮贡" + }, + "Nome": { + "exemplarCity": "诺姆" + }, + "Noronha": { + "exemplarCity": "洛罗尼亚" + }, + "North_Dakota": { + "Beulah": { + "exemplarCity": "北达科他州比尤拉" + }, + "New_Salem": { + "exemplarCity": "北达科他州新塞勒姆" + }, + "Center": { + "exemplarCity": "北达科他州申特" + } + }, + "Ojinaga": { + "exemplarCity": "奥希纳加" + }, + "Panama": { + "exemplarCity": "巴拿马" + }, + "Pangnirtung": { + "exemplarCity": "旁涅唐" + }, + "Paramaribo": { + "exemplarCity": "帕拉马里博" + }, + "Phoenix": { + "exemplarCity": "凤凰城" + }, + "Port-au-Prince": { + "exemplarCity": "太子港" + }, + "Port_of_Spain": { + "exemplarCity": "西班牙港" + }, + "Porto_Velho": { + "exemplarCity": "波多韦柳" + }, + "Puerto_Rico": { + "exemplarCity": "波多黎各" + }, + "Rainy_River": { + "exemplarCity": "雷尼河" + }, + "Rankin_Inlet": { + "exemplarCity": "兰今湾" + }, + "Recife": { + "exemplarCity": "累西腓" + }, + "Regina": { + "exemplarCity": "里贾纳" + }, + "Resolute": { + "exemplarCity": "雷索卢特" + }, + "Rio_Branco": { + "exemplarCity": "里奥布郎库" + }, + "Santa_Isabel": { + "exemplarCity": "圣伊萨贝尔" + }, + "Santarem": { + "exemplarCity": "圣塔伦" + }, + "Santiago": { + "exemplarCity": "圣地亚哥" + }, + "Santo_Domingo": { + "exemplarCity": "圣多明各" + }, + "Sao_Paulo": { + "exemplarCity": "圣保罗" + }, + "Scoresbysund": { + "exemplarCity": "斯科列斯比桑德" + }, + "Sitka": { + "exemplarCity": "锡特卡" + }, + "St_Barthelemy": { + "exemplarCity": "圣巴泰勒米岛" + }, + "St_Johns": { + "exemplarCity": "圣约翰斯" + }, + "St_Kitts": { + "exemplarCity": "圣基茨" + }, + "St_Lucia": { + "exemplarCity": "圣卢西亚" + }, + "St_Thomas": { + "exemplarCity": "圣托马斯" + }, + "St_Vincent": { + "exemplarCity": "圣文森特" + }, + "Swift_Current": { + "exemplarCity": "斯威夫特卡伦特" + }, + "Tegucigalpa": { + "exemplarCity": "特古西加尔巴" + }, + "Thule": { + "exemplarCity": "图勒" + }, + "Thunder_Bay": { + "exemplarCity": "桑德贝" + }, + "Tijuana": { + "exemplarCity": "蒂华纳" + }, + "Toronto": { + "exemplarCity": "多伦多" + }, + "Tortola": { + "exemplarCity": "托尔托拉" + }, + "Vancouver": { + "exemplarCity": "温哥华" + }, + "Whitehorse": { + "exemplarCity": "怀特霍斯" + }, + "Winnipeg": { + "exemplarCity": "温尼伯" + }, + "Yakutat": { + "exemplarCity": "亚库塔特" + }, + "Yellowknife": { + "exemplarCity": "耶洛奈夫" + } }, - "Douala": { - "exemplarCity": "杜阿拉" + "Atlantic": { + "Azores": { + "exemplarCity": "亚速尔群岛" + }, + "Bermuda": { + "exemplarCity": "百慕大" + }, + "Canary": { + "exemplarCity": "加那利" + }, + "Cape_Verde": { + "exemplarCity": "佛得角" + }, + "Faeroe": { + "exemplarCity": "法罗" + }, + "Madeira": { + "exemplarCity": "马德拉" + }, + "Reykjavik": { + "exemplarCity": "雷克雅未克" + }, + "South_Georgia": { + "exemplarCity": "南乔治亚" + }, + "St_Helena": { + "exemplarCity": "圣赫勒拿" + }, + "Stanley": { + "exemplarCity": "斯坦利" + } }, - "El_Aaiun": { - "exemplarCity": "阿尤恩" - }, - "Freetown": { - "exemplarCity": "弗里敦" - }, - "Gaborone": { - "exemplarCity": "哈博罗内" + "Europe": { + "Amsterdam": { + "exemplarCity": "阿姆斯特丹" + }, + "Andorra": { + "exemplarCity": "安道尔" + }, + "Astrakhan": { + "exemplarCity": "阿斯特拉罕" + }, + "Athens": { + "exemplarCity": "雅典" + }, + "Belgrade": { + "exemplarCity": "贝尔格莱德" + }, + "Berlin": { + "exemplarCity": "柏林" + }, + "Bratislava": { + "exemplarCity": "布拉迪斯拉发" + }, + "Brussels": { + "exemplarCity": "布鲁塞尔" + }, + "Bucharest": { + "exemplarCity": "布加勒斯特" + }, + "Budapest": { + "exemplarCity": "布达佩斯" + }, + "Busingen": { + "exemplarCity": "布辛根" + }, + "Chisinau": { + "exemplarCity": "基希讷乌" + }, + "Copenhagen": { + "exemplarCity": "哥本哈根" + }, + "Dublin": { + "long": { + "daylight": "爱尔兰标准时间" + }, + "exemplarCity": "都柏林" + }, + "Gibraltar": { + "exemplarCity": "直布罗陀" + }, + "Guernsey": { + "exemplarCity": "根西岛" + }, + "Helsinki": { + "exemplarCity": "赫尔辛基" + }, + "Isle_of_Man": { + "exemplarCity": "曼岛" + }, + "Istanbul": { + "exemplarCity": "伊斯坦布尔" + }, + "Jersey": { + "exemplarCity": "泽西岛" + }, + "Kaliningrad": { + "exemplarCity": "加里宁格勒" + }, + "Kiev": { + "exemplarCity": "基辅" + }, + "Kirov": { + "exemplarCity": "基洛夫" + }, + "Lisbon": { + "exemplarCity": "里斯本" + }, + "Ljubljana": { + "exemplarCity": "卢布尔雅那" + }, + "London": { + "long": { + "daylight": "英国夏令时间" + }, + "exemplarCity": "伦敦" + }, + "Luxembourg": { + "exemplarCity": "卢森堡" + }, + "Madrid": { + "exemplarCity": "马德里" + }, + "Malta": { + "exemplarCity": "马耳他" + }, + "Mariehamn": { + "exemplarCity": "玛丽港" + }, + "Minsk": { + "exemplarCity": "明斯克" + }, + "Monaco": { + "exemplarCity": "摩纳哥" + }, + "Moscow": { + "exemplarCity": "莫斯科" + }, + "Oslo": { + "exemplarCity": "奥斯陆" + }, + "Paris": { + "exemplarCity": "巴黎" + }, + "Podgorica": { + "exemplarCity": "波德戈里察" + }, + "Prague": { + "exemplarCity": "布拉格" + }, + "Riga": { + "exemplarCity": "里加" + }, + "Rome": { + "exemplarCity": "罗马" + }, + "Samara": { + "exemplarCity": "萨马拉" + }, + "San_Marino": { + "exemplarCity": "圣马力诺" + }, + "Sarajevo": { + "exemplarCity": "萨拉热窝" + }, + "Simferopol": { + "exemplarCity": "辛菲罗波尔" + }, + "Skopje": { + "exemplarCity": "斯科普里" + }, + "Sofia": { + "exemplarCity": "索非亚" + }, + "Stockholm": { + "exemplarCity": "斯德哥尔摩" + }, + "Tallinn": { + "exemplarCity": "塔林" + }, + "Tirane": { + "exemplarCity": "地拉那" + }, + "Ulyanovsk": { + "exemplarCity": "乌里扬诺夫斯克" + }, + "Uzhgorod": { + "exemplarCity": "乌日哥罗德" + }, + "Vaduz": { + "exemplarCity": "瓦杜兹" + }, + "Vatican": { + "exemplarCity": "梵蒂冈" + }, + "Vienna": { + "exemplarCity": "维也纳" + }, + "Vilnius": { + "exemplarCity": "维尔纽斯" + }, + "Volgograd": { + "exemplarCity": "伏尔加格勒" + }, + "Warsaw": { + "exemplarCity": "华沙" + }, + "Zagreb": { + "exemplarCity": "萨格勒布" + }, + "Zaporozhye": { + "exemplarCity": "扎波罗热" + }, + "Zurich": { + "exemplarCity": "苏黎世" + } }, - "Harare": { - "exemplarCity": "哈拉雷" + "Africa": { + "Abidjan": { + "exemplarCity": "阿比让" + }, + "Accra": { + "exemplarCity": "阿克拉" + }, + "Addis_Ababa": { + "exemplarCity": "亚的斯亚贝巴" + }, + "Algiers": { + "exemplarCity": "阿尔及尔" + }, + "Asmera": { + "exemplarCity": "阿斯马拉" + }, + "Bamako": { + "exemplarCity": "巴马科" + }, + "Bangui": { + "exemplarCity": "班吉" + }, + "Banjul": { + "exemplarCity": "班珠尔" + }, + "Bissau": { + "exemplarCity": "比绍" + }, + "Blantyre": { + "exemplarCity": "布兰太尔" + }, + "Brazzaville": { + "exemplarCity": "布拉柴维尔" + }, + "Bujumbura": { + "exemplarCity": "布琼布拉" + }, + "Cairo": { + "exemplarCity": "开罗" + }, + "Casablanca": { + "exemplarCity": "卡萨布兰卡" + }, + "Ceuta": { + "exemplarCity": "休达" + }, + "Conakry": { + "exemplarCity": "科纳克里" + }, + "Dakar": { + "exemplarCity": "达喀尔" + }, + "Dar_es_Salaam": { + "exemplarCity": "达累斯萨拉姆" + }, + "Djibouti": { + "exemplarCity": "吉布提" + }, + "Douala": { + "exemplarCity": "杜阿拉" + }, + "El_Aaiun": { + "exemplarCity": "阿尤恩" + }, + "Freetown": { + "exemplarCity": "弗里敦" + }, + "Gaborone": { + "exemplarCity": "哈博罗内" + }, + "Harare": { + "exemplarCity": "哈拉雷" + }, + "Johannesburg": { + "exemplarCity": "约翰内斯堡" + }, + "Juba": { + "exemplarCity": "朱巴" + }, + "Kampala": { + "exemplarCity": "坎帕拉" + }, + "Khartoum": { + "exemplarCity": "喀土穆" + }, + "Kigali": { + "exemplarCity": "基加利" + }, + "Kinshasa": { + "exemplarCity": "金沙萨" + }, + "Lagos": { + "exemplarCity": "拉各斯" + }, + "Libreville": { + "exemplarCity": "利伯维尔" + }, + "Lome": { + "exemplarCity": "洛美" + }, + "Luanda": { + "exemplarCity": "罗安达" + }, + "Lubumbashi": { + "exemplarCity": "卢本巴希" + }, + "Lusaka": { + "exemplarCity": "卢萨卡" + }, + "Malabo": { + "exemplarCity": "马拉博" + }, + "Maputo": { + "exemplarCity": "马普托" + }, + "Maseru": { + "exemplarCity": "马塞卢" + }, + "Mbabane": { + "exemplarCity": "姆巴巴纳" + }, + "Mogadishu": { + "exemplarCity": "摩加迪沙" + }, + "Monrovia": { + "exemplarCity": "蒙罗维亚" + }, + "Nairobi": { + "exemplarCity": "内罗毕" + }, + "Ndjamena": { + "exemplarCity": "恩贾梅纳" + }, + "Niamey": { + "exemplarCity": "尼亚美" + }, + "Nouakchott": { + "exemplarCity": "努瓦克肖特" + }, + "Ouagadougou": { + "exemplarCity": "瓦加杜古" + }, + "Porto-Novo": { + "exemplarCity": "波多诺伏" + }, + "Sao_Tome": { + "exemplarCity": "圣多美" + }, + "Tripoli": { + "exemplarCity": "的黎波里" + }, + "Tunis": { + "exemplarCity": "突尼斯" + }, + "Windhoek": { + "exemplarCity": "温得和克" + } }, - "Johannesburg": { - "exemplarCity": "约翰内斯堡" + "Asia": { + "Aden": { + "exemplarCity": "亚丁" + }, + "Almaty": { + "exemplarCity": "阿拉木图" + }, + "Amman": { + "exemplarCity": "安曼" + }, + "Anadyr": { + "exemplarCity": "阿纳德尔" + }, + "Aqtau": { + "exemplarCity": "阿克套" + }, + "Aqtobe": { + "exemplarCity": "阿克托别" + }, + "Ashgabat": { + "exemplarCity": "阿什哈巴德" + }, + "Baghdad": { + "exemplarCity": "巴格达" + }, + "Bahrain": { + "exemplarCity": "巴林" + }, + "Baku": { + "exemplarCity": "巴库" + }, + "Bangkok": { + "exemplarCity": "曼谷" + }, + "Barnaul": { + "exemplarCity": "巴尔瑙尔" + }, + "Beirut": { + "exemplarCity": "贝鲁特" + }, + "Bishkek": { + "exemplarCity": "比什凯克" + }, + "Brunei": { + "exemplarCity": "文莱" + }, + "Calcutta": { + "exemplarCity": "加尔各答" + }, + "Chita": { + "exemplarCity": "赤塔" + }, + "Choibalsan": { + "exemplarCity": "乔巴山" + }, + "Colombo": { + "exemplarCity": "科伦坡" + }, + "Damascus": { + "exemplarCity": "大马士革" + }, + "Dhaka": { + "exemplarCity": "达卡" + }, + "Dili": { + "exemplarCity": "帝力" + }, + "Dubai": { + "exemplarCity": "迪拜" + }, + "Dushanbe": { + "exemplarCity": "杜尚别" + }, + "Gaza": { + "exemplarCity": "加沙" + }, + "Hebron": { + "exemplarCity": "希伯伦" + }, + "Hong_Kong": { + "exemplarCity": "香港" + }, + "Hovd": { + "exemplarCity": "科布多" + }, + "Irkutsk": { + "exemplarCity": "伊尔库茨克" + }, + "Jakarta": { + "exemplarCity": "雅加达" + }, + "Jayapura": { + "exemplarCity": "查亚普拉" + }, + "Jerusalem": { + "exemplarCity": "耶路撒冷" + }, + "Kabul": { + "exemplarCity": "喀布尔" + }, + "Kamchatka": { + "exemplarCity": "堪察加" + }, + "Karachi": { + "exemplarCity": "卡拉奇" + }, + "Katmandu": { + "exemplarCity": "加德满都" + }, + "Khandyga": { + "exemplarCity": "汉德加" + }, + "Krasnoyarsk": { + "exemplarCity": "克拉斯诺亚尔斯克" + }, + "Kuala_Lumpur": { + "exemplarCity": "吉隆坡" + }, + "Kuching": { + "exemplarCity": "古晋" + }, + "Kuwait": { + "exemplarCity": "科威特" + }, + "Macau": { + "exemplarCity": "澳门" + }, + "Magadan": { + "exemplarCity": "马加丹" + }, + "Makassar": { + "exemplarCity": "望加锡" + }, + "Manila": { + "exemplarCity": "马尼拉" + }, + "Muscat": { + "exemplarCity": "马斯喀特" + }, + "Nicosia": { + "exemplarCity": "尼科西亚" + }, + "Novokuznetsk": { + "exemplarCity": "新库兹涅茨克" + }, + "Novosibirsk": { + "exemplarCity": "诺沃西比尔斯克" + }, + "Omsk": { + "exemplarCity": "鄂木斯克" + }, + "Oral": { + "exemplarCity": "乌拉尔" + }, + "Phnom_Penh": { + "exemplarCity": "金边" + }, + "Pontianak": { + "exemplarCity": "坤甸" + }, + "Pyongyang": { + "exemplarCity": "平壤" + }, + "Qatar": { + "exemplarCity": "卡塔尔" + }, + "Qyzylorda": { + "exemplarCity": "克孜洛尔达" + }, + "Rangoon": { + "exemplarCity": "仰光" + }, + "Riyadh": { + "exemplarCity": "利雅得" + }, + "Saigon": { + "exemplarCity": "胡志明市" + }, + "Sakhalin": { + "exemplarCity": "萨哈林" + }, + "Samarkand": { + "exemplarCity": "撒马尔罕" + }, + "Seoul": { + "exemplarCity": "首尔" + }, + "Shanghai": { + "exemplarCity": "上海" + }, + "Singapore": { + "exemplarCity": "新加坡" + }, + "Srednekolymsk": { + "exemplarCity": "中科雷姆斯克" + }, + "Taipei": { + "exemplarCity": "台北" + }, + "Tashkent": { + "exemplarCity": "塔什干" + }, + "Tbilisi": { + "exemplarCity": "第比利斯" + }, + "Tehran": { + "exemplarCity": "德黑兰" + }, + "Thimphu": { + "exemplarCity": "廷布" + }, + "Tokyo": { + "exemplarCity": "东京" + }, + "Tomsk": { + "exemplarCity": "托木斯克" + }, + "Ulaanbaatar": { + "exemplarCity": "乌兰巴托" + }, + "Urumqi": { + "exemplarCity": "乌鲁木齐" + }, + "Ust-Nera": { + "exemplarCity": "乌斯内拉" + }, + "Vientiane": { + "exemplarCity": "万象" + }, + "Vladivostok": { + "exemplarCity": "符拉迪沃斯托克" + }, + "Yakutsk": { + "exemplarCity": "雅库茨克" + }, + "Yekaterinburg": { + "exemplarCity": "叶卡捷琳堡" + }, + "Yerevan": { + "exemplarCity": "埃里温" + } }, - "Juba": { - "exemplarCity": "朱巴" + "Indian": { + "Antananarivo": { + "exemplarCity": "安塔那那利佛" + }, + "Chagos": { + "exemplarCity": "查戈斯" + }, + "Christmas": { + "exemplarCity": "圣诞岛" + }, + "Cocos": { + "exemplarCity": "可可斯" + }, + "Comoro": { + "exemplarCity": "科摩罗" + }, + "Kerguelen": { + "exemplarCity": "凯尔盖朗" + }, + "Mahe": { + "exemplarCity": "马埃岛" + }, + "Maldives": { + "exemplarCity": "马尔代夫" + }, + "Mauritius": { + "exemplarCity": "毛里求斯" + }, + "Mayotte": { + "exemplarCity": "马约特" + }, + "Reunion": { + "exemplarCity": "留尼汪" + } }, - "Kampala": { - "exemplarCity": "坎帕拉" + "Australia": { + "Adelaide": { + "exemplarCity": "阿德莱德" + }, + "Brisbane": { + "exemplarCity": "布里斯班" + }, + "Broken_Hill": { + "exemplarCity": "布罗肯希尔" + }, + "Currie": { + "exemplarCity": "库利" + }, + "Darwin": { + "exemplarCity": "达尔文" + }, + "Eucla": { + "exemplarCity": "尤克拉" + }, + "Hobart": { + "exemplarCity": "霍巴特" + }, + "Lindeman": { + "exemplarCity": "林德曼" + }, + "Lord_Howe": { + "exemplarCity": "豪勋爵" + }, + "Melbourne": { + "exemplarCity": "墨尔本" + }, + "Perth": { + "exemplarCity": "珀斯" + }, + "Sydney": { + "exemplarCity": "悉尼" + } }, - "Khartoum": { - "exemplarCity": "喀土穆" + "Pacific": { + "Apia": { + "exemplarCity": "阿皮亚" + }, + "Auckland": { + "exemplarCity": "奥克兰" + }, + "Bougainville": { + "exemplarCity": "布干维尔" + }, + "Chatham": { + "exemplarCity": "查塔姆" + }, + "Easter": { + "exemplarCity": "复活节岛" + }, + "Efate": { + "exemplarCity": "埃法特" + }, + "Enderbury": { + "exemplarCity": "恩德伯里" + }, + "Fakaofo": { + "exemplarCity": "法考福" + }, + "Fiji": { + "exemplarCity": "斐济" + }, + "Funafuti": { + "exemplarCity": "富纳富提" + }, + "Galapagos": { + "exemplarCity": "加拉帕戈斯" + }, + "Gambier": { + "exemplarCity": "甘比尔" + }, + "Guadalcanal": { + "exemplarCity": "瓜达尔卡纳尔" + }, + "Guam": { + "exemplarCity": "关岛" + }, + "Honolulu": { + "exemplarCity": "檀香山" + }, + "Johnston": { + "exemplarCity": "约翰斯顿" + }, + "Kiritimati": { + "exemplarCity": "基里地马地岛" + }, + "Kosrae": { + "exemplarCity": "库赛埃" + }, + "Kwajalein": { + "exemplarCity": "夸贾林" + }, + "Majuro": { + "exemplarCity": "马朱罗" + }, + "Marquesas": { + "exemplarCity": "马克萨斯" + }, + "Midway": { + "exemplarCity": "中途岛" + }, + "Nauru": { + "exemplarCity": "瑙鲁" + }, + "Niue": { + "exemplarCity": "纽埃" + }, + "Norfolk": { + "exemplarCity": "诺福克" + }, + "Noumea": { + "exemplarCity": "努美阿" + }, + "Pago_Pago": { + "exemplarCity": "帕果帕果" + }, + "Palau": { + "exemplarCity": "帕劳" + }, + "Pitcairn": { + "exemplarCity": "皮特凯恩" + }, + "Ponape": { + "exemplarCity": "波纳佩岛" + }, + "Port_Moresby": { + "exemplarCity": "莫尔兹比港" + }, + "Rarotonga": { + "exemplarCity": "拉罗汤加" + }, + "Saipan": { + "exemplarCity": "塞班" + }, + "Tahiti": { + "exemplarCity": "塔希提" + }, + "Tarawa": { + "exemplarCity": "塔拉瓦" + }, + "Tongatapu": { + "exemplarCity": "东加塔布" + }, + "Truk": { + "exemplarCity": "特鲁克群岛" + }, + "Wake": { + "exemplarCity": "威克" + }, + "Wallis": { + "exemplarCity": "瓦利斯" + } }, - "Kigali": { - "exemplarCity": "基加利" + "Arctic": { + "Longyearbyen": { + "exemplarCity": "朗伊尔城" + } }, - "Kinshasa": { - "exemplarCity": "金沙萨" - }, - "Lagos": { - "exemplarCity": "拉各斯" - }, - "Libreville": { - "exemplarCity": "利伯维尔" - }, - "Lome": { - "exemplarCity": "洛美" + "Antarctica": { + "Casey": { + "exemplarCity": "卡塞" + }, + "Davis": { + "exemplarCity": "戴维斯" + }, + "DumontDUrville": { + "exemplarCity": "迪蒙迪尔维尔" + }, + "Macquarie": { + "exemplarCity": "麦格理" + }, + "Mawson": { + "exemplarCity": "莫森" + }, + "McMurdo": { + "exemplarCity": "麦克默多" + }, + "Palmer": { + "exemplarCity": "帕默尔" + }, + "Rothera": { + "exemplarCity": "罗瑟拉" + }, + "Syowa": { + "exemplarCity": "昭和" + }, + "Troll": { + "exemplarCity": "特罗尔" + }, + "Vostok": { + "exemplarCity": "沃斯托克" + } }, - "Luanda": { - "exemplarCity": "罗安达" + "Etc": { + "GMT": { + "exemplarCity": "GMT" + }, + "GMT1": { + "exemplarCity": "GMT+1" + }, + "GMT10": { + "exemplarCity": "GMT+10" + }, + "GMT11": { + "exemplarCity": "GMT+11" + }, + "GMT12": { + "exemplarCity": "GMT+12" + }, + "GMT2": { + "exemplarCity": "GMT+2" + }, + "GMT3": { + "exemplarCity": "GMT+3" + }, + "GMT4": { + "exemplarCity": "GMT+4" + }, + "GMT5": { + "exemplarCity": "GMT+5" + }, + "GMT6": { + "exemplarCity": "GMT+6" + }, + "GMT7": { + "exemplarCity": "GMT+7" + }, + "GMT8": { + "exemplarCity": "GMT+8" + }, + "GMT9": { + "exemplarCity": "GMT+9" + }, + "GMT-1": { + "exemplarCity": "GMT-1" + }, + "GMT-10": { + "exemplarCity": "GMT-10" + }, + "GMT-11": { + "exemplarCity": "GMT-11" + }, + "GMT-12": { + "exemplarCity": "GMT-12" + }, + "GMT-13": { + "exemplarCity": "GMT-13" + }, + "GMT-14": { + "exemplarCity": "GMT-14" + }, + "GMT-2": { + "exemplarCity": "GMT-2" + }, + "GMT-3": { + "exemplarCity": "GMT-3" + }, + "GMT-4": { + "exemplarCity": "GMT-4" + }, + "GMT-5": { + "exemplarCity": "GMT-5" + }, + "GMT-6": { + "exemplarCity": "GMT-6" + }, + "GMT-7": { + "exemplarCity": "GMT-7" + }, + "GMT-8": { + "exemplarCity": "GMT-8" + }, + "GMT-9": { + "exemplarCity": "GMT-9" + }, + "Unknown": { + "exemplarCity": "未知城市" + } + } + }, + "metazone": { + "Acre": { + "long": { + "generic": "阿克里时间", + "standard": "阿克里标准时间", + "daylight": "阿克里夏令时间" + } }, - "Lubumbashi": { - "exemplarCity": "卢本巴希" + "Afghanistan": { + "long": { + "standard": "阿富汗时间" + } }, - "Lusaka": { - "exemplarCity": "卢萨卡" + "Africa_Central": { + "long": { + "standard": "中部非洲时间" + } }, - "Malabo": { - "exemplarCity": "马拉博" + "Africa_Eastern": { + "long": { + "standard": "东部非洲时间" + } }, - "Maputo": { - "exemplarCity": "马普托" + "Africa_Southern": { + "long": { + "standard": "南部非洲时间" + } }, - "Maseru": { - "exemplarCity": "马塞卢" + "Africa_Western": { + "long": { + "generic": "西部非洲时间", + "standard": "西部非洲标准时间", + "daylight": "西部非洲夏令时间" + } }, - "Mbabane": { - "exemplarCity": "姆巴巴纳" + "Alaska": { + "long": { + "generic": "阿拉斯加时间", + "standard": "阿拉斯加标准时间", + "daylight": "阿拉斯加夏令时间" + } }, - "Mogadishu": { - "exemplarCity": "摩加迪沙" + "Almaty": { + "long": { + "generic": "阿拉木图时间", + "standard": "阿拉木图标准时间", + "daylight": "阿拉木图夏令时间" + } }, - "Monrovia": { - "exemplarCity": "蒙罗维亚" + "Amazon": { + "long": { + "generic": "亚马逊时间", + "standard": "亚马逊标准时间", + "daylight": "亚马逊夏令时间" + } }, - "Nairobi": { - "exemplarCity": "内罗毕" + "America_Central": { + "long": { + "generic": "北美中部时间", + "standard": "北美中部标准时间", + "daylight": "北美中部夏令时间" + } }, - "Ndjamena": { - "exemplarCity": "恩贾梅纳" + "America_Eastern": { + "long": { + "generic": "北美东部时间", + "standard": "北美东部标准时间", + "daylight": "北美东部夏令时间" + } }, - "Niamey": { - "exemplarCity": "尼亚美" + "America_Mountain": { + "long": { + "generic": "北美山区时间", + "standard": "北美山区标准时间", + "daylight": "北美山区夏令时间" + } }, - "Nouakchott": { - "exemplarCity": "努瓦克肖特" + "America_Pacific": { + "long": { + "generic": "北美太平洋时间", + "standard": "北美太平洋标准时间", + "daylight": "北美太平洋夏令时间" + } }, - "Ouagadougou": { - "exemplarCity": "瓦加杜古" + "Anadyr": { + "long": { + "generic": "阿纳德尔时间", + "standard": "阿纳德尔标准时间", + "daylight": "阿纳德尔夏令时间" + } }, - "Porto-Novo": { - "exemplarCity": "波多诺伏" + "Apia": { + "long": { + "generic": "阿皮亚时间", + "standard": "阿皮亚标准时间", + "daylight": "阿皮亚夏令时间" + } }, - "Sao_Tome": { - "exemplarCity": "圣多美" + "Aqtau": { + "long": { + "generic": "阿克套时间", + "standard": "阿克套标准时间", + "daylight": "阿克套夏令时间" + } }, - "Tripoli": { - "exemplarCity": "的黎波里" + "Aqtobe": { + "long": { + "generic": "阿克托别时间", + "standard": "阿克托别标准时间", + "daylight": "阿克托别夏令时间" + } }, - "Tunis": { - "exemplarCity": "突尼斯" + "Arabian": { + "long": { + "generic": "阿拉伯时间", + "standard": "阿拉伯标准时间", + "daylight": "阿拉伯夏令时间" + } }, - "Windhoek": { - "exemplarCity": "温得和克" - } - }, - "Asia": { - "Aden": { - "exemplarCity": "亚丁" + "Argentina": { + "long": { + "generic": "阿根廷时间", + "standard": "阿根廷标准时间", + "daylight": "阿根廷夏令时间" + } }, - "Almaty": { - "exemplarCity": "阿拉木图" + "Argentina_Western": { + "long": { + "generic": "阿根廷西部时间", + "standard": "阿根廷西部标准时间", + "daylight": "阿根廷西部夏令时间" + } }, - "Amman": { - "exemplarCity": "安曼" + "Armenia": { + "long": { + "generic": "亚美尼亚时间", + "standard": "亚美尼亚标准时间", + "daylight": "亚美尼亚夏令时间" + } }, - "Anadyr": { - "exemplarCity": "阿纳德尔" + "Atlantic": { + "long": { + "generic": "大西洋时间", + "standard": "大西洋标准时间", + "daylight": "大西洋夏令时间" + } }, - "Aqtau": { - "exemplarCity": "阿克套" + "Australia_Central": { + "long": { + "generic": "澳大利亚中部时间", + "standard": "澳大利亚中部标准时间", + "daylight": "澳大利亚中部夏令时间" + } }, - "Aqtobe": { - "exemplarCity": "阿克托别" + "Australia_CentralWestern": { + "long": { + "generic": "澳大利亚中西部时间", + "standard": "澳大利亚中西部标准时间", + "daylight": "澳大利亚中西部夏令时间" + } }, - "Ashgabat": { - "exemplarCity": "阿什哈巴德" + "Australia_Eastern": { + "long": { + "generic": "澳大利亚东部时间", + "standard": "澳大利亚东部标准时间", + "daylight": "澳大利亚东部夏令时间" + } }, - "Baghdad": { - "exemplarCity": "巴格达" + "Australia_Western": { + "long": { + "generic": "澳大利亚西部时间", + "standard": "澳大利亚西部标准时间", + "daylight": "澳大利亚西部夏令时间" + } }, - "Bahrain": { - "exemplarCity": "巴林" + "Azerbaijan": { + "long": { + "generic": "阿塞拜疆时间", + "standard": "阿塞拜疆标准时间", + "daylight": "阿塞拜疆夏令时间" + } }, - "Baku": { - "exemplarCity": "巴库" + "Azores": { + "long": { + "generic": "亚速尔群岛时间", + "standard": "亚速尔群岛标准时间", + "daylight": "亚速尔群岛夏令时间" + } }, - "Bangkok": { - "exemplarCity": "曼谷" + "Bangladesh": { + "long": { + "generic": "孟加拉时间", + "standard": "孟加拉标准时间", + "daylight": "孟加拉夏令时间" + } }, - "Barnaul": { - "exemplarCity": "巴尔瑙尔" + "Bhutan": { + "long": { + "standard": "不丹时间" + } }, - "Beirut": { - "exemplarCity": "贝鲁特" + "Bolivia": { + "long": { + "standard": "玻利维亚标准时间" + } }, - "Bishkek": { - "exemplarCity": "比什凯克" + "Brasilia": { + "long": { + "generic": "巴西利亚时间", + "standard": "巴西利亚标准时间", + "daylight": "巴西利亚夏令时间" + } }, "Brunei": { - "exemplarCity": "文莱" + "long": { + "standard": "文莱达鲁萨兰时间" + } }, - "Calcutta": { - "exemplarCity": "加尔各答" + "Cape_Verde": { + "long": { + "generic": "佛得角时间", + "standard": "佛得角标准时间", + "daylight": "佛得角夏令时间" + } }, - "Chita": { - "exemplarCity": "赤塔" + "Casey": { + "long": { + "standard": "凯西时间" + } }, - "Choibalsan": { - "exemplarCity": "乔巴山" + "Chamorro": { + "long": { + "standard": "查莫罗时间" + } }, - "Colombo": { - "exemplarCity": "科伦坡" + "Chatham": { + "long": { + "generic": "查坦时间", + "standard": "查坦标准时间", + "daylight": "查坦夏令时间" + } }, - "Damascus": { - "exemplarCity": "大马士革" + "Chile": { + "long": { + "generic": "智利时间", + "standard": "智利标准时间", + "daylight": "智利夏令时间" + } }, - "Dhaka": { - "exemplarCity": "达卡" + "China": { + "long": { + "generic": "中国时间", + "standard": "中国标准时间", + "daylight": "中国夏令时间" + } }, - "Dili": { - "exemplarCity": "帝力" + "Choibalsan": { + "long": { + "generic": "乔巴山时间", + "standard": "乔巴山标准时间", + "daylight": "乔巴山夏令时间" + } }, - "Dubai": { - "exemplarCity": "迪拜" + "Christmas": { + "long": { + "standard": "圣诞岛时间" + } }, - "Dushanbe": { - "exemplarCity": "杜尚别" + "Cocos": { + "long": { + "standard": "科科斯群岛时间" + } }, - "Gaza": { - "exemplarCity": "加沙" + "Colombia": { + "long": { + "generic": "哥伦比亚时间", + "standard": "哥伦比亚标准时间", + "daylight": "哥伦比亚夏令时间" + } }, - "Hebron": { - "exemplarCity": "希伯伦" + "Cook": { + "long": { + "generic": "库克群岛时间", + "standard": "库克群岛标准时间", + "daylight": "库克群岛仲夏时间" + } }, - "Hong_Kong": { - "exemplarCity": "香港" + "Cuba": { + "long": { + "generic": "古巴时间", + "standard": "古巴标准时间", + "daylight": "古巴夏令时间" + } }, - "Hovd": { - "exemplarCity": "科布多" + "Davis": { + "long": { + "standard": "戴维斯时间" + } }, - "Irkutsk": { - "exemplarCity": "伊尔库茨克" + "DumontDUrville": { + "long": { + "standard": "迪蒙迪尔维尔时间" + } }, - "Jakarta": { - "exemplarCity": "雅加达" + "East_Timor": { + "long": { + "standard": "东帝汶时间" + } }, - "Jayapura": { - "exemplarCity": "查亚普拉" + "Easter": { + "long": { + "generic": "复活节岛时间", + "standard": "复活节岛标准时间", + "daylight": "复活节岛夏令时间" + } }, - "Jerusalem": { - "exemplarCity": "耶路撒冷" + "Ecuador": { + "long": { + "standard": "厄瓜多尔标准时间" + } }, - "Kabul": { - "exemplarCity": "喀布尔" + "Europe_Central": { + "long": { + "generic": "中欧时间", + "standard": "中欧标准时间", + "daylight": "中欧夏令时间" + } }, - "Kamchatka": { - "exemplarCity": "堪察加" + "Europe_Eastern": { + "long": { + "generic": "东欧时间", + "standard": "东欧标准时间", + "daylight": "东欧夏令时间" + } }, - "Karachi": { - "exemplarCity": "卡拉奇" + "Europe_Further_Eastern": { + "long": { + "standard": "远东标准时间" + } }, - "Katmandu": { - "exemplarCity": "加德满都" + "Europe_Western": { + "long": { + "generic": "西欧时间", + "standard": "西欧标准时间", + "daylight": "西欧夏令时间" + } }, - "Khandyga": { - "exemplarCity": "汉德加" + "Falkland": { + "long": { + "generic": "福克兰群岛时间", + "standard": "福克兰群岛标准时间", + "daylight": "福克兰群岛夏令时间" + } }, - "Krasnoyarsk": { - "exemplarCity": "克拉斯诺亚尔斯克" + "Fiji": { + "long": { + "generic": "斐济时间", + "standard": "斐济标准时间", + "daylight": "斐济夏令时间" + } }, - "Kuala_Lumpur": { - "exemplarCity": "吉隆坡" + "French_Guiana": { + "long": { + "standard": "法属圭亚那标准时间" + } }, - "Kuching": { - "exemplarCity": "古晋" + "French_Southern": { + "long": { + "standard": "法属南方和南极领地时间" + } }, - "Kuwait": { - "exemplarCity": "科威特" + "Galapagos": { + "long": { + "standard": "加拉帕戈斯时间" + } }, - "Macau": { - "exemplarCity": "澳门" + "Gambier": { + "long": { + "standard": "甘比尔时间" + } }, - "Magadan": { - "exemplarCity": "马加丹" + "Georgia": { + "long": { + "generic": "格鲁吉亚时间", + "standard": "格鲁吉亚标准时间", + "daylight": "格鲁吉亚夏令时间" + } }, - "Makassar": { - "exemplarCity": "望加锡" + "Gilbert_Islands": { + "long": { + "standard": "吉尔伯特群岛时间" + } }, - "Manila": { - "exemplarCity": "马尼拉" + "GMT": { + "long": { + "standard": "格林尼治标准时间" + } }, - "Muscat": { - "exemplarCity": "马斯喀特" + "Greenland_Eastern": { + "long": { + "generic": "格陵兰岛东部时间", + "standard": "格陵兰岛东部标准时间", + "daylight": "格陵兰岛东部夏令时间" + } }, - "Nicosia": { - "exemplarCity": "尼科西亚" + "Greenland_Western": { + "long": { + "generic": "格陵兰岛西部时间", + "standard": "格陵兰岛西部标准时间", + "daylight": "格陵兰岛西部夏令时间" + } }, - "Novokuznetsk": { - "exemplarCity": "新库兹涅茨克" + "Guam": { + "long": { + "standard": "关岛时间" + } }, - "Novosibirsk": { - "exemplarCity": "诺沃西比尔斯克" + "Gulf": { + "long": { + "standard": "海湾标准时间" + } }, - "Omsk": { - "exemplarCity": "鄂木斯克" + "Guyana": { + "long": { + "standard": "圭亚那时间" + } }, - "Oral": { - "exemplarCity": "乌拉尔" + "Hawaii_Aleutian": { + "long": { + "generic": "夏威夷-阿留申时间", + "standard": "夏威夷-阿留申标准时间", + "daylight": "夏威夷-阿留申夏令时间" + } }, - "Phnom_Penh": { - "exemplarCity": "金边" + "Hong_Kong": { + "long": { + "generic": "香港时间", + "standard": "香港标准时间", + "daylight": "香港夏令时间" + } }, - "Pontianak": { - "exemplarCity": "坤甸" + "Hovd": { + "long": { + "generic": "科布多时间", + "standard": "科布多标准时间", + "daylight": "科布多夏令时间" + } }, - "Pyongyang": { - "exemplarCity": "平壤" + "India": { + "long": { + "standard": "印度时间" + } }, - "Qatar": { - "exemplarCity": "卡塔尔" + "Indian_Ocean": { + "long": { + "standard": "印度洋时间" + } }, - "Qyzylorda": { - "exemplarCity": "克孜洛尔达" + "Indochina": { + "long": { + "standard": "印度支那时间" + } }, - "Rangoon": { - "exemplarCity": "仰光" + "Indonesia_Central": { + "long": { + "standard": "印度尼西亚中部时间" + } }, - "Riyadh": { - "exemplarCity": "利雅得" + "Indonesia_Eastern": { + "long": { + "standard": "印度尼西亚东部时间" + } }, - "Saigon": { - "exemplarCity": "胡志明市" + "Indonesia_Western": { + "long": { + "standard": "印度尼西亚西部时间" + } }, - "Sakhalin": { - "exemplarCity": "萨哈林" + "Iran": { + "long": { + "generic": "伊朗时间", + "standard": "伊朗标准时间", + "daylight": "伊朗夏令时间" + } }, - "Samarkand": { - "exemplarCity": "撒马尔罕" + "Irkutsk": { + "long": { + "generic": "伊尔库茨克时间", + "standard": "伊尔库茨克标准时间", + "daylight": "伊尔库茨克夏令时间" + } }, - "Seoul": { - "exemplarCity": "首尔" + "Israel": { + "long": { + "generic": "以色列时间", + "standard": "以色列标准时间", + "daylight": "以色列夏令时间" + } }, - "Shanghai": { - "exemplarCity": "上海" + "Japan": { + "long": { + "generic": "日本时间", + "standard": "日本标准时间", + "daylight": "日本夏令时间" + } }, - "Singapore": { - "exemplarCity": "新加坡" + "Kamchatka": { + "long": { + "generic": "彼得罗巴甫洛夫斯克-堪察加时间", + "standard": "彼得罗巴甫洛夫斯克-堪察加标准时间", + "daylight": "彼得罗巴甫洛夫斯克-堪察加夏令时间" + } }, - "Srednekolymsk": { - "exemplarCity": "中科雷姆斯克" + "Kazakhstan_Eastern": { + "long": { + "standard": "哈萨克斯坦东部时间" + } }, - "Taipei": { - "exemplarCity": "台北" - }, - "Tashkent": { - "exemplarCity": "塔什干" - }, - "Tbilisi": { - "exemplarCity": "第比利斯" - }, - "Tehran": { - "exemplarCity": "德黑兰" - }, - "Thimphu": { - "exemplarCity": "廷布" - }, - "Tokyo": { - "exemplarCity": "东京" - }, - "Tomsk": { - "exemplarCity": "托木斯克" - }, - "Ulaanbaatar": { - "exemplarCity": "乌兰巴托" - }, - "Urumqi": { - "exemplarCity": "乌鲁木齐" - }, - "Ust-Nera": { - "exemplarCity": "乌斯内拉" - }, - "Vientiane": { - "exemplarCity": "万象" - }, - "Vladivostok": { - "exemplarCity": "符拉迪沃斯托克" - }, - "Yakutsk": { - "exemplarCity": "雅库茨克" - }, - "Yekaterinburg": { - "exemplarCity": "叶卡捷琳堡" - }, - "Yerevan": { - "exemplarCity": "埃里温" - } - }, - "Indian": { - "Antananarivo": { - "exemplarCity": "安塔那那利佛" - }, - "Chagos": { - "exemplarCity": "查戈斯" - }, - "Christmas": { - "exemplarCity": "圣诞岛" - }, - "Cocos": { - "exemplarCity": "可可斯" - }, - "Comoro": { - "exemplarCity": "科摩罗" - }, - "Kerguelen": { - "exemplarCity": "凯尔盖朗" - }, - "Mahe": { - "exemplarCity": "马埃岛" - }, - "Maldives": { - "exemplarCity": "马尔代夫" - }, - "Mauritius": { - "exemplarCity": "毛里求斯" - }, - "Mayotte": { - "exemplarCity": "马约特" - }, - "Reunion": { - "exemplarCity": "留尼汪" - } - }, - "Australia": { - "Adelaide": { - "exemplarCity": "阿德莱德" - }, - "Brisbane": { - "exemplarCity": "布里斯班" - }, - "Broken_Hill": { - "exemplarCity": "布罗肯希尔" - }, - "Currie": { - "exemplarCity": "库利" - }, - "Darwin": { - "exemplarCity": "达尔文" - }, - "Eucla": { - "exemplarCity": "尤克拉" - }, - "Hobart": { - "exemplarCity": "霍巴特" - }, - "Lindeman": { - "exemplarCity": "林德曼" - }, - "Lord_Howe": { - "exemplarCity": "豪勋爵" - }, - "Melbourne": { - "exemplarCity": "墨尔本" - }, - "Perth": { - "exemplarCity": "珀斯" - }, - "Sydney": { - "exemplarCity": "悉尼" - } - }, - "Pacific": { - "Apia": { - "exemplarCity": "阿皮亚" - }, - "Auckland": { - "exemplarCity": "奥克兰" - }, - "Bougainville": { - "exemplarCity": "布干维尔" - }, - "Chatham": { - "exemplarCity": "查塔姆" - }, - "Easter": { - "exemplarCity": "复活节岛" - }, - "Efate": { - "exemplarCity": "埃法特" - }, - "Enderbury": { - "exemplarCity": "恩德伯里" - }, - "Fakaofo": { - "exemplarCity": "法考福" - }, - "Fiji": { - "exemplarCity": "斐济" - }, - "Funafuti": { - "exemplarCity": "富纳富提" - }, - "Galapagos": { - "exemplarCity": "加拉帕戈斯" - }, - "Gambier": { - "exemplarCity": "甘比尔" - }, - "Guadalcanal": { - "exemplarCity": "瓜达尔卡纳尔" - }, - "Guam": { - "exemplarCity": "关岛" - }, - "Honolulu": { - "exemplarCity": "檀香山" - }, - "Johnston": { - "exemplarCity": "约翰斯顿" + "Kazakhstan_Western": { + "long": { + "standard": "哈萨克斯坦西部时间" + } }, - "Kiritimati": { - "exemplarCity": "基里地马地岛" + "Korea": { + "long": { + "generic": "韩国时间", + "standard": "韩国标准时间", + "daylight": "韩国夏令时间" + } }, "Kosrae": { - "exemplarCity": "库赛埃" - }, - "Kwajalein": { - "exemplarCity": "夸贾林" - }, - "Majuro": { - "exemplarCity": "马朱罗" - }, - "Marquesas": { - "exemplarCity": "马克萨斯" - }, - "Midway": { - "exemplarCity": "中途岛" - }, - "Nauru": { - "exemplarCity": "瑙鲁" - }, - "Niue": { - "exemplarCity": "纽埃" - }, - "Norfolk": { - "exemplarCity": "诺福克" - }, - "Noumea": { - "exemplarCity": "努美阿" - }, - "Pago_Pago": { - "exemplarCity": "帕果帕果" - }, - "Palau": { - "exemplarCity": "帕劳" - }, - "Pitcairn": { - "exemplarCity": "皮特凯恩" - }, - "Ponape": { - "exemplarCity": "波纳佩岛" - }, - "Port_Moresby": { - "exemplarCity": "莫尔兹比港" - }, - "Rarotonga": { - "exemplarCity": "拉罗汤加" - }, - "Saipan": { - "exemplarCity": "塞班" - }, - "Tahiti": { - "exemplarCity": "塔希提" - }, - "Tarawa": { - "exemplarCity": "塔拉瓦" + "long": { + "standard": "科斯雷时间" + } }, - "Tongatapu": { - "exemplarCity": "东加塔布" + "Krasnoyarsk": { + "long": { + "generic": "克拉斯诺亚尔斯克时间", + "standard": "克拉斯诺亚尔斯克标准时间", + "daylight": "克拉斯诺亚尔斯克夏令时间" + } }, - "Truk": { - "exemplarCity": "特鲁克群岛" + "Kyrgystan": { + "long": { + "standard": "吉尔吉斯斯坦时间" + } }, - "Wake": { - "exemplarCity": "威克" + "Lanka": { + "long": { + "standard": "兰卡时间" + } }, - "Wallis": { - "exemplarCity": "瓦利斯" - } - }, - "Arctic": { - "Longyearbyen": { - "exemplarCity": "朗伊尔城" - } - }, - "Antarctica": { - "Casey": { - "exemplarCity": "卡塞" + "Line_Islands": { + "long": { + "standard": "莱恩群岛时间" + } }, - "Davis": { - "exemplarCity": "戴维斯" + "Lord_Howe": { + "long": { + "generic": "豪勋爵岛时间", + "standard": "豪勋爵岛标准时间", + "daylight": "豪勋爵岛夏令时间" + } }, - "DumontDUrville": { - "exemplarCity": "迪蒙迪尔维尔" + "Macau": { + "long": { + "generic": "澳门时间", + "standard": "澳门标准时间", + "daylight": "澳门夏令时间" + } }, "Macquarie": { - "exemplarCity": "麦格理" - }, - "Mawson": { - "exemplarCity": "莫森" - }, - "McMurdo": { - "exemplarCity": "麦克默多" - }, - "Palmer": { - "exemplarCity": "帕默尔" - }, - "Rothera": { - "exemplarCity": "罗瑟拉" - }, - "Syowa": { - "exemplarCity": "昭和" - }, - "Troll": { - "exemplarCity": "特罗尔" - }, - "Vostok": { - "exemplarCity": "沃斯托克" - } - }, - "Etc": { - "GMT": { - "exemplarCity": "GMT" - }, - "GMT1": { - "exemplarCity": "GMT+1" - }, - "GMT10": { - "exemplarCity": "GMT+10" - }, - "GMT11": { - "exemplarCity": "GMT+11" - }, - "GMT12": { - "exemplarCity": "GMT+12" - }, - "GMT2": { - "exemplarCity": "GMT+2" - }, - "GMT3": { - "exemplarCity": "GMT+3" - }, - "GMT4": { - "exemplarCity": "GMT+4" - }, - "GMT5": { - "exemplarCity": "GMT+5" - }, - "GMT6": { - "exemplarCity": "GMT+6" - }, - "GMT7": { - "exemplarCity": "GMT+7" - }, - "GMT8": { - "exemplarCity": "GMT+8" - }, - "GMT9": { - "exemplarCity": "GMT+9" - }, - "GMT-1": { - "exemplarCity": "GMT-1" - }, - "GMT-10": { - "exemplarCity": "GMT-10" - }, - "GMT-11": { - "exemplarCity": "GMT-11" - }, - "GMT-12": { - "exemplarCity": "GMT-12" - }, - "GMT-13": { - "exemplarCity": "GMT-13" - }, - "GMT-14": { - "exemplarCity": "GMT-14" - }, - "GMT-2": { - "exemplarCity": "GMT-2" - }, - "GMT-3": { - "exemplarCity": "GMT-3" - }, - "GMT-4": { - "exemplarCity": "GMT-4" - }, - "GMT-5": { - "exemplarCity": "GMT-5" - }, - "GMT-6": { - "exemplarCity": "GMT-6" - }, - "GMT-7": { - "exemplarCity": "GMT-7" - }, - "GMT-8": { - "exemplarCity": "GMT-8" - }, - "GMT-9": { - "exemplarCity": "GMT-9" + "long": { + "standard": "麦夸里岛时间" + } }, - "Unknown": { - "exemplarCity": "未知城市" - } - } - }, - "metazone": { - "Acre": { - "long": { - "generic": "阿克里时间", - "standard": "阿克里标准时间", - "daylight": "阿克里夏令时间" - } - }, - "Afghanistan": { - "long": { - "standard": "阿富汗时间" - } - }, - "Africa_Central": { - "long": { - "standard": "中部非洲时间" - } - }, - "Africa_Eastern": { - "long": { - "standard": "东部非洲时间" - } - }, - "Africa_Southern": { - "long": { - "standard": "南部非洲时间" - } - }, - "Africa_Western": { - "long": { - "generic": "西部非洲时间", - "standard": "西部非洲标准时间", - "daylight": "西部非洲夏令时间" - } - }, - "Alaska": { - "long": { - "generic": "阿拉斯加时间", - "standard": "阿拉斯加标准时间", - "daylight": "阿拉斯加夏令时间" - } - }, - "Almaty": { - "long": { - "generic": "阿拉木图时间", - "standard": "阿拉木图标准时间", - "daylight": "阿拉木图夏令时间" - } - }, - "Amazon": { - "long": { - "generic": "亚马逊时间", - "standard": "亚马逊标准时间", - "daylight": "亚马逊夏令时间" - } - }, - "America_Central": { - "long": { - "generic": "北美中部时间", - "standard": "北美中部标准时间", - "daylight": "北美中部夏令时间" - } - }, - "America_Eastern": { - "long": { - "generic": "北美东部时间", - "standard": "北美东部标准时间", - "daylight": "北美东部夏令时间" - } - }, - "America_Mountain": { - "long": { - "generic": "北美山区时间", - "standard": "北美山区标准时间", - "daylight": "北美山区夏令时间" - } - }, - "America_Pacific": { - "long": { - "generic": "北美太平洋时间", - "standard": "北美太平洋标准时间", - "daylight": "北美太平洋夏令时间" - } - }, - "Anadyr": { - "long": { - "generic": "阿纳德尔时间", - "standard": "阿纳德尔标准时间", - "daylight": "阿纳德尔夏令时间" - } - }, - "Apia": { - "long": { - "generic": "阿皮亚时间", - "standard": "阿皮亚标准时间", - "daylight": "阿皮亚夏令时间" - } - }, - "Aqtau": { - "long": { - "generic": "阿克套时间", - "standard": "阿克套标准时间", - "daylight": "阿克套夏令时间" - } - }, - "Aqtobe": { - "long": { - "generic": "阿克托别时间", - "standard": "阿克托别标准时间", - "daylight": "阿克托别夏令时间" - } - }, - "Arabian": { - "long": { - "generic": "阿拉伯时间", - "standard": "阿拉伯标准时间", - "daylight": "阿拉伯夏令时间" - } - }, - "Argentina": { - "long": { - "generic": "阿根廷时间", - "standard": "阿根廷标准时间", - "daylight": "阿根廷夏令时间" - } - }, - "Argentina_Western": { - "long": { - "generic": "阿根廷西部时间", - "standard": "阿根廷西部标准时间", - "daylight": "阿根廷西部夏令时间" - } - }, - "Armenia": { - "long": { - "generic": "亚美尼亚时间", - "standard": "亚美尼亚标准时间", - "daylight": "亚美尼亚夏令时间" - } - }, - "Atlantic": { - "long": { - "generic": "大西洋时间", - "standard": "大西洋标准时间", - "daylight": "大西洋夏令时间" - } - }, - "Australia_Central": { - "long": { - "generic": "澳大利亚中部时间", - "standard": "澳大利亚中部标准时间", - "daylight": "澳大利亚中部夏令时间" - } - }, - "Australia_CentralWestern": { - "long": { - "generic": "澳大利亚中西部时间", - "standard": "澳大利亚中西部标准时间", - "daylight": "澳大利亚中西部夏令时间" - } - }, - "Australia_Eastern": { - "long": { - "generic": "澳大利亚东部时间", - "standard": "澳大利亚东部标准时间", - "daylight": "澳大利亚东部夏令时间" - } - }, - "Australia_Western": { - "long": { - "generic": "澳大利亚西部时间", - "standard": "澳大利亚西部标准时间", - "daylight": "澳大利亚西部夏令时间" - } - }, - "Azerbaijan": { - "long": { - "generic": "阿塞拜疆时间", - "standard": "阿塞拜疆标准时间", - "daylight": "阿塞拜疆夏令时间" - } - }, - "Azores": { - "long": { - "generic": "亚速尔群岛时间", - "standard": "亚速尔群岛标准时间", - "daylight": "亚速尔群岛夏令时间" - } - }, - "Bangladesh": { - "long": { - "generic": "孟加拉时间", - "standard": "孟加拉标准时间", - "daylight": "孟加拉夏令时间" - } - }, - "Bhutan": { - "long": { - "standard": "不丹时间" - } - }, - "Bolivia": { - "long": { - "standard": "玻利维亚标准时间" - } - }, - "Brasilia": { - "long": { - "generic": "巴西利亚时间", - "standard": "巴西利亚标准时间", - "daylight": "巴西利亚夏令时间" - } - }, - "Brunei": { - "long": { - "standard": "文莱达鲁萨兰时间" - } - }, - "Cape_Verde": { - "long": { - "generic": "佛得角时间", - "standard": "佛得角标准时间", - "daylight": "佛得角夏令时间" - } - }, - "Casey": { - "long": { - "standard": "凯西时间" - } - }, - "Chamorro": { - "long": { - "standard": "查莫罗时间" - } - }, - "Chatham": { - "long": { - "generic": "查坦时间", - "standard": "查坦标准时间", - "daylight": "查坦夏令时间" - } - }, - "Chile": { - "long": { - "generic": "智利时间", - "standard": "智利标准时间", - "daylight": "智利夏令时间" - } - }, - "China": { - "long": { - "generic": "中国时间", - "standard": "中国标准时间", - "daylight": "中国夏令时间" - } - }, - "Choibalsan": { - "long": { - "generic": "乔巴山时间", - "standard": "乔巴山标准时间", - "daylight": "乔巴山夏令时间" - } - }, - "Christmas": { - "long": { - "standard": "圣诞岛时间" - } - }, - "Cocos": { - "long": { - "standard": "科科斯群岛时间" - } - }, - "Colombia": { - "long": { - "generic": "哥伦比亚时间", - "standard": "哥伦比亚标准时间", - "daylight": "哥伦比亚夏令时间" - } - }, - "Cook": { - "long": { - "generic": "库克群岛时间", - "standard": "库克群岛标准时间", - "daylight": "库克群岛仲夏时间" - } - }, - "Cuba": { - "long": { - "generic": "古巴时间", - "standard": "古巴标准时间", - "daylight": "古巴夏令时间" - } - }, - "Davis": { - "long": { - "standard": "戴维斯时间" - } - }, - "DumontDUrville": { - "long": { - "standard": "迪蒙迪尔维尔时间" - } - }, - "East_Timor": { - "long": { - "standard": "东帝汶时间" - } - }, - "Easter": { - "long": { - "generic": "复活节岛时间", - "standard": "复活节岛标准时间", - "daylight": "复活节岛夏令时间" - } - }, - "Ecuador": { - "long": { - "standard": "厄瓜多尔标准时间" - } - }, - "Europe_Central": { - "long": { - "generic": "中欧时间", - "standard": "中欧标准时间", - "daylight": "中欧夏令时间" - } - }, - "Europe_Eastern": { - "long": { - "generic": "东欧时间", - "standard": "东欧标准时间", - "daylight": "东欧夏令时间" - } - }, - "Europe_Further_Eastern": { - "long": { - "standard": "远东标准时间" - } - }, - "Europe_Western": { - "long": { - "generic": "西欧时间", - "standard": "西欧标准时间", - "daylight": "西欧夏令时间" - } - }, - "Falkland": { - "long": { - "generic": "福克兰群岛时间", - "standard": "福克兰群岛标准时间", - "daylight": "福克兰群岛夏令时间" - } - }, - "Fiji": { - "long": { - "generic": "斐济时间", - "standard": "斐济标准时间", - "daylight": "斐济夏令时间" - } - }, - "French_Guiana": { - "long": { - "standard": "法属圭亚那标准时间" - } - }, - "French_Southern": { - "long": { - "standard": "法属南方和南极领地时间" - } - }, - "Galapagos": { - "long": { - "standard": "加拉帕戈斯时间" - } - }, - "Gambier": { - "long": { - "standard": "甘比尔时间" - } - }, - "Georgia": { - "long": { - "generic": "格鲁吉亚时间", - "standard": "格鲁吉亚标准时间", - "daylight": "格鲁吉亚夏令时间" - } - }, - "Gilbert_Islands": { - "long": { - "standard": "吉尔伯特群岛时间" - } - }, - "GMT": { - "long": { - "standard": "格林尼治标准时间" - } - }, - "Greenland_Eastern": { - "long": { - "generic": "格陵兰岛东部时间", - "standard": "格陵兰岛东部标准时间", - "daylight": "格陵兰岛东部夏令时间" - } - }, - "Greenland_Western": { - "long": { - "generic": "格陵兰岛西部时间", - "standard": "格陵兰岛西部标准时间", - "daylight": "格陵兰岛西部夏令时间" - } - }, - "Guam": { - "long": { - "standard": "关岛时间" - } - }, - "Gulf": { - "long": { - "standard": "海湾标准时间" - } - }, - "Guyana": { - "long": { - "standard": "圭亚那时间" - } - }, - "Hawaii_Aleutian": { - "long": { - "generic": "夏威夷-阿留申时间", - "standard": "夏威夷-阿留申标准时间", - "daylight": "夏威夷-阿留申夏令时间" - } - }, - "Hong_Kong": { - "long": { - "generic": "香港时间", - "standard": "香港标准时间", - "daylight": "香港夏令时间" - } - }, - "Hovd": { - "long": { - "generic": "科布多时间", - "standard": "科布多标准时间", - "daylight": "科布多夏令时间" - } - }, - "India": { - "long": { - "standard": "印度时间" - } - }, - "Indian_Ocean": { - "long": { - "standard": "印度洋时间" - } - }, - "Indochina": { - "long": { - "standard": "印度支那时间" - } - }, - "Indonesia_Central": { - "long": { - "standard": "印度尼西亚中部时间" - } - }, - "Indonesia_Eastern": { - "long": { - "standard": "印度尼西亚东部时间" - } - }, - "Indonesia_Western": { - "long": { - "standard": "印度尼西亚西部时间" - } - }, - "Iran": { - "long": { - "generic": "伊朗时间", - "standard": "伊朗标准时间", - "daylight": "伊朗夏令时间" - } - }, - "Irkutsk": { - "long": { - "generic": "伊尔库茨克时间", - "standard": "伊尔库茨克标准时间", - "daylight": "伊尔库茨克夏令时间" - } - }, - "Israel": { - "long": { - "generic": "以色列时间", - "standard": "以色列标准时间", - "daylight": "以色列夏令时间" - } - }, - "Japan": { - "long": { - "generic": "日本时间", - "standard": "日本标准时间", - "daylight": "日本夏令时间" - } - }, - "Kamchatka": { - "long": { - "generic": "彼得罗巴甫洛夫斯克-堪察加时间", - "standard": "彼得罗巴甫洛夫斯克-堪察加标准时间", - "daylight": "彼得罗巴甫洛夫斯克-堪察加夏令时间" - } - }, - "Kazakhstan_Eastern": { - "long": { - "standard": "哈萨克斯坦东部时间" - } - }, - "Kazakhstan_Western": { - "long": { - "standard": "哈萨克斯坦西部时间" - } - }, - "Korea": { - "long": { - "generic": "韩国时间", - "standard": "韩国标准时间", - "daylight": "韩国夏令时间" - } - }, - "Kosrae": { - "long": { - "standard": "科斯雷时间" - } - }, - "Krasnoyarsk": { - "long": { - "generic": "克拉斯诺亚尔斯克时间", - "standard": "克拉斯诺亚尔斯克标准时间", - "daylight": "克拉斯诺亚尔斯克夏令时间" - } - }, - "Kyrgystan": { - "long": { - "standard": "吉尔吉斯斯坦时间" - } - }, - "Lanka": { - "long": { - "standard": "兰卡时间" - } - }, - "Line_Islands": { - "long": { - "standard": "莱恩群岛时间" - } - }, - "Lord_Howe": { - "long": { - "generic": "豪勋爵岛时间", - "standard": "豪勋爵岛标准时间", - "daylight": "豪勋爵岛夏令时间" - } - }, - "Macau": { - "long": { - "generic": "澳门时间", - "standard": "澳门标准时间", - "daylight": "澳门夏令时间" - } - }, - "Macquarie": { - "long": { - "standard": "麦夸里岛时间" - } - }, - "Magadan": { - "long": { - "generic": "马加丹时间", - "standard": "马加丹标准时间", - "daylight": "马加丹夏令时间" - } - }, - "Malaysia": { - "long": { - "standard": "马来西亚时间" - } - }, - "Maldives": { - "long": { - "standard": "马尔代夫时间" - } - }, - "Marquesas": { - "long": { - "standard": "马克萨斯群岛时间" - } - }, - "Marshall_Islands": { - "long": { - "standard": "马绍尔群岛时间" - } - }, - "Mauritius": { - "long": { - "generic": "毛里求斯时间", - "standard": "毛里求斯标准时间", - "daylight": "毛里求斯夏令时间" - } - }, - "Mawson": { - "long": { - "standard": "莫森时间" - } - }, - "Mexico_Northwest": { - "long": { - "generic": "墨西哥西北部时间", - "standard": "墨西哥西北部标准时间", - "daylight": "墨西哥西北部夏令时间" - } - }, - "Mexico_Pacific": { - "long": { - "generic": "墨西哥太平洋时间", - "standard": "墨西哥太平洋标准时间", - "daylight": "墨西哥太平洋夏令时间" - } - }, - "Mongolia": { - "long": { - "generic": "乌兰巴托时间", - "standard": "乌兰巴托标准时间", - "daylight": "乌兰巴托夏令时间" - } - }, - "Moscow": { - "long": { - "generic": "莫斯科时间", - "standard": "莫斯科标准时间", - "daylight": "莫斯科夏令时间" - } - }, - "Myanmar": { - "long": { - "standard": "缅甸时间" - } - }, - "Nauru": { - "long": { - "standard": "瑙鲁时间" - } - }, - "Nepal": { - "long": { - "standard": "尼泊尔时间" - } - }, - "New_Caledonia": { - "long": { - "generic": "新喀里多尼亚时间", - "standard": "新喀里多尼亚标准时间", - "daylight": "新喀里多尼亚夏令时间" - } - }, - "New_Zealand": { - "long": { - "generic": "新西兰时间", - "standard": "新西兰标准时间", - "daylight": "新西兰夏令时间" - } - }, - "Newfoundland": { - "long": { - "generic": "纽芬兰时间", - "standard": "纽芬兰标准时间", - "daylight": "纽芬兰夏令时间" - } - }, - "Niue": { - "long": { - "standard": "纽埃时间" - } - }, - "Norfolk": { - "long": { - "standard": "诺福克岛时间" - } - }, - "Noronha": { - "long": { - "generic": "费尔南多-迪诺罗尼亚岛时间", - "standard": "费尔南多-迪诺罗尼亚岛标准时间", - "daylight": "费尔南多-迪诺罗尼亚岛夏令时间" - } - }, - "North_Mariana": { - "long": { - "standard": "北马里亚纳群岛时间" - } - }, - "Novosibirsk": { - "long": { - "generic": "新西伯利亚时间", - "standard": "新西伯利亚标准时间", - "daylight": "新西伯利亚夏令时间" - } - }, - "Omsk": { - "long": { - "generic": "鄂木斯克时间", - "standard": "鄂木斯克标准时间", - "daylight": "鄂木斯克夏令时间" - } - }, - "Pakistan": { - "long": { - "generic": "巴基斯坦时间", - "standard": "巴基斯坦标准时间", - "daylight": "巴基斯坦夏令时间" - } - }, - "Palau": { - "long": { - "standard": "帕劳时间" - } - }, - "Papua_New_Guinea": { - "long": { - "standard": "巴布亚新几内亚时间" - } - }, - "Paraguay": { - "long": { - "generic": "巴拉圭时间", - "standard": "巴拉圭标准时间", - "daylight": "巴拉圭夏令时间" - } - }, - "Peru": { - "long": { - "generic": "秘鲁时间", - "standard": "秘鲁标准时间", - "daylight": "秘鲁夏令时间" - } - }, - "Philippines": { - "long": { - "generic": "菲律宾时间", - "standard": "菲律宾标准时间", - "daylight": "菲律宾夏令时间" - } - }, - "Phoenix_Islands": { - "long": { - "standard": "菲尼克斯群岛时间" - } - }, - "Pierre_Miquelon": { - "long": { - "generic": "圣皮埃尔和密克隆群岛时间", - "standard": "圣皮埃尔和密克隆群岛标准时间", - "daylight": "圣皮埃尔和密克隆群岛夏令时间" - } - }, - "Pitcairn": { - "long": { - "standard": "皮特凯恩时间" - } - }, - "Ponape": { - "long": { - "standard": "波纳佩时间" - } - }, - "Pyongyang": { - "long": { - "standard": "平壤时间" - } - }, - "Qyzylorda": { - "long": { - "generic": "克孜洛尔达时间", - "standard": "克孜洛尔达标准时间", - "daylight": "克孜洛尔达夏令时间" - } - }, - "Reunion": { - "long": { - "standard": "留尼汪时间" - } - }, - "Rothera": { - "long": { - "standard": "罗瑟拉时间" - } - }, - "Sakhalin": { - "long": { - "generic": "库页岛时间", - "standard": "库页岛标准时间", - "daylight": "库页岛夏令时间" - } - }, - "Samara": { - "long": { - "generic": "萨马拉时间", - "standard": "萨马拉标准时间", - "daylight": "萨马拉夏令时间" - } - }, - "Samoa": { - "long": { - "generic": "萨摩亚时间", - "standard": "萨摩亚标准时间", - "daylight": "萨摩亚夏令时间" - } - }, - "Seychelles": { - "long": { - "standard": "塞舌尔时间" - } - }, - "Singapore": { - "long": { - "standard": "新加坡标准时间" - } - }, - "Solomon": { - "long": { - "standard": "所罗门群岛时间" - } - }, - "South_Georgia": { - "long": { - "standard": "南乔治亚岛时间" - } - }, - "Suriname": { - "long": { - "standard": "苏里南时间" - } - }, - "Syowa": { - "long": { - "standard": "昭和时间" - } - }, - "Tahiti": { - "long": { - "standard": "塔希提岛时间" - } - }, - "Taipei": { - "long": { - "generic": "台北时间", - "standard": "台北标准时间", - "daylight": "台北夏令时间" - } - }, - "Tajikistan": { - "long": { - "standard": "塔吉克斯坦时间" - } - }, - "Tokelau": { - "long": { - "standard": "托克劳时间" - } - }, - "Tonga": { - "long": { - "generic": "汤加时间", - "standard": "汤加标准时间", - "daylight": "汤加夏令时间" - } - }, - "Truk": { - "long": { - "standard": "楚克时间" - } - }, - "Turkmenistan": { - "long": { - "generic": "土库曼斯坦时间", - "standard": "土库曼斯坦标准时间", - "daylight": "土库曼斯坦夏令时间" - } - }, - "Tuvalu": { - "long": { - "standard": "图瓦卢时间" - } - }, - "Uruguay": { - "long": { - "generic": "乌拉圭时间", - "standard": "乌拉圭标准时间", - "daylight": "乌拉圭夏令时间" - } - }, - "Uzbekistan": { - "long": { - "generic": "乌兹别克斯坦时间", - "standard": "乌兹别克斯坦标准时间", - "daylight": "乌兹别克斯坦夏令时间" - } - }, - "Vanuatu": { - "long": { - "generic": "瓦努阿图时间", - "standard": "瓦努阿图标准时间", - "daylight": "瓦努阿图夏令时间" - } - }, - "Venezuela": { - "long": { - "standard": "委内瑞拉时间" - } - }, - "Vladivostok": { - "long": { - "generic": "海参崴时间", - "standard": "海参崴标准时间", - "daylight": "海参崴夏令时间" - } - }, - "Volgograd": { - "long": { - "generic": "伏尔加格勒时间", - "standard": "伏尔加格勒标准时间", - "daylight": "伏尔加格勒夏令时间" - } - }, - "Vostok": { - "long": { - "standard": "沃斯托克时间" - } - }, - "Wake": { - "long": { - "standard": "威克岛时间" - } - }, - "Wallis": { - "long": { - "standard": "瓦利斯和富图纳时间" - } - }, - "Yakutsk": { - "long": { - "generic": "雅库茨克时间", - "standard": "雅库茨克标准时间", - "daylight": "雅库茨克夏令时间" - } - }, - "Yekaterinburg": { - "long": { - "generic": "叶卡捷琳堡时间", - "standard": "叶卡捷琳堡标准时间", - "daylight": "叶卡捷琳堡夏令时间" - } - } - } - } - }, - "numbers": { - "defaultNumberingSystem": "latn", - "otherNumberingSystems": { - "native": "hanidec", - "traditional": "hans", - "finance": "hansfin" - }, - "minimumGroupingDigits": "1", - "symbols-numberSystem-hanidec": { - "decimal": ".", - "group": ",", - "list": ";", - "percentSign": "%", - "plusSign": "+", - "minusSign": "-", - "exponential": "E", - "superscriptingExponent": "×", - "perMille": "‰", - "infinity": "∞", - "nan": "NaN", - "timeSeparator": ":" - }, - "symbols-numberSystem-latn": { - "decimal": ".", - "group": ",", - "list": ";", - "percentSign": "%", - "plusSign": "+", - "minusSign": "-", - "exponential": "E", - "superscriptingExponent": "×", - "perMille": "‰", - "infinity": "∞", - "nan": "NaN", - "timeSeparator": ":" - }, - "decimalFormats-numberSystem-hanidec": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-other": "0千", - "10000-count-other": "0万", - "100000-count-other": "00万", - "1000000-count-other": "000万", - "10000000-count-other": "0000万", - "100000000-count-other": "0亿", - "1000000000-count-other": "00亿", - "10000000000-count-other": "000亿", - "100000000000-count-other": "0000亿", - "1000000000000-count-other": "0兆", - "10000000000000-count-other": "00兆", - "100000000000000-count-other": "000兆" - } - }, - "short": { - "decimalFormat": { - "1000-count-other": "0千", - "10000-count-other": "0万", - "100000-count-other": "00万", - "1000000-count-other": "000万", - "10000000-count-other": "0000万", - "100000000-count-other": "0亿", - "1000000000-count-other": "00亿", - "10000000000-count-other": "000亿", - "100000000000-count-other": "0000亿", - "1000000000000-count-other": "0兆", - "10000000000000-count-other": "00兆", - "100000000000000-count-other": "000兆" - } - } - }, - "decimalFormats-numberSystem-latn": { - "standard": "#,##0.###", - "long": { - "decimalFormat": { - "1000-count-other": "0千", - "10000-count-other": "0万", - "100000-count-other": "00万", - "1000000-count-other": "000万", - "10000000-count-other": "0000万", - "100000000-count-other": "0亿", - "1000000000-count-other": "00亿", - "10000000000-count-other": "000亿", - "100000000000-count-other": "0000亿", - "1000000000000-count-other": "0兆", - "10000000000000-count-other": "00兆", - "100000000000000-count-other": "000兆" - } - }, - "short": { - "decimalFormat": { - "1000-count-other": "0千", - "10000-count-other": "0万", - "100000-count-other": "00万", - "1000000-count-other": "000万", - "10000000-count-other": "0000万", - "100000000-count-other": "0亿", - "1000000000-count-other": "00亿", - "10000000000-count-other": "000亿", - "100000000000-count-other": "0000亿", - "1000000000000-count-other": "0兆", - "10000000000000-count-other": "00兆", - "100000000000000-count-other": "000兆" - } - } - }, - "scientificFormats-numberSystem-hanidec": { - "standard": "#E0" - }, - "scientificFormats-numberSystem-latn": { - "standard": "#E0" - }, - "percentFormats-numberSystem-hanidec": { - "standard": "#,##0%" - }, - "percentFormats-numberSystem-latn": { - "standard": "#,##0%" - }, - "currencyFormats-numberSystem-hanidec": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } - }, - "standard": "¤#,##0.00", - "accounting": "¤#,##0.00;(¤#,##0.00)", - "short": { - "standard": { - "1000-count-other": "¤0千", - "10000-count-other": "¤0万", - "100000-count-other": "¤00万", - "1000000-count-other": "¤000万", - "10000000-count-other": "¤0000万", - "100000000-count-other": "¤0亿", - "1000000000-count-other": "¤00亿", - "10000000000-count-other": "¤000亿", - "100000000000-count-other": "¤0000亿", - "1000000000000-count-other": "¤0兆", - "10000000000000-count-other": "¤00兆", - "100000000000000-count-other": "¤000兆" - } - }, - "unitPattern-count-other": "{0}{1}" - }, - "currencyFormats-numberSystem-latn": { - "currencySpacing": { - "beforeCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - }, - "afterCurrency": { - "currencyMatch": "[:^S:]", - "surroundingMatch": "[:digit:]", - "insertBetween": " " - } - }, - "standard": "¤#,##0.00", - "accounting": "¤#,##0.00;(¤#,##0.00)", - "short": { - "standard": { - "1000-count-other": "¤0千", - "10000-count-other": "¤0万", - "100000-count-other": "¤00万", - "1000000-count-other": "¤000万", - "10000000-count-other": "¤0000万", - "100000000-count-other": "¤0亿", - "1000000000-count-other": "¤00亿", - "10000000000-count-other": "¤000亿", - "100000000000-count-other": "¤0000亿", - "1000000000000-count-other": "¤0兆", - "10000000000000-count-other": "¤00兆", - "100000000000000-count-other": "¤000兆" - } - }, - "unitPattern-count-other": "{0}{1}" - }, - "miscPatterns-numberSystem-hanidec": { - "atLeast": "{0}+", - "range": "{0}-{1}" - }, - "miscPatterns-numberSystem-latn": { - "atLeast": "{0}+", - "range": "{0}-{1}" - }, - "minimalPairs": { - "pluralMinimalPairs": "{0} 天", - "other": "在第 {0} 个路口右转。" - }, - "currencies": { - "ADP": { - "displayName": "安道尔比塞塔", - "displayName-count-other": "安道尔比塞塔", - "symbol": "ADP" - }, - "AED": { - "displayName": "阿联酋迪拉姆", - "displayName-count-other": "阿联酋迪拉姆", - "symbol": "AED" - }, - "AFA": { - "displayName": "阿富汗尼 (1927–2002)", - "symbol": "AFA" - }, - "AFN": { - "displayName": "阿富汗尼", - "displayName-count-other": "阿富汗尼", - "symbol": "AFN" - }, - "ALK": { - "displayName": "阿尔巴尼亚列克(1946–1965)", - "displayName-count-other": "阿尔巴尼亚列克(1946–1965)", - "symbol": "ALK" - }, - "ALL": { - "displayName": "阿尔巴尼亚列克", - "displayName-count-other": "阿尔巴尼亚列克", - "symbol": "ALL" - }, - "AMD": { - "displayName": "亚美尼亚德拉姆", - "displayName-count-other": "亚美尼亚德拉姆", - "symbol": "AMD" - }, - "ANG": { - "displayName": "荷属安的列斯盾", - "displayName-count-other": "荷属安的列斯盾", - "symbol": "ANG" - }, - "AOA": { - "displayName": "安哥拉宽扎", - "displayName-count-other": "安哥拉宽扎", - "symbol": "AOA", - "symbol-alt-narrow": "Kz" - }, - "AOK": { - "displayName": "安哥拉宽扎 (1977–1990)", - "displayName-count-other": "安哥拉宽扎 (1977–1990)", - "symbol": "AOK" - }, - "AON": { - "displayName": "安哥拉新宽扎 (1990–2000)", - "displayName-count-other": "安哥拉新宽扎 (1990–2000)", - "symbol": "AON" - }, - "AOR": { - "displayName": "安哥拉重新调整宽扎 (1995–1999)", - "displayName-count-other": "安哥拉重新调整宽扎 (1995–1999)", - "symbol": "AOR" - }, - "ARA": { - "displayName": "阿根廷奥斯特拉尔", - "displayName-count-other": "阿根廷奥斯特拉尔", - "symbol": "ARA" - }, - "ARL": { - "displayName": "阿根廷法定比索 (1970–1983)", - "displayName-count-other": "阿根廷法定比索 (1970–1983)", - "symbol": "ARL" - }, - "ARM": { - "displayName": "阿根廷比索 (1881–1970)", - "displayName-count-other": "阿根廷比索 (1881–1970)", - "symbol": "ARM" - }, - "ARP": { - "displayName": "阿根廷比索 (1983–1985)", - "displayName-count-other": "阿根廷比索 (1983–1985)", - "symbol": "ARP" - }, - "ARS": { - "displayName": "阿根廷比索", - "displayName-count-other": "阿根廷比索", - "symbol": "ARS", - "symbol-alt-narrow": "$" - }, - "ATS": { - "displayName": "奥地利先令", - "displayName-count-other": "奥地利先令", - "symbol": "ATS" - }, - "AUD": { - "displayName": "澳大利亚元", - "displayName-count-other": "澳大利亚元", - "symbol": "AU$", - "symbol-alt-narrow": "$" - }, - "AWG": { - "displayName": "阿鲁巴弗罗林", - "displayName-count-other": "阿鲁巴基尔德元", - "symbol": "AWG" - }, - "AZM": { - "displayName": "阿塞拜疆马纳特 (1993–2006)", - "displayName-count-other": "阿塞拜疆马纳特 (1993–2006)", - "symbol": "AZM" - }, - "AZN": { - "displayName": "阿塞拜疆马纳特", - "displayName-count-other": "阿塞拜疆马纳特", - "symbol": "AZN" - }, - "BAD": { - "displayName": "波士尼亚-赫塞哥维纳第纳尔 (1992–1994)", - "displayName-count-other": "波士尼亚-赫塞哥维纳第纳尔 (1992–1994)", - "symbol": "BAD" - }, - "BAM": { - "displayName": "波斯尼亚-黑塞哥维那可兑换马克", - "displayName-count-other": "波斯尼亚-黑塞哥维那可兑换马克", - "symbol": "BAM", - "symbol-alt-narrow": "KM" - }, - "BAN": { - "displayName": "波士尼亚-赫塞哥维纳新第纳尔 (1994–1997)", - "displayName-count-other": "波士尼亚-赫塞哥维纳新第纳尔 (1994–1997)", - "symbol": "BAN" - }, - "BBD": { - "displayName": "巴巴多斯元", - "displayName-count-other": "巴巴多斯元", - "symbol": "BBD", - "symbol-alt-narrow": "$" - }, - "BDT": { - "displayName": "孟加拉塔卡", - "displayName-count-other": "孟加拉塔卡", - "symbol": "BDT", - "symbol-alt-narrow": "৳" - }, - "BEC": { - "displayName": "比利时法郎（可兑换）", - "displayName-count-other": "比利时法郎（可兑换）", - "symbol": "BEC" - }, - "BEF": { - "displayName": "比利时法郎", - "displayName-count-other": "比利时法郎", - "symbol": "BEF" - }, - "BEL": { - "displayName": "比利时法郎（金融）", - "displayName-count-other": "比利时法郎（金融）", - "symbol": "BEL" - }, - "BGL": { - "displayName": "保加利亚硬列弗", - "displayName-count-other": "保加利亚硬列弗", - "symbol": "BGL" - }, - "BGM": { - "displayName": "保加利亚社会党列弗", - "displayName-count-other": "保加利亚社会党列弗", - "symbol": "BGM" - }, - "BGN": { - "displayName": "保加利亚列弗", - "displayName-count-other": "保加利亚新列弗", - "symbol": "BGN" - }, - "BGO": { - "displayName": "保加利亚列弗 (1879–1952)", - "displayName-count-other": "保加利亚列弗 (1879–1952)", - "symbol": "BGO" - }, - "BHD": { - "displayName": "巴林第纳尔", - "displayName-count-other": "巴林第纳尔", - "symbol": "BHD" - }, - "BIF": { - "displayName": "布隆迪法郎", - "displayName-count-other": "布隆迪法郎", - "symbol": "BIF" - }, - "BMD": { - "displayName": "百慕大元", - "displayName-count-other": "百慕大元", - "symbol": "BMD", - "symbol-alt-narrow": "$" - }, - "BND": { - "displayName": "文莱元", - "displayName-count-other": "文莱元", - "symbol": "BND", - "symbol-alt-narrow": "$" - }, - "BOB": { - "displayName": "玻利维亚诺", - "displayName-count-other": "玻利维亚诺", - "symbol": "BOB", - "symbol-alt-narrow": "Bs" - }, - "BOL": { - "displayName": "玻利维亚诺 (1863–1963)", - "displayName-count-other": "玻利维亚诺 (1863–1963)", - "symbol": "BOL" - }, - "BOP": { - "displayName": "玻利维亚比索", - "displayName-count-other": "玻利维亚比索", - "symbol": "BOP" - }, - "BOV": { - "displayName": "玻利维亚 Mvdol（资金）", - "displayName-count-other": "玻利维亚 Mvdol（资金）", - "symbol": "BOV" - }, - "BRB": { - "displayName": "巴西新克鲁赛罗 (1967–1986)", - "displayName-count-other": "巴西新克鲁赛罗 (1967–1986)", - "symbol": "BRB" - }, - "BRC": { - "displayName": "巴西克鲁扎多 (1986–1989)", - "displayName-count-other": "巴西克鲁扎多 (1986–1989)", - "symbol": "BRC" - }, - "BRE": { - "displayName": "巴西克鲁塞罗 (1990–1993)", - "displayName-count-other": "巴西克鲁塞罗 (1990–1993)", - "symbol": "BRE" - }, - "BRL": { - "displayName": "巴西雷亚尔", - "displayName-count-other": "巴西雷亚尔", - "symbol": "R$", - "symbol-alt-narrow": "R$" - }, - "BRN": { - "displayName": "巴西新克鲁扎多 (1989–1990)", - "displayName-count-other": "巴西新克鲁扎多 (1989–1990)", - "symbol": "BRN" - }, - "BRR": { - "displayName": "巴西克鲁塞罗 (1993–1994)", - "displayName-count-other": "巴西克鲁塞罗 (1993–1994)", - "symbol": "BRR" - }, - "BRZ": { - "displayName": "巴西克鲁塞罗 (1942–1967)", - "displayName-count-other": "巴西克鲁塞罗 (1942–1967)", - "symbol": "BRZ" - }, - "BSD": { - "displayName": "巴哈马元", - "displayName-count-other": "巴哈马元", - "symbol": "BSD", - "symbol-alt-narrow": "$" - }, - "BTN": { - "displayName": "不丹努尔特鲁姆", - "displayName-count-other": "不丹努尔特鲁姆", - "symbol": "BTN" - }, - "BUK": { - "displayName": "缅元", - "symbol": "BUK" - }, - "BWP": { - "displayName": "博茨瓦纳普拉", - "displayName-count-other": "博茨瓦纳普拉", - "symbol": "BWP", - "symbol-alt-narrow": "P" - }, - "BYB": { - "displayName": "白俄罗斯新卢布 (1994–1999)", - "displayName-count-other": "白俄罗斯新卢布 (1994–1999)", - "symbol": "BYB" - }, - "BYN": { - "displayName": "白俄罗斯卢布", - "displayName-count-other": "白俄罗斯卢布", - "symbol": "BYN", - "symbol-alt-narrow": "р." - }, - "BYR": { - "displayName": "白俄罗斯卢布 (2000–2016)", - "displayName-count-other": "白俄罗斯卢布 (2000–2016)", - "symbol": "BYR" - }, - "BZD": { - "displayName": "伯利兹元", - "displayName-count-other": "伯利兹元", - "symbol": "BZD", - "symbol-alt-narrow": "$" - }, - "CAD": { - "displayName": "加拿大元", - "displayName-count-other": "加拿大元", - "symbol": "CA$", - "symbol-alt-narrow": "$" - }, - "CDF": { - "displayName": "刚果法郎", - "displayName-count-other": "刚果法郎", - "symbol": "CDF" - }, - "CHE": { - "displayName": "欧元 (WIR)", - "displayName-count-other": "欧元 (WIR)", - "symbol": "CHE" - }, - "CHF": { - "displayName": "瑞士法郎", - "displayName-count-other": "瑞士法郎", - "symbol": "CHF" - }, - "CHW": { - "displayName": "法郎 (WIR)", - "displayName-count-other": "法郎 (WIR)", - "symbol": "CHW" - }, - "CLE": { - "displayName": "智利埃斯库多", - "displayName-count-other": "智利埃斯库多", - "symbol": "CLE" - }, - "CLF": { - "displayName": "智利（资金）", - "displayName-count-other": "智利（资金）", - "symbol": "CLF" - }, - "CLP": { - "displayName": "智利比索", - "displayName-count-other": "智利比索", - "symbol": "CLP", - "symbol-alt-narrow": "$" - }, - "CNY": { - "displayName": "人民币", - "displayName-count-other": "人民币", - "symbol": "￥", - "symbol-alt-narrow": "¥" - }, - "COP": { - "displayName": "哥伦比亚比索", - "displayName-count-other": "哥伦比亚比索", - "symbol": "COP", - "symbol-alt-narrow": "$" - }, - "COU": { - "displayName": "哥伦比亚币", - "displayName-count-other": "哥伦比亚币", - "symbol": "COU" - }, - "CRC": { - "displayName": "哥斯达黎加科朗", - "displayName-count-other": "哥斯达黎加科朗", - "symbol": "CRC", - "symbol-alt-narrow": "₡" - }, - "CSD": { - "displayName": "旧塞尔维亚第纳尔", - "displayName-count-other": "旧塞尔维亚第纳尔", - "symbol": "CSD" - }, - "CSK": { - "displayName": "捷克硬克朗", - "displayName-count-other": "捷克硬克朗", - "symbol": "CSK" - }, - "CUC": { - "displayName": "古巴可兑换比索", - "displayName-count-other": "古巴可兑换比索", - "symbol": "CUC", - "symbol-alt-narrow": "$" - }, - "CUP": { - "displayName": "古巴比索", - "displayName-count-other": "古巴比索", - "symbol": "CUP", - "symbol-alt-narrow": "$" - }, - "CVE": { - "displayName": "佛得角埃斯库多", - "displayName-count-other": "佛得角埃斯库多", - "symbol": "CVE" - }, - "CYP": { - "displayName": "塞浦路斯镑", - "displayName-count-other": "塞浦路斯镑", - "symbol": "CYP" - }, - "CZK": { - "displayName": "捷克克朗", - "displayName-count-other": "捷克克朗", - "symbol": "CZK", - "symbol-alt-narrow": "Kč" - }, - "DDM": { - "displayName": "东德奥斯特马克", - "displayName-count-other": "东德奥斯特马克", - "symbol": "DDM" - }, - "DEM": { - "displayName": "德国马克", - "displayName-count-other": "德国马克", - "symbol": "DEM" - }, - "DJF": { - "displayName": "吉布提法郎", - "displayName-count-other": "吉布提法郎", - "symbol": "DJF" - }, - "DKK": { - "displayName": "丹麦克朗", - "displayName-count-other": "丹麦克朗", - "symbol": "DKK", - "symbol-alt-narrow": "kr" - }, - "DOP": { - "displayName": "多米尼加比索", - "displayName-count-other": "多米尼加比索", - "symbol": "DOP", - "symbol-alt-narrow": "$" - }, - "DZD": { - "displayName": "阿尔及利亚第纳尔", - "displayName-count-other": "阿尔及利亚第纳尔", - "symbol": "DZD" - }, - "ECS": { - "displayName": "厄瓜多尔苏克雷", - "displayName-count-other": "厄瓜多尔苏克雷", - "symbol": "ECS" - }, - "ECV": { - "displayName": "厄瓜多尔 (UVC)", - "displayName-count-other": "厄瓜多尔 (UVC)", - "symbol": "ECV" - }, - "EEK": { - "displayName": "爱沙尼亚克朗", - "displayName-count-other": "爱沙尼亚克朗", - "symbol": "EEK" - }, - "EGP": { - "displayName": "埃及镑", - "displayName-count-other": "埃及镑", - "symbol": "EGP", - "symbol-alt-narrow": "E£" - }, - "ERN": { - "displayName": "厄立特里亚纳克法", - "displayName-count-other": "厄立特里亚纳克法", - "symbol": "ERN" - }, - "ESA": { - "displayName": "西班牙比塞塔（帐户 A）", - "displayName-count-other": "西班牙比塞塔（帐户 A）", - "symbol": "ESA" - }, - "ESB": { - "displayName": "西班牙比塞塔（兑换帐户）", - "displayName-count-other": "西班牙比塞塔（兑换帐户）", - "symbol": "ESB" - }, - "ESP": { - "displayName": "西班牙比塞塔", - "displayName-count-other": "西班牙比塞塔", - "symbol": "ESP", - "symbol-alt-narrow": "₧" - }, - "ETB": { - "displayName": "埃塞俄比亚比尔", - "displayName-count-other": "埃塞俄比亚比尔", - "symbol": "ETB" - }, - "EUR": { - "displayName": "欧元", - "displayName-count-other": "欧元", - "symbol": "€", - "symbol-alt-narrow": "€" - }, - "FIM": { - "displayName": "芬兰马克", - "displayName-count-other": "芬兰马克", - "symbol": "FIM" - }, - "FJD": { - "displayName": "斐济元", - "displayName-count-other": "斐济元", - "symbol": "FJD", - "symbol-alt-narrow": "$" - }, - "FKP": { - "displayName": "福克兰群岛镑", - "displayName-count-other": "福克兰群岛镑", - "symbol": "FKP", - "symbol-alt-narrow": "£" - }, - "FRF": { - "displayName": "法国法郎", - "displayName-count-other": "法国法郎", - "symbol": "FRF" - }, - "GBP": { - "displayName": "英镑", - "displayName-count-other": "英镑", - "symbol": "£", - "symbol-alt-narrow": "£" - }, - "GEK": { - "displayName": "乔治亚库蓬拉瑞特", - "displayName-count-other": "乔治亚库蓬拉瑞特", - "symbol": "GEK" - }, - "GEL": { - "displayName": "格鲁吉亚拉里", - "displayName-count-other": "格鲁吉亚拉里", - "symbol": "GEL", - "symbol-alt-narrow": "₾", - "symbol-alt-variant": "₾" - }, - "GHC": { - "displayName": "加纳塞第", - "displayName-count-other": "加纳塞第", - "symbol": "GHC" - }, - "GHS": { - "displayName": "加纳塞地", - "displayName-count-other": "加纳塞地", - "symbol": "GHS" - }, - "GIP": { - "displayName": "直布罗陀镑", - "displayName-count-other": "直布罗陀镑", - "symbol": "GIP", - "symbol-alt-narrow": "£" - }, - "GMD": { - "displayName": "冈比亚达拉西", - "displayName-count-other": "冈比亚达拉西", - "symbol": "GMD" - }, - "GNF": { - "displayName": "几内亚法郎", - "displayName-count-other": "几内亚法郎", - "symbol": "GNF", - "symbol-alt-narrow": "FG" - }, - "GNS": { - "displayName": "几内亚西里", - "displayName-count-other": "几内亚西里", - "symbol": "GNS" - }, - "GQE": { - "displayName": "赤道几内亚埃奎勒", - "displayName-count-other": "赤道几内亚埃奎勒", - "symbol": "GQE" - }, - "GRD": { - "displayName": "希腊德拉克马", - "displayName-count-other": "希腊德拉克马", - "symbol": "GRD" - }, - "GTQ": { - "displayName": "危地马拉格查尔", - "displayName-count-other": "危地马拉格查尔", - "symbol": "GTQ", - "symbol-alt-narrow": "Q" - }, - "GWE": { - "displayName": "葡萄牙几内亚埃斯库多", - "displayName-count-other": "葡萄牙几内亚埃斯库多", - "symbol": "GWE" - }, - "GWP": { - "displayName": "几内亚比绍比索", - "displayName-count-other": "几内亚比绍比索", - "symbol": "GWP" - }, - "GYD": { - "displayName": "圭亚那元", - "displayName-count-other": "圭亚那元", - "symbol": "GYD", - "symbol-alt-narrow": "$" - }, - "HKD": { - "displayName": "港元", - "displayName-count-other": "港元", - "symbol": "HK$", - "symbol-alt-narrow": "$" - }, - "HNL": { - "displayName": "洪都拉斯伦皮拉", - "displayName-count-other": "洪都拉斯伦皮拉", - "symbol": "HNL", - "symbol-alt-narrow": "L" - }, - "HRD": { - "displayName": "克罗地亚第纳尔", - "displayName-count-other": "克罗地亚第纳尔", - "symbol": "HRD" - }, - "HRK": { - "displayName": "克罗地亚库纳", - "displayName-count-other": "克罗地亚库纳", - "symbol": "HRK", - "symbol-alt-narrow": "kn" - }, - "HTG": { - "displayName": "海地古德", - "displayName-count-other": "海地古德", - "symbol": "HTG" - }, - "HUF": { - "displayName": "匈牙利福林", - "displayName-count-other": "匈牙利福林", - "symbol": "HUF", - "symbol-alt-narrow": "Ft" - }, - "IDR": { - "displayName": "印度尼西亚盾", - "displayName-count-other": "印度尼西亚盾", - "symbol": "IDR", - "symbol-alt-narrow": "Rp" - }, - "IEP": { - "displayName": "爱尔兰镑", - "displayName-count-other": "爱尔兰镑", - "symbol": "IEP" - }, - "ILP": { - "displayName": "以色列镑", - "displayName-count-other": "以色列镑", - "symbol": "ILP" - }, - "ILR": { - "displayName": "以色列谢克尔(1980–1985)", - "displayName-count-other": "以色列谢克尔(1980–1985)", - "symbol": "ILS" - }, - "ILS": { - "displayName": "以色列新谢克尔", - "displayName-count-other": "以色列新谢克尔", - "symbol": "₪", - "symbol-alt-narrow": "₪" - }, - "INR": { - "displayName": "印度卢比", - "displayName-count-other": "印度卢比", - "symbol": "₹", - "symbol-alt-narrow": "₹" - }, - "IQD": { - "displayName": "伊拉克第纳尔", - "displayName-count-other": "伊拉克第纳尔", - "symbol": "IQD" - }, - "IRR": { - "displayName": "伊朗里亚尔", - "displayName-count-other": "伊朗里亚尔", - "symbol": "IRR" - }, - "ISJ": { - "displayName": "冰岛克朗(1918–1981)", - "displayName-count-other": "冰岛克朗(1918–1981)", - "symbol": "ISJ" - }, - "ISK": { - "displayName": "冰岛克朗", - "displayName-count-other": "冰岛克朗", - "symbol": "ISK", - "symbol-alt-narrow": "kr" - }, - "ITL": { - "displayName": "意大利里拉", - "displayName-count-other": "意大利里拉", - "symbol": "ITL" - }, - "JMD": { - "displayName": "牙买加元", - "displayName-count-other": "牙买加元", - "symbol": "JMD", - "symbol-alt-narrow": "$" - }, - "JOD": { - "displayName": "约旦第纳尔", - "displayName-count-other": "约旦第纳尔", - "symbol": "JOD" - }, - "JPY": { - "displayName": "日元", - "displayName-count-other": "日元", - "symbol": "JP¥", - "symbol-alt-narrow": "¥" - }, - "KES": { - "displayName": "肯尼亚先令", - "displayName-count-other": "肯尼亚先令", - "symbol": "KES" - }, - "KGS": { - "displayName": "吉尔吉斯斯坦索姆", - "displayName-count-other": "吉尔吉斯斯坦索姆", - "symbol": "KGS" - }, - "KHR": { - "displayName": "柬埔寨瑞尔", - "displayName-count-other": "柬埔寨瑞尔", - "symbol": "KHR", - "symbol-alt-narrow": "៛" - }, - "KMF": { - "displayName": "科摩罗法郎", - "displayName-count-other": "科摩罗法郎", - "symbol": "KMF", - "symbol-alt-narrow": "CF" - }, - "KPW": { - "displayName": "朝鲜元", - "displayName-count-other": "朝鲜元", - "symbol": "KPW", - "symbol-alt-narrow": "₩" - }, - "KRH": { - "displayName": "韩元 (1953–1962)", - "symbol": "KRH" - }, - "KRO": { - "displayName": "韩元 (1945–1953)", - "symbol": "KRO" - }, - "KRW": { - "displayName": "韩元", - "displayName-count-other": "韩元", - "symbol": "￦", - "symbol-alt-narrow": "₩" - }, - "KWD": { - "displayName": "科威特第纳尔", - "displayName-count-other": "科威特第纳尔", - "symbol": "KWD" - }, - "KYD": { - "displayName": "开曼元", - "displayName-count-other": "开曼元", - "symbol": "KYD", - "symbol-alt-narrow": "$" - }, - "KZT": { - "displayName": "哈萨克斯坦坚戈", - "displayName-count-other": "哈萨克斯坦坚戈", - "symbol": "KZT", - "symbol-alt-narrow": "₸" - }, - "LAK": { - "displayName": "老挝基普", - "displayName-count-other": "老挝基普", - "symbol": "LAK", - "symbol-alt-narrow": "₭" - }, - "LBP": { - "displayName": "黎巴嫩镑", - "displayName-count-other": "黎巴嫩镑", - "symbol": "LBP", - "symbol-alt-narrow": "L£" - }, - "LKR": { - "displayName": "斯里兰卡卢比", - "displayName-count-other": "斯里兰卡卢比", - "symbol": "LKR", - "symbol-alt-narrow": "Rs" - }, - "LRD": { - "displayName": "利比里亚元", - "displayName-count-other": "利比里亚元", - "symbol": "LRD", - "symbol-alt-narrow": "$" - }, - "LSL": { - "displayName": "莱索托洛蒂", - "displayName-count-other": "莱索托洛蒂", - "symbol": "LSL" - }, - "LTL": { - "displayName": "立陶宛立特", - "displayName-count-other": "立陶宛立特", - "symbol": "LTL", - "symbol-alt-narrow": "Lt" - }, - "LTT": { - "displayName": "立陶宛塔咯呐司", - "displayName-count-other": "立陶宛塔咯呐司", - "symbol": "LTT" - }, - "LUC": { - "displayName": "卢森堡可兑换法郎", - "displayName-count-other": "卢森堡可兑换法郎", - "symbol": "LUC" - }, - "LUF": { - "displayName": "卢森堡法郎", - "displayName-count-other": "卢森堡法郎", - "symbol": "LUF" - }, - "LUL": { - "displayName": "卢森堡金融法郎", - "displayName-count-other": "卢森堡金融法郎", - "symbol": "LUL" - }, - "LVL": { - "displayName": "拉脱维亚拉特", - "displayName-count-other": "拉脱维亚拉特", - "symbol": "LVL", - "symbol-alt-narrow": "Ls" - }, - "LVR": { - "displayName": "拉脱维亚卢布", - "displayName-count-other": "拉脱维亚卢布", - "symbol": "LVR" - }, - "LYD": { - "displayName": "利比亚第纳尔", - "displayName-count-other": "利比亚第纳尔", - "symbol": "LYD" - }, - "MAD": { - "displayName": "摩洛哥迪拉姆", - "displayName-count-other": "摩洛哥迪拉姆", - "symbol": "MAD" - }, - "MAF": { - "displayName": "摩洛哥法郎", - "displayName-count-other": "摩洛哥法郎", - "symbol": "MAF" - }, - "MCF": { - "displayName": "摩纳哥法郎", - "displayName-count-other": "摩纳哥法郎", - "symbol": "MCF" - }, - "MDC": { - "displayName": "摩尔多瓦库邦", - "displayName-count-other": "摩尔多瓦库邦", - "symbol": "MDC" - }, - "MDL": { - "displayName": "摩尔多瓦列伊", - "displayName-count-other": "摩尔多瓦列伊", - "symbol": "MDL" - }, - "MGA": { - "displayName": "马达加斯加阿里亚里", - "displayName-count-other": "马达加斯加阿里亚里", - "symbol": "MGA", - "symbol-alt-narrow": "Ar" - }, - "MGF": { - "displayName": "马达加斯加法郎", - "displayName-count-other": "马达加斯加法郎", - "symbol": "MGF" - }, - "MKD": { - "displayName": "马其顿第纳尔", - "displayName-count-other": "马其顿第纳尔", - "symbol": "MKD" - }, - "MKN": { - "displayName": "马其顿第纳尔 (1992–1993)", - "displayName-count-other": "马其顿第纳尔 (1992–1993)", - "symbol": "MKN" - }, - "MLF": { - "displayName": "马里法郎", - "displayName-count-other": "马里法郎", - "symbol": "MLF" - }, - "MMK": { - "displayName": "缅甸元", - "displayName-count-other": "缅甸元", - "symbol": "MMK", - "symbol-alt-narrow": "K" - }, - "MNT": { - "displayName": "蒙古图格里克", - "displayName-count-other": "蒙古图格里克", - "symbol": "MNT", - "symbol-alt-narrow": "₮" - }, - "MOP": { - "displayName": "澳门币", - "displayName-count-other": "澳门元", - "symbol": "MOP" - }, - "MRO": { - "displayName": "毛里塔尼亚乌吉亚", - "displayName-count-other": "毛里塔尼亚乌吉亚", - "symbol": "MRO" - }, - "MTL": { - "displayName": "马耳他里拉", - "displayName-count-other": "马耳他里拉", - "symbol": "MTL" - }, - "MTP": { - "displayName": "马耳他镑", - "displayName-count-other": "马耳他镑", - "symbol": "MTP" - }, - "MUR": { - "displayName": "毛里求斯卢比", - "displayName-count-other": "毛里求斯卢比", - "symbol": "MUR", - "symbol-alt-narrow": "Rs" - }, - "MVP": { - "displayName": "马尔代夫卢比(1947–1981)", - "displayName-count-other": "马尔代夫卢比(1947–1981)" - }, - "MVR": { - "displayName": "马尔代夫卢菲亚", - "displayName-count-other": "马尔代夫卢菲亚", - "symbol": "MVR" - }, - "MWK": { - "displayName": "马拉维克瓦查", - "displayName-count-other": "马拉维克瓦查", - "symbol": "MWK" - }, - "MXN": { - "displayName": "墨西哥比索", - "displayName-count-other": "墨西哥比索", - "symbol": "MX$", - "symbol-alt-narrow": "$" - }, - "MXP": { - "displayName": "墨西哥银比索 (1861–1992)", - "displayName-count-other": "墨西哥银比索 (1861–1992)", - "symbol": "MXP" - }, - "MXV": { - "displayName": "墨西哥（资金）", - "displayName-count-other": "墨西哥（资金）", - "symbol": "MXV" - }, - "MYR": { - "displayName": "马来西亚林吉特", - "displayName-count-other": "马来西亚林吉特", - "symbol": "MYR", - "symbol-alt-narrow": "RM" - }, - "MZE": { - "displayName": "莫桑比克埃斯库多", - "displayName-count-other": "莫桑比克埃斯库多", - "symbol": "MZE" - }, - "MZM": { - "displayName": "旧莫桑比克美提卡", - "displayName-count-other": "旧莫桑比克美提卡", - "symbol": "MZM" - }, - "MZN": { - "displayName": "莫桑比克美提卡", - "displayName-count-other": "莫桑比克美提卡", - "symbol": "MZN" - }, - "NAD": { - "displayName": "纳米比亚元", - "displayName-count-other": "纳米比亚元", - "symbol": "NAD", - "symbol-alt-narrow": "$" - }, - "NGN": { - "displayName": "尼日利亚奈拉", - "displayName-count-other": "尼日利亚奈拉", - "symbol": "NGN", - "symbol-alt-narrow": "₦" - }, - "NIC": { - "displayName": "尼加拉瓜科多巴 (1988–1991)", - "displayName-count-other": "尼加拉瓜科多巴 (1988–1991)", - "symbol": "NIC" - }, - "NIO": { - "displayName": "尼加拉瓜科多巴", - "displayName-count-other": "尼加拉瓜金科多巴", - "symbol": "NIO", - "symbol-alt-narrow": "C$" - }, - "NLG": { - "displayName": "荷兰盾", - "displayName-count-other": "荷兰盾", - "symbol": "NLG" - }, - "NOK": { - "displayName": "挪威克朗", - "displayName-count-other": "挪威克朗", - "symbol": "NOK", - "symbol-alt-narrow": "kr" - }, - "NPR": { - "displayName": "尼泊尔卢比", - "displayName-count-other": "尼泊尔卢比", - "symbol": "NPR", - "symbol-alt-narrow": "Rs" - }, - "NZD": { - "displayName": "新西兰元", - "displayName-count-other": "新西兰元", - "symbol": "NZ$", - "symbol-alt-narrow": "$" - }, - "OMR": { - "displayName": "阿曼里亚尔", - "displayName-count-other": "阿曼里亚尔", - "symbol": "OMR" - }, - "PAB": { - "displayName": "巴拿马巴波亚", - "displayName-count-other": "巴拿马巴波亚", - "symbol": "PAB" - }, - "PEI": { - "displayName": "秘鲁印第", - "displayName-count-other": "秘鲁印第", - "symbol": "PEI" - }, - "PEN": { - "displayName": "秘鲁索尔", - "displayName-count-other": "秘鲁索尔", - "symbol": "PEN" - }, - "PES": { - "displayName": "秘鲁索尔 (1863–1965)", - "displayName-count-other": "秘鲁索尔 (1863–1965)", - "symbol": "PES" - }, - "PGK": { - "displayName": "巴布亚新几内亚基那", - "displayName-count-other": "巴布亚新几内亚基那", - "symbol": "PGK" - }, - "PHP": { - "displayName": "菲律宾比索", - "displayName-count-other": "菲律宾比索", - "symbol": "PHP", - "symbol-alt-narrow": "₱" - }, - "PKR": { - "displayName": "巴基斯坦卢比", - "displayName-count-other": "巴基斯坦卢比", - "symbol": "PKR", - "symbol-alt-narrow": "Rs" - }, - "PLN": { - "displayName": "波兰兹罗提", - "displayName-count-other": "波兰兹罗提", - "symbol": "PLN", - "symbol-alt-narrow": "zł" - }, - "PLZ": { - "displayName": "波兰兹罗提 (1950–1995)", - "displayName-count-other": "波兰兹罗提 (1950–1995)", - "symbol": "PLZ" - }, - "PTE": { - "displayName": "葡萄牙埃斯库多", - "displayName-count-other": "葡萄牙埃斯库多", - "symbol": "PTE" - }, - "PYG": { - "displayName": "巴拉圭瓜拉尼", - "displayName-count-other": "巴拉圭瓜拉尼", - "symbol": "PYG", - "symbol-alt-narrow": "₲" - }, - "QAR": { - "displayName": "卡塔尔里亚尔", - "displayName-count-other": "卡塔尔里亚尔", - "symbol": "QAR" - }, - "RHD": { - "displayName": "罗得西亚元", - "displayName-count-other": "罗得西亚元", - "symbol": "RHD" - }, - "ROL": { - "displayName": "旧罗马尼亚列伊", - "displayName-count-other": "旧罗马尼亚列伊", - "symbol": "ROL" - }, - "RON": { - "displayName": "罗马尼亚列伊", - "displayName-count-other": "罗马尼亚列伊", - "symbol": "RON", - "symbol-alt-narrow": "L" - }, - "RSD": { - "displayName": "塞尔维亚第纳尔", - "displayName-count-other": "塞尔维亚第纳尔", - "symbol": "RSD" - }, - "RUB": { - "displayName": "俄罗斯卢布", - "displayName-count-other": "俄罗斯卢布", - "symbol": "RUB", - "symbol-alt-narrow": "₽" - }, - "RUR": { - "displayName": "俄国卢布 (1991–1998)", - "displayName-count-other": "俄国卢布 (1991–1998)", - "symbol": "RUR", - "symbol-alt-narrow": "р." - }, - "RWF": { - "displayName": "卢旺达法郎", - "displayName-count-other": "卢旺达法郎", - "symbol": "RWF", - "symbol-alt-narrow": "RF" - }, - "SAR": { - "displayName": "沙特里亚尔", - "displayName-count-other": "沙特里亚尔", - "symbol": "SAR" - }, - "SBD": { - "displayName": "所罗门群岛元", - "displayName-count-other": "所罗门群岛元", - "symbol": "SBD", - "symbol-alt-narrow": "$" - }, - "SCR": { - "displayName": "塞舌尔卢比", - "displayName-count-other": "塞舌尔卢比", - "symbol": "SCR" - }, - "SDD": { - "displayName": "苏丹第纳尔 (1992–2007)", - "displayName-count-other": "苏丹第纳尔 (1992–2007)", - "symbol": "SDD" - }, - "SDG": { - "displayName": "苏丹镑", - "displayName-count-other": "苏丹镑", - "symbol": "SDG" - }, - "SDP": { - "displayName": "旧苏丹镑", - "displayName-count-other": "旧苏丹镑", - "symbol": "SDP" - }, - "SEK": { - "displayName": "瑞典克朗", - "displayName-count-other": "瑞典克朗", - "symbol": "SEK", - "symbol-alt-narrow": "kr" - }, - "SGD": { - "displayName": "新加坡元", - "displayName-count-other": "新加坡元", - "symbol": "SGD", - "symbol-alt-narrow": "$" - }, - "SHP": { - "displayName": "圣赫勒拿群岛磅", - "displayName-count-other": "圣赫勒拿群岛磅", - "symbol": "SHP", - "symbol-alt-narrow": "£" - }, - "SIT": { - "displayName": "斯洛文尼亚托拉尔", - "displayName-count-other": "斯洛文尼亚托拉尔", - "symbol": "SIT" - }, - "SKK": { - "displayName": "斯洛伐克克朗", - "displayName-count-other": "斯洛伐克克朗", - "symbol": "SKK" - }, - "SLL": { - "displayName": "塞拉利昂利昂", - "displayName-count-other": "塞拉利昂利昂", - "symbol": "SLL" - }, - "SOS": { - "displayName": "索马里先令", - "displayName-count-other": "索马里先令", - "symbol": "SOS" - }, - "SRD": { - "displayName": "苏里南元", - "displayName-count-other": "苏里南元", - "symbol": "SRD", - "symbol-alt-narrow": "$" - }, - "SRG": { - "displayName": "苏里南盾", - "displayName-count-other": "苏里南盾", - "symbol": "SRG" - }, - "SSP": { - "displayName": "南苏丹镑", - "displayName-count-other": "南苏丹镑", - "symbol": "SSP", - "symbol-alt-narrow": "£" - }, - "STD": { - "displayName": "圣多美和普林西比多布拉", - "displayName-count-other": "圣多美和普林西比多布拉", - "symbol": "STD", - "symbol-alt-narrow": "Db" - }, - "SUR": { - "displayName": "苏联卢布", - "displayName-count-other": "苏联卢布", - "symbol": "SUR" - }, - "SVC": { - "displayName": "萨尔瓦多科朗", - "displayName-count-other": "萨尔瓦多科朗", - "symbol": "SVC" - }, - "SYP": { - "displayName": "叙利亚镑", - "displayName-count-other": "叙利亚镑", - "symbol": "SYP", - "symbol-alt-narrow": "£" - }, - "SZL": { - "displayName": "斯威士兰里兰吉尼", - "displayName-count-other": "斯威士兰里兰吉尼", - "symbol": "SZL" - }, - "THB": { - "displayName": "泰铢", - "displayName-count-other": "泰铢", - "symbol": "THB", - "symbol-alt-narrow": "฿" - }, - "TJR": { - "displayName": "塔吉克斯坦卢布", - "displayName-count-other": "塔吉克斯坦卢布", - "symbol": "TJR" - }, - "TJS": { - "displayName": "塔吉克斯坦索莫尼", - "displayName-count-other": "塔吉克斯坦索莫尼", - "symbol": "TJS" - }, - "TMM": { - "displayName": "土库曼斯坦马纳特 (1993–2009)", - "displayName-count-other": "土库曼斯坦马纳特 (1993–2009)", - "symbol": "TMM" - }, - "TMT": { - "displayName": "土库曼斯坦马纳特", - "displayName-count-other": "土库曼斯坦马纳特", - "symbol": "TMT" - }, - "TND": { - "displayName": "突尼斯第纳尔", - "displayName-count-other": "突尼斯第纳尔", - "symbol": "TND" - }, - "TOP": { - "displayName": "汤加潘加", - "displayName-count-other": "汤加潘加", - "symbol": "TOP", - "symbol-alt-narrow": "T$" - }, - "TPE": { - "displayName": "帝汶埃斯库多", - "symbol": "TPE" - }, - "TRL": { - "displayName": "土耳其里拉 (1922–2005)", - "displayName-count-other": "土耳其里拉 (1922–2005)", - "symbol": "TRL" - }, - "TRY": { - "displayName": "土耳其里拉", - "displayName-count-other": "土耳其里拉", - "symbol": "TRY", - "symbol-alt-narrow": "₺", - "symbol-alt-variant": "TL" - }, - "TTD": { - "displayName": "特立尼达和多巴哥元", - "displayName-count-other": "特立尼达和多巴哥元", - "symbol": "TTD", - "symbol-alt-narrow": "$" - }, - "TWD": { - "displayName": "新台币", - "displayName-count-other": "新台币", - "symbol": "NT$", - "symbol-alt-narrow": "NT$" - }, - "TZS": { - "displayName": "坦桑尼亚先令", - "displayName-count-other": "坦桑尼亚先令", - "symbol": "TZS" - }, - "UAH": { - "displayName": "乌克兰格里夫纳", - "displayName-count-other": "乌克兰格里夫纳", - "symbol": "UAH", - "symbol-alt-narrow": "₴" - }, - "UAK": { - "displayName": "乌克兰币", - "displayName-count-other": "乌克兰币", - "symbol": "UAK" - }, - "UGS": { - "displayName": "乌干达先令 (1966–1987)", - "displayName-count-other": "乌干达先令 (1966–1987)", - "symbol": "UGS" - }, - "UGX": { - "displayName": "乌干达先令", - "displayName-count-other": "乌干达先令", - "symbol": "UGX" - }, - "USD": { - "displayName": "美元", - "displayName-count-other": "美元", - "symbol": "US$", - "symbol-alt-narrow": "$" - }, - "USN": { - "displayName": "美元（次日）", - "displayName-count-other": "美元（次日）", - "symbol": "USN" - }, - "USS": { - "displayName": "美元（当日）", - "displayName-count-other": "美元（当日）", - "symbol": "USS" - }, - "UYI": { - "displayName": "乌拉圭比索（索引单位）", - "displayName-count-other": "乌拉圭比索（索引单位）", - "symbol": "UYI" - }, - "UYP": { - "displayName": "乌拉圭比索 (1975–1993)", - "displayName-count-other": "乌拉圭比索 (1975–1993)", - "symbol": "UYP" - }, - "UYU": { - "displayName": "乌拉圭比索", - "displayName-count-other": "乌拉圭比索", - "symbol": "UYU", - "symbol-alt-narrow": "$" - }, - "UZS": { - "displayName": "乌兹别克斯坦苏姆", - "displayName-count-other": "乌兹别克斯坦苏姆", - "symbol": "UZS" - }, - "VEB": { - "displayName": "委内瑞拉玻利瓦尔 (1871–2008)", - "displayName-count-other": "委内瑞拉玻利瓦尔 (1871–2008)", - "symbol": "VEB" - }, - "VEF": { - "displayName": "委内瑞拉玻利瓦尔", - "displayName-count-other": "委内瑞拉玻利瓦尔", - "symbol": "VEF", - "symbol-alt-narrow": "Bs" - }, - "VND": { - "displayName": "越南盾", - "displayName-count-other": "越南盾", - "symbol": "₫", - "symbol-alt-narrow": "₫" - }, - "VNN": { - "displayName": "越南盾 (1978–1985)", - "symbol": "VNN" - }, - "VUV": { - "displayName": "瓦努阿图瓦图", - "displayName-count-other": "瓦努阿图瓦图", - "symbol": "VUV" - }, - "WST": { - "displayName": "萨摩亚塔拉", - "displayName-count-other": "萨摩亚塔拉", - "symbol": "WST" - }, - "XAF": { - "displayName": "中非法郎", - "displayName-count-other": "中非法郎", - "symbol": "FCFA" - }, - "XAG": { - "displayName": "银", - "symbol": "XAG" - }, - "XAU": { - "displayName": "黄金", - "symbol": "XAU" - }, - "XBA": { - "displayName": "欧洲复合单位", - "symbol": "XBA" - }, - "XBB": { - "displayName": "欧洲货币联盟", - "symbol": "XBB" - }, - "XBC": { - "displayName": "欧洲计算单位 (XBC)", - "symbol": "XBC" - }, - "XBD": { - "displayName": "欧洲计算单位 (XBD)", - "symbol": "XBD" - }, - "XCD": { - "displayName": "东加勒比元", - "displayName-count-other": "东加勒比元", - "symbol": "EC$", - "symbol-alt-narrow": "$" - }, - "XDR": { - "displayName": "特别提款权", - "symbol": "XDR" - }, - "XEU": { - "displayName": "欧洲货币单位", - "displayName-count-other": "欧洲货币单位", - "symbol": "XEU" - }, - "XFO": { - "displayName": "法国金法郎", - "symbol": "XFO" - }, - "XFU": { - "displayName": "法国法郎 (UIC)", - "symbol": "XFU" - }, - "XOF": { - "displayName": "西非法郎", - "displayName-count-other": "西非法郎", - "symbol": "CFA" - }, - "XPD": { - "displayName": "钯", - "symbol": "XPD" - }, - "XPF": { - "displayName": "太平洋法郎", - "displayName-count-other": "太平洋法郎", - "symbol": "CFPF" - }, - "XPT": { - "displayName": "铂", - "symbol": "XPT" - }, - "XRE": { - "displayName": "RINET 基金", - "symbol": "XRE" - }, - "XSU": { - "displayName": "XSU", - "symbol": "XSU" - }, - "XTS": { - "displayName": "测试货币代码", - "symbol": "XTS" - }, - "XUA": { - "displayName": "XUA", - "symbol": "XUA" - }, - "XXX": { - "displayName": "未知货币", - "displayName-count-other": "（未知货币）", - "symbol": "XXX" - }, - "YDD": { - "displayName": "也门第纳尔", - "displayName-count-other": "也门第纳尔", - "symbol": "YDD" - }, - "YER": { - "displayName": "也门里亚尔", - "displayName-count-other": "也门里亚尔", - "symbol": "YER" - }, - "YUD": { - "displayName": "南斯拉夫硬第纳尔 (1966–1990)", - "displayName-count-other": "南斯拉夫硬第纳尔 (1966–1990)", - "symbol": "YUD" - }, - "YUM": { - "displayName": "南斯拉夫新第纳尔 (1994–2002)", - "displayName-count-other": "南斯拉夫新第纳尔 (1994–2002)", - "symbol": "YUM" - }, - "YUN": { - "displayName": "南斯拉夫可兑换第纳尔 (1990–1992)", - "displayName-count-other": "南斯拉夫可兑换第纳尔 (1990–1992)", - "symbol": "YUN" - }, - "YUR": { - "displayName": "南斯拉夫改良第纳尔 (1992–1993)", - "displayName-count-other": "南斯拉夫改良第纳尔 (1992–1993)", - "symbol": "YUR" - }, - "ZAL": { - "displayName": "南非兰特 (金融)", - "displayName-count-other": "南非兰特 (金融)", - "symbol": "ZAL" - }, - "ZAR": { - "displayName": "南非兰特", - "displayName-count-other": "南非兰特", - "symbol": "ZAR", - "symbol-alt-narrow": "R" - }, - "ZMK": { - "displayName": "赞比亚克瓦查 (1968–2012)", - "displayName-count-other": "赞比亚克瓦查 (1968–2012)", - "symbol": "ZMK" + "Magadan": { + "long": { + "generic": "马加丹时间", + "standard": "马加丹标准时间", + "daylight": "马加丹夏令时间" + } + }, + "Malaysia": { + "long": { + "standard": "马来西亚时间" + } + }, + "Maldives": { + "long": { + "standard": "马尔代夫时间" + } + }, + "Marquesas": { + "long": { + "standard": "马克萨斯群岛时间" + } + }, + "Marshall_Islands": { + "long": { + "standard": "马绍尔群岛时间" + } + }, + "Mauritius": { + "long": { + "generic": "毛里求斯时间", + "standard": "毛里求斯标准时间", + "daylight": "毛里求斯夏令时间" + } + }, + "Mawson": { + "long": { + "standard": "莫森时间" + } + }, + "Mexico_Northwest": { + "long": { + "generic": "墨西哥西北部时间", + "standard": "墨西哥西北部标准时间", + "daylight": "墨西哥西北部夏令时间" + } + }, + "Mexico_Pacific": { + "long": { + "generic": "墨西哥太平洋时间", + "standard": "墨西哥太平洋标准时间", + "daylight": "墨西哥太平洋夏令时间" + } + }, + "Mongolia": { + "long": { + "generic": "乌兰巴托时间", + "standard": "乌兰巴托标准时间", + "daylight": "乌兰巴托夏令时间" + } + }, + "Moscow": { + "long": { + "generic": "莫斯科时间", + "standard": "莫斯科标准时间", + "daylight": "莫斯科夏令时间" + } + }, + "Myanmar": { + "long": { + "standard": "缅甸时间" + } + }, + "Nauru": { + "long": { + "standard": "瑙鲁时间" + } + }, + "Nepal": { + "long": { + "standard": "尼泊尔时间" + } + }, + "New_Caledonia": { + "long": { + "generic": "新喀里多尼亚时间", + "standard": "新喀里多尼亚标准时间", + "daylight": "新喀里多尼亚夏令时间" + } + }, + "New_Zealand": { + "long": { + "generic": "新西兰时间", + "standard": "新西兰标准时间", + "daylight": "新西兰夏令时间" + } + }, + "Newfoundland": { + "long": { + "generic": "纽芬兰时间", + "standard": "纽芬兰标准时间", + "daylight": "纽芬兰夏令时间" + } + }, + "Niue": { + "long": { + "standard": "纽埃时间" + } + }, + "Norfolk": { + "long": { + "standard": "诺福克岛时间" + } + }, + "Noronha": { + "long": { + "generic": "费尔南多-迪诺罗尼亚岛时间", + "standard": "费尔南多-迪诺罗尼亚岛标准时间", + "daylight": "费尔南多-迪诺罗尼亚岛夏令时间" + } + }, + "North_Mariana": { + "long": { + "standard": "北马里亚纳群岛时间" + } + }, + "Novosibirsk": { + "long": { + "generic": "新西伯利亚时间", + "standard": "新西伯利亚标准时间", + "daylight": "新西伯利亚夏令时间" + } + }, + "Omsk": { + "long": { + "generic": "鄂木斯克时间", + "standard": "鄂木斯克标准时间", + "daylight": "鄂木斯克夏令时间" + } + }, + "Pakistan": { + "long": { + "generic": "巴基斯坦时间", + "standard": "巴基斯坦标准时间", + "daylight": "巴基斯坦夏令时间" + } + }, + "Palau": { + "long": { + "standard": "帕劳时间" + } + }, + "Papua_New_Guinea": { + "long": { + "standard": "巴布亚新几内亚时间" + } + }, + "Paraguay": { + "long": { + "generic": "巴拉圭时间", + "standard": "巴拉圭标准时间", + "daylight": "巴拉圭夏令时间" + } + }, + "Peru": { + "long": { + "generic": "秘鲁时间", + "standard": "秘鲁标准时间", + "daylight": "秘鲁夏令时间" + } + }, + "Philippines": { + "long": { + "generic": "菲律宾时间", + "standard": "菲律宾标准时间", + "daylight": "菲律宾夏令时间" + } + }, + "Phoenix_Islands": { + "long": { + "standard": "菲尼克斯群岛时间" + } + }, + "Pierre_Miquelon": { + "long": { + "generic": "圣皮埃尔和密克隆群岛时间", + "standard": "圣皮埃尔和密克隆群岛标准时间", + "daylight": "圣皮埃尔和密克隆群岛夏令时间" + } + }, + "Pitcairn": { + "long": { + "standard": "皮特凯恩时间" + } + }, + "Ponape": { + "long": { + "standard": "波纳佩时间" + } + }, + "Pyongyang": { + "long": { + "standard": "平壤时间" + } + }, + "Qyzylorda": { + "long": { + "generic": "克孜洛尔达时间", + "standard": "克孜洛尔达标准时间", + "daylight": "克孜洛尔达夏令时间" + } + }, + "Reunion": { + "long": { + "standard": "留尼汪时间" + } + }, + "Rothera": { + "long": { + "standard": "罗瑟拉时间" + } + }, + "Sakhalin": { + "long": { + "generic": "库页岛时间", + "standard": "库页岛标准时间", + "daylight": "库页岛夏令时间" + } + }, + "Samara": { + "long": { + "generic": "萨马拉时间", + "standard": "萨马拉标准时间", + "daylight": "萨马拉夏令时间" + } + }, + "Samoa": { + "long": { + "generic": "萨摩亚时间", + "standard": "萨摩亚标准时间", + "daylight": "萨摩亚夏令时间" + } + }, + "Seychelles": { + "long": { + "standard": "塞舌尔时间" + } + }, + "Singapore": { + "long": { + "standard": "新加坡标准时间" + } + }, + "Solomon": { + "long": { + "standard": "所罗门群岛时间" + } + }, + "South_Georgia": { + "long": { + "standard": "南乔治亚岛时间" + } + }, + "Suriname": { + "long": { + "standard": "苏里南时间" + } + }, + "Syowa": { + "long": { + "standard": "昭和时间" + } + }, + "Tahiti": { + "long": { + "standard": "塔希提岛时间" + } + }, + "Taipei": { + "long": { + "generic": "台北时间", + "standard": "台北标准时间", + "daylight": "台北夏令时间" + } + }, + "Tajikistan": { + "long": { + "standard": "塔吉克斯坦时间" + } + }, + "Tokelau": { + "long": { + "standard": "托克劳时间" + } + }, + "Tonga": { + "long": { + "generic": "汤加时间", + "standard": "汤加标准时间", + "daylight": "汤加夏令时间" + } + }, + "Truk": { + "long": { + "standard": "楚克时间" + } + }, + "Turkmenistan": { + "long": { + "generic": "土库曼斯坦时间", + "standard": "土库曼斯坦标准时间", + "daylight": "土库曼斯坦夏令时间" + } + }, + "Tuvalu": { + "long": { + "standard": "图瓦卢时间" + } + }, + "Uruguay": { + "long": { + "generic": "乌拉圭时间", + "standard": "乌拉圭标准时间", + "daylight": "乌拉圭夏令时间" + } + }, + "Uzbekistan": { + "long": { + "generic": "乌兹别克斯坦时间", + "standard": "乌兹别克斯坦标准时间", + "daylight": "乌兹别克斯坦夏令时间" + } + }, + "Vanuatu": { + "long": { + "generic": "瓦努阿图时间", + "standard": "瓦努阿图标准时间", + "daylight": "瓦努阿图夏令时间" + } + }, + "Venezuela": { + "long": { + "standard": "委内瑞拉时间" + } + }, + "Vladivostok": { + "long": { + "generic": "海参崴时间", + "standard": "海参崴标准时间", + "daylight": "海参崴夏令时间" + } + }, + "Volgograd": { + "long": { + "generic": "伏尔加格勒时间", + "standard": "伏尔加格勒标准时间", + "daylight": "伏尔加格勒夏令时间" + } + }, + "Vostok": { + "long": { + "standard": "沃斯托克时间" + } + }, + "Wake": { + "long": { + "standard": "威克岛时间" + } + }, + "Wallis": { + "long": { + "standard": "瓦利斯和富图纳时间" + } + }, + "Yakutsk": { + "long": { + "generic": "雅库茨克时间", + "standard": "雅库茨克标准时间", + "daylight": "雅库茨克夏令时间" + } + }, + "Yekaterinburg": { + "long": { + "generic": "叶卡捷琳堡时间", + "standard": "叶卡捷琳堡标准时间", + "daylight": "叶卡捷琳堡夏令时间" + } + } + } + } + }, + "numbers": { + "defaultNumberingSystem": "latn", + "otherNumberingSystems": { + "native": "hanidec", + "traditional": "hans", + "finance": "hansfin" + }, + "minimumGroupingDigits": "1", + "symbols-numberSystem-hanidec": { + "decimal": ".", + "group": ",", + "list": ";", + "percentSign": "%", + "plusSign": "+", + "minusSign": "-", + "exponential": "E", + "superscriptingExponent": "×", + "perMille": "‰", + "infinity": "∞", + "nan": "NaN", + "timeSeparator": ":" + }, + "symbols-numberSystem-latn": { + "decimal": ".", + "group": ",", + "list": ";", + "percentSign": "%", + "plusSign": "+", + "minusSign": "-", + "exponential": "E", + "superscriptingExponent": "×", + "perMille": "‰", + "infinity": "∞", + "nan": "NaN", + "timeSeparator": ":" + }, + "decimalFormats-numberSystem-hanidec": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-other": "0千", + "10000-count-other": "0万", + "100000-count-other": "00万", + "1000000-count-other": "000万", + "10000000-count-other": "0000万", + "100000000-count-other": "0亿", + "1000000000-count-other": "00亿", + "10000000000-count-other": "000亿", + "100000000000-count-other": "0000亿", + "1000000000000-count-other": "0兆", + "10000000000000-count-other": "00兆", + "100000000000000-count-other": "000兆" + } }, - "ZMW": { - "displayName": "赞比亚克瓦查", - "displayName-count-other": "赞比亚克瓦查", - "symbol": "ZMW", - "symbol-alt-narrow": "ZK" + "short": { + "decimalFormat": { + "1000-count-other": "0千", + "10000-count-other": "0万", + "100000-count-other": "00万", + "1000000-count-other": "000万", + "10000000-count-other": "0000万", + "100000000-count-other": "0亿", + "1000000000-count-other": "00亿", + "10000000000-count-other": "000亿", + "100000000000-count-other": "0000亿", + "1000000000000-count-other": "0兆", + "10000000000000-count-other": "00兆", + "100000000000000-count-other": "000兆" + } + } + }, + "decimalFormats-numberSystem-latn": { + "standard": "#,##0.###", + "long": { + "decimalFormat": { + "1000-count-other": "0千", + "10000-count-other": "0万", + "100000-count-other": "00万", + "1000000-count-other": "000万", + "10000000-count-other": "0000万", + "100000000-count-other": "0亿", + "1000000000-count-other": "00亿", + "10000000000-count-other": "000亿", + "100000000000-count-other": "0000亿", + "1000000000000-count-other": "0兆", + "10000000000000-count-other": "00兆", + "100000000000000-count-other": "000兆" + } }, - "ZRN": { - "displayName": "新扎伊尔 (1993–1998)", - "displayName-count-other": "新扎伊尔 (1993–1998)", - "symbol": "ZRN" + "short": { + "decimalFormat": { + "1000-count-other": "0千", + "10000-count-other": "0万", + "100000-count-other": "00万", + "1000000-count-other": "000万", + "10000000-count-other": "0000万", + "100000000-count-other": "0亿", + "1000000000-count-other": "00亿", + "10000000000-count-other": "000亿", + "100000000000-count-other": "0000亿", + "1000000000000-count-other": "0兆", + "10000000000000-count-other": "00兆", + "100000000000000-count-other": "000兆" + } + } + }, + "scientificFormats-numberSystem-hanidec": { + "standard": "#E0" + }, + "scientificFormats-numberSystem-latn": { + "standard": "#E0" + }, + "percentFormats-numberSystem-hanidec": { + "standard": "#,##0%" + }, + "percentFormats-numberSystem-latn": { + "standard": "#,##0%" + }, + "currencyFormats-numberSystem-hanidec": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZRZ": { - "displayName": "扎伊尔 (1971–1993)", - "displayName-count-other": "扎伊尔 (1971–1993)", - "symbol": "ZRZ" + "standard": "¤#,##0.00", + "accounting": "¤#,##0.00;(¤#,##0.00)", + "short": { + "standard": { + "1000-count-other": "¤0千", + "10000-count-other": "¤0万", + "100000-count-other": "¤00万", + "1000000-count-other": "¤000万", + "10000000-count-other": "¤0000万", + "100000000-count-other": "¤0亿", + "1000000000-count-other": "¤00亿", + "10000000000-count-other": "¤000亿", + "100000000000-count-other": "¤0000亿", + "1000000000000-count-other": "¤0兆", + "10000000000000-count-other": "¤00兆", + "100000000000000-count-other": "¤000兆" + } }, - "ZWD": { - "displayName": "津巴布韦元 (1980–2008)", - "displayName-count-other": "津巴布韦元 (1980–2008)", - "symbol": "ZWD" + "unitPattern-count-other": "{0}{1}" + }, + "currencyFormats-numberSystem-latn": { + "currencySpacing": { + "beforeCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + }, + "afterCurrency": { + "currencyMatch": "[:^S:]", + "surroundingMatch": "[:digit:]", + "insertBetween": " " + } }, - "ZWL": { - "displayName": "津巴布韦元 (2009)", - "displayName-count-other": "津巴布韦元 (2009)", - "symbol": "ZWL" + "standard": "¤#,##0.00", + "accounting": "¤#,##0.00;(¤#,##0.00)", + "short": { + "standard": { + "1000-count-other": "¤0千", + "10000-count-other": "¤0万", + "100000-count-other": "¤00万", + "1000000-count-other": "¤000万", + "10000000-count-other": "¤0000万", + "100000000-count-other": "¤0亿", + "1000000000-count-other": "¤00亿", + "10000000000-count-other": "¤000亿", + "100000000000-count-other": "¤0000亿", + "1000000000000-count-other": "¤0兆", + "10000000000000-count-other": "¤00兆", + "100000000000000-count-other": "¤000兆" + } }, - "ZWR": { - "displayName": "津巴布韦元 (2008)", - "displayName-count-other": "津巴布韦元 (2008)", - "symbol": "ZWR" + "unitPattern-count-other": "{0}{1}" + }, + "miscPatterns-numberSystem-hanidec": { + "atLeast": "{0}+", + "range": "{0}-{1}" + }, + "miscPatterns-numberSystem-latn": { + "atLeast": "{0}+", + "range": "{0}-{1}" + }, + "minimalPairs": { + "pluralMinimalPairs": "{0} 天", + "other": "在第 {0} 个路口右转。" + }, + "currencies": { + "ADP": { + "displayName": "安道尔比塞塔", + "displayName-count-other": "安道尔比塞塔", + "symbol": "ADP" + }, + "AED": { + "displayName": "阿联酋迪拉姆", + "displayName-count-other": "阿联酋迪拉姆", + "symbol": "AED" + }, + "AFA": { + "displayName": "阿富汗尼 (1927–2002)", + "symbol": "AFA" + }, + "AFN": { + "displayName": "阿富汗尼", + "displayName-count-other": "阿富汗尼", + "symbol": "AFN" + }, + "ALK": { + "displayName": "阿尔巴尼亚列克(1946–1965)", + "displayName-count-other": "阿尔巴尼亚列克(1946–1965)", + "symbol": "ALK" + }, + "ALL": { + "displayName": "阿尔巴尼亚列克", + "displayName-count-other": "阿尔巴尼亚列克", + "symbol": "ALL" + }, + "AMD": { + "displayName": "亚美尼亚德拉姆", + "displayName-count-other": "亚美尼亚德拉姆", + "symbol": "AMD" + }, + "ANG": { + "displayName": "荷属安的列斯盾", + "displayName-count-other": "荷属安的列斯盾", + "symbol": "ANG" + }, + "AOA": { + "displayName": "安哥拉宽扎", + "displayName-count-other": "安哥拉宽扎", + "symbol": "AOA", + "symbol-alt-narrow": "Kz" + }, + "AOK": { + "displayName": "安哥拉宽扎 (1977–1990)", + "displayName-count-other": "安哥拉宽扎 (1977–1990)", + "symbol": "AOK" + }, + "AON": { + "displayName": "安哥拉新宽扎 (1990–2000)", + "displayName-count-other": "安哥拉新宽扎 (1990–2000)", + "symbol": "AON" + }, + "AOR": { + "displayName": "安哥拉重新调整宽扎 (1995–1999)", + "displayName-count-other": "安哥拉重新调整宽扎 (1995–1999)", + "symbol": "AOR" + }, + "ARA": { + "displayName": "阿根廷奥斯特拉尔", + "displayName-count-other": "阿根廷奥斯特拉尔", + "symbol": "ARA" + }, + "ARL": { + "displayName": "阿根廷法定比索 (1970–1983)", + "displayName-count-other": "阿根廷法定比索 (1970–1983)", + "symbol": "ARL" + }, + "ARM": { + "displayName": "阿根廷比索 (1881–1970)", + "displayName-count-other": "阿根廷比索 (1881–1970)", + "symbol": "ARM" + }, + "ARP": { + "displayName": "阿根廷比索 (1983–1985)", + "displayName-count-other": "阿根廷比索 (1983–1985)", + "symbol": "ARP" + }, + "ARS": { + "displayName": "阿根廷比索", + "displayName-count-other": "阿根廷比索", + "symbol": "ARS", + "symbol-alt-narrow": "$" + }, + "ATS": { + "displayName": "奥地利先令", + "displayName-count-other": "奥地利先令", + "symbol": "ATS" + }, + "AUD": { + "displayName": "澳大利亚元", + "displayName-count-other": "澳大利亚元", + "symbol": "AU$", + "symbol-alt-narrow": "$" + }, + "AWG": { + "displayName": "阿鲁巴弗罗林", + "displayName-count-other": "阿鲁巴基尔德元", + "symbol": "AWG" + }, + "AZM": { + "displayName": "阿塞拜疆马纳特 (1993–2006)", + "displayName-count-other": "阿塞拜疆马纳特 (1993–2006)", + "symbol": "AZM" + }, + "AZN": { + "displayName": "阿塞拜疆马纳特", + "displayName-count-other": "阿塞拜疆马纳特", + "symbol": "AZN" + }, + "BAD": { + "displayName": "波士尼亚-赫塞哥维纳第纳尔 (1992–1994)", + "displayName-count-other": "波士尼亚-赫塞哥维纳第纳尔 (1992–1994)", + "symbol": "BAD" + }, + "BAM": { + "displayName": "波斯尼亚-黑塞哥维那可兑换马克", + "displayName-count-other": "波斯尼亚-黑塞哥维那可兑换马克", + "symbol": "BAM", + "symbol-alt-narrow": "KM" + }, + "BAN": { + "displayName": "波士尼亚-赫塞哥维纳新第纳尔 (1994–1997)", + "displayName-count-other": "波士尼亚-赫塞哥维纳新第纳尔 (1994–1997)", + "symbol": "BAN" + }, + "BBD": { + "displayName": "巴巴多斯元", + "displayName-count-other": "巴巴多斯元", + "symbol": "BBD", + "symbol-alt-narrow": "$" + }, + "BDT": { + "displayName": "孟加拉塔卡", + "displayName-count-other": "孟加拉塔卡", + "symbol": "BDT", + "symbol-alt-narrow": "৳" + }, + "BEC": { + "displayName": "比利时法郎（可兑换）", + "displayName-count-other": "比利时法郎（可兑换）", + "symbol": "BEC" + }, + "BEF": { + "displayName": "比利时法郎", + "displayName-count-other": "比利时法郎", + "symbol": "BEF" + }, + "BEL": { + "displayName": "比利时法郎（金融）", + "displayName-count-other": "比利时法郎（金融）", + "symbol": "BEL" + }, + "BGL": { + "displayName": "保加利亚硬列弗", + "displayName-count-other": "保加利亚硬列弗", + "symbol": "BGL" + }, + "BGM": { + "displayName": "保加利亚社会党列弗", + "displayName-count-other": "保加利亚社会党列弗", + "symbol": "BGM" + }, + "BGN": { + "displayName": "保加利亚列弗", + "displayName-count-other": "保加利亚新列弗", + "symbol": "BGN" + }, + "BGO": { + "displayName": "保加利亚列弗 (1879–1952)", + "displayName-count-other": "保加利亚列弗 (1879–1952)", + "symbol": "BGO" + }, + "BHD": { + "displayName": "巴林第纳尔", + "displayName-count-other": "巴林第纳尔", + "symbol": "BHD" + }, + "BIF": { + "displayName": "布隆迪法郎", + "displayName-count-other": "布隆迪法郎", + "symbol": "BIF" + }, + "BMD": { + "displayName": "百慕大元", + "displayName-count-other": "百慕大元", + "symbol": "BMD", + "symbol-alt-narrow": "$" + }, + "BND": { + "displayName": "文莱元", + "displayName-count-other": "文莱元", + "symbol": "BND", + "symbol-alt-narrow": "$" + }, + "BOB": { + "displayName": "玻利维亚诺", + "displayName-count-other": "玻利维亚诺", + "symbol": "BOB", + "symbol-alt-narrow": "Bs" + }, + "BOL": { + "displayName": "玻利维亚诺 (1863–1963)", + "displayName-count-other": "玻利维亚诺 (1863–1963)", + "symbol": "BOL" + }, + "BOP": { + "displayName": "玻利维亚比索", + "displayName-count-other": "玻利维亚比索", + "symbol": "BOP" + }, + "BOV": { + "displayName": "玻利维亚 Mvdol（资金）", + "displayName-count-other": "玻利维亚 Mvdol（资金）", + "symbol": "BOV" + }, + "BRB": { + "displayName": "巴西新克鲁赛罗 (1967–1986)", + "displayName-count-other": "巴西新克鲁赛罗 (1967–1986)", + "symbol": "BRB" + }, + "BRC": { + "displayName": "巴西克鲁扎多 (1986–1989)", + "displayName-count-other": "巴西克鲁扎多 (1986–1989)", + "symbol": "BRC" + }, + "BRE": { + "displayName": "巴西克鲁塞罗 (1990–1993)", + "displayName-count-other": "巴西克鲁塞罗 (1990–1993)", + "symbol": "BRE" + }, + "BRL": { + "displayName": "巴西雷亚尔", + "displayName-count-other": "巴西雷亚尔", + "symbol": "R$", + "symbol-alt-narrow": "R$" + }, + "BRN": { + "displayName": "巴西新克鲁扎多 (1989–1990)", + "displayName-count-other": "巴西新克鲁扎多 (1989–1990)", + "symbol": "BRN" + }, + "BRR": { + "displayName": "巴西克鲁塞罗 (1993–1994)", + "displayName-count-other": "巴西克鲁塞罗 (1993–1994)", + "symbol": "BRR" + }, + "BRZ": { + "displayName": "巴西克鲁塞罗 (1942–1967)", + "displayName-count-other": "巴西克鲁塞罗 (1942–1967)", + "symbol": "BRZ" + }, + "BSD": { + "displayName": "巴哈马元", + "displayName-count-other": "巴哈马元", + "symbol": "BSD", + "symbol-alt-narrow": "$" + }, + "BTN": { + "displayName": "不丹努尔特鲁姆", + "displayName-count-other": "不丹努尔特鲁姆", + "symbol": "BTN" + }, + "BUK": { + "displayName": "缅元", + "symbol": "BUK" + }, + "BWP": { + "displayName": "博茨瓦纳普拉", + "displayName-count-other": "博茨瓦纳普拉", + "symbol": "BWP", + "symbol-alt-narrow": "P" + }, + "BYB": { + "displayName": "白俄罗斯新卢布 (1994–1999)", + "displayName-count-other": "白俄罗斯新卢布 (1994–1999)", + "symbol": "BYB" + }, + "BYN": { + "displayName": "白俄罗斯卢布", + "displayName-count-other": "白俄罗斯卢布", + "symbol": "BYN", + "symbol-alt-narrow": "р." + }, + "BYR": { + "displayName": "白俄罗斯卢布 (2000–2016)", + "displayName-count-other": "白俄罗斯卢布 (2000–2016)", + "symbol": "BYR" + }, + "BZD": { + "displayName": "伯利兹元", + "displayName-count-other": "伯利兹元", + "symbol": "BZD", + "symbol-alt-narrow": "$" + }, + "CAD": { + "displayName": "加拿大元", + "displayName-count-other": "加拿大元", + "symbol": "CA$", + "symbol-alt-narrow": "$" + }, + "CDF": { + "displayName": "刚果法郎", + "displayName-count-other": "刚果法郎", + "symbol": "CDF" + }, + "CHE": { + "displayName": "欧元 (WIR)", + "displayName-count-other": "欧元 (WIR)", + "symbol": "CHE" + }, + "CHF": { + "displayName": "瑞士法郎", + "displayName-count-other": "瑞士法郎", + "symbol": "CHF" + }, + "CHW": { + "displayName": "法郎 (WIR)", + "displayName-count-other": "法郎 (WIR)", + "symbol": "CHW" + }, + "CLE": { + "displayName": "智利埃斯库多", + "displayName-count-other": "智利埃斯库多", + "symbol": "CLE" + }, + "CLF": { + "displayName": "智利（资金）", + "displayName-count-other": "智利（资金）", + "symbol": "CLF" + }, + "CLP": { + "displayName": "智利比索", + "displayName-count-other": "智利比索", + "symbol": "CLP", + "symbol-alt-narrow": "$" + }, + "CNY": { + "displayName": "人民币", + "displayName-count-other": "人民币", + "symbol": "￥", + "symbol-alt-narrow": "¥" + }, + "COP": { + "displayName": "哥伦比亚比索", + "displayName-count-other": "哥伦比亚比索", + "symbol": "COP", + "symbol-alt-narrow": "$" + }, + "COU": { + "displayName": "哥伦比亚币", + "displayName-count-other": "哥伦比亚币", + "symbol": "COU" + }, + "CRC": { + "displayName": "哥斯达黎加科朗", + "displayName-count-other": "哥斯达黎加科朗", + "symbol": "CRC", + "symbol-alt-narrow": "₡" + }, + "CSD": { + "displayName": "旧塞尔维亚第纳尔", + "displayName-count-other": "旧塞尔维亚第纳尔", + "symbol": "CSD" + }, + "CSK": { + "displayName": "捷克硬克朗", + "displayName-count-other": "捷克硬克朗", + "symbol": "CSK" + }, + "CUC": { + "displayName": "古巴可兑换比索", + "displayName-count-other": "古巴可兑换比索", + "symbol": "CUC", + "symbol-alt-narrow": "$" + }, + "CUP": { + "displayName": "古巴比索", + "displayName-count-other": "古巴比索", + "symbol": "CUP", + "symbol-alt-narrow": "$" + }, + "CVE": { + "displayName": "佛得角埃斯库多", + "displayName-count-other": "佛得角埃斯库多", + "symbol": "CVE" + }, + "CYP": { + "displayName": "塞浦路斯镑", + "displayName-count-other": "塞浦路斯镑", + "symbol": "CYP" + }, + "CZK": { + "displayName": "捷克克朗", + "displayName-count-other": "捷克克朗", + "symbol": "CZK", + "symbol-alt-narrow": "Kč" + }, + "DDM": { + "displayName": "东德奥斯特马克", + "displayName-count-other": "东德奥斯特马克", + "symbol": "DDM" + }, + "DEM": { + "displayName": "德国马克", + "displayName-count-other": "德国马克", + "symbol": "DEM" + }, + "DJF": { + "displayName": "吉布提法郎", + "displayName-count-other": "吉布提法郎", + "symbol": "DJF" + }, + "DKK": { + "displayName": "丹麦克朗", + "displayName-count-other": "丹麦克朗", + "symbol": "DKK", + "symbol-alt-narrow": "kr" + }, + "DOP": { + "displayName": "多米尼加比索", + "displayName-count-other": "多米尼加比索", + "symbol": "DOP", + "symbol-alt-narrow": "$" + }, + "DZD": { + "displayName": "阿尔及利亚第纳尔", + "displayName-count-other": "阿尔及利亚第纳尔", + "symbol": "DZD" + }, + "ECS": { + "displayName": "厄瓜多尔苏克雷", + "displayName-count-other": "厄瓜多尔苏克雷", + "symbol": "ECS" + }, + "ECV": { + "displayName": "厄瓜多尔 (UVC)", + "displayName-count-other": "厄瓜多尔 (UVC)", + "symbol": "ECV" + }, + "EEK": { + "displayName": "爱沙尼亚克朗", + "displayName-count-other": "爱沙尼亚克朗", + "symbol": "EEK" + }, + "EGP": { + "displayName": "埃及镑", + "displayName-count-other": "埃及镑", + "symbol": "EGP", + "symbol-alt-narrow": "E£" + }, + "ERN": { + "displayName": "厄立特里亚纳克法", + "displayName-count-other": "厄立特里亚纳克法", + "symbol": "ERN" + }, + "ESA": { + "displayName": "西班牙比塞塔（帐户 A）", + "displayName-count-other": "西班牙比塞塔（帐户 A）", + "symbol": "ESA" + }, + "ESB": { + "displayName": "西班牙比塞塔（兑换帐户）", + "displayName-count-other": "西班牙比塞塔（兑换帐户）", + "symbol": "ESB" + }, + "ESP": { + "displayName": "西班牙比塞塔", + "displayName-count-other": "西班牙比塞塔", + "symbol": "ESP", + "symbol-alt-narrow": "₧" + }, + "ETB": { + "displayName": "埃塞俄比亚比尔", + "displayName-count-other": "埃塞俄比亚比尔", + "symbol": "ETB" + }, + "EUR": { + "displayName": "欧元", + "displayName-count-other": "欧元", + "symbol": "€", + "symbol-alt-narrow": "€" + }, + "FIM": { + "displayName": "芬兰马克", + "displayName-count-other": "芬兰马克", + "symbol": "FIM" + }, + "FJD": { + "displayName": "斐济元", + "displayName-count-other": "斐济元", + "symbol": "FJD", + "symbol-alt-narrow": "$" + }, + "FKP": { + "displayName": "福克兰群岛镑", + "displayName-count-other": "福克兰群岛镑", + "symbol": "FKP", + "symbol-alt-narrow": "£" + }, + "FRF": { + "displayName": "法国法郎", + "displayName-count-other": "法国法郎", + "symbol": "FRF" + }, + "GBP": { + "displayName": "英镑", + "displayName-count-other": "英镑", + "symbol": "£", + "symbol-alt-narrow": "£" + }, + "GEK": { + "displayName": "乔治亚库蓬拉瑞特", + "displayName-count-other": "乔治亚库蓬拉瑞特", + "symbol": "GEK" + }, + "GEL": { + "displayName": "格鲁吉亚拉里", + "displayName-count-other": "格鲁吉亚拉里", + "symbol": "GEL", + "symbol-alt-narrow": "₾", + "symbol-alt-variant": "₾" + }, + "GHC": { + "displayName": "加纳塞第", + "displayName-count-other": "加纳塞第", + "symbol": "GHC" + }, + "GHS": { + "displayName": "加纳塞地", + "displayName-count-other": "加纳塞地", + "symbol": "GHS" + }, + "GIP": { + "displayName": "直布罗陀镑", + "displayName-count-other": "直布罗陀镑", + "symbol": "GIP", + "symbol-alt-narrow": "£" + }, + "GMD": { + "displayName": "冈比亚达拉西", + "displayName-count-other": "冈比亚达拉西", + "symbol": "GMD" + }, + "GNF": { + "displayName": "几内亚法郎", + "displayName-count-other": "几内亚法郎", + "symbol": "GNF", + "symbol-alt-narrow": "FG" + }, + "GNS": { + "displayName": "几内亚西里", + "displayName-count-other": "几内亚西里", + "symbol": "GNS" + }, + "GQE": { + "displayName": "赤道几内亚埃奎勒", + "displayName-count-other": "赤道几内亚埃奎勒", + "symbol": "GQE" + }, + "GRD": { + "displayName": "希腊德拉克马", + "displayName-count-other": "希腊德拉克马", + "symbol": "GRD" + }, + "GTQ": { + "displayName": "危地马拉格查尔", + "displayName-count-other": "危地马拉格查尔", + "symbol": "GTQ", + "symbol-alt-narrow": "Q" + }, + "GWE": { + "displayName": "葡萄牙几内亚埃斯库多", + "displayName-count-other": "葡萄牙几内亚埃斯库多", + "symbol": "GWE" + }, + "GWP": { + "displayName": "几内亚比绍比索", + "displayName-count-other": "几内亚比绍比索", + "symbol": "GWP" + }, + "GYD": { + "displayName": "圭亚那元", + "displayName-count-other": "圭亚那元", + "symbol": "GYD", + "symbol-alt-narrow": "$" + }, + "HKD": { + "displayName": "港元", + "displayName-count-other": "港元", + "symbol": "HK$", + "symbol-alt-narrow": "$" + }, + "HNL": { + "displayName": "洪都拉斯伦皮拉", + "displayName-count-other": "洪都拉斯伦皮拉", + "symbol": "HNL", + "symbol-alt-narrow": "L" + }, + "HRD": { + "displayName": "克罗地亚第纳尔", + "displayName-count-other": "克罗地亚第纳尔", + "symbol": "HRD" + }, + "HRK": { + "displayName": "克罗地亚库纳", + "displayName-count-other": "克罗地亚库纳", + "symbol": "HRK", + "symbol-alt-narrow": "kn" + }, + "HTG": { + "displayName": "海地古德", + "displayName-count-other": "海地古德", + "symbol": "HTG" + }, + "HUF": { + "displayName": "匈牙利福林", + "displayName-count-other": "匈牙利福林", + "symbol": "HUF", + "symbol-alt-narrow": "Ft" + }, + "IDR": { + "displayName": "印度尼西亚盾", + "displayName-count-other": "印度尼西亚盾", + "symbol": "IDR", + "symbol-alt-narrow": "Rp" + }, + "IEP": { + "displayName": "爱尔兰镑", + "displayName-count-other": "爱尔兰镑", + "symbol": "IEP" + }, + "ILP": { + "displayName": "以色列镑", + "displayName-count-other": "以色列镑", + "symbol": "ILP" + }, + "ILR": { + "displayName": "以色列谢克尔(1980–1985)", + "displayName-count-other": "以色列谢克尔(1980–1985)", + "symbol": "ILS" + }, + "ILS": { + "displayName": "以色列新谢克尔", + "displayName-count-other": "以色列新谢克尔", + "symbol": "₪", + "symbol-alt-narrow": "₪" + }, + "INR": { + "displayName": "印度卢比", + "displayName-count-other": "印度卢比", + "symbol": "₹", + "symbol-alt-narrow": "₹" + }, + "IQD": { + "displayName": "伊拉克第纳尔", + "displayName-count-other": "伊拉克第纳尔", + "symbol": "IQD" + }, + "IRR": { + "displayName": "伊朗里亚尔", + "displayName-count-other": "伊朗里亚尔", + "symbol": "IRR" + }, + "ISJ": { + "displayName": "冰岛克朗(1918–1981)", + "displayName-count-other": "冰岛克朗(1918–1981)", + "symbol": "ISJ" + }, + "ISK": { + "displayName": "冰岛克朗", + "displayName-count-other": "冰岛克朗", + "symbol": "ISK", + "symbol-alt-narrow": "kr" + }, + "ITL": { + "displayName": "意大利里拉", + "displayName-count-other": "意大利里拉", + "symbol": "ITL" + }, + "JMD": { + "displayName": "牙买加元", + "displayName-count-other": "牙买加元", + "symbol": "JMD", + "symbol-alt-narrow": "$" + }, + "JOD": { + "displayName": "约旦第纳尔", + "displayName-count-other": "约旦第纳尔", + "symbol": "JOD" + }, + "JPY": { + "displayName": "日元", + "displayName-count-other": "日元", + "symbol": "JP¥", + "symbol-alt-narrow": "¥" + }, + "KES": { + "displayName": "肯尼亚先令", + "displayName-count-other": "肯尼亚先令", + "symbol": "KES" + }, + "KGS": { + "displayName": "吉尔吉斯斯坦索姆", + "displayName-count-other": "吉尔吉斯斯坦索姆", + "symbol": "KGS" + }, + "KHR": { + "displayName": "柬埔寨瑞尔", + "displayName-count-other": "柬埔寨瑞尔", + "symbol": "KHR", + "symbol-alt-narrow": "៛" + }, + "KMF": { + "displayName": "科摩罗法郎", + "displayName-count-other": "科摩罗法郎", + "symbol": "KMF", + "symbol-alt-narrow": "CF" + }, + "KPW": { + "displayName": "朝鲜元", + "displayName-count-other": "朝鲜元", + "symbol": "KPW", + "symbol-alt-narrow": "₩" + }, + "KRH": { + "displayName": "韩元 (1953–1962)", + "symbol": "KRH" + }, + "KRO": { + "displayName": "韩元 (1945–1953)", + "symbol": "KRO" + }, + "KRW": { + "displayName": "韩元", + "displayName-count-other": "韩元", + "symbol": "￦", + "symbol-alt-narrow": "₩" + }, + "KWD": { + "displayName": "科威特第纳尔", + "displayName-count-other": "科威特第纳尔", + "symbol": "KWD" + }, + "KYD": { + "displayName": "开曼元", + "displayName-count-other": "开曼元", + "symbol": "KYD", + "symbol-alt-narrow": "$" + }, + "KZT": { + "displayName": "哈萨克斯坦坚戈", + "displayName-count-other": "哈萨克斯坦坚戈", + "symbol": "KZT", + "symbol-alt-narrow": "₸" + }, + "LAK": { + "displayName": "老挝基普", + "displayName-count-other": "老挝基普", + "symbol": "LAK", + "symbol-alt-narrow": "₭" + }, + "LBP": { + "displayName": "黎巴嫩镑", + "displayName-count-other": "黎巴嫩镑", + "symbol": "LBP", + "symbol-alt-narrow": "L£" + }, + "LKR": { + "displayName": "斯里兰卡卢比", + "displayName-count-other": "斯里兰卡卢比", + "symbol": "LKR", + "symbol-alt-narrow": "Rs" + }, + "LRD": { + "displayName": "利比里亚元", + "displayName-count-other": "利比里亚元", + "symbol": "LRD", + "symbol-alt-narrow": "$" + }, + "LSL": { + "displayName": "莱索托洛蒂", + "displayName-count-other": "莱索托洛蒂", + "symbol": "LSL" + }, + "LTL": { + "displayName": "立陶宛立特", + "displayName-count-other": "立陶宛立特", + "symbol": "LTL", + "symbol-alt-narrow": "Lt" + }, + "LTT": { + "displayName": "立陶宛塔咯呐司", + "displayName-count-other": "立陶宛塔咯呐司", + "symbol": "LTT" + }, + "LUC": { + "displayName": "卢森堡可兑换法郎", + "displayName-count-other": "卢森堡可兑换法郎", + "symbol": "LUC" + }, + "LUF": { + "displayName": "卢森堡法郎", + "displayName-count-other": "卢森堡法郎", + "symbol": "LUF" + }, + "LUL": { + "displayName": "卢森堡金融法郎", + "displayName-count-other": "卢森堡金融法郎", + "symbol": "LUL" + }, + "LVL": { + "displayName": "拉脱维亚拉特", + "displayName-count-other": "拉脱维亚拉特", + "symbol": "LVL", + "symbol-alt-narrow": "Ls" + }, + "LVR": { + "displayName": "拉脱维亚卢布", + "displayName-count-other": "拉脱维亚卢布", + "symbol": "LVR" + }, + "LYD": { + "displayName": "利比亚第纳尔", + "displayName-count-other": "利比亚第纳尔", + "symbol": "LYD" + }, + "MAD": { + "displayName": "摩洛哥迪拉姆", + "displayName-count-other": "摩洛哥迪拉姆", + "symbol": "MAD" + }, + "MAF": { + "displayName": "摩洛哥法郎", + "displayName-count-other": "摩洛哥法郎", + "symbol": "MAF" + }, + "MCF": { + "displayName": "摩纳哥法郎", + "displayName-count-other": "摩纳哥法郎", + "symbol": "MCF" + }, + "MDC": { + "displayName": "摩尔多瓦库邦", + "displayName-count-other": "摩尔多瓦库邦", + "symbol": "MDC" + }, + "MDL": { + "displayName": "摩尔多瓦列伊", + "displayName-count-other": "摩尔多瓦列伊", + "symbol": "MDL" + }, + "MGA": { + "displayName": "马达加斯加阿里亚里", + "displayName-count-other": "马达加斯加阿里亚里", + "symbol": "MGA", + "symbol-alt-narrow": "Ar" + }, + "MGF": { + "displayName": "马达加斯加法郎", + "displayName-count-other": "马达加斯加法郎", + "symbol": "MGF" + }, + "MKD": { + "displayName": "马其顿第纳尔", + "displayName-count-other": "马其顿第纳尔", + "symbol": "MKD" + }, + "MKN": { + "displayName": "马其顿第纳尔 (1992–1993)", + "displayName-count-other": "马其顿第纳尔 (1992–1993)", + "symbol": "MKN" + }, + "MLF": { + "displayName": "马里法郎", + "displayName-count-other": "马里法郎", + "symbol": "MLF" + }, + "MMK": { + "displayName": "缅甸元", + "displayName-count-other": "缅甸元", + "symbol": "MMK", + "symbol-alt-narrow": "K" + }, + "MNT": { + "displayName": "蒙古图格里克", + "displayName-count-other": "蒙古图格里克", + "symbol": "MNT", + "symbol-alt-narrow": "₮" + }, + "MOP": { + "displayName": "澳门币", + "displayName-count-other": "澳门元", + "symbol": "MOP" + }, + "MRO": { + "displayName": "毛里塔尼亚乌吉亚", + "displayName-count-other": "毛里塔尼亚乌吉亚", + "symbol": "MRO" + }, + "MTL": { + "displayName": "马耳他里拉", + "displayName-count-other": "马耳他里拉", + "symbol": "MTL" + }, + "MTP": { + "displayName": "马耳他镑", + "displayName-count-other": "马耳他镑", + "symbol": "MTP" + }, + "MUR": { + "displayName": "毛里求斯卢比", + "displayName-count-other": "毛里求斯卢比", + "symbol": "MUR", + "symbol-alt-narrow": "Rs" + }, + "MVP": { + "displayName": "马尔代夫卢比(1947–1981)", + "displayName-count-other": "马尔代夫卢比(1947–1981)" + }, + "MVR": { + "displayName": "马尔代夫卢菲亚", + "displayName-count-other": "马尔代夫卢菲亚", + "symbol": "MVR" + }, + "MWK": { + "displayName": "马拉维克瓦查", + "displayName-count-other": "马拉维克瓦查", + "symbol": "MWK" + }, + "MXN": { + "displayName": "墨西哥比索", + "displayName-count-other": "墨西哥比索", + "symbol": "MX$", + "symbol-alt-narrow": "$" + }, + "MXP": { + "displayName": "墨西哥银比索 (1861–1992)", + "displayName-count-other": "墨西哥银比索 (1861–1992)", + "symbol": "MXP" + }, + "MXV": { + "displayName": "墨西哥（资金）", + "displayName-count-other": "墨西哥（资金）", + "symbol": "MXV" + }, + "MYR": { + "displayName": "马来西亚林吉特", + "displayName-count-other": "马来西亚林吉特", + "symbol": "MYR", + "symbol-alt-narrow": "RM" + }, + "MZE": { + "displayName": "莫桑比克埃斯库多", + "displayName-count-other": "莫桑比克埃斯库多", + "symbol": "MZE" + }, + "MZM": { + "displayName": "旧莫桑比克美提卡", + "displayName-count-other": "旧莫桑比克美提卡", + "symbol": "MZM" + }, + "MZN": { + "displayName": "莫桑比克美提卡", + "displayName-count-other": "莫桑比克美提卡", + "symbol": "MZN" + }, + "NAD": { + "displayName": "纳米比亚元", + "displayName-count-other": "纳米比亚元", + "symbol": "NAD", + "symbol-alt-narrow": "$" + }, + "NGN": { + "displayName": "尼日利亚奈拉", + "displayName-count-other": "尼日利亚奈拉", + "symbol": "NGN", + "symbol-alt-narrow": "₦" + }, + "NIC": { + "displayName": "尼加拉瓜科多巴 (1988–1991)", + "displayName-count-other": "尼加拉瓜科多巴 (1988–1991)", + "symbol": "NIC" + }, + "NIO": { + "displayName": "尼加拉瓜科多巴", + "displayName-count-other": "尼加拉瓜金科多巴", + "symbol": "NIO", + "symbol-alt-narrow": "C$" + }, + "NLG": { + "displayName": "荷兰盾", + "displayName-count-other": "荷兰盾", + "symbol": "NLG" + }, + "NOK": { + "displayName": "挪威克朗", + "displayName-count-other": "挪威克朗", + "symbol": "NOK", + "symbol-alt-narrow": "kr" + }, + "NPR": { + "displayName": "尼泊尔卢比", + "displayName-count-other": "尼泊尔卢比", + "symbol": "NPR", + "symbol-alt-narrow": "Rs" + }, + "NZD": { + "displayName": "新西兰元", + "displayName-count-other": "新西兰元", + "symbol": "NZ$", + "symbol-alt-narrow": "$" + }, + "OMR": { + "displayName": "阿曼里亚尔", + "displayName-count-other": "阿曼里亚尔", + "symbol": "OMR" + }, + "PAB": { + "displayName": "巴拿马巴波亚", + "displayName-count-other": "巴拿马巴波亚", + "symbol": "PAB" + }, + "PEI": { + "displayName": "秘鲁印第", + "displayName-count-other": "秘鲁印第", + "symbol": "PEI" + }, + "PEN": { + "displayName": "秘鲁索尔", + "displayName-count-other": "秘鲁索尔", + "symbol": "PEN" + }, + "PES": { + "displayName": "秘鲁索尔 (1863–1965)", + "displayName-count-other": "秘鲁索尔 (1863–1965)", + "symbol": "PES" + }, + "PGK": { + "displayName": "巴布亚新几内亚基那", + "displayName-count-other": "巴布亚新几内亚基那", + "symbol": "PGK" + }, + "PHP": { + "displayName": "菲律宾比索", + "displayName-count-other": "菲律宾比索", + "symbol": "PHP", + "symbol-alt-narrow": "₱" + }, + "PKR": { + "displayName": "巴基斯坦卢比", + "displayName-count-other": "巴基斯坦卢比", + "symbol": "PKR", + "symbol-alt-narrow": "Rs" + }, + "PLN": { + "displayName": "波兰兹罗提", + "displayName-count-other": "波兰兹罗提", + "symbol": "PLN", + "symbol-alt-narrow": "zł" + }, + "PLZ": { + "displayName": "波兰兹罗提 (1950–1995)", + "displayName-count-other": "波兰兹罗提 (1950–1995)", + "symbol": "PLZ" + }, + "PTE": { + "displayName": "葡萄牙埃斯库多", + "displayName-count-other": "葡萄牙埃斯库多", + "symbol": "PTE" + }, + "PYG": { + "displayName": "巴拉圭瓜拉尼", + "displayName-count-other": "巴拉圭瓜拉尼", + "symbol": "PYG", + "symbol-alt-narrow": "₲" + }, + "QAR": { + "displayName": "卡塔尔里亚尔", + "displayName-count-other": "卡塔尔里亚尔", + "symbol": "QAR" + }, + "RHD": { + "displayName": "罗得西亚元", + "displayName-count-other": "罗得西亚元", + "symbol": "RHD" + }, + "ROL": { + "displayName": "旧罗马尼亚列伊", + "displayName-count-other": "旧罗马尼亚列伊", + "symbol": "ROL" + }, + "RON": { + "displayName": "罗马尼亚列伊", + "displayName-count-other": "罗马尼亚列伊", + "symbol": "RON", + "symbol-alt-narrow": "L" + }, + "RSD": { + "displayName": "塞尔维亚第纳尔", + "displayName-count-other": "塞尔维亚第纳尔", + "symbol": "RSD" + }, + "RUB": { + "displayName": "俄罗斯卢布", + "displayName-count-other": "俄罗斯卢布", + "symbol": "RUB", + "symbol-alt-narrow": "₽" + }, + "RUR": { + "displayName": "俄国卢布 (1991–1998)", + "displayName-count-other": "俄国卢布 (1991–1998)", + "symbol": "RUR", + "symbol-alt-narrow": "р." + }, + "RWF": { + "displayName": "卢旺达法郎", + "displayName-count-other": "卢旺达法郎", + "symbol": "RWF", + "symbol-alt-narrow": "RF" + }, + "SAR": { + "displayName": "沙特里亚尔", + "displayName-count-other": "沙特里亚尔", + "symbol": "SAR" + }, + "SBD": { + "displayName": "所罗门群岛元", + "displayName-count-other": "所罗门群岛元", + "symbol": "SBD", + "symbol-alt-narrow": "$" + }, + "SCR": { + "displayName": "塞舌尔卢比", + "displayName-count-other": "塞舌尔卢比", + "symbol": "SCR" + }, + "SDD": { + "displayName": "苏丹第纳尔 (1992–2007)", + "displayName-count-other": "苏丹第纳尔 (1992–2007)", + "symbol": "SDD" + }, + "SDG": { + "displayName": "苏丹镑", + "displayName-count-other": "苏丹镑", + "symbol": "SDG" + }, + "SDP": { + "displayName": "旧苏丹镑", + "displayName-count-other": "旧苏丹镑", + "symbol": "SDP" + }, + "SEK": { + "displayName": "瑞典克朗", + "displayName-count-other": "瑞典克朗", + "symbol": "SEK", + "symbol-alt-narrow": "kr" + }, + "SGD": { + "displayName": "新加坡元", + "displayName-count-other": "新加坡元", + "symbol": "SGD", + "symbol-alt-narrow": "$" + }, + "SHP": { + "displayName": "圣赫勒拿群岛磅", + "displayName-count-other": "圣赫勒拿群岛磅", + "symbol": "SHP", + "symbol-alt-narrow": "£" + }, + "SIT": { + "displayName": "斯洛文尼亚托拉尔", + "displayName-count-other": "斯洛文尼亚托拉尔", + "symbol": "SIT" + }, + "SKK": { + "displayName": "斯洛伐克克朗", + "displayName-count-other": "斯洛伐克克朗", + "symbol": "SKK" + }, + "SLL": { + "displayName": "塞拉利昂利昂", + "displayName-count-other": "塞拉利昂利昂", + "symbol": "SLL" + }, + "SOS": { + "displayName": "索马里先令", + "displayName-count-other": "索马里先令", + "symbol": "SOS" + }, + "SRD": { + "displayName": "苏里南元", + "displayName-count-other": "苏里南元", + "symbol": "SRD", + "symbol-alt-narrow": "$" + }, + "SRG": { + "displayName": "苏里南盾", + "displayName-count-other": "苏里南盾", + "symbol": "SRG" + }, + "SSP": { + "displayName": "南苏丹镑", + "displayName-count-other": "南苏丹镑", + "symbol": "SSP", + "symbol-alt-narrow": "£" + }, + "STD": { + "displayName": "圣多美和普林西比多布拉", + "displayName-count-other": "圣多美和普林西比多布拉", + "symbol": "STD", + "symbol-alt-narrow": "Db" + }, + "SUR": { + "displayName": "苏联卢布", + "displayName-count-other": "苏联卢布", + "symbol": "SUR" + }, + "SVC": { + "displayName": "萨尔瓦多科朗", + "displayName-count-other": "萨尔瓦多科朗", + "symbol": "SVC" + }, + "SYP": { + "displayName": "叙利亚镑", + "displayName-count-other": "叙利亚镑", + "symbol": "SYP", + "symbol-alt-narrow": "£" + }, + "SZL": { + "displayName": "斯威士兰里兰吉尼", + "displayName-count-other": "斯威士兰里兰吉尼", + "symbol": "SZL" + }, + "THB": { + "displayName": "泰铢", + "displayName-count-other": "泰铢", + "symbol": "THB", + "symbol-alt-narrow": "฿" + }, + "TJR": { + "displayName": "塔吉克斯坦卢布", + "displayName-count-other": "塔吉克斯坦卢布", + "symbol": "TJR" + }, + "TJS": { + "displayName": "塔吉克斯坦索莫尼", + "displayName-count-other": "塔吉克斯坦索莫尼", + "symbol": "TJS" + }, + "TMM": { + "displayName": "土库曼斯坦马纳特 (1993–2009)", + "displayName-count-other": "土库曼斯坦马纳特 (1993–2009)", + "symbol": "TMM" + }, + "TMT": { + "displayName": "土库曼斯坦马纳特", + "displayName-count-other": "土库曼斯坦马纳特", + "symbol": "TMT" + }, + "TND": { + "displayName": "突尼斯第纳尔", + "displayName-count-other": "突尼斯第纳尔", + "symbol": "TND" + }, + "TOP": { + "displayName": "汤加潘加", + "displayName-count-other": "汤加潘加", + "symbol": "TOP", + "symbol-alt-narrow": "T$" + }, + "TPE": { + "displayName": "帝汶埃斯库多", + "symbol": "TPE" + }, + "TRL": { + "displayName": "土耳其里拉 (1922–2005)", + "displayName-count-other": "土耳其里拉 (1922–2005)", + "symbol": "TRL" + }, + "TRY": { + "displayName": "土耳其里拉", + "displayName-count-other": "土耳其里拉", + "symbol": "TRY", + "symbol-alt-narrow": "₺", + "symbol-alt-variant": "TL" + }, + "TTD": { + "displayName": "特立尼达和多巴哥元", + "displayName-count-other": "特立尼达和多巴哥元", + "symbol": "TTD", + "symbol-alt-narrow": "$" + }, + "TWD": { + "displayName": "新台币", + "displayName-count-other": "新台币", + "symbol": "NT$", + "symbol-alt-narrow": "NT$" + }, + "TZS": { + "displayName": "坦桑尼亚先令", + "displayName-count-other": "坦桑尼亚先令", + "symbol": "TZS" + }, + "UAH": { + "displayName": "乌克兰格里夫纳", + "displayName-count-other": "乌克兰格里夫纳", + "symbol": "UAH", + "symbol-alt-narrow": "₴" + }, + "UAK": { + "displayName": "乌克兰币", + "displayName-count-other": "乌克兰币", + "symbol": "UAK" + }, + "UGS": { + "displayName": "乌干达先令 (1966–1987)", + "displayName-count-other": "乌干达先令 (1966–1987)", + "symbol": "UGS" + }, + "UGX": { + "displayName": "乌干达先令", + "displayName-count-other": "乌干达先令", + "symbol": "UGX" + }, + "USD": { + "displayName": "美元", + "displayName-count-other": "美元", + "symbol": "US$", + "symbol-alt-narrow": "$" + }, + "USN": { + "displayName": "美元（次日）", + "displayName-count-other": "美元（次日）", + "symbol": "USN" + }, + "USS": { + "displayName": "美元（当日）", + "displayName-count-other": "美元（当日）", + "symbol": "USS" + }, + "UYI": { + "displayName": "乌拉圭比索（索引单位）", + "displayName-count-other": "乌拉圭比索（索引单位）", + "symbol": "UYI" + }, + "UYP": { + "displayName": "乌拉圭比索 (1975–1993)", + "displayName-count-other": "乌拉圭比索 (1975–1993)", + "symbol": "UYP" + }, + "UYU": { + "displayName": "乌拉圭比索", + "displayName-count-other": "乌拉圭比索", + "symbol": "UYU", + "symbol-alt-narrow": "$" + }, + "UZS": { + "displayName": "乌兹别克斯坦苏姆", + "displayName-count-other": "乌兹别克斯坦苏姆", + "symbol": "UZS" + }, + "VEB": { + "displayName": "委内瑞拉玻利瓦尔 (1871–2008)", + "displayName-count-other": "委内瑞拉玻利瓦尔 (1871–2008)", + "symbol": "VEB" + }, + "VEF": { + "displayName": "委内瑞拉玻利瓦尔", + "displayName-count-other": "委内瑞拉玻利瓦尔", + "symbol": "VEF", + "symbol-alt-narrow": "Bs" + }, + "VND": { + "displayName": "越南盾", + "displayName-count-other": "越南盾", + "symbol": "₫", + "symbol-alt-narrow": "₫" + }, + "VNN": { + "displayName": "越南盾 (1978–1985)", + "symbol": "VNN" + }, + "VUV": { + "displayName": "瓦努阿图瓦图", + "displayName-count-other": "瓦努阿图瓦图", + "symbol": "VUV" + }, + "WST": { + "displayName": "萨摩亚塔拉", + "displayName-count-other": "萨摩亚塔拉", + "symbol": "WST" + }, + "XAF": { + "displayName": "中非法郎", + "displayName-count-other": "中非法郎", + "symbol": "FCFA" + }, + "XAG": { + "displayName": "银", + "symbol": "XAG" + }, + "XAU": { + "displayName": "黄金", + "symbol": "XAU" + }, + "XBA": { + "displayName": "欧洲复合单位", + "symbol": "XBA" + }, + "XBB": { + "displayName": "欧洲货币联盟", + "symbol": "XBB" + }, + "XBC": { + "displayName": "欧洲计算单位 (XBC)", + "symbol": "XBC" + }, + "XBD": { + "displayName": "欧洲计算单位 (XBD)", + "symbol": "XBD" + }, + "XCD": { + "displayName": "东加勒比元", + "displayName-count-other": "东加勒比元", + "symbol": "EC$", + "symbol-alt-narrow": "$" + }, + "XDR": { + "displayName": "特别提款权", + "symbol": "XDR" + }, + "XEU": { + "displayName": "欧洲货币单位", + "displayName-count-other": "欧洲货币单位", + "symbol": "XEU" + }, + "XFO": { + "displayName": "法国金法郎", + "symbol": "XFO" + }, + "XFU": { + "displayName": "法国法郎 (UIC)", + "symbol": "XFU" + }, + "XOF": { + "displayName": "西非法郎", + "displayName-count-other": "西非法郎", + "symbol": "CFA" + }, + "XPD": { + "displayName": "钯", + "symbol": "XPD" + }, + "XPF": { + "displayName": "太平洋法郎", + "displayName-count-other": "太平洋法郎", + "symbol": "CFPF" + }, + "XPT": { + "displayName": "铂", + "symbol": "XPT" + }, + "XRE": { + "displayName": "RINET 基金", + "symbol": "XRE" + }, + "XSU": { + "displayName": "XSU", + "symbol": "XSU" + }, + "XTS": { + "displayName": "测试货币代码", + "symbol": "XTS" + }, + "XUA": { + "displayName": "XUA", + "symbol": "XUA" + }, + "XXX": { + "displayName": "未知货币", + "displayName-count-other": "（未知货币）", + "symbol": "XXX" + }, + "YDD": { + "displayName": "也门第纳尔", + "displayName-count-other": "也门第纳尔", + "symbol": "YDD" + }, + "YER": { + "displayName": "也门里亚尔", + "displayName-count-other": "也门里亚尔", + "symbol": "YER" + }, + "YUD": { + "displayName": "南斯拉夫硬第纳尔 (1966–1990)", + "displayName-count-other": "南斯拉夫硬第纳尔 (1966–1990)", + "symbol": "YUD" + }, + "YUM": { + "displayName": "南斯拉夫新第纳尔 (1994–2002)", + "displayName-count-other": "南斯拉夫新第纳尔 (1994–2002)", + "symbol": "YUM" + }, + "YUN": { + "displayName": "南斯拉夫可兑换第纳尔 (1990–1992)", + "displayName-count-other": "南斯拉夫可兑换第纳尔 (1990–1992)", + "symbol": "YUN" + }, + "YUR": { + "displayName": "南斯拉夫改良第纳尔 (1992–1993)", + "displayName-count-other": "南斯拉夫改良第纳尔 (1992–1993)", + "symbol": "YUR" + }, + "ZAL": { + "displayName": "南非兰特 (金融)", + "displayName-count-other": "南非兰特 (金融)", + "symbol": "ZAL" + }, + "ZAR": { + "displayName": "南非兰特", + "displayName-count-other": "南非兰特", + "symbol": "ZAR", + "symbol-alt-narrow": "R" + }, + "ZMK": { + "displayName": "赞比亚克瓦查 (1968–2012)", + "displayName-count-other": "赞比亚克瓦查 (1968–2012)", + "symbol": "ZMK" + }, + "ZMW": { + "displayName": "赞比亚克瓦查", + "displayName-count-other": "赞比亚克瓦查", + "symbol": "ZMW", + "symbol-alt-narrow": "ZK" + }, + "ZRN": { + "displayName": "新扎伊尔 (1993–1998)", + "displayName-count-other": "新扎伊尔 (1993–1998)", + "symbol": "ZRN" + }, + "ZRZ": { + "displayName": "扎伊尔 (1971–1993)", + "displayName-count-other": "扎伊尔 (1971–1993)", + "symbol": "ZRZ" + }, + "ZWD": { + "displayName": "津巴布韦元 (1980–2008)", + "displayName-count-other": "津巴布韦元 (1980–2008)", + "symbol": "ZWD" + }, + "ZWL": { + "displayName": "津巴布韦元 (2009)", + "displayName-count-other": "津巴布韦元 (2009)", + "symbol": "ZWL" + }, + "ZWR": { + "displayName": "津巴布韦元 (2008)", + "displayName-count-other": "津巴布韦元 (2008)", + "symbol": "ZWR" + } } - } + } } } } -} + \ No newline at end of file diff --git a/src/common/cldr-data/main/zh/ca-islamic.json b/src/common/cldr-data/main/zh/ca-islamic.json index 1a4ffdb2..596197cb 100644 --- a/src/common/cldr-data/main/zh/ca-islamic.json +++ b/src/common/cldr-data/main/zh/ca-islamic.json @@ -1,519 +1,520 @@ { - "main": { - "en": { - "identity": { - "version": { - "_number": "$Revision: 14491 $", - "_cldrVersion": "34" + "main": { + "en": { + "identity": { + "version": { + "_number": "$Revision: 14491 $", + "_cldrVersion": "34" + }, + "language": "en" }, - "language": "en" - }, - "dates": { - "calendars": { - "islamic": { - "months": { - "format": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" + "dates": { + "calendars": { + "islamic": { + "months": { + "format": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Muh.", + "2": "Saf.", + "3": "Rab. I", + "4": "Rab. II", + "5": "Jum. I", + "6": "Jum. II", + "7": "Raj.", + "8": "Sha.", + "9": "Ram.", + "10": "Shaw.", + "11": "Dhuʻl-Q.", + "12": "Dhuʻl-H." + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10", + "11": "11", + "12": "12" + }, + "wide": { + "1": "Muharram", + "2": "Safar", + "3": "Rabiʻ I", + "4": "Rabiʻ II", + "5": "Jumada I", + "6": "Jumada II", + "7": "Rajab", + "8": "Shaʻban", + "9": "Ramadan", + "10": "Shawwal", + "11": "Dhuʻl-Qiʻdah", + "12": "Dhuʻl-Hijjah" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Muh.", - "2": "Saf.", - "3": "Rab. I", - "4": "Rab. II", - "5": "Jum. I", - "6": "Jum. II", - "7": "Raj.", - "8": "Sha.", - "9": "Ram.", - "10": "Shaw.", - "11": "Dhuʻl-Q.", - "12": "Dhuʻl-H." - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10", - "11": "11", - "12": "12" - }, - "wide": { - "1": "Muharram", - "2": "Safar", - "3": "Rabiʻ I", - "4": "Rabiʻ II", - "5": "Jumada I", - "6": "Jumada II", - "7": "Rajab", - "8": "Shaʻban", - "9": "Ramadan", - "10": "Shawwal", - "11": "Dhuʻl-Qiʻdah", - "12": "Dhuʻl-Hijjah" - } - } - }, - "days": { - "format": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" + "days": { + "format": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } + }, + "stand-alone": { + "abbreviated": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "narrow": { + "sun": "S", + "mon": "M", + "tue": "T", + "wed": "W", + "thu": "T", + "fri": "F", + "sat": "S" + }, + "short": { + "sun": "Su", + "mon": "Mo", + "tue": "Tu", + "wed": "We", + "thu": "Th", + "fri": "Fr", + "sat": "Sa" + }, + "wide": { + "sun": "Sunday", + "mon": "Monday", + "tue": "Tuesday", + "wed": "Wednesday", + "thu": "Thursday", + "fri": "Friday", + "sat": "Saturday" + } } }, - "stand-alone": { - "abbreviated": { - "sun": "Sun", - "mon": "Mon", - "tue": "Tue", - "wed": "Wed", - "thu": "Thu", - "fri": "Fri", - "sat": "Sat" - }, - "narrow": { - "sun": "S", - "mon": "M", - "tue": "T", - "wed": "W", - "thu": "T", - "fri": "F", - "sat": "S" - }, - "short": { - "sun": "Su", - "mon": "Mo", - "tue": "Tu", - "wed": "We", - "thu": "Th", - "fri": "Fr", - "sat": "Sa" - }, - "wide": { - "sun": "Sunday", - "mon": "Monday", - "tue": "Tuesday", - "wed": "Wednesday", - "thu": "Thursday", - "fri": "Friday", - "sat": "Saturday" - } - } - }, - "quarters": { - "format": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" + "quarters": { + "format": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } + }, + "stand-alone": { + "abbreviated": { + "1": "Q1", + "2": "Q2", + "3": "Q3", + "4": "Q4" + }, + "narrow": { + "1": "1", + "2": "2", + "3": "3", + "4": "4" + }, + "wide": { + "1": "1st quarter", + "2": "2nd quarter", + "3": "3rd quarter", + "4": "4th quarter" + } } }, - "stand-alone": { - "abbreviated": { - "1": "Q1", - "2": "Q2", - "3": "Q3", - "4": "Q4" - }, - "narrow": { - "1": "1", - "2": "2", - "3": "3", - "4": "4" - }, - "wide": { - "1": "1st quarter", - "2": "2nd quarter", - "3": "3rd quarter", - "4": "4th quarter" - } - } - }, - "dayPeriods": { - "format": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "narrow": { - "midnight": "mi", - "am": "a", - "am-alt-variant": "am", - "noon": "n", - "pm": "p", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" - }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "in the morning", - "afternoon1": "in the afternoon", - "evening1": "in the evening", - "night1": "at night" + "dayPeriods": { + "format": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "narrow": { + "midnight": "mi", + "am": "a", + "am-alt-variant": "am", + "noon": "n", + "pm": "p", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "in the morning", + "afternoon1": "in the afternoon", + "evening1": "in the evening", + "night1": "at night" + } + }, + "stand-alone": { + "abbreviated": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "narrow": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + }, + "wide": { + "midnight": "midnight", + "am": "AM", + "am-alt-variant": "am", + "noon": "noon", + "pm": "PM", + "pm-alt-variant": "pm", + "morning1": "morning", + "afternoon1": "afternoon", + "evening1": "evening", + "night1": "night" + } } }, - "stand-alone": { - "abbreviated": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eras": { + "eraNames": { + "0": "AH" }, - "narrow": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eraAbbr": { + "0": "AH" }, - "wide": { - "midnight": "midnight", - "am": "AM", - "am-alt-variant": "am", - "noon": "noon", - "pm": "PM", - "pm-alt-variant": "pm", - "morning1": "morning", - "afternoon1": "afternoon", - "evening1": "evening", - "night1": "night" + "eraNarrow": { + "0": "AH" } - } - }, - "eras": { - "eraNames": { - "0": "AH" - }, - "eraAbbr": { - "0": "AH" }, - "eraNarrow": { - "0": "AH" - } - }, - "dateFormats": { - "full": "EEEE, MMMM d, y G", - "long": "MMMM d, y G", - "medium": "MMM d, y G", - "short": "M/d/y GGGGG" - }, - "timeFormats": { - "full": "h:mm:ss a zzzz", - "long": "h:mm:ss a z", - "medium": "h:mm:ss a", - "short": "h:mm a" - }, - "dateTimeFormats": { - "full": "{1} 'at' {0}", - "long": "{1} 'at' {0}", - "medium": "{1}, {0}", - "short": "{1}, {0}", - "availableFormats": { - "Bh": "h B", - "Bhm": "h:mm B", - "Bhms": "h:mm:ss B", - "d": "d", - "E": "ccc", - "EBhm": "E h:mm B", - "EBhms": "E h:mm:ss B", - "Ed": "d E", - "Ehm": "E h:mm a", - "EHm": "E HH:mm", - "Ehms": "E h:mm:ss a", - "EHms": "E HH:mm:ss", - "Gy": "y G", - "GyMMM": "MMM y G", - "GyMMMd": "MMM d, y G", - "GyMMMEd": "E, MMM d, y G", - "h": "h a", - "H": "HH", - "hm": "h:mm a", - "Hm": "HH:mm", - "hms": "h:mm:ss a", - "Hms": "HH:mm:ss", - "M": "L", - "Md": "M/d", - "MEd": "E, M/d", - "MMM": "LLL", - "MMMd": "MMM d", - "MMMEd": "E, MMM d", - "MMMMd": "MMMM d", - "ms": "mm:ss", - "y": "y G", - "yyyy": "y G", - "yyyyM": "M/y GGGGG", - "yyyyMd": "M/d/y GGGGG", - "yyyyMEd": "E, M/d/y GGGGG", - "yyyyMMM": "MMM y G", - "yyyyMMMd": "MMM d, y G", - "yyyyMMMEd": "E, MMM d, y G", - "yyyyMMMM": "MMMM y G", - "yyyyQQQ": "QQQ y G", - "yyyyQQQQ": "QQQQ y G" + "dateFormats": { + "full": "EEEE, MMMM d, y G", + "long": "MMMM d, y G", + "medium": "MMM d, y G", + "short": "M/d/y GGGGG" }, - "appendItems": { - "Day": "{0} ({2}: {1})", - "Day-Of-Week": "{0} {1}", - "Era": "{0} {1}", - "Hour": "{0} ({2}: {1})", - "Minute": "{0} ({2}: {1})", - "Month": "{0} ({2}: {1})", - "Quarter": "{0} ({2}: {1})", - "Second": "{0} ({2}: {1})", - "Timezone": "{0} {1}", - "Week": "{0} ({2}: {1})", - "Year": "{0} {1}" + "timeFormats": { + "full": "h:mm:ss a zzzz", + "long": "h:mm:ss a z", + "medium": "h:mm:ss a", + "short": "h:mm a" }, - "intervalFormats": { - "intervalFormatFallback": "{0} – {1}", - "d": { - "d": "d – d" - }, - "Gy": { - "G": "y G – y G", - "y": "y – y G" - }, - "GyM": { - "G": "M/y GGGGG – M/y GGGGG", - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "GyMd": { - "d": "M/d/y – M/d/y GGGGG", - "G": "M/d/y GGGGG – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "GyMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "GyMMM": { - "G": "MMM y G – MMM y G", - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "GyMMMd": { - "d": "MMM d – d, y G", - "G": "MMM d, y G – MMM d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "GyMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "G": "E, MMM d, y G – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "h": { - "a": "h a – h a", - "h": "h – h a" - }, - "H": { - "H": "HH – HH" - }, - "hm": { - "a": "h:mm a – h:mm a", - "h": "h:mm – h:mm a", - "m": "h:mm – h:mm a" - }, - "Hm": { - "H": "HH:mm – HH:mm", - "m": "HH:mm – HH:mm" - }, - "hmv": { - "a": "h:mm a – h:mm a v", - "h": "h:mm – h:mm a v", - "m": "h:mm – h:mm a v" - }, - "Hmv": { - "H": "HH:mm – HH:mm v", - "m": "HH:mm – HH:mm v" - }, - "hv": { - "a": "h a – h a v", - "h": "h – h a v" - }, - "Hv": { - "H": "HH – HH v" - }, - "M": { - "M": "M – M" - }, - "Md": { - "d": "M/d – M/d", - "M": "M/d – M/d" - }, - "MEd": { - "d": "E, M/d – E, M/d", - "M": "E, M/d – E, M/d" - }, - "MMM": { - "M": "MMM – MMM" - }, - "MMMd": { - "d": "MMM d – d", - "M": "MMM d – MMM d" - }, - "MMMEd": { - "d": "E, MMM d – E, MMM d", - "M": "E, MMM d – E, MMM d" - }, - "y": { - "y": "y – y G" - }, - "yM": { - "M": "M/y – M/y GGGGG", - "y": "M/y – M/y GGGGG" - }, - "yMd": { - "d": "M/d/y – M/d/y GGGGG", - "M": "M/d/y – M/d/y GGGGG", - "y": "M/d/y – M/d/y GGGGG" - }, - "yMEd": { - "d": "E, M/d/y – E, M/d/y GGGGG", - "M": "E, M/d/y – E, M/d/y GGGGG", - "y": "E, M/d/y – E, M/d/y GGGGG" - }, - "yMMM": { - "M": "MMM – MMM y G", - "y": "MMM y – MMM y G" - }, - "yMMMd": { - "d": "MMM d – d, y G", - "M": "MMM d – MMM d, y G", - "y": "MMM d, y – MMM d, y G" - }, - "yMMMEd": { - "d": "E, MMM d – E, MMM d, y G", - "M": "E, MMM d – E, MMM d, y G", - "y": "E, MMM d, y – E, MMM d, y G" - }, - "yMMMM": { - "M": "MMMM – MMMM y G", - "y": "MMMM y – MMMM y G" + "dateTimeFormats": { + "full": "{1} 'at' {0}", + "long": "{1} 'at' {0}", + "medium": "{1}, {0}", + "short": "{1}, {0}", + "availableFormats": { + "Bh": "h B", + "Bhm": "h:mm B", + "Bhms": "h:mm:ss B", + "d": "d", + "E": "ccc", + "EBhm": "E h:mm B", + "EBhms": "E h:mm:ss B", + "Ed": "d E", + "Ehm": "E h:mm a", + "EHm": "E HH:mm", + "Ehms": "E h:mm:ss a", + "EHms": "E HH:mm:ss", + "Gy": "y G", + "GyMMM": "MMM y G", + "GyMMMd": "MMM d, y G", + "GyMMMEd": "E, MMM d, y G", + "h": "h a", + "H": "HH", + "hm": "h:mm a", + "Hm": "HH:mm", + "hms": "h:mm:ss a", + "Hms": "HH:mm:ss", + "M": "L", + "Md": "M/d", + "MEd": "E, M/d", + "MMM": "LLL", + "MMMd": "MMM d", + "MMMEd": "E, MMM d", + "MMMMd": "MMMM d", + "ms": "mm:ss", + "y": "y G", + "yyyy": "y G", + "yyyyM": "M/y GGGGG", + "yyyyMd": "M/d/y GGGGG", + "yyyyMEd": "E, M/d/y GGGGG", + "yyyyMMM": "MMM y G", + "yyyyMMMd": "MMM d, y G", + "yyyyMMMEd": "E, MMM d, y G", + "yyyyMMMM": "MMMM y G", + "yyyyQQQ": "QQQ y G", + "yyyyQQQQ": "QQQQ y G" + }, + "appendItems": { + "Day": "{0} ({2}: {1})", + "Day-Of-Week": "{0} {1}", + "Era": "{0} {1}", + "Hour": "{0} ({2}: {1})", + "Minute": "{0} ({2}: {1})", + "Month": "{0} ({2}: {1})", + "Quarter": "{0} ({2}: {1})", + "Second": "{0} ({2}: {1})", + "Timezone": "{0} {1}", + "Week": "{0} ({2}: {1})", + "Year": "{0} {1}" + }, + "intervalFormats": { + "intervalFormatFallback": "{0} – {1}", + "d": { + "d": "d – d" + }, + "Gy": { + "G": "y G – y G", + "y": "y – y G" + }, + "GyM": { + "G": "M/y GGGGG – M/y GGGGG", + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "GyMd": { + "d": "M/d/y – M/d/y GGGGG", + "G": "M/d/y GGGGG – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "GyMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "G": "E, M/d/y GGGGG – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "GyMMM": { + "G": "MMM y G – MMM y G", + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "GyMMMd": { + "d": "MMM d – d, y G", + "G": "MMM d, y G – MMM d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "GyMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "G": "E, MMM d, y G – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "h": { + "a": "h a – h a", + "h": "h – h a" + }, + "H": { + "H": "HH – HH" + }, + "hm": { + "a": "h:mm a – h:mm a", + "h": "h:mm – h:mm a", + "m": "h:mm – h:mm a" + }, + "Hm": { + "H": "HH:mm – HH:mm", + "m": "HH:mm – HH:mm" + }, + "hmv": { + "a": "h:mm a – h:mm a v", + "h": "h:mm – h:mm a v", + "m": "h:mm – h:mm a v" + }, + "Hmv": { + "H": "HH:mm – HH:mm v", + "m": "HH:mm – HH:mm v" + }, + "hv": { + "a": "h a – h a v", + "h": "h – h a v" + }, + "Hv": { + "H": "HH – HH v" + }, + "M": { + "M": "M – M" + }, + "Md": { + "d": "M/d – M/d", + "M": "M/d – M/d" + }, + "MEd": { + "d": "E, M/d – E, M/d", + "M": "E, M/d – E, M/d" + }, + "MMM": { + "M": "MMM – MMM" + }, + "MMMd": { + "d": "MMM d – d", + "M": "MMM d – MMM d" + }, + "MMMEd": { + "d": "E, MMM d – E, MMM d", + "M": "E, MMM d – E, MMM d" + }, + "y": { + "y": "y – y G" + }, + "yM": { + "M": "M/y – M/y GGGGG", + "y": "M/y – M/y GGGGG" + }, + "yMd": { + "d": "M/d/y – M/d/y GGGGG", + "M": "M/d/y – M/d/y GGGGG", + "y": "M/d/y – M/d/y GGGGG" + }, + "yMEd": { + "d": "E, M/d/y – E, M/d/y GGGGG", + "M": "E, M/d/y – E, M/d/y GGGGG", + "y": "E, M/d/y – E, M/d/y GGGGG" + }, + "yMMM": { + "M": "MMM – MMM y G", + "y": "MMM y – MMM y G" + }, + "yMMMd": { + "d": "MMM d – d, y G", + "M": "MMM d – MMM d, y G", + "y": "MMM d, y – MMM d, y G" + }, + "yMMMEd": { + "d": "E, MMM d – E, MMM d, y G", + "M": "E, MMM d – E, MMM d, y G", + "y": "E, MMM d, y – E, MMM d, y G" + }, + "yMMMM": { + "M": "MMMM – MMMM y G", + "y": "MMMM y – MMMM y G" + } } } } @@ -522,4 +523,4 @@ } } } -} + \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index c552cd6e..23095292 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -12,7 +12,7 @@ var searchInstance; var headerThemeSwitch = document.getElementById('header-theme-switcher'); var settingElement = ej.base.select('.sb-setting-btn'); var themeList = document.getElementById('themelist'); -var themeCollection = ['material', 'fabric', 'bootstrap', 'highcontrast']; +var themeCollection = ['material', 'fabric', 'bootstrap', 'bootstrap4', 'highcontrast']; var themeDropDown; var contentTab; var sourceTab; @@ -28,6 +28,8 @@ var sbHeader = ej.base.select('#sample-header'); var resetSearch = ej.base.select('.sb-reset-icon'); var urlRegex = /(npmci\.syncfusion\.com|ej2\.syncfusion\.com)(\/)(development|production)*/; var sampleRegex = /#\/(([^\/]+\/)+[^\/\.]+)/; +// Regex for removing hidden codes +var reg = /.*custom code start([\S\s]*?)custom code end.*/g; var sbArray = ['angular', 'react', 'typescript', 'aspnetcore', 'aspnetmvc', 'vue']; var sbObj = { 'angular': 'angular', @@ -153,6 +155,7 @@ function preventTabSwipe(e) { function dynamicTab(e) { var blockEle = this.element.querySelector('#e-content_' + e.selectedIndex).children[0]; blockEle.innerHTML = this.items[e.selectedIndex].data; + blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); blockEle.classList.add('sb-src-code'); if (blockEle) { hljs.highlightBlock(blockEle); @@ -308,6 +311,7 @@ function dynamicTabCreation(obj) { } var blockEle = tabObj.element.querySelector('#e-content_' + tabObj.selectedItem).children[0]; blockEle.innerHTML = tabObj.items[tabObj.selectedItem].data; + blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); blockEle.classList.add('sb-src-code'); if (blockEle) { hljs.highlightBlock(blockEle); @@ -445,8 +449,17 @@ function onsearchInputChange(e) { expand: true, boolean: 'AND' }); - if (val.length) { - var data = new ej.data.DataManager(val); + var value = []; + if (ej.base.Browser.isDevice) { + for (var j = 0; j < val.length; j++) { + if (val[j].doc.hideOnDevice !== true) { + value = value.concat(val); + } + } + } + var searchVal = ej.base.Browser.isDevice ? value : val; + if (searchVal.length) { + var data = new ej.data.DataManager(searchVal); var controls = data.executeLocal(new ej.data.Query().take(10).select('doc')); var controlsAccess = []; for (var x = 0; x < controls.length; x++) { @@ -888,12 +901,17 @@ function viewMobilePropPane() { function getSampleList() { if (ej.base.Browser.isDevice) { var tempList = ej.base.extend([], window.samplesList); + var sampleList = []; for (var i = 0; i < tempList.length; i++) { var temp = tempList[i]; + if (temp.hideOnDevice == true) { + continue; + } var data = new ej.data.DataManager(temp.samples); temp.samples = data.executeLocal(new ej.data.Query().where('hideOnDevice', 'notEqual', true)); + sampleList = sampleList.concat(temp); } - return tempList; + return sampleList; } return window.samplesList; } @@ -1211,6 +1229,21 @@ function addRoutes(samplesList) { var node = samplesList[i]; loop1(node); } + if (ej.base.Browser.isDevice) { + if (location.hash && samplesAr.indexOf(location.hash) == -1) { + var toastObj = new ej.notifications.Toast({ + position: { + X: 'Right' + } + }); + toastObj.appendTo('#sb-home'); + setTimeout(function () { + toastObj.show({ + content: location.hash.split('/')[2] + 'component not supported in mobile device' + }); + }, 200); + } + } } function onDataSourceLoad(node, subNode, control, sample, sampleName) { @@ -1248,12 +1281,12 @@ function onDataSourceLoad(node, subNode, control, sample, sampleName) { for (var file = 0; file < ajaxFile.length; file++) { ajaxFile[file].send().then(function (value) { // jshint ignore:line - - if (value.indexOf('.html') > 0) { + var fileName = nameFile[subfile]; + if (fileName && fileName.indexOf('.html') > 0) { content = getStringWithOutDescription(value.toString(), /(\'|\")description/g); content = getStringWithOutDescription(content.toString(), /(\'|\")action-description/g); } - content = value.indexOf('.html') > 0 ? content.replace(/@section (ActionDescription|Description){[^}]*}/g, '').replace(/&/g, '&') + content = fileName.indexOf('.html') > 0 ? content.replace(/@section (ActionDescription|Description){[^}]*}/g, '').replace(/&/g, '&') .replace(/"/g, '"').replace(/"/g, '"').replace(//g, '>') : value.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); tabObj.push({ diff --git a/src/common/plnk-template/index.css b/src/common/plnk-template/index.css index 1c602b21..964a20dc 100644 --- a/src/common/plnk-template/index.css +++ b/src/common/plnk-template/index.css @@ -137,11 +137,11 @@ border-color: transparent; } -.sb-bread-crumb { +.sb-bread-crumb h1 { padding-left: 20px; padding-top: 24px; padding-bottom: 10px; - height: 54px; + margin: 0; } .category-allcontrols a, .category-text a, .crumb-sample { @@ -239,7 +239,7 @@ top: 50px; @font-face { font-family: 'sbicons'; - src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYW3euMAAAV4AAAAHEdERUYAJwAMAAAFWAAAAB5PUy8yVeZaXQAAAVgAAABWY21hcOl+798AAAHIAAABWmdhc3D//wADAAAFUAAAAAhnbHlmCGlimQAAAzQAAABYaGVhZBMxmFcAAADcAAAANmhoZWEGSAQGAAABFAAAACRobXR4DIABKwAAAbAAAAAWbG9jYQAsABYAAAMkAAAADm1heHAASQAJAAABOAAAACBuYW1lW8T3+AAAA4wAAAGGcG9zdCBpVEMAAAUUAAAAPAABAAAAAQAA0BdQ7F8PPPUACwQAAAAAANgJqe0AAAAA2Amp7QErAGsC1QMVAAAACAACAAAAAAAAAAEAAAMWAAAAXAQAAAAAAALVAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAGAAYAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQNVAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACDpHwPA/8AAXAMW/5YAAAABAAAAAAAABAAAAAAAAAABVQAAAgAAAAQAASsBKwAAAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAAHAAEADgAAAAKAAgAAgACAAAAIOkb6R///wAAAAAAIOkb6R///wAA/+MW6RbmAAEAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWACwAAAABASsAawLVAxUABQAAJQkBNwkBASsBB/75UQFZ/qe7AQUBBVD+q/6rAAAAAAEBKwBrAtUDFQAFAAAlCQEnCQEC1f75AQdR/qcBWbsBBQEFUP6r/qsAAAAAAAAMAJYAAQAAAAAAAQAHABAAAQAAAAAAAgAHACgAAQAAAAAAAwAjAHgAAQAAAAAABAAHAKwAAQAAAAAABQALAMwAAQAAAAAABgAHAOgAAwABBAkAAQAOAAAAAwABBAkAAgAOABgAAwABBAkAAwBGADAAAwABBAkABAAOAJwAAwABBAkABQAWALQAAwABBAkABgAOANgAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAARgBvAG4AdABGAG8AcgBnAGUAIAAyAC4AMAAgADoAIABpAGMAbwBtAG8AbwBuACAAOgAgADgALQAxADEALQAyADAAMQA4AABGb250Rm9yZ2UgMi4wIDogaWNvbW9vbiA6IDgtMTEtMjAxOAAAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAABAAIAAwECAQMETmV4dAhQcmV2aW91cwAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQABAAUAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2Amp7QAAAADYCant) format('truetype'); + src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYX+RGcAAAYcAAAAHEdERUYAJwANAAAF/AAAAB5PUy8yVpBcGwAAAVgAAABWY21hcOlg2h8AAAHIAAABYmdhc3D//wADAAAF9AAAAAhnbHlmp9UzsAAAAzwAAADkaGVhZBN5YdsAAADcAAAANmhoZWEIHgPGAAABFAAAACRobXR4DIABKwAAAbAAAAAYbG9jYQAsAIgAAAMsAAAAEG1heHAATQAuAAABOAAAACBuYW1lVG4gEgAABCAAAAGGcG9zdJaXZqkAAAWoAAAASwABAAAAAQAArag3N18PPPUACwQAAAAAANgtDq8AAAAA2C0OrwAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAXAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAHACsABAAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQOAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACDqCAPA/8AAXAPAAEAAAAABAAAAAAAABAAAAAAAAAABVQAAAgAAAAQAASsBKwAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAIOkb6R/qCP//AAAAAAAg6RvpH+oI//8AAP/jFukW5hX+AAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYALAByAAEBKwBrAtUDFQAFAAAlCQE3CQEBKwEH/vlRAVn+p7sBBQEFUP6r/qsAAAAAAQErAGsC1QMVAAUAACUJAScJAQLV/vkBB1H+pwFZuwEFAQVQ/qv+qwAAAAAEAAD/wAQAA8AAFgAiACYAKgAAACIOAQcOAxUUHgIyPgI0JicuASQgHgEQDgEgLgEQNgEzFSMRMxEjAjdual4nHi0fED92mKaYdj8/Oyde/tQBFuyJiez+6uyJiQE3gICAgANgHDcnHURLUCpTmHY/P3aYppg7Jzd8iez+6uyJiewBFuz9yYACgP6AAAAADACWAAEAAAAAAAEABwAQAAEAAAAAAAIABwAoAAEAAAAAAAMAIwB4AAEAAAAAAAQABwCsAAEAAAAAAAUACwDMAAEAAAAAAAYABwDoAAMAAQQJAAEADgAAAAMAAQQJAAIADgAYAAMAAQQJAAMARgAwAAMAAQQJAAQADgCcAAMAAQQJAAUAFgC0AAMAAQQJAAYADgDYAHMAYgBpAGMAbwBuAHMAAHNiaWNvbnMAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAcwBiAGkAYwBvAG4AcwAgADoAIAA1AC0AMQAyAC0AMgAwADEAOAAARm9udEZvcmdlIDIuMCA6IHNiaWNvbnMgOiA1LTEyLTIwMTgAAHMAYgBpAGMAbwBuAHMAAHNiaWNvbnMAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAHMAYgBpAGMAbwBuAHMAAHNiaWNvbnMAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHAAAAAQACAAMBAgEDAQQETmV4dAhQcmV2aW91cwxub3RpZmljYXRpb24AAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAEABgABAAQAAAACAAAAAAAAAAEAAAAA1aQnCAAAAADYLQ6vAAAAANgtDq8=) format('truetype'); font-weight: normal; font-style: normal; } @@ -302,9 +302,55 @@ text-decoration: none; padding-right: 15px; padding-left: 30px; display: inline-table; + padding-top: 20px; } a.e-disabled { cursor: not-allowed; opacity: 0.35; } +@media (max-width: 550px) { + + .sb-headers { + height: 48px; + background: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12); + z-index: 1001; + opacity: 100; + } + .sb-header { + display: none; + } + .syncfusion-logo { + float: left; + padding-left: 8px; + padding-right: 8px; + } + .sync-logo { + padding-right: 0px; + padding-left: 8px; + background: url(../../styles/images/SyncfusionLogo.svg) no-repeat right; + height: 40px; + width: 40px; + } + .sb-icon-notification { + padding-left: 15px; + padding-right: 15px; + font-size: 18px; + transform: rotate(-180deg); + color: #5D5D5D; + opacity: 100%; + } + #sb-header-text { + padding-left: 0%; + } + + .sb-icon-notification:before { + content: "\ea08"; + } + .product a:hover{ + color: #5D5D5D; + text-decoration: none; + } +} + diff --git a/src/common/plnk-template/index.html b/src/common/plnk-template/index.html index 024e2a0e..8f3efa3c 100644 --- a/src/common/plnk-template/index.html +++ b/src/common/plnk-template/index.html @@ -8,34 +8,26 @@ {{:meta}} - + + + - + +
    \n
    \n
    \n
      \n
      \n
      \n\n\n
      ","index.js":"{{ripple}}\n\n //ContextMenu items definition\n var menuItems = [\n {\n text: 'Cut',\n iconCss: 'e-cm-icons e-cut'\n },\n {\n text: 'Copy',\n iconCss: 'e-cm-icons e-copy'\n },\n {\n text: 'Paste',\n iconCss: 'e-cm-icons e-paste',\n items: [\n {\n text: 'Paste Text',\n iconCss: 'e-cm-icons e-pastetext'\n },\n {\n text: 'Paste Special',\n iconCss: 'e-cm-icons e-pastespecial'\n }\n ]\n },\n {\n separator: true\n },\n {\n text: 'Link',\n iconCss: 'e-cm-icons e-link'\n },\n {\n text: 'New Comment',\n iconCss: 'e-cm-icons e-comment'\n }\n ];\n\n //ContextMenu model definition\n var menuOptions = {\n target: '#contextmenutarget',\n items: menuItems,\n // Event triggers while rendering each menu item where “Link” menu item is disabled\n beforeItemRender: function (args) {\n if (args.item.text === 'Link') {\n args.element.classList.add('e-disabled');\n }\n }\n };\n\n var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');\n if (ej.base.Browser.isDevice) {\n ej.base.select('#contextmenutarget').textContent = 'Touch hold to open the ContextMenu';\n menuObj.animationSettings.effect = 'ZoomIn';\n }\n else {\n ej.base.select('#contextmenutarget').textContent = 'Right click/Touch hold to open the ContextMenu';\n menuObj.animationSettings.effect = 'SlideDown';\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
      \n
      \n
      \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n\n //ContextMenu items definition\n var menuItems = [\n {\n text: 'Cut',\n iconCss: 'e-cm-icons e-cut'\n },\n {\n text: 'Copy',\n iconCss: 'e-cm-icons e-copy'\n },\n {\n text: 'Paste',\n iconCss: 'e-cm-icons e-paste',\n items: [\n {\n text: 'Paste Text',\n iconCss: 'e-cm-icons e-pastetext'\n },\n {\n text: 'Paste Special',\n iconCss: 'e-cm-icons e-pastespecial'\n }\n ]\n },\n {\n separator: true\n },\n {\n text: 'Link',\n iconCss: 'e-cm-icons e-link'\n },\n {\n text: 'New Comment',\n iconCss: 'e-cm-icons e-comment'\n }\n ];\n\n //ContextMenu model definition\n var menuOptions = {\n target: '#contextmenutarget',\n items: menuItems,\n // Event triggers while rendering each menu item where “Link” menu item is disabled\n beforeItemRender: function (args) {\n if (args.item.text === 'Link') {\n args.element.classList.add('e-disabled');\n }\n }\n };\n \n\n"} \ No newline at end of file diff --git a/src/context-menu/default.html b/src/context-menu/default.html index a4ea0245..c4b87a86 100644 --- a/src/context-menu/default.html +++ b/src/context-menu/default.html @@ -26,7 +26,6 @@ /** * ej2 Context Menu styles */ - @font-face { font-family: 'e-context-menu'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjixTEwAAAEoAAAAVmNtYXB61ntTAAAB8AAAAIpnbHlmN0fr0wAAArgAAB1EaGVhZA8HE/cAAADQAAAANmhoZWEIUQQdAAAArAAAACRobXR4cAAAAAAAAYAAAABwbG9jYWwyZLYAAAJ8AAAAOm1heHABLAFgAAABCAAAACBuYW1lc0cOBgAAH/wAAAIlcG9zdC3PWVMAACIkAAABegABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAHAABAAAAAQAApF8J6l8PPPUACwQAAAAAANX6Z4MAAAAA1fpngwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAcAVQABgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4kTpWgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAdgAAAAwACAACAATiSeJZ4mfpQOla//8AAOJE4lDiYOlA6Vn//wAAAAAAAAAAAAAAAQAMABYAKAA2ADYAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAAQABEAEgATABQAFQAWABcAGAAZABoAGwAOAA0ADwAAAAAAAAA6AWQBqgISA5wEGAR4BVoFfAWaBsgG9AecCA4IQgimCPIJQAmcCnQLNAtQC8QNKg3wDl4OogAAAAEAAAAAA6UD9AAsAAABDxAfDzMRMxEzETMRMzUhARYKChMSERAQDg4MCgoHBwQDAQEDBQcJCgsODggQERITFBWXXpxenP1wA/MBAQQGCAkKDA0ODxASERMTFBUUFBISEQ8PDQYLCQgGBAL9rgOK/HYDil4AAwAAAAAD9AP0ADwAeAD+AAABHwQVDwcjLwY1PwYfBD8HNS8EPwYzHwIBHwQVDwYvAyMPBx8FDwYjLwY1PwcfAicPCBUfDz8HFw8IHw4zPw41Lw8PByc/CC8PDwYC7n8EBwQCAgQHXgQKCgwMCwsJhgcEAgEBAgMEBAUYFAcJCAwLCgkHBgMBAgEEChsFBQUFBgYGBgwLCv5bfgUGBAIBAQIDBAQFGBQHCAkMCwoJBwYDAQEBAQQKGwUEBgUGBgYMDAoJiAcEAgIEB14JCgsMCwsKnVoGDAkJBgUDAgIDBQYICguGDQ4PDxARERISEhEQEA8ODTYGDAoJBgUEAQECAwUGCAoLiw0ODxAQERISEhEQEA8ODWcMCQkGBQMCAgMFBggKC4YNDg8PEBEREhISERAQDw4NNgYMCgkGBQQBAQIDBQYICguEDg0PDxARERMSERAQEA4OAb6ABAoKCwwLCwleBAYEAgMEBocKCgsNBgYFBgUFBRkOAwEBAQMGBwkKCwwJCAQHDhoFBAMDAgIBAQMGAah/BAkLCw0GBgUGBQUFGQ4DAgEDBQgJCgsMCQgDCA4aBQQDAwIBAQIEBogKCgsMCwsJXgcFAwEBAwVMWQcNDg8QEBESEhEREQ8PDw2GDAsJBwUEAwEBAwQGBwoLDDYGDg8PEBEREhMSERAPDw4OiwwJCQYFAwICAwUGCAoLZg0ODxAQERISEhEQEA4PDYYMCwkHBQQDAQEDBAYHCgsMNgYODw8QERESExIQEQ8PDg6FDAsJBwYEAgEBAgQGBwkKAAABAAAAAAPUA8oANQAAExEfByEzHwYzPwczPwcRLwYjISMPBSsBAgMDBQUGBwEKBwcGBYgGBgcHBwYGhwUGBAb3BgYFBQMDAgEBAgMDBQUGBvyVBwYFBQMDAgOr/XAHBgUEBAMCAQMEBbAFAwEBAwWwBQQCAQECAwQEBgUHApAGBgYEBAMCAgMEBQUGAAMAAAAAA/QD5gADAAsASwAANyE1IQEHIyc3HwInAw8MMz8CMx8BNzUvCT8CHwMVDwc3FzUvBwMnIwwD6PwYAhoJCJxTFxcWvXQDBAQEBQUGBgwMJBMBDSQhHxJgOgEdEx4GBQQDAgEBAh0f3DARBgECAwUHVQEBwLoDPw8GBAYSHecFPxl9AaIBAtsyNTkR/tQIBgYFBQMEAgQDBwUmAQQFBwIHIgMDCQMDBAQEBQUKVk8Bcy4TBgQCAwQDEwkdBwcRFw8GAwQKJ0YCKQoAAAAEAAAAAAPzA4gAPwBfAJ8BUwAAAR8EDxIvDDU/ETMfBTcfAh0BDwYvBz8HHwIlHwoPCysBLxA1Pws7AR8FJw8HHxYzPwMfAg8CLwMjDxYfDj8WPQEvAT8BBRczPwUvAy0BPwI1LwUjBwUvAT8CLxgPBgFPBgUDAgEBAQMEBQYHCAkKCg0NDQ4NDg4NCgoJCAcHBwYFBQMCAQIDBAUGBwcJCgsNDQ0NDg0ODgoKCAkHBwb0BAQCAgQEBgYGBwcHBgYEBAEBAQEEBAYGBwcHBgb+6QsJCQgHBgUEAwEBAQIDBQYFBwcHCQgKCg4NDg4NDQ0NCwoICAcGBQQDAgECAwUGBQcHBwgJCgoODQ4NDg0N2gYFCggHBAQBAQECAwQEBQUHBwgICQkKFhMSExQTFBQUFxUVEwYHREQHBhMVFRcUFBQTFBMSEwsVCQkICAcHBQUFAwMCAQEBAwUGCAoMDA0PDxAQEhMUFBMUExMTEhYKCgkICAcGBgUEBAIDAQIEBz0BhQkJCEsIBQQDAQICBv7iAR8FAgMCBAYISwgJCP57PgYDAgEBAQIDBAQFBgYHCAgJCgoKDBITExMUExQUExIREA8ODQFvBgcHBwgICAkJCQkICAgHCAcHBgQEAgIBAQEBAwIEBAUGBgcHCAgJCQkJCAkIBwgHCAcFBQMDAQEBAgIDAwSlBQYHBwcHBgUFAwIBAQIDBQUGBwcHBwYFBQMCAQECA/AHBwgICAkJCQkICQcIBgcGBQQDAwICAQIDAwUFBwgHCAcICQgJCQkJCAcIBwYGBQQEAgMBAQICBAQGB0cGBgwODg8QEBALCgsKCgoKCgoKCQgJCBAKCggHBQMDAQMFCAcFKSkFBwgFAwEDAwUHCAoKCBAJCAoJCgoKCgoKCwoLERAPDw4NDQwKCQgGBQMCAQECBAUHCAkLDwkICQkJCgoKCgoLCgsKDg0ODQMl2gICJQUHCAkJCAQH4eEHAwkJCQgHBSUCAtolAg4ODQ4KCwoLCgoKCgoJCQkJCAcICwkIBwUEAgEBAgMFBwcJAAAAAAMAAAAAA9QD9AACACkAXAAAATMnJQ8CFREVHwUzITM/BRUhMz8GESERISMPAScPARUDHwQ7Aj8FNRE/BjMhMz8FPQIvBSMhIw8BAtv6+v4SAwIBAQIDAwMEBQEVAwMCAgIBAQGhBAQEAwMBAQH+x/5hBQQEwQECAQICAgMCA1wEAwQCAwIBAQECAgMDBAQBSwUFBAMDAgIBAgIDBAME/i4DAwICAPo4AwQEBPz9BAQDAwMCAQICAwQEChkBAgMDAwQEAaIBdgECtwQEBfxACAQDAgICAQMDAwQEA0MEBAMDAwECAgIDBAQEBVEEBAMDAwECAgIAAAAAAgAAAAADtQP0ACIATQAAAREjLw8/DwcfEBEzETMRMxEzNSEPDgHCnRAPDw4ODQwLCgkIBwUEAgEBAgQFBwgJCgsMDQ4ODwgP0wECBAcICgwNDxASExMVFRaoPrw+vP1vFhYVFBMSEQ8ODQsJCAUDA7b+xwECBAUHCAkKCwwNDg4PDxAQEA8ODg0MCwoJCAYGAwIBnAsWFRUTExIQDw0MCggHBAIB/c4DqvxWA6o+AQMGBwkLDQ4QERITFBUVAAAAAwAAAAADPQP0ACAAQQC8AAAlHwUdAQ8GLwc/BjMXBR8GDwcvBj0BPwUzFwMTAw8PHw4/DT0BLwYbAQ8KHQEfDT8OLw8xAxMnCwEC2gMCCgsFBQQEBwwIFgYHDwsKCwUEAQEEBAcLCBYKC/6QAgMKCwUDAgEEBAcLCBYHBw8KCwsEBQQEBwwIFgoLHaWfDQsMCwoKCgQLBwYFBAMBAQECBAQFBwcNDgsLCwwNDA0NDAsLCwoMDAYDBwQCAgwJCwwHDoODBwcHBgYKCgcFAQECBAQGBggMDgsLCwwNDQwNDAsLCwoNCwcDBwMCAQEBAwIHBQMIBBMLBREMDA2dpx2wsMQBAQcLCBcGBw8LCgsEBQEBBAQHCwkPDQcPCwoLBAUCBAEBBwsIEA0HDwsKCwQFAQEEBAcLCRYGBw8LCgsEBQIC1f6v/sACAgQEBQcHBA4KCgsMDAwNDQwMDAsKCg0LBwUFAwIBAQIDBQUHBwwPCgYRDAwHGAwcDw4MBgoBBv73BAQFBgYODxAQCQgJDQwMDAsKCg0LBwUFAwIBAQIDBQUHBwwPCgYRDAwHEwwMBhELBQkEDwcDBwMCAQFCAVFX/qABYAADAAAAAANXA/QAAwAGAA4AADchNSEBIRMBMxMhEzMBI6gCsP1QAef+4o/+uTteAVxdPP7cRgw+AZcBq/z9ARn+5wNrAAIAAAAAA/QDywAGAA0AAAERIQc1IxEDMxU3IREhA7b9oI5+Pn3oAoP8GAON/c2OjgIz/Y/n5wKvAAAAAAIAAAAAA/MDOACGAQ0AAAEPCxUfDiE/DjUvDiMVMx8PDw8hLw81Pw4zNSMPAiUPCxUfDjM1LxA1Pw4hHw8VDw8VMz8ONS8OIQ8CAcoKEhIQDg4LCwgHBAICBAcICwsODhASEhQVFRYBERYVFBQTERAPDQwKCQYFAgIFBgkKDA0PEBETFBQVFisSEhIREQ8ODgwLCggEAwUDAQEDAwYHBwkLCwwMDgcPDxD+/hAPDw4ODQwLCgkIBgMFAwICBAYECAoLDA0PDxERERITIBYWFf60ChMREA8NDAoJBgUCAgUGCQoMDQ8QERMUFBUWKxISEhEQEA4ODAsKCAQDBQIBAwQFBwgJCgsMDQ0HDw8QAQIQDw8ODg0MCwoJCAcCBQMCAgQGAwkJCw0NDw8RERESEysWFRUUEhIQDg4LCwgHBAICBAcICwsODhASEhQVFRb++xcVFQJsBQoMDQ8QERMUFBUWFxYVFRQSEhAODgsLCAcEAgIEBwgLCw4OEBISFBUVFhcWFRQUExEQDw0MCgkGBQI/AgIEBQYICAoMDQ4HCBETFQ8QDw4ODQwLCgkIBgMFAwIBAgQGBggJCgsMDQ4HDw8PExMSEQcODQwKCAgGBQQCAj8BAwa0BAsLDg4QEhIUFRUWFhYWFBQTERAPDQwKCQYEAz4BAgIEBQYICAoMDA8HCBETFQ8QDw4ODQwLCgkIBgMFAwIBAgQGBggJCgsMDQ4HDw8PExMSEQcPDAwKCAgGBQQCAgE+AgUGCQoMDQ8QERMUFBUWFxYVFRQSEhAODgsLCAcEAgEDBQAAAAAEAAAAAAO1A/QAAgAIAA4AFwAAASM1JxUzESERNxcjESMRAzMVIREBIychA0uPP/r+DBN9z7s/+gJy/vM/u/6bAj6QLPr+SgKwvH79zgKw/RK8AiIBCrwAAwAAAAADmAPzAAcAKACNAAABFSE1MxEhESUVDwcvBz8GOwEfBScrAQ8NFREVHw0zITM/DTURNS8NKwEvDisBDw0BHQHGW/2EAWsBAgQGBwcJCQkJBwcGBAIBAQIEBgcHCQkJCQcHBgQCrL4JCQkICAcHBwYFBAQDAwEBAwMDBQUGBwcHCAgJCQkCfAkJCQgIBwcHBgUEBAMDAQEDAwMFBQYHBwcICAkJCb4EBQUGBgcICAkJCQoKCgsLCwsKCgoJCQkICAcGBgUFAz6IiP0qAtYtBQQJBwcGBAIBAQIEBgcHCQkJCQcHBgQDAwQGBwcJJAEDAwMFBQYHBwcICAkJCf0qCgkICQgHBwcFBgQEAwICAgIDBAQFBgcHBwgJCAkKAtYJCQkICAcHBwYFBQMDAwEKCggJCAcHBwUFBQQCAwEBAwIEBQUFBwcHCAkICgAABAAAAAADtAPzAAMADQAtAFYAAAERIRElFSE1MxUhESERJR8JBzMVITUzNT8KMx8BJw8KFSMRIRUhESM1IzUvDSsBDwEDdv6K/sgB8z/+yP7IAVUGBQQEAwMEAgIBAX3+iX0BAQIDBAUGBAgKDA8IB0gLCgoICAgGBQUDAvoBdwHzffoCAwUFBgcICQoKCwwMDAwNDAwCPv4NAfP6fX27/g0CrncDBAQFBQUMDQ4OKD4+MwoKCgkICAYDBQMCAgE3BQYICAgKCgsMDAwN/NU+AnD5DQwMDAsKCggICAYFBQMCAgMABAAAAAADtAPzAAUADQAXAB8AAAEVMxUhEQMhESM1IzUhASERIREjFSE1IzMjFSE1IzUjAvp8/oo+AfM/Pv6K/okBOAF3P/3OPvo/ATg+uwHCffoBd/5LAXY/Pv5LAfMBd319Pz8+AAAGAAAAAAP0A/QABAAlACkAMwA3AEMAACUhJwcnNxcVHwY/By8HDwY3ESERARUhNTMRIxEhESUVITUrAREhFSERIREjNSECEAGCXkOBwgEDBQYHCAkKCgkIBwYEAwEBAwQGBwgJCgoJCAcGBQOB/jz+vQGDYeL+nQGk/v5BoQGjAkX+3qL+fYmEULkdBQUJCAcFBQIBAQIFBQcICQoJCQgHBQUDAQEDBQUHCAlk/koBtgF3Pz/+x/6KAq8/Pz/8030CMgF4PgAAAAYAAAAAA8MD9AAHAA8AFQAdACcALwAAAR8CIz8BMwczNzMXMycjNxUzFSERAyERIzUjNSEBIREhESMVITUjISMVITUjNSMCqwELF0cXDAFeHBhTGR1NI2iB/n1AAgRBQP59/nwBQwGDQP27QQECQAFDQcIBRAMhOTokvD8/215++gF4/koBdz8+/koB9AF4fn4/Pz4AAAAABgAAAAAD4wP0AAcADwAUAB4AIgAvAAABHwIjPwIHMzczFzMDIzcXESERJRUhNTMVIREhESUVITUrAREhFSERJyM1IzUhAsEDByJZHQgHeSceaCAoZC5sjf49/t0Bg2H+/v6+AaP+/kGhAYMCRbJQov59AdINGl9SGhr8WVkBHIuQ/l0CM/o/P7v+DAKvPz8//NN9Afq2+j4AAAAABgAAAAADwwP0AAQAJAAoACwANgA+AAAlIScHJzcfBjsBPwYvBisBDwU3ESERAyERIQEhESERIxUhNSMhIxUhNSM1IwIgAUdQOG2QAQIDBAQGBgYHBgUFBAMCAQECAwQFBQYHBgYGBAQDAoD+fUACBP38/nwBQwGDQP27QQECQAFDQcKJcEScCwYGBgQEAwICAwQEBgYGBgYFBQQDAgIDBAUFBmD+iAF4/koB9P5KAfQBeH5+Pz8+AAUAAAAAA5cD9AAEACUALQBOALMAAAEhJwcnNxUfBz8HLwcPBgEVITUzESERJQcVDwYvBz8HHwYnKwEPDhEfDjMhMz8OES8OKwEvDisBDw0BRAF3XEB+vQEDBAYHCAgKCQkIBwYEAwEBAwQGBwgJCQoICAcGBAP+pgHWXv2NAWgBAwQGBwcJCQkJCAYGBAMBAQMEBgYICQkJCQcHBgQDrL0KCQgJCAcHBwYFBAQDAwEBAQEDAwMFBQYHBwcICQgJCgJ4CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQq9BAQGBQcHBwgJCQkKCgoLCwsLCgoKCQkJCAcHBwUGBAEFhVG6HQUFCQgHBQUCAQECBQUHCAkKCQkIBwYEAwEBAwQGBwgJASJ9ff0vAtEzBAUICAcFBQIBAQIFBQcICAkJCQgHBQQDAQEDBAUHCAkiAgIDBAUFBgYHCAgICQkJ/SkJCQkICAgHBgYFBQQDAgICAgMEBQUGBgcICAgJCQkC1wkJCQgICAcGBgUFBAMCAgoJCQgICAcGBgUEBAMCAgICAwQEBQYGBwgICAkJAAUAAAAAA5cD9AAHAA8AFwA4AJ0AAAEfAiM/AgMzNzMXMwMjJxUhNTMRIRElBxUPBi8HPwcfBicrAQ8OER8OMyEzPw4RLw4rAS8OKwEPDQH/BAorcyYFDp0zJ4coNYI73QHWXv2NAWgBAwQGBwcJCQkJCAYGBAMBAQMEBgYICQkJCQcHBgQDrL0KCQgJCAcHBwYFBAQDAwEBAQEDAwMFBQYHBwcICQgJCgJ4CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQq9BAQGBQcHBwgJCQkKCgoLCwsLCgoKCQkJCAcHBwUGBAIVESKAbhIz/rB3dwF7+319/S8C0TMEBQgIBwUFAgEBAgUFBwgICQkJCAcFBAMBAQMEBQcICSICAgMEBQUGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgICAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBQUEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAgICQkAAAIAAAAAA4QD1AACAAoAAAEhEwEzEyETMwEjAp3+waD+fmJlAXZpYv6lVgGiAan84AEa/uYDqgAAAwAAAAADtQP0AAMARwBdAAABESERJxEVHw0zITM/DhEvDiMhIw8NJxEzESE1ISMPDQNY/gxeAgIDBAUFBgYIBwgJCAkKAfgJCQkICAgHBwUGBAQDAwEBAQEDAwQEBgUHBwgICAkJCf4ICgkJCAgIBwYGBQUEAwICvF4CFP3sCQoJCAgIBwcGBQUEAwMBAtv9jwJxA/2ICQkJCAgHBwcFBgQEAwICAgIDBAQGBQcHBwgICQkJAngJCQkICAgHBgYFBQMDAwEBAwMDBQUGBgcICAgJCbP9iwJxXgICAwQEBgUHBwcICAkJAAUAAAAAA/QD9AA/AF8AnwCkAToAACUPDisBLw4/Dx8OExUPBSsBLwU9AT8GHwYDDw4rAS8OPw8fEAE1IwUfEzM/AxcHLwQjDxMVHxc7AT8TLwQ3ATM1AT8ELxIPDgE4AQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwMB4gICAwMFBQUFBQQEAwICAgIDBAQFBQUFBQMDAgLhAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgoKCgoKCQkICAcGBgUEAwMB+2QBXpb8rwEDBAQGBwgICQoLCwwNDQ4KChUTExISEBF1dQkKEhQVDxAPDg8ODQ0NCwsKCQgIBgQEAwIBAQEDAwQEBQYHBwcICQkKCgsLCwwMDAwNDQ0PDg4ODQwMDAsKCgkIBwcGAwMEAgECBAUFdQFelv2XBgUDAgEBAgMFBgcJCgsMDQ4OEBEPDg8OFhQUFBIREA4NDAoIBgQCuwoKCgkJCAgHBgYFBAQCAgICBAQFBgYHCAgJCQoKCgoKCgkJCAcIBgYFBAMDAQEBAQMDBAUGBggHCAkJCgoBIgUFBQMDAgICAgMDBQUFBQUEBAMCAQEBAQIDBAQFAScKCgoJCQgIBwYGBQQEAgICAgQEBQYGBwgICQkKCgoKCgoJCQgHCAYGBQQDAwEBAQEDAwQFBgYIBwgJCQoKoGQBXjKLDw4ODg0MDAwLCgoJCAgGBgMDBAIDBAUFdXYFAwUEAQICBAUFBwcJCQsLDAwODg4NDg0ODQ0MDQwMCwsLCwkKCQgICAcGBQUEBAMCAQIDBAQGBwgICQoLCwwNDQ0LChQUExIRERB2/qIyAmkPDw8QEhEREREQDw8ODQwLCggHBgQDAQEBAwUICQsMDg8REhIUFRUAAwAAAAAD9AL6AAMAWQCvAAABITUhNzsBHxEVDwsjFTM/FDUvGSMFDwQVHxg7ATUrAS8RNT8LMzUjDw4BRAF3/on6xAwMDAsLCwoKCQkIBwcGBQQDBAEDBgYJCwsODhAQEhLNwhMTExISERAQDw4NDAoKCAYFAwMBAQECAwQFBQYGCAgICgkLCwsMDA0NDQ4ODw4Pw/3bBQMDAQEBAgMEBQUGBggICAoJCwsLDAwNDQ0ODg8OD8PEDAwMCwsLCgoJCQgHBwYFBAMEAQMGBgkLCw4OEBASEs3CExMTEhIREBAPDg0MCgoIAcFefQICAwQFBgYHCAkJCgoLDAoUFBMSEhEPDw0LCwgGBQJeAQIEBQYICQsLDQ4PEBERExAQEBAPEA8PDg4ODg0NDAwLCwoJCQkHBwcFBQQDAgEBqBAQEBAPEA8PDg8NDg0NDAwLCwoKCQgHBwcFBQQDAgJeAgIDBAUGBgcICQkKCgsMChQUExISEQ8PDQsLCAYFAl4BAgQFBwcKCgwMDg8QEREAAQAAAAADpQP0AFkAAAEPDxUfDzMRHwc/BxMzER8HPwcTMz8HLwchARYLChMTEREQDw0MCwkHBgQCAwQGCAkLDA4PEAkREhMUFI8BAgUGBggJCgkJCAcGAgMCAZwBAwQGBwgICgkJCAcGAgQBAW0KCAgHBgQDAQEDBAYHBAgJ/ZoD8wEBBQYICgsMDg8QERITFBQVFBQSEhEPDw0NCgUJBwUEAv3dCggIBwYEAwEBAwQGBwMJCQNg/KUKCAgHBgQDAQEDBAYHAwkJA2ABAwQGBwgJCQoICAcGAgQCAAEAAAAAA/QD9AA0AAATER8PIRcRLw8hDw4MAQEDAwQFBgYHCAgJCQoKCgK8yAECAgMEBQYHBwcJCAkKCgr84AoKCgkJCAgHBgYFBAMDAQOQ/agKCgoJCQgIBwYGBQQDAwEByAOECgoKCQkICAcGBgUEAwMBAQEBAwMEBQYGBwgICQkKCgAAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbARwBHQAMQlRfUGFyYWdyYXBoB0JUX0xpbmsNQlRfTmV3Q29tbWVudAdCVF9Gb250BkJUX0N1dAdCVF9Db3B5DEZCX1BhcmFncmFwaAZGQl9DdXQHRkJfRm9udA1GQl9OZXdDb21tZW50B0ZCX0xpbmsHRkJfQ29weQhNVF9wYXN0ZQhGQl9wYXN0ZQhCVF9QYXN0ZQ9GQl9QYXN0ZVNwZWNpYWwMQlRfUGFzdGVUZXh0DEZCX1Bhc3RlVGV4dA9CVF9QYXN0ZVNwZWNpYWwPTVRfUGFzdGVTcGVjaWFsDE1UX1Bhc3RlVGV4dAdNVF9Gb250B01UX0NvcHkGTVRfQ3V0B01UX0xpbmsMTVRfUGFyYWdyYXBoCk1UX0NvbW1lbnQAAAAA) format('truetype'); @@ -43,42 +42,6 @@ text-transform: none; } - .contextmenu-control { - margin: 5% 25%; - width: auto; - -webkit-touch-callout: none; - /* iOS Safari */ - -webkit-user-select: none; - /* Safari */ - } - - #contextmenutarget { - border: 1px dashed; - height: 250px; - padding: 10px; - position: relative; - text-align: center; - color: gray; - line-height: 17; - font-size: 14px; - } - - @media only screen and (max-width: 700px) { - .contextmenu-control { - margin: 5% 10%; - width: auto; - } - #contextmenutarget { - line-height: 19; - font-size: 12px; - } - } - - #listview .e-list-icon { - display: inline-block; - line-height: 36px; - } - .e-menu-item .e-cut::before { content: '\e264'; } @@ -182,4 +145,40 @@ .e-bigger .e-contextmenu-wrapper ul.e-contextmenu { width: 186px; } - \ No newline at end of file + + + + + diff --git a/src/context-menu/default.js b/src/context-menu/default.js index 0b5c5e53..8179762f 100644 --- a/src/context-menu/default.js +++ b/src/context-menu/default.js @@ -48,7 +48,8 @@ this.default = function() { } } }; - + + // custom code start var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu'); if (ej.base.Browser.isDevice) { ej.base.select('#contextmenutarget').textContent = 'Touch hold to open the ContextMenu'; @@ -58,4 +59,5 @@ this.default = function() { ej.base.select('#contextmenutarget').textContent = 'Right click/Touch hold to open the ContextMenu'; menuObj.animationSettings.effect = 'SlideDown'; } + // custom code end }; \ No newline at end of file diff --git a/src/dashboard-layout/analytics-dashboard-stack.json b/src/dashboard-layout/analytics-dashboard-stack.json new file mode 100644 index 00000000..80cae341 --- /dev/null +++ b/src/dashboard-layout/analytics-dashboard-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        SEO Analysis Dashboard
        \n
        \n
        \n
        \n \n
        John
        \n
        \n
        \n
        \n
        \n \n \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n\n\n\n\n\n\n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * Sample\n */\n\n var dashboard = new ej.layouts.DashboardLayout({\n columns: 6,\n cellSpacing: [5, 5],\n cellAspectRatio: 100 / 85,\n panels: [\n {\n 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0,\n content: '#card1'\n },\n {\n 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 2,\n content: '#card2'\n },\n {\n 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4,\n content: '#card3'\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 0,\n header: '
        Active Visitors
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 2,\n header: '
        Regional Map
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 4,\n header: '
        Visitors by Type
        ', content: '
        '\n },\n {\n 'sizeX': 4, 'sizeY': 2, 'row': 3, 'col': 2,\n header: '
        Traffic History
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 3, 'col': 0,\n header: '
        Usage Statistics
        ', content: '
        '\n },\n ]\n });\n dashboard.appendTo('#editLayout');\n var sidebarInstance = new ej.navigations.Sidebar({\n type: 'Over',\n dockSize: '60px',\n enableDock: true,\n target: '#target',\n closeOnDocumentClick: true\n });\n sidebarInstance.appendTo('#dockSidebar');\n\n var atcObj = new ej.dropdowns.AutoComplete({\n placeholder: 'Search Here',\n width: '215px'\n });\n atcObj.appendTo('#search');\n var centerTitle = document.createElement('div');\n centerTitle.innerHTML = 'Active
        users  ';\n centerTitle.style.position = 'absolute';\n centerTitle.style.visibility = 'hidden';\n var pie = new ej.charts.AccumulationChart({\n enableSmartLabels: true,\n selectionMode: 'Point',\n series: [\n {\n dataSource: window.expenseData,\n xName: 'Device', yName: 'Amount', startAngle: 0,\n endAngle: 360, innerRadius: '35%',\n radius:'100%',\n dataLabel: {\n visible: true, position: 'Inside',\n name: 'text',\n font: { color: 'white', fontWeight: '600', size: '14px' }\n }, name: 'Revenue',\n palettes: ['#357cd2', '#00bdae', '#e36593'],\n }\n ],\n legendSettings: {\n visible: false, toggleVisibility: false,\n position: 'Right', height: '28%', width: '44%'\n },\n animationComplete: function (args) {\n centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);\n var rect = centerTitle.getBoundingClientRect();\n centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px';\n centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px';\n centerTitle.style.visibility = 'visible';\n var points = args.accumulation.visibleSeries[0].points;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n if (point.labelPosition === 'Outside' && point.labelVisible) {\n var label = document.getElementById('pie_datalabel_Series_0_text_' + point.index);\n label.setAttribute('fill', 'black');\n }\n }\n },\n textRender: function (args) {\n args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);\n pie.animateSeries = true;\n },\n tooltip: {\n enable: true,\n header: '${point.x}',\n format: 'Composition : ${point.y}%'\n },\n width: '100%',\n height: '100%',\n load: themeAccumulation\n });\n pie.appendTo('#pie');\n document.getElementById('pie').appendChild(centerTitle);\n pie.refresh();\n function getFontSize(width) {\n if (width > 300) {\n return '13px';\n }\n else if (width > 250) {\n return '13px';\n }\n else {\n return '13px';\n }\n }\n var linechartObj = new ej.charts.Chart({\n //Initializing Primary Y Axis\n primaryYAxis: {\n maximum: 4, interval: 1,\n labelFormat: '{value}',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'MMM',\n majorGridLines: { width: 0 },\n intervalType: 'Months',\n edgeLabelPlacement: 'Shift'\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea',\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.5 },\n { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.5 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.6 },\n { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.7 },\n { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.2 }\n ],\n border: { color: 'transparent' },\n fill: 'rgb(239, 183, 202)',\n opacity: 0.5\n },\n {\n name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea',\n fill: 'rgb(14, 64, 152, .6)',\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.8 },\n { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.2 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 },\n { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 },\n { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.4 }\n ],\n border: { color: 'transparent' },\n opacity: 0.5\n }\n ],\n legendSettings: { visible: false },\n height: '100%',\n width: '100%',\n load: themeChart\n });\n linechartObj.appendTo('#visitorsChart');\n linechartObj.refresh();\n var columnChartObj = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n width: '100%',\n height: '100%',\n margin: { top: 30},\n //Initializing Primary X Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Desktop',\n dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }],\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n },\n {\n fill: '#e36593',\n dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }],\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mobile',\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n \n },\n {\n dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }],\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Tablet',\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }\n ],\n load: themeChart,\n legendSettings: { visible: false }\n });\n columnChartObj.appendTo('#colChart');\n columnChartObj.refresh();\n var maps = new ej.maps.Maps({\n height: '100%',\n width: '100%',\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: false\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/dashboard-layout/worldmap.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/dashboard-layout/datasource.json'),\n shapeSettings: {\n colorValuePath: 'color',\n },\n markerSettings: [\n {\n visible: true,\n dataSource: [\n { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },\n { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },\n { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' },\n { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' },\n { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' },\n { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' },\n { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' },\n { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' },\n { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' },\n { latitude: 51.5326602, longitude: -0.1262422, name: 'London' }\n ],\n shape: 'Image',\n imageUrl: 'https://ej2.syncfusion.com/demos///ej2.syncfusion.com/javascript/demos/src/maps/images/ballon.png',\n height: 20,\n width: 20,\n offset: {\n y: -10,\n x: 0\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n animationDuration: 0\n },\n ]\n },\n ],\n load: themeMaps\n });\n maps.appendTo('#map');\n var pieChart = new ej.charts.AccumulationChart({\n series: [\n {\n dataSource: [\n { 'x': 'Desktop', y: 37, text: '60%' }, { 'x': 'Mobile', y: 17, text: '10%' },\n { 'x': 'Tablet', y: 19, text: '20%' }\n ],\n dataLabel: {\n visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }\n },\n radius: '100%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',\n explode: true, name: 'Usage', explodeOffset: '10%', explodeIndex: 2\n }\n ],\n center: { x: '50%', y: '50%' },\n enableSmartLabels: true,\n legendSettings: { visible: false },\n width: '100%',\n height: '100%',\n load: themeAccumulation\n });\n pieChart.appendTo('#pieChart');\n pieChart.refresh();\n function themeChart(args) {\n var lineTheme = location.hash.split('/')[1];\n lineTheme = lineTheme ? lineTheme: 'Material';\n args.chart.theme = (lineTheme.charAt(0).toUpperCase() + lineTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n function themeAccumulation(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n function themeMaps(args) {\n var mapTheme = location.hash.split('/')[1];\n mapTheme = mapTheme ? mapTheme : 'Material';\n args.maps.theme = (mapTheme.charAt(0).toUpperCase() + mapTheme.slice(1));\n }\n\n"} \ No newline at end of file diff --git a/src/dashboard-layout/analytics-dashboard.html b/src/dashboard-layout/analytics-dashboard.html new file mode 100644 index 00000000..560198bc --- /dev/null +++ b/src/dashboard-layout/analytics-dashboard.html @@ -0,0 +1,449 @@ +
        + +
        + + + + + + + + + +
        + The following sample demonstrates the usecase of DashboardLayout component in + realtime SEO data analysis. +
        + +
        + The sample demonstrates the realtime SEO data analytics dashboard layout. +
        + + \ No newline at end of file diff --git a/src/dashboard-layout/analytics-dashboard.js b/src/dashboard-layout/analytics-dashboard.js new file mode 100644 index 00000000..5c29006a --- /dev/null +++ b/src/dashboard-layout/analytics-dashboard.js @@ -0,0 +1,314 @@ +/** + * Sample + */ +this.default = function () { + var dashboard = new ej.layouts.DashboardLayout({ + columns: 6, + cellSpacing: [5, 5], + cellAspectRatio: 100 / 85, + panels: [ + { + 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0, + content: '#card1' + }, + { + 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 2, + content: '#card2' + }, + { + 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4, + content: '#card3' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 0, + header: '
        Active Visitors
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 2, + header: '
        Regional Map
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 4, + header: '
        Visitors by Type
        ', content: '
        ' + }, + { + 'sizeX': 4, 'sizeY': 2, 'row': 3, 'col': 2, + header: '
        Traffic History
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 3, 'col': 0, + header: '
        Usage Statistics
        ', content: '
        ' + }, + ] + }); + dashboard.appendTo('#editLayout'); + var sidebarInstance = new ej.navigations.Sidebar({ + type: 'Over', + dockSize: '60px', + enableDock: true, + target: '#target', + closeOnDocumentClick: true + }); + sidebarInstance.appendTo('#dockSidebar'); + + var atcObj = new ej.dropdowns.AutoComplete({ + placeholder: 'Search Here', + width: '215px' + }); + atcObj.appendTo('#search'); + var centerTitle = document.createElement('div'); + centerTitle.innerHTML = 'Active
        users  '; + centerTitle.style.position = 'absolute'; + centerTitle.style.visibility = 'hidden'; + var pie = new ej.charts.AccumulationChart({ + enableSmartLabels: true, + selectionMode: 'Point', + series: [ + { + dataSource: window.expenseData, + xName: 'Device', yName: 'Amount', startAngle: 0, + endAngle: 360, innerRadius: '35%', + radius:'100%', + dataLabel: { + visible: true, position: 'Inside', + name: 'text', + font: { color: 'white', fontWeight: '600', size: '14px' } + }, name: 'Revenue', + palettes: ['#357cd2', '#00bdae', '#e36593'], + } + ], + legendSettings: { + visible: false, toggleVisibility: false, + position: 'Right', height: '28%', width: '44%' + }, + animationComplete: function (args) { + centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width); + var rect = centerTitle.getBoundingClientRect(); + centerTitle.style.top = (args.accumulation.origin.y - rect.height / 2) + 'px'; + centerTitle.style.left = (args.accumulation.origin.x - rect.width / 2) + 'px'; + centerTitle.style.visibility = 'visible'; + var points = args.accumulation.visibleSeries[0].points; + for (var _i = 0, points_1 = points; _i < points_1.length; _i++) { + var point = points_1[_i]; + if (point.labelPosition === 'Outside' && point.labelVisible) { + var label = document.getElementById('pie_datalabel_Series_0_text_' + point.index); + label.setAttribute('fill', 'black'); + } + } + }, + textRender: function (args) { + args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width); + pie.animateSeries = true; + }, + tooltip: { + enable: true, + header: '${point.x}', + format: 'Composition : ${point.y}%' + }, + width: '100%', + height: '100%', + load: themeAccumulation + }); + pie.appendTo('#pie'); + document.getElementById('pie').appendChild(centerTitle); + pie.refresh(); + function getFontSize(width) { + if (width > 300) { + return '13px'; + } + else if (width > 250) { + return '13px'; + } + else { + return '13px'; + } + } + var linechartObj = new ej.charts.Chart({ + //Initializing Primary Y Axis + primaryYAxis: { + maximum: 4, interval: 1, + labelFormat: '{value}', + lineStyle: { width: 0 }, + majorTickLines: { width: 0 }, + minorTickLines: { width: 0 } + }, + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'DateTime', + labelFormat: 'MMM', + majorGridLines: { width: 0 }, + intervalType: 'Months', + edgeLabelPlacement: 'Shift' + }, + chartArea: { + border: { + width: 0 + } + }, + //Initializing Chart Series + series: [ + { + name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea', + dataSource: [ + { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.5 }, + { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.5 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.6 }, + { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.7 }, + { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.2 } + ], + border: { color: 'transparent' }, + fill: 'rgb(239, 183, 202)', + opacity: 0.5 + }, + { + name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea', + fill: 'rgb(14, 64, 152, .6)', + dataSource: [ + { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.8 }, + { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.2 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 }, + { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 }, + { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.4 } + ], + border: { color: 'transparent' }, + opacity: 0.5 + } + ], + legendSettings: { visible: false }, + height: '100%', + width: '100%', + load: themeChart + }); + linechartObj.appendTo('#visitorsChart'); + linechartObj.refresh(); + var columnChartObj = new ej.charts.Chart({ + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'Category', interval: 1, majorGridLines: { width: 0 } + }, + chartArea: { border: { width: 0 } }, + width: '100%', + height: '100%', + margin: { top: 30}, + //Initializing Primary X Axis + primaryYAxis: { + majorGridLines: { width: 0 }, + majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } + }, + //Initializing Chart Series + series: [ + { + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Desktop', + dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }], + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }, + }, + { + fill: '#e36593', + dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }], + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mobile', + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }, + + }, + { + dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }], + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Tablet', + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } } + } + ], + load: themeChart, + legendSettings: { visible: false } + }); + columnChartObj.appendTo('#colChart'); + columnChartObj.refresh(); + var maps = new ej.maps.Maps({ + height: '100%', + width: '100%', + zoomSettings: { + enable: false + }, + legendSettings: { + visible: false + }, + layers: [ + { + shapeData: new ej.maps.MapAjax('./src/dashboard-layout/worldmap.json'), + shapePropertyPath: 'continent', + shapeDataPath: 'continent', + dataSource: new ej.maps.MapAjax('./src/dashboard-layout/datasource.json'), + shapeSettings: { + colorValuePath: 'color', + }, + markerSettings: [ + { + visible: true, + dataSource: [ + { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }, + { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' }, + { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }, + { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' }, + { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' }, + { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' }, + { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' }, + { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' }, + { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' }, + { latitude: 51.5326602, longitude: -0.1262422, name: 'London' } + ], + shape: 'Image', + imageUrl: 'https://ej2.syncfusion.com/demos/src/maps/images/ballon.png', + height: 20, + width: 20, + offset: { + y: -10, + x: 0 + }, + tooltipSettings: { + visible: true, + valuePath: 'name' + }, + animationDuration: 0 + }, + ] + }, + ], + load: themeMaps + }); + maps.appendTo('#map'); + var pieChart = new ej.charts.AccumulationChart({ + series: [ + { + dataSource: [ + { 'x': 'Desktop', y: 37, text: '60%' }, { 'x': 'Mobile', y: 17, text: '10%' }, + { 'x': 'Tablet', y: 19, text: '20%' } + ], + dataLabel: { + visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' } + }, + radius: '100%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%', + explode: true, name: 'Usage', explodeOffset: '10%', explodeIndex: 2 + } + ], + center: { x: '50%', y: '50%' }, + enableSmartLabels: true, + legendSettings: { visible: false }, + width: '100%', + height: '100%', + load: themeAccumulation + }); + pieChart.appendTo('#pieChart'); + pieChart.refresh(); + function themeChart(args) { + var lineTheme = location.hash.split('/')[1]; + lineTheme = lineTheme ? lineTheme: 'Material'; + args.chart.theme = (lineTheme.charAt(0).toUpperCase() + lineTheme.slice(1)).replace(/-dark/i, 'Dark'); + } + function themeAccumulation(args) { + var selectedTheme = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); + } + function themeMaps(args) { + var mapTheme = location.hash.split('/')[1]; + mapTheme = mapTheme ? mapTheme : 'Material'; + args.maps.theme = (mapTheme.charAt(0).toUpperCase() + mapTheme.slice(1)); + } +}; diff --git a/src/dashboard-layout/datasource.js b/src/dashboard-layout/datasource.js new file mode 100644 index 00000000..5e8a78bc --- /dev/null +++ b/src/dashboard-layout/datasource.js @@ -0,0 +1,84 @@ +/** + * Data source + */ +window.panelData = [ + { + 'panel1': { 'sizeX': 4, 'sizeY': 3, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 4 }, + 'panel3': { 'sizeX': 6, 'sizeY': 1, 'row': 3, 'col': 0 } + }, + { + 'panel1': { 'sizeX': 6, 'sizeY': 1, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 2, 'sizeY': 3, 'row': 1, 'col': 0 }, + 'panel3': { 'sizeX': 4, 'sizeY': 3, 'row': 1, 'col': 2 }, + 'panel4': { 'sizeX': 6, 'sizeY': 1, 'row': 4, 'col': 0 } + }, + { + 'panel1': { 'sizeX': 6, 'sizeY': 1, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 3, 'sizeY': 3, 'row': 1, 'col': 0 }, + 'panel3': { 'sizeX': 3, 'sizeY': 3, 'row': 1, 'col': 3 }, + 'panel4': { 'sizeX': 6, 'sizeY': 1, 'row': 4, 'col': 0 } + }, + { + 'panel1': { 'sizeX': 6, 'sizeY': 1, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 2, 'sizeY': 3, 'row': 1, 'col': 0 }, + 'panel3': { 'sizeX': 2, 'sizeY': 3, 'row': 1, 'col': 2 }, + 'panel4': { 'sizeX': 2, 'sizeY': 3, 'row': 1, 'col': 4 }, + 'panel5': { 'sizeX': 6, 'sizeY': 1, 'row': 4, 'col': 0 } + }, + { + 'panel1': { 'sizeX': 6, 'sizeY': 1, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 4, 'sizeY': 3, 'row': 1, 'col': 0 }, + 'panel3': { 'sizeX': 2, 'sizeY': 3, 'row': 1, 'col': 4 }, + 'panel4': { 'sizeX': 6, 'sizeY': 1, 'row': 4, 'col': 0 } + }, + { + 'panel1': { 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 0 }, + 'panel2': { 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 2 }, + 'panel3': { 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 4 }, + 'panel4': { 'sizeX': 6, 'sizeY': 1, 'row': 3, 'col': 0 } + } +]; + +/** + * Sample data + */ +window.expenseData = [ + { + 'UniqueId': 'T100003', + 'DateTime': new Date(1488359820000), + 'Category': 'Food', + 'PaymentMode': 'Cash', + 'TransactionType': 'Expense', + 'Description': 'Confederate cush', + 'Amount': '900', + 'MonthShort': 'Mar', + 'MonthFull': 'March, 2017', + 'FormattedDate': '03/01/2017 08:53 PM', + 'Device': 'Tablet' + }, { + 'UniqueId': 'T100004', + 'DateTime': new Date(1491038220000), + 'Category': 'Transportation', + 'PaymentMode': 'Credit Card', + 'TransactionType': 'Expense', + 'Description': 'Public and other transportation', + 'Amount': '1200', + 'MonthShort': 'Apr', + 'MonthFull': 'April, 2017', + 'FormattedDate': '04/01/2017 10:44 AM', + 'Device': 'Desktop' + }, { + 'UniqueId': 'T100005', + 'DateTime': new Date(1493630220000), + 'Category': 'Transportation', + 'PaymentMode': 'Cash', + 'TransactionType': 'Expense', + 'Description': 'Public and other transportation', + 'Amount': '600', + 'MonthShort': 'May', + 'MonthFull': 'May, 2017', + 'FormattedDate': '05/01/2017 03:25 PM', + 'Device': 'Mobile' + }, +]; \ No newline at end of file diff --git a/src/dashboard-layout/datasource.json b/src/dashboard-layout/datasource.json new file mode 100644 index 00000000..5ee0ebcc --- /dev/null +++ b/src/dashboard-layout/datasource.json @@ -0,0 +1,43 @@ +[{ + "drillColor": "#C13664", + "continent": "North America", + "CategoryName": "Books", + "Sales": 10882, + "color": "#71B081" +}, +{ + "drillColor": "#9C3367", + "continent": "South America", + "CategoryName": "Books", + "Sales": 13776, + "color": "#5A9A77" +}, +{ + "drillColor": "#80306A", + "continent": "Africa", + "CategoryName": "Books", + "Sales": 18718.0, + "color": "#498770" +}, +{ + "drillColor": "#622D6C", + "continent": "Europe", + "CategoryName": "Books", + "Sales": 3746, + "color": "#39776C" +}, +{ + "drillColor": "#462A6D", + "continent": "Asia", + "CategoryName": "Books", + "Sales": 10688, + "color": "#266665" +}, +{ + "drillColor": "#2A2870", + "continent": "Australia", + "CategoryName": "Books", + "Sales": 30716, + "color": "#124F5E" +} +] \ No newline at end of file diff --git a/src/dashboard-layout/default-stack.json b/src/dashboard-layout/default-stack.json new file mode 100644 index 00000000..58d318de --- /dev/null +++ b/src/dashboard-layout/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        0
        \n
        \n
        \n
        \n \n
        \n
        1
        \n
        \n
        \n
        \n \n
        \n
        2
        \n
        \n
        \n
        \n \n
        \n
        3
        \n
        \n
        \n
        \n \n
        \n
        4
        \n
        \n
        \n
        \n \n
        \n
        5
        \n
        \n
        \n
        \n \n
        \n
        6
        \n
        \n
        \n
        \n \n
        \n
        7
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for default functionalities\n */\n\n var dashboard = new ej.layouts.DashboardLayout({\n cellSpacing: [10, 10],\n columns: 5,\n allowResizing: true,\n });\n dashboard.appendTo('#defaultLayout');\n var dashboardObject = document.getElementById('defaultLayout').ej2_instances[0];\n var count = 8;\n document.getElementById('add').onclick = function (e) {\n var panel = [{\n 'id': count.toString() + '_layout', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,\n content: '
        ' + count.toString() + '
        '\n }];\n dashboardObject.addPanel(panel[0]);\n var closeIcon = document.getElementById(count.toString() + '_layout').querySelector('.e-clear-icon');\n closeIcon.addEventListener('click', onCloseIconHandler);\n count = count + 1;\n };\n function onCloseIconHandler(event) {\n if (event.target.offsetParent) {\n dashboardObject.removePanel(event.target.offsetParent.id);\n }\n\n }\n var closeElement = document.querySelectorAll('.e-clear-icon');\n for (var i = 0; i < closeElement.length; i++) {\n closeElement[i].addEventListener('click', onCloseIconHandler);\n }\n\n"} \ No newline at end of file diff --git a/src/dashboard-layout/default.html b/src/dashboard-layout/default.html new file mode 100644 index 00000000..974b2839 --- /dev/null +++ b/src/dashboard-layout/default.html @@ -0,0 +1,121 @@ +
        +
        + +
        +
        +
        + +
        +
        0
        +
        +
        +
        + +
        +
        1
        +
        +
        +
        + +
        +
        2
        +
        +
        +
        + +
        +
        3
        +
        +
        +
        + +
        +
        4
        +
        +
        +
        + +
        +
        5
        +
        +
        +
        + +
        +
        6
        +
        +
        +
        + +
        +
        7
        +
        +
        +
        +
        + +
        +
        +
        +
        +

        + The following sample demonstrates the default functionalities of the DashboardLayout component. Click the Add Panel button to add panels dynamically to the dashboard layout. +

        +
        + +
        +

        + The DashboardLayout component provides the capability to arrange, resize and reorder the panels within the dashboard layout. +

        + +
        + diff --git a/src/dashboard-layout/default.js b/src/dashboard-layout/default.js new file mode 100644 index 00000000..f900d4eb --- /dev/null +++ b/src/dashboard-layout/default.js @@ -0,0 +1,33 @@ +/** + * Sample for default functionalities + */ +this.default = function () { + var dashboard = new ej.layouts.DashboardLayout({ + cellSpacing: [10, 10], + columns: 5, + allowResizing: true, + }); + dashboard.appendTo('#defaultLayout'); + var dashboardObject = document.getElementById('defaultLayout').ej2_instances[0]; + var count = 8; + document.getElementById('add').onclick = function (e) { + var panel = [{ + 'id': count.toString() + '_layout', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, + content: '
        ' + count.toString() + '
        ' + }]; + dashboardObject.addPanel(panel[0]); + var closeIcon = document.getElementById(count.toString() + '_layout').querySelector('.e-clear-icon'); + closeIcon.addEventListener('click', onCloseIconHandler); + count = count + 1; + }; + function onCloseIconHandler(event) { + if (event.target.offsetParent) { + dashboardObject.removePanel(event.target.offsetParent.id); + } + + } + var closeElement = document.querySelectorAll('.e-clear-icon'); + for (var i = 0; i < closeElement.length; i++) { + closeElement[i].addEventListener('click', onCloseIconHandler); + } +}; diff --git a/src/dashboard-layout/dynamic-widget-stack.json b/src/dashboard-layout/dynamic-widget-stack.json new file mode 100644 index 00000000..301f8661 --- /dev/null +++ b/src/dashboard-layout/dynamic-widget-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n\n
        \n
        \n Add New Widget\n
        \n
        \n
        \n\n
        \n
        \n
        \n
        \n
        \n

        Linechart (1x1)

        \n
        \n
        \n

        Piechart (1x1)

        \n\n
        \n
        \n

        Splinechart (2x1)

        \n\n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for edit functionalities\n */\n\n var dashboard = new ej.layouts.DashboardLayout({\n cellSpacing: [10, 10],\n cellAspectRatio: 100 / 85,\n columns:2,\n allowDragging: false,\n allowResizing: false,\n resizeStop: onPanelResize,\n panels: [{\n 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,\n header: '
        Line Chart
        ', content: '
        '\n },\n {\n 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 1,\n header: '
        Pie Chart
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 1, 'row': 1, 'col': 0,\n header: '
        Spline Chart
        ', content: '
        '\n }]\n\n });\n dashboard.appendTo('#defaultLayout');\n var toggleBtn = new ej.buttons.Button({\n cssClass: 'e-outline e-flat e-primary',\n iconCss: 'edit',\n isToggle: true\n });\n toggleBtn.appendTo('#togglebtn');\n toggleBtn.element.onclick = function () {\n if (toggleBtn.element.classList.contains('e-active')) {\n dashboardObject.allowResizing = true;\n dashboardObject.allowDragging = true;\n toggleBtn.content = \"SAVE\";\n toggleBtn.iconCss = \"save\";\n document.getElementById('dialogBtn').style.display = 'block';\n } else {\n dashboardObject.allowResizing = false;\n dashboardObject.allowDragging = false;\n toggleBtn.content = \"EDIT\";\n toggleBtn.iconCss = \"edit\";\n document.getElementById('dialogBtn').style.display = 'none';\n }\n };\n\n function onPanelResize(args) {\n if (args.element && args.element.querySelector('.e-panel-container .e-panel-content div') &&\n dashboardObject.element.querySelector('.e-holder')) {\n var chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div')).ej2_instances[0];\n var holderElementHeight = parseInt((dashboardObject.element.querySelector('.e-holder')).style.height, 10);\n var panelContanierElement = args.element.querySelector('.e-panel-content');\n panelContanierElement.style.height = holderElementHeight - 35 + 'px';\n chartObj.height = '95%';\n chartObj.width = '100%';\n chartObj.refresh();\n }\n }\n\n\n\n var linechartObj = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n height: '100%',\n width: '99%',\n //Initializing Chart Series\n series: [\n {\n dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }],\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Jan', fill: '#00bdae',\n marker: {\n dataLabel: {\n visible: false, position: 'Top', font: {\n fontWeight: '600', color: '#ffffff'\n }\n }\n }\n },\n {\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Feb', fill: '#e56691',\n dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }] \n },\n {\n dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }],\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mar', fill: '#357cd2',\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }\n ],\n load: lineChartTheme\n });\n linechartObj.appendTo('#linechart');\n var pie = new ej.charts.AccumulationChart({\n series: [\n {\n \n palettes: ['#00bdae', '#357cd2', '#e56691'],\n dataSource: [\n { 'x': 'Jan', y: 12.5, text: 'January' },\n { 'x': 'Feb', y: 25, text: 'February' },\n { 'x': 'Mar', y: 50, text: 'March' },\n ],\n xName: 'x', \n radius: '100%', startAngle: 0, yName: 'y', innerRadius: '40%', endAngle: 360, \n name: 'Earnings',\n dataLabel: {\n visible: true,\n name: 'value',\n position: 'Inside'\n }\n }\n\n ],\n tooltip: {\n enable: true,\n header: '${point.x}',\n format: 'Composition : ${point.y}%'\n },\n\n legendSettings: {\n visible: false, toggleVisibility: false\n },\n width: '99%',\n height: '100%',\n load: themeAccumulation\n });\n pie.appendTo('#pie');\n\n var chart = new ej.charts.Chart({\n //Initializing Primary Y Axis\n primaryYAxis: {\n maximum: 4, interval: 1,\n labelFormat: '{value}',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'MMM',\n majorGridLines: { width: 0 },\n intervalType: 'Months',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Chart Series\n series: [\n {\n name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea',\n fill: 'rgb(239, 183, 202)',\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.5 },\n { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.7 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.6 },\n { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.9 },\n { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.2 }\n ],\n border: { color: 'transparent' },\n opacity: 0.5\n },\n {\n border: { color: 'transparent' },\n opacity: 0.5,\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 },\n { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 },\n { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 },\n { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.2 }\n ],\n name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea',\n fill: 'rgb(0, 189, 174)',\n }\n ],\n width: '99%',\n height: '100%',\n load: lineChartTheme\n });\n chart.appendTo('#chart');\n\n\n var dashboardObject = document.getElementById('defaultLayout').ej2_instances[0];\n\n var dialogObj = new ej.popups.Dialog({\n width: '500px',\n header: 'Add a widget',\n showCloseIcon: true,\n animationSettings: { effect: 'Zoom' },\n content: document.getElementById('dialogcontent'),\n target: document.getElementById('target'),\n isModal: true,\n height: '260px',\n visible: false\n });\n dialogObj.appendTo('#modalDialog');\n dialogObj.hide();\n\n var count = 3;\n document.getElementById('dialogBtn').onclick = function () {\n\n dialogObj.show();\n document.getElementById('linetemplate').onclick = function (e) {\n var countValue = count.toString();\n var panel = [{\n 'id': '_layout' + countValue, 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,\n header: '
        Line Chart
        ', content: '
        '\n }];\n count = count + 1;\n dashboardObject.addPanel(panel[0]);\n\n var linechartObj = new ej.charts.Chart({\n chartArea: { border: { width: 0 } },\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n width: '99%',\n //Initializing Primary X Axis\n primaryYAxis: {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n height: '100%',\n //Initializing Chart Series\n series: [\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Jan', fill: '#00bdae',\n dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }],\n marker: {\n dataLabel: {\n visible: false, position: 'Top', font: {\n fontWeight: '600', color: '#ffffff'\n }\n }\n }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Feb', fill: '#e56691',\n dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }],\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n },\n {\n type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mar', fill: '#357cd2',\n dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }],\n marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }\n }\n ],\n load: lineChartTheme\n });\n linechartObj.appendTo('#' + '_line' + countValue);\n linechartObj.refresh();\n dialogObj.hide();\n };\n document.getElementById('pietemplate').onclick = function (e) {\n var countValue = count.toString();\n var panel = [{\n 'id': '_layout' + countValue, 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,\n header: '
        Pie Chart
        ', content: '
        '\n }];\n count = count + 1;\n dashboardObject.addPanel(panel[0]);\n var pie = new ej.charts.AccumulationChart({\n series: [\n {\n dataSource: [\n { 'x': 'Jan', y: 12.5, text: 'January' },\n { 'x': 'Feb', y: 25, text: 'February' },\n { 'x': 'Mar', y: 50, text: 'March' },\n ],\n palettes: ['#00bdae', '#357cd2', '#e56691'],\n radius: '100%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '40%', name: 'Earnings',\n dataLabel: {\n visible: true,\n name: 'value',\n position: 'Inside'\n }\n }\n\n ],\n tooltip: {\n enable: true,\n header: '${point.x}',\n format: 'Composition : ${point.y}%'\n },\n\n legendSettings: {\n visible: false, toggleVisibility: false\n },\n width: '99%',\n height: '100%',\n load: themeAccumulation\n });\n pie.appendTo('#' + '_pie' + countValue);\n pie.refresh();\n dialogObj.hide();\n };\n document.getElementById('splinetemplate').onclick = function (e) {\n var countValue = count.toString();\n var panel = [{\n 'id': '_layout' + countValue, 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0,\n header: '
        Spline Chart
        ', content: '
        '\n }];\n count = count + 1;\n dashboardObject.addPanel(panel[0]);\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n labelFormat: 'MMM',\n majorGridLines: { width: 0 },\n intervalType: 'Months',\n edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n maximum: 4, interval: 1,\n labelFormat: '{value}',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 },\n { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 },\n { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 },\n { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 }\n ],\n name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea',\n border: { color: 'transparent' },\n fill: 'rgb(239, 183, 202)',\n opacity: 0.5\n },\n {\n dataSource: [\n { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 },\n { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 },\n { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.7 },\n { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.8 },\n { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.3 }\n ],\n name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea',\n border: { color: 'transparent' },\n fill: 'rgb(0, 189, 174)',\n opacity: 0.5\n }\n ],\n width: '99%',\n height: '100%',\n load: lineChartTheme\n });\n chart.appendTo('#' + '_spline' + countValue);\n chart.refresh();\n dialogObj.hide();\n };\n };\n\n function lineChartTheme(args) {\n var chartTheme = location.hash.split('/')[1];\n chartTheme = chartTheme ? chartTheme: 'Material';\n args.chart.theme = (chartTheme.charAt(0).toUpperCase() + chartTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n function themeAccumulation(args) {\n var pieTheme = location.hash.split('/')[1];\n pieTheme = pieTheme ? pieTheme : 'Material';\n args.accumulation.theme = (pieTheme.charAt(0).toUpperCase() + pieTheme.slice(1)).replace(/-dark/i, 'Dark');\n }\n\n"} \ No newline at end of file diff --git a/src/dashboard-layout/dynamic-widget.html b/src/dashboard-layout/dynamic-widget.html new file mode 100644 index 00000000..5dc3b48d --- /dev/null +++ b/src/dashboard-layout/dynamic-widget.html @@ -0,0 +1,167 @@ +
        +
        +
        + +
        + +
        +
        + Add New Widget +
        +
        +
        + +
        +
        +
        +
        +
        +

        Linechart (1x1)

        +
        +
        +

        Piechart (1x1)

        + +
        +
        +

        Splinechart (2x1)

        + +
        +
        +
        +
        + +
        +
        +
        +
        +

        + The following sample demonstrates a editable dashboard layout. Initially the DashboardLayout component doesn't allow to drag, resize or reorder the panels. After clicking the edit button, the layout becomes editable which allows to drag and reorder the + panels as per the requirement and also you can add new panels to the layout with predefined templates by clicking the add new button and reorder them by dragging and placing in the required position. Drag and resizing of the panles are not applicable in mobile resolution. +

        +
        + +
        +

        + The following sample demonstrates about using the dashboard layout as an editable layout. +

        +
        +
        + + + + \ No newline at end of file diff --git a/src/dashboard-layout/dynamic-widget.js b/src/dashboard-layout/dynamic-widget.js new file mode 100644 index 00000000..05e0aec2 --- /dev/null +++ b/src/dashboard-layout/dynamic-widget.js @@ -0,0 +1,392 @@ +/** + * Sample for edit functionalities + */ +this.default = function () { + var dashboard = new ej.layouts.DashboardLayout({ + cellSpacing: [10, 10], + cellAspectRatio: 100 / 85, + columns:2, + allowDragging: false, + allowResizing: false, + resizeStop: onPanelResize, + panels: [{ + 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, + header: '
        Line Chart
        ', content: '
        ' + }, + { + 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 1, + header: '
        Pie Chart
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 1, 'row': 1, 'col': 0, + header: '
        Spline Chart
        ', content: '
        ' + }] + + }); + dashboard.appendTo('#defaultLayout'); + var toggleBtn = new ej.buttons.Button({ + cssClass: 'e-outline e-flat e-primary', + iconCss: 'edit', + isToggle: true + }); + toggleBtn.appendTo('#togglebtn'); + toggleBtn.element.onclick = function () { + if (toggleBtn.element.classList.contains('e-active')) { + dashboardObject.allowResizing = true; + dashboardObject.allowDragging = true; + toggleBtn.content = "SAVE"; + toggleBtn.iconCss = "save"; + document.getElementById('dialogBtn').style.display = 'block'; + } else { + dashboardObject.allowResizing = false; + dashboardObject.allowDragging = false; + toggleBtn.content = "EDIT"; + toggleBtn.iconCss = "edit"; + document.getElementById('dialogBtn').style.display = 'none'; + } + }; + + function onPanelResize(args) { + if (args.element && args.element.querySelector('.e-panel-container .e-panel-content div') && + dashboardObject.element.querySelector('.e-holder')) { + var chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div')).ej2_instances[0]; + var holderElementHeight = parseInt((dashboardObject.element.querySelector('.e-holder')).style.height, 10); + var panelContanierElement = args.element.querySelector('.e-panel-content'); + panelContanierElement.style.height = holderElementHeight - 35 + 'px'; + chartObj.height = '95%'; + chartObj.width = '100%'; + chartObj.refresh(); + } + } + + + + var linechartObj = new ej.charts.Chart({ + //Initializing Primary X Axis + primaryYAxis: { + majorGridLines: { width: 0 }, + majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } + }, + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'Category', interval: 1, majorGridLines: { width: 0 } + }, + chartArea: { border: { width: 0 } }, + height: '100%', + width: '99%', + //Initializing Chart Series + series: [ + { + dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }], + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Jan', fill: '#00bdae', + marker: { + dataLabel: { + visible: false, position: 'Top', font: { + fontWeight: '600', color: '#ffffff' + } + } + } + }, + { + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }, + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Feb', fill: '#e56691', + dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }] + }, + { + dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }], + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mar', fill: '#357cd2', + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } } + } + ], + load: lineChartTheme + }); + linechartObj.appendTo('#linechart'); + var pie = new ej.charts.AccumulationChart({ + series: [ + { + + palettes: ['#00bdae', '#357cd2', '#e56691'], + dataSource: [ + { 'x': 'Jan', y: 12.5, text: 'January' }, + { 'x': 'Feb', y: 25, text: 'February' }, + { 'x': 'Mar', y: 50, text: 'March' }, + ], + xName: 'x', + radius: '100%', startAngle: 0, yName: 'y', innerRadius: '40%', endAngle: 360, + name: 'Earnings', + dataLabel: { + visible: true, + name: 'value', + position: 'Inside' + } + } + + ], + tooltip: { + enable: true, + header: '${point.x}', + format: 'Composition : ${point.y}%' + }, + + legendSettings: { + visible: false, toggleVisibility: false + }, + width: '99%', + height: '100%', + load: themeAccumulation + }); + pie.appendTo('#pie'); + + var chart = new ej.charts.Chart({ + //Initializing Primary Y Axis + primaryYAxis: { + maximum: 4, interval: 1, + labelFormat: '{value}', + lineStyle: { width: 0 }, + majorTickLines: { width: 0 }, + minorTickLines: { width: 0 } + }, + chartArea: { + border: { + width: 0 + } + }, + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'DateTime', + labelFormat: 'MMM', + majorGridLines: { width: 0 }, + intervalType: 'Months', + edgeLabelPlacement: 'Shift' + }, + //Initializing Chart Series + series: [ + { + name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea', + fill: 'rgb(239, 183, 202)', + dataSource: [ + { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.5 }, + { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.7 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.6 }, + { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.9 }, + { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.2 } + ], + border: { color: 'transparent' }, + opacity: 0.5 + }, + { + border: { color: 'transparent' }, + opacity: 0.5, + dataSource: [ + { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 }, + { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 }, + { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 }, + { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.2 } + ], + name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea', + fill: 'rgb(0, 189, 174)', + } + ], + width: '99%', + height: '100%', + load: lineChartTheme + }); + chart.appendTo('#chart'); + + + var dashboardObject = document.getElementById('defaultLayout').ej2_instances[0]; + + var dialogObj = new ej.popups.Dialog({ + width: '500px', + header: 'Add a widget', + showCloseIcon: true, + animationSettings: { effect: 'Zoom' }, + content: document.getElementById('dialogcontent'), + target: document.getElementById('target'), + isModal: true, + height: '260px', + visible: false + }); + dialogObj.appendTo('#modalDialog'); + dialogObj.hide(); + + var count = 3; + document.getElementById('dialogBtn').onclick = function () { + + dialogObj.show(); + document.getElementById('linetemplate').onclick = function (e) { + var countValue = count.toString(); + var panel = [{ + 'id': '_layout' + countValue, 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, + header: '
        Line Chart
        ', content: '
        ' + }]; + count = count + 1; + dashboardObject.addPanel(panel[0]); + + var linechartObj = new ej.charts.Chart({ + chartArea: { border: { width: 0 } }, + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'Category', interval: 1, majorGridLines: { width: 0 } + }, + width: '99%', + //Initializing Primary X Axis + primaryYAxis: { + majorGridLines: { width: 0 }, + majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } + }, + height: '100%', + //Initializing Chart Series + series: [ + { + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Jan', fill: '#00bdae', + dataSource: [{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }], + marker: { + dataLabel: { + visible: false, position: 'Top', font: { + fontWeight: '600', color: '#ffffff' + } + } + } + }, + { + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Feb', fill: '#e56691', + dataSource: [{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }], + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } } + }, + { + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Mar', fill: '#357cd2', + dataSource: [{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }], + marker: { dataLabel: { visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } } + } + ], + load: lineChartTheme + }); + linechartObj.appendTo('#' + '_line' + countValue); + linechartObj.refresh(); + dialogObj.hide(); + }; + document.getElementById('pietemplate').onclick = function (e) { + var countValue = count.toString(); + var panel = [{ + 'id': '_layout' + countValue, 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, + header: '
        Pie Chart
        ', content: '
        ' + }]; + count = count + 1; + dashboardObject.addPanel(panel[0]); + var pie = new ej.charts.AccumulationChart({ + series: [ + { + dataSource: [ + { 'x': 'Jan', y: 12.5, text: 'January' }, + { 'x': 'Feb', y: 25, text: 'February' }, + { 'x': 'Mar', y: 50, text: 'March' }, + ], + palettes: ['#00bdae', '#357cd2', '#e56691'], + radius: '100%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '40%', name: 'Earnings', + dataLabel: { + visible: true, + name: 'value', + position: 'Inside' + } + } + + ], + tooltip: { + enable: true, + header: '${point.x}', + format: 'Composition : ${point.y}%' + }, + + legendSettings: { + visible: false, toggleVisibility: false + }, + width: '99%', + height: '100%', + load: themeAccumulation + }); + pie.appendTo('#' + '_pie' + countValue); + pie.refresh(); + dialogObj.hide(); + }; + document.getElementById('splinetemplate').onclick = function (e) { + var countValue = count.toString(); + var panel = [{ + 'id': '_layout' + countValue, 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0, + header: '
        Spline Chart
        ', content: '
        ' + }]; + count = count + 1; + dashboardObject.addPanel(panel[0]); + var chart = new ej.charts.Chart({ + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'DateTime', + labelFormat: 'MMM', + majorGridLines: { width: 0 }, + intervalType: 'Months', + edgeLabelPlacement: 'Shift' + }, + //Initializing Primary Y Axis + primaryYAxis: { + maximum: 4, interval: 1, + labelFormat: '{value}', + lineStyle: { width: 0 }, + majorTickLines: { width: 0 }, + minorTickLines: { width: 0 } + }, + chartArea: { + border: { + width: 0 + } + }, + //Initializing Chart Series + series: [ + { + dataSource: [ + { x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 }, + { x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 }, + { x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 }, + { x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 } + ], + name: 'Jan', xName: 'x', yName: 'y', type: 'SplineArea', + border: { color: 'transparent' }, + fill: 'rgb(239, 183, 202)', + opacity: 0.5 + }, + { + dataSource: [ + { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 }, + { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 }, + { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.7 }, + { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.8 }, + { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.3 } + ], + name: 'Feb', xName: 'x', yName: 'y', type: 'SplineArea', + border: { color: 'transparent' }, + fill: 'rgb(0, 189, 174)', + opacity: 0.5 + } + ], + width: '99%', + height: '100%', + load: lineChartTheme + }); + chart.appendTo('#' + '_spline' + countValue); + chart.refresh(); + dialogObj.hide(); + }; + }; + + function lineChartTheme(args) { + var chartTheme = location.hash.split('/')[1]; + chartTheme = chartTheme ? chartTheme: 'Material'; + args.chart.theme = (chartTheme.charAt(0).toUpperCase() + chartTheme.slice(1)).replace(/-dark/i, 'Dark'); + } + function themeAccumulation(args) { + var pieTheme = location.hash.split('/')[1]; + pieTheme = pieTheme ? pieTheme : 'Material'; + args.accumulation.theme = (pieTheme.charAt(0).toUpperCase() + pieTheme.slice(1)).replace(/-dark/i, 'Dark'); + } +}; diff --git a/src/dashboard-layout/predefined-layouts-stack.json b/src/dashboard-layout/predefined-layouts-stack.json new file mode 100644 index 00000000..73fbe8a8 --- /dev/null +++ b/src/dashboard-layout/predefined-layouts-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Choose dashboard layout\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for predefined layout functionalities\n */\n\n var panels = window.panelData;\n var headerCount = 1;\n var dashboard = new ej.layouts.DashboardLayout({ \n cellSpacing: [10, 10],\n columns:6,\n panels: [{\n 'sizeX': 4, 'sizeY': 3, 'row': 0, 'col': 0,\n header: '
        Header Area
        ',\n content: '
        Content Area
        '\n },\n {\n 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 4,\n header: '
        Header Area
        ',\n content: '
        Content Area
        '\n },\n {\n 'sizeX': 6, 'sizeY': 1, 'row': 3, 'col': 0,\n header: '
        Header Area
        ',\n content: '
        Content Area
        '\n }]\n });\n dashboard.appendTo('#dynamicLayout');\n var dashboardObject = document.getElementById('dynamicLayout').ej2_instances[0];\n var btnInstance = new ej.buttons.Button();\n btnInstance.appendTo('#reset');\n btnInstance.element.onclick = function () {\n var selectedElement = document.getElementsByClassName('e-selected-style');\n initializeTemplate(selectedElement[0]);\n };\n document.getElementById('template').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n initializeTemplate(args.target);\n }\n target.classList.add('e-selected-style');\n };\n function initializeTemplate(element) {\n var updatedpanels = [];\n var index = parseInt(element.getAttribute('data-id'), 10) - 1;\n var panel = Object.keys(panels[index]).map(function (panelIndex) {\n return panels[index][panelIndex];\n });\n for (var i = 0; i < panel.length; i++) {\n var panelModelValue = {\n row: panel[i].row,\n col: panel[i].col,\n sizeX: panel[i].sizeX,\n sizeY: panel[i].sizeY,\n header: '
        Header Area
        ',\n content: '
        Content Area
        '\n };\n updatedpanels.push(panelModelValue);\n }\n dashboard.panels = updatedpanels;\n }\n\n"} \ No newline at end of file diff --git a/src/dashboard-layout/predefined-layouts.html b/src/dashboard-layout/predefined-layouts.html new file mode 100644 index 00000000..5b25bc0e --- /dev/null +++ b/src/dashboard-layout/predefined-layouts.html @@ -0,0 +1,197 @@ +
        +
        +
        +
        +
        +
        +
        + Properties +
        +
        +
        + Choose dashboard layout +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        +
        +

        + This sample demonstrates, the functionality of dynamically updating the panels inside the DashboardLayout by slecting it from the pre-defined values in the properties panel. Go to the properties panel section and select any of the pre-defined layout, + based on selection the panles are updated in the dashboard layout dynamically inside the DashboardLayout. Click the reset button to reset the panels settings of the layout. +

        +
        +
        +

        + This sample demonstrates how to update the panels dynamically in the dashboard layout component. +

        + + \ No newline at end of file diff --git a/src/dashboard-layout/predefined-layouts.js b/src/dashboard-layout/predefined-layouts.js new file mode 100644 index 00000000..20d6a8df --- /dev/null +++ b/src/dashboard-layout/predefined-layouts.js @@ -0,0 +1,64 @@ +/** + * Sample for predefined layout functionalities + */ +this.default = function () { + var panels = window.panelData; + var headerCount = 1; + var dashboard = new ej.layouts.DashboardLayout({ + cellSpacing: [10, 10], + columns:6, + panels: [{ + 'sizeX': 4, 'sizeY': 3, 'row': 0, 'col': 0, + header: '
        Header Area
        ', + content: '
        Content Area
        ' + }, + { + 'sizeX': 2, 'sizeY': 3, 'row': 0, 'col': 4, + header: '
        Header Area
        ', + content: '
        Content Area
        ' + }, + { + 'sizeX': 6, 'sizeY': 1, 'row': 3, 'col': 0, + header: '
        Header Area
        ', + content: '
        Content Area
        ' + }] + }); + dashboard.appendTo('#dynamicLayout'); + var dashboardObject = document.getElementById('dynamicLayout').ej2_instances[0]; + var btnInstance = new ej.buttons.Button(); + btnInstance.appendTo('#reset'); + btnInstance.element.onclick = function () { + var selectedElement = document.getElementsByClassName('e-selected-style'); + initializeTemplate(selectedElement[0]); + }; + document.getElementById('template').onclick = function (args) { + var target = args.target; + var selectedElement = document.getElementsByClassName('e-selected-style'); + if (selectedElement.length) { + selectedElement[0].classList.remove('e-selected-style'); + } + if (target.className === 'image-pattern-style') { + initializeTemplate(args.target); + } + target.classList.add('e-selected-style'); + }; + function initializeTemplate(element) { + var updatedpanels = []; + var index = parseInt(element.getAttribute('data-id'), 10) - 1; + var panel = Object.keys(panels[index]).map(function (panelIndex) { + return panels[index][panelIndex]; + }); + for (var i = 0; i < panel.length; i++) { + var panelModelValue = { + row: panel[i].row, + col: panel[i].col, + sizeX: panel[i].sizeX, + sizeY: panel[i].sizeY, + header: '
        Header Area
        ', + content: '
        Content Area
        ' + }; + updatedpanels.push(panelModelValue); + } + dashboard.panels = updatedpanels; + } +}; diff --git a/src/dashboard-layout/properties-stack.json b/src/dashboard-layout/properties-stack.json new file mode 100644 index 00000000..3e8ffd30 --- /dev/null +++ b/src/dashboard-layout/properties-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for properties\n */\n\n var dashboard = new ej.layouts.DashboardLayout({ \n allowResizing: true,\n cellSpacing: [10, 10],\n columns:6,\n panels: [{\n 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0,\n header: '
        Panel 1
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 2,\n header: '
        Panel 2
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 4,\n header: '
        Panel 3
        ', content: '
        '\n },\n {\n 'sizeX': 4, 'sizeY': 2, 'row': 2, 'col': 0,\n header: '
        Panel 4
        ', content: '
        '\n },\n {\n 'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 4,\n header: '
        Panel 5
        ', content: '
        '\n }]\n });\n dashboard.appendTo('#dynamicLayout');\n var cellspacing = new ej.inputs.NumericTextBox({\n placeholder: 'Ex: 10',\n floatLabelType: 'Never',\n change: valueChange,\n type:'number',\n value: 10,\n min: 1,\n max: 20\n });\n cellspacing.appendTo('#cellspacing');\n var floatObj = new ej.buttons.CheckBox({ checked: true, change: onChange });\n floatObj.appendTo('#floating');\n var pushObj = new ej.buttons.CheckBox({ checked: true, change: onChange });\n pushObj.appendTo('#pushing');\n var resizeObj = new ej.buttons.CheckBox({ checked: true, change: onChange });\n resizeObj.appendTo('#resizing');\n var dashboardObject = document.getElementById('dynamicLayout').ej2_instances[0];\n function valueChange(args) {\n dashboard.cellSpacing = [parseInt(args.value, 10), parseInt(args.value, 10)];\n }\n function onChange(args) {\n if (args.event.currentTarget.id === \"floating\") {\n if (args.checked) {\n dashboard.allowFloating = true;\n } else {\n dashboard.allowFloating = false;\n }\n }\n if (args.event.currentTarget.id === \"resizing\") {\n if (args.checked) {\n dashboard.allowResizing = true;\n } else {\n\n dashboard.allowResizing = false;\n }\n }\n }\n\n document.getElementById('remove').onclick = function (e) {\n\t\tif (dashboardObject.panels.length != 0) {\n\t\t\tfor (var i = dashboardObject.panels.length - 1; i < dashboardObject.panels.length; i++) {\n\t\t\t\tdashboardObject.removePanel(dashboardObject.panels[dashboardObject.panels.length - 1 - i].id);\n\t\t\t}\n\t\t}\n };\n var count = 4;\n document.getElementById('add').onclick = function (e) { \n var panel = [{\n 'id': count.toString() + '_layout', 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0,\n header: '
        Panel' + count.toString() + '
        ', content: '
        '\n }];\n count = count + 1;\n dashboardObject.addPanel(panel[0]);\n };\n\n"} \ No newline at end of file diff --git a/src/dashboard-layout/properties.html b/src/dashboard-layout/properties.html new file mode 100644 index 00000000..bf0b4b83 --- /dev/null +++ b/src/dashboard-layout/properties.html @@ -0,0 +1,275 @@ +
        +
        +
        + +
        +
        +
        +
        +
        + Properties +
        +
        +
        +
        + +
        + +
        +
        +
        + +
        +
        +
        + +
        +
        +
        +
        + + +
        +
        +
        +
        +
        + + + + + +
        +

        + This sample demonstrates the properties of DashboardLayout component from the property pane. Select any combination of properties from the property pane to customize the DashboardLayout. +

        + +
        +
        + This sample allows to configure the cellSize, cellSpacing, allowFloating and + allowPushing properties of the dashboard layout component. +
        + + diff --git a/src/dashboard-layout/properties.js b/src/dashboard-layout/properties.js new file mode 100644 index 00000000..f1bc7dd8 --- /dev/null +++ b/src/dashboard-layout/properties.js @@ -0,0 +1,85 @@ +/** + * Sample for properties + */ +this.default = function () { + var dashboard = new ej.layouts.DashboardLayout({ + allowResizing: true, + cellSpacing: [10, 10], + columns:6, + panels: [{ + 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0, + header: '
        Panel 1
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 2, + header: '
        Panel 2
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 4, + header: '
        Panel 3
        ', content: '
        ' + }, + { + 'sizeX': 4, 'sizeY': 2, 'row': 2, 'col': 0, + header: '
        Panel 4
        ', content: '
        ' + }, + { + 'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 4, + header: '
        Panel 5
        ', content: '
        ' + }] + }); + dashboard.appendTo('#dynamicLayout'); + var cellspacing = new ej.inputs.NumericTextBox({ + placeholder: 'Ex: 10', + floatLabelType: 'Never', + change: valueChange, + type:'number', + value: 10, + min: 1, + max: 20 + }); + cellspacing.appendTo('#cellspacing'); + var floatObj = new ej.buttons.CheckBox({ checked: true, change: onChange }); + floatObj.appendTo('#floating'); + var pushObj = new ej.buttons.CheckBox({ checked: true, change: onChange }); + pushObj.appendTo('#pushing'); + var resizeObj = new ej.buttons.CheckBox({ checked: true, change: onChange }); + resizeObj.appendTo('#resizing'); + var dashboardObject = document.getElementById('dynamicLayout').ej2_instances[0]; + function valueChange(args) { + dashboard.cellSpacing = [parseInt(args.value, 10), parseInt(args.value, 10)]; + } + function onChange(args) { + if (args.event.currentTarget.id === "floating") { + if (args.checked) { + dashboard.allowFloating = true; + } else { + dashboard.allowFloating = false; + } + } + if (args.event.currentTarget.id === "resizing") { + if (args.checked) { + dashboard.allowResizing = true; + } else { + + dashboard.allowResizing = false; + } + } + } + + document.getElementById('remove').onclick = function (e) { + if (dashboardObject.panels.length != 0) { + for (var i = dashboardObject.panels.length - 1; i < dashboardObject.panels.length; i++) { + dashboardObject.removePanel(dashboardObject.panels[dashboardObject.panels.length - 1 - i].id); + } + } + }; + var count = 4; + document.getElementById('add').onclick = function (e) { + var panel = [{ + 'id': count.toString() + '_layout', 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0, + header: '
        Panel' + count.toString() + '
        ', content: '
        ' + }]; + count = count + 1; + dashboardObject.addPanel(panel[0]); + }; +}; diff --git a/src/dashboard-layout/sample.json b/src/dashboard-layout/sample.json new file mode 100644 index 00000000..a2c0ecf8 --- /dev/null +++ b/src/dashboard-layout/sample.json @@ -0,0 +1,18 @@ +{ + "name": "Dashboard Layout", + "directory": "dashboard-layout", + "category":"Layout", + "ftName" :"dashboardlayout", + "type": "preview", + "samples" : [ + {"url":"default", "name": "Default Functionalities", "category":"Dashboard Layout","api":{"DashboardLayout": [ "cellSpacing" ]}, "description": "This example explains the default functionalities of the JavaScript Dashboard Layout with draggable and resizable panels." }, + {"url":"predefined-layouts", "name": "Predefined Layouts", + "category":"Dashboard Layout","api":{"DashboardLayout": [ "panels","allowDragging","allowResizing","allowFloating" ]}, + "description": "This sample demonstrates how to change the initially defined panels structure with a set of predefined panel templates dynamically." }, + {"url":"properties", "name": "API", "category":"Dashboard Layout","api":{"DashboardLayout": [ "panels","allowDragging","allowResizing","allowFloating" ]},"description": "This sample demonstrates the most frequently used API combinations and dynamic addition and removal of panels within the layout." }, + {"url":"dynamic-widget", "name": "Editable Dashboard", "category":"Dashboard Layout","api":{"DashboardLayout": [ "panels","allowDragging","allowResizing","allowFloating" ]},"description": "This sample demonstrates how to add the data visualization components such as pie, column and spline chart in panels dynamically within the layout." }, + {"url":"analytics-dashboard", "name": "SEO Analytics Dashboard", "category":"Use Case","api":{"DashboardLayout": [ "panels","allowDragging","allowResizing","allowFloating" ]},"description": "This sample explains about constructing a real time dashboard for SEO analysis using data visualizing components like maps, charts, cards etc." } + ] + , + "dataSourcePath": "src/dashboard-layout/datasource.js" + } \ No newline at end of file diff --git a/src/dashboard-layout/worldmap.json b/src/dashboard-layout/worldmap.json new file mode 100644 index 00000000..a84c6d10 --- /dev/null +++ b/src/dashboard-layout/worldmap.json @@ -0,0 +1,182 @@ +{ + "type": "FeatureCollection", + "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + "features": [ + { "type": "Feature", "properties": { "admin": "Afghanistan", "name": "Afghanistan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[61.21081709172573, 35.650072333309218], [62.230651483005879, 35.270663967422287], [62.984662306576588, 35.404040839167614], [63.193538445900337, 35.857165635718907], [63.982895949158696, 36.007957465146596], [64.546479119733888, 36.31207326918426], [64.746105177677393, 37.111817735333297], [65.588947788357828, 37.305216783185628], [65.745630731066811, 37.661164048812061], [66.217384881459324, 37.393790188133913], [66.518606805288655, 37.362784328758785], [67.075782098259609, 37.35614390720928], [67.829999627559502, 37.144994004864678], [68.135562371701369, 37.023115139304302], [68.859445835245921, 37.344335842430588], [69.196272820924364, 37.15114350030742], [69.518785434857946, 37.608996690413413], [70.116578403610319, 37.588222764632086], [70.270574171840124, 37.73516469985401], [70.376304152309274, 38.138395901027515], [70.806820509732873, 38.486281643216408], [71.348131137990251, 38.258905341132156], [71.239403924448155, 37.953265082341879], [71.541917759084768, 37.905774441065631], [71.448693475230229, 37.065644843080513], [71.84463829945058, 36.738171291646914], [72.193040805962383, 36.94828766534566], [72.636889682917271, 37.047558091778349], [73.260055779924983, 37.495256862938994], [73.948695916646486, 37.421566270490786], [74.980002475895404, 37.419990139305888], [75.158027785140902, 37.13303091078911], [74.575892775372964, 37.02084137628345], [74.067551710917812, 36.836175645488446], [72.920024855444453, 36.720007025696312], [71.846291945283909, 36.509942328429851], [71.262348260385735, 36.074387518857797], [71.498767938121077, 35.650563259415996], [71.613076206350698, 35.153203436822857], [71.115018751921625, 34.733125718722228], [71.156773309213449, 34.348911444632144], [70.881803012988385, 33.988855902638512], [69.93054324735958, 34.020120144175102], [70.323594191371583, 33.358532619758385], [69.687147251264847, 33.105498969041228], [69.262522007122541, 32.501944078088293], [69.317764113242546, 31.901412258424436], [68.926676873657655, 31.620189113892064], [68.556932000609308, 31.713310044882011], [67.792689243444769, 31.582930406209623], [67.683393589147457, 31.303154201781414], [66.938891229118454, 31.304911200479346], [66.38145755398601, 30.738899237586448], [66.346472609324408, 29.88794342703617], [65.046862013616092, 29.472180691031902], [64.350418735618504, 29.560030625928089], [64.148002150331237, 29.340819200145965], [63.550260858011164, 29.468330796826162], [62.549856805272775, 29.318572496044304], [60.874248488208778, 29.829238999952604], [61.78122155136343, 30.735850328081231], [61.699314406180811, 31.379506130492661], [60.941944614511115, 31.548074652628745], [60.863654819588952, 32.182919623334421], [60.536077915290761, 32.981268825811561], [60.963700392505991, 33.528832302376252], [60.528429803311575, 33.676446031217999], [60.80319339380744, 34.404101874319856], [61.21081709172573, 35.650072333309218]]] } }, + { "type": "Feature", "properties": { "admin": "Angola", "name": "Angola", "continent": "Africa" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[16.326528354567042, -5.877470391466217], [16.573179965896141, -6.622644545115092], [16.860190870845226, -7.222297865429978], [17.089995965247166, -7.545688978712474], [17.472970004962288, -8.068551120641656], [18.134221632569048, -7.987677504104865], [18.464175652752683, -7.847014255406475], [19.016751743249664, -7.988245944860138], [19.166613396896079, -7.738183688999724], [19.417502475673214, -7.155428562044277], [20.037723016040214, -7.116361179231658], [20.091621534920616, -6.943090101756949], [20.60182295093832, -6.939317722199688], [20.514748162526526, -7.299605808138663], [21.728110792739752, -7.290872491081315], [21.74645592620336, -7.920084730667113], [21.949130893652033, -8.305900974158304], [21.80180138518795, -8.908706556842985], [21.875181919042397, -9.523707777548564], [22.208753289486417, -9.894796237836529], [22.155268182064326, -11.084801120653777], [22.402798292742428, -10.99307545333569], [22.837345411884762, -11.017621758674334], [23.456790805767461, -10.867863457892481], [23.912215203555743, -10.926826267137541], [24.017893507592614, -11.237298272347115], [23.904153680118235, -11.722281589406332], [24.079905226342895, -12.191296888887305], [23.930922072045373, -12.565847670138821], [24.0161365088947, -12.91104623784855], [21.933886346125941, -12.898437188369353], [21.887842644953871, -16.080310153876891], [22.562478468524283, -16.898451429921831], [23.215048455506086, -17.523116143465952], [21.377176141045592, -17.930636488519706], [18.956186964603628, -17.789094740472233], [18.263309360434217, -17.309950860262003], [14.209706658595049, -17.353100681225708], [14.058501417709035, -17.423380629142653], [13.462362094789963, -16.971211846588741], [12.814081251688405, -16.941342868724075], [12.21546146001938, -17.111668389558059], [11.734198846085146, -17.301889336824498], [11.640096062881609, -16.673142185129205], [11.778537224991563, -15.793816013250687], [12.123580763404444, -14.878316338767927], [12.175618930722264, -14.449143568583889], [12.500095249083014, -13.547699883684398], [12.738478631245439, -13.137905775609934], [13.312913852601834, -12.483630466362511], [13.633721144269824, -12.038644707897189], [13.738727654686924, -11.297863050993142], [13.686379428775293, -10.73107594161584], [13.38732791510216, -10.373578383020726], [13.120987583069873, -9.766897067914112], [12.875369500386567, -9.166933689005488], [12.929061313537797, -8.959091078327573], [13.23643273280987, -8.56262948978434], [12.933040398824314, -7.596538588087752], [12.728298374083916, -6.927122084178803], [12.227347039446441, -6.294447523629372], [12.322431674863562, -6.100092461779651], [12.735171339578695, -5.965682061388476], [13.024869419006988, -5.984388929878106], [13.375597364971892, -5.864241224799555], [16.326528354567042, -5.877470391466217]]], [[[12.436688266660919, -5.684303887559223], [12.182336866920277, -5.789930515163801], [11.914963006242115, -5.037986748884733], [12.318607618873923, -4.606230157086158], [12.620759718484548, -4.438023369976121], [12.995517205465202, -4.781103203961918], [12.631611769265842, -4.991271254092935], [12.468004184629759, -5.248361504744991], [12.436688266660919, -5.684303887559223]]]] } }, + { "type": "Feature", "properties": { "admin": "Albania", "name": "Albania", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[20.590247430104906, 41.855404161133592], [20.463175083099195, 41.515089016275333], [20.605181919037356, 41.086226304685219], [21.020040317476397, 40.842726955725873], [20.99998986174722, 40.580003973953964], [20.67499677906363, 40.43499990494302], [20.61500044117275, 40.110006822259365], [20.150015903410516, 39.624997666983965], [19.980000441170144, 39.694993394523401], [19.9600016618732, 39.915005805006039], [19.40608198413673, 40.250773423822459], [19.319058872157139, 40.727230129553554], [19.403549838954287, 41.409565741535445], [19.540027296637099, 41.71998607031275], [19.371768833094958, 41.87754751237064], [19.304486118250786, 42.195745144207812], [19.738051385179627, 42.688247382165564], [19.801613396898681, 42.500093492190835], [20.0707, 42.58863], [20.28375451018189, 42.320259507815074], [20.52295, 42.21787], [20.590247430104906, 41.855404161133592]]] } }, + { "type": "Feature", "properties": { "admin": "United Arab Emirates", "name": "United Arab Emirates", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[51.579518670463258, 24.245497137951102], [51.757440626844172, 24.294072984305462], [51.794389275932865, 24.019826158132499], [52.577080519425593, 24.177439276622703], [53.404006788960139, 24.151316840099167], [54.008000929587574, 24.121757920828212], [54.693023716048614, 24.797892360935084], [55.439024692614126, 25.439145209244934], [56.070820753814544, 26.055464178973978], [56.261041701080948, 25.714606431576762], [56.396847365143991, 24.924732163995483], [55.886232537667993, 24.92083059335744], [55.804118686756212, 24.269604193615258], [55.981213820220454, 24.130542914317822], [55.528631626208231, 23.933604030853498], [55.525841098864461, 23.524869289640929], [55.234489373602869, 23.110992743415316], [55.208341098863187, 22.708329982997039], [55.006803012924898, 22.496947536707129], [52.000733270074321, 23.001154486578937], [51.617707553926969, 24.014219265228824], [51.579518670463258, 24.245497137951102]]] } }, + { "type": "Feature", "properties": { "admin": "Argentina", "name": "Argentina", "continent": "South America" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-65.5, -55.2], [-66.45, -55.25], [-66.95992, -54.89681], [-67.56244, -54.87001], [-68.63335, -54.8695], [-68.634010227583147, -52.636370458874453], [-68.25, -53.1], [-67.75, -53.85], [-66.45, -54.45], [-65.05, -54.7], [-65.5, -55.2]]], [[[-64.964892137294569, -22.075861504812348], [-64.377021043542257, -22.79809132252354], [-63.986838141522462, -21.993644301035953], [-62.84646847192154, -22.034985446869452], [-62.685057135657885, -22.249029229422401], [-60.846564704009928, -23.880712579038299], [-60.028966030503973, -24.032796319273238], [-58.807128465394939, -24.771459242453268], [-57.777217169817952, -25.162339776309032], [-57.633660040911124, -25.603656508081666], [-58.618173590719707, -27.123718763947117], [-57.609759690976134, -27.395898532828419], [-56.486701626192989, -27.548499037386243], [-55.695845506398186, -27.387837009390815], [-54.788794928595038, -26.621785577096087], [-54.625290696823541, -25.739255466415479], [-54.130049607954412, -25.547639255477243], [-53.628348965048716, -26.12486500417743], [-53.648735317587885, -26.923472588816104], [-54.490725267135517, -27.474756768505767], [-55.162286342984586, -27.881915378533414], [-56.290899624239088, -28.852760512000849], [-57.62513342958291, -30.21629485445424], [-57.874937303281897, -31.016556084926158], [-58.14244035504074, -32.044503676076182], [-58.132647671121404, -33.040566908502008], [-58.349611172098818, -33.263188978815428], [-58.427074144104367, -33.909454441057541], [-58.495442064026541, -34.4314897600701], [-57.225829637263629, -35.288026625307886], [-57.362358771378737, -35.977390232081497], [-56.737487352105447, -36.413125909166574], [-56.788285285048339, -36.901571547189327], [-57.749156867083421, -38.183870538079901], [-59.231857062401865, -38.720220228837199], [-61.2374452378656, -38.92842457454114], [-62.335956997310134, -38.827707208004362], [-62.125763108962914, -39.424104913084868], [-62.33053097191943, -40.172586358400316], [-62.145994432205228, -40.676896661136723], [-62.74580278181697, -41.028761488612083], [-63.770494757732514, -41.166789239263657], [-64.732089809819698, -40.802677097335128], [-65.118035244391578, -41.064314874028874], [-64.97856055363583, -42.058000990569312], [-64.303407965742466, -42.359016208669495], [-63.755947842042339, -42.043686618824495], [-63.458059048095883, -42.563138116222355], [-64.378803880456289, -42.873558444999638], [-65.181803961839691, -43.495380954767782], [-65.328823411710133, -44.501366062193689], [-65.565268927661592, -45.03678557716978], [-66.509965786389344, -45.039627780945843], [-67.293793911392427, -45.551896254255183], [-67.580546434180079, -46.301772963242527], [-66.597066413017259, -47.033924655953804], [-65.641026577401433, -47.23613453551188], [-65.98508826360073, -48.133289076531128], [-67.166178961847649, -48.697337334996931], [-67.816087612566449, -49.869668877970412], [-68.728745083273154, -50.26421843851886], [-69.138539191347789, -50.732510267947788], [-68.815561489523517, -51.771104011594097], [-68.149994879820397, -52.349983406127699], [-68.571545376241332, -52.299443855346247], [-69.498362189396076, -52.142760912637236], [-71.914803839796321, -52.009022305865912], [-72.329403856074023, -51.425956312872394], [-72.309973517532342, -50.677009779666342], [-72.975746832964617, -50.741450290734299], [-73.328050910114456, -50.378785088909865], [-73.415435757120022, -49.318436374712952], [-72.648247443314929, -48.878618259476774], [-72.331160854771937, -48.244238376661819], [-72.44735531278026, -47.738532810253517], [-71.917258470330196, -46.884838148791786], [-71.552009446891233, -45.560732924177117], [-71.659315558545316, -44.973688653341434], [-71.222778896759721, -44.784242852559409], [-71.329800788036195, -44.407521661151677], [-71.793622606071935, -44.207172133156099], [-71.464056159130493, -43.787611179378324], [-71.915423956983901, -43.408564548517404], [-72.148898078078517, -42.254888197601375], [-71.746803758415453, -42.051386407235988], [-71.915734015577542, -40.832339369470716], [-71.680761277946445, -39.808164157878061], [-71.413516608349042, -38.916022230791107], [-70.814664272734703, -38.552995293940732], [-71.118625047475419, -37.576827487947192], [-71.121880662709771, -36.65812387466233], [-70.364769253201658, -36.005088799789931], [-70.388049485949082, -35.169687595359441], [-69.817309129501453, -34.193571465798279], [-69.814776984319209, -33.273886000299839], [-70.074399380153622, -33.09120981214803], [-70.535068935819439, -31.365010267870279], [-69.919008348251921, -30.336339206668306], [-70.013550381129861, -29.367922865518544], [-69.656130337183143, -28.459141127233686], [-69.001234910748266, -27.521213881136127], [-68.295541551370391, -26.899339694935787], [-68.594799770772667, -26.50690886811126], [-68.386001146097342, -26.185016371365229], [-68.417652960876111, -24.518554782816874], [-67.328442959244128, -24.025303236590908], [-66.985233934177629, -22.986348565362825], [-67.106673550063604, -22.735924574476392], [-66.273339402924833, -21.832310479420677], [-64.964892137294569, -22.075861504812348]]]] } }, + { "type": "Feature", "properties": { "admin": "Armenia", "name": "Armenia", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[43.582745802592726, 41.09214325618256], [44.972480096218071, 41.248128567055588], [45.179495883979335, 40.985353908851401], [45.560351189970433, 40.812289537105919], [45.359174839058156, 40.561503811193447], [45.891907179555076, 40.218475653639992], [45.610012241402913, 39.899993801425175], [46.034534132680662, 39.628020738273058], [46.483498976432443, 39.464154771475528], [46.505719842317966, 38.770605373686287], [46.143623081248812, 38.74120148371221], [45.735379266143006, 39.319719143219736], [45.739978468616975, 39.473999131827114], [45.298144972521456, 39.471751207022422], [45.00198733905674, 39.740003567049548], [44.793989699081934, 39.713002631177041], [44.400008579288695, 40.005000311842267], [43.656436395040934, 40.253563951166178], [43.752657911968399, 40.740200914058754], [43.582745802592726, 41.09214325618256]]] } }, + { "type": "Feature", "properties": { "admin": "French Southern and Antarctic Lands", "name": "Fr. S. Antarctic Lands", "continent": "Seven seas (open ocean)" }, "geometry": { "type": "Polygon", "coordinates": [[[68.935, -48.625], [69.58, -48.94], [70.525, -49.065], [70.56, -49.255], [70.28, -49.71], [68.745, -49.775], [68.72, -49.2425], [68.8675, -48.83], [68.935, -48.625]]] } }, + { "type": "Feature", "properties": { "admin": "Australia", "name": "Australia", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[145.397978143494782, -40.792548516605883], [146.364120721623692, -41.137695407883335], [146.908583612250823, -41.000546156580668], [147.689259474884125, -40.808258152022681], [148.289067824495987, -40.875437514002122], [148.359864536735785, -42.062445163746439], [148.017301467073082, -42.40702361426861], [147.914051955353784, -43.211522312188485], [147.564564243763982, -42.937688897473855], [146.87034305235494, -43.634597263362082], [146.663327264593647, -43.580853773778543], [146.048377720320389, -43.54974456153888], [145.431929559510536, -42.693776137056268], [145.295090366801674, -42.03360971452755], [144.7180713238306, -41.162551771815707], [144.743754510679622, -40.703975111657705], [145.397978143494782, -40.792548516605883]]], [[[143.561811151299935, -13.763655694232209], [143.922099237238882, -14.548310642152], [144.563713820574804, -14.171176039285879], [144.894908075133515, -14.594457696188622], [145.374723748963419, -14.984976495018284], [145.271991001567244, -15.428205254785691], [145.48525963763575, -16.285672295804769], [145.637033319276952, -16.784918308176611], [145.888904250267672, -16.906926364817647], [146.160308872664473, -17.76165455492524], [146.063673944278662, -18.280072523677315], [146.387478469019584, -18.958274021075905], [147.471081577747896, -19.480722751546676], [148.177601760042478, -19.955939222902767], [148.848413527623222, -20.391209812097252], [148.717465448195583, -20.633468926681513], [149.289420200802056, -21.260510756111096], [149.678337030230637, -22.342511895438388], [150.07738244038859, -22.122783705333315], [150.482939081015161, -22.556142266533012], [150.727265252891158, -22.402404880464655], [150.899554478152254, -23.462236830338679], [151.609175246384211, -24.076256198830755], [152.07353966695905, -24.45788665130619], [152.855197381805908, -25.267501316023008], [153.136162144176751, -26.071173191026187], [153.161948683890358, -26.641319268502439], [153.09290897034856, -27.260299574494503], [153.569469028944184, -28.110066827102099], [153.512108189100218, -28.995077406532751], [153.339095493787056, -29.458201592732443], [153.069241164358857, -30.350240166954809], [153.089601678681788, -30.923641859665445], [152.891577590139377, -31.640445651985949], [152.450002476205327, -32.550002536755237], [151.709117466436766, -33.041342054986337], [151.343971795862387, -33.816023451473846], [151.010555454715103, -34.310360202777879], [150.714139439089024, -35.173459974916803], [150.328219842733233, -35.671879164371923], [150.075212030232251, -36.420205580390508], [149.946124302367139, -37.109052422841224], [149.997283970336127, -37.425260512035123], [149.423882277625523, -37.772681166333463], [148.304622430615893, -37.809061374666875], [147.38173302631526, -38.219217217767543], [146.922122837511324, -38.606532077795116], [146.317921991154776, -39.035756524411433], [145.489652134380549, -38.593767999019043], [144.876976353128157, -38.41744801203911], [145.032212355732952, -37.896187839510972], [144.485682407814011, -38.085323581699257], [143.609973586196077, -38.809465427405321], [142.745426873952965, -38.538267510737519], [142.17832970598198, -38.380034275059835], [141.606581659104677, -38.308514092767872], [140.638578729413211, -38.019332777662541], [139.992158237874321, -37.402936293285094], [139.806588169514043, -36.643602797188272], [139.574147577065219, -36.138362318670666], [139.082808058834075, -35.732754001611774], [138.120747918856296, -35.612296237939397], [138.449461704664998, -35.127261244447887], [138.207564325106659, -34.384722588845925], [137.719170363516128, -35.07682504653102], [136.829405552314711, -35.260534763328614], [137.352371047108477, -34.707338555644093], [137.503886346588331, -34.130267836240769], [137.890116001537649, -33.640478610978327], [137.810327590079112, -32.900007012668105], [136.996837192940347, -33.752771498348629], [136.372069126531642, -34.094766127256186], [135.98904341038434, -34.89011809666048], [135.208212518454104, -34.478670342752601], [135.239218377829161, -33.947953383114971], [134.613416782774607, -33.222778008763136], [134.085903761939107, -32.848072198214759], [134.273902622617015, -32.617233575166949], [132.990776808809812, -32.011224053680188], [132.288080682504869, -31.982646986622761], [131.326330601120901, -31.495803318001041], [129.535793898639668, -31.590422865527476], [128.240937534702198, -31.948488864877849], [127.102867466338282, -32.282266941051041], [126.148713820501129, -32.2159660784206], [125.088623488465586, -32.728751316052829], [124.22164798390493, -32.959486586236061], [124.028946567888511, -33.483847344701708], [123.65966678273071, -33.890179131812722], [122.811036411633609, -33.914467054989835], [122.18306440642283, -34.003402194964217], [121.299190708502579, -33.821036065406126], [120.580268182458113, -33.930176690406618], [119.893695103028222, -33.976065362281808], [119.298899367348781, -34.50936614353396], [119.007340936357977, -34.464149265278529], [118.505717808100769, -34.746819349915093], [118.024971958489516, -35.064732761374707], [117.295507440257438, -35.025458672832862], [116.62510908413492, -35.025096937806829], [115.564346958479689, -34.386427911111547], [115.026808709779516, -34.196517022438918], [115.048616164206763, -33.623425388322026], [115.545123325667078, -33.487257989232951], [115.714673700016661, -33.259571628554944], [115.679378696761376, -32.900368747694124], [115.801645135563959, -32.205062351207026], [115.689610630355105, -31.612437025683782], [115.160909051576937, -30.601594333622455], [114.99704308477942, -30.030724786094162], [115.040037876446249, -29.461095472940794], [114.64197431850198, -28.810230808224706], [114.61649783738217, -28.516398614213042], [114.173579136208446, -28.118076674107321], [114.048883905088132, -27.33476531342712], [113.477497593236876, -26.543134047147898], [113.338953078262477, -26.116545098578477], [113.77835778204026, -26.549025160429174], [113.440962355606587, -25.621278171493152], [113.936901076311642, -25.911234633082877], [114.232852004047288, -26.298446140245868], [114.216160516417006, -25.786281019801105], [113.721255324357685, -24.998938897402123], [113.625343866024025, -24.683971042583146], [113.393523390762667, -24.384764499613262], [113.502043898575607, -23.80635019297025], [113.706992629045146, -23.56021534596406], [113.843418410295669, -23.059987481378734], [113.736551548316072, -22.475475355725372], [114.149756300921865, -21.755881036061009], [114.225307244932651, -22.51748829517863], [114.64776207891866, -21.829519952076904], [115.460167270979298, -21.495173435148541], [115.94737267462699, -21.068687839443708], [116.711615431791529, -20.701681817306817], [117.166316359527684, -20.623598728113802], [117.441545037914238, -20.746898695562162], [118.229558953932951, -20.374208265873232], [118.836085239742701, -20.263310642174822], [118.987807244951753, -20.044202569257319], [119.252493931150624, -19.952941989829835], [119.805225050944543, -19.976506442954978], [120.856220330896633, -19.683707777589188], [121.399856398607199, -19.239755547769729], [121.655137974129062, -18.70531788500713], [122.241665480641757, -18.197648614171765], [122.286623976735655, -17.798603204013911], [122.312772251475408, -17.254967136303446], [123.012574497571904, -16.405199883695854], [123.433789097183009, -17.268558037996225], [123.859344517106592, -17.069035332917249], [123.503242222183232, -16.596506036040363], [123.817073195491915, -16.11131601325199], [124.258286574399847, -16.32794361741956], [124.379726190285794, -15.567059828353973], [124.926152785340022, -15.07510019293532], [125.167275018413875, -14.680395603090004], [125.670086704613823, -14.510070082256018], [125.685796340030493, -14.230655612853834], [126.125149367376096, -14.347340996968949], [126.142822707219864, -14.095986830301211], [126.582589146023736, -13.95279143642041], [127.065867140817332, -13.817967624570922], [127.804633416861932, -14.276906019755042], [128.359689976108939, -14.869169610252253], [128.985543247595899, -14.875990899314738], [129.621473423379598, -14.969783623924553], [129.409600050982988, -14.420669854391031], [129.888640578328591, -13.618703301653481], [130.339465773642928, -13.357375583553473], [130.183506300985982, -13.107520033422301], [130.617795037966971, -12.536392103732464], [131.223494500859999, -12.183648776908113], [131.73509118054946, -12.302452894747159], [132.575298293183096, -12.114040622611013], [132.557211541881031, -11.603012383676683], [131.824698114143644, -11.273781833545097], [132.357223748911395, -11.128519382372641], [133.019560581596409, -11.376411228076844], [133.550845981989028, -11.786515394745134], [134.393068475481982, -12.042365411022173], [134.678632440327021, -11.9411829565947], [135.298491245667975, -12.248606052299051], [135.882693312727611, -11.962266940969796], [136.258380975489445, -12.049341729381606], [136.492475213771627, -11.857208754120389], [136.951620314684988, -12.351958916882735], [136.685124953355739, -12.887223402562054], [136.305406528875096, -13.291229750219895], [135.961758254134111, -13.324509372615889], [136.077616815332533, -13.72427825282578], [135.783836297753226, -14.223989353088211], [135.4286641786112, -14.715432224183896], [135.500184360903177, -14.997740573794427], [136.295174595281367, -15.550264987859121], [137.065360142159477, -15.870762220933353], [137.580470819244795, -16.215082289294084], [138.303217401278971, -16.807604261952658], [138.58516401586337, -16.806622409739173], [139.108542922115475, -17.062679131745366], [139.260574985918197, -17.371600843986183], [140.215245396078274, -17.710804945550063], [140.875463495039241, -17.36906869880394], [141.071110467696258, -16.832047214426719], [141.274095493738798, -16.388870131091604], [141.398222284103781, -15.840531508042584], [141.702183058844611, -15.044921156476928], [141.563380161708665, -14.561333103089506], [141.635520461188094, -14.270394789286284], [141.519868605718955, -13.698078301653805], [141.650920038011009, -12.944687595270562], [141.842691278246207, -12.741547539931187], [141.68699018775078, -12.407614434461134], [141.928629185147543, -11.877465915578778], [142.118488397387978, -11.328042087451619], [142.14370649634634, -11.04273650476814], [142.51526004452495, -10.668185723516642], [142.797310011974048, -11.157354831591515], [142.866763136974271, -11.784706719614929], [143.11594689348567, -11.90562957117791], [143.158631626558758, -12.325655612846187], [143.522123651299864, -12.834358412327429], [143.597157830987669, -13.400422051652594], [143.561811151299935, -13.763655694232209]]]] } }, + { "type": "Feature", "properties": { "admin": "Austria", "name": "Austria", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[16.979666782304033, 48.123497015976298], [16.903754103267257, 47.714865627628321], [16.340584344150411, 47.712901923201215], [16.534267612380372, 47.496170966169103], [16.202298211337361, 46.852385972676949], [16.011663852612653, 46.683610744811688], [15.137091912504982, 46.658702704447016], [14.632471551174827, 46.431817328469535], [13.806475457421524, 46.509306138691201], [12.376485223040813, 46.767559109069843], [12.153088006243051, 47.115393174826437], [11.164827915093268, 46.941579494812721], [11.048555942436533, 46.751358547546324], [10.442701450246627, 46.893546250997424], [9.932448357796657, 46.920728054382948], [9.479969516649019, 47.102809963563367], [9.632931756232974, 47.347601223329974], [9.594226108446346, 47.525058091820256], [9.896068149463188, 47.58019684507569], [10.402083774465209, 47.302487697939156], [10.544504021861625, 47.566399237653762], [11.426414015354736, 47.523766181012967], [12.141357456112784, 47.703083401065761], [12.620759718484491, 47.672387600284395], [12.932626987365945, 47.467645575543983], [13.025851271220487, 47.637583523135824], [12.884102817443901, 48.289145819687903], [13.243357374736998, 48.41611481382904], [13.595945672264433, 48.877171942737135], [14.33889773932472, 48.555305284207193], [14.901447381254055, 48.964401760445817], [15.253415561593979, 49.039074205107575], [16.029647251050218, 48.733899034207916], [16.49928266771877, 48.785808010445095], [16.960288120194573, 48.596982326850593], [16.879982944412998, 48.470013332709463], [16.979666782304033, 48.123497015976298]]] } }, + { "type": "Feature", "properties": { "admin": "Azerbaijan", "name": "Azerbaijan", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[45.001987339056789, 39.740003567049591], [45.298144972521435, 39.471751207022422], [45.739978468616997, 39.473999131827149], [45.735379266143092, 39.319719143219785], [46.143623081248812, 38.74120148371221], [45.457721795438729, 38.874139105783108], [44.952688022650264, 39.33576467544642], [44.79398969908199, 39.713002631177027], [45.001987339056789, 39.740003567049591]]], [[[47.373315464066216, 41.219732367511249], [47.81566572448471, 41.151416124021338], [47.987283156126033, 41.405819200194223], [48.584352654826283, 41.808869533854669], [49.110263706260653, 41.282286688800518], [49.618914829309588, 40.572924302729966], [50.084829542853093, 40.526157131505776], [50.392821079312704, 40.256561184239096], [49.569202101444795, 40.176100979160701], [49.395259230350419, 39.39948171646224], [49.2232283872507, 39.04921885838791], [48.856532423707584, 38.815486355131775], [48.883249139202533, 38.320245266262638], [48.634375441284831, 38.270377509100925], [48.010744256386502, 38.794014797514528], [48.355529412637928, 39.288764960276886], [48.060095249225256, 39.582235419262439], [47.685079380083117, 39.508363959301185], [46.505719842317966, 38.770605373686251], [46.483498976432443, 39.464154771475528], [46.034534132680697, 39.628020738273044], [45.610012241402913, 39.899993801425175], [45.891907179555133, 40.21847565363997], [45.359174839058156, 40.561503811193482], [45.560351189970469, 40.812289537105947], [45.179495883979392, 40.98535390885143], [44.972480096218156, 41.248128567055623], [45.217426385281634, 41.411451931314041], [45.962600538930438, 41.123872585609789], [46.501637404166978, 41.064444688474104], [46.637908156120567, 41.181672675128219], [46.145431756378983, 41.72280243587263], [46.404950799348818, 41.860675157227341], [46.686070591016652, 41.827137152669899], [47.373315464066216, 41.219732367511249]]]] } }, + { "type": "Feature", "properties": { "admin": "Burundi", "name": "Burundi", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[29.339997592900342, -4.499983412294092], [29.276383904749046, -3.293907159034063], [29.02492638521678, -2.839257907730157], [29.632176141078585, -2.917857761246096], [29.938359002407935, -2.348486830254238], [30.469696079232978, -2.413857517103458], [30.527677036264457, -2.807631931167534], [30.743012729624692, -3.034284763199686], [30.752262811004943, -3.359329522315569], [30.505559523243559, -3.568567396665364], [30.116332635221166, -4.090137627787242], [29.753512404099919, -4.45238941815328], [29.339997592900342, -4.499983412294092]]] } }, + { "type": "Feature", "properties": { "admin": "Belgium", "name": "Belgium", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[3.314971144228536, 51.345780951536071], [4.047071160507527, 51.267258612668556], [4.973991326526913, 51.475023708698124], [5.60697594567, 51.037298488969768], [6.156658155958779, 50.803721015010574], [6.043073357781109, 50.128051662794221], [5.782417433300905, 50.090327867221205], [5.674051954784828, 49.52948354755749], [4.799221632515809, 49.985373033236371], [4.286022983425084, 49.90749664977254], [3.588184441755685, 50.378992418003563], [3.123251580425801, 50.780363267614561], [2.658422071960274, 50.796848049515731], [2.513573032246142, 51.148506171261815], [3.314971144228536, 51.345780951536071]]] } }, + { "type": "Feature", "properties": { "admin": "Benin", "name": "Benin", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[2.691701694356254, 6.258817246928628], [1.865240512712318, 6.14215770102973], [1.618950636409238, 6.832038072126236], [1.664477573258381, 9.128590399609378], [1.46304284018467, 9.334624335157086], [1.425060662450136, 9.825395412632998], [1.077795037448737, 10.175606594275022], [0.772335646171484, 10.470808213742357], [0.899563022474069, 10.997339382364258], [1.243469679376488, 11.11051076908346], [1.447178175471066, 11.547719224488857], [1.93598554851988, 11.641150214072551], [2.154473504249921, 11.940150051313337], [2.49016360841793, 12.233052069543671], [2.84864301922667, 12.235635891158266], [3.611180454125558, 11.660167141155966], [3.572216424177469, 11.327939357951516], [3.797112257511713, 10.734745591673104], [3.600070021182801, 10.332186184119406], [3.705438266625918, 10.063210354040207], [3.220351596702101, 9.4441525333997], [2.912308383810255, 9.13760793704432], [2.723792758809509, 8.506845404489708], [2.74906253420022, 7.870734361192886], [2.691701694356254, 6.258817246928628]]] } }, + { "type": "Feature", "properties": { "admin": "Burkina Faso", "name": "Burkina Faso", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-2.827496303712706, 9.642460842319775], [-3.511898972986272, 9.900326239456216], [-3.980449184576684, 9.862344061721698], [-4.330246954760383, 9.610834865757139], [-4.779883592131966, 9.821984768101741], [-4.954653286143098, 10.152713934769732], [-5.404341599946973, 10.370736802609144], [-5.470564947929004, 10.951269842976044], [-5.197842576508648, 11.375145778850136], [-5.220941941743119, 11.713858954307224], [-4.427166103523802, 12.542645575404292], [-4.280405035814879, 13.228443508349738], [-4.006390753587225, 13.472485459848112], [-3.52280270019986, 13.337661647998612], [-3.103706834312759, 13.54126679122859], [-2.967694464520576, 13.798150336151506], [-2.191824510090384, 14.246417548067352], [-2.001035122068771, 14.559008287000887], [-1.066363491205663, 14.973815009007764], [-0.515854458000348, 15.116157741755725], [-0.26625729003058, 14.924308986872147], [0.374892205414682, 14.928908189346128], [0.295646396495101, 14.444234930880651], [0.429927605805517, 13.988733018443922], [0.993045688490071, 13.335749620003821], [1.024103224297477, 12.851825669806573], [2.177107781593775, 12.625017808477532], [2.154473504249921, 11.940150051313337], [1.93598554851988, 11.641150214072551], [1.447178175471066, 11.547719224488857], [1.243469679376488, 11.11051076908346], [0.899563022474069, 10.997339382364258], [0.023802524423701, 11.018681748900802], [-0.438701544588582, 11.09834096927872], [-0.761575893548183, 10.936929633015053], [-1.203357713211431, 11.009819240762736], [-2.94040930827046, 10.962690334512557], [-2.963896246747111, 10.395334784380081], [-2.827496303712706, 9.642460842319775]]] } }, + { "type": "Feature", "properties": { "admin": "Bangladesh", "name": "Bangladesh", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[92.672720981825549, 22.041238918541247], [92.652257114637976, 21.324047552978481], [92.30323449093865, 21.475485337809815], [92.368553501355606, 20.670883287025344], [92.082886183646124, 21.192195135985767], [92.025215285208361, 21.701569729086764], [91.834890985077408, 22.182935695885561], [91.417087029997646, 22.765019029221218], [90.496006300827247, 22.805016587815125], [90.586956821660948, 22.392793687422863], [90.272970819055544, 21.836367702720107], [89.847467075564268, 22.039146023033421], [89.70204959509492, 21.857115790285299], [89.41886274613546, 21.966178900637296], [89.031961297566198, 22.055708319582973], [88.876311883503064, 22.879146429937826], [88.529769728553759, 23.631141872649163], [88.699940220090895, 24.233714911388557], [88.084422235062405, 24.501657212821918], [88.30637251175601, 24.866079413344199], [88.931553989623069, 25.238692328384769], [88.209789259802477, 25.768065700782707], [88.56304935094974, 26.446525580342716], [89.355094028687276, 26.014407253518065], [89.832480910199592, 25.965082098895476], [89.920692580121838, 25.269749864192171], [90.872210727912105, 25.13260061288954], [91.799595981822065, 25.14743174895731], [92.376201613334786, 24.976692816664961], [91.915092807994398, 24.130413723237108], [91.467729933643668, 24.072639471934789], [91.158963250699713, 23.503526923104381], [91.706475050832083, 22.985263983649183], [91.869927606171302, 23.62434642180278], [92.146034783906799, 23.62749868417259], [92.672720981825549, 22.041238918541247]]] } }, + { "type": "Feature", "properties": { "admin": "Bulgaria", "name": "Bulgaria", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[22.657149692482985, 44.234923000661276], [22.94483239105184, 43.823785305347123], [23.332302280376322, 43.897010809904707], [24.100679152124169, 43.741051337247846], [25.569271681426923, 43.688444729174712], [26.065158725699739, 43.943493760751259], [27.242399529740904, 44.175986029632398], [27.970107049275068, 43.812468166675202], [28.55808149589199, 43.707461656258118], [28.039095086384712, 43.293171698574177], [27.673897739378042, 42.577892361006214], [27.996720411905383, 42.007358710287775], [27.135739373490473, 42.141484890301335], [26.117041863720793, 41.826904608724554], [26.106138136507205, 41.328898830727766], [25.197201368925441, 41.234485988930523], [24.492644891058031, 41.583896185872028], [23.692073601992345, 41.309080918943842], [22.952377150166445, 41.337993882811141], [22.881373732197424, 41.999297186850242], [22.380525750424585, 42.320259507815081], [22.545011834409614, 42.461362006188025], [22.436594679461273, 42.580321153323929], [22.604801466571324, 42.898518785161137], [22.986018507588479, 43.211161200526959], [22.500156691180276, 43.642814439460977], [22.410446404721593, 44.008063462899948], [22.657149692482985, 44.234923000661276]]] } }, + { "type": "Feature", "properties": { "admin": "The Bahamas", "name": "Bahamas", "continent": "North America" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-77.53466, 23.75975], [-77.78, 23.71], [-78.03405, 24.28615], [-78.40848, 24.57564], [-78.19087, 25.2103], [-77.89, 25.17], [-77.54, 24.34], [-77.53466, 23.75975]]], [[[-77.82, 26.58], [-78.91, 26.42], [-78.98, 26.79], [-78.51, 26.87], [-77.85, 26.84], [-77.82, 26.58]]], [[[-77.0, 26.59], [-77.17255, 25.87918], [-77.35641, 26.00735], [-77.34, 26.53], [-77.78802, 26.92516], [-77.79, 27.04], [-77.0, 26.59]]]] } }, + { "type": "Feature", "properties": { "admin": "Bosnia and Herzegovina", "name": "Bosnia and Herz.", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[19.005486281010118, 44.860233669609144], [19.36803, 44.863], [19.11761, 44.42307], [19.59976, 44.03847], [19.454, 43.568100000000115], [19.21852, 43.52384], [19.03165, 43.43253], [18.70648, 43.20011], [18.56, 42.65], [17.674921502358981, 43.028562527023603], [17.297373488034449, 43.446340643887353], [16.916156447017325, 43.667722479825663], [16.456442905348862, 44.041239732431265], [16.239660271884528, 44.351143296885695], [15.750026075918978, 44.81871165626255], [15.959367303133373, 45.233776760430935], [16.318156772535868, 45.004126695325901], [16.534939406000202, 45.211607570977705], [17.00214603035101, 45.233776760430935], [17.861783481526398, 45.067740383477137], [18.553214145591646, 45.08158966733145], [19.005486281010118, 44.860233669609144]]] } }, + { "type": "Feature", "properties": { "admin": "Belarus", "name": "Belarus", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[23.484127638449841, 53.912497667041123], [24.45068362803703, 53.905702216194747], [25.536353794056989, 54.282423407602515], [25.768432651479792, 54.846962592175082], [26.588279249790386, 55.167175604871659], [26.494331495883749, 55.61510691997762], [27.102459751094525, 55.783313707087672], [28.17670942557799, 56.169129950578807], [29.2295133806603, 55.918344224666356], [29.371571893030669, 55.67009064393617], [29.896294386522353, 55.789463202530406], [30.87390913262, 55.550976467503396], [30.971835971813132, 55.081547756564028], [30.75753380709871, 54.811770941784303], [31.384472283663733, 54.157056382862422], [31.791424187962232, 53.974638576872117], [31.731272820774503, 53.794029446012011], [32.405598585751157, 53.618045355842028], [32.693643019346034, 53.351420803432106], [32.304519484188226, 53.132726141972903], [31.497643670382924, 53.167426866256889], [31.30520063652801, 53.073995876673195], [31.540018344862254, 52.742052313846344], [31.78599816257158, 52.10167796488544], [30.927549269338975, 52.042353420614383], [30.619454380014837, 51.822806098022362], [30.55511722181145, 51.319503485715643], [30.157363722460889, 51.416138414101454], [29.254938185347921, 51.368234361366881], [28.992835320763522, 51.602044379271462], [28.617612745892242, 51.427713934934836], [28.241615024536564, 51.572227077839059], [27.454066196408426, 51.59230337178446], [26.337958611768549, 51.832288723347915], [25.327787713327005, 51.910656032918538], [24.553106316839511, 51.888461005249177], [24.005077752384206, 51.617443956094448], [23.52707075368437, 51.578454087930233], [23.508002150168689, 52.023646552124717], [23.19949384938618, 52.486977444053664], [23.799198846133375, 52.691099351606553], [23.804934930117774, 53.08973135030606], [23.527535841574995, 53.47012156840654], [23.484127638449841, 53.912497667041123]]] } }, + { "type": "Feature", "properties": { "admin": "Belize", "name": "Belize", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-89.143080410503302, 17.808318996649316], [-89.150909389995519, 17.955467637600414], [-89.029857347351808, 18.001511338772485], [-88.848343878926585, 17.883198147040229], [-88.490122850279334, 18.486830552641603], [-88.300031094093669, 18.499982204659897], [-88.296336229184803, 18.353272813383263], [-88.106812913754368, 18.348673610909284], [-88.123478563168476, 18.076674709541003], [-88.285354987322776, 17.644142971258031], [-88.197866787452625, 17.489475409408453], [-88.302640753924422, 17.13169363043566], [-88.239517991879893, 17.036066392479551], [-88.355428229510551, 16.530774237529624], [-88.551824510435821, 16.265467434143144], [-88.732433641295927, 16.233634751851351], [-88.930612759135244, 15.887273464415072], [-89.229121670269265, 15.886937567605166], [-89.15080603713092, 17.015576687075832], [-89.143080410503302, 17.808318996649316]]] } }, + { "type": "Feature", "properties": { "admin": "Bolivia", "name": "Bolivia", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-62.84646847192154, -22.034985446869442], [-63.986838141522462, -21.993644301035946], [-64.377021043542243, -22.798091322523533], [-64.964892137294598, -22.07586150481232], [-66.273339402924833, -21.832310479420713], [-67.10667355006359, -22.735924574476414], [-67.82817989772272, -22.872918796482171], [-68.219913092711266, -21.494346612231858], [-68.757167121033731, -20.372657972904459], [-68.442225104430904, -19.405068454671426], [-68.966818406841853, -18.9816834449041], [-69.100246955019472, -18.260125420812674], [-69.590423753524036, -17.580011895419329], [-68.959635382753291, -16.500697930571267], [-69.389764166934697, -15.66012908291165], [-69.160346645774936, -15.323973890853015], [-69.339534674747, -14.953195489158828], [-68.94888668483658, -14.45363941819328], [-68.929223802349526, -13.602683607643007], [-68.880079515239956, -12.89972909917665], [-68.665079718689611, -12.561300144097171], [-69.52967810736493, -10.951734307502193], [-68.786157599549469, -11.036380303596276], [-68.27125362819325, -11.014521172736817], [-68.048192308205373, -10.712059014532484], [-67.173801235610725, -10.30681243249961], [-66.646908331962791, -9.931331475466861], [-65.33843522811641, -9.76198780684639], [-65.444837002205375, -10.51145110437543], [-65.321898769783004, -10.895872084194675], [-65.402281460213018, -11.566270440317151], [-64.31635291203159, -12.461978041232191], [-63.196498786050562, -12.627032565972433], [-62.803060268796372, -13.000653171442682], [-62.127080857986371, -13.19878061284972], [-61.713204311760769, -13.489202162330049], [-61.084121263255646, -13.479383640194595], [-60.503304002511122, -13.775954685117656], [-60.459198167550014, -14.354007256734551], [-60.264326341377355, -14.645979099183638], [-60.251148851142922, -15.077218926659318], [-60.542965664295131, -15.093910414289592], [-60.158389655179022, -16.258283786690082], [-58.241219855366673, -16.299573256091289], [-58.388058437724027, -16.877109063385273], [-58.280804002502244, -17.271710300366014], [-57.734558274960989, -17.552468357007765], [-57.498371141170971, -18.174187513911289], [-57.676008877174297, -18.961839694904025], [-57.949997321185819, -19.400004164306814], [-57.853801642474494, -19.969995212486186], [-58.166392381408038, -20.176700941653674], [-58.183471442280492, -19.868399346600359], [-59.11504248720609, -19.356906019775398], [-60.043564622626477, -19.342746677327419], [-61.786326463453761, -19.633736667562957], [-62.265961269770784, -20.513734633061272], [-62.291179368729203, -21.051634616787389], [-62.685057135657871, -22.24902922942238], [-62.84646847192154, -22.034985446869442]]] } }, + { "type": "Feature", "properties": { "admin": "Brazil", "name": "Brazil", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-57.625133429582945, -30.216294854454258], [-56.290899624239067, -28.852760512000884], [-55.162286342984558, -27.881915378533456], [-54.49072526713551, -27.474756768505785], [-53.648735317587885, -26.923472588816086], [-53.628348965048737, -26.124865004177465], [-54.130049607954376, -25.547639255477247], [-54.625290696823562, -25.739255466415507], [-54.428946092330577, -25.162184747012162], [-54.293476325077435, -24.570799655863958], [-54.292959560754511, -24.021014092710722], [-54.652834235235119, -23.839578138933955], [-55.027901780809543, -24.001273695575225], [-55.400747239795407, -23.956935316668797], [-55.517639329639621, -23.57199757252663], [-55.61068274598113, -22.655619398694839], [-55.797958136606894, -22.356929620047815], [-56.473317430229379, -22.086300144135279], [-56.881509568902885, -22.282153822521476], [-57.937155727761287, -22.090175876557169], [-57.870673997617786, -20.732687676681948], [-58.166392381408038, -20.176700941653674], [-57.853801642474494, -19.969995212486186], [-57.949997321185819, -19.400004164306814], [-57.676008877174297, -18.961839694904025], [-57.498371141170971, -18.174187513911289], [-57.734558274960989, -17.552468357007765], [-58.280804002502244, -17.271710300366014], [-58.388058437724027, -16.877109063385273], [-58.241219855366673, -16.299573256091289], [-60.158389655179022, -16.258283786690082], [-60.542965664295131, -15.093910414289592], [-60.251148851142922, -15.077218926659318], [-60.264326341377355, -14.645979099183638], [-60.459198167550014, -14.354007256734551], [-60.503304002511122, -13.775954685117656], [-61.084121263255646, -13.479383640194595], [-61.713204311760769, -13.489202162330049], [-62.127080857986371, -13.19878061284972], [-62.803060268796372, -13.000653171442682], [-63.196498786050562, -12.627032565972433], [-64.31635291203159, -12.461978041232191], [-65.402281460213018, -11.566270440317151], [-65.321898769783004, -10.895872084194675], [-65.444837002205375, -10.51145110437543], [-65.33843522811641, -9.76198780684639], [-66.646908331962791, -9.931331475466861], [-67.173801235610725, -10.30681243249961], [-68.048192308205373, -10.712059014532484], [-68.27125362819325, -11.014521172736817], [-68.786157599549469, -11.036380303596276], [-69.52967810736493, -10.951734307502193], [-70.093752204046879, -11.123971856331011], [-70.548685675728393, -11.009146823778462], [-70.481893886991159, -9.490118096558842], [-71.302412278921523, -10.079436130415372], [-72.184890713169821, -10.05359791426943], [-72.563033006465631, -9.520193780152715], [-73.226713426390148, -9.462212823121233], [-73.015382656532537, -9.03283334720806], [-73.571059332967053, -8.424446709835832], [-73.987235480429646, -7.523829847853063], [-73.723401455363486, -7.340998630404412], [-73.724486660441627, -6.918595472850638], [-73.120027431923575, -6.629930922068238], [-73.219711269814596, -6.089188734566076], [-72.964507208941185, -5.741251315944892], [-72.891927659787243, -5.274561455916979], [-71.748405727816532, -4.59398284263301], [-70.928843349883564, -4.401591485210367], [-70.79476884630229, -4.251264743673302], [-69.893635219996611, -4.298186944194326], [-69.444101935489599, -1.556287123219817], [-69.420485805932216, -1.122618503426409], [-69.577065395776586, -0.549991957200163], [-70.02065589057004, -0.185156345219539], [-70.015565761989293, 0.541414292804205], [-69.452396002872447, 0.706158758950693], [-69.252434048119042, 0.602650865070075], [-69.218637661400166, 0.985676581217433], [-69.804596727157701, 1.089081122233466], [-69.816973232691609, 1.714805202639624], [-67.868565029558823, 1.692455145673392], [-67.537810024674684, 2.037162787276329], [-67.25999752467358, 1.719998684084956], [-67.065048183852483, 1.130112209473225], [-66.876325853122566, 1.253360500489336], [-66.325765143484944, 0.724452215982012], [-65.548267381437554, 0.78925446207603], [-65.354713304288353, 1.0952822941085], [-64.611011928959854, 1.328730576987041], [-64.199305792890499, 1.49285492594602], [-64.083085496666072, 1.91636912679408], [-63.368788011311644, 2.200899562993129], [-63.422867397705105, 2.411067613124174], [-64.269999152265783, 2.497005520025566], [-64.408827887617903, 3.126786200366623], [-64.368494432214092, 3.797210394705246], [-64.816064012294007, 4.056445217297422], [-64.628659430587533, 4.14848094320925], [-63.888342861574145, 4.020530096854571], [-63.093197597899092, 3.770571193858784], [-62.804533047116692, 4.006965033377951], [-62.085429653559125, 4.162123521334308], [-60.966893276601517, 4.536467596856638], [-60.601179165271922, 4.918098049332129], [-60.733574184803707, 5.2002772078619], [-60.213683437731319, 5.2444863956876], [-59.980958624904865, 5.014061184098138], [-60.111002366767373, 4.574966538914082], [-59.767405768458701, 4.423502915866606], [-59.538039923731219, 3.958802598481937], [-59.815413174057852, 3.606498521332085], [-59.974524909084543, 2.755232652188055], [-59.718545701726732, 2.249630438644359], [-59.646043667221242, 1.786893825686789], [-59.030861579002639, 1.317697658692722], [-58.540012986878288, 1.26808828369252], [-58.429477098205957, 1.46394196207872], [-58.113449876525003, 1.507195135907025], [-57.660971035377358, 1.682584947105638], [-57.33582292339689, 1.948537705895759], [-56.782704230360814, 1.863710842288653], [-56.53938574891454, 1.89952260986692], [-55.995698004771739, 1.817667141116601], [-55.905600145070871, 2.021995754398659], [-56.073341844290283, 2.220794989425499], [-55.973322109589361, 2.510363877773016], [-55.569755011605984, 2.42150625244713], [-55.097587449755125, 2.523748073736612], [-54.524754197799709, 2.311848863123785], [-54.088062506717243, 2.105556545414629], [-53.778520677288903, 2.376702785650081], [-53.554839240113537, 2.33489655192595], [-53.4184651352953, 2.05338918701598], [-52.939657151894949, 2.124857692875636], [-52.556424730018414, 2.504705308437053], [-52.249337531123942, 3.241094468596244], [-51.657797410678882, 4.156232408053028], [-51.317146369010842, 4.203490505383953], [-51.069771287629649, 3.65039765056403], [-50.508875291533641, 1.901563828942456], [-49.974075893745045, 1.736483465986069], [-49.947100796088705, 1.046189683431223], [-50.699251268096901, 0.222984117021681], [-50.388210822132123, -0.078444512536819], [-48.620566779156313, -0.235489190271821], [-48.584496629416577, -1.237805271005001], [-47.824956427590621, -0.5816179337628], [-46.566583624851219, -0.941027520352776], [-44.9057030909904, -1.551739597178134], [-44.417619187993658, -2.137750339367975], [-44.581588507655773, -2.691308282078523], [-43.418791266440188, -2.383110039889793], [-41.47265682632824, -2.912018324397116], [-39.97866533055403, -2.87305429444904], [-38.50038347019656, -3.700652357603394], [-37.223252122535193, -4.820945733258915], [-36.45293738457638, -5.109403578312153], [-35.597795783010454, -5.149504489770648], [-35.235388963347553, -5.464937432480245], [-34.896029832486825, -6.738193047719709], [-34.729993455533027, -7.343220716992965], [-35.128212042774216, -8.996401462442284], [-35.636966518687707, -9.649281508017811], [-37.046518724096991, -11.040721123908799], [-37.683611619607355, -12.17119475672582], [-38.423876512188436, -13.038118584854285], [-38.673887091616507, -13.057652276260615], [-38.953275722802537, -13.79336964280002], [-38.882298143049645, -15.667053724838764], [-39.161092495264306, -17.208406670808468], [-39.267339240056394, -17.867746270420479], [-39.583521491034219, -18.262295830968934], [-39.76082333022763, -19.599113457927402], [-40.774740770010332, -20.90451181405242], [-40.944756232250597, -21.937316989837807], [-41.75416419123821, -22.370675551037454], [-41.988284267736546, -22.970070489190888], [-43.074703742024738, -22.967693373305462], [-44.647811855637798, -23.351959323827838], [-45.35213578955991, -23.796841729428579], [-46.472093268405523, -24.088968601174539], [-47.648972337420645, -24.885199069927715], [-48.495458136577689, -25.877024834905647], [-48.641004808127725, -26.623697605090928], [-48.474735887228647, -27.175911960561887], [-48.661520351747612, -28.186134535435713], [-48.888457404157393, -28.674115085567877], [-49.587329474472668, -29.224469089476333], [-50.696874152211478, -30.984465020472953], [-51.576226162306149, -31.777698256153204], [-52.256081305538032, -32.245369968394662], [-52.71209998229768, -33.196578057591175], [-53.373661668498229, -33.768377780900757], [-53.650543992718084, -33.202004082981823], [-53.209588995971529, -32.727666110974717], [-53.787951626182185, -32.047242526987617], [-54.572451544805105, -31.494511407193745], [-55.601510179249331, -30.853878676071385], [-55.97324459494093, -30.883075860316296], [-56.976025763564721, -30.109686374636119], [-57.625133429582945, -30.216294854454258]]] } }, + { "type": "Feature", "properties": { "admin": "Brunei", "name": "Brunei", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[114.204016554828343, 4.525873928236805], [114.599961379048707, 4.900011298029965], [115.450710483869798, 5.447729803891532], [115.405700311343566, 4.955227565933837], [115.347460972150643, 4.316636053887009], [114.869557326315373, 4.348313706881924], [114.659595981913498, 4.007636826997753], [114.204016554828343, 4.525873928236805]]] } }, + { "type": "Feature", "properties": { "admin": "Bhutan", "name": "Bhutan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[91.69665652869665, 27.771741848251661], [92.10371178585973, 27.4526140406332], [92.033483514375078, 26.838310451763554], [91.217512648486405, 26.808648179628019], [90.37327477413406, 26.875724188742872], [89.744527622438838, 26.71940298105995], [88.835642531289366, 27.098966376243755], [88.814248488320544, 27.299315904239361], [89.475810174521101, 28.04275889740639], [90.015828891971154, 28.296438503527209], [90.730513950567769, 28.064953925075748], [91.258853794319904, 28.040614325466287], [91.69665652869665, 27.771741848251661]]] } }, + { "type": "Feature", "properties": { "admin": "Botswana", "name": "Botswana", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[25.649163445750155, -18.536025892818987], [25.850391473094724, -18.714412937090533], [26.164790887158478, -19.293085625894935], [27.296504754350501, -20.391519870690995], [27.724747348753247, -20.499058526290387], [27.727227817503252, -20.851801853114711], [28.02137007010861, -21.485975030200578], [28.794656202924209, -21.639454034107445], [29.432188348109033, -22.091312758067584], [28.017235955525244, -22.827753594659072], [27.119409620886238, -23.574323011979772], [26.78640669119741, -24.240690606383478], [26.485753208123292, -24.616326592713097], [25.941652052522151, -24.696373386333214], [25.765848829865206, -25.174845472923671], [25.664666375437712, -25.486816094669706], [25.025170525825782, -25.719670098576891], [24.211266717228792, -25.670215752873567], [23.733569777122703, -25.39012948985161], [23.312096795350179, -25.268689873965712], [22.824271274514896, -25.500458672794768], [22.579531691180584, -25.979447523708142], [22.105968865657864, -26.28025603607913], [21.60589603036939, -26.726533705351748], [20.889609002371731, -26.828542982695907], [20.666470167735437, -26.477453301704916], [20.758609246511831, -25.868136488551446], [20.165725538827186, -24.917961928000768], [19.895767856534427, -24.767790215760588], [19.895457797940672, -21.849156996347865], [20.881134067475866, -21.814327080983144], [20.910641310314531, -18.252218926672018], [21.655040317478971, -18.219146010005222], [23.196858351339298, -17.869038181227783], [23.579005568137713, -18.281261081620055], [24.217364536239209, -17.889347019118485], [24.520705193792534, -17.887124932529932], [25.084443393664564, -17.661815687737366], [25.264225701608005, -17.736539808831413], [25.649163445750155, -18.536025892818987]]] } }, + { "type": "Feature", "properties": { "admin": "Central African Republic", "name": "Central African Rep.", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[15.279460483469107, 7.421924546737968], [16.106231723706767, 7.497087917506504], [16.290561557691884, 7.754307359239304], [16.456184523187343, 7.734773667832966], [16.705988396886251, 7.508327541529978], [17.964929640380884, 7.890914008002865], [18.389554884523218, 8.281303615751822], [18.911021762780504, 8.630894680206351], [18.81200971850927, 8.982914536978596], [19.094008009526018, 9.074846910025837], [20.059685499764267, 9.01270600019485], [21.00086836109616, 9.475985215691507], [21.723821648859452, 10.567055568885973], [22.231129184668784, 10.971888739460507], [22.864165480244218, 11.142395127807543], [22.977543572692603, 10.714462591998538], [23.554304233502187, 10.089255275915306], [23.557249790142826, 9.681218166538683], [23.394779087017181, 9.26506785729222], [23.459012892355979, 8.954285793488891], [23.805813429466745, 8.666318874542425], [24.567369012152078, 8.229187933785466], [25.114932488716786, 7.825104071479172], [25.12413089366472, 7.500085150579436], [25.796647983511171, 6.979315904158069], [26.21341840994511, 6.546603298362071], [26.465909458123232, 5.94671743410187], [27.213409051225163, 5.550953477394557], [27.374226108517483, 5.233944403500059], [27.044065382604703, 5.127852688004835], [26.402760857862535, 5.150874538590869], [25.650455356557465, 5.256087754737123], [25.278798455514302, 5.170408229997191], [25.128833449003274, 4.927244777847789], [24.805028924262409, 4.897246608902349], [24.41053104014625, 5.108784084489129], [23.297213982850135, 4.609693101414221], [22.841479526468103, 4.710126247573483], [22.704123569436284, 4.633050848810156], [22.405123732195531, 4.02916006104732], [21.659122755630019, 4.224341945813719], [20.927591180106273, 4.322785549329736], [20.290679152108932, 4.691677761245287], [19.467783644293146, 5.031527818212779], [18.932312452884755, 4.709506130385973], [18.542982211997778, 4.201785183118317], [18.453065219809925, 3.504385891123348], [17.809900343505259, 3.560196437998569], [17.133042433346297, 3.728196519379451], [16.537058139724135, 3.198254706226278], [16.01285241055535, 2.267639675298084], [15.907380812247649, 2.557389431158612], [15.862732374747479, 3.013537298998982], [15.405395948964379, 3.335300604664339], [15.036219516671249, 3.851367295747123], [14.950953403389658, 4.21038930909492], [14.478372430080466, 4.732605495620446], [14.558935988023501, 5.03059764243153], [14.459407179429345, 5.451760565610299], [14.536560092841111, 6.22695872642069], [14.776545444404572, 6.408498033062044], [15.279460483469107, 7.421924546737968]]] } }, + { "type": "Feature", "properties": { "admin": "Canada", "name": "Canada", "continent": "North America" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-63.6645, 46.55001], [-62.9393, 46.41587], [-62.01208, 46.44314], [-62.50391, 46.03339], [-62.87433, 45.96818], [-64.1428, 46.39265], [-64.39261, 46.72747], [-64.01486, 47.03601], [-63.6645, 46.55001]]], [[[-61.806305, 49.10506], [-62.29318, 49.08717], [-63.58926, 49.40069], [-64.51912, 49.87304], [-64.17322, 49.95718], [-62.85829, 49.70641], [-61.835585, 49.28855], [-61.806305, 49.10506]]], [[[-123.510001587551116, 48.51001089130343], [-124.012890788399474, 48.370846259141402], [-125.655012777338342, 48.825004584338494], [-125.954994466792726, 49.179995835967638], [-126.850004435871853, 49.530000311880421], [-127.029993449544392, 49.814995835970073], [-128.059336304366212, 49.994959011426594], [-128.444584107102145, 50.53913768167611], [-128.358413656255408, 50.770648098343678], [-127.308581096029883, 50.552573554071948], [-126.695000977212302, 50.40090322529538], [-125.755006673823161, 50.295018215529367], [-125.415001587558791, 49.950000515332604], [-124.920768189119315, 49.47527497008339], [-123.92250870832099, 49.062483628935794], [-123.510001587551116, 48.51001089130343]]], [[[-56.134035814017111, 50.687009792679298], [-56.795881720595261, 49.812308661490945], [-56.143105027884289, 50.15011749938283], [-55.471492275602934, 49.935815334668447], [-55.822401089080913, 49.587128607779093], [-54.93514258484565, 49.313010972686833], [-54.473775397343772, 49.556691189159167], [-53.47654944519131, 49.24913890237405], [-53.786013759971233, 48.516780503933617], [-53.086133999226249, 48.687803656603528], [-52.95864824076223, 48.157164211614472], [-52.648098720904173, 47.53554840757549], [-53.069158291218336, 46.655498765644936], [-53.521456264853029, 46.618291734394823], [-54.178935512902527, 46.807065741556997], [-53.961868659060471, 47.625207017601909], [-54.240482143762122, 47.752279364607617], [-55.400773078011483, 46.88499380145312], [-55.997480841685835, 46.919720363953289], [-55.291219041552765, 47.389562486350982], [-56.250798712780508, 47.632545070987383], [-57.325229254777085, 47.572807115257987], [-59.26601518414676, 47.603347886742498], [-59.41949418805369, 47.89945384377485], [-58.796586473207398, 48.251525376979473], [-59.23162451845652, 48.523188381537793], [-58.391804979065213, 49.125580552764163], [-57.358689744686025, 50.718274034215845], [-56.738650071831998, 51.287438259478527], [-55.87097693543528, 51.632094224649187], [-55.406974249886602, 51.588272610065722], [-55.600218268442077, 51.317074693397913], [-56.134035814017111, 50.687009792679298]]], [[[-133.180004041711669, 54.169975490935308], [-132.710007884431292, 54.040009315423518], [-131.749989584003259, 54.120004380909208], [-132.049480347350965, 52.984621487024519], [-131.179042521826574, 52.18043284769827], [-131.577829549822894, 52.182370713909236], [-132.180428426778519, 52.639707139692391], [-132.549992432313843, 53.100014960332132], [-133.054611178755493, 53.411468817755363], [-133.239664482792676, 53.851080227262386], [-133.180004041711669, 54.169975490935308]]], [[[-79.26582, 62.158675], [-79.65752, 61.63308], [-80.09956, 61.7181], [-80.36215, 62.01649], [-80.315395, 62.085565], [-79.92939, 62.3856], [-79.52002, 62.36371], [-79.26582, 62.158675]]], [[[-81.89825, 62.7108], [-83.06857, 62.15922], [-83.77462, 62.18231], [-83.99367, 62.4528], [-83.25048, 62.91409], [-81.87699, 62.90458], [-81.89825, 62.7108]]], [[[-85.161307949549851, 65.657284654392797], [-84.975763719405933, 65.217518215588981], [-84.464012010419495, 65.371772365980163], [-83.88262630891974, 65.109617824963536], [-82.78757687043877, 64.766693020274673], [-81.642013719392509, 64.455135809986942], [-81.553440314444245, 63.979609280037131], [-80.817361212878851, 64.057485663500998], [-80.103451300766594, 63.725981350348597], [-80.991019863595653, 63.41124603947496], [-82.547178107416997, 63.651722317145229], [-83.108797573565042, 64.101875718839707], [-84.100416632813847, 63.569711819098004], [-85.523404710618991, 63.052379055424076], [-85.866768764982339, 63.637252916103542], [-87.221983201836721, 63.541238104905212], [-86.352759772471259, 64.035833238370699], [-86.224886440765133, 64.822916978608262], [-85.883847825854858, 65.738778388117041], [-85.161307949549851, 65.657284654392797]]], [[[-75.86588, 67.14886], [-76.98687, 67.09873], [-77.2364, 67.58809], [-76.81166, 68.14856], [-75.89521, 68.28721], [-75.1145, 68.01036], [-75.10333, 67.58202], [-75.21597, 67.44425], [-75.86588, 67.14886]]], [[[-95.647681203800488, 69.107690358321761], [-96.269521203800579, 68.757040358321731], [-97.61740120380054, 69.060030358321782], [-98.431801203800504, 68.950700358321768], [-99.797401203800504, 69.400030358321786], [-98.917401203800523, 69.710030358321788], [-98.218261203800466, 70.143540358321744], [-97.157401203800532, 69.860030358321794], [-96.557401203800524, 69.680030358321758], [-96.257401203800498, 69.490030358321761], [-95.647681203800488, 69.107690358321761]]], [[[-90.5471, 69.49766], [-90.55151, 68.47499], [-89.21515, 69.25873], [-88.01966, 68.61508], [-88.31749, 67.87338], [-87.35017, 67.19872], [-86.30607, 67.92146], [-85.57664, 68.78456], [-85.52197, 69.88211], [-84.10081, 69.80539], [-82.62258, 69.65826], [-81.28043, 69.16202], [-81.2202, 68.66567], [-81.96436, 68.13253], [-81.25928, 67.59716], [-81.38653, 67.11078], [-83.34456, 66.41154], [-84.73542, 66.2573], [-85.76943, 66.55833], [-86.0676, 66.05625], [-87.03143, 65.21297], [-87.32324, 64.77563], [-88.48296, 64.09897], [-89.91444, 64.03273], [-90.70398, 63.61017], [-90.77004, 62.96021], [-91.93342, 62.83508], [-93.15698, 62.02469], [-94.24153, 60.89865], [-94.62931, 60.11021], [-94.6846, 58.94882], [-93.21502, 58.78212], [-92.76462, 57.84571], [-92.297029999999893, 57.08709], [-90.89769, 57.28468], [-89.03953, 56.85172], [-88.03978, 56.47162], [-87.32421, 55.99914], [-86.07121, 55.72383], [-85.01181, 55.3026], [-83.36055, 55.24489], [-82.27285, 55.14832], [-82.4362, 54.28227], [-82.12502, 53.27703], [-81.40075, 52.15788], [-79.91289, 51.20842], [-79.14301, 51.53393], [-78.60191, 52.56208], [-79.12421, 54.14145], [-79.82958, 54.66772], [-78.22874, 55.13645], [-77.0956, 55.83741], [-76.54137, 56.53423], [-76.62319, 57.20263], [-77.30226, 58.05209], [-78.51688, 58.80458], [-77.33676, 59.85261], [-77.77272, 60.75788], [-78.10687, 62.31964], [-77.41067, 62.55053], [-75.69621, 62.2784], [-74.6682, 62.18111], [-73.83988, 62.4438], [-72.90853, 62.10507], [-71.67708, 61.52535], [-71.37369, 61.13717], [-69.59042, 61.06141], [-69.62033, 60.22125], [-69.2879, 58.95736], [-68.37455, 58.80106], [-67.64976, 58.21206], [-66.20178, 58.76731], [-65.24517, 59.87071], [-64.58352, 60.33558], [-63.80475, 59.4426], [-62.50236, 58.16708], [-61.39655, 56.96745], [-61.79866, 56.33945], [-60.46853, 55.77548], [-59.56962, 55.20407], [-57.97508, 54.94549], [-57.3332, 54.6265], [-56.93689, 53.78032], [-56.15811, 53.64749], [-55.75632, 53.27036], [-55.68338, 52.14664], [-56.40916, 51.7707], [-57.12691, 51.41972], [-58.77482, 51.0643], [-60.03309, 50.24277], [-61.72366, 50.08046], [-63.86251, 50.29099], [-65.36331, 50.2982], [-66.39905, 50.22897], [-67.23631, 49.51156], [-68.51114, 49.06836], [-69.95362, 47.74488], [-71.10458, 46.82171], [-70.25522, 46.98606], [-68.65, 48.3], [-66.55243, 49.1331], [-65.05626, 49.23278], [-64.17099, 48.74248], [-65.11545, 48.07085], [-64.79854, 46.99297], [-64.47219, 46.23849], [-63.17329, 45.73902], [-61.52072, 45.88377], [-60.51815, 47.00793], [-60.4486, 46.28264], [-59.80287, 45.9204], [-61.03988, 45.26525], [-63.25471, 44.67014], [-64.24656, 44.26553], [-65.36406, 43.54523], [-66.1234, 43.61867], [-66.16173, 44.46512], [-64.42549, 45.29204], [-66.02605, 45.25931], [-67.13741, 45.13753], [-67.79134, 45.70281], [-67.79046, 47.06636], [-68.23444, 47.35486], [-68.905, 47.185], [-69.237216, 47.447781], [-69.99997, 46.69307], [-70.305, 45.915], [-70.66, 45.46], [-71.08482, 45.30524], [-71.405, 45.255], [-71.50506, 45.0082], [-73.34783, 45.00738], [-74.867, 45.00048], [-75.31821, 44.81645], [-76.375, 44.09631], [-76.5, 44.018458893758712], [-76.820034145805565, 43.628784288093748], [-77.737885097957687, 43.62905558936329], [-78.720279914042365, 43.625089423184868], [-79.171673550111862, 43.466339423184216], [-79.01, 43.27], [-78.92, 42.965], [-78.939362148743683, 42.863611355148031], [-80.247447679347928, 42.366199856122584], [-81.277746548167144, 42.209025987306845], [-82.439277716791608, 41.675105088867149], [-82.690089280920162, 41.675105088867149], [-83.029810146806909, 41.832795722005834], [-83.141999681312555, 41.975681057292825], [-83.12, 42.08], [-82.9, 42.43], [-82.43, 42.98], [-82.137642381503881, 43.571087551439909], [-82.337763125431053, 44.44], [-82.550924648758169, 45.347516587905368], [-83.592850714843067, 45.816893622412373], [-83.469550747394621, 45.994686387712584], [-83.616130947590563, 46.116926988299056], [-83.890765347005726, 46.116926988299056], [-84.091851264161463, 46.27541860613816], [-84.14211951367335, 46.512225857115723], [-84.3367, 46.40877], [-84.6049, 46.4396], [-84.543748745445853, 46.538684190449132], [-84.779238247399888, 46.637101955749038], [-84.876079881514855, 46.900083319682366], [-85.652363247403414, 47.220218817730498], [-86.461990831228249, 47.553338019392037], [-87.439792623300207, 47.94], [-88.378114183286698, 48.302917588893727], [-89.272917446636654, 48.019808254582657], [-89.6, 48.01], [-90.83, 48.27], [-91.64, 48.14], [-92.61, 48.45], [-93.63087, 48.60926], [-94.32914, 48.67074], [-94.64, 48.84], [-94.81758, 49.38905], [-95.15609, 49.38425], [-95.159069509172014, 49.0], [-97.228720000004799, 49.0007], [-100.65, 49.0], [-104.04826, 48.99986], [-107.05, 49.0], [-110.05, 49.0], [-113.0, 49.0], [-116.04818, 49.0], [-117.03121, 49.0], [-120.0, 49.0], [-122.84, 49.0], [-122.97421, 49.002537777777789], [-124.91024, 49.98456], [-125.62461, 50.41656], [-127.43561, 50.83061], [-127.99276, 51.71583], [-127.85032, 52.32961], [-129.12979, 52.75538], [-129.30523, 53.56159], [-130.51497, 54.28757], [-130.53611, 54.80278], [-129.98, 55.285], [-130.00778, 55.91583], [-131.70781, 56.55212], [-132.73042, 57.69289], [-133.35556, 58.41028], [-134.27111, 58.86111], [-134.945, 59.27056], [-135.47583, 59.78778], [-136.47972, 59.46389], [-137.4525, 58.905], [-138.34089, 59.56211], [-139.039, 60.0], [-140.013, 60.27682], [-140.99778, 60.30639], [-140.9925, 66.00003], [-140.986, 69.712], [-139.12052, 69.47102], [-137.54636, 68.99002], [-136.50358, 68.89804], [-135.62576, 69.31512], [-134.41464, 69.62743], [-132.92925, 69.50534], [-131.43136, 69.94451], [-129.79471, 70.19369], [-129.10773, 69.77927], [-128.36156, 70.01286], [-128.13817, 70.48384], [-127.44712, 70.37721], [-125.75632, 69.48058], [-124.42483, 70.1584], [-124.28968, 69.39969], [-123.06108, 69.56372], [-122.6835, 69.85553], [-121.47226, 69.79778], [-119.94288, 69.37786], [-117.60268, 69.01128], [-116.22643, 68.84151], [-115.2469, 68.90591], [-113.89794, 68.3989], [-115.30489, 67.90261], [-113.49727, 67.68815], [-110.798, 67.80612], [-109.94619, 67.98104], [-108.8802, 67.38144], [-107.79239, 67.88736], [-108.81299, 68.31164], [-108.16721, 68.65392], [-106.95, 68.7], [-106.15, 68.8], [-105.34282, 68.56122], [-104.33791, 68.018], [-103.22115, 68.09775], [-101.45433, 67.64689], [-99.90195, 67.80566], [-98.4432, 67.78165], [-98.5586, 68.40394], [-97.66948, 68.57864], [-96.11991, 68.23939], [-96.12588, 67.29338], [-95.48943, 68.0907], [-94.685, 68.06383], [-94.23282, 69.06903], [-95.30408, 69.68571], [-96.47131, 70.08976], [-96.39115, 71.19482], [-95.2088, 71.92053], [-93.88997, 71.76015], [-92.87818, 71.31869], [-91.51964, 70.19129], [-92.40692, 69.69997], [-90.5471, 69.49766]]], [[[-114.167169999999871, 73.12145], [-114.66634, 72.65277], [-112.441019999999867, 72.9554], [-111.05039, 72.4504], [-109.920349999999857, 72.96113], [-109.00654, 72.63335], [-108.188349999999886, 71.65089], [-107.68599, 72.06548], [-108.39639, 73.08953], [-107.51645, 73.23598], [-106.522589999999866, 73.07601], [-105.402459999999877, 72.67259], [-104.77484, 71.6984], [-104.464759999999814, 70.99297], [-102.78537, 70.49776], [-100.980779999999868, 70.02432], [-101.089289999999892, 69.58447000000011], [-102.731159999999875, 69.50402], [-102.09329, 69.11962], [-102.43024, 68.75282], [-104.24, 68.91], [-105.96, 69.180000000000135], [-107.12254, 69.11922], [-108.999999999999872, 68.78], [-111.534148875200117, 68.630059156817921], [-113.3132, 68.53554], [-113.854959999999807, 69.007440000000102], [-115.22, 69.28], [-116.10794, 69.16821], [-117.34, 69.960000000000107], [-116.674729999999869, 70.06655], [-115.13112, 70.2373], [-113.72141, 70.19237], [-112.4161, 70.36638], [-114.35, 70.6], [-116.48684, 70.52045], [-117.9048, 70.540560000000127], [-118.43238, 70.9092], [-116.11311, 71.30918], [-117.65568, 71.2952], [-119.40199, 71.55859], [-118.56267, 72.30785], [-117.866419999999877, 72.70594], [-115.18909, 73.314590000000109], [-114.167169999999871, 73.12145]]], [[[-104.5, 73.42], [-105.38, 72.76], [-106.94, 73.46], [-106.6, 73.6], [-105.26, 73.64], [-104.5, 73.42]]], [[[-76.34, 73.102684989953005], [-76.251403808593736, 72.826385498046861], [-77.314437866210895, 72.85554504394527], [-78.391670227050795, 72.876655578613253], [-79.486251831054645, 72.742202758789062], [-79.775833129882827, 72.80290222167973], [-80.876098632812514, 73.333183288574205], [-80.833885192871051, 73.693183898925767], [-80.353057861328111, 73.75971984863277], [-78.064437866210923, 73.651931762695327], [-76.34, 73.102684989953005]]], [[[-86.562178514334107, 73.157447007938444], [-85.774371304044521, 72.534125881633798], [-84.850112474288224, 73.34027822538711], [-82.315590176100969, 73.750950832810574], [-80.600087653307611, 72.716543687624181], [-80.748941616524391, 72.061906643350753], [-78.770638597310764, 72.352173163534147], [-77.824623989559569, 72.749616604291035], [-75.605844692675717, 72.243678493937381], [-74.228616095664975, 71.767144273557889], [-74.099140794557698, 71.330840155717638], [-72.242225714797641, 71.556924546994495], [-71.200015428335192, 70.920012518997211], [-68.78605424668487, 70.525023708774242], [-67.914970465756923, 70.121947536897594], [-66.969033372654152, 69.18608734809186], [-68.805122850200533, 68.720198472764409], [-66.449866095633851, 68.067163397892003], [-64.862314419195215, 67.847538560651614], [-63.424934454996745, 66.928473212340649], [-61.851981370680569, 66.862120673277829], [-62.163176845942296, 66.160251369889593], [-63.91844438338417, 64.998668524832837], [-65.148860236253611, 65.426032619886669], [-66.72121904159853, 66.388041083432185], [-68.015016038673949, 66.262725735124391], [-68.141287400979152, 65.689789130304362], [-67.089646165623392, 65.108455105236985], [-65.732080451099748, 64.64840566675862], [-65.320167609301265, 64.382737128346051], [-64.669406297449669, 63.392926744227474], [-65.013803880458894, 62.674185085695974], [-66.275044725190455, 62.945098781986069], [-68.783186204692711, 63.745670071051805], [-67.369680752213029, 62.883965562584869], [-66.328297288667201, 62.28007477482204], [-66.165568203380147, 61.930897121825879], [-68.877366502544632, 62.330149237712803], [-71.023437059193824, 62.910708116295829], [-72.23537858751898, 63.397836005295154], [-71.886278449171286, 63.679989325608837], [-73.37830624051837, 64.193963121183813], [-74.834418911422588, 64.679075629323776], [-74.818502570276706, 64.389093329517962], [-77.709979824520019, 64.229542344816778], [-78.55594885935416, 64.572906399180127], [-77.897281053361908, 65.309192206474776], [-76.018274298797181, 65.326968899183143], [-73.95979529488271, 65.454764716240888], [-74.293883429649625, 65.81177134872938], [-73.94491248238262, 66.310578111426722], [-72.65116716173938, 67.284575507263853], [-72.926059943316076, 67.726925767682374], [-73.311617804645721, 68.069437160912898], [-74.8433072577768, 68.554627183701271], [-76.869100918266739, 68.894735622830254], [-76.228649054657339, 69.147769273547411], [-77.28736996123709, 69.769540106883269], [-78.168633999326588, 69.826487535268896], [-78.95724219431672, 70.166880194775402], [-79.492455003563649, 69.871807766388898], [-81.305470954091732, 69.743185126414332], [-84.944706183598456, 69.966634019644388], [-87.060003424817864, 70.260001125765356], [-88.681713223001495, 70.410741278760796], [-89.513419562523012, 70.762037665480975], [-88.467721116880753, 71.218185533321318], [-89.888151211287465, 71.222552191849942], [-90.205160285181989, 72.235074367960792], [-89.43657670770493, 73.129464219852352], [-88.408241543312784, 73.537888902471209], [-85.826151089200906, 73.803815823045213], [-86.562178514334107, 73.157447007938444]]], [[[-100.35642, 73.84389], [-99.16387, 73.63339], [-97.38, 73.76], [-97.12, 73.47], [-98.05359, 72.99052], [-96.54, 72.56], [-96.72, 71.66], [-98.35966, 71.27285], [-99.32286, 71.35639], [-100.01482, 71.73827], [-102.5, 72.51], [-102.48, 72.83], [-100.43836, 72.70588], [-101.54, 73.36], [-100.35642, 73.84389]]], [[[-93.196295539100205, 72.771992499473342], [-94.26904659704725, 72.024596259235949], [-95.409855516322637, 72.061880805134578], [-96.033745083382428, 72.940276801231789], [-96.01826799191096, 73.437429918095788], [-95.495793423224001, 73.862416897264154], [-94.503657599652328, 74.134906724739196], [-92.420012173211745, 74.100025132942179], [-90.509792853542578, 73.85673248971203], [-92.003965216829869, 72.966244208458477], [-93.196295539100205, 72.771992499473342]]], [[[-120.46, 71.383601793087578], [-123.09219, 70.90164], [-123.62, 71.34], [-125.92894873747332, 71.868688463011395], [-125.499999999999872, 72.292260811795003], [-124.80729, 73.02256], [-123.94, 73.680000000000135], [-124.917749999999899, 74.292750000000112], [-121.53788, 74.44893], [-120.10978, 74.24135], [-117.55564, 74.18577], [-116.58442, 73.89607], [-115.51081, 73.47519], [-116.767939999999882, 73.22292], [-119.22, 72.52], [-120.46, 71.82], [-120.46, 71.383601793087578]]], [[[-93.612755906940464, 74.979997260224437], [-94.156908738973812, 74.59234650338685], [-95.60868058956558, 74.666863918751758], [-96.820932176484561, 74.927623196096576], [-96.288587409229791, 75.377828274223333], [-94.850819871789113, 75.647217515760886], [-93.977746548217908, 75.296489569795952], [-93.612755906940464, 74.979997260224437]]], [[[-98.5, 76.72], [-97.735585, 76.25656], [-97.704415, 75.74344], [-98.16, 75.0], [-99.80874, 74.89744], [-100.88366, 75.05736], [-100.86292, 75.64075], [-102.50209, 75.5638], [-102.56552, 76.3366], [-101.48973, 76.30537], [-99.98349, 76.64634], [-98.57699, 76.58859], [-98.5, 76.72]]], [[[-108.21141, 76.20168], [-107.81943, 75.84552], [-106.92893, 76.01282], [-105.881, 75.9694], [-105.70498, 75.47951], [-106.31347, 75.00527], [-109.7, 74.85], [-112.22307, 74.41696], [-113.74381, 74.39427], [-113.87135, 74.72029], [-111.79421, 75.1625], [-116.31221, 75.04343], [-117.7104, 75.2222], [-116.34602, 76.19903], [-115.40487, 76.47887], [-112.59056, 76.14134], [-110.81422, 75.54919], [-109.0671, 75.47321], [-110.49726, 76.42982], [-109.5811, 76.79417], [-108.54859, 76.67832], [-108.21141, 76.20168]]], [[[-94.684085862999439, 77.097878323058367], [-93.573921068073105, 76.776295884906062], [-91.605023159536586, 76.778517971494594], [-90.741845872749209, 76.449597479956807], [-90.969661424507976, 76.074013170059445], [-89.822237921899244, 75.847773749485626], [-89.187082892599776, 75.610165513807615], [-87.838276333349611, 75.566188869927217], [-86.379192267588664, 75.482421373182163], [-84.789625210290595, 75.699204006646497], [-82.753444586910049, 75.784315090631225], [-81.12853084992436, 75.713983466282016], [-80.05751095245914, 75.336848863415867], [-79.833932868148324, 74.923127346487192], [-80.457770758775823, 74.657303778777774], [-81.948842536125511, 74.442459011524321], [-83.2288936022114, 74.564027818490928], [-86.097452358733292, 74.410032050261137], [-88.150350307960196, 74.392307033984977], [-89.764722052758358, 74.515555325001117], [-92.422440965529418, 74.837757880340973], [-92.768285488642789, 75.38681997344213], [-92.889905972041717, 75.882655341282629], [-93.893824022175977, 76.319243679500516], [-95.962457445035795, 76.44138092722244], [-97.121378953829463, 76.751077785947587], [-96.745122850312342, 77.161388658345132], [-94.684085862999439, 77.097878323058367]]], [[[-116.198586595507322, 77.645286770326194], [-116.335813361458349, 76.876961575010554], [-117.106050584768766, 76.530031846819114], [-118.040412157038119, 76.481171780087081], [-119.899317586885687, 76.053213406061971], [-121.499995077126471, 75.900018622532784], [-122.85492448615895, 76.116542873835684], [-122.854925293603188, 76.116542873835684], [-121.157535360328239, 76.864507554828336], [-119.103938971821023, 77.512219957174608], [-117.570130784965954, 77.498318996888102], [-116.198586595507322, 77.645286770326194]]], [[[-93.840003017943971, 77.51999726023449], [-94.295608283245244, 77.491342678528682], [-96.169654100310055, 77.55511139597688], [-96.436304490936109, 77.83462921824362], [-94.422577277386353, 77.820004787904978], [-93.720656297565867, 77.634331366680314], [-93.840003017943971, 77.51999726023449]]], [[[-110.186938035912945, 77.697014879050286], [-112.051191169058455, 77.409228827616843], [-113.534278937619035, 77.732206529441143], [-112.724586758253835, 78.051050116681935], [-111.264443325630822, 78.152956041161545], [-109.854451870547067, 77.996324774884812], [-110.186938035912945, 77.697014879050286]]], [[[-109.663145718202557, 78.601972561345676], [-110.88131425661885, 78.406919867659994], [-112.542091437615142, 78.407901719873493], [-112.525890876091566, 78.550554511215225], [-111.500010342233367, 78.849993598130538], [-110.96366065147599, 78.804440823065207], [-109.663145718202557, 78.601972561345676]]], [[[-95.830294969449312, 78.056941229963243], [-97.309842902397975, 77.85059723582178], [-98.124289313533964, 78.082856960757567], [-98.55286780474664, 78.458105373845086], [-98.631984422585504, 78.871930243638374], [-97.337231411512604, 78.831984361476756], [-96.754398769908761, 78.765812689926989], [-95.559277920294562, 78.41831452098026], [-95.830294969449312, 78.056941229963243]]], [[[-100.060191820052111, 78.324754340315891], [-99.670939093813601, 77.907544664207393], [-101.303940192452984, 78.018984890444798], [-102.949808722733025, 78.343228664860206], [-105.176132778731514, 78.38033234324574], [-104.210429450277147, 78.677420152491777], [-105.419580451258511, 78.918335679836431], [-105.492289191493128, 79.301593939929177], [-103.529282396237917, 79.16534902619162], [-100.8251580472688, 78.80046173777869], [-100.060191820052111, 78.324754340315891]]], [[[-87.02, 79.66], [-85.81435, 79.3369], [-87.18756, 79.0393], [-89.03535, 78.28723], [-90.80436, 78.21533], [-92.87669, 78.34333], [-93.95116, 78.75099], [-93.93574, 79.11373], [-93.14524, 79.3801], [-94.974, 79.37248], [-96.07614, 79.70502], [-96.70972, 80.15777], [-96.01644, 80.60233], [-95.32345, 80.90729], [-94.29843, 80.97727], [-94.73542, 81.20646], [-92.40984, 81.25739], [-91.13289, 80.72345], [-89.45, 80.509322033898258], [-87.81, 80.32], [-87.02, 79.66]]], [[[-68.5, 83.106321516765732], [-65.82735, 83.02801], [-63.68, 82.9], [-61.85, 82.6286], [-61.89388, 82.36165], [-64.334, 81.92775], [-66.75342, 81.72527], [-67.65755, 81.50141], [-65.48031, 81.50657], [-67.84, 80.9], [-69.4697, 80.61683], [-71.18, 79.8], [-73.2428, 79.63415], [-73.88, 79.430162204802073], [-76.90773, 79.32309], [-75.52924, 79.19766], [-76.22046, 79.01907], [-75.39345, 78.52581], [-76.34354, 78.18296], [-77.88851, 77.89991], [-78.36269, 77.50859], [-79.75951, 77.20968], [-79.61965, 76.98336], [-77.91089, 77.022045], [-77.88911, 76.777955], [-80.56125, 76.17812], [-83.17439, 76.45403], [-86.11184, 76.29901], [-87.6, 76.42], [-89.49068, 76.47239], [-89.6161, 76.95213], [-87.76739, 77.17833], [-88.26, 77.9], [-87.65, 77.970222222222205], [-84.97634, 77.53873], [-86.34, 78.18], [-87.96192, 78.37181], [-87.15198, 78.75867], [-85.37868, 78.9969], [-85.09495, 79.34543], [-86.50734, 79.73624], [-86.93179, 80.25145], [-84.19844, 80.20836], [-83.408695652173819, 80.1], [-81.84823, 80.46442], [-84.1, 80.58], [-87.59895, 80.51627], [-89.36663, 80.85569], [-90.2, 81.26], [-91.36786, 81.5531], [-91.58702, 81.89429], [-90.1, 82.085], [-88.93227, 82.11751], [-86.97024, 82.27961], [-85.5, 82.652273458057024], [-84.260005, 82.6], [-83.18, 82.32], [-82.42, 82.86], [-81.1, 83.02], [-79.30664, 83.13056], [-76.25, 83.172058823529369], [-75.71878, 83.06404], [-72.83153, 83.23324], [-70.665765, 83.169780758382828], [-68.5, 83.106321516765732]]]] } }, + { "type": "Feature", "properties": { "admin": "Switzerland", "name": "Switzerland", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[9.594226108446346, 47.525058091820256], [9.632931756232974, 47.347601223329974], [9.479969516649019, 47.102809963563367], [9.932448357796657, 46.920728054382948], [10.442701450246627, 46.893546250997424], [10.36337812667861, 46.483571275409851], [9.922836541390378, 46.314899400409182], [9.182881707403054, 46.440214748716976], [8.966305779667804, 46.036931871111186], [8.489952426801322, 46.005150865251672], [8.316629672894377, 46.163642483090847], [7.755992058959832, 45.824490057959302], [7.273850945676655, 45.776947740250769], [6.843592970414504, 45.991146552100595], [6.500099724970424, 46.429672756529428], [6.022609490593537, 46.272989813820466], [6.037388950229, 46.725778713561859], [6.768713820023605, 47.287708238303686], [6.736571079138058, 47.541801255882838], [7.192202182655505, 47.449765529971003], [7.466759067422228, 47.620581976911794], [8.31730146651415, 47.613579820336255], [8.522611932009765, 47.830827541691285], [9.594226108446346, 47.525058091820256]]] } }, + { "type": "Feature", "properties": { "admin": "Chile", "name": "Chile", "continent": "South America" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-68.634010227583147, -52.636370458874353], [-68.633349999999879, -54.8695], [-67.56244, -54.87001], [-66.95992, -54.89681], [-67.291029999999878, -55.30124], [-68.148629999999841, -55.61183], [-68.639990810811796, -55.580017999086877], [-69.2321, -55.49906], [-69.95809, -55.19843], [-71.00568, -55.05383], [-72.2639, -54.49514], [-73.2852, -53.957519999999874], [-74.66253, -52.83749], [-73.8381, -53.04743], [-72.43418, -53.7154], [-71.10773, -54.07433], [-70.591779999999787, -53.61583], [-70.26748, -52.93123], [-69.345649999999878, -52.5183], [-68.634010227583147, -52.636370458874353]]], [[[-68.219913092711224, -21.49434661223183], [-67.828179897722634, -22.872918796482178], [-67.106673550063604, -22.735924574476392], [-66.985233934177629, -22.986348565362825], [-67.328442959244128, -24.025303236590908], [-68.417652960876111, -24.518554782816874], [-68.386001146097342, -26.185016371365229], [-68.594799770772667, -26.50690886811126], [-68.295541551370391, -26.899339694935787], [-69.001234910748266, -27.521213881136127], [-69.656130337183143, -28.459141127233686], [-70.013550381129861, -29.367922865518544], [-69.919008348251921, -30.336339206668306], [-70.535068935819439, -31.365010267870279], [-70.074399380153622, -33.09120981214803], [-69.814776984319209, -33.273886000299839], [-69.817309129501453, -34.193571465798279], [-70.388049485949082, -35.169687595359441], [-70.364769253201658, -36.005088799789931], [-71.121880662709771, -36.65812387466233], [-71.118625047475419, -37.576827487947192], [-70.814664272734703, -38.552995293940732], [-71.413516608349042, -38.916022230791107], [-71.680761277946445, -39.808164157878061], [-71.915734015577542, -40.832339369470716], [-71.746803758415453, -42.051386407235988], [-72.148898078078517, -42.254888197601375], [-71.915423956983901, -43.408564548517404], [-71.464056159130493, -43.787611179378324], [-71.793622606071935, -44.207172133156099], [-71.329800788036195, -44.407521661151677], [-71.222778896759721, -44.784242852559409], [-71.659315558545316, -44.973688653341434], [-71.552009446891233, -45.560732924177117], [-71.917258470330196, -46.884838148791786], [-72.44735531278026, -47.738532810253517], [-72.331160854771937, -48.244238376661819], [-72.648247443314929, -48.878618259476774], [-73.415435757120022, -49.318436374712952], [-73.328050910114456, -50.378785088909865], [-72.975746832964617, -50.741450290734299], [-72.309973517532342, -50.677009779666342], [-72.329403856074023, -51.425956312872394], [-71.914803839796321, -52.009022305865912], [-69.498362189396076, -52.142760912637236], [-68.571545376241332, -52.299443855346247], [-69.461284349226617, -52.291950772663924], [-69.94277950710611, -52.537930590373243], [-70.8451016913545, -52.899200528525711], [-71.006332160105217, -53.833252042201345], [-71.429794684520928, -53.856454760300373], [-72.557942877884855, -53.531410001184447], [-73.702756720662862, -52.835069268607249], [-73.702756720662862, -52.835070076051487], [-74.946763475225154, -52.262753588419017], [-75.260026007778507, -51.62935475037321], [-74.976632453089806, -51.043395684615675], [-75.47975419788348, -50.378371677451547], [-75.608015102831942, -48.673772881871784], [-75.182769741502128, -47.711919447623153], [-74.126580980104677, -46.939253431995084], [-75.644395311165439, -46.647643324572016], [-74.69215369332305, -45.76397633238097], [-74.351709357384252, -44.10304412208788], [-73.240356004515192, -44.454960625995611], [-72.717803921179765, -42.383355808278985], [-73.388899909138232, -42.117532240569567], [-73.701335618774834, -43.365776462579738], [-74.33194312203257, -43.224958184584395], [-74.017957119427152, -41.794812920906828], [-73.677099372029943, -39.942212823243111], [-73.217592536090663, -39.258688653318508], [-73.505559455037044, -38.282882582351064], [-73.588060879191076, -37.156284681956016], [-73.166717088499283, -37.123780206044351], [-72.553136969681717, -35.508840020491022], [-71.861732143832555, -33.909092706031522], [-71.438450486929895, -32.418899428030819], [-71.668720669222424, -30.920644626592516], [-71.370082567007714, -30.095682061484997], [-71.48989437527645, -28.861442152625909], [-70.905123867461569, -27.640379734001193], [-70.724953986275963, -25.705924167587209], [-70.403965827095035, -23.628996677344542], [-70.091245897080668, -21.393319187101223], [-70.164419725205974, -19.756468194256183], [-70.372572394477714, -18.347975355708879], [-69.858443569605797, -18.092693780187027], [-69.590423753523979, -17.580011895419286], [-69.100246955019401, -18.260125420812653], [-68.966818406841824, -18.981683444904089], [-68.442225104430918, -19.405068454671419], [-68.757167121033703, -20.37265797290447], [-68.219913092711224, -21.49434661223183]]]] } }, + { "type": "Feature", "properties": { "admin": "China", "name": "China", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[110.339187860151526, 18.678395087147603], [109.475209588663702, 18.19770091396861], [108.655207961056135, 18.507681993071397], [108.626217482540426, 19.367887885001974], [109.119055617308007, 19.821038519769385], [110.211598748822837, 20.101253973872073], [110.786550734502228, 20.077534491450077], [111.01005130416462, 19.695929877190732], [110.570646600386794, 19.255879218009305], [110.339187860151526, 18.678395087147603]]], [[[127.657407261262378, 49.760270494172929], [129.397817824420429, 49.440600084015429], [130.58229332898236, 48.729687404976112], [130.987281528853828, 47.790132351261391], [132.506671991099495, 47.788969631534876], [133.373595819228001, 48.183441677434914], [135.026311476786702, 48.478229885443902], [134.500813836810607, 47.578439846377833], [134.112362095272601, 47.212467352886719], [133.76964399631288, 46.116926988299056], [133.097126906466428, 45.14406647397216], [131.883454217659562, 45.32116160743643], [131.025212030156069, 44.967953192721573], [131.288555129115537, 44.111519680348252], [131.144687941614848, 42.929989732426932], [130.633866408409801, 42.903014634770543], [130.640015903852429, 42.39500946712527], [129.994267205933227, 42.985386867843793], [129.596668735879462, 42.424981797854592], [128.05221520397231, 41.994284572917984], [128.208433058790717, 41.466771552082534], [127.343782993683021, 41.503151760415953], [126.869083286649854, 41.816569322266155], [126.18204511932943, 41.107336127276362], [125.079941847840587, 40.569823716792449], [124.265624627785314, 39.928493353834135], [122.86757042856101, 39.637787583976255], [122.131387974130917, 39.170451768544623], [121.054554478032856, 38.89747101496291], [121.585994907722466, 39.360853583324136], [121.376757033372641, 39.750261338859524], [122.168595005381007, 40.422442531896046], [121.640358514493528, 40.946389878903304], [120.768628778161954, 40.593388169917596], [119.639602085449056, 39.898055935214209], [119.023463983233015, 39.252333075511096], [118.042748651197897, 39.204273993479674], [117.532702264477052, 38.73763580988409], [118.05969852098967, 38.061475531561051], [118.878149855628351, 37.897325344385898], [118.911636183753501, 37.448463853498723], [119.702802362142037, 37.156388658185072], [120.823457472823648, 37.870427761377968], [121.711258579597938, 37.481123358707165], [122.357937453298462, 37.454484157860684], [122.519994744965814, 36.930614325501828], [121.104163853033029, 36.651329047180432], [120.63700890511457, 36.111439520811125], [119.66456180224607, 35.609790554337728], [119.151208123858567, 34.909859117160458], [120.227524855633717, 34.360331936168613], [120.620369093916565, 33.37672272392512], [121.229014113450219, 32.460318711877186], [121.908145786630044, 31.692174384074683], [121.891919386890336, 30.949351508095098], [121.264257440273298, 30.676267401648712], [121.503519321784722, 30.14291494396425], [122.092113885589086, 29.832520453403156], [121.93842817595305, 29.018022365834803], [121.684438511238469, 28.225512600206677], [121.125661248866436, 28.135673122667178], [120.395473260582307, 27.053206895449385], [119.585496860839555, 25.740780544532605], [118.656871372554519, 24.547390855400234], [117.281606479970833, 23.624501451099714], [115.890735304835118, 22.782873236578094], [114.763827345846209, 22.668074042241663], [114.152546828265656, 22.223760077396204], [113.806779819800752, 22.548339748621423], [113.241077915501592, 22.051367499270462], [111.843592157032447, 21.550493679281512], [110.78546552942413, 21.39714386645533], [110.444039341271662, 20.34103261970639], [109.88986128137357, 20.282457383703441], [109.627655063924635, 21.008227037026725], [109.864488153118316, 21.395050970947516], [108.522812941524421, 21.715212307211821], [108.050180291782979, 21.552379869060101], [107.043420037872636, 21.8118989120299], [106.567273390735352, 22.21820486092474], [106.725403273548466, 22.794267889898375], [105.811247186305209, 22.976892401617899], [105.329209425886631, 23.352063300056976], [104.476858351664475, 22.819150092046918], [103.504514601660503, 22.703756618739217], [102.706992222100155, 22.708795070887696], [102.170435825613552, 22.464753119389336], [101.652017856861576, 22.318198757409554], [101.803119744882906, 21.174366766845051], [101.27002566936001, 21.201651923095167], [101.180005324307558, 21.436572984294052], [101.150032993578236, 21.849984442629015], [100.416537713627349, 21.558839423096654], [99.983489211021549, 21.742936713136451], [99.240898878987196, 22.118314317304559], [99.53199222208741, 22.949038804612591], [98.898749220782804, 23.142722072842581], [98.66026248575578, 24.063286037690002], [97.604719679762027, 23.897404690033049], [97.724609002679131, 25.083637193293036], [98.671838006589212, 25.91870250091349], [98.712093947344556, 26.743535874940243], [98.682690057370507, 27.508812160750658], [98.246230910233351, 27.747221381129172], [97.91198774616943, 28.335945136014367], [97.327113885490007, 28.261582749946339], [96.248833449287829, 28.411030992134467], [96.586590610747521, 28.830979519154361], [96.117678664131006, 29.452802028922513], [95.404802280664626, 29.031716620392157], [94.565990431702929, 29.27743805593996], [93.413347609432662, 28.640629380807233], [92.503118931043616, 27.896876329046442], [91.696656528696693, 27.771741848251615], [91.258853794319876, 28.040614325466343], [90.730513950567797, 28.064953925075738], [90.015828891971182, 28.296438503527177], [89.475810174521158, 28.042758897406365], [88.814248488320573, 27.299315904239389], [88.730325962278528, 28.086864732367552], [88.120440708369941, 27.876541652939572], [86.954517043000635, 27.974261786403524], [85.823319940131526, 28.203575954698742], [85.011638218123053, 28.642773952747369], [84.23457970575015, 28.839893703724691], [83.89899295444674, 29.320226141877633], [83.337115106137176, 29.463731594352193], [82.327512648450877, 30.115268052688204], [81.525804477874786, 30.422716986608659], [81.111256138029276, 30.183480943313402], [79.721366815107118, 30.882714748654728], [78.738894484374001, 31.515906073527045], [78.458446486326025, 32.61816437431272], [79.176128777995544, 32.483779812137747], [79.208891636068543, 32.994394639613738], [78.811086460285722, 33.506198025032397], [78.912268914713209, 34.321936346975768], [77.83745079947461, 35.494009507787794], [76.192848341785705, 35.89840342868785], [75.896897414050173, 36.666806138651872], [75.158027785140987, 37.133030910789152], [74.980002475895404, 37.419990139305888], [74.829985792952144, 37.990007025701445], [74.864815708316783, 38.378846340481587], [74.25751427602269, 38.606506862943476], [73.928852166646394, 38.505815334622717], [73.675379266254836, 39.431236884105566], [73.960013055318427, 39.660008449861714], [73.822243686828315, 39.893973497063136], [74.776862420556043, 40.366425279291619], [75.467827996730719, 40.56207225194867], [76.526368035797432, 40.427946071935132], [76.90448449087711, 41.066485907549648], [78.187196893226044, 41.185315863604799], [78.543660923175253, 41.582242540038713], [80.119430373051401, 42.12394074153822], [80.259990268885318, 42.34999929459908], [80.180150180994374, 42.920067857426844], [80.866206496101213, 43.180362046881008], [79.966106398441426, 44.917516994804622], [81.947070753918084, 45.317027492853143], [82.458925815769035, 45.539649563166499], [83.180483839860543, 47.330031236350735], [85.164290399113213, 47.000955715516099], [85.720483839870667, 47.452969468773077], [85.76823286330837, 48.455750637396896], [86.59877648310335, 48.549181626980605], [87.359970330762692, 49.214980780629148], [87.751264276076668, 49.297197984405464], [88.013832228551678, 48.599462795600594], [88.854297723346747, 48.069081732773007], [90.280825636763893, 47.693549099307901], [90.970809360724957, 46.88814606382293], [90.585768263718307, 45.719716091487491], [90.945539585334316, 45.286073309910243], [92.133890822318222, 45.115075995456429], [93.480733677141316, 44.97547211362], [94.688928664125356, 44.352331854828456], [95.306875441471504, 44.241330878265458], [95.762454868556688, 43.319449164394619], [96.349395786527808, 42.725635280928643], [97.451757440177971, 42.74888967546007], [99.515817498779995, 42.524691473961688], [100.845865513108279, 42.663804429691417], [101.833040399179936, 42.51487295182627], [103.312278273534787, 41.907468166667613], [104.522281935649005, 41.90834666601662], [104.964993931093431, 41.597409572916334], [106.129315627061658, 42.134327704428891], [107.744772576937976, 42.481515814781908], [109.243595819131428, 42.519446316084149], [110.412103306115299, 42.871233628911014], [111.129682244920218, 43.406834011400171], [111.82958784388137, 43.743118394539486], [111.667737257943202, 44.073175767587706], [111.348376906379428, 44.457441718110047], [111.87330610560025, 45.102079372735112], [112.436062453258842, 45.01164561622425], [113.463906691544196, 44.808893134127111], [114.46033165899604, 45.339816799493875], [115.985096470200133, 45.727235012386004], [116.717868280098855, 46.38820241961524], [117.421701287914246, 46.67273285581421], [118.874325799638711, 46.805412095723646], [119.663269891438745, 46.692679958678944], [119.772823927897562, 47.048058783550132], [118.866574334794947, 47.747060044946195], [118.064142694166719, 48.06673045510373], [117.295507440257438, 47.697709052107385], [116.308952671373234, 47.853410142602812], [115.742837355615734, 47.726544501326273], [115.485282017073018, 48.135382595403442], [116.191802199367601, 49.134598090199056], [116.67880089728618, 49.888531399121398], [117.879244419426371, 49.510983384796944], [119.288460728025839, 50.142882798862033], [119.279365675942358, 50.582907619827282], [120.182049595216924, 51.64356639261802], [120.738191359541972, 51.964115302124547], [120.725789015791975, 52.516226304730814], [120.177088657716865, 52.753886216841195], [121.003084751470226, 53.251401068731226], [122.245747918792858, 53.431725979213681], [123.571506789240843, 53.458804429734627], [125.068211297710434, 53.161044826868832], [125.946348911646169, 52.792798570356936], [126.564399041856959, 51.784255479532689], [126.939156528837657, 51.353894151405896], [127.287455682484904, 50.739797268265434], [127.657407261262378, 49.760270494172929]]]] } }, + { "type": "Feature", "properties": { "admin": "Ivory Coast", "name": "Côte d'Ivoire", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-2.856125047202397, 4.994475816259508], [-3.311084357100071, 4.984295559098014], [-4.008819545904941, 5.179813340674314], [-4.64991736491791, 5.168263658057084], [-5.834496222344525, 4.993700669775135], [-6.528769090185845, 4.705087795425015], [-7.518941209330434, 4.338288479017307], [-7.712159389669749, 4.364565944837721], [-7.63536821128403, 5.188159084489455], [-7.53971513511176, 5.313345241716517], [-7.570152553731686, 5.707352199725903], [-7.993692592795879, 6.126189683451541], [-8.311347622094017, 6.193033148621081], [-8.602880214868618, 6.467564195171659], [-8.385451626000572, 6.911800645368742], [-8.485445522485348, 7.395207831243068], [-8.439298468448696, 7.686042792181736], [-8.280703497744936, 7.687179673692156], [-8.221792364932197, 8.123328762235571], [-8.299048631208562, 8.316443589710302], [-8.203498907900878, 8.455453192575446], [-7.832100389019186, 8.575704250518625], [-8.079113735374348, 9.376223863152033], [-8.309616461612249, 9.789531968622439], [-8.22933712404682, 10.129020290563897], [-8.029943610048617, 10.206534939001711], [-7.89958980959237, 10.297382106970824], [-7.622759161804808, 10.147236232946792], [-6.850506557635057, 10.138993841996237], [-6.666460944027547, 10.430810655148447], [-6.493965013037267, 10.411302801958268], [-6.205222947606429, 10.524060777219132], [-6.050452032892266, 10.096360785355442], [-5.816926235365286, 10.222554633012191], [-5.404341599946973, 10.370736802609144], [-4.954653286143098, 10.152713934769732], [-4.779883592131966, 9.821984768101741], [-4.330246954760383, 9.610834865757139], [-3.980449184576684, 9.862344061721698], [-3.511898972986272, 9.900326239456216], [-2.827496303712706, 9.642460842319775], [-2.56218950032624, 8.219627793811481], [-2.983584967450326, 7.379704901555511], [-3.244370083011261, 6.2504715031135], [-2.810701463217839, 5.389051215024109], [-2.856125047202397, 4.994475816259508]]] } }, + { "type": "Feature", "properties": { "admin": "Cameroon", "name": "Cameroon", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[13.07582238124675, 2.267097072759014], [12.951333855855605, 2.321615708826939], [12.359380323952218, 2.19281220133945], [11.751665480199787, 2.326757513839993], [11.276449008843711, 2.261050930180871], [9.649158155972627, 2.283866075037735], [9.795195753629455, 3.073404445809117], [9.404366896205998, 3.734526882335202], [8.948115675501068, 3.904128933117135], [8.744923943729416, 4.352215277519959], [8.488815545290889, 4.495617377129917], [8.500287713259693, 4.771982937026847], [8.757532993208626, 5.47966583904791], [9.233162876023043, 6.444490668153334], [9.522705926154398, 6.453482367372116], [10.118276808318255, 7.038769639509879], [10.497375115611417, 7.055357774275562], [11.058787876030349, 6.644426784690593], [11.745774366918509, 6.981382961449753], [11.839308709366801, 7.397042344589434], [12.063946160539556, 7.799808457872301], [12.218872104550597, 8.305824082874322], [12.753671502339214, 8.717762762888993], [12.955467970438971, 9.417771714714702], [13.1675997249971, 9.64062632897341], [13.308676385153914, 10.160362046748926], [13.572949659894558, 10.798565985553564], [14.415378859116682, 11.572368882692071], [14.468192172918974, 11.90475169519341], [14.57717776862253, 12.085360826053501], [14.181336297266792, 12.483656927943112], [14.213530714584634, 12.802035427293344], [14.495787387762842, 12.859396267137326], [14.893385857816522, 12.219047756392582], [14.960151808337598, 11.555574042197222], [14.923564894274955, 10.891325181517471], [15.467872755605269, 9.982336737503429], [14.909353875394713, 9.99212942142273], [14.627200555081057, 9.920919297724536], [14.171466098699025, 10.021378282099928], [13.954218377344002, 9.549494940626685], [14.544466586981766, 8.965861314322266], [14.979995558337688, 8.796104234243471], [15.120865512765331, 8.382150173369423], [15.436091749745765, 7.692812404811971], [15.279460483469107, 7.421924546737968], [14.776545444404572, 6.408498033062044], [14.536560092841111, 6.22695872642069], [14.459407179429345, 5.451760565610299], [14.558935988023501, 5.03059764243153], [14.478372430080466, 4.732605495620446], [14.950953403389658, 4.21038930909492], [15.036219516671249, 3.851367295747123], [15.405395948964379, 3.335300604664339], [15.862732374747479, 3.013537298998982], [15.907380812247649, 2.557389431158612], [16.01285241055535, 2.267639675298084], [15.940918816805061, 1.727672634280295], [15.14634199388524, 1.964014797367184], [14.337812534246577, 2.22787466064949], [13.07582238124675, 2.267097072759014]]] } }, + { "type": "Feature", "properties": { "admin": "Democratic Republic of the Congo", "name": "Dem. Rep. Congo", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[30.833859897593801, 3.50916596111034], [30.773346795380036, 2.339883327642127], [31.174149204235807, 2.204465236821263], [30.852670118948048, 1.849396470543809], [30.468507521290292, 1.58380544677972], [30.086153598762703, 1.062312730306288], [29.875778842902488, 0.597379868976304], [29.819503208136634, -0.205310153813372], [29.587837762172164, -0.58740569417948], [29.579466180140876, -1.341313164885626], [29.29188683443661, -1.620055840667987], [29.254834832483336, -2.215109958508911], [29.117478875451546, -2.292211195488384], [29.02492638521678, -2.839257907730157], [29.276383904749046, -3.293907159034063], [29.339997592900342, -4.499983412294092], [29.519986606572925, -5.419978936386313], [29.41999271008816, -5.939998874539432], [29.620032179490003, -6.520015150583424], [30.199996779101692, -7.079980970898161], [30.740015496551781, -8.340007419470913], [30.34608605319081, -8.238256524288216], [29.002912225060467, -8.40703175215347], [28.734866570762495, -8.526559340044576], [28.449871046672818, -9.164918308146083], [28.673681674928922, -9.605924981324931], [28.496069777141763, -10.789883721564044], [28.372253045370421, -11.793646742401389], [28.642417433392346, -11.971568698782312], [29.341547885869087, -12.36074391037241], [29.616001417771223, -12.178894545137307], [29.699613885219485, -13.257226657771827], [28.934285922976834, -13.248958428605132], [28.52356163912102, -12.698604424696679], [28.15510867687998, -12.272480564017894], [27.38879886242378, -12.132747491100663], [27.164419793412456, -11.608748467661071], [26.55308759939961, -11.924439792532125], [25.752309604604726, -11.784965101776356], [25.418118116973197, -11.330935967659958], [24.783169793402948, -11.238693536018962], [24.314516228947948, -11.262826429899269], [24.257155389103982, -10.951992689663655], [23.912215203555714, -10.926826267137512], [23.456790805767433, -10.867863457892481], [22.837345411884733, -11.017621758674329], [22.402798292742371, -10.99307545333569], [22.155268182064304, -11.084801120653768], [22.208753289486388, -9.894796237836507], [21.87518191904234, -9.523707777548564], [21.801801385187897, -8.908706556842978], [21.949130893652036, -8.305900974158275], [21.746455926203303, -7.920084730667147], [21.728110792739695, -7.2908724910813], [20.514748162526498, -7.299605808138629], [20.601822950938292, -6.93931772219968], [20.091621534920645, -6.943090101756993], [20.037723016040214, -7.116361179231644], [19.417502475673157, -7.155428562044297], [19.166613396896107, -7.738183688999753], [19.016751743249664, -7.988245944860132], [18.464175652752683, -7.847014255406442], [18.134221632569048, -7.98767750410492], [17.472970004962232, -8.068551120641699], [17.089995965247166, -7.545688978712525], [16.860190870845198, -7.222297865429984], [16.573179965896141, -6.622644545115087], [16.326528354567042, -5.877470391466267], [13.375597364971892, -5.864241224799548], [13.02486941900696, -5.984388929878157], [12.735171339578695, -5.965682061388497], [12.322431674863507, -6.100092461779658], [12.182336866920249, -5.789930515163837], [12.436688266660866, -5.684303887559245], [12.468004184629734, -5.248361504745003], [12.631611769265788, -4.991271254092935], [12.995517205465173, -4.781103203961883], [13.258240187237044, -4.882957452009165], [13.600234816144676, -4.500138441590969], [14.144956088933295, -4.510008640158715], [14.209034864975219, -4.793092136253597], [14.582603794013179, -4.970238946150139], [15.170991652088441, -4.3435071753143], [15.753540073314749, -3.855164890156096], [16.006289503654298, -3.535132744972528], [15.972803175529149, -2.712392266453612], [16.407091912510051, -1.740927015798682], [16.86530683764212, -1.225816338713287], [17.523716261472853, -0.743830254726987], [17.638644646889983, -0.424831638189246], [17.663552687254676, -0.058083998213817], [17.826540154703245, 0.288923244626105], [17.774191928791563, 0.855658677571085], [17.89883548347958, 1.741831976728278], [18.09427575040743, 2.365721543788055], [18.39379235197114, 2.90044342692822], [18.453065219809925, 3.504385891123348], [18.542982211997778, 4.201785183118317], [18.932312452884755, 4.709506130385973], [19.467783644293146, 5.031527818212779], [20.290679152108932, 4.691677761245287], [20.927591180106273, 4.322785549329736], [21.659122755630019, 4.224341945813719], [22.405123732195531, 4.02916006104732], [22.704123569436284, 4.633050848810156], [22.841479526468103, 4.710126247573483], [23.297213982850135, 4.609693101414221], [24.41053104014625, 5.108784084489129], [24.805028924262409, 4.897246608902349], [25.128833449003274, 4.927244777847789], [25.278798455514302, 5.170408229997191], [25.650455356557465, 5.256087754737123], [26.402760857862535, 5.150874538590869], [27.044065382604703, 5.127852688004835], [27.374226108517483, 5.233944403500059], [27.979977247842807, 4.408413397637373], [28.428993768026906, 4.287154649264493], [28.696677687298795, 4.455077215996936], [29.159078403446497, 4.38926727947323], [29.715995314256013, 4.600804755060024], [29.953500197069467, 4.173699042167683], [30.833859897593801, 3.50916596111034]]] } }, + { "type": "Feature", "properties": { "admin": "Republic of Congo", "name": "Congo", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[12.995517205465173, -4.781103203961883], [12.620759718484491, -4.438023369976135], [12.318607618873923, -4.606230157086187], [11.914963006242086, -5.037986748884789], [11.093772820691923, -3.978826592630546], [11.855121697648114, -3.42687061932105], [11.478038771214299, -2.765618991714241], [11.820963575903189, -2.514161472181982], [12.495702752338159, -2.391688327650242], [12.575284458067639, -1.948511244315134], [13.109618767965626, -2.428740329603513], [13.992407260807706, -2.470804945489099], [14.299210239324564, -1.998275648612213], [14.425455763413593, -1.333406670744971], [14.316418491277741, -0.552627455247048], [13.843320753645653, 0.038757635901149], [14.276265903386953, 1.196929836426619], [14.026668735417214, 1.395677395021153], [13.282631463278816, 1.31418366129688], [13.003113641012074, 1.830896307783319], [13.07582238124675, 2.267097072759014], [14.337812534246577, 2.22787466064949], [15.14634199388524, 1.964014797367184], [15.940918816805061, 1.727672634280295], [16.01285241055535, 2.267639675298084], [16.537058139724135, 3.198254706226278], [17.133042433346297, 3.728196519379451], [17.809900343505259, 3.560196437998569], [18.453065219809925, 3.504385891123348], [18.39379235197114, 2.90044342692822], [18.09427575040743, 2.365721543788055], [17.89883548347958, 1.741831976728278], [17.774191928791563, 0.855658677571085], [17.826540154703245, 0.288923244626105], [17.663552687254676, -0.058083998213817], [17.638644646889983, -0.424831638189246], [17.523716261472853, -0.743830254726987], [16.86530683764212, -1.225816338713287], [16.407091912510051, -1.740927015798682], [15.972803175529149, -2.712392266453612], [16.006289503654298, -3.535132744972528], [15.753540073314749, -3.855164890156096], [15.170991652088441, -4.3435071753143], [14.582603794013179, -4.970238946150139], [14.209034864975219, -4.793092136253597], [14.144956088933295, -4.510008640158715], [13.600234816144676, -4.500138441590969], [13.258240187237044, -4.882957452009165], [12.995517205465173, -4.781103203961883]]] } }, + { "type": "Feature", "properties": { "admin": "Colombia", "name": "Colombia", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-75.373223232713841, -0.15203175212045], [-75.801465827116587, 0.084801337073202], [-76.292314419240938, 0.416047268064119], [-76.576379767549383, 0.256935533037435], [-77.424984300430367, 0.395686753741117], [-77.668612840470416, 0.825893052570961], [-77.855061408179509, 0.809925034992773], [-78.855258755188686, 1.380923773601822], [-78.990935228171026, 1.691369940595251], [-78.617831387023699, 1.766404120283056], [-78.662118089497838, 2.267355454920476], [-78.427610439757302, 2.629555568854215], [-77.931542527971473, 2.696605739752925], [-77.510431281224996, 3.325016994638246], [-77.127689785455246, 3.849636135265356], [-77.496271938776999, 4.087606105969427], [-77.307601284479375, 4.667984117039452], [-77.533220587865713, 5.582811997902496], [-77.318815070286718, 5.845354112161359], [-77.476660732722266, 6.691116441266301], [-77.881571417945239, 7.223771267114783], [-77.75341386586139, 7.709839789252141], [-77.431107957656977, 7.638061224798733], [-77.242566494440069, 7.935278225125442], [-77.474722866511314, 8.524286200388216], [-77.353360765273848, 8.670504665558068], [-76.836673957003541, 8.638749497914715], [-76.086383836557843, 9.336820583529486], [-75.674600185840035, 9.443248195834597], [-75.664704149056149, 9.774003200718736], [-75.480425991503338, 10.618990383339305], [-74.906895107711975, 11.08304474532032], [-74.276752692344871, 11.102035834187586], [-74.197222663047683, 11.310472723836865], [-73.414763963500278, 11.227015285685479], [-72.62783525255962, 11.731971543825519], [-72.238194953078903, 11.955549628136325], [-71.754090135368628, 12.437303168177305], [-71.399822353791691, 12.376040757695289], [-71.137461107045866, 12.112981879113503], [-71.331583624950284, 11.776284084515805], [-71.973921678338272, 11.608671576377116], [-72.227575446242923, 11.108702093953237], [-72.614657762325194, 10.821975409381777], [-72.905286017534692, 10.45034434655477], [-73.027604132769554, 9.736770331252441], [-73.304951544880026, 9.151999823437604], [-72.788729824500379, 9.085027167187331], [-72.660494757768092, 8.62528778730268], [-72.439862230097944, 8.405275376820027], [-72.360900641555958, 8.002638454617893], [-72.479678921178831, 7.632506008327352], [-72.444487270788059, 7.42378489830048], [-72.19835242378187, 7.340430813013682], [-71.960175747348629, 6.991614895043538], [-70.674233567981503, 7.087784735538717], [-70.093312954372408, 6.960376491723109], [-69.389479946557103, 6.099860541198835], [-68.985318569602327, 6.206804917826856], [-68.265052456318216, 6.153268133972473], [-67.695087246355001, 6.267318020040645], [-67.34143958196556, 6.095468044454021], [-67.521531948502741, 5.556870428891968], [-67.744696621355203, 5.221128648291667], [-67.823012254493534, 4.503937282728898], [-67.621835903581271, 3.839481716319994], [-67.33756384954367, 3.542342230641721], [-67.303173183853417, 3.31845408773718], [-67.809938117123693, 2.820655015469569], [-67.447092047786299, 2.600280869960869], [-67.181294318293041, 2.250638129074062], [-66.876325853122566, 1.253360500489336], [-67.065048183852483, 1.130112209473225], [-67.25999752467358, 1.719998684084956], [-67.537810024674684, 2.037162787276329], [-67.868565029558823, 1.692455145673392], [-69.816973232691609, 1.714805202639624], [-69.804596727157701, 1.089081122233466], [-69.218637661400166, 0.985676581217433], [-69.252434048119042, 0.602650865070075], [-69.452396002872447, 0.706158758950693], [-70.015565761989293, 0.541414292804205], [-70.02065589057004, -0.185156345219539], [-69.577065395776586, -0.549991957200163], [-69.420485805932216, -1.122618503426409], [-69.444101935489599, -1.556287123219817], [-69.893635219996611, -4.298186944194326], [-70.394043952094975, -3.766591485207825], [-70.692682054309699, -3.742872002785858], [-70.047708502874841, -2.725156345229699], [-70.813475714791949, -2.256864515800742], [-71.413645799429773, -2.342802422702128], [-71.774760708285385, -2.169789727388937], [-72.325786505813639, -2.434218031426453], [-73.070392218707212, -2.308954359550952], [-73.659503546834586, -1.260491224781134], [-74.122395189089048, -1.002832533373848], [-74.441600511355958, -0.530820000819887], [-75.106624518520064, -0.05720549886486], [-75.373223232713841, -0.15203175212045]]] } }, + { "type": "Feature", "properties": { "admin": "Costa Rica", "name": "Costa Rica", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-82.965783047197348, 8.225027980985983], [-83.508437262694287, 8.446926581247281], [-83.711473965169063, 8.656836249216864], [-83.596313035806631, 8.830443223501417], [-83.632641567707822, 9.051385809765319], [-83.909885626953724, 9.290802720573579], [-84.303401658856345, 9.487354030795712], [-84.64764421256865, 9.615537421095707], [-84.713350796227743, 9.908051866083849], [-84.975660366541319, 10.086723130733004], [-84.911374884770211, 9.795991522658921], [-85.110923428065291, 9.557039699741308], [-85.339488288092255, 9.834542141148658], [-85.660786505866966, 9.93334747969072], [-85.797444831062819, 10.134885565629032], [-85.791708747078417, 10.439337266476612], [-85.65931372754666, 10.754330959511718], [-85.941725430021748, 10.895278428587799], [-85.712540452807289, 11.088444932494822], [-85.561851976244171, 11.217119248901593], [-84.903003302738924, 10.952303371621895], [-84.673069017256239, 11.082657172078139], [-84.355930752281026, 10.999225572142901], [-84.190178595704822, 10.793450018756671], [-83.895054490885926, 10.726839097532444], [-83.655611741861563, 10.938764146361418], [-83.402319708982944, 10.39543813724465], [-83.015676642575158, 9.992982082555553], [-82.546196255203469, 9.566134751824674], [-82.932890998043561, 9.476812038608172], [-82.927154914059145, 9.074330145702914], [-82.719183112300513, 8.925708726431493], [-82.868657192704759, 8.807266343618521], [-82.829770677405151, 8.626295477732368], [-82.9131764391242, 8.423517157419068], [-82.965783047197348, 8.225027980985983]]] } }, + { "type": "Feature", "properties": { "admin": "Cuba", "name": "Cuba", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-82.268151211257035, 23.188610744717703], [-81.404457160146819, 23.117271429938775], [-80.61876868358118, 23.105980129482994], [-79.679523688460222, 22.765303249598823], [-79.281485968732071, 22.399201565027049], [-78.347434455056472, 22.512166246017085], [-77.993295864560253, 22.277193508385928], [-77.146422492161037, 21.657851467367831], [-76.523824835908528, 21.20681956632437], [-76.194620123993175, 21.220565497314006], [-75.598222418912655, 21.01662445727413], [-75.671060350228032, 20.735091254147999], [-74.933896043584483, 20.693905137611381], [-74.178024868451246, 20.284627793859737], [-74.296648118777242, 20.050378526280678], [-74.961594611292924, 19.923435370355687], [-75.634680141894577, 19.873774318923193], [-76.323656175425981, 19.952890936762056], [-77.755480923153044, 19.855480861891873], [-77.085108405246729, 20.413353786698789], [-77.492654588516601, 20.673105373613886], [-78.137292243141573, 20.739948838783427], [-78.482826707661161, 21.028613389565848], [-78.719866502583997, 21.598113511638431], [-79.284999966127913, 21.559175319906497], [-80.217475348618635, 21.827324327069032], [-80.517534552721401, 22.037078965741756], [-81.820943366203167, 22.192056586185068], [-82.169991828118611, 22.387109279870746], [-81.79500179719264, 22.636964830001951], [-82.775897996740838, 22.688150336187057], [-83.494458787759328, 22.168517971276124], [-83.908800421875611, 22.154565334557329], [-84.052150845053248, 21.910575059491251], [-84.547030198896351, 21.801227728761639], [-84.974911058273079, 21.896028143801082], [-84.44706214062775, 22.204949856041903], [-84.23035702181177, 22.56575470630376], [-83.778239915690165, 22.78811839445569], [-83.267547573565736, 22.983041897060641], [-82.510436164057495, 23.078746649665181], [-82.268151211257035, 23.188610744717703]]] } }, + { "type": "Feature", "properties": { "admin": "Northern Cyprus", "name": "N. Cyprus", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[32.731780226377445, 35.14002594658843], [32.802473585752743, 35.145503648411363], [32.946960890440799, 35.38670339613369], [33.667227003724939, 35.373215847305509], [34.576473829900458, 35.671595567358786], [33.900804477684197, 35.245755927057608], [33.973616570783456, 35.058506374647997], [33.866439650210104, 35.093594672174177], [33.675391880027057, 35.017862860650446], [33.525685255677494, 35.038688462864066], [33.475817498515845, 35.000344550103499], [33.45592207208346, 35.101423651666401], [33.383833449036295, 35.162711900364563], [33.190977003723042, 35.173124701471373], [32.919572381326127, 35.087832749973636], [32.731780226377445, 35.14002594658843]]] } }, + { "type": "Feature", "properties": { "admin": "Cyprus", "name": "Cyprus", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[33.973616570783456, 35.058506374647997], [34.004880812320032, 34.978097846001852], [32.97982710137844, 34.571869411755436], [32.490296258277532, 34.701654771456468], [32.256667107885953, 35.103232326796622], [32.731780226377445, 35.14002594658843], [32.919572381326127, 35.087832749973636], [33.190977003723042, 35.173124701471373], [33.383833449036295, 35.162711900364563], [33.45592207208346, 35.101423651666401], [33.475817498515845, 35.000344550103499], [33.525685255677494, 35.038688462864066], [33.675391880027057, 35.017862860650446], [33.866439650210104, 35.093594672174177], [33.973616570783456, 35.058506374647997]]] } }, + { "type": "Feature", "properties": { "admin": "Czech Republic", "name": "Czech Rep.", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[16.960288120194573, 48.596982326850593], [16.49928266771877, 48.785808010445095], [16.029647251050218, 48.733899034207916], [15.253415561593979, 49.039074205107575], [14.901447381254055, 48.964401760445817], [14.33889773932472, 48.555305284207193], [13.595945672264433, 48.877171942737135], [13.031328973043427, 49.307068182973232], [12.52102420416119, 49.54741526956272], [12.415190870827441, 49.96912079528056], [12.240111118222556, 50.266337795607271], [12.96683678554319, 50.484076443069071], [13.338131951560282, 50.733234361364346], [14.05622765468817, 50.926917629594286], [14.307013380600633, 51.117267767941399], [14.570718214586062, 51.002339382524262], [15.016995883858666, 51.106674099321566], [15.490972120839725, 50.7847299261432], [16.238626743238566, 50.697732652379827], [16.176253289462263, 50.4226073268579], [16.719475945714429, 50.215746568393527], [16.868769158605655, 50.473973700556016], [17.554567091551117, 50.36214590107641], [17.649445021238986, 50.049038397819942], [18.392913852622168, 49.988628648470737], [18.85314415861361, 49.496229763377634], [18.554971144289478, 49.495015367218777], [18.399993523846174, 49.315000515330034], [18.170498488037961, 49.271514797556421], [18.104972771891848, 49.043983466175298], [17.913511590250462, 48.996492824899072], [17.886484816161808, 48.903475246773695], [17.545006951577101, 48.800019029325362], [17.101984897538895, 48.8169688991171], [16.960288120194573, 48.596982326850593]]] } }, + { "type": "Feature", "properties": { "admin": "Germany", "name": "Germany", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[9.92190636560923, 54.983104153048025], [9.939579705452898, 54.596641954153242], [10.950112338920517, 54.363607082733147], [10.939466993868447, 54.008693345752583], [11.95625247564328, 54.196485500701144], [12.518440382546711, 54.470370591847988], [13.647467075259495, 54.075510972705885], [14.119686313542555, 53.757029120491026], [14.353315463934164, 53.248171291713092], [14.074521111719431, 52.981262518925334], [14.437599725002197, 52.62485016540829], [14.685026482815713, 52.089947414755208], [14.607098422919645, 51.745188096719964], [15.016995883858781, 51.106674099321701], [14.570718214586119, 51.002339382524369], [14.307013380600662, 51.117267767941364], [14.05622765468831, 50.92691762959435], [13.338131951560397, 50.733234361364268], [12.966836785543249, 50.484076443069164], [12.240111118222668, 50.266337795607214], [12.41519087082747, 49.969120795280602], [12.521024204161332, 49.547415269562741], [13.031328973043513, 49.307068182973232], [13.595945672264575, 48.877171942737156], [13.243357374737112, 48.416114813829026], [12.884102817443873, 48.289145819687846], [13.025851271220514, 47.637583523135945], [12.93262698736606, 47.467645575543983], [12.620759718484519, 47.672387600284409], [12.141357456112869, 47.703083401065768], [11.426414015354847, 47.523766181013045], [10.544504021861597, 47.566399237653783], [10.402083774465321, 47.302487697939164], [9.896068149463188, 47.58019684507569], [9.594226108446376, 47.525058091820185], [8.522611932009793, 47.830827541691342], [8.317301466514092, 47.613579820336263], [7.466759067422286, 47.620581976911907], [7.59367638513106, 48.333019110703724], [8.099278598674855, 49.017783515003423], [6.658229607783709, 49.201958319691627], [6.186320428094176, 49.4638028021145], [6.242751092156992, 49.90222565367872], [6.043073357781109, 50.128051662794221], [6.156658155958779, 50.803721015010574], [5.988658074577812, 51.85161570902504], [6.589396599970825, 51.85202912048338], [6.842869500362381, 52.228440253297542], [7.092053256873895, 53.14404328064488], [6.905139601274128, 53.482162177130633], [7.100424838905268, 53.693932196662658], [7.936239454793961, 53.748295803433777], [8.121706170289483, 53.527792466844275], [8.800734490604667, 54.02078563090889], [8.572117954145368, 54.395646470754045], [8.526229282270206, 54.962743638725144], [9.282048780971136, 54.830865383516297], [9.92190636560923, 54.983104153048025]]] } }, + { "type": "Feature", "properties": { "admin": "Djibouti", "name": "Djibouti", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[43.081226027200152, 12.699638576707112], [43.317852410664663, 12.390148423711022], [43.286381463398911, 11.974928290245883], [42.715873650896519, 11.735640570518338], [43.145304803242126, 11.462039699748853], [42.776851841000948, 10.926878566934416], [42.55493000000012, 11.105110000000193], [42.314140000000116, 11.0342], [41.755570000000191, 11.05091], [41.739590000000177, 11.355110000000137], [41.661760000000122, 11.6312], [42.000000000000107, 12.100000000000133], [42.351560000000106, 12.54223000000013], [42.779642368344739, 12.455415757695672], [43.081226027200152, 12.699638576707112]]] } }, + { "type": "Feature", "properties": { "admin": "Denmark", "name": "Denmark", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[12.690006137755629, 55.60999095318077], [12.089991082414738, 54.800014553437919], [11.043543328504226, 55.36486379660424], [10.90391360845163, 55.779954738988735], [12.370904168353288, 56.111407375708822], [12.690006137755629, 55.60999095318077]]], [[[10.912181837618359, 56.4586213242779], [10.667803989309986, 56.081383368547208], [10.369992710011983, 56.190007229224719], [9.649984978889306, 55.469999498102041], [9.921906365609173, 54.983104153048046], [9.282048780971136, 54.830865383516155], [8.526229282270235, 54.962743638724973], [8.120310906617588, 55.517722683323612], [8.089976840862247, 56.540011705137587], [8.256581658571262, 56.809969387430286], [8.543437534223385, 57.110002753316891], [9.424469028367609, 57.172066148499468], [9.775558709358561, 57.447940782289649], [10.580005730846151, 57.730016587954843], [10.54610599126269, 57.21573273378614], [10.250000034230222, 56.890016181050456], [10.369992710011983, 56.60998159446082], [10.912181837618359, 56.4586213242779]]]] } }, + { "type": "Feature", "properties": { "admin": "Dominican Republic", "name": "Dominican Rep.", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-71.71236141629295, 19.714455878167353], [-71.587304450146604, 19.884910590082093], [-70.806706102161726, 19.880285549391981], [-70.214364997016119, 19.622885240146157], [-69.950815192327568, 19.647999986240002], [-69.769250047470067, 19.293267116772437], [-69.222125820579862, 19.313214219637096], [-69.254346076113819, 19.015196234609871], [-68.809411994080818, 18.979074408437846], [-68.317943284768958, 18.612197577381689], [-68.689315965434503, 18.205142320218609], [-69.164945848248905, 18.422648423735108], [-69.623987596297624, 18.380712998930246], [-69.952933926051529, 18.428306993071057], [-70.133232998317879, 18.245915025296892], [-70.517137213814195, 18.184290879788829], [-70.669298468697619, 18.42688589118303], [-70.999950120717173, 18.283328762276206], [-71.400209927033885, 17.598564357976596], [-71.657661912712001, 17.757572740138695], [-71.708304816358037, 18.044997056546091], [-71.687737596305865, 18.316660061104468], [-71.945112067335543, 18.616900132720257], [-71.701302659782485, 18.785416978424049], [-71.624873216422813, 19.169837958243303], [-71.71236141629295, 19.714455878167353]]] } }, + { "type": "Feature", "properties": { "admin": "Algeria", "name": "Algeria", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[11.99950564947161, 23.471668402596443], [8.572893100629782, 21.565660712159136], [5.677565952180684, 19.601206976799713], [4.267419467800038, 19.155265204336995], [3.158133172222704, 19.057364203360034], [3.146661004253899, 19.693578599521441], [2.683588494486428, 19.856230170160114], [2.060990838233919, 20.142233384679482], [1.823227573259032, 20.61080943448604], [-1.550054897457613, 22.792665920497377], [-4.92333736817423, 24.974574082940993], [-8.684399786809051, 27.395744126895998], [-8.66512447756419, 27.58947907155822], [-8.665589565454805, 27.656425889592349], [-8.674116176782972, 28.841288967396572], [-7.059227667661928, 29.579228420524522], [-6.060632290053772, 29.731699734001687], [-5.242129278982786, 30.000443020135581], [-4.859646165374469, 30.501187649043839], [-3.690441046554695, 30.896951605751152], [-3.647497931320145, 31.637294012980668], [-3.068980271812647, 31.724497992473207], [-2.616604783529567, 32.094346218386143], [-1.30789913573787, 32.262888902306095], [-1.124551153966308, 32.651521511357124], [-1.388049282222567, 32.864015000941301], [-1.733454555661467, 33.91971283623198], [-1.792985805661686, 34.527918606091198], [-2.169913702798624, 35.168396307916673], [-1.208602871089056, 35.71484874118709], [-0.127454392894606, 35.888662421200799], [0.503876580415209, 36.301272894835272], [1.466918572606545, 36.605647081034398], [3.161698846050824, 36.783904934225205], [4.815758090849129, 36.865036932923452], [5.320120070017792, 36.716518866516616], [6.261819695672611, 37.110655015606731], [7.330384962603969, 37.118380642234364], [7.737078484741003, 36.885707505840209], [8.420964389691674, 36.946427313783154], [8.217824334352313, 36.433176988260271], [8.376367628623766, 35.479876003555937], [8.140981479534302, 34.655145982393783], [7.524481642292242, 34.097376410451453], [7.612641635782181, 33.344114895148955], [8.430472853233367, 32.748337307255944], [8.439102817426116, 32.506284898400814], [9.055602654668148, 32.102691962201284], [9.482139926805273, 30.307556057246181], [9.805634392952411, 29.424638373323383], [9.859997999723443, 28.959989732371007], [9.683884718472765, 28.144173895779193], [9.756128370816779, 27.688258571884141], [9.629056023811073, 27.140953477480913], [9.716285841519747, 26.512206325785691], [9.319410841518161, 26.094324856057447], [9.910692579801774, 25.365454616796733], [9.948261346077969, 24.93695364023251], [10.30384687667836, 24.37931325937091], [10.771363559622925, 24.562532050061744], [11.560669386449002, 24.097909247325511], [11.99950564947161, 23.471668402596443]]] } }, + { "type": "Feature", "properties": { "admin": "Ecuador", "name": "Ecuador", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-80.302560594387188, -3.404856459164712], [-79.770293341780913, -2.65751189535964], [-79.986559210922394, -2.220794366061014], [-80.368783942369234, -2.685158786635788], [-80.967765469064332, -2.246942640800703], [-80.764806281238023, -1.965047702648532], [-80.933659023751702, -1.057454522306358], [-80.583370327461239, -0.906662692878683], [-80.39932471385373, -0.283703301600141], [-80.020898200180355, 0.360340074053468], [-80.090609707342097, 0.768428859862396], [-79.542762010399784, 0.982937730305963], [-78.855258755188686, 1.380923773601822], [-77.855061408179509, 0.809925034992773], [-77.668612840470416, 0.825893052570961], [-77.424984300430367, 0.395686753741117], [-76.576379767549383, 0.256935533037435], [-76.292314419240938, 0.416047268064119], [-75.801465827116587, 0.084801337073202], [-75.373223232713841, -0.15203175212045], [-75.233722703741932, -0.911416924649529], [-75.544995693652027, -1.56160979574588], [-76.635394253226707, -2.608677666843817], [-77.83790483265858, -3.003020521663103], [-78.450683966775628, -3.873096612161375], [-78.639897223612323, -4.547784112164072], [-79.205289069317715, -4.959128513207388], [-79.62497921417615, -4.454198093283494], [-80.028908047185581, -4.346090996928893], [-80.442241990872134, -4.425724379090673], [-80.46929460317692, -4.059286797708999], [-80.184014858709645, -3.821161797708043], [-80.302560594387188, -3.404856459164712]]] } }, + { "type": "Feature", "properties": { "admin": "Egypt", "name": "Egypt", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[34.9226, 29.50133], [34.64174, 29.09942], [34.42655, 28.34399], [34.15451, 27.8233], [33.92136, 27.6487], [33.58811, 27.97136], [33.13676, 28.41765], [32.42323, 29.85108], [32.32046, 29.76043], [32.73482, 28.70523], [33.34876, 27.69989], [34.10455, 26.14227], [34.47387, 25.59856], [34.79507, 25.03375], [35.69241, 23.92671], [35.49372, 23.75237], [35.52598, 23.10244], [36.69069, 22.20485], [36.86623, 22.0], [32.9, 22.0], [29.02, 22.0], [25.0, 22.0], [25.0, 25.682499996360992], [25.0, 29.238654529533452], [24.70007, 30.04419], [24.95762, 30.6616], [24.80287, 31.08929], [25.16482, 31.56915], [26.49533, 31.58568], [27.45762, 31.32126], [28.45048, 31.02577], [28.91353, 30.87005], [29.68342, 31.18686], [30.09503, 31.4734], [30.97693, 31.55586], [31.68796, 31.4296], [31.96041, 30.9336], [32.19247, 31.26034], [32.99392, 31.02407], [33.7734, 30.96746], [34.26544, 31.21936], [34.9226, 29.50133]]] } }, + { "type": "Feature", "properties": { "admin": "Eritrea", "name": "Eritrea", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[42.351560000000106, 12.54223000000013], [42.00975, 12.86582], [41.59856, 13.452090000000108], [41.15519371924983, 13.773319810435224], [40.8966, 14.118640000000138], [40.026218702969167, 14.519579169162281], [39.34061, 14.53155], [39.0994, 14.74064], [38.51295, 14.50547], [37.90607, 14.959430000000165], [37.59377, 14.2131], [36.42951, 14.42211], [36.323188917798113, 14.822480577041057], [36.753860304518575, 16.291874091044289], [36.852530000000108, 16.95655], [37.16747, 17.263140000000128], [37.904000000000103, 17.42754], [38.410089959473218, 17.998307399970312], [38.990622999839999, 16.84062612555169], [39.266110060388016, 15.922723496967246], [39.814293654140208, 15.435647284400314], [41.179274936697645, 14.491079616753209], [41.734951613132345, 13.921036892141554], [42.276830682144848, 13.34399201095442], [42.589576450375255, 13.000421250861901], [43.081226027200152, 12.699638576707112], [42.779642368344739, 12.455415757695672], [42.351560000000106, 12.54223000000013]]] } }, + { "type": "Feature", "properties": { "admin": "Spain", "name": "Spain", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[-9.034817674180244, 41.880570583659669], [-8.98443315269567, 42.592775173506261], [-9.392883673530644, 43.026624660812686], [-7.978189663108308, 43.748337714200979], [-6.754491746436754, 43.567909450853918], [-5.411886359061596, 43.574239813809669], [-4.347842779955783, 43.403449205085025], [-3.51753170410609, 43.455900783861296], [-1.901351284177764, 43.422802028978332], [-1.502770961910528, 43.034014390630425], [0.338046909190581, 42.579546006839543], [0.701590610363894, 42.795734361332599], [1.826793247087153, 42.343384711265678], [2.985998976258457, 42.473015041669854], [3.039484083680548, 41.892120266276891], [2.091841668312184, 41.226088568683082], [0.810524529635188, 41.014731960609332], [0.721331007499401, 40.678318386389229], [0.106691521819869, 40.123933620762003], [-0.278711310212941, 39.309978135732713], [0.111290724293838, 38.738514309233032], [-0.467123582349103, 38.292365831041138], [-0.683389451490598, 37.642353827457811], [-1.438382127274849, 37.443063666324214], [-2.146452602538119, 36.674144192037282], [-3.415780808923386, 36.658899644511173], [-4.368900926114718, 36.677839056946141], [-4.995219285492211, 36.32470815687963], [-5.377159796561457, 35.946850083961458], [-5.866432257500902, 36.02981659600605], [-6.236693894872174, 36.367677110330327], [-6.520190802425402, 36.942913316387312], [-7.45372555177809, 37.097787583966053], [-7.537105475281022, 37.428904323876232], [-7.166507941099863, 37.803894354802217], [-7.029281175148794, 38.075764065089757], [-7.374092169616317, 38.373058580064914], [-7.098036668313126, 39.03007274022378], [-7.498632371439724, 39.629571031241802], [-7.066591559263527, 39.711891587882768], [-7.026413133156593, 40.184524237624238], [-6.864019944679383, 40.330871893874821], [-6.851126674822551, 41.111082668617513], [-6.389087693700914, 41.381815497394641], [-6.668605515967655, 41.883386949219577], [-7.251308966490822, 41.91834605566504], [-7.422512986673794, 41.792074693359822], [-8.01317460776991, 41.790886135417118], [-8.26385698081779, 42.280468654950326], [-8.671945766626719, 42.134689439454952], [-9.034817674180244, 41.880570583659669]]] } }, + { "type": "Feature", "properties": { "admin": "Estonia", "name": "Estonia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[24.312862583114615, 57.793423570376966], [24.428927850042154, 58.383413397853275], [24.061198357853179, 58.257374579493394], [23.426560092876681, 58.612753404364618], [23.339795363058641, 59.187240302153363], [24.604214308376182, 59.465853786855007], [25.864189080516631, 59.611090399811324], [26.949135776484518, 59.445803331125767], [27.981114129353237, 59.47538808861286], [28.131699253051742, 59.300825100330904], [27.420166456824941, 58.724581203844224], [27.716685825315714, 57.791899115624354], [27.288184848751509, 57.474528306703817], [26.46353234223778, 57.476388658266316], [25.602809685984365, 57.847528794986559], [25.164593540149262, 57.970156968815175], [24.312862583114615, 57.793423570376966]]] } }, + { "type": "Feature", "properties": { "admin": "Ethiopia", "name": "Ethiopia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[37.90607, 14.959430000000165], [38.51295, 14.50547], [39.0994, 14.74064], [39.34061, 14.53155], [40.026250000000111, 14.51959], [40.8966, 14.118640000000138], [41.1552, 13.77333], [41.59856, 13.452090000000108], [42.00975, 12.86582], [42.351560000000106, 12.54223000000013], [42.000000000000107, 12.100000000000133], [41.661760000000122, 11.6312], [41.739590000000177, 11.355110000000137], [41.755570000000191, 11.05091], [42.314140000000116, 11.0342], [42.55493000000012, 11.105110000000193], [42.776851841000948, 10.926878566934416], [42.55876, 10.572580000000126], [42.92812, 10.021940000000139], [43.29699, 9.540480000000169], [43.67875, 9.183580000000116], [46.94834, 7.99688], [47.78942, 8.003], [44.9636, 5.001620000000115], [43.66087, 4.95755], [42.769670000000119, 4.252590000000223], [42.12861, 4.234130000000163], [41.855083092644108, 3.918911920483764], [41.171800000000125, 3.91909], [40.768480000000118, 4.257020000000124], [39.854940000000106, 3.83879000000013], [39.559384258765917, 3.422060000000215], [38.89251, 3.50074], [38.67114, 3.61607], [38.436970000000137, 3.58851], [38.120915000000132, 3.598605], [36.85509323800823, 4.447864127672857], [36.159078632855646, 4.447864127672857], [35.817447662353622, 4.776965663462021], [35.817447662353622, 5.338232082790852], [35.298007118233095, 5.506], [34.70702, 6.59422000000012], [34.25032, 6.82607], [34.075100000000184, 7.22595], [33.56829, 7.71334], [32.954180000000228, 7.7849700000001], [33.294800000000116, 8.35458], [33.82550000000014, 8.37916], [33.97498, 8.684560000000145], [33.96162, 9.58358], [34.25745, 10.63009], [34.73115000000012, 10.910170000000106], [34.831630000000125, 11.318960000000116], [35.26049, 12.08286], [35.863630000000164, 12.57828], [36.27022, 13.563330000000118], [36.42951, 14.42211], [37.59377, 14.2131], [37.90607, 14.959430000000165]]] } }, + { "type": "Feature", "properties": { "admin": "Finland", "name": "Finland", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[28.591929559043187, 69.064776923286644], [28.445943637818651, 68.36461294216403], [29.9774263852206, 67.698297024192641], [29.054588657352319, 66.944286200621917], [30.21765, 65.80598], [29.544429559046982, 64.948671576590471], [30.444684686003704, 64.204453436939076], [30.035872430142714, 63.552813625738544], [31.516092156711117, 62.867687486412869], [31.139991082490891, 62.357692776124395], [30.211107212044443, 61.780027777749673], [28.06999759289527, 60.503516547275829], [26.25517296723697, 60.423960679762487], [24.496623976344516, 60.057316392651636], [22.869694858499454, 59.846373196036211], [22.290763787533589, 60.391921291741525], [21.322244093519313, 60.720169989659503], [21.544866163832687, 61.705329494871783], [21.059211053153682, 62.607393296958726], [21.536029493910799, 63.189735012455863], [22.442744174903986, 63.817810370531276], [24.730511508897528, 64.902343655040823], [25.398067661243939, 65.111426500093728], [25.2940430030404, 65.53434642197044], [23.903378533633795, 66.006927395279604], [23.565879754335576, 66.396050930437411], [23.539473097434435, 67.936008612735236], [21.978534783626113, 68.616845608180682], [20.645592889089521, 69.106247260200846], [21.244936150810666, 69.370443020293067], [22.356237827247405, 68.841741441514898], [23.662049594830751, 68.891247463650529], [24.735679152126721, 68.649556789821446], [25.689212680776361, 69.092113755969024], [26.179622023226241, 69.825298977326113], [27.732292107867856, 70.164193020296239], [29.015572950971968, 69.766491197377974], [28.591929559043187, 69.064776923286644]]] } }, + { "type": "Feature", "properties": { "admin": "Fiji", "name": "Fiji", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[178.3736, -17.33992], [178.71806, -17.62846], [178.55271, -18.15059], [177.93266, -18.28799], [177.38146, -18.16432], [177.28504, -17.72465], [177.67087, -17.38114], [178.12557, -17.50481], [178.3736, -17.33992]]], [[[179.364142661964223, -16.801354076946847], [178.725059362997058, -17.012041674368017], [178.596838595117021, -16.63915], [179.096609362997128, -16.43398427754742], [179.413509362997075, -16.379054277547393], [180.000000000000114, -16.067132663642436], [180.000000000000114, -16.555216566639157], [179.364142661964223, -16.801354076946847]]], [[[-179.917369384765237, -16.501783135649358], [-180.0, -16.555216566639157], [-180.0, -16.067132663642436], [-179.793320109048551, -16.020882256741228], [-179.917369384765237, -16.501783135649358]]]] } }, + { "type": "Feature", "properties": { "admin": "Falkland Islands", "name": "Falkland Is.", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-61.2, -51.85], [-60.0, -51.25], [-59.15, -51.5], [-58.55, -51.1], [-57.75, -51.55], [-58.05, -51.9], [-59.4, -52.2], [-59.85, -51.85], [-60.7, -52.3], [-61.2, -51.85]]] } }, + { "type": "Feature", "properties": { "admin": "France", "name": "France", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-52.556424730018378, 2.504705308437053], [-52.939657151894963, 2.124857692875622], [-53.41846513529525, 2.053389187016037], [-53.554839240113481, 2.334896551925964], [-53.778520677288881, 2.376702785650053], [-54.088062506717264, 2.105556545414629], [-54.524754197799737, 2.311848863123785], [-54.271229620975781, 2.738747870286942], [-54.184284023644743, 3.194172268075234], [-54.011503872276812, 3.622569891774857], [-54.3995422023565, 4.212611395683481], [-54.478632981979203, 4.896755682795642], [-53.958044603070917, 5.756548163267808], [-53.618452928264837, 5.646529038918401], [-52.882141282754063, 5.409850979021598], [-51.823342861525916, 4.565768133966144], [-51.657797410678874, 4.156232408053028], [-52.249337531123977, 3.241094468596287], [-52.556424730018378, 2.504705308437053]]], [[[9.560016310269132, 42.152491970379558], [9.229752231491771, 41.380006822264441], [8.77572309737536, 41.583611965494427], [8.544212680707828, 42.256516628583078], [8.746009148807586, 42.628121853193946], [9.390000848028901, 43.009984849614725], [9.560016310269132, 42.152491970379558]]], [[[3.588184441755714, 50.378992418003563], [4.28602298342514, 49.90749664977254], [4.799221632515752, 49.985373033236314], [5.674051954784885, 49.529483547557433], [5.897759230176375, 49.442667141307155], [6.186320428094204, 49.463802802114444], [6.658229607783538, 49.201958319691549], [8.09927859867477, 49.017783515003366], [7.59367638513106, 48.333019110703724], [7.466759067422228, 47.620581976911851], [7.192202182655533, 47.449765529970982], [6.736571079138086, 47.541801255882874], [6.768713820023634, 47.287708238303672], [6.037388950228971, 46.725778713561894], [6.022609490593566, 46.272989813820502], [6.500099724970453, 46.429672756529428], [6.84359297041456, 45.991146552100659], [6.80235517744566, 45.708579820328673], [7.096652459347835, 45.333098863295859], [6.749955275101711, 45.028517971367584], [7.007562290076661, 44.254766750661382], [7.549596388386161, 44.127901109384808], [7.435184767291841, 43.693844916349164], [6.529245232783068, 43.12889232031835], [4.556962517931395, 43.399650987311581], [3.100410597352719, 43.075200507167118], [2.985998976258486, 42.473015041669882], [1.826793247087181, 42.343384711265649], [0.701590610363922, 42.795734361332642], [0.338046909190581, 42.57954600683955], [-1.502770961910471, 43.034014390630482], [-1.901351284177735, 43.422802028978332], [-1.384225226232956, 44.022610378590166], [-1.193797573237361, 46.014917710954862], [-2.225724249673788, 47.064362697938201], [-2.963276129559573, 47.570326646507958], [-4.491554938159481, 47.95495433205641], [-4.592349819344746, 48.68416046812694], [-3.295813971357745, 48.901692409859628], [-1.616510789384932, 48.644421291694577], [-1.933494025063254, 49.776341864615759], [-0.98946895995536, 49.347375800160869], [1.338761020522753, 50.127173163445256], [1.6390010921385, 50.9466063502975], [2.51357303224617, 51.14850617126185], [2.65842207196033, 50.796848049515646], [3.123251580425716, 50.780363267614504], [3.588184441755714, 50.378992418003563]]]] } }, + { "type": "Feature", "properties": { "admin": "Gabon", "name": "Gabon", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[11.093772820691923, -3.978826592630546], [10.066135288135738, -2.969482517105681], [9.405245395554969, -2.144313246269042], [8.797995639693168, -1.111301364754496], [8.830086704146423, -0.779073581550037], [9.048419630579586, -0.459351494960217], [9.291350538783687, 0.268666083167687], [9.492888624721981, 1.010119533691494], [9.83028405115564, 1.067893784993799], [11.285078973036461, 1.057661851400013], [11.276449008843711, 2.261050930180871], [11.751665480199787, 2.326757513839993], [12.359380323952218, 2.19281220133945], [12.951333855855605, 2.321615708826939], [13.07582238124675, 2.267097072759014], [13.003113641012074, 1.830896307783319], [13.282631463278816, 1.31418366129688], [14.026668735417214, 1.395677395021153], [14.276265903386953, 1.196929836426619], [13.843320753645653, 0.038757635901149], [14.316418491277741, -0.552627455247048], [14.425455763413593, -1.333406670744971], [14.299210239324564, -1.998275648612213], [13.992407260807706, -2.470804945489099], [13.109618767965626, -2.428740329603513], [12.575284458067639, -1.948511244315134], [12.495702752338159, -2.391688327650242], [11.820963575903189, -2.514161472181982], [11.478038771214299, -2.765618991714241], [11.855121697648114, -3.42687061932105], [11.093772820691923, -3.978826592630546]]] } }, + { "type": "Feature", "properties": { "admin": "United Kingdom", "name": "United Kingdom", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-5.661948614921896, 54.554603176483838], [-6.197884894220976, 53.867565009163329], [-6.953730231137994, 54.073702297575622], [-7.572167934591078, 54.059956366585979], [-7.366030646178785, 54.595840969452688], [-7.572167934591078, 55.131622219454883], [-6.733847011736144, 55.172860012423783], [-5.661948614921896, 54.554603176483838]]], [[[-3.00500484863528, 58.635000108466322], [-4.073828497728015, 57.55302480735525], [-3.055001796877661, 57.690019029360933], [-1.959280564776918, 57.684799709699512], [-2.219988165689301, 56.870017401753515], [-3.119003058271118, 55.97379303651546], [-2.085009324543023, 55.909998480851264], [-2.005675679673856, 55.804902850350217], [-1.11499101399221, 54.624986477265388], [-0.4304849918542, 54.464376125702145], [0.184981316742039, 53.325014146531018], [0.469976840831777, 52.929999498091959], [1.681530795914739, 52.739520168663987], [1.559987827164377, 52.099998480836], [1.050561557630914, 51.806760565795678], [1.4498653499503, 51.289427802121949], [0.550333693045502, 50.765738837275862], [-0.787517462558639, 50.774988918656206], [-2.489997524414377, 50.500018622431227], [-2.956273972984035, 50.696879991247002], [-3.617448085942327, 50.228355617872708], [-4.542507900399243, 50.341837063185658], [-5.245023159191134, 49.959999904981082], [-5.776566941745299, 50.159677639356815], [-4.309989793301837, 51.210001125689146], [-3.414850633142122, 51.426008612669236], [-3.422719467108322, 51.426848167406078], [-4.984367234710873, 51.593466091510962], [-5.267295701508885, 51.991400458374571], [-4.222346564134852, 52.30135569926135], [-4.770013393564112, 52.840004991255611], [-4.579999152026914, 53.495003770555165], [-3.093830673788658, 53.404547400669671], [-3.092079637047106, 53.404440822963544], [-2.945008510744343, 53.98499970154667], [-3.614700825433033, 54.60093677329256], [-3.63000545898933, 54.615012925833], [-4.844169073903003, 54.790971177786837], [-5.082526617849224, 55.061600653699358], [-4.719112107756643, 55.508472601943467], [-5.047980922862108, 55.783985500707516], [-5.586397670911139, 55.311146145236805], [-5.64499874513018, 56.275014960344791], [-6.149980841486352, 56.785009670633528], [-5.78682471355529, 57.818848375064633], [-5.009998745127574, 58.630013332750039], [-4.211494513353555, 58.550845038479153], [-3.00500484863528, 58.635000108466322]]]] } }, + { "type": "Feature", "properties": { "admin": "Georgia", "name": "Georgia", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[41.55408410011065, 41.535656236327561], [41.703170607272703, 41.962942816732912], [41.453470086438379, 42.645123399417926], [40.875469191253785, 43.013628038091277], [40.321394484220313, 43.128633938156831], [39.955008579270917, 43.434997666999216], [40.07696495947976, 43.553104153002309], [40.922184686045618, 43.38215851498078], [42.394394565608806, 43.220307929042619], [43.756016880067378, 42.74082815202248], [43.931199985536828, 42.554973863284758], [44.537622918481979, 42.71199270280362], [45.470279168485703, 42.502780666669963], [45.776410353382758, 42.09244395605635], [46.404950799348818, 41.860675157227298], [46.145431756379004, 41.722802435872573], [46.637908156120574, 41.181672675128219], [46.501637404166921, 41.064444688474104], [45.962600538930381, 41.123872585609767], [45.217426385281577, 41.411451931314041], [44.972480096218071, 41.248128567055588], [43.582745802592726, 41.09214325618256], [42.619548781104484, 41.583172715819934], [41.55408410011065, 41.535656236327561]]] } }, + { "type": "Feature", "properties": { "admin": "Ghana", "name": "Ghana", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[1.060121697604927, 5.928837388528875], [-0.507637905265938, 5.343472601742675], [-1.063624640294193, 5.000547797053811], [-1.964706590167594, 4.71046214438337], [-2.856125047202397, 4.994475816259508], [-2.810701463217839, 5.389051215024109], [-3.244370083011261, 6.2504715031135], [-2.983584967450326, 7.379704901555511], [-2.56218950032624, 8.219627793811481], [-2.827496303712706, 9.642460842319775], [-2.963896246747111, 10.395334784380081], [-2.94040930827046, 10.962690334512557], [-1.203357713211431, 11.009819240762736], [-0.761575893548183, 10.936929633015053], [-0.438701544588582, 11.09834096927872], [0.023802524423701, 11.018681748900802], [-0.049784715159944, 10.706917832883928], [0.367579990245389, 10.191212876827176], [0.365900506195885, 9.46500397382948], [0.461191847342121, 8.677222601756013], [0.712029249686878, 8.312464504423827], [0.490957472342245, 7.411744289576474], [0.570384148774849, 6.914358628767188], [0.836931186536333, 6.279978745952147], [1.060121697604927, 5.928837388528875]]] } }, + { "type": "Feature", "properties": { "admin": "Guinea", "name": "Guinea", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-8.439298468448696, 7.686042792181736], [-8.722123582382123, 7.711674302598509], [-8.926064622422002, 7.309037380396375], [-9.208786383490844, 7.313920803247952], [-9.403348151069748, 7.526905218938906], [-9.33727983238458, 7.928534450711351], [-9.755342169625832, 8.541055202666923], [-10.016566534861253, 8.42850393313523], [-10.230093553091276, 8.406205552601291], [-10.505477260774667, 8.348896389189603], [-10.494315151399629, 8.715540676300433], [-10.65477047366589, 8.977178452994194], [-10.622395188835037, 9.267910061068276], [-10.839151984083299, 9.688246161330367], [-11.117481248407328, 10.045872911006283], [-11.917277390988655, 10.046983954300556], [-12.150338100625003, 9.858571682164378], [-12.425928514037562, 9.835834051955953], [-12.596719122762206, 9.620188300001969], [-12.711957566773076, 9.342711696810765], [-13.246550258832512, 8.903048610871506], [-13.685153977909788, 9.494743760613458], [-14.074044969122278, 9.886166897008248], [-14.330075852912367, 10.015719712763966], [-14.579698859098254, 10.214467271358513], [-14.693231980843501, 10.65630076745404], [-14.83955379887794, 10.876571560098139], [-15.130311245168167, 11.040411688679525], [-14.685687221728896, 11.527823798056485], [-14.382191534878727, 11.509271958863691], [-14.121406419317776, 11.677117010947693], [-13.900799729863772, 11.678718980348744], [-13.743160773157411, 11.811269029177408], [-13.828271857142122, 12.142644151249041], [-13.718743658899511, 12.247185573775507], [-13.700476040084322, 12.586182969610192], [-13.217818162478235, 12.575873521367964], [-12.499050665730561, 12.332089952031053], [-12.278599005573438, 12.354440008997285], [-12.20356482588563, 12.465647691289401], [-11.658300950557928, 12.386582749882834], [-11.513942836950587, 12.442987575729415], [-11.456168585648269, 12.076834214725336], [-11.297573614944508, 12.077971096235768], [-11.036555955438256, 12.211244615116513], [-10.870829637078211, 12.177887478072106], [-10.593223842806278, 11.923975328005977], [-10.165213792348835, 11.844083563682743], [-9.890992804392011, 12.060478623904968], [-9.567911749703212, 12.194243068892472], [-9.327616339546008, 12.334286200403451], [-9.127473517279581, 12.308060411015331], [-8.905264858424529, 12.088358059126433], [-8.786099005559462, 11.812560939984705], [-8.376304897484911, 11.393645941610627], [-8.581305304386772, 11.136245632364801], [-8.620321010767126, 10.810890814655181], [-8.407310756860026, 10.90925690352276], [-8.282357143578279, 10.792597357623842], [-8.335377163109738, 10.494811916541932], [-8.029943610048617, 10.206534939001711], [-8.22933712404682, 10.129020290563897], [-8.309616461612249, 9.789531968622439], [-8.079113735374348, 9.376223863152033], [-7.832100389019186, 8.575704250518625], [-8.203498907900878, 8.455453192575446], [-8.299048631208562, 8.316443589710302], [-8.221792364932197, 8.123328762235571], [-8.280703497744936, 7.687179673692156], [-8.439298468448696, 7.686042792181736]]] } }, + { "type": "Feature", "properties": { "admin": "Gambia", "name": "Gambia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-16.84152462408127, 13.151393947802557], [-16.713728807023468, 13.594958604379853], [-15.624596320039936, 13.623587347869556], [-15.398770310924457, 13.860368760630916], [-15.081735398813816, 13.876491807505982], [-14.687030808968483, 13.63035696049978], [-14.376713833055785, 13.625680243377371], [-14.046992356817478, 13.794067898000446], [-13.844963344772404, 13.505041612191999], [-14.277701788784553, 13.28058502853224], [-14.712197231494626, 13.298206691943774], [-15.141163295949463, 13.509511623585235], [-15.511812506562931, 13.278569647672864], [-15.691000535534991, 13.270353094938455], [-15.931295945692208, 13.130284125211331], [-16.84152462408127, 13.151393947802557]]] } }, + { "type": "Feature", "properties": { "admin": "Guinea Bissau", "name": "Guinea-Bissau", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-15.130311245168167, 11.040411688679525], [-15.664180467175523, 11.458474025920792], [-16.085214199273562, 11.524594021038236], [-16.314786749730199, 11.806514797406548], [-16.308947312881227, 11.958701890506116], [-16.613838263403277, 12.170911159712698], [-16.67745195155457, 12.38485158940105], [-16.147716844130581, 12.547761542201185], [-15.816574266004251, 12.515567124883345], [-15.548476935274005, 12.628170070847343], [-13.700476040084322, 12.586182969610192], [-13.718743658899511, 12.247185573775507], [-13.828271857142122, 12.142644151249041], [-13.743160773157411, 11.811269029177408], [-13.900799729863772, 11.678718980348744], [-14.121406419317776, 11.677117010947693], [-14.382191534878727, 11.509271958863691], [-14.685687221728896, 11.527823798056485], [-15.130311245168167, 11.040411688679525]]] } }, + { "type": "Feature", "properties": { "admin": "Equatorial Guinea", "name": "Eq. Guinea", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[9.492888624721981, 1.010119533691494], [9.305613234096255, 1.160911363119183], [9.649158155972627, 2.283866075037735], [11.276449008843711, 2.261050930180871], [11.285078973036461, 1.057661851400013], [9.83028405115564, 1.067893784993799], [9.492888624721981, 1.010119533691494]]] } }, + { "type": "Feature", "properties": { "admin": "Greece", "name": "Greece", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[23.699980096133, 35.705004380835526], [24.246665073348673, 35.368022365860149], [25.025015496528873, 35.424995632461979], [25.769207797964182, 35.354018052709073], [25.745023227651579, 35.179997666966209], [26.290002882601719, 35.299990342747911], [26.164997592887651, 35.004995429009789], [24.724982130642299, 34.919987697889603], [24.735007358506941, 35.084990546197581], [23.514978468528106, 35.27999156345097], [23.699980096133, 35.705004380835526]]], [[[26.604195590936282, 41.562114569661098], [26.294602085075777, 40.936261298174244], [26.056942172965499, 40.824123440100827], [25.44767703624418, 40.852545477861455], [24.925848422960932, 40.947061672523226], [23.714811232200809, 40.687129218095116], [24.407998894964063, 40.124992987624083], [23.89996788910258, 39.962005520175573], [23.342999301860797, 39.960997829745786], [22.813987664488959, 40.476005153966547], [22.626298862404777, 40.256561184239175], [22.849747755634805, 39.659310818025759], [23.350027296652595, 39.190011298167256], [22.97309939951554, 38.97090322524965], [23.53001631032495, 38.51000112563846], [24.025024855248937, 38.219992987616443], [24.040011020613601, 37.655014553369419], [23.115002882589145, 37.920011298162215], [23.409971958111065, 37.409990749657389], [22.77497195810863, 37.305010077456551], [23.154225294698612, 36.422505804992042], [22.4900281104511, 36.410000108377446], [21.670026482843692, 36.84498647719419], [21.295010613701574, 37.644989325504689], [21.120034213961329, 38.31032339126272], [20.730032179454579, 38.769985256498778], [20.217712029712853, 39.340234686839629], [20.150015903410516, 39.624997666984022], [20.615000441172779, 40.110006822259422], [20.67499677906363, 40.434999904943048], [20.999989861747274, 40.580003973953964], [21.020040317476422, 40.842726955725873], [21.674160597426969, 40.931274522457976], [22.055377638444266, 41.149865831052686], [22.597308383889008, 41.130487168943198], [22.76177, 41.3048], [22.952377150166562, 41.337993882811212], [23.692073601992455, 41.309080918943849], [24.492644891058031, 41.583896185872035], [25.19720136892553, 41.234485988930651], [26.106138136507177, 41.328898830727823], [26.11704186372091, 41.826904608724725], [26.604195590936282, 41.562114569661098]]]] } }, + { "type": "Feature", "properties": { "admin": "Greenland", "name": "Greenland", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-46.76379, 82.62796], [-43.40644, 83.22516], [-39.89753, 83.18018], [-38.62214, 83.54905], [-35.08787, 83.64513], [-27.10046, 83.51966], [-20.84539, 82.72669], [-22.69182, 82.34165], [-26.51753, 82.29765], [-31.9, 82.2], [-31.39646, 82.02154], [-27.85666, 82.13178], [-24.84448, 81.78697], [-22.90328, 82.09317], [-22.07175, 81.73449], [-23.16961, 81.15271], [-20.62363, 81.52462], [-15.76818, 81.91245], [-12.77018, 81.71885], [-12.20855, 81.29154], [-16.28533, 80.58004], [-16.85, 80.35], [-20.04624, 80.17708], [-17.73035, 80.12912], [-18.9, 79.4], [-19.70499, 78.75128], [-19.67353, 77.63859], [-18.47285, 76.98565], [-20.03503, 76.94434], [-21.67944, 76.62795], [-19.83407, 76.09808], [-19.59896, 75.24838], [-20.66818, 75.15585], [-19.37281, 74.29561], [-21.59422, 74.22382], [-20.43454, 73.81713], [-20.76234, 73.46436], [-22.17221, 73.30955], [-23.56593, 73.30663], [-22.31311, 72.62928], [-22.29954, 72.18409], [-24.27834, 72.59788], [-24.79296, 72.3302], [-23.44296, 72.08016], [-22.13281, 71.46898], [-21.75356, 70.66369], [-23.53603, 70.471], [-24.30702, 70.85649], [-25.54341, 71.43094], [-25.20135, 70.75226], [-26.36276, 70.22646], [-23.72742, 70.18401], [-22.34902, 70.12946], [-25.02927, 69.2588], [-27.74737, 68.47046], [-30.67371, 68.12503], [-31.77665, 68.12078], [-32.81105, 67.73547], [-34.20196, 66.67974], [-36.35284, 65.9789], [-37.04378, 65.93768], [-38.37505, 65.69213], [-39.81222, 65.45848], [-40.66899, 64.83997], [-40.68281, 64.13902], [-41.1887, 63.48246], [-42.81938, 62.68233], [-42.41666, 61.90093], [-42.86619, 61.07404], [-43.3784, 60.09772], [-44.7875, 60.03676], [-46.26364, 60.85328], [-48.26294, 60.85843], [-49.23308, 61.40681], [-49.90039, 62.38336], [-51.63325, 63.62691], [-52.14014, 64.27842], [-52.27659, 65.1767], [-53.66166, 66.09957], [-53.30161, 66.8365], [-53.96911, 67.18899], [-52.9804, 68.35759], [-51.47536, 68.72958], [-51.08041, 69.14781], [-50.87122, 69.9291], [-52.013585, 69.574925], [-52.55792, 69.42616], [-53.45629, 69.283625], [-54.68336, 69.61003], [-54.75001, 70.28932], [-54.35884, 70.821315], [-53.431315, 70.835755], [-51.39014, 70.56978], [-53.10937, 71.20485], [-54.00422, 71.54719], [-55.0, 71.406536967272558], [-55.83468, 71.65444], [-54.71819, 72.58625], [-55.32634, 72.95861], [-56.12003, 73.64977], [-57.32363, 74.71026], [-58.59679, 75.09861], [-58.58516, 75.51727], [-61.26861, 76.10238], [-63.39165, 76.1752], [-66.06427, 76.13486], [-68.50438, 76.06141], [-69.66485, 76.37975], [-71.40257, 77.00857], [-68.77671, 77.32312], [-66.76397, 77.37595], [-71.04293, 77.63595], [-73.297, 78.04419], [-73.15938, 78.43271], [-69.37345, 78.91388], [-65.7107, 79.39436], [-65.3239, 79.75814], [-68.02298, 80.11721], [-67.15129, 80.51582], [-63.68925, 81.21396], [-62.23444, 81.3211], [-62.65116, 81.77042], [-60.28249, 82.03363], [-57.20744, 82.19074], [-54.13442, 82.19962], [-53.04328, 81.88833], [-50.39061, 82.43883], [-48.00386, 82.06481], [-46.59984, 81.985945], [-44.523, 81.6607], [-46.9007, 82.19979], [-46.76379, 82.62796]]] } }, + { "type": "Feature", "properties": { "admin": "Guatemala", "name": "Guatemala", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-90.095554572290951, 13.73533763270073], [-90.608624030300817, 13.909771429901948], [-91.232410244496037, 13.927832342987953], [-91.689746670279106, 14.126218166556452], [-92.227750006869812, 14.538828640190925], [-92.203229539747298, 14.830102850804066], [-92.087215949252041, 15.064584662328436], [-92.229248623406249, 15.251446641495857], [-91.747960171255912, 16.066564846251719], [-90.464472622422647, 16.069562079324651], [-90.438866950222021, 16.410109768128091], [-90.600846727240906, 16.470777899638758], [-90.711821865587694, 16.687483018454724], [-91.081670091500641, 16.918476670799404], [-91.453921271515128, 17.252177232324168], [-91.002269253284197, 17.254657701074176], [-91.001519945015943, 17.817594916245707], [-90.067933519230948, 17.819326076727474], [-89.143080410503302, 17.808318996649316], [-89.15080603713092, 17.015576687075832], [-89.229121670269265, 15.886937567605166], [-88.930612759135244, 15.887273464415072], [-88.604586147805833, 15.706380113177358], [-88.518364020526846, 15.855389105690971], [-88.22502275262201, 15.727722479713901], [-88.680679694355618, 15.346247056535301], [-89.15481096063354, 15.066419175674806], [-89.225220099631244, 14.874286200413618], [-89.145535041037149, 14.67801911056908], [-89.353325975282772, 14.424132798719112], [-89.587342698916544, 14.362586167859485], [-89.5342193265205, 14.244815578666302], [-89.7219339668207, 14.134228013561694], [-90.064677903996568, 13.881969509328924], [-90.095554572290951, 13.73533763270073]]] } }, + { "type": "Feature", "properties": { "admin": "Guyana", "name": "Guyana", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-59.758284878159181, 8.367034816924045], [-59.10168412945864, 7.99920197187049], [-58.482962205628041, 7.347691351750696], [-58.454876064677414, 6.832787380394463], [-58.078103196837361, 6.809093736188641], [-57.542218593970631, 6.321268215353355], [-57.147436489476874, 5.973149929219161], [-57.307245856339492, 5.073566595882225], [-57.914288906472123, 4.812626451024413], [-57.860209520078691, 4.576801052260449], [-58.044694383360664, 4.060863552258382], [-57.601568976457848, 3.334654649260684], [-57.281433478409703, 3.333491929534119], [-57.150097825739898, 2.768926906745406], [-56.53938574891454, 1.89952260986692], [-56.782704230360814, 1.863710842288653], [-57.33582292339689, 1.948537705895759], [-57.660971035377358, 1.682584947105638], [-58.113449876525003, 1.507195135907025], [-58.429477098205957, 1.46394196207872], [-58.540012986878288, 1.26808828369252], [-59.030861579002639, 1.317697658692722], [-59.646043667221242, 1.786893825686789], [-59.718545701726732, 2.249630438644359], [-59.974524909084543, 2.755232652188055], [-59.815413174057852, 3.606498521332085], [-59.538039923731219, 3.958802598481937], [-59.767405768458701, 4.423502915866606], [-60.111002366767373, 4.574966538914082], [-59.980958624904865, 5.014061184098138], [-60.213683437731319, 5.2444863956876], [-60.733574184803707, 5.2002772078619], [-61.410302903881941, 5.959068101419616], [-61.139415045807937, 6.234296779806142], [-61.159336310456467, 6.696077378766317], [-60.543999192940966, 6.856584377464881], [-60.295668097562377, 7.043911444522918], [-60.637972785063752, 7.414999904810853], [-60.550587938058186, 7.779602972846178], [-59.758284878159181, 8.367034816924045]]] } }, + { "type": "Feature", "properties": { "admin": "Honduras", "name": "Honduras", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-87.316654425795463, 12.984685777229], [-87.48940873894712, 13.29753489832393], [-87.793111131526501, 13.384480495655165], [-87.723502977229288, 13.785050360565602], [-87.859515347021599, 13.893312486217097], [-88.065342576840109, 13.964625962779788], [-88.503997972349609, 13.845485948130939], [-88.541230841815931, 13.98015473068352], [-88.843072882832743, 14.140506700085208], [-89.058511929057644, 14.340029405164213], [-89.353325975282786, 14.424132798719084], [-89.145535041037164, 14.678019110569149], [-89.22522009963123, 14.874286200413675], [-89.154810960633526, 15.066419175674863], [-88.680679694355575, 15.346247056535386], [-88.225022752621925, 15.727722479714027], [-88.121153123715359, 15.688655096901355], [-87.901812506852394, 15.864458319558194], [-87.615680101252309, 15.878798529519198], [-87.522920905288444, 15.797278957578779], [-87.367762417332116, 15.846940009011286], [-86.903191291028165, 15.756712958229565], [-86.440945604177372, 15.782835394753189], [-86.119233974944322, 15.893448798073958], [-86.00195431185783, 16.005405788634388], [-85.68331743034625, 15.953651841693949], [-85.444003872402547, 15.885749009662444], [-85.182443610357183, 15.909158433490628], [-84.98372188997881, 15.995923163308698], [-84.526979743167118, 15.857223619037423], [-84.36825558138257, 15.835157782448729], [-84.063054572266807, 15.648244126849132], [-83.773976610026111, 15.42407176356687], [-83.410381232420363, 15.27090281825377], [-83.147219000974104, 14.995829169164207], [-83.489988776366005, 15.01626719813566], [-83.628584967772866, 14.880073960830368], [-83.975721401693576, 14.749435939996483], [-84.228341640952394, 14.748764146376626], [-84.449335903648588, 14.62161428472251], [-84.64958207877963, 14.666805324761865], [-84.820036790694289, 14.819586696832628], [-84.924500698572302, 14.790492865452332], [-85.052787441736868, 14.551541042534719], [-85.148750576502877, 14.560196844943615], [-85.165364549484806, 14.354369615125048], [-85.514413011400265, 14.079011745657905], [-85.698665330736944, 13.960078436737998], [-85.801294725268505, 13.8360549992376], [-86.096263800790595, 14.03818736414723], [-86.312142096689826, 13.771356106008223], [-86.520708177419891, 13.778487453664464], [-86.755086636079596, 13.754845485890936], [-86.733821784191463, 13.263092556201398], [-86.880557013684353, 13.254204209847213], [-87.005769009127434, 13.025794379117254], [-87.316654425795463, 12.984685777229]]] } }, + { "type": "Feature", "properties": { "admin": "Croatia", "name": "Croatia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[18.829838087650039, 45.908877671891837], [19.072768995854172, 45.521511135432078], [19.390475701584588, 45.236515611342369], [19.005486281010118, 44.860233669609144], [18.553214145591646, 45.08158966733145], [17.861783481526398, 45.067740383477137], [17.00214603035101, 45.233776760430935], [16.534939406000202, 45.211607570977705], [16.318156772535868, 45.004126695325901], [15.959367303133373, 45.233776760430935], [15.750026075918978, 44.81871165626255], [16.239660271884528, 44.351143296885695], [16.456442905348862, 44.041239732431265], [16.916156447017325, 43.667722479825663], [17.297373488034449, 43.446340643887353], [17.674921502358981, 43.028562527023603], [18.56, 42.65], [18.450016310304814, 42.47999136002931], [17.509970330483323, 42.84999461523914], [16.930005730871638, 43.209998480800373], [16.015384555737679, 43.507215481127204], [15.174453973052094, 44.243191229827907], [15.376250441151793, 44.317915350922064], [14.920309279040504, 44.73848399512945], [14.901602410550874, 45.076060289076104], [14.258747592839992, 45.233776760430935], [13.952254672917032, 44.802123521496853], [13.65697553880119, 45.136935126315947], [13.679403110415816, 45.484149074884996], [13.715059848697248, 45.500323798192419], [14.411968214585496, 45.466165676447403], [14.595109490627916, 45.63494090431282], [14.935243767972961, 45.471695054702757], [15.327674594797424, 45.452316392593325], [15.323953891672428, 45.731782538427687], [15.671529575267638, 45.8341535507979], [15.768732944408608, 46.23810822202352], [16.564808383864939, 46.503750922219794], [16.882515089595412, 46.380631822284428], [17.630066359129554, 45.951769110694087], [18.456062452882858, 45.759481106136143], [18.829838087650039, 45.908877671891837]]] } }, + { "type": "Feature", "properties": { "admin": "Haiti", "name": "Haiti", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-73.189790615517595, 19.915683905511909], [-72.579672817663607, 19.871500555902351], [-71.71236141629295, 19.714455878167353], [-71.624873216422813, 19.169837958243303], [-71.701302659782485, 18.785416978424049], [-71.945112067335543, 18.616900132720257], [-71.687737596305865, 18.316660061104468], [-71.708304816358037, 18.044997056546091], [-72.372476162389333, 18.214960842354053], [-72.844411180294856, 18.145611070218362], [-73.454554816365018, 18.217906398994696], [-73.922433234335642, 18.030992743395], [-74.458033616824764, 18.342549953682703], [-74.369925299767118, 18.664907538319408], [-73.449542202432696, 18.526052964751141], [-72.694937099890623, 18.445799465401858], [-72.334881557896992, 18.66842153571525], [-72.791649542924873, 19.101625067618027], [-72.784104783810264, 19.483591416903405], [-73.41502234566174, 19.639550889560276], [-73.189790615517595, 19.915683905511909]]] } }, + { "type": "Feature", "properties": { "admin": "Hungary", "name": "Hungary", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[16.202298211337361, 46.852385972676949], [16.534267612380372, 47.496170966169103], [16.340584344150411, 47.712901923201215], [16.903754103267257, 47.714865627628321], [16.979666782304033, 48.123497015976298], [17.488472934649813, 47.867466132186209], [17.857132602620023, 47.758428860050365], [18.696512892336923, 47.88095368101439], [18.777024773847668, 48.081768296900627], [19.174364861739885, 48.111378892603859], [19.66136355965849, 48.266614895208647], [19.769470656013109, 48.2026911484636], [20.239054396249344, 48.327567247096916], [20.473562045989862, 48.562850043321809], [20.801293979584919, 48.62385407164237], [21.872236362401729, 48.319970811550007], [22.085608351334848, 48.422264309271782], [22.640819939878746, 48.150239569687351], [22.710531447040488, 47.882193915389394], [22.09976769378283, 47.672439276716695], [21.626514926853869, 46.994237779318148], [21.021952345471245, 46.316087958351886], [20.220192498462833, 46.127468980486547], [19.596044549241579, 46.171729844744533], [18.829838087649957, 45.908877671891915], [18.456062452882858, 45.759481106136121], [17.630066359129554, 45.95176911069418], [16.882515089595298, 46.380631822284428], [16.564808383864854, 46.503750922219822], [16.370504998447412, 46.841327216166498], [16.202298211337361, 46.852385972676949]]] } }, + { "type": "Feature", "properties": { "admin": "Indonesia", "name": "Indonesia", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[120.715608758630438, -10.239581394087862], [120.295014276206871, -10.258649997603525], [118.967808465654684, -9.55796925215803], [119.900309686361609, -9.361340427287514], [120.425755649905398, -9.665921319215796], [120.775501743656719, -9.969675388227456], [120.715608758630438, -10.239581394087862]]], [[[124.435950148619384, -10.14000090906144], [123.579981724136701, -10.359987481327961], [123.459989048354998, -10.239994805546171], [123.55000939340745, -9.900015557497978], [123.980008986508096, -9.290026950724693], [124.96868248911619, -8.892790215697046], [125.070019972840612, -9.089987481322835], [125.088520135601073, -9.393173109579321], [124.435950148619384, -10.14000090906144]]], [[[117.900018345207741, -8.095681247594923], [118.260616489740471, -8.362383314653327], [118.87845991422212, -8.280682875199828], [119.126506789223086, -8.705824883665072], [117.97040164598927, -8.906639499551257], [117.277730747549015, -9.040894870645557], [116.74014082241662, -9.032936700072637], [117.083737420725313, -8.457157891476539], [117.632024367342126, -8.44930307376819], [117.900018345207741, -8.095681247594923]]], [[[122.903537225436082, -8.094234307490735], [122.756982863456287, -8.649807631060638], [121.2544905945701, -8.933666273639941], [119.924390903809567, -8.810417982623873], [119.920928582846102, -8.44485890059107], [120.715091994307542, -8.236964613480863], [121.341668735846554, -8.53673959720602], [122.007364536630405, -8.46062021244016], [122.903537225436082, -8.094234307490735]]], [[[108.623478631628927, -6.777673841990675], [110.539227329553285, -6.877357679881682], [110.759575636845909, -6.465186455921751], [112.614811232556349, -6.946035658397589], [112.978768345188087, -7.594213148634578], [114.478935174621142, -7.776527601760277], [115.705526971501058, -8.370806573116864], [114.564511346496488, -8.75181690840483], [113.464733514460875, -8.348947442257424], [112.559672479301028, -8.376180922075163], [111.522061395312448, -8.302128594600957], [110.586149530074294, -8.122604668819021], [109.427667270955183, -7.740664157749761], [108.693655226681301, -7.641600437046219], [108.277763299596302, -7.766657403192579], [106.454102004016136, -7.354899590690947], [106.280624220812285, -6.924899997590201], [105.365486281355516, -6.851416110871169], [106.051645949327053, -5.895918877794499], [107.265008579540165, -5.954985039904058], [108.072091099074683, -6.345762220895237], [108.486846144649235, -6.421984958525768], [108.623478631628927, -6.777673841990675]]], [[[134.724624465066654, -6.214400730009286], [134.210133905168902, -6.895237725454704], [134.112775506730998, -6.142467136259014], [134.290335728085779, -5.783057549669038], [134.499625278867882, -5.445042006047898], [134.727001580952106, -5.737582289252158], [134.724624465066654, -6.214400730009286]]], [[[127.249215122588893, -3.459065036638889], [126.874922723498855, -3.790982761249579], [126.183802118027302, -3.607376397316556], [125.989033644719257, -3.177273451351325], [127.00065148326496, -3.12931772218441], [127.249215122588893, -3.459065036638889]]], [[[130.471344028851775, -3.09376433676762], [130.834836053592767, -3.858472181822761], [129.990546502808115, -3.446300957862817], [129.155248651242403, -3.362636813982248], [128.590683628453633, -3.428679294451256], [127.898891229362334, -3.393435967628192], [128.135879347852779, -2.843650404474914], [129.370997756060888, -2.802154229344551], [130.471344028851775, -3.09376433676762]]], [[[134.143367954647772, -1.151867364103594], [134.422627394753022, -2.769184665542383], [135.457602980694674, -3.367752780779113], [136.293314243718754, -2.30704233155609], [137.4407377463275, -1.703513278819372], [138.329727411044757, -1.70268645590265], [139.18492068904294, -2.051295668143637], [139.926684198160387, -2.409051608900284], [141.000210402591847, -2.600151055515624], [141.017056919519007, -5.85902190513802], [141.033851760013874, -9.117892754760417], [140.143415155192542, -8.297167657100955], [139.127766554928087, -8.096042982620942], [138.881476678624949, -8.380935153846094], [137.614473911692812, -8.41168263105976], [138.039099155835174, -7.597882175327354], [138.668621454014783, -7.320224704623072], [138.407913853102343, -6.232849216337483], [137.927839797110835, -5.393365573755998], [135.989250116113453, -4.546543877789047], [135.164597609599667, -4.462931410340771], [133.662880487197867, -3.538853448097526], [133.367704705946778, -4.024818617370314], [132.983955519747326, -4.112978610860281], [132.75694095268895, -3.746282647317129], [132.753788690319197, -3.311787204607071], [131.989804315316178, -2.820551039240455], [133.066844517143466, -2.460417982598443], [133.780030959203486, -2.479848321140209], [133.69621178602614, -2.214541517753687], [132.232373488494204, -2.212526136894325], [131.836221958544684, -1.617161960459597], [130.942839797082797, -1.432522067880796], [130.519558140180038, -0.937720228686075], [131.867537876513609, -0.695461114101818], [132.380116408416768, -0.369537855636977], [133.985548130428384, -0.780210463060442], [134.143367954647772, -1.151867364103594]]], [[[125.240500522971573, 1.419836127117605], [124.43703535369734, 0.427881171058971], [123.685504998876695, 0.235593166500877], [122.723083123872854, 0.431136786293337], [121.056724888189081, 0.381217352699451], [120.18308312386273, 0.23724681233422], [120.040869582195455, -0.519657891444851], [120.935905389490699, -1.408905938323372], [121.475820754076167, -0.955962009285116], [123.34056481332847, -0.615672702643081], [123.258399285984481, -1.076213067228337], [122.822715285331597, -0.930950616055881], [122.388529901215364, -1.516858005381124], [121.508273553555455, -1.904482924002422], [122.454572381684272, -3.186058444840881], [122.271896193532541, -3.529500013852696], [123.170962762546537, -4.683693129091707], [123.162332798353759, -5.34060393638596], [122.628515252778683, -5.634591159694494], [122.236394484548057, -5.282933037948281], [122.71956912647704, -4.46417164471579], [121.738233677254357, -4.851331475446499], [121.48946333220124, -4.574552504091215], [121.619171177253861, -4.188477878438674], [120.898181593917684, -3.602105401222828], [120.972388950688767, -2.627642917494909], [120.305452915529884, -2.931603692235725], [120.39004723519173, -4.097579034037223], [120.430716587405371, -5.528241062037778], [119.796543410319487, -5.67340016034565], [119.36690555224493, -5.379878024927804], [119.653606398600104, -4.459417412944958], [119.498835483885969, -3.49441171632651], [119.078344354326987, -3.487021986508764], [118.767768996252869, -2.801999200047688], [119.180973748858662, -2.147103773612798], [119.323393996255049, -1.35314706788047], [119.825998976725828, 0.154254462073496], [120.035701938966341, 0.566477362465804], [120.885779250167687, 1.309222723796835], [121.666816847826965, 1.013943589681076], [122.927566766451818, 0.875192368977465], [124.077522414242836, 0.917101955566139], [125.065989211121803, 1.643259182131558], [125.240500522971573, 1.419836127117605]]], [[[128.688248732620707, 1.132385972494106], [128.635952183141342, 0.258485826006179], [128.120169712436166, 0.356412665199286], [127.968034295768845, -0.252077325037533], [128.379998813999691, -0.780003757331286], [128.100015903842291, -0.899996433112974], [127.69647464407501, -0.266598402511505], [127.399490187693743, 1.011721503092573], [127.600511509309044, 1.81069082275718], [127.932377557487484, 2.174596258956555], [128.004156121940809, 1.628531398928331], [128.594559360875451, 1.540810655112864], [128.688248732620707, 1.132385972494106]]], [[[117.875627069166001, 1.827640692548911], [118.996747267738158, 0.902219143066048], [117.811858351717788, 0.784241848143722], [117.478338657706047, 0.102474676917026], [117.521643507966587, -0.803723239753211], [116.560048455879496, -1.487660821136231], [116.533796828275158, -2.483517347832901], [116.148083937648607, -4.012726332214014], [116.000857782049067, -3.657037448749008], [114.864803094544513, -4.106984144714416], [114.468651564595064, -3.49570362713382], [113.755671828264099, -3.439169610206519], [113.256994256647545, -3.118775729996854], [112.068126255340644, -3.478392022316071], [111.703290643359992, -2.994442233902631], [111.04824018762821, -3.049425957861188], [110.223846063275971, -2.934032484553483], [110.070935500124335, -1.592874037282414], [109.571947869914041, -1.314906507984489], [109.091873813922518, -0.459506524257051], [108.952657505328162, 0.415375474444346], [109.069136183714036, 1.341933905437642], [109.663260125773718, 2.006466986494984], [109.830226678508836, 1.338135687664191], [110.514060907027101, 0.773131415200993], [111.159137811326559, 0.976478176269509], [111.797548455860408, 0.904441229654651], [112.380251906383648, 1.410120957846757], [112.859809198052176, 1.497790025229946], [113.805849644019531, 1.217548732911041], [114.621355422017473, 1.430688177898886], [115.134037306785231, 2.821481838386219], [115.51907840379198, 3.169238389494395], [115.86551720587677, 4.306559149590156], [117.01521447150634, 4.306094061699468], [117.882034946770162, 4.137551377779487], [117.313232456533513, 3.234428208830578], [118.048329705885351, 2.287690131027361], [117.875627069166001, 1.827640692548911]]], [[[105.817655063909356, -5.852355645372411], [104.710384149191498, -5.873284600450644], [103.868213332130736, -5.037314955264974], [102.584260695406897, -4.220258884298203], [102.156173130300999, -3.614146009946765], [101.399113397225051, -2.799777113459171], [100.902502882900137, -2.05026213949786], [100.141980828860596, -0.650347588710957], [99.26373986206022, 0.183141587724663], [98.970011020913319, 1.042882391764536], [98.601351352943084, 1.823506577965616], [97.699597609449881, 2.453183905442116], [97.17694217324987, 3.30879059489861], [96.424016554757316, 3.86885976807791], [95.380876092513475, 4.970782172053673], [95.293026157617305, 5.479820868344816], [95.936862827541745, 5.439513251157108], [97.484882033277088, 5.24632090903401], [98.369169142655679, 4.268370266126366], [99.142558628335792, 3.590349636240915], [99.693997837322399, 3.174328518075156], [100.641433546961665, 2.099381211755798], [101.658012323007313, 2.083697414555189], [102.498271112073212, 1.398700466310217], [103.076840448013002, 0.561361395668854], [103.838396030698348, 0.104541734208666], [103.437645298274973, -0.711945896002845], [104.010788608824001, -1.059211521004229], [104.369991489684878, -1.084843031421016], [104.539490187602155, -1.782371514496716], [104.887892694113987, -2.340425306816655], [105.622111444116982, -2.42884368246807], [106.10859337771268, -3.06177662517895], [105.857445916774111, -4.305524997579723], [105.817655063909356, -5.852355645372411]]]] } }, + { "type": "Feature", "properties": { "admin": "India", "name": "India", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[77.837450799474553, 35.494009507787759], [78.912268914713209, 34.321936346975782], [78.811086460285722, 33.506198025032404], [79.208891636068572, 32.994394639613709], [79.176128777995501, 32.483779812137705], [78.458446486325997, 32.61816437431272], [78.738894484374001, 31.515906073527056], [79.721366815107089, 30.882714748654724], [81.11125613802929, 30.183480943313398], [80.476721225917373, 29.729865220655334], [80.088424513676259, 28.794470119740136], [81.057202589851997, 28.416095282499036], [81.999987420584958, 27.925479234319987], [83.304248895199535, 27.364505723575554], [84.675017938173767, 27.234901231387528], [85.25177859898335, 26.726198431906337], [86.024392938179147, 26.630984605408567], [87.22747195836628, 26.39789805755607], [88.060237664749806, 26.414615383402484], [88.174804315140904, 26.810405178325944], [88.043132765661198, 27.445818589786818], [88.120440708369841, 27.876541652939586], [88.730325962278528, 28.086864732367509], [88.814248488320544, 27.299315904239361], [88.835642531289366, 27.098966376243755], [89.744527622438838, 26.71940298105995], [90.37327477413406, 26.875724188742872], [91.217512648486405, 26.808648179628019], [92.033483514375078, 26.838310451763554], [92.10371178585973, 27.4526140406332], [91.69665652869665, 27.771741848251661], [92.503118931043616, 27.896876329046442], [93.413347609432662, 28.640629380807219], [94.565990431702929, 29.277438055939978], [95.404802280664612, 29.031716620392125], [96.117678664131006, 29.452802028922459], [96.586590610747479, 28.830979519154337], [96.248833449287758, 28.411030992134435], [97.327113885490007, 28.261582749946331], [97.402561476636123, 27.88253611908544], [97.051988559968066, 27.699058946233144], [97.133999058015277, 27.08377350514996], [96.419365675850941, 27.264589341739221], [95.124767694074933, 26.573572089132295], [95.155153436262566, 26.001307277932078], [94.603249139385355, 25.162495428970399], [94.552657912171611, 24.675238348890328], [94.106741977925054, 23.850740871673477], [93.325187615942767, 24.078556423432197], [93.286326938859247, 23.043658352138998], [93.060294224014598, 22.703110663335565], [93.166127557348361, 22.278459580977099], [92.672720981825549, 22.041238918541247], [92.146034783906799, 23.62749868417259], [91.869927606171302, 23.62434642180278], [91.706475050832083, 22.985263983649183], [91.158963250699713, 23.503526923104381], [91.467729933643668, 24.072639471934789], [91.915092807994398, 24.130413723237108], [92.376201613334786, 24.976692816664961], [91.799595981822065, 25.14743174895731], [90.872210727912105, 25.13260061288954], [89.920692580121838, 25.269749864192171], [89.832480910199592, 25.965082098895476], [89.355094028687276, 26.014407253518065], [88.56304935094974, 26.446525580342716], [88.209789259802477, 25.768065700782707], [88.931553989623069, 25.238692328384769], [88.30637251175601, 24.866079413344199], [88.084422235062405, 24.501657212821918], [88.699940220090895, 24.233714911388557], [88.529769728553759, 23.631141872649163], [88.876311883503064, 22.879146429937826], [89.031961297566198, 22.055708319582973], [88.888765903685396, 21.690588487224741], [88.208497348995209, 21.703171698487804], [86.975704380240259, 21.495561631755201], [87.033168572948853, 20.743307806882406], [86.499351027373777, 20.151638495356604], [85.060265740909671, 19.478578802971096], [83.941005893899998, 18.302009792549722], [83.189217156917834, 17.671221421778977], [82.192792189465905, 17.016636053937813], [82.191241896497175, 16.556664130107844], [81.692719354177456, 16.3102192245079], [80.791999139330116, 15.951972357644488], [80.324895867843864, 15.899184882058346], [80.025069207686428, 15.136414903214144], [80.23327355339039, 13.835770778859978], [80.286293572921849, 13.006260687710832], [79.862546828128487, 12.056215318240886], [79.85799930208681, 10.357275091997108], [79.340511509115984, 10.308854274939618], [78.885345493489169, 9.54613597252772], [79.189719679688281, 9.216543687370146], [78.27794070833049, 8.933046779816932], [77.94116539908434, 8.25295909263974], [77.539897902337927, 7.965534776232331], [76.592978957021657, 8.899276231314188], [76.130061476551063, 10.299630031775518], [75.746467319648488, 11.308250637248303], [75.396101108709573, 11.781245022015822], [74.864815708316812, 12.741935736537895], [74.616717156883524, 13.992582912649677], [74.443859490867197, 14.617221787977693], [73.534199253233368, 15.990652167214957], [73.119909295549419, 17.928570054592495], [72.820909458308634, 19.208233547436162], [72.824475132136783, 20.41950328214153], [72.630533481745388, 21.356009426351001], [71.175273471973938, 20.757441311114228], [70.470458611945091, 20.877330634031381], [69.164130080038817, 22.089298000572697], [69.644927606082391, 22.450774644454334], [69.349596795534325, 22.843179633062686], [68.176645135373377, 23.691965033456704], [68.842599318318761, 24.359133612560932], [71.0432401874682, 24.356523952730193], [70.844699334602822, 25.215102037043511], [70.282873162725579, 25.722228705339823], [70.168926629522005, 26.491871649678835], [69.514392938113119, 26.940965684511365], [70.61649620960192, 27.989196275335861], [71.777665643200308, 27.913180243434521], [72.823751662084689, 28.961591701772047], [73.450638462217412, 29.976413479119863], [74.421380242820263, 30.97981476493117], [74.405928989564998, 31.692639471965272], [75.258641798813187, 32.271105455040491], [74.451559279278698, 32.764899603805489], [74.104293654277328, 33.441473293586846], [73.749948358051952, 34.317698879527846], [74.240202671204955, 34.748887030571247], [75.757060988268321, 34.504922593721311], [76.871721632804011, 34.653544012992732], [77.837450799474553, 35.494009507787759]]] } }, + { "type": "Feature", "properties": { "admin": "Ireland", "name": "Ireland", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[-6.197884894220989, 53.86756500916335], [-6.032985398777609, 53.153164170944336], [-6.788856573910847, 52.260117906292322], [-8.561616583683557, 51.669301255899349], [-9.977085740590267, 51.820454820353071], [-9.16628251793078, 52.864628811242667], [-9.688524542672452, 53.881362616585285], [-8.327987433292007, 54.664518947968624], [-7.572167934591064, 55.131622219454854], [-7.366030646178785, 54.595840969452709], [-7.572167934591064, 54.059956366585986], [-6.953730231138065, 54.073702297575622], [-6.197884894220989, 53.86756500916335]]] } }, + { "type": "Feature", "properties": { "admin": "Iran", "name": "Iran", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[53.921597934795543, 37.198918361961255], [54.800303989486558, 37.392420762678178], [55.511578403551894, 37.964117133123153], [56.180374790273319, 37.935126654607423], [56.619366082592805, 38.121394354803478], [57.330433790928964, 38.029229437810933], [58.436154412678192, 37.522309475243794], [59.234761997316795, 37.412987982730336], [60.377637973883864, 36.52738312432836], [61.123070509694131, 36.491597194966239], [61.21081709172573, 35.650072333309218], [60.80319339380744, 34.404101874319856], [60.528429803311575, 33.676446031217999], [60.963700392505991, 33.528832302376252], [60.536077915290761, 32.981268825811561], [60.863654819588952, 32.182919623334421], [60.941944614511115, 31.548074652628745], [61.699314406180811, 31.379506130492661], [61.78122155136343, 30.735850328081231], [60.874248488208778, 29.829238999952604], [61.369308709564926, 29.303276272085917], [61.771868117118615, 28.699333807890792], [62.727830438085974, 28.259644883735383], [62.755425652929851, 27.378923448184985], [63.23389773952028, 27.217047024030702], [63.316631707619578, 26.756532497661659], [61.874187453056535, 26.239974880472097], [61.497362908784183, 25.078237006118492], [59.616134067630831, 25.380156561783775], [58.525761346272297, 25.609961656185725], [57.39725141788238, 25.739902045183634], [56.97076582217754, 26.966106268821356], [56.492138706290199, 27.14330475515019], [55.723710158110059, 26.964633490501036], [54.715089552637252, 26.480657863871507], [53.493096958231334, 26.812368882753042], [52.483597853409599, 27.580849107365488], [51.520762566947404, 27.865689602158291], [50.852948032439528, 28.814520575469377], [50.115008579311571, 30.14777252859971], [49.576850213423988, 29.9857152369324], [48.941333449098536, 30.31709035900403], [48.567971225789748, 29.926778265903515], [48.014568312376085, 30.452456773392594], [48.00469811380831, 30.985137437457237], [47.685286085812258, 30.984853217079621], [47.849203729042095, 31.709175930298663], [47.334661492711895, 32.469155381799105], [46.109361606639304, 33.017287299118998], [45.416690708199035, 33.967797756479577], [45.648459507028079, 34.748137722303007], [46.15178795755093, 35.093258775364284], [46.076340366404786, 35.67738332777548], [45.420618117053202, 35.977545884742817], [44.77267, 37.17045], [44.225755649600522, 37.971584377589345], [44.421402622257538, 38.281281236314534], [44.109225294782334, 39.428136298168091], [44.793989699081934, 39.713002631177041], [44.9526880226503, 39.335764675446363], [45.457721795438765, 38.874139105783051], [46.143623081248812, 38.74120148371221], [46.505719842317966, 38.770605373686287], [47.685079380083081, 39.508363959301207], [48.060095249225235, 39.582235419262453], [48.355529412637871, 39.2887649602769], [48.010744256386474, 38.794014797514514], [48.634375441284803, 38.27037750910096], [48.883249139202483, 38.32024526626261], [49.199612257693332, 37.582874253889877], [50.147771437384606, 37.37456655532133], [50.842354363819695, 36.872814235983384], [52.26402469260141, 36.700421657857696], [53.825789829326411, 36.965030829408228], [53.921597934795543, 37.198918361961255]]] } }, + { "type": "Feature", "properties": { "admin": "Iraq", "name": "Iraq", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[45.420618117053202, 35.977545884742817], [46.076340366404786, 35.67738332777548], [46.15178795755093, 35.093258775364284], [45.648459507028079, 34.748137722303007], [45.416690708199035, 33.967797756479577], [46.109361606639304, 33.017287299118998], [47.334661492711895, 32.469155381799105], [47.849203729042095, 31.709175930298663], [47.685286085812258, 30.984853217079621], [48.00469811380831, 30.985137437457237], [48.014568312376085, 30.452456773392594], [48.567971225789748, 29.926778265903515], [47.974519077349889, 29.975819200148493], [47.302622104690947, 30.059069932570711], [46.568713413281742, 29.099025173452283], [44.709498732284736, 29.178891099559376], [41.889980910007829, 31.190008653278362], [40.399994337736238, 31.889991766887931], [39.195468377444961, 32.16100881604266], [38.792340529136077, 33.378686428352218], [41.00615888851992, 34.419372260062111], [41.383965285005807, 35.628316555314349], [41.289707472505448, 36.358814602192261], [41.837064243340954, 36.605853786763568], [42.349591098811764, 37.22987254490409], [42.779125604021822, 37.385263576805741], [43.942258742047287, 37.256227525372942], [44.293451775902852, 37.001514390606289], [44.772699008977689, 37.170444647768427], [45.420618117053202, 35.977545884742817]]] } }, + { "type": "Feature", "properties": { "admin": "Iceland", "name": "Iceland", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[-14.508695441129232, 66.455892239031414], [-14.739637417041605, 65.808748277440287], [-13.609732224979807, 65.126671047619851], [-14.9098337467949, 64.36408193628867], [-17.794438035543418, 63.67874909123384], [-18.656245896874989, 63.496382961675806], [-19.972754685942757, 63.643634955491514], [-22.762971971110154, 63.960178941495371], [-21.778484259517676, 64.402115790455497], [-23.955043911219104, 64.891129869233481], [-22.184402635170354, 65.084968166760291], [-22.227423265053329, 65.378593655042721], [-24.326184047939332, 65.611189276788451], [-23.650514695723082, 66.262519029395207], [-22.134922451250883, 66.410468655046856], [-20.576283738679543, 65.732112128351417], [-19.056841600001587, 66.276600857194751], [-17.798623826559048, 65.993853257909763], [-16.167818976292121, 66.526792304135853], [-14.508695441129232, 66.455892239031414]]] } }, + { "type": "Feature", "properties": { "admin": "Israel", "name": "Israel", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[35.719918247222743, 32.709192409794859], [35.545665317534535, 32.393992011030569], [35.183930291491428, 32.532510687788935], [34.974640740709319, 31.866582343059715], [35.225891554512422, 31.754341132121759], [34.970506626125989, 31.616778469360803], [34.927408481594554, 31.35343537040141], [35.397560662586038, 31.489086005167572], [35.420918409981958, 31.100065822874349], [34.922602573391423, 29.501326198844517], [34.26543338393568, 31.219360866820146], [34.556371697738903, 31.548823960896989], [34.48810713068135, 31.605538845337314], [34.752587111151165, 32.07292633720116], [34.955417107896771, 32.827376410446369], [35.098457472480668, 33.080539252244257], [35.126052687324538, 33.090900376918775], [35.460709262846699, 33.089040025356276], [35.552796665190805, 33.264274807258012], [35.821100701650231, 33.277426459276292], [35.836396925608618, 32.868123277308506], [35.700797967274745, 32.716013698857374], [35.719918247222743, 32.709192409794859]]] } }, + { "type": "Feature", "properties": { "admin": "Italy", "name": "Italy", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[15.52037601081383, 38.231155096991465], [15.160242954171732, 37.444045518537813], [15.309897902089002, 37.134219468731793], [15.099988234119445, 36.61998729099539], [14.335228712632013, 36.996630967754747], [13.826732618879927, 37.104531358380186], [12.431003859108809, 37.612949937483812], [12.570943637755132, 38.126381130519682], [13.741156447004581, 38.03496552179535], [14.761249220446157, 38.143873602850498], [15.52037601081383, 38.231155096991465]]], [[[9.210011834356264, 41.209991360024212], [9.809975213264973, 40.500008856766094], [9.669518670295671, 39.177376410471787], [9.214817742559486, 39.240473334300127], [8.806935662479729, 38.906617743478471], [8.428302443077113, 39.171847032216611], [8.388253208050939, 40.378310858718798], [8.159998406617659, 40.950007229163774], [8.709990675500107, 40.899984442705225], [9.210011834356264, 41.209991360024212]]], [[[12.376485223040842, 46.767559109069872], [13.806475457421552, 46.50930613869118], [13.698109978905475, 46.016778062517368], [13.937630242578335, 45.59101593686465], [13.141606479554294, 45.736691799495411], [12.328581170306304, 45.38177806251484], [12.383874952858601, 44.885374253919075], [12.261453484759157, 44.600482082694008], [12.589237094786482, 44.091365871754462], [13.526905958722491, 43.587727362637899], [14.029820997787024, 42.761007798832473], [15.142569614327952, 41.955139675456891], [15.926191033601892, 41.961315009115729], [16.169897088290409, 41.740294908203417], [15.889345737377793, 41.541082261718195], [16.785001661860573, 41.179605617836579], [17.519168735431204, 40.877143459632229], [18.376687452882575, 40.355624904942651], [18.4802470231954, 40.168866278639818], [18.293385044028096, 39.810774441073235], [17.738380161213279, 40.277671006830289], [16.869595981522334, 40.442234605463838], [16.448743116937319, 39.795400702466473], [17.171489698971495, 39.424699815420716], [17.052840610429339, 38.902871202137291], [16.635088331781841, 38.843572496082395], [16.100960727613053, 37.985898749334176], [15.684086948314498, 37.908849188787023], [15.687962680736318, 38.214592800441849], [15.891981235424705, 38.750942491199218], [16.109332309644312, 38.964547024077682], [15.718813510814638, 39.544072374014938], [15.413612501698818, 40.048356838535163], [14.998495721098234, 40.172948716790913], [14.703268263414767, 40.604550279292617], [14.06067182786526, 40.786347968095434], [13.627985060285393, 41.188287258461649], [12.888081902730418, 41.253089504555604], [12.106682570044907, 41.7045348170574], [11.191906365614184, 42.355425319989671], [10.511947869517794, 42.93146251074721], [10.200028924204046, 43.920006822274608], [9.702488234097812, 44.036278794931313], [8.888946160526869, 44.366336167979533], [8.428560825238575, 44.23122813575241], [7.8507666357832, 43.767147935555236], [7.435184767291841, 43.693844916349164], [7.549596388386161, 44.127901109384808], [7.007562290076661, 44.254766750661382], [6.749955275101711, 45.028517971367584], [7.096652459347835, 45.333098863295859], [6.80235517744566, 45.708579820328673], [6.84359297041456, 45.991146552100659], [7.273850945676683, 45.776947740250748], [7.755992058959832, 45.824490057959267], [8.316629672894377, 46.16364248309084], [8.489952426801294, 46.005150865251736], [8.966305779667833, 46.03693187111115], [9.18288170740311, 46.440214748716976], [9.92283654139035, 46.314899400409182], [10.363378126678665, 46.48357127540983], [10.4427014502466, 46.893546250997431], [11.048555942436504, 46.751358547546396], [11.164827915093325, 46.941579494812729], [12.153088006243079, 47.115393174826423], [12.376485223040842, 46.767559109069872]]]] } }, + { "type": "Feature", "properties": { "admin": "Jamaica", "name": "Jamaica", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-77.569600796199197, 18.490525417550483], [-76.896618618462114, 18.400866807524078], [-76.365359056285527, 18.16070058844759], [-76.19965857614163, 17.886867173732963], [-76.902561408175671, 17.868237819891743], [-77.206341315403449, 17.701116237859818], [-77.766022915340599, 17.861597398342237], [-78.337719285785596, 18.225967922432226], [-78.217726610003865, 18.454532782459193], [-77.797364671525614, 18.524218451404774], [-77.569600796199197, 18.490525417550483]]] } }, + { "type": "Feature", "properties": { "admin": "Jordan", "name": "Jordan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[35.545665317534535, 32.393992011030569], [35.719918247222743, 32.709192409794859], [36.834062127435537, 32.312937526980768], [38.792340529136077, 33.378686428352218], [39.195468377444961, 32.16100881604266], [39.004885695152545, 32.010216986614971], [37.002165561681004, 31.508412990844736], [37.998848911294367, 30.508499864213128], [37.668119744626374, 30.338665269485894], [37.503581984209028, 30.003776150018396], [36.740527784987243, 29.865283311476183], [36.501214227043583, 29.505253607698702], [36.068940870922049, 29.19749461518445], [34.956037225084252, 29.356554673778835], [34.922602573391423, 29.501326198844517], [35.420918409981958, 31.100065822874349], [35.397560662586038, 31.489086005167572], [35.545251906076196, 31.782504787720832], [35.545665317534535, 32.393992011030569]]] } }, + { "type": "Feature", "properties": { "admin": "Japan", "name": "Japan", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[134.638428176003856, 34.149233710256418], [134.766379022358478, 33.806334743783673], [134.20341596897083, 33.201177883429622], [133.792950067276479, 33.521985175097583], [133.280268182508848, 33.289570420864941], [133.014858026257855, 32.704567369104772], [132.363114862192674, 32.989382025681373], [132.371176385630179, 33.463642483040068], [132.924372593314786, 34.060298570282036], [133.492968377822194, 33.944620876596694], [133.904106073136347, 34.364931138642611], [134.638428176003856, 34.149233710256418]]], [[[140.976387567305267, 37.142074286440156], [140.599769728762084, 36.343983466124534], [140.774074334882641, 35.842877102190229], [140.253279250245072, 35.138113918593653], [138.975527785396196, 34.667600002576101], [137.217598911691198, 34.606285915661843], [135.792983026268871, 33.46480520276662], [135.120982700745401, 33.849071153289053], [135.07943484918269, 34.596544908174813], [133.340316196831964, 34.375938218720755], [132.156770868051296, 33.904933376596503], [130.986144647343451, 33.885761420216276], [132.000036248910021, 33.149992377244608], [131.33279015515734, 31.450354519164836], [130.68631798718593, 31.029579169228235], [130.202419875204953, 31.418237616495411], [130.447676222862128, 32.319474595665717], [129.81469160371887, 32.610309556604385], [129.408463169472554, 33.296055813117583], [130.353935174684636, 33.604150702441693], [130.878450962447118, 34.232742824840031], [131.884229364143891, 34.749713853487911], [132.617672967662486, 35.433393052709413], [134.608300815977771, 35.731617743465812], [135.677537876528902, 35.527134100886819], [136.723830601142424, 37.304984239240376], [137.390611607004473, 36.827390651998819], [138.857602166906247, 37.827484646143454], [139.426404657142882, 38.215962225897634], [140.054790073812057, 39.438807481436378], [139.883379347899847, 40.563312486323682], [140.305782505453664, 41.195005194659551], [141.368973423426667, 41.378559882160282], [141.914263136970476, 39.991616115878678], [141.884600864834965, 39.18086456965149], [140.959489373945729, 38.174000962876583], [140.976387567305267, 37.142074286440156]]], [[[143.910161981379474, 44.174099839853724], [144.613426548439634, 43.960882880217511], [145.320825230083074, 44.384732977875437], [145.543137241802754, 43.262088324550596], [144.059661899999867, 42.988358262700551], [143.183849725517291, 41.995214748699183], [141.611490920172457, 42.678790595056071], [141.067286411706618, 41.58459381770799], [139.95510623592105, 41.56955597591103], [139.817543573159924, 42.563758856774392], [140.312087030193169, 43.333272610032644], [141.380548944259999, 43.388824774746489], [141.671952345953912, 44.772125352551477], [141.967644891527982, 45.551483466161343], [143.142870314709796, 44.510358384776957], [143.910161981379474, 44.174099839853724]]]] } }, + { "type": "Feature", "properties": { "admin": "Kazakhstan", "name": "Kazakhstan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[70.962314894499272, 42.26615428320553], [70.388964878220776, 42.081307684897517], [69.070027296835221, 41.384244289712335], [68.632482944620037, 40.668680731766855], [68.259895867795635, 40.662324530594894], [67.985855747351806, 41.135990708982199], [66.714047072216587, 41.168443508461557], [66.510648634715707, 41.987644151368549], [66.023391554635609, 41.994646307944031], [66.098012322865188, 42.997660020513074], [64.90082441595932, 43.728080552742647], [63.18578698105658, 43.650074978197999], [62.013300408786264, 43.504476630215649], [61.05831994003249, 44.405816962250576], [60.239971958258472, 44.784036770194739], [58.689989048095796, 45.500013739598721], [58.503127068928428, 45.58680430763296], [55.928917270741167, 44.995858466159163], [55.968191359283011, 41.30864166926937], [55.455251092353805, 41.259859117185826], [54.755345493392653, 42.04397146256661], [54.079417759014959, 42.324109402020831], [52.944293247291725, 42.116034247397572], [52.502459751196277, 41.783315538086462], [52.446339145727208, 42.027150783855561], [52.692112257707251, 42.443895372073364], [52.501426222550315, 42.792297878585188], [51.342427199108201, 43.132974758469338], [50.891291945200223, 44.031033637053774], [50.339129266161358, 44.284015611338468], [50.305642938036257, 44.609835516938908], [51.278503452363211, 44.514854234386448], [51.316899041556034, 45.245998236667894], [52.167389764215713, 45.408391425145098], [53.040876499245194, 45.259046535821753], [53.220865512917712, 46.23464590105992], [53.042736850807771, 46.853006089864486], [52.042022739475598, 46.804636949239232], [51.191945428274252, 47.048704738953909], [50.034083286342465, 46.608989976582208], [49.10116, 46.39933000000012], [48.593241001180495, 46.561034247415471], [48.694733514201729, 47.075628160177921], [48.057253045449258, 47.743752753279516], [47.315231154170242, 47.715847479841948], [46.466445753776256, 48.394152330104923], [47.043671502476506, 49.1520388860976], [46.751596307162728, 49.35600576435376], [47.549480421749301, 50.454698391311119], [48.577841424357523, 49.874759629915658], [48.702381626181008, 50.605128485712825], [50.766648390512145, 51.692762356159889], [52.328723585830957, 51.71865224873811], [54.53287845237621, 51.026239732459302], [55.716940545479801, 50.62171662047853], [56.777961053296551, 51.043551337277037], [58.363290643146733, 51.063653469438563], [59.642282342370599, 50.545442206415707], [59.932807244715484, 50.842194118851857], [61.337424350840919, 50.799070136104248], [61.588003371024158, 51.2726587998432], [59.967533807215531, 51.960420437215696], [60.927268507740258, 52.447548326215028], [60.739993117114572, 52.719986477257734], [61.699986199800584, 52.979996446334255], [60.978066440683151, 53.664993394579128], [61.436591424409052, 54.006264553434775], [65.178533563095911, 54.354227810272093], [65.66687584825398, 54.601266994843449], [68.169100376258811, 54.970391750704309], [69.068166945272864, 55.385250149143516], [70.865266554655122, 55.169733588270091], [71.180131056609397, 54.133285224008247], [72.224150018202167, 54.376655381886728], [73.508516066384388, 54.035616766976588], [73.425678745420427, 53.489810289109741], [74.384845005190044, 53.546861070360066], [76.891100294913414, 54.490524400441913], [76.525179477854735, 54.177003485727127], [77.800915561844221, 53.404414984747561], [80.035559523441663, 50.864750881547238], [80.568446893235475, 51.388336493528456], [81.945985548839914, 50.812195949906354], [83.383003778012366, 51.069182847693909], [83.935114780618832, 50.889245510453563], [84.416377394553052, 50.311399644565817], [85.115559523462011, 50.117302964877631], [85.541269972682457, 49.69285858824815], [86.829356723989619, 49.826674709668154], [87.359970330762664, 49.214980780629148], [86.598776483103379, 48.549181626980605], [85.768232863308285, 48.455750637396974], [85.72048383987071, 47.452969468773112], [85.164290399113355, 47.000955715516099], [83.180483839860443, 47.330031236350848], [82.458925815769106, 45.539649563166499], [81.947070753918112, 45.317027492853235], [79.966106398441397, 44.917516994804643], [80.866206496101356, 43.180362046881037], [80.180150180994289, 42.920067857426936], [80.259990268885332, 42.349999294599101], [79.643645460940135, 42.496682847659649], [79.142177361979776, 42.856092434249589], [77.658391961583206, 42.960685533208327], [76.000353631498555, 42.988022365890622], [75.636964959622091, 42.877899888676765], [74.212865838522575, 43.298339341803505], [73.645303582660901, 43.091271877609863], [73.489757521462337, 42.500894476891276], [71.844638299450637, 42.845395412765178], [71.186280552052253, 42.704292914392219], [70.962314894499272, 42.26615428320553]]] } }, + { "type": "Feature", "properties": { "admin": "Kenya", "name": "Kenya", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[40.993, -0.85829], [41.58513, -1.68325], [40.88477, -2.08255], [40.63785, -2.49979], [40.26304, -2.57309], [40.12119, -3.27768], [39.80006, -3.68116], [39.60489, -4.34653], [39.20222, -4.67677], [37.7669, -3.67712], [37.69869, -3.09699], [34.07262, -1.05982], [33.903711197104521, -0.95], [33.893568969666937, 0.109813537861896], [34.18, 0.515], [34.6721, 1.17694], [35.03599, 1.90584], [34.59607, 3.05374], [34.47913, 3.5556], [34.005, 4.249884947362047], [34.620196267853871, 4.847122742081987], [35.298007118232974, 5.506], [35.817447662353501, 5.338232082790795], [35.817447662353501, 4.776965663461889], [36.159078632855639, 4.447864127672768], [36.855093238008116, 4.447864127672768], [38.120915, 3.598605], [38.43697, 3.58851], [38.67114, 3.61607], [38.89251, 3.50074], [39.559384258765846, 3.42206], [39.85494, 3.83879], [40.76848, 4.25702], [41.1718, 3.91909], [41.855083092643966, 3.918911920483726], [40.98105, 2.78452], [40.993, -0.85829]]] } }, + { "type": "Feature", "properties": { "admin": "Kyrgyzstan", "name": "Kyrgyzstan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[70.96231489449913, 42.266154283205481], [71.186280552052111, 42.704292914392127], [71.84463829945058, 42.845395412765093], [73.489757521462337, 42.500894476891311], [73.645303582660901, 43.09127187760982], [74.212865838522546, 43.298339341803363], [75.636964959622006, 42.877899888676673], [76.000353631498442, 42.988022365890664], [77.658391961583206, 42.960685533208256], [79.142177361979762, 42.856092434249511], [79.643645460940107, 42.496682847659514], [80.259990268885289, 42.349999294599044], [80.119430373051358, 42.123940741538235], [78.543660923175295, 41.582242540038685], [78.187196893225959, 41.185315863604792], [76.904484490877067, 41.066485907549634], [76.526368035797432, 40.427946071935111], [75.467827996730691, 40.562072251948663], [74.776862420556043, 40.366425279291619], [73.822243686828287, 39.893973497063179], [73.960013055318413, 39.660008449861721], [73.67537926625478, 39.431236884105594], [71.784693637991992, 39.279463202464363], [70.549161818325601, 39.604197902986492], [69.464886915977516, 39.526683254548693], [69.559609816368507, 40.103211371412968], [70.648018833299957, 39.935753892571157], [71.014198032520156, 40.244365546218226], [71.774875115856545, 40.145844428053763], [73.055417108049156, 40.86603302668945], [71.870114780570447, 41.392900092121259], [71.157858514291576, 41.143587144529107], [70.420022414028196, 41.519998277343134], [71.259247674448218, 42.167710679689456], [70.96231489449913, 42.266154283205481]]] } }, + { "type": "Feature", "properties": { "admin": "Cambodia", "name": "Cambodia", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[103.497279901139677, 10.632555446815926], [103.090689731867229, 11.153660590047162], [102.58493248902667, 12.186594956913279], [102.348099399833004, 13.39424734135822], [102.988422072361601, 14.225721136934464], [104.281418084736586, 14.416743068901363], [105.218776890078871, 14.27321177821069], [106.04394616091551, 13.881091009979952], [106.496373325630856, 14.57058380783428], [107.382727492301058, 14.202440904186968], [107.614547967562402, 13.535530707244202], [107.491403029410861, 12.337205918827944], [105.810523716253101, 11.567614650921225], [106.249670037869436, 10.961811835163585], [105.199914992292321, 10.889309800658094], [104.334334751403446, 10.486543687375228], [103.497279901139677, 10.632555446815926]]] } }, + { "type": "Feature", "properties": { "admin": "South Korea", "name": "Korea", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[128.349716424676586, 38.612242946927843], [129.212919549680038, 37.432392483055942], [129.460449660358137, 36.784189154602821], [129.468304478066472, 35.632140611303939], [129.091376580929563, 35.08248423923142], [128.18585045787907, 34.890377102186385], [127.386519403188373, 34.475673733044111], [126.485747511908713, 34.390045884736473], [126.3739197124291, 34.934560451795939], [126.559231398627773, 35.684540513647896], [126.117397902532261, 36.725484727519252], [126.860143263863364, 36.893924058574612], [126.174758742376213, 37.749685777328033], [126.237338901881742, 37.840377916000271], [126.683719924018888, 37.804772854151174], [127.073308547067342, 38.256114813788393], [127.780035435090966, 38.304535630845884], [128.205745884311426, 38.370397243801882], [128.349716424676586, 38.612242946927843]]] } }, + { "type": "Feature", "properties": { "admin": "Kosovo", "name": "Kosovo", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[20.76216, 42.05186], [20.717310000000108, 41.84711], [20.59023, 41.85541], [20.52295, 42.21787], [20.28374, 42.32025], [20.0707, 42.58863], [20.25758, 42.81275], [20.49679, 42.88469], [20.63508, 43.21671], [20.81448, 43.27205], [20.95651, 43.13094], [21.143395, 43.068685000000123], [21.27421, 42.90959], [21.43866, 42.86255], [21.63302, 42.67717], [21.77505, 42.6827], [21.66292, 42.43922], [21.54332, 42.32025], [21.576635989402117, 42.245224397061847], [21.352700000000134, 42.2068], [20.76216, 42.05186]]] } }, + { "type": "Feature", "properties": { "admin": "Kuwait", "name": "Kuwait", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[47.974519077349889, 29.975819200148493], [48.183188510944483, 29.534476630159759], [48.09394331237641, 29.306299343374999], [48.416094191283939, 28.552004299426663], [47.708850538937376, 28.526062730416136], [47.459821811722819, 29.002519436147217], [46.568713413281742, 29.099025173452283], [47.302622104690947, 30.059069932570711], [47.974519077349889, 29.975819200148493]]] } }, + { "type": "Feature", "properties": { "admin": "Laos", "name": "Lao PDR", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[105.218776890078871, 14.27321177821069], [105.544338413517664, 14.723933620660414], [105.589038527450128, 15.570316066952856], [104.779320509868768, 16.441864935771445], [104.716947056092465, 17.428858954330078], [103.956476678485288, 18.240954087796872], [103.200192091893726, 18.309632066312769], [102.998705682387694, 17.961694647691598], [102.413004998791592, 17.932781683824281], [102.113591750092453, 18.109101670804161], [101.059547560635139, 17.512497259994486], [101.035931431077742, 18.408928330961611], [101.282014601651667, 19.462584947176762], [100.606293573003128, 19.508344427971217], [100.548881056726856, 20.109237982661124], [100.115987583417819, 20.41784963630818], [100.329101190189519, 20.786121731036229], [101.180005324307515, 21.436572984294024], [101.270025669359939, 21.201651923095177], [101.803119744882906, 21.174366766845065], [101.652017856861491, 22.318198757409544], [102.170435825613552, 22.464753119389297], [102.754896274834636, 21.675137233969462], [103.203861118586431, 20.766562201413745], [104.435000441508024, 20.758733221921528], [104.822573683697073, 19.886641750563879], [104.183387892678908, 19.624668077060214], [103.896532017026701, 19.265180975821799], [105.094598423281496, 18.666974595611073], [105.925762160264, 17.485315456608955], [106.55600792849566, 16.604283962464802], [107.312705926545576, 15.908538316303177], [107.564525181103875, 15.202173163305554], [107.382727492301058, 14.202440904186968], [106.496373325630856, 14.57058380783428], [106.04394616091551, 13.881091009979952], [105.218776890078871, 14.27321177821069]]] } }, + { "type": "Feature", "properties": { "admin": "Lebanon", "name": "Lebanon", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[35.821100701650231, 33.277426459276292], [35.552796665190805, 33.264274807258012], [35.460709262846699, 33.089040025356276], [35.126052687324538, 33.090900376918775], [35.48220665868012, 33.905450140919434], [35.979592319489392, 34.610058295219126], [35.998402540843628, 34.644914048799997], [36.448194207512095, 34.59393524834406], [36.611750115715886, 34.201788641897174], [36.066460402172048, 33.824912421192543], [35.821100701650231, 33.277426459276292]]] } }, + { "type": "Feature", "properties": { "admin": "Liberia", "name": "Liberia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-7.712159389669749, 4.364565944837721], [-7.974107224957249, 4.355755113131961], [-9.004793667018673, 4.832418524592199], [-9.913420376006682, 5.593560695819205], [-10.765383876986643, 6.140710760925556], [-11.438779466182053, 6.785916856305746], [-11.199801805048278, 7.105845648624735], [-11.14670427086838, 7.396706447779534], [-10.695594855176477, 7.939464016141085], [-10.230093553091276, 8.406205552601291], [-10.016566534861253, 8.42850393313523], [-9.755342169625832, 8.541055202666923], [-9.33727983238458, 7.928534450711351], [-9.403348151069748, 7.526905218938906], [-9.208786383490844, 7.313920803247952], [-8.926064622422002, 7.309037380396375], [-8.722123582382123, 7.711674302598509], [-8.439298468448696, 7.686042792181736], [-8.485445522485348, 7.395207831243068], [-8.385451626000572, 6.911800645368742], [-8.602880214868618, 6.467564195171659], [-8.311347622094017, 6.193033148621081], [-7.993692592795879, 6.126189683451541], [-7.570152553731686, 5.707352199725903], [-7.53971513511176, 5.313345241716517], [-7.63536821128403, 5.188159084489455], [-7.712159389669749, 4.364565944837721]]] } }, + { "type": "Feature", "properties": { "admin": "Libya", "name": "Libya", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[14.8513, 22.862950000000119], [14.143870883855239, 22.491288967371126], [13.581424594790459, 23.040506089769274], [11.999505649471697, 23.471668402596432], [11.560669386449032, 24.09790924732561], [10.771363559622952, 24.562532050061741], [10.303846876678445, 24.379313259370967], [9.948261346078024, 24.936953640232613], [9.910692579801774, 25.365454616796789], [9.319410841518218, 26.094324856057476], [9.716285841519662, 26.512206325785652], [9.629056023811073, 27.140953477481041], [9.756128370816779, 27.688258571884198], [9.68388471847288, 28.144173895779311], [9.859997999723472, 28.959989732371064], [9.805634392952353, 29.424638373323369], [9.482139926805415, 30.307556057246181], [9.970017124072966, 30.539324856075375], [10.056575148161697, 30.961831366493517], [9.950225050505194, 31.376069647745275], [10.636901482799484, 31.761420803345679], [10.944789666394511, 32.081814683555358], [11.43225345220378, 32.368903103152824], [11.488787469131008, 33.136995754523234], [12.66331, 32.79278], [13.08326, 32.87882], [13.91868, 32.71196], [15.24563, 32.26508], [15.71394, 31.37626], [16.61162, 31.18218], [18.02109, 30.76357], [19.08641, 30.26639], [19.57404, 30.52582], [20.05335, 30.98576], [19.82033, 31.751790000000135], [20.13397, 32.2382], [20.85452, 32.7068], [21.54298, 32.8432], [22.89576, 32.63858], [23.2368, 32.19149], [23.6091300000001, 32.18726], [23.9275, 32.01667], [24.92114, 31.89936], [25.16482, 31.56915], [24.80287, 31.08929], [24.95762, 30.6616], [24.70007, 30.04419], [25.00000000000011, 29.238654529533552], [25.00000000000011, 25.682499996360995], [25.00000000000011, 22.0], [25.00000000000011, 20.00304], [23.850000000000129, 20.0], [23.837660000000135, 19.580470000000101], [19.84926, 21.49509], [15.86085, 23.40972], [14.8513, 22.862950000000119]]] } }, + { "type": "Feature", "properties": { "admin": "Sri Lanka", "name": "Sri Lanka", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[81.787959018891371, 7.523055324733162], [81.637322218760573, 6.481775214051921], [81.218019647144317, 6.197141424988287], [80.348356968104397, 5.968369859232154], [79.872468703128519, 6.763463446474928], [79.6951668639351, 8.200843410673384], [80.147800734379629, 9.824077663609554], [80.838817986986541, 9.268426825391186], [81.304319289071756, 8.564206244333688], [81.787959018891371, 7.523055324733162]]] } }, + { "type": "Feature", "properties": { "admin": "Lesotho", "name": "Lesotho", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[28.978262566857236, -28.955596612261708], [29.325166456832587, -29.257386976846245], [29.018415154748016, -29.743765557577362], [28.848399692507734, -30.070050551068245], [28.291069370239903, -30.226216729454293], [28.107204624145421, -30.545732110314944], [27.749397006956478, -30.645105889612214], [26.999261915807629, -29.875953871379977], [27.532511020627471, -29.242710870075353], [28.07433841320778, -28.851468601193581], [28.541700066855491, -28.647501722937562], [28.978262566857236, -28.955596612261708]]] } }, + { "type": "Feature", "properties": { "admin": "Lithuania", "name": "Lithuania", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[22.731098667092649, 54.327536932993311], [22.651051873472536, 54.582740993866729], [22.757763706155256, 54.856574408581366], [22.31572350433057, 55.01529857036585], [21.26844892750346, 55.190481675835301], [21.05580040862241, 56.031076361711051], [22.201156853939491, 56.337801825579483], [23.878263787539957, 56.273671373105259], [24.860684441840753, 56.372528388079616], [25.000934279080887, 56.164530748104831], [25.533046502390327, 56.100296942766029], [26.494331495883749, 55.61510691997762], [26.588279249790386, 55.167175604871659], [25.768432651479792, 54.846962592175082], [25.536353794056989, 54.282423407602515], [24.45068362803703, 53.905702216194747], [23.484127638449841, 53.912497667041123], [23.243987257589506, 54.220566718149129], [22.731098667092649, 54.327536932993311]]] } }, + { "type": "Feature", "properties": { "admin": "Luxembourg", "name": "Luxembourg", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[6.043073357781109, 50.128051662794221], [6.242751092156992, 49.90222565367872], [6.186320428094176, 49.4638028021145], [5.897759230176403, 49.442667141307012], [5.674051954784828, 49.52948354755749], [5.782417433300905, 50.090327867221205], [6.043073357781109, 50.128051662794221]]] } }, + { "type": "Feature", "properties": { "admin": "Latvia", "name": "Latvia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[21.05580040862241, 56.031076361711051], [21.090423618257965, 56.783872789122924], [21.581866489353668, 57.411870632549913], [22.524341261492872, 57.753374335350756], [23.31845299652209, 57.006236477274854], [24.120729607853423, 57.025692654032753], [24.312862583114615, 57.793423570376966], [25.164593540149262, 57.970156968815175], [25.602809685984365, 57.847528794986559], [26.46353234223778, 57.476388658266316], [27.288184848751509, 57.474528306703817], [27.770015903440925, 57.244258124411218], [27.855282016722519, 56.759326483784278], [28.17670942557799, 56.169129950578807], [27.102459751094525, 55.783313707087672], [26.494331495883749, 55.61510691997762], [25.533046502390327, 56.100296942766029], [25.000934279080887, 56.164530748104831], [24.860684441840753, 56.372528388079616], [23.878263787539957, 56.273671373105259], [22.201156853939491, 56.337801825579483], [21.05580040862241, 56.031076361711051]]] } }, + { "type": "Feature", "properties": { "admin": "Morocco", "name": "Morocco", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-5.193863491222031, 35.755182196590845], [-4.591006232105143, 35.330711981745644], [-3.640056525070007, 35.39985504815197], [-2.604305792644111, 35.17909332940112], [-2.169913702798624, 35.168396307916694], [-1.792985805661658, 34.527918606091298], [-1.73345455566141, 33.919712836232115], [-1.388049282222596, 32.864015000941372], [-1.124551153966195, 32.651521511357195], [-1.30789913573787, 32.262888902306024], [-2.616604783529567, 32.094346218386157], [-3.068980271812648, 31.724497992473285], [-3.647497931320145, 31.637294012980814], [-3.690441046554666, 30.896951605751152], [-4.859646165374442, 30.501187649043874], [-5.242129278982786, 30.00044302013557], [-6.060632290053745, 29.731699734001801], [-7.059227667661899, 29.57922842052465], [-8.67411617678283, 28.841288967396643], [-8.665589565454836, 27.656425889592462], [-8.817809007940523, 27.656425889592462], [-8.817828334986642, 27.656425889592462], [-8.794883999049032, 27.120696316022553], [-9.413037482124507, 27.088476060488539], [-9.735343390328749, 26.860944729107409], [-10.189424200877452, 26.860944729107409], [-10.551262579785258, 26.990807603456879], [-11.392554897496948, 26.883423977154386], [-11.718219773800339, 26.104091701760801], [-12.030758836301654, 26.030866197203121], [-12.500962693725368, 24.770116278578136], [-13.891110398809044, 23.691009019459383], [-14.22116777185715, 22.310163072188338], [-14.630832688850942, 21.860939846274867], [-14.750954555713404, 21.500600083903802], [-17.002961798561071, 21.42073415779668], [-17.020428432675768, 21.422310288981631], [-16.973247849993182, 21.88574453377495], [-16.589136928767626, 22.158234361250091], [-16.26192175949566, 22.679339504481273], [-16.326413946995896, 23.017768459560894], [-15.982610642958059, 23.723358466074096], [-15.426003790742183, 24.359133612561035], [-15.089331834360729, 24.520260728446964], [-14.824645148161689, 25.103532619725307], [-14.800925665739666, 25.636264960222285], [-14.439939947964827, 26.254418443297645], [-13.773804897506462, 26.618892320252279], [-13.13994177901429, 27.640147813420491], [-13.121613369914709, 27.654147671719805], [-12.61883663578311, 28.038185533148656], [-11.688919236690761, 28.148643907172577], [-10.9009569971044, 28.832142238880913], [-10.39959225100864, 29.09858592377778], [-9.564811163765624, 29.933573716749855], [-9.814718390329174, 31.177735500609053], [-9.434793260119362, 32.038096421836478], [-9.300692918321827, 32.564679266890629], [-8.657476365585039, 33.24024526624239], [-7.654178432638217, 33.697064927702506], [-6.912544114601358, 34.11047638603744], [-6.24434200685141, 35.145865383437517], [-5.929994269219832, 35.759988104793983], [-5.193863491222031, 35.755182196590845]]] } }, + { "type": "Feature", "properties": { "admin": "Moldova", "name": "Moldova", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[26.619336785597788, 48.220726223333457], [26.857823520624798, 48.368210761094488], [27.52253746919515, 48.467119452501102], [28.259546746541837, 48.155562242213406], [28.670891147585163, 48.118148505234089], [29.122698195113024, 47.849095160506458], [29.050867954227321, 47.510226955752493], [29.415135125452732, 47.346645209332571], [29.559674106573105, 46.928582872091312], [29.908851759569295, 46.67436066343145], [29.838210076626289, 46.525325832701675], [30.024658644335364, 46.423936672545032], [29.759971958136383, 46.349987697935354], [29.170653924279879, 46.379262396828693], [29.072106967899288, 46.517677720722482], [28.862972446414055, 46.437889309263824], [28.933717482221621, 46.258830471372491], [28.659987420371575, 45.939986884131628], [28.48526940279276, 45.596907050145887], [28.233553501099035, 45.488283189468369], [28.054442986775392, 45.944586086605618], [28.160017937947707, 46.371562608417207], [28.128030226359037, 46.81047638608824], [27.551166212684841, 47.405117092470817], [27.233872918412736, 47.826770941756365], [26.924176059687561, 48.123264472030982], [26.619336785597788, 48.220726223333457]]] } }, + { "type": "Feature", "properties": { "admin": "Madagascar", "name": "Madagascar", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[49.543518914595737, -12.469832858940553], [49.80898074727908, -12.895284925999551], [50.05651085795715, -13.555761407121981], [50.217431268114055, -14.758788750876795], [50.476536899625515, -15.226512139550541], [50.377111443895942, -15.706069431219122], [50.200274692593169, -16.000263360256763], [49.860605503138665, -15.414252618066913], [49.672606642460849, -15.710203545802477], [49.863344354050142, -16.451036879138773], [49.774564243372694, -16.875042006093597], [49.49861209493411, -17.10603565843827], [49.435618523970298, -17.953064060134363], [49.04179243347393, -19.118781019774442], [48.548540887247995, -20.496888116134119], [47.930749139198653, -22.391501153251077], [47.547723423051295, -23.781958916928513], [47.095761346226588, -24.941629733990446], [46.282477654817079, -25.178462823184102], [45.409507684110444, -25.601434421493082], [44.833573846217547, -25.346101169538933], [44.039720493349755, -24.9883452287823], [43.763768344911156, -24.460677178649988], [43.697777540874441, -23.574116306250595], [43.345654331237611, -22.77690398528387], [43.254187046080986, -22.057413018484116], [43.433297560404633, -21.336475111580185], [43.893682895692919, -21.163307386970121], [43.89637007017209, -20.830459486578167], [44.374325392439644, -20.072366224856385], [44.464397413924374, -19.435454196859045], [44.23242190936616, -18.961994724200899], [44.042976108584149, -18.331387220943167], [43.963084344260899, -17.409944756746778], [44.312468702986273, -16.850495700754951], [44.446517368351387, -16.216219170804504], [44.944936557806521, -16.179373874580396], [45.502731967964976, -15.974373467678538], [45.872993605336255, -15.793454278224681], [46.312243279817203, -15.780018405828795], [46.882182651564271, -15.210182386946309], [47.70512983581235, -14.594302666891762], [48.005214878131241, -14.091232598530372], [47.869047479042152, -13.663868503476582], [48.29382775248137, -13.784067884987483], [48.845060255738773, -13.08917489995866], [48.863508742066976, -12.487867933810417], [49.194651320193302, -12.040556735891967], [49.543518914595737, -12.469832858940553]]] } }, + { "type": "Feature", "properties": { "admin": "Mexico", "name": "Mexico", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-97.140008307670684, 25.869997463478395], [-97.528072475966539, 24.992144069920297], [-97.702945522842214, 24.272343044526728], [-97.776041836319024, 22.932579860927653], [-97.872366706111094, 22.444211737553356], [-97.699043952204164, 21.898689480064256], [-97.388959520236739, 21.411018988525818], [-97.189333462293277, 20.635433254473124], [-96.525575527720306, 19.890930894444061], [-96.292127244841737, 19.32037140550954], [-95.90088497595994, 18.828024196848727], [-94.8390634834427, 18.562717393462204], [-94.425729539756205, 18.144370835843343], [-93.548651292682365, 18.423836981677933], [-92.786113857783477, 18.524838568592255], [-92.037348192090391, 18.704569200103432], [-91.407903408559235, 18.876083278880227], [-90.771869879910852, 19.284120388256778], [-90.533589850613026, 19.867418117751292], [-90.451475999701231, 20.707521877520428], [-90.278618333684889, 20.999855454995547], [-89.601321173851474, 21.261725775634485], [-88.543866339862845, 21.493675441976613], [-87.658416510757704, 21.458845526611977], [-87.051890224948053, 21.543543199138295], [-86.811982388032931, 21.331514797444747], [-86.845907965832595, 20.849864610268348], [-87.383291185235848, 20.255404771398727], [-87.621054450210721, 19.646553046135917], [-87.436750454441764, 19.472403469312265], [-87.586560431655911, 19.040130113190738], [-87.837191128271485, 18.259815985583426], [-88.090664028663156, 18.516647854074048], [-88.300031094093626, 18.499982204659997], [-88.490122850279278, 18.486830552641717], [-88.84834387892657, 17.883198147040329], [-89.029857347351737, 18.001511338772556], [-89.150909389995462, 17.955467637600403], [-89.143080410503316, 17.808318996649401], [-90.067933519230891, 17.819326076727517], [-91.001519945015943, 17.817594916245692], [-91.002269253284155, 17.254657701074272], [-91.453921271515114, 17.252177232324183], [-91.08167009150057, 16.918476670799517], [-90.711821865587623, 16.687483018454767], [-90.600846727240921, 16.470777899638787], [-90.438866950221993, 16.410109768128105], [-90.464472622422633, 16.069562079324722], [-91.747960171255926, 16.066564846251762], [-92.229248623406278, 15.251446641495871], [-92.087215949252013, 15.06458466232851], [-92.203229539747255, 14.830102850804108], [-92.227750006869812, 14.538828640190953], [-93.359463874061746, 15.61542959234367], [-93.875168830118511, 15.94016429286591], [-94.691656460330108, 16.20097524664288], [-95.250227016973014, 16.128318182840641], [-96.053382127653293, 15.752087917539592], [-96.557434048228274, 15.653515122942787], [-97.263592495496624, 15.917064927631312], [-98.013029954809596, 16.107311713113912], [-98.947675747456486, 16.566043402568763], [-99.697397427147024, 16.706164048728166], [-100.829498867581293, 17.171071071842047], [-101.666088629954444, 17.649026394109622], [-101.918528001700196, 17.916090196193974], [-102.478132086988907, 17.975750637275095], [-103.500989549558057, 18.292294623278845], [-103.917527432046811, 18.748571682200005], [-104.992009650475467, 19.316133938061679], [-105.493038499761411, 19.946767279535429], [-105.731396043707633, 20.434101874264108], [-105.397772996831321, 20.531718654863422], [-105.500660773524402, 20.816895046466122], [-105.27075232625792, 21.076284898355137], [-105.265817226974022, 21.422103583252348], [-105.603160976975374, 21.871145941652568], [-105.693413865973113, 22.269080308516148], [-106.028716396898943, 22.77375234627862], [-106.909980434988341, 23.767774359628895], [-107.91544877809136, 24.548915310152946], [-108.401904873470954, 25.172313951105931], [-109.260198737406625, 25.580609442644054], [-109.444089321717314, 25.824883938087673], [-109.291643846456267, 26.44293406829842], [-109.801457689231796, 26.676175645447923], [-110.391731737085692, 27.162114976504533], [-110.641018846461606, 27.859876003525521], [-111.178918830187826, 27.941240546169062], [-111.759606899851619, 28.467952582303944], [-112.228234626090369, 28.954408677683482], [-112.27182369672866, 29.266844387320074], [-112.80959448937395, 30.021113593052341], [-113.163810594518651, 30.786880804969424], [-113.148669399857141, 31.170965887978912], [-113.871881069781836, 31.56760834403519], [-114.205736660603506, 31.524045111613123], [-114.776451178835003, 31.79953217216114], [-114.936699795372121, 31.393484605427595], [-114.771231859173483, 30.91361725516526], [-114.673899298951739, 30.162681179315985], [-114.330974494262918, 29.750432440707407], [-113.588875088335413, 29.061611436473008], [-113.424053107540516, 28.826173610951223], [-113.271969367305502, 28.754782619739892], [-113.140039435664363, 28.411289374295954], [-112.962298346796473, 28.425190334582503], [-112.761587083774856, 27.78021678314752], [-112.457910529411635, 27.525813706974752], [-112.24495195193677, 27.171726792910754], [-111.616489020619184, 26.662817287700474], [-111.284674648872993, 25.732589830014426], [-110.987819383572386, 25.294606228124557], [-110.71000688357131, 24.826004340101854], [-110.655048997828871, 24.298594672131113], [-110.17285620811343, 24.265547593680417], [-109.771847093528521, 23.811182562754194], [-109.409104377055698, 23.364672349536242], [-109.433392300232896, 23.185587673428696], [-109.85421932660168, 22.818271592698061], [-110.031391974714424, 22.823077500901199], [-110.295070970483636, 23.430973212166684], [-110.949501309028022, 24.000964260345988], [-111.670568407012681, 24.484423122652508], [-112.182035895621468, 24.73841278736716], [-112.148988817170817, 25.470125230404044], [-112.300710822379671, 26.012004299416613], [-112.777296719191526, 26.321959540303162], [-113.464670783321907, 26.768185533143416], [-113.596729906043805, 26.639459540304465], [-113.848936733844241, 26.900063788352437], [-114.465746629680027, 27.142090358991361], [-115.055142178184965, 27.722726752222904], [-114.982252570437382, 27.798200181585109], [-114.570365566854917, 27.741485297144884], [-114.199328782999231, 28.115002549750553], [-114.162018398884612, 28.566111965442296], [-114.931842210736605, 29.279479275015483], [-115.518653937626965, 29.556361599235395], [-115.887365282029563, 30.180793768834171], [-116.2583503894529, 30.836464341753572], [-116.721526252084956, 31.635743720012037], [-117.127759999999839, 32.53534], [-115.99135, 32.612390000000111], [-114.72139, 32.72083], [-114.815, 32.52528], [-113.30498, 32.03914], [-111.02361, 31.33472], [-109.035, 31.341940000000129], [-108.24194, 31.34222], [-108.24, 31.754853718166366], [-106.507589999999851, 31.75452], [-106.1429, 31.39995], [-105.63159, 31.08383], [-105.03737, 30.64402], [-104.70575, 30.12173], [-104.456969999999885, 29.57196], [-103.94, 29.27], [-103.11, 28.97], [-102.48, 29.76], [-101.6624, 29.7793], [-100.9576, 29.380710000000125], [-100.45584, 28.696120000000118], [-100.11, 28.11000000000012], [-99.52, 27.54], [-99.3, 26.84], [-99.019999999999897, 26.37], [-98.24, 26.06], [-97.529999999999887, 25.84], [-97.140008307670684, 25.869997463478395]]] } }, + { "type": "Feature", "properties": { "admin": "Macedonia", "name": "Macedonia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[20.59023, 41.85541], [20.717310000000108, 41.84711], [20.76216, 42.05186], [21.352700000000134, 42.2068], [21.576635989402117, 42.245224397061847], [21.917080000000105, 42.30364], [22.380525750424674, 42.320259507815074], [22.881373732197339, 41.999297186850349], [22.952377150166505, 41.337993882811176], [22.76177, 41.3048], [22.597308383889008, 41.130487168943198], [22.055377638444266, 41.149865831052686], [21.674160597426969, 40.93127452245794], [21.020040317476397, 40.842726955725873], [20.60518, 41.08622], [20.46315, 41.51509], [20.59023, 41.85541]]] } }, + { "type": "Feature", "properties": { "admin": "Mali", "name": "Mali", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-12.170750291380299, 14.616834214735503], [-11.834207526079465, 14.799096991428936], [-11.666078253617853, 15.388208319556295], [-11.349095017939502, 15.411256008358475], [-10.650791388379414, 15.132745876521422], [-10.086846482778212, 15.330485744686269], [-9.700255092802703, 15.264107367407359], [-9.550238409859388, 15.486496893775435], [-5.537744309908446, 15.501689764869253], [-5.315277268891931, 16.201853745991837], [-5.488522508150438, 16.325102037007962], [-5.971128709324247, 20.640833441647626], [-6.453786586930334, 24.956590684503418], [-4.92333736817423, 24.974574082940993], [-1.550054897457613, 22.792665920497377], [1.823227573259032, 20.61080943448604], [2.060990838233919, 20.142233384679482], [2.683588494486428, 19.856230170160114], [3.146661004253899, 19.693578599521441], [3.158133172222704, 19.057364203360034], [4.267419467800038, 19.155265204336995], [4.270209995143801, 16.852227484601212], [3.723421665063482, 16.184283759012612], [3.638258904646476, 15.568119818580453], [2.749992709981483, 15.409524847876693], [1.385528191746857, 15.323561102759168], [1.01578331869851, 14.968182277887944], [0.374892205414682, 14.928908189346128], [-0.26625729003058, 14.924308986872147], [-0.515854458000348, 15.116157741755725], [-1.066363491205663, 14.973815009007764], [-2.001035122068771, 14.559008287000887], [-2.191824510090384, 14.246417548067352], [-2.967694464520576, 13.798150336151506], [-3.103706834312759, 13.54126679122859], [-3.52280270019986, 13.337661647998612], [-4.006390753587225, 13.472485459848112], [-4.280405035814879, 13.228443508349738], [-4.427166103523802, 12.542645575404292], [-5.220941941743119, 11.713858954307224], [-5.197842576508648, 11.375145778850136], [-5.470564947929004, 10.951269842976044], [-5.404341599946973, 10.370736802609144], [-5.816926235365286, 10.222554633012191], [-6.050452032892266, 10.096360785355442], [-6.205222947606429, 10.524060777219132], [-6.493965013037267, 10.411302801958268], [-6.666460944027547, 10.430810655148447], [-6.850506557635057, 10.138993841996237], [-7.622759161804808, 10.147236232946792], [-7.89958980959237, 10.297382106970824], [-8.029943610048617, 10.206534939001711], [-8.335377163109738, 10.494811916541932], [-8.282357143578279, 10.792597357623842], [-8.407310756860026, 10.90925690352276], [-8.620321010767126, 10.810890814655181], [-8.581305304386772, 11.136245632364801], [-8.376304897484911, 11.393645941610627], [-8.786099005559462, 11.812560939984705], [-8.905264858424529, 12.088358059126433], [-9.127473517279581, 12.308060411015331], [-9.327616339546008, 12.334286200403451], [-9.567911749703212, 12.194243068892472], [-9.890992804392011, 12.060478623904968], [-10.165213792348835, 11.844083563682743], [-10.593223842806278, 11.923975328005977], [-10.870829637078211, 12.177887478072106], [-11.036555955438256, 12.211244615116513], [-11.297573614944508, 12.077971096235768], [-11.456168585648269, 12.076834214725336], [-11.513942836950587, 12.442987575729415], [-11.467899135778522, 12.754518947800973], [-11.553397793005427, 13.141213690641063], [-11.927716030311613, 13.422075100147392], [-12.124887457721256, 13.994727484589784], [-12.170750291380299, 14.616834214735503]]] } }, + { "type": "Feature", "properties": { "admin": "Myanmar", "name": "Myanmar", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[99.543309360759281, 20.186597601802056], [98.959675734454848, 19.752980658440944], [98.253723992915582, 19.708203029860041], [97.797782830804394, 18.627080389881751], [97.375896437573516, 18.445437730375811], [97.859122755934848, 17.567946071843657], [98.493761020911322, 16.837835598207928], [98.90334842325673, 16.177824204976115], [98.537375929765687, 15.308497422746081], [98.192074009191373, 15.123702500870349], [98.430819126379859, 14.622027696180831], [99.097755161538728, 13.827502549693275], [99.212011753336071, 13.269293728076462], [99.196353794351637, 12.804748439988666], [99.587286004639694, 11.892762762901695], [99.038120558673953, 10.960545762572435], [98.553550653073017, 9.932959906448543], [98.457174106848697, 10.675266018105146], [98.764545526120756, 11.441291612183745], [98.428338657629823, 12.032986761925681], [98.509574009192661, 13.122377631070675], [98.103603957107666, 13.64045970301285], [97.777732375075161, 14.837285874892638], [97.597071567782749, 16.100567938699765], [97.164539829499773, 16.928734442609336], [96.505768670642965, 16.427240505432845], [95.369352248112378, 15.714389960182599], [94.808404575584092, 15.803454291237637], [94.188804152404515, 16.037936102762014], [94.533485955791321, 17.277240301985724], [94.324816522196741, 18.213513902249893], [93.540988397193615, 19.366492621330021], [93.663254835996199, 19.726961574781992], [93.078277622452163, 19.855144965081973], [92.368553501355606, 20.670883287025344], [92.30323449093865, 21.475485337809815], [92.652257114637976, 21.324047552978481], [92.672720981825549, 22.041238918541247], [93.166127557348361, 22.278459580977099], [93.060294224014598, 22.703110663335565], [93.286326938859247, 23.043658352138998], [93.325187615942767, 24.078556423432197], [94.106741977925054, 23.850740871673477], [94.552657912171611, 24.675238348890328], [94.603249139385355, 25.162495428970399], [95.155153436262566, 26.001307277932078], [95.124767694074933, 26.573572089132295], [96.419365675850941, 27.264589341739221], [97.133999058015277, 27.08377350514996], [97.051988559968066, 27.699058946233144], [97.402561476636123, 27.88253611908544], [97.327113885490007, 28.261582749946331], [97.91198774616943, 28.335945136014338], [98.24623091023328, 27.747221381129172], [98.682690057370451, 27.508812160750612], [98.712093947344499, 26.74353587494026], [98.671838006589127, 25.918702500913518], [97.724609002679117, 25.083637193292994], [97.604719679761956, 23.897404690033039], [98.660262485755737, 24.063286037689959], [98.898749220782747, 23.142722072842524], [99.531992222087382, 22.949038804612574], [99.240898878987224, 22.118314317304577], [99.983489211021464, 21.742936713136398], [100.416537713627349, 21.558839423096607], [101.150032993578222, 21.849984442629015], [101.180005324307515, 21.436572984294024], [100.329101190189519, 20.786121731036229], [100.115987583417819, 20.41784963630818], [99.543309360759281, 20.186597601802056]]] } }, + { "type": "Feature", "properties": { "admin": "Montenegro", "name": "Montenegro", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[19.801613396898681, 42.500093492190835], [19.738051385179627, 42.688247382165564], [19.30449, 42.19574], [19.371770000000136, 41.87755], [19.16246, 41.95502], [18.88214, 42.28151], [18.45, 42.48], [18.56, 42.65], [18.70648, 43.20011], [19.03165, 43.43253], [19.21852, 43.52384], [19.48389, 43.35229], [19.63, 43.213779970270522], [19.95857, 43.10604], [20.3398, 42.89852], [20.25758, 42.81275], [20.0707, 42.58863], [19.801613396898681, 42.500093492190835]]] } }, + { "type": "Feature", "properties": { "admin": "Mongolia", "name": "Mongolia", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[87.751264276076697, 49.297197984405479], [88.805566847695488, 49.470520738312409], [90.713667433640666, 50.331811835321076], [92.234711541719662, 50.802170722041716], [93.104219191462661, 50.495290228876414], [94.147566359435615, 50.480536607457083], [94.815949334698701, 50.013433335970838], [95.814027947983973, 49.977466539095708], [97.259727817781396, 49.726060695995727], [98.231761509191543, 50.422400621128737], [97.825739780674283, 51.010995184933165], [98.861490513100307, 52.047366034546684], [99.981732212323507, 51.634006252643978], [100.889480421962588, 51.516855780638316], [102.065222609467298, 51.25992055928311], [102.255908644624299, 50.510560614618669], [103.676545444760194, 50.089966132195109], [104.621552362081687, 50.275329494826067], [105.886591424586726, 50.406019192092209], [106.888804152455336, 50.274295966180219], [107.868175897250936, 49.793705145865808], [108.475167270951275, 49.282547715850725], [109.402449171996636, 49.292960516957535], [110.662010532678764, 49.130128078805861], [111.581230910286607, 49.377968248077678], [112.897739699354361, 49.543565375356984], [114.362456496235239, 50.248302720737399], [114.962109816550154, 50.140247300815112], [115.485695428531386, 49.805177313834591], [116.678800897286152, 49.888531399121376], [116.191802199367544, 49.134598090199091], [115.485282017073018, 48.135382595403428], [115.742837355615748, 47.726544501326273], [116.308952671373206, 47.853410142602826], [117.295507440257396, 47.69770905210742], [118.064142694166691, 48.066730455103674], [118.866574334794933, 47.747060044946153], [119.772823927897477, 47.048058783550125], [119.66326989143873, 46.692679958678909], [118.874325799638711, 46.805412095723646], [117.421701287914175, 46.672732855814253], [116.717868280098841, 46.388202419615205], [115.985096470200062, 45.727235012385989], [114.46033165899604, 45.339816799493811], [113.463906691544139, 44.808893134127111], [112.436062453258785, 45.011645616224278], [111.873306105600278, 45.102079372735055], [111.348376906379428, 44.457441718110083], [111.667737257943202, 44.073175767587706], [111.829587843881342, 43.743118394539515], [111.129682244920218, 43.406834011400136], [110.412103306115256, 42.871233628911014], [109.243595819131428, 42.519446316084093], [107.744772576937933, 42.481515814781865], [106.129315627061658, 42.134327704428898], [104.964993931093446, 41.597409572916334], [104.522281935648977, 41.908346666016541], [103.312278273534787, 41.907468166667591], [101.833040399179922, 42.51487295182627], [100.845865513108237, 42.663804429691439], [99.515817498780009, 42.524691473961717], [97.451757440177985, 42.748889675460013], [96.349395786527793, 42.725635280928678], [95.762454868556674, 43.319449164394598], [95.306875441471504, 44.241330878265458], [94.688928664125299, 44.352331854828414], [93.480733677141274, 44.975472113619951], [92.133890822318193, 45.115075995456444], [90.945539585334288, 45.286073309910265], [90.585768263718265, 45.719716091487513], [90.970809360724985, 46.888146063822923], [90.280825636763893, 47.693549099307923], [88.854297723346733, 48.06908173277295], [88.013832228551721, 48.599462795600601], [87.751264276076697, 49.297197984405479]]] } }, + { "type": "Feature", "properties": { "admin": "Mozambique", "name": "Mozambique", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[34.559989047999345, -11.520020033415923], [35.312397902169032, -11.439146416879145], [36.514081658684248, -11.720938002166733], [36.775150994622791, -11.594537448780804], [37.471284214026596, -11.568750909067157], [37.827644891111383, -11.268769219612834], [38.427556593587745, -11.285202325081654], [39.521029900883768, -10.896853936408224], [40.316588576017182, -10.317096042525696], [40.478387485523022, -10.765440769089992], [40.437253045418672, -11.761710707245014], [40.560811395028558, -12.639176527561023], [40.599620395679743, -14.201975192931858], [40.775475294768988, -14.691764418194239], [40.477250604012596, -15.406294447493968], [40.089263950365208, -16.100774021064456], [39.452558628097044, -16.720891208566936], [38.53835086442151, -17.101023044505954], [37.411132846838875, -17.586368096591233], [36.281279331209348, -18.659687595293445], [35.896496616364054, -18.842260430580634], [35.198399692533137, -19.552811374593887], [34.786383497870041, -19.784011732667732], [34.701892531072836, -20.497043145431007], [35.176127150215358, -21.254361260668407], [35.373427768705731, -21.840837090748874], [35.385848253705397, -22.14], [35.562545536369079, -22.09], [35.533934767404297, -23.070787855727751], [35.371774122872374, -23.535358982031692], [35.607470330555621, -23.706563002214676], [35.458745558419615, -24.122609958596545], [35.040734897610655, -24.478350518493798], [34.215824008935463, -24.816314385682652], [33.013210076639005, -25.357573337507731], [32.574632195777859, -25.727318210556088], [32.660363396950082, -26.148584486599443], [32.915955031065685, -26.215867201443459], [32.830120477028878, -26.74219166433619], [32.071665480281062, -26.733820082304902], [31.985779249811962, -26.29177988048022], [31.837777947728057, -25.843331801051342], [31.752408481581874, -25.484283949487406], [31.930588820124242, -24.369416599222532], [31.670397983534645, -23.658969008073861], [31.191409132621278, -22.251509698172395], [32.244988234188007, -21.116488539313689], [32.508693068173436, -20.395292250248303], [32.659743279762573, -20.30429005298231], [32.772707960752619, -19.715592136313294], [32.611994256324884, -19.419382826416268], [32.654885695127142, -18.672089939043492], [32.849860874164385, -17.979057305577175], [32.847638787575839, -16.713398125884613], [32.328238966610222, -16.392074069893749], [31.852040643040592, -16.319417006091374], [31.636498243951188, -16.071990248277881], [31.173063999157673, -15.860943698797868], [30.338954705534537, -15.880839125230242], [30.274255812305103, -15.507786960515208], [30.179481235481827, -14.796099134991525], [33.214024692525207, -13.97186003993615], [33.789700148256678, -14.451830743063068], [34.064825473778619, -14.359950046448118], [34.459633416488536, -14.613009535381421], [34.517666049952304, -15.013708591372609], [34.307291294092089, -15.478641452702592], [34.381291945134045, -16.183559665596039], [35.033810255683527, -16.801299737213089], [35.339062941231639, -16.107440280830108], [35.771904738108347, -15.896858819240721], [35.686845330555926, -14.611045830954328], [35.267956170398001, -13.887834161029563], [34.907151320136158, -13.565424899960565], [34.559989047999345, -13.579997653866872], [34.280006137841973, -12.280025323132504], [34.559989047999345, -11.520020033415923]]] } }, + { "type": "Feature", "properties": { "admin": "Mauritania", "name": "Mauritania", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-12.170750291380299, 14.616834214735503], [-12.830658331747513, 15.303691514542942], [-13.43573767745306, 16.039383042866188], [-14.099521450242175, 16.304302273010489], [-14.577347581428977, 16.598263658102805], [-15.135737270558813, 16.587282416240779], [-15.623666144258689, 16.369337063049809], [-16.120690070041928, 16.45566254319338], [-16.463098110407881, 16.135036119038457], [-16.549707810929061, 16.673892116761959], [-16.270551723688353, 17.166962795474866], [-16.146347418674846, 18.108481553616652], [-16.256883307347163, 19.096715806550304], [-16.377651129613266, 19.593817246981981], [-16.277838100641514, 20.092520656814695], [-16.536323614965465, 20.567866319251486], [-17.063423224342568, 20.99975210213082], [-16.845193650773989, 21.333323472574875], [-12.929101935263528, 21.327070624267559], [-13.118754441774708, 22.771220201096249], [-12.874221564169574, 23.284832261645171], [-11.93722449385332, 23.374594224536164], [-11.969418911171159, 25.933352769468261], [-8.687293667017398, 25.881056219988899], [-8.684399786809051, 27.395744126895998], [-4.92333736817423, 24.974574082940993], [-6.453786586930334, 24.956590684503418], [-5.971128709324247, 20.640833441647626], [-5.488522508150438, 16.325102037007962], [-5.315277268891931, 16.201853745991837], [-5.537744309908446, 15.501689764869253], [-9.550238409859388, 15.486496893775435], [-9.700255092802703, 15.264107367407359], [-10.086846482778212, 15.330485744686269], [-10.650791388379414, 15.132745876521422], [-11.349095017939502, 15.411256008358475], [-11.666078253617853, 15.388208319556295], [-11.834207526079465, 14.799096991428936], [-12.170750291380299, 14.616834214735503]]] } }, + { "type": "Feature", "properties": { "admin": "Malawi", "name": "Malawi", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[34.559989047999345, -11.520020033415923], [34.280006137841973, -12.280025323132504], [34.559989047999345, -13.579997653866872], [34.907151320136158, -13.565424899960565], [35.267956170398001, -13.887834161029563], [35.686845330555926, -14.611045830954328], [35.771904738108347, -15.896858819240721], [35.339062941231639, -16.107440280830108], [35.033810255683527, -16.801299737213089], [34.381291945134045, -16.183559665596039], [34.307291294092089, -15.478641452702592], [34.517666049952304, -15.013708591372609], [34.459633416488536, -14.613009535381421], [34.064825473778619, -14.359950046448118], [33.789700148256678, -14.451830743063068], [33.214024692525207, -13.97186003993615], [32.688165317523122, -13.712857761289273], [32.991764357237876, -12.783870537978272], [33.306422153463068, -12.435778090060214], [33.114289178201908, -11.607198174692311], [33.315310499817279, -10.796549981329695], [33.485687697083584, -10.525558770391111], [33.231387973775291, -9.676721693564799], [32.759375441221316, -9.230599053589058], [33.739729038230443, -9.417150974162722], [33.940837724096532, -9.693673841980292], [34.280006137841973, -10.159999688358402], [34.559989047999345, -11.520020033415923]]] } }, + { "type": "Feature", "properties": { "admin": "Malaysia", "name": "Malaysia", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[101.075515578213299, 6.204867051615891], [101.154218784593809, 5.691384182147713], [101.814281854258013, 5.810808417174228], [102.141186964936423, 6.221636053894655], [102.371147088635212, 6.12820506431096], [102.961705356866673, 5.524495144061077], [103.381214634212142, 4.855001125503746], [103.438575474056165, 4.181605536308381], [103.332122023534851, 3.72669790284297], [103.42942874554052, 3.382868760589019], [103.502447544368877, 2.791018581550204], [103.854674106870334, 2.515454006353763], [104.247931756611479, 1.631141058759055], [104.228811476663523, 1.293048000489534], [103.519707472754433, 1.226333726400682], [102.573615350354771, 1.967115383304744], [101.39063846232915, 2.760813706875623], [101.273539666755838, 3.27029165284118], [100.69543541870668, 3.939139715994869], [100.557407668055092, 4.767280381688279], [100.19670617065772, 5.312492580583678], [100.306260207116509, 6.040561835143875], [100.085756870527078, 6.46448944745029], [100.259596388756918, 6.64282481528957], [101.075515578213299, 6.204867051615891]]], [[[118.618320754064825, 4.47820241944754], [117.882034946770162, 4.137551377779487], [117.01521447150634, 4.306094061699468], [115.86551720587677, 4.306559149590156], [115.51907840379198, 3.169238389494395], [115.134037306785231, 2.821481838386219], [114.621355422017473, 1.430688177898886], [113.805849644019531, 1.217548732911041], [112.859809198052176, 1.497790025229946], [112.380251906383648, 1.410120957846757], [111.797548455860408, 0.904441229654651], [111.159137811326559, 0.976478176269509], [110.514060907027101, 0.773131415200993], [109.830226678508836, 1.338135687664191], [109.663260125773718, 2.006466986494984], [110.396135288537039, 1.663774725751395], [111.168852980597478, 1.850636704918784], [111.370081007942076, 2.697303371588872], [111.796928338672842, 2.885896511238073], [112.995614862115247, 3.102394924324869], [113.712935418758718, 3.893509426281127], [114.204016554828399, 4.525873928236819], [114.659595981913526, 4.00763682699781], [114.869557326315373, 4.348313706881952], [115.347460972150671, 4.316636053887009], [115.405700311343594, 4.955227565933824], [115.450710483869798, 5.447729803891561], [116.220741001450961, 6.143191229675621], [116.725102980619752, 6.924771429873998], [117.129626092600461, 6.928052883324566], [117.643393182446303, 6.422166449403305], [117.689075148592337, 5.98749013918018], [118.347691278152197, 5.708695786965462], [119.181903924639926, 5.407835598162249], [119.110693800941718, 5.016128241389864], [118.439727004064082, 4.966518866389619], [118.618320754064825, 4.47820241944754]]]] } }, + { "type": "Feature", "properties": { "admin": "Namibia", "name": "Namibia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[16.344976840895239, -28.576705010697697], [15.601818068105812, -27.821247247022797], [15.210472446359457, -27.09095590587404], [14.989710727608548, -26.117371921495153], [14.74321414557633, -25.392920017195376], [14.40814415859583, -23.85301401132984], [14.385716586981145, -22.656652927340687], [14.257714064194172, -22.111208184499951], [13.868642205468657, -21.699036960539974], [13.352497999737437, -20.872834161057497], [12.82684533046449, -19.673165785401661], [12.608564080463617, -19.045348809487695], [11.794918654028063, -18.069129327061912], [11.734198846085118, -17.30188933682447], [12.215461460019352, -17.11166838955808], [12.814081251688405, -16.941342868724067], [13.462362094789963, -16.971211846588769], [14.058501417709007, -17.42338062914266], [14.209706658595021, -17.353100681225715], [18.26330936043416, -17.309950860262003], [18.956186964603599, -17.789094740472255], [21.377176141045563, -17.930636488519688], [23.215048455506057, -17.52311614346598], [24.033861525170771, -17.29584319424632], [24.6823490740015, -17.35341073981947], [25.076950310982255, -17.578823337476617], [25.084443393664564, -17.661815687737366], [24.520705193792534, -17.887124932529932], [24.217364536239209, -17.889347019118485], [23.579005568137713, -18.281261081620055], [23.196858351339298, -17.869038181227783], [21.655040317478971, -18.219146010005222], [20.910641310314531, -18.252218926672018], [20.881134067475866, -21.814327080983144], [19.895457797940672, -21.849156996347865], [19.895767856534427, -24.767790215760588], [19.89473432788861, -28.461104831660769], [19.002127312911082, -28.972443129188857], [18.464899122804745, -29.045461928017271], [17.836151971109526, -28.856377862261311], [17.387497185951499, -28.783514092729774], [17.218928663815401, -28.355943291946804], [16.824017368240899, -28.082161553664466], [16.344976840895239, -28.576705010697697]]] } }, + { "type": "Feature", "properties": { "admin": "New Caledonia", "name": "New Caledonia", "continent": "Australia" }, "geometry": { "type": "Polygon", "coordinates": [[[165.779989862326346, -21.080004978115621], [166.599991489933814, -21.700018812753523], [167.120011428086883, -22.159990736583488], [166.74003462144475, -22.399976088146943], [166.189732293968632, -22.129708347260447], [165.474375441752159, -21.679606621998229], [164.829815301775653, -21.149819838141948], [164.16799523341362, -20.444746595951624], [164.029605747735957, -20.105645847252347], [164.459967075862664, -20.120011895429492], [165.020036249041993, -20.459991143477726], [165.460009393575064, -20.800022067958253], [165.779989862326346, -21.080004978115621]]] } }, + { "type": "Feature", "properties": { "admin": "Niger", "name": "Niger", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[2.154473504249949, 11.940150051313422], [2.177107781593917, 12.625017808477534], [1.024103224297619, 12.851825669806598], [0.993045688490156, 13.335749620003865], [0.429927605805517, 13.988733018443893], [0.295646396495215, 14.444234930880663], [0.374892205414767, 14.928908189346144], [1.015783318698481, 14.968182277887989], [1.385528191746971, 15.323561102759237], [2.74999270998154, 15.409524847876751], [3.63825890464659, 15.56811981858044], [3.723421665063596, 16.184283759012654], [4.270209995143886, 16.852227484601311], [4.267419467800095, 19.155265204337123], [5.677565952180712, 19.601206976799794], [8.572893100629868, 21.565660712159225], [11.999505649471697, 23.471668402596432], [13.581424594790459, 23.040506089769274], [14.143870883855239, 22.491288967371126], [14.8513, 22.862950000000119], [15.096887648181847, 21.308518785074902], [15.471076694407314, 21.048457139565979], [15.487148064850143, 20.730414537025634], [15.90324669766431, 20.387618923417499], [15.68574059414777, 19.957180080642384], [15.300441114979716, 17.927949937405], [15.247731154041842, 16.627305813050778], [13.972201775781681, 15.684365953021139], [13.540393507550785, 14.36713369390122], [13.956698846094124, 13.996691189016925], [13.954476759505607, 13.353448798063765], [14.595781284247604, 13.330426947477859], [14.495787387762899, 12.859396267137353], [14.213530714584746, 12.80203542729333], [14.181336297266906, 12.483656927943169], [13.995352817448289, 12.4615652531383], [13.318701613018558, 13.55635630945795], [13.083987257548809, 13.596147162322492], [12.302071160540546, 13.037189032437535], [11.527803175511504, 13.328980007373556], [10.989593133191532, 13.387322699431191], [10.701031935273816, 13.246917832894038], [10.114814487354748, 13.277251898649464], [9.524928012743088, 12.85110219975456], [9.014933302454436, 12.826659247280414], [7.804671258178869, 13.343526923063731], [7.330746697630046, 13.098038031461213], [6.82044192874781, 13.115091254117598], [6.445426059605721, 13.492768459522718], [5.443058302440135, 13.865923977102225], [4.368343540066006, 13.747481594289408], [4.107945997747378, 13.531215725147941], [3.967282749048933, 12.956108710171574], [3.680633579125924, 12.552903347214167], [3.611180454125587, 11.660167141155965], [2.848643019226585, 12.235635891158207], [2.490163608418015, 12.233052069543588], [2.154473504249949, 11.940150051313422]]] } }, + { "type": "Feature", "properties": { "admin": "Nigeria", "name": "Nigeria", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[8.500287713259693, 4.771982937026847], [7.462108188515939, 4.41210826254624], [7.082596469764438, 4.464689032403228], [6.698072137080598, 4.240594183769516], [5.898172641634686, 4.262453314628984], [5.362804803090881, 4.887970689305957], [5.033574252959368, 5.611802476418233], [4.325607130560683, 6.270651149923466], [3.574180128604552, 6.258300482605717], [2.691701694356254, 6.258817246928628], [2.74906253420022, 7.870734361192886], [2.723792758809509, 8.506845404489708], [2.912308383810255, 9.13760793704432], [3.220351596702101, 9.4441525333997], [3.705438266625918, 10.063210354040207], [3.600070021182801, 10.332186184119406], [3.797112257511713, 10.734745591673104], [3.572216424177469, 11.327939357951516], [3.611180454125558, 11.660167141155966], [3.68063357912581, 12.552903347214222], [3.967282749048848, 12.956108710171572], [4.107945997747321, 13.531215725147829], [4.368343540066063, 13.747481594289324], [5.443058302440163, 13.865923977102295], [6.445426059605636, 13.492768459522676], [6.820441928747753, 13.115091254117514], [7.330746697630017, 13.098038031461199], [7.804671258178784, 13.343526923063745], [9.014933302454462, 12.826659247280427], [9.524928012742945, 12.851102199754477], [10.114814487354689, 13.277251898649409], [10.701031935273702, 13.246917832894081], [10.989593133191532, 13.387322699431108], [11.527803175511393, 13.328980007373584], [12.302071160540521, 13.037189032437521], [13.083987257548866, 13.596147162322563], [13.318701613018558, 13.556356309457824], [13.995352817448346, 12.461565253138343], [14.181336297266792, 12.483656927943112], [14.57717776862253, 12.085360826053501], [14.468192172918974, 11.90475169519341], [14.415378859116682, 11.572368882692071], [13.572949659894558, 10.798565985553564], [13.308676385153914, 10.160362046748926], [13.1675997249971, 9.64062632897341], [12.955467970438971, 9.417771714714702], [12.753671502339214, 8.717762762888993], [12.218872104550597, 8.305824082874322], [12.063946160539556, 7.799808457872301], [11.839308709366801, 7.397042344589434], [11.745774366918509, 6.981382961449753], [11.058787876030349, 6.644426784690593], [10.497375115611417, 7.055357774275562], [10.118276808318255, 7.038769639509879], [9.522705926154398, 6.453482367372116], [9.233162876023043, 6.444490668153334], [8.757532993208626, 5.47966583904791], [8.500287713259693, 4.771982937026847]]] } }, + { "type": "Feature", "properties": { "admin": "Nicaragua", "name": "Nicaragua", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-85.712540452807289, 11.088444932494822], [-86.058488328785245, 11.40343862552994], [-86.525849982432931, 11.806876532432593], [-86.7459915839963, 12.143961900272483], [-87.167516242201131, 12.458257961471656], [-87.668493415054698, 12.909909979702629], [-87.557466600275603, 13.064551703336061], [-87.392386237319201, 12.914018256069836], [-87.316654425795463, 12.984685777228972], [-87.005769009127562, 13.025794379117157], [-86.880557013684339, 13.254204209847241], [-86.733821784191576, 13.263092556201441], [-86.755086636079696, 13.754845485890909], [-86.520708177419877, 13.778487453664436], [-86.312142096689911, 13.771356106008167], [-86.096263800790581, 14.038187364147245], [-85.801294725268576, 13.836054999237586], [-85.698665330736901, 13.960078436738083], [-85.514413011400222, 14.079011745657834], [-85.165364549484792, 14.354369615125076], [-85.148750576502948, 14.560196844943615], [-85.052787441736925, 14.551541042534719], [-84.924500698572388, 14.790492865452348], [-84.820036790694346, 14.819586696832669], [-84.649582078779602, 14.66680532476175], [-84.449335903648588, 14.621614284722494], [-84.228341640952394, 14.748764146376654], [-83.975721401693576, 14.749435939996458], [-83.628584967772895, 14.880073960830298], [-83.489988776366104, 15.016267198135534], [-83.147219000974104, 14.995829169164109], [-83.233234422523907, 14.8998660343981], [-83.28416154654758, 14.676623846897197], [-83.182126430987267, 14.310703029838447], [-83.412499966144424, 13.970077826386554], [-83.519831916014667, 13.56769928634588], [-83.55220720084553, 13.127054348193084], [-83.498515387694255, 12.869292303921226], [-83.473323126951968, 12.419087225794424], [-83.626104499022887, 12.320850328007563], [-83.719613003255034, 11.893124497927724], [-83.650857510090702, 11.629032090700116], [-83.855470343750369, 11.373311265503785], [-83.808935716471538, 11.103043524617274], [-83.655611741861563, 10.938764146361418], [-83.895054490885926, 10.726839097532444], [-84.190178595704822, 10.793450018756671], [-84.355930752281026, 10.999225572142901], [-84.673069017256239, 11.082657172078139], [-84.903003302738924, 10.952303371621895], [-85.561851976244171, 11.217119248901593], [-85.712540452807289, 11.088444932494822]]] } }, + { "type": "Feature", "properties": { "admin": "Netherlands", "name": "Netherlands", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[6.074182570020922, 53.51040334737813], [6.905139601274128, 53.482162177130633], [7.092053256873895, 53.14404328064488], [6.842869500362381, 52.228440253297542], [6.589396599970825, 51.85202912048338], [5.988658074577812, 51.85161570902504], [6.156658155958779, 50.803721015010574], [5.60697594567, 51.037298488969768], [4.973991326526913, 51.475023708698124], [4.047071160507527, 51.267258612668556], [3.314971144228536, 51.345755113319903], [3.830288527043137, 51.620544542031936], [4.705997348661184, 53.091798407597757], [6.074182570020922, 53.51040334737813]]] } }, + { "type": "Feature", "properties": { "admin": "Norway", "name": "Norway", "continent": "Europe" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[28.165547316202911, 71.185474351680497], [31.293418409965472, 70.453787746859902], [30.005435011522785, 70.186258856884876], [31.101078728975118, 69.558080145944857], [29.399580519332879, 69.156916002063056], [28.591929559043187, 69.064776923286686], [29.015572950971968, 69.76649119737796], [27.732292107867885, 70.164193020296281], [26.179622023226298, 69.825298977326142], [25.689212680776389, 69.092113755968995], [24.735679152126714, 68.649556789821432], [23.662049594830759, 68.891247463650515], [22.356237827247405, 68.841741441514941], [21.244936150810723, 69.370443020293109], [20.645592889089581, 69.106247260200846], [20.02526899585791, 69.065138658312705], [19.878559604581248, 68.407194322372604], [17.993868442464386, 68.567391262477329], [17.729181756265344, 68.01055186631622], [16.768878614985535, 68.013936672631374], [16.108712192456832, 67.302455552836889], [15.108411492583055, 66.193866889095418], [13.555689731509087, 64.787027696381458], [13.919905226302202, 64.445420640716108], [13.571916131248766, 64.049114081469654], [12.57993533697393, 64.066218980558332], [11.930569288794228, 63.128317572676977], [11.992064243221531, 61.800362453856557], [12.63114668137524, 61.293571682370079], [12.300365838274896, 60.117932847730046], [11.468271925511173, 59.432393296945989], [11.027368605196925, 58.856149400459394], [10.356556837616095, 59.469807033925363], [8.382000359743641, 58.313288479233265], [7.048748406613297, 58.078884182357271], [5.665835402050418, 58.588155422593658], [5.308234490590733, 59.663231919993805], [4.992078077829005, 61.97099803328426], [5.912900424837885, 62.614472968182682], [8.553411085655766, 63.454008287196459], [10.527709181366784, 64.486038316497471], [12.358346795306371, 65.879725857193151], [14.7611458675816, 67.810641587995121], [16.435927361728968, 68.563205471461671], [19.184028354578512, 69.817444159617807], [21.378416375420606, 70.255169379346043], [23.02374230316158, 70.202071845166259], [24.546543409938515, 71.030496731237221], [26.370049676221807, 70.986261705195361], [28.165547316202911, 71.185474351680497]]], [[[24.72412, 77.85385], [22.49032, 77.44493], [20.72601, 77.67704], [21.41611, 77.93504], [20.8119, 78.25463], [22.88426, 78.45494], [23.28134, 78.07954], [24.72412, 77.85385]]], [[[18.25183, 79.70175], [21.54383, 78.95611], [19.02737, 78.5626], [18.47172, 77.82669], [17.59441, 77.63796], [17.1182, 76.80941], [15.91315, 76.77045], [13.76259, 77.38035], [14.66956, 77.73565], [13.1706, 78.02493], [11.22231, 78.8693], [10.44453, 79.65239], [13.17077, 80.01046], [13.71852, 79.66039], [15.14282, 79.67431], [15.52255, 80.01608], [16.99085, 80.05086], [18.25183, 79.70175]]], [[[25.447625359811887, 80.407340399894494], [27.407505730913492, 80.056405748200447], [25.924650506298171, 79.517833970854539], [23.024465773213613, 79.40001170522909], [20.075188429451877, 79.566823228667232], [19.897266473070907, 79.842361965647498], [18.46226362475792, 79.859880276194403], [17.368015170977454, 80.318896186027004], [20.455992059010693, 80.598155626132225], [21.907944777115397, 80.357679348462071], [22.919252557067431, 80.657144273593488], [25.447625359811887, 80.407340399894494]]]] } }, + { "type": "Feature", "properties": { "admin": "Nepal", "name": "Nepal", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[88.120440708369841, 27.876541652939586], [88.043132765661198, 27.445818589786818], [88.174804315140904, 26.810405178325944], [88.060237664749806, 26.414615383402484], [87.22747195836628, 26.39789805755607], [86.024392938179147, 26.630984605408567], [85.25177859898335, 26.726198431906337], [84.675017938173767, 27.234901231387528], [83.304248895199535, 27.364505723575554], [81.999987420584958, 27.925479234319987], [81.057202589851997, 28.416095282499036], [80.088424513676259, 28.794470119740136], [80.476721225917373, 29.729865220655334], [81.11125613802929, 30.183480943313398], [81.525804477874729, 30.422716986608627], [82.327512648450863, 30.115268052688126], [83.337115106137176, 29.463731594352193], [83.898992954446712, 29.320226141877654], [84.234579705750136, 28.839893703724691], [85.011638218123025, 28.642773952747337], [85.823319940131498, 28.203575954698699], [86.954517043000592, 27.97426178640351], [88.120440708369841, 27.876541652939586]]] } }, + { "type": "Feature", "properties": { "admin": "New Zealand", "name": "New Zealand", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[173.020374790740703, -40.919052422856417], [173.247234328502003, -41.331998793300777], [173.958405389702875, -40.926700534835604], [174.2475867048081, -41.349155368821663], [174.248516880589449, -41.770008233406749], [173.876446568087886, -42.233184096038819], [173.222739699595621, -42.970038344088557], [172.711246372770717, -43.372287693048492], [173.080112746470206, -43.853343601253577], [172.308583612352464, -43.865694268571332], [171.452925246463622, -44.24251881284372], [171.185137974327233, -44.897104180684885], [170.616697219116588, -45.908928724959701], [169.83142215400926, -46.355774834987585], [169.332331170934253, -46.641235446967848], [168.411353794628525, -46.619944756863582], [167.763744745146823, -46.290197442409195], [166.676886021184202, -46.219917494492236], [166.509144321964669, -45.852704766626204], [167.046424188503238, -45.110941257508664], [168.303763462596862, -44.12397307716612], [168.949408807651508, -43.93581918719142], [169.667814569373149, -43.555325616226334], [170.524919875366152, -43.031688327812823], [171.125089960004004, -42.512753594737781], [171.569713983443194, -41.767424411792128], [171.948708937871885, -41.514416599291145], [172.097227004278722, -40.956104424809674], [172.798579543343948, -40.493962090823466], [173.020374790740703, -40.919052422856417]]], [[[174.612008905330526, -36.156397393540537], [175.336615838927173, -37.209097995758263], [175.3575964704375, -36.52619394302112], [175.808886753642469, -36.798942152657681], [175.958490025127475, -37.555381768546063], [176.763195428776555, -37.881253350578696], [177.438813104560495, -37.961248467766488], [178.010354445708657, -37.579824721020124], [178.517093540762801, -37.695373223624792], [178.274731073313802, -38.582812595373092], [177.970460239979332, -39.166342868812968], [177.206992629299123, -39.145775648760839], [176.939980503647007, -39.449736423501562], [177.032946405340113, -39.879942722331471], [176.8858236026052, -40.06597787858216], [176.508017206119348, -40.60480803808958], [176.012440220440283, -41.289624118821493], [175.239567499082966, -41.688307793953236], [175.067898391009408, -41.425894870775075], [174.650972935278418, -41.281820977545443], [175.227630243223615, -40.459235528323397], [174.900156691789959, -39.908933200847216], [173.824046665743992, -39.508854262043506], [173.852261997775315, -39.146602471677461], [174.57480187408035, -38.797683200842748], [174.743473749081033, -38.027807712558378], [174.69701663645057, -37.381128838857954], [174.292028436579187, -36.71109221776144], [174.319003534235549, -36.534823907213884], [173.840996535535766, -36.121980889634109], [173.05417117745958, -35.237125339500331], [172.636005487353714, -34.529106540669382], [173.007042271209457, -34.450661716450334], [173.551298456107475, -35.006183363587958], [174.329390497126241, -35.265495700828616], [174.612008905330526, -36.156397393540537]]]] } }, + { "type": "Feature", "properties": { "admin": "Oman", "name": "Oman", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[58.861141391846573, 21.114034532144299], [58.487985874266961, 20.428985907467101], [58.03431847517659, 20.481437486243347], [57.826372511634098, 20.24300242764863], [57.66576216007094, 19.736004950433109], [57.788700392493368, 19.067570298737646], [57.694390903560667, 18.944709580963799], [57.2342639504338, 18.947991034414255], [56.609650913321971, 18.574267076079476], [56.512189162019482, 18.087113348863934], [56.283520949128011, 17.876066799383945], [55.661491733630683, 17.884128322821535], [55.269939406155189, 17.632309068263194], [55.274900343655091, 17.228354397037659], [54.791002231674113, 16.950696926333357], [54.239252964093751, 17.04498057704998], [53.57050825380459, 16.707662665264674], [53.108572625547502, 16.651051133688977], [52.782184279192066, 17.349742336491229], [52.000009800022227, 19.000003363516068], [54.999981723862405, 19.999994004796118], [55.666659376859869, 22.000001125572307], [55.208341098863187, 22.708329982997007], [55.234489373602869, 23.110992743415348], [55.52584109886449, 23.524869289640911], [55.528631626208288, 23.933604030853498], [55.981213820220503, 24.130542914317854], [55.80411868675624, 24.269604193615287], [55.88623253766805, 24.920830593357486], [56.396847365143984, 24.924732163995508], [56.845140415276049, 24.241673081961487], [57.403452589757428, 23.878594468678834], [58.136947869708322, 23.747930609628835], [58.729211460205427, 23.565667832935414], [59.180501743410346, 22.992395331305456], [59.450097690677033, 22.660270900965592], [59.80806033716285, 22.533611965418199], [59.806148309168087, 22.31052480721419], [59.442191196536399, 21.71454051359208], [59.282407667889871, 21.433885809814875], [58.861141391846573, 21.114034532144299]]], [[[56.391421339753393, 25.895990708921254], [56.261041701080913, 25.714606431576748], [56.070820753814544, 26.055464178973946], [56.362017449779344, 26.395934353128947], [56.485679152253809, 26.309117946878665], [56.391421339753393, 25.895990708921254]]]] } }, + { "type": "Feature", "properties": { "admin": "Pakistan", "name": "Pakistan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[75.158027785140902, 37.13303091078911], [75.896897414050116, 36.666806138651829], [76.192848341785677, 35.898403428687821], [77.837450799474553, 35.494009507787759], [76.871721632804011, 34.653544012992732], [75.757060988268321, 34.504922593721311], [74.240202671204955, 34.748887030571247], [73.749948358051952, 34.317698879527846], [74.104293654277328, 33.441473293586846], [74.451559279278698, 32.764899603805489], [75.258641798813187, 32.271105455040491], [74.405928989564998, 31.692639471965272], [74.421380242820263, 30.97981476493117], [73.450638462217412, 29.976413479119863], [72.823751662084689, 28.961591701772047], [71.777665643200308, 27.913180243434521], [70.61649620960192, 27.989196275335861], [69.514392938113119, 26.940965684511365], [70.168926629522005, 26.491871649678835], [70.282873162725579, 25.722228705339823], [70.844699334602822, 25.215102037043511], [71.0432401874682, 24.356523952730193], [68.842599318318761, 24.359133612560932], [68.176645135373377, 23.691965033456704], [67.443666619745457, 23.944843654876983], [67.145441928989058, 24.663611151624639], [66.37282758979326, 25.425140896093847], [64.530407749291115, 25.237038682551425], [62.905700718034595, 25.218409328710202], [61.497362908784183, 25.078237006118492], [61.874187453056535, 26.239974880472097], [63.316631707619578, 26.756532497661659], [63.23389773952028, 27.217047024030702], [62.755425652929851, 27.378923448184985], [62.727830438085974, 28.259644883735383], [61.771868117118615, 28.699333807890792], [61.369308709564926, 29.303276272085917], [60.874248488208778, 29.829238999952604], [62.549856805272775, 29.318572496044304], [63.550260858011164, 29.468330796826162], [64.148002150331237, 29.340819200145965], [64.350418735618504, 29.560030625928089], [65.046862013616092, 29.472180691031902], [66.346472609324408, 29.88794342703617], [66.38145755398601, 30.738899237586448], [66.938891229118454, 31.304911200479346], [67.683393589147457, 31.303154201781414], [67.792689243444769, 31.582930406209623], [68.556932000609308, 31.713310044882011], [68.926676873657655, 31.620189113892064], [69.317764113242546, 31.901412258424436], [69.262522007122541, 32.501944078088293], [69.687147251264847, 33.105498969041228], [70.323594191371583, 33.358532619758385], [69.93054324735958, 34.020120144175102], [70.881803012988385, 33.988855902638512], [71.156773309213449, 34.348911444632144], [71.115018751921625, 34.733125718722228], [71.613076206350698, 35.153203436822857], [71.498767938121077, 35.650563259415996], [71.262348260385735, 36.074387518857797], [71.846291945283909, 36.509942328429851], [72.920024855444453, 36.720007025696312], [74.067551710917812, 36.836175645488446], [74.575892775372964, 37.02084137628345], [75.158027785140902, 37.13303091078911]]] } }, + { "type": "Feature", "properties": { "admin": "Panama", "name": "Panama", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-77.881571417945239, 7.223771267114783], [-78.214936082660103, 7.512254950384159], [-78.429160732726061, 8.052041123888925], [-78.182095709938608, 8.319182440621772], [-78.43546525746568, 8.387705389840788], [-78.622120530903928, 8.718124497915026], [-79.120307176413732, 8.996092027213022], [-79.557877366845176, 8.932374986197145], [-79.760578172510037, 8.584515082224398], [-80.164481167303322, 8.333315944853593], [-80.382659064439608, 8.29840851484043], [-80.480689256497286, 8.090307522001067], [-80.003689948227148, 7.54752411542337], [-80.276670701808982, 7.419754136581713], [-80.421158006497066, 7.271571966984763], [-80.886400926420791, 7.220541490096535], [-81.059542812814698, 7.817921047390596], [-81.189715745757937, 7.647905585150339], [-81.519514736644666, 7.706610012233908], [-81.721311204744453, 8.108962714058434], [-82.131441209628889, 8.175392767769635], [-82.390934414382542, 8.292362372262287], [-82.820081346350406, 8.290863755725821], [-82.850958014644803, 8.073822740099954], [-82.965783047197348, 8.225027980985983], [-82.9131764391242, 8.423517157419068], [-82.829770677405151, 8.626295477732368], [-82.868657192704759, 8.807266343618521], [-82.719183112300513, 8.925708726431493], [-82.927154914059145, 9.074330145702914], [-82.932890998043561, 9.476812038608172], [-82.546196255203469, 9.566134751824674], [-82.187122565423394, 9.207448635286779], [-82.207586432610952, 8.995575262890098], [-81.808566860669259, 8.95061676679617], [-81.714154018872023, 9.031955471223581], [-81.43928707551153, 8.786234035675715], [-80.947301601876745, 8.858503526235905], [-80.521901211250054, 9.11107208906243], [-79.914599778955974, 9.312765204297618], [-79.573302781884294, 9.611610012241526], [-79.021191779277913, 9.552931423374103], [-79.058450486960353, 9.454565334506523], [-78.500887620747164, 9.420458889193879], [-78.055927700497989, 9.247730414258296], [-77.729513515926399, 8.946844387238867], [-77.353360765273848, 8.670504665558068], [-77.474722866511314, 8.524286200388216], [-77.242566494440069, 7.935278225125442], [-77.431107957656977, 7.638061224798733], [-77.75341386586139, 7.709839789252141], [-77.881571417945239, 7.223771267114783]]] } }, + { "type": "Feature", "properties": { "admin": "Peru", "name": "Peru", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-69.590423753524036, -17.580011895419329], [-69.858443569605839, -18.092693780187009], [-70.3725723944777, -18.347975355708861], [-71.375250210236914, -17.77379851651385], [-71.462040778271117, -17.363487644116379], [-73.444529588500401, -16.359362888252992], [-75.23788265654143, -15.26568287522778], [-76.009205084929931, -14.649286390850317], [-76.423469204397733, -13.823186944232431], [-76.259241502574156, -13.535039157772939], [-77.10619238962181, -12.222716159720816], [-78.092152879534623, -10.377712497604062], [-79.036953091126918, -8.38656788496589], [-79.445920376284832, -7.930833428583859], [-79.760578172510037, -7.194340915560081], [-80.537481655586049, -6.541667575713715], [-81.249996304026411, -6.136834405139182], [-80.926346808582423, -5.690556735866563], [-81.410942552399433, -4.736764825055459], [-81.099669562489353, -4.036394138203696], [-80.302560594387188, -3.404856459164712], [-80.184014858709645, -3.821161797708043], [-80.46929460317692, -4.059286797708999], [-80.442241990872134, -4.425724379090673], [-80.028908047185581, -4.346090996928893], [-79.62497921417615, -4.454198093283494], [-79.205289069317715, -4.959128513207388], [-78.639897223612323, -4.547784112164072], [-78.450683966775628, -3.873096612161375], [-77.83790483265858, -3.003020521663103], [-76.635394253226707, -2.608677666843817], [-75.544995693652027, -1.56160979574588], [-75.233722703741932, -0.911416924649529], [-75.373223232713841, -0.15203175212045], [-75.106624518520064, -0.05720549886486], [-74.441600511355958, -0.530820000819887], [-74.122395189089048, -1.002832533373848], [-73.659503546834586, -1.260491224781134], [-73.070392218707212, -2.308954359550952], [-72.325786505813639, -2.434218031426453], [-71.774760708285385, -2.169789727388937], [-71.413645799429773, -2.342802422702128], [-70.813475714791949, -2.256864515800742], [-70.047708502874841, -2.725156345229699], [-70.692682054309699, -3.742872002785858], [-70.394043952094975, -3.766591485207825], [-69.893635219996611, -4.298186944194326], [-70.79476884630229, -4.251264743673302], [-70.928843349883564, -4.401591485210367], [-71.748405727816532, -4.59398284263301], [-72.891927659787243, -5.274561455916979], [-72.964507208941185, -5.741251315944892], [-73.219711269814596, -6.089188734566076], [-73.120027431923575, -6.629930922068238], [-73.724486660441627, -6.918595472850638], [-73.723401455363486, -7.340998630404412], [-73.987235480429646, -7.523829847853063], [-73.571059332967053, -8.424446709835832], [-73.015382656532537, -9.03283334720806], [-73.226713426390148, -9.462212823121233], [-72.563033006465631, -9.520193780152715], [-72.184890713169821, -10.05359791426943], [-71.302412278921523, -10.079436130415372], [-70.481893886991159, -9.490118096558842], [-70.548685675728393, -11.009146823778462], [-70.093752204046879, -11.123971856331011], [-69.52967810736493, -10.951734307502193], [-68.665079718689611, -12.561300144097171], [-68.880079515239956, -12.89972909917665], [-68.929223802349526, -13.602683607643007], [-68.94888668483658, -14.45363941819328], [-69.339534674747, -14.953195489158828], [-69.160346645774936, -15.323973890853015], [-69.389764166934697, -15.66012908291165], [-68.959635382753291, -16.500697930571267], [-69.590423753524036, -17.580011895419329]]] } }, + { "type": "Feature", "properties": { "admin": "Philippines", "name": "Philippines", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[126.376813592637447, 8.414706325713352], [126.478512811387873, 7.750354112168976], [126.537423944200611, 7.189380601424572], [126.19677290253253, 6.274294338400038], [125.831420526229081, 7.293715318221855], [125.363852166852283, 6.78648529706099], [125.683160841983707, 6.049656887227257], [125.396511672060626, 5.581003322772288], [124.219787632342332, 6.16135549562618], [123.938719517106918, 6.88513560630612], [124.243662144061318, 7.360610459823659], [123.610212437027542, 7.833527329942753], [123.29607140512519, 7.418875637232786], [122.825505812675388, 7.457374579290216], [122.085499302255769, 6.899424139834847], [121.919928013192603, 7.192119452336072], [122.312358840017112, 8.034962063016506], [122.94239790251963, 8.316236883981174], [123.487687616063511, 8.693009751821192], [123.841154412939815, 8.240324204944384], [124.6014697612502, 8.514157619659015], [124.764612257995623, 8.960409450715458], [125.471390822451539, 8.986996975129641], [125.412117954612754, 9.760334784377545], [126.222714471543156, 9.28607432701885], [126.306636997585073, 8.782487494334573], [126.376813592637447, 8.414706325713352]]], [[[123.982437778825798, 10.278778591345811], [123.62318322153277, 9.950090643753297], [123.309920688979332, 9.318268744336676], [122.995883009941636, 9.022188625520398], [122.380054966319463, 9.713360907424201], [122.586088901867072, 9.981044826696104], [122.837081333508706, 10.261156927934234], [122.947410516451896, 10.881868394408029], [123.498849725438447, 10.940624497923945], [123.337774285984722, 10.267383938025445], [124.077935825701218, 11.232725531453706], [123.982437778825798, 10.278778591345811]]], [[[118.504580926590336, 9.316382554558087], [117.174274530100675, 8.367499904814663], [117.664477166821371, 9.066888739452933], [118.386913690261736, 9.684499619989223], [118.98734215706105, 10.376292019080507], [119.511496209797528, 11.36966807702721], [119.689676548339889, 10.554291490109872], [119.029458449378978, 10.003653265823869], [118.504580926590336, 9.316382554558087]]], [[[121.883547804859106, 11.891755072471977], [122.483821242361458, 11.582187404827506], [123.120216506035959, 11.583660183147867], [123.100837843926442, 11.165933742716486], [122.637713657726692, 10.741308498574226], [122.002610304859559, 10.441016750526087], [121.967366978036523, 10.905691229694622], [122.038370396005519, 11.415840969280039], [121.883547804859106, 11.891755072471977]]], [[[125.502551711123488, 12.162694606978347], [125.783464797062152, 11.046121934447767], [125.01188398651226, 11.311454576050377], [125.032761265158115, 10.975816148314703], [125.277449172060244, 10.358722032101308], [124.801819289245714, 10.134678859899889], [124.760168084818474, 10.8379951033923], [124.459101190286049, 10.889929917845633], [124.302521600441722, 11.495370998577227], [124.891012811381572, 11.415582587118589], [124.877990350443952, 11.794189968304988], [124.266761509295705, 12.557760931849682], [125.22711632700782, 12.53572093347719], [125.502551711123488, 12.162694606978347]]], [[[121.527393833503481, 13.069590155484516], [121.262190382981544, 12.2055602075644], [120.833896112146533, 12.704496161342416], [120.323436313967477, 13.466413479053866], [121.18012820850214, 13.429697373910439], [121.527393833503481, 13.069590155484516]]], [[[121.321308221523566, 18.504064642811013], [121.937601353036371, 18.21855235439838], [122.246006300954264, 18.478949896717094], [122.336956821787965, 18.224882717354173], [122.174279412933174, 17.810282701076371], [122.51565392465335, 17.09350474697197], [122.252310825693883, 16.262444362854122], [121.662786086108255, 15.931017564350125], [121.505069614753367, 15.124813544164621], [121.728828566577249, 14.328376369682244], [122.258925409027313, 14.218202216035973], [122.701275669445636, 14.336541245984417], [123.950295037940236, 13.782130642141066], [123.855107049658599, 13.237771104378464], [124.181288690284873, 12.997527370653469], [124.077419061378222, 12.536676947474573], [123.298035109552245, 13.027525539598981], [122.928651971529902, 13.552919826710404], [122.671355015148663, 13.185836289925131], [122.034649692880521, 13.784481919810343], [121.126384718918587, 13.636687323455559], [120.628637323083296, 13.857655747935649], [120.679383579593832, 14.271015529838319], [120.99181928923052, 14.525392767795079], [120.693336216312687, 14.756670640517282], [120.564145135582976, 14.396279201713821], [120.070428501466367, 14.970869452367094], [119.920928582846102, 15.406346747290735], [119.883773228028247, 16.363704331929963], [120.286487664878791, 16.034628811095327], [120.39004723519173, 17.599081122299506], [120.7158671407919, 18.505227362537536], [121.321308221523566, 18.504064642811013]]]] } }, + { "type": "Feature", "properties": { "admin": "Papua New Guinea", "name": "Papua New Guinea", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[155.880025669578401, -6.819996840037758], [155.599991082988765, -6.919990736522491], [155.166994256815087, -6.535931491729299], [154.729191522438327, -5.900828138862208], [154.514114211239644, -5.139117526880012], [154.652503696917336, -5.042430922061839], [154.759990676084357, -5.339983819198493], [155.062917922179338, -5.566791680527486], [155.547746209941693, -6.200654799019658], [156.019965448224752, -6.540013929880386], [155.880025669578401, -6.819996840037758]]], [[[151.982795851854462, -5.478063246282344], [151.459106887008659, -5.560280450058739], [151.301390415653884, -5.840728448106701], [150.754447056276661, -6.083762709175387], [150.241196730753813, -6.317753594592984], [149.709963006793316, -6.316513360218051], [148.890064732050462, -6.026040134305432], [148.318936802360696, -5.74714242922613], [148.401825799756864, -5.437755629094722], [149.298411900020824, -5.583741550319216], [149.845561965127217, -5.505503431829339], [149.996250441690279, -5.026101169457674], [150.139755894164921, -5.001348158389788], [150.236907586873485, -5.53222014732428], [150.807467075808063, -5.455842380396886], [151.089672072553981, -5.113692722192368], [151.647880894170811, -4.757073662946168], [151.537861769821518, -4.167807305521889], [152.136791620084352, -4.148790378438519], [152.338743117480988, -4.31296640382976], [152.318692661751754, -4.867661228050748], [151.982795851854462, -5.478063246282344]]], [[[147.191873814074938, -7.388024183789978], [148.084635858349372, -8.044108168167609], [148.734105259393573, -9.104663588093755], [149.306835158484432, -9.071435642130067], [149.266630894161324, -9.514406019736027], [150.038728469034311, -9.684318129111698], [149.738798456012262, -9.872937106977002], [150.801627638959133, -10.29368661869742], [150.690574985963849, -10.582712904505865], [150.028393182575826, -10.652476088099929], [149.782310012001972, -10.393267103723941], [148.923137648717216, -10.28092253992136], [147.913018426707993, -10.130440769087469], [147.135443150012236, -9.492443536012017], [146.567880894150619, -8.942554619994153], [146.048481073184917, -8.067414239131308], [144.74416792213799, -7.630128269077473], [143.897087844009661, -7.915330498896279], [143.286375767184268, -8.245491224809056], [143.413913202080664, -8.983068942910945], [142.628431431244223, -9.326820570516501], [142.068258905200196, -9.159595635620034], [141.033851760013874, -9.117892754760417], [141.017056919519007, -5.85902190513802], [141.000210402591847, -2.600151055515624], [142.735246616791443, -3.289152927263216], [144.583970982033236, -3.861417738463401], [145.27317955950997, -4.373737888205027], [145.829786411725649, -4.876497897972683], [145.981921828392956, -5.465609226100012], [147.648073358347574, -6.083659356310803], [147.891107619416175, -6.614014580922315], [146.970905389594861, -6.721656589386255], [147.191873814074938, -7.388024183789978]]], [[[153.14003787659874, -4.499983412294113], [152.827292108368255, -4.766427097190998], [152.63867313050298, -4.176127211120927], [152.406025832324929, -3.789742526874561], [151.953236932583536, -3.462062269711821], [151.384279413050024, -3.035421644710111], [150.6620495953388, -2.741486097833956], [150.939965448204532, -2.500002129734028], [151.479984165654514, -2.779985039891386], [151.820015090135087, -2.999971612157907], [152.239989455371074, -3.24000864015366], [152.640016717742526, -3.659983005389647], [153.019993524384631, -3.980015150573293], [153.14003787659874, -4.499983412294113]]]] } }, + { "type": "Feature", "properties": { "admin": "Poland", "name": "Poland", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[15.016995883858666, 51.106674099321566], [14.607098422919531, 51.745188096719964], [14.685026482815685, 52.089947414755187], [14.437599725002197, 52.624850165408382], [14.074521111719488, 52.981262518925426], [14.353315463934136, 53.248171291712957], [14.119686313542584, 53.757029120491026], [14.802900424873455, 54.050706285205735], [16.363477003655728, 54.513158677785711], [17.622831658608671, 54.851535956432897], [18.620858595461637, 54.682605699270766], [18.696254510175461, 54.438718777069276], [19.6606400896064, 54.426083889373913], [20.89224450041862, 54.312524929412518], [22.731098667092649, 54.327536932993311], [23.243987257589506, 54.220566718149129], [23.484127638449841, 53.912497667041123], [23.527535841574995, 53.47012156840654], [23.804934930117774, 53.08973135030606], [23.799198846133375, 52.691099351606553], [23.19949384938618, 52.486977444053664], [23.508002150168689, 52.023646552124717], [23.52707075368437, 51.578454087930233], [24.029985792748899, 50.705406602575174], [23.922757195743259, 50.424881089878738], [23.426508416444388, 50.308505764357449], [22.518450148211596, 49.476773586619736], [22.776418898212619, 49.027395331409608], [22.558137648211751, 49.08573802346713], [21.607808058364206, 49.470107326854077], [20.887955356538406, 49.328772284535823], [20.415839471119849, 49.431453355499755], [19.825022820726865, 49.217125352569219], [19.320712517990469, 49.571574001659179], [18.909574822676316, 49.435845852244562], [18.85314415861361, 49.496229763377634], [18.392913852622168, 49.988628648470737], [17.649445021238986, 50.049038397819942], [17.554567091551117, 50.36214590107641], [16.868769158605655, 50.473973700556016], [16.719475945714429, 50.215746568393527], [16.176253289462263, 50.4226073268579], [16.238626743238566, 50.697732652379827], [15.490972120839725, 50.7847299261432], [15.016995883858666, 51.106674099321566]]] } }, + { "type": "Feature", "properties": { "admin": "Puerto Rico", "name": "Puerto Rico", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-66.2824344550082, 18.51476166429536], [-65.771302863209286, 18.426679185453875], [-65.591003790942935, 18.228034979723912], [-65.847163865813755, 17.975905666571855], [-66.599934455009475, 17.98182261806927], [-67.184162360285256, 17.946553453030074], [-67.24242753769434, 18.374460150622934], [-67.100679083917726, 18.520601101144347], [-66.2824344550082, 18.51476166429536]]] } }, + { "type": "Feature", "properties": { "admin": "North Korea", "name": "Dem. Rep. Korea", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[130.640015903852401, 42.39500946712527], [130.780007358931101, 42.220007229168843], [130.400030552288996, 42.280003567059701], [129.965948521037234, 41.941367906251052], [129.667362095254788, 41.601104437825221], [129.705189243692445, 40.882827867184318], [129.188114862179958, 40.661807766271984], [129.010399611528186, 40.485436102859801], [128.633368361526692, 40.189846910150301], [127.967414178581322, 40.025412502597547], [127.533435500194145, 39.756850083976694], [127.502119582225276, 39.323930772451526], [127.385434198110261, 39.213472398427648], [127.783342726757709, 39.050898342437414], [128.349716424676586, 38.612242946927843], [128.205745884311426, 38.370397243801882], [127.780035435090966, 38.304535630845884], [127.073308547067342, 38.256114813788393], [126.683719924018888, 37.804772854151174], [126.237338901881742, 37.840377916000271], [126.174758742376213, 37.749685777328033], [125.689103631697165, 37.940010077459014], [125.568439162295675, 37.752088731429616], [125.275330438336184, 37.66907054295271], [125.24008711151312, 37.857224432927424], [124.981033156433952, 37.948820909164773], [124.712160679219352, 38.108346055649783], [124.985994093933954, 38.548474229479673], [125.221948683778677, 38.665857245430665], [125.13285851450749, 38.848559271798578], [125.386589797060566, 39.387957872061158], [125.321115757346774, 39.551384589184202], [124.737482131042384, 39.660344346671614], [124.265624627785286, 39.928493353834149], [125.079941847840615, 40.569823716792442], [126.182045119329402, 41.107336127276362], [126.86908328664984, 41.816569322266176], [127.343782993682993, 41.50315176041596], [128.208433058790632, 41.466771552082477], [128.052215203972281, 41.994284572917934], [129.59666873587949, 42.424981797854542], [129.994267205933198, 42.985386867843779], [130.640015903852401, 42.39500946712527]]] } }, + { "type": "Feature", "properties": { "admin": "Portugal", "name": "Portugal", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[-9.034817674180244, 41.880570583659669], [-8.671945766626719, 42.134689439454952], [-8.26385698081779, 42.280468654950326], [-8.01317460776991, 41.790886135417118], [-7.422512986673794, 41.792074693359822], [-7.251308966490822, 41.91834605566504], [-6.668605515967655, 41.883386949219577], [-6.389087693700914, 41.381815497394641], [-6.851126674822551, 41.111082668617513], [-6.864019944679383, 40.330871893874821], [-7.026413133156593, 40.184524237624238], [-7.066591559263527, 39.711891587882768], [-7.498632371439724, 39.629571031241802], [-7.098036668313126, 39.03007274022378], [-7.374092169616317, 38.373058580064914], [-7.029281175148794, 38.075764065089757], [-7.166507941099863, 37.803894354802217], [-7.537105475281022, 37.428904323876232], [-7.45372555177809, 37.097787583966053], [-7.855613165711985, 36.838268540996253], [-8.382816127953687, 36.978880113262449], [-8.898856980820325, 36.868809312480771], [-8.746101446965552, 37.6513455266766], [-8.839997524439879, 38.266243394517609], [-9.287463751655221, 38.358485826158592], [-9.526570603869713, 38.737429104154906], [-9.44698889814023, 39.392066148428363], [-9.048305223008425, 39.755093085278766], [-8.977353481471679, 40.159306138665798], [-8.7686840478771, 40.76063894303018], [-8.790853237330309, 41.18433401139125], [-8.990789353867568, 41.543459377603625], [-9.034817674180244, 41.880570583659669]]] } }, + { "type": "Feature", "properties": { "admin": "Paraguay", "name": "Paraguay", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-62.685057135657871, -22.24902922942238], [-62.291179368729203, -21.051634616787389], [-62.265961269770784, -20.513734633061272], [-61.786326463453761, -19.633736667562957], [-60.043564622626477, -19.342746677327419], [-59.11504248720609, -19.356906019775398], [-58.183471442280492, -19.868399346600359], [-58.166392381408038, -20.176700941653674], [-57.870673997617786, -20.732687676681948], [-57.937155727761287, -22.090175876557169], [-56.881509568902885, -22.282153822521476], [-56.473317430229379, -22.086300144135279], [-55.797958136606894, -22.356929620047815], [-55.61068274598113, -22.655619398694839], [-55.517639329639621, -23.57199757252663], [-55.400747239795407, -23.956935316668797], [-55.027901780809543, -24.001273695575225], [-54.652834235235119, -23.839578138933955], [-54.292959560754511, -24.021014092710722], [-54.293476325077435, -24.570799655863958], [-54.428946092330577, -25.162184747012162], [-54.625290696823562, -25.739255466415507], [-54.788794928595038, -26.621785577096126], [-55.695845506398143, -27.387837009390857], [-56.486701626192989, -27.548499037386286], [-57.609759690976134, -27.395898532828383], [-58.618173590719735, -27.123718763947089], [-57.633660040911117, -25.603656508081638], [-57.777217169817924, -25.162339776309032], [-58.807128465394968, -24.771459242453307], [-60.028966030504016, -24.032796319273267], [-60.846564704009907, -23.880712579038288], [-62.685057135657871, -22.24902922942238]]] } }, + { "type": "Feature", "properties": { "admin": "Palestine", "name": "Palestine", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[35.545665317534535, 32.393992011030569], [35.545251906076196, 31.782504787720832], [35.397560662586038, 31.489086005167572], [34.927408481594554, 31.35343537040141], [34.970506626125989, 31.616778469360803], [35.225891554512422, 31.754341132121759], [34.974640740709319, 31.866582343059715], [35.183930291491428, 32.532510687788935], [35.545665317534535, 32.393992011030569]]] } }, + { "type": "Feature", "properties": { "admin": "Qatar", "name": "Qatar", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[50.810108270069563, 24.754742539971371], [50.743910760303677, 25.482424221289389], [51.01335167827348, 26.006991685484191], [51.286461622936045, 26.114582017515865], [51.589078810437243, 25.801112779233375], [51.606700473848804, 25.215670477798735], [51.389607781790623, 24.627385972588051], [51.112415398977006, 24.556330878186721], [50.810108270069563, 24.754742539971371]]] } }, + { "type": "Feature", "properties": { "admin": "Romania", "name": "Romania", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[22.710531447040488, 47.882193915389394], [23.142236362406798, 48.096341050806942], [23.760958286237404, 47.985598456405448], [24.402056105250374, 47.981877753280422], [24.866317172960571, 47.737525743188307], [25.207743361112986, 47.891056423527459], [25.945941196402394, 47.987148749374207], [26.197450392366925, 48.220881252630342], [26.619336785597788, 48.220726223333457], [26.924176059687561, 48.123264472030982], [27.233872918412736, 47.826770941756365], [27.551166212684841, 47.405117092470817], [28.128030226359037, 46.81047638608824], [28.160017937947707, 46.371562608417207], [28.054442986775392, 45.944586086605618], [28.233553501099035, 45.488283189468369], [28.679779493939371, 45.30403087013169], [29.149724969201646, 45.464925442072442], [29.603289015427425, 45.293308010431119], [29.62654340995876, 45.035390936862392], [29.141611769331831, 44.820210272799038], [28.837857700320196, 44.913873806328041], [28.55808149589199, 43.707461656258118], [27.970107049275068, 43.812468166675202], [27.242399529740904, 44.175986029632398], [26.065158725699739, 43.943493760751259], [25.569271681426923, 43.688444729174712], [24.100679152124169, 43.741051337247846], [23.332302280376322, 43.897010809904707], [22.94483239105184, 43.823785305347123], [22.657149692482985, 44.234923000661276], [22.474008416440594, 44.409227606781762], [22.705725538837349, 44.578002834647016], [22.459022251075933, 44.702517198254291], [22.145087924902807, 44.478422349620573], [21.562022739353605, 44.768947251965486], [21.483526238702233, 45.181170152357772], [20.874312778413351, 45.416375433934228], [20.76217492033998, 45.734573065771428], [20.220192498462833, 46.127468980486547], [21.021952345471245, 46.316087958351886], [21.626514926853869, 46.994237779318148], [22.09976769378283, 47.672439276716695], [22.710531447040488, 47.882193915389394]]] } }, + { "type": "Feature", "properties": { "admin": "Russia", "name": "Russia", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[143.648007440362846, 50.747600409541512], [144.65414757708561, 48.976390692737581], [143.173927850517174, 49.306551418650365], [142.558668247650076, 47.861575018904908], [143.533492466404027, 46.836728013692479], [143.505277134372591, 46.137907619809475], [142.747700636973889, 46.740764878926562], [142.092030064054484, 45.966755276058777], [141.906925083585008, 46.805928860046535], [142.018442824470867, 47.780132961612921], [141.904444614835029, 48.859188544299563], [142.135800002205656, 49.615163072297449], [142.179983351815281, 50.952342434281903], [141.594075962490024, 51.935434882202529], [141.682546014573632, 53.301966457728767], [142.606934035410745, 53.762145087287891], [142.209748976815376, 54.225475979216853], [142.654786411712934, 54.365880845753864], [142.914615513276544, 53.704577541714734], [143.260847609632037, 52.740760403039033], [143.235267775647628, 51.756660264688733], [143.648007440362846, 50.747600409541512]]], [[[22.731098667092649, 54.327536932993311], [20.892244500418652, 54.312524929412568], [19.6606400896064, 54.42608388937397], [19.88848147958134, 54.866160386771483], [21.268448927503492, 55.190481675835279], [22.315723504330599, 55.015298570365886], [22.757763706155281, 54.856574408581416], [22.651051873472564, 54.582740993866693], [22.731098667092649, 54.327536932993311]]], [[[180.000000000000114, 70.832199208546669], [178.903425, 70.78114], [178.7253, 71.0988], [180.000000000000114, 71.515714336428246], [180.000000000000114, 70.832199208546669]]], [[[143.60385, 73.21244], [142.08763, 73.20544], [140.038155, 73.31692], [139.86312, 73.36983], [140.81171, 73.76506], [142.06207, 73.85758], [143.48283, 73.47525], [143.60385, 73.21244]]], [[[150.73167, 75.08406], [149.575925, 74.68892], [147.977465, 74.778355], [146.11919, 75.17298], [146.358485, 75.49682], [148.22223, 75.345845], [150.73167, 75.08406]]], [[[145.086285, 75.562625], [144.3, 74.82], [140.61381, 74.84768], [138.95544, 74.61148], [136.97439, 75.26167], [137.51176, 75.94917], [138.831075, 76.13676], [141.471615, 76.09289], [145.086285, 75.562625]]], [[[57.535692579992386, 70.720463975702145], [56.944979282463933, 70.63274323188665], [53.677375115784187, 70.762657782668455], [53.412016635965372, 71.206661688920192], [51.601894565645708, 71.474759019650477], [51.455753615124209, 72.014881089965129], [52.478275180883564, 72.229441636840946], [52.444168735570841, 72.77473135038484], [54.427613559797649, 73.627547512497571], [53.508289829325136, 73.749813951300141], [55.902458937407644, 74.627486477345329], [55.631932814359701, 75.081412258597155], [57.868643833248839, 75.609390367323186], [61.170044386647497, 76.251883450008123], [64.498368361270209, 76.439055487769267], [66.210977003855092, 76.809782213031227], [68.157059767534818, 76.939696763812904], [68.852211134725124, 76.544811306454605], [68.180572544227644, 76.233641669409096], [64.637326287703004, 75.737754625136219], [61.583507521414752, 75.260884507946784], [58.477082147053366, 74.309056301562819], [56.986785516187993, 73.333043524866227], [55.41933597191094, 72.371267605265956], [55.622837762276291, 71.540594794390316], [57.535692579992386, 70.720463975702145]]], [[[106.970130000000111, 76.97419], [107.240000000000123, 76.48], [108.1538, 76.723350000000138], [111.077260000000138, 76.71], [113.33151, 76.22224], [114.13417, 75.84764], [113.88539, 75.327790000000121], [112.77918, 75.03186], [110.151250000000175, 74.47673], [109.4, 74.18], [110.64, 74.04], [112.11919, 73.787740000000113], [113.019540000000234, 73.976930000000138], [113.529580000000294, 73.33505], [113.96881, 73.59488], [115.56782, 73.75285], [118.776330000000215, 73.58772], [119.02, 73.12], [123.20066, 72.97122], [123.257770000000178, 73.73503], [125.380000000000166, 73.56], [126.97644, 73.56549], [128.59126, 73.03871], [129.05157, 72.39872], [128.46, 71.98], [129.715990000000204, 71.19304], [131.288580000000252, 70.786990000000102], [132.253500000000145, 71.8363], [133.857660000000294, 71.386420000000143], [135.56193, 71.655250000000123], [137.49755, 71.34763], [138.234090000000123, 71.62803], [139.86983, 71.487830000000116], [139.14791, 72.4161900000001], [140.46817, 72.849410000000134], [149.5, 72.2], [150.35118000000017, 71.60643], [152.96890000000019, 70.84222], [157.00688, 71.03141], [158.99779, 70.86672], [159.830310000000225, 70.45324], [159.70866, 69.72198], [160.94053000000028, 69.43728], [162.279070000000104, 69.64204], [164.05248, 69.66823], [165.940370000000172, 69.47199], [167.83567, 69.58269], [169.57763000000017, 68.6938], [170.816880000000253, 69.01363], [170.008200000000159, 69.65276], [170.453450000000259, 70.09703], [173.643910000000204, 69.81743], [175.72403000000017, 69.877250000000217], [178.6, 69.4], [180.000000000000114, 68.963636363636553], [180.000000000000114, 64.979708702198465], [179.99281, 64.97433], [178.707200000000199, 64.53493], [177.411280000000147, 64.60821], [178.313000000000187, 64.07593], [178.90825000000018, 63.251970000000128], [179.37034, 62.98262], [179.48636, 62.56894], [179.228250000000116, 62.304100000000133], [177.3643, 62.5219], [174.569290000000194, 61.76915], [173.68013, 61.65261], [172.15, 60.95], [170.6985, 60.33618], [170.330850000000282, 59.88177], [168.90046, 60.57355], [166.294980000000265, 59.7885500000002], [165.840000000000202, 60.16], [164.87674, 59.7316], [163.539290000000108, 59.86871], [163.217110000000218, 59.21101], [162.01733, 58.24328], [162.05297, 57.83912], [163.19191, 57.61503], [163.057940000000144, 56.159240000000111], [162.129580000000203, 56.12219], [161.70146, 55.285680000000148], [162.117490000000117, 54.85514], [160.368770000000325, 54.34433], [160.021730000000218, 53.20257], [158.530940000000157, 52.958680000000236], [158.23118, 51.94269], [156.789790000000266, 51.01105], [156.42000000000013, 51.7], [155.99182, 53.15895], [155.43366, 55.381030000000109], [155.914420000000291, 56.767920000000132], [156.75815, 57.3647], [156.81035, 57.83204], [158.364330000000166, 58.05575], [160.150640000000124, 59.314770000000109], [161.87204, 60.343000000000117], [163.66969, 61.1409], [164.473550000000103, 62.55061], [163.258420000000172, 62.46627], [162.65791, 61.6425], [160.12148, 60.54423], [159.30232, 61.77396], [156.72068, 61.43442], [154.218060000000293, 59.758180000000117], [155.04375, 59.14495], [152.81185, 58.88385], [151.265730000000246, 58.78089], [151.33815, 59.50396], [149.78371, 59.655730000000126], [148.54481, 59.16448], [145.48722, 59.33637], [142.197820000000121, 59.03998], [138.958480000000293, 57.08805], [135.12619, 54.72959], [136.70171, 54.603550000000112], [137.19342, 53.97732], [138.1647, 53.755010000000247], [138.80463, 54.25455], [139.90151, 54.189680000000166], [141.34531, 53.089570000000109], [141.37923, 52.23877], [140.59742000000017, 51.23967], [140.51308, 50.045530000000113], [140.061930000000189, 48.446710000000152], [138.554720000000202, 46.99965], [138.21971, 46.30795], [136.86232, 45.143500000000174], [135.515350000000183, 43.989], [134.869390000000237, 43.39821], [133.536870000000249, 42.81147], [132.90627, 42.79849], [132.278070000000241, 43.284560000000106], [130.935870000000136, 42.55274], [130.78, 42.220000000000191], [130.640000000000157, 42.395], [130.633866408409801, 42.903014634770543], [131.144687941614961, 42.929989732426932], [131.288555129115593, 44.111519680348252], [131.025190000000237, 44.96796], [131.883454217659562, 45.321161607436508], [133.097120000000189, 45.14409], [133.769643996313164, 46.116926988299149], [134.112350000000163, 47.212480000000127], [134.50081, 47.578450000000139], [135.026311476786759, 48.478229885443902], [133.373595819228001, 48.183441677434836], [132.506690000000106, 47.78896], [130.987260000000106, 47.79013], [130.582293328982644, 48.72968740497619], [129.397817824420486, 49.4406000840156], [127.657400000000351, 49.76027], [127.287455682484904, 50.739797268265434], [126.939156528837827, 51.353894151405896], [126.564399041856959, 51.784255479532689], [125.946348911646439, 52.792798570356936], [125.068211297710434, 53.161044826868924], [123.57147, 53.4588], [122.245747918793043, 53.431725979213681], [121.003084751470354, 53.251401068731226], [120.177088657716865, 52.753886216841195], [120.725789015791975, 52.516226304730893], [120.7382, 51.96411], [120.182080000000155, 51.64355], [119.27939, 50.58292], [119.288460728025839, 50.142882798861947], [117.87924441942647, 49.510983384797036], [116.67880089728618, 49.888531399121398], [115.485695428531415, 49.805177313834733], [114.962109816550353, 50.140247300815119], [114.362456496235325, 50.24830272073747], [112.897739699354361, 49.543565375356984], [111.581230910286649, 49.377968248077671], [110.662010532678835, 49.130128078805846], [109.402449171996707, 49.292960516957685], [108.475167270951275, 49.282547715850704], [107.868175897251092, 49.793705145865871], [106.888804152455293, 50.274295966180276], [105.886591424586868, 50.40601919209216], [104.62158, 50.275320000000157], [103.676545444760336, 50.08996613219513], [102.25589, 50.510560000000105], [102.06521, 51.25991], [100.889480421962631, 51.516855780638409], [99.981732212323564, 51.63400625264395], [98.861490513100492, 52.047366034546698], [97.82573978067451, 51.010995184933236], [98.231761509191699, 50.422400621128716], [97.259760000000199, 49.72605], [95.814020000000156, 49.977460000000114], [94.815949334698757, 50.01343333597088], [94.147566359435601, 50.480536607457161], [93.10421, 50.49529], [92.234711541719676, 50.802170722041737], [90.713667433640765, 50.331811835321098], [88.805566847695573, 49.470520738312459], [87.751264276076824, 49.297197984405543], [87.359970330762692, 49.214980780629148], [86.829356723989648, 49.826674709668133], [85.541269972682485, 49.69285858824815], [85.115559523462082, 50.117302964877631], [84.416377394553038, 50.311399644565817], [83.935114780618903, 50.889245510453563], [83.383003778012451, 51.069182847693881], [81.945985548839943, 50.812195949906325], [80.568446893235446, 51.388336493528435], [80.035559523441705, 50.864750881547209], [77.80091556184432, 53.404414984747532], [76.525179477854749, 54.177003485727127], [76.891100294913443, 54.490524400441913], [74.384820000000119, 53.546850000000113], [73.425678745420512, 53.489810289109741], [73.50851606638436, 54.035616766976588], [72.224150018202195, 54.376655381886778], [71.180131056609468, 54.133285224008247], [70.86526655465515, 55.169733588270091], [69.068166945272893, 55.385250149143488], [68.169100376258896, 54.970391750704366], [65.66687, 54.601250000000149], [65.178533563095939, 54.354227810272064], [61.436600000000126, 54.00625], [60.978066440683236, 53.664993394579128], [61.69998619980062, 52.979996446334255], [60.73999311711453, 52.719986477257734], [60.927268507740237, 52.447548326214999], [59.967533807215567, 51.96042043721566], [61.588003371024136, 51.272658799843171], [61.337424350840998, 50.799070136104248], [59.932807244715555, 50.842194118851822], [59.642282342370564, 50.545442206415707], [58.363320000000122, 51.06364], [56.77798, 51.04355], [55.71694, 50.621710000000142], [54.532878452376181, 51.026239732459359], [52.328723585831042, 51.718652248738088], [50.766648390512174, 51.692762356159861], [48.702381626181044, 50.605128485712825], [48.577841424357601, 49.87475962991563], [47.549480421749379, 50.454698391311119], [46.751596307162764, 49.356005764353725], [47.043671502476585, 49.152038886097571], [46.466445753776291, 48.394152330104923], [47.315240000000152, 47.71585], [48.05725, 47.74377], [48.694733514201872, 47.075628160177885], [48.59325000000014, 46.56104], [49.101160000000121, 46.39933], [48.645410000000105, 45.80629], [47.67591, 45.641490000000111], [46.68201, 44.6092], [47.59094, 43.660160000000118], [47.49252, 42.98658], [48.58437000000017, 41.80888], [47.987283156126033, 41.405819200194387], [47.815665724484653, 41.151416124021338], [47.373315464066387, 41.219732367511135], [46.686070591016708, 41.827137152669899], [46.404950799348924, 41.860675157227426], [45.7764, 42.092440000000224], [45.470279168485909, 42.502780666670041], [44.537622918482057, 42.711992702803677], [43.93121, 42.554960000000101], [43.755990000000182, 42.74083], [42.394400000000154, 43.2203], [40.922190000000128, 43.382150000000131], [40.076964959479838, 43.553104153002486], [39.95500857927108, 43.434997666999287], [38.68, 44.28], [37.539120000000104, 44.65721], [36.675460000000122, 45.24469], [37.40317, 45.40451], [38.23295, 46.24087], [37.67372, 46.63657], [39.14767, 47.044750000000128], [39.121200000000123, 47.26336], [38.22353803889947, 47.102189846375971], [38.2551123390298, 47.546400458356956], [38.77057, 47.825620000000228], [39.738277622238982, 47.898937079452068], [39.895620000000136, 48.23241], [39.67465, 48.783820000000127], [40.080789015469477, 49.307429917999364], [40.069040000000108, 49.60105], [38.594988234213552, 49.926461900423718], [38.010631137857068, 49.915661526074715], [37.393459506995228, 50.383953355503664], [36.626167840325387, 50.225590928745127], [35.35611616388811, 50.577197374059139], [35.37791, 50.77394], [35.02218305841793, 51.207572333371495], [34.224815708154402, 51.255993150428921], [34.141978387190612, 51.56641347920619], [34.391730584457228, 51.768881740925892], [33.75269982273587, 52.335074571331646], [32.715760532367163, 52.238465481162159], [32.412058139787767, 52.288694973349763], [32.15944000000021, 52.061250000000101], [31.78597, 52.10168], [31.540018344862254, 52.742052313846429], [31.305200636527978, 53.073995876673301], [31.49764, 53.167430000000124], [32.304519484188368, 53.132726141972839], [32.693643019346119, 53.351420803432141], [32.405598585751157, 53.618045355842], [31.731272820774585, 53.794029446012011], [31.791424187962399, 53.974638576872181], [31.384472283663818, 54.157056382862365], [30.757533807098774, 54.811770941784388], [30.971835971813245, 55.08154775656412], [30.873909132620064, 55.55097646750351], [29.896294386522435, 55.789463202530484], [29.371571893030783, 55.670090643936263], [29.229513380660389, 55.918344224666399], [28.176709425577933, 56.169129950578778], [27.855282016722519, 56.759326483784363], [27.770015903440985, 57.244258124411189], [27.288184848751648, 57.474528306703903], [27.716685825315771, 57.791899115624439], [27.420150000000202, 58.724570000000128], [28.131699253051856, 59.300825100330982], [27.98112, 59.47537], [29.1177, 60.028050000000107], [28.07, 60.503520000000137], [30.211107212044645, 61.780027777749673], [31.139991082491029, 62.357692776124431], [31.516092156711263, 62.867687486412898], [30.035872430142796, 63.552813625738551], [30.444684686003736, 64.204453436939062], [29.544429559047014, 64.948671576590542], [30.21765, 65.80598], [29.054588657352376, 66.944286200622017], [29.977426385220689, 67.69829702419274], [28.445943637818765, 68.364612942163987], [28.591929559043358, 69.064776923286686], [29.39955, 69.15692000000017], [31.101080000000103, 69.55811], [32.132720000000255, 69.905950000000232], [33.77547, 69.301420000000107], [36.51396, 69.06342], [40.292340000000159, 67.9324], [41.059870000000124, 67.457130000000106], [41.125950000000174, 66.79158000000011], [40.01583, 66.266180000000119], [38.38295, 65.99953], [33.918710000000168, 66.75961], [33.18444, 66.63253], [34.81477, 65.900150000000124], [34.87857425307876, 65.436212877048192], [34.943910000000152, 64.414370000000147], [36.23129, 64.10945], [37.012730000000111, 63.84983], [37.141970000000143, 64.33471], [36.539579035089801, 64.76446], [37.176040000000135, 65.143220000000113], [39.59345, 64.520790000000162], [40.4356, 64.76446], [39.762600000000148, 65.49682], [42.09309, 66.47623], [43.01604000000011, 66.41858], [43.94975000000013, 66.06908], [44.53226, 66.756340000000122], [43.69839, 67.35245], [44.187950000000136, 67.95051], [43.45282, 68.57079], [46.250000000000135, 68.25], [46.821340000000156, 67.68997], [45.55517, 67.56652], [45.56202, 67.010050000000192], [46.349150000000137, 66.66767], [47.894160000000248, 66.884550000000146], [48.13876, 67.52238], [50.227660000000142, 67.998670000000132], [53.717430000000164, 68.85738], [54.47171, 68.80815], [53.485820000000118, 68.20131], [54.72628, 68.09702], [55.442680000000124, 68.43866], [57.317020000000149, 68.46628], [58.802000000000206, 68.88082], [59.941420000000178, 68.27844], [61.077840000000165, 68.94069], [60.03, 69.52], [60.55, 69.85], [63.504000000000147, 69.54739], [64.888115, 69.234835000000132], [68.512160000000108, 68.09233000000016], [69.18068, 68.61563000000011], [68.16444, 69.14436], [68.13522, 69.35649], [66.930080000000103, 69.454610000000102], [67.25976, 69.92873], [66.724920000000125, 70.708890000000125], [66.69466, 71.028970000000228], [68.540060000000111, 71.934500000000227], [69.19636, 72.843360000000146], [69.94, 73.04000000000012], [72.58754, 72.77629], [72.79603, 72.22006], [71.84811, 71.40898], [72.47011, 71.09019], [72.79188, 70.39114], [72.564700000000201, 69.02085], [73.66787, 68.4079], [73.2387, 67.7404], [71.280000000000101, 66.320000000000149], [72.423010000000147, 66.172670000000167], [72.82077, 66.53267], [73.920990000000131, 66.789460000000119], [74.186510000000183, 67.28429], [75.052, 67.760470000000154], [74.469260000000148, 68.32899], [74.93584, 68.98918], [73.84236, 69.07146], [73.601870000000204, 69.62763], [74.3998, 70.63175], [73.1011, 71.447170000000241], [74.890820000000204, 72.12119], [74.65926, 72.83227], [75.158010000000175, 72.854970000000108], [75.68351, 72.300560000000118], [75.288980000000109, 71.33556], [76.35911, 71.152870000000135], [75.903130000000161, 71.87401], [77.5766500000001, 72.26717], [79.652020000000107, 72.32011], [81.5, 71.75], [80.61071, 72.582850000000107], [80.51109, 73.6482], [82.25, 73.85], [84.65526, 73.805910000000154], [86.822300000000226, 73.93688], [86.00956, 74.459670000000145], [87.166820000000143, 75.11643], [88.31571, 75.14393], [90.26, 75.64], [92.90058, 75.77333], [93.234210000000132, 76.0472], [95.860000000000127, 76.14], [96.67821, 75.91548], [98.922540000000197, 76.44689], [100.759670000000199, 76.43028], [101.03532, 76.86189], [101.990840000000105, 77.287540000000192], [104.3516, 77.69792], [106.066640000000135, 77.37389], [104.705000000000211, 77.1274], [106.970130000000111, 76.97419]]], [[[105.07547, 78.30689], [99.43814, 77.921], [101.2649, 79.23399], [102.08635, 79.34641], [102.837815, 79.28129], [105.37243, 78.71334], [105.07547, 78.30689]]], [[[51.136186557831266, 80.54728017854093], [49.793684523320692, 80.415427761548202], [48.894411248577526, 80.33956675894369], [48.75493655782175, 80.175468248200829], [47.586119012244147, 80.010181179515328], [46.502825962109647, 80.247246812654339], [47.072455275262897, 80.559424140129451], [44.846958042181107, 80.589809882317169], [46.799138624871226, 80.771917629713627], [48.31847741068465, 80.784009914869927], [48.52280602396668, 80.514568996900138], [49.097189568890897, 80.753985907708412], [50.039767693894603, 80.918885403151791], [51.522932977103679, 80.699725653801906], [51.136186557831266, 80.54728017854093]]], [[[99.93976, 78.88094], [97.75794, 78.7562], [94.97259, 79.044745], [93.31288, 79.4265], [92.5454, 80.14379], [91.18107, 80.34146], [93.77766, 81.0246], [95.940895, 81.2504], [97.88385, 80.746975], [100.186655, 79.780135], [99.93976, 78.88094]]]] } }, + { "type": "Feature", "properties": { "admin": "Rwanda", "name": "Rwanda", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[30.419104852019235, -1.134659112150416], [30.816134881317705, -1.698914076345388], [30.758308953583104, -2.287250257988368], [30.469696079232978, -2.413857517103458], [29.938359002407935, -2.348486830254238], [29.632176141078585, -2.917857761246096], [29.02492638521678, -2.839257907730157], [29.117478875451546, -2.292211195488384], [29.254834832483336, -2.215109958508911], [29.29188683443661, -1.620055840667987], [29.579466180140876, -1.341313164885626], [29.821518588996003, -1.443322442229785], [30.419104852019235, -1.134659112150416]]] } }, + { "type": "Feature", "properties": { "admin": "Western Sahara", "name": "W. Sahara", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-8.794883999049075, 27.120696316022503], [-8.81782833498667, 27.656425889592349], [-8.665589565454805, 27.656425889592349], [-8.66512447756419, 27.58947907155822], [-8.684399786809051, 27.395744126895998], [-8.687293667017398, 25.881056219988899], [-11.969418911171159, 25.933352769468261], [-11.93722449385332, 23.374594224536164], [-12.874221564169574, 23.284832261645171], [-13.118754441774708, 22.771220201096249], [-12.929101935263528, 21.327070624267559], [-16.845193650773989, 21.333323472574875], [-17.063423224342568, 20.99975210213082], [-17.020428432675736, 21.422310288981475], [-17.002961798561085, 21.420734157796574], [-14.750954555713532, 21.50060008390366], [-14.630832688851068, 21.860939846274899], [-14.221167771857251, 22.310163072188153], [-13.891110398809044, 23.691009019459297], [-12.500962693725368, 24.770116278578193], [-12.030758836301613, 26.030866197203036], [-11.718219773800353, 26.104091701760616], [-11.392554897496977, 26.883423977154358], [-10.551262579785272, 26.990807603456879], [-10.18942420087758, 26.860944729107398], [-9.735343390328877, 26.860944729107398], [-9.413037482124464, 27.088476060488514], [-8.794883999049075, 27.120696316022503]]] } }, + { "type": "Feature", "properties": { "admin": "Saudi Arabia", "name": "Saudi Arabia", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[42.779332309750963, 16.34789134364868], [42.64957278826607, 16.77463532151496], [42.347989129410706, 17.075805568911996], [42.270887892431219, 17.474721787989122], [41.754381951673949, 17.833046169500971], [41.221391229015573, 18.671599636301206], [40.939341261566533, 19.486485297111752], [40.247652215339819, 20.174634507726488], [39.801684604660934, 20.338862209550054], [39.139399448408277, 21.29190481209293], [39.023695916506782, 21.986875311770191], [39.066328973147577, 22.579655666590263], [38.492772251140075, 23.688451036060851], [38.023860304523616, 24.078685614512928], [37.483634881344379, 24.285494696545008], [37.154817742671177, 24.858482977797301], [37.209491408035994, 25.084541530858104], [36.931627231602583, 25.602959499610172], [36.639603712721218, 25.826227525327219], [36.249136590323808, 26.570135606384873], [35.640181512196385, 27.376520494083415], [35.130186801907875, 28.063351955674712], [34.632336053207972, 28.058546047471559], [34.787778761541936, 28.607427273059692], [34.832220493312938, 28.957483425404838], [34.956037225084252, 29.356554673778835], [36.068940870922049, 29.19749461518445], [36.501214227043583, 29.505253607698702], [36.740527784987243, 29.865283311476183], [37.503581984209028, 30.003776150018396], [37.668119744626374, 30.338665269485894], [37.998848911294367, 30.508499864213128], [37.002165561681004, 31.508412990844736], [39.004885695152545, 32.010216986614971], [39.195468377444961, 32.16100881604266], [40.399994337736238, 31.889991766887931], [41.889980910007829, 31.190008653278362], [44.709498732284736, 29.178891099559376], [46.568713413281742, 29.099025173452283], [47.459821811722819, 29.002519436147217], [47.708850538937376, 28.526062730416136], [48.416094191283939, 28.552004299426663], [48.807594842327163, 27.689627997339876], [49.299554477745815, 27.461218166609804], [49.470913527225647, 27.109999294538078], [50.152422316290874, 26.689663194275994], [50.212935418504671, 26.277026882425371], [50.113303257045928, 25.943972276304248], [50.23985883972874, 25.608049628190923], [50.527386509000728, 25.327808335872099], [50.660556675016885, 24.999895534764018], [50.810108270069563, 24.754742539971371], [51.112415398977006, 24.556330878186721], [51.389607781790623, 24.627385972588051], [51.579518670463258, 24.245497137951102], [51.617707553926969, 24.014219265228824], [52.000733270074321, 23.001154486578937], [55.006803012924898, 22.496947536707129], [55.208341098863187, 22.708329982997039], [55.666659376859812, 22.000001125572336], [54.999981723862355, 19.999994004796104], [52.000009800022227, 19.000003363516054], [49.116671583864857, 18.616667588774941], [48.183343540241324, 18.166669216377311], [47.466694777217626, 17.116681626854877], [47.000004917189749, 16.949999294497438], [46.749994337761642, 17.283338120996174], [46.366658563020529, 17.233315334537632], [45.399999220568752, 17.333335069238554], [45.216651238797184, 17.43332896572333], [44.062613152855072, 17.410358791569589], [43.791518589051904, 17.319976711491105], [43.380794305196098, 17.579986680567668], [43.115797560403351, 17.088440456607369], [43.218375278502734, 16.666889960186406], [42.779332309750963, 16.34789134364868]]] } }, + { "type": "Feature", "properties": { "admin": "Sudan", "name": "Sudan", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[33.963392794971178, 9.464285229420623], [33.824963480907506, 9.48406084571536], [33.842130853028145, 9.981914637215992], [33.721959248183097, 10.325262079630191], [33.206938084561777, 10.720111638406591], [33.086766479716729, 11.441141267476493], [33.206938084561777, 12.179338268667093], [32.743419037302537, 12.24800775714999], [32.674749548819641, 12.024831919580716], [32.073891524594778, 11.973329803218517], [32.314234734284746, 11.681484477166519], [32.400071594888338, 11.080626452941486], [31.850715687025509, 10.531270545078822], [31.352861895524875, 9.810240916008693], [30.837840731903377, 9.707236683284519], [29.996639497988546, 10.290927335388684], [29.618957311332842, 10.084918869940223], [29.515953078608607, 9.793073543888053], [29.000931914987166, 9.604232450560287], [28.966597170745779, 9.398223985111654], [27.970889587744345, 9.398223985111654], [27.833550610778783, 9.604232450560287], [27.112520981708876, 9.638567194801622], [26.752006167173811, 9.466893473594492], [26.477328213242508, 9.552730334198086], [25.96230704962101, 10.136420986302422], [25.790633328413943, 10.411098940233726], [25.069603699343979, 10.27375996326799], [24.79492574541268, 9.810240916008693], [24.537415163602017, 8.917537565731719], [24.194067721187643, 8.728696472403895], [23.886979580860665, 8.619729712933063], [23.805813429466745, 8.666318874542522], [23.459012892355979, 8.954285793489019], [23.394779087017291, 9.26506785729225], [23.557249790142915, 9.681218166538766], [23.554304233502187, 10.089255275915319], [22.977543572692749, 10.714462591998538], [22.864165480244246, 11.142395127807616], [22.87622, 11.384610000000119], [22.50869, 11.67936], [22.49762, 12.26024], [22.28801, 12.64605], [21.93681, 12.588180000000133], [22.03759, 12.95546], [22.29658, 13.37232], [22.18329, 13.78648], [22.51202, 14.09318], [22.30351, 14.32682], [22.567950000000106, 14.944290000000134], [23.02459, 15.68072], [23.886890000000101, 15.61084], [23.837660000000135, 19.580470000000101], [23.850000000000129, 20.0], [25.00000000000011, 20.00304], [25.00000000000011, 22.0], [29.02, 22.0], [32.9, 22.0], [36.86623, 22.0], [37.18872, 21.01885], [36.96941, 20.837440000000125], [37.114700000000134, 19.80796], [37.48179, 18.61409], [37.86276, 18.36786], [38.410089959473218, 17.998307399970312], [37.904000000000103, 17.42754], [37.16747, 17.263140000000128], [36.852530000000108, 16.95655], [36.75389, 16.29186], [36.32322, 14.82249], [36.42951, 14.42211], [36.27022, 13.563330000000118], [35.86363, 12.57828], [35.26049, 12.08286], [34.831630000000125, 11.318960000000116], [34.73115000000012, 10.910170000000106], [34.25745, 10.63009], [33.96162, 9.58358], [33.963392794971178, 9.464285229420623]]] } }, + { "type": "Feature", "properties": { "admin": "South Sudan", "name": "S. Sudan", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[33.963392794971178, 9.464285229420623], [33.97498, 8.68456], [33.82550000000014, 8.37916], [33.294800000000116, 8.35458], [32.95418, 7.7849700000001], [33.56829, 7.71334], [34.0751, 7.22595], [34.25032, 6.82607], [34.70702, 6.59422000000012], [35.298007118233095, 5.506], [34.620196267853935, 4.847122742082034], [34.005, 4.249884947362147], [33.39, 3.79], [32.68642, 3.79232], [31.881450000000136, 3.55827], [31.24556, 3.7819], [30.83385, 3.50917], [29.95349, 4.1737], [29.715995314256013, 4.600804755060152], [29.159078403446635, 4.389267279473244], [28.696677687298795, 4.455077215996993], [28.428993768026992, 4.287154649264607], [27.979977247842946, 4.408413397637388], [27.374226108517625, 5.233944403500173], [27.213409051225248, 5.550953477394613], [26.465909458123289, 5.946717434101855], [26.213418409945113, 6.546603298362127], [25.796647983511257, 6.979315904158169], [25.124130893664805, 7.500085150579422], [25.114932488716867, 7.825104071479244], [24.567369012152191, 8.229187933785452], [23.886979580860665, 8.619729712933063], [24.194067721187643, 8.728696472403895], [24.537415163602017, 8.917537565731719], [24.79492574541268, 9.810240916008693], [25.069603699343979, 10.27375996326799], [25.790633328413943, 10.411098940233726], [25.96230704962101, 10.136420986302422], [26.477328213242508, 9.552730334198086], [26.752006167173811, 9.466893473594492], [27.112520981708876, 9.638567194801622], [27.833550610778783, 9.604232450560287], [27.970889587744345, 9.398223985111654], [28.966597170745779, 9.398223985111654], [29.000931914987166, 9.604232450560287], [29.515953078608607, 9.793073543888053], [29.618957311332842, 10.084918869940223], [29.996639497988546, 10.290927335388684], [30.837840731903377, 9.707236683284519], [31.352861895524875, 9.810240916008693], [31.850715687025509, 10.531270545078822], [32.400071594888338, 11.080626452941486], [32.314234734284746, 11.681484477166519], [32.073891524594778, 11.973329803218517], [32.674749548819641, 12.024831919580716], [32.743419037302537, 12.24800775714999], [33.206938084561777, 12.179338268667093], [33.086766479716729, 11.441141267476493], [33.206938084561777, 10.720111638406591], [33.721959248183097, 10.325262079630191], [33.842130853028145, 9.981914637215992], [33.824963480907506, 9.48406084571536], [33.963392794971178, 9.464285229420623]]] } }, + { "type": "Feature", "properties": { "admin": "Senegal", "name": "Senegal", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-16.713728807023468, 13.594958604379853], [-17.126106736712611, 14.373515733289221], [-17.625042690490655, 14.72954051356407], [-17.185172898822227, 14.91947724045286], [-16.700706346085919, 15.621527411354107], [-16.463098110407881, 16.135036119038457], [-16.120690070041928, 16.45566254319338], [-15.623666144258689, 16.369337063049809], [-15.135737270558813, 16.587282416240779], [-14.577347581428977, 16.598263658102805], [-14.099521450242175, 16.304302273010489], [-13.43573767745306, 16.039383042866188], [-12.830658331747513, 15.303691514542942], [-12.170750291380299, 14.616834214735503], [-12.124887457721256, 13.994727484589784], [-11.927716030311613, 13.422075100147392], [-11.553397793005427, 13.141213690641063], [-11.467899135778522, 12.754518947800973], [-11.513942836950587, 12.442987575729415], [-11.658300950557928, 12.386582749882834], [-12.20356482588563, 12.465647691289401], [-12.278599005573438, 12.354440008997285], [-12.499050665730561, 12.332089952031053], [-13.217818162478235, 12.575873521367964], [-13.700476040084322, 12.586182969610192], [-15.548476935274005, 12.628170070847343], [-15.816574266004251, 12.515567124883345], [-16.147716844130581, 12.547761542201185], [-16.67745195155457, 12.38485158940105], [-16.84152462408127, 13.151393947802557], [-15.931295945692208, 13.130284125211331], [-15.691000535534991, 13.270353094938455], [-15.511812506562931, 13.278569647672864], [-15.141163295949463, 13.509511623585235], [-14.712197231494626, 13.298206691943774], [-14.277701788784553, 13.28058502853224], [-13.844963344772404, 13.505041612191999], [-14.046992356817478, 13.794067898000446], [-14.376713833055785, 13.625680243377371], [-14.687030808968483, 13.63035696049978], [-15.081735398813816, 13.876491807505982], [-15.398770310924457, 13.860368760630916], [-15.624596320039936, 13.623587347869556], [-16.713728807023468, 13.594958604379853]]] } }, + { "type": "Feature", "properties": { "admin": "Solomon Islands", "name": "Solomon Is.", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[162.119024693040842, -10.482719008021133], [162.398645868172196, -10.826367282762119], [161.700032180018354, -10.820011081590222], [161.319796991214702, -10.204751478723123], [161.917383254237933, -10.446700534713653], [162.119024693040842, -10.482719008021133]]], [[[160.852228631837903, -9.872937106977002], [160.462588332357228, -9.89520964929484], [159.849447463214176, -9.794027194867367], [159.640002883135139, -9.639979750205269], [159.70294477766663, -9.242949720906777], [160.362956170898428, -9.400304457235533], [160.688517694337179, -9.610162448772808], [160.852228631837903, -9.872937106977002]]], [[[161.679981724289121, -9.599982191611373], [161.52939660059053, -9.784312025596433], [160.788253208660507, -8.917543226764918], [160.579997186524338, -8.320008640173965], [160.92002811100491, -8.320008640173965], [161.280006138349961, -9.120011488484449], [161.679981724289121, -9.599982191611373]]], [[[159.875027297198585, -8.337320244991714], [159.917401971677975, -8.538289890174864], [159.133677199539335, -8.114181410355398], [158.586113722974687, -7.754823500197713], [158.211149530264834, -7.421872246941147], [158.359977655265425, -7.320017998893915], [158.820001255527671, -7.56000335045739], [159.640002883135139, -8.020026950719567], [159.875027297198585, -8.337320244991714]]], [[[157.53842573468927, -7.347819919466928], [157.339419793933217, -7.404767347852554], [156.902030471014768, -7.176874281445391], [156.491357863591304, -6.765943291860394], [156.542827590153934, -6.599338474151478], [157.140000441718882, -7.021638278840653], [157.53842573468927, -7.347819919466928]]]] } }, + { "type": "Feature", "properties": { "admin": "Sierra Leone", "name": "Sierra Leone", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[-11.438779466182053, 6.785916856305746], [-11.708194545935736, 6.860098374860724], [-12.428098924193815, 7.262942002792029], [-12.949049038128193, 7.798645738145736], [-13.124025437868479, 8.163946438016977], [-13.246550258832512, 8.903048610871506], [-12.711957566773076, 9.342711696810765], [-12.596719122762206, 9.620188300001969], [-12.425928514037562, 9.835834051955953], [-12.150338100625003, 9.858571682164378], [-11.917277390988655, 10.046983954300556], [-11.117481248407328, 10.045872911006283], [-10.839151984083299, 9.688246161330367], [-10.622395188835037, 9.267910061068276], [-10.65477047366589, 8.977178452994194], [-10.494315151399629, 8.715540676300433], [-10.505477260774667, 8.348896389189603], [-10.230093553091276, 8.406205552601291], [-10.695594855176477, 7.939464016141085], [-11.14670427086838, 7.396706447779534], [-11.199801805048278, 7.105845648624735], [-11.438779466182053, 6.785916856305746]]] } }, + { "type": "Feature", "properties": { "admin": "El Salvador", "name": "El Salvador", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-87.793111131526558, 13.384480495655051], [-87.904112108089507, 13.149016831917134], [-88.483301561216791, 13.163951320849488], [-88.843227912129692, 13.259733588102474], [-89.256742723329282, 13.4585328231293], [-89.812393561547637, 13.520622056527994], [-90.095554572290951, 13.73533763270073], [-90.064677903996568, 13.881969509328924], [-89.7219339668207, 14.134228013561694], [-89.5342193265205, 14.244815578666302], [-89.587342698916544, 14.362586167859485], [-89.353325975282772, 14.424132798719112], [-89.058511929057644, 14.340029405164085], [-88.843072882832814, 14.140506700085169], [-88.541230841815974, 13.980154730683475], [-88.50399797234968, 13.845485948130854], [-88.065342576840123, 13.964625962779774], [-87.859515347021585, 13.893312486216979], [-87.723502977229387, 13.785050360565503], [-87.793111131526558, 13.384480495655051]]] } }, + { "type": "Feature", "properties": { "admin": "Somaliland", "name": "Somaliland", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[48.938129510296491, 9.451748968946672], [48.486735874226994, 8.837626247589979], [47.78942, 8.003], [46.948328484897942, 7.996876532417386], [43.67875, 9.183580000000116], [43.296975132018744, 9.540477403191742], [42.92812, 10.021940000000139], [42.55876, 10.572580000000126], [42.776851841000948, 10.926878566934416], [43.145304803242126, 11.462039699748853], [43.470659620951658, 11.27770986576388], [43.666668328634834, 10.864169216348158], [44.117803582542805, 10.445538438351603], [44.614259067570849, 10.442205308468941], [45.556940545439133, 10.698029486529775], [46.645401238802997, 10.816549383991171], [47.525657586462778, 11.127228094929986], [48.021596307167769, 11.193063869669741], [48.378783807169263, 11.375481675660122], [48.948206414593457, 11.410621649618516], [48.942005242718423, 11.394266058798163], [48.938491245322595, 10.982327378783451], [48.938232863161076, 9.973500067581481], [48.938129510296491, 9.451748968946672]]] } }, + { "type": "Feature", "properties": { "admin": "Somalia", "name": "Somalia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[49.72862, 11.5789], [50.25878, 11.67957], [50.73202, 12.0219], [51.1112, 12.02464], [51.13387, 11.74815], [51.04153, 11.16651], [51.04531, 10.6409], [50.83418, 10.27972], [50.55239, 9.19874], [50.07092, 8.08173], [49.4527, 6.80466], [48.59455, 5.33911], [47.74079, 4.2194], [46.56476, 2.85529], [45.56399, 2.04576], [44.06815, 1.05283], [43.13597, 0.2922], [42.04157, -0.91916], [41.81095, -1.44647], [41.58513, -1.68325], [40.993, -0.85829], [40.98105, 2.78452], [41.855083092643966, 3.918911920483726], [42.12861, 4.23413], [42.76967, 4.25259], [43.66087, 4.95755], [44.9636, 5.00162], [47.78942, 8.003], [48.486735874226937, 8.837626247589993], [48.938129510296442, 9.451748968946616], [48.938232863161026, 9.973500067581508], [48.938491245322481, 10.982327378783465], [48.942005242718345, 11.394266058798136], [48.948204758509732, 11.410617281697961], [49.26776, 11.43033], [49.72862, 11.5789]]] } }, + { "type": "Feature", "properties": { "admin": "Republic of Serbia", "name": "Serbia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[20.874312778413408, 45.416375433934306], [21.483526238702204, 45.181170152357865], [21.562022739353718, 44.768947251965635], [22.145087924902892, 44.478422349620573], [22.459022251075961, 44.702517198254426], [22.705725538837434, 44.578002834647002], [22.47400841644065, 44.409227606781762], [22.657149692483067, 44.234923000661347], [22.410446404721593, 44.008063462900047], [22.500156691180219, 43.642814439460999], [22.986018507588479, 43.211161200527094], [22.604801466571352, 42.898518785161109], [22.43659467946139, 42.580321153323943], [22.545011834409642, 42.461362006188025], [22.380525750424674, 42.320259507815074], [21.917080000000105, 42.30364], [21.576635989402117, 42.245224397061847], [21.54332, 42.32025], [21.66292, 42.43922], [21.77505, 42.6827], [21.63302, 42.67717], [21.43866, 42.86255], [21.27421, 42.90959], [21.143395, 43.068685000000123], [20.95651, 43.13094], [20.81448, 43.27205], [20.63508, 43.21671], [20.49679, 42.88469], [20.25758, 42.81275], [20.3398, 42.89852], [19.95857, 43.10604], [19.63, 43.213779970270522], [19.48389, 43.35229], [19.21852, 43.52384], [19.454, 43.568100000000115], [19.59976, 44.03847], [19.11761, 44.42307], [19.36803, 44.863], [19.00548, 44.86023], [19.390475701584588, 45.236515611342369], [19.072768995854172, 45.521511135432078], [18.82982, 45.90888], [19.596044549241636, 46.171729844744547], [20.22019249846289, 46.127468980486569], [20.76217492033998, 45.734573065771478], [20.874312778413408, 45.416375433934306]]] } }, + { "type": "Feature", "properties": { "admin": "Suriname", "name": "Suriname", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-57.147436489476874, 5.973149929219161], [-55.949318406789786, 5.772877915872], [-55.841779751190408, 5.953125311706059], [-55.033250291551759, 6.025291449401662], [-53.958044603070888, 5.756548163267764], [-54.478632981979224, 4.896755682795585], [-54.3995422023565, 4.212611395683466], [-54.006930508018996, 3.620037746592558], [-54.181726040246261, 3.189779771330421], [-54.269705166223183, 2.732391669115046], [-54.524754197799709, 2.311848863123785], [-55.097587449755125, 2.523748073736612], [-55.569755011605984, 2.42150625244713], [-55.973322109589361, 2.510363877773016], [-56.073341844290283, 2.220794989425499], [-55.905600145070871, 2.021995754398659], [-55.995698004771739, 1.817667141116601], [-56.53938574891454, 1.89952260986692], [-57.150097825739898, 2.768926906745406], [-57.281433478409703, 3.333491929534119], [-57.601568976457848, 3.334654649260684], [-58.044694383360664, 4.060863552258382], [-57.860209520078691, 4.576801052260449], [-57.914288906472123, 4.812626451024413], [-57.307245856339492, 5.073566595882225], [-57.147436489476874, 5.973149929219161]]] } }, + { "type": "Feature", "properties": { "admin": "Slovakia", "name": "Slovakia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[18.85314415861361, 49.496229763377634], [18.909574822676316, 49.435845852244562], [19.320712517990469, 49.571574001659179], [19.825022820726865, 49.217125352569219], [20.415839471119849, 49.431453355499755], [20.887955356538406, 49.328772284535823], [21.607808058364206, 49.470107326854077], [22.558137648211751, 49.08573802346713], [22.280841912533553, 48.825392157580659], [22.085608351334848, 48.422264309271782], [21.872236362401729, 48.319970811550007], [20.801293979584919, 48.62385407164237], [20.473562045989862, 48.562850043321809], [20.239054396249344, 48.327567247096916], [19.769470656013109, 48.2026911484636], [19.66136355965849, 48.266614895208647], [19.174364861739885, 48.111378892603859], [18.777024773847668, 48.081768296900627], [18.696512892336923, 47.88095368101439], [17.857132602620023, 47.758428860050365], [17.488472934649813, 47.867466132186209], [16.979666782304033, 48.123497015976298], [16.879982944412998, 48.470013332709463], [16.960288120194573, 48.596982326850593], [17.101984897538895, 48.8169688991171], [17.545006951577101, 48.800019029325362], [17.886484816161808, 48.903475246773695], [17.913511590250462, 48.996492824899072], [18.104972771891848, 49.043983466175298], [18.170498488037961, 49.271514797556421], [18.399993523846174, 49.315000515330034], [18.554971144289478, 49.495015367218777], [18.85314415861361, 49.496229763377634]]] } }, + { "type": "Feature", "properties": { "admin": "Slovenia", "name": "Slovenia", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[13.806475457421524, 46.509306138691201], [14.632471551174827, 46.431817328469535], [15.137091912504982, 46.658702704447016], [16.011663852612653, 46.683610744811688], [16.202298211337361, 46.852385972676949], [16.370504998447412, 46.841327216166498], [16.564808383864854, 46.503750922219822], [15.768732944408548, 46.238108222023442], [15.671529575267552, 45.834153550797865], [15.323953891672403, 45.731782538427673], [15.327674594797424, 45.452316392593218], [14.935243767972931, 45.471695054702671], [14.595109490627804, 45.6349409043127], [14.411968214585411, 45.466165676447446], [13.715059848697221, 45.500323798192369], [13.937630242578305, 45.591015936864608], [13.698109978905475, 46.016778062517339], [13.806475457421524, 46.509306138691201]]] } }, + { "type": "Feature", "properties": { "admin": "Sweden", "name": "Sweden", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[22.183173455501922, 65.723740546320158], [21.213516879977213, 65.02600535751526], [21.369631381930954, 64.413587958424273], [19.778875766690216, 63.609554348395022], [17.847779168375208, 62.749400132896803], [17.11955488451812, 61.341165676510954], [17.831346062906388, 60.636583360427394], [18.787721795332086, 60.081914374422581], [17.869224887776337, 58.95376618105869], [16.829185011470084, 58.719826972073385], [16.44770958829147, 57.041118069071871], [15.87978559740378, 56.104301866268649], [14.666681349352071, 56.20088511822216], [14.100721062891461, 55.407781073622637], [12.942910597392054, 55.361737372450563], [12.625100538797025, 56.307080186581956], [11.787942335668671, 57.441817125063061], [11.027368605196866, 58.856149400459344], [11.468271925511145, 59.432393296946024], [12.300365838274896, 60.117932847730025], [12.631146681375181, 61.293571682370121], [11.992064243221559, 61.800362453856543], [11.930569288794228, 63.128317572676963], [12.57993533697393, 64.066218980558318], [13.571916131248711, 64.049114081469696], [13.9199052263022, 64.445420640716065], [13.555689731509087, 64.7870276963815], [15.108411492582999, 66.19386688909546], [16.108712192456775, 67.302455552836875], [16.768878614985478, 68.013936672631388], [17.729181756265344, 68.010551866316263], [17.993868442464329, 68.567391262477344], [19.878559604581248, 68.407194322372561], [20.025268995857882, 69.065138658312691], [20.645592889089521, 69.106247260200846], [21.978534783626113, 68.616845608180682], [23.539473097434435, 67.936008612735236], [23.565879754335576, 66.396050930437411], [23.903378533633795, 66.006927395279604], [22.183173455501922, 65.723740546320158]]] } }, + { "type": "Feature", "properties": { "admin": "Swaziland", "name": "Swaziland", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[32.071665480281062, -26.733820082304902], [31.868060337051073, -27.17792734142127], [31.282773064913325, -27.285879408478991], [30.685961948374477, -26.743845310169526], [30.676608514129633, -26.398078301704604], [30.949666782359905, -26.022649021104144], [31.044079624157146, -25.731452325139436], [31.333157586397899, -25.660190525008943], [31.837777947728057, -25.843331801051342], [31.985779249811962, -26.29177988048022], [32.071665480281062, -26.733820082304902]]] } }, + { "type": "Feature", "properties": { "admin": "Syria", "name": "Syria", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[38.792340529136077, 33.378686428352218], [36.834062127435537, 32.312937526980768], [35.719918247222743, 32.709192409794859], [35.700797967274745, 32.716013698857374], [35.836396925608618, 32.868123277308506], [35.821100701650231, 33.277426459276292], [36.066460402172048, 33.824912421192543], [36.611750115715886, 34.201788641897174], [36.448194207512095, 34.59393524834406], [35.998402540843628, 34.644914048799997], [35.905023227692219, 35.410009467097318], [36.149762811026527, 35.821534735653664], [36.417550083163029, 36.040616970355053], [36.685389031731795, 36.259699205056457], [36.739494256341395, 36.817520453431079], [37.066761102045824, 36.623036200500614], [38.167727492024191, 36.901210435527766], [38.699891391765895, 36.712927354472335], [39.522580193852541, 36.716053778625984], [40.673259311695681, 37.091276353497285], [41.212089471203043, 37.074352321921687], [42.349591098811764, 37.22987254490409], [41.837064243340954, 36.605853786763568], [41.289707472505448, 36.358814602192261], [41.383965285005807, 35.628316555314349], [41.00615888851992, 34.419372260062111], [38.792340529136077, 33.378686428352218]]] } }, + { "type": "Feature", "properties": { "admin": "Chad", "name": "Chad", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[14.495787387762899, 12.859396267137353], [14.595781284247604, 13.330426947477859], [13.954476759505607, 13.353448798063765], [13.956698846094124, 13.996691189016925], [13.540393507550785, 14.36713369390122], [13.97217, 15.68437], [15.247731154041842, 16.627305813050778], [15.300441114979716, 17.927949937405], [15.68574059414777, 19.957180080642384], [15.90324669766431, 20.387618923417499], [15.487148064850143, 20.730414537025634], [15.47106, 21.04845], [15.096887648181847, 21.308518785074902], [14.8513, 22.862950000000119], [15.86085, 23.40972], [19.84926, 21.49509], [23.837660000000135, 19.580470000000101], [23.886890000000101, 15.61084], [23.02459, 15.68072], [22.567950000000106, 14.944290000000134], [22.30351, 14.32682], [22.51202, 14.09318], [22.18329, 13.78648], [22.29658, 13.37232], [22.03759, 12.95546], [21.93681, 12.588180000000133], [22.28801, 12.64605], [22.49762, 12.26024], [22.50869, 11.67936], [22.87622, 11.384610000000119], [22.864165480244246, 11.142395127807616], [22.231129184668756, 10.971888739460608], [21.723821648859538, 10.567055568885959], [21.000868361096305, 9.475985215691479], [20.059685499764267, 9.012706000194838], [19.094008009526071, 9.074846910025768], [18.81200971850927, 8.982914536978623], [18.911021762780589, 8.630894680206435], [18.389554884523303, 8.281303615751879], [17.964929640380884, 7.890914008002992], [16.705988396886365, 7.508327541529978], [16.4561845231874, 7.734773667832938], [16.290561557691884, 7.754307359239417], [16.106231723706738, 7.497087917506461], [15.279460483469164, 7.42192454673801], [15.436091749745737, 7.692812404811887], [15.120865512765302, 8.382150173369437], [14.979995558337688, 8.796104234243442], [14.544466586981851, 8.965861314322238], [13.954218377344088, 9.549494940626685], [14.17146609869911, 10.021378282100043], [14.627200555081057, 9.920919297724591], [14.909353875394796, 9.992129421422758], [15.46787275560524, 9.982336737503543], [14.923564894275042, 10.891325181517514], [14.960151808337679, 11.555574042197234], [14.89336, 12.21905], [14.495787387762899, 12.859396267137353]]] } }, + { "type": "Feature", "properties": { "admin": "Togo", "name": "Togo", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[1.865240512712318, 6.14215770102973], [1.060121697604927, 5.928837388528875], [0.836931186536333, 6.279978745952147], [0.570384148774849, 6.914358628767188], [0.490957472342245, 7.411744289576474], [0.712029249686878, 8.312464504423827], [0.461191847342121, 8.677222601756013], [0.365900506195885, 9.46500397382948], [0.367579990245389, 10.191212876827176], [-0.049784715159944, 10.706917832883928], [0.023802524423701, 11.018681748900802], [0.899563022474069, 10.997339382364258], [0.772335646171484, 10.470808213742357], [1.077795037448737, 10.175606594275022], [1.425060662450136, 9.825395412632998], [1.46304284018467, 9.334624335157086], [1.664477573258381, 9.128590399609378], [1.618950636409238, 6.832038072126236], [1.865240512712318, 6.14215770102973]]] } }, + { "type": "Feature", "properties": { "admin": "Thailand", "name": "Thailand", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[102.58493248902667, 12.186594956913279], [101.687157830819928, 12.645740057826568], [100.831809523524839, 12.627084865769204], [100.978467238369191, 13.412721665902563], [100.097797479251099, 13.406856390837429], [100.018732537844528, 12.307001044153353], [99.478920526123602, 10.846366685423545], [99.153772414143134, 9.963061428258554], [99.222398716226749, 9.239255479362425], [99.873831821698118, 9.207862046745118], [100.279646844486194, 8.29515289960605], [100.45927412313273, 7.429572658717175], [101.017327915452697, 6.856868597842476], [101.623079054778032, 6.740622463401918], [102.141186964936367, 6.221636053894626], [101.81428185425797, 5.810808417174242], [101.154218784593837, 5.691384182147713], [101.075515578213327, 6.20486705161592], [100.259596388756933, 6.642824815289542], [100.085756870527092, 6.46448944745029], [99.690690545655727, 6.848212795433595], [99.519641554769606, 7.343453884302759], [98.988252801512289, 7.907993068875325], [98.503786248775967, 8.382305202666286], [98.339661899816988, 7.794511623562384], [98.150009393305808, 8.350007432483876], [98.259150018306229, 8.973922837759799], [98.553550653073017, 9.932959906448543], [99.038120558673953, 10.960545762572435], [99.587286004639694, 11.892762762901695], [99.196353794351637, 12.804748439988666], [99.212011753336071, 13.269293728076462], [99.097755161538728, 13.827502549693275], [98.430819126379859, 14.622027696180831], [98.192074009191373, 15.123702500870349], [98.537375929765687, 15.308497422746081], [98.90334842325673, 16.177824204976115], [98.493761020911322, 16.837835598207928], [97.859122755934848, 17.567946071843657], [97.375896437573516, 18.445437730375811], [97.797782830804394, 18.627080389881751], [98.253723992915582, 19.708203029860041], [98.959675734454848, 19.752980658440944], [99.543309360759281, 20.186597601802056], [100.115987583417819, 20.41784963630818], [100.548881056726856, 20.109237982661124], [100.606293573003128, 19.508344427971217], [101.282014601651667, 19.462584947176762], [101.035931431077742, 18.408928330961611], [101.059547560635139, 17.512497259994486], [102.113591750092453, 18.109101670804161], [102.413004998791592, 17.932781683824281], [102.998705682387694, 17.961694647691598], [103.200192091893726, 18.309632066312769], [103.956476678485288, 18.240954087796872], [104.716947056092465, 17.428858954330078], [104.779320509868768, 16.441864935771445], [105.589038527450128, 15.570316066952856], [105.544338413517664, 14.723933620660414], [105.218776890078871, 14.27321177821069], [104.281418084736586, 14.416743068901363], [102.988422072361601, 14.225721136934464], [102.348099399833004, 13.39424734135822], [102.58493248902667, 12.186594956913279]]] } }, + { "type": "Feature", "properties": { "admin": "Tajikistan", "name": "Tajikistan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[71.014198032520156, 40.244365546218226], [70.648018833299957, 39.935753892571157], [69.559609816368507, 40.103211371412968], [69.464886915977516, 39.526683254548693], [70.549161818325601, 39.604197902986492], [71.784693637991992, 39.279463202464363], [73.67537926625478, 39.431236884105594], [73.928852166646408, 38.505815334622724], [74.257514276022718, 38.606506862943441], [74.864815708316812, 38.378846340481587], [74.829985792952087, 37.990007025701388], [74.980002475895404, 37.419990139305888], [73.948695916646486, 37.421566270490786], [73.260055779924983, 37.495256862938994], [72.636889682917271, 37.047558091778349], [72.193040805962383, 36.94828766534566], [71.84463829945058, 36.738171291646914], [71.448693475230229, 37.065644843080513], [71.541917759084768, 37.905774441065631], [71.239403924448155, 37.953265082341879], [71.348131137990251, 38.258905341132156], [70.806820509732873, 38.486281643216408], [70.376304152309274, 38.138395901027515], [70.270574171840124, 37.73516469985401], [70.116578403610319, 37.588222764632086], [69.518785434857946, 37.608996690413413], [69.196272820924364, 37.15114350030742], [68.859445835245921, 37.344335842430588], [68.135562371701369, 37.023115139304302], [67.829999627559502, 37.144994004864678], [68.392032505165943, 38.157025254868728], [68.176025018185911, 38.901553453113898], [67.442219679641298, 39.140143541005479], [67.701428664017342, 39.580478420564518], [68.536416456989414, 39.533452867178923], [69.011632928345477, 40.086158148756653], [69.329494663372813, 40.727824408524839], [70.666622348925031, 40.960213324541407], [70.458159621059608, 40.49649485937028], [70.601406691372674, 40.218527330072284], [71.014198032520156, 40.244365546218226]]] } }, + { "type": "Feature", "properties": { "admin": "Turkmenistan", "name": "Turkmenistan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[61.21081709172573, 35.650072333309218], [61.123070509694131, 36.491597194966239], [60.377637973883864, 36.52738312432836], [59.234761997316795, 37.412987982730336], [58.436154412678192, 37.522309475243794], [57.330433790928964, 38.029229437810933], [56.619366082592805, 38.121394354803478], [56.180374790273319, 37.935126654607423], [55.511578403551894, 37.964117133123153], [54.800303989486558, 37.392420762678178], [53.921597934795543, 37.198918361961255], [53.735511102112504, 37.906136176091685], [53.880928582581831, 38.952093003895349], [53.101027866432894, 39.290573635407121], [53.357808058491216, 39.975286363274442], [52.693972609269807, 40.033629055331964], [52.91525109234361, 40.87652334244472], [53.85813927594112, 40.631034450842165], [54.736845330632136, 40.951014919593455], [54.0083109881813, 41.551210842447404], [53.721713494690576, 42.123191433270016], [52.916749708880069, 41.868116563477322], [52.81468875510361, 41.135370591794704], [52.502459751196135, 41.783315538086356], [52.94429324729164, 42.116034247397586], [54.079417759014937, 42.324109402020817], [54.755345493392625, 42.04397146256656], [55.455251092353755, 41.259859117185826], [55.968191359282898, 41.308641669269356], [57.096391229079089, 41.32231008561056], [56.93221520368779, 41.82602610937559], [57.786529982337065, 42.170552883465511], [58.629010857991453, 42.751551011723045], [59.976422153569771, 42.223081976890199], [60.083340691981654, 41.425146185871391], [60.46595299667068, 41.22032664648254], [61.547178989513547, 41.2663703476546], [61.882714064384679, 41.084856879229392], [62.374260288344992, 40.053886216790382], [63.518014764261018, 39.363256537425627], [64.170223016216752, 38.892406724598231], [65.215998976507379, 38.402695013984292], [66.546150343700205, 37.974684963526855], [66.518606805288655, 37.362784328758785], [66.217384881459324, 37.393790188133913], [65.745630731066811, 37.661164048812061], [65.588947788357828, 37.305216783185628], [64.746105177677393, 37.111817735333297], [64.546479119733888, 36.31207326918426], [63.982895949158696, 36.007957465146596], [63.193538445900337, 35.857165635718907], [62.984662306576588, 35.404040839167614], [62.230651483005879, 35.270663967422287], [61.21081709172573, 35.650072333309218]]] } }, + { "type": "Feature", "properties": { "admin": "East Timor", "name": "Timor-Leste", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[124.96868248911619, -8.892790215697081], [125.086246372580248, -8.656887302284678], [125.947072381698234, -8.432094821815033], [126.64470421763852, -8.39824675866385], [126.957243280139792, -8.273344821814396], [127.335928175974615, -8.397316582882601], [126.967991978056517, -8.668256117388891], [125.925885044458568, -9.106007175333351], [125.088520135601073, -9.393173109579292], [125.070019972840583, -9.08998748132287], [124.96868248911619, -8.892790215697081]]] } }, + { "type": "Feature", "properties": { "admin": "Trinidad and Tobago", "name": "Trinidad and Tobago", "continent": "North America" }, "geometry": { "type": "Polygon", "coordinates": [[[-61.68, 10.76], [-61.105, 10.89], [-60.895, 10.855], [-60.935, 10.11], [-61.77, 10.0], [-61.95, 10.09], [-61.66, 10.365], [-61.68, 10.76]]] } }, + { "type": "Feature", "properties": { "admin": "Tunisia", "name": "Tunisia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[9.482139926805273, 30.307556057246181], [9.055602654668148, 32.102691962201284], [8.439102817426116, 32.506284898400814], [8.430472853233367, 32.748337307255944], [7.612641635782181, 33.344114895148955], [7.524481642292242, 34.097376410451453], [8.140981479534302, 34.655145982393783], [8.376367628623766, 35.479876003555937], [8.217824334352313, 36.433176988260271], [8.420964389691674, 36.946427313783154], [9.509993523810605, 37.349994411766531], [10.210002475636315, 37.230001735984807], [10.180650262094529, 36.724037787415071], [11.028867221733348, 37.09210317641395], [11.100025668999249, 36.899996039368908], [10.600004510143092, 36.410000108377368], [10.593286573945134, 35.947444362932806], [10.939518670300686, 35.698984076473486], [10.807847120821007, 34.833507188449182], [10.149592726287123, 34.330773016897702], [10.339658644256613, 33.785741685515312], [10.856836378633684, 33.768740139291275], [11.108500603895118, 33.293342800422188], [11.488787469131008, 33.136995754523134], [11.432253452203692, 32.368903103152867], [10.944789666394453, 32.081814683555358], [10.636901482799484, 31.761420803345747], [9.950225050505081, 31.376069647745251], [10.056575148161752, 30.961831366493595], [9.97001712407285, 30.539324856075236], [9.482139926805273, 30.307556057246181]]] } }, + { "type": "Feature", "properties": { "admin": "Turkey", "name": "Turkey", "continent": "Asia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[36.913127068842151, 41.335358384764291], [38.347664829264502, 40.948586127275711], [39.512606642420238, 41.102762763018561], [40.373432651538245, 41.013672593747337], [41.554084100110707, 41.535656236327604], [42.619548781104548, 41.58317271581992], [43.582745802592704, 41.09214325618256], [43.752657911968491, 40.740200914058811], [43.656436395040963, 40.253563951166157], [44.400008579288759, 40.005000311842302], [44.79398969908199, 39.713002631177027], [44.109225294782355, 39.428136298168049], [44.421402622257595, 38.281281236314513], [44.225755649600522, 37.971584377589345], [44.772699008977739, 37.170444647768441], [44.293451775902852, 37.001514390606353], [43.942258742047343, 37.256227525372928], [42.77912560402185, 37.385263576805798], [42.349591098811764, 37.229872544904104], [41.212089471203015, 37.074352321921729], [40.673259311695702, 37.091276353497356], [39.522580193852512, 36.716053778626012], [38.699891391765917, 36.712927354472313], [38.167727492024156, 36.90121043552778], [37.066761102045824, 36.623036200500614], [36.739494256341366, 36.817520453431108], [36.685389031731816, 36.259699205056499], [36.417550083163086, 36.040616970355096], [36.149762811026584, 35.821534735653664], [35.782084995269848, 36.274995429014915], [36.160821567537049, 36.650605577128367], [35.550936313628334, 36.565442816711325], [34.714553256984367, 36.795532131490909], [34.026894972476455, 36.219960028623966], [32.509158156064096, 36.107563788389193], [31.69959516777956, 36.644275214172602], [30.621624790171062, 36.677864895162308], [30.391096225717114, 36.262980658506983], [29.69997562024556, 36.144357408181001], [28.732902866335387, 36.676831366516431], [27.641186557737363, 36.658822129862749], [27.048767937943289, 37.653360907536005], [26.318218214633042, 38.208133246405382], [26.804700148228726, 38.985760199533551], [26.170785353304375, 39.463612168936457], [27.280019972449388, 40.420013739578302], [28.819977654747209, 40.460011298172212], [29.240003696415574, 41.219990749672682], [31.145933872204434, 41.087621568357058], [32.347979363745786, 41.736264146484629], [33.513282911927512, 42.018960069337304], [35.167703891751863, 42.040224921225438], [36.913127068842151, 41.335358384764291]]], [[[27.192376743282406, 40.690565700842448], [26.358009067497782, 40.151993923496477], [26.043351271272535, 40.617753607743161], [26.056942172965332, 40.824123440100735], [26.294602085075692, 40.936261298174166], [26.604195590936282, 41.562114569661013], [26.117041863720825, 41.826904608724554], [27.135739373490505, 42.141484890301307], [27.996720411905407, 42.007358710287768], [28.115524529744441, 41.622886054036279], [28.988442824018779, 41.299934190428175], [28.806438429486743, 41.05496206314853], [27.619017368284112, 40.999823309893102], [27.192376743282406, 40.690565700842448]]]] } }, + { "type": "Feature", "properties": { "admin": "Taiwan", "name": "Taiwan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[121.777817824389899, 24.394273586519393], [121.175632358892713, 22.790857245367164], [120.747079705896198, 21.970571397382106], [120.220083449383651, 22.814860948166732], [120.106188592612369, 23.556262722258229], [120.694679803552233, 24.53845083261373], [121.49504438688875, 25.295458889257379], [121.951243931161429, 24.997595933527034], [121.777817824389899, 24.394273586519393]]] } }, + { "type": "Feature", "properties": { "admin": "United Republic of Tanzania", "name": "Tanzania", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[33.903711197104592, -0.95], [34.07262, -1.05982], [37.69869, -3.09699], [37.7669, -3.67712], [39.20222, -4.67677], [38.74054, -5.90895], [38.79977, -6.47566], [39.44, -6.84], [39.470000000000134, -7.1], [39.19469, -7.7039], [39.25203, -8.00781], [39.18652, -8.48551], [39.53574, -9.112369999999883], [39.9496, -10.0984], [40.31659, -10.317099999999867], [39.521, -10.89688], [38.427556593587767, -11.285202325081626], [37.82764, -11.26879], [37.47129, -11.56876], [36.775150994622884, -11.59453744878078], [36.514081658684397, -11.720938002166745], [35.312397902169145, -11.439146416879165], [34.559989047999451, -11.520020033415845], [34.28, -10.16], [33.940837724096518, -9.693673841980283], [33.73972, -9.41715], [32.759375441221373, -9.230599053589001], [32.191864861791935, -8.930358981973255], [31.556348097466628, -8.762048841998647], [31.157751336950064, -8.594578747317312], [30.74, -8.34], [30.2, -7.08], [29.62, -6.52], [29.419992710088305, -5.939998874539297], [29.519986606573063, -5.419978936386257], [29.339997592900367, -4.499983412294113], [29.753512404099858, -4.452389418153301], [30.11632, -4.09012], [30.50554, -3.56858], [30.75224, -3.35931], [30.74301, -3.03431], [30.52766, -2.80762], [30.46967, -2.41383], [30.758308953583132, -2.287250257988375], [30.816134881317844, -1.698914076345374], [30.419104852019291, -1.134659112150416], [30.769860000000101, -1.01455], [31.86617, -1.02736], [33.903711197104592, -0.95]]] } }, + { "type": "Feature", "properties": { "admin": "Uganda", "name": "Uganda", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[31.86617, -1.02736], [30.769860000000101, -1.01455], [30.419104852019291, -1.134659112150416], [29.821518588996121, -1.443322442229771], [29.579466180141019, -1.341313164885605], [29.587837762172164, -0.587405694179381], [29.8195, -0.2053], [29.875778842902431, 0.597379868976361], [30.086153598762785, 1.062312730306416], [30.468507521290285, 1.583805446779706], [30.852670118948133, 1.849396470543752], [31.174149204235952, 2.204465236821306], [30.77332, 2.339890000000139], [30.83385, 3.50917], [31.24556, 3.7819], [31.88145, 3.55827], [32.68642, 3.79232], [33.39, 3.79], [34.005, 4.249884947362147], [34.47913, 3.5556], [34.59607, 3.053740000000118], [35.03599, 1.90584], [34.6721, 1.17694], [34.18, 0.515], [33.893568969666994, 0.109813537861839], [33.903711197104592, -0.95], [31.86617, -1.02736]]] } }, + { "type": "Feature", "properties": { "admin": "Ukraine", "name": "Ukraine", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [[[31.78599816257158, 52.10167796488544], [32.159412062312661, 52.061266994833204], [32.412058139787625, 52.288694973349735], [32.715760532366964, 52.238465481162038], [33.7526998227357, 52.335074571331681], [34.391730584457001, 51.768881740925778], [34.141978387190385, 51.566413479206226], [34.22481570815426, 51.255993150428942], [35.022183058417873, 51.207572333371445], [35.377923618315116, 50.773955390010343], [35.35611616388794, 50.577197374059054], [36.62616784032533, 50.225590928745127], [37.393459506995065, 50.383953355503586], [38.01063113785689, 49.915661526074622], [38.59498823421341, 49.926461900423618], [40.069058465339097, 49.601055406281688], [40.080789015469342, 49.307429917999272], [39.674663934087526, 48.783818467801872], [39.895632358567575, 48.232405097031425], [39.738277622238819, 47.898937079451983], [38.770584751141186, 47.825608222029807], [38.255112339029743, 47.546400458356807], [38.223538038899413, 47.102189846375872], [37.42513715998998, 47.022220567404197], [36.759854770664383, 46.698700263040919], [35.823684523264816, 46.645964463887054], [34.962341749823871, 46.273196519549636], [35.020787794745978, 45.65121898048465], [35.51000857925316, 45.409993394546177], [36.529997999830151, 45.46998973243705], [36.334712762199146, 45.113215643893952], [35.239999220528112, 44.939996242851599], [33.882511020652878, 44.361478583344066], [33.326420932760037, 44.564877020844875], [33.546924269349446, 45.034770819674883], [32.454174432105496, 45.327466132176063], [32.630804477679128, 45.519185695978905], [33.588162062318382, 45.851568508480227], [33.298567335754704, 46.08059845639783], [31.744140252415171, 46.333347886737378], [31.675307244602401, 46.706245022155528], [30.748748813609094, 46.583100084003995], [30.37760867688888, 46.032410183285663], [29.603289015427425, 45.293308010431119], [29.149724969201646, 45.464925442072442], [28.679779493939371, 45.30403087013169], [28.233553501099035, 45.488283189468369], [28.48526940279276, 45.596907050145887], [28.659987420371575, 45.939986884131628], [28.933717482221621, 46.258830471372491], [28.862972446414055, 46.437889309263824], [29.072106967899288, 46.517677720722482], [29.170653924279879, 46.379262396828693], [29.759971958136383, 46.349987697935354], [30.024658644335364, 46.423936672545032], [29.838210076626289, 46.525325832701675], [29.908851759569295, 46.67436066343145], [29.559674106573105, 46.928582872091312], [29.415135125452732, 47.346645209332571], [29.050867954227321, 47.510226955752493], [29.122698195113024, 47.849095160506458], [28.670891147585163, 48.118148505234089], [28.259546746541837, 48.155562242213406], [27.52253746919515, 48.467119452501102], [26.857823520624798, 48.368210761094488], [26.619336785597788, 48.220726223333457], [26.197450392366925, 48.220881252630342], [25.945941196402394, 47.987148749374207], [25.207743361112986, 47.891056423527459], [24.866317172960571, 47.737525743188307], [24.402056105250374, 47.981877753280422], [23.760958286237404, 47.985598456405448], [23.142236362406798, 48.096341050806942], [22.710531447040488, 47.882193915389394], [22.640819939878746, 48.150239569687351], [22.085608351334848, 48.422264309271782], [22.280841912533553, 48.825392157580659], [22.558137648211751, 49.08573802346713], [22.776418898212619, 49.027395331409608], [22.518450148211596, 49.476773586619736], [23.426508416444388, 50.308505764357449], [23.922757195743259, 50.424881089878738], [24.029985792748899, 50.705406602575174], [23.52707075368437, 51.578454087930233], [24.005077752384206, 51.617443956094448], [24.553106316839511, 51.888461005249177], [25.327787713327005, 51.910656032918538], [26.337958611768549, 51.832288723347915], [27.454066196408426, 51.59230337178446], [28.241615024536564, 51.572227077839059], [28.617612745892242, 51.427713934934836], [28.992835320763522, 51.602044379271462], [29.254938185347921, 51.368234361366881], [30.157363722460889, 51.416138414101454], [30.55511722181145, 51.319503485715643], [30.619454380014837, 51.822806098022362], [30.927549269338975, 52.042353420614383], [31.78599816257158, 52.10167796488544]]] } }, + { "type": "Feature", "properties": { "admin": "Uruguay", "name": "Uruguay", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-57.625133429582945, -30.216294854454258], [-56.976025763564721, -30.109686374636119], [-55.97324459494093, -30.883075860316296], [-55.601510179249331, -30.853878676071385], [-54.572451544805105, -31.494511407193745], [-53.787951626182185, -32.047242526987617], [-53.209588995971529, -32.727666110974717], [-53.650543992718084, -33.202004082981823], [-53.373661668498229, -33.768377780900757], [-53.806425950726521, -34.396814874002224], [-54.935866054897716, -34.952646579733617], [-55.674089728403274, -34.752658786764066], [-56.215297003796053, -34.85983570733741], [-57.139685024633096, -34.430456231424238], [-57.817860683815489, -34.462547295877492], [-58.427074144104381, -33.909454441057569], [-58.349611172098854, -33.2631889788154], [-58.132647671121433, -33.040566908502008], [-58.142440355040748, -32.044503676076147], [-57.874937303281875, -31.016556084926201], [-57.625133429582945, -30.216294854454258]]] } }, + { "type": "Feature", "properties": { "admin": "United States of America", "name": "United States", "continent": "North America" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-155.54211, 19.08348], [-155.68817, 18.91619], [-155.93665, 19.05939], [-155.90806, 19.33888], [-156.07347, 19.70294], [-156.02368, 19.81422], [-155.85008, 19.97729], [-155.91907, 20.17395], [-155.86108, 20.26721], [-155.78505, 20.2487], [-155.40214, 20.07975], [-155.22452, 19.99302], [-155.06226, 19.8591], [-154.80741, 19.50871], [-154.83147, 19.45328], [-155.222169999999892, 19.23972], [-155.54211, 19.08348]]], [[[-156.07926, 20.64397], [-156.41445, 20.57241], [-156.58673, 20.783], [-156.70167, 20.8643], [-156.71055, 20.92676], [-156.61258, 21.01249], [-156.25711, 20.91745], [-155.99566, 20.76404], [-156.07926, 20.64397]]], [[[-156.75824, 21.17684], [-156.78933, 21.06873], [-157.32521, 21.09777], [-157.25027, 21.21958], [-156.75824, 21.17684]]], [[[-157.65283, 21.32217], [-157.70703, 21.26442], [-157.7786, 21.27729], [-158.12667, 21.31244], [-158.2538, 21.53919], [-158.29265, 21.57912], [-158.0252, 21.71696], [-157.94161, 21.65272], [-157.65283, 21.32217]]], [[[-159.34512, 21.982], [-159.46372, 21.88299], [-159.80051, 22.06533], [-159.74877, 22.1382], [-159.5962, 22.23618], [-159.36569, 22.21494], [-159.34512, 21.982]]], [[[-94.81758, 49.38905], [-94.639999999999858, 48.840000000000103], [-94.32914, 48.67074], [-93.63087, 48.60926], [-92.61, 48.45], [-91.64, 48.14], [-90.829999999999856, 48.27], [-89.6, 48.01], [-89.272917446636654, 48.019808254582834], [-88.378114183286513, 48.302917588893806], [-87.439792623300207, 47.94], [-86.461990831228135, 47.553338019392037], [-85.652363247403215, 47.220218817730498], [-84.876079881514855, 46.900083319682366], [-84.779238247399817, 46.637101955749117], [-84.54374874544564, 46.538684190449224], [-84.6049, 46.4396], [-84.3367, 46.408770000000104], [-84.142119513673279, 46.512225857115723], [-84.091851264161463, 46.275418606138253], [-83.890765347005654, 46.116926988299149], [-83.616130947590491, 46.116926988299149], [-83.469550747394621, 45.994686387712584], [-83.592850714843067, 45.816893622412543], [-82.550924648758169, 45.347516587905446], [-82.337763125431053, 44.44], [-82.137642381503952, 43.571087551439987], [-82.43, 42.98], [-82.899999999999878, 42.430000000000135], [-83.119999999999877, 42.08], [-83.141999681312555, 41.975681057292995], [-83.029810146806909, 41.832795722005997], [-82.690089280920162, 41.675105088867319], [-82.439277716791608, 41.675105088867319], [-81.277746548167059, 42.209025987306845], [-80.247447679347843, 42.36619985612267], [-78.939362148743683, 42.863611355148116], [-78.92, 42.965], [-79.009999999999863, 43.27], [-79.171673550111862, 43.466339423184301], [-78.720279914042365, 43.625089423184953], [-77.737885097957601, 43.629055589363382], [-76.820034145805565, 43.628784288093748], [-76.5, 44.018458893758599], [-76.375, 44.09631], [-75.31821, 44.81645000000016], [-74.867, 45.00048000000011], [-73.347829999999874, 45.00738], [-71.505059999999858, 45.0082], [-71.405, 45.255000000000123], [-71.08482, 45.305240000000154], [-70.659999999999783, 45.46], [-70.305, 45.915], [-69.99997, 46.69307], [-69.237216, 47.447781], [-68.905, 47.185], [-68.23444, 47.35486], [-67.79046, 47.06636], [-67.79134, 45.702810000000134], [-67.13741, 45.13753], [-66.96466, 44.809700000000149], [-68.03252, 44.3252], [-69.059999999999874, 43.98], [-70.116169999999897, 43.684050000000141], [-70.645475633410967, 43.090238348964043], [-70.81489, 42.8653], [-70.825, 42.335], [-70.494999999999891, 41.805], [-70.08, 41.78], [-70.185, 42.145], [-69.88497, 41.922830000000111], [-69.96503, 41.637170000000161], [-70.64, 41.475], [-71.12039, 41.494450000000164], [-71.859999999999829, 41.32], [-72.295, 41.27], [-72.87643, 41.22065], [-73.71, 40.931102351654481], [-72.24126, 41.119480000000138], [-71.944999999999808, 40.93], [-73.345, 40.63], [-73.982, 40.628], [-73.952325, 40.75075], [-74.25671, 40.47351], [-73.96244, 40.42763], [-74.17838, 39.70926], [-74.90604, 38.93954], [-74.98041, 39.1964], [-75.20002, 39.24845], [-75.52805, 39.4985], [-75.32, 38.96], [-75.071834764789784, 38.782032230179276], [-75.05673, 38.404120000000106], [-75.37747, 38.01551], [-75.94023, 37.21689], [-76.03127, 37.2566], [-75.722049999999783, 37.937050000000106], [-76.23287, 38.319215], [-76.35, 39.15], [-76.542725, 38.717615], [-76.32933, 38.08326], [-76.98999793161353, 38.239991766913384], [-76.301619999999886, 37.917945], [-76.25874, 36.9664000000001], [-75.9718, 36.89726], [-75.868039999999809, 36.55125], [-75.72749, 35.550740000000125], [-76.36318, 34.808540000000129], [-77.39763499999988, 34.51201], [-78.05496, 33.92547], [-78.554349999999815, 33.861330000000116], [-79.06067, 33.49395], [-79.20357, 33.15839], [-80.301325, 32.509355], [-80.86498, 32.0333], [-81.33629, 31.44049], [-81.49042, 30.729990000000122], [-81.31371, 30.03552], [-80.98, 29.18000000000011], [-80.53558499999987, 28.47213], [-80.529999999999774, 28.04], [-80.056539284977532, 26.88000000000013], [-80.088015, 26.205765], [-80.131559999999837, 25.816775], [-80.38103, 25.20616], [-80.679999999999879, 25.08], [-81.17213, 25.201260000000126], [-81.33, 25.64], [-81.709999999999795, 25.87], [-82.239999999999895, 26.730000000000125], [-82.70515, 27.49504], [-82.85526, 27.88624], [-82.65, 28.550000000000146], [-82.929999999999865, 29.100000000000129], [-83.70959, 29.93656], [-84.1, 30.090000000000114], [-85.10882, 29.63615], [-85.28784, 29.686120000000127], [-85.7731, 30.152610000000116], [-86.399999999999878, 30.400000000000112], [-87.530359999999831, 30.27433], [-88.41782, 30.3849], [-89.180489999999836, 30.31598], [-89.593831178419748, 30.159994004836843], [-89.413735, 29.89419], [-89.43, 29.48864], [-89.21767, 29.29108], [-89.40823, 29.15961], [-89.77928, 29.307140000000135], [-90.15463, 29.11743], [-90.880224999999896, 29.148535000000116], [-91.626784999999842, 29.677000000000127], [-92.49906, 29.5523], [-93.22637, 29.78375], [-93.84842, 29.71363], [-94.69, 29.480000000000125], [-95.60026, 28.73863], [-96.59404, 28.30748], [-97.139999999999802, 27.83], [-97.37, 27.38], [-97.379999999999853, 26.69], [-97.33, 26.210000000000115], [-97.139999999999802, 25.87], [-97.529999999999859, 25.84], [-98.239999999999895, 26.060000000000109], [-99.019999999999854, 26.37], [-99.3, 26.84], [-99.52, 27.54], [-100.11, 28.11000000000012], [-100.45584, 28.696120000000118], [-100.957599999999886, 29.380710000000125], [-101.6624, 29.779300000000113], [-102.48, 29.76], [-103.11, 28.97], [-103.94, 29.27], [-104.456969999999814, 29.57196], [-104.705749999999895, 30.12173], [-105.03737, 30.64402], [-105.63159, 31.083830000000113], [-106.1429, 31.39995], [-106.507589999999794, 31.75452], [-108.24, 31.754853718166398], [-108.24194, 31.34222], [-109.035, 31.341940000000161], [-111.02361, 31.33472], [-113.30498, 32.03914], [-114.815, 32.52528], [-114.721389999999829, 32.72083], [-115.991349999999869, 32.61239000000014], [-117.127759999999753, 32.53534], [-117.295937691273863, 33.04622461520389], [-117.944, 33.621236431201389], [-118.410602275897475, 33.740909223124497], [-118.519894822799685, 34.027781577575745], [-119.081, 34.078], [-119.438840642016658, 34.348477178284291], [-120.36778, 34.44711], [-120.62286, 34.60855], [-120.74433, 35.156860000000101], [-121.714569999999853, 36.16153], [-122.54747, 37.551760000000101], [-122.51201, 37.783390000000132], [-122.95319, 38.113710000000104], [-123.7272, 38.951660000000111], [-123.865169999999878, 39.766990000000128], [-124.39807, 40.3132], [-124.17886, 41.142020000000109], [-124.2137, 41.999640000000134], [-124.532839999999894, 42.76599], [-124.14214, 43.70838], [-124.020535, 44.615895], [-123.898929999999893, 45.52341], [-124.079635, 46.86475], [-124.395669999999896, 47.72017], [-124.687210083007812, 48.184432983398537], [-124.566101074218736, 48.379714965820384], [-123.12, 48.04], [-122.587359999999876, 47.096], [-122.34, 47.36], [-122.5, 48.18], [-122.84, 49.0], [-120.0, 49.0], [-117.03121, 49.0], [-116.04818, 49.0], [-112.999999999999872, 49.0], [-110.049999999999812, 49.0], [-107.049999999999898, 49.0], [-104.04826, 48.99986], [-100.65, 49.0], [-97.228720000004699, 49.0007], [-95.159069509171943, 49.0], [-95.15609, 49.38425], [-94.81758, 49.38905]]], [[[-153.006314053336837, 57.115842190165878], [-154.0050902984581, 56.734676825581047], [-154.516402757770067, 56.992748928446687], [-154.670992804971092, 57.461195787172493], [-153.762779507441451, 57.816574612043773], [-153.228729417921073, 57.968968410872421], [-152.564790615835108, 57.901427313866961], [-152.141147223906273, 57.591058661521977], [-153.006314053336837, 57.115842190165878]]], [[[-165.579164191733554, 59.909986884187539], [-166.192770148767238, 59.754440822988961], [-166.848337368821944, 59.941406155020942], [-167.455277066090048, 60.213069159579376], [-166.467792121424566, 60.384169826897775], [-165.674429694663644, 60.293606879306232], [-165.579164191733554, 59.909986884187539]]], [[[-171.731656867539357, 63.782515367275906], [-171.114433560245175, 63.592191067144981], [-170.491112433940657, 63.694975490973505], [-169.682505459653555, 63.431115627691142], [-168.689439460300662, 63.297506212000584], [-168.77194088445458, 63.188598130945437], [-169.529439867204985, 62.976931464277882], [-170.290556200215917, 63.194437567794452], [-170.671385667990847, 63.375821845138965], [-171.553063117538642, 63.317789211675077], [-171.791110602891166, 63.40584585230048], [-171.731656867539357, 63.782515367275906]]], [[[-155.067790290324211, 71.147776394323685], [-154.344165208941206, 70.696408596470192], [-153.900006273392563, 70.889988511835682], [-152.210006069935275, 70.829992173944831], [-152.270002407826127, 70.60000621202984], [-150.739992438744508, 70.430016588005699], [-149.720003018167489, 70.530010484490433], [-147.613361579357047, 70.214034939241785], [-145.689989800225248, 70.120009670686741], [-144.920010959076393, 69.989991767040479], [-143.58944618042517, 70.152514146598307], [-142.072510348713365, 69.851938178172631], [-140.985987521560702, 69.711998399526365], [-140.985988329004869, 69.711998399526365], [-140.992498752029377, 66.000028591568665], [-140.997769748123119, 60.306396796298593], [-140.012997816153074, 60.276837877027575], [-139.03900042031583, 60.000007229240012], [-138.340889999999888, 59.562110000000146], [-137.4525, 58.905000000000101], [-136.47972, 59.46389], [-135.47583, 59.78778], [-134.945, 59.270560000000117], [-134.27111, 58.86111], [-133.355548882207188, 58.410285142645151], [-132.73042, 57.692890000000105], [-131.707809999999853, 56.55212], [-130.00778, 55.91583], [-129.979994263358265, 55.284997870497207], [-130.536110189467223, 54.802753404349389], [-131.08581823797212, 55.178906155002025], [-131.967211467142278, 55.497775580459049], [-132.250010742859445, 56.369996242897443], [-133.539181084356386, 57.178887437562125], [-134.07806292029602, 58.123067531966889], [-135.038211032279037, 58.187714748763931], [-136.628062309954629, 58.212209377670447], [-137.800006279686016, 58.499995429103777], [-139.867787041412981, 59.537761542389134], [-140.825273817133024, 59.72751740176507], [-142.574443535564427, 60.084446519604981], [-143.958880994879848, 59.99918040632339], [-145.925556816827822, 60.458609727614274], [-147.114373949146625, 60.884656073644628], [-148.224306200127643, 60.672989406977152], [-148.018065558850736, 59.978328965893631], [-148.570822516860858, 59.914172675203297], [-149.727857835875824, 59.705658270905545], [-150.608243374616421, 59.368211168039487], [-151.716392788683294, 59.155821031319974], [-151.859433153267105, 59.74498403587959], [-151.40971900124714, 60.725802720779392], [-150.346941494732505, 61.033587551509854], [-150.621110806256951, 61.284424953854447], [-151.895839199816834, 60.727197984451273], [-152.578329841095581, 60.061657212964285], [-154.019172126257558, 59.350279446034264], [-153.287511359653166, 58.864727688219787], [-154.232492438758442, 58.146373602930531], [-155.307491421510207, 57.727794501366319], [-156.308334723923082, 57.422774359763636], [-156.556097378546298, 56.979984849670636], [-158.117216559867728, 56.463608099994175], [-158.433321296197136, 55.994153550838533], [-159.603327399717415, 55.566686102920116], [-160.289719611634183, 55.643580634170561], [-161.223047655257773, 55.364734605523481], [-162.23776607974105, 55.024186916720097], [-163.069446581046378, 54.689737046927171], [-164.785569221027174, 54.40417308208216], [-164.942226325520011, 54.572224839895327], [-163.84833960676562, 55.039431464246107], [-162.870001390615897, 55.348043117893198], [-161.804174974596009, 55.894986477270429], [-160.563604702781134, 56.008054511125025], [-160.070559862284483, 56.418055324928744], [-158.684442918919416, 57.016675116597852], [-158.461097378553944, 57.216921291728866], [-157.722770352183858, 57.570000515363056], [-157.550274421193564, 58.328326321030218], [-157.041674974576949, 58.918884589261708], [-158.194731208305427, 58.615802313869828], [-158.517217984023034, 58.787781480537305], [-159.058606126928709, 58.424186102931671], [-159.711667040017318, 58.931390285876333], [-159.981288825500144, 58.572549140041623], [-160.355271165996498, 59.071123358793628], [-161.355003425115001, 58.670837714260742], [-161.968893602526293, 58.671664537177371], [-162.054986538724648, 59.266925360747436], [-161.874170702135331, 59.633621324290587], [-162.518059048492034, 59.989723619213905], [-163.818341437820123, 59.798055731843377], [-164.662217577146407, 60.267484442782639], [-165.346387702474772, 60.507495632562396], [-165.350831875651835, 61.073895168697497], [-166.121379157555907, 61.500019029376212], [-165.734451870770471, 62.074996853271792], [-164.919178636717788, 62.633076483807919], [-164.562507901039339, 63.146378485763044], [-163.753332485996964, 63.219448961023758], [-163.067224494457832, 63.05945872664801], [-162.260555386381697, 63.541935736741159], [-161.534449836248569, 63.455816962326757], [-160.772506680321101, 63.76610810002326], [-160.958335130842528, 64.222798570402759], [-161.518068407212184, 64.402787584075313], [-160.777777676414729, 64.788603827566405], [-161.391926235987597, 64.777235012462327], [-162.453050096668818, 64.559444688568206], [-162.757786017894034, 64.338605455168803], [-163.54639421288428, 64.559160468190484], [-164.960829841145141, 64.446945095468848], [-166.425288255864473, 64.686672064870706], [-166.845004238939026, 65.088895575614529], [-168.110560065767146, 65.669997056736733], [-166.70527116602193, 66.088317776139391], [-164.474709642575448, 66.576660061297488], [-163.652511766595637, 66.576660061297488], [-163.788601651036117, 66.077207343196662], [-161.677774421210131, 66.116119696712403], [-162.489714525379981, 66.735565090595102], [-163.719716966791083, 67.116394558370089], [-164.430991380856511, 67.616338202577779], [-165.390286831706703, 68.042772121850234], [-166.764440680995989, 68.35887685817967], [-166.204707404626561, 68.883030910916162], [-164.430810513343431, 68.915535386827727], [-163.168613654614489, 69.371114813912882], [-162.930566169261965, 69.858061835399255], [-161.908897264635499, 70.333329983187625], [-160.93479651593367, 70.447689927849567], [-159.039175788387126, 70.891642157668926], [-158.119722866833939, 70.824721177851032], [-156.580824551398024, 71.357763576941736], [-155.067790290324211, 71.147776394323685]]]] } }, + { "type": "Feature", "properties": { "admin": "Uzbekistan", "name": "Uzbekistan", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[66.518606805288655, 37.362784328758785], [66.546150343700205, 37.974684963526855], [65.215998976507379, 38.402695013984292], [64.170223016216752, 38.892406724598231], [63.518014764261018, 39.363256537425627], [62.374260288344992, 40.053886216790382], [61.882714064384679, 41.084856879229392], [61.547178989513547, 41.2663703476546], [60.46595299667068, 41.22032664648254], [60.083340691981654, 41.425146185871391], [59.976422153569771, 42.223081976890199], [58.629010857991453, 42.751551011723045], [57.786529982337065, 42.170552883465511], [56.93221520368779, 41.82602610937559], [57.096391229079089, 41.32231008561056], [55.968191359282898, 41.308641669269356], [55.928917270741081, 44.995858466159099], [58.503127068928457, 45.586804307632818], [58.689989048095882, 45.500013739598621], [60.239971958258316, 44.784036770194717], [61.05831994003244, 44.405816962250505], [62.013300408786236, 43.504476630215642], [63.185786981056559, 43.650074978197999], [64.900824415959264, 43.728080552742576], [66.098012322865074, 42.997660020513088], [66.023391554635609, 41.994646307943974], [66.510648634715707, 41.987644151368436], [66.714047072216502, 41.168443508461493], [67.985855747351806, 41.135990708982213], [68.259895867795606, 40.662324530594894], [68.632482944620008, 40.668680731766798], [69.070027296835306, 41.384244289712363], [70.388964878220776, 42.081307684897439], [70.96231489449913, 42.266154283205481], [71.259247674448218, 42.167710679689456], [70.420022414028196, 41.519998277343134], [71.157858514291576, 41.143587144529107], [71.870114780570447, 41.392900092121259], [73.055417108049156, 40.86603302668945], [71.774875115856545, 40.145844428053763], [71.014198032520156, 40.244365546218226], [70.601406691372674, 40.218527330072284], [70.458159621059608, 40.49649485937028], [70.666622348925031, 40.960213324541407], [69.329494663372813, 40.727824408524839], [69.011632928345477, 40.086158148756653], [68.536416456989414, 39.533452867178923], [67.701428664017342, 39.580478420564518], [67.442219679641298, 39.140143541005479], [68.176025018185911, 38.901553453113898], [68.392032505165943, 38.157025254868728], [67.829999627559502, 37.144994004864678], [67.075782098259609, 37.35614390720928], [66.518606805288655, 37.362784328758785]]] } }, + { "type": "Feature", "properties": { "admin": "Venezuela", "name": "Venezuela", "continent": "South America" }, "geometry": { "type": "Polygon", "coordinates": [[[-71.331583624950284, 11.776284084515805], [-71.36000566271079, 11.53999359786121], [-71.947049933546495, 11.423282375530018], [-71.620868292920164, 10.969459947142791], [-71.633063930941063, 10.446494452349027], [-72.074173956984495, 9.865651353388369], [-71.695644090446521, 9.072263088411246], [-71.26455929226772, 9.137194525585981], [-71.039999355743376, 9.859992784052407], [-71.350083787710773, 10.211935126176213], [-71.400623338492224, 10.968969021036013], [-70.155298834906503, 11.375481675660039], [-70.293843349881016, 11.846822414594211], [-69.943244594996813, 12.162307033736095], [-69.584300096297454, 11.459610907431211], [-68.882999233664435, 11.44338450769156], [-68.233271450458716, 10.885744126829945], [-68.194126552997616, 10.554653225135921], [-67.296248541926317, 10.545868231646306], [-66.227864142507983, 10.648626817258684], [-65.655237596281737, 10.20079885501732], [-64.890452236578156, 10.077214667191296], [-64.329478725833724, 10.389598700395679], [-64.318006557864933, 10.641417954953978], [-63.079322475828725, 10.701724351438598], [-61.880946010980182, 10.7156253117251], [-62.730118984616396, 10.420268662960904], [-62.388511928950969, 9.948204453974636], [-61.588767462801918, 9.873066921422263], [-60.830596686431711, 9.38133982994894], [-60.671252407459718, 8.580174261911877], [-60.150095587796166, 8.602756862823425], [-59.758284878159181, 8.367034816924045], [-60.550587938058186, 7.779602972846178], [-60.637972785063752, 7.414999904810853], [-60.295668097562377, 7.043911444522918], [-60.543999192940966, 6.856584377464881], [-61.159336310456467, 6.696077378766317], [-61.139415045807937, 6.234296779806142], [-61.410302903881941, 5.959068101419616], [-60.733574184803707, 5.2002772078619], [-60.601179165271922, 4.918098049332129], [-60.966893276601517, 4.536467596856638], [-62.085429653559125, 4.162123521334308], [-62.804533047116692, 4.006965033377951], [-63.093197597899092, 3.770571193858784], [-63.888342861574145, 4.020530096854571], [-64.628659430587533, 4.14848094320925], [-64.816064012294007, 4.056445217297422], [-64.368494432214092, 3.797210394705246], [-64.408827887617903, 3.126786200366623], [-64.269999152265783, 2.497005520025566], [-63.422867397705105, 2.411067613124174], [-63.368788011311644, 2.200899562993129], [-64.083085496666072, 1.91636912679408], [-64.199305792890499, 1.49285492594602], [-64.611011928959854, 1.328730576987041], [-65.354713304288353, 1.0952822941085], [-65.548267381437554, 0.78925446207603], [-66.325765143484944, 0.724452215982012], [-66.876325853122566, 1.253360500489336], [-67.181294318293041, 2.250638129074062], [-67.447092047786299, 2.600280869960869], [-67.809938117123693, 2.820655015469569], [-67.303173183853417, 3.31845408773718], [-67.33756384954367, 3.542342230641721], [-67.621835903581271, 3.839481716319994], [-67.823012254493534, 4.503937282728898], [-67.744696621355203, 5.221128648291667], [-67.521531948502741, 5.556870428891968], [-67.34143958196556, 6.095468044454021], [-67.695087246355001, 6.267318020040645], [-68.265052456318216, 6.153268133972473], [-68.985318569602327, 6.206804917826856], [-69.389479946557103, 6.099860541198835], [-70.093312954372408, 6.960376491723109], [-70.674233567981503, 7.087784735538717], [-71.960175747348629, 6.991614895043538], [-72.19835242378187, 7.340430813013682], [-72.444487270788059, 7.42378489830048], [-72.479678921178831, 7.632506008327352], [-72.360900641555958, 8.002638454617893], [-72.439862230097944, 8.405275376820027], [-72.660494757768092, 8.62528778730268], [-72.788729824500379, 9.085027167187331], [-73.304951544880026, 9.151999823437604], [-73.027604132769554, 9.736770331252441], [-72.905286017534692, 10.45034434655477], [-72.614657762325194, 10.821975409381777], [-72.227575446242923, 11.108702093953237], [-71.973921678338272, 11.608671576377116], [-71.331583624950284, 11.776284084515805]]] } }, + { "type": "Feature", "properties": { "admin": "Vietnam", "name": "Vietnam", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[108.050180291782908, 21.552379869060111], [106.715067987090066, 20.696850694252014], [105.881682163519002, 19.752050482659694], [105.662005649846279, 19.058165188060567], [106.426816847765991, 18.004120998603224], [107.36195356651973, 16.697456569887049], [108.269495070429599, 16.079742336486145], [108.877106561317447, 15.276690578670436], [109.335269810017209, 13.42602834721772], [109.200135939573954, 11.666859239137761], [108.366129998815424, 11.00832062422627], [107.22092858279521, 10.36448395430183], [106.4051127462034, 9.530839748569317], [105.158263787865081, 8.599759629750492], [104.795185174582372, 9.2410383162765], [105.076201613385592, 9.918490505406806], [104.334334751403446, 10.486543687375228], [105.199914992292321, 10.889309800658094], [106.249670037869436, 10.961811835163585], [105.810523716253101, 11.567614650921225], [107.491403029410861, 12.337205918827944], [107.614547967562402, 13.535530707244202], [107.382727492301058, 14.202440904186968], [107.564525181103875, 15.202173163305554], [107.312705926545576, 15.908538316303177], [106.55600792849566, 16.604283962464802], [105.925762160264, 17.485315456608955], [105.094598423281496, 18.666974595611073], [103.896532017026701, 19.265180975821799], [104.183387892678908, 19.624668077060214], [104.822573683697073, 19.886641750563879], [104.435000441508024, 20.758733221921528], [103.203861118586431, 20.766562201413745], [102.754896274834636, 21.675137233969462], [102.170435825613552, 22.464753119389297], [102.706992222100084, 22.708795070887668], [103.504514601660546, 22.703756618739202], [104.476858351664447, 22.819150092046961], [105.329209425886603, 23.352063300056908], [105.811247186305209, 22.976892401617899], [106.725403273548451, 22.794267889898414], [106.567273390735295, 22.218204860924768], [107.043420037872608, 21.811898912029907], [108.050180291782908, 21.552379869060111]]] } }, + { "type": "Feature", "properties": { "admin": "Vanuatu", "name": "Vanuatu", "continent": "Australia" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[167.844876743845077, -16.466333103097153], [167.515181105822847, -16.597849623279966], [167.180007765977791, -16.159995212470957], [167.2168013857696, -15.891846205308449], [167.844876743845077, -16.466333103097153]]], [[[167.107712437201485, -14.933920179913951], [167.2700281110302, -15.74002084723487], [167.001207310247935, -15.614602146062492], [166.79315799384085, -15.668810723536719], [166.649859247095549, -15.392703545801192], [166.629136997746429, -14.6264970842096], [167.107712437201485, -14.933920179913951]]]] } }, + { "type": "Feature", "properties": { "admin": "Yemen", "name": "Yemen", "continent": "Asia" }, "geometry": { "type": "Polygon", "coordinates": [[[53.108572625547502, 16.651051133688949], [52.385205926325874, 16.38241120041965], [52.191729363825075, 15.938433132384018], [52.168164910699986, 15.597420355689945], [51.172515089732471, 15.175249742081489], [49.574576450403136, 14.708766587782746], [48.679230584514151, 14.003202419485657], [48.238947381387412, 13.948089504446369], [47.938914015500771, 14.007233181204423], [47.354453566279702, 13.592219753468379], [46.71707645039173, 13.399699204965016], [45.877592807810252, 13.347764390511681], [45.625050083199874, 13.290946153206759], [45.406458774605241, 13.02690542241143], [45.144355910020849, 12.953938300015306], [44.9895333188744, 12.699586900274708], [44.494576450382844, 12.721652736863344], [44.175112745954486, 12.585950425664873], [43.48295861183712, 12.63680003504008], [43.222871128112118, 13.220950425667422], [43.251448195169516, 13.767583726450848], [43.087943963398047, 14.062630316621306], [42.892245314308717, 14.802249253798745], [42.604872674333606, 15.213335272680592], [42.805015496600042, 15.261962795467252], [42.702437778500652, 15.718885809791995], [42.823670688657408, 15.911742255105263], [42.779332309750963, 16.34789134364868], [43.218375278502734, 16.666889960186406], [43.115797560403351, 17.088440456607369], [43.380794305196098, 17.579986680567668], [43.791518589051904, 17.319976711491105], [44.062613152855072, 17.410358791569589], [45.216651238797184, 17.43332896572333], [45.399999220568752, 17.333335069238554], [46.366658563020529, 17.233315334537632], [46.749994337761642, 17.283338120996174], [47.000004917189749, 16.949999294497438], [47.466694777217626, 17.116681626854877], [48.183343540241324, 18.166669216377311], [49.116671583864857, 18.616667588774941], [52.000009800022227, 19.000003363516054], [52.782184279192037, 17.349742336491229], [53.108572625547502, 16.651051133688949]]] } }, + { "type": "Feature", "properties": { "admin": "South Africa", "name": "South Africa", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[31.521001417778869, -29.257386976846245], [31.325561150850994, -29.401977634398907], [30.901762729625336, -29.909956963828034], [30.622813348113816, -30.423775730106122], [30.055716180142774, -31.140269463832951], [28.925552605919535, -32.172041110972494], [28.219755893677092, -32.771952813448848], [27.464608188595967, -33.226963799778794], [26.419452345492818, -33.614950453426175], [25.909664340933482, -33.667040297176392], [25.78062828950069, -33.944646091448334], [25.172861769315965, -33.796851495093577], [24.67785322439212, -33.987175795224537], [23.594043409934635, -33.794474379208147], [22.988188917744729, -33.916430759416976], [22.574157342222232, -33.864082533505304], [21.542799106541022, -34.258838799782922], [20.689052768646999, -34.417175388325226], [20.071261020597628, -34.795136814107984], [19.616405063564567, -34.819166355123706], [19.193278435958714, -34.462598972309777], [18.855314568769867, -34.444305515278458], [18.424643182049376, -33.997872816708963], [18.377410922934612, -34.13652068454806], [18.244499139079917, -33.867751560198023], [18.250080193767442, -33.281430759414434], [17.925190463948436, -32.61129078545342], [18.247909783611185, -32.429131361624563], [18.221761508871477, -31.661632989225662], [17.566917758868861, -30.72572112398754], [17.0644161312627, -29.878641045859158], [17.06291751472622, -29.875953871379977], [16.344976840895239, -28.576705010697697], [16.824017368240899, -28.082161553664466], [17.218928663815401, -28.355943291946804], [17.387497185951499, -28.783514092729774], [17.836151971109526, -28.856377862261311], [18.464899122804745, -29.045461928017271], [19.002127312911082, -28.972443129188857], [19.89473432788861, -28.461104831660769], [19.895767856534427, -24.767790215760588], [20.165725538827186, -24.917961928000768], [20.758609246511831, -25.868136488551446], [20.666470167735437, -26.477453301704916], [20.889609002371731, -26.828542982695907], [21.60589603036939, -26.726533705351748], [22.105968865657864, -26.28025603607913], [22.579531691180584, -25.979447523708142], [22.824271274514896, -25.500458672794768], [23.312096795350179, -25.268689873965712], [23.733569777122703, -25.39012948985161], [24.211266717228792, -25.670215752873567], [25.025170525825782, -25.719670098576891], [25.664666375437712, -25.486816094669706], [25.765848829865206, -25.174845472923671], [25.941652052522151, -24.696373386333214], [26.485753208123292, -24.616326592713097], [26.78640669119741, -24.240690606383478], [27.119409620886238, -23.574323011979772], [28.017235955525244, -22.827753594659072], [29.432188348109033, -22.091312758067584], [29.839036899542965, -22.102216485281172], [30.322883335091767, -22.271611830333931], [30.659865350067083, -22.151567478119912], [31.191409132621278, -22.251509698172395], [31.670397983534645, -23.658969008073861], [31.930588820124242, -24.369416599222532], [31.752408481581874, -25.484283949487406], [31.837777947728057, -25.843331801051342], [31.333157586397899, -25.660190525008943], [31.044079624157146, -25.731452325139436], [30.949666782359905, -26.022649021104144], [30.676608514129633, -26.398078301704604], [30.685961948374477, -26.743845310169526], [31.282773064913325, -27.285879408478991], [31.868060337051073, -27.17792734142127], [32.071665480281062, -26.733820082304902], [32.830120477028878, -26.74219166433619], [32.580264926897677, -27.470157566031808], [32.462132602678444, -28.30101124442055], [32.203388706193032, -28.752404880490065], [31.521001417778869, -29.257386976846245]], [[28.978262566857236, -28.955596612261708], [28.541700066855491, -28.647501722937562], [28.07433841320778, -28.851468601193581], [27.532511020627471, -29.242710870075353], [26.999261915807629, -29.875953871379977], [27.749397006956478, -30.645105889612214], [28.107204624145421, -30.545732110314944], [28.291069370239903, -30.226216729454293], [28.848399692507734, -30.070050551068245], [29.018415154748016, -29.743765557577362], [29.325166456832587, -29.257386976846245], [28.978262566857236, -28.955596612261708]]] } }, + { "type": "Feature", "properties": { "admin": "Zambia", "name": "Zambia", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[32.759375441221316, -9.230599053589058], [33.231387973775291, -9.676721693564799], [33.485687697083584, -10.525558770391111], [33.315310499817279, -10.796549981329695], [33.114289178201908, -11.607198174692311], [33.306422153463068, -12.435778090060214], [32.991764357237876, -12.783870537978272], [32.688165317523122, -13.712857761289273], [33.214024692525207, -13.97186003993615], [30.179481235481827, -14.796099134991525], [30.274255812305103, -15.507786960515208], [29.51683434420314, -15.644677829656386], [28.947463413211256, -16.043051446194436], [28.825868768028492, -16.389748630440611], [28.467906121542676, -16.468400160388843], [27.598243442502753, -17.290830580314005], [27.044427117630729, -17.938026218337427], [26.706773309035633, -17.961228936436477], [26.381935255648919, -17.846042168857892], [25.264225701608005, -17.736539808831413], [25.084443393664564, -17.661815687737366], [25.076950310982255, -17.578823337476617], [24.6823490740015, -17.35341073981947], [24.033861525170771, -17.29584319424632], [23.215048455506057, -17.52311614346598], [22.562478468524255, -16.89845142992181], [21.887842644953867, -16.080310153876876], [21.933886346125913, -12.898437188369357], [24.016136508894672, -12.91104623784857], [23.930922072045373, -12.565847670138854], [24.079905226342838, -12.191296888887361], [23.904153680118181, -11.722281589406318], [24.017893507592586, -11.237298272347088], [23.912215203555714, -10.926826267137512], [24.257155389103982, -10.951992689663655], [24.314516228947948, -11.262826429899269], [24.783169793402948, -11.238693536018962], [25.418118116973197, -11.330935967659958], [25.752309604604726, -11.784965101776356], [26.55308759939961, -11.924439792532125], [27.164419793412456, -11.608748467661071], [27.38879886242378, -12.132747491100663], [28.15510867687998, -12.272480564017894], [28.52356163912102, -12.698604424696679], [28.934285922976834, -13.248958428605132], [29.699613885219485, -13.257226657771827], [29.616001417771223, -12.178894545137307], [29.341547885869087, -12.36074391037241], [28.642417433392346, -11.971568698782312], [28.372253045370421, -11.793646742401389], [28.496069777141763, -10.789883721564044], [28.673681674928922, -9.605924981324931], [28.449871046672818, -9.164918308146083], [28.734866570762495, -8.526559340044576], [29.002912225060467, -8.40703175215347], [30.34608605319081, -8.238256524288216], [30.740015496551781, -8.340007419470913], [31.157751336950042, -8.594578747317362], [31.55634809746649, -8.76204884199864], [32.191864861791963, -8.930358981973276], [32.759375441221316, -9.230599053589058]]] } }, + { "type": "Feature", "properties": { "admin": "Zimbabwe", "name": "Zimbabwe", "continent": "Africa" }, "geometry": { "type": "Polygon", "coordinates": [[[31.191409132621278, -22.251509698172395], [30.659865350067083, -22.151567478119912], [30.322883335091767, -22.271611830333931], [29.839036899542965, -22.102216485281172], [29.432188348109033, -22.091312758067584], [28.794656202924209, -21.639454034107445], [28.02137007010861, -21.485975030200578], [27.727227817503252, -20.851801853114711], [27.724747348753247, -20.499058526290387], [27.296504754350501, -20.391519870690995], [26.164790887158478, -19.293085625894935], [25.850391473094724, -18.714412937090533], [25.649163445750155, -18.536025892818987], [25.264225701608005, -17.736539808831413], [26.381935255648919, -17.846042168857892], [26.706773309035633, -17.961228936436477], [27.044427117630729, -17.938026218337427], [27.598243442502753, -17.290830580314005], [28.467906121542676, -16.468400160388843], [28.825868768028492, -16.389748630440611], [28.947463413211256, -16.043051446194436], [29.51683434420314, -15.644677829656386], [30.274255812305103, -15.507786960515208], [30.338954705534537, -15.880839125230242], [31.173063999157673, -15.860943698797868], [31.636498243951188, -16.071990248277881], [31.852040643040592, -16.319417006091374], [32.328238966610222, -16.392074069893749], [32.847638787575839, -16.713398125884613], [32.849860874164385, -17.979057305577175], [32.654885695127142, -18.672089939043492], [32.611994256324884, -19.419382826416268], [32.772707960752619, -19.715592136313294], [32.659743279762573, -20.30429005298231], [32.508693068173436, -20.395292250248303], [32.244988234188007, -21.116488539313689], [31.191409132621278, -22.251509698172395]]] } } + ] +} \ No newline at end of file diff --git a/src/datepicker/date-format-stack.json b/src/datepicker/date-format-stack.json index b4f0d059..9fc8cfcf 100644 --- a/src/datepicker/date-format-stack.json +++ b/src/datepicker/date-format-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n \n
        \n \n
        \n        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker({\n format: 'dd-MMM-yy',\n value: new Date(),\n });\n datepicker.appendTo('#datepicker');\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n datepicker.format = dropDownInstance.value;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n \n
        \n \n
        \n        \n
        \n\n\n","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker({\n format: 'dd-MMM-yy',\n value: new Date(),\n });\n datepicker.appendTo('#datepicker');\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n datepicker.format = dropDownInstance.value;\n }\n"} \ No newline at end of file diff --git a/src/datepicker/date-format.html b/src/datepicker/date-format.html index 4e62c128..6b881056 100644 --- a/src/datepicker/date-format.html +++ b/src/datepicker/date-format.html @@ -33,6 +33,7 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datepicker/date-range-stack.json b/src/datepicker/date-range-stack.json index 5805e882..d784005d 100644 --- a/src/datepicker/date-range-stack.json +++ b/src/datepicker/date-range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var today = new Date();\n var currentYear = today.getFullYear();\n var currentMonth = today.getMonth();\n var currentDay = today.getDate();\n var datepicker = new ej.calendars.DatePicker({\n min: new Date(currentYear, currentMonth, 7),\n max: new Date(currentYear, currentMonth, 27),\n value: new Date(currentYear, currentMonth, 14)\n });\n datepicker.appendTo('#datepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var today = new Date();\n var currentYear = today.getFullYear();\n var currentMonth = today.getMonth();\n var currentDay = today.getDate();\n var datepicker = new ej.calendars.DatePicker({\n min: new Date(currentYear, currentMonth, 7),\n max: new Date(currentYear, currentMonth, 27),\n value: new Date(currentYear, currentMonth, 14)\n });\n datepicker.appendTo('#datepicker');\n"} \ No newline at end of file diff --git a/src/datepicker/date-range.html b/src/datepicker/date-range.html index 159b73d2..9cec9ff4 100644 --- a/src/datepicker/date-range.html +++ b/src/datepicker/date-range.html @@ -17,10 +17,12 @@ In the following sample, a specific date ranges from 7th to 27th of the current month has been set to select from the Calendar. All the other dates are out of range and restricted to set or select.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datepicker/default-stack.json b/src/datepicker/default-stack.json index 1b03913b..ae7cdf4e 100644 --- a/src/datepicker/default-stack.json +++ b/src/datepicker/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker();\n datepicker.appendTo('#datepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker();\n datepicker.appendTo('#datepicker');\n"} \ No newline at end of file diff --git a/src/datepicker/default.html b/src/datepicker/default.html index 44d51196..41a9ad2a 100644 --- a/src/datepicker/default.html +++ b/src/datepicker/default.html @@ -15,10 +15,12 @@

        More information on the DatePicker instantiation can be found in the documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datepicker/disabled-stack.json b/src/datepicker/disabled-stack.json index a60773d3..3b23711f 100644 --- a/src/datepicker/disabled-stack.json +++ b/src/datepicker/disabled-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker({\n renderDayCell: disableDate\n });\n datepicker.appendTo('#datepicker');\n\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker({\n renderDayCell: disableDate\n });\n datepicker.appendTo('#datepicker');\n\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file diff --git a/src/datepicker/disabled.html b/src/datepicker/disabled.html index 34313056..c89124f7 100644 --- a/src/datepicker/disabled.html +++ b/src/datepicker/disabled.html @@ -16,10 +16,12 @@

        More information on the disabled dates can be found in the documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datepicker/month-picker-stack.json b/src/datepicker/month-picker-stack.json new file mode 100644 index 00000000..aa8b5f1a --- /dev/null +++ b/src/datepicker/month-picker-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n\n","index.js":"{{ripple}}\n var datepicker = new ej.calendars.DatePicker({\n start: 'Year', \n depth: 'Year',\n format: 'MMMM y'\n });\n datepicker.appendTo('#datepicker');\n"} \ No newline at end of file diff --git a/src/datepicker/month-picker.html b/src/datepicker/month-picker.html new file mode 100644 index 00000000..226b8c1e --- /dev/null +++ b/src/datepicker/month-picker.html @@ -0,0 +1,27 @@ +
        +
        +

        +
        +
        +
        +

        + The following sample demonstrates the DatePicker control acting as a month picker. It allows you to select values in terms of months. +

        +
        +
        +

        + DatePicker has the Start and the Depth properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).

        +

        More information on the DatePicker Start/Depth can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/datepicker/month-picker.js b/src/datepicker/month-picker.js new file mode 100644 index 00000000..0b32df68 --- /dev/null +++ b/src/datepicker/month-picker.js @@ -0,0 +1,8 @@ +this.default = function () { + var datepicker = new ej.calendars.DatePicker({ + start: 'Year', + depth: 'Year', + format: 'MMMM y' + }); + datepicker.appendTo('#datepicker'); +}; \ No newline at end of file diff --git a/src/datepicker/sample.json b/src/datepicker/sample.json index 24580ed2..c3f45070 100644 --- a/src/datepicker/sample.json +++ b/src/datepicker/sample.json @@ -1,7 +1,8 @@ -{ "name": "DatePicker", "directory": "datepicker", "category":"Calendars", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"DatePicker", "api":{"DatePicker": [ "placeholder" ]} }, - {"url":"disabled", "name": "Disabled Dates", "category":"DatePicker", "api":{"DatePicker": [ "placeholder", "renderDayCell" ]} }, - {"url":"date-range", "name": "Date Range", "category":"DatePicker", "api":{"DatePicker": [ "min", "max", "value", "placeholder" ]}}, - {"url":"date-format", "name": "Format", "category":"DatePicker", "api":{"DatePicker": [ "format", "value", "placeholder" ]} }, - {"url":"special-dates", "name": "Special Dates", "category":"DatePicker", "api":{"DatePicker": [ "value", "placeholder", "renderDayCell" ]}} +{ "name": "DatePicker", "directory": "datepicker", "category":"Calendars","type": "update", "samples" : [ + {"url":"default", "name": "Default Functionalities", "category":"DatePicker", "api":{"DatePicker": [ "placeholder" ]}, "description": "A simple, lightweight and responsive DatePicker control for JavaScript to select date values easily with a rich user interface and cross-browser compatibility" }, + {"url":"disabled", "name": "Disabled Dates", "category":"DatePicker", "api":{"DatePicker": [ "placeholder", "renderDayCell" ]}, "description": "Customizable DatePicker widget for JavaScript(ES5) with disabled dates that restrict date selection from a defined set of days like weekends, etc" }, + {"url":"date-range", "name": "Date Range", "category":"DatePicker", "api":{"DatePicker": [ "min", "max", "value", "placeholder" ]}, "description": "DatePicker widget with min and max date options that restrict users from selecting dates within a defined range of days like past dates, future dates, etc" }, + {"url":"date-format", "name": "Format", "category":"DatePicker", "api":{"DatePicker": [ "format", "value", "placeholder" ]}, "description": "Highly flexible DatePicker for JavaScript(ES5) with customizable options for date formats based on the preferred culture for improved readability" }, + {"url":"special-dates", "name": "Special Dates", "category":"DatePicker", "api":{"DatePicker": [ "value", "placeholder", "renderDayCell" ]}, "description": "DatePicker for JavaScript that highlights multiple dates like weekends, holidays, and special events with options to add custom styles and descriptions" }, + {"url": "month-picker", "name": "Month Picker", "category": "DatePicker", "type": "new", "api":{"DatePicker": [ "start", "depth" ]}, "description": "The JavaScript(ES5) DatePicker control can act as a month and year picker. It helps you to select a month or year quickly with all months related properties."} ]} \ No newline at end of file diff --git a/src/datepicker/special-dates-stack.json b/src/datepicker/special-dates-stack.json index 2bf5a998..58e2a8f7 100644 --- a/src/datepicker/special-dates-stack.json +++ b/src/datepicker/special-dates-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n\tvar span;\n //assign the add class method from base.\n var addClass = ej.base.addClass;\n var datepicker = new ej.calendars.DatePicker({\n renderDayCell: customDates,\n value: new Date('1/13/2017'),\n cssClass: 'e-customStyle'\n });\n datepicker.appendTo('#datepicker');\n\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Birthday !');\n //use the imported method to add the multiple classes to the given element\n addClass([args.element], ['special', 'e-day', 'birthday']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Farewell !');\n addClass([args.element], ['special', 'e-day', 'farewell']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 25) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Vacation !');\n addClass([args.element], ['special', 'e-day', 'vacation']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Vacation !');\n args.element.appendChild(span);\n\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n\tvar span;\n //assign the add class method from base.\n var addClass = ej.base.addClass;\n var datepicker = new ej.calendars.DatePicker({\n renderDayCell: customDates,\n value: new Date('1/13/2017'),\n cssClass: 'e-customStyle'\n });\n datepicker.appendTo('#datepicker');\n\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Birthday !');\n //use the imported method to add the multiple classes to the given element\n addClass([args.element], ['special', 'e-day', 'birthday']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Farewell !');\n addClass([args.element], ['special', 'e-day', 'farewell']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 25) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n\t\t\targs.element.setAttribute('title', 'Vacation !');\n addClass([args.element], ['special', 'e-day', 'vacation']);\n\t\t\targs.element.firstElementChild.setAttribute('title', 'Vacation !');\n args.element.appendChild(span);\n\n }\n }\n"} \ No newline at end of file diff --git a/src/datepicker/special-dates.html b/src/datepicker/special-dates.html index b9456469..f49f728d 100644 --- a/src/datepicker/special-dates.html +++ b/src/datepicker/special-dates.html @@ -21,12 +21,6 @@

        \ No newline at end of file diff --git a/src/daterangepicker/date-format-stack.json b/src/daterangepicker/date-format-stack.json index d740ba65..dc481d27 100644 --- a/src/daterangepicker/date-format-stack.json +++ b/src/daterangepicker/date-format-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n
        \n \n
        \n\n
        \n\n\n
        ","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n format: \"dd'/'MMM'/'yy hh:mm a\",// custom format \n startDate: new Date(new Date().setDate(1)),\n endDate: new Date(new Date().setDate(20))\n });\n daterangepicker.appendTo('#daterangepicker');\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n daterangepicker.format = dropDownInstance.value;\n daterangepicker.separator = (dropDownInstance.text === 'yyyy/MM/dd HH:mm') ? 'to' : '-';\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n
        \n \n
        \n\n
        \n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n format: \"dd'/'MMM'/'yy hh:mm a\",// custom format \n startDate: new Date(new Date().setDate(1)),\n endDate: new Date(new Date().setDate(20))\n });\n daterangepicker.appendTo('#daterangepicker');\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n daterangepicker.format = dropDownInstance.value;\n daterangepicker.separator = (dropDownInstance.text === 'yyyy/MM/dd HH:mm') ? 'to' : '-';\n }\n"} \ No newline at end of file diff --git a/src/daterangepicker/date-format.html b/src/daterangepicker/date-format.html index d965cafc..ea47a22c 100644 --- a/src/daterangepicker/date-format.html +++ b/src/daterangepicker/date-format.html @@ -30,6 +30,7 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/daterangepicker/date-range-stack.json b/src/daterangepicker/date-range-stack.json index b31db6c3..f35ae894 100644 --- a/src/daterangepicker/date-range-stack.json +++ b/src/daterangepicker/date-range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n min: new Date('1/15/2017'),\n max: new Date('12/20/2017')\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n min: new Date('1/15/2017'),\n max: new Date('12/20/2017')\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file diff --git a/src/daterangepicker/date-range.html b/src/daterangepicker/date-range.html index 7aa4025f..26a19ef2 100644 --- a/src/daterangepicker/date-range.html +++ b/src/daterangepicker/date-range.html @@ -18,10 +18,12 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/daterangepicker/day-span-stack.json b/src/daterangepicker/day-span-stack.json index d52a5281..93ff1fe5 100644 --- a/src/daterangepicker/day-span-stack.json +++ b/src/daterangepicker/day-span-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n minDays: 5, \n maxDays: 10\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n minDays: 5, \n maxDays: 10\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file diff --git a/src/daterangepicker/day-span.html b/src/daterangepicker/day-span.html index a371f3c7..a736447e 100644 --- a/src/daterangepicker/day-span.html +++ b/src/daterangepicker/day-span.html @@ -19,10 +19,12 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/daterangepicker/default-stack.json b/src/daterangepicker/default-stack.json index c4c4c6cd..3225043c 100644 --- a/src/daterangepicker/default-stack.json +++ b/src/daterangepicker/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker();\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker();\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file diff --git a/src/daterangepicker/default.html b/src/daterangepicker/default.html index 718f6627..e818033e 100644 --- a/src/daterangepicker/default.html +++ b/src/daterangepicker/default.html @@ -15,10 +15,12 @@

        More information on the DateRangePicker instantiation can be found in the documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/daterangepicker/month-range-picker-stack.json b/src/daterangepicker/month-range-picker-stack.json new file mode 100644 index 00000000..dbfa0cb5 --- /dev/null +++ b/src/daterangepicker/month-range-picker-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n start: 'Year', \n depth: 'Year',\n format: \"MMM yyyy\" \n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file diff --git a/src/daterangepicker/month-range-picker.html b/src/daterangepicker/month-range-picker.html new file mode 100644 index 00000000..26c7c7e9 --- /dev/null +++ b/src/daterangepicker/month-range-picker.html @@ -0,0 +1,25 @@ +
        +
        +

        +
        +
        +
        +

        + The following sample demonstrates the DateRangePicker control acting as a month range picker. It allows you to select values within the range of months. +

        +
        +
        +

        + DateRangePicker has the Start and the Depth properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade). +

        +
        + + + + \ No newline at end of file diff --git a/src/daterangepicker/month-range-picker.js b/src/daterangepicker/month-range-picker.js new file mode 100644 index 00000000..2b873f94 --- /dev/null +++ b/src/daterangepicker/month-range-picker.js @@ -0,0 +1,8 @@ +this.default = function () { + var daterangepicker = new ej.calendars.DateRangePicker({ + start: 'Year', + depth: 'Year', + format: "MMM yyyy" + }); + daterangepicker.appendTo('#daterangepicker'); +}; \ No newline at end of file diff --git a/src/daterangepicker/presets-stack.json b/src/daterangepicker/presets-stack.json index 4fb437e8..5b095790 100644 --- a/src/daterangepicker/presets-stack.json +++ b/src/daterangepicker/presets-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n presets: [\n { label: 'This Week', start: new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString()),\n\t\t\tend: new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate() - (new Date().getDay() + 7) % 7)) + 6).getDate() + 6)).toDateString()) },\n { label: 'Last Week', start: new Date(new Date(new Date().setDate(new Date().getDate() - 6)).toDateString()), end: new Date(new Date().toDateString()) },\n { label: 'This Month', start: new Date(new Date(new Date().setDate(1)).toDateString()), end: new Date(new Date().toDateString()) },\n { label: 'Last Month', start: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString()), end:new Date(new Date().toDateString()) }\n ]\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var daterangepicker = new ej.calendars.DateRangePicker({\n presets: [\n { label: 'This Week', start: new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString()),\n\t\t\tend: new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate() - (new Date().getDay() + 7) % 7)) + 6).getDate() + 6)).toDateString()) },\n { label: 'Last Week', start: new Date(new Date(new Date().setDate(new Date().getDate() - 6)).toDateString()), end: new Date(new Date().toDateString()) },\n { label: 'This Month', start: new Date(new Date(new Date().setDate(1)).toDateString()), end: new Date(new Date().toDateString()) },\n { label: 'Last Month', start: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString()), end:new Date(new Date().toDateString()) }\n ]\n });\n daterangepicker.appendTo('#daterangepicker');\n"} \ No newline at end of file diff --git a/src/daterangepicker/presets.html b/src/daterangepicker/presets.html index 9a5125a9..be05655f 100644 --- a/src/daterangepicker/presets.html +++ b/src/daterangepicker/presets.html @@ -15,10 +15,12 @@

        More information on the DateRangePicker presets support can be found in the documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/daterangepicker/sample.json b/src/daterangepicker/sample.json index 6765d344..477f894b 100644 --- a/src/daterangepicker/sample.json +++ b/src/daterangepicker/sample.json @@ -1,7 +1,8 @@ -{ "name": "DateRangePicker", "directory": "daterangepicker", "category":"Calendars", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder" ]} }, - {"url":"date-range", "name": "Date Range", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "min", "max" ]}}, - {"url":"day-span", "name": "Day Span", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "minDays", "maxDays" ]}}, - {"url":"date-format", "name": "Format", "category":"DateRangePicker", "api":{"DateRangePicker": [ "format", "value" ]}}, - {"url":"presets", "name": "Preset Ranges", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "presets" ]}} +{ "name": "DateRangePicker", "directory": "daterangepicker", "category":"Calendars","type": "update", "samples" : [ + {"url":"default", "name": "Default Functionalities", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder" ]}, "description": "A simple and lightweight DateRangePicker control for JavaScript(ES5) with a flexible user interface for selecting a range of dates effortlessly" }, + {"url":"date-range", "name": "Date Range", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "min", "max" ]}, "description": "This example demonstrates how to disables the specific range of dates (min and max) in a JavaScript(ES5) DateRangePicker"}, + {"url":"day-span", "name": "Day Span", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "minDays", "maxDays" ]}, "description": "This example demonstrates how to restrict the users to select the min and max number of days between the selected range of start and end dates"}, + {"url":"date-format", "name": "Format", "category":"DateRangePicker", "api":{"DateRangePicker": [ "format", "value" ]}, "description": "Flexible DateRangePicker control for JavaScript(ES5) with options to change the date format to a preferred culture to improve readability in the UI"}, + {"url":"presets", "name": "Preset Ranges", "category":"DateRangePicker", "api":{"DateRangePicker": [ "placeholder", "presets" ]}, "description": "This example demonstrates how to specify the predefined custom date ranges (presets range) like last month, last year and current week in the dropdown popup"}, + {"url": "month-range-picker", "name": "Month Range Picker", "category": "DateRangePicker", "type": "new", "api":{"DateRangePicker": [ "start", "depth" ]}, "description": "The JavaScript(ES5) DateRangePicker control can act as a month and year picker.It helps you to select a month or year quickly with all months related properties"} ]} \ No newline at end of file diff --git a/src/datetimepicker/date-time-format-stack.json b/src/datetimepicker/date-time-format-stack.json index 400bff93..3ce8802e 100644 --- a/src/datetimepicker/date-time-format-stack.json +++ b/src/datetimepicker/date-time-format-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n \n
        \n \n\n
        \n \n \n
        ","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker({\n format: 'dd-MMM-yy hh:mm a',\n value: new Date()\n });\n datetimepicker.appendTo('#datetimepicker');\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n datetimepicker.format = dropDownInstance.value;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        \n \n
        \n \n\n
        \n \n \n","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker({\n format: 'dd-MMM-yy hh:mm a',\n value: new Date()\n });\n datetimepicker.appendTo('#datetimepicker');\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n placeholder: 'Format',\n floatLabelType: 'Auto',\n change: onChange\n });\n dropDownInstance.appendTo('#dateformats');\n\n function onChange() {\n //dropdown change event handler\n datetimepicker.format = dropDownInstance.value;\n }\n"} \ No newline at end of file diff --git a/src/datetimepicker/date-time-format.html b/src/datetimepicker/date-time-format.html index 50e4eac0..a96f17ed 100644 --- a/src/datetimepicker/date-time-format.html +++ b/src/datetimepicker/date-time-format.html @@ -30,6 +30,7 @@ format property. You can also change the date format by selecting it from the format options in the properties panel.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datetimepicker/date-time-range-stack.json b/src/datetimepicker/date-time-range-stack.json index 2ef8ca75..7b8091e3 100644 --- a/src/datetimepicker/date-time-range-stack.json +++ b/src/datetimepicker/date-time-range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var today = new Date();\n var currentYear = today.getFullYear();\n var currentMonth = today.getMonth();\n var currentDay = today.getDate();\n var datetimepicker = new ej.calendars.DateTimePicker({\n min: new Date(currentYear, currentMonth, 7, 10),\n max: new Date(currentYear, currentMonth, 27, 22, 30),\n value: new Date(currentYear, currentMonth, 14, 10, 30),\n placeholder: 'Choose a datetime'\n });\n datetimepicker.appendTo('#datetimepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n

        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var today = new Date();\n var currentYear = today.getFullYear();\n var currentMonth = today.getMonth();\n var currentDay = today.getDate();\n var datetimepicker = new ej.calendars.DateTimePicker({\n min: new Date(currentYear, currentMonth, 7, 10),\n max: new Date(currentYear, currentMonth, 27, 22, 30),\n value: new Date(currentYear, currentMonth, 14, 10, 30),\n placeholder: 'Choose a datetime'\n });\n datetimepicker.appendTo('#datetimepicker');\n"} \ No newline at end of file diff --git a/src/datetimepicker/date-time-range.html b/src/datetimepicker/date-time-range.html index a68c4dae..256bf697 100644 --- a/src/datetimepicker/date-time-range.html +++ b/src/datetimepicker/date-time-range.html @@ -16,10 +16,12 @@ In the following sample, a specific date ranges from 7th 10:00 AM to 27th 10:30 PM of the current month has been set to select from the Calendar. All the other dates are out of range and restricted to set or select.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datetimepicker/default-stack.json b/src/datetimepicker/default-stack.json index b07f3cc7..2f72702c 100644 --- a/src/datetimepicker/default-stack.json +++ b/src/datetimepicker/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker();\n datetimepicker.appendTo('#datetimepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker();\n datetimepicker.appendTo('#datetimepicker');\n"} \ No newline at end of file diff --git a/src/datetimepicker/default.html b/src/datetimepicker/default.html index 1f5abd3e..74c997e3 100644 --- a/src/datetimepicker/default.html +++ b/src/datetimepicker/default.html @@ -18,10 +18,12 @@

        More information on the DateTimePicker instantiation can be found in the documentation section.

        + \ No newline at end of file + + diff --git a/src/datetimepicker/disabled-stack.json b/src/datetimepicker/disabled-stack.json index bf0a7e22..cc9e8296 100644 --- a/src/datetimepicker/disabled-stack.json +++ b/src/datetimepicker/disabled-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker({\n renderDayCell: disableDate\n });\n datetimepicker.appendTo('#datetimepicker');\n\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var datetimepicker = new ej.calendars.DateTimePicker({\n renderDayCell: disableDate\n });\n datetimepicker.appendTo('#datetimepicker');\n\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"} \ No newline at end of file diff --git a/src/datetimepicker/disabled.html b/src/datetimepicker/disabled.html index 096fdbff..26eb9eb8 100644 --- a/src/datetimepicker/disabled.html +++ b/src/datetimepicker/disabled.html @@ -20,10 +20,12 @@

        More information on the disabled dates can be found in the documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/datetimepicker/sample.json b/src/datetimepicker/sample.json index 9a4ad330..9c0415ab 100644 --- a/src/datetimepicker/sample.json +++ b/src/datetimepicker/sample.json @@ -1,7 +1,7 @@ { "name": "DateTimePicker", "directory": "datetimepicker", "category":"Calendars", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"DateTimePicker", "api":{"DateTimePicker": []}}, - {"url":"disabled", "name": "Disabled Dates", "category":"DateTimePicker", "api":{"DateTimePicker": ["renderDayCell" ]}}, - {"url":"date-time-range", "name": "DateTime Range ", "category":"DateTimePicker", "api":{"DatePicker": [ "min", "max", "value" ]}}, - {"url":"date-time-format", "name": "Format", "category":"DateTimePicker", "api":{"DateTimePicker": [ "format", "value"]} }, - {"url":"special-dates", "name": "Special Dates", "category":"DateTimePicker", "api":{"DateTimePicker": [ "renderDayCell", "value"]} } + {"url":"default", "name": "Default Functionalities", "category":"DateTimePicker", "api":{"DateTimePicker": []}, "description": "This example demonstrates a simple, mobile-friendly and responsive JavaScript(ES5) DateTimePicker to select both a date and time" }, + {"url":"disabled", "name": "Disabled Dates", "category":"DateTimePicker", "api":{"DateTimePicker": ["renderDayCell" ]}, "description": "Customizable DateTimePicker widget for JavaScript(ES5) with disabled dates and times that restrict selection for specific date and time durations" }, + {"url":"date-time-range", "name": "DateTime Range", "category":"DateTimePicker", "api":{"DatePicker": [ "min", "max", "value" ]}, "description": "This example demonstrates how to disables the specific range of dates and times (min and max) in a JavaScript(ES5) DateTimePicker" }, + {"url":"date-time-format", "name": "Format", "category":"DateTimePicker", "api":{"DateTimePicker": [ "format", "value"]}, "description": "Flexible DateTimePicker for JavaScript(ES5) with options to customize date and time formats based on the preferred culture for improved readability" }, + {"url":"special-dates", "name": "Special Dates", "category":"DateTimePicker", "api":{"DateTimePicker": [ "renderDayCell", "value"]}, "description": "This example demonstrates how to highlight the specific dates and times like weekends, holidays and special dates in a JavaScript(ES5) DateTimePicker" } ]} \ No newline at end of file diff --git a/src/datetimepicker/special-dates-stack.json b/src/datetimepicker/special-dates-stack.json index 1753cd93..4a8e6355 100644 --- a/src/datetimepicker/special-dates-stack.json +++ b/src/datetimepicker/special-dates-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n\tvar span;\n var addClass = ej.base.addClass;\n var datetimepicker = new ej.calendars.DateTimePicker({\n renderDayCell: customDates,\n value: new Date('1/13/2017'),\n cssClass: 'e-customStyle'\n });\n datetimepicker.appendTo('#datetimepicker');\n\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'birthday']);\n args.element.firstElementChild.setAttribute('title', 'Birthday !');\n args.element.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'vacation']);\n args.element.firstElementChild.setAttribute('title', 'Vacation !');\n args.element.setAttribute('title', 'Vacation !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 20) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'farewell']);\n args.element.firstElementChild.setAttribute('title', 'Farewell !');\n args.element.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n\tvar span;\n var addClass = ej.base.addClass;\n var datetimepicker = new ej.calendars.DateTimePicker({\n renderDayCell: customDates,\n value: new Date('1/13/2017'),\n cssClass: 'e-customStyle'\n });\n datetimepicker.appendTo('#datetimepicker');\n\n function customDates(args) {\n if (args.date.getDate() === 10) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'birthday']);\n args.element.firstElementChild.setAttribute('title', 'Birthday !');\n args.element.setAttribute('title', 'Birthday !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 15) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'vacation']);\n args.element.firstElementChild.setAttribute('title', 'Vacation !');\n args.element.setAttribute('title', 'Vacation !');\n args.element.appendChild(span);\n\n }\n if (args.date.getDate() === 20) {\n span = document.createElement('span');\n span.setAttribute('class', 'e-icons highlight');\n addClass([args.element], [ 'e-day','special', 'farewell']);\n args.element.firstElementChild.setAttribute('title', 'Farewell !');\n args.element.setAttribute('title', 'Farewell !');\n args.element.appendChild(span);\n\n }\n\n }\n"} \ No newline at end of file diff --git a/src/datetimepicker/special-dates.html b/src/datetimepicker/special-dates.html index 268a5594..7a63ef91 100644 --- a/src/datetimepicker/special-dates.html +++ b/src/datetimepicker/special-dates.html @@ -21,11 +21,6 @@

        \ No newline at end of file diff --git a/src/diagram/bpmn-editor-stack.json b/src/diagram/bpmn-editor-stack.json index 8a0af3a3..65de5241 100644 --- a/src/diagram/bpmn-editor-stack.json +++ b/src/diagram/bpmn-editor-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams, ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu);\nej.diagrams.SymbolPalette.Inject(ej.diagrams.BpmnDiagrams);\nvar diagram;\nvar nodes = [\n {\n id: 'start', width: 40, height: 40, offsetX: 35, offsetY: 180, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }\n },\n {\n id: 'subProcess', width: 520, height: 250, offsetX: 355, offsetY: 180,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n shape: 'Activity', type: 'Bpmn',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', collapsed: false,\n processes: ['processesStart', 'service', 'compensation', 'processesTask',\n 'error', 'processesEnd', 'user', 'subProcessesEnd']\n }\n }\n }\n },\n {\n id: 'hazardEnd', width: 40, height: 40, offsetX: 305, offsetY: 370, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' },\n }, annotations: [{\n id: 'label2', content: 'Hazard',\n style: { fill: 'white', color: 'black' }, verticalAlignment: 'Top', margin: { top: 20 }\n }]\n },\n {\n id: 'cancelledEnd', width: 40, height: 40, offsetX: 545, offsetY: 370, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' },\n }, annotations: [{\n id: 'cancelledEndLabel2', content: 'Cancelled',\n style: { fill: 'white', color: 'black' }, verticalAlignment: 'Top', margin: { top: 20 }\n }]\n },\n {\n id: 'end', width: 40, height: 40, offsetX: 665, offsetY: 180, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n },\n },\n {\n id: 'processesStart', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }, margin: { left: 40, top: 80 }\n },\n {\n id: 'service', style: { fill: '#6FAAB0' }, width: 95, height: 70,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'Service',\n loop: 'parallelmultiinstance',\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Book hotel', offset: { x: 0.50, y: 0.50 },\n style: { color: 'white', }\n }], margin: { left: 110, top: 20 },\n },\n {\n id: 'compensation', width: 30, height: 30,\n shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Intermediate', trigger: 'Compensation' }\n }, margin: { left: 170, top: 100 }\n },\n {\n id: 'processesTask', style: { fill: '#F6B53F' }, width: 95, height: 70,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'Service',\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Charge credit card', offset: { x: 0.50, y: 0.60 },\n style: { color: 'white' }\n }], margin: { left: 290, top: 20 },\n },\n {\n id: 'error', width: 30, height: 30,\n shape: {\n type: 'Bpmn', shape: 'Event',\n event: {\n event: 'Intermediate', trigger: 'Error'\n }\n }, margin: { left: 350, top: 100 }\n },\n {\n id: 'processesEnd', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n }, margin: { left: 440, top: 80 }\n },\n {\n id: 'user', style: { fill: '#E94649' }, width: 90, height: 80,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'User', Compensation: true, offset: { x: 0.50, y: 1 }\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Cancel hotel reservation', offset: { x: 0.50, y: 0.60 },\n style: { color: 'white' }\n }], margin: { left: 240, top: 160 },\n },\n {\n id: 'subProcessesEnd', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n }, margin: { left: 440, top: 210 }\n },\n];\nvar connectors = [\n { id: 'connector1', sourceID: 'start', targetID: 'subProcess' },\n { id: 'connector2', sourceID: 'subProcess', sourcePortID: 'success', targetID: 'end' },\n {\n id: 'connector3', sourceID: 'subProcess', sourcePortID: 'failure', targetID: 'hazardEnd', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n annotations: [{\n id: 'connector3Label2', content: 'Booking system failure', offset: 0.50,\n style: { fill: 'white' }\n }]\n },\n {\n id: 'connector4', sourceID: 'subProcess', sourcePortID: 'cancel', targetID: 'cancelledEnd', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n { id: 'connector5', sourceID: 'processesStart', targetID: 'service', type: 'Orthogonal', },\n { id: 'connector6', sourceID: 'service', targetID: 'processesTask' },\n { id: 'connector7', sourceID: 'processesTask', targetID: 'processesEnd', type: 'Orthogonal', },\n {\n id: 'connector8', sourceID: 'compensation', targetID: 'user', type: 'Orthogonal',\n shape: {\n type: 'Bpmn',\n flow: 'association',\n association: 'Directional'\n }, style: {\n strokeDashArray: '2,2'\n },\n segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' },\n { type: 'Orthogonal', length: 80, direction: 'Right' }]\n },\n {\n id: 'connector9', sourceID: 'error', targetID: 'subProcessesEnd', type: 'Orthogonal',\n annotations: [{\n id: 'connector9Label2', content: 'Cannot charge card', offset: 0.50,\n style: { fill: 'white', color: 'black' }\n }],\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }]\n }\n];\nvar bpmnShapes = [\n {\n id: 'Start', width: 35, height: 35, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }\n },\n {\n id: 'NonInterruptingIntermediate', width: 35, height: 35, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'NonInterruptingIntermediate' }\n },\n },\n {\n id: 'End', width: 35, height: 35, offsetX: 665, offsetY: 230, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n },\n },\n {\n id: 'Task', width: 35, height: 35, offsetX: 700, offsetY: 700,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task',\n },\n }\n },\n {\n id: 'Transaction', width: 35, height: 35, offsetX: 300, offsetY: 100,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n type: 'Bpmn', shape: 'Activity',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', transaction: {\n cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n }\n }\n }\n }\n }, {\n id: 'Task_Service', width: 35, height: 35, offsetX: 700, offsetY: 700,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: { type: 'Service' }\n },\n }\n },\n {\n id: 'Gateway', width: 35, height: 35, offsetX: 100, offsetY: 100,\n shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' } },\n },\n {\n id: 'DataObject', width: 35, height: 35, offsetX: 500, offsetY: 100,\n shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: false, type: 'None' } }\n }, {\n id: 'subProcess', width: 520, height: 250, offsetX: 355, offsetY: 230,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n shape: 'Activity', type: 'Bpmn',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', collapsed: false,\n processes: [], transaction: {\n cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n }\n }\n }\n }\n },\n];\nvar contextMenu = {\n show: true, items: [\n {\n text: 'Ad-Hoc', id: 'Adhoc',\n items: [{ text: 'None', iconCss: 'e-adhocs e-bpmn-event e-bpmn-icons e-None', id: 'AdhocNone' },\n { iconCss: 'e-adhocs e-bpmn-icons e-adhoc', text: 'Ad-Hoc', id: 'AdhocAdhoc' }]\n }, {\n text: 'Loop', id: 'Loop',\n items: [{ text: 'None', iconCss: 'e-loop e-bpmn-icons e-None', id: 'LoopNone' },\n { text: 'Standard', iconCss: 'e-loop e-bpmn-icons e-Loop', id: 'Standard' },\n { text: 'Parallel Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-ParallelMI', id: 'ParallelMultiInstance' },\n { text: 'Sequence Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-SequentialMI', id: 'SequenceMultiInstance' }]\n }, {\n text: 'Compensation', id: 'taskCompensation',\n items: [{ text: 'None', iconCss: 'e-compensation e-bpmn-icons e-None', id: 'CompensationNone' },\n { iconCss: 'e-compensation e-bpmn-icons e-Compensation', text: 'Compensation', id: 'CompensationCompensation' }]\n }, {\n text: 'Activity-Type', id: 'Activity-Type',\n items: [{ text: 'Collapsed sub-process', iconCss: 'e-bpmn-icons e-SubProcess', id: 'CollapsedSubProcess' },\n { iconCss: 'e-bpmn-icons e-Task', text: 'Expanded sub-process', id: 'ExpandedSubProcess' }]\n }, {\n text: 'Boundry', id: 'Boundry',\n items: [{ text: 'Default', iconCss: 'e-boundry e-bpmn-icons e-Default', id: 'Default' },\n { text: 'Call', iconCss: 'e-boundry e-bpmn-icons e-Call', id: 'BoundryCall' },\n { text: 'Event', iconCss: 'e-boundry e-bpmn-icons e-Event', id: 'BoundryEvent' }]\n }, {\n text: 'Data Object', id: 'DataObject',\n items: [{ text: 'None', iconCss: 'e-data e-bpmn-icons e-None', id: 'DataObjectNone' },\n { text: 'Input', iconCss: 'e-data e-bpmn-icons e-DataInput', id: 'Input' },\n { text: 'Output', iconCss: 'e-data e-bpmn-icons e-DataOutput', id: 'Output' }]\n }, {\n text: 'Collection', id: 'collection',\n items: [{ text: 'None', iconCss: 'e-collection e-bpmn-icons e-None', id: 'collectionNone' },\n { text: 'Collection', iconCss: 'e-collection e-bpmn-icons e-ParallelMI', id: 'Collectioncollection' }]\n }, {\n text: 'Call', id: 'DeftCall',\n items: [{ text: 'None', iconCss: 'e-call e-bpmn-icons e-None', id: 'CallNone' },\n { text: 'Call', iconCss: 'e-call e-bpmn-icons e-CallActivity', id: 'CallCall' }]\n }, {\n text: 'Trigger Result', id: 'TriggerResult',\n items: [{ text: 'None', id: 'TriggerNone', iconCss: 'e-trigger e-bpmn-icons e-None' },\n { text: 'Message', id: 'Message', iconCss: 'e-trigger e-bpmn-icons e-InMessage' },\n { text: 'Multiple', id: 'Multiple', iconCss: 'e-trigger e-bpmn-icons e-InMultiple' },\n { text: 'Parallel', id: 'Parallel', iconCss: 'e-trigger e-bpmn-icons e-InParallelMultiple' },\n { text: 'Signal', id: 'Signal', iconCss: 'e-trigger e-bpmn-icons e-InSignal' },\n { text: 'Timer', id: 'Timer', iconCss: 'e-trigger e-bpmn-icons e-InTimer' },\n { text: 'Cancel', id: 'Cancel', iconCss: 'e-trigger e-bpmn-icons e-CancelEnd' },\n { text: 'Escalation', id: 'Escalation', iconCss: 'e-trigger e-bpmn-icons e-InEscalation' },\n { text: 'Error', id: 'Error', iconCss: 'e-trigger e-bpmn-icons e-InError' },\n { text: 'Compensation', id: 'triggerCompensation', iconCss: 'e-trigger e-bpmn-icons e-InCompensation' },\n { text: 'Terminate', id: 'Terminate', iconCss: 'e-trigger e-bpmn-icons e-TerminateEnd' },\n { text: 'Conditional', id: 'Conditional', iconCss: 'e-trigger e-bpmn-icons e-InConditional' },\n { text: 'Link', id: 'Link', iconCss: 'e-trigger e-bpmn-icons e-ThrowLinkin' }\n ]\n },\n {\n text: 'Event Type', id: 'EventType',\n items: [{ text: 'Start', id: 'Start', iconCss: 'e-event e-bpmn-icons e-NoneStart', },\n { text: 'Intermediate', id: 'Intermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },\n { text: 'NonInterruptingStart', id: 'NonInterruptingStart', iconCss: 'e-event e-bpmn-icons e-Noninterruptingstart' },\n { text: 'ThrowingIntermediate', id: 'ThrowingIntermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },\n {\n text: 'NonInterruptingIntermediate', id: 'NonInterruptingIntermediate',\n iconCss: 'e-event e-bpmn-icons e-NoninterruptingIntermediate'\n },\n { text: 'End', id: 'End', iconCss: 'e-event e-bpmn-icons e-NoneEnd' }]\n }, {\n text: 'Task Type', id: 'TaskType',\n items: [\n { text: 'None', id: 'TaskNone', iconCss: 'e-task e-bpmn-icons e-None' },\n { text: 'Service', id: 'Service', iconCss: 'e-task e-bpmn-icons e-ServiceTask' },\n { text: 'BusinessRule', id: 'BusinessRule', iconCss: 'e-task e-bpmn-icons e-BusinessRule' },\n { text: 'InstantiatingReceive', id: 'InstantiatingReceive', iconCss: 'e-task e-bpmn-icons e-InstantiatingReceive' },\n { text: 'Manual', id: 'Manual', iconCss: 'e-task e-bpmn-icons e-ManualCall' },\n { text: 'Receive', id: 'Receive', iconCss: 'e-task e-bpmn-icons e-InMessage' },\n { text: 'Script', id: 'Script', iconCss: 'e-task e-bpmn-icons e-ScriptCall' },\n { text: 'Send', id: 'Send', iconCss: 'e-task e-bpmn-icons e-InMessage' },\n { text: 'User', id: 'User', iconCss: 'e-task e-bpmn-icons e-UserCall' },\n ]\n }, {\n text: 'GateWay', id: 'GateWay',\n iconCss: 'e-bpmn-icons e-Gateway', items: [\n { text: 'None', id: 'GatewayNone', iconCss: 'e-gate e-bpmn-icons e-None' },\n { text: 'Exclusive', iconCss: 'e-gate e-bpmn-icons e-ExclusiveGatewayWithMarker', id: 'Exclusive' },\n { text: 'Inclusive', iconCss: 'e-gate e-bpmn-icons e-InclusiveGateway', id: 'Inclusive' },\n { text: 'Parallel', iconCss: 'e-gate e-bpmn-icons e-ParallelGateway', id: 'GatewayParallel' },\n { text: 'Complex', iconCss: 'e-gate e-bpmn-icons e-ComplexGateway', id: 'Complex' },\n { text: 'EventBased', iconCss: 'e-gate e-bpmn-icons e-EventBasedGateway', id: 'EventBased' },\n { text: 'ExclusiveEventBased', iconCss: 'e-gate e-bpmn-icons e-ExclusiveEventBased', id: 'ExclusiveEventBased' },\n { text: 'ParallelEventBased', iconCss: 'e-gate e-bpmn-icons e-ParallelEventBasedGatewaytostart', id: 'ParallelEventBased' }\n ]\n },\n ],\n showCustomMenuOnly: true,\n};\n\nfunction getConnectors() {\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2, strokeDashArray: '4 4' }\n },\n {\n id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link4', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',\n shape: {\n type: 'Bpmn',\n flow: 'Association',\n association: 'Directional'\n }, style: {\n strokeDashArray: '2,2'\n },\n },\n ];\n return connectorSymbols;\n}\n\nfunction dragEnter(args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n if (!obj.shape.activity.subProcess.collapsed) {\n obj.shape.activity.subProcess.transaction.cancel.visible = true;\n obj.shape.activity.subProcess.transaction.failure.visible = true;\n obj.shape.activity.subProcess.transaction.success.visible = true;\n }\n else {\n var oWidth = obj.width;\n var oHeight = obj.height;\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n obj.offsetX += (obj.width - oWidth) / 2;\n obj.offsetY += (obj.height - oHeight) / 2;\n }\n }\n}\n\nfunction contextMenuClick(args) {\n if (diagram.selectedItems.nodes.length > 0) {\n var bpmnShape = diagram.selectedItems.nodes[0].shape;\n if (args.item.iconCss.indexOf('e-adhocs') > -1) {\n bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;\n }\n if (args.item.iconCss.indexOf(\"e-event\") > -1) {\n bpmnShape.event.event = args.item.id;\n }\n if (args.item.iconCss.indexOf(\"e-trigger\") > -1) {\n bpmnShape.event.trigger = args.item.text;\n }\n if (args.item.iconCss.indexOf(\"e-loop\") > -1) {\n var loop = (args.item.id === 'LoopNone') ? 'None' : args.item.id;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.loop = loop;\n }\n if (bpmnShape.activity.activity === 'SubProcess') {\n bpmnShape.activity.subProcess.loop = loop;\n }\n }\n if (args.item.iconCss.indexOf(\"e-compensation\") > -1) {\n var compensation = (args.item.id === 'CompensationNone') ? false : true;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.compensation = compensation;\n }\n if (bpmnShape.activity.activity === 'SubProcess') {\n bpmnShape.activity.subProcess.compensation = compensation;\n }\n }\n if (args.item.iconCss.indexOf('e-call') > -1) {\n var compensations = (args.item.id === 'CallNone') ? false : true;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.call = compensations;\n }\n }\n if (args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') {\n if (args.item.id === 'ExpandedSubProcess') {\n bpmnShape.activity.activity = 'SubProcess';\n bpmnShape.activity.subProcess.collapsed = false;\n }\n else {\n bpmnShape.activity.activity = 'SubProcess';\n bpmnShape.activity.subProcess.collapsed = true;\n }\n }\n if (args.item.iconCss.indexOf('e-boundry') > -1) {\n call = args.item.id;\n if (args.item.id !== 'Default') {\n call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';\n }\n bpmnShape.activity.subProcess.boundary = call;\n }\n if (args.item.iconCss.indexOf('e-data') > -1) {\n var data = args.item.id === 'DataObjectNone' ? 'None' : args.item.id;\n bpmnShape.dataObject.type = data;\n }\n if (args.item.iconCss.indexOf('e-collection') > -1) {\n var collection = (args.item.id === 'Collectioncollection') ? true : false;\n bpmnShape.dataObject.collection = collection;\n }\n if (args.item.iconCss.indexOf(\"e-task\") > -1) {\n var task = task === 'TaskNone' ? 'None' : args.item.id;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.type = task;\n }\n }\n if (args.item.iconCss.indexOf(\"e-gate\") > -1) {\n var gate = args.item.id.replace('Gateway', '');\n if (bpmnShape.shape === 'Gateway') {\n bpmnShape.gateway.type = gate;\n }\n }\n diagram.dataBind();\n }\n}\nfunction contextMenuOpen(args) {\n var hiddenId = [];\n if (args.element.className !== 'e-menu-parent e-ul ') {\n hiddenId = ['Adhoc', 'Loop', 'taskCompensation', 'Activity-Type', 'Boundry', 'DataObject',\n 'collection', 'DeftCall', 'TriggerResult', 'EventType', 'TaskType', 'GateWay'];\n }\n if (diagram.selectedItems.nodes.length) {\n for (var i = 0; i < args.items.length; i++) {\n var item = args.items[i];\n var bpmnShape = diagram.selectedItems.nodes[0].shape;\n if (bpmnShape.shape !== 'DataObject' && bpmnShape.shape !== 'Gateway') {\n if (item.text === 'Ad-Hoc') {\n if (bpmnShape.activity.activity === 'SubProcess') {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Loop' || item.text === 'Compensation' || item.text === 'Activity-Type') {\n if (bpmnShape.shape === 'Activity') {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Boundry') {\n if ((bpmnShape.activity.activity === 'SubProcess')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n }\n if (item.text === 'Data Object') {\n if ((bpmnShape.shape === 'DataObject')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Collection') {\n if ((bpmnShape.shape === 'DataObject')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Call') {\n if ((bpmnShape.shape === 'Activity') &&\n (bpmnShape.activity.activity === 'Task')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Trigger Result') {\n if ((bpmnShape.shape === 'Event')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Event Type') {\n if ((bpmnShape.shape === 'Event')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Task Type') {\n if ((bpmnShape.shape === 'Activity') &&\n (bpmnShape.activity.activity === 'Task')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'GateWay') {\n if ((bpmnShape.shape === 'Gateway')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (diagram.selectedItems.nodes.length > 0 && args.parentItem && args.parentItem.id === 'TriggerResult' &&\n bpmnShape.shape === 'Event') {\n var shape = bpmnShape;\n if (item.text !== 'None' && (item.text === shape.event.event ||\n item.text === shape.event.trigger)) {\n hiddenId.push(item.id);\n }\n if (shape.event.event === 'Start') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'NonInterruptingStart' || item.text === 'Link') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n item.text === 'Error' || item.text === 'None') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'Intermediate') {\n if (item.text === 'Terminate') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'NonInterruptingIntermediate') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n item.text === 'Error' || item.text === 'None' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'ThrowingIntermediate') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Timer' || item.text === 'Error' ||\n item.text === 'None' || item.text === 'Pareller' || item.text === 'Conditional') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'End') {\n if (item.text === 'Parallel' || item.text === 'Timer' || item.text === 'Conditional' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n }\n if (diagram.selectedItems.nodes.length > 0 && args.parentItem && args.parentItem.id === 'EventType' &&\n bpmnShape.shape === 'Event') {\n if ((item.text === bpmnShape.event.event)) {\n hiddenId.push(item.id);\n }\n }\n }\n }\n args.hiddenItems = hiddenId;\n}\n\nfunction paletteIconClick() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var element = document.getElementById('palette-icon');\n if (element) {\n element.addEventListener('click', showPaletteToolbar, false);\n }\n }\n}\n\nfunction showPaletteToolbar() {\n var element = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!element.classList.contains('sb-mobile-palette-open')) {\n element.classList.add('sb-mobile-palette-open');\n }\n else {\n element.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '469px', nodes: nodes, connectors: connectors,\n contextMenuSettings: contextMenu,\n contextMenuOpen: contextMenuOpen,\n contextMenuClick: contextMenuClick,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dragEnter: dragEnter\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n \n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple', symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 }, symbolHeight: 60, symbolWidth: 60,\n palettes: [\n { id: 'Bpmn', expanded: true, symbols: bpmnShapes, iconCss: 'shapes', title: 'BPMN Shapes' },\n { id: 'Connector', expanded: true, symbols: getConnectors(), iconCss: 'shapes', title: 'Connectors' },\n ],\n width: '100%', height: '471px'\n });\n palette.appendTo('#symbolpalette');\n paletteIconClick();\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams, ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu);\nej.diagrams.SymbolPalette.Inject(ej.diagrams.BpmnDiagrams);\nvar diagram;\nvar nodes = [\n {\n id: 'start', width: 40, height: 40, offsetX: 35, offsetY: 180, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }\n },\n {\n id: 'subProcess', width: 520, height: 250, offsetX: 355, offsetY: 180,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n shape: 'Activity', type: 'Bpmn',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', collapsed: false,\n processes: ['processesStart', 'service', 'compensation', 'processesTask',\n 'error', 'processesEnd', 'user', 'subProcessesEnd']\n }\n }\n }\n },\n {\n id: 'hazardEnd', width: 40, height: 40, offsetX: 305, offsetY: 370, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' },\n }, annotations: [{\n id: 'label2', content: 'Hazard',\n style: { fill: 'white', color: 'black' }, verticalAlignment: 'Top', margin: { top: 20 }\n }]\n },\n {\n id: 'cancelledEnd', width: 40, height: 40, offsetX: 545, offsetY: 370, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' },\n }, annotations: [{\n id: 'cancelledEndLabel2', content: 'Cancelled',\n style: { fill: 'white', color: 'black' }, verticalAlignment: 'Top', margin: { top: 20 }\n }]\n },\n {\n id: 'end', width: 40, height: 40, offsetX: 665, offsetY: 180, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n },\n },\n {\n id: 'processesStart', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }, margin: { left: 40, top: 80 }\n },\n {\n id: 'service', style: { fill: '#6FAAB0' }, width: 95, height: 70,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'Service',\n loop: 'parallelmultiinstance',\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Book hotel', offset: { x: 0.50, y: 0.50 },\n style: { color: 'white', }\n }], margin: { left: 110, top: 20 },\n },\n {\n id: 'compensation', width: 30, height: 30,\n shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Intermediate', trigger: 'Compensation' }\n }, margin: { left: 170, top: 100 }\n },\n {\n id: 'processesTask', style: { fill: '#F6B53F' }, width: 95, height: 70,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'Service',\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Charge credit card', offset: { x: 0.50, y: 0.60 },\n style: { color: 'white' }\n }], margin: { left: 290, top: 20 },\n },\n {\n id: 'error', width: 30, height: 30,\n shape: {\n type: 'Bpmn', shape: 'Event',\n event: {\n event: 'Intermediate', trigger: 'Error'\n }\n }, margin: { left: 350, top: 100 }\n },\n {\n id: 'processesEnd', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n }, margin: { left: 440, top: 80 }\n },\n {\n id: 'user', style: { fill: '#E94649' }, width: 90, height: 80,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: {\n type: 'User', Compensation: true, offset: { x: 0.50, y: 1 }\n },\n },\n }, annotations: [{\n id: 'serviceLabel2', content: 'Cancel hotel reservation', offset: { x: 0.50, y: 0.60 },\n style: { color: 'white' }\n }], margin: { left: 240, top: 160 },\n },\n {\n id: 'subProcessesEnd', width: 30, height: 30, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n }, margin: { left: 440, top: 210 }\n },\n];\nvar connectors = [\n { id: 'connector1', sourceID: 'start', targetID: 'subProcess' },\n { id: 'connector2', sourceID: 'subProcess', sourcePortID: 'success', targetID: 'end' },\n {\n id: 'connector3', sourceID: 'subProcess', sourcePortID: 'failure', targetID: 'hazardEnd', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n annotations: [{\n id: 'connector3Label2', content: 'Booking system failure', offset: 0.50,\n style: { fill: 'white' }\n }]\n },\n {\n id: 'connector4', sourceID: 'subProcess', sourcePortID: 'cancel', targetID: 'cancelledEnd', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n { id: 'connector5', sourceID: 'processesStart', targetID: 'service', type: 'Orthogonal', },\n { id: 'connector6', sourceID: 'service', targetID: 'processesTask' },\n { id: 'connector7', sourceID: 'processesTask', targetID: 'processesEnd', type: 'Orthogonal', },\n {\n id: 'connector8', sourceID: 'compensation', targetID: 'user', type: 'Orthogonal',\n shape: {\n type: 'Bpmn',\n flow: 'association',\n association: 'Directional'\n }, style: {\n strokeDashArray: '2,2'\n },\n segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' },\n { type: 'Orthogonal', length: 80, direction: 'Right' }]\n },\n {\n id: 'connector9', sourceID: 'error', targetID: 'subProcessesEnd', type: 'Orthogonal',\n annotations: [{\n id: 'connector9Label2', content: 'Cannot charge card', offset: 0.50,\n style: { fill: 'white', color: 'black' }\n }],\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }]\n }\n];\nvar bpmnShapes = [\n {\n id: 'Start', width: 35, height: 35, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'Start' }\n }\n },\n {\n id: 'NonInterruptingIntermediate', width: 35, height: 35, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'NonInterruptingIntermediate' }\n },\n },\n {\n id: 'End', width: 35, height: 35, offsetX: 665, offsetY: 230, shape: {\n type: 'Bpmn', shape: 'Event',\n event: { event: 'End' }\n },\n },\n {\n id: 'Task', width: 35, height: 35, offsetX: 700, offsetY: 700,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task',\n },\n }\n },\n {\n id: 'Transaction', width: 35, height: 35, offsetX: 300, offsetY: 100,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n type: 'Bpmn', shape: 'Activity',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', transaction: {\n cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n }\n }\n }\n }\n }, {\n id: 'Task_Service', width: 35, height: 35, offsetX: 700, offsetY: 700,\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'Task', task: { type: 'Service' }\n },\n }\n },\n {\n id: 'Gateway', width: 35, height: 35, offsetX: 100, offsetY: 100,\n shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' } },\n },\n {\n id: 'DataObject', width: 35, height: 35, offsetX: 500, offsetY: 100,\n shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: false, type: 'None' } }\n }, {\n id: 'subProcess', width: 520, height: 250, offsetX: 355, offsetY: 230,\n constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop,\n shape: {\n shape: 'Activity', type: 'Bpmn',\n activity: {\n activity: 'SubProcess', subProcess: {\n type: 'Transaction', collapsed: false,\n processes: [], transaction: {\n cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n }\n }\n }\n }\n },\n];\nvar contextMenu = {\n show: true, items: [\n {\n text: 'Ad-Hoc', id: 'Adhoc',\n items: [{ text: 'None', iconCss: 'e-adhocs e-bpmn-event e-bpmn-icons e-None', id: 'AdhocNone' },\n { iconCss: 'e-adhocs e-bpmn-icons e-adhoc', text: 'Ad-Hoc', id: 'AdhocAdhoc' }]\n }, {\n text: 'Loop', id: 'Loop',\n items: [{ text: 'None', iconCss: 'e-loop e-bpmn-icons e-None', id: 'LoopNone' },\n { text: 'Standard', iconCss: 'e-loop e-bpmn-icons e-Loop', id: 'Standard' },\n { text: 'Parallel Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-ParallelMI', id: 'ParallelMultiInstance' },\n { text: 'Sequence Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-SequentialMI', id: 'SequenceMultiInstance' }]\n }, {\n text: 'Compensation', id: 'taskCompensation',\n items: [{ text: 'None', iconCss: 'e-compensation e-bpmn-icons e-None', id: 'CompensationNone' },\n { iconCss: 'e-compensation e-bpmn-icons e-Compensation', text: 'Compensation', id: 'CompensationCompensation' }]\n }, {\n text: 'Activity-Type', id: 'Activity-Type',\n items: [{ text: 'Collapsed sub-process', iconCss: 'e-bpmn-icons e-SubProcess', id: 'CollapsedSubProcess' },\n { iconCss: 'e-bpmn-icons e-Task', text: 'Expanded sub-process', id: 'ExpandedSubProcess' }]\n }, {\n text: 'Boundry', id: 'Boundry',\n items: [{ text: 'Default', iconCss: 'e-boundry e-bpmn-icons e-Default', id: 'Default' },\n { text: 'Call', iconCss: 'e-boundry e-bpmn-icons e-Call', id: 'BoundryCall' },\n { text: 'Event', iconCss: 'e-boundry e-bpmn-icons e-Event', id: 'BoundryEvent' }]\n }, {\n text: 'Data Object', id: 'DataObject',\n items: [{ text: 'None', iconCss: 'e-data e-bpmn-icons e-None', id: 'DataObjectNone' },\n { text: 'Input', iconCss: 'e-data e-bpmn-icons e-DataInput', id: 'Input' },\n { text: 'Output', iconCss: 'e-data e-bpmn-icons e-DataOutput', id: 'Output' }]\n }, {\n text: 'Collection', id: 'collection',\n items: [{ text: 'None', iconCss: 'e-collection e-bpmn-icons e-None', id: 'collectionNone' },\n { text: 'Collection', iconCss: 'e-collection e-bpmn-icons e-ParallelMI', id: 'Collectioncollection' }]\n }, {\n text: 'Call', id: 'DeftCall',\n items: [{ text: 'None', iconCss: 'e-call e-bpmn-icons e-None', id: 'CallNone' },\n { text: 'Call', iconCss: 'e-call e-bpmn-icons e-CallActivity', id: 'CallCall' }]\n }, {\n text: 'Trigger Result', id: 'TriggerResult',\n items: [{ text: 'None', id: 'TriggerNone', iconCss: 'e-trigger e-bpmn-icons e-None' },\n { text: 'Message', id: 'Message', iconCss: 'e-trigger e-bpmn-icons e-InMessage' },\n { text: 'Multiple', id: 'Multiple', iconCss: 'e-trigger e-bpmn-icons e-InMultiple' },\n { text: 'Parallel', id: 'Parallel', iconCss: 'e-trigger e-bpmn-icons e-InParallelMultiple' },\n { text: 'Signal', id: 'Signal', iconCss: 'e-trigger e-bpmn-icons e-InSignal' },\n { text: 'Timer', id: 'Timer', iconCss: 'e-trigger e-bpmn-icons e-InTimer' },\n { text: 'Cancel', id: 'Cancel', iconCss: 'e-trigger e-bpmn-icons e-CancelEnd' },\n { text: 'Escalation', id: 'Escalation', iconCss: 'e-trigger e-bpmn-icons e-InEscalation' },\n { text: 'Error', id: 'Error', iconCss: 'e-trigger e-bpmn-icons e-InError' },\n { text: 'Compensation', id: 'triggerCompensation', iconCss: 'e-trigger e-bpmn-icons e-InCompensation' },\n { text: 'Terminate', id: 'Terminate', iconCss: 'e-trigger e-bpmn-icons e-TerminateEnd' },\n { text: 'Conditional', id: 'Conditional', iconCss: 'e-trigger e-bpmn-icons e-InConditional' },\n { text: 'Link', id: 'Link', iconCss: 'e-trigger e-bpmn-icons e-ThrowLinkin' }\n ]\n },\n {\n text: 'Event Type', id: 'EventType',\n items: [{ text: 'Start', id: 'Start', iconCss: 'e-event e-bpmn-icons e-NoneStart', },\n { text: 'Intermediate', id: 'Intermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },\n { text: 'NonInterruptingStart', id: 'NonInterruptingStart', iconCss: 'e-event e-bpmn-icons e-Noninterruptingstart' },\n { text: 'ThrowingIntermediate', id: 'ThrowingIntermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },\n {\n text: 'NonInterruptingIntermediate', id: 'NonInterruptingIntermediate',\n iconCss: 'e-event e-bpmn-icons e-NoninterruptingIntermediate'\n },\n { text: 'End', id: 'End', iconCss: 'e-event e-bpmn-icons e-NoneEnd' }]\n }, {\n text: 'Task Type', id: 'TaskType',\n items: [\n { text: 'None', id: 'TaskNone', iconCss: 'e-task e-bpmn-icons e-None' },\n { text: 'Service', id: 'Service', iconCss: 'e-task e-bpmn-icons e-ServiceTask' },\n { text: 'BusinessRule', id: 'BusinessRule', iconCss: 'e-task e-bpmn-icons e-BusinessRule' },\n { text: 'InstantiatingReceive', id: 'InstantiatingReceive', iconCss: 'e-task e-bpmn-icons e-InstantiatingReceive' },\n { text: 'Manual', id: 'Manual', iconCss: 'e-task e-bpmn-icons e-ManualCall' },\n { text: 'Receive', id: 'Receive', iconCss: 'e-task e-bpmn-icons e-InMessage' },\n { text: 'Script', id: 'Script', iconCss: 'e-task e-bpmn-icons e-ScriptCall' },\n { text: 'Send', id: 'Send', iconCss: 'e-task e-bpmn-icons e-InMessage' },\n { text: 'User', id: 'User', iconCss: 'e-task e-bpmn-icons e-UserCall' },\n ]\n }, {\n text: 'GateWay', id: 'GateWay',\n iconCss: 'e-bpmn-icons e-Gateway', items: [\n { text: 'None', id: 'GatewayNone', iconCss: 'e-gate e-bpmn-icons e-None' },\n { text: 'Exclusive', iconCss: 'e-gate e-bpmn-icons e-ExclusiveGatewayWithMarker', id: 'Exclusive' },\n { text: 'Inclusive', iconCss: 'e-gate e-bpmn-icons e-InclusiveGateway', id: 'Inclusive' },\n { text: 'Parallel', iconCss: 'e-gate e-bpmn-icons e-ParallelGateway', id: 'GatewayParallel' },\n { text: 'Complex', iconCss: 'e-gate e-bpmn-icons e-ComplexGateway', id: 'Complex' },\n { text: 'EventBased', iconCss: 'e-gate e-bpmn-icons e-EventBasedGateway', id: 'EventBased' },\n { text: 'ExclusiveEventBased', iconCss: 'e-gate e-bpmn-icons e-ExclusiveEventBased', id: 'ExclusiveEventBased' },\n { text: 'ParallelEventBased', iconCss: 'e-gate e-bpmn-icons e-ParallelEventBasedGatewaytostart', id: 'ParallelEventBased' }\n ]\n },\n ],\n showCustomMenuOnly: true,\n};\n\nfunction getConnectors() {\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2, strokeDashArray: '4 4' }\n },\n {\n id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link4', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',\n shape: {\n type: 'Bpmn',\n flow: 'Association',\n association: 'Directional'\n }, style: {\n strokeDashArray: '2,2'\n },\n },\n ];\n return connectorSymbols;\n}\n\nfunction dragEnter(args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n if (!obj.shape.activity.subProcess.collapsed) {\n obj.shape.activity.subProcess.transaction.cancel.visible = true;\n obj.shape.activity.subProcess.transaction.failure.visible = true;\n obj.shape.activity.subProcess.transaction.success.visible = true;\n }\n else {\n var oWidth = obj.width;\n var oHeight = obj.height;\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n obj.offsetX += (obj.width - oWidth) / 2;\n obj.offsetY += (obj.height - oHeight) / 2;\n }\n }\n}\n\nfunction contextMenuClick(args) {\n if (diagram.selectedItems.nodes.length > 0) {\n var bpmnShape = diagram.selectedItems.nodes[0].shape;\n if (args.item.iconCss.indexOf('e-adhocs') > -1) {\n bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;\n }\n if (args.item.iconCss.indexOf(\"e-event\") > -1) {\n bpmnShape.event.event = args.item.id;\n }\n if (args.item.iconCss.indexOf(\"e-trigger\") > -1) {\n bpmnShape.event.trigger = args.item.text;\n }\n if (args.item.iconCss.indexOf(\"e-loop\") > -1) {\n var loop = (args.item.id === 'LoopNone') ? 'None' : args.item.id;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.loop = loop;\n }\n if (bpmnShape.activity.activity === 'SubProcess') {\n bpmnShape.activity.subProcess.loop = loop;\n }\n }\n if (args.item.iconCss.indexOf(\"e-compensation\") > -1) {\n var compensation = (args.item.id === 'CompensationNone') ? false : true;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.compensation = compensation;\n }\n if (bpmnShape.activity.activity === 'SubProcess') {\n bpmnShape.activity.subProcess.compensation = compensation;\n }\n }\n if (args.item.iconCss.indexOf('e-call') > -1) {\n var compensations = (args.item.id === 'CallNone') ? false : true;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.call = compensations;\n }\n }\n if (args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') {\n if (args.item.id === 'ExpandedSubProcess') {\n bpmnShape.activity.activity = 'SubProcess';\n bpmnShape.activity.subProcess.collapsed = false;\n }\n else {\n bpmnShape.activity.activity = 'SubProcess';\n bpmnShape.activity.subProcess.collapsed = true;\n }\n }\n if (args.item.iconCss.indexOf('e-boundry') > -1) {\n call = args.item.id;\n if (args.item.id !== 'Default') {\n call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';\n }\n bpmnShape.activity.subProcess.boundary = call;\n }\n if (args.item.iconCss.indexOf('e-data') > -1) {\n var data = args.item.id === 'DataObjectNone' ? 'None' : args.item.id;\n bpmnShape.dataObject.type = data;\n }\n if (args.item.iconCss.indexOf('e-collection') > -1) {\n var collection = (args.item.id === 'Collectioncollection') ? true : false;\n bpmnShape.dataObject.collection = collection;\n }\n if (args.item.iconCss.indexOf(\"e-task\") > -1) {\n var task = task === 'TaskNone' ? 'None' : args.item.id;\n if (bpmnShape.activity.activity === 'Task') {\n bpmnShape.activity.task.type = task;\n }\n }\n if (args.item.iconCss.indexOf(\"e-gate\") > -1) {\n var gate = args.item.id.replace('Gateway', '');\n if (bpmnShape.shape === 'Gateway') {\n bpmnShape.gateway.type = gate;\n }\n }\n diagram.dataBind();\n }\n}\nfunction contextMenuOpen(args) {\n var hiddenId = [];\n if (args.element.className !== 'e-menu-parent e-ul ') {\n hiddenId = ['Adhoc', 'Loop', 'taskCompensation', 'Activity-Type', 'Boundry', 'DataObject',\n 'collection', 'DeftCall', 'TriggerResult', 'EventType', 'TaskType', 'GateWay'];\n }\n if (diagram.selectedItems.nodes.length) {\n for (var i = 0; i < args.items.length; i++) {\n var item = args.items[i];\n var bpmnShape = diagram.selectedItems.nodes[0].shape;\n if (bpmnShape.shape !== 'DataObject' && bpmnShape.shape !== 'Gateway') {\n if (item.text === 'Ad-Hoc') {\n if (bpmnShape.activity.activity === 'SubProcess') {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Loop' || item.text === 'Compensation' || item.text === 'Activity-Type') {\n if (bpmnShape.shape === 'Activity') {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Boundry') {\n if ((bpmnShape.activity.activity === 'SubProcess')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n }\n if (item.text === 'Data Object') {\n if ((bpmnShape.shape === 'DataObject')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Collection') {\n if ((bpmnShape.shape === 'DataObject')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Call') {\n if ((bpmnShape.shape === 'Activity') &&\n (bpmnShape.activity.activity === 'Task')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Trigger Result') {\n if ((bpmnShape.shape === 'Event')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Event Type') {\n if ((bpmnShape.shape === 'Event')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'Task Type') {\n if ((bpmnShape.shape === 'Activity') &&\n (bpmnShape.activity.activity === 'Task')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (item.text === 'GateWay') {\n if ((bpmnShape.shape === 'Gateway')) {\n hiddenId.splice(hiddenId.indexOf(item.id), 1);\n }\n }\n if (diagram.selectedItems.nodes.length > 0 && args.parentItem && args.parentItem.id === 'TriggerResult' &&\n bpmnShape.shape === 'Event') {\n var shape = bpmnShape;\n if (item.text !== 'None' && (item.text === shape.event.event ||\n item.text === shape.event.trigger)) {\n hiddenId.push(item.id);\n }\n if (shape.event.event === 'Start') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'NonInterruptingStart' || item.text === 'Link') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n item.text === 'Error' || item.text === 'None') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'Intermediate') {\n if (item.text === 'Terminate') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'NonInterruptingIntermediate') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n item.text === 'Error' || item.text === 'None' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'ThrowingIntermediate') {\n if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Timer' || item.text === 'Error' ||\n item.text === 'None' || item.text === 'Pareller' || item.text === 'Conditional') {\n hiddenId.push(item.id);\n }\n }\n if (shape.event.event === 'End') {\n if (item.text === 'Parallel' || item.text === 'Timer' || item.text === 'Conditional' || item.text === 'Link') {\n hiddenId.push(item.id);\n }\n }\n }\n if (diagram.selectedItems.nodes.length > 0 && args.parentItem && args.parentItem.id === 'EventType' &&\n bpmnShape.shape === 'Event') {\n if ((item.text === bpmnShape.event.event)) {\n hiddenId.push(item.id);\n }\n }\n }\n }\n args.hiddenItems = hiddenId;\n}\n\nfunction paletteIconClick() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var element = document.getElementById('palette-icon');\n if (element) {\n element.addEventListener('click', showPaletteToolbar, false);\n }\n }\n}\n\n\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '469px', nodes: nodes, connectors: connectors,\n contextMenuSettings: contextMenu,\n contextMenuOpen: contextMenuOpen,\n contextMenuClick: contextMenuClick,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dragEnter: dragEnter\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n \n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple', symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 }, symbolHeight: 60, symbolWidth: 60,\n palettes: [\n { id: 'Bpmn', expanded: true, symbols: bpmnShapes, iconCss: 'shapes', title: 'BPMN Shapes' },\n { id: 'Connector', expanded: true, symbols: getConnectors(), iconCss: 'shapes', title: 'Connectors' },\n ],\n width: '100%', height: '471px'\n });\n palette.appendTo('#symbolpalette');\n paletteIconClick();\n\n\n"} \ No newline at end of file diff --git a/src/diagram/bpmn-editor.js b/src/diagram/bpmn-editor.js index cc85d1de..1ca3e24a 100644 --- a/src/diagram/bpmn-editor.js +++ b/src/diagram/bpmn-editor.js @@ -576,7 +576,7 @@ function paletteIconClick() { } } } - +// custom code start function showPaletteToolbar() { var element = document.getElementById('palette-space'); isMobile = window.matchMedia('(max-width:550px)').matches; @@ -589,7 +589,7 @@ function showPaletteToolbar() { } } } - +// custom code end this.default = function () { diagram = new ej.diagrams.Diagram({ width: '100%', height: '469px', nodes: nodes, connectors: connectors, diff --git a/src/diagram/complex-hierarchical-tree-stack.json b/src/diagram/complex-hierarchical-tree-stack.json index ea5324f0..23989421 100644 --- a/src/diagram/complex-hierarchical-tree-stack.json +++ b/src/diagram/complex-hierarchical-tree-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Layout Settings\n
        \n
        \n
        \n Orientation\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Margin X
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Margin Y
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Multiple Parent sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.ComplexHierarchicalTree);\n//Apply the Alignment for the layout.\nfunction update(value) {\n if (value === 'left') {\n diagram.layout.margin.left = marginLeftObj.value;\n } else if (value === 'top') {\n diagram.layout.margin.top = marginTopObj.value;\n } else if (value === 'hspacing') {\n diagram.layout.horizontalSpacing = horizontalSpacingObj.value;\n } else if (value === 'vspacing') {\n diagram.layout.verticalSpacing = verticalSpacingObj.value;\n }\n diagram.dataBind();\n}\n\n\n\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580,\n //Configrues hierarchical tree layout\n layout: {\n type: 'ComplexHierarchicalTree',\n horizontalSpacing: 40, verticalSpacing: 40, orientation: 'TopToBottom',\n margin: { left: 10, right: 0, top: 50, bottom: 0 }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 40;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 7 };\n },\n //Sets the default values of connectors\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.cornerRadius = 7;\n connector.targetDecorator.height = 7;\n connector.targetDecorator.width = 7;\n connector.style.strokeColor = '#6d6d6d';\n },\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'ReportingPerson',\n dataManager: new ej.data.DataManager(window.multiParentData),\n //binds the external data with node\n doBinding: function (nodeModel, data) {\n nodeModel.style = { fill: data.fillColor, strokeWidth: 1, strokeColor: data.border };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n //used NumericTextBox for left margin of the layout.\n var marginLeftObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.margin.left,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('left');\n }\n });\n //used NumericTextBox for top margin of the layout.\n marginLeftObj.appendTo('#marginLeft');\n var marginTopObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.margin.top,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('top');\n }\n });\n marginTopObj.appendTo('#marginTop');\n //used NumericTextBox for horizontalspacing of the layout.\n var horizontalSpacingObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.horizontalSpacing,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('hspacing');\n }\n });\n horizontalSpacingObj.appendTo('#horiontal');\n //used NumericTextBox for verticalspacing of the layout.\n var verticalSpacingObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.verticalSpacing,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('vspacing');\n }\n });\n verticalSpacingObj.appendTo('#vertical');\n //Click Event for Appearance of the layout.\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selecteditem = document.getElementsByClassName('e-selected-style');\n if (selecteditem.length) {\n selecteditem[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n var id = target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n target.classList.add('e-selected-style');\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Layout Settings\n
        \n
        \n
        \n Orientation\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Margin X
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Margin Y
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Multiple Parent sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.ComplexHierarchicalTree);\nvar horizontalSpacingObj;\nvar verticalSpacingObj;\nvar marginTopObj;\nvar marginLeftObj;\nvar diagram;\n//Apply the Alignment for the layout.\nfunction update(value) {\n if (value === 'left') {\n diagram.layout.margin.left = marginLeftObj.value;\n } else if (value === 'top') {\n diagram.layout.margin.top = marginTopObj.value;\n } else if (value === 'hspacing') {\n diagram.layout.horizontalSpacing = horizontalSpacingObj.value;\n } else if (value === 'vspacing') {\n diagram.layout.verticalSpacing = verticalSpacingObj.value;\n }\n diagram.dataBind();\n}\n\n\n\n\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580,\n //Configrues hierarchical tree layout\n layout: {\n type: 'ComplexHierarchicalTree',\n horizontalSpacing: 40, verticalSpacing: 40, orientation: 'TopToBottom',\n margin: { left: 10, right: 0, top: 50, bottom: 0 }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 40;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 7 };\n },\n //Sets the default values of connectors\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.cornerRadius = 7;\n connector.targetDecorator.height = 7;\n connector.targetDecorator.width = 7;\n connector.style.strokeColor = '#6d6d6d';\n },\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'ReportingPerson',\n dataManager: new ej.data.DataManager(window.multiParentData),\n //binds the external data with node\n doBinding: function (nodeModel, data) {\n nodeModel.style = { fill: data.fillColor, strokeWidth: 1, strokeColor: data.border };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n //used NumericTextBox for left margin of the layout.\n marginLeftObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.margin.left,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('left');\n }\n });\n marginLeftObj.appendTo('#marginLeft');\n //used NumericTextBox for top margin of the layout.\n marginTopObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.margin.top,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('top');\n }\n });\n marginTopObj.appendTo('#marginTop');\n //used NumericTextBox for horizontalspacing of the layout.\n horizontalSpacingObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.horizontalSpacing,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('hspacing');\n }\n });\n horizontalSpacingObj.appendTo('#horiontal');\n //used NumericTextBox for verticalspacing of the layout.\n verticalSpacingObj = new ej.inputs.NumericTextBox({\n value: diagram.layout.verticalSpacing,\n step: 1,\n format: '##.##',\n change: function (args) {\n update('vspacing');\n }\n });\n verticalSpacingObj.appendTo('#vertical');\n //Click Event for Appearance of the layout.\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n\n if (target.className === 'image-pattern-style') {\n var id = target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n\n }\n };\n"} \ No newline at end of file diff --git a/src/diagram/complex-hierarchical-tree.js b/src/diagram/complex-hierarchical-tree.js index ce429679..6d4d851f 100644 --- a/src/diagram/complex-hierarchical-tree.js +++ b/src/diagram/complex-hierarchical-tree.js @@ -3,6 +3,11 @@ */ // tslint:disable-next-line:max-func-body-length ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.ComplexHierarchicalTree); +var horizontalSpacingObj; +var verticalSpacingObj; +var marginTopObj; +var marginLeftObj; +var diagram; //Apply the Alignment for the layout. function update(value) { if (value === 'left') { @@ -21,7 +26,7 @@ function update(value) { this.default = function () { //Initializes diagram control - var diagram = new ej.diagrams.Diagram({ + diagram = new ej.diagrams.Diagram({ width: '100%', height: 580, //Configrues hierarchical tree layout layout: { @@ -59,7 +64,7 @@ this.default = function () { diagram.appendTo('#diagram'); //used NumericTextBox for left margin of the layout. - var marginLeftObj = new ej.inputs.NumericTextBox({ + marginLeftObj = new ej.inputs.NumericTextBox({ value: diagram.layout.margin.left, step: 1, format: '##.##', @@ -67,9 +72,9 @@ this.default = function () { update('left'); } }); - //used NumericTextBox for top margin of the layout. marginLeftObj.appendTo('#marginLeft'); - var marginTopObj = new ej.inputs.NumericTextBox({ + //used NumericTextBox for top margin of the layout. + marginTopObj = new ej.inputs.NumericTextBox({ value: diagram.layout.margin.top, step: 1, format: '##.##', @@ -79,7 +84,7 @@ this.default = function () { }); marginTopObj.appendTo('#marginTop'); //used NumericTextBox for horizontalspacing of the layout. - var horizontalSpacingObj = new ej.inputs.NumericTextBox({ + horizontalSpacingObj = new ej.inputs.NumericTextBox({ value: diagram.layout.horizontalSpacing, step: 1, format: '##.##', @@ -89,7 +94,7 @@ this.default = function () { }); horizontalSpacingObj.appendTo('#horiontal'); //used NumericTextBox for verticalspacing of the layout. - var verticalSpacingObj = new ej.inputs.NumericTextBox({ + verticalSpacingObj = new ej.inputs.NumericTextBox({ value: diagram.layout.verticalSpacing, step: 1, format: '##.##', @@ -101,17 +106,21 @@ this.default = function () { //Click Event for Appearance of the layout. document.getElementById('appearance').onclick = function (args) { var target = args.target; + // custom code start var selecteditem = document.getElementsByClassName('e-selected-style'); if (selecteditem.length) { selecteditem[0].classList.remove('e-selected-style'); } + // custom code end if (target.className === 'image-pattern-style') { var id = target.id; var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length); diagram.layout.orientation = orientation1; diagram.dataBind(); diagram.doLayout(); + // custom code start target.classList.add('e-selected-style'); + // custom code end } }; }; \ No newline at end of file diff --git a/src/diagram/connector-stack.json b/src/diagram/connector-stack.json index b253777d..9319c0c5 100644 --- a/src/diagram/connector-stack.json +++ b/src/diagram/connector-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Connector sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree,\n ej.diagrams.ConnectorBridging);\nvar diagram;\n\n\n//creation of the TextElement.\nfunction getTextElement(text) {\n var textElement = new ej.diagrams.TextElement();\n textElement.id = ej.diagrams.randomId(); \n textElement.width = 80;\n textElement.height = 35;\n textElement.content = text;\n textElement.style.fill = '#6f409f';\n textElement.style.color = 'white';\n textElement.style.strokeColor = '#6f409f';\n textElement.cornerRadius = 5;\n textElement.margin = { top: 10, bottom: 10, left: 10, right: 10 };\n textElement.relativeMode = 'Object';\n return textElement;\n}\n\n//creation of Port for Node.\nfunction getPorts(obj) {\n if (obj.id === 'node2') {\n var node2Ports = [\n { id: 'port1', offset: { x: 1, y: 0.25 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port2', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port3', offset: { x: 1, y: 0.75 }, visibility: ej.diagrams.PortVisibility.Hidden }\n ];\n return node2Ports;\n }\n else if (obj.id === 'node6') {\n var node6Ports = [\n { id: 'port4', offset: { x: 0, y: 0.46 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port5', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port6', offset: { x: 0, y: 0.54 }, visibility: ej.diagrams.PortVisibility.Hidden }\n ];\n return node6Ports;\n }\n else {\n var ports = [\n { id: 'portIn', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'portOut', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n ];\n return ports;\n }\n}\n\n//ConnectorStyle customization\nfunction applyConnectorStyle(dashedLine, sourceDec, isRounded, type, target, strokeWidth) {\n for (var i = 0; i < diagram.connectors.length; i++) {\n connector = diagram.connectors[i];\n connector.style.strokeWidth = !strokeWidth ? 2 : strokeWidth;\n connector.type = type;\n connector.cornerRadius = isRounded ? 5 : 0;\n connector.style.strokeDashArray = dashedLine ? '5,5' : '';\n if (sourceDec) {\n diagram.connectors[i].sourceDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f', strokeWidth: 2\n }, shape: 'Circle'\n };\n }\n else {\n diagram.connectors[i].sourceDecorator = { shape: 'None' };\n }\n diagram.connectors[i].targetDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f', strokeWidth: 2\n }, shape: 'Arrow'\n };\n diagram.dataBind();\n }\n target.classList.add('e-selected-style');\n}\n// tslint:disable-next-line:max-func-body-length\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var marginLeft = (bounds.width - 560) / 2;\n //Initialize Diagram Nodes\n var nodes = [\n { id: 'node1', annotations: [{ content: 'Promotion' }] },\n { id: 'node2', annotations: [{ content: 'Lead' }] },\n { id: 'node3', annotations: [{ content: 'Account' }] },\n { id: 'node4', annotations: [{ content: 'Information' }] },\n { id: 'node5', annotations: [{ content: 'Opportunity' }] },\n { id: 'node6', offsetX: marginLeft + 530, offsetY: 290, excludeFromLayout: true }\n ];\n //Initialize Diagram connectors\n var connectors = [\n { id: 'connectr', sourceID: 'node1', targetID: 'node2' },\n {\n id: 'connectr1', sourceID: 'node2', sourcePortID: 'port1',\n targetID: 'node3', targetPortID: 'portIn'\n },\n {\n id: 'connectr2', sourceID: 'node2', sourcePortID: 'port2',\n targetID: 'node4', targetPortID: 'portIn'\n },\n {\n id: 'connectr3', sourceID: 'node2', sourcePortID: 'port3',\n targetID: 'node5', targetPortID: 'portIn'\n },\n {\n id: 'connectr4', sourceID: 'node6', sourcePortID: 'port4',\n targetID: 'node3', targetPortID: 'portOut'\n },\n {\n id: 'connectr5', sourceID: 'node6', sourcePortID: 'port5',\n targetID: 'node4', targetPortID: 'portOut'\n },\n {\n id: 'connectr7', sourceID: 'node6', sourcePortID: 'port6',\n targetID: 'node5', targetPortID: 'portOut'\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n connectors: connectors,\n selectedItems: {\n constraints: (ej.diagrams.SelectorConstraints.ConnectorSourceThumb\n | ej.diagrams.SelectorConstraints.ConnectorTargetThumb)\n },\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', orientation: 'LeftToRight',\n verticalSpacing: 75, margin: { left: marginLeft, right: 0, top: 0, bottom: 0 }\n },\n snapSettings: { constraints: 0 },\n //set default value for Nodes.\n getNodeDefaults: function (obj) {\n if (obj.id !== 'node1') {\n obj.ports = getPorts(obj);\n }\n if (obj.id !== 'node6') {\n obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 10 };\n obj.width = 80;\n obj.style.strokeWidth = 2;\n obj.style.strokeColor = '#6F409F';\n obj.height = 35;\n }\n },\n //set default value for Connectors.\n getConnectorDefaults: function (obj) {\n obj.type = 'Bezier';\n obj.style.strokeColor = '#6f409f';\n obj.style.strokeWidth = 2;\n obj.targetDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f',\n }\n };\n },\n //Customize the content of the node\n setNodeTemplate: function (obj) {\n if (obj.id === 'node6') {\n var canvas = new ej.diagrams.StackPanel();\n canvas.id = ej.diagrams.randomId();\n canvas.children = [];\n canvas.style.strokeWidth = 0;\n canvas.style.fill = '#e6e0eb';\n canvas.children.push(getTextElement('Events', '#a6a1e0'));\n canvas.children.push(getTextElement('Emails', '#db8ec9'));\n canvas.children.push(getTextElement('Calls', '#db8ec9'));\n canvas.children.push(getTextElement('Smart Contents', '#db8ec9'));\n return canvas;\n }\n return null;\n },\n });\n diagram.appendTo('#diagram');\n //checkbox is used to enable or disable the connector interaction.\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: false, label: 'Lock',\n change: function (args) {\n for (var j = 0; j < diagram.connectors.length; j++) {\n var connector = diagram.connectors[j];\n if (args.checked) {\n connector.constraints &= ~(ej.diagrams.ConnectorConstraints.DragSourceEnd\n | ej.diagrams.ConnectorConstraints.DragTargetEnd | ej.diagrams.ConnectorConstraints.DragSegmentThumb);\n connector.constraints |= ej.diagrams.ConnectorConstraints.ReadOnly;\n }\n else {\n connector.constraints |= ej.diagrams.ConnectorConstraints.Default & ~(ej.diagrams.ConnectorConstraints.ReadOnly);\n }\n diagram.dataBind();\n }\n }\n });\n checkBoxObj.appendTo('#checked');\n\n //Click Event for Appearance of the layout.\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'straightConnector':\n applyConnectorStyle(false, false, false, 'Straight', target, 1);\n break;\n case 'orthogonalConnector':\n applyConnectorStyle(false, false, false, 'Orthogonal', target, 1);\n break;\n case 'bezierConnector':\n applyConnectorStyle(false, false, false, 'Bezier', target, 1);\n break;\n case 'straightConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Straight', target);\n break;\n case 'orthogonalConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Orthogonal', target);\n break;\n case 'bezierConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Bezier', target);\n break;\n case 'straightConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Straight', target);\n break;\n case 'orthogonalConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Orthogonal', target);\n break;\n case 'bezierConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Bezier', target);\n break;\n case 'cornerRadious':\n applyConnectorStyle(false, false, true, 'Orthogonal', target);\n break;\n case 'sourceDecorator':\n applyConnectorStyle(false, true, false, 'Straight', target);\n break;\n case 'sourceDecoratorWithDasharray':\n applyConnectorStyle(true, true, false, 'Straight', target);\n break;\n }\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Connector sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree,\n ej.diagrams.ConnectorBridging);\nvar diagram;\n\n\n//creation of the TextElement.\nfunction getTextElement(text) {\n var textElement = new ej.diagrams.TextElement();\n textElement.id = ej.diagrams.randomId(); \n textElement.width = 80;\n textElement.height = 35;\n textElement.content = text;\n textElement.style.fill = '#6f409f';\n textElement.style.color = 'white';\n textElement.style.strokeColor = '#6f409f';\n textElement.cornerRadius = 5;\n textElement.margin = { top: 10, bottom: 10, left: 10, right: 10 };\n textElement.relativeMode = 'Object';\n return textElement;\n}\n\n//creation of Port for Node.\nfunction getPorts(obj) {\n if (obj.id === 'node2') {\n var node2Ports = [\n { id: 'port1', offset: { x: 1, y: 0.25 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port2', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port3', offset: { x: 1, y: 0.75 }, visibility: ej.diagrams.PortVisibility.Hidden }\n ];\n return node2Ports;\n }\n else if (obj.id === 'node6') {\n var node6Ports = [\n { id: 'port4', offset: { x: 0, y: 0.46 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port5', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port6', offset: { x: 0, y: 0.54 }, visibility: ej.diagrams.PortVisibility.Hidden }\n ];\n return node6Ports;\n }\n else {\n var ports = [\n { id: 'portIn', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'portOut', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n ];\n return ports;\n }\n}\n\n//ConnectorStyle customization\nfunction applyConnectorStyle(dashedLine, sourceDec, isRounded, type, target, strokeWidth) {\n for (var i = 0; i < diagram.connectors.length; i++) {\n connector = diagram.connectors[i];\n connector.style.strokeWidth = !strokeWidth ? 2 : strokeWidth;\n connector.type = type;\n connector.cornerRadius = isRounded ? 5 : 0;\n connector.style.strokeDashArray = dashedLine ? '5,5' : '';\n if (sourceDec) {\n diagram.connectors[i].sourceDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f', strokeWidth: 2\n }, shape: 'Circle'\n };\n }\n else {\n diagram.connectors[i].sourceDecorator = { shape: 'None' };\n }\n diagram.connectors[i].targetDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f', strokeWidth: 2\n }, shape: 'Arrow'\n };\n diagram.dataBind();\n }\n\n}\n// tslint:disable-next-line:max-func-body-length\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var marginLeft = (bounds.width - 560) / 2;\n //Initialize Diagram Nodes\n var nodes = [\n { id: 'node1', annotations: [{ content: 'Promotion' }] },\n { id: 'node2', annotations: [{ content: 'Lead' }] },\n { id: 'node3', annotations: [{ content: 'Account' }] },\n { id: 'node4', annotations: [{ content: 'Information' }] },\n { id: 'node5', annotations: [{ content: 'Opportunity' }] },\n { id: 'node6', offsetX: marginLeft + 530, offsetY: 290, excludeFromLayout: true }\n ];\n //Initialize Diagram connectors\n var connectors = [\n { id: 'connectr', sourceID: 'node1', targetID: 'node2' },\n {\n id: 'connectr1', sourceID: 'node2', sourcePortID: 'port1',\n targetID: 'node3', targetPortID: 'portIn'\n },\n {\n id: 'connectr2', sourceID: 'node2', sourcePortID: 'port2',\n targetID: 'node4', targetPortID: 'portIn'\n },\n {\n id: 'connectr3', sourceID: 'node2', sourcePortID: 'port3',\n targetID: 'node5', targetPortID: 'portIn'\n },\n {\n id: 'connectr4', sourceID: 'node6', sourcePortID: 'port4',\n targetID: 'node3', targetPortID: 'portOut'\n },\n {\n id: 'connectr5', sourceID: 'node6', sourcePortID: 'port5',\n targetID: 'node4', targetPortID: 'portOut'\n },\n {\n id: 'connectr7', sourceID: 'node6', sourcePortID: 'port6',\n targetID: 'node5', targetPortID: 'portOut'\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n connectors: connectors,\n selectedItems: {\n constraints: (ej.diagrams.SelectorConstraints.ConnectorSourceThumb\n | ej.diagrams.SelectorConstraints.ConnectorTargetThumb)\n },\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', orientation: 'LeftToRight',\n verticalSpacing: 75, margin: { left: marginLeft, right: 0, top: 0, bottom: 0 }\n },\n snapSettings: { constraints: 0 },\n //set default value for Nodes.\n getNodeDefaults: function (obj) {\n if (obj.id !== 'node1') {\n obj.ports = getPorts(obj);\n }\n if (obj.id !== 'node6') {\n obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 10 };\n obj.width = 80;\n obj.style.strokeWidth = 2;\n obj.style.strokeColor = '#6F409F';\n obj.height = 35;\n }\n },\n //set default value for Connectors.\n getConnectorDefaults: function (obj) {\n obj.type = 'Bezier';\n obj.style.strokeColor = '#6f409f';\n obj.style.strokeWidth = 2;\n obj.targetDecorator = {\n style: {\n strokeColor: '#6f409f',\n fill: '#6f409f',\n }\n };\n },\n //Customize the content of the node\n setNodeTemplate: function (obj) {\n if (obj.id === 'node6') {\n var canvas = new ej.diagrams.StackPanel();\n canvas.id = ej.diagrams.randomId();\n canvas.children = [];\n canvas.style.strokeWidth = 0;\n canvas.style.fill = '#e6e0eb';\n canvas.children.push(getTextElement('Events', '#a6a1e0'));\n canvas.children.push(getTextElement('Emails', '#db8ec9'));\n canvas.children.push(getTextElement('Calls', '#db8ec9'));\n canvas.children.push(getTextElement('Smart Contents', '#db8ec9'));\n return canvas;\n }\n return null;\n },\n });\n diagram.appendTo('#diagram');\n //checkbox is used to enable or disable the connector interaction.\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: false, label: 'Lock',\n change: function (args) {\n for (var j = 0; j < diagram.connectors.length; j++) {\n var connector = diagram.connectors[j];\n if (args.checked) {\n connector.constraints &= ~(ej.diagrams.ConnectorConstraints.DragSourceEnd\n | ej.diagrams.ConnectorConstraints.DragTargetEnd | ej.diagrams.ConnectorConstraints.DragSegmentThumb);\n connector.constraints |= ej.diagrams.ConnectorConstraints.ReadOnly;\n }\n else {\n connector.constraints |= ej.diagrams.ConnectorConstraints.Default & ~(ej.diagrams.ConnectorConstraints.ReadOnly);\n }\n diagram.dataBind();\n }\n }\n });\n checkBoxObj.appendTo('#checked');\n\n //Click Event for Appearance of the layout.\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'straightConnector':\n applyConnectorStyle(false, false, false, 'Straight', target, 1);\n break;\n case 'orthogonalConnector':\n applyConnectorStyle(false, false, false, 'Orthogonal', target, 1);\n break;\n case 'bezierConnector':\n applyConnectorStyle(false, false, false, 'Bezier', target, 1);\n break;\n case 'straightConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Straight', target);\n break;\n case 'orthogonalConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Orthogonal', target);\n break;\n case 'bezierConnectorWithStroke':\n applyConnectorStyle(false, false, false, 'Bezier', target);\n break;\n case 'straightConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Straight', target);\n break;\n case 'orthogonalConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Orthogonal', target);\n break;\n case 'bezierConnectorWithDasharray':\n applyConnectorStyle(true, false, false, 'Bezier', target);\n break;\n case 'cornerRadious':\n applyConnectorStyle(false, false, true, 'Orthogonal', target);\n break;\n case 'sourceDecorator':\n applyConnectorStyle(false, true, false, 'Straight', target);\n break;\n case 'sourceDecoratorWithDasharray':\n applyConnectorStyle(true, true, false, 'Straight', target);\n break;\n }\n }\n };\n\n"} \ No newline at end of file diff --git a/src/diagram/connector.js b/src/diagram/connector.js index ca3679bb..777d60c5 100644 --- a/src/diagram/connector.js +++ b/src/diagram/connector.js @@ -76,7 +76,9 @@ function applyConnectorStyle(dashedLine, sourceDec, isRounded, type, target, str }; diagram.dataBind(); } + // custom code start target.classList.add('e-selected-style'); + // custom code end } // tslint:disable-next-line:max-func-body-length this.default = function () { @@ -199,10 +201,12 @@ this.default = function () { //Click Event for Appearance of the layout. document.getElementById('appearance').onclick = function (args) { var target = args.target; + // custom code start var selectedElement = document.getElementsByClassName('e-selected-style'); if (selectedElement.length) { selectedElement[0].classList.remove('e-selected-style'); } + // custom code end if (target.className === 'image-pattern-style') { switch (target.id) { case 'straightConnector': diff --git a/src/diagram/crud-stack.json b/src/diagram/crud-stack.json index 98384822..3e8e49eb 100644 --- a/src/diagram/crud-stack.json +++ b/src/diagram/crud-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * CRUD sample\n */\nej.diagrams.Diagram.Inject(\n ej.diagrams.DataBinding,\n ej.diagrams.HierarchicalTree\n);\nvar diagram;\nvar dialog;\nvar toolbarObj;\nvar sourceDropdown;\nvar targetDropdown;\nvar sourceID;\nvar targetID;\nvar nodeData = [];\n\nfunction dlgButtonClick(args) {\n var dialogHeader = dialog.header;\n var description = document.getElementById(\"Description\").value;\n var color = document.getElementById(\"Color\").value;\n var selectedItem;\n if (diagram.selectedItems.nodes.length > 0) {\n selectedItem = diagram.selectedItems.nodes[0];\n }\n if (diagram.selectedItems.connectors.length > 0) {\n selectedItem = diagram.selectedItems.connectors[0];\n }\n //Add new node and connector in diagram at runtime.\n if (dialogHeader === \"Add\") {\n var node = {\n id: \"node\" + ej.diagrams.randomId(),\n style: { fill: color },\n Description: description,\n Color: color,\n Id: Math.floor(Math.random() * 1000 + 100)\n };\n var connector = {\n id: \"connector\" + ej.diagrams.randomId(),\n sourceID: selectedItem.id,\n targetID: node.id,\n Id: Math.floor(Math.random() * 1000 + 100)\n };\n diagram.add(node);\n diagram.add(connector);\n diagram.doLayout();\n //Insert newly added eelements into the database.\n diagram.insertData();\n nodeData.push({ Name: node.id, Label: description });\n sourceDropdown.dataSource = getDataSource();\n sourceDropdown.dataBind();\n targetDropdown.dataSource = getDataSource();\n targetDropdown.dataBind();\n } else {\n if (selectedItem instanceof ej.diagrams.Connector) {\n //Update sourceNode and targetNode at runtime.\n selectedItem.sourceID = sourceID ? sourceID : selectedItem.sourceID;\n selectedItem.targetID = targetID ? targetID : selectedItem.targetID;\n diagram.dataBind();\n diagram.doLayout();\n } else {\n //Update an node text and node bgColor.\n selectedItem.Description = description;\n selectedItem.Color = color;\n selectedItem.annotations[0].content = description;\n selectedItem.style.fill = color;\n diagram.dataBind();\n }\n diagram.updateData();\n }\n dialog.hide();\n}\n\n//Set an sourceId of an selected Connector.\nfunction sourceDropdownChange(args) {\n sourceID = args.value;\n}\n\n//Set an targetId of an selected Connector.\nfunction targetDropdownChange(args) {\n targetID = args.value;\n}\n\n//Displays nodes name in dropdown.\nfunction sourceDropdownCreate(args) {\n sourceDropdown.dataSource = getDataSource();\n sourceDropdown.dataBind();\n}\n\n//Displays nodes name in dropdown.\nfunction targetDropdownCreate(args) {\n targetDropdown.dataSource = getDataSource();\n targetDropdown.dataBind();\n}\n\n//Disable or Enable the toolbar items based on element selection.\nfunction selectionChange(args) {\n if (args.state === \"Changing\") {\n if (args.newValue.length > 0) {\n if (args.newValue[0] instanceof ej.diagrams.Node) {\n enableToolbarItems(true);\n } else {\n toolbarObj.enableItems( document.getElementById(items[0].id).parentElement, false );\n toolbarObj.enableItems( document.getElementById(items[2].id).parentElement, true );\n toolbarObj.enableItems( document.getElementById(items[4].id).parentElement, false );\n }\n } else {\n enableToolbarItems(false);\n }\n }\n}\n\n//Enable or disable the toolbar items.\nfunction enableToolbarItems(isEnableItem) {\n toolbarObj.enableItems( document.getElementById(items[0].id).parentElement, isEnableItem );\n toolbarObj.enableItems( document.getElementById(items[2].id).parentElement, isEnableItem );\n toolbarObj.enableItems( document.getElementById(items[4].id).parentElement, isEnableItem );\n}\n\nfunction connectionChange(args) {\n if (args.state === \"Completed\") {\n if (!args.connector.targetID || !args.connector.sourceID) {\n args.cancel = true;\n }\n }\n}\n\n//Set an label for each node.\nfunction setNodeTemplate(obj) {\n obj.annotations = [{ style: { color: \"black\" } }];\n obj.annotations[0].content = obj.Description;\n obj.style = { fill: obj.Color };\n if (obj.Id === 1) {\n //Restrict Delete Constraints for root node.\n obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete;\n }\n}\n\n//Opens a dialog with textbox and dropdown control based on toolbar clicked items.\nfunction toolbarClick(args) {\n var selectedItem;\n if (diagram.selectedItems.nodes.length > 0) {\n selectedItem = diagram.selectedItems.nodes[0];\n }\n if (diagram.selectedItems.connectors.length > 0) {\n selectedItem = diagram.selectedItems.connectors[0];\n }\n if (selectedItem) {\n switch (args.item.tooltipText) {\n case \"Add\":\n openDialog(\"Add\", \"\", \"\", true);\n break;\n case \"Edit\":\n if (selectedItem instanceof ej.diagrams.Connector) {\n var sourceNode = diagram.getObject(selectedItem.sourceID);\n var targetNode = diagram.getObject(selectedItem.targetID);\n openDialog(\"Edit\", sourceNode.Description, targetNode.Description, false );\n } else {\n openDialog(\"Edit\", selectedItem.Description, selectedItem.Color, true );\n }\n break;\n case \"Delete\":\n diagram.remove(selectedItem);\n diagram.doLayout();\n //Delete an selected items from database.\n diagram.removeData();\n var element = { Name: selectedItem.id, Label: selectedItem.Description };\n var index = nodeData.indexOf(element);\n nodeData.splice(index, 1);\n sourceDropdown.dataSource = getDataSource();\n sourceDropdown.dataBind();\n targetDropdown.dataSource = getDataSource();\n targetDropdown.dataBind();\n }\n }\n}\n\n//Show or Hide the Textbox and Dropdown in dialog control.\nfunction hideClassElement(className, display) {\n var i;\n var showDropdown = document.querySelectorAll(className);\n for (i = 0; i < showDropdown.length; i++) {\n showDropdown[i].style.display = display;\n }\n}\n\n//open a dialog control on clicking the toolbar items.\nfunction openDialog(title, description, color, isNode) {\n dialog.header = title;\n if (isNode) {\n hideClassElement(\".showDropdown\", \"none\");\n hideClassElement(\".showLabel\", \"block\");\n document.getElementById(\"Description\").value = description;\n document.getElementById(\"Color\").value = color;\n } else {\n hideClassElement(\".showDropdown\", \"block\");\n hideClassElement(\".showLabel\", \"none\");\n document.getElementById(\"SourceId\").value = description;\n document.getElementById(\"TargetId\").value = color;\n }\n //Open a dialog.\n dialog.show();\n}\n\n//Returns an node text collection in diagram.\nfunction getDataSource() {\n var i;\n nodeData = [];\n for (i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n var element = { Name: node.id, Label: node.Description };\n nodeData.push(element);\n }\n return nodeData;\n}\n\n\n//Add icons in Toolbar.\nvar items = [\n {\n text: \"Add\",\n tooltipText: \"Add\",\n prefixIcon: \"e-ddb-icons e-add\",\n id: \"Add\"\n },\n {\n type: \"Separator\"\n },\n {\n text: \"Edit\",\n tooltipText: \"Edit\",\n prefixIcon: \"e-ddb-icons e-update\",\n id: \"Edit\"\n },\n {\n type: \"Separator\"\n },\n {\n text: \"Delete\",\n tooltipText: \"Delete\",\n prefixIcon: \"e-ddb-icons e-delete\",\n id: \"Delete\"\n }\n];\n\n\n diagram = new ej.diagrams.Diagram({\n width: \"100%\",\n height: 600,\n dataSourceSettings: {\n id: 'Name',\n //Define URL to perform CRUD operations with nodes records in database.\n crudAction: {\n read: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/GetNodes',\n create: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/AddNodes',\n update: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateNodes',\n destroy: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteNodes',\n customFields: ['Id', 'Description', 'Color'],\n },\n connectionDataSource: {\n id: 'Name',\n sourceID: 'SourceNode',\n targetID: 'TargetNode',\n //Define URL to perform CRUD operations with connector records in database.\n crudAction: {\n read: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/GetConnectors',\n create: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/AddConnectors',\n update: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateConnectors',\n destroy: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteConnectors',\n customFields: ['Id'],\n }\n }\n },\n layout: { type: \"HierarchicalTree\", verticalSpacing: 40 },\n snapSettings: { constraints: 0 },\n //Set node default properties.\n getNodeDefaults: function (obj, diagram) {\n obj.width = 100;\n obj.height = 50;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1, strokeColor: '#DDDDDD' };\n return obj;\n },\n //Set connector default properties.\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Orthogonal';\n connector.style.fill = '#707070';\n connector.style.strokeColor = '#707070';\n connector.targetDecorator = {\n style: {\n strokeColor: '#707070',\n fill: '#707070'\n },\n };\n return connector;\n },\n selectionChange: selectionChange,\n sourcePointChange: connectionChange,\n targetPointChange: connectionChange,\n setNodeTemplate: setNodeTemplate\n });\n diagram.appendTo(\"#diagram\");\n\n //Initialize ToolBar control.\n toolbarObj = new ej.navigations.Toolbar({\n clicked: toolbarClick,\n items: items\n });\n toolbarObj.appendTo(\"#toolbar\");\n enableToolbarItems(false);\n\n //Initialize dialog control.\n dialog = new ej.popups.Dialog({\n width: \"300px\",\n visible: false,\n isModal: true,\n showCloseIcon: true,\n buttons: [\n {\n click: dlgButtonClick,\n buttonModel: { content: \"Update\", isPrimary: true }\n }\n ]\n });\n dialog.appendTo(\"#editDialog\");\n\n //Initialize textbox control.\n var inputobj1 = new ej.inputs.TextBox({\n floatLabelType: \"Always\",\n placeholder: \"Description\"\n });\n inputobj1.appendTo(\"#Description\");\n\n //Initialize textbox control.\n var inputobj2 = new ej.inputs.TextBox({\n floatLabelType: \"Always\",\n placeholder: \"Color\"\n });\n inputobj2.appendTo(\"#Color\");\n\n //Initialize button control to update the node label and node color.\n var button = new ej.buttons.Button();\n button.appendTo(\"#btnUpdate\");\n\n //Initialize dropdownlist control to display an sourceNodes in diagram.\n sourceDropdown = new ej.dropdowns.DropDownList({\n fields: { text: \"Label\", value: \"Name\" },\n change: sourceDropdownChange,\n created: sourceDropdownCreate\n });\n sourceDropdown.appendTo(\"#SourceId\");\n\n //Initialize dropdownlist control to display an targetNodes in diagram.\n targetDropdown = new ej.dropdowns.DropDownList({\n fields: { text: \"Label\", value: \"Name\" },\n change: targetDropdownChange,\n created: targetDropdownCreate\n });\n targetDropdown.appendTo(\"#TargetId\");\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * CRUD sample\n */\nej.diagrams.Diagram.Inject(\n ej.diagrams.DataBinding,\n ej.diagrams.HierarchicalTree\n);\nvar diagram;\nvar dialog;\nvar toolbarObj;\nvar sourceDropdown;\nvar targetDropdown;\nvar sourceID;\nvar targetID;\nvar nodeData = [];\n\n//Disable or Enable the toolbar items based on element selection.\nfunction selectionChange(args) {\n if (args.state === \"Changing\") {\n if (args.newValue.length > 0) {\n if (args.newValue[0] instanceof ej.diagrams.Node) {\n enableToolbarItems(true);\n } else {\n toolbarObj.enableItems( document.getElementById(items[0].id).parentElement, false );\n toolbarObj.enableItems( document.getElementById(items[2].id).parentElement, true );\n toolbarObj.enableItems( document.getElementById(items[4].id).parentElement, false );\n }\n } else {\n enableToolbarItems(false);\n }\n }\n}\n\nfunction connectionChange(args) {\n if (args.state === \"Completed\") {\n if (!args.connector.targetID || !args.connector.sourceID) {\n args.cancel = true;\n }\n }\n}\n\n//Set an label for each node.\nfunction setNodeTemplate(obj) {\n obj.annotations = [{ style: { color: \"black\" } }];\n obj.annotations[0].content = obj.Description;\n obj.style = { fill: obj.Color };\n if (obj.Id === 1) {\n //Restrict Delete Constraints for root node.\n obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete;\n }\n}\n\n//Returns an node text collection in diagram.\nfunction getDataSource() {\n var i;\n nodeData = [];\n for (i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n var element = { Name: node.id, Label: node.Description };\n nodeData.push(element);\n }\n return nodeData;\n}\n\n\n//Add icons in Toolbar.\nvar items = [\n {\n text: \"Add\",\n tooltipText: \"Add\",\n prefixIcon: \"e-ddb-icons e-add\",\n id: \"Add\"\n },\n {\n type: \"Separator\"\n },\n {\n text: \"Edit\",\n tooltipText: \"Edit\",\n prefixIcon: \"e-ddb-icons e-update\",\n id: \"Edit\"\n },\n {\n type: \"Separator\"\n },\n {\n text: \"Delete\",\n tooltipText: \"Delete\",\n prefixIcon: \"e-ddb-icons e-delete\",\n id: \"Delete\"\n }\n];\n\n\n diagram = new ej.diagrams.Diagram({\n width: \"100%\",\n height: 600,\n dataSourceSettings: {\n id: 'Name',\n //Define URL to perform CRUD operations with nodes records in database.\n crudAction: {\n read: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/GetNodes',\n create: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/AddNodes',\n update: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateNodes',\n destroy: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteNodes',\n customFields: ['Id', 'Description', 'Color'],\n },\n connectionDataSource: {\n id: 'Name',\n sourceID: 'SourceNode',\n targetID: 'TargetNode',\n //Define URL to perform CRUD operations with connector records in database.\n crudAction: {\n read: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/GetConnectors',\n create: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/AddConnectors',\n update: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateConnectors',\n destroy: 'https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteConnectors',\n customFields: ['Id'],\n }\n }\n },\n layout: { type: \"HierarchicalTree\", verticalSpacing: 40 },\n snapSettings: { constraints: 0 },\n //Set node default properties.\n getNodeDefaults: function (obj, diagram) {\n obj.width = 100;\n obj.height = 50;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1, strokeColor: '#DDDDDD' };\n return obj;\n },\n //Set connector default properties.\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Orthogonal';\n connector.style.fill = '#707070';\n connector.style.strokeColor = '#707070';\n connector.targetDecorator = {\n style: {\n strokeColor: '#707070',\n fill: '#707070'\n },\n };\n return connector;\n },\n selectionChange: selectionChange,\n sourcePointChange: connectionChange,\n targetPointChange: connectionChange,\n setNodeTemplate: setNodeTemplate\n });\n diagram.appendTo(\"#diagram\");\n\n //Initialize ToolBar control.\n toolbarObj = new ej.navigations.Toolbar({\n clicked: toolbarClick,\n items: items\n });\n toolbarObj.appendTo(\"#toolbar\");\n enableToolbarItems(false);\n\n //Initialize dialog control.\n dialog = new ej.popups.Dialog({\n width: \"300px\",\n visible: false,\n isModal: true,\n showCloseIcon: true,\n buttons: [\n {\n click: dlgButtonClick,\n buttonModel: { content: \"Update\", isPrimary: true }\n }\n ]\n });\n dialog.appendTo(\"#editDialog\");\n\n //Initialize textbox control.\n var inputobj1 = new ej.inputs.TextBox({\n floatLabelType: \"Always\",\n placeholder: \"Description\"\n });\n inputobj1.appendTo(\"#Description\");\n\n //Initialize textbox control.\n var inputobj2 = new ej.inputs.TextBox({\n floatLabelType: \"Always\",\n placeholder: \"Color\"\n });\n inputobj2.appendTo(\"#Color\");\n\n //Initialize button control to update the node label and node color.\n var button = new ej.buttons.Button();\n button.appendTo(\"#btnUpdate\");\n\n //Initialize dropdownlist control to display an sourceNodes in diagram.\n sourceDropdown = new ej.dropdowns.DropDownList({\n fields: { text: \"Label\", value: \"Name\" },\n change: sourceDropdownChange,\n created: sourceDropdownCreate\n });\n sourceDropdown.appendTo(\"#SourceId\");\n\n //Initialize dropdownlist control to display an targetNodes in diagram.\n targetDropdown = new ej.dropdowns.DropDownList({\n fields: { text: \"Label\", value: \"Name\" },\n change: targetDropdownChange,\n created: targetDropdownCreate\n });\n targetDropdown.appendTo(\"#TargetId\");\n\n\n"} \ No newline at end of file diff --git a/src/diagram/crud.js b/src/diagram/crud.js index 7b2a2b78..03102897 100644 --- a/src/diagram/crud.js +++ b/src/diagram/crud.js @@ -13,7 +13,7 @@ var targetDropdown; var sourceID; var targetID; var nodeData = []; - +// custom code start function dlgButtonClick(args) { var dialogHeader = dialog.header; var description = document.getElementById("Description").value; @@ -91,7 +91,7 @@ function targetDropdownCreate(args) { targetDropdown.dataSource = getDataSource(); targetDropdown.dataBind(); } - +// custom code end //Disable or Enable the toolbar items based on element selection. function selectionChange(args) { if (args.state === "Changing") { @@ -108,14 +108,14 @@ function selectionChange(args) { } } } - +// custom code start //Enable or disable the toolbar items. function enableToolbarItems(isEnableItem) { toolbarObj.enableItems( document.getElementById(items[0].id).parentElement, isEnableItem ); toolbarObj.enableItems( document.getElementById(items[2].id).parentElement, isEnableItem ); toolbarObj.enableItems( document.getElementById(items[4].id).parentElement, isEnableItem ); } - +// custom code end function connectionChange(args) { if (args.state === "Completed") { if (!args.connector.targetID || !args.connector.sourceID) { @@ -134,7 +134,7 @@ function setNodeTemplate(obj) { obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete; } } - +// custom code start //Opens a dialog with textbox and dropdown control based on toolbar clicked items. function toolbarClick(args) { var selectedItem; @@ -200,7 +200,7 @@ function openDialog(title, description, color, isNode) { //Open a dialog. dialog.show(); } - +// custom code end //Returns an node text collection in diagram. function getDataSource() { var i; diff --git a/src/diagram/custom-shapes-stack.json b/src/diagram/custom-shapes-stack.json index ab37d674..c5f6133f 100644 --- a/src/diagram/custom-shapes-stack.json +++ b/src/diagram/custom-shapes-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Getting started - Html Node\n */\n\n//Add Gauge control to Diagram.\nfunction getHtmlContent() {\n var div = document.getElementById('gauge');\n var circularGauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, offset: 5, color: '#9E9E9E' }, minorTicks: { height: 0 },\n annotations: [{\n content: '
        Speedometer
        ',\n radius: '30%', angle: 0, zIndex: '1'\n }, {\n content: '
        65 MPH
        ',\n radius: '40%', angle: 180, zIndex: '1'\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', color: '#757575', pointerWidth: 8,\n cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }\n }]\n }]\n });\n circularGauge.appendTo('#gauge');\n return div;\n}\n// tslint:disable-next-line:max-func-body-length\n\n var htmlcontent = '
        ';\n var shape = { type: 'HTML', content: htmlcontent };\n var node1 = {\n id: 'node', offsetX: 450, offsetY: 200, width: 300, height: 300, shape: shape\n };\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '640px', nodes: [node1], snapSettings: { constraints: 0 },\n created: function() { diagram.fitToPage(); }\n });\n diagram.appendTo('#diagram');\n getHtmlContent();\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Getting started - Html Node\n */\n\n//Add Gauge control to Diagram.\nfunction getHtmlContent() {\n var div = document.getElementById('gauge');\n var circularGauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, offset: 5, color: '#9E9E9E' }, minorTicks: { height: 0 },\n annotations: [{\n content: '
        Speedometer
        ',\n radius: '30%', angle: 0, zIndex: '1'\n }, {\n content: '
        65 MPH
        ',\n radius: '40%', angle: 180, zIndex: '1'\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', color: '#757575', pointerWidth: 8,\n cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }\n }]\n }]\n });\n circularGauge.appendTo('#gauge');\n return div;\n}\n// tslint:disable-next-line:max-func-body-length\n\n var htmlcontent = '
        ';\n var shape = { type: 'HTML', content: htmlcontent };\n var node1 = {\n id: 'node', offsetX: 450, offsetY: 200, width: 300, height: 300, shape: shape\n };\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '640px', nodes: [node1], snapSettings: { constraints: 0 },\n created: function() { diagram.fitToPage(); }\n });\n diagram.appendTo('#diagram');\n getHtmlContent();\n\n"} \ No newline at end of file diff --git a/src/diagram/default-functionalities-stack.json b/src/diagram/default-functionalities-stack.json index 323f845a..42f8d11c 100644 --- a/src/diagram/default-functionalities-stack.json +++ b/src/diagram/default-functionalities-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Default FlowShape sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\n//Create and add ports for node.\nfunction getNodePorts(obj) {\n var ports = [\n { id: 'nport1', shape: 'Circle', offset: { x: 0, y: 0.5 } },\n { id: 'nport2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'nport3', shape: 'Circle', offset: { x: 1, y: 0.5 } },\n { id: 'nport4', shape: 'Circle', offset: { x: 0.5, y: 0 } }\n ];\n return ports;\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var pIcon = document.getElementById('palette-icon');\n if (pIcon) {\n pIcon.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var pSpace = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!pSpace.classList.contains('sb-mobile-palette-open')) {\n pSpace.classList.add('sb-mobile-palette-open');\n }\n else {\n pSpace.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n\n var bounds = document.getElementById('diagram-space').getBoundingClientRect();\n var centerX = bounds.width / 2;\n //Initializes the nodes for the diagram\n var nodes = [{\n id: 'NewIdea', height: 60, offsetX: centerX - 50, offsetY: 80,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Place Order'\n }]\n }, {\n id: 'Meeting', height: 60, offsetX: centerX - 50, offsetY: 160,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Start Transaction'\n }]\n }, {\n id: 'BoardDecision', height: 60, offsetX: centerX - 50, offsetY: 240,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Verification'\n }]\n }, {\n id: 'Project', height: 60, offsetX: centerX - 50, offsetY: 330,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Credit card valid?'\n }]\n }, {\n id: 'End', height: 60, offsetX: centerX - 50, offsetY: 430,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Funds available?'\n }]\n }, {\n id: 'node11', height: 60, offsetX: (centerX - 50) + 230, offsetY: 330,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Enter payment method'\n }]\n }, {\n id: 'transaction_entered', height: 60, offsetX: (centerX - 50), offsetY: 630,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Log transaction'\n }]\n }, {\n id: 'node12', height: 60, offsetX: (centerX - 50) + 180, offsetY: 630,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Reconcile the entries'\n }]\n }, {\n id: 'transaction_completed', height: 60, offsetX: (centerX - 50), offsetY: 530,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Complete Transaction'\n }]\n }, {\n id: 'data', height: 45, offsetX: (centerX - 50) - 190, offsetY: 530,\n shape: { type: 'Flow', shape: 'Data' },\n annotations: [{\n content: 'Send e-mail', margin: { left: 25, right: 25 }\n }]\n }, {\n id: 'node10', height: 70, offsetX: (centerX - 50) + 175, offsetY: 530,\n shape: { type: 'Flow', shape: 'DirectData' },\n annotations: [{ content: 'Customer Database', margin: { left: 25, right: 25 } }]\n }];\n //Initializes the Connectors for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'NewIdea', targetID: 'Meeting'\n },\n { id: 'connector2', sourceID: 'Meeting', targetID: 'BoardDecision' },\n { id: 'connector3', sourceID: 'BoardDecision', targetID: 'Project' },\n {\n id: 'connector4', sourceID: 'Project',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }], targetID: 'End'\n },\n {\n id: 'connector5', sourceID: 'End',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }], targetID: 'transaction_completed'\n },\n { id: 'connector6', sourceID: 'transaction_completed', targetID: 'transaction_entered' },\n { id: 'connector7', sourceID: 'transaction_completed', targetID: 'data' },\n { id: 'connector8', sourceID: 'transaction_completed', targetID: 'node10' },\n {\n id: 'connector9', sourceID: 'node11', targetID: 'Meeting',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 120 }]\n },\n {\n id: 'connector10', sourceID: 'End', annotations: [{ content: 'No', style: { fill: 'white' } }],\n targetID: 'node11', segments: [{ direction: 'Right', type: 'Orthogonal', length: 100 }]\n },\n {\n id: 'connector11', sourceID: 'Project', annotations: [{ content: 'No', style: { fill: 'white' } }],\n targetID: 'node11'\n },\n {\n id: 'connector12', style: { strokeDashArray: '2,2' },\n sourceID: 'transaction_entered', targetID: 'node12'\n }\n ];\n var interval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: interval };\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '700px', nodes: nodes, connectors: connectors,\n snapSettings: { horizontalGridlines: gridlines, verticalGridlines: gridlines },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {};\n if (obj.width === undefined) {\n obj.width = 145;\n } else {\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n }\n obj.style = { fill: '#357BD2', strokeColor: 'white' };\n obj.annotations = [{ style: { color: 'white', fill: 'transparent' } }];\n obj.ports = getNodePorts(node);\n return obj;\n },\n //Sets the default values of a Connector.\n getConnectorDefaults: function (obj) {\n if (obj.id.indexOf('connector') !== -1) {\n obj.type = 'Orthogonal';\n obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };\n }\n },\n //Sets the Node style for DragEnter element.\n dragEnter: function (args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n var oWidth = obj.width;\n var oHeight = obj.height;\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n obj.offsetX += (obj.width - oWidth) / 2;\n obj.offsetY += (obj.height - oHeight) / 2;\n obj.style = { fill: '#357BD2', strokeColor: 'white' };\n }\n }\n });\n diagram.appendTo('#diagram');\n //Initialize the flowshapes for the symbol palatte\n var shapes = [\n { id: 'terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'decision', shape: { type: 'Flow', shape: 'Decision' } },\n { id: 'document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'preDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'paperTap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'directData', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'sequentialData', shape: { type: 'Flow', shape: 'SequentialData' } },\n { id: 'sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'multiDocument', shape: { type: 'Flow', shape: 'MultiDocument' } },\n { id: 'collate', shape: { type: 'Flow', shape: 'Collate' } },\n { id: 'summingJunction', shape: { type: 'Flow', shape: 'SummingJunction' } },\n { id: 'or', shape: { type: 'Flow', shape: 'Or' } },\n { id: 'internalStorage', shape: { type: 'Flow', shape: 'InternalStorage' } },\n { id: 'extract', shape: { type: 'Flow', shape: 'Extract' } },\n { id: 'manualOperation', shape: { type: 'Flow', shape: 'ManualOperation' } },\n { id: 'merge', shape: { type: 'Flow', shape: 'Merge' } },\n { id: 'offPageReference', shape: { type: 'Flow', shape: 'OffPageReference' } },\n { id: 'sequentialAccessStorage', shape: { type: 'Flow', shape: 'SequentialAccessStorage' } },\n { id: 'annotation', shape: { type: 'Flow', shape: 'Annotation' } },\n { id: 'annotation2', shape: { type: 'Flow', shape: 'Annotation2' } },\n { id: 'data', shape: { type: 'Flow', shape: 'Data' } },\n { id: 'card', shape: { type: 'Flow', shape: 'Card' } },\n { id: 'delay', shape: { type: 'Flow', shape: 'Delay' } },\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: shapes, iconCss: 'e-ddb-icons e-flow', title: 'Flow Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' }\n ],\n width: '100%', height: '700px', symbolHeight: 60, symbolWidth: 60,\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'terminator' || symbol.id === 'process') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'decision' || symbol.id === 'document' || symbol.id === 'preDefinedProcess' ||\n symbol.id === 'paperTap' || symbol.id === 'directData' || symbol.id === 'multiDocument' || symbol.id === 'data') {\n symbol.width = 50;\n symbol.height = 40;\n }\n else {\n symbol.width = 50;\n symbol.height = 50;\n }\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n }\n });\n palette.appendTo('#symbolpalette');\n addEvents();\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Default FlowShape sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\n//Create and add ports for node.\nfunction getNodePorts(obj) {\n var ports = [\n { id: 'nport1', shape: 'Circle', offset: { x: 0, y: 0.5 } },\n { id: 'nport2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'nport3', shape: 'Circle', offset: { x: 1, y: 0.5 } },\n { id: 'nport4', shape: 'Circle', offset: { x: 0.5, y: 0 } }\n ];\n return ports;\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var pIcon = document.getElementById('palette-icon');\n if (pIcon) {\n pIcon.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var pSpace = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!pSpace.classList.contains('sb-mobile-palette-open')) {\n pSpace.classList.add('sb-mobile-palette-open');\n }\n else {\n pSpace.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n\n var bounds = document.getElementById('diagram-space').getBoundingClientRect();\n var centerX = bounds.width / 2;\n //Initializes the nodes for the diagram\n var nodes = [{\n id: 'NewIdea', height: 60, offsetX: centerX - 50, offsetY: 80,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Place Order'\n }]\n }, {\n id: 'Meeting', height: 60, offsetX: centerX - 50, offsetY: 160,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Start Transaction'\n }]\n }, {\n id: 'BoardDecision', height: 60, offsetX: centerX - 50, offsetY: 240,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Verification'\n }]\n }, {\n id: 'Project', height: 60, offsetX: centerX - 50, offsetY: 330,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Credit card valid?'\n }]\n }, {\n id: 'End', height: 60, offsetX: centerX - 50, offsetY: 430,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Funds available?'\n }]\n }, {\n id: 'node11', height: 60, offsetX: (centerX - 50) + 230, offsetY: 330,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Enter payment method'\n }]\n }, {\n id: 'transaction_entered', height: 60, offsetX: (centerX - 50), offsetY: 630,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Log transaction'\n }]\n }, {\n id: 'node12', height: 60, offsetX: (centerX - 50) + 180, offsetY: 630,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Reconcile the entries'\n }]\n }, {\n id: 'transaction_completed', height: 60, offsetX: (centerX - 50), offsetY: 530,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Complete Transaction'\n }]\n }, {\n id: 'data', height: 45, offsetX: (centerX - 50) - 190, offsetY: 530,\n shape: { type: 'Flow', shape: 'Data' },\n annotations: [{\n content: 'Send e-mail', margin: { left: 25, right: 25 }\n }]\n }, {\n id: 'node10', height: 70, offsetX: (centerX - 50) + 175, offsetY: 530,\n shape: { type: 'Flow', shape: 'DirectData' },\n annotations: [{ content: 'Customer Database', margin: { left: 25, right: 25 } }]\n }];\n //Initializes the Connectors for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'NewIdea', targetID: 'Meeting'\n },\n { id: 'connector2', sourceID: 'Meeting', targetID: 'BoardDecision' },\n { id: 'connector3', sourceID: 'BoardDecision', targetID: 'Project' },\n {\n id: 'connector4', sourceID: 'Project',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }], targetID: 'End'\n },\n {\n id: 'connector5', sourceID: 'End',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }], targetID: 'transaction_completed'\n },\n { id: 'connector6', sourceID: 'transaction_completed', targetID: 'transaction_entered' },\n { id: 'connector7', sourceID: 'transaction_completed', targetID: 'data' },\n { id: 'connector8', sourceID: 'transaction_completed', targetID: 'node10' },\n {\n id: 'connector9', sourceID: 'node11', targetID: 'Meeting',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 120 }]\n },\n {\n id: 'connector10', sourceID: 'End', annotations: [{ content: 'No', style: { fill: 'white' } }],\n targetID: 'node11', segments: [{ direction: 'Right', type: 'Orthogonal', length: 100 }]\n },\n {\n id: 'connector11', sourceID: 'Project', annotations: [{ content: 'No', style: { fill: 'white' } }],\n targetID: 'node11'\n },\n {\n id: 'connector12', style: { strokeDashArray: '2,2' },\n sourceID: 'transaction_entered', targetID: 'node12'\n }\n ];\n var interval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: interval };\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '700px', nodes: nodes, connectors: connectors,\n snapSettings: { horizontalGridlines: gridlines, verticalGridlines: gridlines },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {};\n if (obj.width === undefined) {\n obj.width = 145;\n } else {\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n }\n obj.style = { fill: '#357BD2', strokeColor: 'white' };\n obj.annotations = [{ style: { color: 'white', fill: 'transparent' } }];\n obj.ports = getNodePorts(node);\n return obj;\n },\n //Sets the default values of a Connector.\n getConnectorDefaults: function (obj) {\n if (obj.id.indexOf('connector') !== -1) {\n obj.type = 'Orthogonal';\n obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };\n }\n },\n //Sets the Node style for DragEnter element.\n dragEnter: function (args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n var oWidth = obj.width;\n var oHeight = obj.height;\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n obj.offsetX += (obj.width - oWidth) / 2;\n obj.offsetY += (obj.height - oHeight) / 2;\n obj.style = { fill: '#357BD2', strokeColor: 'white' };\n }\n }\n });\n diagram.appendTo('#diagram');\n //Initialize the flowshapes for the symbol palatte\n var shapes = [\n { id: 'terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'decision', shape: { type: 'Flow', shape: 'Decision' } },\n { id: 'document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'preDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'paperTap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'directData', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'sequentialData', shape: { type: 'Flow', shape: 'SequentialData' } },\n { id: 'sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'multiDocument', shape: { type: 'Flow', shape: 'MultiDocument' } },\n { id: 'collate', shape: { type: 'Flow', shape: 'Collate' } },\n { id: 'summingJunction', shape: { type: 'Flow', shape: 'SummingJunction' } },\n { id: 'or', shape: { type: 'Flow', shape: 'Or' } },\n { id: 'internalStorage', shape: { type: 'Flow', shape: 'InternalStorage' } },\n { id: 'extract', shape: { type: 'Flow', shape: 'Extract' } },\n { id: 'manualOperation', shape: { type: 'Flow', shape: 'ManualOperation' } },\n { id: 'merge', shape: { type: 'Flow', shape: 'Merge' } },\n { id: 'offPageReference', shape: { type: 'Flow', shape: 'OffPageReference' } },\n { id: 'sequentialAccessStorage', shape: { type: 'Flow', shape: 'SequentialAccessStorage' } },\n { id: 'annotation', shape: { type: 'Flow', shape: 'Annotation' } },\n { id: 'annotation2', shape: { type: 'Flow', shape: 'Annotation2' } },\n { id: 'data', shape: { type: 'Flow', shape: 'Data' } },\n { id: 'card', shape: { type: 'Flow', shape: 'Card' } },\n { id: 'delay', shape: { type: 'Flow', shape: 'Delay' } },\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: shapes, iconCss: 'e-ddb-icons e-flow', title: 'Flow Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' }\n ],\n width: '100%', height: '700px', symbolHeight: 60, symbolWidth: 60,\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'terminator' || symbol.id === 'process') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'decision' || symbol.id === 'document' || symbol.id === 'preDefinedProcess' ||\n symbol.id === 'paperTap' || symbol.id === 'directData' || symbol.id === 'multiDocument' || symbol.id === 'data') {\n symbol.width = 50;\n symbol.height = 40;\n }\n else {\n symbol.width = 50;\n symbol.height = 50;\n }\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n }\n });\n palette.appendTo('#symbolpalette');\n addEvents();\n\n\n"} \ No newline at end of file diff --git a/src/diagram/default-functionalities.html b/src/diagram/default-functionalities.html index 7b98d38d..bfcb6c96 100644 --- a/src/diagram/default-functionalities.html +++ b/src/diagram/default-functionalities.html @@ -48,7 +48,7 @@

        - This sample visualizes the processing of an order placed using credit card payment and payment validation with the help of built-in flow shapes. + This sample visualizes the processing of an order placed using credit card with built-in flow shapes.

        diff --git a/src/diagram/diagram-events-stack.json b/src/diagram/diagram-events-stack.json new file mode 100644 index 00000000..8da16da5 --- /dev/null +++ b/src/diagram/diagram-events-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        Client-side events
        \n
        \n
        \n
        \n
        \n Event Trace\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu, ej.diagrams.Snapping);\n\nfunction getSymbolDefaults(symbol) {\n symbol.width = 50;\n symbol.height = 50;\n symbol.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop;\n}\n\nfunction getSymbolInfo(symbol) {\n return { fit: true };\n}\n\nfunction dragEnter(args) {\n getEventDetails(args);\n}\n\nfunction dragLeave(args) {\n getEventDetails(args);\n}\n\nfunction dragOver(args) {\n if (args.target) {\n getEventDetails(args);\n }\n}\n\nfunction click(args) {\n getEventDetails(args);\n}\n\nfunction historyChange(args) {\n getEventDetails(args);\n}\n\nfunction doubleClick(args) {\n getEventDetails(args);\n}\n\nfunction textEdit(args) {\n getEventDetails(args);\n}\n\nfunction scrollChange(args) {\n getEventDetails(args);\n}\n\nfunction selectionChange(args) {\n getEventDetails(args);\n}\n\nfunction sizeChange(args) {\n if (args.state === 'Completed') {\n getEventDetails(args);\n }\n}\n\nfunction connectionChange(args) {\n if (args.state === 'Changed') {\n getEventDetails(args);\n }\n}\n\nfunction sourcePointChange(args) {\n if (args.state === 'Completed') {\n getEventDetails(args);\n }\n}\n\nfunction targetPointChange(args) {\n if (args.state === 'Completed') {\n getEventDetails(args);\n }\n}\n\nfunction propertyChange(args) {\n getEventDetails(args);\n}\n\nfunction positionChange(args) {\n if (args.state === 'Completed') {\n getEventDetails(args);\n }\n}\n\nfunction rotateChange(args) {\n if (args.state === 'Completed') {\n getEventDetails(args);\n }\n}\n\nfunction collectionChange(args) {\n getEventDetails(args);\n}\n\nfunction mouseEnter(args) {\n getEventDetails(args);\n}\n\nfunction mouseLeave(args) {\n getEventDetails(args);\n}\n\nfunction mouseOver(args) {\n getEventDetails(args);\n}\n\nfunction contextMenuOpen(args) {\n getEventDetails(args);\n}\n\nfunction contextMenuBeforeItemRender(args) {\n getEventDetails(args);\n}\n\nfunction contextMenuClick(args) {\n getEventDetails(args);\n}\n\n// tslint:disable-next-line:max-func-body-length\n\n\n var data = [\n { text: 'Drag enter', id: 'dragEnter' },\n { text: 'Drag leave', id: 'dragLeave' },\n { text: 'Drag over', id: 'dragOver' },\n { text: 'Click', id: 'click', isChecked: true },\n { text: 'History change', id: 'historyChange', isChecked: true },\n { text: 'Double click', id: 'doubleClick' },\n { text: 'Text edit', id: 'textEdit', isChecked: true },\n { text: 'Scroll change', id: 'scrollChange' },\n { text: 'Selection change', id: 'selectionChange', isChecked: true },\n { text: 'Size change', id: 'sizeChange', isChecked: true },\n { text: 'Connection change', id: 'connectionChange', isChecked: true },\n { text: 'SourcePoint change', id: 'sourcePointChange' },\n { text: 'TargetPoint change', id: 'targetPointChange' },\n { text: 'Position change', id: 'positionChange', isChecked: true },\n { text: 'Rotate change', id: 'rotateChange', isChecked: true },\n { text: 'Collection change', id: 'collectionChange', isChecked: true },\n { text: 'Mouse enter', id: 'mouseEnter' },\n { text: 'Mouse leave', id: 'mouseLeave' },\n { text: 'Mouse over', id: 'mouseOver' },\n { text: 'Context menu open', id: 'contextMenuOpen' },\n { text: 'Context menu before item render', id: 'contextMenuBeforeItemRender' },\n { text: 'Context menu click', id: 'contextMenuClick' }\n ];\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n //Set defined data to dataSource property\n dataSource: data,\n height: \"calc(100% - 40px)\",\n //Enables checkbox\n showCheckBox: true\n });\n\n //Render initialized ListView component\n listObj.appendTo('#listview-def');\n\n //Render initialized button component\n var button = new ej.buttons.Button();\n button.appendTo('#clearbtn');\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '700px',\n contextMenuSettings: { show: true },\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dragEnter: dragEnter,\n dragLeave: dragLeave,\n dragOver: dragOver,\n click: click,\n historyChange: historyChange,\n doubleClick: doubleClick,\n textEdit: textEdit,\n scrollChange: scrollChange,\n selectionChange: selectionChange,\n sizeChange: sizeChange,\n connectionChange: connectionChange,\n sourcePointChange: sourcePointChange,\n targetPointChange: targetPointChange,\n propertyChange: propertyChange,\n positionChange: positionChange,\n rotateChange: rotateChange,\n collectionChange: collectionChange,\n mouseEnter: mouseEnter,\n mouseLeave: mouseLeave,\n mouseOver: mouseOver,\n contextMenuOpen: contextMenuOpen,\n contextMenuBeforeItemRender: contextMenuBeforeItemRender,\n contextMenuClick: contextMenuClick\n });\n diagram.appendTo('#diagram');\n clearEventLog();\n\n //Initialize the basicshapes for the symbol palatte\n var basicShapes = [\n { id: 'RectangleNode', shape: { type: 'Basic', shape: 'Rectangle' } },\n { id: 'EllipseNode', shape: { type: 'Basic', shape: 'Ellipse' } },\n { id: 'ParallelogramNode', shape: { type: 'Basic', shape: 'Parallelogram' } },\n { id: 'TriangleNode', shape: { type: 'Basic', shape: 'Triangle' } },\n { id: 'HexagonNode', shape: { type: 'Basic', shape: 'Hexagon' } },\n { id: 'PentagonNode', shape: { type: 'Basic', shape: 'Pentagon' } },\n { id: 'CylinderNode', shape: { type: 'Basic', shape: 'Cylinder' } },\n { id: 'PlusNode', shape: { type: 'Basic', shape: 'Plus' } },\n { id: 'HeptagonNode', shape: { type: 'Basic', shape: 'Heptagon' } },\n { id: 'OctagonNode', shape: { type: 'Basic', shape: 'Octagon' } },\n { id: 'TrapezoidNode', shape: { type: 'Basic', shape: 'Trapezoid' } },\n { id: 'DecagonNode', shape: { type: 'Basic', shape: 'Decagon' } },\n { id: 'RightTriangleNode', shape: { type: 'Basic', shape: 'RightTriangle' } },\n { id: 'DiamondNode', shape: { type: 'Basic', shape: 'Diamond' } },\n { id: 'StarNode', shape: { type: 'Basic', shape: 'Star' } }\n ];\n\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'connector1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'connector3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'connector4', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'connector5', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }\n },\n ];\n\n var palettes = [\n { id: 'basic', expanded: true, symbols: basicShapes, iconCss: 'e-ddb-icons e-basic', title: 'Basic Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' }\n ];\n\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple', palettes: palettes,\n width: '100%', height: '700px', symbolHeight: 60, symbolWidth: 60,\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n getNodeDefaults: getSymbolDefaults, getSymbolInfo: getSymbolInfo\n });\n palette.appendTo('#symbolpalette');\n\n document.getElementById('clearbtn').onclick = function (args) {\n var data = document.getElementById(\"EventLog\");\n for (var i = data.childNodes.length - 1; i >= 0; i--) {\n data.removeChild(data.childNodes[i]);\n }\n };\n\n\nfunction getEventDetails(args) {\n var listView = document.getElementById(\"listview-def\");\n var listViewComponent = listView.ej2_instances[0];\n var selectedItems = listViewComponent.getSelectedItems();\n if (selectedItems.data.length > 0) {\n var elementName = getName(selectedItems, args);\n if (elementName) {\n eventInformation(args);\n }\n } else {\n eventInformation(args);\n }\n}\n\nfunction getName(selectedItems, args) {\n for (var i = 0; i < selectedItems.data.length; i++) {\n var eventName = selectedItems.data[i].id;\n if (eventName === args.name) {\n return true;\n }\n }\n return false;\n}\n\nfunction clearEventLog() {\n var data = document.getElementById('EventLog');\n data.innerHTML = '';\n}\n\nfunction eventInformation(args) {\n var span = document.createElement('span');\n span.innerHTML = 'Diagram ' + args.name.bold() + ' event called' + '
        ';\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n}\n\n"} \ No newline at end of file diff --git a/src/diagram/diagram-events.html b/src/diagram/diagram-events.html new file mode 100644 index 00000000..f38f7559 --- /dev/null +++ b/src/diagram/diagram-events.html @@ -0,0 +1,181 @@ +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        Client-side events
        +
        +
        +
        +
        + Event arguments +
        +
        +
        +
        +
        +
        +
        +
        +

        + This sample visualize what are the client side events are available in the diagram. +

        +
        +
        +

        + Diagram events are the actions that can be detected by JavaScript and the event argument are the information + about the event that has occurred. Some time we want to execute some JavaScript when and event occurs, such as when the + user clicks on the node. We can achieve this scenario using click event of the diagram. So, in this shows + how to hook all the diagram events and how to handle its arguments. +

        +
        + \ No newline at end of file diff --git a/src/diagram/diagram-events.js b/src/diagram/diagram-events.js new file mode 100644 index 00000000..ec60ab54 --- /dev/null +++ b/src/diagram/diagram-events.js @@ -0,0 +1,295 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu, ej.diagrams.Snapping); + +function getSymbolDefaults(symbol) { + symbol.width = 50; + symbol.height = 50; + symbol.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop; +} + +function getSymbolInfo(symbol) { + return { fit: true }; +} + +function dragEnter(args) { + getEventDetails(args); +} + +function dragLeave(args) { + getEventDetails(args); +} + +function dragOver(args) { + if (args.target) { + getEventDetails(args); + } +} + +function click(args) { + getEventDetails(args); +} + +function historyChange(args) { + getEventDetails(args); +} + +function doubleClick(args) { + getEventDetails(args); +} + +function textEdit(args) { + getEventDetails(args); +} + +function scrollChange(args) { + getEventDetails(args); +} + +function selectionChange(args) { + getEventDetails(args); +} + +function sizeChange(args) { + if (args.state === 'Completed') { + getEventDetails(args); + } +} + +function connectionChange(args) { + if (args.state === 'Changed') { + getEventDetails(args); + } +} + +function sourcePointChange(args) { + if (args.state === 'Completed') { + getEventDetails(args); + } +} + +function targetPointChange(args) { + if (args.state === 'Completed') { + getEventDetails(args); + } +} + +function propertyChange(args) { + getEventDetails(args); +} + +function positionChange(args) { + if (args.state === 'Completed') { + getEventDetails(args); + } +} + +function rotateChange(args) { + if (args.state === 'Completed') { + getEventDetails(args); + } +} + +function collectionChange(args) { + getEventDetails(args); +} + +function mouseEnter(args) { + getEventDetails(args); +} + +function mouseLeave(args) { + getEventDetails(args); +} + +function mouseOver(args) { + getEventDetails(args); +} + +function contextMenuOpen(args) { + getEventDetails(args); +} + +function contextMenuBeforeItemRender(args) { + getEventDetails(args); +} + +function contextMenuClick(args) { + getEventDetails(args); +} + +// tslint:disable-next-line:max-func-body-length +this.default = function () { + + var data = [ + { text: 'Drag enter', id: 'dragEnter' }, + { text: 'Drag leave', id: 'dragLeave' }, + { text: 'Drag over', id: 'dragOver' }, + { text: 'Click', id: 'click', isChecked: true }, + { text: 'History change', id: 'historyChange', isChecked: true }, + { text: 'Double click', id: 'doubleClick' }, + { text: 'Text edit', id: 'textEdit', isChecked: true }, + { text: 'Scroll change', id: 'scrollChange' }, + { text: 'Selection change', id: 'selectionChange', isChecked: true }, + { text: 'Size change', id: 'sizeChange', isChecked: true }, + { text: 'Connection change', id: 'connectionChange', isChecked: true }, + { text: 'SourcePoint change', id: 'sourcePointChange' }, + { text: 'TargetPoint change', id: 'targetPointChange' }, + { text: 'Position change', id: 'positionChange', isChecked: true }, + { text: 'Rotate change', id: 'rotateChange', isChecked: true }, + { text: 'Collection change', id: 'collectionChange', isChecked: true }, + { text: 'Mouse enter', id: 'mouseEnter' }, + { text: 'Mouse leave', id: 'mouseLeave' }, + { text: 'Mouse over', id: 'mouseOver' }, + { text: 'Context menu open', id: 'contextMenuOpen' }, + { text: 'Context menu before item render', id: 'contextMenuBeforeItemRender' }, + { text: 'Context menu click', id: 'contextMenuClick' } + ]; + + //Initialize ListView component + var listObj = new ej.lists.ListView({ + //Set defined data to dataSource property + dataSource: data, + height: "calc(100% - 40px)", + //Enables checkbox + showCheckBox: true + }); + + //Render initialized ListView component + listObj.appendTo('#listview-def'); + + //Render initialized button component + var button = new ej.buttons.Button(); + button.appendTo('#clearbtn'); + + //Initializes diagram control + var diagram = new ej.diagrams.Diagram({ + width: '100%', height: '700px', + contextMenuSettings: { show: true }, + snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, + dragEnter: dragEnter, + dragLeave: dragLeave, + dragOver: dragOver, + click: click, + historyChange: historyChange, + doubleClick: doubleClick, + textEdit: textEdit, + scrollChange: scrollChange, + selectionChange: selectionChange, + sizeChange: sizeChange, + connectionChange: connectionChange, + sourcePointChange: sourcePointChange, + targetPointChange: targetPointChange, + propertyChange: propertyChange, + positionChange: positionChange, + rotateChange: rotateChange, + collectionChange: collectionChange, + mouseEnter: mouseEnter, + mouseLeave: mouseLeave, + mouseOver: mouseOver, + contextMenuOpen: contextMenuOpen, + contextMenuBeforeItemRender: contextMenuBeforeItemRender, + contextMenuClick: contextMenuClick + }); + diagram.appendTo('#diagram'); + clearEventLog(); + + //Initialize the basicshapes for the symbol palatte + var basicShapes = [ + { id: 'RectangleNode', shape: { type: 'Basic', shape: 'Rectangle' } }, + { id: 'EllipseNode', shape: { type: 'Basic', shape: 'Ellipse' } }, + { id: 'ParallelogramNode', shape: { type: 'Basic', shape: 'Parallelogram' } }, + { id: 'TriangleNode', shape: { type: 'Basic', shape: 'Triangle' } }, + { id: 'HexagonNode', shape: { type: 'Basic', shape: 'Hexagon' } }, + { id: 'PentagonNode', shape: { type: 'Basic', shape: 'Pentagon' } }, + { id: 'CylinderNode', shape: { type: 'Basic', shape: 'Cylinder' } }, + { id: 'PlusNode', shape: { type: 'Basic', shape: 'Plus' } }, + { id: 'HeptagonNode', shape: { type: 'Basic', shape: 'Heptagon' } }, + { id: 'OctagonNode', shape: { type: 'Basic', shape: 'Octagon' } }, + { id: 'TrapezoidNode', shape: { type: 'Basic', shape: 'Trapezoid' } }, + { id: 'DecagonNode', shape: { type: 'Basic', shape: 'Decagon' } }, + { id: 'RightTriangleNode', shape: { type: 'Basic', shape: 'RightTriangle' } }, + { id: 'DiamondNode', shape: { type: 'Basic', shape: 'Diamond' } }, + { id: 'StarNode', shape: { type: 'Basic', shape: 'Star' } } + ]; + + //Initializes connector symbols for the symbol palette + var connectorSymbols = [ + { + id: 'connector1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 } + }, + { + id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' } + }, + { + id: 'connector3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 } + }, + { + id: 'connector4', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' } + }, + { + id: 'connector5', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' } + }, + ]; + + var palettes = [ + { id: 'basic', expanded: true, symbols: basicShapes, iconCss: 'e-ddb-icons e-basic', title: 'Basic Shapes' }, + { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' } + ]; + + //Initializes the symbol palette + var palette = new ej.diagrams.SymbolPalette({ + expandMode: 'Multiple', palettes: palettes, + width: '100%', height: '700px', symbolHeight: 60, symbolWidth: 60, + symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 }, + getNodeDefaults: getSymbolDefaults, getSymbolInfo: getSymbolInfo + }); + palette.appendTo('#symbolpalette'); + + document.getElementById('clearbtn').onclick = function (args) { + var data = document.getElementById("EventLog"); + for (var i = data.childNodes.length - 1; i >= 0; i--) { + data.removeChild(data.childNodes[i]); + } + }; +}; + +function getEventDetails(args) { + var listView = document.getElementById("listview-def"); + var listViewComponent = listView.ej2_instances[0]; + var selectedItems = listViewComponent.getSelectedItems(); + if (selectedItems.data.length > 0) { + var elementName = getName(selectedItems, args); + if (elementName) { + eventInformation(args); + } + } else { + eventInformation(args); + } +} + +function getName(selectedItems, args) { + for (var i = 0; i < selectedItems.data.length; i++) { + var eventName = selectedItems.data[i].id; + if (eventName === args.name) { + return true; + } + } + return false; +} + +function clearEventLog() { + var data = document.getElementById('EventLog'); + data.innerHTML = ''; +} + +function eventInformation(args) { + var span = document.createElement('span'); + span.innerHTML = 'Diagram ' + args.name.bold() + ' event called' + '
        '; + var log = document.getElementById('EventLog'); + log.insertBefore(span, log.firstChild); +} + diff --git a/src/diagram/drawing-tool-stack.json b/src/diagram/drawing-tool-stack.json index a83cc5a7..dac60b21 100644 --- a/src/diagram/drawing-tool-stack.json +++ b/src/diagram/drawing-tool-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Shapes\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Connector\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Drawing tools sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.Snapping);\nvar diagram;\nvar checkBoxObj;\n\nfunction documentClick(args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length && target.id !== '' && target.id !== 'checked') {\n selectedElement[0].classList.remove('e-selected-style');\n }\n var drawingObject = null;\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'shape1':\n drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };\n break;\n case 'shape2':\n drawingObject = { shape: { type: 'Basic', shape: 'Ellipse' } };\n break;\n case 'shape3':\n drawingObject = { shape: { type: 'Basic', shape: 'Hexagon' } };\n break;\n case 'shape4':\n drawingObject = { shape: { type: 'Basic', shape: 'Pentagon' } };\n break;\n case 'shape5':\n drawingObject = { shape: { type: 'Basic', shape: 'Triangle' } };\n break;\n case 'straight':\n drawingObject = { type: 'Straight' };\n break;\n case 'ortho':\n drawingObject = { type: 'Orthogonal' };\n break;\n case 'cubic':\n drawingObject = { type: 'Bezier' };\n break;\n case 'path':\n drawingObject = {\n shape: {\n type: 'Path',\n data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +\n '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'\n }\n };\n break;\n case 'image':\n drawingObject = { shape: { type: 'Image', source: '//npmci.syncfusion.com/development/demos/src/diagram/employees/image16.png' } };\n break;\n case 'svg':\n drawingObject = { shape: { type: 'Native', content: getPath() } };\n break;\n case 'text':\n drawingObject = { shape: { type: 'Text' } };\n break;\n }\n if (drawingObject) {\n diagram.drawingObject = drawingObject;\n diagram.tool = checkBoxObj.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce;\n diagram.dataBind();\n target.classList.add('e-selected-style');\n }\n }\n}\n\nfunction onChange(args) {\n diagram.tool = args.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce;\n}\n\nfunction getPath() {\n var str = ' ' +\n ' Created by potrace 1.11, written by Peter Selinger 2001-2013' +\n ' ' +\n ' ';\n return str;\n}\n\n\n\n\n var interval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: interval };\n var snapSettings = {\n snapObjectDistance: 5,\n constraints: (ej.diagrams.SnapConstraints.SnapToObject | ej.diagrams.SnapConstraints.SnapToLines) | ej.diagrams.SnapConstraints.ShowLines,\n horizontalGridlines: gridlines, verticalGridlines: gridlines\n };\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '540px', snapSettings: snapSettings,\n rulerSettings: {\n showRulers: true, dynamicGrid: true\n },\n created: function (obj) {\n diagram.drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };\n diagram.tool = ej.diagrams.DiagramTools.ContinuousDraw;\n diagram.dataBind();\n }\n });\n diagram.appendTo('#diagram');\n //Initializes the check box inorder to enable Continuous draw\n checkBoxObj = new ej.buttons.CheckBox({ label: 'Continuous Draw', checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n //Click Event used to decide the drawing object.\n document.getElementById('appearance').onclick = documentClick;\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Shapes\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Connector\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Drawing tools sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.Snapping);\nvar diagram;\nvar checkBoxObj;\n\nfunction documentClick(args) {\n var target = args.target;\n\n var drawingObject = null;\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'shape1':\n drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };\n break;\n case 'shape2':\n drawingObject = { shape: { type: 'Basic', shape: 'Ellipse' } };\n break;\n case 'shape3':\n drawingObject = { shape: { type: 'Basic', shape: 'Hexagon' } };\n break;\n case 'shape4':\n drawingObject = { shape: { type: 'Basic', shape: 'Pentagon' } };\n break;\n case 'shape5':\n drawingObject = { shape: { type: 'Basic', shape: 'Triangle' } };\n break;\n case 'straight':\n drawingObject = { type: 'Straight' };\n break;\n case 'ortho':\n drawingObject = { type: 'Orthogonal' };\n break;\n case 'cubic':\n drawingObject = { type: 'Bezier' };\n break;\n case 'path':\n drawingObject = {\n shape: {\n type: 'Path',\n data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +\n '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'\n }\n };\n break;\n case 'image':\n drawingObject = { shape: { type: 'Image', source: '//npmci.syncfusion.com/production/demos/src/diagram/employees/image16.png' } };\n break;\n case 'svg':\n drawingObject = { shape: { type: 'Native', content: getPath() } };\n break;\n case 'text':\n drawingObject = { shape: { type: 'Text' } };\n break;\n }\n if (drawingObject) {\n diagram.drawingObject = drawingObject;\n diagram.tool = checkBoxObj.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce;\n diagram.dataBind();\n\n }\n }\n}\n\nfunction onChange(args) {\n diagram.tool = args.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce;\n}\n\n\n\n\n var interval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: interval };\n var snapSettings = {\n snapObjectDistance: 5,\n constraints: (ej.diagrams.SnapConstraints.SnapToObject | ej.diagrams.SnapConstraints.SnapToLines) | ej.diagrams.SnapConstraints.ShowLines,\n horizontalGridlines: gridlines, verticalGridlines: gridlines\n };\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '540px', snapSettings: snapSettings,\n rulerSettings: {\n showRulers: true, dynamicGrid: true\n },\n created: function (obj) {\n diagram.drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };\n diagram.tool = ej.diagrams.DiagramTools.ContinuousDraw;\n diagram.dataBind();\n }\n });\n diagram.appendTo('#diagram');\n //Initializes the check box inorder to enable Continuous draw\n checkBoxObj = new ej.buttons.CheckBox({ label: 'Continuous Draw', checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n //Click Event used to decide the drawing object.\n document.getElementById('appearance').onclick = documentClick;\n\n"} \ No newline at end of file diff --git a/src/diagram/drawing-tool.js b/src/diagram/drawing-tool.js index bb209e7f..0a2aa07d 100644 --- a/src/diagram/drawing-tool.js +++ b/src/diagram/drawing-tool.js @@ -7,10 +7,12 @@ var checkBoxObj; function documentClick(args) { var target = args.target; + // custom code start var selectedElement = document.getElementsByClassName('e-selected-style'); if (selectedElement.length && target.id !== '' && target.id !== 'checked') { selectedElement[0].classList.remove('e-selected-style'); } + // custom code end var drawingObject = null; if (target.className === 'image-pattern-style') { switch (target.id) { @@ -61,7 +63,9 @@ function documentClick(args) { diagram.drawingObject = drawingObject; diagram.tool = checkBoxObj.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce; diagram.dataBind(); + // custom code start target.classList.add('e-selected-style'); + // custom code end } } } @@ -69,7 +73,7 @@ function documentClick(args) { function onChange(args) { diagram.tool = args.checked ? ej.diagrams.DiagramTools.ContinuousDraw : ej.diagrams.DiagramTools.DrawOnce; } - +// custom code start function getPath() { var str = ' '; return str; } - +// custom code end this.default = function () { diff --git a/src/diagram/fishbone-diagram-stack.json b/src/diagram/fishbone-diagram-stack.json index e78321fc..d556534c 100644 --- a/src/diagram/fishbone-diagram-stack.json +++ b/src/diagram/fishbone-diagram-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams, ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu);\nej.diagrams.SymbolPalette.Inject(ej.diagrams.BpmnDiagrams);\nvar diagram;\nvar nodes = [\n {\n id: 'Equipment', width: 120, height: 40, offsetX: 300, offsetY: 80,\n annotations: [{ content: 'Equipment', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Environment', width: 120, height: 40, offsetX: 450, offsetY: 80,\n annotations: [{ content: 'Environment', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Person', width: 120, height: 40, offsetX: 600, offsetY: 80,\n annotations: [{ content: 'Person', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Materials', width: 120, height: 40, offsetX: 300, offsetY: 600,\n annotations: [{ content: 'Materials', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Machine', width: 120, height: 40, offsetX: 450, offsetY: 600,\n annotations: [{ content: 'Machine', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Methods', width: 120, height: 40, offsetX: 600, offsetY: 600,\n annotations: [{ content: 'Methods', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: {\n type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z'\n }\n },\n {\n id: 'ellipse1', width: 20, height: 20, offsetX: 290, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse2', width: 20, height: 20, offsetX: 323, offsetY: 183,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse3', width: 20, height: 20, offsetX: 354, offsetY: 237,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse4', width: 20, height: 20, offsetX: 440, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse5', width: 20, height: 20, offsetX: 470, offsetY: 182,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse6', width: 20, height: 20, offsetX: 590, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse7', width: 20, height: 20, offsetX: 622, offsetY: 179,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse8', width: 20, height: 20, offsetX: 660, offsetY: 221,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse9', width: 20, height: 20, offsetX: 694, offsetY: 264,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse10', width: 20, height: 20, offsetX: 354, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse11', width: 20, height: 20, offsetX: 590, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse12', width: 20, height: 20, offsetX: 660, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse13', width: 20, height: 20, offsetX: 440, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse14', width: 20, height: 20, offsetX: 510, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse15', width: 20, height: 20, offsetX: 290, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse1', width: 50, height: 50, offsetX: 717, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse2', width: 50, height: 50, offsetX: 560, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse3', width: 50, height: 50, offsetX: 390, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse4', width: 50, height: 50, offsetX: 220, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse5', width: 140, height: 90, offsetX: 900, offsetY: 310,\n annotations: [{ content: 'Productivity Increase', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Basic', shape: 'Ellipse' }\n },\n {\n id: 'TextPrograms', width: 90, height: 20, offsetX: 189, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Text Programs' }\n },\n {\n id: 'Ventilatorssound', width: 120, height: 20, offsetX: 359, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Ventilators Sound' }\n },\n {\n id: 'Education', width: 70, height: 20, offsetX: 500, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Education' }\n },\n {\n id: 'DataBooks', width: 70, height: 20, offsetX: 213, offsetY: 183,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'DataBooks' }\n },\n {\n id: 'Fixtures', width: 70, height: 20, offsetX: 240, offsetY: 237,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Fixtures' }\n },\n {\n id: 'Noise', width: 70, height: 20, offsetX: 390, offsetY: 182,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Noise' }\n },\n {\n id: 'Motivation', width: 70, height: 20, offsetX: 535, offsetY: 182,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Motivation' }\n },\n {\n id: 'Tiredness', width: 70, height: 20, offsetX: 565, offsetY: 224,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Tiredness' }\n },\n {\n id: 'Storer', width: 70, height: 20, offsetX: 606, offsetY: 264,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Storer' }\n },\n {\n id: 'Computer', width: 70, height: 20, offsetX: 260, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Computer' }\n },\n {\n id: 'Quality', width: 120, height: 20, offsetX: 417, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Quality of Element' }\n },\n {\n id: 'Order', width: 70, height: 20, offsetX: 562, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Order' }\n },\n {\n id: 'Software', width: 70, height: 20, offsetX: 225, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Software' }\n },\n {\n id: 'Procurement', width: 70, height: 20, offsetX: 358, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Procurement' }\n },\n {\n id: 'Standardization', width: 90, height: 20, offsetX: 501, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Standardization' }\n },\n];\nvar connectors = [\n CreateConnector('equipellise', '5,5', 'Equipment', 'ellipse1', '#A52A2A', 2),\n CreateConnector('connect12', '5,5', 'ellipse1', 'ellipse2', '#A52A2A', 2),\n CreateConnector('connect13', '5,5', 'ellipse2', 'ellipse3', '#A52A2A', 2),\n CreateConnector('connect14', '5,5', 'ellipse3', 'Colorellipse3', '#A52A2A', 2),\n CreateConnector('connect15', '5,5', 'Environment', 'ellipse4', '#A52A2A', 2),\n CreateConnector('connect16', '5,5', 'ellipse4', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect17', '5,5', 'ellipse4', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect18', '5,5', 'ellipse5', 'Colorellipse2', '#A52A2A', 2),\n CreateConnector('connect19', '5,5', 'Person', 'ellipse6', '#A52A2A', 2),\n CreateConnector('connect20', '5,5', 'ellipse6', 'ellipse7', '#A52A2A', 2),\n CreateConnector('connect21', '5,5', 'ellipse7', 'ellipse8', '#A52A2A', 2),\n CreateConnector('connect22', '5,5', 'ellipse8', 'ellipse9', '#A52A2A', 2),\n CreateConnector('connect23', '5,5', 'ellipse9', 'Colorellipse1', '#A52A2A', 2),\n CreateConnector('connect24', '5,5', 'Materials', 'ellipse15', '#A52A2A', 2),\n CreateConnector('connect25', '5,5', 'ellipse15', 'ellipse10', '#A52A2A', 2),\n CreateConnector('connect26', '5,5', 'ellipse10', 'Colorellipse3', '#A52A2A', 2),\n CreateConnector('connect27', '5,5', 'Machine', 'ellipse13', '#A52A2A', 2),\n CreateConnector('connect28', '5,5', 'ellipse13', 'ellipse14', '#A52A2A', 2),\n CreateConnector('connect29', '5,5', 'ellipse14', 'Colorellipse2', '#A52A2A', 2),\n CreateConnector('connect30', '5,5', 'Methods', 'ellipse11', '#A52A2A', 2),\n CreateConnector('connect31', '5,5', 'ellipse11', 'ellipse12', '#A52A2A', 2),\n CreateConnector('connect32', '5,5', 'ellipse12', 'Colorellipse1', '#A52A2A', 2),\n CreateConnector('connect33', '', 'Colorellipse4', 'Colorellipse3', '#000000', 2),\n CreateConnector('connect34', '', 'Colorellipse3', 'Colorellipse2', '#000000', 2),\n CreateConnector('connect35', '', 'Colorellipse2', 'Colorellipse1', '#000000', 2),\n CreateConnector('connect36', '', 'Colorellipse1', 'Colorellipse5', '#000000', 2),\n CreateConnector('connect37', '5,5', 'TextPrograms', 'ellipse1', '#A52A2A', 2),\n CreateConnector('connect38', '5,5', 'DataBooks', 'ellipse2', '#A52A2A', 2),\n CreateConnector('connect39', '5,5', 'Fixtures', 'ellipse3', '#A52A2A', 2),\n CreateConnector('connect40', '5,5', 'Ventilatorssound', 'ellipse4', '#A52A2A', 2),\n CreateConnector('connect41', '5,5', 'Noise', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect42', '5,5', 'Education', 'ellipse6', '#A52A2A', 2),\n CreateConnector('connect43', '5,5', 'Motivation', 'ellipse7', '#A52A2A', 2),\n CreateConnector('connect44', '5,5', 'Tiredness', 'ellipse8', '#A52A2A', 2),\n CreateConnector('connect45', '5,5', 'Storer', 'ellipse9', '#A52A2A', 2),\n CreateConnector('connect46', '5,5', 'Software', 'ellipse15', '#A52A2A', 2),\n CreateConnector('connect47', '5,5', 'Computer', 'ellipse10', '#A52A2A', 2),\n CreateConnector('connect48', '5,5', 'Procurement', 'ellipse13', '#A52A2A', 2),\n CreateConnector('connect49', '5,5', 'Quality', 'ellipse14', '#A52A2A', 2),\n CreateConnector('connect50', '5,5', 'Order', 'ellipse12', '#A52A2A', 2),\n CreateConnector('connect51', '5,5', 'Standardization', 'ellipse11', '#A52A2A', 2)\n];\nfunction CreateConnector(name, lineDashArray, source, target, lineColor, lineWidth) {\n var connector = {};\n connector.id = name;\n connector.sourceID = source;\n connector.targetID = target;\n connector.style = {\n strokeColor: lineColor,\n strokeWidth: lineWidth,\n strokeDashArray: lineDashArray,\n };\n return connector;\n}\n\n diagram = new ej.diagrams.Diagram({\n width: '100%',\n height: '700px',\n nodes: nodes,\n tool: ej.diagrams.DiagramTools.ZoomPan,\n connectors: connectors,\n snapSettings: { constraints: 0 },\n getConnectorDefaults: function (connector) {\n connector.targetDecorator = { shape: 'Arrow', width: 5, height: 5 };\n if (connector.id !== 'connect33' && connector.id !== 'connect34' &&\n connector.id !== 'connect35' && connector.id !== 'connect36') {\n connector.targetDecorator.style = { strokeColor: '#A52A2A', fill: '#A52A2A' };\n }\n }\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Height' });\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams, ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu);\nej.diagrams.SymbolPalette.Inject(ej.diagrams.BpmnDiagrams);\nvar diagram;\nvar nodes = [\n {\n id: 'Equipment', width: 120, height: 40, offsetX: 300, offsetY: 80,\n annotations: [{ content: 'Equipment', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Environment', width: 120, height: 40, offsetX: 450, offsetY: 80,\n annotations: [{ content: 'Environment', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Person', width: 120, height: 40, offsetX: 600, offsetY: 80,\n annotations: [{ content: 'Person', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Materials', width: 120, height: 40, offsetX: 300, offsetY: 600,\n annotations: [{ content: 'Materials', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Machine', width: 120, height: 40, offsetX: 450, offsetY: 600,\n annotations: [{ content: 'Machine', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z' }\n },\n {\n id: 'Methods', width: 120, height: 40, offsetX: 600, offsetY: 600,\n annotations: [{ content: 'Methods', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: {\n type: 'Path', data: 'M 10 0 L 166 0 L 156 44 L 0 44 z'\n }\n },\n {\n id: 'ellipse1', width: 20, height: 20, offsetX: 290, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse2', width: 20, height: 20, offsetX: 323, offsetY: 183,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse3', width: 20, height: 20, offsetX: 354, offsetY: 237,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse4', width: 20, height: 20, offsetX: 440, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse5', width: 20, height: 20, offsetX: 470, offsetY: 182,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse6', width: 20, height: 20, offsetX: 590, offsetY: 130,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse7', width: 20, height: 20, offsetX: 622, offsetY: 179,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse8', width: 20, height: 20, offsetX: 660, offsetY: 221,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse9', width: 20, height: 20, offsetX: 694, offsetY: 264,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse10', width: 20, height: 20, offsetX: 354, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse11', width: 20, height: 20, offsetX: 590, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse12', width: 20, height: 20, offsetX: 660, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse13', width: 20, height: 20, offsetX: 440, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse14', width: 20, height: 20, offsetX: 510, offsetY: 460,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'ellipse15', width: 20, height: 20, offsetX: 290, offsetY: 530,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse1', width: 50, height: 50, offsetX: 717, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse2', width: 50, height: 50, offsetX: 560, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse3', width: 50, height: 50, offsetX: 390, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse4', width: 50, height: 50, offsetX: 220, offsetY: 310,\n annotations: [{ content: ' ', style: { color: 'white' } }],\n shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeColor: '#A52A2A' }\n },\n {\n id: 'Colorellipse5', width: 140, height: 90, offsetX: 900, offsetY: 310,\n annotations: [{ content: 'Productivity Increase', style: { color: 'white' } }],\n style: { fill: '#39AFA9' }, borderColor: '05776C',\n shape: { type: 'Basic', shape: 'Ellipse' }\n },\n {\n id: 'TextPrograms', width: 90, height: 20, offsetX: 189, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Text Programs' }\n },\n {\n id: 'Ventilatorssound', width: 120, height: 20, offsetX: 359, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Ventilators Sound' }\n },\n {\n id: 'Education', width: 70, height: 20, offsetX: 500, offsetY: 130,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Education' }\n },\n {\n id: 'DataBooks', width: 70, height: 20, offsetX: 213, offsetY: 183,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'DataBooks' }\n },\n {\n id: 'Fixtures', width: 70, height: 20, offsetX: 240, offsetY: 237,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Fixtures' }\n },\n {\n id: 'Noise', width: 70, height: 20, offsetX: 390, offsetY: 182,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Noise' }\n },\n {\n id: 'Motivation', width: 70, height: 20, offsetX: 535, offsetY: 182,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Motivation' }\n },\n {\n id: 'Tiredness', width: 70, height: 20, offsetX: 565, offsetY: 224,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Tiredness' }\n },\n {\n id: 'Storer', width: 70, height: 20, offsetX: 606, offsetY: 264,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Storer' }\n },\n {\n id: 'Computer', width: 70, height: 20, offsetX: 260, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Computer' }\n },\n {\n id: 'Quality', width: 120, height: 20, offsetX: 417, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Quality of Element' }\n },\n {\n id: 'Order', width: 70, height: 20, offsetX: 562, offsetY: 460,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Order' }\n },\n {\n id: 'Software', width: 70, height: 20, offsetX: 225, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Software' }\n },\n {\n id: 'Procurement', width: 70, height: 20, offsetX: 358, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Procurement' }\n },\n {\n id: 'Standardization', width: 90, height: 20, offsetX: 501, offsetY: 530,\n style: { fill: 'transparent', strokeWidth: 0 },\n shape: { type: 'Text', content: 'Standardization' }\n },\n];\nvar connectors = [\n CreateConnector('equipellise', '5,5', 'Equipment', 'ellipse1', '#A52A2A', 2),\n CreateConnector('connect12', '5,5', 'ellipse1', 'ellipse2', '#A52A2A', 2),\n CreateConnector('connect13', '5,5', 'ellipse2', 'ellipse3', '#A52A2A', 2),\n CreateConnector('connect14', '5,5', 'ellipse3', 'Colorellipse3', '#A52A2A', 2),\n CreateConnector('connect15', '5,5', 'Environment', 'ellipse4', '#A52A2A', 2),\n CreateConnector('connect16', '5,5', 'ellipse4', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect17', '5,5', 'ellipse4', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect18', '5,5', 'ellipse5', 'Colorellipse2', '#A52A2A', 2),\n CreateConnector('connect19', '5,5', 'Person', 'ellipse6', '#A52A2A', 2),\n CreateConnector('connect20', '5,5', 'ellipse6', 'ellipse7', '#A52A2A', 2),\n CreateConnector('connect21', '5,5', 'ellipse7', 'ellipse8', '#A52A2A', 2),\n CreateConnector('connect22', '5,5', 'ellipse8', 'ellipse9', '#A52A2A', 2),\n CreateConnector('connect23', '5,5', 'ellipse9', 'Colorellipse1', '#A52A2A', 2),\n CreateConnector('connect24', '5,5', 'Materials', 'ellipse15', '#A52A2A', 2),\n CreateConnector('connect25', '5,5', 'ellipse15', 'ellipse10', '#A52A2A', 2),\n CreateConnector('connect26', '5,5', 'ellipse10', 'Colorellipse3', '#A52A2A', 2),\n CreateConnector('connect27', '5,5', 'Machine', 'ellipse13', '#A52A2A', 2),\n CreateConnector('connect28', '5,5', 'ellipse13', 'ellipse14', '#A52A2A', 2),\n CreateConnector('connect29', '5,5', 'ellipse14', 'Colorellipse2', '#A52A2A', 2),\n CreateConnector('connect30', '5,5', 'Methods', 'ellipse11', '#A52A2A', 2),\n CreateConnector('connect31', '5,5', 'ellipse11', 'ellipse12', '#A52A2A', 2),\n CreateConnector('connect32', '5,5', 'ellipse12', 'Colorellipse1', '#A52A2A', 2),\n CreateConnector('connect33', '', 'Colorellipse4', 'Colorellipse3', '#000000', 2),\n CreateConnector('connect34', '', 'Colorellipse3', 'Colorellipse2', '#000000', 2),\n CreateConnector('connect35', '', 'Colorellipse2', 'Colorellipse1', '#000000', 2),\n CreateConnector('connect36', '', 'Colorellipse1', 'Colorellipse5', '#000000', 2),\n CreateConnector('connect37', '5,5', 'TextPrograms', 'ellipse1', '#A52A2A', 2),\n CreateConnector('connect38', '5,5', 'DataBooks', 'ellipse2', '#A52A2A', 2),\n CreateConnector('connect39', '5,5', 'Fixtures', 'ellipse3', '#A52A2A', 2),\n CreateConnector('connect40', '5,5', 'Ventilatorssound', 'ellipse4', '#A52A2A', 2),\n CreateConnector('connect41', '5,5', 'Noise', 'ellipse5', '#A52A2A', 2),\n CreateConnector('connect42', '5,5', 'Education', 'ellipse6', '#A52A2A', 2),\n CreateConnector('connect43', '5,5', 'Motivation', 'ellipse7', '#A52A2A', 2),\n CreateConnector('connect44', '5,5', 'Tiredness', 'ellipse8', '#A52A2A', 2),\n CreateConnector('connect45', '5,5', 'Storer', 'ellipse9', '#A52A2A', 2),\n CreateConnector('connect46', '5,5', 'Software', 'ellipse15', '#A52A2A', 2),\n CreateConnector('connect47', '5,5', 'Computer', 'ellipse10', '#A52A2A', 2),\n CreateConnector('connect48', '5,5', 'Procurement', 'ellipse13', '#A52A2A', 2),\n CreateConnector('connect49', '5,5', 'Quality', 'ellipse14', '#A52A2A', 2),\n CreateConnector('connect50', '5,5', 'Order', 'ellipse12', '#A52A2A', 2),\n CreateConnector('connect51', '5,5', 'Standardization', 'ellipse11', '#A52A2A', 2)\n];\nfunction CreateConnector(name, lineDashArray, source, target, lineColor, lineWidth) {\n var connector = {};\n connector.id = name;\n connector.sourceID = source;\n connector.targetID = target;\n connector.style = {\n strokeColor: lineColor,\n strokeWidth: lineWidth,\n strokeDashArray: lineDashArray,\n };\n return connector;\n}\n\n diagram = new ej.diagrams.Diagram({\n width: '100%',\n height: '700px',\n nodes: nodes,\n tool: ej.diagrams.DiagramTools.ZoomPan,\n connectors: connectors,\n snapSettings: { constraints: 0 },\n getConnectorDefaults: function (connector) {\n connector.targetDecorator = { shape: 'Arrow', width: 5, height: 5 };\n if (connector.id !== 'connect33' && connector.id !== 'connect34' &&\n connector.id !== 'connect35' && connector.id !== 'connect36') {\n connector.targetDecorator.style = { strokeColor: '#A52A2A', fill: '#A52A2A' };\n }\n }\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Height' });\n\n\n"} \ No newline at end of file diff --git a/src/diagram/flow-execution-stack.json b/src/diagram/flow-execution-stack.json new file mode 100644 index 00000000..0a681edd --- /dev/null +++ b/src/diagram/flow-execution-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n \n\n
        \n
        \n
        \n
        \n
        \n
        \n Show flow execution\n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n\n
        \n
        \n
        \n
        \n \n\n
        \n
        \n
        \n
        \n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\nvar diagram;\nfunction CreateConnector(\n name, source, target, content, type,\n direction, targePort, length) {\n var connector = {};\n connector.id = name;\n connector.sourceID = source;\n connector.targetID = target;\n connector.style = { strokeWidth: 2 };\n var annotation = {};\n annotation.content = content;\n annotation.style = { fill: 'white' };\n connector.annotations = [annotation];\n connector.style.strokeColor = '#8D8D8D';\n connector.targetDecorator = {};\n connector.targetDecorator.style = {};\n connector.targetDecorator.style.strokeColor = '#8D8D8D';\n connector.targetDecorator.style.fill = '#8D8D8D';\n if (targePort) {\n connector.targetPortID = targePort;\n }\n var segment = {};\n if (type) {\n connector.type = type;\n segment.direction = direction;\n segment.type = type;\n segment.length = length;\n connector.segments = [segment];\n }\n return connector;\n}\n\nfunction CreateNodes(\n name, offsetX, offsetY, shape, content,\n width, height, ports) {\n var node = {};\n node.id = name;\n node.offsetX = offsetX;\n node.width = 150;\n node.height = 50;\n node.offsetY = offsetY;\n var annotations = {};\n annotations.content = content;\n node.annotations = [annotations];\n node.shape = { type: 'Flow', shape: shape };\n node.style = { fill: '#FBF6E1', strokeColor: '#E8DFB6', strokeWidth: 2 };\n if (ports) {\n node.ports = ports;\n }\n return node;\n}\n\n var nodes = [];\n var port1 = { id: 'port1', offset: { x: 0.5, y: 1 } };\n var port = { id: 'port', offset: { x: 1, y: 0.5 } };\n nodes.push(CreateNodes('node1', 100, 125, 'Terminator', 'Begin', 100, 35));\n nodes.push(CreateNodes('node2', 300, 125, 'Process', 'Specify collection', 120, 25, [port]));\n nodes.push(CreateNodes('node3', 500, 125, 'Decision', 'Particulars \\n required?', 100, 50, [port1]));\n nodes.push(CreateNodes('node4', 730, 125, 'Process', 'Specify particulars', 90, 25));\n nodes.push(CreateNodes('node5', 500, 225, 'Process', 'Design collection', 100, 25, [port]));\n nodes.push(CreateNodes('node6', 500, 320, 'Process', 'Cluster of events', 100, 25));\n nodes.push(CreateNodes('node7', 500, 420, 'Process', 'Start the process', 100, 25));\n nodes.push(CreateNodes('node8', 730, 320, 'Process', 'Record and analyze \\n results', 170, 25, [port]));\n nodes.push(CreateNodes('node9', 730, 420, 'Terminator', 'End ', 100, 35));\n\n var connectors = [];\n connectors.push(CreateConnector('connector1', 'node1', 'node2', ''));\n connectors.push(CreateConnector('connector2', 'node2', 'node3', ''));\n connectors.push(CreateConnector('connector3', 'node3', 'node4', 'Yes'));\n connectors.push(CreateConnector('connector4', 'node3', 'node5', 'No'));\n connectors.push(CreateConnector('connector5', 'node5', 'node6', ''));\n connectors.push(CreateConnector('connector6', 'node6', 'node7', ''));\n connectors.push(CreateConnector('connector7', 'node8', 'node6', ''));\n connectors.push(CreateConnector('connector8', 'node7', 'node9', ''));\n connectors.push(CreateConnector('connector10', 'node4', 'node5', '', 'Orthogonal', 'Bottom', 'port', 220));\n\n //initialization of the Diagram.\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', nodes: nodes, connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }\n });\n diagram.appendTo('#diagram');\n\n var highLightedObjects = [];\n var currentButton = 'UnhighlightAll';\n var radioButton = new ej.buttons.RadioButton({\n label: 'None', name: 'radio', value: 'UnhighlightAll', change: buttonChange, checked: true\n });\n radioButton.appendTo('#UnhighlightAll');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Incoming connections', change: buttonChange, name: 'radio', value: 'LinksInto' });\n radioButton.appendTo('#LinksInto');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Outgoing connections', change: buttonChange, name: 'radio', value: 'LinksOutOf' });\n radioButton.appendTo('#LinksOutOf');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Incoming and outgoing connections', change: buttonChange, name: 'radio', value: 'LinksConnected' });\n radioButton.appendTo('#LinksConnected');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Incoming nodes', change: buttonChange, name: 'radio', value: 'NodesInto' });\n radioButton.appendTo('#NodesInto');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Outgoing nodes', change: buttonChange, name: 'radio', value: 'NodesOutOf' });\n radioButton.appendTo('#NodesOutOf');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Incoming and outgoing nodes', change: buttonChange, name: 'radio', value: 'NodesConnected' });\n radioButton.appendTo('#NodesConnected');\n\n radioButton = new ej.buttons.RadioButton({ label: 'Adjacent nodes', change: buttonChange, name: 'radio', value: 'NodesReachable' });\n radioButton.appendTo('#NodesReachable');\n\n\n function buttonChange(args) {\n currentButton = args.event.srcElement.id;\n applyChanges(args.event.srcElement.id);\n }\n\n function applyChanges(id) {\n Unhighlight();\n switch (id) {\n case 'LinksInto':\n linkedIn();\n break;\n case 'LinksOutOf':\n LinksOut();\n break;\n case 'LinksConnected':\n LinksConnector();\n break;\n case 'NodesInto':\n NodesIn();\n break;\n case 'NodesOutOf':\n NodesOut();\n break;\n case 'NodesConnected':\n NodesConnect();\n break;\n case 'NodesReachable':\n NodeReachable();\n break;\n }\n }\n function linkedIn() {\n if (diagram.selectedItems.nodes.length) {\n var nodes = diagram.selectedItems.nodes[0].inEdges;\n for (var i = 0; i < nodes.length; i++) {\n var index = diagram.connectors.indexOf(diagram.nameTable[nodes[i]]);\n highLightedObjects.push(nodes[i]);\n diagram.connectors[index].style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.fill = '#1413F8';\n diagram.dataBind();\n }\n }\n }\n function LinksOut() {\n if (diagram.selectedItems.nodes.length) {\n var node = diagram.selectedItems.nodes[0].outEdges;\n for (var i = 0; i < node.length; i++) {\n var index = diagram.connectors.indexOf(diagram.nameTable[node[i]]);\n highLightedObjects.push(node[i]);\n diagram.connectors[index].style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.fill = '#1413F8';\n diagram.dataBind();\n }\n }\n }\n function LinksConnector() {\n LinksOut();\n linkedIn();\n }\n function NodesIn() {\n if (diagram.selectedItems.nodes.length) {\n var node = diagram.selectedItems.nodes[0].inEdges;\n for (var i = 0; i < node.length; i++) {\n var nodeId = diagram.nameTable[node[i]].sourceID;\n highLightedObjects.push(nodeId);\n var index = diagram.nodes.indexOf(diagram.nameTable[nodeId]);\n diagram.nodes[index].style.strokeColor = '#1413F8';\n diagram.dataBind();\n }\n }\n }\n function NodesOut() {\n if (diagram.selectedItems.nodes.length) {\n var node = diagram.selectedItems.nodes[0].outEdges;\n for (var i = 0; i < node.length; i++) {\n var nodeId = diagram.nameTable[node[i]].targetID;\n highLightedObjects.push(nodeId);\n var index = diagram.nodes.indexOf(diagram.nameTable[nodeId]);\n diagram.nodes[index].style.strokeColor = '#1413F8';\n diagram.dataBind();\n }\n }\n }\n function NodesConnect() {\n NodesOut();\n NodesIn();\n }\n function NodeReachable() {\n if (diagram.selectedItems.nodes.length) {\n var connectors_1 = diagram.selectedItems.nodes[0].outEdges;\n var nodeList = foundNode(connectors_1, []);\n for (var i = 0; i < nodeList.length; i++) {\n var index = diagram.connectors.indexOf(diagram.nameTable[nodeList[i]]);\n highLightedObjects.push(nodeList[i]);\n diagram.connectors[index].style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8';\n diagram.connectors[index].targetDecorator.style.fill = '#1413F8';\n diagram.dataBind();\n }\n }\n }\n function foundNode(list, nodeList) {\n for (var i = 0; i < list.length; i++) {\n var connector = diagram.nameTable[list[i]];\n if (nodeList.indexOf(connector.id) > -1) {\n break;\n }\n if (!connector.annotations[0] || (connector.annotations[0] && connector.annotations[0].content !== 'No')) {\n nodeList.push(connector.id);\n }\n if (diagram.nameTable[connector.targetID].outEdges.length) {\n if (list.indexOf(connector.targetID) === -1) {\n foundNode(diagram.nameTable[connector.targetID].outEdges, nodeList);\n }\n }\n }\n return nodeList;\n }\n function Unhighlight() {\n for (var i = highLightedObjects.length - 1; i >= 0; i--) {\n if (diagram.nameTable[highLightedObjects[i]] instanceof ej.diagrams.Node) {\n var index = diagram.nodes.indexOf(diagram.nameTable[highLightedObjects[i]]);\n diagram.nodes[index].style.strokeColor = '#E8DFB6';\n diagram.dataBind();\n }\n else {\n var firstIndex = diagram.connectors.indexOf(diagram.nameTable[highLightedObjects[i]]);\n diagram.connectors[firstIndex].style.strokeColor = '#8D8D8D';\n diagram.connectors[firstIndex].targetDecorator.style.strokeColor = '#8D8D8D';\n diagram.connectors[firstIndex].targetDecorator.style.fill = '#8D8D8D';\n diagram.dataBind();\n }\n }\n highLightedObjects = [];\n }\n\n diagram.selectionChange = function (arg) {\n applyChanges(currentButton);\n };\n diagram.select([diagram.nodes[2]]);\n\n"} \ No newline at end of file diff --git a/src/diagram/flow-execution.html b/src/diagram/flow-execution.html new file mode 100644 index 00000000..a547b71f --- /dev/null +++ b/src/diagram/flow-execution.html @@ -0,0 +1,89 @@ +
        + + +
        +
        +
        +
        +
        +
        + Show flow execution +
        +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        + +
        +
        +
        +
        + + +
        +
        +
        +
        + + +
        +
        +
        +
        + + +
        +
        +
        +
        +
        +
        +

        + This sample demonstrates how we can process and get the consecutive nodes and connectors respectively. +

        +
        +
        +

        + We can get the inward connections and outward connections of the node using inEdges and outEdges properties of the node. By using this connector’s name collection, we can find the node using getObject. + And also, we can get the nodes connected on the connector using sourceNode and targetNode properties of the connector. method can be used to print the diagrams. +

        +
        +
        \ No newline at end of file diff --git a/src/diagram/flow-execution.js b/src/diagram/flow-execution.js new file mode 100644 index 00000000..3e42cd0d --- /dev/null +++ b/src/diagram/flow-execution.js @@ -0,0 +1,256 @@ + +var diagram; +function CreateConnector( + name, source, target, content, type, + direction, targePort, length) { + var connector = {}; + connector.id = name; + connector.sourceID = source; + connector.targetID = target; + connector.style = { strokeWidth: 2 }; + var annotation = {}; + annotation.content = content; + annotation.style = { fill: 'white' }; + connector.annotations = [annotation]; + connector.style.strokeColor = '#8D8D8D'; + connector.targetDecorator = {}; + connector.targetDecorator.style = {}; + connector.targetDecorator.style.strokeColor = '#8D8D8D'; + connector.targetDecorator.style.fill = '#8D8D8D'; + if (targePort) { + connector.targetPortID = targePort; + } + var segment = {}; + if (type) { + connector.type = type; + segment.direction = direction; + segment.type = type; + segment.length = length; + connector.segments = [segment]; + } + return connector; +} + +function CreateNodes( + name, offsetX, offsetY, shape, content, + width, height, ports) { + var node = {}; + node.id = name; + node.offsetX = offsetX; + node.width = 150; + node.height = 50; + node.offsetY = offsetY; + var annotations = {}; + annotations.content = content; + node.annotations = [annotations]; + node.shape = { type: 'Flow', shape: shape }; + node.style = { fill: '#FBF6E1', strokeColor: '#E8DFB6', strokeWidth: 2 }; + if (ports) { + node.ports = ports; + } + return node; +} +this.default = function () { + var selectedButton = 'LinksConnected'; + var nodes = []; + var port1 = { id: 'port1', offset: { x: 0.5, y: 1 } }; + var port = { id: 'port', offset: { x: 1, y: 0.5 } }; + nodes.push(CreateNodes('node1', 100, 125, 'Terminator', 'Begin', 100, 35)); + nodes.push(CreateNodes('node2', 300, 125, 'Process', 'Specify collection', 120, 25, [port])); + nodes.push(CreateNodes('node3', 500, 125, 'Decision', 'Particulars \n required?', 100, 50, [port1])); + nodes.push(CreateNodes('node4', 730, 125, 'Process', 'Specify particulars', 90, 25)); + nodes.push(CreateNodes('node5', 500, 225, 'Process', 'Design collection', 100, 25, [port])); + nodes.push(CreateNodes('node6', 500, 320, 'Process', 'Cluster of events', 100, 25)); + nodes.push(CreateNodes('node7', 500, 420, 'Process', 'Start the process', 100, 25)); + nodes.push(CreateNodes('node8', 730, 320, 'Process', 'Record and analyze \n results', 170, 25, [port])); + nodes.push(CreateNodes('node9', 730, 420, 'Terminator', 'End ', 100, 35)); + + var connectors = []; + connectors.push(CreateConnector('connector1', 'node1', 'node2', '')); + connectors.push(CreateConnector('connector2', 'node2', 'node3', '')); + connectors.push(CreateConnector('connector3', 'node3', 'node4', 'Yes')); + connectors.push(CreateConnector('connector4', 'node3', 'node5', 'No')); + connectors.push(CreateConnector('connector5', 'node5', 'node6', '')); + connectors.push(CreateConnector('connector6', 'node6', 'node7', '')); + connectors.push(CreateConnector('connector7', 'node8', 'node6', '')); + connectors.push(CreateConnector('connector8', 'node7', 'node9', '')); + connectors.push(CreateConnector('connector10', 'node4', 'node5', '', 'Orthogonal', 'Bottom', 'port', 220)); + + //initialization of the Diagram. + diagram = new ej.diagrams.Diagram({ + width: '100%', height: '600px', nodes: nodes, connectors: connectors, + snapSettings: { constraints: ej.diagrams.SnapConstraints.None } + }); + diagram.appendTo('#diagram'); + + var highLightedObjects = []; + var radioButton = new ej.buttons.RadioButton({ + label: 'None', name: 'radio', value: 'UnhighlightAll', change: buttonChange, + }); + radioButton.appendTo('#UnhighlightAll'); + + radioButton = new ej.buttons.RadioButton({ label: 'Incoming connections', change: buttonChange, name: 'radio', value: 'LinksInto' }); + radioButton.appendTo('#LinksInto'); + + radioButton = new ej.buttons.RadioButton({ label: 'Outgoing connections', change: buttonChange, name: 'radio', value: 'LinksOutOf' }); + radioButton.appendTo('#LinksOutOf'); + + radioButton = new ej.buttons.RadioButton({ label: 'Incoming and outgoing connections', change: buttonChange, name: 'radio', value: 'LinksConnected', checked: true }); + radioButton.appendTo('#LinksConnected'); + + radioButton = new ej.buttons.RadioButton({ label: 'Incoming nodes', change: buttonChange, name: 'radio', value: 'NodesInto' }); + radioButton.appendTo('#NodesInto'); + + radioButton = new ej.buttons.RadioButton({ label: 'Outgoing nodes', change: buttonChange, name: 'radio', value: 'NodesOutOf' }); + radioButton.appendTo('#NodesOutOf'); + + radioButton = new ej.buttons.RadioButton({ label: 'Incoming and outgoing nodes', change: buttonChange, name: 'radio', value: 'NodesConnected' }); + radioButton.appendTo('#NodesConnected'); + + radioButton = new ej.buttons.RadioButton({ label: 'Adjacent nodes', change: buttonChange, name: 'radio', value: 'NodesReachable' }); + radioButton.appendTo('#NodesReachable'); + + + function buttonChange(args) { + applyChanges(args.event.srcElement.id); + selectedButton = args.event.srcElement.id; + } + + function applyChanges(id) { + Unhighlight(); + switch (id) { + case 'LinksInto': + linkedIn(); + break; + case 'LinksOutOf': + LinksOut(); + break; + case 'LinksConnected': + LinksConnector(); + break; + case 'NodesInto': + NodesIn(); + break; + case 'NodesOutOf': + NodesOut(); + break; + case 'NodesConnected': + NodesConnect(); + break; + case 'NodesReachable': + NodeReachable(); + break; + } + } + function linkedIn() { + if (diagram.selectedItems.nodes.length) { + var nodes = diagram.selectedItems.nodes[0].inEdges; + for (var i = 0; i < nodes.length; i++) { + var index = diagram.connectors.indexOf(diagram.nameTable[nodes[i]]); + highLightedObjects.push(nodes[i]); + diagram.connectors[index].style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.fill = '#1413F8'; + diagram.dataBind(); + } + } + } + function LinksOut() { + if (diagram.selectedItems.nodes.length) { + var node = diagram.selectedItems.nodes[0].outEdges; + for (var i = 0; i < node.length; i++) { + var index = diagram.connectors.indexOf(diagram.nameTable[node[i]]); + highLightedObjects.push(node[i]); + diagram.connectors[index].style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.fill = '#1413F8'; + diagram.dataBind(); + } + } + } + function LinksConnector() { + LinksOut(); + linkedIn(); + } + function NodesIn() { + if (diagram.selectedItems.nodes.length) { + var node = diagram.selectedItems.nodes[0].inEdges; + for (var i = 0; i < node.length; i++) { + var nodeId = diagram.nameTable[node[i]].sourceID; + highLightedObjects.push(nodeId); + var index = diagram.nodes.indexOf(diagram.nameTable[nodeId]); + diagram.nodes[index].style.strokeColor = '#1413F8'; + diagram.dataBind(); + } + } + } + function NodesOut() { + if (diagram.selectedItems.nodes.length) { + var node = diagram.selectedItems.nodes[0].outEdges; + for (var i = 0; i < node.length; i++) { + var nodeId = diagram.nameTable[node[i]].targetID; + highLightedObjects.push(nodeId); + var index = diagram.nodes.indexOf(diagram.nameTable[nodeId]); + diagram.nodes[index].style.strokeColor = '#1413F8'; + diagram.dataBind(); + } + } + } + function NodesConnect() { + NodesOut(); + NodesIn(); + } + function NodeReachable() { + if (diagram.selectedItems.nodes.length) { + var connectors_1 = diagram.selectedItems.nodes[0].outEdges; + var nodeList = foundNode(connectors_1, []); + for (var i = 0; i < nodeList.length; i++) { + var index = diagram.connectors.indexOf(diagram.nameTable[nodeList[i]]); + highLightedObjects.push(nodeList[i]); + diagram.connectors[index].style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.strokeColor = '#1413F8'; + diagram.connectors[index].targetDecorator.style.fill = '#1413F8'; + diagram.dataBind(); + } + } + } + function foundNode(list, nodeList) { + for (var i = 0; i < list.length; i++) { + var connector = diagram.nameTable[list[i]]; + if (nodeList.indexOf(connector.id) > -1) { + break; + } + if (!connector.annotations[0] || (connector.annotations[0] && connector.annotations[0].content !== 'No')) { + nodeList.push(connector.id); + } + if (diagram.nameTable[connector.targetID].outEdges.length) { + if (list.indexOf(connector.targetID) === -1) { + foundNode(diagram.nameTable[connector.targetID].outEdges, nodeList); + } + } + } + return nodeList; + } + function Unhighlight() { + for (var i = highLightedObjects.length - 1; i >= 0; i--) { + if (diagram.nameTable[highLightedObjects[i]] instanceof ej.diagrams.Node) { + var index = diagram.nodes.indexOf(diagram.nameTable[highLightedObjects[i]]); + diagram.nodes[index].style.strokeColor = '#E8DFB6'; + diagram.dataBind(); + } + else { + var firstIndex = diagram.connectors.indexOf(diagram.nameTable[highLightedObjects[i]]); + diagram.connectors[firstIndex].style.strokeColor = '#8D8D8D'; + diagram.connectors[firstIndex].targetDecorator.style.strokeColor = '#8D8D8D'; + diagram.connectors[firstIndex].targetDecorator.style.fill = '#8D8D8D'; + diagram.dataBind(); + } + } + highLightedObjects = []; + } + + diagram.selectionChange = function (arg) { + applyChanges(selectedButton); + }; + diagram.select([diagram.nodes[2]]); +}; diff --git a/src/diagram/getting-started-annotation-stack.json b/src/diagram/getting-started-annotation-stack.json index 738c3190..82019543 100644 --- a/src/diagram/getting-started-annotation-stack.json +++ b/src/diagram/getting-started-annotation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n
        \n Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n Templates\n
        \n
        \n \n
        \n
        \n
        \n
        \n Behaviour\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n/**\n * Getting started - Annotation\n */\n// tslint:disable-next-line:max-func-body-length\n\nvar diagram;\n\n\n//Apply the appearence of the Annotation \nfunction updateAnnotation(value, fontSize, fontFamily) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotationStyle = node.annotations[j].style;\n if (value === 'fontsize') {\n annotationStyle.fontSize = fontSize.value;\n } else if (value === 'underline') {\n annotationStyle.textDecoration = 'Underline';\n } else if (value === 'fontfamily') {\n annotationStyle.fontFamily = fontFamily.value.toString();\n } else if (value === 'bold') {\n annotationStyle.bold = true;\n } else if (value === 'italic') {\n annotationStyle.italic = true;\n } else if (value === 'template') {\n if (fontFamily === 'none') {\n node.annotations[j].template = '';\n node.annotations[j].width = undefined;\n node.annotations[j].height = undefined;\n } else {\n node.annotations[j].width = 25;\n node.annotations[j].height = 25;\n node.annotations[j].template =\n '';\n }\n } else if (value === 'interaction') {\n node.annotations[j].constraints = node.annotations[j].constraints ^ ej.diagrams.AnnotationConstraints.Interaction;\n }\n diagram.dataBind();\n }\n }\n}\n//Update the Annotation Position based on the selection\nfunction updatePosition(id) {\n var target = document.getElementById(id);\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotation = node.annotations[j];\n switch (target.id) {\n case 'left':\n setAnnotationPosition(annotation, 0, 0, 'Top', 'Left', target);\n break;\n case 'right':\n setAnnotationPosition(annotation, 1, 0, 'Top', 'Right', target);\n break;\n case 'bottoml':\n setAnnotationPosition(annotation, 0, 1, 'Bottom', 'Left', target);\n break;\n case 'bottomr':\n setAnnotationPosition(annotation, 1, 1, 'Bottom', 'Right', target);\n break;\n case 'center':\n setAnnotationPosition(annotation, 0.5, 0.5, 'Center', 'Center', target);\n break;\n case 'bottomcenter_top':\n setAnnotationPosition(annotation, 0.5, 1, 'Top', 'Center', target);\n break;\n }\n }\n }\n}\n//set the Annotation Position\nfunction setAnnotationPosition(annotation, offsetX, offsetY, vAlignment, hAlignment, target) {\n annotation.offset.x = offsetX;\n annotation.offset.y = offsetY;\n annotation.verticalAlignment = vAlignment;\n annotation.horizontalAlignment = hAlignment;\n if (vAlignment === 'Top' && hAlignment === 'Left') {\n annotation.margin = { left: 3, top: 3 };\n } else if (vAlignment === 'Top' && hAlignment === 'Right') {\n annotation.margin = { right: 3, top: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Left') {\n annotation.margin = { left: 3, bottom: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Right') {\n annotation.margin = { right: 3, bottom: 3 };\n }\n target.classList.add('e-selected-style');\n}\n//Enable or disable the property panel\nfunction enableOptions(arg) {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (arg.newValue) {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n }\n } else {\n if (!appearance.classList.contains('e-remove-selection')) {\n appearance.classList.add('e-remove-selection');\n }\n\n }\n }\n}\n\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n updatePosition(target.id);\n }\n };\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var centerX = (bounds.width / 2);\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'industry', offsetX: centerX, offsetY: 250,\n annotations: [{ content: 'Industry Competitors' }]\n },\n {\n id: 'potential', offsetX: centerX, offsetY: 110,\n annotations: [{ content: 'Potential Entrants' }]\n },\n {\n id: 'suplier', offsetX: centerX - 190, offsetY: 250,\n annotations: [{ content: 'Suppliers' }]\n },\n {\n id: 'substitutes', offsetX: centerX, offsetY: 390,\n annotations: [{ content: 'Substitutes' }]\n },\n {\n id: 'buyers', offsetX: centerX + 190, offsetY: 250,\n annotations: [{ content: 'Buyers' }]\n }\n ];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'potential', targetID: 'industry'\n }, {\n id: 'connector2', sourceID: 'suplier', targetID: 'industry'\n }, {\n id: 'connector3', sourceID: 'substitutes', targetID: 'industry',\n }, {\n id: 'connector4', sourceID: 'buyers', targetID: 'industry'\n }, {\n id: 'connector5', sourceID: 'potential', targetID: 'buyers',\n segments: [{ direction: 'Right', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector6', sourceID: 'buyers', targetID: 'substitutes',\n segments: [{ direction: 'Bottom', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector7', targetID: 'suplier', sourceID: 'substitutes',\n segments: [{ direction: 'Left', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector9', sourceID: 'suplier', targetID: 'potential',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n selectionChange: function (arg) {\n if (arg.state === 'Changed') {\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (arg.newValue[0]) {\n var node = arg.newValue[0];\n var offset = node.annotations[0].offset;\n if (offset.x === 0 && offset.y === 0) {\n updatePosition('left');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 0 && offset.y === 1) {\n updatePosition('bottoml');\n }\n else if (offset.x === 1 && offset.y === 1) {\n updatePosition('bottomr');\n }\n else if (offset.x === 0.5 && offset.y === 0.5) {\n updatePosition('center');\n }\n else if (offset.x === 0.5 && offset.y === 1) {\n updatePosition('bottomcenter_top');\n }\n }\n enableOptions(arg);\n }\n },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {\n width: 130, height: 50, style: { fill: '#D5EDED', strokeColor: '#7DCFC9', strokeWidth: 1 },\n shape: { cornerRadius: 5 }\n };\n return obj;\n },\n //Sets the default values of a connector\n getConnectorDefaults: function (obj) {\n obj.type = 'Orthogonal';\n obj.constraints = ej.diagrams.ConnectorConstraints.None;\n },\n });\n diagram.appendTo('#diagram');\n diagram.select([diagram.nodes[0]]);\n //Button used to apply for Bold of the Annotation\n var bold = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-bold',\n });\n bold.appendTo('#bold');\n bold.element.onclick = function () { updateAnnotation('bold'); };\n //Button used to apply for Italic of the Annotation\n var italic = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-italic'\n });\n italic.appendTo('#italic');\n italic.element.onclick = function () { updateAnnotation('italic'); };\n //NumericTextBox used to apply for Fontsize of the Annotation\n var fontSize = new ej.inputs.NumericTextBox({\n value: 0, min: 1,\n max: 8, width: '100%',\n format: '##.##',\n step: 2,\n change: function () { updateAnnotation('fontsize'); }\n });\n fontSize.appendTo('#fontSize');\n fontSize.dataBind();\n //Colorpicker used to apply for Color of the Annotation\n var fontColor = new ej.inputs.ColorPicker({\n value: '#000', change: function (arg) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n node.annotations[j].style.color = arg.currentValue.rgba;\n diagram.dataBind();\n }\n }\n }\n });\n fontColor.appendTo('#fontcolor');\n //Button used to apply for Underline of the Annotation\n var underLine = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-underline'\n });\n underLine.appendTo('#underline');\n underLine.element.onclick = function () { updateAnnotation('underline'); };\n //FontType Collection\n var fontType = [\n { type: 'Arial', text: 'Arial' },\n { type: 'Aharoni', text: 'Aharoni' },\n { type: 'Bell MT', text: 'Bell MT' },\n { type: 'Fantasy', text: 'Fantasy' },\n { type: 'Times New Roman', text: 'Times New Roman' },\n { type: 'Segoe UI', text: 'Segoe UI' },\n { type: 'Verdana', text: 'Verdana' }\n ];\n //DropDownList used to apply for fontFamily of the Annotation\n var fontFamily = new ej.dropdowns.DropDownList({\n dataSource: fontType,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type',\n index: 0, change: function () {\n updateAnnotation('fontfamily');\n }\n });\n fontFamily.appendTo('#fontfamily');\n\n var templateList = [\n { value: 'none', text: 'None' },\n { value: 'industry', text: 'Industry Competitors' },\n { value: 'suppliers', text: 'Suppliers' },\n { value: 'potential', text: 'Potential Entrants' },\n { value: 'buyers', text: 'Buyers' },\n { value: 'substitutes', text: 'Substitutes' }\n ];\n\n var template = new ej.dropdowns.DropDownList({\n dataSource: templateList,\n fields: { value: 'value', text: 'text' }, popupWidth: 200,\n width: '100%', placeholder: 'select a template', index: 0,\n change: function (args) {\n updateAnnotation('template', null, args.value.toString());\n }\n });\n template.appendTo('#template');\n\n var labelConstraints = new ej.buttons.CheckBox({\n checked: false,\n label: 'Label interaction',\n change: function () {\n updateAnnotation('interaction', null, null);\n }\n });\n labelConstraints.appendTo('#labelConstraints');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n
        \n Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n Templates\n
        \n
        \n \n
        \n
        \n
        \n
        \n Behaviour\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n/**\n * Getting started - Annotation\n */\n// tslint:disable-next-line:max-func-body-length\n\nvar diagram;\nvar fontSize;\nvar fontColor;\nvar fontFamily;\nvar bold;\nvar italic;\nvar underLine;\nvar template;\nvar labelConstraints;\nvar underline;\n\n\n//Apply the appearence of the Annotation \nfunction updateAnnotation(value, fontSize, fontFamily) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotationStyle = node.annotations[j].style;\n if (value === 'fontsize') {\n annotationStyle.fontSize = fontSize.value;\n } else if (value === 'underline') {\n annotationStyle.textDecoration = 'Underline';\n } else if (value === 'fontfamily') {\n annotationStyle.fontFamily = fontFamily.value.toString();\n } else if (value === 'bold') {\n annotationStyle.bold = true;\n } else if (value === 'italic') {\n annotationStyle.italic = true;\n } else if (value === 'template') {\n if (fontFamily === 'none') {\n node.annotations[j].template = '';\n node.annotations[j].width = undefined;\n node.annotations[j].height = undefined;\n } else {\n node.annotations[j].width = 25;\n node.annotations[j].height = 25;\n node.annotations[j].template =\n '';\n }\n } else if (value === 'interaction') {\n node.annotations[j].constraints = node.annotations[j].constraints ^ ej.diagrams.AnnotationConstraints.Interaction;\n }\n diagram.dataBind();\n }\n }\n}\n//Update the Annotation Position based on the selection\nfunction updatePosition(id) {\n var target = document.getElementById(id);\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotation = node.annotations[j];\n switch (target.id) {\n case 'left':\n setAnnotationPosition(annotation, 0, 0, 'Top', 'Left', target);\n break;\n case 'right':\n setAnnotationPosition(annotation, 1, 0, 'Top', 'Right', target);\n break;\n case 'bottoml':\n setAnnotationPosition(annotation, 0, 1, 'Bottom', 'Left', target);\n break;\n case 'bottomr':\n setAnnotationPosition(annotation, 1, 1, 'Bottom', 'Right', target);\n break;\n case 'center':\n setAnnotationPosition(annotation, 0.5, 0.5, 'Center', 'Center', target);\n break;\n case 'bottomcenter_top':\n setAnnotationPosition(annotation, 0.5, 1, 'Top', 'Center', target);\n break;\n }\n }\n }\n}\n//set the Annotation Position\nfunction setAnnotationPosition(annotation, offsetX, offsetY, vAlignment, hAlignment, target) {\n annotation.offset.x = offsetX;\n annotation.offset.y = offsetY;\n annotation.verticalAlignment = vAlignment;\n annotation.horizontalAlignment = hAlignment;\n if (vAlignment === 'Top' && hAlignment === 'Left') {\n annotation.margin = { left: 3, top: 3 };\n } else if (vAlignment === 'Top' && hAlignment === 'Right') {\n annotation.margin = { right: 3, top: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Left') {\n annotation.margin = { left: 3, bottom: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Right') {\n annotation.margin = { right: 3, bottom: 3 };\n }\n target.classList.add('e-selected-style');\n}\n//Enable or disable the property panel\nfunction enableOptions(arg) {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (arg.newValue) {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n }\n } else {\n if (!appearance.classList.contains('e-remove-selection')) {\n appearance.classList.add('e-remove-selection');\n }\n\n }\n }\n}\n\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n updatePosition(target.id);\n }\n };\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var centerX = (bounds.width / 2);\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'industry', offsetX: centerX, offsetY: 250,\n annotations: [{ content: 'Industry Competitors' }]\n },\n {\n id: 'potential', offsetX: centerX, offsetY: 110,\n annotations: [{ content: 'Potential Entrants' }]\n },\n {\n id: 'suplier', offsetX: centerX - 190, offsetY: 250,\n annotations: [{ content: 'Suppliers' }]\n },\n {\n id: 'substitutes', offsetX: centerX, offsetY: 390,\n annotations: [{ content: 'Substitutes' }]\n },\n {\n id: 'buyers', offsetX: centerX + 190, offsetY: 250,\n annotations: [{ content: 'Buyers' }]\n }\n ];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'potential', targetID: 'industry'\n }, {\n id: 'connector2', sourceID: 'suplier', targetID: 'industry'\n }, {\n id: 'connector3', sourceID: 'substitutes', targetID: 'industry',\n }, {\n id: 'connector4', sourceID: 'buyers', targetID: 'industry'\n }, {\n id: 'connector5', sourceID: 'potential', targetID: 'buyers',\n segments: [{ direction: 'Right', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector6', sourceID: 'buyers', targetID: 'substitutes',\n segments: [{ direction: 'Bottom', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector7', targetID: 'suplier', sourceID: 'substitutes',\n segments: [{ direction: 'Left', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector9', sourceID: 'suplier', targetID: 'potential',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n selectionChange: function (arg) {\n if (arg.state === 'Changed') {\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (arg.newValue[0]) {\n var node = arg.newValue[0];\n var offset = node.annotations[0].offset;\n if (offset.x === 0 && offset.y === 0) {\n updatePosition('left');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 0 && offset.y === 1) {\n updatePosition('bottoml');\n }\n else if (offset.x === 1 && offset.y === 1) {\n updatePosition('bottomr');\n }\n else if (offset.x === 0.5 && offset.y === 0.5) {\n updatePosition('center');\n }\n else if (offset.x === 0.5 && offset.y === 1) {\n updatePosition('bottomcenter_top');\n }\n }\n enableOptions(arg);\n }\n },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {\n width: 130, height: 50, style: { fill: '#D5EDED', strokeColor: '#7DCFC9', strokeWidth: 1 },\n shape: { cornerRadius: 5 }\n };\n return obj;\n },\n //Sets the default values of a connector\n getConnectorDefaults: function (obj) {\n obj.type = 'Orthogonal';\n obj.constraints = ej.diagrams.ConnectorConstraints.None;\n },\n });\n diagram.appendTo('#diagram');\n diagram.select([diagram.nodes[0]]);\n //Button used to apply for Bold of the Annotation\n bold = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-bold',\n });\n bold.appendTo('#bold');\n bold.element.onclick = function () { updateAnnotation('bold'); };\n //Button used to apply for Italic of the Annotation\n italic = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-italic'\n });\n italic.appendTo('#italic');\n italic.element.onclick = function () { updateAnnotation('italic'); };\n //NumericTextBox used to apply for Fontsize of the Annotation\n fontSize = new ej.inputs.NumericTextBox({\n value: 0, min: 1,\n max: 8, width: '100%',\n format: '##.##',\n step: 2,\n change: function () { updateAnnotation('fontsize', fontSize); }\n });\n fontSize.appendTo('#fontSize');\n fontSize.dataBind();\n //Colorpicker used to apply for Color of the Annotation\n fontColor = new ej.inputs.ColorPicker({\n value: '#000', change: function (arg) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n node.annotations[j].style.color = arg.currentValue.rgba;\n diagram.dataBind();\n }\n }\n }\n });\n fontColor.appendTo('#fontcolor');\n //Button used to apply for Underline of the Annotation\n underLine = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-underline'\n });\n underLine.appendTo('#underline');\n underLine.element.onclick = function () { updateAnnotation('underline'); };\n //FontType Collection\n var fontType = [\n { type: 'Arial', text: 'Arial' },\n { type: 'Aharoni', text: 'Aharoni' },\n { type: 'Bell MT', text: 'Bell MT' },\n { type: 'Fantasy', text: 'Fantasy' },\n { type: 'Times New Roman', text: 'Times New Roman' },\n { type: 'Segoe UI', text: 'Segoe UI' },\n { type: 'Verdana', text: 'Verdana' }\n ];\n //DropDownList used to apply for fontFamily of the Annotation\n fontFamily = new ej.dropdowns.DropDownList({\n dataSource: fontType,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type',\n index: 0, change: function () {\n updateAnnotation('fontfamily', null, fontFamily);\n }\n });\n fontFamily.appendTo('#fontfamily');\n\n templateList = [\n { value: 'none', text: 'None' },\n { value: 'industry', text: 'Industry Competitors' },\n { value: 'suppliers', text: 'Suppliers' },\n { value: 'potential', text: 'Potential Entrants' },\n { value: 'buyers', text: 'Buyers' },\n { value: 'substitutes', text: 'Substitutes' }\n ];\n\n var template = new ej.dropdowns.DropDownList({\n dataSource: templateList,\n fields: { value: 'value', text: 'text' }, popupWidth: 200,\n width: '100%', placeholder: 'select a template', index: 0,\n change: function (args) {\n updateAnnotation('template', null, args.value.toString());\n }\n });\n template.appendTo('#template');\n\n labelConstraints = new ej.buttons.CheckBox({\n checked: false,\n label: 'Label interaction',\n change: function () {\n updateAnnotation('interaction', null, null);\n }\n });\n labelConstraints.appendTo('#labelConstraints');\n"} \ No newline at end of file diff --git a/src/diagram/getting-started-annotation.js b/src/diagram/getting-started-annotation.js index 8f56e4c4..60c7668d 100644 --- a/src/diagram/getting-started-annotation.js +++ b/src/diagram/getting-started-annotation.js @@ -5,6 +5,15 @@ ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo); // tslint:disable-next-line:max-func-body-length var diagram; +var fontSize; +var fontColor; +var fontFamily; +var bold; +var italic; +var underLine; +var template; +var labelConstraints; +var underline; //Apply the appearence of the Annotation @@ -223,31 +232,31 @@ this.default = function () { diagram.appendTo('#diagram'); diagram.select([diagram.nodes[0]]); //Button used to apply for Bold of the Annotation - var bold = new ej.buttons.Button({ + bold = new ej.buttons.Button({ cssClass: 'e-small', iconCss: 'e-ddb-icons e-bold', }); bold.appendTo('#bold'); bold.element.onclick = function () { updateAnnotation('bold'); }; //Button used to apply for Italic of the Annotation - var italic = new ej.buttons.Button({ + italic = new ej.buttons.Button({ cssClass: 'e-small', iconCss: 'e-ddb-icons e-italic' }); italic.appendTo('#italic'); italic.element.onclick = function () { updateAnnotation('italic'); }; //NumericTextBox used to apply for Fontsize of the Annotation - var fontSize = new ej.inputs.NumericTextBox({ + fontSize = new ej.inputs.NumericTextBox({ value: 0, min: 1, max: 8, width: '100%', format: '##.##', step: 2, - change: function () { updateAnnotation('fontsize'); } + change: function () { updateAnnotation('fontsize', fontSize); } }); fontSize.appendTo('#fontSize'); fontSize.dataBind(); //Colorpicker used to apply for Color of the Annotation - var fontColor = new ej.inputs.ColorPicker({ + fontColor = new ej.inputs.ColorPicker({ value: '#000', change: function (arg) { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { var node = diagram.selectedItems.nodes[i]; @@ -260,7 +269,7 @@ this.default = function () { }); fontColor.appendTo('#fontcolor'); //Button used to apply for Underline of the Annotation - var underLine = new ej.buttons.Button({ + underLine = new ej.buttons.Button({ cssClass: 'e-small', iconCss: 'e-ddb-icons e-underline' }); @@ -277,17 +286,17 @@ this.default = function () { { type: 'Verdana', text: 'Verdana' } ]; //DropDownList used to apply for fontFamily of the Annotation - var fontFamily = new ej.dropdowns.DropDownList({ + fontFamily = new ej.dropdowns.DropDownList({ dataSource: fontType, fields: { value: 'type', text: 'text' }, popupWidth: 150, width: '100%', placeholder: 'select a font type', index: 0, change: function () { - updateAnnotation('fontfamily'); + updateAnnotation('fontfamily', null, fontFamily); } }); fontFamily.appendTo('#fontfamily'); - var templateList = [ + templateList = [ { value: 'none', text: 'None' }, { value: 'industry', text: 'Industry Competitors' }, { value: 'suppliers', text: 'Suppliers' }, @@ -306,7 +315,7 @@ this.default = function () { }); template.appendTo('#template'); - var labelConstraints = new ej.buttons.CheckBox({ + labelConstraints = new ej.buttons.CheckBox({ checked: false, label: 'Label interaction', change: function () { diff --git a/src/diagram/getting-started-node-stack.json b/src/diagram/getting-started-node-stack.json index 145dff16..57fb8f44 100644 --- a/src/diagram/getting-started-node-stack.json +++ b/src/diagram/getting-started-node-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\nvar diagram;\n\n/**\n * Getting started - nodes\n */\n//Enable or disable the Constraints for Node.\nfunction updateAnnotation(args) {\n for (var i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n if (args.event.target.id === 'lock') {\n if (args.checked) {\n node.constraints &= ~(ej.diagrams.NodeConstraints.Resize | ej.diagrams.NodeConstraints.Rotate | ej.diagrams.NodeConstraints.Drag);\n node.constraints |= ej.diagrams.NodeConstraints.ReadOnly;\n } else {\n node.constraints |= ej.diagrams.NodeConstraints.Default & ~(ej.diagrams.NodeConstraints.ReadOnly);\n }\n } else {\n if (element.checked) {\n node.constraints |= ej.diagrams.NodeConstraints.AspectRatio;\n } else {\n node.constraints &= ~ej.diagrams.NodeConstraints.AspectRatio;\n }\n }\n diagram.dataBind();\n }\n}\n//Set customStyle for Node.\nfunction applyStyle(node, width, array, con, type) {\n node.style.fill = '#37909A';\n node.style.strokeWidth = width;\n node.style.strokeColor = '#024249';\n node.style.strokeDashArray = array;\n if (!type || type === 'None') {\n node.style.gradient.type = 'None';\n } else {\n var gradient;\n gradient = {\n cx: 50, cy: 50, fx: 50, fy: 50,\n stops: [{ color: '#00555b', offset: 0 },\n { color: '#37909A', offset: 90 }],\n type: 'Radial'\n };\n node.style.gradient = gradient;\n }\n if (con & ej.diagrams.NodeConstraints.Shadow) {\n node.shadow = { angle: 45, distance: 15, opacity: 0.3, color: 'grey' };\n node.constraints |= con;\n } else {\n node.constraints &= con;\n }\n diagram.dataBind();\n}\n\n// tslint:disable-next-line:max-func-body-length\n\n var nodes = [\n { id: 'sdlc', offsetX: 300, offsetY: 288, annotations: [{ content: 'SDLC' }] },\n { id: 'support', offsetX: 150, offsetY: 250, annotations: [{ content: 'Support' }] },\n { id: 'analysis', offsetX: 300, offsetY: 150, annotations: [{ content: 'Analysis' }] },\n { id: 'design', offsetX: 450, offsetY: 250, annotations: [{ content: 'Design' }] },\n { id: 'implement', offsetX: 400, offsetY: 400, annotations: [{ content: 'implement' }] },\n { id: 'deploy', offsetX: 200, offsetY: 400, annotations: [{ content: 'Deploy' }] }\n ];\n var connections = [\n { id: 'connector1', sourceID: 'analysis', targetID: 'design' },\n { id: 'connector2', sourceID: 'design', targetID: 'implement' },\n { id: 'connector3', sourceID: 'implement', targetID: 'deploy' },\n { id: 'connector4', sourceID: 'deploy', targetID: 'support' },\n { id: 'connector5', sourceID: 'support', targetID: 'analysis' }\n ];\n //Initialize the diagram\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connections,\n //Sets the default values of a nodes\n getNodeDefaults: function (obj) {\n obj.width = 100;\n obj.height = 100;\n obj.shape = { shape: 'Ellipse' };\n obj.style = { fill: '#37909A', strokeColor: '#024249' };\n obj.annotations[0].margin = { left: 10, right: 10 };\n obj.annotations[0].style = { color: 'white', fill: 'none', strokeColor: 'none' };\n return obj;\n },\n //Sets the default values of a Connectors\n getConnectorDefaults: function (connector) {\n connector.targetDecorator.style = { fill: '#024249', strokeColor: '#024249' };\n return { style: { strokeColor: '#024249', strokeWidth: 2 } };\n },\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }\n });\n diagram.appendTo('#diagram');\n\n //Enable or disable the AspectRatio for Node.\n var element = new ej.buttons.CheckBox({\n checked: false, label: 'Aspect ratio',\n change: updateAnnotation\n });\n element.appendTo('#aspectRatio');\n //Enable or disable the Interaction for Node.\n var lockElement = new ej.buttons.CheckBox({\n checked: false, label: 'Lock',\n change: updateAnnotation\n });\n lockElement.appendTo('#lock');\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n for (var i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n switch (target.id) {\n case 'preview0':\n applyStyle(node, 0, '', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview1':\n applyStyle(node, 2, '', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview2':\n applyStyle(node, 2, '5 5', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview3':\n applyStyle(node, 2, '5 5', ~ej.diagrams.NodeConstraints.Shadow, 'Radial');\n break;\n case 'preview4':\n applyStyle(node, 2, '5 5', ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n }\n target.classList.add('e-selected-style');\n }\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\nvar diagram;\n\n/**\n * Getting started - nodes\n */\n//Enable or disable the Constraints for Node.\nfunction updateAnnotation(args) {\n for (var i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n if (args.event.target.id === 'lock') {\n if (args.checked) {\n node.constraints &= ~(ej.diagrams.NodeConstraints.Resize | ej.diagrams.NodeConstraints.Rotate | ej.diagrams.NodeConstraints.Drag);\n node.constraints |= ej.diagrams.NodeConstraints.ReadOnly;\n } else {\n node.constraints |= ej.diagrams.NodeConstraints.Default & ~(ej.diagrams.NodeConstraints.ReadOnly);\n }\n } else {\n if (element.checked) {\n node.constraints |= ej.diagrams.NodeConstraints.AspectRatio;\n } else {\n node.constraints &= ~ej.diagrams.NodeConstraints.AspectRatio;\n }\n }\n diagram.dataBind();\n }\n}\n//Set customStyle for Node.\nfunction applyStyle(node, width, array, con, type) {\n node.style.fill = '#37909A';\n node.style.strokeWidth = width;\n node.style.strokeColor = '#024249';\n node.style.strokeDashArray = array;\n if (!type || type === 'None') {\n node.style.gradient.type = 'None';\n } else {\n var gradient;\n gradient = {\n cx: 50, cy: 50, fx: 50, fy: 50,\n stops: [{ color: '#00555b', offset: 0 },\n { color: '#37909A', offset: 90 }],\n type: 'Radial'\n };\n node.style.gradient = gradient;\n }\n if (con & ej.diagrams.NodeConstraints.Shadow) {\n node.shadow = { angle: 45, distance: 15, opacity: 0.3, color: 'grey' };\n node.constraints |= con;\n } else {\n node.constraints &= con;\n }\n diagram.dataBind();\n}\n\n// tslint:disable-next-line:max-func-body-length\n\n var nodes = [\n { id: 'sdlc', offsetX: 300, offsetY: 288, annotations: [{ content: 'SDLC' }] },\n { id: 'support', offsetX: 150, offsetY: 250, annotations: [{ content: 'Support' }] },\n { id: 'analysis', offsetX: 300, offsetY: 150, annotations: [{ content: 'Analysis' }] },\n { id: 'design', offsetX: 450, offsetY: 250, annotations: [{ content: 'Design' }] },\n { id: 'implement', offsetX: 400, offsetY: 400, annotations: [{ content: 'implement' }] },\n { id: 'deploy', offsetX: 200, offsetY: 400, annotations: [{ content: 'Deploy' }] }\n ];\n var connections = [\n { id: 'connector1', sourceID: 'analysis', targetID: 'design' },\n { id: 'connector2', sourceID: 'design', targetID: 'implement' },\n { id: 'connector3', sourceID: 'implement', targetID: 'deploy' },\n { id: 'connector4', sourceID: 'deploy', targetID: 'support' },\n { id: 'connector5', sourceID: 'support', targetID: 'analysis' }\n ];\n //Initialize the diagram\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connections,\n //Sets the default values of a nodes\n getNodeDefaults: function (obj) {\n obj.width = 100;\n obj.height = 100;\n obj.shape = { shape: 'Ellipse' };\n obj.style = { fill: '#37909A', strokeColor: '#024249' };\n obj.annotations[0].margin = { left: 10, right: 10 };\n obj.annotations[0].style = { color: 'white', fill: 'none', strokeColor: 'none' };\n return obj;\n },\n //Sets the default values of a Connectors\n getConnectorDefaults: function (connector) {\n connector.targetDecorator.style = { fill: '#024249', strokeColor: '#024249' };\n return { style: { strokeColor: '#024249', strokeWidth: 2 } };\n },\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }\n });\n diagram.appendTo('#diagram');\n\n //Enable or disable the AspectRatio for Node.\n var element = new ej.buttons.CheckBox({\n checked: false, label: 'Aspect ratio',\n change: updateAnnotation\n });\n element.appendTo('#aspectRatio');\n //Enable or disable the Interaction for Node.\n var lockElement = new ej.buttons.CheckBox({\n checked: false, label: 'Lock',\n change: updateAnnotation\n });\n lockElement.appendTo('#lock');\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n\n if (target.className === 'image-pattern-style') {\n for (var i = 0; i < diagram.nodes.length; i++) {\n var node = diagram.nodes[i];\n switch (target.id) {\n case 'preview0':\n applyStyle(node, 0, '', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview1':\n applyStyle(node, 2, '', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview2':\n applyStyle(node, 2, '5 5', ~ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n case 'preview3':\n applyStyle(node, 2, '5 5', ~ej.diagrams.NodeConstraints.Shadow, 'Radial');\n break;\n case 'preview4':\n applyStyle(node, 2, '5 5', ej.diagrams.NodeConstraints.Shadow, undefined);\n break;\n }\n\n }\n }\n };\n\n"} \ No newline at end of file diff --git a/src/diagram/getting-started-node.html b/src/diagram/getting-started-node.html index d690478b..ea1c3373 100644 --- a/src/diagram/getting-started-node.html +++ b/src/diagram/getting-started-node.html @@ -79,7 +79,7 @@

        - This sample visualizes the different stages of a software development life cycle using a circular flow diagram, and how to customize the appearance of the nodes. + This sample visualizes the different stages of a software development life cycle using a circular flow diagram. Customizing the appearance of the nodes is illustrated in this example.

        diff --git a/src/diagram/getting-started-node.js b/src/diagram/getting-started-node.js index 6732449e..0bec50fc 100644 --- a/src/diagram/getting-started-node.js +++ b/src/diagram/getting-started-node.js @@ -1,6 +1,7 @@ ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo); var diagram; +var element; /** * Getting started - nodes @@ -93,7 +94,7 @@ this.default = function () { diagram.appendTo('#diagram'); //Enable or disable the AspectRatio for Node. - var element = new ej.buttons.CheckBox({ + element = new ej.buttons.CheckBox({ checked: false, label: 'Aspect ratio', change: updateAnnotation }); @@ -108,10 +109,12 @@ this.default = function () { //Click event for Appearance of the Property Panel document.getElementById('appearance').onclick = function (args) { var target = args.target; + // custom code start var selectedElement = document.getElementsByClassName('e-selected-style'); if (selectedElement.length) { selectedElement[0].classList.remove('e-selected-style'); } + // custom code end if (target.className === 'image-pattern-style') { for (var i = 0; i < diagram.nodes.length; i++) { var node = diagram.nodes[i]; @@ -132,7 +135,9 @@ this.default = function () { applyStyle(node, 2, '5 5', ej.diagrams.NodeConstraints.Shadow, undefined); break; } + // custom code start target.classList.add('e-selected-style'); + // custom code end } } }; diff --git a/src/diagram/hierarchical-model-stack.json b/src/diagram/hierarchical-model-stack.json index 31385206..33dfebc8 100644 --- a/src/diagram/hierarchical-model-stack.json +++ b/src/diagram/hierarchical-model-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.LayoutAnimation);\n/**\n * hierarchical-model\n */\n//Click event for Appearance of the Property Panel.\n\n//sets node default value\nfunction nodeDefaults(obj, diagram) {\n obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };\n obj.borderColor = '#3a6eb5';\n obj.backgroundColor = '#659be5';\n obj.shape.margin = { left: 5, right: 5, bottom: 5, top: 5 };\n obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: 0.5, y: 1 } };\n obj.expandIcon.verticalAlignment = 'Auto';\n obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.offset = { x: 0.5, y: 1 };\n obj.collapseIcon.verticalAlignment = 'Auto';\n obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.height = 10;\n obj.collapseIcon.width = 10;\n obj.collapseIcon.padding.top = 5;\n obj.collapseIcon.shape = 'None';\n obj.collapseIcon.fill = 'lightgray';\n return obj;\n}\n//sets connector default value\nfunction connectorDefaults(connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#6d6d6d';\n connector.constraints = 0;\n connector.cornerRadius = 5;\n return connector;\n}\n\n// tslint:disable-next-line:max-func-body-length\n\n //Initializes the nodes for the diagram\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.hierarchicalTree),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text', content: data.Name };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'HierarchicalTree', verticalSpacing: 30, horizontalSpacing: 40,\n enableAnimation: true\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return nodeDefaults(obj, diagram);\n }, getConnectorDefaults: function (connector, diagram) {\n return connectorDefaults(connector, diagram);\n }\n });\n diagram.appendTo('#diagram');\n\n var hSpacing = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.horizontalSpacing = Number(hSpacing.value);\n diagram.dataBind();\n }\n });\n hSpacing.appendTo('#hSpacing');\n var vSpacing = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.verticalSpacing = Number(vSpacing.value);\n diagram.dataBind();\n }\n });\n vSpacing.appendTo('#vSpacing');\n document.getElementById('appearance').onclick = function (args) {\n var targetelement = args.target;\n var selectedElement1 = document.getElementsByClassName('e-selected-style');\n if (selectedElement1.length) {\n selectedElement1[0].classList.remove('e-selected-style');\n }\n if (targetelement.className === 'image-pattern-style') {\n var id = args.target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n target.classList.add('e-selected-style');\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.LayoutAnimation);\n/**\n * hierarchical-model\n */\n//Click event for Appearance of the Property Panel.\n\n//sets node default value\nfunction nodeDefaults(obj, diagram) {\n obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };\n obj.borderColor = '#3a6eb5';\n obj.backgroundColor = '#659be5';\n obj.shape.margin = { left: 5, right: 5, bottom: 5, top: 5 };\n obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: 0.5, y: 1 } };\n obj.expandIcon.verticalAlignment = 'Auto';\n obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.offset = { x: 0.5, y: 1 };\n obj.collapseIcon.verticalAlignment = 'Auto';\n obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.height = 10;\n obj.collapseIcon.width = 10;\n obj.collapseIcon.padding.top = 5;\n obj.collapseIcon.shape = 'None';\n obj.collapseIcon.fill = 'lightgray';\n return obj;\n}\n//sets connector default value\nfunction connectorDefaults(connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#6d6d6d';\n connector.constraints = 0;\n connector.cornerRadius = 5;\n return connector;\n}\n\n// tslint:disable-next-line:max-func-body-length\n\n //Initializes the nodes for the diagram\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.hierarchicalTree),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text', content: data.Name };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'HierarchicalTree', verticalSpacing: 30, horizontalSpacing: 40,\n enableAnimation: true\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return nodeDefaults(obj, diagram);\n }, getConnectorDefaults: function (connector, diagram) {\n return connectorDefaults(connector, diagram);\n }\n });\n diagram.appendTo('#diagram');\n\n var hSpacing = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.horizontalSpacing = Number(hSpacing.value);\n diagram.dataBind();\n }\n });\n hSpacing.appendTo('#hSpacing');\n var vSpacing = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.verticalSpacing = Number(vSpacing.value);\n diagram.dataBind();\n }\n });\n vSpacing.appendTo('#vSpacing');\n document.getElementById('appearance').onclick = function (args) {\n var targetelement = args.target;\n\n if (targetelement.className === 'image-pattern-style') {\n var id = args.target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n args.target.classList.add('e-selected-style');\n }\n };\n\n"} \ No newline at end of file diff --git a/src/diagram/hierarchical-model.js b/src/diagram/hierarchical-model.js index 44e178f2..018e0461 100644 --- a/src/diagram/hierarchical-model.js +++ b/src/diagram/hierarchical-model.js @@ -80,17 +80,19 @@ this.default = function () { vSpacing.appendTo('#vSpacing'); document.getElementById('appearance').onclick = function (args) { var targetelement = args.target; + // custom code start var selectedElement1 = document.getElementsByClassName('e-selected-style'); if (selectedElement1.length) { selectedElement1[0].classList.remove('e-selected-style'); } + // custom code end if (targetelement.className === 'image-pattern-style') { var id = args.target.id; var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length); diagram.layout.orientation = orientation1; diagram.dataBind(); diagram.doLayout(); - target.classList.add('e-selected-style'); + args.target.classList.add('e-selected-style'); } }; }; diff --git a/src/diagram/history-manager-stack.json b/src/diagram/history-manager-stack.json new file mode 100644 index 00000000..e3a0cda7 --- /dev/null +++ b/src/diagram/history-manager-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n \n\n
        \n
        \n
        \n
        \n
        \n
        \n History manager settings\n
        \n
        \n
        \n
        \n
        \n
        \n \n Undo Stack\n \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n Redo Stack\n \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        Stack Limit
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n
        \n\n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\nvar diagram;\nvar nodes = [\n {\n id: 'node1', offsetX: 400, offsetY: 30, style: { fill: '#FFB2B2', strokeColor: '#FFB2B2' }, width: 70, height: 40,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{ id: 'label1', content: 'Start' }],\n },\n {\n id: 'node2', offsetX: 400, offsetY: 100, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' },\n shape: { type: 'Flow', shape: 'Process' }, annotations: [{ id: 'label1', content: 'Design' }],\n ports: [{ id: 'designPort', offset: { x: 0, y: 0.5 } }]\n },\n {\n id: 'node3', offsetX: 400, offsetY: 180, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' },\n annotations: [{ id: 'label1', content: 'Coding' }],\n shape: { type: 'Flow', shape: 'Process' }, ports: [{ id: 'codingPort', offset: { x: 0, y: 0.5 } }]\n },\n {\n id: 'node4', offsetX: 400, offsetY: 260, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' },\n annotations: [{ id: 'label1', content: 'Testing' }], shape: { type: 'Flow', shape: 'Process' }\n },\n {\n id: 'node5', offsetX: 400, offsetY: 340, style: { fill: '#A2D8B0', strokeColor: '#A2D8B0' }, width: 80, height: 60,\n annotations: [{ id: 'label1', content: 'Errors?' }], shape: { type: 'Flow', shape: 'Decision' }\n },\n {\n id: 'node6', offsetX: 400, offsetY: 430, style: { fill: '#FFB2B2', strokeColor: '#FFB2B2' }, width: 70, height: 40,\n annotations: [{ id: 'label1', content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' }\n },\n {\n id: 'node7', width: 100, offsetX: 220, offsetY: 180, style: { fill: '#A2D8B0', strokeColor: '#A2D8B0' }, height: 60,\n annotations: [{ id: 'label1', content: 'Design Error?' }], shape: { type: 'Flow', shape: 'Decision' },\n ports: [\n { id: 'porterror', offset: { x: 0.5, y: 0 } },\n { id: 'portcoding', offset: { x: 1, y: 0.5 } },\n { id: 'portdesign', offset: { x: 0.5, y: 1 } }\n ]\n }\n];\n\nvar connectors = [\n { id: 'connector1', sourceID: 'node1', targetID: 'node2' },\n { id: 'connector2', sourceID: 'node2', targetID: 'node3' },\n { id: 'connector3', sourceID: 'node3', targetID: 'node4' },\n { id: 'connector4', sourceID: 'node4', targetID: 'node5' },\n {\n id: 'connector5', sourceID: 'node5', targetID: 'node6',\n annotations: [{ content: 'No', style: { fill: 'white' } }]\n },\n {\n id: 'connector6', sourceID: 'node5', targetID: 'node7', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 150, direction: 'Left' }],\n annotations: [{ content: 'Yes', style: { fill: 'white' } }]\n },\n {\n id: 'connector7', sourceID: 'node7', targetID: 'node3', sourcePortID: 'portcoding',\n targetPortID: 'codingPort', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 10, direction: 'left' }],\n annotations: [{ content: 'No', style: { fill: 'white' } }]\n },\n {\n id: 'connector8', sourceID: 'node7', targetID: 'node2', sourcePortID: 'porterror',\n targetPortID: 'designPort', type: 'Orthogonal',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }]\n }\n];\n\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', nodes: nodes, connectors: connectors,\n getNodeDefaults: getNodeDefaults,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n getConnectorDefaults: function (obj) {\n obj.style.fill = '#707070';\n obj.targetDecorator.style.fill = '#707070';\n obj.targetDecorator.style.strokeColor = '#707070';\n }\n });\n diagram.appendTo('#diagram');\n\n diagram.historyChange = function (arg) {\n getValue();\n };\n diagram.fitToPage({ mode: 'Height' });\n var stackLimit = new ej.inputs.NumericTextBox({\n value: 0, min: 0, max: 50, width: '100%',\n format: '##.##', step: 1,\n change: function (args) {\n diagram.setStackLimit(args.value);\n }\n });\n stackLimit.appendTo('#StackLimit');\n\n var listviewInstance = new ej.lists.ListView({\n fields: { value: 'value', text: 'text' },\n headerTitle: 'Device settings',\n height: \"180px\",\n });\n listviewInstance.appendTo(\"#redoList\");\n\n var listview = new ej.lists.ListView({\n fields: { value: 'value', text: 'text' },\n headerTitle: 'Device settings',\n height: \"180px\",\n });\n listview.appendTo(\"#undoList\");\n\n var clearHistory = new ej.buttons.Button({\n content: 'Clear History',\n cssClass: 'e-small'\n });\n clearHistory.appendTo('#clearHistory');\n clearHistory.element.onclick = function () {\n diagram.clearHistory();\n getValue();\n };\n var startGroupAction = new ej.buttons.Button({\n isToggle: true,\n cssClass: 'e-small'\n });\n startGroupAction.appendTo('#startGroupAction');\n startGroupAction.element.onclick = function () {\n if (startGroupAction.element.classList.contains('e-active')) {\n startGroupAction.content = 'End Group Action';\n diagram.startGroupAction();\n }\n else {\n diagram.endGroupAction();\n startGroupAction.content = 'Start Group Action';\n }\n };\n var undoButton = new ej.buttons.Button({\n disabled: true\n });\n undoButton.appendTo('#undo');\n undoButton.element.onclick = function () {\n diagram.undo();\n };\n\n var redoButton = new ej.buttons.Button({\n disabled: true\n });\n redoButton.appendTo('#redo');\n redoButton.element.onclick = function () {\n diagram.redo();\n };\n function getNodeDefaults(obj) {\n obj.annotations[0].style.color = '#111111';\n return obj;\n }\n function getValue() {\n var undoStack = diagram.historyManager.undoStack;\n var redoStack = diagram.historyManager.redoStack;\n var undo = [];\n for (var i = 0; i < undoStack.length; i++) {\n undo.push({ 'text': undoStack[i].type, 'value': undoStack[i].type });\n }\n var redo = [];\n for (var j = 0; j < redoStack.length; j++) {\n redo.push({ 'text': redoStack[j].type, 'value': redoStack[j].type });\n }\n var itemsCount = diagram.historyManager.stackLimit ? diagram.historyManager.stackLimit : 0;\n var undoList = document.getElementById('undoList').ej2_instances[0];\n\n undoButton.disabled = undo.length ? false : true;\n redoButton.disabled = redo.length ? false : true;\n undoList.dataSource = undo;\n undoList.fields = { text: 'text', value: 'text' };\n undoList.index = 0;\n undoList.dataBind();\n var redoList = document.getElementById('redoList').ej2_instances[0];\n redoList.dataSource = redo;\n redoList.fields = { text: 'text', value: 'text' };\n redoList.index = 0;\n redoList.dataBind();\n }\n\n\n"} \ No newline at end of file diff --git a/src/diagram/history-manager.html b/src/diagram/history-manager.html new file mode 100644 index 00000000..8209d598 --- /dev/null +++ b/src/diagram/history-manager.html @@ -0,0 +1,105 @@ +
        + + +
        +
        +
        +
        +
        +
        + History manager settings +
        +
        +
        +
        +
        +
        + + Undo Stack + +
        + +
        +
        +
        +
        +
        +
        +
        +
        + + Redo Stack + +
        + +
        +
        +
        +
        +
        +
        +
        +
        Stack Limit
        +
        +
        + +
        +
        +
        +
        +
        +
        + +
        +
        + +
        + +
        +
        +
        +

        + This sample demonstrates viewing, deleting, limiting diagram history and groups diagram actions and stores it as + a single entry in the history manager.

        +
        +
        +

        + Diagram history are being handle all the diagram history. Using stackLimit property of the history manager + we limit the no. of entries can be stored on the diagram history. Also, we can get the list of entries in the undo + list and redo list using undoStack and redoStack. Also diagram history manager have the + option to group the action as the single entry by the help of the startGroupAction and endGroupAction public + Api. Also, we can add the custom entries to the diagram history. method can be used to print the diagrams. +

        +
        +
        \ No newline at end of file diff --git a/src/diagram/history-manager.js b/src/diagram/history-manager.js new file mode 100644 index 00000000..90a90e5a --- /dev/null +++ b/src/diagram/history-manager.js @@ -0,0 +1,176 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo); +var diagram; +var nodes = [ + { + id: 'node1', offsetX: 400, offsetY: 30, style: { fill: '#FFB2B2', strokeColor: '#FFB2B2' }, width: 70, height: 40, + shape: { type: 'Flow', shape: 'Terminator' }, + annotations: [{ id: 'label1', content: 'Start' }], + }, + { + id: 'node2', offsetX: 400, offsetY: 100, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' }, + shape: { type: 'Flow', shape: 'Process' }, annotations: [{ id: 'label1', content: 'Design' }], + ports: [{ id: 'designPort', offset: { x: 0, y: 0.5 } }] + }, + { + id: 'node3', offsetX: 400, offsetY: 180, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' }, + annotations: [{ id: 'label1', content: 'Coding' }], + shape: { type: 'Flow', shape: 'Process' }, ports: [{ id: 'codingPort', offset: { x: 0, y: 0.5 } }] + }, + { + id: 'node4', offsetX: 400, offsetY: 260, style: { fill: '#DCDCDC', strokeColor: '#DCDCDC' }, + annotations: [{ id: 'label1', content: 'Testing' }], shape: { type: 'Flow', shape: 'Process' } + }, + { + id: 'node5', offsetX: 400, offsetY: 340, style: { fill: '#A2D8B0', strokeColor: '#A2D8B0' }, width: 80, height: 60, + annotations: [{ id: 'label1', content: 'Errors?' }], shape: { type: 'Flow', shape: 'Decision' } + }, + { + id: 'node6', offsetX: 400, offsetY: 430, style: { fill: '#FFB2B2', strokeColor: '#FFB2B2' }, width: 70, height: 40, + annotations: [{ id: 'label1', content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' } + }, + { + id: 'node7', width: 100, offsetX: 220, offsetY: 180, style: { fill: '#A2D8B0', strokeColor: '#A2D8B0' }, height: 60, + annotations: [{ id: 'label1', content: 'Design Error?' }], shape: { type: 'Flow', shape: 'Decision' }, + ports: [ + { id: 'porterror', offset: { x: 0.5, y: 0 } }, + { id: 'portcoding', offset: { x: 1, y: 0.5 } }, + { id: 'portdesign', offset: { x: 0.5, y: 1 } } + ] + } +]; + +var connectors = [ + { id: 'connector1', sourceID: 'node1', targetID: 'node2' }, + { id: 'connector2', sourceID: 'node2', targetID: 'node3' }, + { id: 'connector3', sourceID: 'node3', targetID: 'node4' }, + { id: 'connector4', sourceID: 'node4', targetID: 'node5' }, + { + id: 'connector5', sourceID: 'node5', targetID: 'node6', + annotations: [{ content: 'No', style: { fill: 'white' } }] + }, + { + id: 'connector6', sourceID: 'node5', targetID: 'node7', type: 'Orthogonal', + segments: [{ type: 'Orthogonal', length: 150, direction: 'Left' }], + annotations: [{ content: 'Yes', style: { fill: 'white' } }] + }, + { + id: 'connector7', sourceID: 'node7', targetID: 'node3', sourcePortID: 'portcoding', + targetPortID: 'codingPort', type: 'Orthogonal', + segments: [{ type: 'Orthogonal', length: 10, direction: 'left' }], + annotations: [{ content: 'No', style: { fill: 'white' } }] + }, + { + id: 'connector8', sourceID: 'node7', targetID: 'node2', sourcePortID: 'porterror', + targetPortID: 'designPort', type: 'Orthogonal', + annotations: [{ content: 'Yes', style: { fill: 'white' } }] + } +]; +this.default = function () { + diagram = new ej.diagrams.Diagram({ + width: '100%', height: '600px', nodes: nodes, connectors: connectors, + getNodeDefaults: getNodeDefaults, + snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, + getConnectorDefaults: function (obj) { + obj.style.fill = '#707070'; + obj.targetDecorator.style.fill = '#707070'; + obj.targetDecorator.style.strokeColor = '#707070'; + } + }); + diagram.appendTo('#diagram'); + + diagram.historyChange = function (arg) { + getValue(); + }; + diagram.fitToPage({ mode: 'Height' }); + var stackLimit = new ej.inputs.NumericTextBox({ + value: 0, min: 0, max: 50, width: '100%', + format: '##.##', step: 1, + change: function (args) { + diagram.setStackLimit(args.value); + } + }); + stackLimit.appendTo('#StackLimit'); + + var listviewInstance = new ej.lists.ListView({ + fields: { value: 'value', text: 'text' }, + headerTitle: 'Device settings', + height: "180px", + }); + listviewInstance.appendTo("#redoList"); + + var listview = new ej.lists.ListView({ + fields: { value: 'value', text: 'text' }, + headerTitle: 'Device settings', + height: "180px", + }); + listview.appendTo("#undoList"); + + var clearHistory = new ej.buttons.Button({ + content: 'Clear History', + }); + clearHistory.appendTo('#clearHistory'); + clearHistory.element.onclick = function () { + diagram.clearHistory(); + getValue(); + }; + var startGroupAction = new ej.buttons.Button({ + isToggle: true, + }); + startGroupAction.appendTo('#startGroupAction'); + startGroupAction.element.onclick = function () { + if (startGroupAction.element.classList.contains('e-active')) { + startGroupAction.content = 'End Group Action'; + diagram.startGroupAction(); + } + else { + diagram.endGroupAction(); + startGroupAction.content = 'Start Group Action'; + } + }; + var undoButton = new ej.buttons.Button({ + disabled: true + }); + undoButton.appendTo('#undo'); + undoButton.element.onclick = function () { + diagram.undo(); + }; + + var redoButton = new ej.buttons.Button({ + disabled: true + }); + redoButton.appendTo('#redo'); + redoButton.element.onclick = function () { + diagram.redo(); + }; + function getNodeDefaults(obj) { + obj.annotations[0].style.color = '#111111'; + return obj; + } + function getValue() { + var undoStack = diagram.historyManager.undoStack; + var redoStack = diagram.historyManager.redoStack; + var undo = []; + for (var i = 0; i < undoStack.length; i++) { + undo.push({ 'text': undoStack[i].type, 'value': undoStack[i].type }); + } + var redo = []; + for (var j = 0; j < redoStack.length; j++) { + redo.push({ 'text': redoStack[j].type, 'value': redoStack[j].type }); + } + var itemsCount = diagram.historyManager.stackLimit ? diagram.historyManager.stackLimit : 0; + var undoList = document.getElementById('undoList').ej2_instances[0]; + + undoButton.disabled = undo.length ? false : true; + redoButton.disabled = redo.length ? false : true; + undoList.dataSource = undo; + undoList.fields = { text: 'text', value: 'text' }; + undoList.index = 0; + undoList.dataBind(); + var redoList = document.getElementById('redoList').ej2_instances[0]; + redoList.dataSource = redo; + redoList.fields = { text: 'text', value: 'text' }; + redoList.index = 0; + redoList.dataBind(); + } +}; + diff --git a/src/diagram/key-board-functions-stack.json b/src/diagram/key-board-functions-stack.json index b2e86977..a6db69af 100644 --- a/src/diagram/key-board-functions-stack.json +++ b/src/diagram/key-board-functions-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n

        Built-In Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command
        \n         		\n
        Gesture
        \n
        Select All Ctrl + A
        CutCtrl + X
        CopyCtrl + C
        PasteCtrl + V
        UndoCtrl + Z
        RedoCtrl + Y
        DeleteDelete
        \n
        \n
        \n
        \n

        Custom Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command\n
        \n
        		\n
        Gesture
        \n
        GroupCtrl + G
        UngroupCtrl + U
        \n
        \n
        \n
        \n

        Modified Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command\n
        \n
        		\n
        Gesture
        \n
        Navigate to Parent Node Up Arrow
        Navigate to Child Node Down Arrow
        Navigate to Previous Child Left Arrow
        Navigate to Next Child Right Arrow
        \n
        \n
        \n\n
        \n\n
        ","index.js":"{{ripple}}/**\n * Key Board Interaction sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu, ej.diagrams.HierarchicalTree, ej.diagrams.DataBinding);\n //Custom command for Diagraming elements.\n function getCommandManagerSettings() {\n var commandManager = {\n commands: [{\n name: 'customGroup',\n canExecute: function () {\n if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {\n return true;\n }\n return false;\n },\n execute: function () {\n diagram.group();\n },\n gesture: {\n key: ej.diagrams.Keys.G,\n keyModifiers: ej.diagrams.KeyModifiers.Control\n }\n },\n {\n name: 'customUnGroup',\n canExecute: function () {\n if (diagram.selectedItems.nodes[0].children) {\n return true;\n }\n return false;\n },\n execute: function () {\n diagram.unGroup();\n },\n gesture: {\n key: ej.diagrams.Keys.U,\n keyModifiers: ej.diagrams.KeyModifiers.Control\n }\n },\n {\n name: 'navigationDown',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateLevels(true);\n },\n gesture: { key: ej.diagrams.Keys.Down },\n },\n {\n name: 'navigationUp',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateLevels(false);\n },\n gesture: { key: ej.diagrams.Keys.Up },\n },\n {\n name: 'navigationLeft',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateToSiblings(true);\n },\n gesture: { key: ej.diagrams.Keys.Right },\n },\n {\n name: 'navigationRight',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateToSiblings(false);\n },\n gesture: { key: ej.diagrams.Keys.Left },\n }]\n };\n return commandManager;\n}\nfunction navigateLevels(isParent) {\n var node = diagram.selectedItems.nodes[0];\n if (node) {\n var connectorId = isParent ? node.outEdges[0] : node.inEdges[0];\n var altNode = isParent ? getNode(connectorId, false) : getNode(connectorId, true);\n selectNode(altNode);\n }\n}\nfunction navigateToSiblings(isRightSibling) {\n var child = diagram.selectedItems.nodes[0];\n if (child) {\n var connectorId = child.inEdges[0];\n var altConnectorId = '';\n var parent = getNode(connectorId, true);\n if (parent && parent.length > 0) {\n for (var i = 0; i < parent[0].outEdges.length; i++) {\n if (parent[0].outEdges[i] === connectorId) {\n altConnectorId = isRightSibling ? parent[0].outEdges[i + 1] : parent[0].outEdges[i - 1];\n }\n }\n var sibling = getNode(altConnectorId, false);\n selectNode(sibling);\n }\n }\n}\nfunction getNode(name, isParent) {\n var node = [];\n var connector = diagram.getObject(name);\n if (connector) {\n node.push(diagram.getObject(isParent ? (connector.sourceID) : (connector.targetID)));\n }\n return node;\n}\nfunction selectNode(node) {\n if (node && node.length > 0) {\n diagram.clearSelection();\n diagram.select(node);\n }\n}\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse', cornerRadius: 10 };\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 645,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n contextMenuSettings: { show: true },\n getNodeDefaults: function (obj) {\n if (!obj.children) {\n obj.shape = shape;\n obj.width = 70;\n obj.height = 70;\n }\n return obj;\n },\n layout: {\n type: 'HierarchicalTree'\n },\n dataSourceSettings: {\n id: 'id', parentId: 'ancestor', dataManager: new ej.data.DataManager(window.keyBoardData),\n doBinding: function (nodeModel, data) {\n nodeModel.annotations = [{\n content: data.id,\n style: { color: 'white' }\n }\n ];\n nodeModel.style = {\n strokeColor: 'transparent',\n fill: data.fill\n };\n }\n },\n commandManager: getCommandManagerSettings()\n });\n diagram.appendTo('#diagram');\n \n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n

        Built-In Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command
        \n         		\n
        Gesture
        \n
        Select All Ctrl + A
        CutCtrl + X
        CopyCtrl + C
        PasteCtrl + V
        UndoCtrl + Z
        RedoCtrl + Y
        DeleteDelete
        \n
        \n
        \n
        \n

        Custom Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command\n
        \n
        		\n
        Gesture
        \n
        GroupCtrl + G
        UngroupCtrl + U
        \n
        \n
        \n
        \n

        Modified Commands

        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Command\n
        \n
        		\n
        Gesture
        \n
        Navigate to Parent Node Up Arrow
        Navigate to Child Node Down Arrow
        Navigate to Previous Child Left Arrow
        Navigate to Next Child Right Arrow
        \n
        \n
        \n\n
        \n\n
        ","index.js":"{{ripple}}/**\n * Key Board Interaction sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu, ej.diagrams.HierarchicalTree, ej.diagrams.DataBinding);\n //Custom command for Diagraming elements.\n var diagram;\n function getCommandManagerSettings() {\n var commandManager = {\n commands: [{\n name: 'customGroup',\n canExecute: function () {\n if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {\n return true;\n }\n return false;\n },\n execute: function () {\n diagram.group();\n },\n gesture: {\n key: ej.diagrams.Keys.G,\n keyModifiers: ej.diagrams.KeyModifiers.Control\n }\n },\n {\n name: 'customUnGroup',\n canExecute: function () {\n if (diagram.selectedItems.nodes[0].children) {\n return true;\n }\n return false;\n },\n execute: function () {\n diagram.unGroup();\n },\n gesture: {\n key: ej.diagrams.Keys.U,\n keyModifiers: ej.diagrams.KeyModifiers.Control\n }\n },\n {\n name: 'navigationDown',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateLevels(true);\n },\n gesture: { key: ej.diagrams.Keys.Down },\n },\n {\n name: 'navigationUp',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateLevels(false);\n },\n gesture: { key: ej.diagrams.Keys.Up },\n },\n {\n name: 'navigationLeft',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateToSiblings(true);\n },\n gesture: { key: ej.diagrams.Keys.Right },\n },\n {\n name: 'navigationRight',\n canExecute: function () {\n return true;\n },\n execute: function () {\n navigateToSiblings(false);\n },\n gesture: { key: ej.diagrams.Keys.Left },\n }]\n };\n return commandManager;\n}\nfunction navigateLevels(isParent) {\n var node = diagram.selectedItems.nodes[0];\n if (node) {\n var connectorId = isParent ? node.outEdges[0] : node.inEdges[0];\n var altNode = isParent ? getNode(connectorId, false) : getNode(connectorId, true);\n selectNode(altNode);\n }\n}\nfunction navigateToSiblings(isRightSibling) {\n var child = diagram.selectedItems.nodes[0];\n if (child) {\n var connectorId = child.inEdges[0];\n var altConnectorId = '';\n var parent = getNode(connectorId, true);\n if (parent && parent.length > 0) {\n for (var i = 0; i < parent[0].outEdges.length; i++) {\n if (parent[0].outEdges[i] === connectorId) {\n altConnectorId = isRightSibling ? parent[0].outEdges[i + 1] : parent[0].outEdges[i - 1];\n }\n }\n var sibling = getNode(altConnectorId, false);\n selectNode(sibling);\n }\n }\n}\nfunction getNode(name, isParent) {\n var node = [];\n var connector = diagram.getObject(name);\n if (connector) {\n node.push(diagram.getObject(isParent ? (connector.sourceID) : (connector.targetID)));\n }\n return node;\n}\nfunction selectNode(node) {\n if (node && node.length > 0) {\n diagram.clearSelection();\n diagram.select(node);\n }\n}\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse', cornerRadius: 10 };\n //initialize the diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 645,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n contextMenuSettings: { show: true },\n getNodeDefaults: function (obj) {\n if (!obj.children) {\n obj.shape = shape;\n obj.width = 70;\n obj.height = 70;\n }\n return obj;\n },\n layout: {\n type: 'HierarchicalTree'\n },\n dataSourceSettings: {\n id: 'id', parentId: 'ancestor', dataManager: new ej.data.DataManager(window.keyBoardData),\n doBinding: function (nodeModel, data) {\n nodeModel.annotations = [{\n content: data.id,\n style: { color: 'white' }\n }\n ];\n nodeModel.style = {\n strokeColor: 'transparent',\n fill: data.fill\n };\n }\n },\n commandManager: getCommandManagerSettings()\n });\n diagram.appendTo('#diagram');\n \n\n"} \ No newline at end of file diff --git a/src/diagram/key-board-functions.js b/src/diagram/key-board-functions.js index 87eaa6d8..8579f7de 100644 --- a/src/diagram/key-board-functions.js +++ b/src/diagram/key-board-functions.js @@ -4,6 +4,7 @@ // tslint:disable-next-line:max-func-body-length ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.DiagramContextMenu, ej.diagrams.HierarchicalTree, ej.diagrams.DataBinding); //Custom command for Diagraming elements. + var diagram; function getCommandManagerSettings() { var commandManager = { commands: [{ @@ -124,7 +125,7 @@ this.default = function () { //Initialize shape var shape = { type: 'Basic', shape: 'Ellipse', cornerRadius: 10 }; //initialize the diagram control - var diagram = new ej.diagrams.Diagram({ + diagram = new ej.diagrams.Diagram({ width: '100%', height: 645, snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, contextMenuSettings: { show: true }, diff --git a/src/diagram/local-data-stack.json b/src/diagram/local-data-stack.json index d68cacc5..ff181652 100644 --- a/src/diagram/local-data-stack.json +++ b/src/diagram/local-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataManager: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataManager: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"} \ No newline at end of file diff --git a/src/diagram/logic-circuit-stack.json b/src/diagram/logic-circuit-stack.json index 7b934971..145d8365 100644 --- a/src/diagram/logic-circuit-stack.json +++ b/src/diagram/logic-circuit-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Logic circuit sample\n */\n\nvar nodeY = 30;\n// Create nodes as logic gates\nfunction createNode(\n id, offsetX, offsetY, height,\n width, pathData, ports) {\n // update node properties\n var node = {};\n node.id = id;\n node.offsetX = offsetX;\n node.offsetY = offsetY - nodeY;\n node.height = height;\n node.width = width;\n node.shape = { type: 'Path', data: pathData };\n node.ports = ports;\n return node;\n}\n\n// Create Connectors to connect two logic gates\nfunction createConnector(\n id,\n sourcePoint, targetPoint,\n sourceID, targetID,\n sourcePortID, targetPortID,\n sourceDecorator, targetDecorator,\n annotation, segments, isStraight) {\n // update connector properties\n var connector = {};\n connector.id = id;\n if (sourcePoint) {\n connector.sourcePoint = { x: sourcePoint.x, y: sourcePoint.y - nodeY };\n }\n if (targetPoint) {\n connector.targetPoint = { x: targetPoint.x, y: targetPoint.y - nodeY };\n }\n connector.sourceID = sourceID;\n connector.targetID = targetID;\n connector.type = isStraight ? 'Straight' : 'Orthogonal';\n connector.sourcePortID = sourcePortID;\n connector.targetPortID = targetPortID;\n // update connector annotation properties\n connector.annotations = [{\n content: annotation.content, offset: 0, margin: {\n left: (annotation.margin && annotation.margin.left) ? annotation.margin.left : 0,\n top: (annotation.margin && annotation.margin.top) ? annotation.margin.top : 0,\n },\n style: {\n //bold: true,\n fontFamily: 'Segoe UI',\n textWrapping: 'NoWrap', fontSize: 14,\n }\n }];\n // update connector decorators\n connector.sourceDecorator = sourceDecorator;\n connector.targetDecorator = targetDecorator;\n // update connector segments\n if (segments) {\n connector.segments = [{ length: 100, direction: 'Right', type: 'Orthogonal' }];\n }\n return connector;\n}\n\n\n\n /* tslint:disable */\n var orData = 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M99.5,48.5l-22,0 M0,31.5h25 M0,65.5h25';\n var andData = 'M21.5,20.5h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h-28a0,0,0,0,1,0,0v-56a0,0,0,0,1,0,0Z M78,48.5 L 100,48.5Z M0,32.5 L 21.4,32.5Z M0,65.5 L 21.4,65.5Z';\n var notData = 'M75.5,50.5l-52,28v-56L75.5,50.5z M81.5,50.5h18 M1.5,50.5h22 M78.5,47.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3 S80.2,47.5,78.5,47.5z';\n /* tslint:enable */\n\n // defines the shapes connection points\n var orPort = [\n { id: 'Or_port1', offset: { x: 0.01, y: 0.1963 } }, { id: 'Or_port2', offset: { x: 0.26, y: 0.5 } },\n { id: 'Or_port3', offset: { x: 0.01, y: 0.805 } }, { id: 'Or_port4', offset: { x: 0.99, y: 0.5 } }\n ];\n var andPort = [\n { id: 'And_port1', offset: { x: 0.01, y: 0.215 } }, { id: 'And_port2', offset: { x: 0.22, y: 0.5 } },\n { id: 'And_port3', offset: { x: 0.01, y: 0.805 } }, { id: 'And_port4', offset: { x: 0.99, y: 0.5 } }\n ];\n var notPort = [\n { id: 'Not_port1', offset: { x: 0.01, y: 0.5 } }, { id: 'Not_port2', offset: { x: 0.99, y: 0.5 } }\n ];\n var flipPorts = [{ offset: { x: 0.01, y: 0.221 } }, { offset: { x: 0.01, y: 0.779 } }, { offset: { x: 0.99, y: 0.221 } }, { offset: { x: 0.99, y: 0.779 } }];\n var jkPorts = [{ offset: { x: 0.01, y: 0.270 } }, { offset: { x: 0.01, y: 0.5 } }, { offset: { x: 0.01, y: 0.720 } }, { offset: { x: 0.99, y: 0.270 } }, { offset: { x: 0.99, y: 0.720 } }, { offset: { x: 0.5, y: 0.01 } }, { offset: { x: 0.5, y: 0.99 } }];\n var rPorts = [{ offset: { x: 0.01, y: 0.210 } }, { offset: { x: 0.01, y: 0.778 } }, { offset: { x: 0.5, y: 0.218 } }, { offset: { x: 0.99, y: 0.210 } }, { offset: { x: 0.99, y: 0.778 } }];\n\n var decorator = {\n height: 12, width: 12, shape: 'Circle', style: { fill: 'white', strokeColor: '#444', strokeWidth: 1 }\n };\n\n var nodes = [createNode('OR1', 336, 161.5, 70, 104, orData, orPort),\n createNode('OR2', 336, 329, 70, 104, orData, orPort),\n createNode('OR3', 336, 470, 70, 104, orData, orPort),\n createNode('Not1', 157, 267, 58, 100, notData, notPort),\n createNode('Not2', 135, 329, 58, 100, notData, notPort),\n createNode('Not3', 157, 470, 58, 100, notData, notPort),\n createNode('And', 543, 329, 70, 104, andData, andPort)];\n\n /* tslint:disable */\n var connectors = [\n createConnector('line1', { x: 140, y: 130 }, null, null, 'OR1', null, 'Or_port1', decorator, null, { content: 'A', margin: { left: -20 } }, true),\n createConnector('line2', { x: 140, y: 161.5 }, null, null, 'OR1', null, 'Or_port2', decorator, null, { content: 'B', margin: { left: -20 } }, true),\n createConnector('line3', { x: 140, y: 195 }, null, null, 'OR1', null, 'Or_port3', decorator, null, { content: 'C', margin: { left: -20 } }, true),\n createConnector('line4', { x: 85, y: 267 }, null, null, 'Not1', null, 'Not_port1', decorator, null, { content: 'A', margin: { left: -20 } }),\n createConnector('line5', { x: 65, y: 329 }, null, null, 'Not2', null, 'Not_port1', decorator, null, { content: 'B', margin: { left: -20 } }),\n createConnector('line6', { x: 85, y: 470 }, null, null, 'Not3', null, 'Not_port1', decorator, null, { content: 'C', margin: { left: -20 } }),\n createConnector('line7', null, null, 'Not1', 'OR2', 'Not_port2', 'Or_port1', null, null, { content: 'A\\'', margin: { left: 0, top: -20 } }),\n createConnector('line8', null, null, 'Not2', 'OR2', 'Not_port2', 'Or_port2', null, null, { content: 'B\\'', margin: { left: 0, top: -20 } }),\n createConnector('line9', { x: 140, y: 380 }, null, null, 'OR2', null, 'Or_port3', decorator, null, {}, true),\n createConnector('line10', { x: 140, y: 420 }, null, null, 'OR3', null, 'Or_port1', decorator, null, {}, true),\n createConnector('line11', null, null, 'Not3', 'OR3', 'Not_port2', 'Or_port2', null, null, { content: 'B\\'', margin: { left: 0, top: -20 } }),\n createConnector('line12', { x: 140, y: 520 }, null, null, 'OR3', null, 'Or_port3', decorator, null, {}, true),\n createConnector('line13', null, null, 'OR1', 'And', 'Or_port4', 'And_port1', null, null, { content: '(A + B + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line14', null, null, 'OR2', 'And', 'Or_port4', 'And_port2', null, null, { content: '(A\\' + B\\' + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line15', null, null, 'OR3', 'And', 'Or_port4', 'And_port3', null, null, { content: '(A + B\\' + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line16', null, { x: 600, y: 329 }, 'And', null, 'And_port4', null, null, decorator, { content: 'F =(A+B+C)*(A+B\\'+C)*(A+B\\'+C)', margin: { left: -80, top: 60 } }, true, true)\n ];\n\n /* tslint:enable */\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n //Initializes diagram control\n width: '100%', height: '100%',\n snapSettings: {\n constraints: ej.diagrams.SnapConstraints.All & ~(ej.diagrams.SnapConstraints.ShowLines | ej.diagrams.SnapConstraints.SnapToLines)\n },\n nodes: nodes,\n connectors: connectors,\n //defines default node properties\n getNodeDefaults: function (node) {\n node.style.strokeWidth = 1;\n node.style.strokeColor = '#444';\n // node.style.fill = '#444';\n },\n //defines default connector properties\n getConnectorDefaults: function (connector) {\n if (connector.id !== 'line16') {\n connector.targetDecorator.shape = 'None';\n connector.targetDecorator.style.strokeColor = '#444';\n connector.targetDecorator.style.fill = '#444';\n }\n connector.style = { strokeWidth: 1, strokeColor: '#444' };\n connector.cornerRadius = 5;\n return connector;\n },\n constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Bridging\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n\n //defines nodes as logic gates on the symbol pate\n var items = [\n { id: 'Or', shape: { type: 'Path', data: orData }, ports: orPort },\n {\n id: 'Nor',\n shape: {\n type: 'Path', data: 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M83.5,48.5h16 M1.5,32.5h24 M1.5,64.5h24 M80.5,45.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3 S82.2,45.5,80.5,45.5z'\n }\n },\n { id: 'And', shape: { type: 'Path', data: andData }, ports: andPort },\n {\n id: 'Nand',\n shape: {\n type: 'Path', data: 'M49.5,76.5h-28v-56h28c15.5,0,28,12.5,28,28v0C77.5,64,65,76.5,49.5,76.5z M83.5,48.5h16 M1.5,32.5h20 M1.5,65.5h20 M80.5,45.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S82.2,45.5,80.5,45.5z'\n }\n },\n { id: 'not', shape: { type: 'Path', data: notData }, ports: notPort },\n {\n id: 'Buffer', ports: [{ offset: { x: 0.01, y: 0.5 } }, { offset: { x: 0.99, y: 0.5 } }],\n shape: { type: 'Path', data: 'M170.354,66.6523000000002L199.753,83.6253000000002L170.354,100.5983L170.354,66.6523000000002zM199.7534,83.6255000000001L214.5004,83.6255000000001M154.5,83.6255000000001L170.354,83.6255000000001' },\n },\n {\n id: 'NorGate', ports: [{ offset: { x: 0.01, y: 0.19 } }, { offset: { x: 0.01, y: 0.809 } }, { offset: { x: 0.99, y: 0.5 } }],\n shape: {\n type: 'Path', data: 'M14.5055,0.00562288 C14.3031,0.00562288 14.1078,0.0433293 13.9072,0.0542443 L13.9072,49.959 C14.1078,49.9699 14.3031,50.0079 14.5055,50.0079 C23.223,50.0079 30.29,28.3205 30.29,25.004 C30.29,22.2835 23.223,0.00562288 14.5055,0.00562288 z M13.9074,9.48911 L-0.00120828,9.48911 M13.9074,40.5218 L-0.00120828,40.5218 M36.3023,25.005 L50.0033,25.005 M36.2352,25.005 C36.2352,29.5191 35.0457,33.1879 33.5781,33.1879 C32.1105,33.1879 30.921,29.5191 30.921,25.005 C30.921,20.4908 32.1105,16.8223 33.5781,16.8223 C35.0457,16.8223 36.2352,20.4908 36.2352,25.005 z'\n },\n },\n {\n id: 'XorGate', ports: orPort,\n shape: {\n type: 'Path', data: 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M73.4,48.5L73.4,48.5 M17.5,76.8L17.5,76.8c6.7-18.2,6.7-38.1,0-56.3l0-0.1 M77.5,48.5h22 M0,32.5h21 M0,65.5h21'\n }\n },\n {\n id: 'ChEmitter', ports: orPort,\n shape: {\n type: 'Path', data: 'M75.5,49.5l-52,28v-56L75.5,49.5z M75.5,49.5h24 M1.5,49.5h22 M44.5,45.5h-5v8h5V45.5z M39.5,45.5h10 M34.5,53.5h10'\n }\n },\n {\n id: 'NandGate1', ports: jkPorts,\n shape: {\n type: 'Path', data: 'M173.2472,549L173.2472,539 M173.2472,466L173.2472,456 M154.6192,523L145.2472,518.305L145.2472,527.695L154.6192,523z M191.2472,518L197.2472,518 M125.2472,523L145.2472,523 M125.2472,482L145.2472,482 M201.2472,523L221.2472,523 M201.2472,482L221.2472,482 M196.2262,523.597C196.2162,524.421,196.0452,525.053,195.7132,525.494C195.3812,525.935,194.9122,526.156,194.3072,526.156C193.7012,526.156,193.2282,525.921,192.8892,525.453C192.5482,524.984,192.3782,524.343,192.3782,523.529L192.3782,523.006C192.3882,522.206,192.5622,521.58,192.9022,521.129C193.2432,520.678,193.7082,520.453,194.2972,520.453C194.9152,520.453,195.3922,520.68,195.7252,521.134C196.0592,521.588,196.2262,522.233,196.2262,523.07L196.2262,523.597z M197.1632,523.075C197.1632,522.381,197.0462,521.775,196.8112,521.256C196.5772,520.737,196.2422,520.339,195.8092,520.062C195.3732,519.785,194.8702,519.647,194.2972,519.647C193.7372,519.647,193.2402,519.786,192.8052,520.064C192.3712,520.343,192.0342,520.744,191.7972,521.268C191.5592,521.792,191.4402,522.396,191.4402,523.08L191.4402,523.592C191.4472,524.263,191.5702,524.853,191.8092,525.362C192.0492,525.872,192.3852,526.264,192.8172,526.539C193.2502,526.814,193.7472,526.952,194.3072,526.952C194.5672,526.952,194.8142,526.922,195.0492,526.864L196.5482,528.055L197.1872,527.464L195.9182,526.468C196.3112,526.188,196.6182,525.8,196.8362,525.304C197.0542,524.807,197.1632,524.216,197.1632,523.529L197.1632,523.075z M174.1562,473.249C174.4002,473.439,174.5222,473.709,174.5222,474.057C174.5222,474.405,174.3912,474.681,174.1272,474.882C173.8632,475.084,173.4842,475.185,172.9892,475.185C172.4592,475.185,172.0352,475.061,171.7172,474.812C171.4002,474.562,171.2412,474.223,171.2412,473.793L170.2992,473.793C170.2992,474.207,170.4142,474.576,170.6432,474.902C170.8732,475.228,171.1992,475.484,171.6222,475.671C172.0452,475.858,172.5012,475.952,172.9892,475.952C173.7412,475.952,174.3422,475.778,174.7912,475.432C175.2402,475.085,175.4652,474.624,175.4652,474.047C175.4652,473.686,175.3852,473.372,175.2232,473.105C175.0622,472.838,174.8142,472.604,174.4802,472.404C174.1472,472.204,173.6852,472.021,173.0942,471.854C172.5042,471.688,172.0852,471.505,171.8402,471.304C171.5942,471.104,171.4712,470.858,171.4712,470.568C171.4712,470.206,171.6002,469.923,171.8592,469.719C172.1172,469.516,172.4782,469.414,172.9402,469.414C173.4382,469.414,173.8242,469.537,174.0982,469.784C174.3712,470.03,174.5082,470.369,174.5082,470.8L175.4502,470.8C175.4502,470.406,175.3462,470.043,175.1352,469.711C174.9262,469.379,174.6292,469.119,174.2462,468.93C173.8642,468.741,173.4292,468.647,172.9402,468.647C172.2252,468.647,171.6432,468.83,171.1952,469.196C170.7472,469.562,170.5232,470.025,170.5232,470.585C170.5232,471.08,170.7072,471.496,171.0722,471.833C171.4392,472.17,172.0242,472.454,172.8282,472.685C173.4702,472.871,173.9122,473.059,174.1562,473.249z M171.6712,528.511L173.1062,528.511C173.6012,528.515,173.9792,528.633,174.2422,528.868C174.5042,529.103,174.6352,529.44,174.6352,529.881C174.6352,530.285,174.4972,530.608,174.2232,530.85C173.9472,531.091,173.5772,531.211,173.1112,531.211L171.6712,531.211L171.6712,528.511z M174.8842,534.854L175.8902,534.854L175.8902,534.795L174.2202,531.778C174.6462,531.615,174.9782,531.369,175.2192,531.041C175.4572,530.712,175.5772,530.326,175.5772,529.883C175.5772,529.187,175.3612,528.656,174.9302,528.292C174.4992,527.927,173.8832,527.745,173.0822,527.745L170.7282,527.745L170.7282,534.854L171.6712,534.854L171.6712,531.978L173.3412,531.978L174.8842,534.854z M196.2262,482.597C196.2162,483.421,196.0452,484.053,195.7132,484.494C195.3812,484.935,194.9122,485.156,194.3072,485.156C193.7012,485.156,193.2282,484.921,192.8892,484.453C192.5482,483.984,192.3782,483.343,192.3782,482.529L192.3782,482.006C192.3882,481.206,192.5622,480.58,192.9022,480.129C193.2432,479.678,193.7082,479.453,194.2972,479.453C194.9152,479.453,195.3922,479.68,195.7252,480.134C196.0592,480.588,196.2262,481.233,196.2262,482.07L196.2262,482.597z M197.1632,482.075C197.1632,481.381,197.0462,480.775,196.8112,480.256C196.5772,479.737,196.2422,479.339,195.8092,479.062C195.3732,478.785,194.8702,478.647,194.2972,478.647C193.7372,478.647,193.2402,478.786,192.8052,479.064C192.3712,479.343,192.0342,479.744,191.7972,480.268C191.5592,480.792,191.4402,481.396,191.4402,482.08L191.4402,482.592C191.4472,483.263,191.5702,483.853,191.8092,484.362C192.0492,484.872,192.3852,485.264,192.8172,485.539C193.2502,485.814,193.7472,485.952,194.3072,485.952C194.5672,485.952,194.8142,485.922,195.0492,485.864L196.5482,487.055L197.1872,486.464L195.9182,485.468C196.3112,485.188,196.6182,484.8,196.8362,484.304C197.0542,483.807,197.1632,483.216,197.1632,482.529L197.1632,482.075z M173.0302,499.315C174.0512,499.315,174.8302,499.641,175.3662,500.29C175.9022,500.94,176.1712,501.881,176.1712,503.113L176.1712,503.745C176.1602,504.956,175.8782,505.885,175.3232,506.532C174.7682,507.179,173.9732,507.503,172.9362,507.503L171.6472,507.503L171.6472,499.315L173.0302,499.315z M172.9442,509.097C173.9712,509.097,174.8812,508.875,175.6752,508.433C176.4692,507.99,177.0812,507.36,177.5112,506.542C177.9402,505.725,178.1552,504.776,178.1552,503.698L178.1552,503.128C178.1552,502.065,177.9412,501.123,177.5152,500.3C177.0882,499.477,176.4842,498.842,175.7062,498.394C174.9282,497.946,174.0352,497.722,173.0302,497.722L169.6712,497.722L169.6712,509.097L172.9442,509.097z M150.7652,479.511C151.4612,479.518,151.9992,479.745,152.3792,480.193C152.7582,480.641,152.9472,481.269,152.9472,482.077L152.9472,482.492C152.9472,483.323,152.7462,483.963,152.3442,484.413C151.9422,484.863,151.3802,485.087,150.6572,485.087L149.6712,485.087L149.6712,479.511L150.7652,479.511z M150.7012,485.854C151.3392,485.848,151.8982,485.709,152.3792,485.439C152.8582,485.169,153.2282,484.781,153.4862,484.277C153.7462,483.772,153.8752,483.185,153.8752,482.514L153.8752,482.06C153.8722,481.406,153.7402,480.826,153.4822,480.322C153.2232,479.817,152.8562,479.428,152.3812,479.155C151.9052,478.881,151.3582,478.745,150.7402,478.745L148.7332,478.745L148.7332,485.854L150.7012,485.854z M145.2382,466L201.2552,466L201.2552,539L145.2382,539z'\n }\n },\n {\n id: 'Flipflop', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.5,13.5h57v73h-57V13.5z M29.8,26.2h-5.4V27h2.2v6.4h0.9V27h2.2V26.2z M54.2,45.2h-9v1.5h3.5v9.9h1.9v-9.9 h3.6V45.2z M74.5,29.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3 c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1 s0.3-0.9,0.3-1.4V29.2z M73.6,30.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6 v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V30.4z M74.5,70.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V70.2z M73.6,71.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V71.4z M78.5,29.5h20 M78.5,70.5h20 M1.5,29.5h20 M1.5,70.5h20 M68.5,65.5h6 M31.5,70.5l-10-5 v10L31.5,70.5z'\n }\n },\n {\n id: 'RSLatch', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.5,11.5h57v73h-57V11.5z M28.5,30.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C28.9,29.9,28.8,30.2,28.5,30.4z M27.7,69.3c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9 v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6 c0.2-0.3,0.3-0.6,0.3-1c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H25v7.1h0.9v-3.1H27.7z M25.9,66h1.6c0.5,0,0.9,0.1,1.1,0.3 s0.4,0.5,0.4,0.9c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V66z M49.5,54.6c1.6,0,2.9-0.4,3.8-1.3c0.9-0.9,1.4-2.1,1.4-3.6 v-1.5c0-1.5-0.5-2.7-1.4-3.6c-0.9-0.9-2.1-1.4-3.7-1.4H46v11.4H49.5z M49.5,44.7c1.1,0,1.9,0.3,2.4,0.9c0.5,0.6,0.8,1.4,0.8,2.5v1.5 c0,1.1-0.3,1.9-0.8,2.5s-1.4,0.9-2.5,0.9h-1.5v-8.3H49.5z M74.5,27.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9 c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2 l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V27.2z M73.6,28.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6 c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6 s0.5,1,0.5,1.6V28.4z M74.5,68.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3 c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1 s0.3-0.9,0.3-1.4V68.2z M73.6,69.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6 v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V69.4z M78.5,27.5h20 M78.5,68.5h20 M1.5,27.5h20 M1.5,68.5h20 M68.5,63.5h6'\n }\n },\n {\n id: 'RSLatchSync', ports: rPorts,\n shape: {\n type: 'Path', data: 'M21.5,11.5h56v72h-56V11.5z M28.5,29.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C28.9,28.9,28.8,29.2,28.5,29.4z M27.7,67.3c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9 v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6 c0.2-0.3,0.3-0.6,0.3-1c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H25v7.1h0.9v-3.1H27.7z M25.9,64h1.6c0.5,0,0.9,0.1,1.1,0.3 s0.4,0.5,0.4,0.9c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V64z M73.5,26.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V26.2z M72.6,27.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V27.4z M73.5,67.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9 s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1 c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V67.2z M72.6,68.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6 c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V68.4z M77.5,26.5 h20 M77.5,67.5h20 M1.5,26.5h20 M1.5,67.5h20 M67.5,62.5h6 M1.5,47.5h20 M30.9,47.5l-9.4-4.7v9.4L30.9,47.5z'\n }\n },\n {\n id: 'JKflipflop', ports: jkPorts,\n shape: {\n type: 'Path', data: 'M22.5,14.5h56v72h-56V14.5z M28.9,31.4c0,0.4-0.1,0.7-0.3,1s-0.5,0.4-0.9,0.4c-0.4,0-0.8-0.1-1-0.3 s-0.3-0.6-0.3-1h-0.9c0,0.7,0.2,1.2,0.6,1.5c0.4,0.3,0.9,0.5,1.6,0.5c0.6,0,1.2-0.2,1.6-0.5s0.6-0.9,0.6-1.5v-5.1h-0.9V31.4z M30.4,73.4h1.1l-3-3.7l2.8-3.4h-1l-2.6,3.2H27v-3.2H26v7.1H27v-3.2h0.9L30.4,73.4z M74.5,29.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V29.2z M73.6,30.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V30.4z M74.5,70.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9 s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1 c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V70.2z M73.6,71.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6 c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V71.4z M50.7,80.3 c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4 s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.3,0.3-0.6,0.3-1 c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H48v7.1h0.9v-3.1H50.7z M48.9,77h1.6c0.5,0,0.9,0.1,1.1,0.3s0.4,0.5,0.4,0.9 c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V77z M51.5,23.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C51.9,22.9,51.8,23.2,51.5,23.4z M78.5,29.5h20 M78.5,70.5h20 M2.5,29.5h20 M2.5,70.5h20 M68.5,65.5h6 M2.5,50.5h20 M31.9,51.5 l-9.4-4.7v9.4L31.9,51.5z M50.5,14.5v-10 M50.5,96.5v-10'\n }\n },\n {\n id: 'Dflipflop', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.2,13.5h57v73h-57V13.5z M78.2,29.5h20 M78.2,70.5h20 M1.2,29.5h20 M1.2,70.5h20 M26.6,33.4 c0.6,0,1.2-0.1,1.7-0.4c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8v-0.5c0-0.7-0.1-1.2-0.4-1.7c-0.3-0.5-0.6-0.9-1.1-1.2 s-1-0.4-1.6-0.4h-2v7.1H26.6z M26.7,27c0.7,0,1.2,0.2,1.6,0.7c0.4,0.4,0.6,1.1,0.6,1.9V30c0,0.8-0.2,1.5-0.6,1.9 c-0.4,0.4-1,0.7-1.7,0.7h-1V27H26.7z M48.9,56.6c1,0,1.9-0.2,2.7-0.7c0.8-0.4,1.4-1.1,1.8-1.9c0.4-0.8,0.6-1.8,0.6-2.8v-0.6 c0-1.1-0.2-2-0.6-2.8c-0.4-0.8-1-1.5-1.8-1.9c-0.8-0.4-1.7-0.7-2.7-0.7h-3.4v11.4H48.9z M48.9,46.8c1,0,1.8,0.3,2.3,1 c0.5,0.7,0.8,1.6,0.8,2.8v0.6c0,1.2-0.3,2.1-0.8,2.8s-1.4,1-2.4,1h-1.3v-8.2H48.9z M74.1,29.6c0-0.7-0.1-1.3-0.4-1.8s-0.6-0.9-1-1.2 c-0.4-0.3-0.9-0.4-1.5-0.4c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1,1.2s-0.4,1.1-0.4,1.8v0.5c0,0.7,0.1,1.3,0.4,1.8 c0.2,0.5,0.6,0.9,1,1.2s0.9,0.4,1.5,0.4c0.3,0,0.5,0,0.7-0.1l1.5,1.2l0.6-0.6l-1.3-1c0.4-0.3,0.7-0.7,0.9-1.2s0.3-1.1,0.3-1.8V29.6z M73.1,30.1c0,0.8-0.2,1.5-0.5,1.9s-0.8,0.7-1.4,0.7s-1.1-0.2-1.4-0.7c-0.3-0.5-0.5-1.1-0.5-1.9v-0.5c0-0.8,0.2-1.4,0.5-1.9 c0.3-0.5,0.8-0.7,1.4-0.7c0.6,0,1.1,0.2,1.4,0.7c0.3,0.5,0.5,1.1,0.5,1.9V30.1z M74.1,70.6c0-0.7-0.1-1.3-0.4-1.8s-0.6-0.9-1-1.2 c-0.4-0.3-0.9-0.4-1.5-0.4c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1,1.2s-0.4,1.1-0.4,1.8v0.5c0,0.7,0.1,1.3,0.4,1.8 c0.2,0.5,0.6,0.9,1,1.2s0.9,0.4,1.5,0.4c0.3,0,0.5,0,0.7-0.1l1.5,1.2l0.6-0.6l-1.3-1c0.4-0.3,0.7-0.7,0.9-1.2s0.3-1.1,0.3-1.8V70.6z M73.1,71.1c0,0.8-0.2,1.5-0.5,1.9s-0.8,0.7-1.4,0.7s-1.1-0.2-1.4-0.7c-0.3-0.5-0.5-1.1-0.5-1.9v-0.5c0-0.8,0.2-1.4,0.5-1.9 c0.3-0.5,0.8-0.7,1.4-0.7c0.6,0,1.1,0.2,1.4,0.7c0.3,0.5,0.5,1.1,0.5,1.9V71.1z M68.2,65.5h6 M31.2,70.5l-10-5v10L31.2,70.5z'\n }\n },\n\n ];\n /* tslint:enable */\n\n var connections = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link11', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link22', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n {\n id: 'Link3', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link31', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n ];\n\n\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n //Initializes symbol palette control\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: items, title: 'Logic Gates' },\n { id: 'connectors', expanded: true, symbols: connections, title: 'Connectors' },\n ],\n width: '100%', height: '100%',\n symbolMargin: { left: 10, right: 10, top: 10, bottom: 10 },\n symbolHeight: 60, symbolWidth: 62,\n getNodeDefaults: function (symbol) {\n symbol.width = 55;\n symbol.height = 40;\n symbol.offsetX = 20;\n symbol.offsetY = 20;\n symbol.style = { fill: 'white', strokeWidth: 1, strokeColor: '#444' };\n },\n symbolPreview: { height: 50, width: 50 },\n getSymbolInfo: function () {\n return { fit: true };\n }\n });\n palette.appendTo('#symbolpalette');\n\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Logic circuit sample\n */\n\nvar nodeY = 30;\n// Create nodes as logic gates\nfunction createNode(\n id, offsetX, offsetY, height,\n width, pathData, ports) {\n // update node properties\n var node = {};\n node.id = id;\n node.offsetX = offsetX;\n node.offsetY = offsetY - nodeY;\n node.height = height;\n node.width = width;\n node.shape = { type: 'Path', data: pathData };\n node.ports = ports;\n return node;\n}\n\n// Create Connectors to connect two logic gates\nfunction createConnector(\n id,\n sourcePoint, targetPoint,\n sourceID, targetID,\n sourcePortID, targetPortID,\n sourceDecorator, targetDecorator,\n annotation, segments, isStraight) {\n // update connector properties\n var connector = {};\n connector.id = id;\n if (sourcePoint) {\n connector.sourcePoint = { x: sourcePoint.x, y: sourcePoint.y - nodeY };\n }\n if (targetPoint) {\n connector.targetPoint = { x: targetPoint.x, y: targetPoint.y - nodeY };\n }\n connector.sourceID = sourceID;\n connector.targetID = targetID;\n connector.type = isStraight ? 'Straight' : 'Orthogonal';\n connector.sourcePortID = sourcePortID;\n connector.targetPortID = targetPortID;\n // update connector annotation properties\n connector.annotations = [{\n content: annotation.content, offset: 0, margin: {\n left: (annotation.margin && annotation.margin.left) ? annotation.margin.left : 0,\n top: (annotation.margin && annotation.margin.top) ? annotation.margin.top : 0,\n },\n style: {\n //bold: true,\n fontFamily: 'Segoe UI',\n textWrapping: 'NoWrap', fontSize: 14,\n }\n }];\n // update connector decorators\n connector.sourceDecorator = sourceDecorator;\n connector.targetDecorator = targetDecorator;\n // update connector segments\n if (segments) {\n connector.segments = [{ length: 100, direction: 'Right', type: 'Orthogonal' }];\n }\n return connector;\n}\n\n\n\n /* tslint:disable */\n var orData = 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M99.5,48.5l-22,0 M0,31.5h25 M0,65.5h25';\n var andData = 'M21.5,20.5h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h-28a0,0,0,0,1,0,0v-56a0,0,0,0,1,0,0Z M78,48.5 L 100,48.5Z M0,32.5 L 21.4,32.5Z M0,65.5 L 21.4,65.5Z';\n var notData = 'M75.5,50.5l-52,28v-56L75.5,50.5z M81.5,50.5h18 M1.5,50.5h22 M78.5,47.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3 S80.2,47.5,78.5,47.5z';\n /* tslint:enable */\n\n // defines the shapes connection points\n var orPort = [\n { id: 'Or_port1', offset: { x: 0.01, y: 0.1963 } }, { id: 'Or_port2', offset: { x: 0.26, y: 0.5 } },\n { id: 'Or_port3', offset: { x: 0.01, y: 0.805 } }, { id: 'Or_port4', offset: { x: 0.99, y: 0.5 } }\n ];\n var andPort = [\n { id: 'And_port1', offset: { x: 0.01, y: 0.215 } }, { id: 'And_port2', offset: { x: 0.22, y: 0.5 } },\n { id: 'And_port3', offset: { x: 0.01, y: 0.805 } }, { id: 'And_port4', offset: { x: 0.99, y: 0.5 } }\n ];\n var notPort = [\n { id: 'Not_port1', offset: { x: 0.01, y: 0.5 } }, { id: 'Not_port2', offset: { x: 0.99, y: 0.5 } }\n ];\n var flipPorts = [{ offset: { x: 0.01, y: 0.221 } }, { offset: { x: 0.01, y: 0.779 } }, { offset: { x: 0.99, y: 0.221 } }, { offset: { x: 0.99, y: 0.779 } }];\n var jkPorts = [{ offset: { x: 0.01, y: 0.270 } }, { offset: { x: 0.01, y: 0.5 } }, { offset: { x: 0.01, y: 0.720 } }, { offset: { x: 0.99, y: 0.270 } }, { offset: { x: 0.99, y: 0.720 } }, { offset: { x: 0.5, y: 0.01 } }, { offset: { x: 0.5, y: 0.99 } }];\n var rPorts = [{ offset: { x: 0.01, y: 0.210 } }, { offset: { x: 0.01, y: 0.778 } }, { offset: { x: 0.5, y: 0.218 } }, { offset: { x: 0.99, y: 0.210 } }, { offset: { x: 0.99, y: 0.778 } }];\n\n var decorator = {\n height: 12, width: 12, shape: 'Circle', style: { fill: 'white', strokeColor: '#444', strokeWidth: 1 }\n };\n\n var nodes = [createNode('OR1', 336, 161.5, 70, 104, orData, orPort),\n createNode('OR2', 336, 329, 70, 104, orData, orPort),\n createNode('OR3', 336, 470, 70, 104, orData, orPort),\n createNode('Not1', 157, 267, 58, 100, notData, notPort),\n createNode('Not2', 135, 329, 58, 100, notData, notPort),\n createNode('Not3', 157, 470, 58, 100, notData, notPort),\n createNode('And', 543, 329, 70, 104, andData, andPort)];\n\n /* tslint:disable */\n var connectors = [\n createConnector('line1', { x: 140, y: 130 }, null, null, 'OR1', null, 'Or_port1', decorator, null, { content: 'A', margin: { left: -20 } }, true),\n createConnector('line2', { x: 140, y: 161.5 }, null, null, 'OR1', null, 'Or_port2', decorator, null, { content: 'B', margin: { left: -20 } }, true),\n createConnector('line3', { x: 140, y: 195 }, null, null, 'OR1', null, 'Or_port3', decorator, null, { content: 'C', margin: { left: -20 } }, true),\n createConnector('line4', { x: 85, y: 267 }, null, null, 'Not1', null, 'Not_port1', decorator, null, { content: 'A', margin: { left: -20 } }),\n createConnector('line5', { x: 65, y: 329 }, null, null, 'Not2', null, 'Not_port1', decorator, null, { content: 'B', margin: { left: -20 } }),\n createConnector('line6', { x: 85, y: 470 }, null, null, 'Not3', null, 'Not_port1', decorator, null, { content: 'C', margin: { left: -20 } }),\n createConnector('line7', null, null, 'Not1', 'OR2', 'Not_port2', 'Or_port1', null, null, { content: 'A\\'', margin: { left: 0, top: -20 } }),\n createConnector('line8', null, null, 'Not2', 'OR2', 'Not_port2', 'Or_port2', null, null, { content: 'B\\'', margin: { left: 0, top: -20 } }),\n createConnector('line9', { x: 140, y: 380 }, null, null, 'OR2', null, 'Or_port3', decorator, null, {}, true),\n createConnector('line10', { x: 140, y: 420 }, null, null, 'OR3', null, 'Or_port1', decorator, null, {}, true),\n createConnector('line11', null, null, 'Not3', 'OR3', 'Not_port2', 'Or_port2', null, null, { content: 'B\\'', margin: { left: 0, top: -20 } }),\n createConnector('line12', { x: 140, y: 520 }, null, null, 'OR3', null, 'Or_port3', decorator, null, {}, true),\n createConnector('line13', null, null, 'OR1', 'And', 'Or_port4', 'And_port1', null, null, { content: '(A + B + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line14', null, null, 'OR2', 'And', 'Or_port4', 'And_port2', null, null, { content: '(A\\' + B\\' + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line15', null, null, 'OR3', 'And', 'Or_port4', 'And_port3', null, null, { content: '(A + B\\' + C)', margin: { left: 0, top: -20 } }, true),\n createConnector('line16', null, { x: 600, y: 329 }, 'And', null, 'And_port4', null, null, decorator, { content: 'F =(A+B+C)*(A+B\\'+C)*(A+B\\'+C)', margin: { left: -80, top: 60 } }, true, true)\n ];\n\n /* tslint:enable */\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n //Initializes diagram control\n width: '100%', height: '100%',\n snapSettings: {\n constraints: ej.diagrams.SnapConstraints.All & ~(ej.diagrams.SnapConstraints.ShowLines | ej.diagrams.SnapConstraints.SnapToLines)\n },\n nodes: nodes,\n connectors: connectors,\n //defines default node properties\n getNodeDefaults: function (node) {\n node.style.strokeWidth = 1;\n node.style.strokeColor = '#444';\n // node.style.fill = '#444';\n },\n //defines default connector properties\n getConnectorDefaults: function (connector) {\n if (connector.id !== 'line16') {\n connector.targetDecorator.shape = 'None';\n connector.targetDecorator.style.strokeColor = '#444';\n connector.targetDecorator.style.fill = '#444';\n }\n connector.style = { strokeWidth: 1, strokeColor: '#444' };\n connector.cornerRadius = 5;\n return connector;\n },\n constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Bridging\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n\n //defines nodes as logic gates on the symbol pate\n var items = [\n { id: 'Or', shape: { type: 'Path', data: orData }, ports: orPort },\n {\n id: 'Nor',\n shape: {\n type: 'Path', data: 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M83.5,48.5h16 M1.5,32.5h24 M1.5,64.5h24 M80.5,45.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3 S82.2,45.5,80.5,45.5z'\n }\n },\n { id: 'And', shape: { type: 'Path', data: andData }, ports: andPort },\n {\n id: 'Nand',\n shape: {\n type: 'Path', data: 'M49.5,76.5h-28v-56h28c15.5,0,28,12.5,28,28v0C77.5,64,65,76.5,49.5,76.5z M83.5,48.5h16 M1.5,32.5h20 M1.5,65.5h20 M80.5,45.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S82.2,45.5,80.5,45.5z'\n }\n },\n { id: 'not', shape: { type: 'Path', data: notData }, ports: notPort },\n {\n id: 'Buffer', ports: [{ offset: { x: 0.01, y: 0.5 } }, { offset: { x: 0.99, y: 0.5 } }],\n shape: { type: 'Path', data: 'M170.354,66.6523000000002L199.753,83.6253000000002L170.354,100.5983L170.354,66.6523000000002zM199.7534,83.6255000000001L214.5004,83.6255000000001M154.5,83.6255000000001L170.354,83.6255000000001' },\n },\n {\n id: 'NorGate', ports: [{ offset: { x: 0.01, y: 0.19 } }, { offset: { x: 0.01, y: 0.809 } }, { offset: { x: 0.99, y: 0.5 } }],\n shape: {\n type: 'Path', data: 'M14.5055,0.00562288 C14.3031,0.00562288 14.1078,0.0433293 13.9072,0.0542443 L13.9072,49.959 C14.1078,49.9699 14.3031,50.0079 14.5055,50.0079 C23.223,50.0079 30.29,28.3205 30.29,25.004 C30.29,22.2835 23.223,0.00562288 14.5055,0.00562288 z M13.9074,9.48911 L-0.00120828,9.48911 M13.9074,40.5218 L-0.00120828,40.5218 M36.3023,25.005 L50.0033,25.005 M36.2352,25.005 C36.2352,29.5191 35.0457,33.1879 33.5781,33.1879 C32.1105,33.1879 30.921,29.5191 30.921,25.005 C30.921,20.4908 32.1105,16.8223 33.5781,16.8223 C35.0457,16.8223 36.2352,20.4908 36.2352,25.005 z'\n },\n },\n {\n id: 'XorGate', ports: orPort,\n shape: {\n type: 'Path', data: 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M73.4,48.5L73.4,48.5 M17.5,76.8L17.5,76.8c6.7-18.2,6.7-38.1,0-56.3l0-0.1 M77.5,48.5h22 M0,32.5h21 M0,65.5h21'\n }\n },\n {\n id: 'ChEmitter', ports: orPort,\n shape: {\n type: 'Path', data: 'M75.5,49.5l-52,28v-56L75.5,49.5z M75.5,49.5h24 M1.5,49.5h22 M44.5,45.5h-5v8h5V45.5z M39.5,45.5h10 M34.5,53.5h10'\n }\n },\n {\n id: 'NandGate1', ports: jkPorts,\n shape: {\n type: 'Path', data: 'M173.2472,549L173.2472,539 M173.2472,466L173.2472,456 M154.6192,523L145.2472,518.305L145.2472,527.695L154.6192,523z M191.2472,518L197.2472,518 M125.2472,523L145.2472,523 M125.2472,482L145.2472,482 M201.2472,523L221.2472,523 M201.2472,482L221.2472,482 M196.2262,523.597C196.2162,524.421,196.0452,525.053,195.7132,525.494C195.3812,525.935,194.9122,526.156,194.3072,526.156C193.7012,526.156,193.2282,525.921,192.8892,525.453C192.5482,524.984,192.3782,524.343,192.3782,523.529L192.3782,523.006C192.3882,522.206,192.5622,521.58,192.9022,521.129C193.2432,520.678,193.7082,520.453,194.2972,520.453C194.9152,520.453,195.3922,520.68,195.7252,521.134C196.0592,521.588,196.2262,522.233,196.2262,523.07L196.2262,523.597z M197.1632,523.075C197.1632,522.381,197.0462,521.775,196.8112,521.256C196.5772,520.737,196.2422,520.339,195.8092,520.062C195.3732,519.785,194.8702,519.647,194.2972,519.647C193.7372,519.647,193.2402,519.786,192.8052,520.064C192.3712,520.343,192.0342,520.744,191.7972,521.268C191.5592,521.792,191.4402,522.396,191.4402,523.08L191.4402,523.592C191.4472,524.263,191.5702,524.853,191.8092,525.362C192.0492,525.872,192.3852,526.264,192.8172,526.539C193.2502,526.814,193.7472,526.952,194.3072,526.952C194.5672,526.952,194.8142,526.922,195.0492,526.864L196.5482,528.055L197.1872,527.464L195.9182,526.468C196.3112,526.188,196.6182,525.8,196.8362,525.304C197.0542,524.807,197.1632,524.216,197.1632,523.529L197.1632,523.075z M174.1562,473.249C174.4002,473.439,174.5222,473.709,174.5222,474.057C174.5222,474.405,174.3912,474.681,174.1272,474.882C173.8632,475.084,173.4842,475.185,172.9892,475.185C172.4592,475.185,172.0352,475.061,171.7172,474.812C171.4002,474.562,171.2412,474.223,171.2412,473.793L170.2992,473.793C170.2992,474.207,170.4142,474.576,170.6432,474.902C170.8732,475.228,171.1992,475.484,171.6222,475.671C172.0452,475.858,172.5012,475.952,172.9892,475.952C173.7412,475.952,174.3422,475.778,174.7912,475.432C175.2402,475.085,175.4652,474.624,175.4652,474.047C175.4652,473.686,175.3852,473.372,175.2232,473.105C175.0622,472.838,174.8142,472.604,174.4802,472.404C174.1472,472.204,173.6852,472.021,173.0942,471.854C172.5042,471.688,172.0852,471.505,171.8402,471.304C171.5942,471.104,171.4712,470.858,171.4712,470.568C171.4712,470.206,171.6002,469.923,171.8592,469.719C172.1172,469.516,172.4782,469.414,172.9402,469.414C173.4382,469.414,173.8242,469.537,174.0982,469.784C174.3712,470.03,174.5082,470.369,174.5082,470.8L175.4502,470.8C175.4502,470.406,175.3462,470.043,175.1352,469.711C174.9262,469.379,174.6292,469.119,174.2462,468.93C173.8642,468.741,173.4292,468.647,172.9402,468.647C172.2252,468.647,171.6432,468.83,171.1952,469.196C170.7472,469.562,170.5232,470.025,170.5232,470.585C170.5232,471.08,170.7072,471.496,171.0722,471.833C171.4392,472.17,172.0242,472.454,172.8282,472.685C173.4702,472.871,173.9122,473.059,174.1562,473.249z M171.6712,528.511L173.1062,528.511C173.6012,528.515,173.9792,528.633,174.2422,528.868C174.5042,529.103,174.6352,529.44,174.6352,529.881C174.6352,530.285,174.4972,530.608,174.2232,530.85C173.9472,531.091,173.5772,531.211,173.1112,531.211L171.6712,531.211L171.6712,528.511z M174.8842,534.854L175.8902,534.854L175.8902,534.795L174.2202,531.778C174.6462,531.615,174.9782,531.369,175.2192,531.041C175.4572,530.712,175.5772,530.326,175.5772,529.883C175.5772,529.187,175.3612,528.656,174.9302,528.292C174.4992,527.927,173.8832,527.745,173.0822,527.745L170.7282,527.745L170.7282,534.854L171.6712,534.854L171.6712,531.978L173.3412,531.978L174.8842,534.854z M196.2262,482.597C196.2162,483.421,196.0452,484.053,195.7132,484.494C195.3812,484.935,194.9122,485.156,194.3072,485.156C193.7012,485.156,193.2282,484.921,192.8892,484.453C192.5482,483.984,192.3782,483.343,192.3782,482.529L192.3782,482.006C192.3882,481.206,192.5622,480.58,192.9022,480.129C193.2432,479.678,193.7082,479.453,194.2972,479.453C194.9152,479.453,195.3922,479.68,195.7252,480.134C196.0592,480.588,196.2262,481.233,196.2262,482.07L196.2262,482.597z M197.1632,482.075C197.1632,481.381,197.0462,480.775,196.8112,480.256C196.5772,479.737,196.2422,479.339,195.8092,479.062C195.3732,478.785,194.8702,478.647,194.2972,478.647C193.7372,478.647,193.2402,478.786,192.8052,479.064C192.3712,479.343,192.0342,479.744,191.7972,480.268C191.5592,480.792,191.4402,481.396,191.4402,482.08L191.4402,482.592C191.4472,483.263,191.5702,483.853,191.8092,484.362C192.0492,484.872,192.3852,485.264,192.8172,485.539C193.2502,485.814,193.7472,485.952,194.3072,485.952C194.5672,485.952,194.8142,485.922,195.0492,485.864L196.5482,487.055L197.1872,486.464L195.9182,485.468C196.3112,485.188,196.6182,484.8,196.8362,484.304C197.0542,483.807,197.1632,483.216,197.1632,482.529L197.1632,482.075z M173.0302,499.315C174.0512,499.315,174.8302,499.641,175.3662,500.29C175.9022,500.94,176.1712,501.881,176.1712,503.113L176.1712,503.745C176.1602,504.956,175.8782,505.885,175.3232,506.532C174.7682,507.179,173.9732,507.503,172.9362,507.503L171.6472,507.503L171.6472,499.315L173.0302,499.315z M172.9442,509.097C173.9712,509.097,174.8812,508.875,175.6752,508.433C176.4692,507.99,177.0812,507.36,177.5112,506.542C177.9402,505.725,178.1552,504.776,178.1552,503.698L178.1552,503.128C178.1552,502.065,177.9412,501.123,177.5152,500.3C177.0882,499.477,176.4842,498.842,175.7062,498.394C174.9282,497.946,174.0352,497.722,173.0302,497.722L169.6712,497.722L169.6712,509.097L172.9442,509.097z M150.7652,479.511C151.4612,479.518,151.9992,479.745,152.3792,480.193C152.7582,480.641,152.9472,481.269,152.9472,482.077L152.9472,482.492C152.9472,483.323,152.7462,483.963,152.3442,484.413C151.9422,484.863,151.3802,485.087,150.6572,485.087L149.6712,485.087L149.6712,479.511L150.7652,479.511z M150.7012,485.854C151.3392,485.848,151.8982,485.709,152.3792,485.439C152.8582,485.169,153.2282,484.781,153.4862,484.277C153.7462,483.772,153.8752,483.185,153.8752,482.514L153.8752,482.06C153.8722,481.406,153.7402,480.826,153.4822,480.322C153.2232,479.817,152.8562,479.428,152.3812,479.155C151.9052,478.881,151.3582,478.745,150.7402,478.745L148.7332,478.745L148.7332,485.854L150.7012,485.854z M145.2382,466L201.2552,466L201.2552,539L145.2382,539z'\n }\n },\n {\n id: 'Flipflop', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.5,13.5h57v73h-57V13.5z M29.8,26.2h-5.4V27h2.2v6.4h0.9V27h2.2V26.2z M54.2,45.2h-9v1.5h3.5v9.9h1.9v-9.9 h3.6V45.2z M74.5,29.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3 c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1 s0.3-0.9,0.3-1.4V29.2z M73.6,30.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6 v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V30.4z M74.5,70.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V70.2z M73.6,71.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V71.4z M78.5,29.5h20 M78.5,70.5h20 M1.5,29.5h20 M1.5,70.5h20 M68.5,65.5h6 M31.5,70.5l-10-5 v10L31.5,70.5z'\n }\n },\n {\n id: 'RSLatch', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.5,11.5h57v73h-57V11.5z M28.5,30.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C28.9,29.9,28.8,30.2,28.5,30.4z M27.7,69.3c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9 v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6 c0.2-0.3,0.3-0.6,0.3-1c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H25v7.1h0.9v-3.1H27.7z M25.9,66h1.6c0.5,0,0.9,0.1,1.1,0.3 s0.4,0.5,0.4,0.9c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V66z M49.5,54.6c1.6,0,2.9-0.4,3.8-1.3c0.9-0.9,1.4-2.1,1.4-3.6 v-1.5c0-1.5-0.5-2.7-1.4-3.6c-0.9-0.9-2.1-1.4-3.7-1.4H46v11.4H49.5z M49.5,44.7c1.1,0,1.9,0.3,2.4,0.9c0.5,0.6,0.8,1.4,0.8,2.5v1.5 c0,1.1-0.3,1.9-0.8,2.5s-1.4,0.9-2.5,0.9h-1.5v-8.3H49.5z M74.5,27.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9 c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2 l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V27.2z M73.6,28.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6 c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6 s0.5,1,0.5,1.6V28.4z M74.5,68.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3 c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1 s0.3-0.9,0.3-1.4V68.2z M73.6,69.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6 v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V69.4z M78.5,27.5h20 M78.5,68.5h20 M1.5,27.5h20 M1.5,68.5h20 M68.5,63.5h6'\n }\n },\n {\n id: 'RSLatchSync', ports: rPorts,\n shape: {\n type: 'Path', data: 'M21.5,11.5h56v72h-56V11.5z M28.5,29.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C28.9,28.9,28.8,29.2,28.5,29.4z M27.7,67.3c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9 v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6 c0.2-0.3,0.3-0.6,0.3-1c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H25v7.1h0.9v-3.1H27.7z M25.9,64h1.6c0.5,0,0.9,0.1,1.1,0.3 s0.4,0.5,0.4,0.9c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V64z M73.5,26.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V26.2z M72.6,27.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V27.4z M73.5,67.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9 s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1 c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V67.2z M72.6,68.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6 c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V68.4z M77.5,26.5 h20 M77.5,67.5h20 M1.5,26.5h20 M1.5,67.5h20 M67.5,62.5h6 M1.5,47.5h20 M30.9,47.5l-9.4-4.7v9.4L30.9,47.5z'\n }\n },\n {\n id: 'JKflipflop', ports: jkPorts,\n shape: {\n type: 'Path', data: 'M22.5,14.5h56v72h-56V14.5z M28.9,31.4c0,0.4-0.1,0.7-0.3,1s-0.5,0.4-0.9,0.4c-0.4,0-0.8-0.1-1-0.3 s-0.3-0.6-0.3-1h-0.9c0,0.7,0.2,1.2,0.6,1.5c0.4,0.3,0.9,0.5,1.6,0.5c0.6,0,1.2-0.2,1.6-0.5s0.6-0.9,0.6-1.5v-5.1h-0.9V31.4z M30.4,73.4h1.1l-3-3.7l2.8-3.4h-1l-2.6,3.2H27v-3.2H26v7.1H27v-3.2h0.9L30.4,73.4z M74.5,29.2c0-0.9-0.3-1.6-0.8-2.2 c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0 c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V29.2z M73.6,30.4c0,0.7-0.2,1.2-0.5,1.6 c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6 c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V30.4z M74.5,70.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.2-0.9-2.1-0.9c-0.8,0-1.5,0.3-2,0.9 s-0.8,1.3-0.8,2.2v1.3c0,0.9,0.3,1.6,0.8,2.2s1.2,0.9,2,0.9c0.2,0,0.3,0,0.5,0c0.2,0,0.3-0.1,0.5-0.1l1.3,1.2l0.6-0.6l-1.2-1.1 c0.4-0.3,0.7-0.6,0.9-1.1s0.3-0.9,0.3-1.4V70.2z M73.6,71.4c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6 c-0.3-0.4-0.5-1-0.5-1.6v-1.3c0-0.7,0.2-1.2,0.5-1.6c0.3-0.4,0.8-0.6,1.4-0.6c0.6,0,1.1,0.2,1.5,0.6s0.5,1,0.5,1.6V71.4z M50.7,80.3 c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.9v0.6c0,0.2,0,0.4,0.1,0.7s0.1,0.4,0.2,0.5h0.9v-0.1c-0.1-0.1-0.2-0.3-0.3-0.4 s-0.1-0.4-0.1-0.6v-0.7c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.5-0.9-0.6c0.4-0.2,0.7-0.4,0.9-0.6c0.2-0.3,0.3-0.6,0.3-1 c0-0.7-0.2-1.2-0.6-1.5c-0.4-0.3-1-0.5-1.8-0.5H48v7.1h0.9v-3.1H50.7z M48.9,77h1.6c0.5,0,0.9,0.1,1.1,0.3s0.4,0.5,0.4,0.9 c0,0.4-0.1,0.8-0.4,1c-0.2,0.2-0.6,0.3-1.2,0.3h-1.6V77z M51.5,23.4c-0.3,0.2-0.7,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.3-0.4 c-0.3-0.2-0.5-0.6-0.5-1.1h-0.9c0,0.7,0.3,1.2,0.8,1.6c0.5,0.4,1.2,0.6,1.9,0.6c0.8,0,1.4-0.2,1.8-0.5c0.5-0.3,0.7-0.8,0.7-1.4 c0-0.5-0.2-1-0.6-1.3c-0.4-0.4-1-0.6-1.7-0.8c-0.7-0.2-1.1-0.3-1.4-0.5c-0.3-0.2-0.4-0.5-0.4-0.8c0-0.4,0.1-0.6,0.4-0.9 s0.6-0.3,1.1-0.3c0.5,0,0.9,0.1,1.2,0.4s0.4,0.6,0.4,1h0.9c0-0.6-0.2-1.1-0.7-1.5s-1.1-0.6-1.9-0.6c-0.7,0-1.3,0.2-1.8,0.5 c-0.4,0.4-0.7,0.8-0.7,1.4c0,0.5,0.2,1,0.6,1.3s1,0.6,1.8,0.8c0.6,0.2,1.1,0.3,1.3,0.6s0.4,0.5,0.4,0.8 C51.9,22.9,51.8,23.2,51.5,23.4z M78.5,29.5h20 M78.5,70.5h20 M2.5,29.5h20 M2.5,70.5h20 M68.5,65.5h6 M2.5,50.5h20 M31.9,51.5 l-9.4-4.7v9.4L31.9,51.5z M50.5,14.5v-10 M50.5,96.5v-10'\n }\n },\n {\n id: 'Dflipflop', ports: flipPorts,\n shape: {\n type: 'Path', data: 'M21.2,13.5h57v73h-57V13.5z M78.2,29.5h20 M78.2,70.5h20 M1.2,29.5h20 M1.2,70.5h20 M26.6,33.4 c0.6,0,1.2-0.1,1.7-0.4c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8v-0.5c0-0.7-0.1-1.2-0.4-1.7c-0.3-0.5-0.6-0.9-1.1-1.2 s-1-0.4-1.6-0.4h-2v7.1H26.6z M26.7,27c0.7,0,1.2,0.2,1.6,0.7c0.4,0.4,0.6,1.1,0.6,1.9V30c0,0.8-0.2,1.5-0.6,1.9 c-0.4,0.4-1,0.7-1.7,0.7h-1V27H26.7z M48.9,56.6c1,0,1.9-0.2,2.7-0.7c0.8-0.4,1.4-1.1,1.8-1.9c0.4-0.8,0.6-1.8,0.6-2.8v-0.6 c0-1.1-0.2-2-0.6-2.8c-0.4-0.8-1-1.5-1.8-1.9c-0.8-0.4-1.7-0.7-2.7-0.7h-3.4v11.4H48.9z M48.9,46.8c1,0,1.8,0.3,2.3,1 c0.5,0.7,0.8,1.6,0.8,2.8v0.6c0,1.2-0.3,2.1-0.8,2.8s-1.4,1-2.4,1h-1.3v-8.2H48.9z M74.1,29.6c0-0.7-0.1-1.3-0.4-1.8s-0.6-0.9-1-1.2 c-0.4-0.3-0.9-0.4-1.5-0.4c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1,1.2s-0.4,1.1-0.4,1.8v0.5c0,0.7,0.1,1.3,0.4,1.8 c0.2,0.5,0.6,0.9,1,1.2s0.9,0.4,1.5,0.4c0.3,0,0.5,0,0.7-0.1l1.5,1.2l0.6-0.6l-1.3-1c0.4-0.3,0.7-0.7,0.9-1.2s0.3-1.1,0.3-1.8V29.6z M73.1,30.1c0,0.8-0.2,1.5-0.5,1.9s-0.8,0.7-1.4,0.7s-1.1-0.2-1.4-0.7c-0.3-0.5-0.5-1.1-0.5-1.9v-0.5c0-0.8,0.2-1.4,0.5-1.9 c0.3-0.5,0.8-0.7,1.4-0.7c0.6,0,1.1,0.2,1.4,0.7c0.3,0.5,0.5,1.1,0.5,1.9V30.1z M74.1,70.6c0-0.7-0.1-1.3-0.4-1.8s-0.6-0.9-1-1.2 c-0.4-0.3-0.9-0.4-1.5-0.4c-0.6,0-1.1,0.1-1.5,0.4c-0.4,0.3-0.8,0.7-1,1.2s-0.4,1.1-0.4,1.8v0.5c0,0.7,0.1,1.3,0.4,1.8 c0.2,0.5,0.6,0.9,1,1.2s0.9,0.4,1.5,0.4c0.3,0,0.5,0,0.7-0.1l1.5,1.2l0.6-0.6l-1.3-1c0.4-0.3,0.7-0.7,0.9-1.2s0.3-1.1,0.3-1.8V70.6z M73.1,71.1c0,0.8-0.2,1.5-0.5,1.9s-0.8,0.7-1.4,0.7s-1.1-0.2-1.4-0.7c-0.3-0.5-0.5-1.1-0.5-1.9v-0.5c0-0.8,0.2-1.4,0.5-1.9 c0.3-0.5,0.8-0.7,1.4-0.7c0.6,0,1.1,0.2,1.4,0.7c0.3,0.5,0.5,1.1,0.5,1.9V71.1z M68.2,65.5h6 M31.2,70.5l-10-5v10L31.2,70.5z'\n }\n },\n\n ];\n /* tslint:enable */\n\n var connections = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link11', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link22', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n {\n id: 'Link3', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }\n },\n {\n id: 'Link31', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,\n targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }\n },\n ];\n\n\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n //Initializes symbol palette control\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: items, title: 'Logic Gates' },\n { id: 'connectors', expanded: true, symbols: connections, title: 'Connectors' },\n ],\n width: '100%', height: '100%',\n symbolMargin: { left: 10, right: 10, top: 10, bottom: 10 },\n symbolHeight: 60, symbolWidth: 62,\n getNodeDefaults: function (symbol) {\n symbol.width = 55;\n symbol.height = 40;\n symbol.offsetX = 20;\n symbol.offsetY = 20;\n symbol.style = { fill: 'white', strokeWidth: 1, strokeColor: '#444' };\n },\n symbolPreview: { height: 50, width: 50 },\n getSymbolInfo: function () {\n return { fit: true };\n }\n });\n palette.appendTo('#symbolpalette');\n\n\n\n"} \ No newline at end of file diff --git a/src/diagram/mind-map-stack.json b/src/diagram/mind-map-stack.json index 0088a272..d7e2223a 100644 --- a/src/diagram/mind-map-stack.json +++ b/src/diagram/mind-map-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/*jshint esversion: 6 */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.MindMap, ej.diagrams.HierarchicalTree);\nvar diagram;\n\nvar __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n /* jshint proto: true */\n ({ __proto__: [] } instanceof Array && function (der, b) { der.__proto__ = b; }) ||\n function (der, b) { for (var p in b) if (b.hasOwnProperty(p)) der[p] = b[p]; };\n return function (der, b) {\n extendStatics(der, b);\n function __() { this.constructor = der; }\n der.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Mind-map sample\n */\n\nfunction selectionChange(arg) {\n if (arg.state === 'Changing') {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n for (var _i = 0, _a = diagram.selectedItems.userHandles; _i < _a.length; _i++) {\n var handle_1 = _a[_i];\n handle_1.visible = true;\n }\n if (arg.newValue[0].data.branch === 'Left' ||\n arg.newValue[0].data.branch === 'subLeft') {\n hideUserHandle('leftHandle');\n changeUserHandlePosition('leftHandle');\n }\n else if (arg.newValue[0].data.branch === 'Right' ||\n arg.newValue[0].data.branch === 'subRight') {\n hideUserHandle('rightHandle');\n changeUserHandlePosition('rightHandle');\n }\n else if (arg.newValue[0].data.branch === 'Root') {\n hideUserHandle('delete');\n }\n }\n else {\n hideUserHandle('leftHandle');\n hideUserHandle('rightHandle');\n hideUserHandle('delete');\n }\n }\n}\n\nfunction getNodeDefaults(obj) {\n obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Drag;\n if (obj.data.branch === 'Left' || obj.data.branch === 'Right' || obj.data.branch === 'Root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.borderColor = 'black';\n obj.style = {\n fill: obj.data.branch === 'Root' ? '#E74C3C' : '#F39C12', strokeColor: 'none',\n strokeWidth: 2\n };\n obj.annotations = [{\n content: obj.data.Label, margin: { left: 10, right: 10, top: 10, bottom: 10 },\n style: { color: 'white' }\n }];\n var port1 = getPort();\n for (var i = 0; i < port1.length; i++) {\n obj.ports.push(new ej.diagrams.PointPort(obj, 'ports', port1[i], true));\n }\n hideUserHandle('Top');\n }\n else {\n var color = void 0;\n if (obj.data.branch === 'Right' || obj.data.branch === 'subRight') {\n color = '#8E44AD';\n }\n else {\n color = '#3498DB';\n }\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: color, strokeWidth: 0 };\n obj.minWidth = 100;\n obj.height = 4;\n var port2 = getPort();\n for (var j = 0; j < port2.length; j++) {\n obj.ports.push(new ej.diagrams.PointPort(obj, 'ports', port2[j], true));\n }\n obj.annotations = [{\n content: obj.data.Label, offset: { x: 0.5, y: 0 }, verticalAlignment: 'Bottom'\n }];\n obj.shape.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n }\n return obj;\n}\n\nfunction getConnectorDefaults(connector, diagram) {\n connector.type = 'Bezier';\n connector.targetDecorator = { shape: 'None' };\n var sourceNode = diagram.getObject(connector.sourceID);\n var targetNode = diagram.getObject(connector.targetID);\n if (targetNode.data.branch === 'Right' || targetNode.data.branch === 'subRight') {\n connector.sourcePortID = sourceNode.ports[0].id;\n connector.targetPortID = targetNode.ports[1].id;\n connector.style = { strokeWidth: 2, strokeColor: '#8E44AD' };\n }\n else if (targetNode.data.branch === 'Left' || targetNode.data.branch === 'subLeft') {\n connector.sourcePortID = sourceNode.ports[1].id;\n connector.targetPortID = targetNode.ports[0].id;\n connector.style = { strokeWidth: 2, strokeColor: '#3498DB' };\n }\n connector.constraints &= ~ej.diagrams.ConnectorConstraints.Select;\n return connector;\n}\n\n//creation of the Ports\nfunction getPort() {\n var port =\n [{\n id: 'port1', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden,\n style: { fill: 'black' }\n },\n {\n id: 'port2', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden,\n style: { fill: 'black' }\n },\n ];\n return port;\n}\n\nfunction addNode() {\n var obj = {};\n obj.id = ej.diagrams.randomId();\n obj.data = {};\n obj.data.Label = 'Node';\n return obj;\n}\nfunction addConnector(source, target) {\n var connector = {};\n connector.id = ej.diagrams.randomId();\n connector.sourceID = source.id;\n connector.targetID = target.id;\n return connector;\n}\n\n//Tool for Userhandles.\nfunction getTool(action) {\n var tool;\n if (action === 'leftHandle') {\n tool = new LeftExtendTool(diagram.commandHandler);\n } else if (action === 'rightHandle') {\n tool = new RightExtendTool(diagram.commandHandler);\n } else if (action === 'delete') {\n tool = new DeleteClick(diagram.commandHandler);\n }\n return tool;\n}\n\nvar LeftExtendTool = (function (_super) {\n __extends(LeftExtendTool, _super);\n function LeftExtendTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n LeftExtendTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n LeftExtendTool.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedElement = this.commandHandler.getSelectedObject();\n if (selectedElement[0]) {\n if (selectedElement[0] instanceof ej.diagrams.Node) {\n var node = addNode();\n if (selectedElement[0].data.branch === 'Root') {\n node.data.branch = 'Right';\n }\n else if (selectedElement[0].data.branch === 'Right' ||\n selectedElement[0].data.branch === 'subRight') {\n node.data.branch = 'subRight';\n }\n var connector = addConnector(selectedElement[0], node);\n diagram.clearSelection();\n var nd = diagram.add(node);\n diagram.add(connector);\n diagram.doLayout();\n diagram.bringIntoView(nd.wrapper.bounds);\n diagram.startTextEdit(nd);\n }\n }\n }\n };\n return LeftExtendTool;\n}(ej.diagrams.ToolBase));\n\nvar RightExtendTool = (function (_super) {\n __extends(RightExtendTool, _super);\n function RightExtendTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n RightExtendTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n RightExtendTool.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedObject = this.commandHandler.getSelectedObject();\n if (selectedObject[0]) {\n if (selectedObject[0] instanceof ej.diagrams.Node) {\n var node = addNode();\n if (selectedObject[0].data.branch === 'Root') {\n node.data.branch = 'Left';\n }\n else if (selectedObject[0].data.branch === 'Left' ||\n selectedObject[0].data.branch === 'subLeft') {\n node.data.branch = 'subLeft';\n }\n var connector = addConnector(selectedObject[0], node);\n diagram.clearSelection();\n var nd = diagram.add(node);\n diagram.add(connector);\n diagram.doLayout();\n diagram.bringIntoView(nd.wrapper.bounds);\n diagram.startTextEdit(nd);\n }\n }\n }\n };\n return RightExtendTool;\n}(ej.diagrams.ToolBase));\n\nvar DeleteClick = (function (_super) {\n __extends(DeleteClick, _super);\n function DeleteClick() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DeleteClick.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n DeleteClick.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedObject = this.commandHandler.getSelectedObject();\n if (selectedObject[0]) {\n if (selectedObject[0] instanceof ej.diagrams.Node) {\n var node = selectedObject[0];\n this.removeSubChild(node);\n }\n diagram.doLayout();\n }\n }\n };\n DeleteClick.prototype.removeSubChild = function (node) {\n for (var i = node.outEdges.length - 1; i >= 0; i--) {\n var connector = diagram.getObject(node.outEdges[i]);\n var childNode = diagram.getObject(connector.targetID);\n if (childNode.outEdges.length > 0) {\n this.removeSubChild(childNode);\n }\n else {\n diagram.remove(childNode);\n }\n }\n diagram.remove(node);\n };\n return DeleteClick;\n}(ej.diagrams.ToolBase));\n\nfunction onchange(params) {\n if (selectedObject[0].data.branch === 'Root' || selectedObject[0].data.branch === 'Left' || selectedObject[0].data.branch === 'Right') {\n selectedObject[0].style.fill = args.target.value;\n diagram.dataBind();\n } else {\n selectedObject[0].annotations[0].style.color = args.target.value;\n diagram.dataBind();\n }\n}\n//hide the require userhandle.\nfunction hideUserHandle(name) {\n for (var _i = 0, _a = diagram.selectedItems.userHandles; _i < _a.length; _i++) {\n var handle_2 = _a[_i];\n if (handle_2.name === name) {\n handle_2.visible = false;\n }\n }\n}\n\nvar leftarrow = 'M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z';\nvar rightarrow = 'M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z';\nvar deleteicon = 'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76' +\n '96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04' +\n '91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z';\nvar leftuserhandle = setUserHandle('leftHandle', leftarrow, 'Left', 1, { top: 0, bottom: 0, left: 0, right: 10 }, 'Left', 'Top');\nvar rightuserhandle = setUserHandle('rightHandle', rightarrow, 'Right', 1, { top: 0, bottom: 0, left: 10, right: 0 }, 'Right', 'Top');\nvar deleteuserhandle = setUserHandle('delete', deleteicon, 'Top', 0.5, { top: 0, bottom: 10, left: 0, right: 0 }, 'Center', 'Center');\nvar handle = [leftuserhandle, rightuserhandle, deleteuserhandle];\n//set and creation of the Userhandle.\nfunction setUserHandle(name, pathData, side, offset, margin, halignment, valignment) {\n var userhandle = {\n name: name,\n pathData: pathData,\n backgroundColor: 'black',\n pathColor: 'white',\n side: side,\n offset: offset,\n margin: margin,\n horizontalAlignment: halignment,\n verticalAlignment: valignment,\n };\n return userhandle;\n}\n//Change the Position of the UserHandle.\nfunction changeUserHandlePosition(change) {\n for (var handle in diagram.selectedItems.userHandles) {\n if (handle.name === 'delete' && change === 'leftHandle') {\n applyHandle(handle, 'Left', 1, { top: 0, bottom: 0, left: 0, right: 10 }, 'Left', 'Top');\n\n } else if (handle.name === 'delete' && change === 'rightHandle') {\n applyHandle(handle, 'Right', 1, { top: 0, bottom: 0, left: 10, right: 0 }, 'Right', 'Top');\n }\n }\n}\n//set the value for UserHandle element\nfunction applyHandle(handle, side, offset, margin, halignment, valignment) {\n handle.side = side;\n handle.offset = offset;\n handle.margin = margin;\n handle.horizontalAlignment = halignment;\n handle.verticalAlignment = valignment;\n}\n\n\n var items = new ej.data.DataManager(window.data, new ej.data.Query().take(7));\n\n //initialization of the Diagram.\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '550px',\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n tool: ej.diagrams.DiagramTools.SingleSelect,\n layout: {\n type: 'MindMap', horizontalSpacing: 50,\n getBranch: function (node) {\n return node.data.branch;\n }\n },\n selectionChange: selectionChange,\n selectedItems: { constraints: ej.diagrams.SelectorConstraints.UserHandle, userHandles: handle },\n dataSourceSettings: { id: 'id', parentId: 'parentId', dataManager: items, root: String(1) },\n //sets node default value\n getNodeDefaults: getNodeDefaults,\n //sets connector default value \n getConnectorDefaults: getConnectorDefaults,\n getCustomTool: getTool,\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/*jshint esversion: 6 */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.MindMap, ej.diagrams.HierarchicalTree);\nvar diagram;\n\nvar __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n /* jshint proto: true */\n ({ __proto__: [] } instanceof Array && function (der, b) { der.__proto__ = b; }) ||\n function (der, b) { for (var p in b) if (b.hasOwnProperty(p)) der[p] = b[p]; };\n return function (der, b) {\n extendStatics(der, b);\n function __() { this.constructor = der; }\n der.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Mind-map sample\n */\n\nfunction selectionChange(arg) {\n if (arg.state === 'Changing') {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n for (var _i = 0, _a = diagram.selectedItems.userHandles; _i < _a.length; _i++) {\n var handle_1 = _a[_i];\n handle_1.visible = true;\n }\n if (arg.newValue[0].data.branch === 'Left' ||\n arg.newValue[0].data.branch === 'subLeft') {\n hideUserHandle('leftHandle');\n changeUserHandlePosition('leftHandle');\n }\n else if (arg.newValue[0].data.branch === 'Right' ||\n arg.newValue[0].data.branch === 'subRight') {\n hideUserHandle('rightHandle');\n changeUserHandlePosition('rightHandle');\n }\n else if (arg.newValue[0].data.branch === 'Root') {\n hideUserHandle('delete');\n }\n }\n else {\n hideUserHandle('leftHandle');\n hideUserHandle('rightHandle');\n hideUserHandle('delete');\n }\n }\n}\n\nfunction getNodeDefaults(obj) {\n obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Drag;\n if (obj.data.branch === 'Left' || obj.data.branch === 'Right' || obj.data.branch === 'Root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.borderColor = 'black';\n obj.style = {\n fill: obj.data.branch === 'Root' ? '#E74C3C' : '#F39C12', strokeColor: 'none',\n strokeWidth: 2\n };\n obj.annotations = [{\n content: obj.data.Label, margin: { left: 10, right: 10, top: 10, bottom: 10 },\n style: { color: 'white' }\n }];\n var port1 = getPort();\n for (var i = 0; i < port1.length; i++) {\n obj.ports.push(new ej.diagrams.PointPort(obj, 'ports', port1[i], true));\n }\n hideUserHandle('Top');\n }\n else {\n var color = void 0;\n if (obj.data.branch === 'Right' || obj.data.branch === 'subRight') {\n color = '#8E44AD';\n }\n else {\n color = '#3498DB';\n }\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: color, strokeWidth: 0 };\n obj.minWidth = 100;\n obj.height = 4;\n var port2 = getPort();\n for (var j = 0; j < port2.length; j++) {\n obj.ports.push(new ej.diagrams.PointPort(obj, 'ports', port2[j], true));\n }\n obj.annotations = [{\n content: obj.data.Label, offset: { x: 0.5, y: 0 }, verticalAlignment: 'Bottom'\n }];\n obj.shape.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n }\n return obj;\n}\n\nfunction getConnectorDefaults(connector, diagram) {\n connector.type = 'Bezier';\n connector.targetDecorator = { shape: 'None' };\n var sourceNode = diagram.getObject(connector.sourceID);\n var targetNode = diagram.getObject(connector.targetID);\n if (targetNode.data.branch === 'Right' || targetNode.data.branch === 'subRight') {\n connector.sourcePortID = sourceNode.ports[0].id;\n connector.targetPortID = targetNode.ports[1].id;\n connector.style = { strokeWidth: 2, strokeColor: '#8E44AD' };\n }\n else if (targetNode.data.branch === 'Left' || targetNode.data.branch === 'subLeft') {\n connector.sourcePortID = sourceNode.ports[1].id;\n connector.targetPortID = targetNode.ports[0].id;\n connector.style = { strokeWidth: 2, strokeColor: '#3498DB' };\n }\n connector.constraints &= ~ej.diagrams.ConnectorConstraints.Select;\n return connector;\n}\n\n//creation of the Ports\nfunction getPort() {\n var port =\n [{\n id: 'port1', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden,\n style: { fill: 'black' }\n },\n {\n id: 'port2', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden,\n style: { fill: 'black' }\n },\n ];\n return port;\n}\n\nfunction addNode() {\n var obj = {};\n obj.id = ej.diagrams.randomId();\n obj.data = {};\n obj.data.Label = 'Node';\n return obj;\n}\nfunction addConnector(source, target) {\n var connector = {};\n connector.id = ej.diagrams.randomId();\n connector.sourceID = source.id;\n connector.targetID = target.id;\n return connector;\n}\n\n//Tool for Userhandles.\nfunction getTool(action) {\n var tool;\n if (action === 'leftHandle') {\n tool = new LeftExtendTool(diagram.commandHandler);\n } else if (action === 'rightHandle') {\n tool = new RightExtendTool(diagram.commandHandler);\n } else if (action === 'delete') {\n tool = new DeleteClick(diagram.commandHandler);\n }\n return tool;\n}\n\nvar LeftExtendTool = (function (_super) {\n __extends(LeftExtendTool, _super);\n function LeftExtendTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n LeftExtendTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n LeftExtendTool.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedElement = this.commandHandler.getSelectedObject();\n if (selectedElement[0]) {\n if (selectedElement[0] instanceof ej.diagrams.Node) {\n var node = addNode();\n if (selectedElement[0].data.branch === 'Root') {\n node.data.branch = 'Right';\n }\n else if (selectedElement[0].data.branch === 'Right' ||\n selectedElement[0].data.branch === 'subRight') {\n node.data.branch = 'subRight';\n }\n var connector = addConnector(selectedElement[0], node);\n diagram.clearSelection();\n var nd = diagram.add(node);\n diagram.add(connector);\n diagram.doLayout();\n diagram.bringIntoView(nd.wrapper.bounds);\n diagram.startTextEdit(nd);\n }\n }\n }\n };\n return LeftExtendTool;\n}(ej.diagrams.ToolBase));\n\nvar RightExtendTool = (function (_super) {\n __extends(RightExtendTool, _super);\n function RightExtendTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n RightExtendTool.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n RightExtendTool.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedObject = this.commandHandler.getSelectedObject();\n if (selectedObject[0]) {\n if (selectedObject[0] instanceof ej.diagrams.Node) {\n var node = addNode();\n if (selectedObject[0].data.branch === 'Root') {\n node.data.branch = 'Left';\n }\n else if (selectedObject[0].data.branch === 'Left' ||\n selectedObject[0].data.branch === 'subLeft') {\n node.data.branch = 'subLeft';\n }\n var connector = addConnector(selectedObject[0], node);\n diagram.clearSelection();\n var nd = diagram.add(node);\n diagram.add(connector);\n diagram.doLayout();\n diagram.bringIntoView(nd.wrapper.bounds);\n diagram.startTextEdit(nd);\n }\n }\n }\n };\n return RightExtendTool;\n}(ej.diagrams.ToolBase));\n\nvar DeleteClick = (function (_super) {\n __extends(DeleteClick, _super);\n function DeleteClick() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DeleteClick.prototype.mouseDown = function (args) {\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n DeleteClick.prototype.mouseUp = function (args) {\n if (this.inAction) {\n var selectedObject = this.commandHandler.getSelectedObject();\n if (selectedObject[0]) {\n if (selectedObject[0] instanceof ej.diagrams.Node) {\n var node = selectedObject[0];\n this.removeSubChild(node);\n }\n diagram.doLayout();\n }\n }\n };\n DeleteClick.prototype.removeSubChild = function (node) {\n for (var i = node.outEdges.length - 1; i >= 0; i--) {\n var connector = diagram.getObject(node.outEdges[i]);\n var childNode = diagram.getObject(connector.targetID);\n if (childNode.outEdges.length > 0) {\n this.removeSubChild(childNode);\n }\n else {\n diagram.remove(childNode);\n }\n }\n diagram.remove(node);\n };\n return DeleteClick;\n}(ej.diagrams.ToolBase));\n\nfunction onchange(params) {\n if (selectedObject[0].data.branch === 'Root' || selectedObject[0].data.branch === 'Left' || selectedObject[0].data.branch === 'Right') {\n selectedObject[0].style.fill = args.target.value;\n diagram.dataBind();\n } else {\n selectedObject[0].annotations[0].style.color = args.target.value;\n diagram.dataBind();\n }\n}\n//hide the require userhandle.\nfunction hideUserHandle(name) {\n for (var _i = 0, _a = diagram.selectedItems.userHandles; _i < _a.length; _i++) {\n var handle_2 = _a[_i];\n if (handle_2.name === name) {\n handle_2.visible = false;\n }\n }\n}\n\nvar leftarrow = 'M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z';\nvar rightarrow = 'M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z';\nvar deleteicon = 'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76' +\n '96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04' +\n '91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z';\nvar leftuserhandle = setUserHandle('leftHandle', leftarrow, 'Left', 1, { top: 0, bottom: 0, left: 0, right: 10 }, 'Left', 'Top');\nvar rightuserhandle = setUserHandle('rightHandle', rightarrow, 'Right', 1, { top: 0, bottom: 0, left: 10, right: 0 }, 'Right', 'Top');\nvar deleteuserhandle = setUserHandle('delete', deleteicon, 'Top', 0.5, { top: 0, bottom: 10, left: 0, right: 0 }, 'Center', 'Center');\nvar handle = [leftuserhandle, rightuserhandle, deleteuserhandle];\n//set and creation of the Userhandle.\nfunction setUserHandle(name, pathData, side, offset, margin, halignment, valignment) {\n var userhandle = {\n name: name,\n pathData: pathData,\n backgroundColor: 'black',\n pathColor: 'white',\n side: side,\n offset: offset,\n margin: margin,\n horizontalAlignment: halignment,\n verticalAlignment: valignment,\n };\n return userhandle;\n}\n//Change the Position of the UserHandle.\nfunction changeUserHandlePosition(change) {\n for (var handle in diagram.selectedItems.userHandles) {\n if (handle.name === 'delete' && change === 'leftHandle') {\n applyHandle(handle, 'Left', 1, { top: 0, bottom: 0, left: 0, right: 10 }, 'Left', 'Top');\n\n } else if (handle.name === 'delete' && change === 'rightHandle') {\n applyHandle(handle, 'Right', 1, { top: 0, bottom: 0, left: 10, right: 0 }, 'Right', 'Top');\n }\n }\n}\n//set the value for UserHandle element\nfunction applyHandle(handle, side, offset, margin, halignment, valignment) {\n handle.side = side;\n handle.offset = offset;\n handle.margin = margin;\n handle.horizontalAlignment = halignment;\n handle.verticalAlignment = valignment;\n}\n\n\n var items = new ej.data.DataManager(window.data, new ej.data.Query().take(7));\n\n //initialization of the Diagram.\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '550px',\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n tool: ej.diagrams.DiagramTools.SingleSelect,\n layout: {\n type: 'MindMap', horizontalSpacing: 50,\n getBranch: function (node) {\n return node.data.branch;\n }\n },\n selectionChange: selectionChange,\n selectedItems: { constraints: ej.diagrams.SelectorConstraints.UserHandle, userHandles: handle },\n dataSourceSettings: { id: 'id', parentId: 'parentId', dataManager: items, root: String(1) },\n //sets node default value\n getNodeDefaults: getNodeDefaults,\n //sets connector default value \n getConnectorDefaults: getConnectorDefaults,\n getCustomTool: getTool,\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"} \ No newline at end of file diff --git a/src/diagram/network-diagram-stack.json b/src/diagram/network-diagram-stack.json index aad76f3e..5dd5e85c 100644 --- a/src/diagram/network-diagram-stack.json +++ b/src/diagram/network-diagram-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}var template1 =\n ' ';\nvar template2 =\n ' ';\nvar template3 =\n ' ';\nvar template4 =\n ' ';\nvar template5 = ' ';\nvar template6 =\n ' ';\nvar template7 =\n ' ';\nvar template8 =\n ' ';\n\nvar template10 = '';\nvar template11 = '';\nvar template12 = '';\nvar template13 = '';\nvar template14 = '';\nvar template15 = ' ';\nvar template16 = '';\nvar template17 = '';\nvar template18 = ' path d=\"M10.7131909,30.4389491 C10.6918801,30.423109 10.6701242,30.4087605 10.6482026,30.395712 L10.7131909,30.4389491 Z M11,30.6451981 C13.289733,32.2606898 15.7637224,32.9992203 18.4541771,32.8758063 C21.0894422,32.7549239 23.2603428,31.9860703 25,30.5711756 L25,26.6652832 C25,22.79929 21.8659932,19.6652832 18,19.6652832 C14.1340068,19.6652832 11,22.79929 11,26.6652832 C11,27.7731018 11,27.7731018 11,28.8809204 C11,29.8134885 11,29.9610154 11,30.6452056 Z\" id=\"Rectangle-4\" stroke=\"#5C90DF\" stroke-width=\"2\"/>';\nvar arrow = 'M 0 26.4576 L 26.4576 0 L 26.4576 0 L 26.4576 17.46239 L 26.4576 17.46239 L 113.3856 17.46239 L 113.3856 17.46239' + 'L 113.3856 35.45279 L 113.3856 35.45279 L 26.4576 35.45279 L 26.4576 35.45279 L 26.4576 52.91519 L 26.4576 52.91519 L 0 26.4576 Z';\n\n\nfunction getNetworkNodeDefaults(node) {\n node.style.strokeColor = '#5C90DF';\n node.style.fill = 'transparent';\n if (node.annotations.length !== 0) {\n node.annotations[0].style.color = 'black';\n node.annotations[0].style.fontSize = 12;\n node.annotations[0].style = {\n textWrapping: 'NoWrap',\n };\n }\n if (node.ports.length !== 0) {\n for (var i = 0; i < node.ports.length; i++) {\n node.ports[i].visibility = ej.diagrams.PortVisibility.Hidden;\n }\n }\n if (node.shape.type === 'Native') {\n if (node.id === 'Server1') {\n node.width = 50;\n node.height = 65;\n } else if (\n node.id === 'WorkStation1' || node.id === 'WorkStation2' ||\n node.id === 'WorkStation3' || node.id === 'WorkStation4'\n ) {\n node.width = 60;\n node.height = 40;\n } else if (\n node.id === 'RemoteController1' || node.id === 'RemoteController2' ||\n node.id === 'RemoteController3'\n ) {\n node.width = 25;\n node.height = 50;\n } else if (\n node.id === 'modem1' || node.id === 'modem2' || node.id === 'modem3' ||\n node.id === 'modem4' || node.id === 'modem5' || node.id === 'sensor'\n ) {\n node.width = 40;\n node.height = 30;\n } else if (\n node.id === 'DeviceDriver1' || node.id === 'DeviceDriver2' ||\n node.id === 'DeviceDriver3'\n ) {\n node.width = 30;\n node.height = 33;\n } else if (node.id === 'AnalogIO' || node.id === 'HMI') {\n node.width = 40;\n node.height = 50;\n }\n node.shape.scale = 'Stretch';\n }\n if (node.shape.type === 'Text') {\n node.width = 127;\n node.height = 40;\n node.style = { bold: true, fontSize: 16 };\n }\n if (\n node.id === 'connector1' || node.id === 'connector2' || node.id === 'connector3' ||\n node.id === 'connector4' || node.id === 'connector5' || node.id === 'connector6'\n ) {\n if (node.id !== 'connector2' && node.id !== 'connector6') {\n node.rotateAngle = 270;\n }\n node.width = 50;\n node.height = 20;\n node.style = { strokeColor: '#5C90DF', fill: 'white' };\n node.shape = { type: 'Path', data: arrow };\n }\n return node;\n}\n\nfunction getConnectorDefaults(connector) {\n connector.targetDecorator = { shape: 'Arrow', width: 8, height: 8, style: { fill: '#5C90DF', strokeColor: '#5C90DF' } };\n connector.style.strokeColor = '#5C90DF';\n if (connector.annotations.length !== 0) {\n connector.annotations[0].style.fill = 'white';\n }\n return connector;\n}\n\nfunction getSymbolDefaults(symbol) {\n if (symbol.id === 'arrow1') {\n symbol.width = 75; symbol.height = 60;\n symbol.offsetX = 160; symbol.offsetY = 135;\n symbol.style.strokeColor = '#5C90DF';\n symbol.style.fill = 'white';\n } else {\n if (symbol.id === 'remoteController') {\n symbol.width = 25;\n } else {\n symbol.width = 40;\n }\n symbol.height = 40; symbol.offsetX = 20;\n symbol.offsetY = 20;\n symbol.shape.scale = 'Stretch';\n }\n}\n\nfunction onFileRemove(args) {\n args.postRawFile = false;\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var paletteIcons = document.getElementById('palette-icon');\n if (paletteIcons) {\n paletteIcons.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var paletteSpaces = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!paletteSpaces.classList.contains('sb-mobile-palette-open')) {\n paletteSpaces.classList.add('sb-mobile-palette-open');\n }\n else {\n paletteSpaces.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n/** * Network Diagram sample\n */\n// tslint:disable-next-line:max-func-body-length\n\n\n var port = [\n { id: 'port1', offset: { x: 0, y: 0.5 } },\n { id: 'port2', offset: { x: 1, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.1 } },\n { id: 'port4', offset: { x: 0.5, y: 0.92 } }\n ];\n var portrc = [\n { id: 'port1', offset: { x: 0.05, y: 0.5 } },\n { id: 'port2', offset: { x: 1, y: 0.5 } },\n { id: 'port3', offset: { x: 0.85, y: 0.1 } },\n { id: 'port4', offset: { x: 0.6, y: 0.97 } }\n ];\n var porthmi = [\n { id: 'port1', offset: { x: 0.34, y: 0.5 } },\n { id: 'port2', offset: { x: 0.75, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.05 } },\n { id: 'port4', offset: { x: 0.6, y: 0.9 } }\n ];\n var port2 = [\n { id: 'port1', offset: { x: 0.45, y: 0.5 } },\n { id: 'port2', offset: { x: 0.97, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.97 } }\n ];\n var portmo = [\n { id: 'port1', offset: { x: 0.02, y: 0.6 } },\n { id: 'port2', offset: { x: 0.98, y: 0.625 } },\n { id: 'port3', offset: { x: 0.5, y: 0.3 } },\n { id: 'port4', offset: { x: 0.5, y: 0.97 } }\n ];\n var nodes = [\n {\n id: 'Server1', offsetX: 80, offsetY: 75,\n shape: { type: 'Native', content: template1 },\n annotations: [{ content: 'Server', offset: { x: 0.5, y: 0 }, margin: { bottom: 10 } }],\n ports: port\n },\n {\n id: 'WorkStation1', offsetX: 250, offsetY: 75,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Work Station', margin: { bottom: 25 }, offset: { x: 1.4, y: 0.2 } }],\n ports: port2\n },\n {\n id: 'WorkStation2', offsetX: 350, offsetY: 75,\n shape: { type: 'Native', content: template2 },\n ports: port2\n },\n {\n id: 'modem1', offsetX: 450, offsetY: 125,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem', margin: { right: 25 }, offset: { x: 0, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'modem2', offsetX: 525, offsetY: 175,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem1', margin: { bottom: 10 }, offset: { x: 0.5, y: 0 } }],\n ports: portmo\n },\n {\n id: 'RemoteController1', offsetX: 600, offsetY: 125,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Remote Controller', margin: { bottom: 10 }, offset: { x: 0.5, y: 0 } }],\n ports: portrc\n },\n {\n id: 'modem3', offsetX: 350, offsetY: 205,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem4', margin: { left: 35 }, offset: { x: 1, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'modem4', offsetX: 450, offsetY: 245,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem2', offset: { x: 0.5, y: 1.3 } }],\n ports: portmo\n },\n {\n id: 'modem5', offsetX: 350, offsetY: 330,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem3', margin: { right: 25 }, offset: { x: 0, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'WorkStation3', offsetX: 600, offsetY: 250,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Remote Work Staions', margin: { top: 12 }, offset: { x: 0.5, y: 1 } }],\n ports: port2\n },\n {\n id: 'WorkStation4', offsetX: 600, offsetY: 335,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Portable Work Staions', margin: { top: 12 }, offset: { x: 0.5, y: 1 } }],\n ports: port2\n },\n {\n id: 'RemoteController2', offsetX: 80, offsetY: 400,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Control Logic', margin: { top: 8 }, offset: { x: 0.5, y: 1 } }],\n ports: portrc\n },\n {\n id: 'RemoteController3', offsetX: 500, offsetY: 400,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Control Logic', margin: { top: 8 }, offset: { x: 0.5, y: 1 } }],\n ports: portrc\n },\n {\n id: 'AnalogIO', offsetX: 160, offsetY: 500,\n shape: { type: 'Native', content: template5 },\n annotations: [{ content: 'Analog IO', margin: { top: 13 }, offset: { x: 0.5, y: 1 } }],\n ports: porthmi\n },\n {\n id: 'sensor', offsetX: 260, offsetY: 500,\n shape: { type: 'Native', content: template6 },\n annotations: [{ content: 'Sensor', margin: { top: 10 }, offset: { x: 0.5, y: 1 } }],\n ports: port\n },\n {\n id: 'DeviceDriver1', offsetX: 360, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverA', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'DeviceDriver2', offsetX: 460, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverB', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'DeviceDriver3', offsetX: 550, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverC', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'HMI', offsetX: 625, offsetY: 450,\n shape: { type: 'Native', content: template8 },\n annotations: [{ content: 'HMI', offset: { x: 0.5, y: 1.3 } }],\n ports: port\n },\n {\n id: 'controlNet', offsetX: 218.5, offsetY: 380,\n shape: { type: 'Text', content: 'Control Net', }\n },\n {\n id: 'etherNet', offsetX: 218.5, offsetY: 190,\n shape: { type: 'Text', content: 'Ethernet', }\n },\n {\n id: 'deviceNet', offsetX: 345.5, offsetY: 555,\n shape: { type: 'Text', content: 'Device Net', }\n },\n {\n id: 'connector1', offsetX: 99, offsetY: 175\n },\n {\n id: 'connector2', offsetX: 250, offsetY: 125\n },\n {\n id: 'connector3', offsetX: 99, offsetY: 300\n },\n {\n id: 'connector4', offsetX: 178, offsetY: 435\n },\n {\n id: 'connector5', offsetX: 378, offsetY: 435\n },\n {\n id: 'connector6', offsetX: 370, offsetY: 380\n }\n ];\n var connectors = [\n {\n id: 'connectora', sourceID: 'Server1', targetID: 'WorkStation1',\n targetPortID: 'port1'\n },\n {\n id: 'connectorawork', sourceID: 'WorkStation1', targetID: 'WorkStation2',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectoraworkm', sourceID: 'WorkStation2', targetID: 'modem1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n targetPortID: 'port3', sourcePortID: 'port2'\n },\n {\n id: 'connectorm1m2', sourceID: 'modem2', targetID: 'modem1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorm2m3', sourceID: 'modem2', targetID: 'RemoteController1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port4'\n },\n {\n id: 'connectorws2m3', sourceID: 'WorkStation2', targetID: 'modem3',\n sourcePortID: 'port3', targetPortID: 'port3'\n },\n {\n id: 'connectorws2m4', sourceID: 'modem4', targetID: 'modem3', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorm3m4', sourceID: 'modem5', targetID: 'modem3',\n sourcePortID: 'port3', targetPortID: 'port4'\n },\n {\n id: 'connectorm4ws3', sourceID: 'modem5', targetID: 'WorkStation4',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectorm4m5', sourceID: 'modem4', targetID: 'WorkStation3',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectorr2r3', sourceID: 'RemoteController2', targetID: 'RemoteController3',\n targetPortID: 'port1'\n },\n {\n id: 'connectorr2r3qq', sourceID: 'Server1', targetID: 'RemoteController2',\n sourcePortID: 'port4'\n },\n {\n id: 'connectorm3se1', sourceID: 'modem3', targetID: 'Server1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorws2aio1', sourceID: 'RemoteController2', targetID: 'AnalogIO',\n type: 'Orthogonal', sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectorb', sourceID: 'RemoteController2', targetID: 'sensor', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectord1', sourceID: 'RemoteController2', targetID: 'DeviceDriver1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectord2', sourceID: 'RemoteController2', targetID: 'DeviceDriver2', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectordh1d3', sourceID: 'HMI', targetID: 'DeviceDriver3', type: 'Orthogonal',\n sourcePortID: 'port1', targetPortID: 'port3'\n },\n {\n id: 'connectordh1d2', sourceID: 'HMI', type: 'Orthogonal', targetID: 'DeviceDriver2',\n sourcePortID: 'port1', targetPortID: 'port3'\n }\n ];\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n // sets the height and width of the diagram.\n width: '100%', height: '100%',\n // sets the nodes and connectors of the diagram.\n nodes: nodes, connectors: connectors,\n //Sets the default values of a node.\n getNodeDefaults: getNetworkNodeDefaults,\n //Sets the default values of a Connector.\n getConnectorDefaults: getConnectorDefaults,\n // sets snap settings to the diagram.\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n created: created\n });\n diagram.appendTo('#diagram');\n var symbols = [\n { id: 'server', shape: { type: 'Native', content: template1 } },\n { id: 'workStation', shape: { type: 'Native', content: template2 } },\n { id: 'modem', shape: { type: 'Native', content: template3 } },\n { id: 'remoteController', shape: { type: 'Native', content: template4 } },\n { id: 'hmi', shape: { type: 'Native', content: template8 } },\n { id: 'analogIO', shape: { type: 'Native', content: template5 } },\n { id: 'sensor', shape: { type: 'Native', content: template6 } },\n { id: 'deviceDriver', shape: { type: 'Native', content: template7 } },\n { id: 'Virtual-Server-Copy', shape: { type: 'Native', content: template10 } },\n { id: 'user', shape: { type: 'Native', content: template11 } },\n { id: 'User-group', shape: { type: 'Native', content: template12 } },\n { id: 'UPS', shape: { type: 'Native', content: template13 } },\n { id: 'Tablet', shape: { type: 'Native', content: template14 } },\n { id: 'Switch', shape: { type: 'Native', content: template15 } },\n { id: 'Subwoofer', shape: { type: 'Native', content: template16 } },\n { id: 'Speaker', shape: { type: 'Native', content: template17 } },\n { id: 'Security-camera', shape: { type: 'Native', content: template18 } },\n { id: 'arrow1', shape: { type: 'Path', data: arrow } }\n ];\n var sourcePoint = { x: 0, y: 0 };\n var targetPoint = { x: 40, y: 40 };\n var targetDecorator = { shape: 'Arrow' };\n var style = { strokeWidth: 2 };\n var connectorSymbols = [\n {\n id: 'link11', type: 'Straight', sourcePoint: sourcePoint, targetPoint: targetPoint,\n targetDecorator: targetDecorator, style: style\n },\n {\n id: 'link12', type: 'Orthogonal', sourcePoint: sourcePoint, targetPoint: targetPoint,\n targetDecorator: targetDecorator, style: style\n }\n ];\n var palettes = [\n { id: 'network', expanded: true, symbols: symbols, title: 'Network Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, title: 'Connectors' }\n ];\n var palette = new ej.diagrams.SymbolPalette({\n // sets the expandable mode of the symbol palette.\n expandMode: 'Multiple',\n // sets the palettes to be displayed in the symbol palette.\n palettes: palettes,\n // sets the width and height of the palette.\n width: '100%', height: 'calc(100% - 50px)',\n symbolHeight: 48, symbolWidth: 48,\n // sets the default values for the symbols in the symbol palette.\n getNodeDefaults: getSymbolDefaults,\n getSymbolInfo: function (symbol) { return { fit: true }; }\n });\n palette.appendTo('#symbolpalette');\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n\n var button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#browse');\n\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n }, dropArea: dropElement,\n success: onUploadSuccess,\n removing: onFileRemove\n });\n uploadObj.appendTo('#fileupload');\n button.element.onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n var id = 0;\n\n function onUploadSuccess(arg) {\n var file1 = arg.file;\n var file = file1.rawFile;\n var reader = new FileReader();\n reader.addEventListener('load', function (event) {\n var shape;\n var shapeContent = getNativeContent(event.target.result);\n shape = { id: 'newshape' + id.toString(), shape: { type: 'Native', content: shapeContent } };\n palette.addPaletteItem('network', shape);\n });\n id++;\n reader.readAsText(file);\n uploadObj.clearAll();\n }\n\n function getNativeContent(content) {\n var attr = { id: 'svgdiv' };\n var div = createHtmlElement('div', attr);\n document.body.appendChild(div);\n div.innerHTML = content;\n var svgContent = div.getElementsByTagName('svg')[0].outerHTML;\n div.parentElement.removeChild(div);\n return svgContent;\n }\n\n function created() {\n addEvents();\n diagram.fitToPage();\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n\nfunction getNetworkNodeDefaults(node) {\n node.style.strokeColor = '#5C90DF';\n node.style.fill = 'transparent';\n if (node.annotations.length !== 0) {\n node.annotations[0].style.color = 'black';\n node.annotations[0].style.fontSize = 12;\n node.annotations[0].style = {\n textWrapping: 'NoWrap',\n };\n }\n if (node.ports.length !== 0) {\n for (var i = 0; i < node.ports.length; i++) {\n node.ports[i].visibility = ej.diagrams.PortVisibility.Hidden;\n }\n }\n if (node.shape.type === 'Native') {\n if (node.id === 'Server1') {\n node.width = 50;\n node.height = 65;\n } else if (\n node.id === 'WorkStation1' || node.id === 'WorkStation2' ||\n node.id === 'WorkStation3' || node.id === 'WorkStation4'\n ) {\n node.width = 60;\n node.height = 40;\n } else if (\n node.id === 'RemoteController1' || node.id === 'RemoteController2' ||\n node.id === 'RemoteController3'\n ) {\n node.width = 25;\n node.height = 50;\n } else if (\n node.id === 'modem1' || node.id === 'modem2' || node.id === 'modem3' ||\n node.id === 'modem4' || node.id === 'modem5' || node.id === 'sensor'\n ) {\n node.width = 40;\n node.height = 30;\n } else if (\n node.id === 'DeviceDriver1' || node.id === 'DeviceDriver2' ||\n node.id === 'DeviceDriver3'\n ) {\n node.width = 30;\n node.height = 33;\n } else if (node.id === 'AnalogIO' || node.id === 'HMI') {\n node.width = 40;\n node.height = 50;\n }\n node.shape.scale = 'Stretch';\n }\n if (node.shape.type === 'Text') {\n node.width = 127;\n node.height = 40;\n node.style = { bold: true, fontSize: 16 };\n }\n if (\n node.id === 'connector1' || node.id === 'connector2' || node.id === 'connector3' ||\n node.id === 'connector4' || node.id === 'connector5' || node.id === 'connector6'\n ) {\n if (node.id !== 'connector2' && node.id !== 'connector6') {\n node.rotateAngle = 270;\n }\n node.width = 50;\n node.height = 20;\n node.style = { strokeColor: '#5C90DF', fill: 'white' };\n node.shape = { type: 'Path', data: arrow };\n }\n return node;\n}\n\nfunction getConnectorDefaults(connector) {\n connector.targetDecorator = { shape: 'Arrow', width: 8, height: 8, style: { fill: '#5C90DF', strokeColor: '#5C90DF' } };\n connector.style.strokeColor = '#5C90DF';\n if (connector.annotations.length !== 0) {\n connector.annotations[0].style.fill = 'white';\n }\n return connector;\n}\n\nfunction getSymbolDefaults(symbol) {\n if (symbol.id === 'arrow1') {\n symbol.width = 75; symbol.height = 60;\n symbol.offsetX = 160; symbol.offsetY = 135;\n symbol.style.strokeColor = '#5C90DF';\n symbol.style.fill = 'white';\n } else {\n if (symbol.id === 'remoteController') {\n symbol.width = 25;\n } else {\n symbol.width = 40;\n }\n symbol.height = 40; symbol.offsetX = 20;\n symbol.offsetY = 20;\n symbol.shape.scale = 'Stretch';\n }\n}\n\nfunction onFileRemove(args) {\n args.postRawFile = false;\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var paletteIcons = document.getElementById('palette-icon');\n if (paletteIcons) {\n paletteIcons.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var paletteSpaces = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!paletteSpaces.classList.contains('sb-mobile-palette-open')) {\n paletteSpaces.classList.add('sb-mobile-palette-open');\n }\n else {\n paletteSpaces.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n/** * Network Diagram sample\n */\n// tslint:disable-next-line:max-func-body-length\n\n\n var port = [\n { id: 'port1', offset: { x: 0, y: 0.5 } },\n { id: 'port2', offset: { x: 1, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.1 } },\n { id: 'port4', offset: { x: 0.5, y: 0.92 } }\n ];\n var portrc = [\n { id: 'port1', offset: { x: 0.05, y: 0.5 } },\n { id: 'port2', offset: { x: 1, y: 0.5 } },\n { id: 'port3', offset: { x: 0.85, y: 0.1 } },\n { id: 'port4', offset: { x: 0.6, y: 0.97 } }\n ];\n var porthmi = [\n { id: 'port1', offset: { x: 0.34, y: 0.5 } },\n { id: 'port2', offset: { x: 0.75, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.05 } },\n { id: 'port4', offset: { x: 0.6, y: 0.9 } }\n ];\n var port2 = [\n { id: 'port1', offset: { x: 0.45, y: 0.5 } },\n { id: 'port2', offset: { x: 0.97, y: 0.5 } },\n { id: 'port3', offset: { x: 0.5, y: 0.97 } }\n ];\n var portmo = [\n { id: 'port1', offset: { x: 0.02, y: 0.6 } },\n { id: 'port2', offset: { x: 0.98, y: 0.625 } },\n { id: 'port3', offset: { x: 0.5, y: 0.3 } },\n { id: 'port4', offset: { x: 0.5, y: 0.97 } }\n ];\n var nodes = [\n {\n id: 'Server1', offsetX: 80, offsetY: 75,\n shape: { type: 'Native', content: template1 },\n annotations: [{ content: 'Server', offset: { x: 0.5, y: 0 }, margin: { bottom: 10 } }],\n ports: port\n },\n {\n id: 'WorkStation1', offsetX: 250, offsetY: 75,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Work Station', margin: { bottom: 25 }, offset: { x: 1.4, y: 0.2 } }],\n ports: port2\n },\n {\n id: 'WorkStation2', offsetX: 350, offsetY: 75,\n shape: { type: 'Native', content: template2 },\n ports: port2\n },\n {\n id: 'modem1', offsetX: 450, offsetY: 125,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem', margin: { right: 25 }, offset: { x: 0, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'modem2', offsetX: 525, offsetY: 175,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem1', margin: { bottom: 10 }, offset: { x: 0.5, y: 0 } }],\n ports: portmo\n },\n {\n id: 'RemoteController1', offsetX: 600, offsetY: 125,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Remote Controller', margin: { bottom: 10 }, offset: { x: 0.5, y: 0 } }],\n ports: portrc\n },\n {\n id: 'modem3', offsetX: 350, offsetY: 205,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem4', margin: { left: 35 }, offset: { x: 1, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'modem4', offsetX: 450, offsetY: 245,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem2', offset: { x: 0.5, y: 1.3 } }],\n ports: portmo\n },\n {\n id: 'modem5', offsetX: 350, offsetY: 330,\n shape: { type: 'Native', content: template3 },\n annotations: [{ content: 'Modem3', margin: { right: 25 }, offset: { x: 0, y: 0.5 } }],\n ports: portmo\n },\n {\n id: 'WorkStation3', offsetX: 600, offsetY: 250,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Remote Work Staions', margin: { top: 12 }, offset: { x: 0.5, y: 1 } }],\n ports: port2\n },\n {\n id: 'WorkStation4', offsetX: 600, offsetY: 335,\n shape: { type: 'Native', content: template2 },\n annotations: [{ content: 'Portable Work Staions', margin: { top: 12 }, offset: { x: 0.5, y: 1 } }],\n ports: port2\n },\n {\n id: 'RemoteController2', offsetX: 80, offsetY: 400,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Control Logic', margin: { top: 8 }, offset: { x: 0.5, y: 1 } }],\n ports: portrc\n },\n {\n id: 'RemoteController3', offsetX: 500, offsetY: 400,\n shape: { type: 'Native', content: template4 },\n annotations: [{ content: 'Control Logic', margin: { top: 8 }, offset: { x: 0.5, y: 1 } }],\n ports: portrc\n },\n {\n id: 'AnalogIO', offsetX: 160, offsetY: 500,\n shape: { type: 'Native', content: template5 },\n annotations: [{ content: 'Analog IO', margin: { top: 13 }, offset: { x: 0.5, y: 1 } }],\n ports: porthmi\n },\n {\n id: 'sensor', offsetX: 260, offsetY: 500,\n shape: { type: 'Native', content: template6 },\n annotations: [{ content: 'Sensor', margin: { top: 10 }, offset: { x: 0.5, y: 1 } }],\n ports: port\n },\n {\n id: 'DeviceDriver1', offsetX: 360, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverA', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'DeviceDriver2', offsetX: 460, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverB', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'DeviceDriver3', offsetX: 550, offsetY: 500,\n shape: { type: 'Native', content: template7 },\n annotations: [{ content: 'DriverC', offset: { x: 0.5, y: 1.3 } }],\n ports: porthmi\n },\n {\n id: 'HMI', offsetX: 625, offsetY: 450,\n shape: { type: 'Native', content: template8 },\n annotations: [{ content: 'HMI', offset: { x: 0.5, y: 1.3 } }],\n ports: port\n },\n {\n id: 'controlNet', offsetX: 218.5, offsetY: 380,\n shape: { type: 'Text', content: 'Control Net', }\n },\n {\n id: 'etherNet', offsetX: 218.5, offsetY: 190,\n shape: { type: 'Text', content: 'Ethernet', }\n },\n {\n id: 'deviceNet', offsetX: 345.5, offsetY: 555,\n shape: { type: 'Text', content: 'Device Net', }\n },\n {\n id: 'connector1', offsetX: 99, offsetY: 175\n },\n {\n id: 'connector2', offsetX: 250, offsetY: 125\n },\n {\n id: 'connector3', offsetX: 99, offsetY: 300\n },\n {\n id: 'connector4', offsetX: 178, offsetY: 435\n },\n {\n id: 'connector5', offsetX: 378, offsetY: 435\n },\n {\n id: 'connector6', offsetX: 370, offsetY: 380\n }\n ];\n var connectors = [\n {\n id: 'connectora', sourceID: 'Server1', targetID: 'WorkStation1',\n targetPortID: 'port1'\n },\n {\n id: 'connectorawork', sourceID: 'WorkStation1', targetID: 'WorkStation2',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectoraworkm', sourceID: 'WorkStation2', targetID: 'modem1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n targetPortID: 'port3', sourcePortID: 'port2'\n },\n {\n id: 'connectorm1m2', sourceID: 'modem2', targetID: 'modem1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorm2m3', sourceID: 'modem2', targetID: 'RemoteController1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port4'\n },\n {\n id: 'connectorws2m3', sourceID: 'WorkStation2', targetID: 'modem3',\n sourcePortID: 'port3', targetPortID: 'port3'\n },\n {\n id: 'connectorws2m4', sourceID: 'modem4', targetID: 'modem3', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorm3m4', sourceID: 'modem5', targetID: 'modem3',\n sourcePortID: 'port3', targetPortID: 'port4'\n },\n {\n id: 'connectorm4ws3', sourceID: 'modem5', targetID: 'WorkStation4',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectorm4m5', sourceID: 'modem4', targetID: 'WorkStation3',\n sourcePortID: 'port2', targetPortID: 'port1'\n },\n {\n id: 'connectorr2r3', sourceID: 'RemoteController2', targetID: 'RemoteController3',\n targetPortID: 'port1'\n },\n {\n id: 'connectorr2r3qq', sourceID: 'Server1', targetID: 'RemoteController2',\n sourcePortID: 'port4'\n },\n {\n id: 'connectorm3se1', sourceID: 'modem3', targetID: 'Server1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port1', targetPortID: 'port4'\n },\n {\n id: 'connectorws2aio1', sourceID: 'RemoteController2', targetID: 'AnalogIO',\n type: 'Orthogonal', sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectorb', sourceID: 'RemoteController2', targetID: 'sensor', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectord1', sourceID: 'RemoteController2', targetID: 'DeviceDriver1', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectord2', sourceID: 'RemoteController2', targetID: 'DeviceDriver2', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 25 }],\n sourcePortID: 'port2', targetPortID: 'port3'\n },\n {\n id: 'connectordh1d3', sourceID: 'HMI', targetID: 'DeviceDriver3', type: 'Orthogonal',\n sourcePortID: 'port1', targetPortID: 'port3'\n },\n {\n id: 'connectordh1d2', sourceID: 'HMI', type: 'Orthogonal', targetID: 'DeviceDriver2',\n sourcePortID: 'port1', targetPortID: 'port3'\n }\n ];\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n // sets the height and width of the diagram.\n width: '100%', height: '100%',\n // sets the nodes and connectors of the diagram.\n nodes: nodes, connectors: connectors,\n //Sets the default values of a node.\n getNodeDefaults: getNetworkNodeDefaults,\n //Sets the default values of a Connector.\n getConnectorDefaults: getConnectorDefaults,\n // sets snap settings to the diagram.\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n created: created\n });\n diagram.appendTo('#diagram');\n var symbols = [\n { id: 'server', shape: { type: 'Native', content: template1 } },\n { id: 'workStation', shape: { type: 'Native', content: template2 } },\n { id: 'modem', shape: { type: 'Native', content: template3 } },\n { id: 'remoteController', shape: { type: 'Native', content: template4 } },\n { id: 'hmi', shape: { type: 'Native', content: template8 } },\n { id: 'analogIO', shape: { type: 'Native', content: template5 } },\n { id: 'sensor', shape: { type: 'Native', content: template6 } },\n { id: 'deviceDriver', shape: { type: 'Native', content: template7 } },\n { id: 'Virtual-Server-Copy', shape: { type: 'Native', content: template10 } },\n { id: 'user', shape: { type: 'Native', content: template11 } },\n { id: 'User-group', shape: { type: 'Native', content: template12 } },\n { id: 'UPS', shape: { type: 'Native', content: template13 } },\n { id: 'Tablet', shape: { type: 'Native', content: template14 } },\n { id: 'Switch', shape: { type: 'Native', content: template15 } },\n { id: 'Subwoofer', shape: { type: 'Native', content: template16 } },\n { id: 'Speaker', shape: { type: 'Native', content: template17 } },\n { id: 'Security-camera', shape: { type: 'Native', content: template18 } },\n { id: 'arrow1', shape: { type: 'Path', data: arrow } }\n ];\n var sourcePoint = { x: 0, y: 0 };\n var targetPoint = { x: 40, y: 40 };\n var targetDecorator = { shape: 'Arrow' };\n var style = { strokeWidth: 2 };\n var connectorSymbols = [\n {\n id: 'link11', type: 'Straight', sourcePoint: sourcePoint, targetPoint: targetPoint,\n targetDecorator: targetDecorator, style: style\n },\n {\n id: 'link12', type: 'Orthogonal', sourcePoint: sourcePoint, targetPoint: targetPoint,\n targetDecorator: targetDecorator, style: style\n }\n ];\n var palettes = [\n { id: 'network', expanded: true, symbols: symbols, title: 'Network Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, title: 'Connectors' }\n ];\n var palette = new ej.diagrams.SymbolPalette({\n // sets the expandable mode of the symbol palette.\n expandMode: 'Multiple',\n // sets the palettes to be displayed in the symbol palette.\n palettes: palettes,\n // sets the width and height of the palette.\n width: '100%', height: 'calc(100% - 50px)',\n symbolHeight: 48, symbolWidth: 48,\n // sets the default values for the symbols in the symbol palette.\n getNodeDefaults: getSymbolDefaults,\n getSymbolInfo: function (symbol) { return { fit: true }; }\n });\n palette.appendTo('#symbolpalette');\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n\n var button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n button.appendTo('#browse');\n\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n }, dropArea: dropElement,\n success: onUploadSuccess,\n removing: onFileRemove\n });\n uploadObj.appendTo('#fileupload');\n button.element.onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n var id = 0;\n\n function onUploadSuccess(arg) {\n var file1 = arg.file;\n var file = file1.rawFile;\n var reader = new FileReader();\n reader.addEventListener('load', function (event) {\n var shape;\n var shapeContent = getNativeContent(event.target.result);\n shape = { id: 'newshape' + id.toString(), shape: { type: 'Native', content: shapeContent } };\n palette.addPaletteItem('network', shape);\n });\n id++;\n reader.readAsText(file);\n uploadObj.clearAll();\n }\n\n function getNativeContent(content) {\n var attr = { id: 'svgdiv' };\n var div = createHtmlElement('div', attr);\n document.body.appendChild(div);\n div.innerHTML = content;\n var svgContent = div.getElementsByTagName('svg')[0].outerHTML;\n div.parentElement.removeChild(div);\n return svgContent;\n }\n\n function created() {\n addEvents();\n diagram.fitToPage();\n }\n\n"} \ No newline at end of file diff --git a/src/diagram/network-diagram.js b/src/diagram/network-diagram.js index f65e6d0d..a8cab96d 100644 --- a/src/diagram/network-diagram.js +++ b/src/diagram/network-diagram.js @@ -1,3 +1,4 @@ +// custom code start var template1 = ' '; var template2 = @@ -24,7 +25,7 @@ var template16 = ''; var template18 = ' path d="M10.7131909,30.4389491 C10.6918801,30.423109 10.6701242,30.4087605 10.6482026,30.395712 L10.7131909,30.4389491 Z M11,30.6451981 C13.289733,32.2606898 15.7637224,32.9992203 18.4541771,32.8758063 C21.0894422,32.7549239 23.2603428,31.9860703 25,30.5711756 L25,26.6652832 C25,22.79929 21.8659932,19.6652832 18,19.6652832 C14.1340068,19.6652832 11,22.79929 11,26.6652832 C11,27.7731018 11,27.7731018 11,28.8809204 C11,29.8134885 11,29.9610154 11,30.6452056 Z" id="Rectangle-4" stroke="#5C90DF" stroke-width="2"/>'; var arrow = 'M 0 26.4576 L 26.4576 0 L 26.4576 0 L 26.4576 17.46239 L 26.4576 17.46239 L 113.3856 17.46239 L 113.3856 17.46239' + 'L 113.3856 35.45279 L 113.3856 35.45279 L 26.4576 35.45279 L 26.4576 35.45279 L 26.4576 52.91519 L 26.4576 52.91519 L 0 26.4576 Z'; - +// custom code end function getNetworkNodeDefaults(node) { node.style.strokeColor = '#5C90DF'; diff --git a/src/diagram/organization-model-stack.json b/src/diagram/organization-model-stack.json index 35155403..a5dd98bb 100644 --- a/src/diagram/organization-model-stack.json +++ b/src/diagram/organization-model-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n Orientation\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Subtree Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * organization-model\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.LayoutAnimation);\n\n//Click Event for pattern of the PropertyPanel.\n\n\n//sets default value for Node.\nfunction getNodeDefaults(obj) {\n obj.backgroundColor = obj.data.color;\n obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };\n obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: 0.5, y: 1 } };\n obj.expandIcon.verticalAlignment = 'Center';\n obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.offset = { x: 0.5, y: 1 };\n obj.collapseIcon.verticalAlignment = 'Center';\n obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.height = 10;\n obj.collapseIcon.width = 10;\n obj.collapseIcon.shape = 'None';\n obj.collapseIcon.fill = 'lightgray';\n obj.width = 120;\n obj.height = 30;\n return obj;\n}\n//sets default value for Connector.\nfunction getConnectorDefaults(connector) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.constraints = 0;\n connector.cornerRadius = 0;\n return connector;\n}\n\n //Initializes the nodes for the diagram\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '700px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Id', parentId: 'Manager',\n dataManager: new ej.data.DataManager(window.localBindData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = {\n type: 'Text', content: data.Role,\n margin: { left: 10, right: 10, top: 10, bottom: 10 }\n };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'OrganizationalChart',\n getLayoutInfo: function (node, options) {\n if (node.data.Role === 'General Manager') {\n options.assistants.push(options.children[0]);\n options.children.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.type = 'Right';\n }\n }\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return getNodeDefaults(obj, diagram);\n }, getConnectorDefaults: function (connector, diagram) {\n return getConnectorDefaults(connector, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //NumericTextBox used to increase/decrease horizontalSpacing of the layout.\n var hSpace = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.horizontalSpacing = Number(hSpacing.value);\n diagram.dataBind();\n }\n });\n //NumericTextBox used to increase/decrease verticalSpacing of the layout.\n hSpace.appendTo('#hSpacing');\n var vSpace = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.verticalSpacing = Number(vSpacing.value);\n diagram.dataBind();\n }\n });\n vSpace.appendTo('#vSpacing');\n //Enable of disable the expandable option for Node.\n var checkBoxObj = new ej.buttons.CheckBox({\n label: 'Expandable',\n checked: false, change: function () {\n for (var _i = 0, _a = diagram.nodes; _i < _a.length; _i++) {\n var node_1 = _a[_i];\n if (checkBoxObj.checked) {\n node_1.expandIcon.shape = 'Minus';\n node_1.collapseIcon.shape = 'Plus';\n }\n else {\n node_1.expandIcon.shape = 'None';\n node_1.collapseIcon.shape = 'None';\n }\n }\n diagram.dataBind();\n diagram.doLayout();\n }\n });\n checkBoxObj.appendTo('#checked');\n\n //Click Event for orientation of the PropertyPanel.\n document.getElementById('orientation').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-orientation-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-orientation-style');\n }\n if (!target.classList.contains('e-selected-orientation-style')) {\n target.classList.add('e-selected-orientation-style');\n }\n if (target.className === 'image-pattern-style e-selected-orientation-style') {\n var id = target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n }\n };\n\n document.getElementById('pattern').onclick = function (args) {\n var target = args.target;\n var selectedpatternElement = document.getElementsByClassName('e-selected-pattern-style');\n if (selectedpatternElement.length) {\n selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n }\n if (!target.classList.contains('e-selected-pattern-style')) {\n target.classList.add('e-selected-pattern-style');\n }\n if (target.className === 'image-pattern-style e-selected-pattern-style') {\n var subTreeOrientation;\n var subTreeAlignment;\n switch (target.id) {\n case 'pattern1':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Alternate';\n break;\n case 'pattern2':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern3':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern4':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern5':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern6':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Balanced';\n break;\n case 'pattern7':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Center';\n break;\n case 'pattern8':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Left';\n break;\n case 'pattern9':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Right';\n break;\n default:\n if (selectedpatternElement.length) {\n selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n }\n }\n diagram.layout.getLayoutInfo = function (node, options) {\n if (target.id === 'pattern4' || target.id === 'pattern3') {\n options.offset = -50;\n }\n if (node.data.Role === 'General Manager') {\n options.assistants.push(options.children[0]);\n options.children.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.orientation = subTreeOrientation;\n options.type = subTreeAlignment;\n }\n };\n diagram.dataBind();\n diagram.doLayout();\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n Orientation\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Subtree Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Behavior\n
        \n
        \n
        \n
        Horizontal Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        Vertical Spacing
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * organization-model\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.LayoutAnimation);\n\n//Click Event for pattern of the PropertyPanel.\n\n\n//sets default value for Node.\nfunction getNodeDefaults(obj) {\n obj.backgroundColor = obj.data.color;\n obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };\n obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: 0.5, y: 1 } };\n obj.expandIcon.verticalAlignment = 'Center';\n obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.offset = { x: 0.5, y: 1 };\n obj.collapseIcon.verticalAlignment = 'Center';\n obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon.height = 10;\n obj.collapseIcon.width = 10;\n obj.collapseIcon.shape = 'None';\n obj.collapseIcon.fill = 'lightgray';\n obj.width = 120;\n obj.height = 30;\n return obj;\n}\n//sets default value for Connector.\nfunction getConnectorDefaults(connector) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.constraints = 0;\n connector.cornerRadius = 0;\n return connector;\n}\n\n //Initializes the nodes for the diagram\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '700px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Id', parentId: 'Manager',\n dataManager: new ej.data.DataManager(window.localBindData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = {\n type: 'Text', content: data.Role,\n margin: { left: 10, right: 10, top: 10, bottom: 10 }\n };\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'OrganizationalChart',\n getLayoutInfo: function (node, options) {\n if (node.data.Role === 'General Manager') {\n options.assistants.push(options.children[0]);\n options.children.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.type = 'Right';\n }\n }\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return getNodeDefaults(obj, diagram);\n }, getConnectorDefaults: function (connector, diagram) {\n return getConnectorDefaults(connector, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //NumericTextBox used to increase/decrease horizontalSpacing of the layout.\n var hSpace = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.horizontalSpacing = Number(hSpacing.value);\n diagram.dataBind();\n }\n });\n //NumericTextBox used to increase/decrease verticalSpacing of the layout.\n hSpace.appendTo('#hSpacing');\n var vSpace = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function () {\n diagram.layout.verticalSpacing = Number(vSpacing.value);\n diagram.dataBind();\n }\n });\n vSpace.appendTo('#vSpacing');\n //Enable of disable the expandable option for Node.\n var checkBoxObj = new ej.buttons.CheckBox({\n label: 'Expandable',\n checked: false, change: function () {\n for (var _i = 0, _a = diagram.nodes; _i < _a.length; _i++) {\n var node_1 = _a[_i];\n if (checkBoxObj.checked) {\n node_1.expandIcon.shape = 'Minus';\n node_1.collapseIcon.shape = 'Plus';\n }\n else {\n node_1.expandIcon.shape = 'None';\n node_1.collapseIcon.shape = 'None';\n }\n }\n diagram.dataBind();\n diagram.doLayout();\n }\n });\n checkBoxObj.appendTo('#checked');\n\n //Click Event for orientation of the PropertyPanel.\n document.getElementById('orientation').onclick = function (args) {\n var target = args.target;\n\n if (target.className === 'image-pattern-style e-selected-orientation-style') {\n var id = target.id;\n var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1;\n diagram.dataBind();\n diagram.doLayout();\n }\n };\n\n document.getElementById('pattern').onclick = function (args) {\n var target = args.target;\n\n if (target.className === 'image-pattern-style e-selected-pattern-style') {\n var subTreeOrientation;\n var subTreeAlignment;\n switch (target.id) {\n case 'pattern1':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Alternate';\n break;\n case 'pattern2':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern3':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern4':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern5':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern6':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Balanced';\n break;\n case 'pattern7':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Center';\n break;\n case 'pattern8':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Left';\n break;\n case 'pattern9':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Right';\n break;\n default:\n if (selectedpatternElement.length) {\n selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n }\n }\n diagram.layout.getLayoutInfo = function (node, options) {\n if (target.id === 'pattern4' || target.id === 'pattern3') {\n options.offset = -50;\n }\n if (node.data.Role === 'General Manager') {\n options.assistants.push(options.children[0]);\n options.children.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.orientation = subTreeOrientation;\n options.type = subTreeAlignment;\n }\n };\n diagram.dataBind();\n diagram.doLayout();\n }\n };\n"} \ No newline at end of file diff --git a/src/diagram/organization-model.js b/src/diagram/organization-model.js index 645ef676..694feb30 100644 --- a/src/diagram/organization-model.js +++ b/src/diagram/organization-model.js @@ -112,6 +112,7 @@ this.default = function () { //Click Event for orientation of the PropertyPanel. document.getElementById('orientation').onclick = function (args) { var target = args.target; + // custom code start var selectedElement = document.getElementsByClassName('e-selected-orientation-style'); if (selectedElement.length) { selectedElement[0].classList.remove('e-selected-orientation-style'); @@ -119,6 +120,7 @@ this.default = function () { if (!target.classList.contains('e-selected-orientation-style')) { target.classList.add('e-selected-orientation-style'); } + // custom code end if (target.className === 'image-pattern-style e-selected-orientation-style') { var id = target.id; var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length); @@ -130,6 +132,7 @@ this.default = function () { document.getElementById('pattern').onclick = function (args) { var target = args.target; + // custom code start var selectedpatternElement = document.getElementsByClassName('e-selected-pattern-style'); if (selectedpatternElement.length) { selectedpatternElement[0].classList.remove('e-selected-pattern-style'); @@ -137,6 +140,7 @@ this.default = function () { if (!target.classList.contains('e-selected-pattern-style')) { target.classList.add('e-selected-pattern-style'); } + // custom code end if (target.className === 'image-pattern-style e-selected-pattern-style') { var subTreeOrientation; var subTreeAlignment; diff --git a/src/diagram/overview-stack.json b/src/diagram/overview-stack.json index 29161104..0a927cac 100644 --- a/src/diagram/overview-stack.json +++ b/src/diagram/overview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"} \ No newline at end of file diff --git a/src/diagram/pert-chart-stack.json b/src/diagram/pert-chart-stack.json index 29039b99..d1699a56 100644 --- a/src/diagram/pert-chart-stack.json +++ b/src/diagram/pert-chart-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"} \ No newline at end of file diff --git a/src/diagram/port-stack.json b/src/diagram/port-stack.json index 9bd21ac4..fc6a9324 100644 --- a/src/diagram/port-stack.json +++ b/src/diagram/port-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Visibility\n
        \n
        \n \n
        \n
        \n
        \n
        \n Shape\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Fill Color\n
        \n
        \n \n
        \n
        \n
        \n
        \n Stroke Color\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Stroke Width\n
        \n
        \n \n
        \n
        \n
        \n
        \n Size\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\nej.dropdowns.MultiSelect.Inject(ej.dropdowns.CheckBoxSelection);\n//get the port for the selected node.\nvar diagram;\nvar portVisibilityDrop;\nvar portFillDrop;\nvar portBorderDrop;\nvar portShapeDrop;\n\nvar portWidthNum;\nvar portSizeNum;\n\nfunction getPort() {\n var node = diagram.selectedItems.nodes[0];\n var port = [];\n if (node) {\n port = node.ports;\n }\n return port;\n}\n//enable or disable the property panel based on the Selection.\nfunction selectionChange(args) {\n if (args.state === 'Changed') {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (args.newValue) {\n if (!appearance.classList.contains('e-remove-selection')) {\n appearance.classList.add('e-remove-selection');\n }\n if (args.newValue[0] instanceof ej.diagrams.Node && selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n var port = getPort()[0];\n portVisibilityDrop.value = [];\n if (ej.diagrams.PortVisibility.Visible & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Visible);\n }\n if (ej.diagrams.PortVisibility.Hidden & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Hidden);\n }\n if (ej.diagrams.PortVisibility.Hover & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Hover);\n }\n if (ej.diagrams.PortVisibility.Connect & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Connect);\n }\n if (portVisibilityDrop.value.length === 0) {\n portVisibilityDrop.placeholder = 'Select Visibility';\n }\n portVisibilityDrop.dataBind();\n portFillDrop.value = port.style.fill;\n portFillDrop.dataBind();\n portBorderDrop.value = port.style.strokeColor;\n portBorderDrop.dataBind();\n portShapeDrop.value = port.shape;\n portShapeDrop.dataBind();\n portSizeNum.value = port.height;\n portSizeNum.dataBind();\n portWidthNum.value = port.style.strokeWidth;\n portWidthNum.dataBind();\n }\n }\n }\n}\n//change the Visibility of the Port.\nfunction portVisibilityChange(args) {\n var port = getPort();\n if (port) {\n for (var j = 0; j < port.length; j++) {\n port[j].visibility = 0;\n for (var i = 0; i < args.value.length; i++) {\n port[j].visibility += args.value[i];\n }\n }\n }\n diagram.dataBind();\n}\n//set the appearence of the Port.\nfunction applyPortStyle(value) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n if (value === 'size') {\n\n port[j].height = portSizeNum.value;\n port[j].width = portSizeNum.value;\n\n } else if (value === 'strokewidth') {\n port[j].style.strokeWidth = portWidthNum.value;\n }\n }\n diagram.dataBind();\n}\n//change the shape of the Port.\nfunction portShapeChange(args) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n switch (portShapeDrop.value) {\n case 'X':\n port[j].shape = 'X';\n break;\n case 'Circle':\n port[j].shape = 'Circle';\n break;\n case 'Square':\n port[j].shape = 'Square';\n break;\n case 'Custom':\n port[j].shape = 'Custom';\n port[j].pathData = 'M6.805,0L13.61,10.703L0,10.703z';\n break;\n }\n diagram.dataBind();\n }\n\n}\n\n\n var bounds = document.getElementsByClassName('control-section')[0].getBoundingClientRect();\n var centerX = bounds.width / 2;\n var node1Port = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n },\n {\n id: 'port3', shape: 'Circle', offset: { x: 0.25, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n },\n {\n id: 'port5', shape: 'Circle', offset: { x: 0.75, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 3'\n }\n ];\n var node2Port = [\n {\n id: 'port6', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port7', shape: 'Circle', offset: { x: 1, y: 0.35 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n },\n {\n id: 'port8', shape: 'Circle', offset: { x: 1, y: 0.70 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port9', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node3Port = [\n {\n id: 'port10', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n },\n {\n id: 'port11', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port12', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node4Port = [\n {\n id: 'port13', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port14', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port15', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n }\n ];\n var node5Port = [\n {\n id: 'port16', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'out - 1'\n },\n {\n id: 'port17', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port18', shape: 'Circle', offset: { x: 1, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node6Port = [\n {\n id: 'port19', shape: 'Circle', offset: { x: 0, y: 0.35 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port20', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n }\n ];\n var node7Port = [\n {\n id: 'port21', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port22', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n }\n ];\n var shape1 = { type: 'Basic', shape: 'Rectangle' };\n var shape2 = { type: 'Basic', shape: 'Diamond' };\n var nodes = [\n {\n id: 'node1', offsetX: centerX - 200, offsetY: 100,\n annotations: [{ content: 'Publisher' }], ports: node1Port\n },\n {\n id: 'node2', offsetX: centerX, offsetY: 100,\n annotations: [{ content: 'Completed Book', margin: { left: 5, right: 5 } }], ports: node2Port\n },\n {\n id: 'node3', offsetX: centerX, offsetY: 200,\n annotations: [{ content: '1st Review' }], ports: node3Port\n },\n {\n id: 'node4', offsetX: centerX, offsetY: 300,\n annotations: [{ content: 'Legal Terms' }], ports: node4Port\n },\n {\n id: 'node5', offsetX: centerX, offsetY: 400,\n annotations: [{ content: '2nd Review' }], ports: node5Port\n },\n {\n id: 'node6', offsetX: centerX + 200, offsetY: 100,\n annotations: [{ content: 'Board' }], ports: node6Port\n },\n {\n id: 'node7', offsetX: centerX + 200, offsetY: 200,\n annotations: [{ content: 'Approval' }], ports: node7Port\n }\n ];\n var connectors = [\n {\n id: 'connector1', sourceID: 'node1', sourcePortID: 'port2',\n targetID: 'node2', targetPortID: 'port6'\n },\n {\n id: 'connector2', sourceID: 'node1', sourcePortID: 'port4',\n targetID: 'node4', targetPortID: 'port13'\n },\n {\n id: 'connector3', sourceID: 'node2', sourcePortID: 'port9',\n targetID: 'node3', targetPortID: 'port11'\n },\n {\n id: 'connector4', sourceID: 'node2', sourcePortID: 'port7',\n targetID: 'node6', targetPortID: 'port19'\n },\n {\n id: 'connector5', sourceID: 'node3', sourcePortID: 'port10',\n targetID: 'node1', targetPortID: 'port5'\n },\n {\n id: 'connector6', sourceID: 'node3', sourcePortID: 'port12',\n targetID: 'node4', targetPortID: 'port14'\n },\n {\n id: 'connector7', sourceID: 'node4', sourcePortID: 'port15',\n targetID: 'node5', targetPortID: 'port17'\n },\n {\n id: 'connector8', sourceID: 'node5', sourcePortID: 'port18',\n targetID: 'node2', targetPortID: 'port8'\n },\n {\n id: 'connector9', sourceID: 'node5', sourcePortID: 'port16',\n targetID: 'node1', targetPortID: 'port3'\n },\n {\n id: 'connector10', sourceID: 'node6', sourcePortID: 'port20',\n targetID: 'node7', targetPortID: 'port21'\n },\n {\n id: 'connector11', sourceID: 'node7', sourcePortID: 'port22',\n targetID: 'node1', targetPortID: 'port1'\n }\n ];\n //Initialize diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580,\n nodes: nodes, connectors: connectors, selectionChange: selectionChange,\n snapSettings: { constraints: 0 },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n //Initialize shape\n if (obj.id === 'node1' || obj.id === 'node2' || obj.id === 'node4' || obj.id === 'node6') {\n obj.shape = shape1;\n } else if (obj.id === 'node3' || obj.id === 'node5' || obj.id === 'node7') {\n obj.shape = shape2;\n }\n //sets height and width for nodes\n obj.height = 65;\n obj.width = 100;\n obj.style = { fill: '#ebf8fb', strokeColor: '#baeaf5' };\n for (var i = 0; i < obj.ports.length; i++) {\n //sets styles for the ports\n obj.ports[i].style = {\n fill: '#366f8c',\n strokeColor: '#366f8c'\n };\n obj.ports[i].width = 6;\n obj.ports[i].height = 6;\n }\n obj.annotations[0].style = {\n fontSize: 13,\n color: 'black'\n };\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n //defines type of the connectors\n connector.type = 'Orthogonal';\n connector.style = { strokeColor: '#8cdcef', strokeWidth: 1 };\n connector.targetDecorator = { width: 5, height: 5, style: { fill: '#8cdcef', strokeColor: '#8cdcef' } };\n },\n });\n diagram.appendTo('#diagram');\n //Visibility collection of the Port.\n var visibility = [\n { PortVisibility: ej.diagrams.PortVisibility.Visible, text: 'Visible' },\n { PortVisibility: ej.diagrams.PortVisibility.Hidden, text: 'Hidden' },\n { PortVisibility: ej.diagrams.PortVisibility.Hover, text: 'Hover' },\n { PortVisibility: ej.diagrams.PortVisibility.Connect, text: 'Connect' }\n ];\n //Enable or disable the visibility of the Port\n portVisibilityDrop = new ej.dropdowns.MultiSelect({\n enabled: true, dataSource: visibility,\n fields: { value: 'PortVisibility', text: 'text' },\n mode: 'CheckBox',\n showSelectAll: true,\n showdropdownsIcon: true,\n popupHeight: '280px',\n popupWidth: '180px',\n change: portVisibilityChange\n });\n portVisibilityDrop.appendTo('#portsVisiblity');\n //Colorpicker used to apply for fill color of the Port.\n portFillDrop = new ej.inputs.ColorPicker({\n value: '#000', disabled: false, change: function (arg) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n port[j].style.fill = arg.currentValue.rgba;\n }\n }\n });\n portFillDrop.appendTo('#fill');\n //Colorpicker used to apply for stroke color of the Port.\n portBorderDrop = new ej.inputs.ColorPicker({\n value: '#000', disabled: false, change: function (arg) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n port[j].style.strokeColor = arg.currentValue.rgba;\n }\n }\n });\n portBorderDrop.appendTo('#border');\n //Shape collection of the Port.\n var shape = [\n { shape: 'X', text: 'X' },\n { shape: 'Circle', text: 'Circle' },\n { shape: 'Square', text: 'Square' },\n { shape: 'Custom', text: 'Custom' }\n ];\n //DropDownList is used to apply the shape of the Port.\n portShapeDrop = new ej.dropdowns.DropDownList({\n enabled: true, placeholder: 'Select a Port', value: 'Circle',\n dataSource: shape, fields: { value: 'shape', text: 'text' },\n change: portShapeChange\n });\n //NumericTextBox is used to apply the size of the Port.\n portShapeDrop.appendTo('#shape');\n portSizeNum = new ej.inputs.NumericTextBox({\n enabled: true,\n format: '###.##',\n value: 6,\n min: 1,\n step: 1,\n change: function (args) {\n applyPortStyle('size');\n }\n });\n portSizeNum.appendTo('#size');\n //NumericTextBox is used to apply the StrokeWidth of the Port.\n portWidthNum = new ej.inputs.NumericTextBox({\n enabled: true,\n format: '###.##',\n value: 1,\n min: 0.5,\n step: 0.5,\n change: function (args) {\n applyPortStyle('strokewidth');\n }\n });\n portWidthNum.appendTo('#width');\n diagram.select([diagram.nodes[0]]);\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Visibility\n
        \n
        \n \n
        \n
        \n
        \n
        \n Shape\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Fill Color\n
        \n
        \n \n
        \n
        \n
        \n
        \n Stroke Color\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n Stroke Width\n
        \n
        \n \n
        \n
        \n
        \n
        \n Size\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\nej.dropdowns.MultiSelect.Inject(ej.dropdowns.CheckBoxSelection);\n//get the port for the selected node.\nvar diagram;\nvar portVisibilityDrop;\nvar portFillDrop;\nvar portBorderDrop;\nvar portShapeDrop;\n\nvar portWidthNum;\nvar portSizeNum;\n\nfunction getPort() {\n var node = diagram.selectedItems.nodes[0];\n var port = [];\n if (node) {\n port = node.ports;\n }\n return port;\n}\n//enable or disable the property panel based on the Selection.\nfunction selectionChange(args) {\n if (args.state === 'Changed') {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (args.newValue) {\n\n if (args.newValue[0] instanceof ej.diagrams.Node && selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n var port = getPort()[0];\n portVisibilityDrop.value = [];\n if (ej.diagrams.PortVisibility.Visible & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Visible);\n }\n if (ej.diagrams.PortVisibility.Hidden & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Hidden);\n }\n if (ej.diagrams.PortVisibility.Hover & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Hover);\n }\n if (ej.diagrams.PortVisibility.Connect & port.visibility) {\n portVisibilityDrop.value.push(ej.diagrams.PortVisibility.Connect);\n }\n if (portVisibilityDrop.value.length === 0) {\n portVisibilityDrop.placeholder = 'Select Visibility';\n }\n portVisibilityDrop.dataBind();\n portFillDrop.value = port.style.fill;\n portFillDrop.dataBind();\n portBorderDrop.value = port.style.strokeColor;\n portBorderDrop.dataBind();\n portShapeDrop.value = port.shape;\n portShapeDrop.dataBind();\n portSizeNum.value = port.height;\n portSizeNum.dataBind();\n portWidthNum.value = port.style.strokeWidth;\n portWidthNum.dataBind();\n }\n }\n }\n}\n//change the Visibility of the Port.\nfunction portVisibilityChange(args) {\n var port = getPort();\n if (port) {\n for (var j = 0; j < port.length; j++) {\n port[j].visibility = 0;\n for (var i = 0; i < args.value.length; i++) {\n port[j].visibility += args.value[i];\n }\n }\n }\n diagram.dataBind();\n}\n//set the appearence of the Port.\nfunction applyPortStyle(value) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n if (value === 'size') {\n\n port[j].height = portSizeNum.value;\n port[j].width = portSizeNum.value;\n\n } else if (value === 'strokewidth') {\n port[j].style.strokeWidth = portWidthNum.value;\n }\n }\n diagram.dataBind();\n}\n//change the shape of the Port.\nfunction portShapeChange(args) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n switch (portShapeDrop.value) {\n case 'X':\n port[j].shape = 'X';\n break;\n case 'Circle':\n port[j].shape = 'Circle';\n break;\n case 'Square':\n port[j].shape = 'Square';\n break;\n case 'Custom':\n port[j].shape = 'Custom';\n port[j].pathData = 'M6.805,0L13.61,10.703L0,10.703z';\n break;\n }\n diagram.dataBind();\n }\n\n}\n\n\n var bounds = document.getElementsByClassName('control-section')[0].getBoundingClientRect();\n var centerX = bounds.width / 2;\n var node1Port = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n },\n {\n id: 'port3', shape: 'Circle', offset: { x: 0.25, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n },\n {\n id: 'port5', shape: 'Circle', offset: { x: 0.75, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 3'\n }\n ];\n var node2Port = [\n {\n id: 'port6', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port7', shape: 'Circle', offset: { x: 1, y: 0.35 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n },\n {\n id: 'port8', shape: 'Circle', offset: { x: 1, y: 0.70 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port9', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node3Port = [\n {\n id: 'port10', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n },\n {\n id: 'port11', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port12', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node4Port = [\n {\n id: 'port13', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port14', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 2'\n },\n {\n id: 'port15', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 1'\n }\n ];\n var node5Port = [\n {\n id: 'port16', shape: 'Circle', offset: { x: 0, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'out - 1'\n },\n {\n id: 'port17', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port18', shape: 'Circle', offset: { x: 1, y: 0.5 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'OUT - 2'\n }\n ];\n var node6Port = [\n {\n id: 'port19', shape: 'Circle', offset: { x: 0, y: 0.35 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port20', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n }\n ];\n var node7Port = [\n {\n id: 'port21', shape: 'Circle', offset: { x: 0.5, y: 0 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'In - 1'\n },\n {\n id: 'port22', shape: 'Circle', offset: { x: 0.5, y: 1 }, height: 8, width: 8, visibility: ej.diagrams.PortVisibility.Visible,\n text: 'Out - 1'\n }\n ];\n var shape1 = { type: 'Basic', shape: 'Rectangle' };\n var shape2 = { type: 'Basic', shape: 'Diamond' };\n var nodes = [\n {\n id: 'node1', offsetX: centerX - 200, offsetY: 100,\n annotations: [{ content: 'Publisher' }], ports: node1Port\n },\n {\n id: 'node2', offsetX: centerX, offsetY: 100,\n annotations: [{ content: 'Completed Book', margin: { left: 5, right: 5 } }], ports: node2Port\n },\n {\n id: 'node3', offsetX: centerX, offsetY: 200,\n annotations: [{ content: '1st Review' }], ports: node3Port\n },\n {\n id: 'node4', offsetX: centerX, offsetY: 300,\n annotations: [{ content: 'Legal Terms' }], ports: node4Port\n },\n {\n id: 'node5', offsetX: centerX, offsetY: 400,\n annotations: [{ content: '2nd Review' }], ports: node5Port\n },\n {\n id: 'node6', offsetX: centerX + 200, offsetY: 100,\n annotations: [{ content: 'Board' }], ports: node6Port\n },\n {\n id: 'node7', offsetX: centerX + 200, offsetY: 200,\n annotations: [{ content: 'Approval' }], ports: node7Port\n }\n ];\n var connectors = [\n {\n id: 'connector1', sourceID: 'node1', sourcePortID: 'port2',\n targetID: 'node2', targetPortID: 'port6'\n },\n {\n id: 'connector2', sourceID: 'node1', sourcePortID: 'port4',\n targetID: 'node4', targetPortID: 'port13'\n },\n {\n id: 'connector3', sourceID: 'node2', sourcePortID: 'port9',\n targetID: 'node3', targetPortID: 'port11'\n },\n {\n id: 'connector4', sourceID: 'node2', sourcePortID: 'port7',\n targetID: 'node6', targetPortID: 'port19'\n },\n {\n id: 'connector5', sourceID: 'node3', sourcePortID: 'port10',\n targetID: 'node1', targetPortID: 'port5'\n },\n {\n id: 'connector6', sourceID: 'node3', sourcePortID: 'port12',\n targetID: 'node4', targetPortID: 'port14'\n },\n {\n id: 'connector7', sourceID: 'node4', sourcePortID: 'port15',\n targetID: 'node5', targetPortID: 'port17'\n },\n {\n id: 'connector8', sourceID: 'node5', sourcePortID: 'port18',\n targetID: 'node2', targetPortID: 'port8'\n },\n {\n id: 'connector9', sourceID: 'node5', sourcePortID: 'port16',\n targetID: 'node1', targetPortID: 'port3'\n },\n {\n id: 'connector10', sourceID: 'node6', sourcePortID: 'port20',\n targetID: 'node7', targetPortID: 'port21'\n },\n {\n id: 'connector11', sourceID: 'node7', sourcePortID: 'port22',\n targetID: 'node1', targetPortID: 'port1'\n }\n ];\n //Initialize diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580,\n nodes: nodes, connectors: connectors, selectionChange: selectionChange,\n snapSettings: { constraints: 0 },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n //Initialize shape\n if (obj.id === 'node1' || obj.id === 'node2' || obj.id === 'node4' || obj.id === 'node6') {\n obj.shape = shape1;\n } else if (obj.id === 'node3' || obj.id === 'node5' || obj.id === 'node7') {\n obj.shape = shape2;\n }\n //sets height and width for nodes\n obj.height = 65;\n obj.width = 100;\n obj.style = { fill: '#ebf8fb', strokeColor: '#baeaf5' };\n for (var i = 0; i < obj.ports.length; i++) {\n //sets styles for the ports\n obj.ports[i].style = {\n fill: '#366f8c',\n strokeColor: '#366f8c'\n };\n obj.ports[i].width = 6;\n obj.ports[i].height = 6;\n }\n obj.annotations[0].style = {\n fontSize: 13,\n color: 'black'\n };\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n //defines type of the connectors\n connector.type = 'Orthogonal';\n connector.style = { strokeColor: '#8cdcef', strokeWidth: 1 };\n connector.targetDecorator = { width: 5, height: 5, style: { fill: '#8cdcef', strokeColor: '#8cdcef' } };\n },\n });\n diagram.appendTo('#diagram');\n //Visibility collection of the Port.\n var visibility = [\n { PortVisibility: ej.diagrams.PortVisibility.Visible, text: 'Visible' },\n { PortVisibility: ej.diagrams.PortVisibility.Hidden, text: 'Hidden' },\n { PortVisibility: ej.diagrams.PortVisibility.Hover, text: 'Hover' },\n { PortVisibility: ej.diagrams.PortVisibility.Connect, text: 'Connect' }\n ];\n //Enable or disable the visibility of the Port\n portVisibilityDrop = new ej.dropdowns.MultiSelect({\n enabled: true, dataSource: visibility,\n fields: { value: 'PortVisibility', text: 'text' },\n mode: 'CheckBox',\n showSelectAll: true,\n showdropdownsIcon: true,\n popupHeight: '280px',\n popupWidth: '180px',\n change: portVisibilityChange\n });\n portVisibilityDrop.appendTo('#portsVisiblity');\n //Colorpicker used to apply for fill color of the Port.\n portFillDrop = new ej.inputs.ColorPicker({\n value: '#000', disabled: false, change: function (arg) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n port[j].style.fill = arg.currentValue.rgba;\n }\n }\n });\n portFillDrop.appendTo('#fill');\n //Colorpicker used to apply for stroke color of the Port.\n portBorderDrop = new ej.inputs.ColorPicker({\n value: '#000', disabled: false, change: function (arg) {\n var port = getPort();\n for (var j = 0; j < port.length; j++) {\n port[j].style.strokeColor = arg.currentValue.rgba;\n }\n }\n });\n portBorderDrop.appendTo('#border');\n //Shape collection of the Port.\n var shape = [\n { shape: 'X', text: 'X' },\n { shape: 'Circle', text: 'Circle' },\n { shape: 'Square', text: 'Square' },\n { shape: 'Custom', text: 'Custom' }\n ];\n //DropDownList is used to apply the shape of the Port.\n portShapeDrop = new ej.dropdowns.DropDownList({\n enabled: true, placeholder: 'Select a Port', value: 'Circle',\n dataSource: shape, fields: { value: 'shape', text: 'text' },\n change: portShapeChange\n });\n //NumericTextBox is used to apply the size of the Port.\n portShapeDrop.appendTo('#shape');\n portSizeNum = new ej.inputs.NumericTextBox({\n enabled: true,\n format: '###.##',\n value: 6,\n min: 1,\n step: 1,\n change: function (args) {\n applyPortStyle('size');\n }\n });\n portSizeNum.appendTo('#size');\n //NumericTextBox is used to apply the StrokeWidth of the Port.\n portWidthNum = new ej.inputs.NumericTextBox({\n enabled: true,\n format: '###.##',\n value: 1,\n min: 0.5,\n step: 0.5,\n change: function (args) {\n applyPortStyle('strokewidth');\n }\n });\n portWidthNum.appendTo('#width');\n diagram.select([diagram.nodes[0]]);\n"} \ No newline at end of file diff --git a/src/diagram/port.js b/src/diagram/port.js index 6118cdcc..66a1b398 100644 --- a/src/diagram/port.js +++ b/src/diagram/port.js @@ -24,9 +24,11 @@ function selectionChange(args) { var appearance = document.getElementById('propertypanel'); var selectedElement = document.getElementsByClassName('e-remove-selection'); if (args.newValue) { + // custom code start if (!appearance.classList.contains('e-remove-selection')) { appearance.classList.add('e-remove-selection'); } + // custom code end if (args.newValue[0] instanceof ej.diagrams.Node && selectedElement.length) { selectedElement[0].classList.remove('e-remove-selection'); var port = getPort()[0]; diff --git a/src/diagram/print-export-stack.json b/src/diagram/print-export-stack.json index 6a6d4256..144133b6 100644 --- a/src/diagram/print-export-stack.json +++ b/src/diagram/print-export-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Print and Export\n */\nej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport);\n //click event to perform printing the diagraming objects.\n function onItemClick(args) {\n if (args.item.text === 'Print') {\n var printOptions = {};\n printOptions.mode = 'Data';\n printOptions.region = 'PageSettings';\n printOptions.multiplePage = checkBoxObj.checked;\n printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };\n diagram.print(printOptions);\n }\n}\n//Export the diagraming object based on the format.\nfunction onselect(args) {\n var exportOptions = {};\n exportOptions.format = args.item.text;\n exportOptions.mode = 'Download';\n exportOptions.region = 'PageSettings';\n exportOptions.multiplePage = checkBoxObj.checked;\n exportOptions.fileName = 'Export';\n exportOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };\n diagram.exportDiagram(exportOptions);\n}\n\n\n var diagram;\n var nodes = [\n {\n id: 'sourceNode1', width: 100, height: 50, offsetX: 120, offsetY: 100,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Source Document', margin: { left: 15, right: 15, bottom: 15, top: 15 } }]\n },\n {\n id: 'censusNode2', width: 100, height: 75, offsetX: 120, offsetY: 200,\n shape: { type: 'Basic', shape: 'Diamond' },\n style: { strokeColor: '#8f908f', fill: '#e2f3fa' },\n annotations: [{ content: 'Census Record', margin: { left: 15, right: 15, bottom: 15, top: 15 } }]\n },\n {\n id: 'booksNode3', width: 100, height: 75, offsetX: 120, offsetY: 325,\n shape: { type: 'Basic', shape: 'Diamond' },\n style: { strokeColor: '#8f908f', fill: '#e2f3fa' },\n annotations: [{ content: 'Books and Magazine' }]\n },\n {\n id: 'recordNode4', width: 125, height: 50, offsetX: 320, offsetY: 200,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Record Template' }]\n },\n {\n id: 'traditionalNode5', width: 125, height: 50, offsetX: 320, offsetY: 325,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Traditional Template' }]\n },\n {\n id: 'nontraditionalNode6', width: 135, height: 50, offsetX: 120, offsetY: 425,\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Nontraditional' }]\n },\n {\n id: 'Radial1', width: 125, height: 50, offsetX: 850, offsetY: 225,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#fef0db' },\n annotations: [{ content: 'Health Fitness', }]\n },\n {\n id: 'Radial2', width: 125, height: 75, offsetX: 850, offsetY: 100,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Diet' }]\n },\n {\n id: 'Radial3', width: 125, height: 75, offsetX: 1025, offsetY: 175,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Flexibility' }]\n },\n {\n id: 'Radial4', width: 125, height: 75, offsetX: 1000, offsetY: 350,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Muscular Endurance' }]\n },\n {\n id: 'Radial5', width: 125, height: 75, offsetX: 675, offsetY: 175,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Cardiovascular Strength' }]\n },\n {\n id: 'Radial6', width: 125, height: 75, offsetX: 770, offsetY: 350,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Muscular Strength' }]\n },\n ];\n var connectors = [\n { id: 'flowChartConnector1', sourceID: 'sourceNode1', targetID: 'censusNode2' },\n {\n id: 'flowChartConnector2', sourceID: 'censusNode2', targetID: 'booksNode3',\n annotations: [{ content: 'No', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector3', sourceID: 'booksNode3', targetID: 'nontraditionalNode6',\n annotations: [{ content: 'No', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector4', sourceID: 'censusNode2', targetID: 'recordNode4',\n annotations: [{ content: 'Yes', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector5', sourceID: 'booksNode3', targetID: 'traditionalNode5',\n annotations: [{ content: 'Yes', style: { fill: 'White' } }]\n },\n { id: 'RadialConnector1', sourceID: 'Radial1', targetID: 'Radial2', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector2', sourceID: 'Radial1', targetID: 'Radial3', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector3', sourceID: 'Radial1', targetID: 'Radial4', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector4', sourceID: 'Radial1', targetID: 'Radial5', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector5', sourceID: 'Radial1', targetID: 'Radial6', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n ];\n //initialize the diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '580px', nodes: nodes,\n connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n pageSettings: { width: 550, height: 500, multiplePage: true },\n getConnectorDefaults: function (connector, diagram) {\n connector.style.strokeColor = '#6d6d6d';\n return connector;\n }\n });\n var items = [{ text: 'JPG' }, { text: 'PNG' }, { text: 'BMP' }, { text: 'SVG' }];\n //DropDownButton used to perform exporting.\n var btnObj = new ej.splitbuttons.DropDownButton({\n items: items, iconCss: 'e-ddb-icons e-export', content: 'Export', select: onselect,\n });\n //enable or disable the multiple page printing and exporting.\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: false, label: 'Multiple Page',\n });\n // create and add printing and exporting option in ToolBar.\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: onItemClick,\n items: [\n {\n type: 'Input', text: 'Export', template: ''\n },\n {\n type: 'Button', text: 'Print', prefixIcon: 'e-ddb-icons e-print',\n },\n {\n type: 'Input', template: checkBoxObj\n },\n ]\n });\n toolbarObj.appendTo('#toolbar_default');\n btnObj.appendTo('#custombtn');\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Width' });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Print and Export\n */\nej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport);\nvar checkBoxObj;\nvar toolbarObj;\nvar btnObj;\nvar diagram;\n//click event to perform printing the diagraming objects.\nfunction onItemClick(args) {\n if (args.item.text === 'Print') {\n var printOptions = {};\n printOptions.mode = 'Data';\n printOptions.region = 'PageSettings';\n printOptions.multiplePage = checkBoxObj.checked;\n printOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };\n diagram.print(printOptions);\n }\n}\n//Export the diagraming object based on the format.\nfunction onselect(args) {\n var exportOptions = {};\n exportOptions.format = args.item.text;\n exportOptions.mode = 'Download';\n exportOptions.region = 'PageSettings';\n exportOptions.multiplePage = checkBoxObj.checked;\n exportOptions.fileName = 'Export';\n exportOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 };\n diagram.exportDiagram(exportOptions);\n}\n\n \n var nodes = [\n {\n id: 'sourceNode1', width: 100, height: 50, offsetX: 120, offsetY: 100,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Source Document', margin: { left: 15, right: 15, bottom: 15, top: 15 } }]\n },\n {\n id: 'censusNode2', width: 100, height: 75, offsetX: 120, offsetY: 200,\n shape: { type: 'Basic', shape: 'Diamond' },\n style: { strokeColor: '#8f908f', fill: '#e2f3fa' },\n annotations: [{ content: 'Census Record', margin: { left: 15, right: 15, bottom: 15, top: 15 } }]\n },\n {\n id: 'booksNode3', width: 100, height: 75, offsetX: 120, offsetY: 325,\n shape: { type: 'Basic', shape: 'Diamond' },\n style: { strokeColor: '#8f908f', fill: '#e2f3fa' },\n annotations: [{ content: 'Books and Magazine' }]\n },\n {\n id: 'recordNode4', width: 125, height: 50, offsetX: 320, offsetY: 200,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Record Template' }]\n },\n {\n id: 'traditionalNode5', width: 125, height: 50, offsetX: 320, offsetY: 325,\n style: { strokeColor: '#868686', fill: '#d5f5d5' },\n annotations: [{ content: 'Traditional Template' }]\n },\n {\n id: 'nontraditionalNode6', width: 135, height: 50, offsetX: 120, offsetY: 425,\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Nontraditional' }]\n },\n {\n id: 'Radial1', width: 125, height: 50, offsetX: 850, offsetY: 225,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#fef0db' },\n annotations: [{ content: 'Health Fitness', }]\n },\n {\n id: 'Radial2', width: 125, height: 75, offsetX: 850, offsetY: 100,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Diet' }]\n },\n {\n id: 'Radial3', width: 125, height: 75, offsetX: 1025, offsetY: 175,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Flexibility' }]\n },\n {\n id: 'Radial4', width: 125, height: 75, offsetX: 1000, offsetY: 350,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Muscular Endurance' }]\n },\n {\n id: 'Radial5', width: 125, height: 75, offsetX: 675, offsetY: 175,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Cardiovascular Strength' }]\n },\n {\n id: 'Radial6', width: 125, height: 75, offsetX: 770, offsetY: 350,\n shape: { type: 'Basic', shape: 'Ellipse' },\n style: { strokeColor: '#a8a8a8', fill: '#faebee' },\n annotations: [{ content: 'Muscular Strength' }]\n },\n ];\n var connectors = [\n { id: 'flowChartConnector1', sourceID: 'sourceNode1', targetID: 'censusNode2' },\n {\n id: 'flowChartConnector2', sourceID: 'censusNode2', targetID: 'booksNode3',\n annotations: [{ content: 'No', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector3', sourceID: 'booksNode3', targetID: 'nontraditionalNode6',\n annotations: [{ content: 'No', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector4', sourceID: 'censusNode2', targetID: 'recordNode4',\n annotations: [{ content: 'Yes', style: { fill: 'White' } }]\n },\n {\n id: 'flowChartConnector5', sourceID: 'booksNode3', targetID: 'traditionalNode5',\n annotations: [{ content: 'Yes', style: { fill: 'White' } }]\n },\n { id: 'RadialConnector1', sourceID: 'Radial1', targetID: 'Radial2', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector2', sourceID: 'Radial1', targetID: 'Radial3', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector3', sourceID: 'Radial1', targetID: 'Radial4', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector4', sourceID: 'Radial1', targetID: 'Radial5', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n { id: 'RadialConnector5', sourceID: 'Radial1', targetID: 'Radial6', annotations: [{ content: 'Yes', style: { fill: 'White' } }] },\n ];\n //initialize the diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '580px', nodes: nodes,\n connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n pageSettings: { width: 550, height: 500, multiplePage: true },\n getConnectorDefaults: function (connector, diagram) {\n connector.style.strokeColor = '#6d6d6d';\n return connector;\n }\n });\n var items = [{ text: 'JPG' }, { text: 'PNG' }, { text: 'BMP' }, { text: 'SVG' }];\n //DropDownButton used to perform exporting.\n btnObj = new ej.splitbuttons.DropDownButton({\n items: items, iconCss: 'e-ddb-icons e-export', content: 'Export', select: onselect,\n });\n //enable or disable the multiple page printing and exporting.\n checkBoxObj = new ej.buttons.CheckBox({\n checked: false, label: 'Multiple Page',\n });\n // create and add printing and exporting option in ToolBar.\n toolbarObj = new ej.navigations.Toolbar({\n clicked: onItemClick,\n items: [\n {\n type: 'Input', text: 'Export', template: ''\n },\n {\n type: 'Button', text: 'Print', prefixIcon: 'e-ddb-icons e-print',\n },\n {\n type: 'Input', template: checkBoxObj\n },\n ]\n });\n toolbarObj.appendTo('#toolbar_default');\n btnObj.appendTo('#custombtn');\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Width' });\n"} \ No newline at end of file diff --git a/src/diagram/print-export.js b/src/diagram/print-export.js index a7fc09da..979d3dc1 100644 --- a/src/diagram/print-export.js +++ b/src/diagram/print-export.js @@ -2,8 +2,12 @@ * Print and Export */ ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport); - //click event to perform printing the diagraming objects. - function onItemClick(args) { +var checkBoxObj; +var toolbarObj; +var btnObj; +var diagram; +//click event to perform printing the diagraming objects. +function onItemClick(args) { if (args.item.text === 'Print') { var printOptions = {}; printOptions.mode = 'Data'; @@ -25,8 +29,7 @@ function onselect(args) { diagram.exportDiagram(exportOptions); } -this.default = function () { - var diagram; +this.default = function () { var nodes = [ { id: 'sourceNode1', width: 100, height: 50, offsetX: 120, offsetY: 100, @@ -134,15 +137,15 @@ this.default = function () { }); var items = [{ text: 'JPG' }, { text: 'PNG' }, { text: 'BMP' }, { text: 'SVG' }]; //DropDownButton used to perform exporting. - var btnObj = new ej.splitbuttons.DropDownButton({ + btnObj = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-ddb-icons e-export', content: 'Export', select: onselect, }); //enable or disable the multiple page printing and exporting. - var checkBoxObj = new ej.buttons.CheckBox({ + checkBoxObj = new ej.buttons.CheckBox({ checked: false, label: 'Multiple Page', }); // create and add printing and exporting option in ToolBar. - var toolbarObj = new ej.navigations.Toolbar({ + toolbarObj = new ej.navigations.Toolbar({ clicked: onItemClick, items: [ { diff --git a/src/diagram/quick-commands-stack.json b/src/diagram/quick-commands-stack.json index 8b198309..33187f74 100644 --- a/src/diagram/quick-commands-stack.json +++ b/src/diagram/quick-commands-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * UserHandle\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.MindMap, ej.diagrams.HierarchicalTree);\nvar diagram;\n//Defines the nodes collection in diagram\nvar nodes = [\n {\n id: 'NewIdea', width: 150, height: 60, offsetX: 300, offsetY: 60, shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{ content: 'New idea identified' }],\n }, {\n id: 'Meeting', width: 150, height: 60, offsetX: 300, offsetY: 155, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Meeting with board' }]\n }, {\n id: 'BoardDecision', width: 150, height: 110, offsetX: 300, offsetY: 280, shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{ content: 'Board decides \\n whether to proceed' }]\n }, {\n id: 'Project', width: 150, height: 100, offsetX: 300, offsetY: 430, shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{ content: 'Find Project manager' }]\n }, {\n id: 'End', width: 150, height: 60, offsetX: 300, offsetY: 555, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Implement and Deliver' }]\n }, {\n id: 'Decision', width: 250, height: 60, offsetX: 550, offsetY: 60, shape: { type: 'Flow', shape: 'Card' },\n annotations: [{ content: 'Decision process for new software ideas' }]\n }, {\n id: 'Reject', width: 150, height: 60, offsetX: 550, offsetY: 280, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Reject' }]\n }, {\n id: 'Resources', width: 150, height: 60, offsetX: 550, offsetY: 430, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Hire new resources' }]\n }\n];\n//Defines the connectors collection in diagram\nvar connectors = [\n { id: 'connector1', type: 'Straight', sourceID: 'NewIdea', targetID: 'Meeting' },\n { id: 'connector2', type: 'Straight', sourceID: 'Meeting', targetID: 'BoardDecision' },\n { id: 'connector3', type: 'Straight', sourceID: 'BoardDecision', targetID: 'Project' },\n { id: 'connector4', type: 'Straight', sourceID: 'Project', targetID: 'End' },\n { id: 'connector5', type: 'Straight', sourceID: 'BoardDecision', targetID: 'Reject' },\n { id: 'connector6', type: 'Straight', sourceID: 'Project', targetID: 'Resources' }\n];\n\n//Enable the clone Tool for UserHandle.\nfunction getTool(action) {\n var tool;\n if (action === 'clone') {\n tool = new CloneTool(diagram.commandHandler);\n }\n return tool;\n}\n\n\n//set the position of the userhandle.\nfunction setuserhandleposition(offset, side, target) {\n diagram.selectedItems.userHandles[0].offset = offset;\n diagram.selectedItems.userHandles[0].side = side;\n target.classList.add('e-selected-style');\n}\n//set the style of the userhandle.\nfunction applyuserhandlestyle(bgcolor, target) {\n diagram.selectedItems.userHandles[0].backgroundColor = bgcolor;\n diagram.selectedItems.userHandles[0].pathColor = 'White';\n target.classList.add('e-selected-style');\n}\n\n//Defines the user handle collection for nodes in diagram\n\nvar handles = [\n {\n name: 'clone', pathData: 'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,' +\n '0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z ' +\n 'M68.5,72.5h-30V34.4h30V72.5z',\n visible: true, offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 }\n }\n];\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n /* jshint proto: true */\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar CloneTool = (function (_super) {\n __extends(CloneTool, _super);\n function CloneTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CloneTool.prototype.mouseDown = function (args) {\n var newObject;\n if (diagram.selectedItems.nodes.length > 0) {\n newObject = ej.diagrams.cloneObject(diagram.selectedItems.nodes[0]);\n }\n else {\n newObject = ej.diagrams.cloneObject(diagram.selectedItems.connectors[0]);\n }\n newObject.id += ej.diagrams.randomId();\n diagram.paste([newObject]);\n args.source = diagram.nodes[diagram.nodes.length - 1];\n args.sourceWrapper = args.source.wrapper;\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n return CloneTool;\n}(ej.diagrams.MoveTool));\n\n\n //Defines the diagram content\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', nodes: nodes,\n connectors: connectors,\n selectedItems: { constraints: ej.diagrams.SelectorConstraints.UserHandle, userHandles: handles },\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //set Node default value \n getNodeDefaults: function (node) {\n return {\n style: { fill: '#578CA9', strokeColor: 'none' },\n annotations: [{ style: { color: 'white' } }]\n };\n },\n //set CustomTool \n getCustomTool: getTool\n\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n diagram.select([diagram.nodes[0]]);\n //Change the postion of the UserHandle\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var appearanceBlock = document.getElementById('appearance');\n var selectedElement = appearanceBlock.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'left':\n setuserhandleposition(0, 'Bottom', target);\n break;\n case 'right':\n setuserhandleposition(1, 'Bottom', target);\n break;\n case 'topr':\n setuserhandleposition(0, 'Right', target);\n break;\n }\n }\n diagram.dataBind();\n };\n //Change the Appearence of the UserHandle\n document.getElementById('pattern').onclick = function (args) {\n var target = args.target;\n var patternBlock = document.getElementById('pattern');\n var selectedElement = patternBlock.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'pattern1':\n applyuserhandlestyle('#1E90FF', target);\n break;\n case 'pattern2':\n applyuserhandlestyle('#3CB371', target);\n break;\n case 'pattern3':\n applyuserhandlestyle('#FF6347', target);\n break;\n }\n }\n diagram.dataBind();\n };\n\n\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Properties\n
        \n
        \n
        \n Alignment\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n Appearance\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * UserHandle\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.MindMap, ej.diagrams.HierarchicalTree);\nvar diagram;\n//Defines the nodes collection in diagram\nvar nodes = [\n {\n id: 'NewIdea', width: 150, height: 60, offsetX: 300, offsetY: 60, shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{ content: 'New idea identified' }],\n }, {\n id: 'Meeting', width: 150, height: 60, offsetX: 300, offsetY: 155, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Meeting with board' }]\n }, {\n id: 'BoardDecision', width: 150, height: 110, offsetX: 300, offsetY: 280, shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{ content: 'Board decides \\n whether to proceed' }]\n }, {\n id: 'Project', width: 150, height: 100, offsetX: 300, offsetY: 430, shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{ content: 'Find Project manager' }]\n }, {\n id: 'End', width: 150, height: 60, offsetX: 300, offsetY: 555, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Implement and Deliver' }]\n }, {\n id: 'Decision', width: 250, height: 60, offsetX: 550, offsetY: 60, shape: { type: 'Flow', shape: 'Card' },\n annotations: [{ content: 'Decision process for new software ideas' }]\n }, {\n id: 'Reject', width: 150, height: 60, offsetX: 550, offsetY: 280, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Reject' }]\n }, {\n id: 'Resources', width: 150, height: 60, offsetX: 550, offsetY: 430, shape: { type: 'Flow', shape: 'Process' },\n annotations: [{ content: 'Hire new resources' }]\n }\n];\n//Defines the connectors collection in diagram\nvar connectors = [\n { id: 'connector1', type: 'Straight', sourceID: 'NewIdea', targetID: 'Meeting' },\n { id: 'connector2', type: 'Straight', sourceID: 'Meeting', targetID: 'BoardDecision' },\n { id: 'connector3', type: 'Straight', sourceID: 'BoardDecision', targetID: 'Project' },\n { id: 'connector4', type: 'Straight', sourceID: 'Project', targetID: 'End' },\n { id: 'connector5', type: 'Straight', sourceID: 'BoardDecision', targetID: 'Reject' },\n { id: 'connector6', type: 'Straight', sourceID: 'Project', targetID: 'Resources' }\n];\n\n//Enable the clone Tool for UserHandle.\nfunction getTool(action) {\n var tool;\n if (action === 'clone') {\n tool = new CloneTool(diagram.commandHandler);\n }\n return tool;\n}\n\n\n//set the position of the userhandle.\nfunction setuserhandleposition(offset, side, target) {\n diagram.selectedItems.userHandles[0].offset = offset;\n diagram.selectedItems.userHandles[0].side = side;\n\n}\n//set the style of the userhandle.\nfunction applyuserhandlestyle(bgcolor, target) {\n diagram.selectedItems.userHandles[0].backgroundColor = bgcolor;\n diagram.selectedItems.userHandles[0].pathColor = 'White';\n\n}\n\n//Defines the user handle collection for nodes in diagram\n\nvar handles = [\n {\n name: 'clone', pathData: 'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,' +\n '0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z ' +\n 'M68.5,72.5h-30V34.4h30V72.5z',\n visible: true, offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 }\n }\n];\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n /* jshint proto: true */\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar CloneTool = (function (_super) {\n __extends(CloneTool, _super);\n function CloneTool() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CloneTool.prototype.mouseDown = function (args) {\n var newObject;\n if (diagram.selectedItems.nodes.length > 0) {\n newObject = ej.diagrams.cloneObject(diagram.selectedItems.nodes[0]);\n }\n else {\n newObject = ej.diagrams.cloneObject(diagram.selectedItems.connectors[0]);\n }\n newObject.id += ej.diagrams.randomId();\n diagram.paste([newObject]);\n args.source = diagram.nodes[diagram.nodes.length - 1];\n args.sourceWrapper = args.source.wrapper;\n _super.prototype.mouseDown.call(this, args);\n this.inAction = true;\n };\n return CloneTool;\n}(ej.diagrams.MoveTool));\n\n\n //Defines the diagram content\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', nodes: nodes,\n connectors: connectors,\n selectedItems: { constraints: ej.diagrams.SelectorConstraints.UserHandle, userHandles: handles },\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //set Node default value \n getNodeDefaults: function (node) {\n return {\n style: { fill: '#578CA9', strokeColor: 'none' },\n annotations: [{ style: { color: 'white' } }]\n };\n },\n //set CustomTool \n getCustomTool: getTool\n\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n diagram.select([diagram.nodes[0]]);\n //Change the postion of the UserHandle\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var appearanceBlock = document.getElementById('appearance');\n\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'left':\n setuserhandleposition(0, 'Bottom', target);\n break;\n case 'right':\n setuserhandleposition(1, 'Bottom', target);\n break;\n case 'topr':\n setuserhandleposition(0, 'Right', target);\n break;\n }\n }\n diagram.dataBind();\n };\n //Change the Appearence of the UserHandle\n document.getElementById('pattern').onclick = function (args) {\n var target = args.target;\n var patternBlock = document.getElementById('pattern');\n\n if (target.className === 'image-pattern-style') {\n switch (target.id) {\n case 'pattern1':\n applyuserhandlestyle('#1E90FF', target);\n break;\n case 'pattern2':\n applyuserhandlestyle('#3CB371', target);\n break;\n case 'pattern3':\n applyuserhandlestyle('#FF6347', target);\n break;\n }\n }\n diagram.dataBind();\n };\n\n\n\n\n"} \ No newline at end of file diff --git a/src/diagram/quick-commands.js b/src/diagram/quick-commands.js index a2d7b871..5f2382e8 100644 --- a/src/diagram/quick-commands.js +++ b/src/diagram/quick-commands.js @@ -56,13 +56,17 @@ function getTool(action) { function setuserhandleposition(offset, side, target) { diagram.selectedItems.userHandles[0].offset = offset; diagram.selectedItems.userHandles[0].side = side; + // custom code start target.classList.add('e-selected-style'); + // custom code end } //set the style of the userhandle. function applyuserhandlestyle(bgcolor, target) { diagram.selectedItems.userHandles[0].backgroundColor = bgcolor; diagram.selectedItems.userHandles[0].pathColor = 'White'; + // custom code start target.classList.add('e-selected-style'); + // custom code end } //Defines the user handle collection for nodes in diagram @@ -134,10 +138,12 @@ this.default = function () { document.getElementById('appearance').onclick = function (args) { var target = args.target; var appearanceBlock = document.getElementById('appearance'); + // custom code start var selectedElement = appearanceBlock.getElementsByClassName('e-selected-style'); if (selectedElement.length) { selectedElement[0].classList.remove('e-selected-style'); } + // custom code end if (target.className === 'image-pattern-style') { switch (target.id) { case 'left': @@ -157,10 +163,12 @@ this.default = function () { document.getElementById('pattern').onclick = function (args) { var target = args.target; var patternBlock = document.getElementById('pattern'); + // custom code start var selectedElement = patternBlock.getElementsByClassName('e-selected-style'); if (selectedElement.length) { selectedElement[0].classList.remove('e-selected-style'); } + // custom code end if (target.className === 'image-pattern-style') { switch (target.id) { case 'pattern1': diff --git a/src/diagram/radial-tree-stack.json b/src/diagram/radial-tree-stack.json index 4356506f..6d9766d1 100644 --- a/src/diagram/radial-tree-stack.json +++ b/src/diagram/radial-tree-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n/**\n * Sample for Radial tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.RadialTree);\n //based on the option, Click event to perform ZoomIn,ZoomOut and Reset.\n function onItemClick(args) {\n switch (args.item.text) {\n case 'Zoom In':\n var zoomin = { type: 'ZoomIn', zoomFactor: 0.2 };\n diagram.zoomTo(zoomin);\n break;\n case 'Zoom Out':\n var zoomout = { type: 'ZoomOut', zoomFactor: 0.2 };\n diagram.zoomTo(zoomout);\n break;\n case 'Reset':\n diagram.reset();\n diagram.fitToPage();\n break;\n }\n}\n\n //Initialize diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson',\n dataManager: new ej.data.DataManager(window.radialTree),\n //binds the data with the nodes\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name,\n style: data.Id === 'parent' ? { color: 'white', fontSize: 50 } : { color: 'black', fontSize: 20 }\n }];\n nodeModel.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.InheritTooltip | ej.diagrams.NodeConstraints.Tooltip;\n nodeModel.tooltip = {\n content: data.Name + '
        ' + data.Designation, relativeMode: 'Object',\n position: 'TopCenter', showTipPointer: true\n };\n if (data.Designation === 'Managing Director') {\n nodeModel.width = 400;\n nodeModel.height = 400;\n nodeModel.shape = { shape: 'Ellipse' };\n nodeModel.style = { fill: 'black' };\n }\n else if (data.Designation === 'Project Manager') {\n nodeModel.width = 130;\n nodeModel.height = 130;\n nodeModel.style = { fill: '#f8ab52' };\n }\n else {\n nodeModel.width = 100;\n nodeModel.height = 100;\n nodeModel.shape = { shape: 'Ellipse' };\n nodeModel.style = { fill: '#afeeee' };\n }\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'RadialTree', verticalSpacing: 30, horizontalSpacing: 20,\n root: 'Category',\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return obj;\n }, getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n return connector;\n }\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n //create and add ZoomIn,ZoomOut and Reset options in ToolBar.\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: onItemClick,\n items: [\n { type: 'Button', tooltipText: 'ZoomIn', text: 'Zoom In', prefixIcon: 'e-ddb-icons e-zoomin' }, { type: 'Separator' },\n { type: 'Button', tooltipText: 'ZoomOut', text: 'Zoom Out', prefixIcon: 'e-ddb-icons e-zoomout' }, { type: 'Separator' },\n { type: 'Button', tooltipText: 'Reset', text: 'Reset', prefixIcon: 'e-ddb-icons e-reset' }\n ]\n });\n\n toolbarObj.appendTo('#toolbar');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n/**\n * Sample for Radial tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.RadialTree);\n //based on the option, Click event to perform ZoomIn,ZoomOut and Reset.\n function onItemClick(args) {\n switch (args.item.text) {\n case 'Zoom In':\n var zoomin = { type: 'ZoomIn', zoomFactor: 0.2 };\n diagram.zoomTo(zoomin);\n break;\n case 'Zoom Out':\n var zoomout = { type: 'ZoomOut', zoomFactor: 0.2 };\n diagram.zoomTo(zoomout);\n break;\n case 'Reset':\n diagram.reset();\n diagram.fitToPage();\n break;\n }\n}\n\n //Initialize diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson',\n dataManager: new ej.data.DataManager(window.radialTree),\n //binds the data with the nodes\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name,\n style: data.Id === 'parent' ? { color: 'white', fontSize: 50 } : { color: 'black', fontSize: 20 }\n }];\n nodeModel.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.InheritTooltip | ej.diagrams.NodeConstraints.Tooltip;\n nodeModel.tooltip = {\n content: data.Name + '
        ' + data.Designation, relativeMode: 'Object',\n position: 'TopCenter', showTipPointer: true\n };\n if (data.Designation === 'Managing Director') {\n nodeModel.width = 400;\n nodeModel.height = 400;\n nodeModel.shape = { shape: 'Ellipse' };\n nodeModel.style = { fill: 'black' };\n }\n else if (data.Designation === 'Project Manager') {\n nodeModel.width = 130;\n nodeModel.height = 130;\n nodeModel.style = { fill: '#f8ab52' };\n }\n else {\n nodeModel.width = 100;\n nodeModel.height = 100;\n nodeModel.shape = { shape: 'Ellipse' };\n nodeModel.style = { fill: '#afeeee' };\n }\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'RadialTree', verticalSpacing: 30, horizontalSpacing: 20,\n root: 'Category',\n },\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return obj;\n }, getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n return connector;\n }\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n //create and add ZoomIn,ZoomOut and Reset options in ToolBar.\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: onItemClick,\n items: [\n { type: 'Button', tooltipText: 'ZoomIn', text: 'Zoom In', prefixIcon: 'e-ddb-icons e-zoomin' }, { type: 'Separator' },\n { type: 'Button', tooltipText: 'ZoomOut', text: 'Zoom Out', prefixIcon: 'e-ddb-icons e-zoomout' }, { type: 'Separator' },\n { type: 'Button', tooltipText: 'Reset', text: 'Reset', prefixIcon: 'e-ddb-icons e-reset' }\n ]\n });\n\n toolbarObj.appendTo('#toolbar');\n"} \ No newline at end of file diff --git a/src/diagram/remote-data-stack.json b/src/diagram/remote-data-stack.json index 050b5ca4..96078ec1 100644 --- a/src/diagram/remote-data-stack.json +++ b/src/diagram/remote-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataManager: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataManager: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"} \ No newline at end of file diff --git a/src/diagram/right-to-left-tree-stack.json b/src/diagram/right-to-left-tree-stack.json index 801a514b..fcd7c64e 100644 --- a/src/diagram/right-to-left-tree-stack.json +++ b/src/diagram/right-to-left-tree-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '' +\n ''\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '' +\n ''\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"} \ No newline at end of file diff --git a/src/diagram/sample.json b/src/diagram/sample.json index 848a38c4..7ab7e6c8 100644 --- a/src/diagram/sample.json +++ b/src/diagram/sample.json @@ -3,9 +3,10 @@ "directory": "diagram", "category": "Data Visualization", "ftName": "diagram", + "dataSourcePath":"src/diagram/diagram-data.js", "type": "update", - "dataSourcePath":"src/diagram/diagram-data.js", - "samples": [{ + "samples": [ + { "url": "default-functionalities", "name": "Default Functionalities", "description": "This sample visualizes the processing of an order placed using credit card with built-in flow shapes.", @@ -14,98 +15,114 @@ { "url": "shape-gallery", "name": "Shapes", - "description": "This sample illustrates basic built-in shapes, such as basic shapes, flow shapes, and BPMN shapes.", + "description": "This sample illustrates list of built-in shapes available in our JavaScript Diagram Library which includes basic shapes, flow shapes, and BPMN shapes.", "category": "Getting Started" }, { "url": "getting-started-node", "name": "Nodes", - "description": "This sample visualizes the different stages of a software development life cycle using a circular flow diagram. Customizing the appearance of the nodes is illustrated in this example.", + "description": "This sample visualizes the different stages of a software development life cycle using a circular flow diagram.", "category": "Getting Started" }, { "url": "connector", "name": "Connectors", - "description": "This sample visualizes the data flow in a marketing process using predefined shapes and connectors. Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.", + "description": "This sample visualizes the data flow in a marketing process using predefined diagram shapes and connectors.", "category": "Getting Started" }, { "url": "getting-started-annotation", "name": "Annotations", - "description": "This sample illustrates the competitive environment of a business through five forces chart. The elements of the five force chart is described using nodes and annotations. Customizing the position and appearance of the annotation is illustrated in this example.", - "category": "Getting Started", - "type": "update" + "description": "This sample illustrates the competitive environment of a business through five forces chart and its described using nodes and annotations.", + "category": "Getting Started" }, { "url": "port", "name": "Ports", - "description": "This sample visualizes the process flow of publishing a book using connection points. Connection points are static points over the shapes that allow creating connections to the shapes. Customizing the size and appearance of the connection points is illustrated in this example.", + "description": "This sample visualizes process flow of publishing a book using connection points which are static points over shapes that allow creating connections onto it.", "category": "Getting Started" }, { - "url": "bpmn-editor", - "name": "BPMN Editor", - "description": "This sample visualizes the hotel booking reservation system and its built with ready made BPMN shapes.", - "category": "Getting Started" + "url": "swimlane", + "name": "Swimlane", + "description": "This sample Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.", + "category": "Getting Started", + "type": "new" }, { "url": "custom-shapes", "name": "Complex Shapes", - "description": "This sample demonstrates how to host a HTML element inside a node. In this example, a Gauge control is hosted inside a HTML Node.", + "description": "This sample demonstrates how to host a HTML elements inside a node. In this example, a Gauge control is hosted inside a HTML Node.", "category": "Getting Started" }, { - "url": "drawing-tool", - "name": "Drawing Tools", - "description": "This sample visualizes how to build a diagram interactively using drawing tools. Continuous draw option, snapping, and undo/redo support are enabled to easily draw diagrams. Rulers, gridlines, and snapping options are enabled to easily align objects.", - "category": "User Interaction" + "url": "diagram-events", + "name": "Events", + "description": "This sample visualizes what are the client side events are available in our JavaScript Diagram Library.", + "category": "Getting Started", + "type": "new" }, { - "url": "key-board-functions", - "name": "Keyboard Interaction", - "description": "This sample illustrates interaction with diagram control using shortcut keys. Command Manager support is used to manage keyboard interactions.", - "category": "User Interaction" + "url": "tooltip-Sample", + "name": "Tooltip", + "description": "This sample demonstrates how to add the extra information to the nodes and connectors and how to show the information through diagram's tooltip feature.", + "category": "Getting Started", + "type": "new" }, { - "url": "quick-commands", - "name": "User Handles", - "description": "This sample visualizes a simple flow diagram along with options to execute the frequently used commands using user handles.", - "category": "User Interaction" + "url": "history-manager", + "name": "History Manager", + "description": "This sample Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.", + "category": "Getting Started", + "type": "new" }, { - "url": "symbol-palette", - "name": "Symbol Palette", - "description": "This example illustrates predefining shapes in a palette that can be easily dragged and dropped into the drawing area. Customizable options of the symbol palette are also illustrated in this example.", - "category": "User Interaction" + "url": "flow-execution", + "name": "Flow Execution", + "description": "This sample Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.", + "category": "Getting Started", + "type": "new" }, { - "url": "overview", - "name": "Overview Panel", - "description": "This sample visualizes an organizational structure along with an overview for easily navigating the large organizational structure using Overview Panel.", - "category": "User Interaction" + "url": "bpmn-editor", + "name": "BPMN Editor", + "description": "This sample visualizes the hotel booking reservation system and its built with ready made BPMN shapes.", + "category": "Use Case Diagram" }, { - "url": "serialization", - "name": "Save and Load", - "description": "This sample visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.", - "category": "Print and Export" + "url": "logic-circuit", + "name": "Logic Circuit Diagram", + "description": "This sample visualizes implementation of three input Boolean functions using universal logic gates and shape for logic gates designed with diagram's path node.", + "category": "Use Case Diagram" }, { - "url": "print-export", - "name": "Print and Export", - "description": "This sample demonstrates printing and exporting the diagram as images.", - "category": "Print and Export" + "url": "uml-activity", + "name": "UML Activity Diagram", + "description": "This sample visually represents the hotel booking reservation system. It is built with readymade BPMN shapes.", + "category": "Use Case Diagram" + }, + { + "url": "network-diagram", + "name": "Network Diagram", + "description": "This sample visualizes graphical layout of a network diagram using diagram's Native(SVG) nodes feature.", + "category": "Use Case Diagram" + }, + { + "url": "uml-class-diagram", + "name": "UML Class Diagram", + "description": "This sample represents the hospital management system using diagram's built-in UML class diagram shapes.", + "category": "Use Case Diagram" }, { "url": "hierarchical-model", "name": "Hierarchical Tree", - "description": "This sample illustrates a simple hierarchical tree that is built from an external data source. Hierarchical tree layout algorithm is used to build hierarchical trees. Customizing the spacing between objects and orientation of the trees is illustrated in this example.", + "description": "This sample illustrates a generating hierarchical tree from right to left orientation with external data source.", "category": "Automatic Layouts" }, { "url": "organization-model", "name": "Organizational Chart", - "description": "This sample illustrates a simple business management structure that is built from an external data source. Hierarchical tree layout algorithm is used to build organizational charts. Customizing the orientation and structure of the organizational chart is illustrated in this example.", + "description": "This sample illustrates a simple business management structure that is built from an external data source.", "category": "Automatic Layouts" }, { @@ -123,7 +140,7 @@ { "url": "symmetric-layout", "name": "Symmetric Layout", - "description": "This sample visualizes a simple network template using symmetrical layout algorithm.", + "description": "This sample visualizes a simple network template using symmetrical layout algorithm. It uses attractive and repulsive forces.", "category": "Automatic Layouts" }, { @@ -141,9 +158,51 @@ { "url": "pert-chart", "name": "PERT chart", - "description": "This sample visualizes a project development process using Program Evaluation Review Technique (PERT). Complex hierarchical tree layout algorithm is used to automatically arrange the nodes.", + "description": "This sample visualizes a project development process using Program Evaluation Review Technique (PERT).", "category": "Automatic Layouts" }, + { + "url": "drawing-tool", + "name": "Drawing Tools", + "description": "This sample visualizes how to build a diagram interactively using drawing tools. Continuous draw option, snapping are enabled to easily draw diagrams.", + "category": "User Interaction" + }, + { + "url": "key-board-functions", + "name": "Keyboard Interaction", + "description": "This sample illustrates interaction with diagram control using shortcut keys. Command Manager support is used to manage keyboard interactions.", + "category": "User Interaction" + }, + { + "url": "quick-commands", + "name": "User Handles", + "description": "This sample visualizes a simple flow diagram along with options to execute the frequently used commands using user handles.", + "category": "User Interaction" + }, + { + "url": "symbol-palette", + "name": "Symbol Palette", + "description": "This example illustrates predefining shapes in a palette that can be easily dragged and dropped into the drawing area.", + "category": "User Interaction" + }, + { + "url": "overview", + "name": "Overview Panel", + "description": "This sample visualizes an organizational structure along with an overview for easily navigating the large organizational structure using Overview Panel.", + "category": "User Interaction" + }, + { + "url": "serialization", + "name": "Save and Load", + "description": "This sample visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.", + "category": "Print and Export" + }, + { + "url": "print-export", + "name": "Print and Export", + "description": "This example shows how to print the diagram and how to export the diagram as image (*.jpg, *.png, and *bmp) and SVG format.", + "category": "Print and Export" + }, { "url": "local-data", "name": "Local Data", @@ -153,44 +212,15 @@ { "url": "remote-data", "name": "Remote Data", - "description": "This sample demonstrates binding remote data with the diagram using the Data Manager support.", + "description": "This sample demonstrates how to bind an remote data with the diagram using the Data Manager support.", "category": "Data Binding" }, { "url": "crud", "name": "CRUD", - "type": "new", - "description": "This sample demonstrates how to perform crud operation in diagram.", + "description": "This sample demonstrates generating a diagram by reading data from the database, and updating it with new inserted/updated/deleted objects through web services.", "category": "Data Binding" }, - { - "url": "logic-circuit", - "name": "Logic Circuit Diagram", - "type": "new", - "description": "This sample visualizes implementation of three input Boolean functions using universal logic gates, and it is designed with diagram `custom` nodes.", - "category": "Use Case Diagram" - }, - { - "url": "uml-activity", - "name": "UML Activity Diagram", - "type": "new", - "description": "This sample visualizes graphical representation of message flow from one activity to another in customer service with built-in `UML activity` shapes", - "category": "Use Case Diagram" - }, - { - "url": "network-diagram", - "name": "Network Diagram", - "type": "new", - "description": "This sample visualizes graphical layout of a network diagram using diagram `Native (SVG)` shapes.", - "category": "Use Case Diagram" - }, - { - "url": "uml-class-diagram", - "name": "UML Class Diagram", - "type": "new", - "description": "This sample visualizes the class shapes in diagram.", - "category": "Use Case Diagram" - }, { "url": "venn-diagram", "name": "Venn Diagram", @@ -200,7 +230,7 @@ { "url": "fishbone-diagram", "name": "Fishbone Diagram", - "description": "This sample visually represents a simple fishbone diagram (Ishikawa). Diagram nodes and annotations are used to define fishbone diagrams. Read-only mode is enabled here.", + "description": "This sample visually represents a simple fishbone diagram (Ishikawa). Diagram nodes and annotations are used to define fishbone diagrams.", "category": "Static Diagram" } ] diff --git a/src/diagram/serialization-stack.json b/src/diagram/serialization-stack.json index ecb96a67..e40062ec 100644 --- a/src/diagram/serialization-stack.json +++ b/src/diagram/serialization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Serialization sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\nfunction onUploadSuccess(args) {\n var file1 = args.file;\n var file = file1.rawFile;\n var reader = new FileReader();\n reader.readAsText(file);\n reader.onloadend = loadDiagram;\n}\n//Load the diagraming object.\nfunction loadDiagram(event) {\n diagram.loadDiagram(event.target.result);\n}\n\n//save the diagram object in json data.\nfunction download(data) {\n if (window.navigator.msSaveBlob) {\n var blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' });\n window.navigator.msSaveOrOpenBlob(blob, 'Diagram.json');\n }\n else {\n var dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data);\n var a = document.createElement('a');\n a.href = dataStr;\n a.download = 'Diagram.json';\n document.body.appendChild(a);\n a.click();\n a.remove();\n }\n}\n//create and add ports for Node.\nfunction getPorts(obj) {\n var ports = [\n { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },\n { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 } },\n { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }\n ];\n var additionalports = [{ id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }];\n if (obj.id === 'Data') {\n return additionalports;\n }\n else {\n return ports;\n }\n}\n\nfunction openPalette() {\n var paletteSpace = document.getElementById('palette-space');\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!paletteSpace.classList.contains('sb-mobile-palette-open')) {\n paletteSpace.classList.add('sb-mobile-palette-open');\n }\n else {\n paletteSpace.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'Start', height: 50, width: 100, offsetX: 250, offsetY: 60,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Start'\n }],\n style: { fill: '#d0f0f1', strokeColor: '#797979' }\n }, {\n id: 'Alarm', height: 50, width: 100, offsetX: 250, offsetY: 160,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Alarm Rings'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }, {\n id: 'Ready', height: 80, width: 100, offsetX: 250, offsetY: 260,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Ready to Get Up?'\n }],\n style: { fill: '#c5efaf', strokeColor: '#797979' }\n }, {\n id: 'Climb', height: 50, width: 100, offsetX: 250, offsetY: 370,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Climb Out of Bed'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }, {\n id: 'End', height: 50, width: 100, offsetX: 250, offsetY: 460,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'End'\n }],\n style: { fill: '#d0f0f1', strokeColor: '#797979' }\n }, {\n id: 'Relay', height: 50, width: 100, offsetX: 450, offsetY: 160,\n shape: { type: 'Flow', shape: 'Delay' },\n annotations: [{\n content: 'Relay'\n }],\n style: { fill: '#f8eee5', strokeColor: '#797979' }\n }, {\n id: 'Hit', height: 50, width: 100, offsetX: 450, offsetY: 260,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Hit Snooze Button'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'Start', targetID: 'Alarm'\n },\n { id: 'connector2', sourceID: 'Alarm', targetID: 'Ready' },\n {\n id: 'connector3', sourceID: 'Ready', targetID: 'Climb',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }]\n },\n { id: 'connector4', sourceID: 'Climb', targetID: 'End', },\n {\n id: 'connector5', sourceID: 'Ready', targetID: 'Hit',\n annotations: [{ content: 'No', style: { fill: 'white' } }]\n },\n { id: 'connector6', sourceID: 'Hit', targetID: 'Relay' },\n { id: 'connector7', sourceID: 'Relay', targetID: 'Alarm' }];\n var lineinterval;\n lineinterval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: lineinterval };\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px',\n nodes: nodes,\n connectors: connectors,\n snapSettings: { horizontalGridlines: gridlines, verticalGridlines: gridlines },\n //set default value for Connectors.\n getConnectorDefaults: function (args) {\n args.targetDecorator.height = 5;\n args.targetDecorator.width = 5;\n args.style.strokeColor = '#797979';\n args.targetDecorator.style = { fill: '#797979', strokeColor: '#797979' };\n return args;\n },\n //Sets the Node style for DragEnter element.\n dragEnter: function (args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n }\n }\n });\n diagram.appendTo('#diagram');\n //Initialize the flowshapes for the symbol palatte\n var flowshapes = [\n { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'Process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' } },\n { id: 'Document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'PreDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'PaperTap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'DirectData', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'SequentialData', shape: { type: 'Flow', shape: 'SequentialData' } },\n { id: 'Sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'MultiDocument', shape: { type: 'Flow', shape: 'MultiDocument' } },\n { id: 'Collate', shape: { type: 'Flow', shape: 'Collate' } },\n { id: 'SummingJunction', shape: { type: 'Flow', shape: 'SummingJunction' } },\n { id: 'Or', shape: { type: 'Flow', shape: 'Or' } },\n { id: 'InternalStorage', shape: { type: 'Flow', shape: 'InternalStorage' } },\n { id: 'Extract', shape: { type: 'Flow', shape: 'Extract' } },\n { id: 'ManualOperation', shape: { type: 'Flow', shape: 'ManualOperation' } },\n { id: 'Merge', shape: { type: 'Flow', shape: 'Merge' } },\n { id: 'OffPageReference', shape: { type: 'Flow', shape: 'OffPageReference' } },\n { id: 'SequentialAccessStorage', shape: { type: 'Flow', shape: 'SequentialAccessStorage' } },\n { id: 'Annotation', shape: { type: 'Flow', shape: 'Annotation' } },\n { id: 'Annotation2', shape: { type: 'Flow', shape: 'Annotation2' } },\n { id: 'data', shape: { type: 'Flow', shape: 'Data' } },\n { id: 'Card', shape: { type: 'Flow', shape: 'Card' } },\n { id: 'Delay', shape: { type: 'Flow', shape: 'Delay' } },\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link4', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link5', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes ToolBar control to invoke save and load the diagram\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: function (args) {\n if (args.item.text === 'New') {\n diagram.clear();\n }\n else if (args.item.text === 'Load') {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n } else if (args.item.id === 'palette-icon') {\n openPalette();\n } else {\n download(diagram.saveDiagram());\n }\n },\n items: [\n { id: 'palette-icon', prefixIcon: 'e-ddb-icons2 e-toggle-palette', align: 'Right' },\n { text: 'New', tooltipText: 'New', prefixIcon: 'e-ddb-icons e-new' },\n { type: 'Separator' }, { text: 'Save', tooltipText: 'Save', prefixIcon: 'e-ddb-icons e-save' },\n { type: 'Separator' }, { text: 'Load', tooltipText: 'Load', prefixIcon: 'e-ddb-icons e-open' }\n ]\n });\n toolbarObj.appendTo('#toolbar');\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: flowshapes, iconCss: 'e-ddb-icons1 e-flow', title: 'Flow Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons1 e-connector', title: 'Connectors' }\n ],\n //set default value for Node.\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'Terminator' || symbol.id === 'Process' || symbol.id === 'Delay') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'Decision' || symbol.id === 'Document' || symbol.id === 'PreDefinedProcess' ||\n symbol.id === 'PaperTap' || symbol.id === 'DirectData' || symbol.id === 'MultiDocument' || symbol.id === 'Data') {\n symbol.width = 50;\n symbol.height = 40;\n } else {\n symbol.width = 50;\n symbol.height = 50;\n }\n\n symbol.style.strokeWidth = 2;\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n },\n width: '100%', height: '645px', symbolHeight: 60, symbolWidth: 60,\n });\n palette.appendTo('#symbolpalette');\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n success: onUploadSuccess\n });\n uploadObj.appendTo('#fileupload');\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Serialization sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\nfunction onUploadSuccess(args) {\n var file1 = args.file;\n var file = file1.rawFile;\n var reader = new FileReader();\n reader.readAsText(file);\n reader.onloadend = loadDiagram;\n}\n//Load the diagraming object.\nfunction loadDiagram(event) {\n diagram.loadDiagram(event.target.result);\n}\n\n//save the diagram object in json data.\nfunction download(data) {\n if (window.navigator.msSaveBlob) {\n var blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' });\n window.navigator.msSaveOrOpenBlob(blob, 'Diagram.json');\n }\n else {\n var dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data);\n var a = document.createElement('a');\n a.href = dataStr;\n a.download = 'Diagram.json';\n document.body.appendChild(a);\n a.click();\n a.remove();\n }\n}\n//create and add ports for Node.\nfunction getPorts(obj) {\n var ports = [\n { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },\n { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 } },\n { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }\n ];\n var additionalports = [{ id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },\n { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }];\n if (obj.id === 'Data') {\n return additionalports;\n }\n else {\n return ports;\n }\n}\n\nfunction openPalette() {\n var paletteSpace = document.getElementById('palette-space');\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!paletteSpace.classList.contains('sb-mobile-palette-open')) {\n paletteSpace.classList.add('sb-mobile-palette-open');\n }\n else {\n paletteSpace.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'Start', height: 50, width: 100, offsetX: 250, offsetY: 60,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'Start'\n }],\n style: { fill: '#d0f0f1', strokeColor: '#797979' }\n }, {\n id: 'Alarm', height: 50, width: 100, offsetX: 250, offsetY: 160,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Alarm Rings'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }, {\n id: 'Ready', height: 80, width: 100, offsetX: 250, offsetY: 260,\n shape: { type: 'Flow', shape: 'Decision' },\n annotations: [{\n content: 'Ready to Get Up?'\n }],\n style: { fill: '#c5efaf', strokeColor: '#797979' }\n }, {\n id: 'Climb', height: 50, width: 100, offsetX: 250, offsetY: 370,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Climb Out of Bed'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }, {\n id: 'End', height: 50, width: 100, offsetX: 250, offsetY: 460,\n shape: { type: 'Flow', shape: 'Terminator' },\n annotations: [{\n content: 'End'\n }],\n style: { fill: '#d0f0f1', strokeColor: '#797979' }\n }, {\n id: 'Relay', height: 50, width: 100, offsetX: 450, offsetY: 160,\n shape: { type: 'Flow', shape: 'Delay' },\n annotations: [{\n content: 'Relay'\n }],\n style: { fill: '#f8eee5', strokeColor: '#797979' }\n }, {\n id: 'Hit', height: 50, width: 100, offsetX: 450, offsetY: 260,\n shape: { type: 'Flow', shape: 'Process' },\n annotations: [{\n content: 'Hit Snooze Button'\n }],\n style: { fill: '#fbfdc5', strokeColor: '#797979' }\n }];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'Start', targetID: 'Alarm'\n },\n { id: 'connector2', sourceID: 'Alarm', targetID: 'Ready' },\n {\n id: 'connector3', sourceID: 'Ready', targetID: 'Climb',\n annotations: [{ content: 'Yes', style: { fill: 'white' } }]\n },\n { id: 'connector4', sourceID: 'Climb', targetID: 'End', },\n {\n id: 'connector5', sourceID: 'Ready', targetID: 'Hit',\n annotations: [{ content: 'No', style: { fill: 'white' } }]\n },\n { id: 'connector6', sourceID: 'Hit', targetID: 'Relay' },\n { id: 'connector7', sourceID: 'Relay', targetID: 'Alarm' }];\n var lineinterval;\n lineinterval = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var gridlines = { lineColor: '#e0e0e0', lineIntervals: lineinterval };\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px',\n nodes: nodes,\n connectors: connectors,\n snapSettings: { horizontalGridlines: gridlines, verticalGridlines: gridlines },\n //set default value for Connectors.\n getConnectorDefaults: function (args) {\n args.targetDecorator.height = 5;\n args.targetDecorator.width = 5;\n args.style.strokeColor = '#797979';\n args.targetDecorator.style = { fill: '#797979', strokeColor: '#797979' };\n return args;\n },\n //Sets the Node style for DragEnter element.\n dragEnter: function (args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n var ratio = 100 / obj.width;\n obj.width = 100;\n obj.height *= ratio;\n }\n }\n });\n diagram.appendTo('#diagram');\n //Initialize the flowshapes for the symbol palatte\n var flowshapes = [\n { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'Process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' } },\n { id: 'Document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'PreDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'PaperTap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'DirectData', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'SequentialData', shape: { type: 'Flow', shape: 'SequentialData' } },\n { id: 'Sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'MultiDocument', shape: { type: 'Flow', shape: 'MultiDocument' } },\n { id: 'Collate', shape: { type: 'Flow', shape: 'Collate' } },\n { id: 'SummingJunction', shape: { type: 'Flow', shape: 'SummingJunction' } },\n { id: 'Or', shape: { type: 'Flow', shape: 'Or' } },\n { id: 'InternalStorage', shape: { type: 'Flow', shape: 'InternalStorage' } },\n { id: 'Extract', shape: { type: 'Flow', shape: 'Extract' } },\n { id: 'ManualOperation', shape: { type: 'Flow', shape: 'ManualOperation' } },\n { id: 'Merge', shape: { type: 'Flow', shape: 'Merge' } },\n { id: 'OffPageReference', shape: { type: 'Flow', shape: 'OffPageReference' } },\n { id: 'SequentialAccessStorage', shape: { type: 'Flow', shape: 'SequentialAccessStorage' } },\n { id: 'Annotation', shape: { type: 'Flow', shape: 'Annotation' } },\n { id: 'Annotation2', shape: { type: 'Flow', shape: 'Annotation2' } },\n { id: 'data', shape: { type: 'Flow', shape: 'Data' } },\n { id: 'Card', shape: { type: 'Flow', shape: 'Card' } },\n { id: 'Delay', shape: { type: 'Flow', shape: 'Delay' } },\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link4', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link5', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes ToolBar control to invoke save and load the diagram\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: function (args) {\n if (args.item.text === 'New') {\n diagram.clear();\n }\n else if (args.item.text === 'Load') {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n } else if (args.item.id === 'palette-icon') {\n openPalette();\n } else {\n download(diagram.saveDiagram());\n }\n },\n items: [\n { id: 'palette-icon', prefixIcon: 'e-ddb-icons2 e-toggle-palette', align: 'Right' },\n { text: 'New', tooltipText: 'New', prefixIcon: 'e-ddb-icons e-new' },\n { type: 'Separator' }, { text: 'Save', tooltipText: 'Save', prefixIcon: 'e-ddb-icons e-save' },\n { type: 'Separator' }, { text: 'Load', tooltipText: 'Load', prefixIcon: 'e-ddb-icons e-open' }\n ]\n });\n toolbarObj.appendTo('#toolbar');\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple',\n palettes: [\n { id: 'flow', expanded: true, symbols: flowshapes, iconCss: 'e-ddb-icons1 e-flow', title: 'Flow Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons1 e-connector', title: 'Connectors' }\n ],\n //set default value for Node.\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'Terminator' || symbol.id === 'Process' || symbol.id === 'Delay') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'Decision' || symbol.id === 'Document' || symbol.id === 'PreDefinedProcess' ||\n symbol.id === 'PaperTap' || symbol.id === 'DirectData' || symbol.id === 'MultiDocument' || symbol.id === 'Data') {\n symbol.width = 50;\n symbol.height = 40;\n } else {\n symbol.width = 50;\n symbol.height = 50;\n }\n\n symbol.style.strokeWidth = 2;\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n },\n width: '100%', height: '645px', symbolHeight: 60, symbolWidth: 60,\n });\n palette.appendTo('#symbolpalette');\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n success: onUploadSuccess\n });\n uploadObj.appendTo('#fileupload');\n\n\n"} \ No newline at end of file diff --git a/src/diagram/shape-gallery-stack.json b/src/diagram/shape-gallery-stack.json index 38b6833e..38235a42 100644 --- a/src/diagram/shape-gallery-stack.json +++ b/src/diagram/shape-gallery-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.BpmnDiagrams);\nvar basicShapeModel = [\n {\n shape: { type: 'Text', content: 'Basic Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Basic', shape: 'Rectangle' }, annotations: [\n { content: 'Rectangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Ellipse' }, annotations: [\n { content: 'Ellipse' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Triangle' }, annotations: [\n { content: 'Triangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Plus' }, annotations: [\n { content: 'Plus' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Star' }, annotations: [\n { content: 'Star' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Pentagon' }, annotations: [\n { content: 'Pentagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Heptagon' }, annotations: [\n { content: 'Heptagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Octagon' }, annotations: [\n { content: 'Octagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Trapezoid' }, annotations: [\n { content: 'Trapezoid' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Decagon' }, annotations: [\n { content: 'Decagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'RightTriangle' }, annotations: [\n { content: 'Right Triangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Parallelogram' }, annotations: [\n { content: 'Parallelogram' }\n ]\n },\n];\nvar flowShapeModel = [\n {\n shape: { type: 'Text', content: 'Flow Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Flow', shape: 'Terminator' }, annotations: [\n { content: 'Terminator' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Process' }, annotations: [\n { content: 'Process' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Decision' }, annotations: [\n { content: 'Decision' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Document' }, annotations: [\n { content: 'Document' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'PreDefinedProcess' }, annotations: [\n { content: 'Predefined Process' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'PaperTap' }, annotations: [\n { content: 'Paper Tape' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'DirectData' }, annotations: [\n { content: 'Direct Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SequentialData' }, annotations: [\n { content: 'Direct Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Sort' }, annotations: [\n { content: 'Sort' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'MultiDocument' }, annotations: [\n { content: 'Multi-Document' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Collate' }, annotations: [\n { content: 'Collate' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SummingJunction' }, annotations: [\n { content: 'Summing Junction' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Or' }, annotations: [\n { content: 'Or' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'InternalStorage' }, annotations: [\n { content: 'Internal Storage' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Extract' }, annotations: [\n { content: 'Extract' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'ManualOperation' }, annotations: [\n { content: 'Manual Operation' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Merge' }, annotations: [\n { content: 'Merge' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'OffPageReference' }, annotations: [\n { content: 'Off-Page Reference' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SequentialAccessStorage' }, annotations: [\n { content: 'Sequential Access Storage' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Data' }, annotations: [\n { content: 'Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Card' }, annotations: [\n { content: 'Card' }\n ]\n },\n];\n\nvar bpmnShapeModel = [\n {\n shape: { type: 'Text', content: 'BPMN Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'none', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'None' } },\n annotations: [\n { content: 'Start Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'None' } },\n annotations: [\n { content: 'Intermediate Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'None' } },\n annotations: [\n { content: 'End Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Gateway' },\n annotations: [\n { content: 'Gateway' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } },\n annotations: [\n { content: 'Task' }\n ]\n },\n {\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'SubProcess',\n subProcess: {\n type: 'Transaction', transaction: {\n success: { visible: false }, failure: { visible: false }, cancel: { visible: false }\n }\n }\n },\n },\n annotations: [\n { content: 'Transaction' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Message' }, annotations: [{ content: 'Message' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'DataObject' }, annotations: [{ content: 'Data Object' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'DataSource' }, annotations: [{ content: 'Data Source' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'Group' }, annotations: [{ content: 'Group' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'TextAnnotation' }, annotations: [{ content: 'Text Annotation' }]\n }\n];\n/**\n * Sample for Shape gallery.\n */\nvar shape = [\n { shapeName: 'Basic Shapes', shapeId: 'Basic' },\n { shapeName: 'Flow Shapes', shapeId: 'Flow' },\n { shapeName: 'BPMN Shapes', shapeId: 'Bpmn' },\n];\n//create and return the Nodes collection.\nfunction getNodes() {\n var nodes1 = basicShapeModel;\n nodes1 = nodes1.concat(flowShapeModel).concat(bpmnShapeModel);\n var offsetx = 60;\n var offsety = 50;\n var count = 1;\n for (var i = 0; i < nodes1.length; i++) {\n var node = nodes1[i];\n node.width = 40;\n node.height = 40;\n if (node.shape.type === 'Flow') {\n var shapeType = node.shape.shape;\n if (shapeType === 'Process' || shapeType === 'Terminator') {\n node.height = 20;\n } else if (shapeType === 'Decision') {\n node.height = 35;\n } else if (shapeType === 'Document' || shapeType === 'DirectData' ||\n shapeType === 'MultiDocument' || shapeType === 'PreDefinedProcess') {\n node.height = 30;\n }\n }\n node.offsetX = offsetx;\n node.offsetY = offsety;\n if (node.shape.type !== \"Text\") {\n node.annotations[0].verticalAlignment = 'Top';\n node.annotations[0].offset = { y: 1 };\n node.annotations[0].margin = { top: 10 };\n\n offsetx = offsetx + 90;\n if (count % 10 === 0) {\n offsety = offsety + 100;\n offsetx = 60;\n }\n count++;\n }\n if (node.shape.type === 'Text') {\n offsetx = 60;\n offsety = offsety + 50;\n count = 1;\n node.width = 150;\n node.height = 100;\n node.offsetX = 90;\n if (node.shape.content !== 'Basic Shapes') {\n node.offsetX = 90;\n node.offsetY = offsety + 50;\n offsety = offsety + 100;\n }\n }\n }\n return nodes1;\n}\n\n var objects = getNodes();\n //Initialize diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n nodes: objects,\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return obj;\n },\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Width' });\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.BpmnDiagrams);\nvar basicShapeModel = [\n {\n shape: { type: 'Text', content: 'Basic Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Basic', shape: 'Rectangle' }, annotations: [\n { content: 'Rectangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Ellipse' }, annotations: [\n { content: 'Ellipse' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Triangle' }, annotations: [\n { content: 'Triangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Plus' }, annotations: [\n { content: 'Plus' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Star' }, annotations: [\n { content: 'Star' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Pentagon' }, annotations: [\n { content: 'Pentagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Heptagon' }, annotations: [\n { content: 'Heptagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Octagon' }, annotations: [\n { content: 'Octagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Trapezoid' }, annotations: [\n { content: 'Trapezoid' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Decagon' }, annotations: [\n { content: 'Decagon' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'RightTriangle' }, annotations: [\n { content: 'Right Triangle' }\n ]\n },\n {\n shape: { type: 'Basic', shape: 'Parallelogram' }, annotations: [\n { content: 'Parallelogram' }\n ]\n },\n];\nvar flowShapeModel = [\n {\n shape: { type: 'Text', content: 'Flow Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Flow', shape: 'Terminator' }, annotations: [\n { content: 'Terminator' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Process' }, annotations: [\n { content: 'Process' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Decision' }, annotations: [\n { content: 'Decision' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Document' }, annotations: [\n { content: 'Document' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'PreDefinedProcess' }, annotations: [\n { content: 'Predefined Process' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'PaperTap' }, annotations: [\n { content: 'Paper Tape' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'DirectData' }, annotations: [\n { content: 'Direct Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SequentialData' }, annotations: [\n { content: 'Direct Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Sort' }, annotations: [\n { content: 'Sort' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'MultiDocument' }, annotations: [\n { content: 'Multi-Document' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Collate' }, annotations: [\n { content: 'Collate' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SummingJunction' }, annotations: [\n { content: 'Summing Junction' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Or' }, annotations: [\n { content: 'Or' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'InternalStorage' }, annotations: [\n { content: 'Internal Storage' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Extract' }, annotations: [\n { content: 'Extract' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'ManualOperation' }, annotations: [\n { content: 'Manual Operation' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Merge' }, annotations: [\n { content: 'Merge' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'OffPageReference' }, annotations: [\n { content: 'Off-Page Reference' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'SequentialAccessStorage' }, annotations: [\n { content: 'Sequential Access Storage' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Data' }, annotations: [\n { content: 'Data' }\n ]\n },\n {\n shape: { type: 'Flow', shape: 'Card' }, annotations: [\n { content: 'Card' }\n ]\n },\n];\n\nvar bpmnShapeModel = [\n {\n shape: { type: 'Text', content: 'BPMN Shapes' }, constraints: ej.diagrams.NodeConstraints.PointerEvents,\n style: { fontSize: 16, fill: 'none', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'None' } },\n annotations: [\n { content: 'Start Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'None' } },\n annotations: [\n { content: 'Intermediate Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'None' } },\n annotations: [\n { content: 'End Event' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Gateway' },\n annotations: [\n { content: 'Gateway' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } },\n annotations: [\n { content: 'Task' }\n ]\n },\n {\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'SubProcess',\n subProcess: {\n type: 'Transaction', transaction: {\n success: { visible: false }, failure: { visible: false }, cancel: { visible: false }\n }\n }\n },\n },\n annotations: [\n { content: 'Transaction' }\n ]\n },\n {\n shape: { type: 'Bpmn', shape: 'Message' }, annotations: [{ content: 'Message' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'DataObject' }, annotations: [{ content: 'Data Object' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'DataSource' }, annotations: [{ content: 'Data Source' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'Group' }, annotations: [{ content: 'Group' }]\n },\n {\n shape: { type: 'Bpmn', shape: 'TextAnnotation' }, annotations: [{ content: 'Text Annotation' }]\n }\n];\n/**\n * Sample for Shape gallery.\n */\nvar shape = [\n { shapeName: 'Basic Shapes', shapeId: 'Basic' },\n { shapeName: 'Flow Shapes', shapeId: 'Flow' },\n { shapeName: 'BPMN Shapes', shapeId: 'Bpmn' },\n];\n//create and return the Nodes collection.\nfunction getNodes() {\n var nodes1 = basicShapeModel;\n nodes1 = nodes1.concat(flowShapeModel).concat(bpmnShapeModel);\n var offsetx = 60;\n var offsety = 50;\n var count = 1;\n for (var i = 0; i < nodes1.length; i++) {\n var node = nodes1[i];\n node.width = 40;\n node.height = 40;\n if (node.shape.type === 'Flow') {\n var shapeType = node.shape.shape;\n if (shapeType === 'Process' || shapeType === 'Terminator') {\n node.height = 20;\n } else if (shapeType === 'Decision') {\n node.height = 35;\n } else if (shapeType === 'Document' || shapeType === 'DirectData' ||\n shapeType === 'MultiDocument' || shapeType === 'PreDefinedProcess') {\n node.height = 30;\n }\n }\n node.offsetX = offsetx;\n node.offsetY = offsety;\n if (node.shape.type !== \"Text\") {\n node.annotations[0].verticalAlignment = 'Top';\n node.annotations[0].offset = { y: 1 };\n node.annotations[0].margin = { top: 10 };\n\n offsetx = offsetx + 90;\n if (count % 10 === 0) {\n offsety = offsety + 100;\n offsetx = 60;\n }\n count++;\n }\n if (node.shape.type === 'Text') {\n offsetx = 60;\n offsety = offsety + 50;\n count = 1;\n node.width = 150;\n node.height = 100;\n node.offsetX = 90;\n if (node.shape.content !== 'Basic Shapes') {\n node.offsetX = 90;\n node.offsetY = offsety + 50;\n offsety = offsety + 100;\n }\n }\n }\n return nodes1;\n}\n\n var objects = getNodes();\n //Initialize diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n nodes: objects,\n //Defines the default node and connector properties\n getNodeDefaults: function (obj, diagram) {\n return obj;\n },\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage({ mode: 'Width' });\n\n"} \ No newline at end of file diff --git a/src/diagram/shape-gallery.html b/src/diagram/shape-gallery.html index 544e6016..5e28d82c 100644 --- a/src/diagram/shape-gallery.html +++ b/src/diagram/shape-gallery.html @@ -5,7 +5,7 @@

        - This sample illustrates diagram's basic built-in shapes, such as basic shapes, flow shapes, and BPMN shapes. + This sample illustrates basic built-in shapes, such as basic shapes, flow shapes, and BPMN shapes.

        diff --git a/src/diagram/swimlane-stack.json b/src/diagram/swimlane-stack.json new file mode 100644 index 00000000..a3c5a6b1 --- /dev/null +++ b/src/diagram/swimlane-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Default Swimlane sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\n//Create and add ports for node.\nvar port = [\n { offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw },\n { offset: { x: 0.5, y: 0 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw },\n { offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw },\n { offset: { x: 0.5, y: 1 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw }\n];\n\nfunction addEvents() {\n var isMobileDevice = window.matchMedia('(max-width:550px)').matches;\n if (isMobileDevice) {\n var pIcons = document.getElementById('palette-icon');\n if (pIcons) {\n pIcons.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var pSpaces = document.getElementById('palette-space');\n isMobileDevice = window.matchMedia('(max-width:550px)').matches;\n if (isMobileDevice) {\n if (!pSpaces.classList.contains('sb-mobile-palette-open')) {\n pSpaces.classList.add('sb-mobile-palette-open');\n }\n else {\n pSpaces.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n\n var bounds = document.getElementById('diagram-space').getBoundingClientRect();\n var centerX = bounds.width / 2;\n var middle = centerX - 50;\n var darkColor = '#C7D4DF';\n var lightColor = '#f5f5f5';\n var pathData = 'M 120 24.9999 C 120 38.8072 109.642 50 96.8653 50 L 23.135' +\n ' 50 C 10.3578 50 0 38.8072 0 24.9999 L 0 24.9999 C' +\n '0 11.1928 10.3578 0 23.135 0 L 96.8653 0 C 109.642 0 120 11.1928 120 24.9999 Z';\n //Initializes the nodes for the diagram.\n var nodes = [\n {\n id: 'swimlane',\n shape: {\n type: 'SwimLane',\n header: {\n annotation: { content: 'ONLINE PURCHASE STATUS', style: { fill: '#111111' } },\n height: 50, style: { fontSize: 11 },\n orientation: 'Horizontal',\n },\n lanes: [\n {\n id: 'stackCanvas1',\n header: {\n annotation: { content: 'CUSTOMER' }, width: 50,\n style: { fontSize: 11 }\n },\n height: 100,\n children: [\n {\n id: 'Order',\n shape: { type: 'Path', data: pathData },\n annotations: [\n {\n content: 'ORDER',\n style: { fontSize: 11, fontColor: 'black' }\n }\n ],\n margin: { left: 60, top: 20 },\n height: 40, width: 100, ports: port\n }\n ],\n },\n {\n id: 'stackCanvas2',\n header: {\n annotation: { content: 'ONLINE' }, width: 50,\n style: { fontSize: 11 }\n },\n height: 100,\n children: [\n {\n id: 'selectItemaddcart',\n annotations: [{ content: 'Select item\\nAdd cart' }],\n margin: { left: 190, top: 20 },\n height: 40, width: 100, ports: port\n },\n {\n id: 'paymentondebitcreditcard',\n annotations: [{ content: 'Payment on\\nDebit/Credit Card' }],\n margin: { left: 350, top: 20 },\n height: 40, width: 100, ports: port\n }\n ],\n },\n {\n id: 'stackCanvas3',\n header: {\n annotation: { content: 'SHOP' }, width: 50,\n style: { fontSize: 11 }\n },\n height: 100,\n children: [\n {\n id: 'getmaildetailaboutorder',\n annotations: [{ content: 'Get mail detail\\nabout order' }],\n margin: { left: 190, top: 20 },\n height: 40, width: 100, ports: port\n },\n {\n id: 'pakingitem',\n annotations: [{ content: 'Paking item' }],\n margin: { left: 350, top: 20 },\n height: 40, width: 100, ports: port\n }\n ],\n },\n {\n id: 'stackCanvas4',\n header: {\n annotation: { content: 'DELIVERY' }, width: 50,\n style: { fontSize: 11 }\n },\n height: 100,\n children: [\n {\n id: 'sendcourieraboutaddress',\n annotations: [{ content: 'Send Courier\\n about Address' }],\n margin: { left: 190, top: 20 },\n height: 40, width: 100, ports: port\n },\n {\n id: 'deliveryonthataddress',\n annotations: [{ content: 'Delivery on that\\n Address' }],\n margin: { left: 350, top: 20 },\n height: 40, width: 100, ports: port\n },\n {\n id: 'getitItem',\n shape: { type: 'Path', data: pathData },\n annotations: [{ content: 'GET IT ITEM', style: { fontSize: 11 } }],\n margin: { left: 500, top: 20 },\n height: 40, width: 100, ports: port\n }\n ],\n },\n ],\n phases: [\n {\n id: 'phase1', offset: 170,\n header: { content: { content: 'Phase' } }\n },\n {\n id: 'phase2', offset: 450,\n header: { content: { content: 'Phase' } }\n },\n ],\n phaseSize: 20,\n },\n offsetX: bounds.width / 2, offsetY: bounds.height / 2,\n height: 100,\n width: 650\n },\n ];\n function getNodeDefaults(node) {\n node.style.strokeColor = \"#CCCCCC\";\n return node;\n }\n //Initializes the Connectors for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'Order',\n targetID: 'selectItemaddcart'\n },\n {\n id: 'connector2', sourceID: 'selectItemaddcart',\n targetID: 'paymentondebitcreditcard'\n },\n {\n id: 'connector3', sourceID: 'paymentondebitcreditcard',\n targetID: 'getmaildetailaboutorder'\n },\n {\n id: 'connector4', sourceID: 'getmaildetailaboutorder',\n targetID: 'pakingitem'\n },\n {\n id: 'connector5', sourceID: 'pakingitem',\n targetID: 'sendcourieraboutaddress'\n },\n {\n id: 'connector6', sourceID: 'sendcourieraboutaddress',\n targetID: 'deliveryonthataddress'\n },\n {\n id: 'connector7', sourceID: 'deliveryonthataddress',\n targetID: 'getitItem'\n },\n ];\n var intervals = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75];\n var hvgridlines = { lineColor: '#e0e0e0', lineIntervals: intervals };\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '100%', nodes: nodes, connectors: connectors,\n getNodeDefaults: getNodeDefaults,\n snapSettings: {\n horizontalGridlines: hvgridlines,\n verticalGridlines: hvgridlines,\n constraints: ej.diagrams.SnapConstraints.All & ~ej.diagrams.SnapConstraints.ShowLines\n },\n //Sets the default values of a Connector.\n getConnectorDefaults: function (connector) {\n if (connector.id.indexOf(\"Link21\") !== -1) {\n connector.type = 'Straight';\n }\n else if (connector.id.indexOf(\"Link22\") !== -1) {\n connector.type = 'Straight';\n }\n else {\n connector.type = 'Orthogonal';\n }\n connector.style.strokeColor = \"#CCCCCC\";\n connector.sourceDecorator.style.strokeColor = \"#CCCCCC\";\n connector.targetDecorator.style.strokeColor = \"#CCCCCC\";\n connector.sourceDecorator.style.fill = \"#CCCCCC\";\n connector.targetDecorator.style.fill = \"#CCCCCC\";\n return connector;\n },\n contextMenuSettings: {\n show: true, items: [\n {\n text: 'Clone', id: 'Clone', target: '.e-diagramcontent',\n },\n {\n text: 'Cut', id: 'Cut', target: '.e-diagramcontent',\n },\n {\n text: 'InsertLaneBefore', id: 'InsertLaneBefore', target: '.e-diagramcontent',\n },\n {\n text: 'InsertLaneAfter', id: 'InsertLaneAfter', target: '.e-diagramcontent',\n }],\n showCustomMenuOnly: true,\n },\n contextMenuOpen: function (args) {\n for (var i=0; i< args.items.length; i++ ) {\n var item = args.items[i];\n if ((diagram.selectedItems.connectors.length + diagram.selectedItems.nodes.length) > 0) {\n if (item.id === 'InsertLaneBefore' || item.id === 'InsertLaneAfter') {\n if (diagram.selectedItems.connectors.length || (diagram.selectedItems.nodes.length && !(diagram.selectedItems.nodes[0]).isLane)) {\n args.hiddenItems.push(item.text);\n }\n }\n } else {\n args.hiddenItems.push(item.text);\n }\n }\n },\n contextMenuClick: function (args) {\n if (args.item.id === 'InsertLaneBefore' || args.item.id === 'InsertLaneAfter') {\n if (diagram.selectedItems.nodes.length > 0 && (diagram.selectedItems.nodes[0]).isLane) {\n var index;\n var node = diagram.selectedItems.nodes[0];\n var swimlane = diagram.getObject((diagram.selectedItems.nodes[0]).parentId);\n var shap = swimlane.shape;\n var existingLane = cloneObject(shape.lanes[0]);\n\n var newLane = {\n id: randomId(),\n header: {\n width: existingLane.header.width, height: existingLane.header.height,\n style: existingLane.header.style\n },\n style: existingLane.style,\n height: existingLane.height, width: existingLane.width,\n };\n\n if (shape.orientation === 'Horizontal') {\n var exclude = 0;\n exclude += (shape.header) ? 1 : 0;\n exclude += (shape.phases.length) ? 1 : 0;\n index = node.rowIndex - exclude;\n newLane.header.width = existingLane.header.width;\n newLane.header.height = existingLane.height;\n } else {\n index = node.columnIndex - (shape.phases.length) ? 1 : 0;\n newLane.header.width = existingLane.width;\n newLane.header.height = existingLane.header.height;\n }\n if (args.item.id === 'InsertLaneBefore') {\n diagram.addLanes(swimlane, [newLane], index);\n } else {\n diagram.addLanes(swimlane, [newLane], index + 1);\n }\n diagram.clearSelection();\n }\n } else if (args.item.id === 'Cut') {\n diagram.cut();\n } else if (args.item.id === 'Clone') {\n diagram.copy();\n diagram.paste();\n }\n },\n //Sets the Node style for DragEnter element.\n dragEnter: function (args) {\n var obj = args.element;\n if (obj instanceof ej.diagrams.Node) {\n var shape = obj.shape;\n if (shape.isLane) {\n if (shape.orientation === 'Horizontal') {\n shape.lanes[0].height = 100;\n shape.lanes[0].width = 400;\n } else if (shape.orientation === 'Vertical') {\n shape.lanes[0].height = 400;\n shape.lanes[0].width = 100;\n }\n }\n }\n }\n });\n diagram.appendTo('#diagram');\n if (ej.base.Browser.isDevice) {\n diagram.fitToPage();\n }\n // Initializes the palettes to be displayed in the symbol palette.\n var palettes = [\n {\n id: 'flow', expanded: true, title: 'Flow Shapes', symbols: [\n {\n id: 'Terminator', width: 50, height: 60, addInfo: { tooltip: 'Terminator' }, shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 1 }, ports: port\n },\n {\n id: 'Process', addInfo: { tooltip: 'Process' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 1 }, ports: port\n },\n {\n id: 'Decision', addInfo: { tooltip: 'Decision' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 1 }, ports: port\n },\n {\n id: 'Document', addInfo: { tooltip: 'Document' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Document' }, style: { strokeWidth: 1 }, ports: port\n },\n {\n id: 'PreDefinedProcess', addInfo: { tooltip: 'Predefined process' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'PreDefinedProcess' }, ports: port, style: { strokeWidth: 1 }\n },\n {\n id: 'data', addInfo: { tooltip: 'Data' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Data' }, ports: port, style: { strokeWidth: 1 }\n },\n ]\n },\n {\n id: 'swimlaneShapes', expanded: true,\n title: 'Swimlane Shapes',\n symbols: [\n {\n id: 'stackCanvas1', addInfo: { tooltip: 'Horizontal swimlane' },\n shape: {\n type: 'SwimLane', lanes: [\n {\n id: 'lane1',\n style: { strokeColor: 'black' }, height: 60, width: 150,\n header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },\n }\n ],\n orientation: 'Horizontal', isLane: true\n },\n height: 60,\n width: 140,\n offsetX: 70,\n offsetY: 30,\n }, {\n id: 'stackCanvas2', addInfo: { tooltip: 'Vertical swimlane' },\n shape: {\n type: 'SwimLane',\n lanes: [\n {\n id: 'lane1',\n style: { strokeColor: 'black' }, height: 150, width: 60,\n header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },\n }\n ],\n orientation: 'Vertical', isLane: true\n },\n height: 140,\n width: 60,\n offsetX: 70,\n offsetY: 30,\n }, {\n id: 'verticalPhase', addInfo: { tooltip: 'Vertical phase' },\n shape: {\n type: 'SwimLane',\n phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],\n annotations: [{ text: '' }],\n orientation: 'Vertical', isPhase: true\n },\n height: 60,\n width: 140\n }, {\n id: 'horizontalPhase', addInfo: { tooltip: 'Horizontal phase' },\n shape: {\n type: 'SwimLane',\n phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],\n annotations: [{ text: '' }],\n orientation: 'Horizontal', isPhase: true\n },\n height: 60,\n width: 140\n }\n ]\n },\n {\n id: 'connectors', expanded: true, symbols: [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }\n },\n {\n id: 'Link22', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' }\n }\n ], title: 'Connectors'\n }\n ];\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple',\n palettes: palettes,\n width: '100%', height: '100%',\n symbolMargin: { left: 8, right: 8, top: 8, bottom: 8 },\n symbolHeight: 48, symbolWidth: 48,\n getSymbolInfo: function (symbol) {\n return { tooltip: symbol.addInfo ? symbol.addInfo.tooltip : symbol.id };\n }\n });\n\n palette.appendTo('#symbolpalette');\n addEvents();\n\n\n"} \ No newline at end of file diff --git a/src/diagram/swimlane.html b/src/diagram/swimlane.html new file mode 100644 index 00000000..66f08f3d --- /dev/null +++ b/src/diagram/swimlane.html @@ -0,0 +1,151 @@ +
        + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +

        + This sample visualize the sales processing flow chart with the help of built-in swimlane shapes. +

        +
        +
        +

        + This sample shows how an order process works with each entity involved in the process assigned a lane that contains all the activities for which they are responsible. The type property of the shape allows us to choose the swimlane shape type. Using the children property of the lane, we can add the nodes inside the lanes. We can also create the swimlane interactively using the swimlane shapes from the symbol palette. +

        +
        +
        \ No newline at end of file diff --git a/src/diagram/swimlane.js b/src/diagram/swimlane.js new file mode 100644 index 00000000..b6db5ba0 --- /dev/null +++ b/src/diagram/swimlane.js @@ -0,0 +1,466 @@ +/** + * Default Swimlane sample + */ +ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo); + +//Create and add ports for node. +var port = [ + { id: 'Port1', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw }, + { id: 'Port2', offset: { x: 0.5, y: 0 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw }, + { id: 'Port3', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw }, + { id: 'Port4', offset: { x: 0.5, y: 1 }, visibility: ej.diagrams.PortVisibility.Connect | ej.diagrams.PortVisibility.Hover, constraints: ej.diagrams.PortConstraints.Draw } +]; + +function addEvents() { + var isMobileDevice = window.matchMedia('(max-width:550px)').matches; + if (isMobileDevice) { + var pIcons = document.getElementById('palette-icon'); + if (pIcons) { + pIcons.addEventListener('click', openPalette, false); + } + } +} + +function openPalette() { + var pSpaces = document.getElementById('palette-space'); + isMobileDevice = window.matchMedia('(max-width:550px)').matches; + if (isMobileDevice) { + if (!pSpaces.classList.contains('sb-mobile-palette-open')) { + pSpaces.classList.add('sb-mobile-palette-open'); + } + else { + pSpaces.classList.remove('sb-mobile-palette-open'); + } + } +} + +this.default = function () { + var bounds = document.getElementById('diagram-space').getBoundingClientRect(); + var centerX = bounds.width / 2; + var middle = centerX - 50; + var darkColor = '#C7D4DF'; + var lightColor = '#f5f5f5'; + var pathData = 'M 120 24.9999 C 120 38.8072 109.642 50 96.8653 50 L 23.135' + + ' 50 C 10.3578 50 0 38.8072 0 24.9999 L 0 24.9999 C' + + '0 11.1928 10.3578 0 23.135 0 L 96.8653 0 C 109.642 0 120 11.1928 120 24.9999 Z'; + //Initializes the nodes for the diagram. + var nodes = [ + { + id: 'swimlane', + shape: { + type: 'SwimLane', + header: { + annotation: { content: 'SALES PROCESS FLOW CHART', style: { fill: '#111111' } }, + height: 50, style: { fontSize: 11 }, + orientation: 'Horizontal', + }, + lanes: [ + { + id: 'stackCanvas1', + header: { + annotation: { content: 'Consumer' }, width: 50, + style: { fontSize: 11 } + }, + height: 100, + children: [ + { + id: 'node1', + annotations: [ + { + content: 'Consumer learns \n of product', + style: { fontSize: 11 } + } + ], + margin: { left: 60, top: 30 }, + height: 40, width: 100, ports: port + }, + { + id: 'node2', + shape: { type: 'Flow', shape: 'Decision' }, + annotations: [ + { + content: 'Does \n Consumer want \nthe product', + style: { fontSize: 11 } + } + ], + margin: { left: 200, top: 20 }, + height: 60, width: 120, ports: port + }, + { + id: 'node3', + annotations: [ + { + content: 'No sales lead', + style: { fontSize: 11 } + } + ], + margin: { left: 380, top: 30 }, shape: { type: 'Path', data: pathData }, + height: 40, width: 100, ports: port + }, + { + id: 'node4', + annotations: [ + { + content: 'Sell to consumer', + style: { fontSize: 11 } + } + ], + margin: { left: 510, top: 30 }, + height: 40, width: 100, ports: port + } + ], + }, + { + id: 'stackCanvas2', + header: { + annotation: { content: 'Marketing' }, width: 50, + style: { fontSize: 11 } + }, + height: 100, + children: [ + { + id: 'node5', + annotations: [{ content: 'Create marketing campaigns' }], + margin: { left: 60, top: 20 }, + height: 40, width: 100, ports: port + }, + { + id: 'node6', + annotations: [{ content: 'Marketing finds sales leads' }], + margin: { left: 210, top: 20 }, + height: 40, width: 100, ports: port + } + ], + }, + { + id: 'stackCanvas3', + header: { + annotation: { content: 'Sales' }, width: 50, + style: { fontSize: 11 } + }, + height: 100, + children: [ + { + id: 'node7', + annotations: [{ content: 'Sales receives lead' }], + margin: { left: 210, top: 30 }, + height: 40, width: 100, ports: port + } + ], + }, + { + id: 'stackCanvas4', + header: { + annotation: { content: 'Success' }, width: 50, + style: { fontSize: 11 } + }, + height: 100, + children: [ + { + id: 'node8', + annotations: [{ content: 'Success helps \n retain consumer \n as a customer' }], + margin: { left: 510, top: 20 }, + height: 50, width: 100, ports: port + } + ], + }, + ], + phases: [ + { + id: 'phase1', offset: 170, + header: { content: { content: 'Phase' } } + } + ], + phaseSize: 20, + }, + offsetX: bounds.width / 2, offsetY: bounds.height / 2, + height: 100, + width: 650 + }, + ]; + function getNodeDefaults(node) { + node.style.strokeColor = "#717171"; + return node; + } + //Initializes the Connectors for the diagram + var connectors = [ + { + id: 'connector1', sourceID: 'node1', + targetID: 'node2' + }, + { + id: 'connector2', sourceID: 'node2', + targetID: 'node3', annotations: [{ content: 'No', style: { fill: 'white' } }] + }, + { + id: 'connector3', sourceID: 'node4', + targetID: 'node8' + }, + { + id: 'connector4', sourceID: 'node2', + targetID: 'node6', annotations: [{ content: 'Yes', style: { fill: 'white' } }] + }, + { + id: 'connector5', sourceID: 'node5', + targetID: 'node1' + }, + { + id: 'connector6', sourceID: 'node6', + targetID: 'node7' + }, + { + id: 'connector7', sourcePortID: 'Port1', targetPortID: 'Port3', sourceID: 'node4', + targetID: 'node7', + }, + ]; + var intervals = [1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75]; + var hvgridlines = { lineColor: '#e0e0e0', lineIntervals: intervals }; + //Initializes diagram control + var diagram = new ej.diagrams.Diagram({ + width: '100%', height: '100%', nodes: nodes, connectors: connectors, + getNodeDefaults: getNodeDefaults, + snapSettings: { + horizontalGridlines: hvgridlines, + verticalGridlines: hvgridlines, + constraints: ej.diagrams.SnapConstraints.All & ~ej.diagrams.SnapConstraints.ShowLines + }, + //Sets the default values of a Connector. + getConnectorDefaults: function (connector) { + if (connector.id.indexOf("Link21") !== -1) { + connector.type = 'Straight'; + } + else if (connector.id.indexOf("Link22") !== -1) { + connector.type = 'Straight'; + } + else { + connector.type = 'Orthogonal'; + } + connector.style.strokeColor = "#717171"; + connector.sourceDecorator.style.strokeColor = "#717171"; + connector.targetDecorator.style.strokeColor = "#717171"; + connector.sourceDecorator.style.fill = "#717171"; + connector.targetDecorator.style.fill = "#717171"; + return connector; + }, + contextMenuSettings: { + show: true, items: [ + { + text: 'Copy', id: 'Copy', target: '.e-diagramcontent', iconCss: 'e-menu-icon e-icons e-copy' + }, + { + text: 'Cut', id: 'Cut', target: '.e-diagramcontent', iconCss: 'e-menu-icon e-icons e-cut' + }, + { + text: 'Paste', id: 'Paste', target: '.e-diagramcontent', iconCss: 'e-menu-icon e-icons e-paste' + }, + { + text: 'InsertLaneBefore', id: 'InsertLaneBefore', target: '.e-diagramcontent', + }, + { + text: 'InsertLaneAfter', id: 'InsertLaneAfter', target: '.e-diagramcontent', + }], + showCustomMenuOnly: true, + }, + contextMenuOpen: function (args) { + for (var i=0; i< args.items.length; i++ ) { + var item = args.items[i]; + if ((diagram.selectedItems.connectors.length + diagram.selectedItems.nodes.length) > 0) { + if (item.id === 'InsertLaneBefore' || item.id === 'InsertLaneAfter') { + if (diagram.selectedItems.connectors.length || (diagram.selectedItems.nodes.length && !(diagram.selectedItems.nodes[0]).isLane)) { + args.hiddenItems.push(item.text); + } + } + } else { + args.hiddenItems.push(item.text); + } + } + }, + contextMenuClick: function (args) { + if (args.item.id === 'InsertLaneBefore' || args.item.id === 'InsertLaneAfter') { + if (diagram.selectedItems.nodes.length > 0 && (diagram.selectedItems.nodes[0]).isLane) { + var index; + var node = diagram.selectedItems.nodes[0]; + var swimlane = diagram.getObject((diagram.selectedItems.nodes[0]).parentId); + var shap = swimlane.shape; + var existingLane = cloneObject(shape.lanes[0]); + + var newLane = { + id: randomId(), + header: { + width: existingLane.header.width, height: existingLane.header.height, + style: existingLane.header.style + }, + style: existingLane.style, + height: existingLane.height, width: existingLane.width, + }; + + if (shape.orientation === 'Horizontal') { + var exclude = 0; + exclude += (shape.header) ? 1 : 0; + exclude += (shape.phases.length) ? 1 : 0; + index = node.rowIndex - exclude; + newLane.header.width = existingLane.header.width; + newLane.header.height = existingLane.height; + } else { + index = node.columnIndex - (shape.phases.length) ? 1 : 0; + newLane.header.width = existingLane.width; + newLane.header.height = existingLane.header.height; + } + if (args.item.id === 'InsertLaneBefore') { + diagram.addLanes(swimlane, [newLane], index); + } else { + diagram.addLanes(swimlane, [newLane], index + 1); + } + diagram.clearSelection(); + } + } else if (args.item.id === 'Cut') { + diagram.cut(); + } else if (args.item.id === 'Copy') { + diagram.copy(); + diagram.paste(); + } else if (args.item.id === 'Paste') { + diagram.paste(); + } + }, + //Sets the Node style for DragEnter element. + dragEnter: function (args) { + var obj = args.element; + if (obj instanceof ej.diagrams.Node) { + var shape = obj.shape; + if (shape.isLane) { + if (shape.orientation === 'Horizontal') { + shape.lanes[0].height = 100; + shape.lanes[0].width = 400; + } else if (shape.orientation === 'Vertical') { + shape.lanes[0].height = 400; + shape.lanes[0].width = 100; + } + } + } + } + }); + diagram.appendTo('#diagram'); + if (ej.base.Browser.isDevice) { + diagram.fitToPage(); + } + // Initializes the palettes to be displayed in the symbol palette. + var palettes = [ + { + id: 'flow', expanded: true, title: 'Flow Shapes', symbols: [ + { + id: 'Terminator', width: 50, height: 60, addInfo: { tooltip: 'Terminator' }, shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 1 }, ports: port + }, + { + id: 'Process', addInfo: { tooltip: 'Process' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 1 }, ports: port + }, + { + id: 'Decision', addInfo: { tooltip: 'Decision' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 1 }, ports: port + }, + { + id: 'Document', addInfo: { tooltip: 'Document' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Document' }, style: { strokeWidth: 1 }, ports: port + }, + { + id: 'PreDefinedProcess', addInfo: { tooltip: 'Predefined process' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'PreDefinedProcess' }, ports: port, style: { strokeWidth: 1 } + }, + { + id: 'data', addInfo: { tooltip: 'Data' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Data' }, ports: port, style: { strokeWidth: 1 } + }, + ] + }, + { + id: 'swimlaneShapes', expanded: true, + title: 'Swimlane Shapes', + symbols: [ + { + id: 'stackCanvas1', addInfo: { tooltip: 'Horizontal swimlane' }, + shape: { + type: 'SwimLane', lanes: [ + { + id: 'lane1', + style: { strokeColor: 'black' }, height: 60, width: 150, + header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } }, + } + ], + orientation: 'Horizontal', isLane: true + }, + height: 60, + width: 140, + offsetX: 70, + offsetY: 30, + }, { + id: 'stackCanvas2', addInfo: { tooltip: 'Vertical swimlane' }, + shape: { + type: 'SwimLane', + lanes: [ + { + id: 'lane1', + style: { strokeColor: 'black' }, height: 150, width: 60, + header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } }, + } + ], + orientation: 'Vertical', isLane: true + }, + height: 140, + width: 60, + offsetX: 70, + offsetY: 30, + }, { + id: 'verticalPhase', addInfo: { tooltip: 'Vertical phase' }, + shape: { + type: 'SwimLane', + phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }], + annotations: [{ text: '' }], + orientation: 'Vertical', isPhase: true + }, + height: 60, + width: 140 + }, { + id: 'horizontalPhase', addInfo: { tooltip: 'Horizontal phase' }, + shape: { + type: 'SwimLane', + phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }], + annotations: [{ text: '' }], + orientation: 'Horizontal', isPhase: true + }, + height: 60, + width: 140 + } + ] + }, + { + id: 'connectors', expanded: true, symbols: [ + { + id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 } + }, + { + id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' } + }, + { + id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 } + }, + { + id: 'Link22', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 }, + targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' } + } + ], title: 'Connectors' + } + ]; + //Initializes the symbol palette + var palette = new ej.diagrams.SymbolPalette({ + expandMode: 'Multiple', + palettes: palettes, + width: '100%', height: '100%', + symbolMargin: { left: 8, right: 8, top: 8, bottom: 8 }, + symbolHeight: 48, symbolWidth: 48, + getSymbolInfo: function (symbol) { + return { tooltip: symbol.addInfo ? symbol.addInfo.tooltip : symbol.id }; + } + }); + + palette.appendTo('#symbolpalette'); + addEvents(); +}; + diff --git a/src/diagram/symbol-palette-stack.json b/src/diagram/symbol-palette-stack.json index 3f2a2b2b..8ce9a9e3 100644 --- a/src/diagram/symbol-palette-stack.json +++ b/src/diagram/symbol-palette-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Expandable:
        \n         		\n \n
        \n
        Symbol Size:
        \n         		\n \n
        \n
        Animation:
        \n         		\n \n
        \n
        Item Text:
        \n         		\n \n
        \n
        Header Icon:
        \n         		\n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Default symbol palette sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n//enable or disable the header icon for Symbol palette.\nfunction onHeaderIconChange(args) {\n for (var i = 0; i < palette.palettes.length; i++) {\n if (args.checked) {\n if (i === 0) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-basic';\n } else if (i === 1) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-flow';\n } else if (i === 2) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-connector';\n }\n } else {\n palette.palettes[i].iconCss = '';\n }\n }\n}\n\nfunction onAnimationChange(args) {\n palette.enableAnimation = args.checked;\n}\n\nfunction onItemTextChange(args) {\n if (args.checked) {\n palette.getSymbolInfo = function (symbol) {\n if (symbol.text !== undefined) {\n return { description: { text: symbol.text, overflow: 'Wrap' } };\n }\n return { description: { text: symbol.id } };\n };\n }\n else {\n palette.getSymbolInfo = function (symbol) {\n return { description: { text: '' } };\n };\n }\n palette.dataBind();\n}\n\n //Initialize the flowshapes for the symbol palatte\n var flowshapes = [\n { id: 'terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'predefinedprocess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'papertap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'directdata', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'sequentialdata', shape: { type: 'Flow', shape: 'SequentialData' } },\n ];\n var basicShapes = [\n { id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' } },\n { id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' } },\n { id: 'Parallelogram', shape: { type: 'Basic', shape: 'Parallelogram' } },\n { id: 'Triangle', shape: { type: 'Basic', shape: 'Triangle' } },\n { id: 'Hexagon', shape: { type: 'Basic', shape: 'Hexagon' } },\n { id: 'Pentagon', shape: { type: 'Basic', shape: 'Pentagon' } },\n { id: 'Cylinder', shape: { type: 'Basic', shape: 'Cylinder' } },\n { id: 'Star', shape: { type: 'Basic', shape: 'Star' } }\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes the symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple', allowDrag: false,\n palettes: [\n { id: 'flow', expanded: true, symbols: flowshapes, iconCss: 'e-ddb-icons e-basic', title: 'Flow Shapes' },\n { id: 'basic', expanded: true, symbols: basicShapes, iconCss: 'e-ddb-icons e-flow', title: 'Basic Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' }\n ], enableAnimation: true,\n width: '100%', height: '700px', symbolHeight: 80, symbolWidth: 80,\n //set Node default value\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'terminator' || symbol.id === 'process') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'document' || symbol.id === 'predefinedprocess' ||\n symbol.id === 'papertap' || symbol.id === 'directdata') {\n symbol.width = 50;\n symbol.height = 40;\n }\n symbol.style = { strokeWidth: 2 };\n },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 }\n });\n palette.appendTo('#symbolpalette');\n //enable or disable the animation of the symbol palette.\n var animation = new ej.buttons.CheckBox({\n checked: true,\n change: onAnimationChange\n });\n palette.dataBind();\n animation.appendTo('#animation');\n //DropDownList is used to change the expandMode of the Symbolpallete.\n var expand = new ej.dropdowns.DropDownList({\n index: 1,\n change: function () {\n palette.expandMode = expand.value;\n palette.dataBind();\n }\n });\n expand.appendTo('#expand');\n //NumericTextBox is used to apply the size of the Symbol.\n var size = new ej.inputs.NumericTextBox({\n value: 80, min: 40,\n max: 100, width: 120,\n step: 5,\n format: '##.##',\n change: function () {\n palette.symbolHeight = size.value;\n palette.symbolWidth = size.value;\n }\n });\n palette.dataBind();\n size.appendTo('#size');\n //Add or Remove the Text for Symbol palette item.\n var itemtext = new ej.buttons.CheckBox({\n change: onItemTextChange\n });\n itemtext.appendTo('#itemtext');\n var headericon = new ej.buttons.CheckBox({\n checked: true,\n change: onHeaderIconChange\n });\n palette.dataBind();\n headericon.appendTo('#headericon');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Expandable:
        \n         		\n \n
        \n
        Symbol Size:
        \n         		\n \n
        \n
        Animation:
        \n         		\n \n
        \n
        Item Text:
        \n         		\n \n
        \n
        Header Icon:
        \n         		\n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Default symbol palette sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n//enable or disable the header icon for Symbol palette.\nvar palette;\nvar animation;\nvar expand;\nvar size;\nvar headericon;\nvar itemtext;\nfunction onHeaderIconChange(args) {\n for (var i = 0; i < palette.palettes.length; i++) {\n if (args.checked) {\n if (i === 0) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-basic';\n } else if (i === 1) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-flow';\n } else if (i === 2) {\n palette.palettes[i].iconCss = 'e-ddb-icons e-connector';\n }\n } else {\n palette.palettes[i].iconCss = '';\n }\n }\n}\n\nfunction onAnimationChange(args) {\n palette.enableAnimation = args.checked;\n}\n\nfunction onItemTextChange(args) {\n if (args.checked) {\n palette.getSymbolInfo = function (symbol) {\n if (symbol.text !== undefined) {\n return { description: { text: symbol.text, overflow: 'Wrap' } };\n }\n return { description: { text: symbol.id } };\n };\n }\n else {\n palette.getSymbolInfo = function (symbol) {\n return { description: { text: '' } };\n };\n }\n palette.dataBind();\n}\n\n //Initialize the flowshapes for the symbol palatte\n var flowshapes = [\n { id: 'terminator', shape: { type: 'Flow', shape: 'Terminator' } },\n { id: 'process', shape: { type: 'Flow', shape: 'Process' } },\n { id: 'sort', shape: { type: 'Flow', shape: 'Sort' } },\n { id: 'document', shape: { type: 'Flow', shape: 'Document' } },\n { id: 'predefinedprocess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },\n { id: 'papertap', shape: { type: 'Flow', shape: 'PaperTap' } },\n { id: 'directdata', shape: { type: 'Flow', shape: 'DirectData' } },\n { id: 'sequentialdata', shape: { type: 'Flow', shape: 'SequentialData' } },\n ];\n var basicShapes = [\n { id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' } },\n { id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' } },\n { id: 'Parallelogram', shape: { type: 'Basic', shape: 'Parallelogram' } },\n { id: 'Triangle', shape: { type: 'Basic', shape: 'Triangle' } },\n { id: 'Hexagon', shape: { type: 'Basic', shape: 'Hexagon' } },\n { id: 'Pentagon', shape: { type: 'Basic', shape: 'Pentagon' } },\n { id: 'Cylinder', shape: { type: 'Basic', shape: 'Cylinder' } },\n { id: 'Star', shape: { type: 'Basic', shape: 'Star' } }\n ];\n //Initializes connector symbols for the symbol palette\n var connectorSymbols = [\n {\n id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }\n },\n {\n id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n {\n id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }\n },\n ];\n //Initializes the symbol palette\n palette = new ej.diagrams.SymbolPalette({\n expandMode: 'Multiple', allowDrag: false,\n palettes: [\n { id: 'flow', expanded: true, symbols: flowshapes, iconCss: 'e-ddb-icons e-basic', title: 'Flow Shapes' },\n { id: 'basic', expanded: true, symbols: basicShapes, iconCss: 'e-ddb-icons e-flow', title: 'Basic Shapes' },\n { id: 'connectors', expanded: true, symbols: connectorSymbols, iconCss: 'e-ddb-icons e-connector', title: 'Connectors' }\n ], enableAnimation: true,\n width: '100%', height: '700px', symbolHeight: 80, symbolWidth: 80,\n //set Node default value\n getNodeDefaults: function (symbol) {\n if (symbol.id === 'terminator' || symbol.id === 'process') {\n symbol.width = 80;\n symbol.height = 40;\n }\n else if (symbol.id === 'document' || symbol.id === 'predefinedprocess' ||\n symbol.id === 'papertap' || symbol.id === 'directdata') {\n symbol.width = 50;\n symbol.height = 40;\n }\n symbol.style = { strokeWidth: 2 };\n },\n getSymbolInfo: function (symbol) {\n return { fit: true };\n },\n symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 }\n });\n palette.appendTo('#symbolpalette');\n //enable or disable the animation of the symbol palette.\n animation = new ej.buttons.CheckBox({\n checked: true,\n change: onAnimationChange\n });\n palette.dataBind();\n animation.appendTo('#animation');\n //DropDownList is used to change the expandMode of the Symbolpallete.\n expand = new ej.dropdowns.DropDownList({\n index: 1,\n change: function () {\n palette.expandMode = expand.value;\n palette.dataBind();\n }\n });\n expand.appendTo('#expand');\n //NumericTextBox is used to apply the size of the Symbol.\n size = new ej.inputs.NumericTextBox({\n value: 80, min: 40,\n max: 100, width: 120,\n step: 5,\n format: '##.##',\n change: function () {\n palette.symbolHeight = size.value;\n palette.symbolWidth = size.value;\n }\n });\n palette.dataBind();\n size.appendTo('#size');\n //Add or Remove the Text for Symbol palette item.\n itemtext = new ej.buttons.CheckBox({\n change: onItemTextChange\n });\n itemtext.appendTo('#itemtext');\n headericon = new ej.buttons.CheckBox({\n checked: true,\n change: onHeaderIconChange\n });\n palette.dataBind();\n headericon.appendTo('#headericon');\n\n"} \ No newline at end of file diff --git a/src/diagram/symbol-palette.js b/src/diagram/symbol-palette.js index 184be4ef..3670afec 100644 --- a/src/diagram/symbol-palette.js +++ b/src/diagram/symbol-palette.js @@ -3,6 +3,12 @@ */ ej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo); //enable or disable the header icon for Symbol palette. +var palette; +var animation; +var expand; +var size; +var headericon; +var itemtext; function onHeaderIconChange(args) { for (var i = 0; i < palette.palettes.length; i++) { if (args.checked) { @@ -85,7 +91,7 @@ this.default = function () { }, ]; //Initializes the symbol palette - var palette = new ej.diagrams.SymbolPalette({ + palette = new ej.diagrams.SymbolPalette({ expandMode: 'Multiple', allowDrag: false, palettes: [ { id: 'flow', expanded: true, symbols: flowshapes, iconCss: 'e-ddb-icons e-basic', title: 'Flow Shapes' }, @@ -113,14 +119,14 @@ this.default = function () { }); palette.appendTo('#symbolpalette'); //enable or disable the animation of the symbol palette. - var animation = new ej.buttons.CheckBox({ + animation = new ej.buttons.CheckBox({ checked: true, change: onAnimationChange }); palette.dataBind(); animation.appendTo('#animation'); //DropDownList is used to change the expandMode of the Symbolpallete. - var expand = new ej.dropdowns.DropDownList({ + expand = new ej.dropdowns.DropDownList({ index: 1, change: function () { palette.expandMode = expand.value; @@ -129,7 +135,7 @@ this.default = function () { }); expand.appendTo('#expand'); //NumericTextBox is used to apply the size of the Symbol. - var size = new ej.inputs.NumericTextBox({ + size = new ej.inputs.NumericTextBox({ value: 80, min: 40, max: 100, width: 120, step: 5, @@ -142,11 +148,11 @@ this.default = function () { palette.dataBind(); size.appendTo('#size'); //Add or Remove the Text for Symbol palette item. - var itemtext = new ej.buttons.CheckBox({ + itemtext = new ej.buttons.CheckBox({ change: onItemTextChange }); itemtext.appendTo('#itemtext'); - var headericon = new ej.buttons.CheckBox({ + headericon = new ej.buttons.CheckBox({ checked: true, change: onHeaderIconChange }); diff --git a/src/diagram/symmetric-layout-stack.json b/src/diagram/symmetric-layout-stack.json index 0da746f4..37da4802 100644 --- a/src/diagram/symmetric-layout-stack.json +++ b/src/diagram/symmetric-layout-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        Spring Length \n \n
        Spring Factor\n \n
        Maximum Iteration\n \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Sample for Symmentric layout.\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.SymmetricLayout);\n\n\n\n\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '550px',\n layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, margin: { left: 20, top: 20 } },\n //Set the parent and child relationship of DataSource.\n dataSourceSettings: { id: 'Id', parentId: 'Source', dataManager: new ej.data.DataManager(window.symmetricData) },\n //Set the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Set the default values of Node\n getNodeDefaults: function (obj) {\n obj.height = 20;\n obj.width = 20;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Straight';\n return connector;\n },\n setNodeTemplate: function (obj) {\n var shape = { type: 'Basic', shape: 'Ellipse' };\n if (!(obj.data.Type) || obj.data.Type === 'Server') {\n obj.width = 30;\n obj.height = 30;\n obj.shape = {\n type: 'Native', content: '' +\n '' +\n ' ' +\n ' ' +\n ''\n };\n }\n else {\n obj.shape = shape;\n obj.style = { fill: 'orange' };\n }\n },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.pan(0, 0);\n var springLength = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 80,\n step: 1,\n });\n springLength.appendTo('#springlength');\n var springfactor = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 0.8,\n step: 0.1,\n });\n springfactor.appendTo('#springfactor');\n var maxiteration = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 500,\n step: 1,\n });\n maxiteration.appendTo('#maxiteration');\n var layout = new ej.buttons.Button({ cssClass: 'e-small' });\n layout.appendTo('#refresh');\n //used to apply the alignment of the layout. \n document.getElementById('refresh').onclick = function () {\n diagram.layout.springLength = springLength.value;\n diagram.layout.springFactor = springfactor.value;\n diagram.layout.maxIteration = maxiteration.value;\n diagram.doLayout();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        Spring Length \n \n
        Spring Factor\n \n
        Maximum Iteration\n \n
        \n \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Sample for Symmentric layout.\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.SymmetricLayout);\n\n\n\n\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '550px',\n layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, margin: { left: 20, top: 20 } },\n //Set the parent and child relationship of DataSource.\n dataSourceSettings: { id: 'Id', parentId: 'Source', dataManager: new ej.data.DataManager(window.symmetricData) },\n //Set the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Set the default values of Node\n getNodeDefaults: function (obj) {\n obj.height = 20;\n obj.width = 20;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Straight';\n return connector;\n },\n setNodeTemplate: function (obj) {\n var shape = { type: 'Basic', shape: 'Ellipse' };\n if (!(obj.data.Type) || obj.data.Type === 'Server') {\n obj.width = 30;\n obj.height = 30;\n obj.shape = {\n type: 'Native', content: '' +\n '' +\n ' ' +\n ' ' +\n ''\n };\n }\n else {\n obj.shape = shape;\n obj.style = { fill: 'orange' };\n }\n },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.pan(0, 0);\n var springLength = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 80,\n step: 1,\n });\n springLength.appendTo('#springlength');\n var springfactor = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 0.8,\n step: 0.1,\n });\n springfactor.appendTo('#springfactor');\n var maxiteration = new ej.inputs.NumericTextBox({\n format: '###.##',\n value: 500,\n step: 1,\n });\n maxiteration.appendTo('#maxiteration');\n var layout = new ej.buttons.Button({ cssClass: 'e-small' });\n layout.appendTo('#refresh');\n //used to apply the alignment of the layout. \n document.getElementById('refresh').onclick = function () {\n diagram.layout.springLength = springLength.value;\n diagram.layout.springFactor = springfactor.value;\n diagram.layout.maxIteration = maxiteration.value;\n diagram.doLayout();\n };\n"} \ No newline at end of file diff --git a/src/diagram/tooltip-Sample-stack.json b/src/diagram/tooltip-Sample-stack.json new file mode 100644 index 00000000..59d32519 --- /dev/null +++ b/src/diagram/tooltip-Sample-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n Relative mode\n
        \n         		\n
        \n \n
        \n
        \n
        \n Position\n
        \n         		\n
        \n \n
        \n
        \n
        \n Animation\n
        \n         		\n
        \n \n
        \n
        \n
        \n Effect\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\nej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams);\n\n\nfunction getcontent() {\n var tooltipContent = document.createElement('div');\n tooltipContent.innerHTML = '
        Tooltip !!!
        ';\n return tooltipContent;\n}\n\n\n\n var nodes = [\n {\n id: 'node1', width: 60, height: 60, offsetX: 35, offsetY: 120,\n annotations: [{ content: 'Customer query', offset: { x: 0.5, y: 1 }, margin: { top: 15 } }],\n tooltip: { content: 'Queries from the customer' },\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'Message' } }\n },\n {\n id: 'node2', width: 75, height: 70, offsetX: 140, offsetY: 120,\n annotations: [{ content: 'Enough details?', offset: { x: 0.50, y: 0.50 } }],\n tooltip: { content: 'Whether the provided information is enough?' }, shape: { type: 'Bpmn', shape: 'Gateway' }\n },\n {\n id: 'node3', width: 60, height: 50, offsetX: 270, offsetY: 120,\n annotations: [{ content: 'Analyse', offset: { x: 0.50, y: 0.50 } }],\n tooltip: { content: 'Analysing the query' },\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } },\n },\n {\n id: 'node4', width: 75, height: 70, offsetX: 370, offsetY: 120, shape: {\n type: 'Bpmn', shape: 'Gateway',\n gateway: { type: 'Exclusive' }\n },\n tooltip: { content: 'proceed to validate?' },\n },\n {\n id: 'node5', width: 75, height: 70, offsetX: 570, offsetY: 120,\n annotations: [{ content: 'Validate', offset: { x: 0.50, y: 0.50 } }],\n tooltip: { content: 'Whether the reported/requested bug/feature is valid?' }, shape: { type: 'Bpmn', shape: 'Gateway' }\n },\n {\n id: 'node6', width: 60, height: 60, offsetX: 720, offsetY: 120,\n tooltip: { content: 'Send the invalid message to customer' },\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } }\n },\n {\n id: 'node7', width: 60, height: 50, offsetX: 140, offsetY: 280,\n annotations: [{ content: 'Request', offset: { x: 0.50, y: 0.50 }, margin: { top: 5 } }],\n tooltip: { content: 'Requesting for more information' },\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Send' } } }\n },\n {\n id: 'node8', width: 60, height: 60, offsetX: 370, offsetY: 280,\n tooltip: { content: 'Share the User Guide/Knowledge Base link' },\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'Message' } }\n },\n {\n id: 'node9', width: 70, height: 50, offsetX: 570, offsetY: 280,\n annotations: [{ content: 'Log bug/feature', offset: { x: 0.50, y: 0.50 } }], tooltip: { content: 'Log the bug/feature' },\n shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } }\n },\n {\n id: 'node10', width: 75, height: 55, offsetX: 390, offsetY: 430,\n annotations: [{ content: 'Implement', offset: { x: 0.50, y: 0.50 } }], tooltip: { content: 'Fix the bug/Add the feature' },\n shape: {\n type: 'Bpmn', shape: 'Activity', activity: {\n activity: 'SubProcess', subProcess: {\n collapsed: false,\n events: [{ event: 'Intermediate', trigger: 'Timer', offset: { x: 0.5, y: 1 }, width: 25, height: 25 }]\n }\n }\n }\n },\n {\n id: 'node12', width: 60, height: 60, offsetX: 265, offsetY: 430, tooltip: { content: 'Provide the solution' },\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } }\n },\n {\n id: 'node13', width: 60, height: 60, offsetX: 720, offsetY: 430, tooltip: { content: 'Share the task details' },\n shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } }\n },\n {\n id: 'node14', width: 60, height: 60, offsetX: 570, offsetY: 430, shape: {\n type: 'Bpmn', shape: 'Gateway',\n gateway: { type: 'Parallel' }\n },\n tooltip: { content: 'can log?' },\n },\n ];\n var connectors = [\n { id: 'connector1', sourceID: 'node1', targetID: 'node2' },\n { id: 'connector2', sourceID: 'node2', targetID: 'node3' },\n { id: 'connector3', sourceID: 'node3', targetID: 'node4' },\n {\n id: 'connector4', sourceID: 'node4', targetID: 'node5',\n annotations: [{ content: 'Feature/Bug', offset: 0.5, style: { fill: 'white', textWrapping: 'Wrap' } }]\n },\n {\n id: 'connector5', sourceID: 'node5', targetID: 'node6',\n annotations: [{ content: 'Invalid', offset: 0.5, style: { fill: 'white' } }]\n },\n { id: 'connector6', sourceID: 'node2', targetID: 'node7' },\n {\n id: 'connector7', sourceID: 'node4', targetID: 'node8',\n annotations: [{ content: 'How to?', offset: 0.5, style: { fill: 'white' } }]\n },\n { id: 'connector8', sourceID: 'node5', targetID: 'node9' },\n { id: 'connector9', sourceID: 'node14', targetID: 'node13' },\n {\n id: 'connector10', sourceID: 'node7', targetID: 'node3', type: 'Orthogonal',\n segments: [{ type: 'Orthogonal', length: 100, direction: 'Right' }, { type: 'Orthogonal', length: 100, direction: 'Top' }]\n },\n { id: 'connector11', sourceID: 'node14', targetID: 'node10' },\n { id: 'connector12', sourceID: 'node10', targetID: 'node12' },\n { id: 'connector13', sourceID: 'node9', targetID: 'node14' },\n ];\n function getcontent() {\n var tooltipContent = document.createElement('div');\n tooltipContent.innerHTML =\n '
        Tooltip !!!
        ';\n return tooltipContent;\n }\n function getConnectorDefaults(connector, diagram) {\n connector.type = 'Orthogonal';\n return connector;\n }\n function getNodeDefaults(obj) {\n obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip;\n return obj;\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', connectors: connectors, nodes: nodes,\n getConnectorDefaults: getConnectorDefaults,\n getNodeDefaults: getNodeDefaults,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n tooltip: {\n content: getcontent(), position: 'TopLeft', relativeMode: 'Object',\n animation: { open: { effect: 'FadeZoomIn', delay: 100 }, close: { effect: 'FadeZoomOut', delay: 100 } }\n }\n });\n diagram.appendTo('#diagram');\n var modevalue = [\n { type: 'Object', text: 'Object' },\n { type: 'Mouse', text: 'Mouse' },\n ];\n var positionValue = [\n { type: 'TopLeft', text: 'TopLeft' },\n { type: 'TopCenter', text: 'TopCenter' },\n { type: 'TopRight', text: 'TopRight' },\n { type: 'BottomLeft', text: 'BottomLeft' },\n { type: 'BottomCenter', text: 'BottomCenter' },\n { type: 'BottomRight', text: 'BottomRight' },\n { type: 'LeftTop', text: 'LeftTop' },\n { type: 'LeftCenter', text: 'LeftCenter' },\n { type: 'LeftBottom', text: 'LeftBottom' },\n { type: 'RightTop', text: 'RightTop' },\n { type: 'RightCenter', text: 'RightCenter' },\n { type: 'RightBottom', text: 'RightBottom' },\n ];\n var effectValue = [\n { type: 'FadeIn', text: 'FadeIn' },\n { type: 'FadeOut', text: 'FadeOut' },\n { type: 'FadeZoomIn', text: 'FadeZoomIn' },\n { type: 'FadeZoomOut', text: 'FadeZoomOut' },\n { type: 'FlipXDownIn', text: 'FlipXDownIn' },\n { type: 'FlipXDownOut', text: 'FlipXDownOut' },\n { type: 'FlipXUpIn', text: 'FlipXUpIn' },\n { type: 'FlipXUpOut', text: 'FlipXUpOut' },\n { type: 'FlipYLeftIn', text: 'FlipYLeftIn' },\n { type: 'FlipYLeftOut', text: 'FlipYLeftOut' },\n { type: 'FlipYRightIn', text: 'FlipYRightIn' },\n { type: 'FlipYRightOut', text: 'FlipYRightOut' },\n { type: 'ZoomIn', text: 'ZoomIn' },\n { type: 'ZoomOut', text: 'ZoomOut' },\n { type: 'None', text: 'None' },\n ];\n var mode = new ej.dropdowns.DropDownList({\n dataSource: modevalue,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type', index: 0,\n change: function () {\n if (mode.value === 'Mouse') {\n diagram.tooltip.relativeMode = 'Mouse';\n }\n else {\n diagram.tooltip.relativeMode = 'Object';\n }\n }\n });\n mode.appendTo('#mode');\n var position = new ej.dropdowns.DropDownList({\n dataSource: positionValue,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type', index: 0,\n change: function (args) {\n var nodes = diagram.nodes;\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].tooltip) {\n nodes[i].tooltip.position = args.value;\n diagram.dataBind();\n }\n }\n }\n });\n position.appendTo('#position');\n var effect = new ej.dropdowns.DropDownList({\n dataSource: effectValue,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a effect type', index: 0,\n change: function (args) {\n diagram.tooltip.animation.open.effect = args.value;\n diagram.tooltip.animation.close.effect = args.value;\n }\n });\n effect.appendTo('#effect');\n var textContent = new ej.inputs.TextBox({\n placeholder: 'Enter text content',\n floatLabelType: 'Auto',\n change: function (args) {\n diagram.tooltip.content = args.value.toString();\n diagram.dataBind();\n }\n });\n textContent.appendTo('#textContent');\n var htmlContent = new ej.inputs.TextBox({\n placeholder: 'Enter html content',\n floatLabelType: 'Auto',\n change: function (args) {\n var tooltipContent = document.createElement('div');\n var description = args.value.toString();\n tooltipContent.innerHTML =\n '
        ' + description + '
        ';\n diagram.tooltip.content = tooltipContent;\n diagram.dataBind();\n }\n });\n htmlContent.appendTo('#htmlContent');\n var animation = new ej.inputs.NumericTextBox({\n format: '###.##',\n change: function (args) {\n diagram.tooltip.animation.close.duration = args.value;\n diagram.tooltip.animation.open.duration = args.value;\n }\n });\n animation.appendTo('#duration');\n var temp = '
        ' +\n ' ';\n diagram.fitToPage({ mode: 'Width' });\n"} \ No newline at end of file diff --git a/src/diagram/tooltip-Sample.html b/src/diagram/tooltip-Sample.html new file mode 100644 index 00000000..18c890a2 --- /dev/null +++ b/src/diagram/tooltip-Sample.html @@ -0,0 +1,117 @@ +
        + +
        +
        +
        +
        +
        + + + + + + + + + + + + + + + + + +
        +
        + Relative mode +
        +         		+
        + +
        +
        +
        + Position +
        +         		+
        + +
        +
        +
        + Animation +
        +         		+
        + +
        +
        +
        + Effect +
        +         		+
        + +
        +
        +
        +
        +

        + This sample demonstrates how to add the extra information to the nodes and connectors and how to show the information through + the common graphical user interface element. +

        +
        +
        +

        + Using diagram’s tooltip we can define the tooltip for the diagram nodes as well as connector. We can control the animation, + position, effects of the tooltip using tooltip property of the diagram. Also, we can define the custom tooltip + as either text or HTML element using content property of the tooltip. We can control the different tooltip settings + to each connector and node. +

        +
        +
        \ No newline at end of file diff --git a/src/diagram/tooltip-Sample.js b/src/diagram/tooltip-Sample.js new file mode 100644 index 00000000..d9bf8ce6 --- /dev/null +++ b/src/diagram/tooltip-Sample.js @@ -0,0 +1,258 @@ + +ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams); + + +function getcontent() { + var tooltipContent = document.createElement('div'); + tooltipContent.innerHTML = '
        Tooltip !!!
        '; + return tooltipContent; +} + + +this.default = function () { + var nodes = [ + { + id: 'node1', width: 60, height: 60, offsetX: 35, offsetY: 120, + annotations: [{ content: 'Customer query', offset: { x: 0.5, y: 1 }, margin: { top: 15 } }], + tooltip: { content: 'Queries from the customer' }, + shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'Message' } } + }, + { + id: 'node2', width: 75, height: 70, offsetX: 140, offsetY: 120, + annotations: [{ content: 'Enough details?', offset: { x: 0.50, y: 0.50 } }], + tooltip: { content: 'Whether the provided information is enough?' }, shape: { type: 'Bpmn', shape: 'Gateway' } + }, + { + id: 'node3', width: 60, height: 50, offsetX: 270, offsetY: 120, + annotations: [{ content: 'Analyse', offset: { x: 0.50, y: 0.50 } }], + tooltip: { content: 'Analysing the query' }, + shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } }, + }, + { + id: 'node4', width: 75, height: 70, offsetX: 370, offsetY: 120, shape: { + type: 'Bpmn', shape: 'Gateway', + gateway: { type: 'Exclusive' } + }, + tooltip: { content: 'proceed to validate?' }, + }, + { + id: 'node5', width: 75, height: 70, offsetX: 570, offsetY: 120, + annotations: [{ content: 'Validate', offset: { x: 0.50, y: 0.50 } }], + tooltip: { content: 'Whether the reported/requested bug/feature is valid?' }, shape: { type: 'Bpmn', shape: 'Gateway' } + }, + { + id: 'node6', width: 60, height: 60, offsetX: 720, offsetY: 120, + tooltip: { content: 'Send the invalid message to customer' }, + shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } } + }, + { + id: 'node7', width: 60, height: 50, offsetX: 140, offsetY: 280, + annotations: [{ content: 'Request', offset: { x: 0.50, y: 0.50 }, margin: { top: 5 } }], + tooltip: { content: 'Requesting for more information' }, + shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Send' } } } + }, + { + id: 'node8', width: 60, height: 60, offsetX: 370, offsetY: 280, + tooltip: { content: 'Share the User Guide/Knowledge Base link' }, + shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'Message' } } + }, + { + id: 'node9', width: 70, height: 50, offsetX: 570, offsetY: 280, + annotations: [{ content: 'Log bug/feature', offset: { x: 0.50, y: 0.50 } }], tooltip: { content: 'Log the bug/feature' }, + shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } } + }, + { + id: 'node10', width: 75, height: 55, offsetX: 390, offsetY: 430, + annotations: [{ content: 'Implement', offset: { x: 0.50, y: 0.50 } }], tooltip: { content: 'Fix the bug/Add the feature' }, + shape: { + type: 'Bpmn', shape: 'Activity', activity: { + activity: 'SubProcess', subProcess: { + collapsed: false, + events: [{ event: 'Intermediate', trigger: 'Timer', offset: { x: 0.5, y: 1 }, width: 25, height: 25 }] + } + } + } + }, + { + id: 'node12', width: 60, height: 60, offsetX: 265, offsetY: 430, tooltip: { content: 'Provide the solution' }, + shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } } + }, + { + id: 'node13', width: 60, height: 60, offsetX: 720, offsetY: 430, tooltip: { content: 'Share the task details' }, + shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'Message' } } + }, + { + id: 'node14', width: 60, height: 60, offsetX: 570, offsetY: 430, shape: { + type: 'Bpmn', shape: 'Gateway', + gateway: { type: 'Parallel' } + }, + tooltip: { content: 'can log?' }, + }, + ]; + var connectors = [ + { id: 'connector1', sourceID: 'node1', targetID: 'node2' }, + { id: 'connector2', sourceID: 'node2', targetID: 'node3' }, + { id: 'connector3', sourceID: 'node3', targetID: 'node4' }, + { + id: 'connector4', sourceID: 'node4', targetID: 'node5', + annotations: [{ content: 'Feature/Bug', offset: 0.5, style: { fill: 'white', textWrapping: 'Wrap' } }] + }, + { + id: 'connector5', sourceID: 'node5', targetID: 'node6', + annotations: [{ content: 'Invalid', offset: 0.5, style: { fill: 'white' } }] + }, + { id: 'connector6', sourceID: 'node2', targetID: 'node7' }, + { + id: 'connector7', sourceID: 'node4', targetID: 'node8', + annotations: [{ content: 'How to?', offset: 0.5, style: { fill: 'white' } }] + }, + { id: 'connector8', sourceID: 'node5', targetID: 'node9' }, + { id: 'connector9', sourceID: 'node14', targetID: 'node13' }, + { + id: 'connector10', sourceID: 'node7', targetID: 'node3', type: 'Orthogonal', + segments: [{ type: 'Orthogonal', length: 100, direction: 'Right' }, { type: 'Orthogonal', length: 100, direction: 'Top' }] + }, + { id: 'connector11', sourceID: 'node14', targetID: 'node10' }, + { id: 'connector12', sourceID: 'node10', targetID: 'node12' }, + { id: 'connector13', sourceID: 'node9', targetID: 'node14' }, + ]; + function getcontent() { + var tooltipContent = document.createElement('div'); + tooltipContent.innerHTML = + '
        Tooltip !!!
        '; + return tooltipContent; + } + function getConnectorDefaults(connector, diagram) { + connector.type = 'Orthogonal'; + connector.style = { strokeWidth: 2 }; + return connector; + } + function getNodeDefaults(obj) { + obj.offsetX += 0.5; + obj.offsetY += 0.5; + obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip; + obj.style = { strokeWidth: 2 }; + return obj; + } + + //Initializes diagram control + var diagram = new ej.diagrams.Diagram({ + width: '100%', height: '645px', connectors: connectors, nodes: nodes, + getConnectorDefaults: getConnectorDefaults, + getNodeDefaults: getNodeDefaults, + snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, + tooltip: { + content: getcontent(), position: 'TopLeft', relativeMode: 'Object', + animation: { open: { effect: 'FadeZoomIn', delay: 100 }, close: { effect: 'FadeZoomOut', delay: 100 } } + } + }); + diagram.appendTo('#diagram'); + var modevalue = [ + { type: 'Object', text: 'Object' }, + { type: 'Mouse', text: 'Mouse' }, + ]; + var positionValue = [ + { type: 'TopLeft', text: 'TopLeft' }, + { type: 'TopCenter', text: 'TopCenter' }, + { type: 'TopRight', text: 'TopRight' }, + { type: 'BottomLeft', text: 'BottomLeft' }, + { type: 'BottomCenter', text: 'BottomCenter' }, + { type: 'BottomRight', text: 'BottomRight' }, + { type: 'LeftTop', text: 'LeftTop' }, + { type: 'LeftCenter', text: 'LeftCenter' }, + { type: 'LeftBottom', text: 'LeftBottom' }, + { type: 'RightTop', text: 'RightTop' }, + { type: 'RightCenter', text: 'RightCenter' }, + { type: 'RightBottom', text: 'RightBottom' }, + ]; + var effectValue = [ + { type: 'FadeIn', text: 'FadeIn' }, + { type: 'FadeOut', text: 'FadeOut' }, + { type: 'FadeZoomIn', text: 'FadeZoomIn' }, + { type: 'FadeZoomOut', text: 'FadeZoomOut' }, + { type: 'FlipXDownIn', text: 'FlipXDownIn' }, + { type: 'FlipXDownOut', text: 'FlipXDownOut' }, + { type: 'FlipXUpIn', text: 'FlipXUpIn' }, + { type: 'FlipXUpOut', text: 'FlipXUpOut' }, + { type: 'FlipYLeftIn', text: 'FlipYLeftIn' }, + { type: 'FlipYLeftOut', text: 'FlipYLeftOut' }, + { type: 'FlipYRightIn', text: 'FlipYRightIn' }, + { type: 'FlipYRightOut', text: 'FlipYRightOut' }, + { type: 'ZoomIn', text: 'ZoomIn' }, + { type: 'ZoomOut', text: 'ZoomOut' }, + { type: 'None', text: 'None' }, + ]; + var mode = new ej.dropdowns.DropDownList({ + dataSource: modevalue, + fields: { value: 'type', text: 'text' }, popupWidth: 150, + width: '100%', placeholder: 'select a font type', index: 0, + change: function () { + if (mode.value === 'Mouse') { + diagram.tooltip.relativeMode = 'Mouse'; + } + else { + diagram.tooltip.relativeMode = 'Object'; + } + } + }); + mode.appendTo('#mode'); + var position = new ej.dropdowns.DropDownList({ + dataSource: positionValue, + fields: { value: 'type', text: 'text' }, popupWidth: 150, + width: '100%', placeholder: 'select a font type', index: 0, + change: function (args) { + var nodes = diagram.nodes; + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].tooltip) { + nodes[i].tooltip.position = args.value; + diagram.dataBind(); + } + } + } + }); + position.appendTo('#position'); + var effect = new ej.dropdowns.DropDownList({ + dataSource: effectValue, + fields: { value: 'type', text: 'text' }, popupWidth: 150, + width: '100%', placeholder: 'select a effect type', index: 0, + change: function (args) { + diagram.tooltip.animation.open.effect = args.value; + diagram.tooltip.animation.close.effect = args.value; + } + }); + effect.appendTo('#effect'); + var textContent = new ej.inputs.TextBox({ + placeholder: 'Enter text content', + floatLabelType: 'Auto', + change: function (args) { + diagram.tooltip.content = args.value.toString(); + diagram.dataBind(); + } + }); + textContent.appendTo('#textContent'); + var htmlContent = new ej.inputs.TextBox({ + placeholder: 'Enter html content', + floatLabelType: 'Auto', + change: function (args) { + var tooltipContent = document.createElement('div'); + var description = args.value.toString(); + tooltipContent.innerHTML = + '
        ' + description + '
        '; + diagram.tooltip.content = tooltipContent; + diagram.dataBind(); + } + }); + htmlContent.appendTo('#htmlContent'); + var animation = new ej.inputs.NumericTextBox({ + format: '###.##', + change: function (args) { + diagram.tooltip.animation.close.duration = args.value; + diagram.tooltip.animation.open.duration = args.value; + } + }); + animation.appendTo('#duration'); + var temp = '
        ' + + ' '; + diagram.fitToPage({ mode: 'Width' }); +}; \ No newline at end of file diff --git a/src/diagram/uml-activity-stack.json b/src/diagram/uml-activity-stack.json index 18e1a892..34ba463e 100644 --- a/src/diagram/uml-activity-stack.json +++ b/src/diagram/uml-activity-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * UMLActivity Diagram for customer service\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\n//Create and add ports for node.\nfunction getNodePorts(obj) {\n if (obj.id === 'node2' || obj.id === 'node9') {\n var node2Ports = [\n { id: 'port1', offset: { x: 0.2, y: 1 } },\n { id: 'port2', offset: { x: 0.8, y: 1 } },\n { id: 'port3', offset: { x: 0.2, y: 0 } },\n { id: 'port4', offset: { x: 0.8, y: 0 } },\n ];\n return node2Ports;\n } else {\n var ports = [\n { id: 'portLeft', offset: { x: 0, y: 0.5 } },\n { id: 'portRight', offset: { x: 1, y: 0.5 } },\n { id: 'portBottom', offset: { x: 0.5, y: 1 } },\n { id: 'portTop', offset: { x: 0.5, y: 0 } },\n ];\n return ports;\n }\n}\n\n// Initializes connector symbols to the connector palette in the symbol palette\nfunction getConnectors() {\n var targetDecorator = { shape: 'Arrow', style: { fill: '#444', strokeColor: '#444' } };\n var sourcePoint = { x: 0, y: 0 };\n var targetPoint = { x: 40, y: 40 };\n var connectorSymbols = [\n {\n id: 'Link2', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Orthogonal', style: getConnectorStyle(true), targetDecorator: targetDecorator,\n },\n {\n id: 'Link1', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Orthogonal', style: getConnectorStyle(), targetDecorator: targetDecorator,\n },\n {\n id: 'Link3', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Straight', style: getConnectorStyle(), targetDecorator: targetDecorator,\n }\n ];\n return connectorSymbols;\n}\n\n// sets style for the connector symbols to the connector palette in the symbol palette\nfunction getConnectorStyle(dashArrayed) {\n var style = {};\n if (dashArrayed) {\n style = { strokeWidth: 2, strokeColor: '#444', strokeDashArray: '4 4', };\n } else {\n style = { strokeWidth: 2, strokeColor: '#444' };\n }\n return style;\n}\n\n// sets the default values for the symbols in the symbol palette\nfunction setPaletteNodeDefaults(symbol) {\n if (symbol.id === 'JoinNode') {\n symbol.width = 20; symbol.height = 50;\n } else if (symbol.id === 'ForkNode') {\n symbol.width = 50; symbol.height = 20;\n } else if (symbol.id === 'Decision' || symbol.id === 'MergeNode') {\n symbol.width = 50; symbol.height = 40;\n } else {\n symbol.width = 50; symbol.height = 50;\n }\n if (symbol.id === 'InitialNode' || symbol.id === 'FinalNode' || symbol.id === 'JoinNode' || symbol.id === 'ForkNode') {\n symbol.style.fill = '#444';\n }\n symbol.style.strokeColor = '#444';\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var paletteIcon = document.getElementById('palette-icon');\n if (paletteIcon) {\n paletteIcon.addEventListener('click', openPalette, false);\n }\n }\n}\n\nfunction openPalette() {\n var paletteSpace = document.getElementById('palette-space');\n isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n if (!paletteSpace.classList.contains('sb-mobile-palette-open')) {\n paletteSpace.classList.add('sb-mobile-palette-open');\n }\n else {\n paletteSpace.classList.remove('sb-mobile-palette-open');\n }\n }\n}\n\n\n var bounds = document.getElementById('diagram-space').getBoundingClientRect();\n var centerX = bounds.width / 2;\n var middle = centerX - 50;\n var left = middle - 120;\n var right = middle + 120;\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'Start', height: 40, width: 40, offsetX: middle, offsetY: 25,\n shape: { type: 'UmlActivity', shape: 'InitialNode' }\n }, {\n id: 'ReceiveCall', height: 40, width: 105, offsetX: middle, offsetY: 85,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Receive Customer Call' }]\n }, {\n id: 'node2', height: 10, width: 70, offsetX: middle, offsetY: 130,\n shape: { type: 'UmlActivity', shape: 'ForkNode' }\n }, {\n id: 'Determine', height: 40, width: 105, offsetX: left, offsetY: 210,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Determine Type of Call' }]\n }, {\n id: 'Log', height: 40, width: 105, offsetX: right, offsetY: 210,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Customer Logging a Call' }]\n }, {\n id: 'node5', height: 50, width: 50, offsetX: left, offsetY: 290,\n shape: { type: 'UmlActivity', shape: 'Decision' }\n }, {\n id: 'transfer_sales', height: 40, width: 105, offsetX: middle - 200, offsetY: 360,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Transfer the call to Sales' }]\n }, {\n id: 'transfer_desk', height: 40, width: 105, offsetX: middle - 25, offsetY: 360,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Transfer the call to Help Desk' }]\n }, {\n id: 'node8', height: 50, width: 50, offsetX: left, offsetY: 430,\n shape: { type: 'UmlActivity', shape: 'MergeNode' }\n }, {\n id: 'node9', height: 10, width: 70, offsetX: middle, offsetY: 500,\n shape: { type: 'UmlActivity', shape: 'JoinNode' }\n }, {\n id: 'CloseCall', height: 40, width: 105, offsetX: middle, offsetY: 550,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Close Call', margin: { left: 25, right: 25 } }]\n }, {\n id: 'node11', height: 40, width: 40, offsetX: middle, offsetY: 615,\n shape: { type: 'UmlActivity', shape: 'FinalNode' }\n }\n ];\n\n //Initializes the connector for the diagram\n var connectors = [\n { id: 'connector1', sourceID: 'Start', targetID: 'ReceiveCall' },\n { id: 'connector2', sourceID: 'ReceiveCall', targetID: 'node2' },\n {\n id: 'connector3', sourceID: 'node2', targetID: 'Determine',\n sourcePortID: 'port1', targetPortID: 'portTop',\n segments: [\n { type: 'Orthogonal', length: 20, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Left' }\n ],\n },\n {\n id: 'connector4', sourceID: 'node2', targetID: 'Log',\n sourcePortID: 'port2', targetPortID: 'portTop',\n segments: [\n { type: 'Orthogonal', length: 20, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Right' }\n ],\n },\n { id: 'connector5', sourceID: 'Determine', targetID: 'node5' },\n {\n id: 'connector6', sourceID: 'node5', targetID: 'transfer_sales',\n sourcePortID: 'portLeft', targetPortID: 'portTop',\n shape: { type: 'UmlActivity', flow: 'Object' },\n annotations: [\n {\n id: 'connector6Label', content: 'type=New customer', offset: 0.715,\n style: { fill: 'white', color: 'black', textWrapping: 'NoWrap' }\n }\n ],\n },\n {\n id: 'connector7', sourceID: 'node5', targetID: 'transfer_desk',\n sourcePortID: 'portRight', targetPortID: 'portTop',\n shape: { type: 'UmlActivity', flow: 'Object' },\n annotations: [\n {\n id: 'connector7Label', content: 'type=Existing customer', offset: 0.75,\n style: { fill: 'white', color: 'black', textWrapping: 'NoWrap' }\n }\n ],\n },\n {\n id: 'connector8', sourceID: 'transfer_sales', targetID: 'node8',\n sourcePortID: 'portBottom', targetPortID: 'portLeft',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n {\n id: 'connector9', sourceID: 'transfer_desk', targetID: 'node8',\n sourcePortID: 'portBottom', targetPortID: 'portRight',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n {\n id: 'connector10', sourceID: 'node8', targetID: 'node9',\n sourcePortID: 'portBottom', targetPortID: 'port3'\n },\n {\n id: 'connector11', sourceID: 'Log', targetID: 'node9',\n sourcePortID: 'portBottom', targetPortID: 'port4',\n segments: [\n { type: 'Orthogonal', length: 213, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Left' }\n ],\n },\n { id: 'connector12', sourceID: 'node9', targetID: 'CloseCall' },\n { id: 'connector13', sourceID: 'CloseCall', targetID: 'node11' }\n ];\n\n // initializes the uml activity symbols to the UML Shapes in the symbol palette\n var umlActivityShapes = [\n { id: 'Action', shape: { type: 'UmlActivity', shape: 'Action' } },\n { id: 'Decision', shape: { type: 'UmlActivity', shape: 'Decision' } },\n { id: 'MergeNode', shape: { type: 'UmlActivity', shape: 'MergeNode' } },\n { id: 'InitialNode', shape: { type: 'UmlActivity', shape: 'InitialNode' } },\n { id: 'FinalNode', shape: { type: 'UmlActivity', shape: 'FinalNode' } },\n { id: 'ForkNode', shape: { type: 'UmlActivity', shape: 'ForkNode' } },\n { id: 'JoinNode', shape: { type: 'UmlActivity', shape: 'JoinNode' } },\n { id: 'TimeEvent', shape: { type: 'UmlActivity', shape: 'TimeEvent' } },\n { id: 'AcceptingEvent', shape: { type: 'UmlActivity', shape: 'AcceptingEvent' } },\n { id: 'SendSignal', shape: { type: 'UmlActivity', shape: 'SendSignal' } },\n { id: 'ReceiveSignal', shape: { type: 'UmlActivity', shape: 'ReceiveSignal' } },\n { id: 'StructuredNode', shape: { type: 'UmlActivity', shape: 'StructuredNode' } },\n { id: 'Note', shape: { type: 'UmlActivity', shape: 'Note' } }\n ];\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n // sets the height and width of the diagram\n width: '100%', height: '100%',\n // sets the nodes and connectors of the diagram\n nodes: nodes, connectors: connectors,\n // sets snap settings to the diagram\n snapSettings: {\n constraints: ej.diagrams.SnapConstraints.None\n },\n //Sets the default values of a node\n getNodeDefaults: function (obj) {\n obj.ports = getNodePorts(obj);\n if (obj.ports) {\n for (var i = 0; i < obj.ports.length; i++) {\n obj.ports[i].visibility = ej.diagrams.PortVisibility.Hidden;\n }\n }\n if (obj.id === 'Start' || obj.id === 'node2' || obj.id === 'node9' || obj.id === 'node11') {\n obj.style.fill = '#444';\n }\n obj.style.strokeColor = '#444';\n return obj;\n },\n //Sets the default values of a Connector.\n getConnectorDefaults: function (obj) {\n if (obj.id.indexOf('connector') !== -1) {\n obj.type = 'Orthogonal'; obj.cornerRadius = 10;\n obj.targetDecorator = { shape: 'OpenArrow', style: { strokeColor: '#444', fill: '#444' } };\n }\n },\n created: function () {\n addEvents();\n }\n });\n diagram.appendTo('#diagram');\n //Initializes symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n // sets the expandable mode of the symbol palette\n expandMode: 'Multiple',\n // sets the height and wodth of the symbol palette\n width: '100%', height: '100%',\n // sets the default values for the symbols in the symbol palette\n getNodeDefaults: setPaletteNodeDefaults,\n // sets the height and width of the symbols\n symbolHeight: 55, symbolWidth: 55,\n // sets the margin for the symbol\n symbolMargin: { left: 10, right: 10, top: 10, bottom: 10 },\n // sets the palettes to be displayed in the symbol palette\n palettes: [\n { id: 'umlActivity', expanded: true, symbols: umlActivityShapes, title: 'UML Shapes' },\n { id: 'Connector', expanded: true, symbols: getConnectors(), title: 'Connectors' },\n ],\n getSymbolInfo: function (symbol) { return { fit: true }; }\n });\n palette.appendTo('#symbolPalette');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * UMLActivity Diagram for customer service\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo);\n\n//Create and add ports for node.\nfunction getNodePorts(obj) {\n if (obj.id === 'node2' || obj.id === 'node9') {\n var node2Ports = [\n { id: 'port1', offset: { x: 0.2, y: 1 } },\n { id: 'port2', offset: { x: 0.8, y: 1 } },\n { id: 'port3', offset: { x: 0.2, y: 0 } },\n { id: 'port4', offset: { x: 0.8, y: 0 } },\n ];\n return node2Ports;\n } else {\n var ports = [\n { id: 'portLeft', offset: { x: 0, y: 0.5 } },\n { id: 'portRight', offset: { x: 1, y: 0.5 } },\n { id: 'portBottom', offset: { x: 0.5, y: 1 } },\n { id: 'portTop', offset: { x: 0.5, y: 0 } },\n ];\n return ports;\n }\n}\n\n// Initializes connector symbols to the connector palette in the symbol palette\nfunction getConnectors() {\n var targetDecorator = { shape: 'Arrow', style: { fill: '#444', strokeColor: '#444' } };\n var sourcePoint = { x: 0, y: 0 };\n var targetPoint = { x: 40, y: 40 };\n var connectorSymbols = [\n {\n id: 'Link2', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Orthogonal', style: getConnectorStyle(true), targetDecorator: targetDecorator,\n },\n {\n id: 'Link1', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Orthogonal', style: getConnectorStyle(), targetDecorator: targetDecorator,\n },\n {\n id: 'Link3', sourcePoint: sourcePoint, targetPoint: targetPoint,\n type: 'Straight', style: getConnectorStyle(), targetDecorator: targetDecorator,\n }\n ];\n return connectorSymbols;\n}\n\n// sets style for the connector symbols to the connector palette in the symbol palette\nfunction getConnectorStyle(dashArrayed) {\n var style = {};\n if (dashArrayed) {\n style = { strokeWidth: 2, strokeColor: '#444', strokeDashArray: '4 4', };\n } else {\n style = { strokeWidth: 2, strokeColor: '#444' };\n }\n return style;\n}\n\n// sets the default values for the symbols in the symbol palette\nfunction setPaletteNodeDefaults(symbol) {\n if (symbol.id === 'JoinNode') {\n symbol.width = 20; symbol.height = 50;\n } else if (symbol.id === 'ForkNode') {\n symbol.width = 50; symbol.height = 20;\n } else if (symbol.id === 'Decision' || symbol.id === 'MergeNode') {\n symbol.width = 50; symbol.height = 40;\n } else {\n symbol.width = 50; symbol.height = 50;\n }\n if (symbol.id === 'InitialNode' || symbol.id === 'FinalNode' || symbol.id === 'JoinNode' || symbol.id === 'ForkNode') {\n symbol.style.fill = '#444';\n }\n symbol.style.strokeColor = '#444';\n}\n\nfunction addEvents() {\n var isMobile = window.matchMedia('(max-width:550px)').matches;\n if (isMobile) {\n var paletteIcon = document.getElementById('palette-icon');\n if (paletteIcon) {\n paletteIcon.addEventListener('click', openPalette, false);\n }\n }\n}\n\n\n var bounds = document.getElementById('diagram-space').getBoundingClientRect();\n var centerX = bounds.width / 2;\n var middle = centerX - 50;\n var left = middle - 120;\n var right = middle + 120;\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'Start', height: 40, width: 40, offsetX: middle, offsetY: 25,\n shape: { type: 'UmlActivity', shape: 'InitialNode' }\n }, {\n id: 'ReceiveCall', height: 40, width: 105, offsetX: middle, offsetY: 85,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Receive Customer Call' }]\n }, {\n id: 'node2', height: 10, width: 70, offsetX: middle, offsetY: 130,\n shape: { type: 'UmlActivity', shape: 'ForkNode' }\n }, {\n id: 'Determine', height: 40, width: 105, offsetX: left, offsetY: 210,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Determine Type of Call' }]\n }, {\n id: 'Log', height: 40, width: 105, offsetX: right, offsetY: 210,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Customer Logging a Call' }]\n }, {\n id: 'node5', height: 50, width: 50, offsetX: left, offsetY: 290,\n shape: { type: 'UmlActivity', shape: 'Decision' }\n }, {\n id: 'transfer_sales', height: 40, width: 105, offsetX: middle - 200, offsetY: 360,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Transfer the call to Sales' }]\n }, {\n id: 'transfer_desk', height: 40, width: 105, offsetX: middle - 25, offsetY: 360,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Transfer the call to Help Desk' }]\n }, {\n id: 'node8', height: 50, width: 50, offsetX: left, offsetY: 430,\n shape: { type: 'UmlActivity', shape: 'MergeNode' }\n }, {\n id: 'node9', height: 10, width: 70, offsetX: middle, offsetY: 500,\n shape: { type: 'UmlActivity', shape: 'JoinNode' }\n }, {\n id: 'CloseCall', height: 40, width: 105, offsetX: middle, offsetY: 550,\n shape: { type: 'UmlActivity', shape: 'Action' },\n annotations: [{ content: 'Close Call', margin: { left: 25, right: 25 } }]\n }, {\n id: 'node11', height: 40, width: 40, offsetX: middle, offsetY: 615,\n shape: { type: 'UmlActivity', shape: 'FinalNode' }\n }\n ];\n\n //Initializes the connector for the diagram\n var connectors = [\n { id: 'connector1', sourceID: 'Start', targetID: 'ReceiveCall' },\n { id: 'connector2', sourceID: 'ReceiveCall', targetID: 'node2' },\n {\n id: 'connector3', sourceID: 'node2', targetID: 'Determine',\n sourcePortID: 'port1', targetPortID: 'portTop',\n segments: [\n { type: 'Orthogonal', length: 20, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Left' }\n ],\n },\n {\n id: 'connector4', sourceID: 'node2', targetID: 'Log',\n sourcePortID: 'port2', targetPortID: 'portTop',\n segments: [\n { type: 'Orthogonal', length: 20, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Right' }\n ],\n },\n { id: 'connector5', sourceID: 'Determine', targetID: 'node5' },\n {\n id: 'connector6', sourceID: 'node5', targetID: 'transfer_sales',\n sourcePortID: 'portLeft', targetPortID: 'portTop',\n shape: { type: 'UmlActivity', flow: 'Object' },\n annotations: [\n {\n id: 'connector6Label', content: 'type=New customer', offset: 0.715,\n style: { fill: 'white', color: 'black', textWrapping: 'NoWrap' }\n }\n ],\n },\n {\n id: 'connector7', sourceID: 'node5', targetID: 'transfer_desk',\n sourcePortID: 'portRight', targetPortID: 'portTop',\n shape: { type: 'UmlActivity', flow: 'Object' },\n annotations: [\n {\n id: 'connector7Label', content: 'type=Existing customer', offset: 0.75,\n style: { fill: 'white', color: 'black', textWrapping: 'NoWrap' }\n }\n ],\n },\n {\n id: 'connector8', sourceID: 'transfer_sales', targetID: 'node8',\n sourcePortID: 'portBottom', targetPortID: 'portLeft',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n {\n id: 'connector9', sourceID: 'transfer_desk', targetID: 'node8',\n sourcePortID: 'portBottom', targetPortID: 'portRight',\n segments: [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n },\n {\n id: 'connector10', sourceID: 'node8', targetID: 'node9',\n sourcePortID: 'portBottom', targetPortID: 'port3'\n },\n {\n id: 'connector11', sourceID: 'Log', targetID: 'node9',\n sourcePortID: 'portBottom', targetPortID: 'port4',\n segments: [\n { type: 'Orthogonal', length: 213, direction: 'Bottom' },\n { type: 'Orthogonal', length: 50, direction: 'Left' }\n ],\n },\n { id: 'connector12', sourceID: 'node9', targetID: 'CloseCall' },\n { id: 'connector13', sourceID: 'CloseCall', targetID: 'node11' }\n ];\n\n // initializes the uml activity symbols to the UML Shapes in the symbol palette\n var umlActivityShapes = [\n { id: 'Action', shape: { type: 'UmlActivity', shape: 'Action' } },\n { id: 'Decision', shape: { type: 'UmlActivity', shape: 'Decision' } },\n { id: 'MergeNode', shape: { type: 'UmlActivity', shape: 'MergeNode' } },\n { id: 'InitialNode', shape: { type: 'UmlActivity', shape: 'InitialNode' } },\n { id: 'FinalNode', shape: { type: 'UmlActivity', shape: 'FinalNode' } },\n { id: 'ForkNode', shape: { type: 'UmlActivity', shape: 'ForkNode' } },\n { id: 'JoinNode', shape: { type: 'UmlActivity', shape: 'JoinNode' } },\n { id: 'TimeEvent', shape: { type: 'UmlActivity', shape: 'TimeEvent' } },\n { id: 'AcceptingEvent', shape: { type: 'UmlActivity', shape: 'AcceptingEvent' } },\n { id: 'SendSignal', shape: { type: 'UmlActivity', shape: 'SendSignal' } },\n { id: 'ReceiveSignal', shape: { type: 'UmlActivity', shape: 'ReceiveSignal' } },\n { id: 'StructuredNode', shape: { type: 'UmlActivity', shape: 'StructuredNode' } },\n { id: 'Note', shape: { type: 'UmlActivity', shape: 'Note' } }\n ];\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n // sets the height and width of the diagram\n width: '100%', height: '100%',\n // sets the nodes and connectors of the diagram\n nodes: nodes, connectors: connectors,\n // sets snap settings to the diagram\n snapSettings: {\n constraints: ej.diagrams.SnapConstraints.None\n },\n //Sets the default values of a node\n getNodeDefaults: function (obj) {\n obj.ports = getNodePorts(obj);\n if (obj.ports) {\n for (var i = 0; i < obj.ports.length; i++) {\n obj.ports[i].visibility = ej.diagrams.PortVisibility.Hidden;\n }\n }\n if (obj.id === 'Start' || obj.id === 'node2' || obj.id === 'node9' || obj.id === 'node11') {\n obj.style.fill = '#444';\n }\n obj.style.strokeColor = '#444';\n return obj;\n },\n //Sets the default values of a Connector.\n getConnectorDefaults: function (obj) {\n if (obj.id.indexOf('connector') !== -1) {\n obj.type = 'Orthogonal'; obj.cornerRadius = 10;\n obj.targetDecorator = { shape: 'OpenArrow', style: { strokeColor: '#444', fill: '#444' } };\n }\n },\n created: function () {\n addEvents();\n }\n });\n diagram.appendTo('#diagram');\n //Initializes symbol palette\n var palette = new ej.diagrams.SymbolPalette({\n // sets the expandable mode of the symbol palette\n expandMode: 'Multiple',\n // sets the height and wodth of the symbol palette\n width: '100%', height: '100%',\n // sets the default values for the symbols in the symbol palette\n getNodeDefaults: setPaletteNodeDefaults,\n // sets the height and width of the symbols\n symbolHeight: 55, symbolWidth: 55,\n // sets the margin for the symbol\n symbolMargin: { left: 10, right: 10, top: 10, bottom: 10 },\n // sets the palettes to be displayed in the symbol palette\n palettes: [\n { id: 'umlActivity', expanded: true, symbols: umlActivityShapes, title: 'UML Shapes' },\n { id: 'Connector', expanded: true, symbols: getConnectors(), title: 'Connectors' },\n ],\n getSymbolInfo: function (symbol) { return { fit: true }; }\n });\n palette.appendTo('#symbolPalette');\n\n"} \ No newline at end of file diff --git a/src/diagram/uml-activity.js b/src/diagram/uml-activity.js index 1ce4f850..ecde6185 100644 --- a/src/diagram/uml-activity.js +++ b/src/diagram/uml-activity.js @@ -83,7 +83,7 @@ function addEvents() { } } } - +// custom code start function openPalette() { var paletteSpace = document.getElementById('palette-space'); isMobile = window.matchMedia('(max-width:550px)').matches; @@ -96,7 +96,7 @@ function openPalette() { } } } - +// custom code end this.default = function () { var bounds = document.getElementById('diagram-space').getBoundingClientRect(); var centerX = bounds.width / 2; diff --git a/src/diagram/uml-class-diagram-stack.json b/src/diagram/uml-class-diagram-stack.json index 2608d454..a2f80f05 100644 --- a/src/diagram/uml-class-diagram-stack.json +++ b/src/diagram/uml-class-diagram-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Class Diagram\n */\n\nvar diagram;\n\nfunction getNodeDefaults(obj) {\n obj.style = { fill: \"#26A0DA\", strokeColor: \"white\" };\n return obj;\n}\nfunction getConnectorDefaults(connector) {\nreturn connector;\n}\nfunction setNodeTemplate(node) {\n if (node.annotations.length > 0) {\n for (var i = 0; i < node.annotations.length; i++) {\n node.annotations[i].style.color = \"white\";\n }\n }\n}\nfunction createConnector(Id, sourceID, targetID) {\n var connector = {};\n connector.id = Id;\n connector.sourceID = sourceID;\n connector.targetID = targetID;\n return connector;\n}\nfunction createNode(Id, offsetX, offsetY, className) {\n var node = {};\n node.id = Id;\n node.offsetX = offsetX;\n node.offsetY = offsetY;\n node.shape = {\n type: \"UmlClassifier\",\n class: {\n name: className\n },\n classifier: \"Class\"\n };\n return node;\n}\nfunction createProperty(name, type) {\n return { name: name, type: type };\n}\nfunction createMethods(name, type) {\n return { name: name, type: type };\n}\n\n\n var nodes = [\n {\n id: \"Patient\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Patient\",\n attributes: [\n createProperty(\"accepted\", \"Date\"),\n createProperty(\"sickness\", \"History\"),\n createProperty(\"prescription\", \"String[*]\"),\n createProperty(\"allergies\", \"String[*]\")\n ],\n methods: [createMethods(\"getHistory\", \"History\")]\n },\n classifier: \"Class\"\n },\n offsetX: 200,\n offsetY: 250\n },\n {\n id: \"Doctor\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Doctor\",\n attributes: [\n createProperty(\"specialist\", \"String[*]\"),\n createProperty(\"locations\", \"String[*]\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 240,\n offsetY: 545\n },\n {\n id: \"Person\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Person\",\n attributes: [\n createProperty(\"name\", \"Name\"),\n createProperty(\"title\", \"String[*]\"),\n createProperty(\"gender\", \"Gender\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 405,\n offsetY: 105\n },\n {\n id: \"Hospital\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Hospital\",\n attributes: [\n createProperty(\"name\", \"Name\"),\n createProperty(\"address\", \"Address\"),\n createProperty(\"phone\", \"Phone\")\n ],\n methods: [createMethods(\"getDepartment\", \"String\")]\n },\n classifier: \"Class\"\n },\n offsetX: 638,\n offsetY: 100\n },\n {\n id: \"Department\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Department\",\n methods: [createMethods(\"getStaffCount\", \"Int\")]\n },\n classifier: \"Class\"\n },\n offsetX: 638,\n offsetY: 280\n },\n {\n id: \"Staff\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Staff\",\n attributes: [\n createProperty(\"joined\", \"Date\"),\n createProperty(\"education\", \"string[*]\"),\n createProperty(\"certification\", \"string[*]\"),\n createProperty(\"languages\", \"string[*]\")\n ],\n methods: [\n createMethods(\"isDoctor\", \"bool\"),\n createMethods(\"getHistory\", \"bool\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 635,\n offsetY: 455\n },\n createNode(\"OperationStaff\", 410, 455, \"OperationStaff\"),\n createNode(\"Nurse\", 410, 545, \"Nurse\"),\n createNode(\"Surgeon\", 240, 665, \"Surgeon\"),\n createNode(\"AdministrativeStaff\", 632, 605, \"AdministrativeStaff\"),\n createNode(\"FrontDeskStaff\", 630, 695, \"FrontDeskStaff\"),\n createNode(\"TechnicalStaff\", 928, 445, \"TechnicalStaff\"),\n createNode(\"Technician\", 815, 535, \"Technician\"),\n createNode(\"Technologist\", 1015, 535, \"Technologist\"),\n createNode(\"SurgicalTechnologist\", 1015, 630, \"SurgicalTechnologist\")\n ];\n var connectors = [\n createConnector(\"connect1\", \"Patient\", \"Person\"),\n createConnector(\"connect2\", \"Person\", \"Hospital\"),\n createConnector(\"connect3\", \"Department\", \"Hospital\"),\n createConnector(\"connect4\", \"OperationStaff\", \"Patient\"),\n createConnector(\"connect5\", \"Doctor\", \"OperationStaff\"),\n createConnector(\"connect6\", \"Nurse\", \"OperationStaff\"),\n createConnector(\"connect7\", \"Surgeon\", \"Doctor\"),\n createConnector(\"connect8\", \"FrontDeskStaff\", \"AdministrativeStaff\"),\n createConnector(\"connect9\", \"Technician\", \"TechnicalStaff\"),\n createConnector(\"connect10\", \"Technologist\", \"TechnicalStaff\"),\n createConnector(\"connect11\", \"SurgicalTechnologist\", \"Technologist\"),\n createConnector(\"connect12\", \"Staff\", \"Department\"),\n createConnector(\"connect13\", \"Staff\", \"Person\"),\n createConnector(\"connect14\", \"OperationStaff\", \"Staff\"),\n createConnector(\"connect15\", \"AdministrativeStaff\", \"Staff\"),\n createConnector(\"connect16\", \"TechnicalStaff\", \"Staff\")\n ];\n diagram = new ej.diagrams.Diagram({\n width: \"100%\",\n height: 700,\n nodes: nodes,\n connectors: connectors,\n getNodeDefaults: getNodeDefaults,\n getConnectorDefaults: getConnectorDefaults,\n setNodeTemplate: setNodeTemplate\n });\n diagram.appendTo(\"#diagram\");\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Class Diagram\n */\n\nvar diagram;\n\nfunction getNodeDefaults(obj) {\n obj.style = { fill: \"#26A0DA\", strokeColor: \"white\" };\n return obj;\n}\nfunction getConnectorDefaults(connector) {\nreturn connector;\n}\nfunction setNodeTemplate(node) {\n if (node.annotations.length > 0) {\n for (var i = 0; i < node.annotations.length; i++) {\n node.annotations[i].style.color = \"white\";\n }\n }\n}\nfunction createConnector(Id, sourceID, targetID) {\n var connector = {};\n connector.id = Id;\n connector.sourceID = sourceID;\n connector.targetID = targetID;\n return connector;\n}\nfunction createNode(Id, offsetX, offsetY, className) {\n var node = {};\n node.id = Id;\n node.offsetX = offsetX;\n node.offsetY = offsetY;\n node.shape = {\n type: \"UmlClassifier\",\n class: {\n name: className\n },\n classifier: \"Class\"\n };\n return node;\n}\nfunction createProperty(name, type) {\n return { name: name, type: type };\n}\nfunction createMethods(name, type) {\n return { name: name, type: type };\n}\n\n\n var nodes = [\n {\n id: \"Patient\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Patient\",\n attributes: [\n createProperty(\"accepted\", \"Date\"),\n createProperty(\"sickness\", \"History\"),\n createProperty(\"prescription\", \"String[*]\"),\n createProperty(\"allergies\", \"String[*]\")\n ],\n methods: [createMethods(\"getHistory\", \"History\")]\n },\n classifier: \"Class\"\n },\n offsetX: 200,\n offsetY: 250\n },\n {\n id: \"Doctor\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Doctor\",\n attributes: [\n createProperty(\"specialist\", \"String[*]\"),\n createProperty(\"locations\", \"String[*]\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 240,\n offsetY: 545\n },\n {\n id: \"Person\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Person\",\n attributes: [\n createProperty(\"name\", \"Name\"),\n createProperty(\"title\", \"String[*]\"),\n createProperty(\"gender\", \"Gender\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 405,\n offsetY: 105\n },\n {\n id: \"Hospital\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Hospital\",\n attributes: [\n createProperty(\"name\", \"Name\"),\n createProperty(\"address\", \"Address\"),\n createProperty(\"phone\", \"Phone\")\n ],\n methods: [createMethods(\"getDepartment\", \"String\")]\n },\n classifier: \"Class\"\n },\n offsetX: 638,\n offsetY: 100\n },\n {\n id: \"Department\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Department\",\n methods: [createMethods(\"getStaffCount\", \"Int\")]\n },\n classifier: \"Class\"\n },\n offsetX: 638,\n offsetY: 280\n },\n {\n id: \"Staff\",\n shape: {\n type: \"UmlClassifier\",\n class: {\n name: \"Staff\",\n attributes: [\n createProperty(\"joined\", \"Date\"),\n createProperty(\"education\", \"string[*]\"),\n createProperty(\"certification\", \"string[*]\"),\n createProperty(\"languages\", \"string[*]\")\n ],\n methods: [\n createMethods(\"isDoctor\", \"bool\"),\n createMethods(\"getHistory\", \"bool\")\n ]\n },\n classifier: \"Class\"\n },\n offsetX: 635,\n offsetY: 455\n },\n createNode(\"OperationStaff\", 410, 455, \"OperationStaff\"),\n createNode(\"Nurse\", 410, 545, \"Nurse\"),\n createNode(\"Surgeon\", 240, 665, \"Surgeon\"),\n createNode(\"AdministrativeStaff\", 632, 605, \"AdministrativeStaff\"),\n createNode(\"FrontDeskStaff\", 630, 695, \"FrontDeskStaff\"),\n createNode(\"TechnicalStaff\", 928, 445, \"TechnicalStaff\"),\n createNode(\"Technician\", 815, 535, \"Technician\"),\n createNode(\"Technologist\", 1015, 535, \"Technologist\"),\n createNode(\"SurgicalTechnologist\", 1015, 630, \"SurgicalTechnologist\")\n ];\n var connectors = [\n createConnector(\"connect1\", \"Patient\", \"Person\"),\n createConnector(\"connect2\", \"Person\", \"Hospital\"),\n createConnector(\"connect3\", \"Department\", \"Hospital\"),\n createConnector(\"connect4\", \"OperationStaff\", \"Patient\"),\n createConnector(\"connect5\", \"Doctor\", \"OperationStaff\"),\n createConnector(\"connect6\", \"Nurse\", \"OperationStaff\"),\n createConnector(\"connect7\", \"Surgeon\", \"Doctor\"),\n createConnector(\"connect8\", \"FrontDeskStaff\", \"AdministrativeStaff\"),\n createConnector(\"connect9\", \"Technician\", \"TechnicalStaff\"),\n createConnector(\"connect10\", \"Technologist\", \"TechnicalStaff\"),\n createConnector(\"connect11\", \"SurgicalTechnologist\", \"Technologist\"),\n createConnector(\"connect12\", \"Staff\", \"Department\"),\n createConnector(\"connect13\", \"Staff\", \"Person\"),\n createConnector(\"connect14\", \"OperationStaff\", \"Staff\"),\n createConnector(\"connect15\", \"AdministrativeStaff\", \"Staff\"),\n createConnector(\"connect16\", \"TechnicalStaff\", \"Staff\")\n ];\n diagram = new ej.diagrams.Diagram({\n width: \"100%\",\n height: 700,\n nodes: nodes,\n connectors: connectors,\n getNodeDefaults: getNodeDefaults,\n getConnectorDefaults: getConnectorDefaults,\n setNodeTemplate: setNodeTemplate\n });\n diagram.appendTo(\"#diagram\");\n\n"} \ No newline at end of file diff --git a/src/diagram/venn-diagram-stack.json b/src/diagram/venn-diagram-stack.json index aae925c0..c5d04661 100644 --- a/src/diagram/venn-diagram-stack.json +++ b/src/diagram/venn-diagram-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"} \ No newline at end of file diff --git a/src/diagram/venn-diagram.html b/src/diagram/venn-diagram.html index 220ec2df..46834503 100644 --- a/src/diagram/venn-diagram.html +++ b/src/diagram/venn-diagram.html @@ -12,7 +12,7 @@

        This example shows how to create a Venn diagram using diagram control. In this example, zoom and pan options are enabled. - The tool property of the diagram control allows you to enable/disable zoom and pan options using mouse control. + The tool property of the diagram control allows you to enable/disable zoom and pan options.


        \ No newline at end of file diff --git a/src/dialog/animation-stack.json b/src/dialog/animation-stack.json index 1826143e..b091ac23 100644 --- a/src/dialog/animation-stack.json +++ b/src/dialog/animation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n \n
        ","index.js":"{{ripple}}\n //Render Button components\n var zoom = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n zoom.appendTo('#Zoom');\n var flipXDown = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipXDown.appendTo('#FlipXDown');\n var flipXUp = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipXUp.appendTo('#FlipXUp');\n var flipYLeft = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipYLeft.appendTo('#FlipYLeft');\n var flipYRight = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipYRight.appendTo('#FlipYRight');\n ej.base.enableRipple(true);\n // Initialization of Dialog component\n var dialog = new ej.popups.Dialog({\n // Enables the header\n header: 'Animation Dialog',\n // Enables the close icon button in header\n showCloseIcon: true,\n // Dialog content\n content: 'The dialog is configured with animation effect. It is opened or closed with \"Zoom In or Out\" animation.',\n // The Dialog shows within the target element\n target: document.getElementById(\"target\"),\n width: '285px',\n isModal: true,\n animationSettings: { effect: 'Zoom' },\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'Hide', isPrimary: true }\n }],\n });\n // Render initialized Dialog\n dialog.appendTo('#dialog');\n\n function dlgButtonClick() {\n dialog.hide();\n }\n var list = document.getElementsByClassName('btn-animate');\n var animationfn = function (index) {\n return function () {\n var effects = list[index].id;\n var txt = list[index].parentElement.innerText;\n txt = (txt == \"Zoom In/Out\") ? \"Zoom In or Out\" : txt;\n dialog.content = 'The dialog is configured with animation effect. It is opened or closed with \"' + txt + '\" animation.';\n dialog.animationSettings = { effect: effects, duration: 400 };\n dialog.show();\n };\n };\n\n for (var i = 0; i < list.length; i++) {\n list[i].addEventListener('click', animationfn(i));\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n \n\n\n","index.js":"{{ripple}}\n //Render Button components\n var zoom = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n zoom.appendTo('#Zoom');\n var flipXDown = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipXDown.appendTo('#FlipXDown');\n var flipXUp = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipXUp.appendTo('#FlipXUp');\n var flipYLeft = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipYLeft.appendTo('#FlipYLeft');\n var flipYRight = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n flipYRight.appendTo('#FlipYRight');\n ej.base.enableRipple(true);\n // Initialization of Dialog component\n var dialog = new ej.popups.Dialog({\n // Enables the header\n header: 'Animation Dialog',\n // Enables the close icon button in header\n showCloseIcon: true,\n // Dialog content\n content: 'The dialog is configured with animation effect. It is opened or closed with \"Zoom In or Out\" animation.',\n // The Dialog shows within the target element\n target: document.getElementById(\"target\"),\n width: '285px',\n isModal: true,\n animationSettings: { effect: 'Zoom' },\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'Hide', isPrimary: true }\n }],\n });\n // Render initialized Dialog\n dialog.appendTo('#dialog');\n\n function dlgButtonClick() {\n dialog.hide();\n }\n var list = document.getElementsByClassName('btn-animate');\n var animationfn = function (index) {\n return function () {\n var effects = list[index].id;\n var txt = list[index].parentElement.innerText;\n txt = (txt == \"Zoom In/Out\") ? \"Zoom In or Out\" : txt;\n dialog.content = 'The dialog is configured with animation effect. It is opened or closed with \"' + txt + '\" animation.';\n dialog.animationSettings = { effect: effects, duration: 400 };\n dialog.show();\n };\n };\n\n for (var i = 0; i < list.length; i++) {\n list[i].addEventListener('click', animationfn(i));\n }\n"} \ No newline at end of file diff --git a/src/dialog/animation.html b/src/dialog/animation.html index 3b48752a..e66da6f3 100644 --- a/src/dialog/animation.html +++ b/src/dialog/animation.html @@ -37,11 +37,6 @@

        \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/dialog/custom-dialog-stack.json b/src/dialog/custom-dialog-stack.json index 9c8ba3dd..c3f18961 100644 --- a/src/dialog/custom-dialog-stack.json +++ b/src/dialog/custom-dialog-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n \n \n \n
        \n \n
        \n \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        SSID:
        AndroidAP
        Password:
        \n \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var alertContent = '
        10% of battery remaining
        ';\n var confirmContent = 'Are you sure you want to permanently delete these items ?';\n // Render the alert Dialog \n var alertDialogObj = new ej.popups.Dialog({\n header: 'Low Battery',\n content: alertContent,\n showCloseIcon: false,\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'Dismiss', isPrimary: true }\n }],\n closeOnEscape: false,\n target: document.getElementById('target'),\n width: '250px',\n visible: false,\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n alertDialogObj.appendTo('#alertDialog');\n document.getElementById('alertBtn').focus();\n // Render the confirmation Dialog\n var confirmDialogObj = new ej.popups.Dialog({\n header: 'Delete Multiple Items',\n visible: false,\n content: confirmContent,\n showCloseIcon: true,\n closeOnEscape: false,\n buttons: [{\n click: confirmDlgBtnClick,\n buttonModel: { content: 'Yes', isPrimary: true }\n },\n { click: confirmDlgBtnClick, buttonModel: { content: 'No' } }],\n width: '400px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n confirmDialogObj.appendTo('#confirmDialog');\n // Render the prompt Dialog \n var promptDialogObj = new ej.popups.Dialog({\n header: 'Join Wi-Fi network',\n visible: false,\n showCloseIcon: false,\n closeOnEscape: false,\n buttons: [{\n click: promptDlgBtnClick, buttonModel: { content: 'Connect', isPrimary: true }\n },\n {\n click: promptDlgBtnClick, buttonModel: { content: 'Cancel' }\n }],\n width: '330px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n promptDialogObj.appendTo('#promptDialog');\n // Create Button to open the alert Dialog\n var alertBtn = new ej.buttons.Button({});\n alertBtn.appendTo('#alertBtn');\n document.getElementById('alertBtn').onclick = function () {\n alertDialogObj.show();\n dialogOpen();\n };\n // Create Button to open the confirmation Dialog\n var confirmBtn = new ej.buttons.Button({});\n confirmBtn.appendTo('#confirmBtn');\n document.getElementById('confirmBtn').onclick = function () {\n confirmDialogObj.show();\n dialogOpen();\n };\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n function confirmDlgBtnClick() {\n confirmDialogObj.hide();\n }\n function promptDlgBtnClick() {\n promptDialogObj.hide();\n }\n // Create Button to open the prompt Dialog\n var promptBtn = new ej.buttons.Button({});\n promptBtn.appendTo('#promptBtn');\n document.getElementById('promptBtn').onclick = function () {\n promptDialogObj.show();\n dialogOpen();\n };\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[1].classList.remove('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[2].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[1].classList.add('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[2].classList.add('e-btn-hide');\n }\n // Styles will be added, while password field of prompt Dialog has been focused\n document.getElementById('password').addEventListener('focus', function () {\n this.parentElement.classList.add('e-input-focus');\n });\n // Styles will be removed, while password field of prompt Dialog has been focused out\n document.getElementById('password').addEventListener('blur', function () {\n this.parentElement.classList.remove('e-input-focus');\n });\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n \n \n \n
        \n \n
        \n \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        SSID:
        AndroidAP
        Password:
        \n \n \n
        \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n var alertContent = '
        10% of battery remaining
        ';\n var confirmContent = 'Are you sure you want to permanently delete these items ?';\n // Render the alert Dialog \n var alertDialogObj = new ej.popups.Dialog({\n header: 'Low Battery',\n content: alertContent,\n showCloseIcon: false,\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'Dismiss', isPrimary: true }\n }],\n closeOnEscape: false,\n target: document.getElementById('target'),\n width: '250px',\n visible: false,\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n alertDialogObj.appendTo('#alertDialog');\n document.getElementById('alertBtn').focus();\n // Render the confirmation Dialog\n var confirmDialogObj = new ej.popups.Dialog({\n header: 'Delete Multiple Items',\n visible: false,\n content: confirmContent,\n showCloseIcon: true,\n closeOnEscape: false,\n buttons: [{\n click: confirmDlgBtnClick,\n buttonModel: { content: 'Yes', isPrimary: true }\n },\n { click: confirmDlgBtnClick, buttonModel: { content: 'No' } }],\n width: '400px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n confirmDialogObj.appendTo('#confirmDialog');\n // Render the prompt Dialog \n var promptDialogObj = new ej.popups.Dialog({\n header: 'Join Wi-Fi network',\n visible: false,\n showCloseIcon: false,\n closeOnEscape: false,\n buttons: [{\n click: promptDlgBtnClick, buttonModel: { content: 'Connect', isPrimary: true }\n },\n {\n click: promptDlgBtnClick, buttonModel: { content: 'Cancel' }\n }],\n width: '330px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose\n });\n promptDialogObj.appendTo('#promptDialog');\n // Create Button to open the alert Dialog\n var alertBtn = new ej.buttons.Button({});\n alertBtn.appendTo('#alertBtn');\n document.getElementById('alertBtn').onclick = function () {\n alertDialogObj.show();\n dialogOpen();\n };\n // Create Button to open the confirmation Dialog\n var confirmBtn = new ej.buttons.Button({});\n confirmBtn.appendTo('#confirmBtn');\n document.getElementById('confirmBtn').onclick = function () {\n confirmDialogObj.show();\n dialogOpen();\n };\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n function confirmDlgBtnClick() {\n confirmDialogObj.hide();\n }\n function promptDlgBtnClick() {\n promptDialogObj.hide();\n }\n // Create Button to open the prompt Dialog\n var promptBtn = new ej.buttons.Button({});\n promptBtn.appendTo('#promptBtn');\n document.getElementById('promptBtn').onclick = function () {\n promptDialogObj.show();\n dialogOpen();\n };\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[1].classList.remove('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[2].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[1].classList.add('e-btn-hide');\n document.querySelectorAll('.dlgbtn')[2].classList.add('e-btn-hide');\n }\n // Styles will be added, while password field of prompt Dialog has been focused\n document.getElementById('password').addEventListener('focus', function () {\n this.parentElement.classList.add('e-input-focus');\n });\n // Styles will be removed, while password field of prompt Dialog has been focused out\n document.getElementById('password').addEventListener('blur', function () {\n this.parentElement.classList.remove('e-input-focus');\n });\n"} \ No newline at end of file diff --git a/src/dialog/custom-dialog.html b/src/dialog/custom-dialog.html index 52d92548..e11f289f 100644 --- a/src/dialog/custom-dialog.html +++ b/src/dialog/custom-dialog.html @@ -11,7 +11,7 @@
        - +
        @@ -58,6 +58,10 @@ .e-btn-hide { display: none; } + + + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/dialog/default-stack.json b/src/dialog/default-stack.json index a3507e54..0585199e 100644 --- a/src/dialog/default-stack.json +++ b/src/dialog/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n\tvar dlgContent = 'In the Succinctly series, Syncfusion created a robust free library of more than 130 technical e-books formatted' +\n\t\t\t\t\t 'for PDF, Kindle, and EPUB. The Succinctly series was born in 2012 out of a desire to provide concise technical' + \n\t\t\t\t\t 'e-books for software developers. Each title in the Succinctly series is written by a carefully' + \n\t\t\t\t\t 'chosen expert and provides essential content';\n var dlgObj = new ej.popups.Dialog({\n header: 'About SYNCFUSION Succinctly Series',\n content: dlgContent,\n target: document.getElementById('target'),\n showCloseIcon: true,\n buttons: [\n {\n click: dlgButtonClick,\n buttonModel: { content: 'Learn More', isPrimary: true }\n }],\n width: '500px',\n open: dialogOpen,\n close: dialogClose,\n animationSettings: { effect: 'none' }\n });\n dlgObj.appendTo('#dialog');\n document.getElementById('dialogButton').focus();\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogButton');\n document.getElementById('dialogButton').onclick = function () {\n dlgObj.show();\n };\n function dlgButtonClick() {\n window.open('https://www.syncfusion.com/company/about-us');\n }\n function dialogClose() {\n document.getElementById('dialogButton').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogButton').style.display = 'none';\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n \n
        \n
        \n
        \n\n\n\n","index.js":"{{ripple}}\n\tvar dlgContent = 'In the Succinctly series, Syncfusion created a robust free library of more than 130 technical e-books formatted' +\n\t\t\t\t\t 'for PDF, Kindle, and EPUB. The Succinctly series was born in 2012 out of a desire to provide concise technical' + \n\t\t\t\t\t 'e-books for software developers. Each title in the Succinctly series is written by a carefully' + \n\t\t\t\t\t 'chosen expert and provides essential content';\n var dlgObj = new ej.popups.Dialog({\n header: 'About SYNCFUSION Succinctly Series',\n content: dlgContent,\n target: document.getElementById('target'),\n showCloseIcon: true,\n buttons: [\n {\n click: dlgButtonClick,\n buttonModel: { content: 'Learn More', isPrimary: true }\n }],\n width: '500px',\n open: dialogOpen,\n close: dialogClose,\n animationSettings: { effect: 'none' }\n });\n dlgObj.appendTo('#dialog');\n document.getElementById('dialogButton').focus();\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogButton');\n document.getElementById('dialogButton').onclick = function () {\n dlgObj.show();\n };\n function dlgButtonClick() {\n window.open('https://www.syncfusion.com/company/about-us');\n }\n function dialogClose() {\n document.getElementById('dialogButton').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogButton').style.display = 'none';\n }\n\n"} \ No newline at end of file diff --git a/src/dialog/default.html b/src/dialog/default.html index ec0ebb85..b292f992 100644 --- a/src/dialog/default.html +++ b/src/dialog/default.html @@ -21,6 +21,8 @@

        + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/dialog/dialog-contents-via-ajax-stack.json b/src/dialog/dialog-contents-via-ajax-stack.json index 9183f157..b4287b76 100644 --- a/src/dialog/dialog-contents-via-ajax-stack.json +++ b/src/dialog/dialog-contents-via-ajax-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n\tvar lessContent = 'On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform.' +\n\t\t\t\t\t 'Much like its counter part, the Spring Creators Update, the release is set to deliver more features to Windows 10' + \n\t\t\t\t\t 'for both developers and users with particular emphasis this time around on app modernization, mixed reality' +\n\t\t\t\t\t 'and game development and software updates. App modernization is the term Microsoft used in its press event.' +\n\t\t\t\t\t 'Features that will affect most Windows 10 users and developers.';\n // Rendering Dialog on AJAX success\n var dialogObj = new ej.popups.Dialog({\n header: 'What’s Coming from Microsoft this Fall',\n showCloseIcon: true,\n width: '500px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose,\n content: lessContent,\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'More Details', isPrimary: true }\n }]\n });\n dialogObj.appendTo('#dialog');\n document.getElementById('dialogBtn').focus();\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n\n function dlgButtonClick() {\n if (this.btnObj[0].properties.content === 'More Details') {\n // Request to load AJAX content\n var ajax = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/dialog/blog.html', 'GET', true);\n ajax.send().then();\n // Rendering Dialog on AJAX success\n ajax.onSuccess = function(data) {\n dialogObj.setProperties ({content: data});\n };\n dialogObj.buttons = [{click: dlgButtonClick, buttonModel: { content: 'Less Details', isPrimary: true }}];\n } else {\n dialogObj.content = lessContent;\n dialogObj.buttons = [{click: dlgButtonClick, buttonModel: { content: 'More Details', isPrimary: true }}];\n }\n }\n\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\tvar lessContent = 'On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform.' +\n\t\t\t\t\t 'Much like its counter part, the Spring Creators Update, the release is set to deliver more features to Windows 10' + \n\t\t\t\t\t 'for both developers and users with particular emphasis this time around on app modernization, mixed reality' +\n\t\t\t\t\t 'and game development and software updates. App modernization is the term Microsoft used in its press event.' +\n\t\t\t\t\t 'Features that will affect most Windows 10 users and developers.';\n // Rendering Dialog on AJAX success\n var dialogObj = new ej.popups.Dialog({\n header: 'What’s Coming from Microsoft this Fall',\n showCloseIcon: true,\n width: '500px',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen,\n close: dialogClose,\n content: lessContent,\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'More Details', isPrimary: true }\n }]\n });\n dialogObj.appendTo('#dialog');\n document.getElementById('dialogBtn').focus();\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n\n function dlgButtonClick() {\n if (this.btnObj[0].properties.content === 'More Details') {\n // Request to load AJAX content\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/dialog/blog.html', 'GET', true);\n ajax.send().then();\n // Rendering Dialog on AJAX success\n ajax.onSuccess = function(data) {\n dialogObj.setProperties ({content: data});\n };\n dialogObj.buttons = [{click: dlgButtonClick, buttonModel: { content: 'Less Details', isPrimary: true }}];\n } else {\n dialogObj.content = lessContent;\n dialogObj.buttons = [{click: dlgButtonClick, buttonModel: { content: 'More Details', isPrimary: true }}];\n }\n }\n\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n"} \ No newline at end of file diff --git a/src/dialog/dialog-contents-via-ajax.html b/src/dialog/dialog-contents-via-ajax.html index 974f1b93..6d57cf31 100644 --- a/src/dialog/dialog-contents-via-ajax.html +++ b/src/dialog/dialog-contents-via-ajax.html @@ -18,10 +18,6 @@

        + + + + diff --git a/src/dialog/draggable-stack.json b/src/dialog/draggable-stack.json index 0b83edd8..5a2b463c 100644 --- a/src/dialog/draggable-stack.json +++ b/src/dialog/draggable-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n // Render the draggable Dialog\n var confirmDialogObj = new ej.popups.Dialog({\n header: 'Drag Me!!!',\n content: 'This is a dialog with draggable support.',\n showCloseIcon: true, closeOnEscape: false, width: '300px',height: '120px',\n allowDragging: true, isModal: true,\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen, close: dialogClose\n });\n confirmDialogObj.appendTo('#confirmDialog');\n // Create Button to open the draggable Dialog\n var confirmBtn = new ej.buttons.Button({});\n confirmBtn.appendTo('#confirmBtn');\n document.getElementById('confirmBtn').onclick = function () {\n confirmDialogObj.show();\n dialogOpen();\n };\n function confirmDlgBtnClick() {\n confirmDialogObj.hide();\n }\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n // Render the draggable Dialog\n var confirmDialogObj = new ej.popups.Dialog({\n header: 'Drag Me!!!',\n content: 'This is a dialog with draggable support.',\n showCloseIcon: true, closeOnEscape: false, width: '300px',height: '120px',\n allowDragging: true, isModal: true,\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen, close: dialogClose\n });\n confirmDialogObj.appendTo('#confirmDialog');\n // Create Button to open the draggable Dialog\n var confirmBtn = new ej.buttons.Button({});\n confirmBtn.appendTo('#confirmBtn');\n document.getElementById('confirmBtn').onclick = function () {\n confirmDialogObj.show();\n dialogOpen();\n };\n function confirmDlgBtnClick() {\n confirmDialogObj.hide();\n }\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n }\n"} \ No newline at end of file diff --git a/src/dialog/draggable.html b/src/dialog/draggable.html index e8e1d590..8cf850ae 100644 --- a/src/dialog/draggable.html +++ b/src/dialog/draggable.html @@ -26,32 +26,37 @@

        \ No newline at end of file + .e-btn-hide { + display: none; + } + + + + + \ No newline at end of file diff --git a/src/dialog/modal-dialog-stack.json b/src/dialog/modal-dialog-stack.json index 7cb500aa..8c8ca926 100644 --- a/src/dialog/modal-dialog-stack.json +++ b/src/dialog/modal-dialog-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n \n
        \n \n
        \n
        \n
        \n\n\n
        \n
        SSID:
        \n \n \n \n \n
        \n
        Close on overlay click
        \n         		\n \n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n \n // Rendering modal Dialog by enabling 'isModal' as true\n var dialogObj = new ej.popups.Dialog({\n width: '335px',\n header: 'Software Update',\n content: 'Your current software version is up to date.',\n target: document.getElementById('target'),\n isModal: true,\n animationSettings: { effect: 'None' },\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'OK', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose\n });\n dialogObj.appendTo('#modalDialog');\n document.getElementById('dialogBtn').focus();\n\n var checkBoxObj = new ej.buttons.CheckBox({ checked: false, change: onChange });\n checkBoxObj.appendTo('#checkbox');\n\n // Button has been created to open the modal Dialog\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n function dlgButtonClick() {\n dialogObj.hide();\n }\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n // Dialog will be closed, while clicking on overlay\n function onChange(args) {\n if(args.checked) {\n dialogObj.overlayClick = function () {\n dialogObj.hide();\n };\n }\n else {\n dialogObj.overlayClick = function () {\n dialogObj.show();\n };\n }\n }\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n \n
        \n \n
        \n
        \n
        \n\n\n
        \n \n \n \n \n \n
        \n
        Close on overlay click
        \n         		\n \n \n
        \n
        \n\n\n\n","index.js":"{{ripple}}\n \n // Rendering modal Dialog by enabling 'isModal' as true\n var dialogObj = new ej.popups.Dialog({\n width: '335px',\n header: 'Software Update',\n content: 'Your current software version is up to date.',\n target: document.getElementById('target'),\n isModal: true,\n animationSettings: { effect: 'None' },\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'OK', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose\n });\n dialogObj.appendTo('#modalDialog');\n document.getElementById('dialogBtn').focus();\n\n var checkBoxObj = new ej.buttons.CheckBox({ checked: false, change: onChange });\n checkBoxObj.appendTo('#checkbox');\n\n // Button has been created to open the modal Dialog\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n function dlgButtonClick() {\n dialogObj.hide();\n }\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n // Dialog will be closed, while clicking on overlay\n function onChange(args) {\n if(args.checked) {\n dialogObj.overlayClick = function () {\n dialogObj.hide();\n };\n }\n else {\n dialogObj.overlayClick = function () {\n dialogObj.show();\n };\n }\n }\n "} \ No newline at end of file diff --git a/src/dialog/modal-dialog.html b/src/dialog/modal-dialog.html index 4035e29c..fbfadba4 100644 --- a/src/dialog/modal-dialog.html +++ b/src/dialog/modal-dialog.html @@ -38,11 +38,12 @@ documentation section.

        - \ No newline at end of file + + \ No newline at end of file diff --git a/src/dialog/multiple-dialogs-stack.json b/src/dialog/multiple-dialogs-stack.json index 19ebf893..229011fc 100644 --- a/src/dialog/multiple-dialogs-stack.json +++ b/src/dialog/multiple-dialogs-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n

        \n This is the first dialog and acts as a parent dialog, you can open the second (child) dialog by clicking "Next".\n

        \n
        \n
        \n

        \n This is the second dialog and act as a child dialog.\n

        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n var dialogObj = new ej.popups.Dialog({\n header: 'First Dialog',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n showCloseIcon: true,\n width: 330,\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'Next', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose\n });\n dialogObj.appendTo('#defaultDialog');\n var dialogObj2 = new ej.popups.Dialog({\n header: 'Second Dialog',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n visible: false,\n isModal: true,\n showCloseIcon: true,\n width: 285,\n buttons: [{\n click: dlg2ButtonClick,\n buttonModel: { content: 'Close', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose2\n });\n dialogObj2.appendTo('#secondDialog');\n // Button has been created to open the Dialog\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n\n function dlgButtonClick() {\n dialogObj2.show();\n }\n function dlg2ButtonClick() {\n dialogObj2.hide();\n }\n // 'Open' Button will be shown, if Dialog is closed\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogClose2() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n // 'Open' Button will be hidden, if Dialog is opened\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n

        \n This is the first dialog and acts as a parent dialog, you can open the second (child) dialog by clicking "Next".\n

        \n
        \n
        \n

        \n This is the second dialog and act as a child dialog.\n

        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n var dialogObj = new ej.popups.Dialog({\n header: 'First Dialog',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n showCloseIcon: true,\n width: 330,\n buttons: [{\n click: dlgButtonClick,\n buttonModel: { content: 'Next', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose\n });\n dialogObj.appendTo('#defaultDialog');\n var dialogObj2 = new ej.popups.Dialog({\n header: 'Second Dialog',\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n visible: false,\n isModal: true,\n showCloseIcon: true,\n width: 285,\n buttons: [{\n click: dlg2ButtonClick,\n buttonModel: { content: 'Close', isPrimary: true }\n }],\n open: dialogOpen,\n close: dialogClose2\n });\n dialogObj2.appendTo('#secondDialog');\n // Button has been created to open the Dialog\n var button = new ej.buttons.Button({});\n button.appendTo('#dialogBtn');\n document.getElementById('dialogBtn').onclick = function () {\n dialogObj.show();\n };\n\n function dlgButtonClick() {\n dialogObj2.show();\n }\n function dlg2ButtonClick() {\n dialogObj2.hide();\n }\n // 'Open' Button will be shown, if Dialog is closed\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n function dialogClose2() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n // 'Open' Button will be hidden, if Dialog is opened\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n"} \ No newline at end of file diff --git a/src/dialog/multiple-dialogs.html b/src/dialog/multiple-dialogs.html index 3264c606..24b1a09f 100644 --- a/src/dialog/multiple-dialogs.html +++ b/src/dialog/multiple-dialogs.html @@ -28,33 +28,38 @@

        \ No newline at end of file + .e-btn-hide { + display: none; + } + + + + + \ No newline at end of file diff --git a/src/dialog/position-stack.json b/src/dialog/position-stack.json index a8f7b9ec..0423f916 100644 --- a/src/dialog/position-stack.json +++ b/src/dialog/position-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var dialog = new ej.popups.Dialog({\n // Set Dialog position\n position: { X: 'center', Y: 'center' },\n // Disable the Esc key option to hide the Dialog\n closeOnEscape: false,\n // Enables the close icon button in header\n showCloseIcon: true,\n // Enables the header\n header: 'Choose a Dialog Position',\n // The dialog shows within the target element\n target: document.getElementById(\"target\"),\n // Dialog width\n width: '452px',\n open: dialogOpen,\n close: dialogClose,\n //Dialog footerTemplate\n footerTemplate: 'Position: { X: \"Center\", Y: \"Center\" }'\n });\n // Render initialized Dialog\n dialog.appendTo('#dialog');\n var onChangeHandler = function (args) {\n dialog.position.X = args.value.split(\" \")[0];\n dialog.position.Y = args.value.split(\" \")[1];\n var txt = args.event.target.parentElement.querySelector('.e-label').innerText.split(\" \");\n document.getElementById(\"posvalue\").innerHTML = 'Position: { X: \"' + txt[0] + '\", Y: \"' + txt[1] + '\" }';\n };\n var radioButton = new ej.buttons.RadioButton({ label: 'Left Top', value: 'left top', change: onChangeHandler });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Top', value: 'center top', change: onChangeHandler });\n radioButton.appendTo('#radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Top', value: 'right top', change: onChangeHandler });\n radioButton.appendTo('#radio3');\n radioButton = new ej.buttons.RadioButton({ label: 'Left Center', value: 'left center', change: onChangeHandler });\n radioButton.appendTo('#radio4');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Center', value: 'center center', change: onChangeHandler, checked: true });\n radioButton.appendTo('#radio5');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Center', value: 'right center', change: onChangeHandler });\n radioButton.appendTo('#radio6');\n radioButton = new ej.buttons.RadioButton({ label: 'Left Bottom', value: 'left bottom', change: onChangeHandler });\n radioButton.appendTo('#radio7');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Bottom', value: 'center bottom', change: onChangeHandler });\n radioButton.appendTo('#radio8');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Bottom', value: 'right bottom', change: onChangeHandler });\n radioButton.appendTo('#radio9');\n // Sample level code to handle the button click action\n document.getElementById('dialogBtn').onclick = function () {\n // Call the show method to open the Dialog\n dialog.show();\n };\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n var dialog = new ej.popups.Dialog({\n // Set Dialog position\n position: { X: 'center', Y: 'center' },\n // Disable the Esc key option to hide the Dialog\n closeOnEscape: false,\n // Enables the close icon button in header\n showCloseIcon: true,\n // Enables the header\n header: 'Choose a Dialog Position',\n // The dialog shows within the target element\n target: document.getElementById(\"target\"),\n // Dialog width\n width: '452px',\n open: dialogOpen,\n close: dialogClose,\n //Dialog footerTemplate\n footerTemplate: 'Position: { X: \"Center\", Y: \"Center\" }'\n });\n // Render initialized Dialog\n dialog.appendTo('#dialog');\n var onChangeHandler = function (args) {\n dialog.position.X = args.value.split(\" \")[0];\n dialog.position.Y = args.value.split(\" \")[1];\n var txt = args.event.target.parentElement.querySelector('.e-label').innerText.split(\" \");\n document.getElementById(\"posvalue\").innerHTML = 'Position: { X: \"' + txt[0] + '\", Y: \"' + txt[1] + '\" }';\n };\n var radioButton = new ej.buttons.RadioButton({ label: 'Left Top', value: 'left top', change: onChangeHandler });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Top', value: 'center top', change: onChangeHandler });\n radioButton.appendTo('#radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Top', value: 'right top', change: onChangeHandler });\n radioButton.appendTo('#radio3');\n radioButton = new ej.buttons.RadioButton({ label: 'Left Center', value: 'left center', change: onChangeHandler });\n radioButton.appendTo('#radio4');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Center', value: 'center center', change: onChangeHandler, checked: true });\n radioButton.appendTo('#radio5');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Center', value: 'right center', change: onChangeHandler });\n radioButton.appendTo('#radio6');\n radioButton = new ej.buttons.RadioButton({ label: 'Left Bottom', value: 'left bottom', change: onChangeHandler });\n radioButton.appendTo('#radio7');\n radioButton = new ej.buttons.RadioButton({ label: 'Center Bottom', value: 'center bottom', change: onChangeHandler });\n radioButton.appendTo('#radio8');\n radioButton = new ej.buttons.RadioButton({ label: 'Right Bottom', value: 'right bottom', change: onChangeHandler });\n radioButton.appendTo('#radio9');\n // Sample level code to handle the button click action\n document.getElementById('dialogBtn').onclick = function () {\n // Call the show method to open the Dialog\n dialog.show();\n };\n function dialogOpen() {\n document.getElementById('dialogBtn').style.display = 'none';\n }\n function dialogClose() {\n document.getElementById('dialogBtn').style.display = 'block';\n }\n"} \ No newline at end of file diff --git a/src/dialog/position.html b/src/dialog/position.html index 0e2e7d37..0aeb3a7c 100644 --- a/src/dialog/position.html +++ b/src/dialog/position.html @@ -41,11 +41,6 @@

        \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/dialog/resizable-stack.json b/src/dialog/resizable-stack.json index 20cfa39e..19197237 100644 --- a/src/dialog/resizable-stack.json +++ b/src/dialog/resizable-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n // Render the resizable Dialog\n var resizeDialogObj = new ej.popups.Dialog({\n header: 'Resize Me',\n content: 'This is a dialog with resizable support.',\n showCloseIcon: true, closeOnEscape: false, width: '300px',\n enableResize: true,\n allowDragging: true,\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen, close: dialogClose\n });\n resizeDialogObj.appendTo('#resizeDialog');\n // Create Button to open the resizable Dialog\n var resizeBtn = new ej.buttons.Button({});\n resizeBtn.appendTo('#resizeBtn');\n document.getElementById('resizeBtn').onclick = function () {\n resizeDialogObj.show();\n dialogOpen();\n };\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n \n
        \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n // Render the resizable Dialog\n var resizeDialogObj = new ej.popups.Dialog({\n header: 'Resize Me',\n content: 'This is a dialog with resizable support.',\n showCloseIcon: true, closeOnEscape: false, width: '300px',\n enableResize: true,\n allowDragging: true,\n target: document.getElementById('target'),\n animationSettings: { effect: 'None' },\n open: dialogOpen, close: dialogClose\n });\n resizeDialogObj.appendTo('#resizeDialog');\n // Create Button to open the resizable Dialog\n var resizeBtn = new ej.buttons.Button({});\n resizeBtn.appendTo('#resizeBtn');\n document.getElementById('resizeBtn').onclick = function () {\n resizeDialogObj.show();\n dialogOpen();\n };\n // Buttons will be shown when Dialog is closed\n function dialogClose() {\n document.querySelectorAll('.dlgbtn')[0].classList.remove('e-btn-hide');\n }\n // Buttons will be hidden when Dialog is opened\n function dialogOpen() {\n document.querySelectorAll('.dlgbtn')[0].classList.add('e-btn-hide');\n }\n"} \ No newline at end of file diff --git a/src/dialog/resizable.html b/src/dialog/resizable.html index 737ab8c8..9da1eeed 100644 --- a/src/dialog/resizable.html +++ b/src/dialog/resizable.html @@ -17,30 +17,41 @@

        - .e-btn-hide { - display: none; - } - .dlgbtn { - margin-right: 10px; - } - #container { - height: 100%; - min-height: 280px; - position:relative; + + \ No newline at end of file + } + .material #resizeDialog.e-dialog, .bootstrap #resizeDialog.e-dialog, + .bootstrap4 #resizeDialog.e-dialog { + min-height: 125px; + } + .fabric #resizeDialog.e-dialog, .highcontrast #resizeDialog.e-dialog { + min-height: 135px; + } + + \ No newline at end of file diff --git a/src/dialog/sample.json b/src/dialog/sample.json index cbac52b0..71a3b6ae 100644 --- a/src/dialog/sample.json +++ b/src/dialog/sample.json @@ -3,18 +3,17 @@ "directory": "dialog", "category":"Layout", "ftName": "modal-dialog", - "type": "update", "samples" : [ - {"url":"default", "name": "Default Functionalities", "description":"This sample demonstrates the default rendering of the dialog component, which supports modal and non-modal (modeless) behavior based on its interaction state.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "closeOnEscape", "width", "open", "close", "visible", "show", "hide" ]}}, - {"url":"custom-dialog", "name": "Custom Dialogs", "description":"This sample demonstrates how to create custom dialogs such as alert dialogs, confirmation dialogs, and prompt dialogs using the Essential JS 2 dialog component.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "closeOnEscape", "width", "open", "close", "visible", "show", "hide"]}}, - {"url":"template", "description":"This sample demonstrates how to customize user interface elements like the header, footer, and content of the dialog component using a template.", "name": "Template", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "isModal", "width", "open", "close", "show", "hide"]}}, - {"url":"modal-dialog", "name": "Modal", "description":"This sample demonstrates the modal pop-up behavior of the dialog component, which helps display critical information such as errors and warnings.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "isModal", "width", "open", "close", "show", "hide", "overlayClick"]}}, - {"url":"dialog-contents-via-ajax", "description":"This sample demonstrates how to load the content of the dialog component from external sources such as a file or website using the Essential JS 2 Ajax library.", "name": "Ajax Content", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "width", "open", "close", "show"]}}, - {"url":"draggable", "name": "Draggable", "description":"This sample shows how to enable drag-and-drop actions in the dialog component to help reposition the dialog efficiently.", "category":"Dialog","api":{"Dialog":["width","header","content","target","allowDragging","animationSettings","open","close","closeOnEscape"] } }, - {"url":"resizable", "type": "new", "description":"This sample shows how to create resizable modal in dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } }, - {"url":"position", "name": "Positioning", "description":"This sample demonstrates how to display the dialog component at various built-in and custom positions.", "category":"Dialog","api":{"Dialog":["width","header","target","footerTemplate","open","close","closeOnEscape","position","showCloseIcon"] } }, - {"url":"animation", "name": "Animation", "description":"This sample demonstrates how to open or close the dialog with various animation effects, and how to customize the animation duration and delay.", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","content","buttons"] } }, - {"url":"multiple-dialogs", "name": "Multiple Dialogs", "description":"This sample demonstrates how to display multiple dialogs sequentially and how to open multiple dialogs simultaneously for both modal and modeless dialogs.", "category":"Dialog","api":{"Dialog":["width","header","target","animationSettings","open","close","closeOnEscape","buttons"] } } + {"url":"default", "name": "Default Functionalities", "description":"The example demonstrates the default rendering of the JavaScript(ES5) dialog, which supports modal and non-modal (modeless), built-in buttons, and more.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "closeOnEscape", "width", "open", "close", "visible", "show", "hide" ]}}, + {"url":"custom-dialog", "name": "Custom Dialogs", "description":"This example demonstrates how to create custom dialogs such as alert dialogs, confirmation dialogs, and prompt dialogs using the JavaScript(ES5) dialog control.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "closeOnEscape", "width", "open", "close", "visible", "show", "hide"]}}, + {"url":"template", "description":"This example demonstrates how to customize user interface elements like the header, footer, and content of the JavaScript(ES5) dialog control using a template.", "name": "Template", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "isModal", "width", "open", "close", "show", "hide"]}}, + {"url":"modal-dialog", "name": "Modal", "description":"This example demonstrates the modal pop-up behavior of the JavaScript(ES5) dialog control, which helps display critical information such as errors and warnings.", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "isModal", "width", "open", "close", "show", "hide", "overlayClick"]}}, + {"url":"dialog-contents-via-ajax", "description":"The example demonstrates how to load the content of the JavaScript(ES5) dialog control from external sources such as a file or website using Ajax library.", "name": "Ajax Content", "category":"Dialog", "api":{"Dialog": [ "header", "content", "target", "showCloseIcon", "buttons", "animationSettings", "width", "open", "close", "show"]}}, + {"url":"draggable", "name": "Draggable", "description":"This example shows how to enable drag-and-drop actions in the JavaScript(ES5) dialog control to help reposition the dialog efficiently.", "category":"Dialog","api":{"Dialog":["width","header","content","target","allowDragging","animationSettings","open","close","closeOnEscape"] } }, + {"url":"resizable", "description":"This example shows how to create resizable modal in the JavaScript(ES5) dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } }, + {"url":"position", "name": "Positioning", "description":"This example demonstrates how to display the JavaScript(ES5) dialog control at various built-in and custom positions.", "category":"Dialog","api":{"Dialog":["width","header","target","footerTemplate","open","close","closeOnEscape","position","showCloseIcon"] } }, + {"url":"animation", "name": "Animation", "description":"This example demonstrates how to open or close the JavaScript(ES5) dialog with various animation effects, and how to customize the animation duration and delay.", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","content","buttons"] } }, + {"url":"multiple-dialogs", "name": "Multiple Dialogs", "description":"This example shows how to display multiple dialogs sequentially and open multiple dialogs simultaneously for both modal and modeless JavaScript(ES5) dialogs.", "category":"Dialog","api":{"Dialog":["width","header","target","animationSettings","open","close","closeOnEscape","buttons"] } } ] } \ No newline at end of file diff --git a/src/dialog/template-stack.json b/src/dialog/template-stack.json index 65c38781..d92f0e1b 100644 --- a/src/dialog/template-stack.json +++ b/src/dialog/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n \n var sendButton = new ej.buttons.Button({});\n var iconTemp = '';\n var headerImg = '';\n\t\tvar message = 'Greetings Nancy! When will you share me the source files of the project';\n \n var dialogObj = new ej.popups.Dialog({\n footerTemplate: ' ' + iconTemp,\n header: headerImg + '
        Nancy
        ',\n \tcontent: '
        ' + message + '
        ',\n showCloseIcon: true,\n target: document.getElementById('target'),\n width: '435px',\n open: dialogOpen,\n close: dialogClose,\n height: '76%',\n });\n dialogObj.appendTo('#template'); \n sendButton.appendTo('#sendButton');\n\n document.getElementById('targetButton').onclick = function() {\n dialogObj.show();\n };\n (document.getElementById('sendButton')).onkeydown = function(e) {\n if (e.keyCode === 13) { updateTextValue(); }\n };\n (document.getElementById('inVal')).onkeydown = function(e) {\n if (e.keyCode === 13) { updateTextValue(); }\n };\n document.getElementById('sendButton').onclick = function(e) {\n updateTextValue();\n };\n function updateTextValue () {\n var enteredVal = document.getElementById('inVal');\n var dialogTextElement = document.getElementsByClassName('dialogText')[0];\n var dialogTextWrap = document.getElementsByClassName('dialogContent')[0];\n dialogTextElement.innerHTML = enteredVal.value;\n enteredVal.value = '';\n }\n function dialogClose() {\n document.getElementById('targetButton').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('targetButton').style.display = 'none';\n }\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n \n var sendButton = new ej.buttons.Button({});\n var iconTemp = '';\n var headerImg = '';\n\t\tvar message = 'Greetings Nancy! When will you share me the source files of the project';\n \n var dialogObj = new ej.popups.Dialog({\n footerTemplate: ' ' + iconTemp,\n header: headerImg + '
        Nancy
        ',\n \tcontent: '
        ' + message + '
        ',\n showCloseIcon: true,\n target: document.getElementById('target'),\n width: '435px',\n open: dialogOpen,\n close: dialogClose,\n height: '76%',\n });\n dialogObj.appendTo('#template'); \n sendButton.appendTo('#sendButton');\n\n document.getElementById('targetButton').onclick = function() {\n dialogObj.show();\n };\n (document.getElementById('sendButton')).onkeydown = function(e) {\n if (e.keyCode === 13) { updateTextValue(); }\n };\n (document.getElementById('inVal')).onkeydown = function(e) {\n if (e.keyCode === 13) { updateTextValue(); }\n };\n document.getElementById('sendButton').onclick = function(e) {\n updateTextValue();\n };\n function updateTextValue () {\n var enteredVal = document.getElementById('inVal');\n var dialogTextElement = document.getElementsByClassName('dialogText')[0];\n var dialogTextWrap = document.getElementsByClassName('dialogContent')[0];\n dialogTextElement.innerHTML = enteredVal.value;\n enteredVal.value = '';\n }\n function dialogClose() {\n document.getElementById('targetButton').style.display = 'block';\n }\n function dialogOpen() {\n document.getElementById('targetButton').style.display = 'none';\n }\n "} \ No newline at end of file diff --git a/src/dialog/template.html b/src/dialog/template.html index 1bcd5810..9a0c9797 100644 --- a/src/dialog/template.html +++ b/src/dialog/template.html @@ -47,6 +47,9 @@ .bootstrap .e-dialog .e-dlg-header-content { background-color: #428bca; } + .bootstrap4 .e-dialog .e-dlg-header-content { + background-color: #007bff; + } .highcontrast .e-dialog .e-dlg-header-content { background-color: #ffd939; } @@ -67,6 +70,11 @@ top: 3px; left: -11px; } + .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn, + .bootstrap4.e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { + top: 8px; + } + .e-dialog .e-dlg-header { position: relative; } @@ -159,6 +167,9 @@ .highcontrast .e-dialog .e-footer-content { border-top: 0.5px solid #fff; + } + .bootstrap4 .e-dialog .e-footer-content { + border-top: 1px solid #e9ecef; } .highcontrast .dialogContent .dialogText { background-color: #bfbfbf; @@ -198,6 +209,10 @@ .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus { background-color: rgba(255,255,255, 0.10); } + .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, + .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus { + background-color : transparent; + } .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close , .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close, .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close, diff --git a/src/document-editor/default-stack.json b/src/document-editor/default-stack.json index 01ccfe91..265851fb 100644 --- a/src/document-editor/default-stack.json +++ b/src/document-editor/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n Essential JS 2 - DocumentEditor\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n\n //Documenteditor control rendering starts\n var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';\n var container = new ej.documenteditor.DocumentEditorContainer();\n ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);\n container.serviceUrl = hostUrl + 'api/documenteditor/import';\n container.appendTo('#container');\n var defaultDocument = { \"sections\": [{ \"sectionFormat\": { \"pageWidth\": 612, \"pageHeight\": 792, \"leftMargin\": 72, \"rightMargin\": 72, \"topMargin\": 72, \"bottomMargin\": 72, \"differentFirstPage\": false, \"differentOddAndEvenPages\": false, \"headerDistance\": 36, \"footerDistance\": 36 }, \"blocks\": [{ \"paragraphFormat\": { \"afterSpacing\": 30, \"styleName\": \"Heading 1\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Adventure Works Cycles\" }] }, { \"paragraphFormat\": { \"firstLineIndent\": 36, \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Adventure Works Cycles, the fictitious company on which the \" }, { \"characterFormat\": {}, \"text\": \"AdventureWorks\" }, { \"characterFormat\": {}, \"text\": \" sample databases \" }, { \"characterFormat\": {}, \"text\": \"are based, is a large, multinational manufacturing company. The company manufactures and sells metal \" }, { \"characterFormat\": {}, \"text\": \"and composite bicycles to North American, European and Asian commercial markets. While its base \" }, { \"characterFormat\": {}, \"text\": \"operation \" }, { \"characterFormat\": {}, \"text\": \"is located in\" }, { \"characterFormat\": {}, \"text\": \" Bothell, Washington with 290 employees, several regional sales teams are located \" }, { \"characterFormat\": {}, \"text\": \"throughout their market base.\" }] }, { \"paragraphFormat\": { \"firstLineIndent\": 36, \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"In 2000, Adventure Works Cycles bought a small manufacturing plant, \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno, \" }, { \"characterFormat\": {}, \"text\": \"located in Mexico. \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno manufactures several critical subcomponents for the \" }, { \"characterFormat\": {}, \"text\": \"Adventure Works Cycles product line. These subcomponents are shipped to the Bothell location for final \" }, { \"characterFormat\": {}, \"text\": \"product assembly. In 2001, \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno, became the sole manufacturer and distributor of the \" }, { \"characterFormat\": {}, \"text\": \"touring bicycle product group.\" }] }, { \"paragraphFormat\": { \"styleName\": \"Heading 1\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product Overview\" }] }, { \"rows\": [{ \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": \"11\" }, \"inlines\": [{ \"characterFormat\": { \"fontSize\": \"11\" }, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAJ9jasrL+Nbm78GAg/LN0Ozt/uLj/tnZ59PT/tzd/vP09KWnqoWGicbI2iNckVRVWZCaq/RMLzo8QJijrnR6hJeYm/0pALnFze3x+WqcyzdBTPn6+nZ2efr7/WVmaY2wyex3bVVZYPCLgcbG7P4xAvf5/Orr7HiGkNu6vqdsdnKRrrq7x9vc3lZjcuHj5KmsryYmKdLT1e+2t7TR4k50kkpMUYqMkvfm58rLzubd4+5YROzt8bu8vuxnWWhrcsLCxfv9+zk5PS5QdExzqM3Au/b2/sTFy0NESK2PjzI1OePl6c3R1o6UmPg5Evb2+UlKTfDw//39+tTU99Sxs7KztG1yedpqcU5RVgxNdj9BRTIyNdTV2t3d9GpSblmMugwND66wtuPj9fr698FUTxE0SyorL+Tp7b6+1tfa3Ke4yPjt8MzW5vfd27S2ujU4PcbIy4NPU72/5Q8nNdVGNS0xNj4+QqKrwqSjoeo1Gbe5vefo/nSmu/n3+vHx+NDO1vhCHqGfpuk9JRAZIGdtykVHS3Rsdg40aaa/1/fz79bZ/ZSEgLOttD83Ofv19lM0NNE5IvWglfL2/tozE4zC2tTa0+jn6kZbkPL2+c/O6lBOUyY4bf37/tvLzDEuNmd+prU8MSt5sLOzrLCrrX5lavb49XFlWf77+snGzYSkx77Awd7g4R9CWc/P+7u9tdjW1tra2MXIxdzu97u1vK1DQElFTDY1OVxJTuODh9jY/h0cIsjFxZCPlJ/J6NHTz9nV3woXTewrBrS4tpeVjufj5FZSUIyNiZ2foTArLL8uWM7Lx+/w8fTz+dbY8Li1tTxifUpGMjcyNOrn8n5/gn1ydOCVnv4iAOgsEfQwDejo+9jX9q2vsc7P0WxtbUdDRCAgIubo6DEwMUxJSRsZGvv9/f3///3//fv///39//39/fv9/////fv//fn9/f/9//j9//P///n//P/9/F5eYvLz/goiapy12LGwxzxIUcSh0i0vMcLd7WWFnJuz/K2Jz/////z+/iH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCAv6W8iwocOHDskVHNeB3UB/5MaNY9ehw7iEIEOKHEmypMmTKFOqVAmxpcuFEglq7PCvA7kdr/zV1Liyp8+fQIMKFfqyaMOYAykqJbdBmDxX5HT+4+hxqNWrWLNqRWi0a0FyURu6OFKGAw8WG3TSpLm1rdu3cEF2LYr0H9gNaHhsw8FA2oMqVThc4YDDZgcgdeMqXsz459yXBKNymvYABgxv4r4Q81BDGocgMKSlTdy4tOnTXB9DVCgsHLRc3hgRmxbOc50H8nzIq8XABGnUwIMvVv0QKdhtx8SF4EABGrhujB4U8/ykTJbluzb8Fs69+1XiDiOX/6BSCNCyb0w6ZaIl7/YbMCGCeCu0wwlb7/jzEwXP0KC/DiVsMQEF4nRyDDTQyCNPGUHksY0CGOkn4YQr8deQQVEp4MIP3NTgTR3EhAODOFnssBCFPI3jjjvssPPRQBZZRCGFFob3FUMxZCIPNMRwEA4VJcxol0DGSQSWT2AlqaSSQgZVY0QTjbOQDR7cw8Q3DMSQkYRLdunll2Am6VWTjj0J5UAbAOEPC/Ls48UFCyygwHaogWXmnReS6ROeUH40jpq71OAmLAt8I5V3YfH5kp1F6bmnohdS9I8/ldThgRdpvJDHiS8KlyikLX3akqM9gXrUn2kZA8M+KkhDDAOVZP/Ek2lKmmomqRXayhBF/ihDSB0naEGLB5t61GljourKH64sKQuTmtqUIc1utIii06ylJYtRLDNMsse3KniRQQbhZgDut3tAEK4K7O5zgjTSsNqBasym5KxDytjwAAN1PKHNJsdmC5E+oDiAhSFkkGEIFmSs0jAWEK+SRBJ0aLEKFqvQUbEWtSRx8Qf01nvSvQ2lwsADHHjAgSqbbHCfwA7FYjAWDnhhgzF5tEHBEYzUUUcWGgS9StD3ZAH0PaskfbEhe4QscklhRu2lXUxO6sI2FWTi6i7G+IYtzA2hggUqawigzKQL7aBNCLVIYHQWF0OMxT1FCyG3EC20APJjTzf/VpVMHZyjyr6d+EVYTTtxB9YMaLykijSZ1BKEBhffI8TQWdSxCg0qfLDNMCY44XTfp2l0DhV17EILLQzsooQ/G0hoFB88+CWBBkJogPQq3WhgyN4Wkh6cPy98AY0HDJTBg8tsBRwcUkWVQIMWWQhhOca+j/2k8KhJ2UYtZXgD+Qv+AEGT8/lp608kQoBzscKGxO/AB7Fsz31jH6lJBQ1yuPGAFja4lp9kgj64GOk3yXLCPqrQAiwIgQZ7+MAH9OGOW92vNL2iQMLcYIOV2SRFHgnhyxTjD3SYsIBoa0gJLrEABnCgApC6oFZQSI5L8KAKgiCDIFowgRlAgSFHmgmt/8hxDjoRCV+P2wUhcBBDGQ7nAi24BxnkQAY3TEAAqwGOP85xjq/caFcsSAUHqlAIUDkRK+MowQgF4g8qCCEEq8hhLhggAxmoIVRG3Ao5yoEOL0amIapYAhP88gOIdImNYzqjVTpyEH/sQQjO0CEV4XCNakQABHZUH1L81Kk1OqaPfhxIojbwAzRIowoeQIeNDqK+hyjSKi+KnUIm4UCH5aIFs9ABCP5gAQtEQAQEaIQ6DCmQrzFyKFsKSaJYgIMbPiAVZ2IlZF6ZlY90YAPjiIk/xuEDIVyODGUYwhiaoAMr3EIHf6gGCX7JBj6MqphAwMqRQPKRhrQhBhXwQSqjif+haVJzkbM6pj90cQ8HOqMOLRhEIHpJgib0AAQg0ME1LHANHUCCDfHAozwTEzBzRMIeONjBDoyAg5QxgJjSdMk/rxJCjSyFHBWgARkeWIV9jGEMVojARC2wzh6IIKckqIZDL5rCUMWFHO7ogjfukQdVLKAKD1AFSvup0pUOhSLNo4k/FOCBSGLBGT6YxjWo8Y4dyAAEeGDoOkFwCxAEIqh46IEMbpDRRcUEhT9RRx40AI0H7CJluzAqK8Nk1bZIKQ1V0AAMVuGME4yBBDJgSAfYQA2J9tIC5IRoD9JpgT9g8o6NChheTcIOf1zAm3SAgf9SoY5h8rOwz3uHF5yhBTr/rGIICvUlARyyDE7cYg4kYKhDzamDJljAkphsRCthghV1gIFyU5RALnKhjKnCdngCoAEWBAGDhCJDBxGwJBseYg4nnJWXDP1DD25hBYmq85fBNEqSevIif6yBAg6YohwEQYsKbMK61zWNRvxhjHt4Yb8PQIUIrjEGXkZgvIaMhgx6YFyeXiMC6wVBBIJaUWDyYbn9Ock4sCmQHUDAYfGTgxy4sc1k5THAM5yKRtLhDw+oAAJkyMUVMOGPBVshnQ9eFGV1AAzhRoC9m60GRS1KgHbIlyRiYogJKuCMb5JBGoiABzxcDGPFgNAdI0aHMULwAfy2oAo8JoePHcwGRrWk/w8TvgYJ5tzZcooAnccd6g1ovKjIiKmVSqiCIRzgAA2Q4Q3qYMcmnPzaLm9FKewAgimGuQl5fMENzKEAE9awkHSA4Bo/Fm+UWwKPKYxBznQmQSAeGtHgWiCuc3UtnyAghIc5AALudMmLHR0UjWyCHWIwxTeWYIYqHOML4giHBGAhkYVs4tM/9mWbj+iSEQB3ztimaASs8NMNK9mzcwVxVxQAAYM1TAhtoAuv39KRTcCDFM3wQAtGkQJhFMMWXwBHThLFhx6AGsjTRiRE3jEAns6ZnBWesy6t4Nag+vKzsgbPFjxht9yt4gCHWjet0qSMB4SAF84IQQWmcYI9cEMBdv9pSL/xcAte6iDgul4BMP6wYQvcgg230Oll/6CDW5yTl+8F5jL4Q2vKPZACGLirxhmzEfP5IxW00NskroCbQuzBBxBix6ca0YO4GvflzXZJJB6rgzkHYrx8kIEIFsrQVRPXuNXoMAGiIG5/TIAbFKCBM+gASSYu/TQukhIDGLGPB06CDvJgAgSeYKgBN6QROrAGhS0A9uUeQhIRqPktwvIPNUy4whT9gznbW0meMvm/LwGDHMrghqTRoQpO2PXfs+Iif7jAA9PYgyDkQANXVQECNXhdRaTUEDXowOsW6AGEXfIOAJCg7A1dPkzYAIniMrSio/e2UHtwUeI/RA2KSBj/DORAhxqYIOOzV4xF2jgNHNBAEIJYhSLszYAKVBcILiuqP4yPBxAYtwc3UBQXIAk0F1wgYA6iQg6mQAAiEAGXhVk68FObdVyYJVcBeBQgQAJj4AaCkAuCQAebkn4/MVoHoXXkMA0LgAqr8AVycAIsYALKUFr/wBPYJCpqEAGB4H8WAAK51hKRkAKUN2d4MG3aogYEsEsM1Vk9QFzo1VmfFRVqwEt/MA1xVAYt4ALo5xYudUEudRjxBARAMEAIMWLl0AyFwAL7IAhf4AymAESp0RA3gIP+Vw0ggHpQ4g8z8AgFuIPGYUie13WXpWpsdU4TpWSXRADUIGdzIA02cA+C/6ANWZgSYDiJOzFAnKQUnlQvf/MnlDhiX5NybKQKmXAHS+AMLPgB6pA4CfEQcdgEOigCKTRfdvEOirBOTdBQu0UQLpEO1Gd9wYV9P2VZr/ZWJAAAFLALT/ACWyB7IUGJ/xCGM1hMW/giJOgoxhI784UOdTFgOOAKDGEMtPAKh7BfWIBFYYhXycIGTeCKTVANIpAoCjEDn7CHB1gXbhYR5MCADnh9PddWgYAHeNBQ02ADVfAE8xIUHeERGREVRTVPxcQ990gO6fAPLjNi9+gKTyAO3GAMxeAB0uAC7/cFNHAJ2zQVIeF9DCEDTeBZxvWOIUYk5mADvnSLTUAA23GPQP/keUjIU3Xmc3M2BlVQAVkAQ+UQTz/xKf9QAgqgAMqgDEvpEefghiLzKRryA3HiQtKgMibFBBWQCtugDMZQBR0ZBB7gATwgAHEkByCjEUAADyABhvrnDzJwDZ4VXCIglWykD7PQBDUHAg4JEqPmDzcQZ5d1DdcGACfAAFmwDeWzElTZTAsALx6gIA9QmSEQGMWgDamABqSAl5EBHCB0GDMIEzvwA8bAAJlACOCTD2VQBvlwDDBQBpZxGflQC5ngAzZwCrKQCoUwDa+AY1+wClgkEEYJmCnnEDJAAixpAZCwENhCDu/ABMAQATSZiyeRKJNVWRM1Z1NIJfJQks0Il+b/oxFRMQ5msA2R+QBHIDm1kA/yQAhHwA1BUAOEoAVPUANu4AZHIA8csAAxUF0YISsjFjtb6DecmE1b9A0vwA2ZEJut2QmSwzFBEAQSIAG1kAUSUAf5EARZkA/i4AEVEAQhMA3FcAnvx3tSIUQk8RCQ8HDB1Zzo5w96uU4GiIAqwW8E0AM8NQealgULAJ4gkSZfSHwjtQsPcB306QF1wJ9ZIA9XkAUPUAfhUANaQAiTKQ8Y6gEW6gFMYATzQg74J0seUZyKcU0KSQ4K8AZVkAWWMaF1IAGEEAQPEAS1cAxBQDFuoAVJkA9JoAVaEARaAAPa4AHgwAi7wAMXIEmH8B9r/1GNF+EQkIBcL3oiuggB1kCdJHANNokk/uAOOlqMJ2ADdbADSjeGsbN+4+ACYKClR/AAEiAPrvoEb3oFgHqnbhAE4ECnSZAFQbCebkMI3HAE4JAE3LAA5yegStEYRukPJrAAcwoDHXMEHlALWJoFEDoxWpAPdLCnx9CaZUAH3+oNtcADlyEPizAMHwB/WMBp/6GiIwGGLCqpzEmpbCQAcECjfMiMCEEObBCQeDANTPAA0pCiJzkv48ACFXAFblADV0AINSABSSAB2cox7FkLEuoGSXCrtQANFlqhElADlsI2SRACxoCF2/SJR+UPTmAMuwEDD8uw1FML7akxGTsxNv87MRLgBjmbsTDgA7sgDuIzDLqgAkIgB86QCQzwOhLhqM8YT/GqS5Pah6hAgNWpr6xEDTwFlLuQBZsihgkRld9gA09wHU/wpHuan/nAMRB7sxNDszY7rG2bBLhaA/JwBFVwBDBAsiaytHBxGFpVAjzgA2WgBTUQpQ9ACHPqmhPjBuCqMa2pMZZRBp3Qtm5wD2DwAF8AAxWgDlvgABOwB6vQrQ+wAKITjQWqTBEhAtUAtfPKXP4gAKOAr/XomOSgAzwFBxRAAZkwKRsBD8nqUqRQgwrwAh5wBVdQthpaBhFLoXVQs2VQB+AjuZ2QD/nQCX5KB6wZsW67uEdgt3UAA5n/ACT+UAKk4K5YEbxS4goUAD61QAhXkKFzKrGMmw+xGQQ6wohMYAzGUAFMsAsMQAE+QAtfUAYLUApBIA6tIAZMQAYMcAL5AA3Qmw8ekApRQRNpsqKpu7oZ2LoR4g8foId/kKmbyhI5wEtNMA0nEwI4YAJRiREUATCHoR1O8APSEAJZ4AHx4ZpaIAFHkAXgYxkS8ATyIA3FYAxxog1U8AITAAiDxA0P8LCsh7GLGwRP4ANHAJ+14AFvgBFmyrQiVgL/cQcPO6HH+745m5+ymQ8hwAAv8AZbsASwwAMvoL/7awwvEAywwAHiUwy18ACd8AobUAHdQMSZAKEc86fGIDoa/xEkqAsR5wAC1fBQcwajOuEPsRC7fWmjIxEw5NCiJDAHTGADEnACnhACFNAASqAM/2UK7aBVO3AHRxoCssqaf+ozgQoONVAFxhAMwZDEd8AEoWwDRLwL+bsA2pAHeTABfqGtyuumPtOwSQADR2AM1fU3WeEPqsAAtXAEIfArRoOfzQutIPoGzLQAHBACV0Cf8uABxLAZHtANtqAIpfAMsCAPuQADjJADJoB7r6ALtCC5f4qrWuABLHCy9LRcHQDJPfCpMGonH/wHIayp24Et7OAOkVEE0AcH+6DNDLAGDZAGdsAuH5AGEMBE/hADPnAFHkAIhACuEesz9PsEDLAAqf/AA3fQOhUACKJgDCBFBHeQDKdQAQxgDEzQF0yAx3nAAFdABxxaB7eaBdzsAUFQBh5gKJl4lP6ABgsCv+3xplmQrYRgA2+ABiYTAjrCALLgB6qwBQhQBDdwfnzgC5XQANIgDKIAHcbjCpTQDaLgCjZwIEkADloADrWgoSocjaI0ESDGdZGso01Ayf6AAdMgu5psEKEZGWwgZ3jQBfTQKn3MmPqsBAdgB3SzAj9QvJlAq63pBrzamg8ACKkABkxQDIXQ1zsQOOOLCyUQbP4wDwjgTmJgAq6gDRTgAbvgINrADdD7pm5TmYQgAeCgwkA6gsbiDzxwBYR7pPCZBb9SBoT/UAEsgAYVIMvcYAMYxxBOQAoFUACmABZBYnedUJYwEAoLQAzDcAch0AvJUBm5CqjHcMgXmm4ZEcP+YRRq0AORrANCtVsMcQifsJIivB3ns0b+gLWfPAS/YAl7cAKZkARMQAgn5Q98kAqkfA9LGqdlcKESED4hsABGAAjScKg5kA0GgBHmgIDLgACXIAatVQABYBMpVwDZ8AbmXAV3sA2raqHMnQX0ueJZYAQuPINefBDvnQeZw7C/ss2qKQE2oAqqYAOEIA/GMAz+kAAGAOT/oAzqjQ3DRBHD1AIMQAmEAAPrzAGv4AHF8ApCbQzhkOIS0AnWq7M6uwCIcU1iwMld/3EDtgte1fAHDL4+DDBzNaqvSGW7JDAAlqAJDpABM7AEVQAOR5AE8nB+CsADE+AJ9yDYhe3DZXAEFWCV0rAAryA6/sAFrBAkCpnjyxAFPR4A2rER5IALNd4rqXBKL4AGLyAP+ZChPoO4RzCfbQCmYShLFTIOgNC9OBwCFfoEhEDVOOACoqzFUkIO7cAMP74lag4F2FAOOrEB6tAHIfADqfAFX8AI4FAByVAHqVABt6ENNKwFZWChGSuzGsoEkyKajWQUbBBe6zWdyzcDs6CcEW4S/kAA/soNTDAEDjAEZ6APDVAF4eAGF3oHC/AhDEC0udAJdVAG4jCuC1AMu7ACUf/JFOjg4yVADjRBDjkeCepADurg479OEQgQBuWgHf9xCh7ADS+gCsYgAXSAoRKQCQzrA0Hwo0yBJOSwANTjpKJOnxlrDGagDVZKBZWgFgCDAQEABUaiAKQABQZQlIdx0hqgCi5ACLuwC9MQAx25Da9SDODAAdtwByIyobdKoSJvA9eEjjjZEAtvc1ZgSQz+DjZAl/9X2cpkDp78CVXAAExwCKNAAUOwBntAA+3RnvD5wBwAATQAA1+gYxJ8B8PQDtmACy41DlAQAPOA83ax81NRDj5OE77r22w+gzahDi5gDz4gDWbAJjDwM0GAuB1KwNtE7fbyAm7jA/Ghn3N+BRf/YAYcQAgvkBanoAqy0gFOEAAGICsKIAZuHwVhqCbYYAOu8A8McAo4sAuLEA7a0AzdABCV/OF4EI7KDw8wJNRxU6eWhCxaFvj7949cRYwYO3T458/jR5AE/lgAEaHaHwIeeY0h8YfEtZQZZcokV0IHCRJwTnDwcMrSLyGHPuyhUSWcmyBJcnnzdozCPg1fvEnb5q/DOQwB9Fwk12fE1nEWlyGI9A9IuQIBOpBjt66AlCLlOozrsMkJLj0KdslzNY5BGQlHFmbyIQEGD4ozFc8M62/JkXxX5EmAeMQbNzOqanAz4S+siVQKxo3+lw1XubCXNkAxgA4IXbQG/Onipu0H/7QvX6Tt4kBunOddR4zhkFamVpYglBlmQUx33OuwM0FO90igCUkdJ9n4i6TCmksLPdxdlEk6IzkCOPHIYxICs5Au0jyhEjrkhIfjucTB+EKMg6cWpIGAhgM8G4eZAEr4Z5wNpEigHIzGmgdCtALYwLdyDGAFCHheO2eDBBL4zR8e5EEMDOOOCOIIH2rwJogYPPuHo8XKW9AfFkKQoAZCVMwiC28YKOKNJGxI56K5yIkBlgXHKScMVooA4h/VWCOvA38MMEAdHDIJZZEQaMlllweaK0cPA2SZagkmtNAiC8qCqKWOTNDwZ4MNgJhyMeqms84CEbKLYDt+4GjpJQLIy//IPIzIucUCEj6pgoknjPFnjQyG6MKSD2ZwwIF9GGAoidw46CYJTzyhARAhVvCND1YSMAsI0ywSC4G4LEqLxg4SOA0eeP6JggtcnABig478OKICf/IIYsU6spBHnlxC6Gw0ZGvE6Dl/FKiiDEI8EKyOOmDYxR8wkjCmCASgeG2DjX5QhRyO+giggHLIcWI1AxT1B69y/HFhEQgs0cSSO+RRhpxysEEgjA3Q2CyGCvJxQ0XlJPDgmzvzjG4mcsjrE73rbhGUDQwGkaSJ63owR9Ftz+tDB0h1kuYIVTbwpx5LcvkFlQ/2wQKLIZiQpxZwpILGAx8sWQOHXSxpwKNo7jX/i4souRorV3V2vaiERLDxh50O1MGGlUj03GgcUhqowgZ/fnjoiFoeCEGLXKRZcG1tMcKTgVpquOKKILKwjAl/jMkixg0MQEDB0dhRBhZlZuyAFQNSWy2Bi0YjhxU9gIhCmQU80eQXCDhggKICWMFGAXL8UYYbeWIwppYVn33IjdX/wbPvxkaW4ZprTK4mghsKPRSmxCqiiyYZgCEBDw9skIcbBbBURghLOLBkiDVCWAULB1TgoA4JaslDDSFCMGYCOzyZt4NysmFFwayg0BpXCLtWy7cisKIPvvFHH1iBLz0xiBQFMEAfGMCBc+TBDT+62LTycQerzKhvFfFHMJ4V/wIdHYEQMFidMSTAAn+U4Bx8wAUuxuGb36gCBxwhBxek8MIqcW5BGzgHAvDljxjYwQsOGEIbiBGjeSDAAGKwis464AF5LKECK4ITZSBCBX8ca0+LGU2fPEIOGbzEeBHwxSCs0QQShGct26JRRchhjkeRYBaTkgAVRPMbAZjuF/NRATRW4QCiSSMTEqjAHXygiS+0wBJbyKIYgOCEADyoA/diCzm2hhpypCUs5IBC1laIuXKsAwgbIYUecFGEkEljdQsog2CkVQdvgCNGH2MMRgQWglpkIhOE4CU4ONCsLKBwLnRRgBJHSSMc2OkfaUHlvqCgw2MVARfzsMgK7HEILP/U4w4e2EAJlOhEdszIH07wQBXQwAAtEAI5btCCG2rAsWz1zYtfhIQFiieofswBJ4hS1GvOg4hA4EQnHKjBFkrwPH+owAEU6IIh1nCCY3jDGaAAxX0AwwAbKHICaQgLvNQRhgBAoRyYyBxHxhIJuSwzAJ4zAC7S4Y9z4CIBG4AHO/RECgMkoARyqQkHMLiLfBwBffJ4AAw8sEbF0KUDyPKHDToRrhoc4Ql140MMJHCKLHJkNOUYS7/m0gEF/EAZ/ihCALBBDgWIAQq4MIc58PTMIohhA4CYwCR4oQ8wYBEBM7XKRiznj0rUoRiU4EY+CCGBINSBEEFgwgZoWaPYzfP/HyKwQBPGCIBH4CQ8L6vIFjmIApxIonoP4IAC4ukPBtDgdDTIACq4EYRmqICiNDBVELihinRswg5p2MQ5RIcO+5WAGYkICxD6gIB5XKRCxU3EltDBBVz9wx3P4UNONxCFPfkjDFfgATk8oAXBPOEJ4IDBRB7b2bX5YxtZqEMNMlGHJyCWBRt4AgOgOyHHviYeBWjXOTbiDyX8AF6JyIY6nKBWtpqDFPEwpU0xoAJ60MML9YiBC3yls3Ec9KsdcIIyVnCFF8CiBrUQahCQUodUyKhvkZXsLaph2QhYYA6Gwsk1ZEAeWoYMBJCSlA2e8AInDDNutXCDEFAxhF+o4AML/7jDHS7xAYpSQB5lYIAC7rTbdphlE/YyAJTWYlzkkuMsuyoHO5SoDgRBAR2jOVaISqA237QUDCHYgSrYi5w6POAJWdiBijPyVbR+Vx4e+NETygAIf1ShCrLDBHIh1CRTOK4IvnthDGKkoQ6QQgwFcKFb1dHSckShASpQgRCEMANdtLAEntFqcTeAUwPkIRw4eMEEMXYELXCAsxuc50c2AYKTUCPGjwhoGnuwxhxHIwICPYE06uACEyyIHBsozBOccTpbzMcFu+iMKQ7hBVDQthZPeINVdksO/34UcwGY0D+Om9x/oIUVToqEFOaBDa3Qiw94SoABgCDmtZQgAQHoM/8gFv2Cpz5Lz7lg1nmF/AYt0OkKWXiCFrjhjxdkwsrdwsQByzGluYjBVx0AgjkyDAsTzCOkmuYvabKUAHVEYQJe8EIG6nGIOOCqr3vrYq9O6Q9pFEIB0ngqnJIigR80T1u9/kgHgP0HaowBUvu0wI1BJgNIUc8GpDUB7H6TCgmAMAlG9sQQYvGBQ9zpNzHIQJTDkQ8GKKMdu12znqQQAEzooRwbOC5K4926c3TN3gHoF13EUAJc+HuYM0qAAPN1Dg4gmhtvSs4IszDWpE6bG7WoQgiy0CMJqMIEdahKkhTQ8QJciUGJp9dvvvEDJ4CO5QhgMzm05A8TaEATnvACKiD/oIQSqGNtWv2HOqSZgLO0wwnEaIMLMkFx9NUhHxSwCKMWE1mLeLERPTgJPlIwdWOPRybmsAKk5sgAcFDBBI5lkAeS8IAs5CMEQzDEEI7MBT7UZRPoCEMcwE2DwnoAHPAHLIs3eyG8vTuuuBgzVgg8DZGCbEiHcWCHDbgLPRgNDOwVVlgGdSAbf1AFeVAFVUisOgiCTDgCcXgBiqAlulCvi/GAB2gvc/EHDpAGivgqfyCFAwAd4aOLR0IAPfirLdiGBJACBYiC1nmVTUiAAlCHJdAjS8iAH4iCtcHAcOoaJaq+FwKDK3CCCqCDqIqTI4iRpTovxQiZedq+7gMA8LMx/5ghBzVwiWuAAwqoAkJwASvrCCOogyvwgSNoCE34AEswBCSwA1RIjLUIA2bgBVAYAgp4O2PgAztYAf/6B5CaKTC7hP4BPHIYuPvxDVKwQAghDQ10gtZbKn+oABtkgE7IgoY4Ahi4Aiubi5jxC425giM4AvYygV7Igs7YiGMiBzGAEgMwiwURAwzwIZ4qAVjYwUtAQlbwHQVAvHkAgioQAi8YAhXwA1dAB8eakeggB4fBl9E4B04zAGIAhErYs8NKDriziufRFhbrNTUQFHxgQ80SD3+ZgmsggUCggBSAg1HghBjYgXcoAR+IjCtYCDeQAE9wAEtQAfCJBSfYm3PgAv8uEIC2owEPyAcPYIE0OINNaIfLiRK+i64XArxxQIAAwAAFWgaA2YgLQTwE4AN4FDIleIIYQIPCSQ7BgIEUcw7nwRHDqYKJMzS48YBdwABVCJilKoG1iIJowJwX2ohNc7SwUAYjcB0sXCoFCCB3UAIvOB1LQIUJMAH/OqbiOwdfGaB4KwJfWQb1egATYIIkUKeFCAK6hCF5YrqPuAF71Kd9koHEIAd32DESGIMJCAR7koQ5GIMBGABHgAYJKAM6cAOjSgNU8AJ6QAVm8IJY6KuNYAYu+AdGpC1y0QY7mJp/wDc9EAMFxKS04KQACAMxI4U+wAVy9J1/oMkN6EG6oBf/FlAFBrBBDoCGOkgCFYGBX6IXGvmNO1DIJ8jFIHCBGJBFPcC7Hfi3uuCDTVCHHYgVXgGClgo4clCCM+ACf+AvqBQDdiGHgskUTzgEbRinuRgldUA8XNipj9MDBMgGJ/CHTfAHbgAEF9gzwUifJKjP5+hLv/SIGzCJCKAGNDK2EuCKGyg2AKCAMQgENLIAEG3MT/gER3CEYyiECii7IciATUGFSNiEuqAL0lQHjQSFKngALaiCsxynAECAPrik4mudf2G3V8MAXBApcCwHxEuEtaBFctgEEzACP3CCZfjIbUiCLHgIQsiHZzMQN1IAD3ADHwiBI6gBLbBBbmi4IjCA/wBghj4oh01wDnVQBlbYT9TYAD4IEefwh1RADP6SEiCYhwR4MLLMgAlwBc9gBwVRhyTKHIaBSwTABnUQ0AE1AnkoAQYIgsOKliCoAuKTxwf9CAIwCR24hQqtOq7AOhJ4hGnovCvoglEAgDGYg2Lbp+l5hMcEgBToAp3wAiV4mabLBmZQB3I4TR9IDiZwgnPAhEhyAv5Zi7QYOCkogU07UrmYi3K4C1zgzrUYJz8wgkpoh3NIxXORhyRwCBUpAyzKCMdgiBp4AEJ4giRYAiWgy3N4IXIQ1ADgArmM0/1TBik4JXqpQICxCGXIAwVIoj7QmQLQAzAQgkyxhHoABNiRSf8s1IN1qCn/nCl1GI2N8A0PeINtkKroay9VyKAVC9XqCIRqKNV+tAAdGA9y6AHz8wF5AAd5iKqGDIEqUIQUkNU5wIOXnTpreEwrSAEkkIUlEIBLuIgECIOOiIW2owBiKAMOYIFsYEnHqcZ4g4IAGIFIQsJpQo0ZKQd22dY1e6F/cAEj2AKb5CA04IYNWIB8cEXKsNomyT5jkL+crYGwS0UbnAt/zVdcYAUuKAF0SDcFyNp5QIelSiJ8wRJYWIC1mgcFOBM9+ACy9AI7wKJx6K1Pa5d8mQdcaJd4oAj2Gwd0ANwnqoMErQMtqM8Nur559BM8aNlb6EcSIMwckEM48IH/K7g46+SBO6iBXKCDJKgBD+CAQojVMZjVCk0jC7AGSXiEMUDaOziFOAiDd4idGQg3boCGJ7AHA+CCAGAFJegFBVCH7DwAKTAATpuHKFAqrkIAXEhcBfkHZcCBbcA8rToSDvgBE2Cv5KgBLu0MproE95OMJ7gCcGAWecgDf+gcjz0HTpICzFm1DchWx3GXTUDCMAOCHaiALUiAeSCFKDCAOFABVDAYVGACNHhSdWDLYhE+xzEALLnXxTO+AmiATBjhINizLKgB3smi2b2+eRoemHWJagABcpgCa7AASZCHKiiSDThZj6iCXCiDXNCPL6ADV9QAyRiFFEiBWaDVoQVR/2t4hE+AzKR1hRlou33wWwjwg/M1hgX4hnlgBVbYAV/RqZR6DnZJAHToTd9ggR9wgXNoklbzhzs4Fx+YE0nuBCOQEX/4BvYiqhog4hj4hjqIEX8g1ns9hzh9jbNxnaXyRg1JvVczpQstgRdYgSMlhU/jGU1Y0XpYgPY8vp0i3Wma4AwrPnQoAU4LgDjwhQf4gRggBFpo5oiQB1P0rCN2nhHpEyWenlkAABsohikAgAHYhgWoBULAgY0zgyAogyTohE7g4grIAxu4Aw54AMrQAA14AHlwXujVLBAFhuq93i5ogRPwgTIgBlnmAG7YAVw4XxbaT3hhsyRCPn81ARzYAv9ScM5/OJJQPgtV0DVAAK8JMgxm4aAfcIMrIKgayIIHGIc74IZ28IhJ/aIJPoeWHoezidRxiLmz0QM8FYOcMgd22IYDYDcT6ABc2MwhiAN9mIBdODD+0oN4YIcbHldS/gdzKAI9GLg4aAA/EAiMKgF5AD3XzQQUkuZpZpDaBQkZAIBY3QVjkAYmgAUmkIZUUAUegAA7iIVL8Acj2GI6gAF1LoM8oIJe8Ih/IAU0WAAG8IHDSoIduWfnnYOglV5IuQZcnQY4sYNdKAYuwAQ/UCJWILm9KYeH/rdz6IMh7IwJzhd1EIMdCAMDYIaOgwBVWILkOA5agIGLmwt/ACpCCIH/K6iBILDBKmCWeSiCIliLl6aODoASH/rO1glCIEA82UiFBkAAe2CAoB4CeojCeqiAReAD/2zCtfrlUO7NAkiEr/UDaCOFdmjpVLhUBpAqKyKEFJvmpOoIL7oAFZgAG2ACmw0Bu2kBGLSBGZgBCJCGZriAPbi5EwDwEAgGY/iGSHCHlgYJZUCDN1iAeEYfCbiHEPCAWAVaoX2JaWjwOrABY7ABCgCEBhgB2RAzJ2lUJ3KBbXCBQi6BeSgALjANXJACB9GD4rYBbdgB4EasKwgcgYidv+AGD3iCGljQDQiBbXimFpIpLdGDAoCC4z6H1b0TkDrSKDiuzAnFI00GMDAA/xvgABXOlJv7gCr4AV+5BPIEwkklB6seuBFghhxQAz6oCHN4DYF5gh14AUKoAXKRAC2wFJix70bpkx2gAm3ggN8eHB94gBb4bTF+VyO4g2+wgW7gABvAKDwWBmG4gHqYgFRIhR/oheFcvy4nh6oSBWl4gIWcoCvwgGmYBgAAAGlQJVUyhhMYgjS3gVToZIbpJC6Ih/M0ggZghhDJhoC9cihYC4Yph4BBbK/GncJ5ExQKNC2wZyeXgBhQBVmc4A4ogSIobijQAzTRkn4zAHaHAi44gwCQggOwYwPgA2UgFlVogwSYgGJoAC8wBAegjwl4gVhhB9LVKauAAgyWgjWIBv/TSowJZIeayjApx4EnOMHPkwAGsBVGl47pIIUfkAZ5uIcWuNEVeIHgfYAxvYIQoIMf2IY3yIQvgIFcgIEggIEKSAUqqDOR/YFmaAYemIAPSIM0MIaDaAMecAEBCAZdeAMqYIDJyAc6EONBq4JeZ4AP8IIVAIMYWIAX4IFgOICExoS767jEK4DiPihrT6qB4IZIkAYtkJMS1IJyu+T4Gpwn4KXXk4c1ChnBh5ApiR3/SvcCaNiWYgVjHgFWkAJmoHcpWIJswARjgICyy4BDQAVpkILXdJwwiIc1RQBWCINo+Lc3ggc0BInI4gBjqFdcRCwJqAJTDHmQAYlLuABpgPn/OpSHEAAEG9gFKJKGH6gCwXl9FmCAm++EhlTXH0ixKFAHa/cHU4gCDIiFWMiMYVAFfZgBfdAHHtAFbdgFZQZ+GwgB9IGTKoAAG5gEGmCCCliAXsABFmjx1TQATDgAU3wOJwWIcR3+ERw3jiBBfyx8mKmQJEitIxLKNPPnT9UTQlWuPDkSosMdDv7IIfwnsGDBkf9IlitnskSfbAEQIAggZcQIXCvk+ajSxZKdGWmKDSuAawQmTGdW+DmQY5iSYVKnfpuaQ5WqV3ykSfvnIdORIFmOyFPmryTatGoRlrPorxKDGi2kcZMXooa0LbCkpTLWK5mxK4ReKMtz5Uu+Olnc/8R4YePMGSOQGzTAdOAAF2wFCkDZvLkztgZ+hrnggaaN4xMqUE0Y4oXGAmEVFiz4EafBm12ATKgkSe6325Ej0SEk58+EDzTaakmoVWfiAovb6lyxWyOLB38MpI3b0JvkyoIGx5M3SC5etDMzE6hawaTTF02oPHURkoGJLEwBAsTBpIeFKsNg9QqBBLJgYIGuuPKKK8oUU4U/VWTyRBBHPCHPDmettaFaQEQRjxOAPNACBVU8EEKJHjDAgQfBxLBAMgX4oEEVDFDwgzcwZJHFEyy8sMU8ngk5pGeaFYBNGGFg84MxOMQwWx4LSMOABx5UAcoQLxQjTTKpvPCDETzE0P8Xb8GZeWZw4zDQyw9uSKDFEYTAsItFOGjhAQdXXCcSB0z4450/6qgTaEsj/UYOOoGeQ9xBQBzkDyl+2DOCAfaIA0MuPmTgBSpDTLBLAKyMkE0fQJQz6KktCdoSq6sK6k85xmmTnTQ1XBFEHRWqoiGHvSLkYSU+1BBCCISEcKIPJBZD5TZ8iPKAD0zco4E0fVAgzhFZPGDGArsK+i244aoT67hAbADEcT/EsIU2P6RCAQUVsLgPKBWEIooosKSShyqAovFCHySN4+hBJf1m0jgk+dMBA7BskUVzEgRRRjEW/RDEEx7oKQED/nCjjT9FiDwyySSXcHIJJY8cpB9gxGH/gxbieFPFEKAMYocNu0BwijLktDouq0EL/XNbPMjjTzFPPFBHtkewwKuvHI5TjhgLVMeDDcaAUWILXftAARMU2OBBLdyUoHEZ3EgDwxFkKdNtoOLK/W1L5Hz75zap8ICaDdLYUMU9NGA5QTMVpPIDDnwA7Q8OPKw0NKu/sfpPFOqcIw0PS2RRBzR1EFIGA8ZRAYPSNdQQRMUeaDOPAa27/jrsrevRegKxS4FJHjxkAkM3Gg8xCATFTCPKGdjocfzsyCu/PPPKnyHPOMUc8QDEQRCya9RRk1MJB/dIUwkOW8xmQwtVEFv+PVd4AAYHpNyRfi7iaFHDER4oA8YaBTS//z//ehQA2RuMUYGsVaAFq3AGDYbwBg60Ag1nCAMUIhjBFXChMxK8IAYxyIBgNKAO3aiFWLwhjXP4gwcweIAHbFWH1IGsJVFQlc9OFa4ooMNu6ojHt0hhglfc4Q4xOAUjYMANYuSiDB7gijS0IZotcEFJnCESFKE4j+edoxiEeIDEHoIGqGVPLeNQiLAo4DceUKECFGiBBk50hfJ17QQPGMYbavAAGHijE4TAjgLA4J/Y8bGPrsPECFhxhlS0YQEvqEAwjuANaNBMS63AASZwIclJ3mSSlrwkJhNgg1Y0gBAfbA4MpGEcHoADGg/IRCY45g/VwYpVQDjUwWLpG4SY4/+L5IjGD4C0g3mIqBDykEc3oFELXfABDQ0wgB7mMQ5wReFDqgKXDA9VN3/kITs2uMKtJCCBJ7iAi11MCznQ4IMTQeAF0uAABwAXAnk8wHxdo4D6tGGGFjzADWWYXx3kcQm4/QaaMvyW5FqSEEj5YgQJiMEPKkCFrFEhGB6AwTFoQIM7GI4FMWDBwQ5yDh7sAAgmSQsQQhpSgpDDCTcywhE+qBgYdMwfP4BBHVIIFml4LDoGSABOc4qLRCRip4mQAlCDKlRA4gQBrBDVCOyQhWMQgxa1sMEW0GCCDmCDFQhIAC4MAIVIdGBQA4MlLIPTDouAoRD+kAY2IWLHb3jzm7//8kcq2mkDNyygERUw3xV8YAwqhACb8tAFD7hyho2UwRtaIIRHLvECV/hjrI11i3HOdCgSKiAGcQgAM17RCiqAAQxtYAIT7MUND9BABcYoRgMOUAk/sEABgbIIGlhQMPCsxIbgCak/lMGNGOSBaVoIQhC8QSd/xOAYQZCHnrIAIa4UAZnKwwZ0o4uNHVB3B9GIxg6UoQxVLGJSOMmGLxpwhh8UohOd24Us/OCLbewgHlBAAGf0kAAEZFUPRZjaqw5W23+cw1z+MIZITHS6ILiBELxx61rQlYcaeAADM5JGFVpwhSpQmAEtcMMEwCCPXKawBSHQwj3b9oQd5CEGZzFI/21hiRZyJCy3Z4hDAnbggi34Qik84EEF7iAleeCpGMUIhX5scoYFbMMUFlHGDzYQWTSdiQ9MUMICJHAE57gBBsawiCtAfMWMZIcJHvCZuM4UDyDE41ToKAEUpBAqXIRhHk7YQAFYEYACQBkQvkjAChZwgBiYQBlieG8ByjGOIsxDvlhNQAHm0QGSeLQgHfAvAzo2zrC4IQkhcC2CO+SPLcijBkowwj3q0AJPaCBsEvCwBraRBybwRQloDYEb6KCFLCC2EkY4hT/G40WDdKDX6ACCKgKJTEnO9wwvyAMOwEDIu9JFGHeABSyYEQBMJEBU2ShAEZSxjYGho9fjOAe4x/9zjn/UcNNVuEQFKuQG4MIAZBepRRmu8IAnPOEKCqCCBzQK7nGvWB3k6EARsIHVEZwhM3yobToSEIAVJCUG2mhGH6atC0wYoA99Lkc0AhCGDXRAySSZBzYMQGytdmCZ6viHf6uwgLNdgdJGdEJbEYwuJfiAED+geTMAd48JUEAeEMAmE/JgggrIwwQv0EANOgGDJGgrCGjYAhViXhxY8XcZzBjBfkbQgApm4wCq2IUN4AnMboTDGNy4AxVcgYZvyGQHJjgAJuLAimxIoQiPDg9CdD0OdvzDH0bggDuksTkt1ALEP7CIAoghjixkogb0dsE2auAEFut6JetwSREKYAD/KWQ1DD94gzL8bQ52lKMICBiBEraAizPw6wUsQAAmVOGHOBjAH+cowT+iwQouYMAJfFCAd1oy6ALgVJL+K4IY/KGAB8QADQ9YWhAkkI+u0DbTCNnAP5zAhDrYYCsMCIEPTgCBEDABAvcIQQXQsAQqLIDoIfBAEtzgpnrm4RsvOEfBwnMof5dgMwaQ87T5QQyoggKUAKJZjjwYFtk9ADFkgjykQi+0QWu9kgEgQB+ogiv8ABhMykwYQKItU0uIFDywQ8n5AyAwwdk8QR3kA7xpgYkZhweIQx1MyBVkgREoQw1skUC8Eouh2U1dVTK1gwkkQ7+gRZxhwg4ogB9IgT3s/wAXYEIqTBsLbIARjIAeAMEmTE0fSMFRccEymIICKAMfAAEfbEA8kEP/yZfxbQEhKEMqyJE2JUEZvIDUuZW5kAMOhMAToIE80II8VEAaUMADLAE89QQTjNMhJoE0LEA+xJ8bwFoFlIAx9IFbDMwGOEEfREM2SBIrxJ1B9QEp9Jc6FEECQME/LEMDAEIFNEMUIIIqUEIr0AUlpIIL0NZ8DQQ5cEsebIF4XZYUIFoHpMOhGMQmkAMDUIEJnJL0aQHbKEGuIc3i0aAEVIA/yEN0AIE69J/I/aIBLMMmxIM/OAFC8YZA4F4HGMAIHIATtEMlFFQY+MMvqkIAnEE3KUMDzP8ZGg7EMpyeFCCAAcyDRylAEoahE0SBPwBBCQTJCxyNMdiKNtlTHtThN4UUOShAMWTB+23B901ACxgDGtgBPcFfTEnDXUTJ0iVBEjwAIVCAP2jDFiiAKrDAZQASKyRAZjiBCwRSAQzEOTiBOsxDAsxDOZyDMeSBGLRCK8RAL1ACJbgACwgDJWyDFSLMP9yi36HBDrAWTG6DETQA1iGA/5QAoygAN7AADtCbFoADOHgDNwzEFwUDDEADLTTeEXCDP+wChIgcLmSDVpWAoDhKOwxDKryCknVACQABOhTBUSgBEJxDO7CAPSBAOnQAxZEDLtiBKvyGCTQAAkBBOZRcOTj/AS5wQUxc1TwYxzgoAPA5gQkkIbpIA53kSQ2sWy08QSWwmPWhhUiRAyx4wD3IQyWoQvlVQWP4QBbYwHagAQbYgEZcwhJ0Qvwlga1cwSXwAAM0QBxgHS7oARQUgd0owBIYlN31mhO4VwJ4Z/bVwZroywOAQytQgpS8JxX4AlgKGothFQsYQQeE4zbEAMzxgTLsgBKEVyBJgQF0wBtUQQlUQJyAgxYwIyDkWt99AyNAAyqZDiHswBIQgi9kRgegAw4RRAeYwwbEgC5kSHeMw+VBgajsgDpgnxPcgT0kwD+UwAhggz8kwASY2KJ9A2d6Z8llHy7QqBPWJBSYisCwwzj8/54yXME2mAA7hUUQwIA8fFRulkRIJYwTtEEI5MMVGMEEnIANqIINLAATuIEN5FYVPOIWNenSuQFGugEODB0yAWltbYASBJIedMA58EEJbAA6yFcJuAQ5nEMmHAPatUEMcgADwIA43IHenMI8dKahlAB/VIK5rIQLvIESGMc5bMKvwSQzANUJVIA5eMAdaUESgEMSbAOvbIAHHEM31AAtXIEb5EE61EDU/dt4KCk5mIAuxEDJbcBJsIMeTJtrLZoT4IAx+AcQFAE+4hnICAQ5sEAc4EIJ/BvKKYAknUMUKAMzsAIuFMDUIMwX4YA8pMMbhkBYTETHXClIkZQCVEAW5P/CFdhBFezNBfjDEtzDCqwAu3oAVsLDOHAADLhJHVAPNS4AWx2EeZDCGojnZxomNt6UOT6rAdhALoRDCFBpJQACI3CCLAQBDhjBLrgCFyDAn6oCD+CAJDlKr1WkkyjZQfgqOQDBDngADrjAE5yOqnrDAzjBRxlHBcAUrWZCENBUpPnDn3aAO/BdB7wCEQxDrpHgwBhgOtJsOKoLDrBCAWRjAMxDFCQAJuyCMxrEBkhlAjhByXUHt+JCEajDt6bsdi6aQCBNx+yCvEmAG4CYESxM/sGrweyAMUDDCUxAWUJABQBCC0iArbpBBbAAKSjMAvyWNumJPJQAmPjDJpxDoUb/A9YVwAZwXMGow00t2oeanhTIgzgUgyvYwBY5AVuxQBVsQTfAADiAEAMAFguUQwkMaTwMDDyQwwa4womexaP9qT9sQxWQQ5TVwIPmgzf4CYr13TZogQSEw1xOiLYF7TiQgnnsgC74QSPgXwf46qSiHjqcg7KmgiqkghHgwjz8ZABEQjkYQDakQioowM1uQKQYVAmUXK+RwnyhpxgoABdwnh6UgPKFAA4owy8RAnCBAyE0rOB6UUkBwgRUgTE0wAnUEdO10za8wol9EQvUAR24ibFkwRLswAJ8W/YVFNxqa8lZDk4VRGJelT/4gDjoQiUcwA4chMBEgy/YwDj9kj2E/8HB+O5VocMGsIO5CKEuuEJhbgADM4AxkEPNZQGrwoAWuGp3kBQpPIA31IH23godhgAd7icf+MEPDAP+IQz2FcC0ZUiv9eQPsMAOUAEzJIBfhkEAeOdNaSgOEKuSKYARBIAB/EMWdhwBI8A88Je3InA/FkAbHA1fycNzyKEoDUzgXrBJvJILQIAPpMIE+AD6MUAqoIFr5Rqxain8SYQEFEvHLMAW+ENOBsCebkKvxWwHZJWjIOakZsOgVEEuhIIy+AJG/YOSjsMOGBUXdJM/TKoeuAT2TaoBCNoG8AGfiuOcLgw5qII8QJ4EZEISdIIWAK0CmMRAoJw/VEAZ04KFPP9BCLTkA3iHEshCMsCcJ6PcOSLFOqOYAuTxBryBCeCUz3ABKwzqTfUBGmyDK/AqOeyAEbCCHozDyQiEGFTgkZrHBphANBhAFWjDBnBAp/EtHeTD4X0yKCMETDCBDeSBDaTCLO4VLKABAe6nwLRkEmjTNt0FBjZrTgBkx5FuNmZVQZTDPOxeopwDLdBCMqjDFnTqPwiwE9hkAHDBzQJBAcCXoA0MBvhjPGwCVZKDC9y0d+wCTVWBb7kBOMAANaKEO78COBzDETw1FvGAPzwBMuYB1ZIDOzzt1CzDUagCweynE+TxpsWAOuBUrIxqB5SDHkhBCSyBEvyACQgMOfio1xL/awdsAhBsNHypg0A8ijZcATnElTxkAXDNT8BYaUsThLmMgzLYABVAwAKA2wYoAwvMwCHcARkFgytUgll8wxE0ItOtNjVKwwpAwUB0XMf1nWJWc1UrNQJwATqQtRN0AgO8AiL4QSXkGsFcdRGoWQlEgRhwNXz9GzzAQ1gbAGnzGjuU1Da4gPOpwhZIwOkkAYhpwdNUb1WzGDfoyBMwHna0ZBCwAB/kWooeBIuOgAm4xB07gRFskQLsrwIkQDX7QzYkAkEUgBQ4gSqgga117qO4AGeeZpCWgBhUVQGMHjusgxPYgij4g0mHQB24NQzcQa4FaWyLRzjZwAqcwK543EiM/54yvMLnBYMdXIAqMEA4TIw3aNMR7MAWvPDtPRpuvZcexHc5sCgXfCYDK0EnnMJg+sGBNdpVd8AyUMpQdkAUdDUUnNw/fDkrwPe4sYOeA0Fgy4PSSlkS1EIS5IJIVF9V76cuGFfbEMKtpII/1MCVte1AbMCxYgL/NgpGG8EtLy8aqEMfyG+d/2JLxJkTKMPfbsN/V/U/8CLcfuahx7lFA8F+GkMm+B0KPYGbYG83tfOPF8c4TIA2MMEE+MOvGYzPRNYlxIIAuAAOMEEbBAMHnMAJaAA1+sVByrrddHWg+RqYl8PoLq88aEEVzIAr+EHPDAxBrPkG3CMUkMMm8IEYyP+5wNh5GKiDYer5fr7BFZiAKmxTc6wqDLhqWhzEBmyCB3iDhWTBdfiAS2nBrhhEaCbACPhCKHaclv6AK7QDOSBZQbLopN95S7DoMowDDuzABvzADpiEIeMAAJvrOMB67VVCHbwBOZhPPb2JcGmIj/+4cWxB0BH5wjAzWrTtSkSBkTkBBwSBB3DDBHxAGhBGMBSDMpACKQSKvBsEOoC5Osj6RdSA/NTBPpiBH/AvyqW7H/+DDAfwJrB4V58mypUDHWPDye3dxj8AHXKAYqhqEoiDPCxaWjx3CcFAhRBCvdVBdHBACDiKdY/AFKKDw5IDKbwBGvSy5CufwCXMJSjyuMz/QwAsw6ZtkSq8QZAumgLgQAAkwHP3MhD0QWf6uT8swIkcAZzmQxB0U1VXXmz/yQQYwwREB8rpOVrwGqMRK+MkAe6WATg4IAOoQjBowxoIQAmg40uSghiYQpwpMZ/uZyp0gnI1h8OQfdlfNQPLpCJTnhPEOyS7RJ3rAStEQ/CagzHaZRtUSC3UghtIbxvE3B3DqjgARJAaR57UqMGiRJ1i/vQEaGCi3aZxmzqQ2/BjC7mKLn6QG6cggYF/5PoE0FOu3LwATvyZ2Nbhn5Et/v4BqajsTQAD5f6NG9czij8bmTZsCSEvU5AkdGDY8Oez54Z/U6lWtXoVK1V/aCjkOeHC/98GdOzcWfU5rsPZDefOVUlypI6bWkFg8PAHKI2ARAhw3En144I+VmHEOCH31F+bXE+EuREXSomTfzDTOklQwh8LFtgCQDnXoYMTMQUQRFLn01zDaOr8LbiijEWWLEG0BKEjjlvFrFOB+PtRS0KNJ0ceEOJGblsZMAmWKLAIROrkN9vOjvthgtw/UwgKqPu3I0CBkfNYLfPn5I3zDamUZUc77hsOVid9pvV3BxqLSxxChJCgFIYavqGJqp92O/Aq6HrypwMbmKhgAnWAAOK9rAycapzMCAlCNgkImasSZbjBBJd51NlAATP00UkZKmCZYQY0TJCmjDqeqCMEGLSAhf9BdtgZxzLMlNhmA0wQKGGicxQghbQiyrEJiIbCeOMII8jxIIgjggjCDRjA6YXBA8k5TBoYbMzkiQeC2KU1b1x56p8NJiyHnOme6mCrbZ5CERco1CGHs3nGLIKVefwhJwYXDlMilQ7SmSxDFxrgrpwNWHKFEbuYOGrDJDqB4YXsEBw1qwlh8iePe4zxQc+zJiN1JH92KeOILOrIIscQ/FFlgmieGgeIAljBRh10FFBGlTUu0GUReWoBhxEOCpGHhafYQXKZy/5xAocSwDMAHYrIWYZJBJx40ic9WDliAX8YoOMJCeLS4osK7hzVHxe60SKLJzLJ5IE6qPBHGgl2CCv/LZhwwGGcc35y4gdlpiIFm8vIKScMVkoYiVAoDnUhBo382SZkmKQix5UzEICiNyUkYPOFBzy4UQI6vOGgBI1g3RnDf/x5ygZ5PODmBXQghWlnf5QJwQ1bs6ghhFwY8IcHGwxjR9gwykFrg8P4SEYZf5RoQxtYFNiAhQ3Q+rGDbDce5xSWwugM0nP6UKAAXIqYzJ9K5HEKkHw2DEICCXJ5wDndEOxNGxhqqQPNK4abyYMjwu5AojdwcHiDDfyJwY89ozAAl6kwZgUmcoqQooBDFXjDiZ/WM8OjtCb7YdIOXKiDA3/eqEGeGuRNoowgZioBaZ5JJeebNsCwgRsf5AmY/4EdxlR75wyNyEcCuCS4Impj/NHGhmUIxWYq0BbEgQU6DzDBH3XUcWIbBeJk558S3P7pjUrOKfJIPbHJ3fLWB3984wHS8E0QCFEHLRSuDFrQ0wbUh6BxROEfZaoFLTJRgysQ4glo8IcH6lCtDuDgFBT8CB928AMFgGYcpDBAAsrBDowhAEOrwwaBtqEEj7TECKTI33sUgAMDSOEJ3PAHDo4SsP/kowwDG4faLqQ8Me3ANceowxazIIFjVGAcHqni4jJUATpIwFZBmF4ZFuGPF9hgC+JBCwz/EYNtTKUESzBBTTbQByM4YRP/wJ/+tEWOLaChHeTYwQhEUhMK7QBvev9AwxUUiIMs1Ko2WciHN+7gD3Z0Lnm76UBvFCAPcQQhHMK5wtNU8Q8OwCA9W6jOONrxBlVYpAMbUEYC9LCOn3BBClQpgRTCgBhVZOQnW8GBRhKWIVGsaWQeDBhtwOENp+gMKlYcFTmUsQstlKEWD6jmEdrgquyFsQOv7FAW5HEF5fhGHm9gEFowU4lUSGZbsOsJSU4hRKg4ASQlAAI5lLCEQwHhAJ0RAwVt4oRzgOFlvjnCRN3wn1rAYBdhFOQYRek5FnTDG4wIxxM4KIFMzKQC4mATMzfyA6nApBzLKNQ6zAEETCTAI5PJRjFHoowlSMQnpEgFWEBzmJSKzwhXuML/A44ggVqUATcs0SbP7PMGDnjgAbR4gA2W6ZPowOoneFJCCGrUxSw8oAZaeMHnpJGHMXXgHE7gQSVoQg4TvAEmA+0DDkghqn8sI6ADNQEO0rE1PhjppemgCQPy0QZUobEGdQiCZKNKIL+OioJ4wsExvGGjJ/irDkdIBdXKwAGWoOUcpwALVUiBAY3BI3+YMEBO05GIBPzqHziQWE3yxQMn4MkE3DjGD/xBBeE8IAty0QIMCEHXqfKsPj9RwDdY8A2fvWeUO5uQTzREB1uh8QFXyAcT+iaNClziUDho1UhU0SogREEZOJCKgfrQh8vQSQGpSNw/osHI7GSGGzWIgT+M/5EEQhCii5ItQwgG9FWesc0foRBHjQhxBELUYDbGYF4majFafwzDCNn8SMXYAQ9zlGAE2BDVOHCBC3/Y5B9LqNZZEHUwURwjE5XoQAWOAL4rbDEJ4qjDgIHw3J1ldiSHORSkJhPKUZmqqg5smmxCoKZC0NUY3PgjGjaAJJ/FQISjLIcyYAGTn3DTviXgSQeMYL20lCOhJdjAHeogjWNxAF5NRaMEvNGNGXN0VCbrmjqMIQ5vMBCEwtFCFeA3K3nEYBnLIAf+ohKSnpw4PFsLYwJc7BOCGsGRSuYBLWAgjMxU4QghUCpc6AIOHnUO0EbOSlp+Up+EYcjBixODTTqAGf8eaIF7ssnCFeRhozz4wxUceAAOfoah/nlkoNEIMVQUuUuBDhQHPuyAGITIBTuEl7i/S8ITktu0IHjjCQOeopNJZZOfTMgfFfCG4y4JQkK44QnHVgU3yiAPPR1KI05AwEn42Jl1AGET7eC0teChAB6E7Wc/eMDNlFBcpoYXLkdwTBaYPaEiy5pUFzJnT14Va6wUOTrc5cETYJCEOvwHeE8oAwWUMY48cIABDDtPA/pQjl2TQwAXgMeE4MFNa9ukHTHICDnUEQVO2IIWdxjHDqSRhCDEKwmFC4I4QjjPbCpvxckMRhm8Ia8KX/gItajCTFjAAS1k4gUHm18CxNOBcoD/BwoWKQE8Fu4OeJh4ByxcQDdKS9cY+KBfxemiBLpUAxH2DOSRt2J2RKXCz2WiDIXrYqofoIU6VMChPOCAIojgileQAx5kIQcL5AkauCrD2htwh11z0A42TCEFo7iDOfhQgTrUoqlu2NLLc+GBAY1E8mehWi3E4fmJEqQGhJNGtVzAANp44A5oUPLP5laEdnRg9gZIxM9+hsUHHEMLDACLKxgQ2itkgtVcEofxDwUVk0se/xYcZb48kIumZXypaqAMCAEQWCIZFKEUpgEF2AARWGMHBsQcxuQplsEAOoA1TIENkCD3poEISIEU7kDmlMsNKkoCkiAXOKA9Pi7ybA1P/17hCcQBHCbraTLhCmoAOKRhJoSqCmgjgcAAB9DgALLB++InCqLBF26AE0IBCWwBGrihFXrDDzhAsp7gg+ogCdwgCWAABhigr/DHQO4v/8LwKtYtQ2akDN7i5bKAEJaqDmilAipOGYgACRRBEe5gCpqhFYbBBPSQBYwAEOygGO5gADZQFFzgHZQAAu4BBmQDC7MutLSwAhRgnsLQ/vxhBzhAHJpPDSusBuAvCZLAA8BgQM4hBrLsxyqqGzJBHqYBAODAFeGAGEpBGJJBDJRGG7AE3wZiBLEwH3IhCUKFHCaE5MSQGEMuLV4qLO4gCwtni9wPuWDADXxAG8zgHRTgFf+I4A7mkA6nYRSIYaIeQB4YYBFw4BvcQQBukXhcjvGucDbIrgbsAjq+Lv9+ohwO5QVq4Qs6axMNYjiCIB/qoAq0gQXwxB8UgPXaQBTuwBju4AXyYAnMgA/c4RJY4AU4IK0YqB+5pBa0wBvmbyay4+AwBAyLkRjP4kc24TBwwAO8oez0TAIKAsPILh/+JhVUYQciYRwabgdcwAT4gEFKwARYoGpC4FPyoRY28gpJkM+8QRoORk7QIpBI8r9UARO9ARwIYqIODISwrg7kwby0IRVwYAtUwQWUQBWWwAjaYAFsoAqQawTVkNWsrhayUByO4A5IgUBIUi+nCi0KcgFkLvP/XLJfaqCByM4bMu8BuIEBFtMGGlMafCAEjoDsYOCMXg4LG9E2YMAbPAAWROWySPI9MuRz5CEfNzK0QksNn6DCSvAK0WgrP0s24EL4NrHCyu0yYSAXYEAawgYt9tI3tSktDkMZjMENDrOibIWLJooRywA3c8E5M1EccmHe8uE4byUNJSsJelEcrqANpEoe99LdTuUfgiETvuAL8qE2mPFWXlM1PytNanCplEo4VFM5ucQNODI3164ncmkkf1MvZ+nruMsFdiELcjPrCocZNU/YFvTlCocEG1TYsBCqxKEGXkASj8Y/4ySsaO0wNqAN5MEbvmDCklJBVVMN5zMrVVNy/55PDUtQO8EBB32G5LAnQ4txlqCjcyiI/Ha02Wit/BbgAaSTMrnkP0aQ8RAUQbfkPxCUBOlgk74ABuTBt2gChnrTP0NpjmJlHGJAGoLAPEU0gv6DSLNSNuizVmoluYLAMGHgCozhG8ZEybaPR/OyRmVtlnK0c/pqTn/GIz7DYc7hPGCBA7IABqITPUfwCj/xMi/zE5fimzpywmqACVQBM5oMS+sUK9hByZQhGKQhHL40H+etDPJhKTwELjZSTZkTSvMhBCqASMhPTve02TB1HqtDU2UVV39GGVKBAcTJOaWT7Ea15TSzDKTTG4y1DrjBGLaAIAEOTmvHdmgVK8LoZ5o2wBVCgQOIARxA9UtzQUTNsyMlIBxr0nNyFVel1TfNdUcl8GfOQQnyAHrcKTpFVBxCNQhkRhqMAQfgB1Zl1VL4gN1qVF0L8hVgoRnuAGGNYSGNYQHuYAFC4QdeQRl6Y2DPFV3FsEIq1lyVIQZgQRd4IBVSgQdgIQb4VWObbeRo9WRPdkxG4hySDE7782LtdJa0YmVvFmdBLiAAADs=\", \"width\": 141.99998, \"height\": 88.5 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Mountai\" }, { \"characterFormat\": {}, \"bookmarkType\": 0, \"name\": \"_GoBack\" }, { \"characterFormat\": {}, \"bookmarkType\": 1, \"name\": \"_GoBack\" }, { \"characterFormat\": {}, \"text\": \"n-200\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-M68B-38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 25\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $2,294.99\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }, { \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Mountain-300\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-M47B-38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 35\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 22\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $1,079.99\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAMjI2HONu3h0eNPT087Ozrm6x/r6+sTDxKOjpGhjaeHe6dzb87vD0VhTWezs+3h4h5ubpLOztKiVlry7vcK+xZujrqysrcvK5e3s86qquJybndTT7EI8QuPi9EpESsrKylJMUuTk7Pb19mJcYtzc5PHu8/v9/fLx8tzb7aSdo4uKlSomKcS7u+Td3O7t7uTj+1pYYIJ8gzo0OrOts+bm5nJscurp6tLO09LMzPr6/uLg4pKNk/39+mJTWtPS5WpocNTT2bOqq8nEvvb6+pSRlMTFy83R19ra2vn3+tzk6E1JUY2Ljerl5ZSKjHJnaitGY394fP37/d7e3jQwNExHTern6vb1+q3U4qSjrI+o1DMtMjo6Q9rW2vLt7jw5PYSChPv699bV8bW0u+Ph3kQ/RUE3PpuUm+3w9LiyrPb2/rCimYuGi/Hw+622x62xt/j397u2u9PQzVFHTqmkpaylrP37+7m0tPHx/cjFxoSDjLi81MvFyvbz9pWUnNnU1cbIzNva1aO80srLzoOY2fPz9O7q7vr9+2x3p+bi5vTy7ZmatOvr7Kasw1Zxkvf59oqFhfXz8o3U7JiUlczJxUZCSdnY8zgyNkpARt7e94qXqoaCf+bo7Nra3i8qLebi4uPj5O3q6uvo5tjW7c3LysTV5vb18ltgcNDO5YOJpd7Z2ujn+3y8783M8c7Jzt7b3by5tjY0OKaorfP19s3Ny+fl4urt7oWbvJyQjWiB0ejm9LSxxri6ve7t6/Tz+dbY2/H2+ampqIeIjPTz/97d25KJpI2PlnZwcC0qLiYfJRgUFpecntnX5aenp4+JhvP28+Pl5+Pl49Xa8R8bHLDA4dfX1lFQWdvd2rCwsG9veujp9+fo5cfHxre4t6Sw1p+goGRgYhQeMDk3NkhHRv39/f///f/9//3////9/f39//3//cvNzu/w7+vt69vd3cDAwdja40dGTTAvMOnp/iMhIo+QjuDg2h8tP2paqWhgj1pquzVXfJiYmNDQ8p+bmf7+/v///yH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMlypb+WMGPKhOnv5cCaM3Pq3OnRxLiB42zyHEq0KEN/Jv4ZSIrTKEpzBIU6nYqwZpQINAgJlEoVJFIT5l4G5dqV6ssBMb7UsBCFbNmO5qAONOD2rVETRASMCJZAh92P/s64IERoDDNjE/7axRPMWIIYP6gp3tirA6lpKLRtw/Yk2ZfJXd8sKdaAL5Rx5UALNHFCyqhXr/bE0WHDxro3BnK/WVcLQwcf04IHr9Doib0VH1QX9fdzQo1qDYpdetR262QajxIk+CFgSZ60j5bs/9OgAYJ5RYy6dcuSxVaAQ/qMr9CgnCjSfy4EwODAAYaMBCX881JTdomwQw2mPLHFE0pUA0KDDTQwwjfYYNNII4cccuGFT3TIwTX12ZeUBQJ4oUUnWoywRwLXvEEYIXVNFcUn/SAIDxkJHNKhPfZscUkDpugj5JAdVsOBBSES9dMnNZCxghdTWALFEitQ8YUAAkQQY1f+vGHDIqVEMcEDqDQCTjLITHEJFfB0uAU8lMTzBTlJDuWPORpAUQ0ynZQxQgpyWEIFFRESYUCd/6SGwxy3GDOCJchIg6IMnXBARoqLIDrUAMD8g8cKyJDRgCYeODGHEyP8EAOMQQVVX5d4WP/SAwh8doJMhN/IMA8U62i6KWEggHDJFByAIEMPKVCQAhQHCDiOCcxtaVYUUpBRAwfJOPHFGlXAcS0z1vnK0yfkUSLDCmVwYAkIu1Awgx1SrBaVauVUQQcMJ1qSwCcCQSLCauP8JO5OBiAwggxUCFuGDBqQIIgYwLhDwz/ajPJBr6D5E8UwrdBBDw4xgNgUgQMT/IoA33hQxiUgLByDO+q4Y4EFsTgKhSQ3RPFsUmWRk44VdjiRwC5a/ROwwCUbNQoUxjjBgQwN7CAAsc0U8ccMGvzgASUjQDFBTTx3xYMhiKghRBOtQFITUtImLdMRjxCh6gdRlGPHCCnuAAKWHkz/IYMTEQgYNlVjj4LGJBK0YwgPAQ/udlEiuHPET+YkJUIKHnTiRRmUmAiCE4nd1xU54wyBhhBBBFGLCec8rlhQJvCsQwxllOGFFzKUse8/YfVMThWH3yKELP+07nqIxmhBhiVlOEHHP0z57ssfeJjBCbR0Hq+aCWckb4kll0BRhYB/kcPMARYE44I/PGSvvWIuGBHIIT+AYEkKUWzlalmFeLMNFN4wADl40Lb38UQWJHADMxigiD6oQACtGIg5yOEPcliQgnY61D9uoIEDfGMUNzFgWfyRBAYwAAuKiMMsCoAFb2jAAtuAhgYpWBOk5aSGNYkAHPbxg0wVUIQ5OYMJ/xngjQIQQB0EiIMgDsANZngjYvUohUAwyBPmjEME3ohAd3j2QyDG5B0MOEMREKCOWcziAx8wIwEIsI0JWMAbzHgFIE4gon9IQQAN4AAeyOfFG9bFAAAAgAmucQ0CfIAGLpDCAAyZxjV+YALXQAACuEGAddhQLv9w30ni4ikqaKEBNCBZH1uyNoScoQBJWIQ33GHIIyxCBCbwUjsIIAg0rnEWB4ikN67xAW2EbYCaNInP/CGJS6wgBvsbZUy2RAIGWEEdCBDELNTxgW3MghqfOIEBorCOT1CDmo1UBx6a+MQD1MMRLbHgOmpQhk58rYvKdAkAjJADCxTSjLMQRBlt6f9KEeTGBrNE4wfWuI1dAMMbCJhAO4qmEjzYjxLxoks8i0IIBoRgE944AAHUuAtFiOEAs9hoGqmhA20a4AQ6AAI4Q/oBmSE0AtTAGEkMcAQaWEAOyBAAEtg2UaI0cwh/iCY+cXkNYCBgl+4Y6BkHegRt+FMEizgCI0Maswh4Y5fqWATP4hIWeCLEHOn4hw4QQA1quAMKSApYT4liBAAYwAIR2KgaZwDXRVCDG0dlxi6sycgPDEAHLjDAG07wiQGcMaS4jIATLXAAaLyBIxP8xyRQMYgCDIAasziCT9bKk4omYRMdlOs00YiAV9DJGVI4wEGZEYEDCEKkTNUGIUxAiEX/zJKaZtwGNw4aMWv8SyPkAAYuVpGFQbRhG5r1KmdHUkIkFCEW0hyqGT/gjQmMQy51sMEsrIoAC0xgoFP9qwtw081vpvGMbpTkLqhBx4vYAAJZSMIvXpAFd5yAp8udyTzfmoIJiBafbFylBdORDpsQghoTcCIwuLGNW9qSGlkxgAhsoMjzttQCR43AAGxQEQJ4Iw6jKMIFxMCNlzguvyyRhUWfgQAJ4KGM0z0vGzWwDegRsCBvgAb6XuoOxAp0AFIY70m9acgzHiACR7XAIU+sEHNEwA0qnMUfICAZFOckBAwwQBHMEAQjDFUb1JDxATQwC94lxAQ2GACSveHdBsOW/wDYJIRgXdAOw5qRiQp2hw5+uxAssjKk7oBAe60sEyMYwQCxoAMLRHtIAxghugQY8wAcQggpuMOJkwQpbP0qhUW8wUU0oMYRZ1HQN+r1CAw9iC+8AWk3gIjQMkECAzbxDG/MQLpopIEJjiBjd2hg0g8xwSc+8EYEXCOpDh7pJ9Yh4UQuEo0uRUBcLWkQd8RCrtAEIaxJ+Y9NZLkIKXjxUNP4ARsYgBMynoAGrJEoiPhjHQPYxVGBsVcf27IdNpDFSWkg1TO6Q5e81IbACraLjUYaAtrYdkyAcGgsROC8+CxCN6i5CHOgW43c0MAYeIfJh7whtaZubUhhO4sBLBs37P/Qgag/cGQF48ETOvDGH8yojl0wgwcKb4kBGLAIEihDo0MlAA4yYM0P8MLiMrbqxJjsEAPY4APXuOqxwbtUpubbALLgt2EPMAFb2KICsYCxILDQrJyzxNsGKAACpDuLIqyiAgg4rwv+cfGQWpXDGVnHEfDK5gm4meR/vY0BuhmHKwQiE3CQ6x+8MYyOm30id+Kq5LNHMgv6AgiyqIAd/jsLBqwiFgg9b694rcZIriMuFsRIBDSgS9ZqetMEqKkI2oGDbXiDARv9g7xl4fiIDChgIzPaWNTaKqEo9y81IUdc1hYXpqh1IOR4AwNqQYIOSjfS3sADIaw681ncl/QhtQD/MwhRueMXxKYIOIA7FNiP7iJbrgJdI17FbgFumLkiY/lHHYrPHJ886/9HE3xuAzbRwhxbMSBSQQ7NpXbXp24EIBAGEHUzRwCEMA7gRwDAYAFS1HsTYQC2ZwFtQACBMAhv9EQMhkRyRQDM4AZyRUSTZkO+V0PJVBUCAXw2YX5cwoEHIRX+YARAQAgOJ1oEsHpHQBClEEkTCEvgNwvM0CIc8QkYNgEMQAoHll4awFru8FqL92d/4A7ecHQ4VxE2UQ5vUAg6wAUDgAN48AGjEAepUAUnMDhjgYM6YUEISBDlQAjPcASTwHWvoH544Adc4AIiIBWyRn2hhU9vxC8Ccif//yACSFhysBRm+CRth4J6R7ElHvhCe6BrtTAALKdYUqcImaAHuedq1xVMB8FVYiEUSMAFEbADmuAE3/ANVAADIEAFKTMCMAADAhAMwDAAGpRJysc7xThCydc+NiECOqCCZrAERAAFAlADCcA0j7AGArADa7ADL0QBiBAFGJBl8qZGs2BUmRIVL/EGGCYIozAAb2AClGhI3gAHURA7BdQUkWUQUOgNuwAE/sRrBOUO3NAPFfAHtMQAzJAcfGQQI+N/ArMO25ACMQADI8AyeQQC4kAJIEAGSkAFHkAGHAAl4UAG37AEeIAx9hg7JqCKSmJFAnECBHANS7AGTTONX2AzCf9QAwLwGN+wkzXwAzBQA98ABW5AAkAYV4aEAMCQagbxBkbFjsJoAPFoe+5ADuWQGhABFW6xiRZQBDTgdEUWe25gRNNERAm3kAXRFM8iECLABXMABQ2gBDDgAXJJBhgpDkpACfDAH5RgKV5ACWTgBeryPQ2wBATAM0FhAJikgzJRSuOQCjOwBj+wBjDwA1DwDY4BA98AAjAQISPAmRKSAJU5AjUAAg0AAWfwDhqABwHmhAshC8CABVApYWG5DR1ERcEGLQnxCQc1AT/4BryWRnrAACHFABCjQTFSSv+wDu6gFoQCA4NiJH25BbCwBTKwBVvAAdhpnTLgBbAgmIIZDuH/0Ak48grEUzmSx5g5MQBE4AQ6WQ0/OQIj0AC5mJdKcJ8Ncp9wQglKECyf2QAVYAQQow4HUF1MRxDKdwbAAF0fQA0G4AJhOWY1dn8MQQ4+oTF/NGZd+Ql1sAhFhk8MYAHuEEIIsZZRcAAoIyoJQAZUQAZbMAXf6QHwYAoVUg0wgA0/UCGmEJdKYCJRIgPdCQuaAwMlxnFcpRPjYAi6+Q+C8AUNkADfAAMJQJ/3SQXQ8QM1gA2ogAoq8AMPoAJ5oAIPYAqmUA1KoJ0w4AZ6gACBEAlBAAVmwAT64yrPl0kvcQILWkvUYAIe2khj9oCx0xG8yY9GcALAiUZSFghzMAy8/zMO1SEQ6OkPWHkDX5AyvUgG4qAuxNKZnEkJ1eAgeQkPoiqqNgoFXwAFI0AFJgILsCCe8QALAiAIq6GkNZGe6ukV9ihWfZCLnDkCDtKiZAAPP0AE1OgENiqlnSmf2pEA2PAAS/AFqaIHBTAHkRAIRNADP5ICdGQIYjGDA3ECzMCgk/N0auRrfpBJtyoRBjBm11AEOmAAvMBIZvAFchowBoA05fcTNJACMCAHn+kFl8ABsDAFMCoqmQoCpBkDRJACWNCwGrADMeAEeUQJT4oNUAADU9AJUyCe4XAMsEAEc2cChoAOJIsOscNJJhEt5BMF2/ANlEAo9OkBVEAJHrA1LP/qmTXwAMGwDylABz6rAXmwk/RZDT9gDBDAAG7gBpEQATUgB3IAAnJQAzcAMDBIEOswB1hQBKPQDuOgA+mmAYCgfHSIEIM6AUYgZ+1AahHwCKmgFPd6E7q5B8YgIXJABp1jCVOgBfFwDCuAI0sAB0DgCbRACzpwA3uwBzjgB0zAB3xQApxQAHngHw1iCTIwBfEQDzC6t9VQZpVjAjmQAwagpOnKEaW0CDuQlw+iBB/Jon1ZBkpQA2YwATcABHvAAq8wA7EQCxngBmKwCwxAAQUQC0uQAEpwtGwaCd4gB2VABj3QAE+bAsTTKgmxCAiQtbMgBf4wbBylAfWAlhRBFh7/uEvu+qCL5A4xsEe9U4NKcQ1OAAIcULO4Q7CW0AnxAANEIAj8dgB2QAcpQARf4A39YAyS0A+a0AxzYAeTUA9ggASt8AVUoLEyYAmXi7nx8CRIAj2gmxuhO7YMMYdycQBa05+qewlrQgUccAlOMAM2QC2v0A9EIAlBMAMpMAMHAAd9ADGPsANLsAP7gACxoKZzcAVtoAlASgYegLDuKwDj8yxhUQ7J9BPUCwEUcL3+4LVlRADc4A2ekCh0WEEGYVMIZbbMJgUEUAREEAToFBY4BwqSkACm2TKWoAUZ+yQ1cA3UMAoz8AU7MAFHYAOEgAE+kEm8QCfUAAShAAiTgAZq/zAHcfAGoHAvBBvBWiDHU7ACK/AIh6LBGgwtR9oRVrQz/zAB1bA1g0IJl1CzlvIFk3YCFvAFROANlZQ//9AFXfAPd1AJdOIHItAFcQAHaxAMDLC7VwAM36AF/MEBFNsAMHAJPRBB0eKoZBHFU6wD/vAMH3DFd2c0FpF6BcEN1zALFqABETC+LrBIMDQG5AAG/wAKMTACTiAHfpm3GusEFoAHwDDAH2AHbTtFbLAAFlQHYEAOCtAB0EcLKdAPa2ABNsAHdNAAnfA9BHu5WiANNXB6Q6DJS4Gynvx/UIEASkAGcjCzdmvCHAAF5+oHz3gNNFAHn8AcOvMPviAK/5ALG/8ABuZADY4AFVHwBgWgB7d3BUvwqYK5NS/bvD+yR+cQMOlbEJuAAFI8C/xizaWHAOxgoRxhAMzASgSwC32QUEYwxpEWC+6wDjoAl15gxFASxysAAv1gBxrwBdcADVBchAPhAJgwQGCAcyjgANATFp/AYTZwDTHQD0zgCTvgBZ0QwZfbCZ2wAt+QKRid0V7BHAawD0ZMBmRAwoPiJ3t0A0uwBH6AnOylMUlhBJXwD9ngz0MwADozDv3gBG3QBkHsBsYQDGIQDCDwsjVLl9VwCXLAApJ6J3XxCd6QLFD9D1IdfgiQCB0xVo3EAPfQBMZWBFIweKB4AB8ABaLivhGcsVr/IAAz0A/NsARFSDrjcAKSYRNs0AHmTScbUAuROgCrIxC84A2m4glwAAOJjbn02wnSkACnh9GGMLq+RzoCIgkgmdlGXLccoAFRQAM7IAmugAH54yomZzQvIQj+fAYvoBQ3QBdSwAFUUACM4AZXIAkxAAECkGA1IA4eecoOIp920IgCIxWtQwPFXUsTo71mBAzAwGcZsQ0WsFFx0A35wAKG4dXMpgOk9gXqgjtxjAyUsA9BoAlzwARpgAL32hZvIIwCQg5skAuMk0nocAqZEhRgMAtvYA5L8Q+0EAeSAAUs4AdQgLcSHA8oMg8/IALmMASGMASO0OYbUUOM4w/eYMSr/3vKxUIB/wAHAlB22RAGUbB//3AERaibRYAJtuwA5IAEH+4P7LAPeUBEfxAIRHkD/TDYdqAJM1uzLLPMIzC1YAB8TEbclNRL/8DjTGgB6JQR4+BdRD4IDyAZjuBr7Vrd8DYAFsABjG0rDWABklADeyQgCxACBvgPA6AVFeQA2UAQwnAKvEA+MCkg+WMNE9oKAiAJQAAB6hIO8XAioPIF4+AI9B7oYDHoKhsBrXsJma28TlAIIrAGGkBHUTDpC5AL+ucPJ1CE49A6gqDpd8DXb8AF1VEFFSDbpIAAO/AHOLCcGg8HZrCRre602sEF0AM2CKEDGnDrHKbrxqbOGEG93f8XB7iwA3MnEDrADAjASoGlAwPACPAgDcjgBEGAMn6BFOOQAxtgBeTTDnP3EtnA13UNBOH+Ep/A8AZACAcAS1DhAo8ABTdABxygBeFwIo09D/ThCIDuCNyK7y9BAO4Lz0ZMBTIgAAbABeCdP23RFlYQBkgwDjxAUwKRGoJA0HdwB/9wAq4wDnSCABXACBFgBETgBu4gAgKzDTsQATMwAiJes/1JBsbABFZdtQMhBRpQcB+QKV47Xd7ADQf6ECooV0WAC8BAOZZToNxQBO1wUkegB/jwJ8bwBe5ACOWgM+XgD7kgChhEA4w4090+EKrgC+H+E00FPf8wCzrQufnzBlD/4AQsMAeXEsfH0NjxcADkYAD0LlEagRMu8ANUsLykLANQEAWtUAOpUA5+wAc1NEG5ABCYyPkzcMSEv3L/jLz4d4fNv3VH/v1zFKwNFkFuJBXQYW6cARP/xtyyA+cbGQ+XqIBoAAKKgX8HJ86c6c/cEQ0TCMxy8U/Hh1kEPnib4I/mUaRJ/XHjtjPOtENCjHrk8W9PjzUW3KljZ4CWum7YiPwzgKPLv3HjooyrhGHiCSkzOziYSC6HKimL/vnzR02E0U8E/JkgbM6EjRJBnMxIcWmKpSmd4q3wAo2cIwOGjCbl3PnfuTrjhgTzQsmDaTlloJTbAwXUvyglXCHZi85w/9ty/o78HUfOh7x/Du7843XEqI48ehAY2ZeCRMxxB+sUqjfHDp6THjyspEJmxj9DVZUaxalz1rp/R4AS2KbhgIFxnj2LQHBg1qw4WVDVm+hvXLlCRuiEgxq84aYITt6AhBpGACDhFzDiIMQ/tHrZAIkoRDDOqLn2+ocNB8bQy583BjCAoA9ESOsgAzroYCI7frhGAw6mkEELyeYRwAADhgBpnM3kk4+vfyLggAwOtJODAyeQaAWKQv4pJwp/MNDhRHSM6iUMmHQ4YS/f6BLuHxekIOefbbBgxI4iHhEjh+hMIMeABVAgBxRJKJhgBO22A4ElAmATkpqcgjrBAGrWO//AG2YsOIAabWAScqYjmFHnvjgGMaOE/oySRAsZLNEChGC0UmcRQ2j5oI1DAODjBivQiq8DBaJAgpo34lMgGw9VSUPEvRYJ9B8CPolJzhY7+PEfOkaI4AtLQp0insncIQsJ+IKclDMTxlkkARkoSXJJOarg4hsmZOXLn0IQiSIKc/hy8Z9P9NprGQfIGZOXMdAioI0KAmFmBwX8i/cNUTAZh7YqllAHDiq0W8mDMmqoQ9vOBtDAHQIIIKRERTVAwAIESo5gFi+Pwvgfd67ZaRZBArDgn4GMcoUKGXKOTAtjEBADwTdOoEYMRtJIBJA3CPIHnQ2+dIWQvXbdy58X0NH/wd4j4vpkAP/SMgATTA4ibC9JaoAjARshm6yaRUzAFshtPUvnHyK8kIGDJD0g44YSjGklF0MC1+y/QkChEk4kwrDCBmP94WGZO8iRR5h/FqFhIBLa8KaNJehIAzaCwuiAHB54AOMfIHbgQgOU+ryEgyAmPVNjd4IS4Q2hgnJHg6a2cScCBLwZ2Z0jFpGUJlmA4Rg/PVARYmp/ooBCizJ07qQTKB4hAoGtbDBAmw8YIKELKaAG0oEN/NFBm4lQ4PWfHBjKayK/3tgmVxYX6MAQcggbm4kExGAGDbBEGcJhiXhI4wv/GMJaVrat3pjAHP8YgDhKM64ypOAfMTjAP+qU/xYgdascVShEOaJTJUycwBV7MYAohCE5ytlAG/0DACOAcY01GME/5zDABnJBDnKMow51qIoYlqAAAWyBCpSgBJIa8Bq+xGtlQfxHHDYWlDe4QB3r2R034hCH+/iOGxbwhjeAwY1ZfGJC/2iHNy6Fn26gol8myME/KFCGaMkgMsj4xhIE4IndXQNBBhDBAApQAD9o4yBUWkAIeLFCf+BrIiD6x/wMYKIB0AAtc8KEKgZjCJBIsAPL8EQC9rGPLXiBAzdaQTjiEriQxI0mfDGEORxRA7upkgocSEA5NGAGKUWhEihYl2HexYQoAYkcmOiADnLjiA18bnL0QsQ/CHGRCP/swwwY8I8VfBjErhmAHGyQhwbEAAQYoMQ0ZMggbMghRc8QwD2zMNEithiUCfQjC9EghDakQI0BCOUAE7gGM0R2jd9Z4AMdG0AWNHAW/yChBjKonqiQQQYz1GAbE5FCybr3vQNgwQzP+0wONlAmf5xDkv/wVSX1coIj2CBQ8HlDJbLhj8ANwRBy6sApaGMSYPxgCnazhCXmsQSyDCGWspxJdBTiBTIgSSUcuIEranAChIwjB2EIQRDHYZiPIAIS0SOHFSrBhSj8oxSnqKM8PkeDdAGhDcpwwyPccJAThCFf/hlMbxxwAQwQYglcgAAZlthEDjTABmhZl3xmMc963pP/AK8oBgMWgYRuGYAQNtABQGfxgd8BI3gIuKE7AmCH/vzjAF4oQxkec70YxIAIfP2HCF6xjwgUwRdvIMQRMoCNR0ziDR9aBiCo5IOH+EMVdZxfFY7gMX+QAwmYcEA6PrnTf3TAB7lSSwyg4A0PeEG8sJhHOGhgAqUytSbj2OkXKEFRDixpDf+Awg3IArccVKIQ5IiCBLuFBCbwwYF/HS4kLoAOyX3uE0wwQAEyUIEKxOAd/8DABh7SLbSERhUAYEdV8AABEtQgb5S4RDsd+MCZAPED86SGAey5Hm6YkwJG4AQoeDFWExCSF59oxwBmsQ2CMsMbGmDGAXzhAiQYoxOg/7JoA8zwDWMdxD/kkCf31GGDOtjACBX4ARQQ4IcFEKAO/0DuP9KgCo7q5QgTMNY4TrAANvRPgiAhR0//kt4jjCAFULCEeONxjHlogIFLZepgbiKO7oxLDoWYwCOwdaJ1mZWbEhyIrZgggikJky4GRrBbfWKDdTAiFhVYQh8MsAl+9AJ0fOkfJgCwDnLUgUp9KAIFWtcdMjSgmlRCMU3I0R77UGMcNviAIIISAW/Y5wNZ6AYDbmAEHbgAAzAxwRvW4c8BfOAAERCy8ATwDRBwQAvIWMEaoPAATlCJB4ThATneEQsNROAPu9VQEfQwg0c8IAMfgMQy6khJl6rWvuTAQP8YetG/eA3kH7nwgQj66z+61WAOVOjzFI4hDXHIYqcTVG8d5paCnHGAEkrgAFKh0IIS0OAN8TJMOYQRBm5GgRyGABIkmICE3GziAlE4wYH94WkprEMQjPBGLARQAAxcIFb+iYIB6pBfAHxpSgmRAhFCkEQPKCElHICDrOJ2AA1sYxbCpsEHLkWAaxAFC4dQxCBwMQhBFPsG1PDFJk4gCxadgLPU2MYuImABDSwBCjD4RhMEgAFMbOAM5EhHYcwhCgDMwcraqEMo/rCMXwEgD5rogxsGgIm0/sMXxovAXwpuhf7BsjfZOIUj2Askc8hCB3vQswCipYU/r6CDhOl1Z2z/IgsYnKYMlKACFRAhhvmW4wSeOIEUTfjyhwDJqSVABExAcQFV8GEDNJNHHTOphwrMQQNQ8EEYclCz6I0jDfwAQiliEgVZE6QPgiiCaSLGgTIY42Lx+XrYP3CEcfgEswsKwLOAa0AADdieDFAERigCBiiCuBOEATiCd3CBN0gDIRKBRfiERAmyfZCEVxiAd7iADpCTMxEiFFCA3XGDeXOEEgGAMxABCqgCAIiAH+iDL6iBBDQAQcCDfwiBSvicFZEJ1puQ6IgPGtgGHaAbAUiB9wqVTkgGY+ALmWCqqnAHu3mdJYGCKKiBVJgaJLABF4C0tLqDSiiBKfkqozgBGjAA/5jChBAQhbToPgr6hIuogEdQBEw4v83oDWG4gBuACf+QtTdQgAUwAg04AwHggIi5BEd0BQqJG39wB28QO+P4ifuYBWCwAA38BPUAnuDpgwrgBjEogG0oNkFIRV+QAgUgBAPIgWpbh605gLTrB2bAgnM6lImIggW4g2EIHgoQBMqjgT84hVZggj0QAGTQAFf4AjL4gU+AAxrIhUoQJ4MxB3HKhVMQAfAwCkIggAEgBHMwhxv4hhRAmxu5nnCAhpjgOFmyiS+wkSTZpQloBaQajKzSu+EikjsIg4coh7FhFxrQkDtghUpAh3FYrl8bOm9QhkcgBvuKDyL5qwGog3hRJv8MOIUFqCMNIAExyJvXkQFgQAtZarwJqERBkAJ/kAKguA8EuAb+648T+AkL6DYEYIZY4AZ3KIJTVAcCUAcjkIJP2ATMygFr+4RZmAAy0gBgmIA4sIETqIQccAR32AdB8gUREAEgYIAOcIJkYIlmMAMv+IYBGIBlWIC16JY4+QfWwzFD+IeyWyycoiMBWIM1gAXImIIpmIdraEf1+gdZGAFYwJuU6IESIAIKaKqpE4Eq+BIwcYBKwLR3wcdCMJdlqgS0UIUs+bAK8AYiCAYK2AHYWIsokAcAqEggiS4RWAB/pBnV4gYMAIEtOA1KKAMBQILeQwqjGIeT/IMPUMl2aMn/D0AAbiC0ibABCCgAAjgAN3CDVzhARomACXCHU/wAs+sYIHiGTTiDg7C2n+A2RrkGXWiHUgCEOWAGdxAEGvCWIsCHZOgDM0iGJYOFRwAAUYiu1JwyBziFEngXaxqAFgMPiKODH9AAioOMTlCgd6pCWaKGGlGlEjMDJICCKqiFxoy/+DAAF7ABKokPyMTNKHqXRfgAJOgFVnABUFiAKJkBRYgFb4ACMSiHL9AkrXoBADiCOqCzceiAMMiF/PSHRegDdPgCL6ACJYCHS/CAJXzH3dwFb/BNHRgH9QiKoSiKo4iDPMiAn2QARnAHA8gid/iGGvgCIjCja+CGCTgA61yo/7IkgUVYhyEwByRwgXbYBvA8Uw3ArXmjhgDIhB/ogW9gsmmJgK7pKznZzxOogynRgVFYz7E5k39AhxuAAQ1AG73shHloAEHMzaSIgMGEqtdpBRzYgXEgBBfQgU/4BBogBNxUvirAECqRBy6hGROYTDw4Ak64AF2IgwvwAwtYAqLbByjoAxqwg+9IAxsdBnhigzDABGvsDQohAhLYBS8AgSUqAw5Arb/8hzqwgyf9gE8wgeAcBfZINm25hgdgBPDLBAjwwYmYAXKjHg8AAdmSBIMaGelU02IzArp7hrvLsUU4ggOwA2DYhzmgAFtAhQCAAAGghHlYAS2YByqghXXhi/9x4IH9JAQTOoEb4IIx4wsDuINsEIVTEIVlSIAliAE90gJA4wCsghumoodjsBEyuAQ5KIEUQK1ySIhyCBoboAEaKARIcAEmeIOd/Qd5qMZ/MAf/5IJrAAIfAIACAIAb2IEMYAQN2IEYeJ0aEABheIGqIhIkWIBKWLx3isl3EQM4QAR4KD548AAZEM1t/QceQDbf1CQpCAoCYAE6kAVCKAEj4AYzaIJroIBt6AMiEAJe4AURkIQVOIbHxVQBgAI7cARtAAQ7rcnw1Ek1nQV1mMAkOIMe+QVfqABlCABcUAYI6INGMIUEgIEVAIFAWSS++Cuo8QdaiINQyAEQQYFT2AD/HzCCEHABR/gHDRCAJagRll0BMlBJIpElAxCqPkPSJnmEFpCSxuoPQioBF/AEP9ABEUCCOlAFTJgSwqCBFjgAMRCFQqihOegHPYC3NcCGTkCSB6gEIOgX/lKFHt3NOhABQlgEHZACHaABV0AAdBgBRiQ5GTAGiVQvcyAHMLDbD7gcPRCDAWCBFJiDPIiBHxiBBHCCbxiBYNiDPUgBDfCGfmgCJzCGGhDhBGgGY4iAVGgBVwgFJvCEYRgAd7CDkmGGRpFO6lwoIyAFUoiEVciEYsiACciAPiAGVJiBJliCVxiFiYiXjPwSQgACAECBBdiAU0CBEFiEv4DUCaIAU6IE/708hk6whMRMCKZah2oAFTKABw7YgRKIAT6o1ZhEiCkxCv8wABo4giogIVGoBCQwh0VwgVRwh2VggC6ggEywgyXIBAQggjyAADuQBCzQgxoIBZph1gU4AUiogk/QAVStAhqwQPhwhH0wgOQ1UhLrgbOA4780gAO0zkXAAAkYGgEgvG9wghoYgW/4hmqohgRIACAAgjcIBQKyWRCQAye4BQFAg1dAgyBAgw22gyCQgG7uBwnoh2agh1MSmUaZAEYogADIB1RQBAZYTl3Qhxf+AWMwBm7QAVkQBlZQAEyI2lPogOEVJ0iFnsH4h3ORBAJi2TZGAA9hKmhQYy24BHgoA/870IE1gOOB5gsT2lmESKs3gEokKARREIVUOIA4cAVqGNkDgABFeIUfUIR+KDUgWIIGyIMZIIMD6AVX44RQOGUaOAFsCZKK9QYauAbDWqL4+sLU3NY3sACMUAdeaINMGIEfeIAfSIADoIMeGIF6HgEYiAcxaAdfsIEyQIYl6wRkqAYiWCBfGyIFOQFeCIUqCAVPGIMxaOQJ+ABuIAJlOIR8UIR9UIEAIIZRiANFKAYs2AUhAIYaeAQIwAIAUIAJOAIqOYe68Lq9kMjoKoEEoIdviJZjmNn5+ssBsBtsFZcbmAAz4INncAFCIAQRcDoeGKKLgeOEqAMX4BR/wIQiSIX/G2CCbQAAVQCFGsCCGTAFwAuGB5ADS3BEY0iAPriAECiF23GgqTM0KYuPp72BkeuOMriEVshsTu2MUiCZUaADbICBGHgAU9iCH5gDC2iCJhgBMzCDBKgGM3gGIMACS+gEvbSEY/gGIoACVKYBRKABdliHdTgBBffbUqDuNzAAJICEFmiBUNiBYCgGRUgBFUYFOSCGASgCYtCFAjACQLiGIGiFRluCdOGRpusWIIpx9DOKKBCAYPiBnNECvRSA8UYKd5gCUJFoD0AECJiDscWEBViAkfaBU/CBZXiHEAgBoK0CMTzVVAAFJgCAIugCMBgABtCFESADr0aFOZCEPGgA/xkgAzkoMRUIA9rYDECG1DMhEv5zBzyggdNQAiooscSkrW31B0gQgyx4ABjIgwfYgh6IARhogm5uARYIAi6AgxoAgVj4hx2QAYjV8RUwhiXQAFCgBWiwa2gYYClwhVQ4dWuQAlWvh2Go8AFIgQyAAidAgFvAhz5QgQfIgwogACzAAgswxZPcAzXFoQnoAFHYAGTfAFFAARRgJkxQABQgARIIAQwQgBgQABnwApY9hhGAhL/khnCgKIkGgS4gAm0NInTIgTRY9ztwAHl4AUyohEpIcnqPWgqgAD1IASGwAwioBhjAhhFABSzoh2JQARzHP0eEA3hH8iRnplyQBwdgA/+JtwJsQYL4sNMSUALDqk0ZiB2P6PGkiI8oUIRk/oEnMAUQcOEeMAYBMAY0WGwKGLwEWAMzGIHQXl4oCAZrmVs4IIb50wA1WAN8IIYHKIZMeAAKaAM8KAA4GAVm4LeJ+IQlIAB0QAIrsIJeyPpeEAZhaHcHyIVc6IBs8C4oEK8peFwQsBemuoZ4uJtLoIQe4IM1YAHsTbHOSHd2d4hTOIVK2IBKCANFQAUQqIYfCABFYIZiWAPTyBkZgAFP4C8kKFE2KAEQ+foOAJuGR/IO2AVmIIQGIL49b6ePn1ujQAQB6IFkNoUf+IYeEIAGcIImMIYmYIIZgAEnWIJqUAJsgAL/SmhjLViBL1iCDorxQisARaCAA7AASSCCHcAGFUCFCjgEYmCELBADXXjOxYK/f7CBRwDlge6MM9kBaxcvAD8GKlB7WQKGxyiD0xgBJPiCPfgMd5ylpACidJidPcCBQoCDCQCIHw+OkXlwKY+tPnSo/ODQgAiNf+PG+aNI7iI5f+T+caw4LkqaHAMQvIFBhoqHS2VS/DNHkSPMmDJn+qtJ4dsIChIe3Yrxwwk2J3J6CBDgxNgaKdgS0KE0RYulKceCLdn2D+PMrDFNAACQQQMCC/uYmcGmIhO+L6hsFclwY1fEiVH+3fBWs2PNvOb2mkv3b4eAL15kWDq2gowOrYo5/16bIqPMJUo9kHzZ829uzLuZ87asacATIgAXspmhQkZLJxgg5BzqQ0TJsUdcXPwzUXPjv7x5J+YtF2XjAG9IRpBR4oGDDEmdFzPPjSTFCCguZqSAAiWGMRg9tje45ARCDURYYPw41mnK03j0iHy4erG5zHFuMpiJsMsdkX3XevbQUkyDLe7oIsgui5hA0V3epKIYX339JUAMg1nSyTFeJAafTNfEY0kZHkhmxRcU1OYeRu9dJZM/55RTEyd6+CDMBRY08IMXIFASQw8jeMMCCB4EIYUN/phgAl8e6fYSR+QM+c9IBhBHBUpl9FMbkhjKRI4LMcCQxw0p2DFHMQ0MNf9CDXKAMIITUPzAhSAw1CCVY6j1AQEeHFWZJFYwaQSTBooAgIN9zGgAATAzHIUKQgzocoAFiIxTjm9zfXBNbprBxBc5PPyzhgBQeOHFFJ0g40VE/ljJETfhlAEZJQ2csAQdL1SywAKYdPCCKvLomo082fiaDRvBWmHFAhe8I8gFIXwizg/YgCADCGSAMIALEzTRyg3rCJlXRnfpphk55pjwDwEIDGESFfAgN0dnpp6qJzk2xDDCN05IMoE3xcAgxyNONPBNNTDssIMTTdDhpgzHxLlCH1h4QwMQooiCAsUVV2yrrR1ojIkoKRCjSwTXuLMLArHEMgcCUMCACiN6uHH/wARA2ABpDlGgYwMW/qCz87c671VHFDFAIcCnU6wgDQe85PbuAbDIwMEl8MhRiEJI/NJLL2mkIYwwd7DhwK8ad7CAxvzwQ+sFrJyCSRjBhMMBJWTIoMQOoLwRxR5BsADGORqVmGdW7+FhASHVUCKHEkpwQEdu474L00WfrAGDoT00scYPDRjzjTE9YFNNH7FMsEaO3yQgw3lRrVCMGMAQUgIbWMs+++zBYgCELiEgEoTL2+wSATexeDOHEwIIpEgB7kSQASaVnCIKJrRWosustFpvfSUSo8DFD18YU/TRDThi27sDiMMB1FTI4QozElxlUYknZkbOG9FbQU4up/jh/woG7kywBAg44AUYiAECFFiGDy6gC10AQAFiy0UuVCHBCUrQAap4AQYlmAM7TGAR8Dich8oAh5Zg5nHuscEXQOCOP8DgX0OLATZwcqMJWAAHQaDDCGAABQ6sQAsy0MI88vCHfXCkb1qJHxioAYAX/OMNkjBDGABwDTt8oQZQeIQxBNCPJvjpAG4AQBjYoAAugIIHdTjBPiDBAwOwsY0GQMIb4giGKvyACDWQAaiOVgMluctKNBCHF+BGhUu0ohVN+IchMOOunm1kHCHYQAfYkIYFsCIMp7gAJg8QikIQgQ46cEABXLEAAFBAD/wYGwocoMpVfk2V2ciFryAYAgUsA/8DzCCAFCjhAeOQ4RKzWI4J3UMIFYAAAS7AxgNGYIwfMMINfajGFh6QAjykAg1VCEY1duCB1FkCGdgwQjAM4BG8jLOP0CgCAIDgCi4UoEsa0IMiElCDRwQjPwJYwizccIQIDIAGPgDAKS6JCWFUgV16WuTSOJKKBOzjG4TRwtEegcg+YogQMBgMJRQXhCpAIQqJrBRFx4GEXrAhF2FgRfVYsQA2WKEELTiFHlxRhTDAwQ7ncEAG4gAKUIyBCR0AAAoqgYJe+A1w8qsUD8ghiU8cwAtKgJIHqHCEhAaTHBMRAwwEUI5irGFeDyhADEyxBRg8AAGccAcLXPADJRwABiv/mIIlZLACGLSjGIuQSEX66A8DEMIFnxiDIPQgCinQwgWsYKIOzIAGMYghDhyJwjiOIAAE7IMb1LDTApYhBRIAgAEFKEAkc5ADU6noNne5iSSqYQlLoGYezJjouwwgAA6U4SQcaAISoFCFJK1xpLm4FcdEwQp+qMIKUYhCreqgkSiUYIEUuMANuhKHXOiCBV04Am3+8YJllCB/G3iBA9KADhNVqiPjYGMw3qABp1KBEgOkjakoeqqMjAMIP4ABEGLghBgUowJ9WCs8enAUKGhiDt5QgjFcAIVO+DBhHGhHLH7JEQOI4ATakAIXjnAEHXCBAqcQxkWswI8XWBUJxrhG/x2GEQd3eAISkPAEAoIhgPa8xACYcMBlILEECpAggaJYgCrSANmlmUoDP1iDe1m7ghW44x/pkG9zzBGMTuBRCWSogTmWsAcMaEwUG1jACzqQCzbkAAOV6AASUlSHSmCCHAYYx4Fy0BUAkAANftjADE5BgQNwQQRw/gc6MEGCOsyRBMAFrxX81pFKfYIe5qARlExTgzpQNZjjEoEkYBAdMewgD1gIBgRggKMRpKQHxkhAA4DxD0kcI64/PEYRDnANQrSDGgOgxhE+sQg+vAEMJLiAKvLCBlaoggcVKYEXHgEIWlyDCjDAwRwa8AgEfEEblfqIASrhAH9w0AU6OMEbqv/AiWUEFAXgzcE/kFAUKJRhMKEKxyf4+LhrwCKQgwTBIq4hAQxgQpJIMMF7DKCAMJpxHG8IQwd4AGcDmIAHd0gbENwxiyqEoCsFiIMIamIbfyBB0MoVQShO4NsXYALR48CKHYxpZSooQSU7wEswzfsPQBjjEt9gwwRU4A1lxKAaa3ACEb5xjU30AR41EME/4BDXwcBiHhr4xBJsYIN1+FlPhACAKNJgVXKwgR8OsGpNEGGJBqSgGU4gQ70aAAUrfmEAeoLJAjIwh3GdIBV3/cc53kAIG/gigRu4AQyW4IRAhmoFDRhCX6C8mI1QYwuPuYTiDpCEGJRjIxe5zSZGDHD/ihgAkhvZ+G9ewApMCAIIJoijKtR2gxLg1VTkyEElHFUOJNCgCpQ+hxVK2rwOOMAK/4jBDW7gBZYPkgMjjPlmzhuEEYgjD7qAABEgQKZ99OAbsxgHESjxjSMY4B+I8IAM8OiFFdTgDBqwQW6i4A/180ABF8jFxslxB1Zkg4/jYNJgQDChR0CCGxHgww/UwDeAgAAAww24AA0QADBIgh6wATkYgj+8gRToABKk38kZwjqUQArAQJh4wRZIhTRAQW04jpVohDM0QFxxQMs1AToIACKA1D+IQFARVW2QgxVsQP1NBEipwgUUQiXsQppRRDlUgmYNwETcX26QQxqEQRVE/4FvIKAIlEOS+IMVOMALLAAX1IABSAIHQJUHgMCFIB9e3B8fWMDpJMCnFUM1KIACgIAK3EACwMMPDIA4/YMBJEAnBBIsTAEHfIIYTED6zQUh+IAo3E8d2IYD8AMGuJmQdJ8YaEE4DMAESEIFwkQrUAAUUIE4UEE1LME+IMA2iNwGsMFlfIQNuMIJXEYd8IAh5IZ1BIN7wYJ5HAM3jODj+EOWcUhxeEAPlAAWsMS48MAjqcLJwRk59MIGLKIJvFledIAlncAF+IId2gY5yMMFuIDMUBpMQJYwhEGQQAof0AAoQJYTakRNRIAG/INJPBUllIETlBDy1QRF3B8PXMOWEP/BD6AaEQTDCDSAElSDJEgBRQDcP2hA+AlQPMxDBHwCBKjfOdRBCJxCNpijqWQDK/RCbcjjPxACEaRGHaQCEBgAOf7DI3kCBRAABXBB9yWJIfRCGJWiP4jAEdAA+5mKH4xAWRRNPKwAB9wV+bwLpbnDFJQB3IDAJcBBCDgBH2zkl+XA5wFc1zkgb9wfOSyAKOTAAijRJpwXkZCDKvADCuhAFwQJTHyE/G2AC6xfFNSBNtAAEqif+kHKF0jBAHgBJUDVSlRazCGIkGhKLKgAFCTANwgQFTRAVh3A3THjP3ABB/ChFzRdAliBN3BCDBKiFRjbRHjlRYKUqbgANeyANAj/QBzogCvYBpz5Qwj4ACLYAOwsg3JtnCEc4wbcjxNehg4MACGQA6WZQQ1oQDUI0BQkZA203i36wyIMpheQgRzIARSUAxRQgANIZDoc13GRAwbwg1Te3zxiwgaMwx0AADVUQmIY0T9oTCXcQBTYQCGUw/310R1sACS03jp8wjoAmqlwggguwfCBABVwgDi4nRhmxSqaAAQEQw3kozFckd4QgrvwxbhEwZsIECzEwzEAgSBYgDBI5Psg4QtcQG7uFcP9Ay98wBtM2RJMgD8cgW78gwPRACd0ADpklnJVp6mcQRgk2sb9gwvEQURUwTdowBqQARlYQjhIRZPpJYYIyT8o/0M8yAAZeICZcIEfGEMupEE6JBLQ4M8G9IJVIYhVZQ8Y+IM8FIABLEBizGN5boIwAMAb+EMVFAJkISFHyIMoVOCfvYEOfMKb/QUclEB7sdxx1MAbBGhW1MQn5MEX5GMxuIAfrJgduMMkxMEYQAIYmIgFpGD4zUMM5MAjUMD90NdFcCeD3t8y/sMibEN8GoMHzAEBkMMwdAtHGFodAMEG2MwCDJpvIMg/YEAYVCBnGIAfuABvzgBxDEbCiAMhxGNL+EJ/PqkcXMIa/MMXsMBl+EOWmtT9HEheoEMYoIAZ/cMGKMA/VMIzlOU/YMImjGsHrF8VoJ+c1sQLiIJyvcQ4LP/CESCBFNSAPxBBjSgBJXBAOFgAkgbouOzCFwgANghAEcAED0ACLwCCEBwAC9gBC8RBP+mAEqzWD3UCLFDDHqQjX/oDJpyCOAnJn9nANiQrBdwlC4wCOVxWTDiQjgIAOhzXArzDnprK/TlAnV7b/QFBA2BBHwjp0q1AOiLfQJpDDHRC+igBCIQAFwiA+j0KOXTABjjlkGSmAfBDCBjbP3wCAyTaApSrOeDGAmDAP2zCBVgBe9JAfeoJe76At57I/Z2ALAiAGJTAB/Fne4FhtRJqZphAH+TBD0BBMCyiPxgbbnDEG/ACXU7ANRzAEmiCAHwDFYyfC/bBVN0fOlTCBQz/Kl/qaCj+QwTg0RQIgB2AAYDChAJkw2WIAgZESiWQwDnglbj8gwOEwaDGlz/A0C4gZ1xpwRRIgRgKybh8QCBdAhWAAAhE6xowjgnUwQKEwZvZxpAoYRiEADnMxToYwQIoF7m2BBLC7j+cgA+8AKSMAw2cgEYiiK30jQkYwrhQgAD8BQcwb8txAD2c3E8W76KRQB4gbAxAwOVpZHnFBP18QAIYgyZogiQsgTEwyhJQKhI4DxhcxV6MSy38QbIOBxnAAGHMwRsAAgKTQC7UxAIAwd2MQ+cOmkREwZJkgw+IU+1SwAi4ASzKzRSEQzyIoOKZkD8IwNPsklFOwAmMABf4/8MGVEIdyC9v8EAv8IPrOqEBDEAItNm4pmtCkS8kIMKNNU4VnECu4kaMKgCcGcI4nIATcNiTMq8HkEEPlIo5AK5EIGEGBHAMCIAgDCxNmMMb1EAnvM1JiIMA7IEFzEErKEoc+EE9dIEIvAE5nMAAIN0/dAF/1gAHWMIozBwCL8NEnqtmQco/wB4KfMRxUaPVQjIoJIAGWEA1kAHTTQEsHAF5Bag7fIoumUkCnMAEGAMmYMIRmizX8cMmWNVccMEY5IICmEoloG1MhMFdVTEbVIITfkQYV1oOZK+S7gBL1EC/+islsARHzDGh3sZGFgMMXYcIZERzaBy5DManTAgy0P9BOWiALgABLVjDNkCqHbwCDlBsCzBBKaRCh6iGJSTAAazuVSzD1/3Db9FAWlJENivAcW0LwHUACvjDFzynAAgpqLgXFCTuDz/OMkbIkxamHJjBP5iBSlf0kPhDIi7im5UDDdyAyN6BplTC3S1NGMAXEPCBKqwrRUQBIqTipfhDDnDtP8zAcKaADEDJs5bBCARJewJuHw1AopoCDKTj4i6GkUirDwkQ6lhIFQhAKMREHbxBC7gDIODAJAjBK7CAMdyvODQAB8DAOyCwD3ydP7DBC0QB97EnUmdvHYgTPRpAGphBAhRBHxhHGchAOFiCOIxBpoz0u4xLLkHNLm0HBQT/8QjBsEZEZwl0qQlAwii8Qeel2bi6611UglF/QglEQSWQIud9glHnxl4IwwvswQgsgvDdZY9cwiUIrEWQc4C6nj8AAzbAgKb5QbesaKEeyP19nw95wWohwzcgwQAQAdKNA6W5wOg+lgiMwqlKgjusAyTUAvFCjg/cQUb0AgroqA6o5Thks/biYuL+gx3AAAW4AX8ihxZwQCeomhl1dTyOizdAzSV8YQ/IQSqcQU4gUjpYIyQY7zIOADv8A7G8RCWgH+9WQrKaqrVNM2SZSh18wlKecvfpQAO4QgnYNfMGkBcYg2LScW2cABh0ARFUA4/TA270r1ZANzBQmelqATLk/4E5UIAZdN842IA70MaQzMUAJIYBJMZFlAIJs7d7p9sGrHhaqh9Sb4D2GkL3TcA3UEARJEB7BWc4HMMPIBTgToQ5EMI3DJ8HwEMLJUAhfIITtMI/ZMMFQMJHvIQUTJU/bAImLI1O68k4YMLuisAnXAUmqEJCIcERsG8UrPgIuEMUzNZTyYEHfCHxWgrg2kAEMEMzaILQGMMjSIIdqMNKnkoU/EAnWIK7dcIK7IM5XIMkUNh5U4n6JWBNuEA7uMc6rHeStHelLEAFIgE1BGHi5sAGbMJcUAAMuAMQ1ECPgMoUkEE4wKyNd8S4DEADPKkHBIwcGAMfIIITsEAJvMF5ff/EP2jDLIQoCuQCTJCvt2BC90VgYnBcJaRBH50AJ2TcYjbACEFBcSxvy3kBpRiCOVh2MFFDP/SDJOzDfSyBALiDDtQhhkS8ObgCJbiadUMUAuz6EvgC0h2ISIoAHlAyNfy7fOu1MCxNJN3fKWqcd0t7L8zANxwAJwgACCiBde+wJVCKxAeTkLQiN3hBqC9vC9WA1DkB4yz96aVsXy7AHcBEM4NUjDKjAUhByTpAol+EbZxAYuBBA9yAtKog86IEBzzCeUFg0j8ONUwuBdyAL/yBELDAoBKJlYhL97nDDz2N46EGAvzDAcRApDeOPxDAJ9wFAdSnqSxC43fEiyRhB5D/QLVygQ0oCflYQR7UwJRDAfMWvRfEwxdUdrjrCcOZAD14gTjIASWAgGrUQCH0AhSYQQUagiFIasRH4AagQxJ2/dJ8/V3oANKh8LbtBfFHQbQBQRR8gbQM/bN6QQLAFzvbeMSX7wdkFzVYgLXdSZTp6hwQuRdEtiXEQx+gAxesgYi0BF1mZBXHuuXTvM0vwyj7gywAxABHPMr90wElzyZONZSAKGPJ0pQVxt78M/EPY0aNGzl27OjP3BsBXqh4oKKkQTUnfv5pEMAyxAATJvz9cyGqJsYFhP7VHJdmwbh/Qj+ty0goTI6Z/2gIEABqUQ0y1UCcJONhhI6eHrl29WqC/5w/A/6EejX7ZcUUDl5kkJGxAooVDMUkFfpH4M24cf5ODCCLcdEnjf5OCetJ7o6ovXt1kPhXbsaIFDkIfINHha0lDuEauBi612xojv5yXlwXA5YSOSapNhDz7waUFIj+5TAn9B2mf+R09iInlFwa3TlpCP6roMO/KHRgzPnXqgGlqg09eGnA0h9v0dszku5Z8+L3nNw3RoFyjJIX9WW0rBgB5N+BLylA7QbD9MhWpu0Gn0pzOIdTHDGhjjr+IYGCGGLgxB86egABHg5k8CKcFcTJj6yyyBMNPBMM+eeEHyihQg45lKimATma4MMfBIzZYzwgVMEouwVkIS27XkSxCP+jdaT4DiMd9nDCGNq8IYOK6UBIr5oDLPJuQw79uYg0E0CDMsop/zHgi2PCUc8LiDopI4UoTtBAEzsgwagdGvTT5seMxrngP9LQOUWWdB7zAwonKPBHgS9AaEAJCb3gABYQqPlsnPCi3I403rQRYAoSlYAHhB5G8PMfG9RQY5JSyFngjt/2WsCKxfzRkRwe/CnnjfwwQsIdp/b4B4gfyGhIiYaWpGKUz8x5lMPuxiN2MIwMWKMTiMKRASKJRsDjH3a8WYIFJpgwxBxzagqsnL3SMeSUX7xF5x9MfkmEBQluceecXiBoAAQQyFiLAzLigQEa/ZAl1pFgDj2pJBgSaAD/ihv88SQINdDYo4uMzEHVHx5MMIcNUVrVjg8+/DBDgDVuMOgRJagglOBLvPiGgH9dfnkjA5ZYARaIbJZoihhYguQVd+MIpZQeXejWnItEKegfHhJpxV0JhDDEGW5qAKEaKgylcIUEPLMS5g0vMkGDcMRJUgkPQPhmhBFiGJmHONSQIIhWUikhGwM0MueM3UpZB48dahBgBrt0WAIEs02u6l4yajCu68b/vYaDFdiCFtopjrFEgAPsroeFT9EQggUhAGmhBU9w0IUOMz6VQA0hujAnBCx+OAmEtcKEZYp4vjAKNMc5nGlYbmAIZ7qTDE7gmwciqOIfj1mgIwUE5ngl/w4c4piEhVfQQKAfb+BgXgQ8vqiaapOpKOleInhayvf2ORRqABiapZxyS46ZAgQViljHBEhaEAINn7pFM5oBBWXsAxhCoIUzhpCEDDyAUIWT0IQsIQMvXQMjVsKS+7gyJZAYRADi4AAITAYPeFQjbT1wwhciQI285YAPhfBEC/xQwxbQAhSQKJAO4LCEEdSLXr0yGSXI4IUEuCODXOPgEj1Clpqc4Aud0AJE1FM5WGjhfiCoAQSK8Iwh5GAIvxjCEEwwxjNwYgZr+EE1LiEHe01uQrA4xjx+ICscHYuJXRGKCSywJC+MyHwoQlsDYPCDPJhhBhQYgBQQoQBOAIECM/8wQx5qEEQUVeV8JlmLOJbgma1sMI+h1Mg4DgCDecQjHuFQJSxwx8rcXY4MDfjGD7DhFAHU4BsNqA4ZrkKJtYSDleqJxzzE4Q27+UuUZplJTWggsENRgle+IuQIfjCCBkxzBN/owTZh0E0YXLNslzmf1e41gglgpHfJVGd3MPIGBFBhHrmbgiqBOQV7wkIG+azg5NRDBl9ywFAyACYsvCDHFXBgCW5aJ3ca1SiMUOMLRURS8S51omrAYAQJQF4C0jaCb5KQCib0gAeI+EsYXGN9BtDQQtfJvnUAowErWAEqWQkLVU7BEl+a0ATz2VPcWeJ2BV3BMZSgAcF8Bo8s7Yj/XvZiiLIcQRLVCMe9KOGBXp1PiOPM6lVLQsSr9DQBETgBOmdCE6Wu04k5eQM3EjCFeRzjfqy0RM1sOiF9+hR3qLTECk7ZAGDwxCLpPGsHP4kjwCBAKgWdKgdGasKQilOkHuDl5LTAgQZ8YQLj8RZpBDtYJhbtYhsZgCQS4AXL3c+ec61gtFYbj2PINC0NWMIsPjQYHI3DAAbQYFJZytm94NEEUojAF0ZAidXCYguH8sJk2WLaKSx3BEvYhQ5EYIATrOMEhBDBG1TKW8+6r1smyO14j/kGa0TgESMQB4WAGY4p4A6urx0q8TTBjQHQAhpS0K8UdECDRawDu9sdrxIH7UsW8b7hDSIgxHUXYQMb0MDB1JjAPgQAgyKiEq40DQclYFADekTgA1L4BDT8Swjt5na33xVleA2AYAQr+AQxXgQNBjABBEhiCQqCgo6h8IVg0IMZr5gFNY4AiCOM4RM0oIE2bLAO7o73t4ZVcU8aJd4Wm/gELliENmiAXylQYxbbcIc7PvABAgxgANYYAzsS8YawaAedGvrtlENJNDjLqUplTceeydEts/DmzsaiEZX1QufRNI43eJSyoT/7ERoZlhyR3gjRhmXb7Ax60Hdk9KY53enRLNrToRb1qEldalOfGtWpVvWqWd1qVzMxIAA7\", \"width\": 135, \"height\": 84 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }, { \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAERFScrK+NTk8Ovs/tTPDtPT/uLj/tjX6Nzd/vLz88XI26Smqfn1j4SFiFNVWpSbq7jEzZiZnPbrAPTucG+ay3Z6hPn6+j1CSfr7/Ts8QYuq0e3w+lhaYHZ3eerr7WVlafP0ycfH7Zqjsc7NjfLrULm7x+/nLvf5/NHRrNPOLXSNrSxlmdvd36mssKupjeLaB2hnEtHOTNLPabbQ4uHi43mDjSYmKtLT1YmKkUlKT+3spuzt8F1haHqBP8vMzk1yrImGaJNua7KyMry9v7SwEWZqc+Pk6c3R1sPEy8DCxO3jAvv9+/b3/zI0OTk5Pq6wtfX2+P39+gkKC+/w/73Is9PU9quoQ8K9LlNrkpeYSrGzs97f49LU3TIxNU5QVXFuRdzc9C5NZPn53uLi9pCTmLKxbvr69ry91D8/RNfa3CorL+jp636BEq2QiLK0v8C/wqS2w5OVKWFdZG5yesy3seTfSKasw+fo/1mJujQ4Pcfb5SwxNbe6vcbIywtTev3zAby6Vwo7bOzjGPHy+N7ZJru7mc/O18La8Z+gmVVsQ/Tr5eLlzNbZ/X5+gWZ8psPDXqy/1rCusd/u9fP1/tXY1vj3+vPpFURajJWVhp+foyQ0bT08Bu/u9Q42T+LeY+jn6vHg2XtVVBcYGu/w8OLgjcDA5M/P6tzdtUdHLZi+zllKYdnLwvb49SEiJfL2+XakxHd3ZMnIzsXIxfz7/y4uNMzLxbu+t5KJhYWfwa+prf36+tjU1DY2Os/P+woYS25uctjY/qKeDvf39pm44Ofj5Nzb2dfX28jExYiOiLi2urW4to+Ok/vxHV51XcfCExwcI6ShcVpFSlpUTKe2nJ6y1GpqaitceNbZ7zgyNejo8y8sLE5TGfTz+ejo+9fX9iVCU+zu4M7P0QkgZOXn5h4dHvv9/f3///3//f39//v///v9//39/f///fv//Pn9/f/9//n9//n//Pj////9/PLz/uLfdj06Op/G5USEoTU8KWuDui5HgoebarW0t/////z+/iH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCAv6W8iwocOHDs0VLIfB3UB/5sqVc4cBQ7mEIEOKHEmypMmTKFOqVAmxpcuFEglqxPAPg7kdafzV1Liyp8+fQIMKFfqyaMOYAykqNWeBjBxK5nT+4+hxqNWrWLNqRWi0a0FzURvSAKCmwxAWFnTSpLm1rdu3cEF2LYr0H1gLxoaE84GjkYM5czp46eDDJoYldeMqXsz459yXBKPu6uDAho1WoqR4+ZCjUQcnNhqkTdy4tOnTXB9DVIgpGjZy5OxJ69C5QwYHHKrJ4dVgDWnUwIMvVv0QKdhw2shx6FABWxc09jjcajAnhxo0y8lY+C28u/erxB1G/z7R71cmbp/I0PICQA72Pk84OCH3awcUtt/z6ycanqFBfxicQMkCHYjShTbYYCMHB2o4kUw4CWC034QUrtRfQwZFlQANSVSTQyuyfUgOGjssVCFPGwlkkUz/fFRhhReK9xVDN3ghBzaz5aDFCS/aJRBYMcr4I1hEFklkj0EFedRE5Sy0zAcXkDFOAzdkNCFY77yjJETvEOkVko5tyVBdFizhDwsc1IAHBAu0kAB3qAEppphghjknTC22aOYyOeCBhywLjCOVd3LeqWSdPhmKIUX/+PMJGh/gAUcLyZjoYpyKzoloT5mOWc4SaWXSSg0q+IXDJxnxZFpYnR66KUutLv9EkT+jAIBGDU0A8AEfAKpaGquxLoQOca/CGqw5ZkaiRgMcYJNDJDr52hiwsTJFbLEoBevQKDg40AAaz6Jz6araxohttuUuFMsyDnTwQQdbzGIBfr+m29+5Jxmp7778gmVXkQL5M04sLmRRgQPLZOJBqphGZFym1LaEb2NVyYTBLAf08IIzBxNW007CsRqZXV2Z484JrmwgyRpbcAEBFxh+OTFqGp3QgjN/OANLA1L6Y0F+ETNUjiuSCKDHITNAksrSuKiADz5YWGNNGBk0sUcg1kgypswzn+ZPC9qw8YcEztRyH1vjBoeRJDOk8goe+Kwg99R+1O3HN3lYvcc3eDv/YU8GF3wThh+BzHBt16Y1+USubLwgAQr+LEFT2nFGdQg+dXeieRhhfNOEE4ELfkHggYeBxuiDB6J655AcjvhiHyE2jRDWfPMFES5E+9G40g7njyQrBOKHNXhEMEQau2QinxNonI7G4HaP/nzdWETw4CCuvz7cGo04k4g1OBRBg1qTe2Q+vXGx+kogr8ygxwasopMGDgA44QTg3/jB+TcXQPfNK3rwQJPupb2sUG4g5nAFH+YQByKEAQsigMKYBKIRRpWmIRqAAAZcso5YNCAHzctAGC4AgM6h4RuBwAVMLlRAxvgDAjzgBz+cwbkSFIdhpsFIRk7QlQRsYQ5NeF4Y/6xxtzx0wg+p0CELW3iVcpwAfQGzQw8I0AxnxMEBxHgJnN4CEyNhpCUnwIIaUKg51QViBTOQB8m6GDCuMVEoHTmIPyiQiBdkoQdxUMFckLK7Fl0Kio5Zh78Q2CiIhBEADtAfFl6RihloTSL+QeBc3mgVF/1MIVQIAxG8xwaYqUYm44rjUKwkR4iYgxNGGEIHGtAILeEpLHUJWiQpiZWPYMAC5YiJPw5whW9MsQdCGMOFkFIxOwGJO7LEyBoy0QA5LCMieIoMZGh5FY+4SJT+cIMQ2HABIrChHlvy1wFNkswurqONLfnEFhrRAC8YQWIzcgk1q6mUmeTSHBGABQEScf87Z4hhTlscySTXCBELuKwDgYFnPBU6z6BQBG008ccOXKACIXiPAEQAp6JiMs4M7fEiLTHCEbTglyGY8iD9GmRDtdIkOKQAGd8IhjOUoARn6KBTFJzJRCQ5UII+xAeUiEA1PhChh6z0O+bYAD+UcIUw5MMZEpDAC1Jghlb5q3wu+kg5jYrOh6yhH2logAMicNKjdscfaRDCH/4ghGY4Lqov8ESXgoVS1SBFYtkYAg4qwIESFceswdGIOVBAgKhKoLCGlQAhQBCTrSopVeFpbEuEsYMWVOADOGhJQAHL0qloRB3ocAEBaCqBsSVWCZ4wQ54Kaa89Fuohn6AEKx0QDs3/clYxKKpIOSywDkTwYBpXGG1iDSsIBpxDHWVibWuDhIEjIAGhv3DJZm8rFKW4ox1RYIc/0CEHKeRhDllwxluHawIdCGQJWl1ukNbQB1VyQAvSpS5cNDILd5hBF2s4ghF+oQ0piCIHcSDAeBNb3Cg8TL396UMaIlAEDowivvJ1S0dm0Q5W9IMHzQhCEBDRGinA4AUCHm5UBTEBMUgTwaoZxBOSwKxM/DXCimHKErKRhQATAQjLaAQPnsEBcIAgBsIdrhImoNo+/gjFRslGOFbphQdHBMbzdYfkshkHJRDgD2zYjBek4IBK+AMcQFaCiC2hA3SoY7UgRTJEoOCBJ+g4/7MvhrJb3KERfzQgGDRVwjaeUY0OSIEXa8DIOMIsYhOIgaMnVrNDjMCFvnihtnGW81bo7A8awOIFNCVCJxrBAQ60ghefiNw/FpGCAUdVCXU4NOUU7RALhOMIjfhFNdISaUlnxSJUloCY2fCNW5ABGY2IwINBpQ5Sm1rXqa6rdB3bn4iNow9v6MB7bWvrknQ0Ie4wxywaANXS5qMCxVjDKNyhuyUsQR2nKLWIUa1qH+kyvuUqRzb4QJ0P0LrWQ6mg9ip4mCX8w9xGPshu21GCHoj5D8GwRlWjGRkMkCLIp021RMrkb58+uVzC+EQEOO3iowCsJOYO+U76uDt7AhJbFf/7lMh327uoBIwFcui2BLbxCnaADKXweLiYhUyIdldcucUpFw3CerDxYUglIv+3kSu4dO1Z82dHEiQo/QFUhmTiC1HN2TcE4I929K7h9cC0iAkQAwP7itmtWgcSbtCIDzSCqynpiEcy4nKPs6hrrzXHmee129dSIgf0yQQOqhGMrLMBCzz8yIoQYg4xeOLYViaFhBSC4h2EAwlzcIAP4I4SYP3jBAlIwChGEXqPDIvhxQLWhgC1gAZ0oO0dcBfPjBeOUWTiF8iohhM+cOmxKYENKtTIEuIRknKAoA6QJ8BNPYrgIywgAh/4wGpKonofDGEBjWhENTrtgO5zIDDIiMT/8YQxwQwBJ7eHaRFMdpAEZrKHF2qghRrUoA1t2EANlrkMLZrghSLgIBbJoEpWYFhK0AN6IBU/BxLmAAKEAHlXQAk+Y0sfgWDCsAUNgAMfcAw69HEEIXKSI1j+UA5r4APY5wAAwAtOwAu0IAcAAAC/4AQ5AABdkAM5kAd5AAA80AELcANOBhYVZAE/o28Uo3K5tF3j0AK/4AX3N3+0gIJdwAtQmAEpiAYZgAZ7wAtokBwfEAFOsBwp8Adi9gL8wAQ5dXKRYQ460IDD9QcE8AUDEIK+ol7CkAYVsEomEhIUp3QLsQNIwC7YQYM8gB0dgAY84AVo4ADgkgO58gEcEIgZ/8ADKfgBZIAEG4QsQCgQHpGAcXFLc2cOCdAHc4AGlmE/aOAE9eMAKagN9mA1edAFTbB/TdAFTtAENhAJH9AFGQANlqAEmBYMcAAga3FtBHEOOhBip5Yzl3APnMAO88JT9mIMC3BZ0EJBCbFbU9Eo5UADT/ABGYBIj+gAGQBCGeAFsziLKKiKvNAEF2CKvAA4LggA+1cNCxBoqWJPjVFx/uABC4CKNpCOusILHNA8TdgEBEkLe/CK2kB/8acGXfBpfHAZDhADUoVpPWA4vWJBImEOUaADKUAAgiABKVAPLkANbmAHO3AO6OWMJYN2DrEFEGAEmQAYoYZmCDEr5cACEf/gBXngBV5Ag7OYAV1AC674OVD4hE6QN3mQgthgD+2YAeMIKRyQjhyQCe8Eh8KoFVEBBZmwGzaQA+PoBc8BhbRgkE2QNwRplk2QAXkghWVpA7+wDKLQCj1gCWQTBzAQBl6AA4IiEVeZFKMmA4QgATFgBz+gAaVwCXbACefQDonmFSzJEEnwAGH1AS4WcAgxLOOAAzlwARyQA15wAVYDhXvwhFXDCzZolntwkGUZiwRpNZ8zgxwAAHMAADYwlSXCl3BxGBFVCXxQDQyZA4hogg4Af7CYB3ugBlYzf6lpGQxJkHtwg0/gAFKgBlbAhj2wB1IQBgnpAAsgQXkihAq4CIT/kAKwoACHcA+aoAn6gAsPJi1op5JFsQQlYAc+ABgsEILuIA9K4UflIAy45Ikt8AE86ZloIH9peT9VkzdqUDXzF5Rj6YpdkJpqsJap2ZplOTq/IIpeoAVedgKsoFNa4Z9NQgkVAH+8AABeUIWoCJTGuQf35wRewAONgANk8ACZEAFksAwNUAFFkAOioAYLIAegcQUSoGlScIW4qIIf8AZRQRPJFRLIQgooAAQlcAh4IA54QAE/wAO7MHlpVhSNyUFH8ABkgANzEAFr4AGnlxEYIC6HsR1QkAScdgGM6ATxh4u2An+WkQc5IKPIEAELsABPoAUtsACZQAax5gBeOaFo/5mUOfALLXiCH9AHGMGJfZkSTgQgmeCV9qOoKaqWNoh/tMABDdACfXADRyALQ9ACmYAIiBABmdACykAFHTAqyJAPDtAFOGMFAAALt+AFTfiEspgJElQzJMEOygADMWALGqACFIAHl+ALuIAEl4QfMvMYnOACQoAJiPAFkSACXlABCmAEnDAsuvAOEbUDmYCInZkBxymLzdMFNjCDc4AIyqAMhLoAZFCmfYEMy0AGsfoEfMAHJTiWyGk/VYgG7EGLAJAJEVJMWOEPFniisek8OokGtMgLW9gHLECC0taTOFgN0iANQ4UG0gAEX4AKsiAHz2AD9vCR1QALJDACaMCQsv/oBEL5Aff5daA0JJ7gDCkwDcOgDz/gC46ABZowA2lBL+UkEY85CoXlDARwBQegAAoACdSgAiqgAdTwALGwEDdQDZsRgwaasLTQlQ2wAElgC4hwC8sAq7mQCfR5DIhQC7EQAThwqKxEBlogC/QGlsyTASh4Og4AiWrwAYFmhj4RFWnAAwt6iIFIhRirDQCAAwr2BsxiIzjwIC1TAJOgCIrgD5VQDJ+gAI3QBrkAAPYgBdigBDGQA9DADD1AC9gQi13whAXKAbFAk4khLRYwARuDAhrwA/uAB77wAz+gAjz0H5r1mExwChJAl5YACC6wDDfADsTgAUZwAHYwQkOQBAL/ypM42yClOH8OkAlv8ARkcAu/kAuUsANt6g8nAAwncF/+QA8F4GVL4AGU8AQVUA3LwAfh0ALVgAZYKIUX0H0AAJQcsHmXOhL15A9DAJbAiQYtSEIZoAYAEAEssGCd+ZYH0BDCIAwDMAAGZg484g8iQAsfUA02oAULIA1KYAUcQAjM8AU20IROEJRNwAu42w8YQRGgAqVM4AlKQAinUAUasA/7QAHigAW4MD7UeGRKggFI8AiWYAKCQAiPcAVWgAkLgAYNsBCV8AYq4AggxIJ2esBq0AocsABIkAmNQAZDQAzeYAAYkQ7pYA7cUACuYAbswA4DEAA2QTJT4A2xQCBz/5AJ4aAF3IgNVAg4MZjBaIAEQexHPpHCfNA8nrnAJ3qCGYADW7AF9DOVWYQABlDI/5AAwjAF3aBdFKFdPIADlECbclANQGAJXxAHf2AFr2od7Xi7XbCW7bgAiHFLuFSNuTQKdXDEIwAHGkAB6enEuHAC23FzWxIOTxADJlAHJkAA0zANIAYNjdAEchBoCTAEIuAIF3C77YixGhwBSdB6C2AM5OcPYNALPDJ3fcwN2SXIAbAdG2EOwIDHtPIGsdYCxtACHEALCduNJgij/YAs6HVJFlIOmdCCPNBpThmDh+sDNIADGTCpTWIO73ANhGwlCcAKrnwOOmEB7DAIHIAEb/+QGfaADdCQAjnwAkIAnJEgp12woOkIhe1IC2TQKOkHEvOiDuBgAlbmCQpAAVigD/ugCa+gD62zn1QsSMSxDk9gC3VAAhPADM6gAqVABcwgAYDQAKqbCQvQChnQALgQBs/wHGogCrxwfTiwDCUwLEyxDoN8AuZAE3zsuexgDgAt0BRRAGNwDtsBILHQwi2wBZmQAbQQyT3Zf07QAhhh0SoBFi3wHIXYBDxAg2WZCWvQArqiBYFWE7NQDpwQAFPgtCs9BQaAkofhD1xwATQwFsuwDB2wC3cmAV/QAMugDR0QDptqA/aDgveTgstwS8LIKAtoAoclA0gwAz8gDsS7D5D/MAMn4G8q9ZgMQQMLgAJ1MAETYALQEAQV8ANUsItX4Fs2AAAXgCAdgAtYYANSQA5eoA3ySAzv4A3AwHRTEAD0MNh20ceTMBXnMMg0EQ/lgL+v3CI2wQ5G4AZFUAMekAZyYAPNY4oOcAG0oA0LEIKenS0tYA9osH0p2II24AVJYAQdAAAtkBZ9sAWpggFQEAAGkCoJYAa2HQXoZSbZQMv/0ACxsC65gHXOkAPv5APSkAP9AL42UIXt+M5NcOI/UpOTIxAgYAIgRgp2QA3Pqg+OsA8/MAmD/Z9f6hX+gAT9MALpPQF18AZYIA77MAxwUA+8GAMNQOLP8AytoA1zwM79/90ItdWmsd0NTjsIIXAHVlLYDb4ED57S1zUABcAE52A+6FAJwHAHCeAUxlAODbCgC6yw1WAPNmBSKjGBRwCPMeqUFtwK1cAyOVANHhCC/+ABb5AA+kbg5/ARrmABtr0O6IUBD47Hx1ANkXAM2CAFm/AHcTAHGRGCy9CwPtAIyFmKtM4LF2BSSoFelIMi/6ADYk4I9VAIGjADAvADmuAI+kANCoAEQxAhFqdFdnECCyALnjABDMAAnlAM+6AKjZClw1AIV0YIyMADoiAK/D0bjiCjD4AFIawRKE2Gu1UFCHAOA8HgHn/pAt0OBtALS9AO6IUOFoAACDBAQ8ABJvUEav9woqboIeTgBDfA64rLIk2CJuPYgsyDBq3QAEzQB7yAA+ogEXN3A7LgR+cwBr0wCf5W7LYdExtkAAbADrGwoblggkQgCNIg7udwBwaQDOTQAEdABq4YySk4jsbgM3kIEuWgDugOYleACRBAARpwCCuApY5QAXngYq8FYY3CAi2A3gHPACMwCnqgpaFwCRpwD50QDGwIBIAvBVJQ403gCEcrAvtQAhlRCb2AAP+2BATubiBvFxCOiQgADOcQD4wZBWAADFAwxP5gCBvsD3xgP6neiDy26xqR4jVpJgnwCxr8Aakuis/0BLyACJNQAFPgdfOCAUmg4zQxCAEwAOdgDlD/YOw/fhGh7tI0EAkPUNVZQAhfwAnmcA7dwNi6YAy5fgMR0IT1Q+tOwAOhBoQpWY3mABCsSAl6QQBQgwcCKFB45UiVvkscEhjB4M/iRYz+/m3k6I9PvxGeGDAghUKdv2GXnvnCpQGLKBgvlFhZlkMKuS4filzS42PZJQUWswUY8G8JmCqTzP0zx63ApHP/2A0IgGEpE0bd/LnDwK5br0lLlmDAUE6Ygjk4/CXhlQEALwccujxr9K8c2XIc9e79Z8FCA145vHhxggZAKzL+MqG54c+CgQIn7JZzl0DWqH9kexnI68rCFARLy5Uz1+vOkiijcjnSJI5fHLX/NvTqlsCc/78E1eTcyMSLFwAnTtryaqDRL9+9ef+NqiehIKBMNTQMoKYKC4VDPhrkypjRnPKOCVrUqjeSJKXbo/ZdqnDpxzUHvmJKcIZpDq9+nMJwiCDCjqMtzMHgHG96kWyDAKZYqqmnopqqqu8m6WWQ7/wZpJcBzhGrHAuEGcCAQRroYBY+eEEDjd944ICWBfzBIDPk+PJHmeA44MAtAGwoLpMMWPDnBHQqAQYY0kbzhwUfXjQHKdI8A000C2YpYIpz/LnBDn1W+KEQaY7wh54CxjDDRQtc1O2ICJwAAA0nMnATjX78WcKCJWLcaDSmmHMuhREWiICaHy6BRIAknJDije4sEv/tRb38SaMFFEQaaYQdjBRAH018ceQVFXjJg4gXnAOihhYiKEITKXi4hAs5zVgCigAQOAcDosxxh0GoSKMqL3Om6IUJc4LcrJ12xsKAlW6AAdacRopbQA0AMkCDBzRa6aIx8PgCzx8aOOBlMADCpaUDj9AoxsXRMHDKAGM38iENjagCForPQjPKAiaAoYepEuy4xw8NMvnAghMKMKBMDNzJzB8oPpgjDRy6WFO4JgL7xDE7+TInAROUeIEQGfjo75VUIpBCCnuGSFQjo7Jlio8kRihvJBQGuesff1RgTxVNDsHBhm2sIEAJZ3oAoppGcLgECxHgyMuCroai0hTOXnT/CqoXdyXNAGBOQgcYBCyIxx2xhDEAgRNmNaeSDlpchpZoM+DBgVaqsSrGuzCwAOeIAfggBwBygKuSG+yJRc4XRztnXQHvgiKJUfxhIoBuNjZjCmDSSccv0JgwwwIRRBjmnkOe0MKfAsJ2kazMKvoEDWTS+AXuDEwEjgwLXLaTV3As8fgFGXyw4yVRpLBBlGoS5ahOvcwZZTwZGACBgXpOgaejBrDYx5frXvmFFzswEUImAqyooYM01FnHDjhmmQW1dQo84RpG8lpikALoWeqcXY1ixAB2rAMMBWDCP9xRjiVU4mwWiALz/DEGL/DBHB+QWAZykIMu2KBFujMKXvwR/44TCQYNOciAE1hggRw0YIBQyd0SyjGPAUwJHWTxxziSADVGeIMdULhc5tIhjHncARjuaMcGVCAOcehjGDegAQKAUaZynOAueYNCAs7ghRbIwgu/YRMvCpMEf3AwRhhQhw4E4RxC1AMFiEDFyU6mwYpcRC8u+yCkJEUSI0xmLZ7axyt+4AsVaGABgzRCDJTgHCt0QAQecAz73mEUdAwiAAYYQy+scr/8mWMJ/KvKOdxhMHaAIUHrGM2cEIA2sVilHFx7Agd2sIUTsQkNDsgBGnYQRr6UxSoNawIPPhBCNWTCH3OYgz9GYYr8RWUyuoBMAXNnjhs0ppIY4CHmyrE5dv9w7RxRUIA+KLCPfczgGEOqRBgTZ78OGcAAbsiBD1pguzYBoAkdSMdSMjbHKA5EAoKogxofQYRtFE8KokCUOQw6x+ZhIBnKCMlIJjCCDdjFHBaohgUvsb1oOEIDNCADI0chAwJIQAJXyAImYpEZO0AiWF2ppAECQI+o4E9//+BfL8pxjklUgR5UGYCAKuEXBLBLk1Y5AQICwAnF/MIfLYBbcGhJjgjgci9lKYc/+tAFNAxmhF1Qagu8kACLJMAUGNJQZsphBidiYAnpiKIsPECPBAnDDDHEkz/Oxo4oiAAPeKDAMCBRCgKuzi5UdZETmeCPRvwiAQ2QGBpK2BYw3pP/I+lCxwlQECp+kmIEdVBCHIpHhrvd0x9rWIAsZDCBkXjiBlCo0BAyYKMm7EMDjviBJDQACcegAx19sMIhX3AFIDzAA+9gHynFUoUAmKIb57AA/qBC0wH0YhZT0ekkv6O3EwCDXVTNDAImdI5gdUCYv8BqPG2AhsghhzQW+N4cOGCYaG3BA2gIB7o2NtaebqQsFtBu40abBCjQRq50RaA51OkPRVxAE3t9xQOMwAR24CVxUpkE2Db5Dig4IBk08MIIHZsBWlSAKXi6Z+6s4g4UEGKfddBsHQQRB2T4w56i9cETUBAD1E7gEVvIHYeq0QQHoIEWHPiBJn6gATwIoBIY/3CfOapQiFBJgABZQEYsZpHSR55DkpNkrnOLVdPpGqAXVfCGOihjASHdYTRrxoB3ucEOrvhjCxygAQsKwyYvAEAULdBItu7yQTV9IMhesMEy/NGB4pi1IsI4gGkifJdXFeAOrfMHJcKBgCpAIQrR/U4lZoGAAbDjCJjiHgWOEQW8rFlh7NiAwUZMmic4AAoR6ALg3KSmxuhNjMgRkAxCZQJPkIIUJBBECkAwYzsJqB9vaOgETHCKAWjEH0jIgBd+AYA8ZCAMGliBONpgBw2wrCIGSAJnJaAEIQDhCZxI6Qz/MYZY0Ql/rnBQdNFhDqMa6DusSHNU8NTmXrBWl2WKQP8j/NEAWqDIMDb4Kroma5cGZOADeV4TGjwAQkaSxVjmMENLjWIXM7SaSkSVRaNdsele9CUB2aVHFLSHh+sYYhfryJ1ZN2KObhQgQ6NBxwC064VMfKKWJGwTLYqjS8k2Twwj+HWwhy0IExxbtDR4AhWixwASEKAQXEjAP04wu8FIqy2O2AcW9PEDU0gCCoP9tCn0KeUskCENcIDALN6BgV78qrlPkai9y1GAAGyAQ8LgBjAyRBYLmCO7BSinLo00jhzcIA2FiWcGbICoKd7JUYb5RZBzQAu1VIMMG9hCO8h0AqtEIRubIQ1Z5prMvIwCCbSZSgH0BgUm9AIeRtDH9i7/ETAPzLBd7ECHEzewPyY4kRsfdIAHyNCENUnLCc3/zq6Rk/hByEAJSgC2sElggqhn7DZ9eMIIojcBZrzAGVeAhQoe0ASsqoEWvLDBB+CACzyIAxfXwIMkVkcWb/CGRTC3F6AyNxCBoPiHobiDvcsVc6CKXgmAMdAkVhgEwzuHp/E6YCgAC3i0uxAQFtiCBjC4OcAGNIA+J7ABchEQRqmqBaCFwQAc4KCBG/ACKLiD5NqBJRCQWfA0dtiBXkAARlErriEqczCCMwADf4gh1MOXAjCHB7gECvgBR4CEJ/CHJUOgrsguYEgbDbmDAvAGKPAHdPCHX8gEI8iBC4gbXmiC/0gII+ZJOpv7qBeAunogBR34PhMQA2RrHih4giEohPLIsTpghmDYhE2AgTzYAxvIgwughV+IAEfQEgqQg99zhVlgsru4BgRIgHo4o98CgggQLoYJgAIYhKupt17wB2B4KQtghQ0ABioxq3PILkawirJgilnwACQwBG4YhA9IAx9oghN0i4SjgTBSDnNoGF6oBg4InC4wuEgMIyZwKW8YhHOYhSliB07ohS7EQDQ7pSnyhzdQmSkgILGgBwTYAArIFCkUgV0II3eQDHaYBIMhDZxCgALoBnbwB/exKjk4ARxwAhI6ESeYgwmTw8nIC3DwNSXoJx3IQxOYADPow43glv8WoIJHIAVnswRBIAGSYIAJqINgYINg2AY12AMHICZH0AdVCAUc0AcjyAgM8AYwUIdFIIRDKp9GIIOuM4VYgYIGsYopiJUQqIITmCtg2IBZKYtzgIIh2UGyuA0oMAQk+IR3KMMIMDQ5IMbfcAI1OJ1GOQIUyQEHCJwmOAIjaD50IA1zmASjAoPl08ZZWIdRqAJlERALgMo7iArn4YMEAJNBKJMpuIMn2IcpvARqyATbQLzau4N2GBswDBt2SBdVqoY+CIfAcSzHyoEtcBGF3AtzAIdHkAkW0wEGqIM60AEzMLO98Ich4INCwDFmkIAUiIE6SAFCIAESQC0dqIcYcAb/GNiEbdgEB8AFFeArfcABMnADQ9iCQSBDBJjAUfCEUEE3ICADY/AGwIMMeqiTcyjKEIiVTdMXDMyMc2CCAgCGJSAl0vgHGkCCGyini0yDarCAF0QRN1GDDpgMplCMIeOAC3otfyg4dKFLc6AHYOiFMTiBdZghdkgA7qSHddAbMDk8f5CFBcAcekiAc7iDAdAAd8QDOzidcpgFdMimKQEvBZ2SeTCONVuHAm0ADPiluMmALrjC0NSYRYiBOjxN4KwHcFCYRkmAJ0ACQJAAIoABAlgEEC2GU4AGGICBOPCEeojICZgAT8gCDqiA5FyBZkiBOOgBo0maBUCCUmhQd9AB/xMQqSlrBDtAAFHqBSO4gQRgBxw8AIPxuUmIgrxZnPV80ErYiFHwgXBIr8RRB3PogCSYLxQhSG2wOIzxB1f4gG/hAcHogqiSg2SQsYXEgHubgirYjBNwjHMwmylZglnYtExagh2IAC5AAHrQNAMoBYa4BE3ABbkLFnb4NGBwhQiDDAOoiLbkLnZggilQAC94VYK8gBHKA7WIwx21i384hSuoQxIQNhmIAU9YhP/0Bxm9gY9wBiWAASnoAhqggdvwhyJ4BlqwAW3Ih20AhEcogzKQgRFAgSGAA0QABEHYvu1zBiIY2DgAAmiYhhKwhRQQqRcQAjKwg1gIgV7IhAUYB/96yDtOcCIEYIJZsYt2sEcEWAev+w4WSAIaQIfJOCfFMLQiMJHh6AIkwKUaOhEOoCXBuYFxYAyLYIdgKQfdQqBy+Ara0BuaE7Oe6hAhOgHFa4ESkEUoyCZqwFW+ooZcaMJ8QZtzUFB9kbEokop1OAHMCYFSOAAHSIIbuKBwQYMu4AHWktbQvAsUu9aPvEMZIIQYEIAj2coGwAEWwAEiuAIY5IVwAKvRAssmoAVaUANReAAFyIRaOAUXwIQyIIF+ytIs5U1myNzfIQAiEAIhcIYXkIkr6IAaKIEC6IBq2IEF7QUh6UKoKSUwQQBVPVEP8IEbYAUW/AdF9Qd22CQaoKf/TIA+E7G8qLrIJMgDL+iAC5qlcsiEaniHnb2I2wgW6A3aXtjHcsCrr2BAYXgMBEgHdwiHAwgBelgDDGAEJPuBGTgEEViGn4qhO5gHdxDWMkSHWfiHdGCCATCqUlAAQ7iYvT0BHggXNwEAL/ARt1VIDlnGEbgCAjCBfhqBGJCARxCBRkCGgiODJFiGRugHFqCEB4ADSXCFaXuGlLQBxFUDN3iC+hKQBNiBGyiEEXiER5CBeuBN1BLJy61NkVICAgBdZwACHCgBHEAGMDAFQzAYS6qTu8ja1NnBSDIGH2AkGQMvdrCAHcgGA7iGsXoAGjiCNrEdG1CqsvAHMoAbDhgM/yeQxqiahElgglkwh35MFAyoJJ1L0eiatATSLthUgAJwgwY4gAD4AXFYgVcYhgiIhEqIoQ1gB8wBhknYWa+bAkbohRAwBCPwAFZ4B+h9g4BsgMApIbdAlGlFKHPwgEK4AkL4SBRogR7gBxFgziKwkbjggbnBgRmYgQdohGSAAFxIhVSogZrlAGVAhDU4AXeAXumlByNYhFMYgTJQZUIgBBMASfMgAd8hAAIIXSvAgQjIBByogExQgBAwABlzISceA4ShgXCgAZE9gZ0aA28YkiqoAgS4A3pggmV4gh0gDHtwAi9oghy4mNtoADX4BUwVnEiwAA7wAdAYErBRJxCdgv9JAFUZdQx4k8UowB/OEAaonIJaeAIDwIEOqNUppAZI0IA5eAMncoUlgIw76Me1uQOjCoED2IIE0IWNSAcX4pYc2IEWCGXH6gJhsshpPeURWFgCgIVliIAn6AAvEAwHKAIH4IGovoCodgAkWIBPWAYA6AAcwIFloFgyiAAISAUReIMkMFsWYIFPgIIl091JyIZwKARAkIErcIZq7k0t9YRHIFchaAAyqIEfwIG0GIIbWANzCM9eAIN5OEIkUAB7RgBvwEt16oYpsIrFPocqWQAcEGAvKgxihJeNoaC4GNAb2IKGE5ATYII3Lsw7UKezkegBmAIwOIMAqAIWMITNqIT/BBgDYNiCZEAAEUCGbgoE2YIEEWiBIHQHBd1YF5mCAqmCA8iGBCiTO3EHIjqgE+CAcPABwVgTEsIBpihl0dyYMniBYOABRGiAAS6CzisBr6qGqXYA+4ZZH+gDLzCeZ7ABJ0CMN9CCV8rMJOiHfhiC0EkFOMiEfjgGN+ADFhCAFuhFWSgEaMgCIUiBOjAB3/kDAugANbCBPVjhG1iAFuADZQADYAgBU0CusdKuAaCHSZAizlYvf4iFX5iERmgC4UCRLugDixA6gI7qcFmDJOCBuzEoJY+KOrmNGWKCnRqA2F7QACgFiS2Aa8DtKjAEbzAFRHiAs6MASMCFGqiCOzAD/8gYg3mYBMhg0GzYQXNIB3kwKO+wCPEaBwfIM1GeA9Yy771YAn/IBmioAFxoAC/o0jlQEXBehg/ggEZIgjkwywgwAhZoAOOhhTZRg35Ya3+IAnbgbH/QhSjYAEkodRoghi3Qg/XVA1s4hkhYhhLwgQhogAiAhR6wAkAQAiLogFZ4BikgA4r9bhYgZztQAAMwBRaohO8YC165mTvJliMpgjWIAB7/jQxQg071aQCYAyLnAAxYgBWcoxbUvAWhKX87gUEQpQIAvCoIgRAAhhLggSLAAuuwgxlwg1sgBp9jcVM4gxJ4zlM3AmIYeIIfB4KngS2ggWKohEaoi4kDDsPggf/08nO9sIB1YAIjMHQeqIFfkAMBbQBKkIVGeIMIuIFaeIA8a4FR4AMvEAVayIALyIMbaAEcOIMzQAKbVwAF4IIDOIAx6IYBqG2hF/puMARDIAYa4AMueILoqAEVEKiTwQRMiIBcONP+jYWxZqRyV3KMmF6RvTl/8IAiSIMnaAtivPYW+aCs8vhaSh4caAQO8dSDKu+FXDO7Hw1zmIdsKAVTRIAteIMzFoVveAV9+ADEJINkAMoqVy4WOHWELwbIj3zJh/xdoIRioIQEwAGl4vYcUJMc4IFbovjliYJ1qIRMqOoKmIO4SH0eEJEPUIYSrwVOKIILmIMGqIAkaAUbuID/C8gBFmgBLqCHKQh64i9+4wf6AeiGMfj5N8gE242ABeCDBWj4qCaH4mkETGiEWkiCFkgCJEDs5l+DlRn/iyiHBrgBtsDRcCk0ixjGD4DqWiKXDkiMMuHdfvz0KlFyc5BR4gOIdf/K/VtC0J8wQ3YCGHAjyga5ORTwaPiBi0yAXiHADFpyjp2/j+c+shtpkl1JlCHN+XtSzV+jHF6coHECYIu/fzp38uzps+eSKJ+K5ODAIYcDBxyKcKiArMGHcJVyOShC5sKFRoMqiAKAxsGaBThRki1rtqS5kkssLPHnAckNY5GSJKlQIdMvcnukSLMVKZKsN3y2WPDnL02LBOYG/xokyNPc4nLlFvvD0EAWlwv2eGVwogaH4SS8cnzw4iVDA3+/Ivlj4vo17NhMTpyQPYnJpAGGnpTC0YVcxB8r9InAsexBrFHmTpY06fw583P+hsjxhwxpBq8AWOT86f17uXNmFnjhMARHhCcV5vDAUqRIBTIVcHzg9evEBwdqftWwAQAAD6OI5c9ZBZY1UloqWRDOEEP00wIOjSzDgRQVhvFAPxHQ5UMlzfnjwxD/mNNOO9CdA5lJ/0TBziyN2GIIGvZggwYAajTAkhY2FOVFDk6AVs0TkxgwJJFFGjnkHUMicGQVpiQzhBf+VeMFFj88cMsvuSDRzR1dJuklmGGKCf/mGXKUgwwADqDR2U3dffdmT+Z80sEFDXziww0RLIBDEVgYxcMcF3hRhBYdsLKATM+I0kQOF3yQwBMHDDAmpWJy2eUAZ5zRRyYR4JAJGVh8E8Y3nfTRgS1pnDHGFK22WgIYU2zgKq211oqDMrHQyAtNrTSCznQ2OPCBTBmA9gFrI0UxEjvLkVRWFOskOA9ZwnhQTCaZ3BCLPTb84gU5anzQCLlPKGAIF2CM0c0AUwzwLrzt2uoqvPQgIQc6y6TZWRNOpOEmnHCW4w8L1eRQQQM4DKFFBBXwcIFSXgBaBA81ODBOH0jZ0EoXAFzAA6SmJHkkySUPGUIIvZwxhBsLtBD/gTJotMJLF6K0gIwtPpgCDM89VxFCz0ELPTQCONiiQA4AcMaLDY2wNEQX2DhgWgbI+INsSCYtARnXIi4GmYg7pTOwnEhwQc8O9IjgwC9yyAEANrwcUwklChhwBz3lQBvFPMweiBLXCPrDBw/+4GCaExlkkAMNAAf8pjnGFKHUAy000kEHcxTFgwNzVNWUF8iuwbkTtDCKBg+uDAjZgc8C7uw5OhkmDBchIHBDEhG48akWynxgQxcXiIJIBLawcAMLYBOEzhA7LDGQTyRKr5M5lVSQBBIXKI0GGjak5k8SraBhsBcANOJPNQv4YwAC7bsPDCOMwM9IFd5Ucf/99ntj/wrKIRTQi0ZCIAI0aMMBSltGXDyAgW70ogAIAIYBpjAJDICkHFvjGgYNY5h3GOYJv4AJ4mgGgHE47nE/acsbOoeDPCxAGBGYAwcGlQktxNALcujDEBrQiDPMwQtqaEUT/sMBV7RgF/7g4BE1yBINKhEywErADUoRgAMUwxZaeMIT3EAGMkRAC7/4ABZqgAhkKOAanwhHMRJAIMMYgwWOWQz1EgTHJbRlFL+4AR9o1C8ntGIZhrmBNpwQwxygYQ4waQQTDNCNRd5hkY50JCd2kA1JTnIUo6BBFkNQihB44wAKOAMSfhG1DJAhGYYwRjh2MI8pFKBdd0BAASB4ByaER/8lYPPaP9CxFn9kogP+8FyPnMALAKyhhCYEyuByUIQNFCEDjYChF+ZQhF/ggAd5EMET5JAELhCLKV1QQ8cAkIMd8OEGOZGM1zAYp8n4YxRnKAUCOEEDLhzAFCsbQgQysYBGyOEDHcAEJrQQggAEwBtnWEA4dGGYUSTBAktkIkSZWAkyGGEB2WkCGpiWCcNQogvaSFPSCkeGaiznLBGdxxL6xo51MGEKVQhAFYAxBnpAwQID6EUABlDRTHABASXIxQFu4IFRmIGVAzhHOZhAj1c+EAEDoAcGFvM8nZQDA7tsQGomBwAnOKEJHFDjMd/UFi4cxQjZy0ARHHEB+WSABxz/uIAP+ECGRrzBCDUojxO6ELykraEPffCHZBzTk8BioLDrWMIWUnY3nsHyDC3ggw+eMARlvLAR1cDEAmQhiwMEwBQI0Ig3BsCEUYTDgusobDnQodrAouMf0vKHMebgigjYhFdOsAFr/LEFXqjBCw7IgUwSoIUPLE+1rY1TszAwiW48sBRnAEM3KuE1dSAgACUwhSluEIlkDKKzxzCFAQYx1HNkoxdjsAAGHLoYenTDAIyNIAb0xo5/tKMwc1jACXhQPmGqgQdQMGZYddIWIxClrkVIRqByIAKHPcC3ZOCDByIghzW04AI5oIUNmgAxf1FCCwDeCUtihw5uXGOgAQiB/wJY1cktLAMHFbDhf3KAiF8sQAuUSMMawBAATnignqXohf0m+Dw4UhWd5XDHP/xxKng0gntdoJkakmCYBHhBFGjgEXBpEI4cQMEcgX1jif6RGwPE1ABjSEIfRtGsdLijHZMoQAiMQAlgnGEwLWBBAUyxBUOUwgD+QMcJ/lFeMHCiEsKoadaSOoX28ewOA5hEYRLggBukISk1yQAtGhC2AP/EAv+AAhnQgINKNKIBS6nBAxxAhgcUJQJpOIIWFkAGzn2gCXnIgxMcwAs+fKIF6BDs11hnjhNsYAAGwGlnDXGDLSTgBAjYADvQIQeOiVMa0rDhG47QDxYkYGsGKMAgaP9gDCRkMgAFMMCj9TYSOi6hHe6Irz9kjZ8cYJq3XTAnSz5gZR55AQ1IGEUO/lXVC5bjBFNgnwOf+g4P1IIFnubJTU3BiQQYogpu2MEYTPGGzjq8DyG4wxJmEZ4NVAGAYOCGLhKQAGEsoRIWmIc5WvrKRnMBAKMYAnYy0AQ1tODDAV6LOXxwlDTwAAByiAAcKuCAI9y1CHMgw+Sg3oRGLMB0t3ZAHiJwgkwMQoMWtAAUBpENb/CsF6bYZDyhoEt2MAEBU/gHN2KRCUQoIwoJYAElbNGIX1AiCTQgMiwxIKJxLKCchngnTN2OAXVwTTKzMEcDtLCGqTlBG13wjxEAazj/cly5WBHwhxzUtwR2nMDYwHDgGLgxi3n4Awo3OEYxqxpoDBggBAcQxjvWcIA4+6MKCNhCAM5AwlEoIKfDFjw34FyFc0/ieQnYgcpHIYwo+KPl9BhACzjgjwhQrTNqSIbPw0pHcyQAGRfgwAe4gAMOiIAHmUiDHWjNCzSM67d8WECGbW3ACrTEGAnYAgscQD2lDAJAVyUkVi8MgOChQ4fQAwLQwzmgQwTwgQXYgi3cwA1QAiXQAAuQASWEw8cNBEEEnpKlwQ4cAbexQDgggQIMVAHcwRScgECUQwL8Agv4AHB1AS10QSv8guANTDK0AjbIRNJ80DJ8kHsBgzdE0Amg/4RBvAMxvIExOBQGnMASsBQwxNkSoMM7sIAdFIA6YIApjIE5AIMdbAFkeIACFMAUnEN8nQMUAANHeIMDTQJL0GACgJ0H7AAUtIWE+EMH8AiujcYaeBmnndD4ycIHAMgadOAD3FELFIGo6VAabAAOAMAcQMERWB2jmIYr5JAClIIUAQMM2iE7JEDtIAATFBYGQMEqqeJiQAFqhIMsJAEHdIEtUMI+5aIWHMALIpWXPRAL9AEGtF443MB/VcIo7IAReFLKVIEBYEAfzMEJRMB/dEET8OBGHcQ4yIhpABcAnCAA9FQ3YMA6UItOYEA6WMDrcQJgWUA5lMgUaMQOsIOnVf/CArgBAvzDCYRAN/gDAjyAOUXVOKyhHcbXpwHDPu4AGPSC23lEZLhDOVRCAoyCF4SDB8iBAXGVDfAA9ByiT7TbZECBG3AALXgBEjxADeDAFuCArPGCH43CHOSBA/yLRWZYHqABB+RBLKxBBNwNE5iD4EGGBRhBytwBBjDgCVjAOrzSCcSOOaCDF2jDAvRDMnwAOXRAA9jA8CTBEMQCPbChP0DGCQTfJ6yFiNBAHxgBS6DDLBzW/x3A/dRABKQDsaDBk5lOOLiJBXzARwGXrvGBOuSAhwllYEmkOazBMdxAfMGj4LnDHXTWf0UVFPhAJojMEkyC8fnUEwBWVBVDKQD/wwkIZUHEITDMQhSMwjX0AjAMQHiI4MAInTq8QVFsVQZ8Rvj9HPVAQQSgwTN4gQjMAR+4AQT4wxEAQAmUgAEVgQm2Qzl0gA3gWgaoyectAAkRhGSYA+3YziS4YRWOHvvM3hIkEg6QQ1G0AgesQSZgQzgkgz34ABJ4IBgUwFKywFfyjEEUljlU5g04FEEgpjkswQ58gA/QAHDlVRO0ggNAAfSwRASIT9LMxPlglT8sJQbIA5JhgDEcAzEA1rtZkLPZnn+2XhJsSwKyXQDQQxQggCksQ+ZJxoLYTiXEVzmAHc8wATuk5nySYlRVleGAxjL4VgZAGRJUhmCB5E+Yww4g/wI24IAI2OAD6AkPZIAX3JqrCQNlLEAXJI4T8AgPnAD2+MMsPB46rMFADYAFoJdjsAP7RJU5vlkVyIEoIMMu4MC/QEExsQDfAQDH8AoOyMIQsMA5nIBCzoMFxYM5WMAuHMMO5IRVLaU/hMMcmEMLLA420gI5kAFgOUakdoE9RCiPkNaCloMwZOcOLGYl/BoGIGZYxtk6oANlvsEWvAESAAM9sAM9BEB3GoA3vMEbKMZaJISMxldhCQMsBeU/WEACgEFMzZI/JAAH+MAo8EDRcVXHfAJgIembTIYwZEJwZoIC1AAQ5QHEzAEandPAsAAa7EEeZAcHoMER7MAClMMs/P+DMOweMBzkP8RXtLUPVbGUA6mGKBzDJ2zBDhBEZGTDAeDALziA29gBGS7GoDrQOliAO6zFwh0DJVChBZyAPzRAJphDNXgFNgKPD7wj9bCCA0AoAMxEz3FAzxVjJYTDGxDDr4mgpw1AZzVqYaEDFCABC+xAL6oiO2RDAAQl+5ygD8CjQyUAEjDEP4hcehlrAdBD1KKD3TFrK7lB4fQDB0ypzqmB01jQkWorT1iQORjBAxTBG4gAU0RAA7xBGvzXO2YnFNQaACiOAaXGAlCCP9DAQCElK+onBkCQQVxhWIIBSMzBM2jBKLTRYkhkOXDC/4BB4/jDm91B7HjamxkAUln/wIyigzDcgA94QGWYwxbwgBH4AJU2wQ4qKINWlYBtHzlkhzgVhT9EggMUhhEkgw8IA2AZREHQXghwQewSRAIkgcP1ZPssR0M+JfsMQhqEAyUYppIiQS/cwUSeQFVZwLdNQWMk6hpkgwHMwRNYADRlQB7sAS1IWdmarU+cQAKQwTLwATIMASW8wQzJQhpwWzFGRks0QWc4wY5sgTHwFNDQwxKkl5qSHgRR1TlMQi+AwTr8mTjVAjtwAVvua1VVQgEGABgE6BIYFVJZ0Aac2zzUKzqlLf8WxjKkxhxkx5Px4OdR1eymgUf9x77wgT8QpgfwQYeagztgaDxOQhZuQWMU/yMUKC9s3QA7tM+JXEMVYMA53AEjnMARGEESeEBkyIkCJKBjzsJafC87VNVBRIIXmMMQOMDDWGsODEJkwO8JweMo4IAWkMECqJYFjAILzAAkLMDCKAMlrMEo+MM41EgTaBgPoMHn7dAUCF56pVeSMQEpxg4VJ+461CsUZFoaGQK2km05QAECVELJnUAUmMEIt5JQxkM7nPAYlLFkrOp+hgMNVJoBL05X7VwTcAc6paOX/YINoAEh9dsH5K4TsEAlbCo8EsQ8hsAaWHJS/uy/JMCvJgACaK4/eAMj6MQAVAEUGPAnIMEs3OzfriE9GCY/WgADDQCbtZkwqEIuAKJb1f/E5W0jQsrxYE1GGuBACdQATqjXWLLZKKQBmilDC0AADTRAj/yQ4gAAJxjDvM7CCVgVHfkDK90BLJ/DPIKBG3qsEdBCLLxBMRhCMRWETogyBgxCCHgurEbBALDhfP2DRveCAUTbP7gDTi+BO8ADB6RGA1wUL/BCVo5lTxSWPxxDIOnwTLxBD38ejQqeBUSmKSgGQRhEJSCBMRiGD6QBO2yArcq0A43ETUHBKPxVOAjcvv5D3eSrG+4rBrh09i4wL3mBPyDBsPRIBnRBBjSO4OFzkpbDA0RCBIiAPxzWYyzHErmCJAiAEfQBGSiDMnQADtRABnxeJuwlHUUVO7z0URn/1kafQ5pG6i3OwQxQgiEohwWdNAKkV/FNgTnMQiWYwUu79kDMdDewQxXidDH2gQN4wBYszpBmow3spU8QhAXMwge0gjgJ8wW8RBJ0QeNIBhwiQAgYgzDAKjxqZxIYwzuYA0NVQhTMI1TT9EjM4yCUQyzsgAUkwQ4MBNP6gO0E2pdFwQbQtD98Ahr0gTnAkAMkToL6UTq+rxyzhDE8mD9Xxk0X9QpHgUJVQgc4wQf8wgOkAhy0wCgoAzKMAiuwAoHMtpeVwzrM4yvL9RbkwDPotQqMgyEohkl/GgIEmjEAzUTDtk1VrVSdg85mw3wdGfk5QM/NARpcADYKtRxElU9A/3Kw2IQ49Zv6dAAHGMQ5tKrDrQN2amcfGAMrxsI0M9dkuAJDlESucoM/UJpuESNBUGYsBMBqu3VhLcEJT4Ec8K1SXEBO0oITNA4H97JfJ5kFiIC3qk9B4HQ+G/laDEwsNAHwgFN5NAALKEMk6IEAnEDtccHKmUF4m5dQwqo/vAEtoMEvDClmsLhJi7LHsgAL0PSHu9xLQ6BOVHEvZIOhpgPkfVA/1BYv5AEttEI/AFjPWkA1kAMBL3kOsMAJiJo/RKYCeMA7iNwsRNV6V29U0QASeJkoG4CIqHQ3jESu/tca+IDg9YHfDq939wFDxI6RUR8O5IAFkFUMCdMetAJoGP/Zw+15kqVBDfBBDTQOUw5xPpsxjKrWHAQRGuQBr9jAEPASHAgAIxSADyzAGyQBBByCeZlBl2lePzxDDpBBHohCJHyCdEFyKL84waRBNwTAFMAqBsT2S08CLKdDZOp4vHkBH3NPXuWVKFSDkX9HWxwDL3xq0hjQL5hDOKjBEyCA8SYqWu5rH5RWYCFBIf6DLrTSfHFCCAyAiEjwJLReHyiGBQyBcgxEfI1DLGRvCcPberKAKzg5B/CLjpDQ2eIzWg4MBuAAF4kAO9CRGXvHkaZrj2DF4vAKIf/CzrC8skrCITDEKPSDLMzADOBYI6jB4ugk8MhCZeB0yHt0OFiAKdD/J736rDC8NBOcwwIvwR28eh8AwLR/gE1w1W3dG4J/B2TARDATYX/70QK0gt8aNx2dSB+crI9O7zsOAjBMQbMY7TmbgwTTw1jewN/5gxG8weJxcDm3Emj/lzHYw8GTwdduFc3YQAsQGb1ndpLxQQ5EQBHsZWCl9eOwxDKogcdwDwfYgPbRwANkw6YuwU3d9jpU5BYAhB4IxyLJwdbFXoc5clj4K+fuRDluCE78gxLrBKcABtbNwmCOm7ABBaCcW1Ku3J1eABb4a9AlR4YMvLpIieAQwz+dO3nq9EcDQBc0OYg6yKDFZYYd/ixgKJfTh49y6MpZTDJKJ6tuCJiYO5et/1dFc0x6TfFnjsYNcxj8hVOb08I/c5QUFJjSzp+RDGT8tXDAIwcaJ11azTmxtmdixYt7VvXnEIecD79arPvnNCfjxP5GcchzAc1QDuQa+BuCA4o5dwN6jTn31II5f5V8jMqbLJIsVhZYWHjq7unEiuViQfE3JsCUy1MTJBgAjMllf2t4LPOXiRYAJ05kPnOQYK05zTqX+ItkgxcaLznWA7jh7wMA2xhmlevjg6oFC/5uhHNoIQoDgNHpnDF6yWmsKgY4K4E+oKjKgjfWMOepqjCQpS4MaEBjDn/6yEEOL2RqQg0njPHnhMzGWzExcz5J5gkcqqmGAwfQaGAHc8zxjf9Fncrx5xhaMrhAJgc4eCYT83DgZpJeutEJg5x+9IGFc8xhYQ1/2GEHinCg+McCd/45QbiqYlkDHQtMKWC4JTBo7rlB/PnEgUb8ScKJmLqQSY0u/GtKRcbKieKfRtADoChE04APjYYwiCWWpsqBopId3uAmynKEMQCBc9wpsAAfmaiiG390CscICqdDQpgxK0zABwOqyOEXf3ww0qgMnKBFDaTK8a2qHoU1Z4cFvBBSJjQyoCWCcigMlsWT/ImgCydAc6JGNSLpaxkuBvjnqUz/6U+nE45Y458lLBikD2Fm+UdMMimSy5g03iE2BAPIO2kH5+5Iwws7fbiA4CacQIP/llZacke/QBfDoLwEeCDHHqLYG2qLfzqwoY8EjEEJ5Hf6oGFHDCwYBYE72qkKjCp2OsGbMRzyZwtKKPzHH2N8WAuzHyNxwjofvPDCKCeaSBiHs6SEVlgWzUlgmS7U4MUBwgBIBuSmUVqrg1ZCG5IDL7T1BwkO+vAHs0rmfONLi4oD1xxOYmEF3KqgSICiJcwx4oizljggOTOachMKdJ7Yi2wAFM9DV2xsWMZZeJnWzGR/0kCDYqIAENGL98gQxTqeP6IhibhyOoebXuhpJ50lTEHgZgxiNtWcUY6oDyVh3qAB7Y+mFSVJJIZ2gEhe1BDlF2FMbZr55Tzs4AMHAHAA/4edUYpLWAvz4kCNIYd0IIcmWuCvkWR0xAAdYYb4hHYP+shJ70HmFk8nbvA+QW8PYlHntUrWNF0dpsIBLfrhDz5kYCiCQYM9yFEN4+iEfiwClK204TWLiQgAbzCNGjpgnKeg4xi824kwNhCWdozJFAa4mToYgQCHVMUHnCDPT/gABbZ4oBra0KAWinKBPPCiCTYAQJaa1zyUOOUfCVgDlnBWIYgJawkn+RELckCLr13AAcfiyxoaEQHjmCMW/qnKlcS4hCiMohZxCVYCBkERKyUgCeDJSTbyJR5/sKAaOXhPJpqgOCIJRg0cGAdTiggctmhBFGoYiuK8IJhMuMgLvP9IwmOIcQyU+CgBW3FHPNJxghB0g37lAAYw/OGmfxyhISAzxw084I9caMMLn8BABKYXttA0QRRoeM8Sisg8QMlFNmdZzmUcNp4oZspDaGjCZ0BTIyf8gn2Z+IWD0mCBiODsBouC2DlGIQspyWUU9zvHZZCQI6ecA3AnsMAC0NCIu3UAJkRCYAbIAYBivLB5cIkNOxAhilbYQ3EWa8IcWrkMNfDgBtzghmp8ZAEE6KscnQzAAF7jLASQcmtG6EO69PaYIQDABjdhwRyml0UACMYGtJAFU3jUy6Y5pSpHxExDoWgGN2HgBKY52pBA4wUeDIUPOWuEA2LxGB/1YULl0Fv/NpCQNWKhDH96i0WqTEY3MNjBAQ6Y5IeakAMf5kEwrdDjf4q5IjdVJYrTIgd60BDQHOQpqFuohhrk4J+zrEUYBbjDONWVnHYsYRbvuKhD3NGOBAwhAY+5kwNa0QEj+EML0jNpBgDAi2egwQeljKJLtbaTrPnoMuCCIph89KMh5MAGTZBJnjiQAzVUYBTlSEYHGhCLH1VCAYM4hy70JgAk/HUJ7agdJ/KGgXfcwGbmYEcUVqEKlpRjB40wWExUqytR5ECbn2VeKB2jDDWQA4Furewv3sMCeHqhBUthRyUQsIHLnGMHydnRCeIxWHjIg5M7qNQCAMBB9t3gF0ORnrJm/2ID7C5vcpxVcPPEQz9J8Uds3FEWAGokFC+iYwgduAUddlEMc8TDHe64UlGjRJ9wIqASYTKHB2jwDlDQIQhBWEA6KhEBNPACADPZjrIaOEi5LLi0puWFKPakOES9NQMNaAgNcGCPLlQjE2kI5mOQw4R3YAAe5jAAIxTrj2I5QBtdaADvjNGAtg7tpNvJQwOz9CzRAhnOLn1KeWjwgWfwgmBDIpprAZAJ46ziFqEIwipAwQp2eHmQ6dCRQ7hhAAwcOgqgaEMQBP0GVrBiAa51AhDzwLgMNIEcHRiFOXgJZ5myhRI5EAUtDjaUoeWAFxloxInU9wsn1+kJPkjDAbxhZf8tRSEbBwDFKgrRhmhgoxq2KI8hOiAY9gRmmUG0AWoYGqwExxnbK/qVU/zhgUaooY/KugB7bKQGAETgsaN4QxuAAAQX0AHeoFAEMRRRjD5kwg44WMCkg9CBSIxDHkZ4wAVsABogxpqyrQipcZCI7Uv+aAcdEAU5mjCUHCDKCwBoQhM+8IQsoeMGEahGIxm3OTk0gtKhULk0qoGJWpiBMy34wHY0lwcn/JAWd26BjjZ77Wz/XFBOMR1TFhBEmSDwzMRDTxE8Lg9XFOMYLmD3LW4RBFhIQ3EOkEMDIuGDT7hDAJH4AIkqrqtlAlKsQyglsIBelXOcpQW8kAJ422qxi+//ikNPYAFb/MENFvRBGblABCIW0AI+HEESTICHK1jQgjmEzwmI0s7NadIKUXyAEsL8a2mB3vnxgAw4s5CNDz7QilZQ9ujs8cIFvksLDuBgdztwRTrikYAd0MADasOpB1hwGg50wQZ7aAJNlunpDJi+EUuxwEno4/kf00zireiC5I185E+jgQddbMEQfECJLdDACFs4AhKUsQAczIF4N7+A4gTDi003wfIsYcXynF9/I7IFCplWQ/fkOSTNZUANnqEVuscBfqEBcAAHlgEBG6EIOKC/FG4PEGjTeKHTbG4PTK8aZIF+Isj5KuRH+IMD/AmI2qqt1k9zjGaZwsvu0GD9/9DA5tbPyFyw0yiwFZ7BBhohsZ7C/naQeZxCNkYhAniBHNSAcZQlNNoKAEAjD9SgBp/hGciBHERBFAQwpRgHNL4mNIyGFqLQC/rhgS6JB88qJ0xFGbxAFKRAGwwmWULjyOyuKNaDaF7NYvxo0/IA/tZqDm4AXEzG53hwB0EGED3rR2hgGTAntY4OEXnqCo8QEY0vWZSQRKQQvRJrOcqq83gkU5yFKZSBA1ph7sBt0x7x4sZtDt2qPfwox3gh51atASgBZ0Srpfyw7QBRXfSjKboMF5fjA78MClthD25OVzptO7YDEYmRGDPA5jKgCxJGFGyAA4bggTLREoEuUMJFLv8c4gYawR6kUAr7RFdCMQYXCRWz0AmYkBxawQEiYBx0JJimDBfpTxYVDBB/xRYtQBjcscsoBB3QZyr8AQpkodlsYOL6pNOirSAPcviaQPiYsBu9gAy2IKeIqRrjUTFE7DFGQRkaQdWkgCOpcP8UkrJOiibKUQ1sQApsQBs4IALCYT8eAx/f0ago0uEA0SJh0iYVS90a4PfIwQkHcAD3ILVsYADPsQZNDw2gjBL47q7YkULERSYVQxOZghK0oAO8oAvOkCOzkhzmjiMtzx627g22oCVv8iaf0v7IEhcX7THWYRz4YBlGThugkBuloBXIwQkc4AMaIRN8oJUU6yUfwwJbKqESpnEH0fIxEqAYZEEZBo8xB28BFiAXtCAJiiEBysMwydIs2w6JLtMwR+EGZOEYhuAN3mAIZIGVODMXtUsmUZM170ou0AGY2LEPMzPO5hFaWhM3cxMeeykgAAA7\", \"width\": 165.5, \"height\": 103 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": \"13\" }, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Road-150\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-R93R-44\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 44\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 14\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $3,578.27\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }], \"grid\": [234, 234], \"tableFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"cellSpacing\": 0, \"leftIndent\": 0, \"tableAlignment\": \"Left\", \"topMargin\": 0, \"rightMargin\": 5.4, \"leftMargin\": 5.4, \"bottomMargin\": 0, \"preferredWidth\": 0, \"preferredWidthType\": \"Auto\" }, \"description\": null, \"title\": null }, { \"paragraphFormat\": { \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"headersFooters\": { \"header\": { \"blocks\": [{ \"paragraphFormat\": { \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }] }, \"footer\": { \"blocks\": [{ \"paragraphFormat\": { \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }] } } }], \"characterFormat\": { \"fontSize\": 11, \"fontFamily\": \"Calibri\" }, \"paragraphFormat\": { \"lineSpacing\": 1.0791666507720947, \"lineSpacingType\": \"Multiple\", \"listFormat\": {} }, \"styles\": [{ \"name\": \"Normal\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"lineSpacing\": 1.149999976158142, \"lineSpacingType\": \"Multiple\", \"listFormat\": {} }, \"characterFormat\": { \"fontFamily\": \"Calibri\" }, \"next\": \"Normal\" }, { \"name\": \"Default Paragraph Font\", \"type\": \"Character\", \"characterFormat\": {} }, { \"name\": \"Heading 1 Char\", \"type\": \"Character\", \"characterFormat\": { \"fontSize\": 16, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Default Paragraph Font\" }, { \"name\": \"Heading 1\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"beforeSpacing\": 12, \"afterSpacing\": 0, \"outlineLevel\": \"Level1\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": 16, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Normal\", \"link\": \"Heading 1 Char\", \"next\": \"Normal\" }, { \"name\": \"Heading 2 Char\", \"type\": \"Character\", \"characterFormat\": { \"fontSize\": 13, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Default Paragraph Font\" }, { \"name\": \"Heading 2\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"beforeSpacing\": 2, \"afterSpacing\": 6, \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": 13, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Normal\", \"link\": \"Heading 2 Char\", \"next\": \"Normal\" }], \"lists\": [], \"abstractLists\": [] };\n var waitingPopUp = document.getElementById('waiting-popup');\n container.documentEditor.open(JSON.stringify(defaultDocument)); \n container.documentEditor.documentName = 'Getting Started'; \n // TitleBar sample starts\n titleBarDiv = document.getElementById('documenteditor_titlebar');\n initializeTitleBar(true); \n updateDocumentTitle();\n wireEventsInTitleBar();\n container.documentEditor.documentChange = function () {\n updateDocumentTitle();\n };\n var documentTitle;\n var documentTitleContentEditor;\n var titleBarDiv;\n var print;\n var openBtn;\n var download;\n var isPropertiesPaneEnabled;\n function initializeTitleBar(isShareNeeded) {\n documentTitle = ej.base.createElement('label', { id: 'documenteditor_title_name', styles: 'text-transform:capitalize;font-weight:400;text-overflow:ellipsis;white-space:pre;overflow:hidden;user-select:none;cursor:text' });\n documentTitleContentEditor = ej.base.createElement('div', { id: 'documenteditor_title_contentEditor', className: 'single-line' });\n documentTitleContentEditor.appendChild(documentTitle);\n titleBarDiv.appendChild(documentTitleContentEditor);\n documentTitleContentEditor.setAttribute('title', 'Document Name. Click or tap to rename this document.');\n var btnStyles = 'float:right;background: transparent;box-shadow:none; font-family: inherit;border-color: transparent;' +\n 'border-radius: 2px;color:inherit;font-size:12px;text-transform:capitalize;margin-top:4px;height:28px;font-weight:400';\n print = addButton('e-de-icon-Print e-de-padding-right', 'Print', btnStyles, 'de-print', 'Print this document (Ctrl+P).', false);\n openBtn = addButton('e-de-icon-Open e-de-padding-right', 'open', btnStyles, 'de-open', 'Open', false);\n var items = [\n { text: 'Microsoft Word (.docx)', id: 'word' },\n { text: 'Syncfusion Document Text (.sfdt)', id: 'sfdt' },\n ];\n download = addButton('e-de-icon-Download e-de-padding-right', 'Download', btnStyles, 'documenteditor-share', 'Download this document.', true, items);\n if (!isShareNeeded) {\n download.element.style.display = 'none';\n }\n else {\n openBtn.element.style.display = 'none';\n }\n }\n function wireEventsInTitleBar() {\n print.element.addEventListener('click', onPrint);\n openBtn.element.addEventListener('click', function (e) {\n if (e.target.id === 'de-open') {\n var fileUpload = document.getElementById('uploadfileButton');\n fileUpload.value = '';\n fileUpload.click();\n }\n });\n documentTitleContentEditor.addEventListener('keydown', function (e) {\n if (e.keyCode === 13) {\n e.preventDefault();\n documentTitleContentEditor.contentEditable = 'false';\n if (documentTitleContentEditor.textContent === '') {\n documentTitleContentEditor.textContent = 'Document1';\n }\n }\n });\n documentTitleContentEditor.addEventListener('blur', function () {\n if (documentTitleContentEditor.textContent === '') {\n documentTitleContentEditor.textContent = 'Document1';\n }\n documentTitleContentEditor.contentEditable = 'false';\n container.documentEditor.documentName = documentTitle.textContent;\n });\n documentTitleContentEditor.addEventListener('click', function () {\n updateDocumentEditorTitle();\n });\n }\n function updateDocumentEditorTitle() {\n documentTitleContentEditor.contentEditable = 'true';\n documentTitleContentEditor.focus();\n window.getSelection().selectAllChildren(documentTitleContentEditor);\n }\n function updateDocumentTitle() {\n if (container.documentEditor.documentName === '') {\n container.documentEditor.documentName = 'Untitled';\n }\n documentTitle.textContent = container.documentEditor.documentName;\n }\n function onPrint() {\n container.documentEditor.print();\n }\n function onExportClick(args) {\n var value = args.item.id;\n switch (value) {\n case 'word':\n save('Docx');\n break;\n case 'sfdt':\n save('Sfdt');\n break;\n }\n }\n function save(format) {\n container.documentEditor.save(container.documentEditor.documentName === '' ? 'sample' : container.documentEditor.documentName, format);\n }\n function setTooltipForPopup() {\n document.getElementById('documenteditor-share-popup').querySelectorAll('li')[0].setAttribute('title', 'Download a copy of this document to your computer as a DOCX file.');\n document.getElementById('documenteditor-share-popup').querySelectorAll('li')[1].setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');\n }\n function addButton(iconClass, btnText, styles, id, tooltipText, isDropDown, items) {\n var button = ej.base.createElement('button', { id: id, styles: styles });\n titleBarDiv.appendChild(button);\n button.setAttribute('title', tooltipText);\n if (isDropDown) {\n var dropButton = new ej.splitbuttons.DropDownButton({ select: onExportClick, items: items, iconCss: iconClass, cssClass: 'e-caret-hide', content: btnText, open: function () { setTooltipForPopup(); } }, button);\n return dropButton;\n }\n else {\n var ejButton = new ej.buttons.Button({ iconCss: iconClass, content: btnText }, button);\n return ejButton;\n }\n } \n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n Essential JS 2 - DocumentEditor\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n\n //Documenteditor control rendering starts\n var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';\n var container = new ej.documenteditor.DocumentEditorContainer();\n ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);\n container.serviceUrl = hostUrl + 'api/documenteditor/import';\n container.appendTo('#container');\n var defaultDocument = { \"sections\": [{ \"sectionFormat\": { \"pageWidth\": 612, \"pageHeight\": 792, \"leftMargin\": 72, \"rightMargin\": 72, \"topMargin\": 72, \"bottomMargin\": 72, \"differentFirstPage\": false, \"differentOddAndEvenPages\": false, \"headerDistance\": 36, \"footerDistance\": 36 }, \"blocks\": [{ \"paragraphFormat\": { \"afterSpacing\": 30, \"styleName\": \"Heading 1\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Adventure Works Cycles\" }] }, { \"paragraphFormat\": { \"firstLineIndent\": 36, \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Adventure Works Cycles, the fictitious company on which the \" }, { \"characterFormat\": {}, \"text\": \"AdventureWorks\" }, { \"characterFormat\": {}, \"text\": \" sample databases \" }, { \"characterFormat\": {}, \"text\": \"are based, is a large, multinational manufacturing company. The company manufactures and sells metal \" }, { \"characterFormat\": {}, \"text\": \"and composite bicycles to North American, European and Asian commercial markets. While its base \" }, { \"characterFormat\": {}, \"text\": \"operation \" }, { \"characterFormat\": {}, \"text\": \"is located in\" }, { \"characterFormat\": {}, \"text\": \" Bothell, Washington with 290 employees, several regional sales teams are located \" }, { \"characterFormat\": {}, \"text\": \"throughout their market base.\" }] }, { \"paragraphFormat\": { \"firstLineIndent\": 36, \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"In 2000, Adventure Works Cycles bought a small manufacturing plant, \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno, \" }, { \"characterFormat\": {}, \"text\": \"located in Mexico. \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno manufactures several critical subcomponents for the \" }, { \"characterFormat\": {}, \"text\": \"Adventure Works Cycles product line. These subcomponents are shipped to the Bothell location for final \" }, { \"characterFormat\": {}, \"text\": \"product assembly. In 2001, \" }, { \"characterFormat\": {}, \"text\": \"Importadores\" }, { \"characterFormat\": {}, \"text\": \" Neptuno, became the sole manufacturer and distributor of the \" }, { \"characterFormat\": {}, \"text\": \"touring bicycle product group.\" }] }, { \"paragraphFormat\": { \"styleName\": \"Heading 1\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product Overview\" }] }, { \"rows\": [{ \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": \"11\" }, \"inlines\": [{ \"characterFormat\": { \"fontSize\": \"11\" }, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAJ9jasrL+Nbm78GAg/LN0Ozt/uLj/tnZ59PT/tzd/vP09KWnqoWGicbI2iNckVRVWZCaq/RMLzo8QJijrnR6hJeYm/0pALnFze3x+WqcyzdBTPn6+nZ2efr7/WVmaY2wyex3bVVZYPCLgcbG7P4xAvf5/Orr7HiGkNu6vqdsdnKRrrq7x9vc3lZjcuHj5KmsryYmKdLT1e+2t7TR4k50kkpMUYqMkvfm58rLzubd4+5YROzt8bu8vuxnWWhrcsLCxfv9+zk5PS5QdExzqM3Au/b2/sTFy0NESK2PjzI1OePl6c3R1o6UmPg5Evb2+UlKTfDw//39+tTU99Sxs7KztG1yedpqcU5RVgxNdj9BRTIyNdTV2t3d9GpSblmMugwND66wtuPj9fr698FUTxE0SyorL+Tp7b6+1tfa3Ke4yPjt8MzW5vfd27S2ujU4PcbIy4NPU72/5Q8nNdVGNS0xNj4+QqKrwqSjoeo1Gbe5vefo/nSmu/n3+vHx+NDO1vhCHqGfpuk9JRAZIGdtykVHS3Rsdg40aaa/1/fz79bZ/ZSEgLOttD83Ofv19lM0NNE5IvWglfL2/tozE4zC2tTa0+jn6kZbkPL2+c/O6lBOUyY4bf37/tvLzDEuNmd+prU8MSt5sLOzrLCrrX5lavb49XFlWf77+snGzYSkx77Awd7g4R9CWc/P+7u9tdjW1tra2MXIxdzu97u1vK1DQElFTDY1OVxJTuODh9jY/h0cIsjFxZCPlJ/J6NHTz9nV3woXTewrBrS4tpeVjufj5FZSUIyNiZ2foTArLL8uWM7Lx+/w8fTz+dbY8Li1tTxifUpGMjcyNOrn8n5/gn1ydOCVnv4iAOgsEfQwDejo+9jX9q2vsc7P0WxtbUdDRCAgIubo6DEwMUxJSRsZGvv9/f3///3//fv///39//39/fv9/////fv//fn9/f/9//j9//P///n//P/9/F5eYvLz/goiapy12LGwxzxIUcSh0i0vMcLd7WWFnJuz/K2Jz/////z+/iH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCAv6W8iwocOHDskVHNeB3UB/5MaNY9ehw7iEIEOKHEmypMmTKFOqVAmxpcuFEglq7PCvA7kdr/zV1Liyp8+fQIMKFfqyaMOYAykqJbdBmDxX5HT+4+hxqNWrWLNqRWi0a0FyURu6OFKGAw8WG3TSpLm1rdu3cEF2LYr0H9gNaHhsw8FA2oMqVThc4YDDZgcgdeMqXsz459yXBKNymvYABgxv4r4Q81BDGocgMKSlTdy4tOnTXB9DVCgsHLRc3hgRmxbOc50H8nzIq8XABGnUwIMvVv0QKdhtx8SF4EABGrhujB4U8/ykTJbluzb8Fs69+1XiDiOX/6BSCNCyb0w6ZaIl7/YbMCGCeCu0wwlb7/jzEwXP0KC/DiVsMQEF4nRyDDTQyCNPGUHksY0CGOkn4YQr8deQQVEp4MIP3NTgTR3EhAODOFnssBCFPI3jjjvssPPRQBZZRCGFFob3FUMxZCIPNMRwEA4VJcxol0DGSQSWT2AlqaSSQgZVY0QTjbOQDR7cw8Q3DMSQkYRLdunll2Am6VWTjj0J5UAbAOEPC/Ls48UFCyygwHaogWXmnReS6ROeUH40jpq71OAmLAt8I5V3YfH5kp1F6bmnohdS9I8/ldThgRdpvJDHiS8KlyikLX3akqM9gXrUn2kZA8M+KkhDDAOVZP/Ek2lKmmomqRXayhBF/ihDSB0naEGLB5t61GljourKH64sKQuTmtqUIc1utIii06ylJYtRLDNMsse3KniRQQbhZgDut3tAEK4K7O5zgjTSsNqBasym5KxDytjwAAN1PKHNJsdmC5E+oDiAhSFkkGEIFmSs0jAWEK+SRBJ0aLEKFqvQUbEWtSRx8Qf01nvSvQ2lwsADHHjAgSqbbHCfwA7FYjAWDnhhgzF5tEHBEYzUUUcWGgS9StD3ZAH0PaskfbEhe4QscklhRu2lXUxO6sI2FWTi6i7G+IYtzA2hggUqawigzKQL7aBNCLVIYHQWF0OMxT1FCyG3EC20APJjTzf/VpVMHZyjyr6d+EVYTTtxB9YMaLykijSZ1BKEBhffI8TQWdSxCg0qfLDNMCY44XTfp2l0DhV17EILLQzsooQ/G0hoFB88+CWBBkJogPQq3WhgyN4Wkh6cPy98AY0HDJTBg8tsBRwcUkWVQIMWWQhhOca+j/2k8KhJ2UYtZXgD+Qv+AEGT8/lp608kQoBzscKGxO/AB7Fsz31jH6lJBQ1yuPGAFja4lp9kgj64GOk3yXLCPqrQAiwIgQZ7+MAH9OGOW92vNL2iQMLcYIOV2SRFHgnhyxTjD3SYsIBoa0gJLrEABnCgApC6oFZQSI5L8KAKgiCDIFowgRlAgSFHmgmt/8hxDjoRCV+P2wUhcBBDGQ7nAi24BxnkQAY3TEAAqwGOP85xjq/caFcsSAUHqlAIUDkRK+MowQgF4g8qCCEEq8hhLhggAxmoIVRG3Ao5yoEOL0amIapYAhP88gOIdImNYzqjVTpyEH/sQQjO0CEV4XCNakQABHZUH1L81Kk1OqaPfhxIojbwAzRIowoeQIeNDqK+hyjSKi+KnUIm4UCH5aIFs9ABCP5gAQtEQAQEaIQ6DCmQrzFyKFsKSaJYgIMbPiAVZ2IlZF6ZlY90YAPjiIk/xuEDIVyODGUYwhiaoAMr3EIHf6gGCX7JBj6MqphAwMqRQPKRhrQhBhXwQSqjif+haVJzkbM6pj90cQ8HOqMOLRhEIHpJgib0AAQg0ME1LHANHUCCDfHAozwTEzBzRMIeONjBDoyAg5QxgJjSdMk/rxJCjSyFHBWgARkeWIV9jGEMVojARC2wzh6IIKckqIZDL5rCUMWFHO7ogjfukQdVLKAKD1AFSvup0pUOhSLNo4k/FOCBSGLBGT6YxjWo8Y4dyAAEeGDoOkFwCxAEIqh46IEMbpDRRcUEhT9RRx40AI0H7CJluzAqK8Nk1bZIKQ1V0AAMVuGME4yBBDJgSAfYQA2J9tIC5IRoD9JpgT9g8o6NChheTcIOf1zAm3SAgf9SoY5h8rOwz3uHF5yhBTr/rGIICvUlARyyDE7cYg4kYKhDzamDJljAkphsRCthghV1gIFyU5RALnKhjKnCdngCoAEWBAGDhCJDBxGwJBseYg4nnJWXDP1DD25hBYmq85fBNEqSevIif6yBAg6YohwEQYsKbMK61zWNRvxhjHt4Yb8PQIUIrjEGXkZgvIaMhgx6YFyeXiMC6wVBBIJaUWDyYbn9Ock4sCmQHUDAYfGTgxy4sc1k5THAM5yKRtLhDw+oAAJkyMUVMOGPBVshnQ9eFGV1AAzhRoC9m60GRS1KgHbIlyRiYogJKuCMb5JBGoiABzxcDGPFgNAdI0aHMULwAfy2oAo8JoePHcwGRrWk/w8TvgYJ5tzZcooAnccd6g1ovKjIiKmVSqiCIRzgAA2Q4Q3qYMcmnPzaLm9FKewAgimGuQl5fMENzKEAE9awkHSA4Bo/Fm+UWwKPKYxBznQmQSAeGtHgWiCuc3UtnyAghIc5AALudMmLHR0UjWyCHWIwxTeWYIYqHOML4giHBGAhkYVs4tM/9mWbj+iSEQB3ztimaASs8NMNK9mzcwVxVxQAAYM1TAhtoAuv39KRTcCDFM3wQAtGkQJhFMMWXwBHThLFhx6AGsjTRiRE3jEAns6ZnBWesy6t4Nag+vKzsgbPFjxht9yt4gCHWjet0qSMB4SAF84IQQWmcYI9cEMBdv9pSL/xcAte6iDgul4BMP6wYQvcgg230Oll/6CDW5yTl+8F5jL4Q2vKPZACGLirxhmzEfP5IxW00NskroCbQuzBBxBix6ca0YO4GvflzXZJJB6rgzkHYrx8kIEIFsrQVRPXuNXoMAGiIG5/TIAbFKCBM+gASSYu/TQukhIDGLGPB06CDvJgAgSeYKgBN6QROrAGhS0A9uUeQhIRqPktwvIPNUy4whT9gznbW0meMvm/LwGDHMrghqTRoQpO2PXfs+Iif7jAA9PYgyDkQANXVQECNXhdRaTUEDXowOsW6AGEXfIOAJCg7A1dPkzYAIniMrSio/e2UHtwUeI/RA2KSBj/DORAhxqYIOOzV4xF2jgNHNBAEIJYhSLszYAKVBcILiuqP4yPBxAYtwc3UBQXIAk0F1wgYA6iQg6mQAAiEAGXhVk68FObdVyYJVcBeBQgQAJj4AaCkAuCQAebkn4/MVoHoXXkMA0LgAqr8AVycAIsYALKUFr/wBPYJCpqEAGB4H8WAAK51hKRkAKUN2d4MG3aogYEsEsM1Vk9QFzo1VmfFRVqwEt/MA1xVAYt4ALo5xYudUEudRjxBARAMEAIMWLl0AyFwAL7IAhf4AymAESp0RA3gIP+Vw0ggHpQ4g8z8AgFuIPGYUie13WXpWpsdU4TpWSXRADUIGdzIA02cA+C/6ANWZgSYDiJOzFAnKQUnlQvf/MnlDhiX5NybKQKmXAHS+AMLPgB6pA4CfEQcdgEOigCKTRfdvEOirBOTdBQu0UQLpEO1Gd9wYV9P2VZr/ZWJAAAFLALT/ACWyB7IUGJ/xCGM1hMW/giJOgoxhI784UOdTFgOOAKDGEMtPAKh7BfWIBFYYhXycIGTeCKTVANIpAoCjEDn7CHB1gXbhYR5MCADnh9PddWgYAHeNBQ02ADVfAE8xIUHeERGREVRTVPxcQ990gO6fAPLjNi9+gKTyAO3GAMxeAB0uAC7/cFNHAJ2zQVIeF9DCEDTeBZxvWOIUYk5mADvnSLTUAA23GPQP/keUjIU3Xmc3M2BlVQAVkAQ+UQTz/xKf9QAgqgAMqgDEvpEefghiLzKRryA3HiQtKgMibFBBWQCtugDMZQBR0ZBB7gATwgAHEkByCjEUAADyABhvrnDzJwDZ4VXCIglWykD7PQBDUHAg4JEqPmDzcQZ5d1DdcGACfAAFmwDeWzElTZTAsALx6gIA9QmSEQGMWgDamABqSAl5EBHCB0GDMIEzvwA8bAAJlACOCTD2VQBvlwDDBQBpZxGflQC5ngAzZwCrKQCoUwDa+AY1+wClgkEEYJmCnnEDJAAixpAZCwENhCDu/ABMAQATSZiyeRKJNVWRM1Z1NIJfJQks0Il+b/oxFRMQ5msA2R+QBHIDm1kA/yQAhHwA1BUAOEoAVPUANu4AZHIA8csAAxUF0YISsjFjtb6DecmE1b9A0vwA2ZEJut2QmSwzFBEAQSIAG1kAUSUAf5EARZkA/i4AEVEAQhMA3FcAnvx3tSIUQk8RCQ8HDB1Zzo5w96uU4GiIAqwW8E0AM8NQealgULAJ4gkSZfSHwjtQsPcB306QF1wJ9ZIA9XkAUPUAfhUANaQAiTKQ8Y6gEW6gFMYATzQg74J0seUZyKcU0KSQ4K8AZVkAWWMaF1IAGEEAQPEAS1cAxBQDFuoAVJkA9JoAVaEARaAAPa4AHgwAi7wAMXIEmH8B9r/1GNF+EQkIBcL3oiuggB1kCdJHANNokk/uAOOlqMJ2ADdbADSjeGsbN+4+ACYKClR/AAEiAPrvoEb3oFgHqnbhAE4ECnSZAFQbCebkMI3HAE4JAE3LAA5yegStEYRukPJrAAcwoDHXMEHlALWJoFEDoxWpAPdLCnx9CaZUAH3+oNtcADlyEPizAMHwB/WMBp/6GiIwGGLCqpzEmpbCQAcECjfMiMCEEObBCQeDANTPAA0pCiJzkv48ACFXAFblADV0AINSABSSAB2cox7FkLEuoGSXCrtQANFlqhElADlsI2SRACxoCF2/SJR+UPTmAMuwEDD8uw1FML7akxGTsxNv87MRLgBjmbsTDgA7sgDuIzDLqgAkIgB86QCQzwOhLhqM8YT/GqS5Pah6hAgNWpr6xEDTwFlLuQBZsihgkRld9gA09wHU/wpHuan/nAMRB7sxNDszY7rG2bBLhaA/JwBFVwBDBAsiaytHBxGFpVAjzgA2WgBTUQpQ9ACHPqmhPjBuCqMa2pMZZRBp3Qtm5wD2DwAF8AAxWgDlvgABOwB6vQrQ+wAKITjQWqTBEhAtUAtfPKXP4gAKOAr/XomOSgAzwFBxRAAZkwKRsBD8nqUqRQgwrwAh5wBVdQthpaBhFLoXVQs2VQB+AjuZ2QD/nQCX5KB6wZsW67uEdgt3UAA5n/ACT+UAKk4K5YEbxS4goUAD61QAhXkKFzKrGMmw+xGQQ6wohMYAzGUAFMsAsMQAE+QAtfUAYLUApBIA6tIAZMQAYMcAL5AA3Qmw8ekApRQRNpsqKpu7oZ2LoR4g8foId/kKmbyhI5wEtNMA0nEwI4YAJRiREUATCHoR1O8APSEAJZ4AHx4ZpaIAFHkAXgYxkS8ATyIA3FYAxxog1U8AITAAiDxA0P8LCsh7GLGwRP4ANHAJ+14AFvgBFmyrQiVgL/cQcPO6HH+745m5+ymQ8hwAAv8AZbsASwwAMvoL/7awwvEAywwAHiUwy18ACd8AobUAHdQMSZAKEc86fGIDoa/xEkqAsR5wAC1fBQcwajOuEPsRC7fWmjIxEw5NCiJDAHTGADEnACnhACFNAASqAM/2UK7aBVO3AHRxoCssqaf+ozgQoONVAFxhAMwZDEd8AEoWwDRLwL+bsA2pAHeTABfqGtyuumPtOwSQADR2AM1fU3WeEPqsAAtXAEIfArRoOfzQutIPoGzLQAHBACV0Cf8uABxLAZHtANtqAIpfAMsCAPuQADjJADJoB7r6ALtCC5f4qrWuABLHCy9LRcHQDJPfCpMGonH/wHIayp24Et7OAOkVEE0AcH+6DNDLAGDZAGdsAuH5AGEMBE/hADPnAFHkAIhACuEesz9PsEDLAAqf/AA3fQOhUACKJgDCBFBHeQDKdQAQxgDEzQF0yAx3nAAFdABxxaB7eaBdzsAUFQBh5gKJl4lP6ABgsCv+3xplmQrYRgA2+ABiYTAjrCALLgB6qwBQhQBDdwfnzgC5XQANIgDKIAHcbjCpTQDaLgCjZwIEkADloADrWgoSocjaI0ESDGdZGso01Ayf6AAdMgu5psEKEZGWwgZ3jQBfTQKn3MmPqsBAdgB3SzAj9QvJlAq63pBrzamg8ACKkABkxQDIXQ1zsQOOOLCyUQbP4wDwjgTmJgAq6gDRTgAbvgINrADdD7pm5TmYQgAeCgwkA6gsbiDzxwBYR7pPCZBb9SBoT/UAEsgAYVIMvcYAMYxxBOQAoFUACmABZBYnedUJYwEAoLQAzDcAch0AvJUBm5CqjHcMgXmm4ZEcP+YRRq0AORrANCtVsMcQifsJIivB3ns0b+gLWfPAS/YAl7cAKZkARMQAgn5Q98kAqkfA9LGqdlcKESED4hsABGAAjScKg5kA0GgBHmgIDLgACXIAatVQABYBMpVwDZ8AbmXAV3sA2raqHMnQX0ueJZYAQuPINefBDvnQeZw7C/ss2qKQE2oAqqYAOEIA/GMAz+kAAGAOT/oAzqjQ3DRBHD1AIMQAmEAAPrzAGv4AHF8ApCbQzhkOIS0AnWq7M6uwCIcU1iwMld/3EDtgte1fAHDL4+DDBzNaqvSGW7JDAAlqAJDpABM7AEVQAOR5AE8nB+CsADE+AJ9yDYhe3DZXAEFWCV0rAAryA6/sAFrBAkCpnjyxAFPR4A2rER5IALNd4rqXBKL4AGLyAP+ZChPoO4RzCfbQCmYShLFTIOgNC9OBwCFfoEhEDVOOACoqzFUkIO7cAMP74lag4F2FAOOrEB6tAHIfADqfAFX8AI4FAByVAHqVABt6ENNKwFZWChGSuzGsoEkyKajWQUbBBe6zWdyzcDs6CcEW4S/kAA/soNTDAEDjAEZ6APDVAF4eAGF3oHC/AhDEC0udAJdVAG4jCuC1AMu7ACUf/JFOjg4yVADjRBDjkeCepADurg479OEQgQBuWgHf9xCh7ADS+gCsYgAXSAoRKQCQzrA0Hwo0yBJOSwANTjpKJOnxlrDGagDVZKBZWgFgCDAQEABUaiAKQABQZQlIdx0hqgCi5ACLuwC9MQAx25Da9SDODAAdtwByIyobdKoSJvA9eEjjjZEAtvc1ZgSQz+DjZAl/9X2cpkDp78CVXAAExwCKNAAUOwBntAA+3RnvD5wBwAATQAA1+gYxJ8B8PQDtmACy41DlAQAPOA83ax81NRDj5OE77r22w+gzahDi5gDz4gDWbAJjDwM0GAuB1KwNtE7fbyAm7jA/Ghn3N+BRf/YAYcQAgvkBanoAqy0gFOEAAGICsKIAZuHwVhqCbYYAOu8A8McAo4sAuLEA7a0AzdABCV/OF4EI7KDw8wJNRxU6eWhCxaFvj7949cRYwYO3T458/jR5AE/lgAEaHaHwIeeY0h8YfEtZQZZcokV0IHCRJwTnDwcMrSLyGHPuyhUSWcmyBJcnnzdozCPg1fvEnb5q/DOQwB9Fwk12fE1nEWlyGI9A9IuQIBOpBjt66AlCLlOozrsMkJLj0KdslzNY5BGQlHFmbyIQEGD4ozFc8M62/JkXxX5EmAeMQbNzOqanAz4S+siVQKxo3+lw1XubCXNkAxgA4IXbQG/Onipu0H/7QvX6Tt4kBunOddR4zhkFamVpYglBlmQUx33OuwM0FO90igCUkdJ9n4i6TCmksLPdxdlEk6IzkCOPHIYxICs5Au0jyhEjrkhIfjucTB+EKMg6cWpIGAhgM8G4eZAEr4Z5wNpEigHIzGmgdCtALYwLdyDGAFCHheO2eDBBL4zR8e5EEMDOOOCOIIH2rwJogYPPuHo8XKW9AfFkKQoAZCVMwiC28YKOKNJGxI56K5yIkBlgXHKScMVooA4h/VWCOvA38MMEAdHDIJZZEQaMlllweaK0cPA2SZagkmtNAiC8qCqKWOTNDwZ4MNgJhyMeqms84CEbKLYDt+4GjpJQLIy//IPIzIucUCEj6pgoknjPFnjQyG6MKSD2ZwwIF9GGAoidw46CYJTzyhARAhVvCND1YSMAsI0ywSC4G4LEqLxg4SOA0eeP6JggtcnABig478OKICf/IIYsU6spBHnlxC6Gw0ZGvE6Dl/FKiiDEI8EKyOOmDYxR8wkjCmCASgeG2DjX5QhRyO+giggHLIcWI1AxT1B69y/HFhEQgs0cSSO+RRhpxysEEgjA3Q2CyGCvJxQ0XlJPDgmzvzjG4mcsjrE73rbhGUDQwGkaSJ63owR9Ftz+tDB0h1kuYIVTbwpx5LcvkFlQ/2wQKLIZiQpxZwpILGAx8sWQOHXSxpwKNo7jX/i4souRorV3V2vaiERLDxh50O1MGGlUj03GgcUhqowgZ/fnjoiFoeCEGLXKRZcG1tMcKTgVpquOKKILKwjAl/jMkixg0MQEDB0dhRBhZlZuyAFQNSWy2Bi0YjhxU9gIhCmQU80eQXCDhggKICWMFGAXL8UYYbeWIwppYVn33IjdX/wbPvxkaW4ZprTK4mghsKPRSmxCqiiyYZgCEBDw9skIcbBbBURghLOLBkiDVCWAULB1TgoA4JaslDDSFCMGYCOzyZt4NysmFFwayg0BpXCLtWy7cisKIPvvFHH1iBLz0xiBQFMEAfGMCBc+TBDT+62LTycQerzKhvFfFHMJ4V/wIdHYEQMFidMSTAAn+U4Bx8wAUuxuGb36gCBxwhBxek8MIqcW5BGzgHAvDljxjYwQsOGEIbiBGjeSDAAGKwis464AF5LKECK4ITZSBCBX8ca0+LGU2fPEIOGbzEeBHwxSCs0QQShGct26JRRchhjkeRYBaTkgAVRPMbAZjuF/NRATRW4QCiSSMTEqjAHXygiS+0wBJbyKIYgOCEADyoA/diCzm2hhpypCUs5IBC1laIuXKsAwgbIYUecFGEkEljdQsog2CkVQdvgCNGH2MMRgQWglpkIhOE4CU4ONCsLKBwLnRRgBJHSSMc2OkfaUHlvqCgw2MVARfzsMgK7HEILP/U4w4e2EAJlOhEdszIH07wQBXQwAAtEAI5btCCG2rAsWz1zYtfhIQFiieofswBJ4hS1GvOg4hA4EQnHKjBFkrwPH+owAEU6IIh1nCCY3jDGaAAxX0AwwAbKHICaQgLvNQRhgBAoRyYyBxHxhIJuSwzAJ4zAC7S4Y9z4CIBG4AHO/RECgMkoARyqQkHMLiLfBwBffJ4AAw8sEbF0KUDyPKHDToRrhoc4Ql140MMJHCKLHJkNOUYS7/m0gEF/EAZ/ihCALBBDgWIAQq4MIc58PTMIohhA4CYwCR4oQ8wYBEBM7XKRiznj0rUoRiU4EY+CCGBINSBEEFgwgZoWaPYzfP/HyKwQBPGCIBH4CQ8L6vIFjmIApxIonoP4IAC4ukPBtDgdDTIACq4EYRmqICiNDBVELihinRswg5p2MQ5RIcO+5WAGYkICxD6gIB5XKRCxU3EltDBBVz9wx3P4UNONxCFPfkjDFfgATk8oAXBPOEJ4IDBRB7b2bX5YxtZqEMNMlGHJyCWBRt4AgOgOyHHviYeBWjXOTbiDyX8AF6JyIY6nKBWtpqDFPEwpU0xoAJ60MML9YiBC3yls3Ec9KsdcIIyVnCFF8CiBrUQahCQUodUyKhvkZXsLaph2QhYYA6Gwsk1ZEAeWoYMBJCSlA2e8AInDDNutXCDEFAxhF+o4AML/7jDHS7xAYpSQB5lYIAC7rTbdphlE/YyAJTWYlzkkuMsuyoHO5SoDgRBAR2jOVaISqA237QUDCHYgSrYi5w6POAJWdiBijPyVbR+Vx4e+NETygAIf1ShCrLDBHIh1CRTOK4IvnthDGKkoQ6QQgwFcKFb1dHSckShASpQgRCEMANdtLAEntFqcTeAUwPkIRw4eMEEMXYELXCAsxuc50c2AYKTUCPGjwhoGnuwxhxHIwICPYE06uACEyyIHBsozBOccTpbzMcFu+iMKQ7hBVDQthZPeINVdksO/34UcwGY0D+Om9x/oIUVToqEFOaBDa3Qiw94SoABgCDmtZQgAQHoM/8gFv2Cpz5Lz7lg1nmF/AYt0OkKWXiCFrjhjxdkwsrdwsQByzGluYjBVx0AgjkyDAsTzCOkmuYvabKUAHVEYQJe8EIG6nGIOOCqr3vrYq9O6Q9pFEIB0ngqnJIigR80T1u9/kgHgP0HaowBUvu0wI1BJgNIUc8GpDUB7H6TCgmAMAlG9sQQYvGBQ9zpNzHIQJTDkQ8GKKMdu12znqQQAEzooRwbOC5K4926c3TN3gHoF13EUAJc+HuYM0qAAPN1Dg4gmhtvSs4IszDWpE6bG7WoQgiy0CMJqMIEdahKkhTQ8QJciUGJp9dvvvEDJ4CO5QhgMzm05A8TaEATnvACKiD/oIQSqGNtWv2HOqSZgLO0wwnEaIMLMkFx9NUhHxSwCKMWE1mLeLERPTgJPlIwdWOPRybmsAKk5sgAcFDBBI5lkAeS8IAs5CMEQzDEEI7MBT7UZRPoCEMcwE2DwnoAHPAHLIs3eyG8vTuuuBgzVgg8DZGCbEiHcWCHDbgLPRgNDOwVVlgGdSAbf1AFeVAFVUisOgiCTDgCcXgBiqAlulCvi/GAB2gvc/EHDpAGivgqfyCFAwAd4aOLR0IAPfirLdiGBJACBYiC1nmVTUiAAlCHJdAjS8iAH4iCtcHAcOoaJaq+FwKDK3CCCqCDqIqTI4iRpTovxQiZedq+7gMA8LMx/5ghBzVwiWuAAwqoAkJwASvrCCOogyvwgSNoCE34AEswBCSwA1RIjLUIA2bgBVAYAgp4O2PgAztYAf/6B5CaKTC7hP4BPHIYuPvxDVKwQAghDQ10gtZbKn+oABtkgE7IgoY4Ahi4Aiubi5jxC425giM4AvYygV7Igs7YiGMiBzGAEgMwiwURAwzwIZ4qAVjYwUtAQlbwHQVAvHkAgioQAi8YAhXwA1dAB8eakeggB4fBl9E4B04zAGIAhErYs8NKDriziufRFhbrNTUQFHxgQ80SD3+ZgmsggUCggBSAg1HghBjYgXcoAR+IjCtYCDeQAE9wAEtQAfCJBSfYm3PgAv8uEIC2owEPyAcPYIE0OINNaIfLiRK+i64XArxxQIAAwAAFWgaA2YgLQTwE4AN4FDIleIIYQIPCSQ7BgIEUcw7nwRHDqYKJMzS48YBdwABVCJilKoG1iIJowJwX2ohNc7SwUAYjcB0sXCoFCCB3UAIvOB1LQIUJMAH/OqbiOwdfGaB4KwJfWQb1egATYIIkUKeFCAK6hCF5YrqPuAF71Kd9koHEIAd32DESGIMJCAR7koQ5GIMBGABHgAYJKAM6cAOjSgNU8AJ6QAVm8IJY6KuNYAYu+AdGpC1y0QY7mJp/wDc9EAMFxKS04KQACAMxI4U+wAVy9J1/oMkN6EG6oBf/FlAFBrBBDoCGOkgCFYGBX6IXGvmNO1DIJ8jFIHCBGJBFPcC7Hfi3uuCDTVCHHYgVXgGClgo4clCCM+ACf+AvqBQDdiGHgskUTzgEbRinuRgldUA8XNipj9MDBMgGJ/CHTfAHbgAEF9gzwUifJKjP5+hLv/SIGzCJCKAGNDK2EuCKGyg2AKCAMQgENLIAEG3MT/gER3CEYyiECii7IciATUGFSNiEuqAL0lQHjQSFKngALaiCsxynAECAPrik4mudf2G3V8MAXBApcCwHxEuEtaBFctgEEzACP3CCZfjIbUiCLHgIQsiHZzMQN1IAD3ADHwiBI6gBLbBBbmi4IjCA/wBghj4oh01wDnVQBlbYT9TYAD4IEefwh1RADP6SEiCYhwR4MLLMgAlwBc9gBwVRhyTKHIaBSwTABnUQ0AE1AnkoAQYIgsOKliCoAuKTxwf9CAIwCR24hQqtOq7AOhJ4hGnovCvoglEAgDGYg2Lbp+l5hMcEgBToAp3wAiV4mabLBmZQB3I4TR9IDiZwgnPAhEhyAv5Zi7QYOCkogU07UrmYi3K4C1zgzrUYJz8wgkpoh3NIxXORhyRwCBUpAyzKCMdgiBp4AEJ4giRYAiWgy3N4IXIQ1ADgArmM0/1TBik4JXqpQICxCGXIAwVIoj7QmQLQAzAQgkyxhHoABNiRSf8s1IN1qCn/nCl1GI2N8A0PeINtkKroay9VyKAVC9XqCIRqKNV+tAAdGA9y6AHz8wF5AAd5iKqGDIEqUIQUkNU5wIOXnTpreEwrSAEkkIUlEIBLuIgECIOOiIW2owBiKAMOYIFsYEnHqcZ4g4IAGIFIQsJpQo0ZKQd22dY1e6F/cAEj2AKb5CA04IYNWIB8cEXKsNomyT5jkL+crYGwS0UbnAt/zVdcYAUuKAF0SDcFyNp5QIelSiJ8wRJYWIC1mgcFOBM9+ACy9AI7wKJx6K1Pa5d8mQdcaJd4oAj2Gwd0ANwnqoMErQMtqM8Nur559BM8aNlb6EcSIMwckEM48IH/K7g46+SBO6iBXKCDJKgBD+CAQojVMZjVCk0jC7AGSXiEMUDaOziFOAiDd4idGQg3boCGJ7AHA+CCAGAFJegFBVCH7DwAKTAATpuHKFAqrkIAXEhcBfkHZcCBbcA8rToSDvgBE2Cv5KgBLu0MproE95OMJ7gCcGAWecgDf+gcjz0HTpICzFm1DchWx3GXTUDCMAOCHaiALUiAeSCFKDCAOFABVDAYVGACNHhSdWDLYhE+xzEALLnXxTO+AmiATBjhINizLKgB3smi2b2+eRoemHWJagABcpgCa7AASZCHKiiSDThZj6iCXCiDXNCPL6ADV9QAyRiFFEiBWaDVoQVR/2t4hE+AzKR1hRlou33wWwjwg/M1hgX4hnlgBVbYAV/RqZR6DnZJAHToTd9ggR9wgXNoklbzhzs4Fx+YE0nuBCOQEX/4BvYiqhog4hj4hjqIEX8g1ns9hzh9jbNxnaXyRg1JvVczpQstgRdYgSMlhU/jGU1Y0XpYgPY8vp0i3Wma4AwrPnQoAU4LgDjwhQf4gRggBFpo5oiQB1P0rCN2nhHpEyWenlkAABsohikAgAHYhgWoBULAgY0zgyAogyTohE7g4grIAxu4Aw54AMrQAA14AHlwXujVLBAFhuq93i5ogRPwgTIgBlnmAG7YAVw4XxbaT3hhsyRCPn81ARzYAv9ScM5/OJJQPgtV0DVAAK8JMgxm4aAfcIMrIKgayIIHGIc74IZ28IhJ/aIJPoeWHoezidRxiLmz0QM8FYOcMgd22IYDYDcT6ABc2MwhiAN9mIBdODD+0oN4YIcbHldS/gdzKAI9GLg4aAA/EAiMKgF5AD3XzQQUkuZpZpDaBQkZAIBY3QVjkAYmgAUmkIZUUAUegAA7iIVL8Acj2GI6gAF1LoM8oIJe8Ih/IAU0WAAG8IHDSoIduWfnnYOglV5IuQZcnQY4sYNdKAYuwAQ/UCJWILm9KYeH/rdz6IMh7IwJzhd1EIMdCAMDYIaOgwBVWILkOA5agIGLmwt/ACpCCIH/K6iBILDBKmCWeSiCIliLl6aODoASH/rO1glCIEA82UiFBkAAe2CAoB4CeojCeqiAReAD/2zCtfrlUO7NAkiEr/UDaCOFdmjpVLhUBpAqKyKEFJvmpOoIL7oAFZgAG2ACmw0Bu2kBGLSBGZgBCJCGZriAPbi5EwDwEAgGY/iGSHCHlgYJZUCDN1iAeEYfCbiHEPCAWAVaoX2JaWjwOrABY7ABCgCEBhgB2RAzJ2lUJ3KBbXCBQi6BeSgALjANXJACB9GD4rYBbdgB4EasKwgcgYidv+AGD3iCGljQDQiBbXimFpIpLdGDAoCC4z6H1b0TkDrSKDiuzAnFI00GMDAA/xvgABXOlJv7gCr4AV+5BPIEwkklB6seuBFghhxQAz6oCHN4DYF5gh14AUKoAXKRAC2wFJix70bpkx2gAm3ggN8eHB94gBb4bTF+VyO4g2+wgW7gABvAKDwWBmG4gHqYgFRIhR/oheFcvy4nh6oSBWl4gIWcoCvwgGmYBgAAAGlQJVUyhhMYgjS3gVToZIbpJC6Ih/M0ggZghhDJhoC9cihYC4Yph4BBbK/GncJ5ExQKNC2wZyeXgBhQBVmc4A4ogSIobijQAzTRkn4zAHaHAi44gwCQggOwYwPgA2UgFlVogwSYgGJoAC8wBAegjwl4gVhhB9LVKauAAgyWgjWIBv/TSowJZIeayjApx4EnOMHPkwAGsBVGl47pIIUfkAZ5uIcWuNEVeIHgfYAxvYIQoIMf2IY3yIQvgIFcgIEggIEKSAUqqDOR/YFmaAYemIAPSIM0MIaDaAMecAEBCAZdeAMqYIDJyAc6EONBq4JeZ4AP8IIVAIMYWIAX4IFgOICExoS767jEK4DiPihrT6qB4IZIkAYtkJMS1IJyu+T4Gpwn4KXXk4c1ChnBh5ApiR3/SvcCaNiWYgVjHgFWkAJmoHcpWIJswARjgICyy4BDQAVpkILXdJwwiIc1RQBWCINo+Lc3ggc0BInI4gBjqFdcRCwJqAJTDHmQAYlLuABpgPn/OpSHEAAEG9gFKJKGH6gCwXl9FmCAm++EhlTXH0ixKFAHa/cHU4gCDIiFWMiMYVAFfZgBfdAHHtAFbdgFZQZ+GwgB9IGTKoAAG5gEGmCCCliAXsABFmjx1TQATDgAU3wOJwWIcR3+ERw3jiBBfyx8mKmQJEitIxLKNPPnT9UTQlWuPDkSosMdDv7IIfwnsGDBkf9IlitnskSfbAEQIAggZcQIXCvk+ajSxZKdGWmKDSuAawQmTGdW+DmQY5iSYVKnfpuaQ5WqV3ykSfvnIdORIFmOyFPmryTatGoRlrPorxKDGi2kcZMXooa0LbCkpTLWK5mxK4ReKMtz5Uu+Olnc/8R4YePMGSOQGzTAdOAAF2wFCkDZvLkztgZ+hrnggaaN4xMqUE0Y4oXGAmEVFiz4EafBm12ATKgkSe6325Ej0SEk58+EDzTaakmoVWfiAovb6lyxWyOLB38MpI3b0JvkyoIGx5M3SC5etDMzE6hawaTTF02oPHURkoGJLEwBAsTBpIeFKsNg9QqBBLJgYIGuuPKKK8oUU4U/VWTyRBBHPCHPDmettaFaQEQRjxOAPNACBVU8EEKJHjDAgQfBxLBAMgX4oEEVDFDwgzcwZJHFEyy8sMU8ngk5pGeaFYBNGGFg84MxOMQwWx4LSMOABx5UAcoQLxQjTTKpvPCDETzE0P8Xb8GZeWZw4zDQyw9uSKDFEYTAsItFOGjhAQdXXCcSB0z4450/6qgTaEsj/UYOOoGeQ9xBQBzkDyl+2DOCAfaIA0MuPmTgBSpDTLBLAKyMkE0fQJQz6KktCdoSq6sK6k85xmmTnTQ1XBFEHRWqoiGHvSLkYSU+1BBCCISEcKIPJBZD5TZ8iPKAD0zco4E0fVAgzhFZPGDGArsK+i244aoT67hAbADEcT/EsIU2P6RCAQUVsLgPKBWEIooosKSShyqAovFCHySN4+hBJf1m0jgk+dMBA7BskUVzEgRRRjEW/RDEEx7oKQED/nCjjT9FiDwyySSXcHIJJY8cpB9gxGH/gxbieFPFEKAMYocNu0BwijLktDouq0EL/XNbPMjjTzFPPFBHtkewwKuvHI5TjhgLVMeDDcaAUWILXftAARMU2OBBLdyUoHEZ3EgDwxFkKdNtoOLK/W1L5Hz75zap8ICaDdLYUMU9NGA5QTMVpPIDDnwA7Q8OPKw0NKu/sfpPFOqcIw0PS2RRBzR1EFIGA8ZRAYPSNdQQRMUeaDOPAa27/jrsrevRegKxS4FJHjxkAkM3Gg8xCATFTCPKGdjocfzsyCu/PPPKnyHPOMUc8QDEQRCya9RRk1MJB/dIUwkOW8xmQwtVEFv+PVd4AAYHpNyRfi7iaFHDER4oA8YaBTS//z//ehQA2RuMUYGsVaAFq3AGDYbwBg60Ag1nCAMUIhjBFXChMxK8IAYxyIBgNKAO3aiFWLwhjXP4gwcweIAHbFWH1IGsJVFQlc9OFa4ooMNu6ojHt0hhglfc4Q4xOAUjYMANYuSiDB7gijS0IZotcEFJnCESFKE4j+edoxiEeIDEHoIGqGVPLeNQiLAo4DceUKECFGiBBk50hfJ17QQPGMYbavAAGHijE4TAjgLA4J/Y8bGPrsPECFhxhlS0YQEvqEAwjuANaNBMS63AASZwIclJ3mSSlrwkJhNgg1Y0gBAfbA4MpGEcHoADGg/IRCY45g/VwYpVQDjUwWLpG4SY4/+L5IjGD4C0g3mIqBDykEc3oFELXfABDQ0wgB7mMQ5wReFDqgKXDA9VN3/kITs2uMKtJCCBJ7iAi11MCznQ4IMTQeAF0uAABwAXAnk8wHxdo4D6tGGGFjzADWWYXx3kcQm4/QaaMvyW5FqSEEj5YgQJiMEPKkCFrFEhGB6AwTFoQIM7GI4FMWDBwQ5yDh7sAAgmSQsQQhpSgpDDCTcywhE+qBgYdMwfP4BBHVIIFml4LDoGSABOc4qLRCRip4mQAlCDKlRA4gQBrBDVCOyQhWMQgxa1sMEW0GCCDmCDFQhIAC4MAIVIdGBQA4MlLIPTDouAoRD+kAY2IWLHb3jzm7//8kcq2mkDNyygERUw3xV8YAwqhACb8tAFD7hyho2UwRtaIIRHLvECV/hjrI11i3HOdCgSKiAGcQgAM17RCiqAAQxtYAIT7MUND9BABcYoRgMOUAk/sEABgbIIGlhQMPCsxIbgCak/lMGNGOSBaVoIQhC8QSd/xOAYQZCHnrIAIa4UAZnKwwZ0o4uNHVB3B9GIxg6UoQxVLGJSOMmGLxpwhh8UohOd24Us/OCLbewgHlBAAGf0kAAEZFUPRZjaqw5W23+cw1z+MIZITHS6ILiBELxx61rQlYcaeAADM5JGFVpwhSpQmAEtcMMEwCCPXKawBSHQwj3b9oQd5CEGZzFI/21hiRZyJCy3Z4hDAnbggi34Qik84EEF7iAleeCpGMUIhX5scoYFbMMUFlHGDzYQWTSdiQ9MUMICJHAE57gBBsawiCtAfMWMZIcJHvCZuM4UDyDE41ToKAEUpBAqXIRhHk7YQAFYEYACQBkQvkjAChZwgBiYQBlieG8ByjGOIsxDvlhNQAHm0QGSeLQgHfAvAzo2zrC4IQkhcC2CO+SPLcijBkowwj3q0AJPaCBsEvCwBraRBybwRQloDYEb6KCFLCC2EkY4hT/G40WDdKDX6ACCKgKJTEnO9wwvyAMOwEDIu9JFGHeABSyYEQBMJEBU2ShAEZSxjYGho9fjOAe4x/9zjn/UcNNVuEQFKuQG4MIAZBepRRmu8IAnPOEKCqCCBzQK7nGvWB3k6EARsIHVEZwhM3yobToSEIAVJCUG2mhGH6atC0wYoA99Lkc0AhCGDXRAySSZBzYMQGytdmCZ6viHf6uwgLNdgdJGdEJbEYwuJfiAED+geTMAd48JUEAeEMAmE/JgggrIwwQv0EANOgGDJGgrCGjYAhViXhxY8XcZzBjBfkbQgApm4wCq2IUN4AnMboTDGNy4AxVcgYZvyGQHJjgAJuLAimxIoQiPDg9CdD0OdvzDH0bggDuksTkt1ALEP7CIAoghjixkogb0dsE2auAEFut6JetwSREKYAD/KWQ1DD94gzL8bQ52lKMICBiBEraAizPw6wUsQAAmVOGHOBjAH+cowT+iwQouYMAJfFCAd1oy6ALgVJL+K4IY/KGAB8QADQ9YWhAkkI+u0DbTCNnAP5zAhDrYYCsMCIEPTgCBEDABAvcIQQXQsAQqLIDoIfBAEtzgpnrm4RsvOEfBwnMof5dgMwaQ87T5QQyoggKUAKJZjjwYFtk9ADFkgjykQi+0QWu9kgEgQB+ogiv8ABhMykwYQKItU0uIFDywQ8n5AyAwwdk8QR3kA7xpgYkZhweIQx1MyBVkgREoQw1skUC8Eouh2U1dVTK1gwkkQ7+gRZxhwg4ogB9IgT3s/wAXYEIqTBsLbIARjIAeAMEmTE0fSMFRccEymIICKAMfAAEfbEA8kEP/yZfxbQEhKEMqyJE2JUEZvIDUuZW5kAMOhMAToIE80II8VEAaUMADLAE89QQTjNMhJoE0LEA+xJ8bwFoFlIAx9IFbDMwGOEEfREM2SBIrxJ1B9QEp9Jc6FEECQME/LEMDAEIFNEMUIIIqUEIr0AUlpIIL0NZ8DQQ5cEsebIF4XZYUIFoHpMOhGMQmkAMDUIEJnJL0aQHbKEGuIc3i0aAEVIA/yEN0AIE69J/I/aIBLMMmxIM/OAFC8YZA4F4HGMAIHIATtEMlFFQY+MMvqkIAnEE3KUMDzP8ZGg7EMpyeFCCAAcyDRylAEoahE0SBPwBBCQTJCxyNMdiKNtlTHtThN4UUOShAMWTB+23B901ACxgDGtgBPcFfTEnDXUTJ0iVBEjwAIVCAP2jDFiiAKrDAZQASKyRAZjiBCwRSAQzEOTiBOsxDAsxDOZyDMeSBGLRCK8RAL1ACJbgACwgDJWyDFSLMP9yi36HBDrAWTG6DETQA1iGA/5QAoygAN7AADtCbFoADOHgDNwzEFwUDDEADLTTeEXCDP+wChIgcLmSDVpWAoDhKOwxDKryCknVACQABOhTBUSgBEJxDO7CAPSBAOnQAxZEDLtiBKvyGCTQAAkBBOZRcOTj/AS5wQUxc1TwYxzgoAPA5gQkkIbpIA53kSQ2sWy08QSWwmPWhhUiRAyx4wD3IQyWoQvlVQWP4QBbYwHagAQbYgEZcwhJ0Qvwlga1cwSXwAAM0QBxgHS7oARQUgd0owBIYlN31mhO4VwJ4Z/bVwZroywOAQytQgpS8JxX4AlgKGothFQsYQQeE4zbEAMzxgTLsgBKEVyBJgQF0wBtUQQlUQJyAgxYwIyDkWt99AyNAAyqZDiHswBIQgi9kRgegAw4RRAeYwwbEgC5kSHeMw+VBgajsgDpgnxPcgT0kwD+UwAhggz8kwASY2KJ9A2d6Z8llHy7QqBPWJBSYisCwwzj8/54yXME2mAA7hUUQwIA8fFRulkRIJYwTtEEI5MMVGMEEnIANqIINLAATuIEN5FYVPOIWNenSuQFGugEODB0yAWltbYASBJIedMA58EEJbAA6yFcJuAQ5nEMmHAPatUEMcgADwIA43IHenMI8dKahlAB/VIK5rIQLvIESGMc5bMKvwSQzANUJVIA5eMAdaUESgEMSbAOvbIAHHEM31AAtXIEb5EE61EDU/dt4KCk5mIAuxEDJbcBJsIMeTJtrLZoT4IAx+AcQFAE+4hnICAQ5sEAc4EIJ/BvKKYAknUMUKAMzsAIuFMDUIMwX4YA8pMMbhkBYTETHXClIkZQCVEAW5P/CFdhBFezNBfjDEtzDCqwAu3oAVsLDOHAADLhJHVAPNS4AWx2EeZDCGojnZxomNt6UOT6rAdhALoRDCFBpJQACI3CCLAQBDhjBLrgCFyDAn6oCD+CAJDlKr1WkkyjZQfgqOQDBDngADrjAE5yOqnrDAzjBRxlHBcAUrWZCENBUpPnDn3aAO/BdB7wCEQxDrpHgwBhgOtJsOKoLDrBCAWRjAMxDFCQAJuyCMxrEBkhlAjhByXUHt+JCEajDt6bsdi6aQCBNx+yCvEmAG4CYESxM/sGrweyAMUDDCUxAWUJABQBCC0iArbpBBbAAKSjMAvyWNumJPJQAmPjDJpxDoUb/A9YVwAZwXMGow00t2oeanhTIgzgUgyvYwBY5AVuxQBVsQTfAADiAEAMAFguUQwkMaTwMDDyQwwa4womexaP9qT9sQxWQQ5TVwIPmgzf4CYr13TZogQSEw1xOiLYF7TiQgnnsgC74QSPgXwf46qSiHjqcg7KmgiqkghHgwjz8ZABEQjkYQDakQioowM1uQKQYVAmUXK+RwnyhpxgoABdwnh6UgPKFAA4owy8RAnCBAyE0rOB6UUkBwgRUgTE0wAnUEdO10za8wol9EQvUAR24ibFkwRLswAJ8W/YVFNxqa8lZDk4VRGJelT/4gDjoQiUcwA4chMBEgy/YwDj9kj2E/8HB+O5VocMGsIO5CKEuuEJhbgADM4AxkEPNZQGrwoAWuGp3kBQpPIA31IH23godhgAd7icf+MEPDAP+IQz2FcC0ZUiv9eQPsMAOUAEzJIBfhkEAeOdNaSgOEKuSKYARBIAB/EMWdhwBI8A88Je3InA/FkAbHA1fycNzyKEoDUzgXrBJvJILQIAPpMIE+AD6MUAqoIFr5Rqxain8SYQEFEvHLMAW+ENOBsCebkKvxWwHZJWjIOakZsOgVEEuhIIy+AJG/YOSjsMOGBUXdJM/TKoeuAT2TaoBCNoG8AGfiuOcLgw5qII8QJ4EZEISdIIWAK0CmMRAoJw/VEAZ04KFPP9BCLTkA3iHEshCMsCcJ6PcOSLFOqOYAuTxBryBCeCUz3ABKwzqTfUBGmyDK/AqOeyAEbCCHozDyQiEGFTgkZrHBphANBhAFWjDBnBAp/EtHeTD4X0yKCMETDCBDeSBDaTCLO4VLKABAe6nwLRkEmjTNt0FBjZrTgBkx5FuNmZVQZTDPOxeopwDLdBCMqjDFnTqPwiwE9hkAHDBzQJBAcCXoA0MBvhjPGwCVZKDC9y0d+wCTVWBb7kBOMAANaKEO78COBzDETw1FvGAPzwBMuYB1ZIDOzzt1CzDUagCweynE+TxpsWAOuBUrIxqB5SDHkhBCSyBEvyACQgMOfio1xL/awdsAhBsNHypg0A8ijZcATnElTxkAXDNT8BYaUsThLmMgzLYABVAwAKA2wYoAwvMwCHcARkFgytUgll8wxE0ItOtNjVKwwpAwUB0XMf1nWJWc1UrNQJwATqQtRN0AgO8AiL4QSXkGsFcdRGoWQlEgRhwNXz9GzzAQ1gbAGnzGjuU1Da4gPOpwhZIwOkkAYhpwdNUb1WzGDfoyBMwHna0ZBCwAB/kWooeBIuOgAm4xB07gRFskQLsrwIkQDX7QzYkAkEUgBQ4gSqgga117qO4AGeeZpCWgBhUVQGMHjusgxPYgij4g0mHQB24NQzcQa4FaWyLRzjZwAqcwK543EiM/54yvMLnBYMdXIAqMEA4TIw3aNMR7MAWvPDtPRpuvZcexHc5sCgXfCYDK0EnnMJg+sGBNdpVd8AyUMpQdkAUdDUUnNw/fDkrwPe4sYOeA0Fgy4PSSlkS1EIS5IJIVF9V76cuGFfbEMKtpII/1MCVte1AbMCxYgL/NgpGG8EtLy8aqEMfyG+d/2JLxJkTKMPfbsN/V/U/8CLcfuahx7lFA8F+GkMm+B0KPYGbYG83tfOPF8c4TIA2MMEE+MOvGYzPRNYlxIIAuAAOMEEbBAMHnMAJaAA1+sVByrrddHWg+RqYl8PoLq88aEEVzIAr+EHPDAxBrPkG3CMUkMMm8IEYyP+5wNh5GKiDYer5fr7BFZiAKmxTc6wqDLhqWhzEBmyCB3iDhWTBdfiAS2nBrhhEaCbACPhCKHaclv6AK7QDOSBZQbLopN95S7DoMowDDuzABvzADpiEIeMAAJvrOMB67VVCHbwBOZhPPb2JcGmIj/+4cWxB0BH5wjAzWrTtSkSBkTkBBwSBB3DDBHxAGhBGMBSDMpACKQSKvBsEOoC5Osj6RdSA/NTBPpiBH/AvyqW7H/+DDAfwJrB4V58mypUDHWPDye3dxj8AHXKAYqhqEoiDPCxaWjx3CcFAhRBCvdVBdHBACDiKdY/AFKKDw5IDKbwBGvSy5CufwCXMJSjyuMz/QwAsw6ZtkSq8QZAumgLgQAAkwHP3MhD0QWf6uT8swIkcAZzmQxB0U1VXXmz/yQQYwwREB8rpOVrwGqMRK+MkAe6WATg4IAOoQjBowxoIQAmg40uSghiYQpwpMZ/uZyp0gnI1h8OQfdlfNQPLpCJTnhPEOyS7RJ3rAStEQ/CagzHaZRtUSC3UghtIbxvE3B3DqjgARJAaR57UqMGiRJ1i/vQEaGCi3aZxmzqQ2/BjC7mKLn6QG6cggYF/5PoE0FOu3LwATvyZ2Nbhn5Et/v4BqajsTQAD5f6NG9czij8bmTZsCSEvU5AkdGDY8Oez54Z/U6lWtXoVK1V/aCjkOeHC/98GdOzcWfU5rsPZDefOVUlypI6bWkFg8PAHKI2ARAhw3En144I+VmHEOCH31F+bXE+EuREXSomTfzDTOklQwh8LFtgCQDnXoYMTMQUQRFLn01zDaOr8LbiijEWWLEG0BKEjjlvFrFOB+PtRS0KNJ0ceEOJGblsZMAmWKLAIROrkN9vOjvthgtw/UwgKqPu3I0CBkfNYLfPn5I3zDamUZUc77hsOVid9pvV3BxqLSxxChJCgFIYavqGJqp92O/Aq6HrypwMbmKhgAnWAAOK9rAycapzMCAlCNgkImasSZbjBBJd51NlAATP00UkZKmCZYQY0TJCmjDqeqCMEGLSAhf9BdtgZxzLMlNhmA0wQKGGicxQghbQiyrEJiIbCeOMII8jxIIgjggjCDRjA6YXBA8k5TBoYbMzkiQeC2KU1b1x56p8NJiyHnOme6mCrbZ5CERco1CGHs3nGLIKVefwhJwYXDlMilQ7SmSxDFxrgrpwNWHKFEbuYOGrDJDqB4YXsEBw1qwlh8iePe4zxQc+zJiN1JH92KeOILOrIIscQ/FFlgmieGgeIAljBRh10FFBGlTUu0GUReWoBhxEOCpGHhafYQXKZy/5xAocSwDMAHYrIWYZJBJx40ic9WDliAX8YoOMJCeLS4osK7hzVHxe60SKLJzLJ5IE6qPBHGgl2CCv/LZhwwGGcc35y4gdlpiIFm8vIKScMVkoYiVAoDnUhBo382SZkmKQix5UzEICiNyUkYPOFBzy4UQI6vOGgBI1g3RnDf/x5ygZ5PODmBXQghWlnf5QJwQ1bs6ghhFwY8IcHGwxjR9gwykFrg8P4SEYZf5RoQxtYFNiAhQ3Q+rGDbDce5xSWwugM0nP6UKAAXIqYzJ9K5HEKkHw2DEICCXJ5wDndEOxNGxhqqQPNK4abyYMjwu5AojdwcHiDDfyJwY89ozAAl6kwZgUmcoqQooBDFXjDiZ/WM8OjtCb7YdIOXKiDA3/eqEGeGuRNoowgZioBaZ5JJeebNsCwgRsf5AmY/4EdxlR75wyNyEcCuCS4Impj/NHGhmUIxWYq0BbEgQU6DzDBH3XUcWIbBeJk558S3P7pjUrOKfJIPbHJ3fLWB3984wHS8E0QCFEHLRSuDFrQ0wbUh6BxROEfZaoFLTJRgysQ4glo8IcH6lCtDuDgFBT8CB928AMFgGYcpDBAAsrBDowhAEOrwwaBtqEEj7TECKTI33sUgAMDSOEJ3PAHDo4SsP/kowwDG4faLqQ8Me3ANceowxazIIFjVGAcHqni4jJUATpIwFZBmF4ZFuGPF9hgC+JBCwz/EYNtTKUESzBBTTbQByM4YRP/wJ/+tEWOLaChHeTYwQhEUhMK7QBvev9AwxUUiIMs1Ko2WciHN+7gD3Z0Lnm76UBvFCAPcQQhHMK5wtNU8Q8OwCA9W6jOONrxBlVYpAMbUEYC9LCOn3BBClQpgRTCgBhVZOQnW8GBRhKWIVGsaWQeDBhtwOENp+gMKlYcFTmUsQstlKEWD6jmEdrgquyFsQOv7FAW5HEF5fhGHm9gEFowU4lUSGZbsOsJSU4hRKg4ASQlAAI5lLCEQwHhAJ0RAwVt4oRzgOFlvjnCRN3wn1rAYBdhFOQYRek5FnTDG4wIxxM4KIFMzKQC4mATMzfyA6nApBzLKNQ6zAEETCTAI5PJRjFHoowlSMQnpEgFWEBzmJSKzwhXuML/A44ggVqUATcs0SbP7PMGDnjgAbR4gA2W6ZPowOoneFJCCGrUxSw8oAZaeMHnpJGHMXXgHE7gQSVoQg4TvAEmA+0DDkghqn8sI6ADNQEO0rE1PhjppemgCQPy0QZUobEGdQiCZKNKIL+OioJ4wsExvGGjJ/irDkdIBdXKwAGWoOUcpwALVUiBAY3BI3+YMEBO05GIBPzqHziQWE3yxQMn4MkE3DjGD/xBBeE8IAty0QIMCEHXqfKsPj9RwDdY8A2fvWeUO5uQTzREB1uh8QFXyAcT+iaNClziUDho1UhU0SogREEZOJCKgfrQh8vQSQGpSNw/osHI7GSGGzWIgT+M/5EEQhCii5ItQwgG9FWesc0foRBHjQhxBELUYDbGYF4majFafwzDCNn8SMXYAQ9zlGAE2BDVOHCBC3/Y5B9LqNZZEHUwURwjE5XoQAWOAL4rbDEJ4qjDgIHw3J1ldiSHORSkJhPKUZmqqg5smmxCoKZC0NUY3PgjGjaAJJ/FQISjLIcyYAGTn3DTviXgSQeMYL20lCOhJdjAHeogjWNxAF5NRaMEvNGNGXN0VCbrmjqMIQ5vMBCEwtFCFeA3K3nEYBnLIAf+ohKSnpw4PFsLYwJc7BOCGsGRSuYBLWAgjMxU4QghUCpc6AIOHnUO0EbOSlp+Up+EYcjBixODTTqAGf8eaIF7ssnCFeRhozz4wxUceAAOfoah/nlkoNEIMVQUuUuBDhQHPuyAGITIBTuEl7i/S8ITktu0IHjjCQOeopNJZZOfTMgfFfCG4y4JQkK44QnHVgU3yiAPPR1KI05AwEn42Jl1AGET7eC0teChAB6E7Wc/eMDNlFBcpoYXLkdwTBaYPaEiy5pUFzJnT14Va6wUOTrc5cETYJCEOvwHeE8oAwWUMY48cIABDDtPA/pQjl2TQwAXgMeE4MFNa9ukHTHICDnUEQVO2IIWdxjHDqSRhCDEKwmFC4I4QjjPbCpvxckMRhm8Ia8KX/gItajCTFjAAS1k4gUHm18CxNOBcoD/BwoWKQE8Fu4OeJh4ByxcQDdKS9cY+KBfxemiBLpUAxH2DOSRt2J2RKXCz2WiDIXrYqofoIU6VMChPOCAIojgileQAx5kIQcL5AkauCrD2htwh11z0A42TCEFo7iDOfhQgTrUoqlu2NLLc+GBAY1E8mehWi3E4fmJEqQGhJNGtVzAANp44A5oUPLP5laEdnRg9gZIxM9+hsUHHEMLDACLKxgQ2itkgtVcEofxDwUVk0se/xYcZb48kIumZXypaqAMCAEQWCIZFKEUpgEF2AARWGMHBsQcxuQplsEAOoA1TIENkCD3poEISIEU7kDmlMsNKkoCkiAXOKA9Pi7ybA1P/17hCcQBHCbraTLhCmoAOKRhJoSqCmgjgcAAB9DgALLB++InCqLBF26AE0IBCWwBGrihFXrDDzhAsp7gg+ogCdwgCWAABhigr/DHQO4v/8LwKtYtQ2akDN7i5bKAEJaqDmilAipOGYgACRRBEe5gCpqhFYbBBPSQBYwAEOygGO5gADZQFFzgHZQAAu4BBmQDC7MutLSwAhRgnsLQ/vxhBzhAHJpPDSusBuAvCZLAA8BgQM4hBrLsxyqqGzJBHqYBAODAFeGAGEpBGJJBDJRGG7AE3wZiBLEwH3IhCUKFHCaE5MSQGEMuLV4qLO4gCwtni9wPuWDADXxAG8zgHRTgFf+I4A7mkA6nYRSIYaIeQB4YYBFw4BvcQQBukXhcjvGucDbIrgbsAjq+Lv9+ohwO5QVq4Qs6axMNYjiCIB/qoAq0gQXwxB8UgPXaQBTuwBju4AXyYAnMgA/c4RJY4AU4IK0YqB+5pBa0wBvmbyay4+AwBAyLkRjP4kc24TBwwAO8oez0TAIKAsPILh/+JhVUYQciYRwabgdcwAT4gEFKwARYoGpC4FPyoRY28gpJkM+8QRoORk7QIpBI8r9UARO9ARwIYqIODISwrg7kwby0IRVwYAtUwQWUQBWWwAjaYAFsoAqQawTVkNWsrhayUByO4A5IgUBIUi+nCi0KcgFkLvP/XLJfaqCByM4bMu8BuIEBFtMGGlMafCAEjoDsYOCMXg4LG9E2YMAbPAAWROWySPI9MuRz5CEfNzK0QksNn6DCSvAK0WgrP0s24EL4NrHCyu0yYSAXYEAawgYt9tI3tSktDkMZjMENDrOibIWLJooRywA3c8E5M1EccmHe8uE4byUNJSsJelEcrqANpEoe99LdTuUfgiETvuAL8qE2mPFWXlM1PytNanCplEo4VFM5ucQNODI3164ncmkkf1MvZ+nruMsFdiELcjPrCocZNU/YFvTlCocEG1TYsBCqxKEGXkASj8Y/4ySsaO0wNqAN5MEbvmDCklJBVVMN5zMrVVNy/55PDUtQO8EBB32G5LAnQ4txlqCjcyiI/Ha02Wit/BbgAaSTMrnkP0aQ8RAUQbfkPxCUBOlgk74ABuTBt2gChnrTP0NpjmJlHGJAGoLAPEU0gv6DSLNSNuizVmoluYLAMGHgCozhG8ZEybaPR/OyRmVtlnK0c/pqTn/GIz7DYc7hPGCBA7IABqITPUfwCj/xMi/zE5fimzpywmqACVQBM5oMS+sUK9hByZQhGKQhHL40H+etDPJhKTwELjZSTZkTSvMhBCqASMhPTve02TB1HqtDU2UVV39GGVKBAcTJOaWT7Ea15TSzDKTTG4y1DrjBGLaAIAEOTmvHdmgVK8LoZ5o2wBVCgQOIARxA9UtzQUTNsyMlIBxr0nNyFVel1TfNdUcl8GfOQQnyAHrcKTpFVBxCNQhkRhqMAQfgB1Zl1VL4gN1qVF0L8hVgoRnuAGGNYSGNYQHuYAFC4QdeQRl6Y2DPFV3FsEIq1lyVIQZgQRd4IBVSgQdgIQb4VWObbeRo9WRPdkxG4hySDE7782LtdJa0YmVvFmdBLiAAADs=\", \"width\": 141.99998, \"height\": 88.5 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Mountai\" }, { \"characterFormat\": {}, \"bookmarkType\": 0, \"name\": \"_GoBack\" }, { \"characterFormat\": {}, \"bookmarkType\": 1, \"name\": \"_GoBack\" }, { \"characterFormat\": {}, \"text\": \"n-200\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-M68B-38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 25\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $2,294.99\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }, { \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Mountain-300\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-M47B-38\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 35\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 22\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $1,079.99\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAMjI2HONu3h0eNPT087Ozrm6x/r6+sTDxKOjpGhjaeHe6dzb87vD0VhTWezs+3h4h5ubpLOztKiVlry7vcK+xZujrqysrcvK5e3s86qquJybndTT7EI8QuPi9EpESsrKylJMUuTk7Pb19mJcYtzc5PHu8/v9/fLx8tzb7aSdo4uKlSomKcS7u+Td3O7t7uTj+1pYYIJ8gzo0OrOts+bm5nJscurp6tLO09LMzPr6/uLg4pKNk/39+mJTWtPS5WpocNTT2bOqq8nEvvb6+pSRlMTFy83R19ra2vn3+tzk6E1JUY2Ljerl5ZSKjHJnaitGY394fP37/d7e3jQwNExHTern6vb1+q3U4qSjrI+o1DMtMjo6Q9rW2vLt7jw5PYSChPv699bV8bW0u+Ph3kQ/RUE3PpuUm+3w9LiyrPb2/rCimYuGi/Hw+622x62xt/j397u2u9PQzVFHTqmkpaylrP37+7m0tPHx/cjFxoSDjLi81MvFyvbz9pWUnNnU1cbIzNva1aO80srLzoOY2fPz9O7q7vr9+2x3p+bi5vTy7ZmatOvr7Kasw1Zxkvf59oqFhfXz8o3U7JiUlczJxUZCSdnY8zgyNkpARt7e94qXqoaCf+bo7Nra3i8qLebi4uPj5O3q6uvo5tjW7c3LysTV5vb18ltgcNDO5YOJpd7Z2ujn+3y8783M8c7Jzt7b3by5tjY0OKaorfP19s3Ny+fl4urt7oWbvJyQjWiB0ejm9LSxxri6ve7t6/Tz+dbY2/H2+ampqIeIjPTz/97d25KJpI2PlnZwcC0qLiYfJRgUFpecntnX5aenp4+JhvP28+Pl5+Pl49Xa8R8bHLDA4dfX1lFQWdvd2rCwsG9veujp9+fo5cfHxre4t6Sw1p+goGRgYhQeMDk3NkhHRv39/f///f/9//3////9/f39//3//cvNzu/w7+vt69vd3cDAwdja40dGTTAvMOnp/iMhIo+QjuDg2h8tP2paqWhgj1pquzVXfJiYmNDQ8p+bmf7+/v///yH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMlypb+WMGPKhOnv5cCaM3Pq3OnRxLiB42zyHEq0KEN/Jv4ZSIrTKEpzBIU6nYqwZpQINAgJlEoVJFIT5l4G5dqV6ssBMb7UsBCFbNmO5qAONOD2rVETRASMCJZAh92P/s64IERoDDNjE/7axRPMWIIYP6gp3tirA6lpKLRtw/Yk2ZfJXd8sKdaAL5Rx5UALNHFCyqhXr/bE0WHDxro3BnK/WVcLQwcf04IHr9Doib0VH1QX9fdzQo1qDYpdetR262QajxIk+CFgSZ60j5bs/9OgAYJ5RYy6dcuSxVaAQ/qMr9CgnCjSfy4EwODAAYaMBCX881JTdomwQw2mPLHFE0pUA0KDDTQwwjfYYNNII4cccuGFT3TIwTX12ZeUBQJ4oUUnWoywRwLXvEEYIXVNFcUn/SAIDxkJHNKhPfZscUkDpugj5JAdVsOBBSES9dMnNZCxghdTWALFEitQ8YUAAkQQY1f+vGHDIqVEMcEDqDQCTjLITHEJFfB0uAU8lMTzBTlJDuWPORpAUQ0ynZQxQgpyWEIFFRESYUCd/6SGwxy3GDOCJchIg6IMnXBARoqLIDrUAMD8g8cKyJDRgCYeODGHEyP8EAOMQQVVX5d4WP/SAwh8doJMhN/IMA8U62i6KWEggHDJFByAIEMPKVCQAhQHCDiOCcxtaVYUUpBRAwfJOPHFGlXAcS0z1vnK0yfkUSLDCmVwYAkIu1Awgx1SrBaVauVUQQcMJ1qSwCcCQSLCauP8JO5OBiAwggxUCFuGDBqQIIgYwLhDwz/ajPJBr6D5E8UwrdBBDw4xgNgUgQMT/IoA33hQxiUgLByDO+q4Y4EFsTgKhSQ3RPFsUmWRk44VdjiRwC5a/ROwwCUbNQoUxjjBgQwN7CAAsc0U8ccMGvzgASUjQDFBTTx3xYMhiKghRBOtQFITUtImLdMRjxCh6gdRlGPHCCnuAAKWHkz/IYMTEQgYNlVjj4LGJBK0YwgPAQ/udlEiuHPET+YkJUIKHnTiRRmUmAiCE4nd1xU54wyBhhBBBFGLCec8rlhQJvCsQwxllOGFFzKUse8/YfVMThWH3yKELP+07nqIxmhBhiVlOEHHP0z57ssfeJjBCbR0Hq+aCWckb4kll0BRhYB/kcPMARYE44I/PGSvvWIuGBHIIT+AYEkKUWzlalmFeLMNFN4wADl40Lb38UQWJHADMxigiD6oQACtGIg5yOEPcliQgnY61D9uoIEDfGMUNzFgWfyRBAYwAAuKiMMsCoAFb2jAAtuAhgYpWBOk5aSGNYkAHPbxg0wVUIQ5OYMJ/xngjQIQQB0EiIMgDsANZngjYvUohUAwyBPmjEME3ohAd3j2QyDG5B0MOEMREKCOWcziAx8wIwEIsI0JWMAbzHgFIE4gon9IQQAN4AAeyOfFG9bFAAAAgAmucQ0CfIAGLpDCAAyZxjV+YALXQAACuEGAddhQLv9w30ni4ikqaKEBNCBZH1uyNoScoQBJWIQ33GHIIyxCBCbwUjsIIAg0rnEWB4ikN67xAW2EbYCaNInP/CGJS6wgBvsbZUy2RAIGWEEdCBDELNTxgW3MghqfOIEBorCOT1CDmo1UBx6a+MQD1MMRLbHgOmpQhk58rYvKdAkAjJADCxTSjLMQRBlt6f9KEeTGBrNE4wfWuI1dAMMbCJhAO4qmEjzYjxLxoks8i0IIBoRgE944AAHUuAtFiOEAs9hoGqmhA20a4AQ6AAI4Q/oBmSE0AtTAGEkMcAQaWEAOyBAAEtg2UaI0cwh/iCY+cXkNYCBgl+4Y6BkHegRt+FMEizgCI0Maswh4Y5fqWATP4hIWeCLEHOn4hw4QQA1quAMKSApYT4liBAAYwAIR2KgaZwDXRVCDG0dlxi6sycgPDEAHLjDAG07wiQGcMaS4jIATLXAAaLyBIxP8xyRQMYgCDIAasziCT9bKk4omYRMdlOs00YiAV9DJGVI4wEGZEYEDCEKkTNUGIUxAiEX/zJKaZtwGNw4aMWv8SyPkAAYuVpGFQbRhG5r1KmdHUkIkFCEW0hyqGT/gjQmMQy51sMEsrIoAC0xgoFP9qwtw081vpvGMbpTkLqhBx4vYAAJZSMIvXpAFd5yAp8udyTzfmoIJiBafbFylBdORDpsQghoTcCIwuLGNW9qSGlkxgAhsoMjzttQCR43AAGxQEQJ4Iw6jKMIFxMCNlzguvyyRhUWfgQAJ4KGM0z0vGzWwDegRsCBvgAb6XuoOxAp0AFIY70m9acgzHiACR7XAIU+sEHNEwA0qnMUfICAZFOckBAwwQBHMEAQjDFUb1JDxATQwC94lxAQ2GACSveHdBsOW/wDYJIRgXdAOw5qRiQp2hw5+uxAssjKk7oBAe60sEyMYwQCxoAMLRHtIAxghugQY8wAcQggpuMOJkwQpbP0qhUW8wUU0oMYRZ1HQN+r1CAw9iC+8AWk3gIjQMkECAzbxDG/MQLpopIEJjiBjd2hg0g8xwSc+8EYEXCOpDh7pJ9Yh4UQuEo0uRUBcLWkQd8RCrtAEIaxJ+Y9NZLkIKXjxUNP4ARsYgBMynoAGrJEoiPhjHQPYxVGBsVcf27IdNpDFSWkg1TO6Q5e81IbACraLjUYaAtrYdkyAcGgsROC8+CxCN6i5CHOgW43c0MAYeIfJh7whtaZubUhhO4sBLBs37P/Qgag/cGQF48ETOvDGH8yojl0wgwcKb4kBGLAIEihDo0MlAA4yYM0P8MLiMrbqxJjsEAPY4APXuOqxwbtUpubbALLgt2EPMAFb2KICsYCxILDQrJyzxNsGKAACpDuLIqyiAgg4rwv+cfGQWpXDGVnHEfDK5gm4meR/vY0BuhmHKwQiE3CQ6x+8MYyOm30id+Kq5LNHMgv6AgiyqIAd/jsLBqwiFgg9b694rcZIriMuFsRIBDSgS9ZqetMEqKkI2oGDbXiDARv9g7xl4fiIDChgIzPaWNTaKqEo9y81IUdc1hYXpqh1IOR4AwNqQYIOSjfS3sADIaw681ncl/QhtQD/MwhRueMXxKYIOIA7FNiP7iJbrgJdI17FbgFumLkiY/lHHYrPHJ886/9HE3xuAzbRwhxbMSBSQQ7NpXbXp24EIBAGEHUzRwCEMA7gRwDAYAFS1HsTYQC2ZwFtQACBMAhv9EQMhkRyRQDM4AZyRUSTZkO+V0PJVBUCAXw2YX5cwoEHIRX+YARAQAgOJ1oEsHpHQBClEEkTCEvgNwvM0CIc8QkYNgEMQAoHll4awFru8FqL92d/4A7ecHQ4VxE2UQ5vUAg6wAUDgAN48AGjEAepUAUnMDhjgYM6YUEISBDlQAjPcASTwHWvoH544Adc4AIiIBWyRn2hhU9vxC8Ccif//yACSFhysBRm+CRth4J6R7ElHvhCe6BrtTAALKdYUqcImaAHuedq1xVMB8FVYiEUSMAFEbADmuAE3/ANVAADIEAFKTMCMAADAhAMwDAAGpRJysc7xThCydc+NiECOqCCZrAERAAFAlADCcA0j7AGArADa7ADL0QBiBAFGJBl8qZGs2BUmRIVL/EGGCYIozAAb2AClGhI3gAHURA7BdQUkWUQUOgNuwAE/sRrBOUO3NAPFfAHtMQAzJAcfGQQI+N/ArMO25ACMQADI8AyeQQC4kAJIEAGSkAFHkAGHAAl4UAG37AEeIAx9hg7JqCKSmJFAnECBHANS7AGTTONX2AzCf9QAwLwGN+wkzXwAzBQA98ABW5AAkAYV4aEAMCQagbxBkbFjsJoAPFoe+5ADuWQGhABFW6xiRZQBDTgdEUWe25gRNNERAm3kAXRFM8iECLABXMABQ2gBDDgAXJJBhgpDkpACfDAH5RgKV5ACWTgBeryPQ2wBATAM0FhAJikgzJRSuOQCjOwBj+wBjDwA1DwDY4BA98AAjAQISPAmRKSAJU5AjUAAg0AAWfwDhqABwHmhAshC8CABVApYWG5DR1ERcEGLQnxCQc1AT/4BryWRnrAACHFABCjQTFSSv+wDu6gFoQCA4NiJH25BbCwBTKwBVvAAdhpnTLgBbAgmIIZDuH/0Ak48grEUzmSx5g5MQBE4AQ6WQ0/OQIj0AC5mJdKcJ8Ncp9wQglKECyf2QAVYAQQow4HUF1MRxDKdwbAAF0fQA0G4AJhOWY1dn8MQQ4+oTF/NGZd+Ql1sAhFhk8MYAHuEEIIsZZRcAAoIyoJQAZUQAZbMAXf6QHwYAoVUg0wgA0/UCGmEJdKYCJRIgPdCQuaAwMlxnFcpRPjYAi6+Q+C8AUNkADfAAMJQJ/3SQXQ8QM1gA2ogAoq8AMPoAJ5oAIPYAqmUA1KoJ0w4AZ6gACBEAlBAAVmwAT64yrPl0kvcQILWkvUYAIe2khj9oCx0xG8yY9GcALAiUZSFghzMAy8/zMO1SEQ6OkPWHkDX5AyvUgG4qAuxNKZnEkJ1eAgeQkPoiqqNgoFXwAFI0AFJgILsCCe8QALAiAIq6GkNZGe6ukV9ihWfZCLnDkCDtKiZAAPP0AE1OgENiqlnSmf2pEA2PAAS/AFqaIHBTAHkRAIRNADP5ICdGQIYjGDA3ECzMCgk/N0auRrfpBJtyoRBjBm11AEOmAAvMBIZvAFchowBoA05fcTNJACMCAHn+kFl8ABsDAFMCoqmQoCpBkDRJACWNCwGrADMeAEeUQJT4oNUAADU9AJUyCe4XAMsEAEc2cChoAOJIsOscNJJhEt5BMF2/ANlEAo9OkBVEAJHrA1LP/qmTXwAMGwDylABz6rAXmwk/RZDT9gDBDAAG7gBpEQATUgB3IAAnJQAzcAMDBIEOswB1hQBKPQDuOgA+mmAYCgfHSIEIM6AUYgZ+1AahHwCKmgFPd6E7q5B8YgIXJABp1jCVOgBfFwDCuAI0sAB0DgCbRACzpwA3uwBzjgB0zAB3xQApxQAHngHw1iCTIwBfEQDzC6t9VQZpVjAjmQAwagpOnKEaW0CDuQlw+iBB/Jon1ZBkpQA2YwATcABHvAAq8wA7EQCxngBmKwCwxAAQUQC0uQAEpwtGwaCd4gB2VABj3QAE+bAsTTKgmxCAiQtbMgBf4wbBylAfWAlhRBFh7/uEvu+qCL5A4xsEe9U4NKcQ1OAAIcULO4Q7CW0AnxAANEIAj8dgB2QAcpQARf4A39YAyS0A+a0AxzYAeTUA9ggASt8AVUoLEyYAmXi7nx8CRIAj2gmxuhO7YMMYdycQBa05+qewlrQgUccAlOMAM2QC2v0A9EIAlBMAMpMAMHAAd9ADGPsANLsAP7gACxoKZzcAVtoAlASgYegLDuKwDj8yxhUQ7J9BPUCwEUcL3+4LVlRADc4A2ekCh0WEEGYVMIZbbMJgUEUAREEAToFBY4BwqSkACm2TKWoAUZ+yQ1cA3UMAoz8AU7MAFHYAOEgAE+kEm8QCfUAAShAAiTgAZq/zAHcfAGoHAvBBvBWiDHU7ACK/AIh6LBGgwtR9oRVrQz/zAB1bA1g0IJl1CzlvIFk3YCFvAFROANlZQ//9AFXfAPd1AJdOIHItAFcQAHaxAMDLC7VwAM36AF/MEBFNsAMHAJPRBB0eKoZBHFU6wD/vAMH3DFd2c0FpF6BcEN1zALFqABETC+LrBIMDQG5AAG/wAKMTACTiAHfpm3GusEFoAHwDDAH2AHbTtFbLAAFlQHYEAOCtAB0EcLKdAPa2ABNsAHdNAAnfA9BHu5WiANNXB6Q6DJS4Gynvx/UIEASkAGcjCzdmvCHAAF5+oHz3gNNFAHn8AcOvMPviAK/5ALG/8ABuZADY4AFVHwBgWgB7d3BUvwqYK5NS/bvD+yR+cQMOlbEJuAAFI8C/xizaWHAOxgoRxhAMzASgSwC32QUEYwxpEWC+6wDjoAl15gxFASxysAAv1gBxrwBdcADVBchAPhAJgwQGCAcyjgANATFp/AYTZwDTHQD0zgCTvgBZ0QwZfbCZ2wAt+QKRid0V7BHAawD0ZMBmRAwoPiJ3t0A0uwBH6AnOylMUlhBJXwD9ngz0MwADozDv3gBG3QBkHsBsYQDGIQDCDwsjVLl9VwCXLAApJ6J3XxCd6QLFD9D1IdfgiQCB0xVo3EAPfQBMZWBFIweKB4AB8ABaLivhGcsVr/IAAz0A/NsARFSDrjcAKSYRNs0AHmTScbUAuROgCrIxC84A2m4glwAAOJjbn02wnSkACnh9GGMLq+RzoCIgkgmdlGXLccoAFRQAM7IAmugAH54yomZzQvIQj+fAYvoBQ3QBdSwAFUUACM4AZXIAkxAAECkGA1IA4eecoOIp920IgCIxWtQwPFXUsTo71mBAzAwGcZsQ0WsFFx0A35wAKG4dXMpgOk9gXqgjtxjAyUsA9BoAlzwARpgAL32hZvIIwCQg5skAuMk0nocAqZEhRgMAtvYA5L8Q+0EAeSAAUs4AdQgLcSHA8oMg8/IALmMASGMASO0OYbUUOM4w/eYMSr/3vKxUIB/wAHAlB22RAGUbB//3AERaibRYAJtuwA5IAEH+4P7LAPeUBEfxAIRHkD/TDYdqAJM1uzLLPMIzC1YAB8TEbclNRL/8DjTGgB6JQR4+BdRD4IDyAZjuBr7Vrd8DYAFsABjG0rDWABklADeyQgCxACBvgPA6AVFeQA2UAQwnAKvEA+MCkg+WMNE9oKAiAJQAAB6hIO8XAioPIF4+AI9B7oYDHoKhsBrXsJma28TlAIIrAGGkBHUTDpC5AL+ucPJ1CE49A6gqDpd8DXb8AF1VEFFSDbpIAAO/AHOLCcGg8HZrCRre602sEF0AM2CKEDGnDrHKbrxqbOGEG93f8XB7iwA3MnEDrADAjASoGlAwPACPAgDcjgBEGAMn6BFOOQAxtgBeTTDnP3EtnA13UNBOH+Ep/A8AZACAcAS1DhAo8ABTdABxygBeFwIo09D/ThCIDuCNyK7y9BAO4Lz0ZMBTIgAAbABeCdP23RFlYQBkgwDjxAUwKRGoJA0HdwB/9wAq4wDnSCABXACBFgBETgBu4gAgKzDTsQATMwAiJes/1JBsbABFZdtQMhBRpQcB+QKV47Xd7ADQf6ECooV0WAC8BAOZZToNxQBO1wUkegB/jwJ8bwBe5ACOWgM+XgD7kgChhEA4w4090+EKrgC+H+E00FPf8wCzrQufnzBlD/4AQsMAeXEsfH0NjxcADkYAD0LlEagRMu8ANUsLykLANQEAWtUAOpUA5+wAc1NEG5ABCYyPkzcMSEv3L/jLz4d4fNv3VH/v1zFKwNFkFuJBXQYW6cARP/xtyyA+cbGQ+XqIBoAAKKgX8HJ86c6c/cEQ0TCMxy8U/Hh1kEPnib4I/mUaRJ/XHjtjPOtENCjHrk8W9PjzUW3KljZ4CWum7YiPwzgKPLv3HjooyrhGHiCSkzOziYSC6HKimL/vnzR02E0U8E/JkgbM6EjRJBnMxIcWmKpSmd4q3wAo2cIwOGjCbl3PnfuTrjhgTzQsmDaTlloJTbAwXUvyglXCHZi85w/9ty/o78HUfOh7x/Du7843XEqI48ehAY2ZeCRMxxB+sUqjfHDp6THjyspEJmxj9DVZUaxalz1rp/R4AS2KbhgIFxnj2LQHBg1qw4WVDVm+hvXLlCRuiEgxq84aYITt6AhBpGACDhFzDiIMQ/tHrZAIkoRDDOqLn2+ocNB8bQy583BjCAoA9ESOsgAzroYCI7frhGAw6mkEELyeYRwAADhgBpnM3kk4+vfyLggAwOtJODAyeQaAWKQv4pJwp/MNDhRHSM6iUMmHQ4YS/f6BLuHxekIOefbbBgxI4iHhEjh+hMIMeABVAgBxRJKJhgBO22A4ElAmATkpqcgjrBAGrWO//AG2YsOIAabWAScqYjmFHnvjgGMaOE/oySRAsZLNEChGC0UmcRQ2j5oI1DAODjBivQiq8DBaJAgpo34lMgGw9VSUPEvRYJ9B8CPolJzhY7+PEfOkaI4AtLQp0insncIQsJ+IKclDMTxlkkARkoSXJJOarg4hsmZOXLn0IQiSIKc/hy8Z9P9NprGQfIGZOXMdAioI0KAmFmBwX8i/cNUTAZh7YqllAHDiq0W8mDMmqoQ9vOBtDAHQIIIKRERTVAwAIESo5gFi+Pwvgfd67ZaRZBArDgn4GMcoUKGXKOTAtjEBADwTdOoEYMRtJIBJA3CPIHnQ2+dIWQvXbdy58X0NH/wd4j4vpkAP/SMgATTA4ibC9JaoAjARshm6yaRUzAFshtPUvnHyK8kIGDJD0g44YSjGklF0MC1+y/QkChEk4kwrDCBmP94WGZO8iRR5h/FqFhIBLa8KaNJehIAzaCwuiAHB54AOMfIHbgQgOU+ryEgyAmPVNjd4IS4Q2hgnJHg6a2cScCBLwZ2Z0jFpGUJlmA4Rg/PVARYmp/ooBCizJ07qQTKB4hAoGtbDBAmw8YIKELKaAG0oEN/NFBm4lQ4PWfHBjKayK/3tgmVxYX6MAQcggbm4kExGAGDbBEGcJhiXhI4wv/GMJaVrat3pjAHP8YgDhKM64ypOAfMTjAP+qU/xYgdascVShEOaJTJUycwBV7MYAohCE5ytlAG/0DACOAcY01GME/5zDABnJBDnKMow51qIoYlqAAAWyBCpSgBJIa8Bq+xGtlQfxHHDYWlDe4QB3r2R034hCH+/iOGxbwhjeAwY1ZfGJC/2iHNy6Fn26gol8myME/KFCGaMkgMsj4xhIE4IndXQNBBhDBAApQAD9o4yBUWkAIeLFCf+BrIiD6x/wMYKIB0AAtc8KEKgZjCJBIsAPL8EQC9rGPLXiBAzdaQTjiEriQxI0mfDGEORxRA7upkgocSEA5NGAGKUWhEihYl2HexYQoAYkcmOiADnLjiA18bnL0QsQ/CHGRCP/swwwY8I8VfBjErhmAHGyQhwbEAAQYoMQ0ZMggbMghRc8QwD2zMNEithiUCfQjC9EghDakQI0BCOUAE7gGM0R2jd9Z4AMdG0AWNHAW/yChBjKonqiQQQYz1GAbE5FCybr3vQNgwQzP+0wONlAmf5xDkv/wVSX1coIj2CBQ8HlDJbLhj8ANwRBy6sApaGMSYPxgCnazhCXmsQSyDCGWspxJdBTiBTIgSSUcuIEranAChIwjB2EIQRDHYZiPIAIS0SOHFSrBhSj8oxSnqKM8PkeDdAGhDcpwwyPccJAThCFf/hlMbxxwAQwQYglcgAAZlthEDjTABmhZl3xmMc963pP/AK8oBgMWgYRuGYAQNtABQGfxgd8BI3gIuKE7AmCH/vzjAF4oQxkec70YxIAIfP2HCF6xjwgUwRdvIMQRMoCNR0ziDR9aBiCo5IOH+EMVdZxfFY7gMX+QAwmYcEA6PrnTf3TAB7lSSwyg4A0PeEG8sJhHOGhgAqUytSbj2OkXKEFRDixpDf+Awg3IArccVKIQ5IiCBLuFBCbwwYF/HS4kLoAOyX3uE0wwQAEyUIEKxOAd/8DABh7SLbSERhUAYEdV8AABEtQgb5S4RDsd+MCZAPED86SGAey5Hm6YkwJG4AQoeDFWExCSF59oxwBmsQ2CMsMbGmDGAXzhAiQYoxOg/7JoA8zwDWMdxD/kkCf31GGDOtjACBX4ARQQ4IcFEKAO/0DuP9KgCo7q5QgTMNY4TrAANvRPgiAhR0//kt4jjCAFULCEeONxjHlogIFLZepgbiKO7oxLDoWYwCOwdaJ1mZWbEhyIrZgggikJky4GRrBbfWKDdTAiFhVYQh8MsAl+9AJ0fOkfJgCwDnLUgUp9KAIFWtcdMjSgmlRCMU3I0R77UGMcNviAIIISAW/Y5wNZ6AYDbmAEHbgAAzAxwRvW4c8BfOAAERCy8ATwDRBwQAvIWMEaoPAATlCJB4ThATneEQsNROAPu9VQEfQwg0c8IAMfgMQy6khJl6rWvuTAQP8YetG/eA3kH7nwgQj66z+61WAOVOjzFI4hDXHIYqcTVG8d5paCnHGAEkrgAFKh0IIS0OAN8TJMOYQRBm5GgRyGABIkmICE3GziAlE4wYH94WkprEMQjPBGLARQAAxcIFb+iYIB6pBfAHxpSgmRAhFCkEQPKCElHICDrOJ2AA1sYxbCpsEHLkWAaxAFC4dQxCBwMQhBFPsG1PDFJk4gCxadgLPU2MYuImABDSwBCjD4RhMEgAFMbOAM5EhHYcwhCgDMwcraqEMo/rCMXwEgD5rogxsGgIm0/sMXxovAXwpuhf7BsjfZOIUj2Askc8hCB3vQswCipYU/r6CDhOl1Z2z/IgsYnKYMlKACFRAhhvmW4wSeOIEUTfjyhwDJqSVABExAcQFV8GEDNJNHHTOphwrMQQNQ8EEYclCz6I0jDfwAQiliEgVZE6QPgiiCaSLGgTIY42Lx+XrYP3CEcfgEswsKwLOAa0AADdieDFAERigCBiiCuBOEATiCd3CBN0gDIRKBRfiERAmyfZCEVxiAd7iADpCTMxEiFFCA3XGDeXOEEgGAMxABCqgCAIiAH+iDL6iBBDQAQcCDfwiBSvicFZEJ1puQ6IgPGtgGHaAbAUiB9wqVTkgGY+ALmWCqqnAHu3mdJYGCKKiBVJgaJLABF4C0tLqDSiiBKfkqozgBGjAA/5jChBAQhbToPgr6hIuogEdQBEw4v83oDWG4gBuACf+QtTdQgAUwAg04AwHggIi5BEd0BQqJG39wB28QO+P4ifuYBWCwAA38BPUAnuDpgwrgBjEogG0oNkFIRV+QAgUgBAPIgWpbh605gLTrB2bAgnM6lImIggW4g2EIHgoQBMqjgT84hVZggj0QAGTQAFf4AjL4gU+AAxrIhUoQJ4MxB3HKhVMQAfAwCkIggAEgBHMwhxv4hhRAmxu5nnCAhpjgOFmyiS+wkSTZpQloBaQajKzSu+EikjsIg4coh7FhFxrQkDtghUpAh3FYrl8bOm9QhkcgBvuKDyL5qwGog3hRJv8MOIUFqCMNIAExyJvXkQFgQAtZarwJqERBkAJ/kAKguA8EuAb+648T+AkL6DYEYIZY4AZ3KIJTVAcCUAcjkIJP2ATMygFr+4RZmAAy0gBgmIA4sIETqIQccAR32AdB8gUREAEgYIAOcIJkYIlmMAMv+IYBGIBlWIC16JY4+QfWwzFD+IeyWyycoiMBWIM1gAXImIIpmIdraEf1+gdZGAFYwJuU6IESIAIKaKqpE4Eq+BIwcYBKwLR3wcdCMJdlqgS0UIUs+bAK8AYiCAYK2AHYWIsokAcAqEggiS4RWAB/pBnV4gYMAIEtOA1KKAMBQILeQwqjGIeT/IMPUMl2aMn/D0AAbiC0ibABCCgAAjgAN3CDVzhARomACXCHU/wAs+sYIHiGTTiDg7C2n+A2RrkGXWiHUgCEOWAGdxAEGvCWIsCHZOgDM0iGJYOFRwAAUYiu1JwyBziFEngXaxqAFgMPiKODH9AAioOMTlCgd6pCWaKGGlGlEjMDJICCKqiFxoy/+DAAF7ABKokPyMTNKHqXRfgAJOgFVnABUFiAKJkBRYgFb4ACMSiHL9AkrXoBADiCOqCzceiAMMiF/PSHRegDdPgCL6ACJYCHS/CAJXzH3dwFb/BNHRgH9QiKoSiKo4iDPMiAn2QARnAHA8gid/iGGvgCIjCja+CGCTgA61yo/7IkgUVYhyEwByRwgXbYBvA8Uw3ArXmjhgDIhB/ogW9gsmmJgK7pKznZzxOogynRgVFYz7E5k39AhxuAAQ1AG73shHloAEHMzaSIgMGEqtdpBRzYgXEgBBfQgU/4BBogBNxUvirAECqRBy6hGROYTDw4Ak64AF2IgwvwAwtYAqLbByjoAxqwg+9IAxsdBnhigzDABGvsDQohAhLYBS8AgSUqAw5Arb/8hzqwgyf9gE8wgeAcBfZINm25hgdgBPDLBAjwwYmYAXKjHg8AAdmSBIMaGelU02IzArp7hrvLsUU4ggOwA2DYhzmgAFtAhQCAAAGghHlYAS2YByqghXXhi/9x4IH9JAQTOoEb4IIx4wsDuINsEIVTEIVlSIAliAE90gJA4wCsghumoodjsBEyuAQ5KIEUQK1ySIhyCBoboAEaKARIcAEmeIOd/Qd5qMZ/MAf/5IJrAAIfAIACAIAb2IEMYAQN2IEYeJ0aEABheIGqIhIkWIBKWLx3isl3EQM4QAR4KD548AAZEM1t/QceQDbf1CQpCAoCYAE6kAVCKAEj4AYzaIJroIBt6AMiEAJe4AURkIQVOIbHxVQBgAI7cARtAAQ7rcnw1Ek1nQV1mMAkOIMe+QVfqABlCABcUAYI6INGMIUEgIEVAIFAWSS++Cuo8QdaiINQyAEQQYFT2AD/HzCCEHABR/gHDRCAJagRll0BMlBJIpElAxCqPkPSJnmEFpCSxuoPQioBF/AEP9ABEUCCOlAFTJgSwqCBFjgAMRCFQqihOegHPYC3NcCGTkCSB6gEIOgX/lKFHt3NOhABQlgEHZACHaABV0AAdBgBRiQ5GTAGiVQvcyAHMLDbD7gcPRCDAWCBFJiDPIiBHxiBBHCCbxiBYNiDPUgBDfCGfmgCJzCGGhDhBGgGY4iAVGgBVwgFJvCEYRgAd7CDkmGGRpFO6lwoIyAFUoiEVciEYsiACciAPiAGVJiBJliCVxiFiYiXjPwSQgACAECBBdiAU0CBEFiEv4DUCaIAU6IE/708hk6whMRMCKZah2oAFTKABw7YgRKIAT6o1ZhEiCkxCv8wABo4giogIVGoBCQwh0VwgVRwh2VggC6ggEywgyXIBAQggjyAADuQBCzQgxoIBZph1gU4AUiogk/QAVStAhqwQPhwhH0wgOQ1UhLrgbOA4780gAO0zkXAAAkYGgEgvG9wghoYgW/4hmqohgRIACAAgjcIBQKyWRCQAye4BQFAg1dAgyBAgw22gyCQgG7uBwnoh2agh1MSmUaZAEYogADIB1RQBAZYTl3Qhxf+AWMwBm7QAVkQBlZQAEyI2lPogOEVJ0iFnsH4h3ORBAJi2TZGAA9hKmhQYy24BHgoA/870IE1gOOB5gsT2lmESKs3gEokKARREIVUOIA4cAVqGNkDgABFeIUfUIR+KDUgWIIGyIMZIIMD6AVX44RQOGUaOAFsCZKK9QYauAbDWqL4+sLU3NY3sACMUAdeaINMGIEfeIAfSIADoIMeGIF6HgEYiAcxaAdfsIEyQIYl6wRkqAYiWCBfGyIFOQFeCIUqCAVPGIMxaOQJ+ABuIAJlOIR8UIR9UIEAIIZRiANFKAYs2AUhAIYaeAQIwAIAUIAJOAIqOYe68Lq9kMjoKoEEoIdviJZjmNn5+ssBsBtsFZcbmAAz4INncAFCIAQRcDoeGKKLgeOEqAMX4BR/wIQiSIX/G2CCbQAAVQCFGsCCGTAFwAuGB5ADS3BEY0iAPriAECiF23GgqTM0KYuPp72BkeuOMriEVshsTu2MUiCZUaADbICBGHgAU9iCH5gDC2iCJhgBMzCDBKgGM3gGIMACS+gEvbSEY/gGIoACVKYBRKABdliHdTgBBffbUqDuNzAAJICEFmiBUNiBYCgGRUgBFUYFOSCGASgCYtCFAjACQLiGIGiFRluCdOGRpusWIIpx9DOKKBCAYPiBnNECvRSA8UYKd5gCUJFoD0AECJiDscWEBViAkfaBU/CBZXiHEAgBoK0CMTzVVAAFJgCAIugCMBgABtCFESADr0aFOZCEPGgA/xkgAzkoMRUIA9rYDECG1DMhEv5zBzyggdNQAiooscSkrW31B0gQgyx4ABjIgwfYgh6IARhogm5uARYIAi6AgxoAgVj4hx2QAYjV8RUwhiXQAFCgBWiwa2gYYClwhVQ4dWuQAlWvh2Go8AFIgQyAAidAgFvAhz5QgQfIgwogACzAAgswxZPcAzXFoQnoAFHYAGTfAFFAARRgJkxQABQgARIIAQwQgBgQABnwApY9hhGAhL/khnCgKIkGgS4gAm0NInTIgTRY9ztwAHl4AUyohEpIcnqPWgqgAD1IASGwAwioBhjAhhFABSzoh2JQARzHP0eEA3hH8iRnplyQBwdgA/+JtwJsQYL4sNMSUALDqk0ZiB2P6PGkiI8oUIRk/oEnMAUQcOEeMAYBMAY0WGwKGLwEWAMzGIHQXl4oCAZrmVs4IIb50wA1WAN8IIYHKIZMeAAKaAM8KAA4GAVm4LeJ+IQlIAB0QAIrsIJeyPpeEAZhaHcHyIVc6IBs8C4oEK8peFwQsBemuoZ4uJtLoIQe4IM1YAHsTbHOSHd2d4hTOIVK2IBKCANFQAUQqIYfCABFYIZiWAPTyBkZgAFP4C8kKFE2KAEQ+foOAJuGR/IO2AVmIIQGIL49b6ePn1ujQAQB6IFkNoUf+IYeEIAGcIImMIYmYIIZgAEnWIJqUAJsgAL/SmhjLViBL1iCDorxQisARaCAA7AASSCCHcAGFUCFCjgEYmCELBADXXjOxYK/f7CBRwDlge6MM9kBaxcvAD8GKlB7WQKGxyiD0xgBJPiCPfgMd5ylpACidJidPcCBQoCDCQCIHw+OkXlwKY+tPnSo/ODQgAiNf+PG+aNI7iI5f+T+caw4LkqaHAMQvIFBhoqHS2VS/DNHkSPMmDJn+qtJ4dsIChIe3Yrxwwk2J3J6CBDgxNgaKdgS0KE0RYulKceCLdn2D+PMrDFNAACQQQMCC/uYmcGmIhO+L6hsFclwY1fEiVH+3fBWs2PNvOb2mkv3b4eAL15kWDq2gowOrYo5/16bIqPMJUo9kHzZ829uzLuZ87asacATIgAXspmhQkZLJxgg5BzqQ0TJsUdcXPwzUXPjv7x5J+YtF2XjAG9IRpBR4oGDDEmdFzPPjSTFCCguZqSAAiWGMRg9tje45ARCDURYYPw41mnK03j0iHy4erG5zHFuMpiJsMsdkX3XevbQUkyDLe7oIsgui5hA0V3epKIYX339JUAMg1nSyTFeJAafTNfEY0kZHkhmxRcU1OYeRu9dJZM/55RTEyd6+CDMBRY08IMXIFASQw8jeMMCCB4EIYUN/phgAl8e6fYSR+QM+c9IBhBHBUpl9FMbkhjKRI4LMcCQxw0p2DFHMQ0MNf9CDXKAMIITUPzAhSAw1CCVY6j1AQEeHFWZJFYwaQSTBooAgIN9zGgAATAzHIUKQgzocoAFiIxTjm9zfXBNbprBxBc5PPyzhgBQeOHFFJ0g40VE/ljJETfhlAEZJQ2csAQdL1SywAKYdPCCKvLomo082fiaDRvBWmHFAhe8I8gFIXwizg/YgCADCGSAMIALEzTRyg3rCJlXRnfpphk55pjwDwEIDGESFfAgN0dnpp6qJzk2xDDCN05IMoE3xcAgxyNONPBNNTDssIMTTdDhpgzHxLlCH1h4QwMQooiCAsUVV2yrrR1ojIkoKRCjSwTXuLMLArHEMgcCUMCACiN6uHH/wARA2ABpDlGgYwMW/qCz87c671VHFDFAIcCnU6wgDQe85PbuAbDIwMEl8MhRiEJI/NJLL2mkIYwwd7DhwK8ad7CAxvzwQ+sFrJyCSRjBhMMBJWTIoMQOoLwRxR5BsADGORqVmGdW7+FhASHVUCKHEkpwQEdu474L00WfrAGDoT00scYPDRjzjTE9YFNNH7FMsEaO3yQgw3lRrVCMGMAQUgIbWMs+++zBYgCELiEgEoTL2+wSATexeDOHEwIIpEgB7kSQASaVnCIKJrRWosustFpvfSUSo8DFD18YU/TRDThi27sDiMMB1FTI4QozElxlUYknZkbOG9FbQU4up/jh/woG7kywBAg44AUYiAECFFiGDy6gC10AQAFiy0UuVCHBCUrQAap4AQYlmAM7TGAR8Dich8oAh5Zg5nHuscEXQOCOP8DgX0OLATZwcqMJWAAHQaDDCGAABQ6sQAsy0MI88vCHfXCkb1qJHxioAYAX/OMNkjBDGABwDTt8oQZQeIQxBNCPJvjpAG4AQBjYoAAugIIHdTjBPiDBAwOwsY0GQMIb4giGKvyACDWQAaiOVgMluctKNBCHF+BGhUu0ohVN+IchMOOunm1kHCHYQAfYkIYFsCIMp7gAJg8QikIQgQ46cEABXLEAAFBAD/wYGwocoMpVfk2V2ciFryAYAgUsA/8DzCCAFCjhAeOQ4RKzWI4J3UMIFYAAAS7AxgNGYIwfMMINfajGFh6QAjykAg1VCEY1duCB1FkCGdgwQjAM4BG8jLOP0CgCAIDgCi4UoEsa0IMiElCDRwQjPwJYwizccIQIDIAGPgDAKS6JCWFUgV16WuTSOJKKBOzjG4TRwtEegcg+YogQMBgMJRQXhCpAIQqJrBRFx4GEXrAhF2FgRfVYsQA2WKEELTiFHlxRhTDAwQ7ncEAG4gAKUIyBCR0AAAoqgYJe+A1w8qsUD8ghiU8cwAtKgJIHqHCEhAaTHBMRAwwEUI5irGFeDyhADEyxBRg8AAGccAcLXPADJRwABiv/mIIlZLACGLSjGIuQSEX66A8DEMIFnxiDIPQgCinQwgWsYKIOzIAGMYghDhyJwjiOIAAE7IMb1LDTApYhBRIAgAEFKEAkc5ADU6noNne5iSSqYQlLoGYezJjouwwgAA6U4SQcaAISoFCFJK1xpLm4FcdEwQp+qMIKUYhCreqgkSiUYIEUuMANuhKHXOiCBV04Am3+8YJllCB/G3iBA9KADhNVqiPjYGMw3qABp1KBEgOkjakoeqqMjAMIP4ABEGLghBgUowJ9WCs8enAUKGhiDt5QgjFcAIVO+DBhHGhHLH7JEQOI4ATakAIXjnAEHXCBAqcQxkWswI8XWBUJxrhG/x2GEQd3eAISkPAEAoIhgPa8xACYcMBlILEECpAggaJYgCrSANmlmUoDP1iDe1m7ghW44x/pkG9zzBGMTuBRCWSogTmWsAcMaEwUG1jACzqQCzbkAAOV6AASUlSHSmCCHAYYx4Fy0BUAkAANftjADE5BgQNwQQRw/gc6MEGCOsyRBMAFrxX81pFKfYIe5qARlExTgzpQNZjjEoEkYBAdMewgD1gIBgRggKMRpKQHxkhAA4DxD0kcI64/PEYRDnANQrSDGgOgxhE+sQg+vAEMJLiAKvLCBlaoggcVKYEXHgEIWlyDCjDAwRwa8AgEfEEblfqIASrhAH9w0AU6OMEbqv/AiWUEFAXgzcE/kFAUKJRhMKEKxyf4+LhrwCKQgwTBIq4hAQxgQpJIMMF7DKCAMJpxHG8IQwd4AGcDmIAHd0gbENwxiyqEoCsFiIMIamIbfyBB0MoVQShO4NsXYALR48CKHYxpZSooQSU7wEswzfsPQBjjEt9gwwRU4A1lxKAaa3ACEb5xjU30AR41EME/4BDXwcBiHhr4xBJsYIN1+FlPhACAKNJgVXKwgR8OsGpNEGGJBqSgGU4gQ70aAAUrfmEAeoLJAjIwh3GdIBV3/cc53kAIG/gigRu4AQyW4IRAhmoFDRhCX6C8mI1QYwuPuYTiDpCEGJRjIxe5zSZGDHD/ihgAkhvZ+G9ewApMCAIIJoijKtR2gxLg1VTkyEElHFUOJNCgCpQ+hxVK2rwOOMAK/4jBDW7gBZYPkgMjjPlmzhuEEYgjD7qAABEgQKZ99OAbsxgHESjxjSMY4B+I8IAM8OiFFdTgDBqwQW6i4A/180ABF8jFxslxB1Zkg4/jYNJgQDChR0CCGxHgww/UwDeAgAAAww24AA0QADBIgh6wATkYgj+8gRToABKk38kZwjqUQArAQJh4wRZIhTRAQW04jpVohDM0QFxxQMs1AToIACKA1D+IQFARVW2QgxVsQP1NBEipwgUUQiXsQppRRDlUgmYNwETcX26QQxqEQRVE/4FvIKAIlEOS+IMVOMALLAAX1IABSAIHQJUHgMCFIB9e3B8fWMDpJMCnFUM1KIACgIAK3EACwMMPDIA4/YMBJEAnBBIsTAEHfIIYTED6zQUh+IAo3E8d2IYD8AMGuJmQdJ8YaEE4DMAESEIFwkQrUAAUUIE4UEE1LME+IMA2iNwGsMFlfIQNuMIJXEYd8IAh5IZ1BIN7wYJ5HAM3jODj+EOWcUhxeEAPlAAWsMS48MAjqcLJwRk59MIGLKIJvFledIAlncAF+IId2gY5yMMFuIDMUBpMQJYwhEGQQAof0AAoQJYTakRNRIAG/INJPBUllIETlBDy1QRF3B8PXMOWEP/BD6AaEQTDCDSAElSDJEgBRQDcP2hA+AlQPMxDBHwCBKjfOdRBCJxCNpijqWQDK/RCbcjjPxACEaRGHaQCEBgAOf7DI3kCBRAABXBB9yWJIfRCGJWiP4jAEdAA+5mKH4xAWRRNPKwAB9wV+bwLpbnDFJQB3IDAJcBBCDgBH2zkl+XA5wFc1zkgb9wfOSyAKOTAAijRJpwXkZCDKvADCuhAFwQJTHyE/G2AC6xfFNSBNtAAEqif+kHKF0jBAHgBJUDVSlRazCGIkGhKLKgAFCTANwgQFTRAVh3A3THjP3ABB/ChFzRdAliBN3BCDBKiFRjbRHjlRYKUqbgANeyANAj/QBzogCvYBpz5Qwj4ACLYAOwsg3JtnCEc4wbcjxNehg4MACGQA6WZQQ1oQDUI0BQkZA203i36wyIMpheQgRzIARSUAxRQgANIZDoc13GRAwbwg1Te3zxiwgaMwx0AADVUQmIY0T9oTCXcQBTYQCGUw/310R1sACS03jp8wjoAmqlwggguwfCBABVwgDi4nRhmxSqaAAQEQw3kozFckd4QgrvwxbhEwZsIECzEwzEAgSBYgDBI5Psg4QtcQG7uFcP9Ay98wBtM2RJMgD8cgW78gwPRACd0ADpklnJVp6mcQRgk2sb9gwvEQURUwTdowBqQARlYQjhIRZPpJYYIyT8o/0M8yAAZeICZcIEfGEMupEE6JBLQ4M8G9IJVIYhVZQ8Y+IM8FIABLEBizGN5boIwAMAb+EMVFAJkISFHyIMoVOCfvYEOfMKb/QUclEB7sdxx1MAbBGhW1MQn5MEX5GMxuIAfrJgduMMkxMEYQAIYmIgFpGD4zUMM5MAjUMD90NdFcCeD3t8y/sMibEN8GoMHzAEBkMMwdAtHGFodAMEG2MwCDJpvIMg/YEAYVCBnGIAfuABvzgBxDEbCiAMhxGNL+EJ/PqkcXMIa/MMXsMBl+EOWmtT9HEheoEMYoIAZ/cMGKMA/VMIzlOU/YMImjGsHrF8VoJ+c1sQLiIJyvcQ4LP/CESCBFNSAPxBBjSgBJXBAOFgAkgbouOzCFwgANghAEcAED0ACLwCCEBwAC9gBC8RBP+mAEqzWD3UCLFDDHqQjX/oDJpyCOAnJn9nANiQrBdwlC4wCOVxWTDiQjgIAOhzXArzDnprK/TlAnV7b/QFBA2BBHwjp0q1AOiLfQJpDDHRC+igBCIQAFwiA+j0KOXTABjjlkGSmAfBDCBjbP3wCAyTaApSrOeDGAmDAP2zCBVgBe9JAfeoJe76At57I/Z2ALAiAGJTAB/Fne4FhtRJqZphAH+TBD0BBMCyiPxgbbnDEG/ACXU7ANRzAEmiCAHwDFYyfC/bBVN0fOlTCBQz/Kl/qaCj+QwTg0RQIgB2AAYDChAJkw2WIAgZESiWQwDnglbj8gwOEwaDGlz/A0C4gZ1xpwRRIgRgKybh8QCBdAhWAAAhE6xowjgnUwQKEwZvZxpAoYRiEADnMxToYwQIoF7m2BBLC7j+cgA+8AKSMAw2cgEYiiK30jQkYwrhQgAD8BQcwb8txAD2c3E8W76KRQB4gbAxAwOVpZHnFBP18QAIYgyZogiQsgTEwyhJQKhI4DxhcxV6MSy38QbIOBxnAAGHMwRsAAgKTQC7UxAIAwd2MQ+cOmkREwZJkgw+IU+1SwAi4ASzKzRSEQzyIoOKZkD8IwNPsklFOwAmMABf4/8MGVEIdyC9v8EAv8IPrOqEBDEAItNm4pmtCkS8kIMKNNU4VnECu4kaMKgCcGcI4nIATcNiTMq8HkEEPlIo5AK5EIGEGBHAMCIAgDCxNmMMb1EAnvM1JiIMA7IEFzEErKEoc+EE9dIEIvAE5nMAAIN0/dAF/1gAHWMIozBwCL8NEnqtmQco/wB4KfMRxUaPVQjIoJIAGWEA1kAHTTQEsHAF5Bag7fIoumUkCnMAEGAMmYMIRmizX8cMmWNVccMEY5IICmEoloG1MhMFdVTEbVIITfkQYV1oOZK+S7gBL1EC/+islsARHzDGh3sZGFgMMXYcIZERzaBy5DManTAgy0P9BOWiALgABLVjDNkCqHbwCDlBsCzBBKaRCh6iGJSTAAazuVSzD1/3Db9FAWlJENivAcW0LwHUACvjDFzynAAgpqLgXFCTuDz/OMkbIkxamHJjBP5iBSlf0kPhDIi7im5UDDdyAyN6BplTC3S1NGMAXEPCBKqwrRUQBIqTipfhDDnDtP8zAcKaADEDJs5bBCARJewJuHw1AopoCDKTj4i6GkUirDwkQ6lhIFQhAKMREHbxBC7gDIODAJAjBK7CAMdyvODQAB8DAOyCwD3ydP7DBC0QB97EnUmdvHYgTPRpAGphBAhRBHxhHGchAOFiCOIxBpoz0u4xLLkHNLm0HBQT/8QjBsEZEZwl0qQlAwii8Qeel2bi6611UglF/QglEQSWQIud9glHnxl4IwwvswQgsgvDdZY9cwiUIrEWQc4C6nj8AAzbAgKb5QbesaKEeyP19nw95wWohwzcgwQAQAdKNA6W5wOg+lgiMwqlKgjusAyTUAvFCjg/cQUb0AgroqA6o5Thks/biYuL+gx3AAAW4AX8ihxZwQCeomhl1dTyOizdAzSV8YQ/IQSqcQU4gUjpYIyQY7zIOADv8A7G8RCWgH+9WQrKaqrVNM2SZSh18wlKecvfpQAO4QgnYNfMGkBcYg2LScW2cABh0ARFUA4/TA270r1ZANzBQmelqATLk/4E5UIAZdN842IA70MaQzMUAJIYBJMZFlAIJs7d7p9sGrHhaqh9Sb4D2GkL3TcA3UEARJEB7BWc4HMMPIBTgToQ5EMI3DJ8HwEMLJUAhfIITtMI/ZMMFQMJHvIQUTJU/bAImLI1O68k4YMLuisAnXAUmqEJCIcERsG8UrPgIuEMUzNZTyYEHfCHxWgrg2kAEMEMzaILQGMMjSIIdqMNKnkoU/EAnWIK7dcIK7IM5XIMkUNh5U4n6JWBNuEA7uMc6rHeStHelLEAFIgE1BGHi5sAGbMJcUAAMuAMQ1ECPgMoUkEE4wKyNd8S4DEADPKkHBIwcGAMfIIITsEAJvMF5ff/EP2jDLIQoCuQCTJCvt2BC90VgYnBcJaRBH50AJ2TcYjbACEFBcSxvy3kBpRiCOVh2MFFDP/SDJOzDfSyBALiDDtQhhkS8ObgCJbiadUMUAuz6EvgC0h2ISIoAHlAyNfy7fOu1MCxNJN3fKWqcd0t7L8zANxwAJwgACCiBde+wJVCKxAeTkLQiN3hBqC9vC9WA1DkB4yz96aVsXy7AHcBEM4NUjDKjAUhByTpAol+EbZxAYuBBA9yAtKog86IEBzzCeUFg0j8ONUwuBdyAL/yBELDAoBKJlYhL97nDDz2N46EGAvzDAcRApDeOPxDAJ9wFAdSnqSxC43fEiyRhB5D/QLVygQ0oCflYQR7UwJRDAfMWvRfEwxdUdrjrCcOZAD14gTjIASWAgGrUQCH0AhSYQQUagiFIasRH4AagQxJ2/dJ8/V3oANKh8LbtBfFHQbQBQRR8gbQM/bN6QQLAFzvbeMSX7wdkFzVYgLXdSZTp6hwQuRdEtiXEQx+gAxesgYi0BF1mZBXHuuXTvM0vwyj7gywAxABHPMr90wElzyZONZSAKGPJ0pQVxt78M/EPY0aNGzl27OjP3BsBXqh4oKKkQTUnfv5pEMAyxAATJvz9cyGqJsYFhP7VHJdmwbh/Qj+ty0goTI6Z/2gIEABqUQ0y1UCcJONhhI6eHrl29WqC/5w/A/6EejX7ZcUUDl5kkJGxAooVDMUkFfpH4M24cf5ODCCLcdEnjf5OCetJ7o6ovXt1kPhXbsaIFDkIfINHha0lDuEauBi612xojv5yXlwXA5YSOSapNhDz7waUFIj+5TAn9B2mf+R09iInlFwa3TlpCP6roMO/KHRgzPnXqgGlqg09eGnA0h9v0dszku5Z8+L3nNw3RoFyjJIX9WW0rBgB5N+BLylA7QbD9MhWpu0Gn0pzOIdTHDGhjjr+IYGCGGLgxB86egABHg5k8CKcFcTJj6yyyBMNPBMM+eeEHyihQg45lKimATma4MMfBIzZYzwgVMEouwVkIS27XkSxCP+jdaT4DiMd9nDCGNq8IYOK6UBIr5oDLPJuQw79uYg0E0CDMsop/zHgi2PCUc8LiDopI4UoTtBAEzsgwagdGvTT5seMxrngP9LQOUWWdB7zAwonKPBHgS9AaEAJCb3gABYQqPlsnPCi3I403rQRYAoSlYAHhB5G8PMfG9RQY5JSyFngjt/2WsCKxfzRkRwe/CnnjfwwQsIdp/b4B4gfyGhIiYaWpGKUz8x5lMPuxiN2MIwMWKMTiMKRASKJRsDjH3a8WYIFJpgwxBxzagqsnL3SMeSUX7xF5x9MfkmEBQluceecXiBoAAQQyFiLAzLigQEa/ZAl1pFgDj2pJBgSaAD/ihv88SQINdDYo4uMzEHVHx5MMIcNUVrVjg8+/DBDgDVuMOgRJagglOBLvPiGgH9dfnkjA5ZYARaIbJZoihhYguQVd+MIpZQeXejWnItEKegfHhJpxV0JhDDEGW5qAKEaKgylcIUEPLMS5g0vMkGDcMRJUgkPQPhmhBFiGJmHONSQIIhWUikhGwM0MueM3UpZB48dahBgBrt0WAIEs02u6l4yajCu68b/vYaDFdiCFtopjrFEgAPsroeFT9EQggUhAGmhBU9w0IUOMz6VQA0hujAnBCx+OAmEtcKEZYp4vjAKNMc5nGlYbmAIZ7qTDE7gmwciqOIfj1mgIwUE5ngl/w4c4piEhVfQQKAfb+BgXgQ8vqiaapOpKOleInhayvf2ORRqABiapZxyS46ZAgQViljHBEhaEAINn7pFM5oBBWXsAxhCoIUzhpCEDDyAUIWT0IQsIQMvXQMjVsKS+7gyJZAYRADi4AAITAYPeFQjbT1wwhciQI285YAPhfBEC/xQwxbQAhSQKJAO4LCEEdSLXr0yGSXI4IUEuCODXOPgEj1Clpqc4Aud0AJE1FM5WGjhfiCoAQSK8Iwh5GAIvxjCEEwwxjNwYgZr+EE1LiEHe01uQrA4xjx+ICscHYuJXRGKCSywJC+MyHwoQlsDYPCDPJhhBhQYgBQQoQBOAIECM/8wQx5qEEQUVeV8JlmLOJbgma1sMI+h1Mg4DgCDecQjHuFQJSxwx8rcXY4MDfjGD7DhFAHU4BsNqA4ZrkKJtYSDleqJxzzE4Q27+UuUZplJTWggsENRgle+IuQIfjCCBkxzBN/owTZh0E0YXLNslzmf1e41gglgpHfJVGd3MPIGBFBhHrmbgiqBOQV7wkIG+azg5NRDBl9ywFAyACYsvCDHFXBgCW5aJ3ca1SiMUOMLRURS8S51omrAYAQJQF4C0jaCb5KQCib0gAeI+EsYXGN9BtDQQtfJvnUAowErWAEqWQkLVU7BEl+a0ATz2VPcWeJ2BV3BMZSgAcF8Bo8s7Yj/XvZiiLIcQRLVCMe9KOGBXp1PiOPM6lVLQsSr9DQBETgBOmdCE6Wu04k5eQM3EjCFeRzjfqy0RM1sOiF9+hR3qLTECk7ZAGDwxCLpPGsHP4kjwCBAKgWdKgdGasKQilOkHuDl5LTAgQZ8YQLj8RZpBDtYJhbtYhsZgCQS4AXL3c+ec61gtFYbj2PINC0NWMIsPjQYHI3DAAbQYFJZytm94NEEUojAF0ZAidXCYguH8sJk2WLaKSx3BEvYhQ5EYIATrOMEhBDBG1TKW8+6r1smyO14j/kGa0TgESMQB4WAGY4p4A6urx0q8TTBjQHQAhpS0K8UdECDRawDu9sdrxIH7UsW8b7hDSIgxHUXYQMb0MDB1JjAPgQAgyKiEq40DQclYFADekTgA1L4BDT8Swjt5na33xVleA2AYAQr+AQxXgQNBjABBEhiCQqCgo6h8IVg0IMZr5gFNY4AiCOM4RM0oIE2bLAO7o73t4ZVcU8aJd4Wm/gELliENmiAXylQYxbbcIc7PvABAgxgANYYAzsS8YawaAedGvrtlENJNDjLqUplTceeydEts/DmzsaiEZX1QufRNI43eJSyoT/7ERoZlhyR3gjRhmXb7Ax60Hdk9KY53enRLNrToRb1qEldalOfGtWpVvWqWd1qVzMxIAA7\", \"width\": 135, \"height\": 84 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }, { \"cells\": [{ \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"imageString\": \"data:image/gif;base64,R0lGODlh8ACVAPcAAERFScrK+NTk8Ovs/tTPDtPT/uLj/tjX6Nzd/vLz88XI26Smqfn1j4SFiFNVWpSbq7jEzZiZnPbrAPTucG+ay3Z6hPn6+j1CSfr7/Ts8QYuq0e3w+lhaYHZ3eerr7WVlafP0ycfH7Zqjsc7NjfLrULm7x+/nLvf5/NHRrNPOLXSNrSxlmdvd36mssKupjeLaB2hnEtHOTNLPabbQ4uHi43mDjSYmKtLT1YmKkUlKT+3spuzt8F1haHqBP8vMzk1yrImGaJNua7KyMry9v7SwEWZqc+Pk6c3R1sPEy8DCxO3jAvv9+/b3/zI0OTk5Pq6wtfX2+P39+gkKC+/w/73Is9PU9quoQ8K9LlNrkpeYSrGzs97f49LU3TIxNU5QVXFuRdzc9C5NZPn53uLi9pCTmLKxbvr69ry91D8/RNfa3CorL+jp636BEq2QiLK0v8C/wqS2w5OVKWFdZG5yesy3seTfSKasw+fo/1mJujQ4Pcfb5SwxNbe6vcbIywtTev3zAby6Vwo7bOzjGPHy+N7ZJru7mc/O18La8Z+gmVVsQ/Tr5eLlzNbZ/X5+gWZ8psPDXqy/1rCusd/u9fP1/tXY1vj3+vPpFURajJWVhp+foyQ0bT08Bu/u9Q42T+LeY+jn6vHg2XtVVBcYGu/w8OLgjcDA5M/P6tzdtUdHLZi+zllKYdnLwvb49SEiJfL2+XakxHd3ZMnIzsXIxfz7/y4uNMzLxbu+t5KJhYWfwa+prf36+tjU1DY2Os/P+woYS25uctjY/qKeDvf39pm44Ofj5Nzb2dfX28jExYiOiLi2urW4to+Ok/vxHV51XcfCExwcI6ShcVpFSlpUTKe2nJ6y1GpqaitceNbZ7zgyNejo8y8sLE5TGfTz+ejo+9fX9iVCU+zu4M7P0QkgZOXn5h4dHvv9/f3///3//f39//v///v9//39/f///fv//Pn9/f/9//n9//n//Pj////9/PLz/uLfdj06Op/G5USEoTU8KWuDui5HgoebarW0t/////z+/iH5BAAAAAAALAAAAADwAJUAAAj/AP8JHEiwoMGDCAv6W8iwocOHDs0VLIfB3UB/5sqVc4cBQ7mEIEOKHEmypMmTKFOqVAmxpcuFEglqxPAPg7kdafzV1Liyp8+fQIMKFfqyaMOYAykqNWeBjBxK5nT+4+hxqNWrWLNqRWi0a0FzURvSAKCmwxAWFnTSpLm1rdu3cEF2LYr0H1gLxoaE84GjkYM5czp46eDDJoYldeMqXsz459yXBKPu6uDAho1WoqR4+ZCjUQcnNhqkTdy4tOnTXB9DVIgpGjZy5OxJ69C5QwYHHKrJ4dVgDWnUwIMvVv0QKdhw2shx6FABWxc09jjcajAnhxo0y8lY+C28u/erxB1G/z7R71cmbp/I0PICQA72Pk84OCH3awcUtt/z6ycanqFBfxicQMkCHYjShTbYYCMHB2o4kUw4CWC034QUrtRfQwZFlQANSVSTQyuyfUgOGjssVCFPGwlkkUz/fFRhhReK9xVDN3ghBzaz5aDFCS/aJRBYMcr4I1hEFklkj0EFedRE5Sy0zAcXkDFOAzdkNCFY77yjJETvEOkVko5tyVBdFizhDwsc1IAHBAu0kAB3qAEppphghjknTC22aOYyOeCBhywLjCOVd3LeqWSdPhmKIUX/+PMJGh/gAUcLyZjoYpyKzoloT5mOWc4SaWXSSg0q+IXDJxnxZFpYnR66KUutLv9EkT+jAIBGDU0A8AEfAKpaGquxLoQOca/CGqw5ZkaiRgMcYJNDJDr52hiwsTJFbLEoBevQKDg40AAaz6Jz6araxohttuUuFMsyDnTwQQdbzGIBfr+m29+5Jxmp7778gmVXkQL5M04sLmRRgQPLZOJBqphGZFym1LaEb2NVyYTBLAf08IIzBxNW007CsRqZXV2Z484JrmwgyRpbcAEBFxh+OTFqGp3QgjN/OANLA1L6Y0F+ETNUjiuSCKDHITNAksrSuKiADz5YWGNNGBk0sUcg1kgypswzn+ZPC9qw8YcEztRyH1vjBoeRJDOk8goe+Kwg99R+1O3HN3lYvcc3eDv/YU8GF3wThh+BzHBt16Y1+USubLwgAQr+LEFT2nFGdQg+dXeieRhhfNOEE4ELfkHggYeBxuiDB6J655AcjvhiHyE2jRDWfPMFES5E+9G40g7njyQrBOKHNXhEMEQau2QinxNonI7G4HaP/nzdWETw4CCuvz7cGo04k4g1OBRBg1qTe2Q+vXGx+kogr8ygxwasopMGDgA44QTg3/jB+TcXQPfNK3rwQJPupb2sUG4g5nAFH+YQByKEAQsigMKYBKIRRpWmIRqAAAZcso5YNCAHzctAGC4AgM6h4RuBwAVMLlRAxvgDAjzgBz+cwbkSFIdhpsFIRk7QlQRsYQ5NeF4Y/6xxtzx0wg+p0CELW3iVcpwAfQGzQw8I0AxnxMEBxHgJnN4CEyNhpCUnwIIaUKg51QViBTOQB8m6GDCuMVEoHTmIPyiQiBdkoQdxUMFckLK7Fl0Kio5Zh78Q2CiIhBEADtAfFl6RihloTSL+QeBc3mgVF/1MIVQIAxG8xwaYqUYm44rjUKwkR4iYgxNGGEIHGtAILeEpLHUJWiQpiZWPYMAC5YiJPw5whW9MsQdCGMOFkFIxOwGJO7LEyBoy0QA5LCMieIoMZGh5FY+4SJT+cIMQ2HABIrChHlvy1wFNkswurqONLfnEFhrRAC8YQWIzcgk1q6mUmeTSHBGABQEScf87Z4hhTlscySTXCBELuKwDgYFnPBU6z6BQBG008ccOXKACIXiPAEQAp6JiMs4M7fEiLTHCEbTglyGY8iD9GmRDtdIkOKQAGd8IhjOUoARn6KBTFJzJRCQ5UII+xAeUiEA1PhChh6z0O+bYAD+UcIUw5MMZEpDAC1Jghlb5q3wu+kg5jYrOh6yhH2logAMicNKjdscfaRDCH/4ghGY4Lqov8ESXgoVS1SBFYtkYAg4qwIESFceswdGIOVBAgKhKoLCGlQAhQBCTrSopVeFpbEuEsYMWVOADOGhJQAHL0qloRB3ocAEBaCqBsSVWCZ4wQ54Kaa89Fuohn6AEKx0QDs3/clYxKKpIOSywDkTwYBpXGG1iDSsIBpxDHWVibWuDhIEjIAGhv3DJZm8rFKW4ox1RYIc/0CEHKeRhDllwxluHawIdCGQJWl1ukNbQB1VyQAvSpS5cNDILd5hBF2s4ghF+oQ0piCIHcSDAeBNb3Cg8TL396UMaIlAEDowivvJ1S0dm0Q5W9IMHzQhCEBDRGinA4AUCHm5UBTEBMUgTwaoZxBOSwKxM/DXCimHKErKRhQATAQjLaAQPnsEBcIAgBsIdrhImoNo+/gjFRslGOFbphQdHBMbzdYfkshkHJRDgD2zYjBek4IBK+AMcQFaCiC2hA3SoY7UgRTJEoOCBJ+g4/7MvhrJb3KERfzQgGDRVwjaeUY0OSIEXa8DIOMIsYhOIgaMnVrNDjMCFvnihtnGW81bo7A8awOIFNCVCJxrBAQ60ghefiNw/FpGCAUdVCXU4NOUU7RALhOMIjfhFNdISaUlnxSJUloCY2fCNW5ABGY2IwINBpQ5Sm1rXqa6rdB3bn4iNow9v6MB7bWvrknQ0Ie4wxywaANXS5qMCxVjDKNyhuyUsQR2nKLWIUa1qH+kyvuUqRzb4QJ0P0LrWQ6mg9ip4mCX8w9xGPshu21GCHoj5D8GwRlWjGRkMkCLIp021RMrkb58+uVzC+EQEOO3iowCsJOYO+U76uDt7AhJbFf/7lMh327uoBIwFcui2BLbxCnaADKXweLiYhUyIdldcucUpFw3CerDxYUglIv+3kSu4dO1Z82dHEiQo/QFUhmTiC1HN2TcE4I929K7h9cC0iAkQAwP7itmtWgcSbtCIDzSCqynpiEcy4nKPs6hrrzXHmee129dSIgf0yQQOqhGMrLMBCzz8yIoQYg4xeOLYViaFhBSC4h2EAwlzcIAP4I4SYP3jBAlIwChGEXqPDIvhxQLWhgC1gAZ0oO0dcBfPjBeOUWTiF8iohhM+cOmxKYENKtTIEuIRknKAoA6QJ8BNPYrgIywgAh/4wGpKonofDGEBjWhENTrtgO5zIDDIiMT/8YQxwQwBJ7eHaRFMdpAEZrKHF2qghRrUoA1t2EANlrkMLZrghSLgIBbJoEpWYFhK0AN6IBU/BxLmAAKEAHlXQAk+Y0sfgWDCsAUNgAMfcAw69HEEIXKSI1j+UA5r4APY5wAAwAtOwAu0IAcAAAC/4AQ5AABdkAM5kAd5AAA80AELcANOBhYVZAE/o28Uo3K5tF3j0AK/4AX3N3+0gIJdwAtQmAEpiAYZgAZ7wAtokBwfEAFOsBwp8Adi9gL8wAQ5dXKRYQ460IDD9QcE8AUDEIK+ol7CkAYVsEomEhIUp3QLsQNIwC7YQYM8gB0dgAY84AVo4ADgkgO58gEcEIgZ/8ADKfgBZIAEG4QsQCgQHpGAcXFLc2cOCdAHc4AGlmE/aOAE9eMAKagN9mA1edAFTbB/TdAFTtAENhAJH9AFGQANlqAEmBYMcAAga3FtBHEOOhBip5Yzl3APnMAO88JT9mIMC3BZ0EJBCbFbU9Eo5UADT/ABGYBIj+gAGQBCGeAFsziLKKiKvNAEF2CKvAA4LggA+1cNCxBoqWJPjVFx/uABC4CKNpCOusILHNA8TdgEBEkLe/CK2kB/8acGXfBpfHAZDhADUoVpPWA4vWJBImEOUaADKUAAgiABKVAPLkANbmAHO3AO6OWMJYN2DrEFEGAEmQAYoYZmCDEr5cACEf/gBXngBV5Ag7OYAV1AC674OVD4hE6QN3mQgthgD+2YAeMIKRyQjhyQCe8Eh8KoFVEBBZmwGzaQA+PoBc8BhbRgkE2QNwRplk2QAXkghWVpA7+wDKLQCj1gCWQTBzAQBl6AA4IiEVeZFKMmA4QgATFgBz+gAaVwCXbACefQDonmFSzJEEnwAGH1AS4WcAgxLOOAAzlwARyQA15wAVYDhXvwhFXDCzZolntwkGUZiwRpNZ8zgxwAAHMAADYwlSXCl3BxGBFVCXxQDQyZA4hogg4Af7CYB3ugBlYzf6lpGQxJkHtwg0/gAFKgBlbAhj2wB1IQBgnpAAsgQXkihAq4CIT/kAKwoACHcA+aoAn6gAsPJi1op5JFsQQlYAc+ABgsEILuIA9K4UflIAy45Ikt8AE86ZloIH9peT9VkzdqUDXzF5Rj6YpdkJpqsJap2ZplOTq/IIpeoAVedgKsoFNa4Z9NQgkVAH+8AABeUIWoCJTGuQf35wRewAONgANk8ACZEAFksAwNUAFFkAOioAYLIAegcQUSoGlScIW4qIIf8AZRQRPJFRLIQgooAAQlcAh4IA54QAE/wAO7MHlpVhSNyUFH8ABkgANzEAFr4AGnlxEYIC6HsR1QkAScdgGM6ATxh4u2An+WkQc5IKPIEAELsABPoAUtsACZQAax5gBeOaFo/5mUOfALLXiCH9AHGMGJfZkSTgQgmeCV9qOoKaqWNoh/tMABDdACfXADRyALQ9ACmYAIiBABmdACykAFHTAqyJAPDtAFOGMFAAALt+AFTfiEspgJElQzJMEOygADMWALGqACFIAHl+ALuIAEl4QfMvMYnOACQoAJiPAFkSACXlABCmAEnDAsuvAOEbUDmYCInZkBxymLzdMFNjCDc4AIyqAMhLoAZFCmfYEMy0AGsfoEfMAHJTiWyGk/VYgG7EGLAJAJEVJMWOEPFniisek8OokGtMgLW9gHLECC0taTOFgN0iANQ4UG0gAEX4AKsiAHz2AD9vCR1QALJDACaMCQsv/oBEL5Aff5daA0JJ7gDCkwDcOgDz/gC46ABZowA2lBL+UkEY85CoXlDARwBQegAAoACdSgAiqgAdTwALGwEDdQDZsRgwaasLTQlQ2wAElgC4hwC8sAq7mQCfR5DIhQC7EQAThwqKxEBlogC/QGlsyTASh4Og4AiWrwAYFmhj4RFWnAAwt6iIFIhRirDQCAAwr2BsxiIzjwIC1TAJOgCIrgD5VQDJ+gAI3QBrkAAPYgBdigBDGQA9DADD1AC9gQi13whAXKAbFAk4khLRYwARuDAhrwA/uAB77wAz+gAjz0H5r1mExwChJAl5YACC6wDDfADsTgAUZwAHYwQkOQBAL/ypM42yClOH8OkAlv8ARkcAu/kAuUsANt6g8nAAwncF/+QA8F4GVL4AGU8AQVUA3LwAfh0ALVgAZYKIUX0H0AAJQcsHmXOhL15A9DAJbAiQYtSEIZoAYAEAEssGCd+ZYH0BDCIAwDMAAGZg484g8iQAsfUA02oAULIA1KYAUcQAjM8AU20IROEJRNwAu42w8YQRGgAqVM4AlKQAinUAUasA/7QAHigAW4MD7UeGRKggFI8AiWYAKCQAiPcAVWgAkLgAYNsBCV8AYq4AggxIJ2esBq0AocsABIkAmNQAZDQAzeYAAYkQ7pYA7cUACuYAbswA4DEAA2QTJT4A2xQCBz/5AJ4aAF3IgNVAg4MZjBaIAEQexHPpHCfNA8nrnAJ3qCGYADW7AF9DOVWYQABlDI/5AAwjAF3aBdFKFdPIADlECbclANQGAJXxAHf2AFr2od7Xi7XbCW7bgAiHFLuFSNuTQKdXDEIwAHGkAB6enEuHAC23FzWxIOTxADJlAHJkAA0zANIAYNjdAEchBoCTAEIuAIF3C77YixGhwBSdB6C2AM5OcPYNALPDJ3fcwN2SXIAbAdG2EOwIDHtPIGsdYCxtACHEALCduNJgij/YAs6HVJFlIOmdCCPNBpThmDh+sDNIADGTCpTWIO73ANhGwlCcAKrnwOOmEB7DAIHIAEb/+QGfaADdCQAjnwAkIAnJEgp12woOkIhe1IC2TQKOkHEvOiDuBgAlbmCQpAAVigD/ugCa+gD62zn1QsSMSxDk9gC3VAAhPADM6gAqVABcwgAYDQAKqbCQvQChnQALgQBs/wHGogCrxwfTiwDCUwLEyxDoN8AuZAE3zsuexgDgAt0BRRAGNwDtsBILHQwi2wBZmQAbQQyT3Zf07QAhhh0SoBFi3wHIXYBDxAg2WZCWvQArqiBYFWE7NQDpwQAFPgtCs9BQaAkofhD1xwATQwFsuwDB2wC3cmAV/QAMugDR0QDptqA/aDgveTgstwS8LIKAtoAoclA0gwAz8gDsS7D5D/MAMn4G8q9ZgMQQMLgAJ1MAETYALQEAQV8ANUsItX4Fs2AAAXgCAdgAtYYANSQA5eoA3ySAzv4A3AwHRTEAD0MNh20ceTMBXnMMg0EQ/lgL+v3CI2wQ5G4AZFUAMekAZyYAPNY4oOcAG0oA0LEIKenS0tYA9osH0p2II24AVJYAQdAAAtkBZ9sAWpggFQEAAGkCoJYAa2HQXoZSbZQMv/0ACxsC65gHXOkAPv5APSkAP9AL42UIXt+M5NcOI/UpOTIxAgYAIgRgp2QA3Pqg+OsA8/MAmD/Z9f6hX+gAT9MALpPQF18AZYIA77MAxwUA+8GAMNQOLP8AytoA1zwM79/90ItdWmsd0NTjsIIXAHVlLYDb4ED57S1zUABcAE52A+6FAJwHAHCeAUxlAODbCgC6yw1WAPNmBSKjGBRwCPMeqUFtwK1cAyOVANHhCC/+ABb5AA+kbg5/ARrmABtr0O6IUBD47Hx1ANkXAM2CAFm/AHcTAHGRGCy9CwPtAIyFmKtM4LF2BSSoFelIMi/6ADYk4I9VAIGjADAvADmuAI+kANCoAEQxAhFqdFdnECCyALnjABDMAAnlAM+6AKjZClw1AIV0YIyMADoiAK/D0bjiCjD4AFIawRKE2Gu1UFCHAOA8HgHn/pAt0OBtALS9AO6IUOFoAACDBAQ8ABJvUEav9woqboIeTgBDfA64rLIk2CJuPYgsyDBq3QAEzQB7yAA+ogEXN3A7LgR+cwBr0wCf5W7LYdExtkAAbADrGwoblggkQgCNIg7udwBwaQDOTQAEdABq4YySk4jsbgM3kIEuWgDugOYleACRBAARpwCCuApY5QAXngYq8FYY3CAi2A3gHPACMwCnqgpaFwCRpwD50QDGwIBIAvBVJQ403gCEcrAvtQAhlRCb2AAP+2BATubiBvFxCOiQgADOcQD4wZBWAADFAwxP5gCBvsD3xgP6neiDy26xqR4jVpJgnwCxr8Aakuis/0BLyACJNQAFPgdfOCAUmg4zQxCAEwAOdgDlD/YOw/fhGh7tI0EAkPUNVZQAhfwAnmcA7dwNi6YAy5fgMR0IT1Q+tOwAOhBoQpWY3mABCsSAl6QQBQgwcCKFB45UiVvkscEhjB4M/iRYz+/m3k6I9PvxGeGDAghUKdv2GXnvnCpQGLKBgvlFhZlkMKuS4filzS42PZJQUWswUY8G8JmCqTzP0zx63ApHP/2A0IgGEpE0bd/LnDwK5br0lLlmDAUE6Ygjk4/CXhlQEALwccujxr9K8c2XIc9e79Z8FCA145vHhxggZAKzL+MqG54c+CgQIn7JZzl0DWqH9kexnI68rCFARLy5Uz1+vOkiijcjnSJI5fHLX/NvTqlsCc/78E1eTcyMSLFwAnTtryaqDRL9+9ef+NqiehIKBMNTQMoKYKC4VDPhrkypjRnPKOCVrUqjeSJKXbo/ZdqnDpxzUHvmJKcIZpDq9+nMJwiCDCjqMtzMHgHG96kWyDAKZYqqmnopqqqu8m6WWQ7/wZpJcBzhGrHAuEGcCAQRroYBY+eEEDjd944ICWBfzBIDPk+PJHmeA44MAtAGwoLpMMWPDnBHQqAQYY0kbzhwUfXjQHKdI8A000C2YpYIpz/LnBDn1W+KEQaY7wh54CxjDDRQtc1O2ICJwAAA0nMnATjX78WcKCJWLcaDSmmHMuhREWiICaHy6BRIAknJDije4sEv/tRb38SaMFFEQaaYQdjBRAH018ceQVFXjJg4gXnAOihhYiKEITKXi4hAs5zVgCigAQOAcDosxxh0GoSKMqL3Om6IUJc4LcrJ12xsKAlW6AAdacRopbQA0AMkCDBzRa6aIx8PgCzx8aOOBlMADCpaUDj9AoxsXRMHDKAGM38iENjagCForPQjPKAiaAoYepEuy4xw8NMvnAghMKMKBMDNzJzB8oPpgjDRy6WFO4JgL7xDE7+TInAROUeIEQGfjo75VUIpBCCnuGSFQjo7Jlio8kRihvJBQGuesff1RgTxVNDsHBhm2sIEAJZ3oAoppGcLgECxHgyMuCroai0hTOXnT/CqoXdyXNAGBOQgcYBCyIxx2xhDEAgRNmNaeSDlpchpZoM+DBgVaqsSrGuzCwAOeIAfggBwBygKuSG+yJRc4XRztnXQHvgiKJUfxhIoBuNjZjCmDSSccv0JgwwwIRRBjmnkOe0MKfAsJ2kazMKvoEDWTS+AXuDEwEjgwLXLaTV3As8fgFGXyw4yVRpLBBlGoS5ahOvcwZZTwZGACBgXpOgaejBrDYx5frXvmFFzswEUImAqyooYM01FnHDjhmmQW1dQo84RpG8lpikALoWeqcXY1ixAB2rAMMBWDCP9xRjiVU4mwWiALz/DEGL/DBHB+QWAZykIMu2KBFujMKXvwR/44TCQYNOciAE1hggRw0YIBQyd0SyjGPAUwJHWTxxziSADVGeIMdULhc5tIhjHncARjuaMcGVCAOcehjGDegAQKAUaZynOAueYNCAs7ghRbIwgu/YRMvCpMEf3AwRhhQhw4E4RxC1AMFiEDFyU6mwYpcRC8u+yCkJEUSI0xmLZ7axyt+4AsVaGABgzRCDJTgHCt0QAQecAz73mEUdAwiAAYYQy+scr/8mWMJ/KvKOdxhMHaAIUHrGM2cEIA2sVilHFx7Agd2sIUTsQkNDsgBGnYQRr6UxSoNawIPPhBCNWTCH3OYgz9GYYr8RWUyuoBMAXNnjhs0ppIY4CHmyrE5dv9w7RxRUIA+KLCPfczgGEOqRBgTZ78OGcAAbsiBD1pguzYBoAkdSMdSMjbHKA5EAoKogxofQYRtFE8KokCUOQw6x+ZhIBnKCMlIJjCCDdjFHBaohgUvsb1oOEIDNCADI0chAwJIQAJXyAImYpEZO0AiWF2ppAECQI+o4E9//+BfL8pxjklUgR5UGYCAKuEXBLBLk1Y5AQICwAnF/MIfLYBbcGhJjgjgci9lKYc/+tAFNAxmhF1Qagu8kACLJMAUGNJQZsphBidiYAnpiKIsPECPBAnDDDHEkz/Oxo4oiAAPeKDAMCBRCgKuzi5UdZETmeCPRvwiAQ2QGBpK2BYw3pP/I+lCxwlQECp+kmIEdVBCHIpHhrvd0x9rWIAsZDCBkXjiBlCo0BAyYKMm7EMDjviBJDQACcegAx19sMIhX3AFIDzAA+9gHynFUoUAmKIb57AA/qBC0wH0YhZT0ekkv6O3EwCDXVTNDAImdI5gdUCYv8BqPG2AhsghhzQW+N4cOGCYaG3BA2gIB7o2NtaebqQsFtBu40abBCjQRq50RaA51OkPRVxAE3t9xQOMwAR24CVxUpkE2Db5Dig4IBk08MIIHZsBWlSAKXi6Z+6s4g4UEGKfddBsHQQRB2T4w56i9cETUBAD1E7gEVvIHYeq0QQHoIEWHPiBJn6gATwIoBIY/3CfOapQiFBJgABZQEYsZpHSR55DkpNkrnOLVdPpGqAXVfCGOihjASHdYTRrxoB3ucEOrvhjCxygAQsKwyYvAEAULdBItu7yQTV9IMhesMEy/NGB4pi1IsI4gGkifJdXFeAOrfMHJcKBgCpAIQrR/U4lZoGAAbDjCJjiHgWOEQW8rFlh7NiAwUZMmic4AAoR6ALg3KSmxuhNjMgRkAxCZQJPkIIUJBBECkAwYzsJqB9vaOgETHCKAWjEH0jIgBd+AYA8ZCAMGliBONpgBw2wrCIGSAJnJaAEIQDhCZxI6Qz/MYZY0Ql/rnBQdNFhDqMa6DusSHNU8NTmXrBWl2WKQP8j/NEAWqDIMDb4Kroma5cGZOADeV4TGjwAQkaSxVjmMENLjWIXM7SaSkSVRaNdsele9CUB2aVHFLSHh+sYYhfryJ1ZN2KObhQgQ6NBxwC064VMfKKWJGwTLYqjS8k2Twwj+HWwhy0IExxbtDR4AhWixwASEKAQXEjAP04wu8FIqy2O2AcW9PEDU0gCCoP9tCn0KeUskCENcIDALN6BgV78qrlPkai9y1GAAGyAQ8LgBjAyRBYLmCO7BSinLo00jhzcIA2FiWcGbICoKd7JUYb5RZBzQAu1VIMMG9hCO8h0AqtEIRubIQ1Z5prMvIwCCbSZSgH0BgUm9AIeRtDH9i7/ETAPzLBd7ECHEzewPyY4kRsfdIAHyNCENUnLCc3/zq6Rk/hByEAJSgC2sElggqhn7DZ9eMIIojcBZrzAGVeAhQoe0ASsqoEWvLDBB+CACzyIAxfXwIMkVkcWb/CGRTC3F6AyNxCBoPiHobiDvcsVc6CKXgmAMdAkVhgEwzuHp/E6YCgAC3i0uxAQFtiCBjC4OcAGNIA+J7ABchEQRqmqBaCFwQAc4KCBG/ACKLiD5NqBJRCQWfA0dtiBXkAARlErriEqczCCMwADf4gh1MOXAjCHB7gECvgBR4CEJ/CHJUOgrsguYEgbDbmDAvAGKPAHdPCHX8gEI8iBC4gbXmiC/0gII+ZJOpv7qBeAunogBR34PhMQA2RrHih4giEohPLIsTpghmDYhE2AgTzYAxvIgwughV+IAEfQEgqQg99zhVlgsru4BgRIgHo4o98CgggQLoYJgAIYhKupt17wB2B4KQtghQ0ABioxq3PILkawirJgilnwACQwBG4YhA9IAx9oghN0i4SjgTBSDnNoGF6oBg4InC4wuEgMIyZwKW8YhHOYhSliB07ohS7EQDQ7pSnyhzdQmSkgILGgBwTYAArIFCkUgV0II3eQDHaYBIMhDZxCgALoBnbwB/exKjk4ARxwAhI6ESeYgwmTw8nIC3DwNSXoJx3IQxOYADPow43glv8WoIJHIAVnswRBIAGSYIAJqINgYINg2AY12AMHICZH0AdVCAUc0AcjyAgM8AYwUIdFIIRDKp9GIIOuM4VYgYIGsYopiJUQqIITmCtg2IBZKYtzgIIh2UGyuA0oMAQk+IR3KMMIMDQ5IMbfcAI1OJ1GOQIUyQEHCJwmOAIjaD50IA1zmASjAoPl08ZZWIdRqAJlERALgMo7iArn4YMEAJNBKJMpuIMn2IcpvARqyATbQLzau4N2GBswDBt2SBdVqoY+CIfAcSzHyoEtcBGF3AtzAIdHkAkW0wEGqIM60AEzMLO98Ich4INCwDFmkIAUiIE6SAFCIAESQC0dqIcYcAb/GNiEbdgEB8AFFeArfcABMnADQ9iCQSBDBJjAUfCEUEE3ICADY/AGwIMMeqiTcyjKEIiVTdMXDMyMc2CCAgCGJSAl0vgHGkCCGyini0yDarCAF0QRN1GDDpgMplCMIeOAC3otfyg4dKFLc6AHYOiFMTiBdZghdkgA7qSHddAbMDk8f5CFBcAcekiAc7iDAdAAd8QDOzidcpgFdMimKQEvBZ2SeTCONVuHAm0ADPiluMmALrjC0NSYRYiBOjxN4KwHcFCYRkmAJ0ACQJAAIoABAlgEEC2GU4AGGICBOPCEeojICZgAT8gCDqiA5FyBZkiBOOgBo0maBUCCUmhQd9AB/xMQqSlrBDtAAFHqBSO4gQRgBxw8AIPxuUmIgrxZnPV80ErYiFHwgXBIr8RRB3PogCSYLxQhSG2wOIzxB1f4gG/hAcHogqiSg2SQsYXEgHubgirYjBNwjHMwmylZglnYtExagh2IAC5AAHrQNAMoBYa4BE3ABbkLFnb4NGBwhQiDDAOoiLbkLnZggilQAC94VYK8gBHKA7WIwx21i384hSuoQxIQNhmIAU9YhP/0Bxm9gY9wBiWAASnoAhqggdvwhyJ4BlqwAW3Ih20AhEcogzKQgRFAgSGAA0QABEHYvu1zBiIY2DgAAmiYhhKwhRQQqRcQAjKwg1gIgV7IhAUYB/96yDtOcCIEYIJZsYt2sEcEWAev+w4WSAIaQIfJOCfFMLQiMJHh6AIkwKUaOhEOoCXBuYFxYAyLYIdgKQfdQqBy+Ara0BuaE7Oe6hAhOgHFa4ESkEUoyCZqwFW+ooZcaMJ8QZtzUFB9kbEokop1OAHMCYFSOAAHSIIbuKBwQYMu4AHWktbQvAsUu9aPvEMZIIQYEIAj2coGwAEWwAEiuAIY5IVwAKvRAssmoAVaUANReAAFyIRaOAUXwIQyIIF+ytIs5U1myNzfIQAiEAIhcIYXkIkr6IAaKIEC6IBq2IEF7QUh6UKoKSUwQQBVPVEP8IEbYAUW/AdF9Qd22CQaoKf/TIA+E7G8qLrIJMgDL+iAC5qlcsiEaniHnb2I2wgW6A3aXtjHcsCrr2BAYXgMBEgHdwiHAwgBelgDDGAEJPuBGTgEEViGn4qhO5gHdxDWMkSHWfiHdGCCATCqUlAAQ7iYvT0BHggXNwEAL/ARt1VIDlnGEbgCAjCBfhqBGJCARxCBRkCGgiODJFiGRugHFqCEB4ADSXCFaXuGlLQBxFUDN3iC+hKQBNiBGyiEEXiER5CBeuBN1BLJy61NkVICAgBdZwACHCgBHEAGMDAFQzAYS6qTu8ja1NnBSDIGH2AkGQMvdrCAHcgGA7iGsXoAGjiCNrEdG1CqsvAHMoAbDhgM/yeQxqiahElgglkwh35MFAyoJJ1L0eiatATSLthUgAJwgwY4gAD4AXFYgVcYhgiIhEqIoQ1gB8wBhknYWa+bAkbohRAwBCPwAFZ4B+h9g4BsgMApIbdAlGlFKHPwgEK4AkL4SBRogR7gBxFgziKwkbjggbnBgRmYgQdohGSAAFxIhVSogZrlAGVAhDU4AXeAXumlByNYhFMYgTJQZUIgBBMASfMgAd8hAAIIXSvAgQjIBByogExQgBAwABlzISceA4ShgXCgAZE9gZ0aA28YkiqoAgS4A3pggmV4gh0gDHtwAi9oghy4mNtoADX4BUwVnEiwAA7wAdAYErBRJxCdgv9JAFUZdQx4k8UowB/OEAaonIJaeAIDwIEOqNUppAZI0IA5eAMncoUlgIw76Me1uQOjCoED2IIE0IWNSAcX4pYc2IEWCGXH6gJhsshpPeURWFgCgIVliIAn6AAvEAwHKAIH4IGovoCodgAkWIBPWAYA6AAcwIFloFgyiAAISAUReIMkMFsWYIFPgIIl091JyIZwKARAkIErcIZq7k0t9YRHIFchaAAyqIEfwIG0GIIbWANzCM9eAIN5OEIkUAB7RgBvwEt16oYpsIrFPocqWQAcEGAvKgxihJeNoaC4GNAb2IKGE5ATYII3Lsw7UKezkegBmAIwOIMAqAIWMITNqIT/BBgDYNiCZEAAEUCGbgoE2YIEEWiBIHQHBd1YF5mCAqmCA8iGBCiTO3EHIjqgE+CAcPABwVgTEsIBpihl0dyYMniBYOABRGiAAS6CzisBr6qGqXYA+4ZZH+gDLzCeZ7ABJ0CMN9CCV8rMJOiHfhiC0EkFOMiEfjgGN+ADFhCAFuhFWSgEaMgCIUiBOjAB3/kDAugANbCBPVjhG1iAFuADZQADYAgBU0CusdKuAaCHSZAizlYvf4iFX5iERmgC4UCRLugDixA6gI7qcFmDJOCBuzEoJY+KOrmNGWKCnRqA2F7QACgFiS2Aa8DtKjAEbzAFRHiAs6MASMCFGqiCOzAD/8gYg3mYBMhg0GzYQXNIB3kwKO+wCPEaBwfIM1GeA9Yy771YAn/IBmioAFxoAC/o0jlQEXBehg/ggEZIgjkwywgwAhZoAOOhhTZRg35Ya3+IAnbgbH/QhSjYAEkodRoghi3Qg/XVA1s4hkhYhhLwgQhogAiAhR6wAkAQAiLogFZ4BikgA4r9bhYgZztQAAMwBRaohO8YC165mTvJliMpgjWIAB7/jQxQg071aQCYAyLnAAxYgBWcoxbUvAWhKX87gUEQpQIAvCoIgRAAhhLggSLAAuuwgxlwg1sgBp9jcVM4gxJ4zlM3AmIYeIIfB4KngS2ggWKohEaoi4kDDsPggf/08nO9sIB1YAIjMHQeqIFfkAMBbQBKkIVGeIMIuIFaeIA8a4FR4AMvEAVayIALyIMbaAEcOIMzQAKbVwAF4IIDOIAx6IYBqG2hF/puMARDIAYa4AMueILoqAEVEKiTwQRMiIBcONP+jYWxZqRyV3KMmF6RvTl/8IAiSIMnaAtivPYW+aCs8vhaSh4caAQO8dSDKu+FXDO7Hw1zmIdsKAVTRIAteIMzFoVveAV9+ADEJINkAMoqVy4WOHWELwbIj3zJh/xdoIRioIQEwAGl4vYcUJMc4IFbovjliYJ1qIRMqOoKmIO4SH0eEJEPUIYSrwVOKIILmIMGqIAkaAUbuID/C8gBFmgBLqCHKQh64i9+4wf6AeiGMfj5N8gE242ABeCDBWj4qCaH4mkETGiEWkiCFkgCJEDs5l+DlRn/iyiHBrgBtsDRcCk0ixjGD4DqWiKXDkiMMuHdfvz0KlFyc5BR4gOIdf/K/VtC0J8wQ3YCGHAjyga5ORTwaPiBi0yAXiHADFpyjp2/j+c+shtpkl1JlCHN+XtSzV+jHF6coHECYIu/fzp38uzps+eSKJ+K5ODAIYcDBxyKcKiArMGHcJVyOShC5sKFRoMqiAKAxsGaBThRki1rtqS5kkssLPHnAckNY5GSJKlQIdMvcnukSLMVKZKsN3y2WPDnL02LBOYG/xokyNPc4nLlFvvD0EAWlwv2eGVwogaH4SS8cnzw4iVDA3+/Ivlj4vo17NhMTpyQPYnJpAGGnpTC0YVcxB8r9InAsexBrFHmTpY06fw583P+hsjxhwxpBq8AWOT86f17uXNmFnjhMARHhCcV5vDAUqRIBTIVcHzg9evEBwdqftWwAQAAD6OI5c9ZBZY1UloqWRDOEEP00wIOjSzDgRQVhvFAPxHQ5UMlzfnjwxD/mNNOO9CdA5lJ/0TBziyN2GIIGvZggwYAajTAkhY2FOVFDk6AVs0TkxgwJJFFGjnkHUMicGQVpiQzhBf+VeMFFj88cMsvuSDRzR1dJuklmGGKCf/mGXKUgwwADqDR2U3dffdmT+Z80sEFDXziww0RLIBDEVgYxcMcF3hRhBYdsLKATM+I0kQOF3yQwBMHDDAmpWJy2eUAZ5zRRyYR4JAJGVh8E8Y3nfTRgS1pnDHGFK22WgIYU2zgKq211oqDMrHQyAtNrTSCznQ2OPCBTBmA9gFrI0UxEjvLkVRWFOskOA9ZwnhQTCaZ3BCLPTb84gU5anzQCLlPKGAIF2CM0c0AUwzwLrzt2uoqvPQgIQc6y6TZWRNOpOEmnHCW4w8L1eRQQQM4DKFFBBXwcIFSXgBaBA81ODBOH0jZ0EoXAFzAA6SmJHkkySUPGUIIvZwxhBsLtBD/gTJotMJLF6K0gIwtPpgCDM89VxFCz0ELPTQCONiiQA4AcMaLDY2wNEQX2DhgWgbI+INsSCYtARnXIi4GmYg7pTOwnEhwQc8O9IjgwC9yyAEANrwcUwklChhwBz3lQBvFPMweiBLXCPrDBw/+4GCaExlkkAMNAAf8pjnGFKHUAy000kEHcxTFgwNzVNWUF8iuwbkTtDCKBg+uDAjZgc8C7uw5OhkmDBchIHBDEhG48akWynxgQxcXiIJIBLawcAMLYBOEzhA7LDGQTyRKr5M5lVSQBBIXKI0GGjak5k8SraBhsBcANOJPNQv4YwAC7bsPDCOMwM9IFd5Ucf/99ntj/wrKIRTQi0ZCIAI0aMMBSltGXDyAgW70ogAIAIYBpjAJDICkHFvjGgYNY5h3GOYJv4AJ4mgGgHE47nE/acsbOoeDPCxAGBGYAwcGlQktxNALcujDEBrQiDPMwQtqaEUT/sMBV7RgF/7g4BE1yBINKhEywErADUoRgAMUwxZaeMIT3EAGMkRAC7/4ABZqgAhkKOAanwhHMRJAIMMYgwWOWQz1EgTHJbRlFL+4AR9o1C8ntGIZhrmBNpwQwxygYQ4waQQTDNCNRd5hkY50JCd2kA1JTnIUo6BBFkNQihB44wAKOAMSfhG1DJAhGYYwRjh2MI8pFKBdd0BAASB4ByaER/8lYPPaP9CxFn9kogP+8FyPnMALAKyhhCYEyuByUIQNFCEDjYChF+ZQhF/ggAd5EMET5JAELhCLKV1QQ8cAkIMd8OEGOZGM1zAYp8n4YxRnKAUCOEEDLhzAFCsbQgQysYBGyOEDHcAEJrQQggAEwBtnWEA4dGGYUSTBAktkIkSZWAkyGGEB2WkCGpiWCcNQogvaSFPSCkeGaiznLBGdxxL6xo51MGEKVQhAFYAxBnpAwQID6EUABlDRTHABASXIxQFu4IFRmIGVAzhHOZhAj1c+EAEDoAcGFvM8nZQDA7tsQGomBwAnOKEJHFDjMd/UFi4cxQjZy0ARHHEB+WSABxz/uIAP+ECGRrzBCDUojxO6ELykraEPffCHZBzTk8BioLDrWMIWUnY3nsHyDC3ggw+eMARlvLAR1cDEAmQhiwMEwBQI0Ig3BsCEUYTDgusobDnQodrAouMf0vKHMebgigjYhFdOsAFr/LEFXqjBCw7IgUwSoIUPLE+1rY1TszAwiW48sBRnAEM3KuE1dSAgACUwhSluEIlkDKKzxzCFAQYx1HNkoxdjsAAGHLoYenTDAIyNIAb0xo5/tKMwc1jACXhQPmGqgQdQMGZYddIWIxClrkVIRqByIAKHPcC3ZOCDByIghzW04AI5oIUNmgAxf1FCCwDeCUtihw5uXGOgAQiB/wJY1cktLAMHFbDhf3KAiF8sQAuUSMMawBAATnignqXohf0m+Dw4UhWd5XDHP/xxKng0gntdoJkakmCYBHhBFGjgEXBpEI4cQMEcgX1jif6RGwPE1ABjSEIfRtGsdLijHZMoQAiMQAlgnGEwLWBBAUyxBUOUwgD+QMcJ/lFeMHCiEsKoadaSOoX28ewOA5hEYRLggBukISk1yQAtGhC2AP/EAv+AAhnQgINKNKIBS6nBAxxAhgcUJQJpOIIWFkAGzn2gCXnIgxMcwAs+fKIF6BDs11hnjhNsYAAGwGlnDXGDLSTgBAjYADvQIQeOiVMa0rDhG47QDxYkYGsGKMAgaP9gDCRkMgAFMMCj9TYSOi6hHe6Irz9kjZ8cYJq3XTAnSz5gZR55AQ1IGEUO/lXVC5bjBFNgnwOf+g4P1IIFnubJTU3BiQQYogpu2MEYTPGGzjq8DyG4wxJmEZ4NVAGAYOCGLhKQAGEsoRIWmIc5WvrKRnMBAKMYAnYy0AQ1tODDAV6LOXxwlDTwAAByiAAcKuCAI9y1CHMgw+Sg3oRGLMB0t3ZAHiJwgkwMQoMWtAAUBpENb/CsF6bYZDyhoEt2MAEBU/gHN2KRCUQoIwoJYAElbNGIX1AiCTQgMiwxIKJxLKCchngnTN2OAXVwTTKzMEcDtLCGqTlBG13wjxEAazj/cly5WBHwhxzUtwR2nMDYwHDgGLgxi3n4Awo3OEYxqxpoDBggBAcQxjvWcIA4+6MKCNhCAM5AwlEoIKfDFjw34FyFc0/ieQnYgcpHIYwo+KPl9BhACzjgjwhQrTNqSIbPw0pHcyQAGRfgwAe4gAMOiIAHmUiDHWjNCzSM67d8WECGbW3ACrTEGAnYAgscQD2lDAJAVyUkVi8MgOChQ4fQAwLQwzmgQwTwgQXYgi3cwA1QAiXQAAuQASWEw8cNBEEEnpKlwQ4cAbexQDgggQIMVAHcwRScgECUQwL8Agv4AHB1AS10QSv8guANTDK0AjbIRNJ80DJ8kHsBgzdE0Amg/4RBvAMxvIExOBQGnMASsBQwxNkSoMM7sIAdFIA6YIApjIE5AIMdbAFkeIACFMAUnEN8nQMUAANHeIMDTQJL0GACgJ0H7AAUtIWE+EMH8AiujcYaeBmnndD4ycIHAMgadOAD3FELFIGo6VAabAAOAMAcQMERWB2jmIYr5JAClIIUAQMM2iE7JEDtIAATFBYGQMEqqeJiQAFqhIMsJAEHdIEtUMI+5aIWHMALIpWXPRAL9AEGtF443MB/VcIo7IAReFLKVIEBYEAfzMEJRMB/dEET8OBGHcQ4yIhpABcAnCAA9FQ3YMA6UItOYEA6WMDrcQJgWUA5lMgUaMQOsIOnVf/CArgBAvzDCYRAN/gDAjyAOUXVOKyhHcbXpwHDPu4AGPSC23lEZLhDOVRCAoyCF4SDB8iBAXGVDfAA9ByiT7TbZECBG3AALXgBEjxADeDAFuCArPGCH43CHOSBA/yLRWZYHqABB+RBLKxBBNwNE5iD4EGGBRhBytwBBjDgCVjAOrzSCcSOOaCDF2jDAvRDMnwAOXRAA9jA8CTBEMQCPbChP0DGCQTfJ6yFiNBAHxgBS6DDLBzW/x3A/dRABKQDsaDBk5lOOLiJBXzARwGXrvGBOuSAhwllYEmkOazBMdxAfMGj4LnDHXTWf0UVFPhAJojMEkyC8fnUEwBWVBVDKQD/wwkIZUHEITDMQhSMwjX0AjAMQHiI4MAInTq8QVFsVQZ8Rvj9HPVAQQSgwTN4gQjMAR+4AQT4wxEAQAmUgAEVgQm2Qzl0gA3gWgaoyectAAkRhGSYA+3YziS4YRWOHvvM3hIkEg6QQ1G0AgesQSZgQzgkgz34ABJ4IBgUwFKywFfyjEEUljlU5g04FEEgpjkswQ58gA/QAHDlVRO0ggNAAfSwRASIT9LMxPlglT8sJQbIA5JhgDEcAzEA1rtZkLPZnn+2XhJsSwKyXQDQQxQggCksQ+ZJxoLYTiXEVzmAHc8wATuk5nySYlRVleGAxjL4VgZAGRJUhmCB5E+Yww4g/wI24IAI2OAD6AkPZIAX3JqrCQNlLEAXJI4T8AgPnAD2+MMsPB46rMFADYAFoJdjsAP7RJU5vlkVyIEoIMMu4MC/QEExsQDfAQDH8AoOyMIQsMA5nIBCzoMFxYM5WMAuHMMO5IRVLaU/hMMcmEMLLA420gI5kAFgOUakdoE9RCiPkNaCloMwZOcOLGYl/BoGIGZYxtk6oANlvsEWvAESAAM9sAM9BEB3GoA3vMEbKMZaJISMxldhCQMsBeU/WEACgEFMzZI/JAAH+MAo8EDRcVXHfAJgIembTIYwZEJwZoIC1AAQ5QHEzAEandPAsAAa7EEeZAcHoMER7MAClMMs/P+DMOweMBzkP8RXtLUPVbGUA6mGKBzDJ2zBDhBEZGTDAeDALziA29gBGS7GoDrQOliAO6zFwh0DJVChBZyAPzRAJphDNXgFNgKPD7wj9bCCA0AoAMxEz3FAzxVjJYTDGxDDr4mgpw1AZzVqYaEDFCABC+xAL6oiO2RDAAQl+5ygD8CjQyUAEjDEP4hcehlrAdBD1KKD3TFrK7lB4fQDB0ypzqmB01jQkWorT1iQORjBAxTBG4gAU0RAA7xBGvzXO2YnFNQaACiOAaXGAlCCP9DAQCElK+onBkCQQVxhWIIBSMzBM2jBKLTRYkhkOXDC/4BB4/jDm91B7HjamxkAUln/wIyigzDcgA94QGWYwxbwgBH4AJU2wQ4qKINWlYBtHzlkhzgVhT9EggMUhhEkgw8IA2AZREHQXghwQewSRAIkgcP1ZPssR0M+JfsMQhqEAyUYppIiQS/cwUSeQFVZwLdNQWMk6hpkgwHMwRNYADRlQB7sAS1IWdmarU+cQAKQwTLwATIMASW8wQzJQhpwWzFGRks0QWc4wY5sgTHwFNDQwxKkl5qSHgRR1TlMQi+AwTr8mTjVAjtwAVvua1VVQgEGABgE6BIYFVJZ0Aac2zzUKzqlLf8WxjKkxhxkx5Px4OdR1eymgUf9x77wgT8QpgfwQYeagztgaDxOQhZuQWMU/yMUKC9s3QA7tM+JXEMVYMA53AEjnMARGEESeEBkyIkCJKBjzsJafC87VNVBRIIXmMMQOMDDWGsODEJkwO8JweMo4IAWkMECqJYFjAILzAAkLMDCKAMlrMEo+MM41EgTaBgPoMHn7dAUCF56pVeSMQEpxg4VJ+461CsUZFoaGQK2km05QAECVELJnUAUmMEIt5JQxkM7nPAYlLFkrOp+hgMNVJoBL05X7VwTcAc6paOX/YINoAEh9dsH5K4TsEAlbCo8EsQ8hsAaWHJS/uy/JMCvJgACaK4/eAMj6MQAVAEUGPAnIMEs3OzfriE9GCY/WgADDQCbtZkwqEIuAKJb1f/E5W0jQsrxYE1GGuBACdQATqjXWLLZKKQBmilDC0AADTRAj/yQ4gAAJxjDvM7CCVgVHfkDK90BLJ/DPIKBG3qsEdBCLLxBMRhCMRWETogyBgxCCHgurEbBALDhfP2DRveCAUTbP7gDTi+BO8ADB6RGA1wUL/BCVo5lTxSWPxxDIOnwTLxBD38ejQqeBUSmKSgGQRhEJSCBMRiGD6QBO2yArcq0A43ETUHBKPxVOAjcvv5D3eSrG+4rBrh09i4wL3mBPyDBsPRIBnRBBjSO4OFzkpbDA0RCBIiAPxzWYyzHErmCJAiAEfQBGSiDMnQADtRABnxeJuwlHUUVO7z0URn/1kafQ5pG6i3OwQxQgiEohwWdNAKkV/FNgTnMQiWYwUu79kDMdDewQxXidDH2gQN4wBYszpBmow3spU8QhAXMwge0gjgJ8wW8RBJ0QeNIBhwiQAgYgzDAKjxqZxIYwzuYA0NVQhTMI1TT9EjM4yCUQyzsgAUkwQ4MBNP6gO0E2pdFwQbQtD98Ahr0gTnAkAMkToL6UTq+rxyzhDE8mD9Xxk0X9QpHgUJVQgc4wQf8wgOkAhy0wCgoAzKMAiuwAoHMtpeVwzrM4yvL9RbkwDPotQqMgyEohkl/GgIEmjEAzUTDtk1VrVSdg85mw3wdGfk5QM/NARpcADYKtRxElU9A/3Kw2IQ49Zv6dAAHGMQ5tKrDrQN2amcfGAMrxsI0M9dkuAJDlESucoM/UJpuESNBUGYsBMBqu3VhLcEJT4Ec8K1SXEBO0oITNA4H97JfJ5kFiIC3qk9B4HQ+G/laDEwsNAHwgFN5NAALKEMk6IEAnEDtccHKmUF4m5dQwqo/vAEtoMEvDClmsLhJi7LHsgAL0PSHu9xLQ6BOVHEvZIOhpgPkfVA/1BYv5AEttEI/AFjPWkA1kAMBL3kOsMAJiJo/RKYCeMA7iNwsRNV6V29U0QASeJkoG4CIqHQ3jESu/tca+IDg9YHfDq939wFDxI6RUR8O5IAFkFUMCdMetAJoGP/Zw+15kqVBDfBBDTQOUw5xPpsxjKrWHAQRGuQBr9jAEPASHAgAIxSADyzAGyQBBByCeZlBl2lePzxDDpBBHohCJHyCdEFyKL84waRBNwTAFMAqBsT2S08CLKdDZOp4vHkBH3NPXuWVKFSDkX9HWxwDL3xq0hjQL5hDOKjBEyCA8SYqWu5rH5RWYCFBIf6DLrTSfHFCCAyAiEjwJLReHyiGBQyBcgxEfI1DLGRvCcPberKAKzg5B/CLjpDQ2eIzWg4MBuAAF4kAO9CRGXvHkaZrj2DF4vAKIf/CzrC8skrCITDEKPSDLMzADOBYI6jB4ugk8MhCZeB0yHt0OFiAKdD/J736rDC8NBOcwwIvwR28eh8AwLR/gE1w1W3dG4J/B2TARDATYX/70QK0gt8aNx2dSB+crI9O7zsOAjBMQbMY7TmbgwTTw1jewN/5gxG8weJxcDm3Emj/lzHYw8GTwdduFc3YQAsQGb1ndpLxQQ5EQBHsZWCl9eOwxDKogcdwDwfYgPbRwANkw6YuwU3d9jpU5BYAhB4IxyLJwdbFXoc5clj4K+fuRDluCE78gxLrBKcABtbNwmCOm7ABBaCcW1Ku3J1eABb4a9AlR4YMvLpIieAQwz+dO3nq9EcDQBc0OYg6yKDFZYYd/ixgKJfTh49y6MpZTDJKJ6tuCJiYO5et/1dFc0x6TfFnjsYNcxj8hVOb08I/c5QUFJjSzp+RDGT8tXDAIwcaJ11azTmxtmdixYt7VvXnEIecD79arPvnNCfjxP5GcchzAc1QDuQa+BuCA4o5dwN6jTn31II5f5V8jMqbLJIsVhZYWHjq7unEiuViQfE3JsCUy1MTJBgAjMllf2t4LPOXiRYAJ05kPnOQYK05zTqX+ItkgxcaLznWA7jh7wMA2xhmlevjg6oFC/5uhHNoIQoDgNHpnDF6yWmsKgY4K4E+oKjKgjfWMOepqjCQpS4MaEBjDn/6yEEOL2RqQg0njPHnhMzGWzExcz5J5gkcqqmGAwfQaGAHc8zxjf9Fncrx5xhaMrhAJgc4eCYT83DgZpJeutEJg5x+9IGFc8xhYQ1/2GEHinCg+McCd/45QbiqYlkDHQtMKWC4JTBo7rlB/PnEgUb8ScKJmLqQSY0u/GtKRcbKieKfRtADoChE04APjYYwiCWWpsqBopId3uAmynKEMQCBc9wpsAAfmaiiG390CscICqdDQpgxK0zABwOqyOEXf3ww0qgMnKBFDaTK8a2qHoU1Z4cFvBBSJjQyoCWCcigMlsWT/ImgCydAc6JGNSLpaxkuBvjnqUz/6U+nE45Y458lLBikD2Fm+UdMMimSy5g03iE2BAPIO2kH5+5Iwws7fbiA4CacQIP/llZacke/QBfDoLwEeCDHHqLYG2qLfzqwoY8EjEEJ5Hf6oGFHDCwYBYE72qkKjCp2OsGbMRzyZwtKKPzHH2N8WAuzHyNxwjofvPDCKCeaSBiHs6SEVlgWzUlgmS7U4MUBwgBIBuSmUVqrg1ZCG5IDL7T1BwkO+vAHs0rmfONLi4oD1xxOYmEF3KqgSICiJcwx4oizljggOTOachMKdJ7Yi2wAFM9DV2xsWMZZeJnWzGR/0kCDYqIAENGL98gQxTqeP6IhibhyOoebXuhpJ50lTEHgZgxiNtWcUY6oDyVh3qAB7Y+mFSVJJIZ2gEhe1BDlF2FMbZr55Tzs4AMHAHAA/4edUYpLWAvz4kCNIYd0IIcmWuCvkWR0xAAdYYb4hHYP+shJ70HmFk8nbvA+QW8PYlHntUrWNF0dpsIBLfrhDz5kYCiCQYM9yFEN4+iEfiwClK204TWLiQgAbzCNGjpgnKeg4xi824kwNhCWdozJFAa4mToYgQCHVMUHnCDPT/gABbZ4oBra0KAWinKBPPCiCTYAQJaa1zyUOOUfCVgDlnBWIYgJawkn+RELckCLr13AAcfiyxoaEQHjmCMW/qnKlcS4hCiMohZxCVYCBkERKyUgCeDJSTbyJR5/sKAaOXhPJpqgOCIJRg0cGAdTiggctmhBFGoYiuK8IJhMuMgLvP9IwmOIcQyU+CgBW3FHPNJxghB0g37lAAYw/OGmfxyhISAzxw084I9caMMLn8BABKYXttA0QRRoeM8Sisg8QMlFNmdZzmUcNp4oZspDaGjCZ0BTIyf8gn2Z+IWD0mCBiODsBouC2DlGIQspyWUU9zvHZZCQI6ecA3AnsMAC0NCIu3UAJkRCYAbIAYBivLB5cIkNOxAhilbYQ3EWa8IcWrkMNfDgBtzghmp8ZAEE6KscnQzAAF7jLASQcmtG6EO69PaYIQDABjdhwRyml0UACMYGtJAFU3jUy6Y5pSpHxExDoWgGN2HgBKY52pBA4wUeDIUPOWuEA2LxGB/1YULl0Fv/NpCQNWKhDH96i0WqTEY3MNjBAQ6Y5IeakAMf5kEwrdDjf4q5IjdVJYrTIgd60BDQHOQpqFuohhrk4J+zrEUYBbjDONWVnHYsYRbvuKhD3NGOBAwhAY+5kwNa0QEj+EML0jNpBgDAi2egwQeljKJLtbaTrPnoMuCCIph89KMh5MAGTZBJnjiQAzVUYBTlSEYHGhCLH1VCAYM4hy70JgAk/HUJ7agdJ/KGgXfcwGbmYEcUVqEKlpRjB40wWExUqytR5ECbn2VeKB2jDDWQA4Furewv3sMCeHqhBUthRyUQsIHLnGMHydnRCeIxWHjIg5M7qNQCAMBB9t3gF0ORnrJm/2ID7C5vcpxVcPPEQz9J8Uds3FEWAGokFC+iYwgduAUddlEMc8TDHe64UlGjRJ9wIqASYTKHB2jwDlDQIQhBWEA6KhEBNPACADPZjrIaOEi5LLi0puWFKPakOES9NQMNaAgNcGCPLlQjE2kI5mOQw4R3YAAe5jAAIxTrj2I5QBtdaADvjNGAtg7tpNvJQwOz9CzRAhnOLn1KeWjwgWfwgmBDIpprAZAJ46ziFqEIwipAwQp2eHmQ6dCRQ7hhAAwcOgqgaEMQBP0GVrBiAa51AhDzwLgMNIEcHRiFOXgJZ5myhRI5EAUtDjaUoeWAFxloxInU9wsn1+kJPkjDAbxhZf8tRSEbBwDFKgrRhmhgoxq2KI8hOiAY9gRmmUG0AWoYGqwExxnbK/qVU/zhgUaooY/KugB7bKQGAETgsaN4QxuAAAQX0AHeoFAEMRRRjD5kwg44WMCkg9CBSIxDHkZ4wAVsABogxpqyrQipcZCI7Uv+aAcdEAU5mjCUHCDKCwBoQhM+8IQsoeMGEahGIxm3OTk0gtKhULk0qoGJWpiBMy34wHY0lwcn/JAWd26BjjZ77Wz/XFBOMR1TFhBEmSDwzMRDTxE8Lg9XFOMYLmD3LW4RBFhIQ3EOkEMDIuGDT7hDAJH4AIkqrqtlAlKsQyglsIBelXOcpQW8kAJ422qxi+//ikNPYAFb/MENFvRBGblABCIW0AI+HEESTICHK1jQgjmEzwmI0s7NadIKUXyAEsL8a2mB3vnxgAw4s5CNDz7QilZQ9ujs8cIFvksLDuBgdztwRTrikYAd0MADasOpB1hwGg50wQZ7aAJNlunpDJi+EUuxwEno4/kf00zireiC5I185E+jgQddbMEQfECJLdDACFs4AhKUsQAczIF4N7+A4gTDi003wfIsYcXynF9/I7IFCplWQ/fkOSTNZUANnqEVuscBfqEBcAAHlgEBG6EIOKC/FG4PEGjTeKHTbG4PTK8aZIF+Isj5KuRH+IMD/AmI2qqt1k9zjGaZwsvu0GD9/9DA5tbPyFyw0yiwFZ7BBhohsZ7C/naQeZxCNkYhAniBHNSAcZQlNNoKAEAjD9SgBp/hGciBHERBFAQwpRgHNL4mNIyGFqLQC/rhgS6JB88qJ0xFGbxAFKRAGwwmWULjyOyuKNaDaF7NYvxo0/IA/tZqDm4AXEzG53hwB0EGED3rR2hgGTAntY4OEXnqCo8QEY0vWZSQRKQQvRJrOcqq83gkU5yFKZSBA1ph7sBt0x7x4sZtDt2qPfwox3gh51atASgBZ0Srpfyw7QBRXfSjKboMF5fjA78MClthD25OVzptO7YDEYmRGDPA5jKgCxJGFGyAA4bggTLREoEuUMJFLv8c4gYawR6kUAr7RFdCMQYXCRWz0AmYkBxawQEiYBx0JJimDBfpTxYVDBB/xRYtQBjcscsoBB3QZyr8AQpkodlsYOL6pNOirSAPcviaQPiYsBu9gAy2IKeIqRrjUTFE7DFGQRkaQdWkgCOpcP8UkrJOiibKUQ1sQApsQBs4IALCYT8eAx/f0ago0uEA0SJh0iYVS90a4PfIwQkHcAD3ILVsYADPsQZNDw2gjBL47q7YkULERSYVQxOZghK0oAO8oAvOkCOzkhzmjiMtzx627g22oCVv8iaf0v7IEhcX7THWYRz4YBlGThugkBuloBXIwQkc4AMaIRN8oJUU6yUfwwJbKqESpnEH0fIxEqAYZEEZBo8xB28BFiAXtCAJiiEBysMwydIs2w6JLtMwR+EGZOEYhuAN3mAIZIGVODMXtUsmUZM170ou0AGY2LEPMzPO5hFaWhM3cxMeeykgAAA7\", \"width\": 165.5, \"height\": 103 }] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 0 }, { \"blocks\": [{ \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Heading 2\", \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": \"13\" }, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Road-150\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Product No: BK-R93R-44\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Size: 44\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Weight: 14\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [{ \"characterFormat\": {}, \"text\": \"Price: $3,578.27\" }] }, { \"paragraphFormat\": { \"textAlignment\": \"Center\", \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"cellFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"topMargin\": 2, \"preferredWidth\": 234, \"preferredWidthType\": \"Point\", \"cellWidth\": 234, \"columnSpan\": 1, \"rowSpan\": 1, \"verticalAlignment\": \"Top\" }, \"columnIndex\": 1 }], \"rowFormat\": { \"height\": 1, \"allowBreakAcrossPages\": true, \"heightType\": \"AtLeast\", \"isHeader\": false, \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"None\", \"lineWidth\": 0, \"shadow\": false, \"space\": 0 } }, \"gridBefore\": 0, \"gridBeforeWidth\": 0, \"gridBeforeWidthType\": \"Point\", \"gridAfter\": 0, \"gridAfterWidth\": 0, \"gridAfterWidthType\": \"Point\" } }], \"grid\": [234, 234], \"tableFormat\": { \"borders\": { \"top\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"left\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"right\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"bottom\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"diagonalDown\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"diagonalUp\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"horizontal\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 }, \"vertical\": { \"color\": \"#000000\", \"hasNoneStyle\": false, \"lineStyle\": \"Single\", \"lineWidth\": 0.5, \"shadow\": false, \"space\": 0 } }, \"shading\": { \"backgroundColor\": \"#ffffff\", \"foregroundColor\": \"empty\", \"textureStyle\": \"TextureNone\" }, \"cellSpacing\": 0, \"leftIndent\": 0, \"tableAlignment\": \"Left\", \"topMargin\": 0, \"rightMargin\": 5.4, \"leftMargin\": 5.4, \"bottomMargin\": 0, \"preferredWidth\": 0, \"preferredWidthType\": \"Auto\" }, \"description\": null, \"title\": null }, { \"paragraphFormat\": { \"styleName\": \"Normal\", \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }], \"headersFooters\": { \"header\": { \"blocks\": [{ \"paragraphFormat\": { \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }] }, \"footer\": { \"blocks\": [{ \"paragraphFormat\": { \"listFormat\": {} }, \"characterFormat\": {}, \"inlines\": [] }] } } }], \"characterFormat\": { \"fontSize\": 11, \"fontFamily\": \"Calibri\" }, \"paragraphFormat\": { \"lineSpacing\": 1.0791666507720947, \"lineSpacingType\": \"Multiple\", \"listFormat\": {} }, \"styles\": [{ \"name\": \"Normal\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"lineSpacing\": 1.149999976158142, \"lineSpacingType\": \"Multiple\", \"listFormat\": {} }, \"characterFormat\": { \"fontFamily\": \"Calibri\" }, \"next\": \"Normal\" }, { \"name\": \"Default Paragraph Font\", \"type\": \"Character\", \"characterFormat\": {} }, { \"name\": \"Heading 1 Char\", \"type\": \"Character\", \"characterFormat\": { \"fontSize\": 16, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Default Paragraph Font\" }, { \"name\": \"Heading 1\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"beforeSpacing\": 12, \"afterSpacing\": 0, \"outlineLevel\": \"Level1\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": 16, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Normal\", \"link\": \"Heading 1 Char\", \"next\": \"Normal\" }, { \"name\": \"Heading 2 Char\", \"type\": \"Character\", \"characterFormat\": { \"fontSize\": 13, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Default Paragraph Font\" }, { \"name\": \"Heading 2\", \"type\": \"Paragraph\", \"paragraphFormat\": { \"beforeSpacing\": 2, \"afterSpacing\": 6, \"outlineLevel\": \"Level2\", \"listFormat\": {} }, \"characterFormat\": { \"fontSize\": 13, \"fontFamily\": \"Calibri Light\", \"fontColor\": \"#2F5496\" }, \"basedOn\": \"Normal\", \"link\": \"Heading 2 Char\", \"next\": \"Normal\" }], \"lists\": [], \"abstractLists\": [] };\n var waitingPopUp = document.getElementById('waiting-popup');\n container.documentEditor.open(JSON.stringify(defaultDocument)); \n container.documentEditor.documentName = 'Getting Started'; \n // TitleBar sample starts\n titleBarDiv = document.getElementById('documenteditor_titlebar');\n initializeTitleBar(true); \n updateDocumentTitle();\n wireEventsInTitleBar();\n container.documentEditor.documentChange = function () {\n updateDocumentTitle();\n };\n var documentTitle;\n var documentTitleContentEditor;\n var titleBarDiv;\n var print;\n var openBtn;\n var download;\n var isPropertiesPaneEnabled;\n function initializeTitleBar(isShareNeeded) {\n documentTitle = ej.base.createElement('label', { id: 'documenteditor_title_name', styles: 'text-transform:capitalize;font-weight:400;text-overflow:ellipsis;white-space:pre;overflow:hidden;user-select:none;cursor:text' });\n documentTitleContentEditor = ej.base.createElement('div', { id: 'documenteditor_title_contentEditor', className: 'single-line' });\n documentTitleContentEditor.appendChild(documentTitle);\n titleBarDiv.appendChild(documentTitleContentEditor);\n documentTitleContentEditor.setAttribute('title', 'Document Name. Click or tap to rename this document.');\n var btnStyles = 'float:right;background: transparent;box-shadow:none; font-family: inherit;border-color: transparent;' +\n 'border-radius: 2px;color:inherit;font-size:12px;text-transform:capitalize;margin-top:4px;height:28px;font-weight:400';\n print = addButton('e-de-icon-Print e-de-padding-right', 'Print', btnStyles, 'de-print', 'Print this document (Ctrl+P).', false);\n openBtn = addButton('e-de-icon-Open e-de-padding-right', 'open', btnStyles, 'de-open', 'Open', false);\n var items = [\n { text: 'Microsoft Word (.docx)', id: 'word' },\n { text: 'Syncfusion Document Text (.sfdt)', id: 'sfdt' },\n ];\n download = addButton('e-de-icon-Download e-de-padding-right', 'Download', btnStyles, 'documenteditor-share', 'Download this document.', true, items);\n if (!isShareNeeded) {\n download.element.style.display = 'none';\n }\n else {\n openBtn.element.style.display = 'none';\n }\n }\n function wireEventsInTitleBar() {\n print.element.addEventListener('click', onPrint);\n openBtn.element.addEventListener('click', function (e) {\n if (e.target.id === 'de-open') {\n var fileUpload = document.getElementById('uploadfileButton');\n fileUpload.value = '';\n fileUpload.click();\n }\n });\n documentTitleContentEditor.addEventListener('keydown', function (e) {\n if (e.keyCode === 13) {\n e.preventDefault();\n documentTitleContentEditor.contentEditable = 'false';\n if (documentTitleContentEditor.textContent === '') {\n documentTitleContentEditor.textContent = 'Document1';\n }\n }\n });\n documentTitleContentEditor.addEventListener('blur', function () {\n if (documentTitleContentEditor.textContent === '') {\n documentTitleContentEditor.textContent = 'Document1';\n }\n documentTitleContentEditor.contentEditable = 'false';\n container.documentEditor.documentName = documentTitle.textContent;\n });\n documentTitleContentEditor.addEventListener('click', function () {\n updateDocumentEditorTitle();\n });\n }\n function updateDocumentEditorTitle() {\n documentTitleContentEditor.contentEditable = 'true';\n documentTitleContentEditor.focus();\n window.getSelection().selectAllChildren(documentTitleContentEditor);\n }\n function updateDocumentTitle() {\n if (container.documentEditor.documentName === '') {\n container.documentEditor.documentName = 'Untitled';\n }\n documentTitle.textContent = container.documentEditor.documentName;\n }\n function onPrint() {\n container.documentEditor.print();\n }\n function onExportClick(args) {\n var value = args.item.id;\n switch (value) {\n case 'word':\n save('Docx');\n break;\n case 'sfdt':\n save('Sfdt');\n break;\n }\n }\n function save(format) {\n container.documentEditor.save(container.documentEditor.documentName === '' ? 'sample' : container.documentEditor.documentName, format);\n }\n function setTooltipForPopup() {\n document.getElementById('documenteditor-share-popup').querySelectorAll('li')[0].setAttribute('title', 'Download a copy of this document to your computer as a DOCX file.');\n document.getElementById('documenteditor-share-popup').querySelectorAll('li')[1].setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');\n }\n function addButton(iconClass, btnText, styles, id, tooltipText, isDropDown, items) {\n var button = ej.base.createElement('button', { id: id, styles: styles });\n titleBarDiv.appendChild(button);\n button.setAttribute('title', tooltipText);\n if (isDropDown) {\n var dropButton = new ej.splitbuttons.DropDownButton({ select: onExportClick, items: items, iconCss: iconClass, cssClass: 'e-caret-hide', content: btnText, open: function () { setTooltipForPopup(); } }, button);\n return dropButton;\n }\n else {\n var ejButton = new ej.buttons.Button({ iconCss: iconClass, content: btnText }, button);\n return ejButton;\n }\n } \n"} \ No newline at end of file diff --git a/src/document-editor/sample.json b/src/document-editor/sample.json index da44bc1f..26181ff1 100644 --- a/src/document-editor/sample.json +++ b/src/document-editor/sample.json @@ -2,14 +2,13 @@ "name": "DocumentEditor", "directory": "document-editor", "category": "Editors", + "hideOnDevice": true, "ftName":"document-editor", - "type": "update", "samples": [ { "url": "default", "name": "Default Functionalities", "category": "DocumentEditor", - "type": "update", "description":"The Document Editor component is used to create, edit, view, and print Word documents in web applications.", "api": { "DocumentEditor": [ diff --git a/src/drop-down-list/cascading-stack.json b/src/drop-down-list/cascading-stack.json index 9ffc8af3..8e2f53b7 100644 --- a/src/drop-down-list/cascading-stack.json +++ b/src/drop-down-list/cascading-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var countryObj = new ej.dropdowns.DropDownList({\n // set the country data to dataSource property\n dataSource: window.ddCountry,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'CountryId', text: 'CountryName' },\n // bind the change event\n change: function () {\n // disable the state DropDownList\n stateObj.enabled = true;\n // frame the query based on selected value in country DropDownList.\n var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryObj.value);\n // set the framed query based on selected value in country DropDownList.\n stateObj.query = tempQuery;\n // set null value to state DropDownList text property\n stateObj.text = null;\n // bind the property changes to state DropDownList\n stateObj.dataBind();\n // set null value to city DropDownList text property\n cityObj.text = null;\n // disable the city DropDownList\n cityObj.enabled = false;\n // bind the property changes to City DropDownList\n cityObj.dataBind();\n },\n placeholder: 'Select a country'\n });\n countryObj.appendTo('#country');\n\n //initiates the state DropDownList\n var stateObj = new ej.dropdowns.DropDownList({\n // set the state data to dataSource property\n dataSource: window.ddState,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'StateId', text: 'StateName' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // bind the change event\n change: function () {\n // enable the city DropDownList\n cityObj.enabled = true;\n // Query the data source based on state DropDownList selected value\n var tempQuery1 = new ej.data.Query().where('StateId', 'equal', stateObj.value);\n // set the framed query based on selected value in city DropDownList.\n cityObj.query = tempQuery1;\n //clear the existing selection\n cityObj.text = null;\n // bind the property change to city DropDownList\n cityObj.dataBind();\n },\n placeholder: 'Select a state'\n });\n stateObj.appendTo('#state');\n var cityObj = new ej.dropdowns.DropDownList({\n // set the city data to dataSource property\n dataSource: window.ddCities,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { text: 'CityName', value: 'CityId' },\n // disable the DropDownList by default to prevent the user interact.\n enabled: false,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a city'\n });\n cityObj.appendTo('#city');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var countryObj = new ej.dropdowns.DropDownList({\n // set the country data to dataSource property\n dataSource: window.ddCountry,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'CountryId', text: 'CountryName' },\n // bind the change event\n change: function () {\n // disable the state DropDownList\n stateObj.enabled = true;\n // frame the query based on selected value in country DropDownList.\n var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryObj.value);\n // set the framed query based on selected value in country DropDownList.\n stateObj.query = tempQuery;\n // set null value to state DropDownList text property\n stateObj.text = null;\n // bind the property changes to state DropDownList\n stateObj.dataBind();\n // set null value to city DropDownList text property\n cityObj.text = null;\n // disable the city DropDownList\n cityObj.enabled = false;\n // bind the property changes to City DropDownList\n cityObj.dataBind();\n },\n placeholder: 'Select a country'\n });\n countryObj.appendTo('#country');\n\n //initiates the state DropDownList\n var stateObj = new ej.dropdowns.DropDownList({\n // set the state data to dataSource property\n dataSource: window.ddState,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { value: 'StateId', text: 'StateName' },\n // set disable state by default to prevent user interact.\n enabled: false,\n // bind the change event\n change: function () {\n // enable the city DropDownList\n cityObj.enabled = true;\n // Query the data source based on state DropDownList selected value\n var tempQuery1 = new ej.data.Query().where('StateId', 'equal', stateObj.value);\n // set the framed query based on selected value in city DropDownList.\n cityObj.query = tempQuery1;\n //clear the existing selection\n cityObj.text = null;\n // bind the property change to city DropDownList\n cityObj.dataBind();\n },\n placeholder: 'Select a state'\n });\n stateObj.appendTo('#state');\n var cityObj = new ej.dropdowns.DropDownList({\n // set the city data to dataSource property\n dataSource: window.ddCities,\n // set the height of the popup element\n popupHeight: 'auto',\n // map the appropriate columns to fields property\n fields: { text: 'CityName', value: 'CityId' },\n // disable the DropDownList by default to prevent the user interact.\n enabled: false,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a city'\n });\n cityObj.appendTo('#city');\n"} \ No newline at end of file diff --git a/src/drop-down-list/data-binding-stack.json b/src/drop-down-list/data-binding-stack.json index d47e0f35..4a1afe51 100644 --- a/src/drop-down-list/data-binding-stack.json +++ b/src/drop-down-list/data-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n

        Local Data

        \n \n
        \n
        \n
        \n
        \n

        Remote Data

        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({\n url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a name',\n // set the height of the popup element\n popupHeight: '200px'\n });\n dropDownListObj.appendTo('#customers');\n\n // initialize DropDownList component\n var games = new ej.dropdowns.DropDownList({\n // set the local data to dataSource property\n dataSource: window.ddSportsData,\n // map the appropriate columns to fields property\n fields: { text: 'Game' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a game',\n // set the height of the popup element\n popupHeight: '200px'\n });\n games.appendTo('#games');\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n

        Local Data

        \n \n
        \n
        \n
        \n
        \n

        Remote Data

        \n \n
        \n
        \n
        \n\n\n\n\n\n","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({\n url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a name',\n // set the height of the popup element\n popupHeight: '200px'\n });\n dropDownListObj.appendTo('#customers');\n\n // initialize DropDownList component\n var games = new ej.dropdowns.DropDownList({\n // set the local data to dataSource property\n dataSource: window.ddSportsData,\n // map the appropriate columns to fields property\n fields: { text: 'Game' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a game',\n // set the height of the popup element\n popupHeight: '200px'\n });\n games.appendTo('#games');\n\n\n"} \ No newline at end of file diff --git a/src/drop-down-list/data-binding.html b/src/drop-down-list/data-binding.html index 59b8f007..4f95ba2f 100644 --- a/src/drop-down-list/data-binding.html +++ b/src/drop-down-list/data-binding.html @@ -48,9 +48,11 @@

        Remote Data

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/drop-down-list/data-source.js b/src/drop-down-list/data-source.js index 71b65abe..787948b7 100644 --- a/src/drop-down-list/data-source.js +++ b/src/drop-down-list/data-source.js @@ -179,4 +179,39 @@ window.diacritics = [ 'Güle güle.', 'Gülhatmi', 'Gülünç' -]; \ No newline at end of file +]; + window.groupa=[ + { Name: "Australia", Code: "AU" }, + { Name: "Bermuda", Code: "BM" }, + { Name: "Canada", Code: "CA" }, + { Name: "Cameroon", Code: "CM" }, + { Name: "Denmark", Code: "DK" }, + { Name: "France", Code: "FR" }, + { Name: "Finland", Code: "FI" }, + { Name: "Germany", Code: "DE" }, + { Name: "Hong Kong", Code: "HK" } + ]; + window.groupb= [ + { Name: "India", Code: "IN" }, + { Name: "Italy", Code: "IT" }, + { Name: "Japan", Code: "JP" }, + { Name: "Mexico", Code: "MX" }, + { Name: "Norway", Code: "NO" }, + { Name: "Poland", Code: "PL" }, + { Name: "Switzerland", Code: "CH" }, + { Name: "United Kingdom", Code: "GB" }, + { Name: "United States", Code: "US" } + ]; + + window.info= [ + { text: "Hennessey Venom", id: "list-01" }, + { text: "Bugatti Chiron", id: "list-02" }, + { text: "Bugatti Veyron Super Sport", id: "list-03" }, + { text: "SSC Ultimate Aero", id: "list-04" }, + { text: "Koenigsegg CCR", id: "list-05" }, + { text: "McLaren F1", id: "list-06" }, + { text: "Aston Martin One- 77", id: "list-07" }, + { text: "Jaguar XJ220", id: "list-08" }, + { text: "McLaren P1", id: "list-09" }, + { text: "Ferrari LaFerrari", id: "list-10" } + ]; diff --git a/src/drop-down-list/default-stack.json b/src/drop-down-list/default-stack.json index e6f43601..c3b5160b 100644 --- a/src/drop-down-list/default-stack.json +++ b/src/drop-down-list/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        Value:
        Text:
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // Initialize DropDownList component\n var listObj = new ej.dropdowns.DropDownList({\n // set the index value to select an item based on index at initial rendering\n index: 2,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a game',\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function () { valueChange(); }\n });\n listObj.appendTo('#games');\n // call the change event's function after initialized the component.\n valueChange();\n function valueChange() {\n var value = document.getElementById('value');\n var text = document.getElementById('text');\n // update the text and value property values in property panel based on selected item in DropDownList\n value.innerHTML = listObj.value;\n text.innerHTML = listObj.text;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        Value:
        Text:
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // Initialize DropDownList component\n var listObj = new ej.dropdowns.DropDownList({\n // set the index value to select an item based on index at initial rendering\n index: 2,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a game',\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function () { valueChange(); }\n });\n listObj.appendTo('#games');\n // call the change event's function after initialized the component.\n valueChange();\n function valueChange() {\n var value = document.getElementById('value');\n var text = document.getElementById('text');\n // update the text and value property values in property panel based on selected item in DropDownList\n value.innerHTML = listObj.value;\n text.innerHTML = listObj.text;\n }\n"} \ No newline at end of file diff --git a/src/drop-down-list/diacritics-filtering-stack.json b/src/drop-down-list/diacritics-filtering-stack.json index 1a86cde2..7a85790f 100644 --- a/src/drop-down-list/diacritics-filtering-stack.json +++ b/src/drop-down-list/diacritics-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * DropDownList Diacritics functionality Sample\n */\n\n // initialize DropDownList component\n var dropdownObj = new ej.dropdowns.DropDownList({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a value',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true,\n // set the placeholder to filterbar\n filterBarPlaceholder: 'e.g: gul'\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * DropDownList Diacritics functionality Sample\n */\n\n // initialize DropDownList component\n var dropdownObj = new ej.dropdowns.DropDownList({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a value',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true,\n // set the placeholder to filterbar\n filterBarPlaceholder: 'e.g: gul'\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file diff --git a/src/drop-down-list/filtering-stack.json b/src/drop-down-list/filtering-stack.json index acd5079f..4ba93cab 100644 --- a/src/drop-down-list/filtering-stack.json +++ b/src/drop-down-list/filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the placeholder to DropDownList input element\n placeholder: 'Select a country',\n // set the placeholder to filter search box input element\n filterBarPlaceholder: 'Search',\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the height of the popup element\n popupHeight: '250px',\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var dropdown_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n dropdown_query = (e.text !== '') ? dropdown_query.where('Name', 'startswith', e.text, true) : dropdown_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, dropdown_query);\n }\n });\n dropDownListObj.appendTo('#country');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the placeholder to DropDownList input element\n placeholder: 'Select a country',\n // set the placeholder to filter search box input element\n filterBarPlaceholder: 'Search',\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the height of the popup element\n popupHeight: '250px',\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var dropdown_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n dropdown_query = (e.text !== '') ? dropdown_query.where('Name', 'startswith', e.text, true) : dropdown_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, dropdown_query);\n }\n });\n dropDownListObj.appendTo('#country');\n\n"} \ No newline at end of file diff --git a/src/drop-down-list/grouping-icon-stack.json b/src/drop-down-list/grouping-icon-stack.json index 401fd2c5..8a9ba7aa 100644 --- a/src/drop-down-list/grouping-icon-stack.json +++ b/src/drop-down-list/grouping-icon-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n

        Grouping

        \n \n
        \n
        \n
        \n
        \n

        Icons

        \n \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var groupList = new ej.dropdowns.DropDownList({\n // set the vagetables data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a vegetable',\n // set the height of the popup element\n popupHeight: '200px'\n });\n groupList.appendTo('#vegetables');\n\n // initialize DropDownList component\n var iconList = new ej.dropdowns.DropDownList({\n // set the social media data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { text: 'SocialMedia', iconCss: 'Class', value: 'Id' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a social media',\n // set the height of the popup element\n popupHeight: '200px'\n });\n iconList.appendTo('#icons');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n

        Grouping

        \n \n
        \n
        \n
        \n
        \n

        Icons

        \n \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var groupList = new ej.dropdowns.DropDownList({\n // set the vagetables data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a vegetable',\n // set the height of the popup element\n popupHeight: '200px'\n });\n groupList.appendTo('#vegetables');\n\n // initialize DropDownList component\n var iconList = new ej.dropdowns.DropDownList({\n // set the social media data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { text: 'SocialMedia', iconCss: 'Class', value: 'Id' },\n // set the placeholder to DropDownList input element\n placeholder: 'Select a social media',\n // set the height of the popup element\n popupHeight: '200px'\n });\n iconList.appendTo('#icons');\n\n"} \ No newline at end of file diff --git a/src/drop-down-list/grouping-icon.html b/src/drop-down-list/grouping-icon.html index c28a3b3b..a2972219 100644 --- a/src/drop-down-list/grouping-icon.html +++ b/src/drop-down-list/grouping-icon.html @@ -15,21 +15,25 @@

        Icons

        -

        This sample demonstrates the grouping and icons supports of the DropDownList. Click the DropDownList element and select an item from the categorized list/icons list.

        +

        This sample demonstrates the grouping and icons supports of the DropDownList. Click the DropDownList element and + select an item from the categorized list/icons list.

        -

        The DropDownList allows to group the relevant items under a corresponding category by mapping the groupBy field, and allows to load the list items with icons.

        +

        The DropDownList allows to group the relevant items under a corresponding category by mapping the + groupBy field, and allows to load the list items with icons.

        The grouping sample illustrates how the vegetables are grouped based on its category.

        The 2nd DropDownList is populated with icons that is rendered by mapping the iconCss field.

        More information on the grouping feature configuration can be found in the - documentation section. + documentation + section.

        \n
        \n
        \n React top expert of this week is\n \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the employees data to dataSource property\n dataSource: window.inlineData,\n // map the appropriate columns to fields property\n fields: { text: 'Name' },\n value: 'Michael',\n // set the placeholder to DropDownList input element\n placeholder: 'Select an employee',\n // set the width to component\n width: '60px',\n popupWidth: '140px',\n popupHeight: '200px',\n cssClass:'inlinecss'\n });\n dropDownListObj.appendTo('#inline');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n React top expert of this week is\n \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the employees data to dataSource property\n dataSource: window.inlineData,\n // map the appropriate columns to fields property\n fields: { text: 'Name' },\n value: 'Michael',\n // set the placeholder to DropDownList input element\n placeholder: 'Select an employee',\n // set the width to component\n width: '60px',\n popupWidth: '140px',\n popupHeight: '200px',\n cssClass:'inlinecss'\n });\n dropDownListObj.appendTo('#inline');\n\n"} \ No newline at end of file diff --git a/src/drop-down-list/sample.json b/src/drop-down-list/sample.json index 8ed679c1..8f288a3e 100644 --- a/src/drop-down-list/sample.json +++ b/src/drop-down-list/sample.json @@ -4,14 +4,14 @@ "category": "Dropdowns", "ftName": "dropdown-list", "samples": [ - { "url": "default", "name": "Default Functionalities", "description": "This demo for Syncfusion JavaScript drop-down list control shows the default rendering of the drop-down list control with minimum configuration.", "category": "Dropdown List", "api": { "DropDownList": ["popupHeight", "placeholder", "index", "change"] } }, - { "url": "grouping-icon", "name": "Grouping and Icons", "description": "This demo explains the grouping based on different categories with individual header and icon support in the Syncfusion JavaScript drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "popupHeight", "placeholder"] } }, - { "url": "data-binding", "name": "Data Binding", "description": "This demo for Syncfusion JavaScript drop-down list control shows how to bind with local data source and how to fetch data from remote data service.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "query", "sortOrder", "autofill", "popupHeight", "placeholder"] } }, - { "url": "template", "name": "Template", "description": "This demo shows how to customize the appearance of each item in the pop-up list using template option in Syncfusion JavaScript drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "headerTemplate", "itemTemplate", "valueTemplate", "popupHeight", "placeholder"] } }, - { "url": "filtering", "name": "Filtering", "description": "This demo explains the filtering functionalities of the Syncfusion JavaScript drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "allowFiltering", "filtering", "filterBarPlaceholder", "popupHeight", "placeholder"] } }, - { "url": "cascading", "name": "Cascading", "description": "This demo for Syncfusion JavaScript drop-down list control shows the cascading support.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "change", "placeholder", "popupHeight", "value", "enabled"] } }, - { "url": "inline", "name": "Inline", "description": "This demo for Syncfusion JavaScript drop-down list control demonstrates to render the drop-down list control in line with other content.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "value"] } }, - { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This demo explains the diacritics filter functionality of the Syncfusion JavaScript drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "ignoreAccent", "placeholder", "allowFiltering"] } } + { "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript(ES5) drop-down list control with minimum configuration.", "category": "Dropdown List", "api": { "DropDownList": ["popupHeight", "placeholder", "index", "change"] } }, + { "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using JavaScript(ES5) drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "popupHeight", "placeholder"] } }, + { "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript(ES5) drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "query", "sortOrder", "autofill", "popupHeight", "placeholder"] } }, + { "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript(ES5) drop-down list control pop-up list using the template.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "headerTemplate", "itemTemplate", "valueTemplate", "popupHeight", "placeholder"] } }, + { "url": "filtering", "name": "Filtering", "description": "This example demonstrates how the filtering functionalities works based on the typed characters in the JavaScript(ES5) drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "allowFiltering", "filtering", "filterBarPlaceholder", "popupHeight", "placeholder"] } }, + { "url": "cascading", "name": "Cascading", "description": "This example demonstrates how to create a related drop-down list (Cascading DropDownList) using the JavaScript(ES5) drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "change", "placeholder", "popupHeight", "value", "enabled"] } }, + { "url": "inline", "name": "Inline", "description": "This example demonstrates how to render the JavaScript(ES5) drop-down list control in line with highlighted contents.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "fields", "value"] } }, + { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript(ES5) drop-down list control.", "category": "Dropdown List", "api": { "DropDownList": ["dataSource", "ignoreAccent", "placeholder", "allowFiltering"] } } ], "dataSourcePath": "src/drop-down-list/data-source.js" } \ No newline at end of file diff --git a/src/drop-down-list/template-stack.json b/src/drop-down-list/template-stack.json index 310d9ff2..09798595 100644 --- a/src/drop-down-list/template-stack.json +++ b/src/drop-down-list/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name' },\n // set the template content for popup header element\n headerTemplate: '
        Photo Employee Info
        ',\n // set the template content for list items\n itemTemplate: '
        \"employee\"/' +\n '
        ${Name}
        ${Designation}
        ',\n // set the template content for displays the selected items in input element.\n valueTemplate: '
        ' +\n '\"employee\"/' +\n '
        ${Name}
        ',\n // set the placeholder to DropDownList input element\n placeholder: 'Select an employee',\n // set the height of the popup element\n popupHeight: '270px'\n });\n dropDownListObj.appendTo('#employees');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n\n\n // initialize DropDownList component\n var dropDownListObj = new ej.dropdowns.DropDownList({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name' },\n // set the template content for popup header element\n headerTemplate: '
        Photo Employee Info
        ',\n // set the template content for list items\n itemTemplate: '
        \"employee\"/' +\n '
        ${Name}
        ${Designation}
        ',\n // set the template content for displays the selected items in input element.\n valueTemplate: '
        ' +\n '\"employee\"/' +\n '
        ${Name}
        ',\n // set the placeholder to DropDownList input element\n placeholder: 'Select an employee',\n // set the height of the popup element\n popupHeight: '270px'\n });\n dropDownListObj.appendTo('#employees');\n\n"} \ No newline at end of file diff --git a/src/drop-down-list/template.html b/src/drop-down-list/template.html index 6ccb20ab..3c391ebd 100644 --- a/src/drop-down-list/template.html +++ b/src/drop-down-list/template.html @@ -7,23 +7,27 @@
        -

        This sample demonstrates the template functionalities of the DropDownList. Click the DropDownList element and select +

        This sample demonstrates the template functionalities of the DropDownList. Click the DropDownList element and + select an item from the customized list.

        -

        The DropDownList has been provided with several options to customize each list items, group title, selected value, header +

        The DropDownList has been provided with several options to customize each list items, group title, selected + value, header and footer elements.

        This sample uses the following list of templates in DropDownList

        • ItemTemplate - To customize the list item's content.
          • -
        • ValueTemplate - To customize the value element content that holds the selected item's text.
          • +
        • ValueTemplate - To customize the value element content that holds the selected item's text. +
        • HeaderTemplate - To customize the header element.

        More information on the template feature configuration can be found in the - documentation section. + documentation + section.

        @@ -43,6 +47,7 @@ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif"; } + /* custom code start*/ .fabric .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -50,6 +55,10 @@ font-weight: 400; } + .bootstrap4 .header { + color: #6c757d; + } + .bootstrap .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -112,12 +121,14 @@ margin: 0px 10px 0 20px; } - .bootstrap .value { + .bootstrap .value, + .bootstrap4 .value { margin-top: 3px; margin-left: 3px; } - .e-bigger.bootstrap .value { + .e-bigger.bootstrap .value, + .e-bigger.bootstrap4 .value { margin-top: 5px; margin-left: 5px; } @@ -130,6 +141,18 @@ padding: 12px 42px; } + .bootstrap4 #employees_popup.e-popup .empImage { + margin: 0px 16px; + } + + .bootstrap4 #employees_popup.e-popup .job { + margin-top: 0; + } + + .e-bigger.bootstrap4 #employees_popup.e-popup .job { + margin-top: -15px; + } + /* custom code end*/ .info { margin-left: 17px; } @@ -189,4 +212,5 @@ .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage { margin: 10px 16px; } + \ No newline at end of file diff --git a/src/file-manager/api-stack.json b/src/file-manager/api-stack.json new file mode 100644 index 00000000..8a2c860f --- /dev/null +++ b/src/file-manager/api-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Toolbar
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}// Sample for basic filemanager.\n\n var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/';\n var fileObject = new ej.filemanager.FileManager({\n ajaxSettings: {\n url: hostUrl + 'api/FileManager/FileOperations',\n getImageUrl: hostUrl + 'api/FileManager/GetImage',\n uploadUrl: hostUrl + 'api/FileManager/Upload',\n downloadUrl: hostUrl + 'api/FileManager/Download'\n },\n toolbarSettings: { visible: true },\n navigationPaneSettings: { visible: false },\n view: 'LargeIcons'\n });\n fileObject.appendTo('#filemanager');\n\n checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onToolbarChange });\n checkBoxObj.appendTo('#toolbar');\n\n function onToolbarChange(args) {\n fileObject.toolbarSettings.visible = args.checked;\n }\n\n"} \ No newline at end of file diff --git a/src/file-manager/api.html b/src/file-manager/api.html new file mode 100644 index 00000000..f88e03f9 --- /dev/null +++ b/src/file-manager/api.html @@ -0,0 +1,59 @@ +
        +
        + +
        +
        +
        +
        +
        + + + + + + + +
        +
        Toolbar
        +         		+
        + +
        +
        +
        +
        + +
        +

        This sample demonstrates the properties of FileManager component from the property pane. Select any properties + from the property pane to customize the FileManager.

        +
        + +
        + The File Manager component is used to explore a file system through a web application, similar to the windows + explorer for windows. It supports the basic file operations such as create, rename, delete. +
        \ No newline at end of file diff --git a/src/file-manager/api.js b/src/file-manager/api.js new file mode 100644 index 00000000..efe9970b --- /dev/null +++ b/src/file-manager/api.js @@ -0,0 +1,24 @@ +// Sample for basic filemanager. +this.default = function () { + var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/'; + var fileObject = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + toolbarSettings: { visible: true }, + navigationPaneSettings: { visible: false }, + view: 'LargeIcons' + }); + fileObject.appendTo('#filemanager'); + + checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onToolbarChange }); + checkBoxObj.appendTo('#toolbar'); + + function onToolbarChange(args) { + fileObject.toolbarSettings.visible = args.checked; + } + +}; \ No newline at end of file diff --git a/src/file-manager/custom-thumbnail-stack.json b/src/file-manager/custom-thumbnail-stack.json new file mode 100644 index 00000000..44ff0278 --- /dev/null +++ b/src/file-manager/custom-thumbnail-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}// Sample for basic filemanager.\n\n var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/';\n var fileObject = new ej.filemanager.FileManager({\n ajaxSettings: {\n url: hostUrl + 'api/FileManager/FileOperations',\n getImageUrl: hostUrl + 'api/FileManager/GetImage',\n uploadUrl: hostUrl + 'api/FileManager/Upload',\n downloadUrl: hostUrl + 'api/FileManager/Download',\n },\n showThumbnail: false,\n view: 'LargeIcons'\n });\n fileObject.appendTo('#filemanager');\n\n"} \ No newline at end of file diff --git a/src/file-manager/custom-thumbnail.html b/src/file-manager/custom-thumbnail.html new file mode 100644 index 00000000..d8bed6ed --- /dev/null +++ b/src/file-manager/custom-thumbnail.html @@ -0,0 +1,96 @@ +
        +
        + +
        +
        +
        + + + +
        +

        This sample demonstrates the custom thumbnail of the File Manager you can customize with your own icon.

        +
        + +
        + The File Manager component is used to explore a file system through a web application, similar to the windows + explorer for windows. It supports all the basic file operations such as create, rename, delete and so on. +
        \ No newline at end of file diff --git a/src/file-manager/custom-thumbnail.js b/src/file-manager/custom-thumbnail.js new file mode 100644 index 00000000..785b1580 --- /dev/null +++ b/src/file-manager/custom-thumbnail.js @@ -0,0 +1,15 @@ +// Sample for basic filemanager. +this.default = function () { + var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/'; + var fileObject = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download', + }, + showThumbnail: false, + view: 'LargeIcons' + }); + fileObject.appendTo('#filemanager'); +}; diff --git a/src/file-manager/locale.json b/src/file-manager/locale.json new file mode 100644 index 00000000..e8cf4e83 --- /dev/null +++ b/src/file-manager/locale.json @@ -0,0 +1,377 @@ +{ + "en": { + "filemanager": { + "NewFolder": "New folder", + "Upload": "Upload", + "Delete": "Delete", + "Rename": "Rename", + "Download": "Download", + "Cut": "Cut", + "Copy": "Copy", + "Paste": "Paste", + "SortBy": "Sort by", + "Refresh": "Refresh", + "Item-Selection": "item selected", + "Items-Selection": "items selected", + "View": "View", + "Details": "Details", + "SelectAll": "Select all", + "Open": "Open", + "Tooltip-NewFolder": "New folder", + "Tooltip-Upload": "Upload", + "Tooltip-Delete": "Delete", + "Tooltip-Rename": "Rename", + "Tooltip-Download": "Download", + "Tooltip-Cut": "Cut", + "Tooltip-Copy": "Copy", + "Tooltip-Paste": "Paste", + "Tooltip-SortBy": "Sort by", + "Tooltip-Refresh": "Refresh", + "Tooltip-Selection": "Clear selection", + "Tooltip-View": "View", + "Tooltip-Details": "Details", + "Tooltip-SelectAll": "Select all", + "Name": "Name", + "Size": "Size", + "DateModified": "Modified", + "DateCreated": "Date created", + "Modified": "Modified", + "Created": "Created", + "Location": "Location", + "Type": "Type", + "Ascending": "Ascending", + "Descending": "Descending", + "View-LargeIcons": "Large icons", + "View-Details": "Details", + "Search": "Search", + "Button-Ok": "OK", + "Button-Cancel": "Cancel", + "Button-Yes": "Yes", + "Button-No": "No", + "Button-Create": "Create", + "Button-Save": "Save", + "Header-NewFolder": "Folder", + "Content-NewFolder": "Enter your folder name", + "Header-Rename": "Rename", + "Content-Rename": "Enter your new name", + "Header-Rename-Confirmation": "Rename Confirmation", + "Content-Rename-Confirmation": "If you change a file name extension, the file might become unstable. Are you sure you want to change it?", + "Header-Delete": "Delete File", + "Content-Delete": "Are you sure you want to delete this file?", + "Header-Multiple-Delete": "Delete Multiple Files", + "Content-Multiple-Delete": "Are you sure you want to delete these {0} files?", + "Header-Duplicate": "File exists", + "Content-Duplicate": " already exists. Are you sure you want to replace it?", + "Header-Upload": "Upload Files", + "Error": "Error", + "Validation-Empty": "The file or folder name cannot be empty.", + "Validation-Invalid": "The file or folder name {0} contains invalid characters. Please use a different name. Valid file or folder names cannot end with a dot or space, and cannot contain any of the following characters: \\/:*?\"<>|", + "Validation-NewFolder-Exists": "A file or folder with the name {0} already exists.", + "Validation-Rename-Exists": "Cannot rename {0} to {1}: destination already exists.", + "Folder-Empty": "This folder is empty", + "File-Upload": "Drag files here to upload", + "Search-Empty": "No results found", + "Search-Key": "Try with different keywords" + } + }, + "de": { + "filemanager": { + "NewFolder": "Neuer Ordner", + "Upload": "Hochladen", + "Delete": "Löschen", + "Rename": "Umbenennen", + "Download": "Herunterladen", + "Cut": "Schnitt", + "Copy": "Kopieren", + "Paste": "Einfügen", + "SortBy": "Sortiere nach", + "Refresh": "Aktualisierung", + "Item-Selection": "Element ausgewählt", + "Items-Selection": "Elemente ausgewählt", + "View": "Aussicht", + "Details": "Einzelheiten", + "SelectAll": "Wählen Sie Alle", + "Open": "Öffnen", + "Tooltip-NewFolder": "Neuer Ordner", + "Tooltip-Upload": "Hochladen", + "Tooltip-Delete": "Löschen", + "Tooltip-Rename": "Umbenennen", + "Tooltip-Download": "Herunterladen", + "Tooltip-Cut": "Schnitt", + "Tooltip-Copy": "Kopieren", + "Tooltip-Paste": "Einfügen", + "Tooltip-SortBy": "Sortiere nach", + "Tooltip-Refresh": "Aktualisierung", + "Tooltip-Selection": "Auswahl löschen", + "Tooltip-View": "Aussicht", + "Tooltip-Details": "Einzelheiten", + "Tooltip-SelectAll": "Wählen Sie Alle", + "Name": "Name", + "Size": "Größe", + "DateModified": "Geändert", + "DateCreated": "Datum erstellt", + "Modified": "Geändert", + "Created": "Erstellt", + "Location": "Ort", + "Type": "Art", + "Ascending": "Aufsteigend", + "Descending": "Absteigend", + "View-LargeIcons": "Große Icons", + "View-Details": "Einzelheiten", + "Search": "Suche", + "Button-Ok": "OK", + "Button-Cancel": "Stornieren", + "Button-Yes": "Ja", + "Button-No": "Nein", + "Button-Create": "Erstellen", + "Button-Save": "Sparen", + "Header-NewFolder": "Mappe", + "Content-NewFolder": "Geben Sie Ihren Ordnernamen ein", + "Header-Rename": "Umbenennen", + "Content-Rename": "Geben Sie Ihren neuen Namen ein", + "Header-Rename-Confirmation": "Bestätigung umbenennen", + "Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?", + "Header-Delete": "Datei löschen", + "Content-Delete": "Möchten Sie diese Datei wirklich löschen?", + "Header-Multiple-Delete": "Mehrere Dateien löschen", + "Content-Multiple-Delete": "Möchten Sie diese {0} -Dateien wirklich löschen?", + "Header-Duplicate": "Datei existiert", + "Content-Duplicate": "ist bereits vorhanden. Möchten Sie es wirklich ersetzen?", + "Header-Upload": "Daten hochladen", + "Error": "Error", + "Validation-Empty": "Der Datei- oder Ordnername darf nicht leer sein.", + "Validation-Invalid": "Der Datei- oder Ordnername {0} enthält ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei- oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und keine der folgenden Zeichen enthalten: \\ /: *? \" < > | ", + "Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit dem Namen {0} ist bereits vorhanden.", + "Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt werden: Ziel ist bereits vorhanden.", + "Folder-Empty": "Dieser Ordner ist leer", + "File-Upload": "Dateien zum Hochladen hierher ziehen", + "Search-Empty": "Keine Ergebnisse gefunden", + "Search-Key": "Versuchen Sie es mit anderen Suchbegriffen" + } + }, + "fr-CH": { + "filemanager": { + "NewFolder": "Nouveau dossier", + "Upload": "Télécharger", + "Delete": "Effacer", + "Rename": "Renommer", + "Download": "Télécharger", + "Cut": "Couper", + "Copy": "Copie", + "Paste": "Coller", + "SortBy": "Trier par", + "Refresh": "Rafraîchir", + "Item-Selection": "article sélectionné", + "Items-Selection": "articles sélectionnés", + "View": "Vue", + "Details": "Détails", + "SelectAll": "Tout sélectionner", + "Open": "Ouvrir", + "Tooltip-NewFolder": "Nouveau dossier", + "Tooltip-Upload": "Télécharger", + "Tooltip-Delete": "Effacer", + "Tooltip-Rename": "Renommer", + "Tooltip-Download": "Télécharger", + "Tooltip-Cut": "Couper", + "Tooltip-Copy": "Copie", + "Tooltip-Paste": "Coller", + "Tooltip-SortBy": "Trier par", + "Tooltip-Refresh": "Rafraîchir", + "Tooltip-Selection": "Effacer la sélection", + "Tooltip-View": "Vue", + "Tooltip-Details": "Détails", + "Tooltip-SelectAll": "Tout sélectionner", + "Name": "Prénom", + "Size": "Taille", + "DateModified": "Modifié", + "DateCreated": "Date créée", + "Modified": "Modifié", + "Created": "Créé", + "Location": "Emplacement", + "Type": "Type", + "Ascending": "Ascendant", + "Descending": "Descendant", + "View-LargeIcons": "Grandes icônes", + "View-Details": "Détails", + "Search": "Chercher", + "Button-Ok": "D'ACCORD", + "Button-Cancel": "Annuler", + "Button-Yes": "Oui", + "Button-No": "Non", + "Button-Create": "Créer", + "Button-Save": "Sauvegarder", + "Header-NewFolder": "Dossier", + "Content-NewFolder": "Entrez votre nom de dossier", + "Header-Rename": "Renommer", + "Content-Rename": "Entrez votre nouveau nom", + "Header-Rename-Confirmation": "Renommer la confirmation", + "Content-Rename-Confirmation": "Si vous modifiez une extension de nom de fichier, le fichier peut devenir instable. Voulez-vous vraiment le changer?", + "Header-Delete": "Supprimer le fichier", + "Content-Delete": "Êtes-vous sûr de vouloir supprimer ce fichier?", + "Header-Multiple-Delete": "Supprimer plusieurs fichiers", + "Content-Multiple-Delete": "Êtes-vous sûr de vouloir supprimer ces {0} fichiers?", + "Header-Duplicate": "Le fichier existe", + "Content-Duplicate": "existe déjà. Êtes-vous sûr de vouloir le remplacer?", + "Header-Upload": "Télécharger des fichiers", + "Error": "Erreur", + "Validation-Empty": "Le nom du fichier ou du dossier ne peut être vide.", + "Validation-Invalid": "Le nom du fichier ou du dossier {0} contient des caractères non valides. Veuillez utiliser un nom différent. Les noms de fichiers ou de dossiers valides ne peuvent pas se terminer par un point ou un espace, ni contenir aucun des caractères suivants: \\ /: *? \" < > | ", + "Validation-NewFolder-Exists": "Un fichier ou un dossier portant le nom {0} existe déjà.", + "Validation-Rename-Exists": "Impossible de renommer {0} en {1}: la destination existe déjà.", + "Folder-Empty": "Ce dossier est vide", + "File-Upload": "Faites glisser les fichiers ici pour les télécharger", + "Search-Empty": "Aucun résultat trouvé", + "Search-Key": "Essayez avec des mots clés différents" + } + }, + "ar": { + "filemanager": { + "NewFolder": "ملف جديد", + "Upload": "رفع", + "Delete": "حذف", + "Rename": "إعادة تسمية", + "Download": "تحميل", + "Cut": "يقطع", + "Copy": "نسخ", + "Paste": "معجون", + "SortBy": "ترتيب حسب", + "Refresh": "تحديث", + "Item-Selection": "العنصر المحدد", + "Items-Selection": "العناصر المحددة", + "View": "رأي", + "Details": "تفاصيل", + "SelectAll": "اختر الكل", + "Open": "افتح", + "Tooltip-NewFolder": "ملف جديد", + "Tooltip-Upload": "رفع", + "Tooltip-Delete": "حذف", + "Tooltip-Rename": "إعادة تسمية", + "Tooltip-Download": "تحميل", + "Tooltip-Cut": "يقطع", + "Tooltip-Copy": "نسخ", + "Tooltip-Paste": "معجون", + "Tooltip-SortBy": "ترتيب حسب", + "Tooltip-Refresh": "تحديث", + "Tooltip-Selection": "اختيار واضح", + "Tooltip-View": "رأي", + "Tooltip-Details": "تفاصيل", + "Tooltip-SelectAll": "اختر الكل", + "Name": "اسم", + "Size": "بحجم", + "DateModified": "تم التعديل", + "DateCreated": "تاريخ الإنشاء", + "Modified": "تم التعديل", + "Created": "خلقت", + "Location": "موقعك", + "Type": "نوع", + "Ascending": "تصاعدي", + "Descending": "ترتيب تنازلي", + "View-LargeIcons": "الرموز الكبيرة", + "View-Details": "تفاصيل", + "Search": "بحث", + "Button-Ok": "حسنا", + "Button-Cancel": "إلغاء", + "Button-Yes": "نعم فعلا", + "Button-No": "لا", + "Button-Create": "خلق", + "Button-Save": "حفظ", + "Header-NewFolder": "مجلد", + "Content-NewFolder": "أدخل اسم المجلد الخاص بك", + "Header-Rename": "إعادة تسمية", + "Content-Rename": "أدخل اسمك الجديد", + "Header-Rename-Confirmation": "إعادة تسمية التأكيد", + "Content-Rename-Confirmation": "إذا قمت بتغيير ملحق اسم الملف , فقد يصبح الملف غير مستقر. هل تريد بالتأكيد تغييره؟", + "Header-Delete": "حذف ملف", + "Content-Delete": "هل أنت متأكد أنك تريد حذف هذا الملف؟", + "Header-Multiple-Delete": "حذف ملفات متعددة", + "Content-Multiple-Delete": "هل أنت متأكد من أنك تريد حذف هذه الملفات {0}؟", + "Header-Duplicate": "الملف موجود", + "Content-Duplicate": "موجود بالفعل. هل أنت متأكد أنك تريد استبداله؟", + "Header-Upload": "تحميل الملفات", + "Error": "خطأ", + "Validation-Empty": "لا يمكن أن يكون اسم الملف أو المجلد فارغًا.", + "Validation-Invalid": "يحتوي اسم الملف أو المجلد {0} على أحرف غير صالحة. يرجى استخدام اسم مختلف. لا يمكن أن تنتهي أسماء الملفات أو المجلدات الصالحة بنقطة أو مسافة ولا يمكن أن تحتوي على أي من الأحرف التالية: \\ /: *؟ \" > | ", + "Validation-NewFolder-Exists": "ملف أو مجلد يحمل الاسم {0} موجود بالفعل.", + "Validation-Rename-Exists": "لا يمكن إعادة تسمية {0} إلى {1}: الوجهة موجودة بالفعل.", + "Folder-Empty": "هذا المجلد فارغ", + "File-Upload": "اسحب الملفات هنا للتحميل", + "Search-Empty": "لا توجد نتائج", + "Search-Key": "جرب بكلمات رئيسية مختلفة" + } + }, + "zh": { + "filemanager": { + "NewFolder": "新建文件夹", + "Upload": "上传", + "Delete": "删除", + "Rename": "改名", + "Download": "下载", + "Cut": "切", + "Copy": "复制", + "Paste": "糊", + "SortBy": "排序方式", + "Refresh": "刷新", + "Item-Selection": "项目选择", + "Items-Selection": "选中的项目", + "View": "视图", + "Details": "细节", + "SelectAll": "全选", + "Open": "打开", + "Tooltip-NewFolder": "新建文件夹", + "Tooltip-Upload": "上传", + "Tooltip-Delete": "删除", + "Tooltip-Rename": "改名", + "Tooltip-Download": "下载", + "Tooltip-Cut": "切", + "Tooltip-Copy": "复制", + "Tooltip-Paste": "糊", + "Tooltip-SortBy": "排序方式", + "Tooltip-Refresh": "刷新", + "Tooltip-Selection": "清空选项", + "Tooltip-View": "视图", + "Tooltip-Details": "细节", + "Tooltip-SelectAll": "全选", + "Name": "名称", + "Size": "尺寸", + "DateModified": "改性", + "DateCreated": "创建日期", + "Modified": "改性", + "Created": "创建", + "Location": "地点", + "Type": "类型", + "Ascending": "上升", + "Descending": "降序", + "View-LargeIcons": "大图标", + "View-Details": "细节", + "Search": "搜索", + "Button-Ok": "好", + "Button-Cancel": "取消", + "Button-Yes": "是", + "Button-No": "没有", + "Button-Create": "创建", + "Button-Save": "保存", + "Header-NewFolder": "夹", + "Content-NewFolder": "输入您的文件夹名称", + "Header-Rename": "改名", + "Content-Rename": "输入你的新名字", + "Header-Rename-Confirmation": "重命名确认", + "Content-Rename-Confirmation": "如果更改文件扩展名,文件可能会变得不稳定。您确定要更改它吗？", + "Header-Delete": "删除文件", + "Content-Delete": "你确定要删除这个文件吗？", + "Header-Multiple-Delete": "删除多个文件", + "Content-Multiple-Delete": "您确定要删除这些{0}文件吗？", + "Header-Duplicate": "文件已存在", + "Content-Duplicate": "已经存在。你确定要替换它吗？", + "Header-Upload": "上传文件", + "Error": "错误", + "Validation-Empty": "文件或文件夹名称不能为空。", + "Validation-Invalid": "文件或文件夹名称{0}包含无效字符。请使用其他名称。有效文件或文件夹名称不能以点或空格结尾,并且不能包含以下任何字符：\\ /：*？\"< > |", + "Validation-NewFolder-Exists": "名称为{0}的文件或文件夹已存在。", + "Validation-Rename-Exists": "无法将{0}重命名为{1}：目标已存在。", + "Folder-Empty": "这个文件夹是空的", + "File-Upload": "将文件拖到此处上传", + "Search-Empty": "未找到结果", + "Search-Key": "尝试使用不同的关键字" + } + } +} \ No newline at end of file diff --git a/src/file-manager/overview-stack.json b/src/file-manager/overview-stack.json new file mode 100644 index 00000000..853cbd02 --- /dev/null +++ b/src/file-manager/overview-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}//Sample for basic filemanager.\n \n var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/';\n var fileObject = new ej.filemanager.FileManager({\n ajaxSettings: {\n url: hostUrl + 'api/FileManager/FileOperations',\n getImageUrl: hostUrl + 'api/FileManager/GetImage',\n uploadUrl: hostUrl + 'api/FileManager/Upload',\n downloadUrl: hostUrl + 'api/FileManager/Download' \n },\n\t\t\tview: 'Details'\n });\n fileObject.appendTo('#filemanager');\n"} \ No newline at end of file diff --git a/src/file-manager/overview.html b/src/file-manager/overview.html new file mode 100644 index 00000000..0fd5d59b --- /dev/null +++ b/src/file-manager/overview.html @@ -0,0 +1,21 @@ +
        +
        + +
        +
        +
        + + +
        +

        This sample demonstrates the full features of the File Manager that includes toolbar, navigation pane and details view.

        +
        + +
        +

        The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete, cut, copy, paste, upload, download and so on.

        +
        \ No newline at end of file diff --git a/src/file-manager/overview.js b/src/file-manager/overview.js new file mode 100644 index 00000000..a83348f1 --- /dev/null +++ b/src/file-manager/overview.js @@ -0,0 +1,14 @@ +//Sample for basic filemanager. + this.default = function() { + var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/'; + var fileObject = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + view: 'Details' + }); + fileObject.appendTo('#filemanager'); +}; \ No newline at end of file diff --git a/src/file-manager/sample.json b/src/file-manager/sample.json new file mode 100644 index 00000000..65611652 --- /dev/null +++ b/src/file-manager/sample.json @@ -0,0 +1,43 @@ +{ + "name": "File Manager", + "directory": "file-manager", + "category": "Navigation", + "ftName": "file-manager", + "type": "preview", + "samples": [ + { + "url": "overview", + "name": "Overview", + "category": "File Manager", + "api": { + "FileManager": [ + "ajaxSettings", + "view" + ] + }, + "description": "The FileManager component is used to explore a file system through a web application, similar to the windows explorer for windows." + }, + { + "url": "custom-thumbnail", + "name": "Custom Thumbnails", + "category": "File Manager", + "api": { + "FileManager": [ + "ajaxSettings" + ] + }, + "description": "The FileManager component is used to explore a file system through a web application, similar to the windows explorer for windows." + }, + { + "url": "api", + "name": "API", + "category": "File Manager", + "api": { + "FileManager": [ + "ajaxSettings" + ] + }, + "description": "The FileManager component is used to explore a file system through a web application, similar to the windows explorer for windows." + } + ] +} \ No newline at end of file diff --git a/src/form-validator/default-stack.json b/src/form-validator/default-stack.json new file mode 100644 index 00000000..4a5193b8 --- /dev/null +++ b/src/form-validator/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        Add Customer Details
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n // Initialize the Submit Button.\n var buttonFormValidate = new ej.buttons.Button({\n isPrimary: true\n });\n buttonFormValidate.appendTo('#validateSubmit');\n // Initialize the Reset Button.\n var buttonReset = new ej.buttons.Button({});\n buttonReset.appendTo('#resetbtn');\n\n var options = {\n rules: {\n User: { required: true },\n DOB: { date: [true, 'Enter valid format'] },\n Email: { email: [true, 'Enter valid Email'] },\n City: { required: true },\n State: { required: true },\n }\n };\n // Initialize the FormValidator.\n var formObj = new ej.inputs.FormValidator('#formId', options);\n document.getElementById('formId').addEventListener(\"submit\", function (e) {\n e.preventDefault();\n if (formObj.validate()) {\n alert('Customer details added!');\n formObj.reset();\n }\n });\n\n"} \ No newline at end of file diff --git a/src/form-validator/external-submit-stack.json b/src/form-validator/external-submit-stack.json new file mode 100644 index 00000000..0a90765d --- /dev/null +++ b/src/form-validator/external-submit-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        Job Application Form
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        Expected Salary
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        Upload Resume
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        *This button is not a submit type and the form submit handled from externally.
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n\n var options = {\n // Initialize the CustomPlacement.\n customPlacement: function (inputElement, errorElement) {\n inputElement = inputElement.closest('.form-group').querySelector('.error');\n inputElement.parentElement.appendChild(errorElement);\n },\n\n rules: {\n 'Name': {\n required: true\n },\n 'Email': {\n required: true\n },\n 'Emp': {\n required: true\n },\n 'Position': {\n required: true\n },\n 'cSalary': {\n required: true\n }\n }\n };\n\n // Initialize the FormValidator.\n var formObj = new ej.inputs.FormValidator('#form', options);\n\n // Initialize external Button and handle the form submit from external Button click action.\n var externalButton = new ej.buttons.Button({\n isPrimary: true\n });\n externalButton.appendTo('#submitBtn');\n\n // // Add mousedown event to external button element\n document.getElementById('submitBtn').addEventListener('mousedown', externalSubmit);\n\n function externalSubmit(event) {\n // Validate the form from external validate method\n var formStatus = formObj.validate();\n if (formStatus) {\n formObj.element.reset();\n resume.remove();\n confirm.show();\n }\n }\n\n\n // Initialize Position dropdown\n var positions = new ej.dropdowns.DropDownList({\n dataSource: window.positions,\n fields: {\n text: 'Name'\n },\n popupHeight: '200px',\n placeholder: 'Position',\n floatLabelType: 'Auto'\n });\n positions.appendTo('#position');\n\n // Initialize the Resume with uploader\n var resume = new ej.inputs.Uploader({\n autoUpload: false,\n allowedExtensions: '.doc, .docx'\n });\n resume.appendTo('#resume');\n resume.buttons = {\n browse: 'Browse'\n };\n resume.dataBind();\n\n // Initialize Current Salary with currency textbox\n var currentSalary = new ej.inputs.NumericTextBox({\n format: 'c2',\n placeholder: 'Current Salary',\n floatLabelType: 'Auto'\n });\n currentSalary.appendTo('#current-salary');\n\n // Initialize the Expected Salary with slider\n var expectedSalary = new ej.inputs.Slider({\n value: [0.2, 0.4],\n min: 0,\n max: 1,\n type: 'Range',\n step: 0.2,\n tooltip: {\n placement: 'before',\n isVisible: true,\n format: 'P0'\n },\n ticks: {\n placement: 'after',\n largeStep: 0.1,\n smallStep: 0,\n showSmallTicks: true,\n format: 'P0'\n },\n placeholder: 'Expected Salary'\n });\n expectedSalary.appendTo('#expected-salary');\n\n // Intialization the confirmation popup using dialog\n var confirm = new ej.popups.Dialog({\n width: '335px',\n visible: false,\n content: 'We appreciate your interest in our company. We will validate your profile and contact you soon...',\n target: document.getElementById('confirmation'),\n isModal: true,\n animationSettings: {\n effect: 'Zoom'\n }\n });\n confirm.appendTo('#confirmationDialog');\n\n confirm.overlayClick = function () {\n confirm.hide();\n };\n"} \ No newline at end of file diff --git a/src/form-validator/html5-stack.json b/src/form-validator/html5-stack.json new file mode 100644 index 00000000..0bad24a9 --- /dev/null +++ b/src/form-validator/html5-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        HTML5 Validation
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n // Initialize the Submit Button.\n var buttonFormValidate = new ej.buttons.Button({\n isPrimary: true\n });\n buttonFormValidate.appendTo('#validateSubmit');\n // Initialize the Reset Button.\n var buttonReset = new ej.buttons.Button();\n buttonReset.appendTo('#resetbtn');\n var options = {\n // Initialize the CustomPlacement.\n customPlacement: function (inputElement, errorElement) {\n inputElement.parentElement.appendChild(errorElement);\n }\n };\n\n // Initialize the FormValidator.\n var formObj = new ej.inputs.FormValidator('#formId', options);\n document.getElementById('formId').addEventListener(\"submit\", function (e) {\n e.preventDefault();\n if (formObj.validate()) {\n alert('Your form has been submitted.');\n formObj.reset();\n }\n });\n document.getElementById('minlen').addEventListener('change', function (e) {\n var floatElementInput = e.currentTarget;\n var floatElement = floatElementInput.parentElement.getElementsByClassName('e-float-text')[0];\n if (floatElementInput.value.length > 0) {\n floatElement.classList.remove('e-label-bottom');\n floatElement.classList.add('e-label-top');\n } else {\n floatElement.classList.remove('e-label-top');\n floatElement.classList.add('e-label-bottom');\n }\n });\n\n"} \ No newline at end of file diff --git a/src/form-validator/html5.html b/src/form-validator/html5.html index ecf73c5a..964ebe7e 100644 --- a/src/form-validator/html5.html +++ b/src/form-validator/html5.html @@ -139,16 +139,15 @@
        -

        Type values in the input element and press tab key or click the Submit button to validate the form element. - Clear the input values by Reset button click action.

        +

        This sample demonstrates the default functionalities of the HTML5 Form Validator. Type the values or characters in the input element. If the input values are in correct format, then the given input will be ready to submit otherwise error message will be shown until you enter the correct input format.

        - FormValidator can be used to validate form input elements with the required validation rules. + The HTML5 Form Validator is used to validate the user data without relying any scripts. This is done by using validation attributes (required, pattern, email, URL, password, date, datetime, color, password, and more) on form elements.


        - The above form is configured with following rules and also we have given example valid values for each field. + The above form is configured with the following rules and the examples of valid values for each field have been given as follows. diff --git a/src/form-validator/html5.js b/src/form-validator/html5.js index f92528bc..651d04c9 100644 --- a/src/form-validator/html5.js +++ b/src/form-validator/html5.js @@ -23,4 +23,16 @@ this.default = function () { formObj.reset(); } }); + document.getElementById('minlen').addEventListener('change', function (e) { + var floatElementInput = e.currentTarget; + var floatElement = floatElementInput.parentElement.getElementsByClassName('e-float-text')[0]; + if (floatElementInput.value.length > 0) { + floatElement.classList.remove('e-label-bottom'); + floatElement.classList.add('e-label-top'); + } else { + floatElement.classList.remove('e-label-top'); + floatElement.classList.add('e-label-bottom'); + } + }); + }; \ No newline at end of file diff --git a/src/form-validator/wizardform-stack.json b/src/form-validator/wizardform-stack.json new file mode 100644 index 00000000..8c646d83 --- /dev/null +++ b/src/form-validator/wizardform-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        Account Setup
        \n
        \n
        \n

        Account Information

        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n\n
        \n

        Personal Information

        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n\n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        Gender:
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n\n
        \n

        Contact Information

        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var prevButton = new ej.buttons.Button({\n isPrimary: true\n });\n prevButton.appendTo('#prevBtn');\n\n var nextButton = new ej.buttons.Button({\n isPrimary: true\n });\n nextButton.appendTo('#nextBtn');\n\n\n var nextBtn = document.getElementById(\"nextBtn\");\n nextBtn.addEventListener(\"click\", function () {\n tabNav(1);\n });\n\n var prevBtn = document.getElementById(\"prevBtn\");\n prevBtn.addEventListener(\"click\", function () {\n tabNav(-1);\n });\n\n var datepicker = new ej.calendars.DatePicker({\n placeholder: 'Choose Your DOB'\n });\n datepicker.appendTo('#datepicker');\n\n\n var radioButton = new ej.buttons.RadioButton({\n label: \"Male\",\n name: 'Gender',\n value: 'm',\n checked: true\n });\n radioButton.appendTo('#radio1');\n\n radioButton = new ej.buttons.RadioButton({\n label: 'Female',\n name: 'Gender',\n value: 'fm'\n });\n radioButton.appendTo('#radio2');\n\n var options = {\n customPlacement: function (inputElement, errorElement) {\n inputElement.parentElement.appendChild(errorElement);\n }\n };\n\n var formObj = new ej.inputs.FormValidator(\"#formId\", options);\n \n var currentTab = 0;\n displayTab(currentTab);\n\n function displayTab(n) {\n var x = document.getElementsByClassName(\"tab\");\n if (n === 3) {\n n = 0;\n currentTab = 0;\n }\n x[n].style.display = \"block\";\n if (n === 0) {\n document.getElementById(\"prevBtn\").style.display = \"none\";\n } else {\n document.getElementById(\"prevBtn\").style.display = \"inline\";\n }\n if (n == (x.length - 1)) {\n document.getElementById(\"nextBtn\").innerHTML = \"Submit\";\n } else {\n document.getElementById(\"nextBtn\").innerHTML = \"Next\";\n }\n\n }\n\n function tabNav(n) {\n var x = document.getElementsByClassName(\"tab\");\n if (n == 1 && !validateForm()) return false;\n x[currentTab].style.display = \"none\";\n currentTab = currentTab + n;\n if (currentTab >= x.length) {\n if (formObj.validate()) {\n displayTab(0);\n alert('Account has been created.');\n formObj.reset();\n }\n }\n displayTab(currentTab);\n }\n\n function validateForm() {\n var x, y, i, valid = true;\n x = document.getElementsByClassName(\"tab\");\n y = x[currentTab].getElementsByTagName(\"input\");\n for (i = 0; i < y.length; i++) {\n formObj.validate(y[i].getAttribute(\"name\"));\n if (y[i].getAttribute(\"aria-invalid\") === 'true') {\n valid = false;\n }\n }\n return valid;\n }\n"} \ No newline at end of file diff --git a/src/form-validator/wizardform.js b/src/form-validator/wizardform.js index 3d660a19..55b95ee3 100644 --- a/src/form-validator/wizardform.js +++ b/src/form-validator/wizardform.js @@ -54,6 +54,10 @@ this.default = function () { function displayTab(n) { var x = document.getElementsByClassName("tab"); + if (n === 3) { + n = 0; + currentTab = 0; + } x[n].style.display = "block"; if (n === 0) { document.getElementById("prevBtn").style.display = "none"; diff --git a/src/gantt/baseline-stack.json b/src/gantt/baseline-stack.json new file mode 100644 index 00000000..b87f8f84 --- /dev/null +++ b/src/gantt/baseline-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: baselineData,\n renderBaseline: true,\n taskFields: {\n id: 'TaskId',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n baselineStartDate: 'BaselineStartDate',\n baselineEndDate: 'BaselineEndDate'\n },\n columns: [\n { field: 'TaskName', headerText: 'Service Name', width: '250', clipMode: 'EllipsisWithTooltip' },\n { field: 'BaselineStartDate', headerText: 'Planned start time' },\n { field: 'BaselineEndDate', headerText: 'Planned end time' },\n { field: 'StartDate', headerText: 'Start time' },\n { field: 'EndDate', headerText: 'End time' },\n ],\n treeColumnIndex: 1,\n allowSelection: true,\n includeWeekend: true,\n timelineSettings: {\n timelineUnitSize: 65,\n topTier: {\n unit: 'None',\n },\n bottomTier: {\n unit: 'Minutes',\n count: 15,\n format: 'hh:mm a'\n },\n },\n tooltipSettings: {\n taskbar: '#tooltip',\n },\n durationUnit: 'Minute',\n dateFormat: 'hh:mm a',\n height: '450px',\n dayWorkingTime: [{ from: 0, to: 24 }],\n projectStartDate: new Date('03/05/2018 09:30:00 AM'),\n projectEndDate: new Date('03/05/2018 07:00:00 PM')\n });\n ganttChart.appendTo('#Baseline');\n"} \ No newline at end of file diff --git a/src/gantt/baseline.html b/src/gantt/baseline.html new file mode 100644 index 00000000..20ac22cf --- /dev/null +++ b/src/gantt/baseline.html @@ -0,0 +1,51 @@ + +
        +
        +
        +
        + +
        +
        + +
        +

        This sample visualizes the complete service schedule for a car. + Baselines are enabled to view the deviation between the planned dates and actual dates

        +
        + +
        +

        + The baseline feature enables the user to view the deviation between the planned dates and the actual dates of + the tasks in a project. Baselines can be enabled in Gantt chart by enabling the renderBaseline + property along + with mapping the data source values for baselineStartDate and baselineEndDate + properties. + The baseline will appear for all type of tasks in the project such as child tasks, parent tasks and also for + milestones. You can change the color for the baselines using baselineColor property. +

        +
        \ No newline at end of file diff --git a/src/gantt/baseline.js b/src/gantt/baseline.js new file mode 100644 index 00000000..00fbc3bc --- /dev/null +++ b/src/gantt/baseline.js @@ -0,0 +1,45 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: baselineData, + renderBaseline: true, + taskFields: { + id: 'TaskId', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + baselineStartDate: 'BaselineStartDate', + baselineEndDate: 'BaselineEndDate' + }, + columns: [ + { field: 'TaskName', headerText: 'Service Name', width: '250', clipMode: 'EllipsisWithTooltip' }, + { field: 'BaselineStartDate', headerText: 'Planned start time' }, + { field: 'BaselineEndDate', headerText: 'Planned end time' }, + { field: 'StartDate', headerText: 'Start time' }, + { field: 'EndDate', headerText: 'End time' }, + ], + treeColumnIndex: 1, + allowSelection: true, + includeWeekend: true, + timelineSettings: { + timelineUnitSize: 65, + topTier: { + unit: 'None', + }, + bottomTier: { + unit: 'Minutes', + count: 15, + format: 'hh:mm a' + }, + }, + tooltipSettings: { + taskbar: '#tooltip', + }, + durationUnit: 'Minute', + dateFormat: 'hh:mm a', + height: '450px', + dayWorkingTime: [{ from: 0, to: 24 }], + projectStartDate: new Date('03/05/2018 09:30:00 AM'), + projectEndDate: new Date('03/05/2018 07:00:00 PM') + }); + ganttChart.appendTo('#Baseline'); +}; \ No newline at end of file diff --git a/src/gantt/data-source.js b/src/gantt/data-source.js new file mode 100644 index 00000000..7a8362ad --- /dev/null +++ b/src/gantt/data-source.js @@ -0,0 +1,1340 @@ +/** + * Gantt DataSource + */ + +window.projectNewData = [ + { + TaskID: 1, + TaskName: 'Product concept', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 }, + { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 }, + { + TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, + Predecessor: '2', Progress: 30 + }, + ] + }, + { + TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', + Indicators: [ + { + 'date': '04/10/2019', + 'name': '#briefing', + 'title': 'Product concept breifing', + } + ] + }, + { + TaskID: 6, + TaskName: 'Market research', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 7, + TaskName: 'Demand analysis', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, + Predecessor: '5', Progress: 30 + }, + { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5' } + ] + }, + { + TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, + Predecessor: '7, 8', Progress: 30 + }, + { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9' }, + { + TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '10', + Indicators: [ + { + 'date': '04/20/2019', + 'name': '#meeting', + 'title': '1st board of directors meeting', + } + ] + } + ] + }, + { + TaskID: 13, + TaskName: 'Product design and development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '12' + }, + { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '12' }, + { TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '15' }, + { TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '15' }, + { + TaskID: 18, + TaskName: 'Define cost plan', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), + Duration: 2, Progress: 30, Predecessor: '17' + }, + { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '17' } + ] + }, + { + TaskID: 21, + TaskName: 'Development of the final design', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), + Duration: 2, Progress: 30, Predecessor: '19,20' + }, + { + TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), + Duration: 2, Predecessor: '22' + }, + { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '23' } + ] + }, + { + TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '24' + }, + { TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '25' }, + { + TaskID: 27, TaskName: 'Design complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '26', + Indicators: [ + { + 'date': '05/18/2019', + 'name': '#meeting', + 'title': '2nd board of directors meeting', + } + ] + } + + ] + }, + { TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '27' }, + { TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '28ss' }, + { TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, Predecessor: '28,29' }, + { TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('04/04/2019'), Duration: 5, Predecessor: '30' }, + { + TaskID: 32, + TaskName: 'Feedback and testing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 45, Predecessor: '31' + }, + { + TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 50, Predecessor: '33' + } + ] + }, + { + TaskID: 35, + TaskName: 'Final product development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), + Duration: 4, Progress: 30, Predecessor: '34' + }, + { + TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), + Duration: 4, Progress: 30, Predecessor: '36ss' + } + ] + }, + { + TaskID: 38, + TaskName: 'Final product', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 39, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '37' }, + { + TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('04/04/2019'), + Duration: 4, Progress: 30, Predecessor: '39' + } + ] + } +]; + +window.editingResources = [ + { resourceId: 1, resourceName: 'Martin Tamer' }, + { resourceId: 2, resourceName: 'Rose Fuller' }, + { resourceId: 3, resourceName: 'Margaret Buchanan' }, + { resourceId: 4, resourceName: 'Fuller King' }, + { resourceId: 5, resourceName: 'Davolio Fuller' }, + { resourceId: 6, resourceName: 'Van Jack' }, + { resourceId: 7, resourceName: 'Fuller Buchanan' }, + { resourceId: 8, resourceName: 'Jack Davolio' }, + { resourceId: 9, resourceName: 'Tamer Vinet' }, + { resourceId: 10, resourceName: 'Vinet Fuller' }, + { resourceId: 11, resourceName: 'Bergs Anton' }, + { resourceId: 12, resourceName: 'Construction Supervisor' } +]; + +window.editingData = [ + { + TaskID: 1, + TaskName: 'Project initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0, + Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction' + }, + { + TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2', + resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' + + 'From an engineer or company specializing in soil testing' + }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 }, + ] + }, + { + TaskID: 5, + TaskName: 'Project estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), + Duration: 3, Predecessor: '4', Progress: 30, resources: 4, + info: 'Develop floor plans and obtain a materials list for estimations' + }, + { + TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), + Duration: 3, Predecessor: '6', resources: [4, 8], info: '' + }, + { + TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), + Duration: 0, Predecessor: '7', resources: [12, 5], info: '' + } + ] + }, + { + TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/04/2019'), Duration: 1, + Predecessor: '8', Progress: 30, resources: [12], + info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)' + }, + { + TaskID: 10, + TaskName: 'Project approval and kick off', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + Duration: 0, + Predecessor: '9' + }, + { + TaskID: 11, + TaskName: 'Site work', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'), + Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7], + info: 'Clear the building site (demolition of existing home if necessary)' + }, + { + TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'), + Duration: 2, Predecessor: '12', resources: [6, 7], info: '' + }, + ] + }, + { + TaskID: 14, + TaskName: 'Foundation', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8], + info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)' + }, + { + TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'), + Duration: 2, Predecessor: '15FF', resources: [8], info: '' + }, + { + TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4, + Progress: 30, Predecessor: '15', resources: [9], info: '' + }, + { + TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'), + Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: '' + }, + { + TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4, + Progress: 30, Predecessor: '18', resources: [10], info: '' + }, + ] + }, + { + TaskID: 20, + TaskName: 'Framing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5], + info: 'Build the main load-bearing structure out of thick pieces of wood and' + + 'possibly metal I-beams for large spans with few supports' + }, + { + TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'), + Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels' + }, + { + TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: '' + }, + { + TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'), + Duration: 3, Predecessor: '23', resources: [8, 9] + }, + { + TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '24', resources: [10], info: '' + }, + { + TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '25SS', resources: [4, 8], info: '' + }, + ] + }, + { + TaskID: 27, + TaskName: 'Exterior finishing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8], + info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier' + }, + { + TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'), + Duration: 3, Predecessor: '28', resources: [1, 10], + info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials' + }, + { + TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof' + }, + { TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 }, + ] + }, + { + TaskID: 32, + TaskName: 'Utilities', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '26', resources: [1, 10] + }, + { + TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33', + resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities' + }, + { + TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '34' + }, + { + TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3, + Predecessor: '35', resources: 11 + }, + { + TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '35', resources: [3, 7] + }, + ], + info: 'Building inspector visits if necessary to approve utilities and framing' + }, + { + TaskID: 38, + TaskName: 'Interior finsihing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s' + }, + { + TaskID: 40, TaskName: 'Install drywall panels', StartDate: new Date('04/04/2019'), Duration: 3, + Predecessor: '39', resources: 5, + info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings' + }, + { + TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3, + Progress: 30, Predecessor: '40', resources: 10 + }, + { + TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3, + Predecessor: '41', resources: [10, 11] + }, + { + TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9] + }, + { + TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7] + }, + ] + }, + { + TaskID: 45, + TaskName: 'Flooring', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'), + Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3], + info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash' + }, + { + TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS', + resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring' + }, + ] + }, + { + TaskID: 48, + TaskName: 'Final Acceptance', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2, + Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items' + }, + { + TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2, + Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances' + }, + { + TaskID: 51, TaskName: 'Property handover', StartDate: new Date('04/04/2019'), Duration: 0, + Predecessor: '50', info: 'Ending the contract' + }, + ] + }, +]; + +window.remoteData = [ + { + TaskID: 1, + TaskName: 'Germination', + StartDate: new Date('03/01/2019'), + subtasks: [ + { TaskID: 2, TaskName: 'Dry seed (caryopsis)', StartDate: new Date('03/01/2019'), Duration: 0 }, + { TaskID: 3, TaskName: 'Seed imbibition complete', StartDate: new Date('03/01/2019'), Duration: 3, Predecessor: '2FS' }, + { TaskID: 4, TaskName: 'Radicle emerged from caryopsis', StartDate: new Date('03/04/2019'), Duration: 2, Predecessor: '3FS' }, + { + TaskID: 5, TaskName: 'Coleoptile emerged from caryopsis', StartDate: new Date('03/06/2019'), + Duration: 2, Predecessor: '4FS' + }, + { + TaskID: 6, TaskName: 'Emergence: coleoptile penetrates soil surface (cracking stage)', + StartDate: new Date('03/08/2019'), Duration: 2, Predecessor: '5FS' + }, + ] + }, + { + TaskID: 7, + TaskName: 'Leaf development', + StartDate: new Date('03/10/2019'), + subtasks: [ + { TaskID: 8, TaskName: 'First leaf through coleoptile', StartDate: new Date('03/10/2019'), Duration: 1, Predecessor: '6FS' }, + { TaskID: 9, TaskName: 'First leaf unfolded', StartDate: new Date('03/11/2019'), Duration: 1, Predecessor: '8FS' }, + { TaskID: 10, TaskName: '3 leaves unfolded', StartDate: new Date('03/12/2019'), Duration: 2, Predecessor: '9FS' }, + { TaskID: 11, TaskName: '9 or more leaves unfolded', StartDate: new Date('03/14/2019'), Duration: 5, Predecessor: '10FS' }, + ] + }, + { + TaskID: 12, + TaskName: 'Tillering', + StartDate: new Date('03/18/2019'), + subtasks: [ + { + TaskID: 13, TaskName: 'Beginning of tillering: first tiller detectable', + StartDate: new Date('03/18/2019'), Duration: 0, Predecessor: '11FS' + }, + { TaskID: 14, TaskName: '2 tillers detectable', StartDate: new Date('03/19/2019'), Duration: 3, Predecessor: '13FS' }, + { TaskID: 15, TaskName: '3 tillers detectable', StartDate: new Date('03/22/2019'), Duration: 3, Predecessor: '14FS' }, + { + TaskID: 16, TaskName: 'Maximum no. of tillers detectable', StartDate: new Date('03/25/2019'), + Duration: 6, Predecessor: '15FS' + }, + { TaskID: 17, TaskName: 'End of tillering', StartDate: new Date('03/30/2019'), Duration: 0, Predecessor: '16FS' }, + ] + }, + { + TaskID: 18, + TaskName: 'Stem elongation', + StartDate: new Date('03/30/2019'), + subtasks: [ + { + TaskID: 19, + TaskName: 'Beginning of stem elongation: pseudostem and tillers erect, first internode begins to elongate,' + + 'top of inflorescence at least 1 cm above tillering node', + StartDate: new Date('03/30/2019'), + Duration: 0, + Predecessor: '17FS' + }, + { + TaskID: 20, TaskName: 'First node at least 1 cm above tillering node', StartDate: new Date('03/31/2019'), + Duration: 1, Predecessor: '19FS' + }, + { + TaskID: 21, TaskName: 'Node 3 at least 2 cm above node 2', StartDate: new Date('04/01/2019'), + Duration: 2, Predecessor: '20FS' + }, + { + TaskID: 22, TaskName: 'Flag leaf just visible, still rolled', StartDate: new Date('04/03/2019'), + Duration: 4, Predecessor: '21FS' + }, + { + TaskID: 23, TaskName: 'Flag leaf stage: flag leaf fully unrolled, ligule just visible', StartDate: new Date('04/07/2019'), + Duration: 2, Predecessor: '22FS' + }, + ] + }, + { + TaskID: 24, + TaskName: 'Booting', + StartDate: new Date('04/09/2019'), + subtasks: [ + { + TaskID: 25, TaskName: 'Early boot stage: flag leaf sheath extending', StartDate: new Date('04/09/2019'), + Duration: 2, Predecessor: '23FS' + }, + { + TaskID: 26, TaskName: 'Mid boot stage: flag leaf sheath just visibly swollen', StartDate: new Date('04/11/2019'), + Duration: 2, Predecessor: '25FS' + }, + { + TaskID: 27, TaskName: 'Late boot stage: flag leaf sheath swollen', StartDate: new Date('04/13/2019'), + Duration: 2, Predecessor: '26FS' + }, + { TaskID: 28, TaskName: 'Flag leaf sheath opening', StartDate: new Date('04/15/2019'), Duration: 2, Predecessor: '27FS' }, + { + TaskID: 29, TaskName: 'First awns visible (in awned forms only)', StartDate: new Date('04/17/2019'), + Duration: 2, Predecessor: '28FS' + }, + ] + }, + { + TaskID: 30, + TaskName: 'Inflorescence emergence, heading', + StartDate: new Date('04/18/2019'), + subtasks: [ + { + TaskID: 31, TaskName: 'Beginning of heading: tip of inflorescence emerged from sheath, first spikelet just visible', + StartDate: new Date('04/18/2019'), Duration: 0, Predecessor: '29FS' + }, + { TaskID: 32, TaskName: '20% of inflorescence emerged', StartDate: new Date('04/19/2019'), Duration: 3, Predecessor: '31FS' }, + { TaskID: 33, TaskName: '40% of inflorescence emerged', StartDate: new Date('04/22/2019'), Duration: 2, Predecessor: '32FS' }, + { + TaskID: 34, TaskName: 'Middle of heading: half of inflorescence emerged', StartDate: new Date('04/23/2019'), + Duration: 0, Predecessor: '33FS' + }, + { TaskID: 35, TaskName: '60% of inflorescence emerged', StartDate: new Date('04/24/2019'), Duration: 2, Predecessor: '34FS' }, + { TaskID: 36, TaskName: '80% of inflorescence emerged', StartDate: new Date('04/26/2019'), Duration: 3, Predecessor: '35FS' }, + { + TaskID: 37, TaskName: 'End of heading: inflorescence fully emerged', StartDate: new Date('04/28/2019'), + Duration: 0, Predecessor: '36FS' + }, + ] + }, + { + TaskID: 38, + TaskName: 'Flowering, anthesis', + StartDate: new Date('04/28/2019'), + subtasks: [ + { + TaskID: 39, TaskName: 'Beginning of flowering: first anthers visible', StartDate: new Date('04/28/2019'), + Duration: 0, Predecessor: '37FS' + }, + { + TaskID: 40, TaskName: 'Full flowering: 50% of anthers mature', StartDate: new Date('04/29/2019'), + Duration: 5, Predecessor: '39FS' + }, + { + TaskID: 41, TaskName: 'Spikelet have completed flowering', StartDate: new Date('05/04/2019'), + Duration: 5, Predecessor: '40FS' + }, + { TaskID: 42, TaskName: 'End of flowering', StartDate: new Date('05/08/2019'), Duration: 0, Predecessor: '41FS' }, + ] + }, + { + TaskID: 43, + TaskName: 'Development of fruit', + StartDate: new Date('05/08/2019'), + subtasks: [ + { + TaskID: 44, TaskName: 'Watery ripe: first grains have reached half their final size', + StartDate: new Date('05/08/2019'), Duration: 0, Predecessor: '42FS' + }, + { TaskID: 45, TaskName: 'Early milk', StartDate: new Date('05/09/2019'), Duration: 3, Predecessor: '44FS' }, + { + TaskID: 46, TaskName: 'Medium milk: grain content milky, grains reached final size,still green', + StartDate: new Date('05/12/2019'), Duration: 3, Predecessor: '45FS' + }, + { TaskID: 47, TaskName: 'Late milk', StartDate: new Date('05/15/2019'), Duration: 2, Predecessor: '46FS' }, + ] + }, + { + TaskID: 48, + TaskName: 'Ripening', + StartDate: new Date('05/17/2019'), + subtasks: [ + { TaskID: 49, TaskName: 'Early dough', StartDate: new Date('05/17/2019'), Duration: 6, Predecessor: '47FS' }, + { + TaskID: 50, TaskName: 'Soft dough: grain content soft but dry. Fingernail impression not held', + StartDate: new Date('05/23/2019'), Duration: 2, Predecessor: '49FS' + }, + { + TaskID: 51, TaskName: 'Hard dough: grain content solid. Fingernail impression held', + StartDate: new Date('05/25/2019'), Duration: 2, Predecessor: '50FS' + }, + { + TaskID: 52, TaskName: 'Fully ripe: grain hard, difficult to divide with thumbnail', + StartDate: new Date('05/27/2019'), Duration: 2, Predecessor: '51FS' + }, + ] + }, + { + TaskID: 53, + TaskName: 'Senescence', + StartDate: new Date('05/29/2019'), + subtasks: [ + { + TaskID: 54, TaskName: 'Over-ripe: grain very hard, cannot be dented by thumbnail', + StartDate: new Date('05/29/2019'), Duration: 3, Predecessor: '52FS' + }, + { TaskID: 55, TaskName: 'Grains loosening in day-time', StartDate: new Date('06/01/2019'), Duration: 1, Predecessor: '54FS' }, + { TaskID: 56, TaskName: 'Plant dead and collapsing', StartDate: new Date('06/02/2019'), Duration: 4, Predecessor: '55FS' }, + { TaskID: 57, TaskName: 'Harvested product', StartDate: new Date('06/06/2019'), Duration: 2, Predecessor: '56FS' }, + ] + }, +]; + +window.filteredData = [ + { + TaskID: 1, + TaskName: 'Launch and flight to lunar orbit', + StartDate: new Date('07/16/1969'), + subtasks: [ + { + TaskID: 2, TaskName: 'Apollo 11 blasts off from launch pad', StartDate: new Date('07/16/1969 03:32:00 AM'), + EndDate: new Date('07/16/1969 03:32:00 AM'), Duration: 0, + }, + { + TaskID: 3, TaskName: 'Entry to Earth’s orbit', StartDate: new Date('07/16/1969 03:32:00 AM'), + EndDate: new Date('07/16/1969 03:44:00 AM'), Predecessor: '2FS' + }, + { + TaskID: 4, TaskName: 'Travelling in earth’s orbit', StartDate: new Date('07/16/1969 03:44:00 AM'), + EndDate: new Date('07/16/1969 04:22:13 AM'), Predecessor: '3FS' + }, + { + TaskID: 5, TaskName: 'Trajectory change toward the Moon', StartDate: new Date('07/16/1969 04:22:13 AM'), + EndDate: new Date('07/16/1969 04:52:00 AM'), Predecessor: '4FS' + }, + { + TaskID: 6, TaskName: 'Extraction maneuver performed', StartDate: new Date('07/16/1969 04:52:00 AM'), + EndDate: new Date('07/16/1969 04:52:00 AM'), Predecessor: '5FS' + }, + { + TaskID: 7, TaskName: 'Travelling toward moon and entering into lunar orbit', StartDate: new Date('07/16/1969 04:52:00 AM'), + EndDate: new Date('07/16/1969 04:21:50 PM'), Predecessor: '6FS' + }, + { + TaskID: 8, TaskName: 'Midcourse correction, sharpening the course and testing the engine', + StartDate: new Date('07/16/1969 11:22:00 PM'), EndDate: new Date('07/17/1969 05:21:50 AM') + }, + { + TaskID: 9, TaskName: 'Reached half the distance spanning between earth and moon', + StartDate: new Date('07/17/1969 05:22:00 AM'), EndDate: new Date('07/17/1969 08:00:50 PM') + }, + { + TaskID: 10, TaskName: 'Reached 3/4th distance spanning between earth and moon', + StartDate: new Date('07/17/1969 8:02:00 PM'), EndDate: new Date('07/18/1969 04:21:50 PM') + }, + { + TaskID: 11, TaskName: 'Reached distance 45000 miles from moon', + StartDate: new Date('07/18/1969 11:22:00 PM'), EndDate: new Date('07/19/1969 05:21:50 PM') + }, + ] + }, + { + TaskID: 12, + TaskName: 'Lunar descent', + StartDate: new Date('07/19/1969 05:21:50 PM'), + subtasks: [ + { + TaskID: 13, TaskName: 'Lunar Orbiting (30 orbits)', StartDate: new Date('07/19/1969 05:21:50 PM'), + EndDate: new Date('07/20/1969 12:52:00 AM'), Predecessor: '11FS' + }, + { + TaskID: 14, TaskName: 'Landing site identified', StartDate: new Date('07/20/1969 12:52:00 AM'), + EndDate: new Date('07/20/1969 12:52:00 AM'), Predecessor: '13FS' + }, + { + TaskID: 15, TaskName: 'Eagle separated from Columbia.', StartDate: new Date('07/20/1969 05:44:00 PM'), + EndDate: new Date('07/20/1969 05:44:00 PM') + }, + { + TaskID: 16, TaskName: 'Eagle’s decent to Moon', StartDate: new Date('07/20/1969 05:44:00 PM'), + EndDate: new Date('07/20/1969 08:16:40 PM'), Predecessor: '15FS' + } + ] + }, + { + TaskID: 17, + TaskName: 'Landing', + StartDate: new Date('07/20/1969 08:17:40 PM'), + subtasks: [ + { + TaskID: 18, TaskName: 'Eagle’s touch down', StartDate: new Date('07/20/1969 08:17:40 PM'), + EndDate: new Date('07/20/1969 08:17:40 PM') + }, + { + TaskID: 19, TaskName: 'Radio communication and Performing post landing checklist', + StartDate: new Date('07/20/1969 08:17:40 PM'), EndDate: new Date('07/20/1969 11:43:00 PM'), Predecessor: '18FS' + }, + { + TaskID: 20, TaskName: 'Preparations for EVA (Extra Vehicular Activity)', + StartDate: new Date('07/20/1969 11:43:00 PM'), EndDate: new Date('07/21/1969 02:39:33 AM'), Predecessor: '19FS' + }, + { + TaskID: 21, TaskName: 'Hatch open and climbing down the moon', StartDate: new Date('07/21/1969 02:39:33 AM'), + EndDate: new Date('07/21/1969 02:56:15 AM'), Predecessor: '20FS' + }, + { + TaskID: 22, TaskName: 'Armstrong stepped down on the moon', StartDate: new Date('07/21/1969 02:56:15 AM'), + EndDate: new Date('07/21/1969 03:11:00 AM'), Predecessor: '21FS' + }, + ] + }, + { + TaskID: 23, + TaskName: 'Lunar surface operations', + StartDate: new Date('07/21/1969'), + subtasks: [ + { + TaskID: 24, TaskName: 'Soil sample collections', StartDate: new Date('07/21/1969 02:56:15 AM'), + EndDate: new Date('07/21/1969 03:11:00 AM') + }, + { + TaskID: 25, TaskName: 'Aldrin joined Armstrong', StartDate: new Date('07/21/1969 03:11:00 AM'), + EndDate: new Date('07/21/1969 03:41:00 AM'), Predecessor: '24FS' + }, + { + TaskID: 26, TaskName: 'Planted the Lunar Flag Assembly', StartDate: new Date('07/21/1969 03:41:00 AM'), + EndDate: new Date('07/21/1969 03:46:00 AM'), Predecessor: '25FS' + }, + { + TaskID: 27, TaskName: 'President Richard Nixon’s telephone-radio transmission ', + StartDate: new Date('07/21/1969 03:48:00 AM'), EndDate: new Date('07/21/1969 03:51:00 AM') + }, + { + TaskID: 28, TaskName: 'Collect rock samples, photos and other mission controls', + StartDate: new Date('07/21/1969 03:52:00 AM'), EndDate: new Date('07/21/1969 04:50:00 AM') + }, + ] + }, + { + TaskID: 29, + TaskName: 'Lunar ascent', + StartDate: new Date('07/21/1969'), + subtasks: [ + { + TaskID: 30, TaskName: 'Climbing the eagle to ascent', StartDate: new Date('07/21/1969 04:51:00 AM'), + EndDate: new Date('07/21/1969 05:00:00 AM') + }, + { + TaskID: 31, TaskName: 'Hatch closing', StartDate: new Date('07/21/1969 05:01:00 AM'), + EndDate: new Date('07/21/1969 05:01:00 AM'), Predecessor: '30FS' + }, + { + TaskID: 32, TaskName: 'Final housekeeping', StartDate: new Date('07/21/1969 05:02:00 AM'), + EndDate: new Date('07/21/1969 08:00:00 AM') + }, + { + TaskID: 33, TaskName: 'Resting of astronauts', StartDate: new Date('07/21/1969 08:00:00 AM'), + EndDate: new Date('07/21/1969 03:00:00 PM'), Predecessor: '32FS' + }, + { + TaskID: 34, TaskName: 'Preparation for lift off and Ascent engine started', StartDate: new Date('07/21/1969 03:00:00 PM'), + EndDate: new Date('07/21/1969 05:54:00 PM'), Predecessor: '33FS' + }, + { + TaskID: 35, TaskName: 'Eagle lifted off', StartDate: new Date('07/21/1969 05:54:00 PM'), + EndDate: new Date('07/21/1969 05:54:00 PM'), Predecessor: '34FS' + }, + { + TaskID: 36, TaskName: 'Eagle’s travel toward Columbia', StartDate: new Date('07/21/1969 05:54:00 PM'), + EndDate: new Date('07/21/1969 09:23:00 PM'), Predecessor: '35FS' + }, + ] + }, + { + TaskID: 37, + TaskName: 'Return', + StartDate: new Date('07/21/1969 09:24:00 PM'), + subtasks: [ + { + TaskID: 38, TaskName: 'Eagle docked with Columbia', StartDate: new Date('07/21/1969 09:24:00 PM'), + EndDate: new Date('07/21/1969 09:35:00 PM') + }, + { + TaskID: 39, TaskName: 'Eagle’s ascent stage jettisoned into lunar orbit', StartDate: new Date('07/21/1969 09:35:00 PM'), + EndDate: new Date('07/21/1969 11:41:00 PM'), Predecessor: '38FS' + }, + ] + }, + { + TaskID: 40, + TaskName: 'Decent toward earth and Splashdown', + StartDate: new Date('07/21/1969'), + subtasks: [ + { + TaskID: 41, TaskName: 'Spacecraft reaches 1/4th distance spanning between moon and earth', + StartDate: new Date('07/21/1969 11:50:00 PM'), EndDate: new Date('07/22/1969 04:40:00 PM') + }, + { + TaskID: 42, TaskName: 'Spacecraft travels to midway point of journey', + StartDate: new Date('07/22/1969 04:40:00 PM'), EndDate: new Date('07/23/1969 04:00:00 PM'), Predecessor: '41FS' + }, + { + TaskID: 43, TaskName: 'Spacecraft travels to 3/4th point of journey', StartDate: new Date('07/23/1969 04:40:00 PM'), + EndDate: new Date('07/24/1969 10:00:00 AM'), Predecessor: '42FS' + }, + { + TaskID: 44, TaskName: 'Crew prepares for splashdown', StartDate: new Date('07/24/1969 11:47:00 AM'), + EndDate: new Date('07/24/1969 04:20:00 PM') + }, + { + TaskID: 45, TaskName: 'Command and service modules separates', StartDate: new Date('07/24/1969 04:20:00 PM'), + EndDate: new Date('07/24/1969 04:35:00 PM'), Predecessor: '44FS' + }, + { + TaskID: 46, TaskName: 'Command module re-enters the Earth’s atmosphere', StartDate: new Date('07/24/1969 04:35:00 PM'), + EndDate: new Date('07/24/1969 04:50:00 PM'), Predecessor: '45FS' + }, + { + TaskID: 47, TaskName: 'Spacecraft splashes near USS hornet', StartDate: new Date('07/24/1969 04:51:00 PM'), + EndDate: new Date('07/24/1969 04:51:00 PM') + }, + ] + } +]; + +window.customizedData = [ + { + TaskId: 1, TaskName: 'Oscar moments', Performance: 'Jimmy kimmel hosts the show', + StartDate: new Date('03/05/2018 06:00:00 PM'), EndDate: new Date('03/05/2018 06:15:00 PM') + }, + { + TaskId: 2, TaskName: 'Actor in a supporting role', Predecessor: '1FS', + StartDate: new Date('03/05/2018 06:16:00 PM'), EndDate: new Date('03/05/2018 06:25:00 PM'), + Winner: 'Sam Rockwell', Movie: 'Three Billboards Outside Ebbing, Missouri.' + }, + { + TaskId: 3, TaskName: 'Hair and makeup', Movie: 'Darkest Hour', Predecessor: '2FS', + StartDate: new Date('03/05/2018 06:26:00 PM'), EndDate: new Date('03/05/2018 06:32:00 PM') + }, + { + TaskId: 4, TaskName: 'Costume design', Winner: 'Mark Bridges', Movie: 'Phantom Thread', Predecessor: '3FS', + StartDate: new Date('03/05/2018 06:33:00 PM'), EndDate: new Date('03/05/2018 06:40:00 PM') + }, + { + TaskId: 5, TaskName: 'Documentary feature', Winner: 'Bryan Fogel', Movie: ' Icarus', Predecessor: '4FS', + StartDate: new Date('03/05/2018 06:41:00 PM'), EndDate: new Date('03/05/2018 06:58:00 PM') + }, + { + TaskId: 6, TaskName: 'Best sound editing and sound mixing', Winner: 'Richard King and Alex Gibson', Movie: 'Dunkirk', + StartDate: new Date('03/05/2018 06:59:00 PM'), EndDate: new Date('03/05/2018 07:10:00 PM'), Predecessor: '5FS' + }, + { + TaskId: 7, TaskName: 'Production design', Movie: 'The Shape of Water', Predecessor: '6FS', + StartDate: new Date('03/05/2018 07:11:00 PM'), EndDate: new Date('03/05/2018 07:15:00 PM') + }, + { + TaskId: 8, TaskName: 'Oscar performance', Performance: 'Second performance of the night is "Remember Me" from Coco', + StartDate: new Date('03/05/2018 07:16:00 PM'), EndDate: new Date('03/05/2018 07:23:00 PM'), Predecessor: '7FS' + }, + { + TaskId: 9, TaskName: 'Best foreign language film goes', Movie: 'A Fantastic Woman', Predecessor: '8FS', + StartDate: new Date('03/05/2018 07:24:00 PM'), EndDate: new Date('03/05/2018 07:29:00 PM') + }, + { + TaskId: 10, TaskName: 'Best supporting actress', Winner: 'Allison Janney', Movie: 'I, Tonya', + StartDate: new Date('03/05/2018 07:30:00 PM'), EndDate: new Date('03/05/2018 07:35:00 PM'), Predecessor: '9FS' + }, + { + TaskId: 11, TaskName: 'Best animated short', Winner: 'Kobe Bryant', Movie: 'Dear Basketball', + StartDate: new Date('03/05/2018 07:36:00 PM'), EndDate: new Date('03/05/2018 07:45:00 PM'), Predecessor: '10FS' + }, + { + TaskId: 12, TaskName: 'Award for best animated feature.', Movie: 'Coco', Predecessor: '11FS', + StartDate: new Date('03/05/2018 07:46:00 PM'), EndDate: new Date('03/05/2018 07:52:00 PM') + }, + { + TaskId: 13, TaskName: 'Best visual effects.', Movie: 'Blade Runner 2049', Predecessor: '12FS', + StartDate: new Date('03/05/2018 07:53:00 PM'), EndDate: new Date('03/05/2018 07:56:00 PM') + }, + { + TaskId: 14, TaskName: 'Achievement in film editing', Movie: 'Dunkirk', Predecessor: '13FS', + StartDate: new Date('03/05/2018 07:57:00 PM'), EndDate: new Date('03/05/2018 07:59:00 PM') + }, + { + TaskId: 15, TaskName: 'Oscar moments', Performance: 'Jimmy Kimmel surprises moviegoers along with celebrities', + StartDate: new Date('03/05/2018 08:00:00 PM'), EndDate: new Date('03/05/2018 08:09:00 PM'), Predecessor: '14FS' + }, + { + TaskId: 16, TaskName: 'Best documentary short', Movie: 'Heaven is a Traffic Jam on the 405', Predecessor: '15FS', + StartDate: new Date('03/05/2018 08:10:00 PM'), EndDate: new Date('03/05/2018 08:12:00 PM') + }, + { + TaskId: 17, TaskName: 'Best live action short film', Movie: 'The Silent Child', Predecessor: '16FS', + StartDate: new Date('03/05/2018 08:13:00 PM'), EndDate: new Date('03/05/2018 08:15:00 PM') + }, + { + TaskId: 18, TaskName: 'Oscar performance', + Performance: 'Jimmy Kimmel surprCommon and Andra Day performs "Stand Up for Something" by "Marshall"', + StartDate: new Date('03/05/2018 08:16:00 PM'), EndDate: new Date('03/05/2018 08:25:00 PM'), Predecessor: '17FS' + }, + { + TaskId: 19, TaskName: 'Oscar moments', + Performance: 'The Oscars are showcasing the #MeToo and #TimesUp movements with a montage and interviews with actors and filmmakers', + StartDate: new Date('03/05/2018 08:26:00 PM'), EndDate: new Date('03/05/2018 08:29:00 PM'), Predecessor: '18FS' + }, + { + TaskId: 20, TaskName: 'Oscar for best adapted screenplay', Winner: 'James Ivory', Movie: 'Call Me By Your Name', + StartDate: new Date('03/05/2018 08:30:00 PM'), EndDate: new Date('03/05/2018 08:35:00 PM'), Predecessor: '19FS' + }, + { + TaskId: 21, TaskName: 'Oscar for best original screenplay', Winner: 'Jordan Peele', Movie: 'Get Out', + StartDate: new Date('03/05/2018 08:36:00 PM'), EndDate: new Date('03/05/2018 08:44:00 PM'), Predecessor: '20FS' + }, + { + TaskId: 22, TaskName: 'Oscar moments', + Performance: 'Who’s trending on Twitter at the Oscars? Actors Timothée Chalamet, Chadwick Boseman,' + + 'Tom Holland, Lupita Nyong’o and Adam Rippon.', + StartDate: new Date('03/05/2018 08:40:00 PM'), EndDate: new Date('03/05/2018 08:45:00 PM'), Predecessor: '21FS' + }, + { + TaskId: 23, TaskName: 'Best cinematography', Winner: 'Roger A. Deakins', Movie: 'Blade Runner 2049', + StartDate: new Date('03/05/2018 08:46:00 PM'), EndDate: new Date('03/05/2018 08:48:00 PM'), Predecessor: '22FS' + }, + { + TaskId: 24, TaskName: 'Oscar performance', + Performance: 'Keala Settle performs the nominated song "This is Me" from "The Greatest Showman".', + StartDate: new Date('03/05/2018 08:49:00 PM'), EndDate: new Date('03/05/2018 08:54:00 PM'), Predecessor: '23FS' + }, + { + TaskId: 25, TaskName: 'Best original score', Movie: 'The Shape of Water', Predecessor: '24FS', + StartDate: new Date('03/05/2018 08:55:00 PM'), EndDate: new Date('03/05/2018 08:59:00 PM') + }, + { + TaskId: 26, TaskName: 'Award for original song', Winner: 'Remember Me', Movie: 'Coco', Predecessor: '25FS', + StartDate: new Date('03/05/2018 09:00:00 PM'), EndDate: new Date('03/05/2018 09:07:00 PM') + }, + { + TaskId: 27, TaskName: 'Oscar moments', Performance: 'Time to pay tribute to those in the cinema world we lost last year', + StartDate: new Date('03/05/2018 09:05:00 PM'), EndDate: new Date('03/05/2018 09:11:00 PM'), Predecessor: '26FS' + }, + { + TaskId: 28, TaskName: 'Oscar for best director', Winner: 'Guillermo del Toro', Movie: 'The Shape of Water', + StartDate: new Date('03/05/2018 09:12:00 PM'), EndDate: new Date('03/05/2018 09:19:00 PM'), Predecessor: '27FS' + }, + { + TaskId: 29, TaskName: 'Best actor in a leading role', Winner: 'Gary Oldman', Movie: 'The Shape of Water', + StartDate: new Date('03/05/2018 09:20:00 PM'), EndDate: new Date('03/05/2018 09:29:00 PM'), Predecessor: '28FS' + }, + { + TaskId: 30, TaskName: 'Best leading actress', Winner: 'Frances McDormand', Movie: 'Three Billboards Outside Ebbing, Missouri', + StartDate: new Date('03/05/2018 09:30:00 PM'), EndDate: new Date('03/05/2018 09:44:00 PM'), Predecessor: '29FS' + }, + { + TaskId: 31, TaskName: 'Oscar for best picture.', Movie: 'The Shape of Water', Predecessor: '30FS', + StartDate: new Date('03/05/2018 09:45:00 PM'), EndDate: new Date('03/05/2018 10:00:00 PM') + }, + { + TaskId: 32, TaskName: 'Oscar moments', Performance: '90th Academy awards wind-up', Predecessor: '31FS', + StartDate: new Date('03/05/2018 10:00:00 PM'), EndDate: new Date('03/05/2018 10:00:00 PM'), Duration: 0 + } +]; + +window.projectResources = [ + { resourceId: 1, resourceName: 'Project Manager' }, + { resourceId: 2, resourceName: 'Software Analyst' }, + { resourceId: 3, resourceName: 'Developer' }, + { resourceId: 4, resourceName: 'Testing Engineer' } +]; + +window.projectData = [ + { + taskID: 1, + taskName: 'Project schedule', + startDate: new Date('02/08/2019'), + endDate: new Date('03/15/2019'), + subtasks: [ + { + taskID: 2, + taskName: 'Planning', + startDate: new Date('02/08/2019'), + endDate: new Date('02/12/2019'), + subtasks: [ + { + taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/08/2019'), + endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1] + }, + { + taskID: 4, taskName: 'Plan budget', startDate: new Date('02/08/2019'), + endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1] + }, + { + taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/08/2019'), + endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1] + }, + { + taskID: 6, taskName: 'Planning complete', startDate: new Date('02/10/2019'), + endDate: new Date('02/10/2019'), duration: 0, predecessor: '3FS,4FS,5FS' + } + ] + }, { + taskID: 7, + taskName: 'Design', + startDate: new Date('02/15/2019'), + endDate: new Date('02/19/2019'), + subtasks: [ + { + taskID: 8, taskName: 'Software specification', startDate: new Date('02/15/2019'), + endDate: new Date('02/17/2019'), duration: 3, progress: '60', predecessor: '6FS', resourceId: [2] + }, + { + taskID: 9, taskName: 'Develop prototype', startDate: new Date('02/15/2019'), + endDate: new Date('02/17/2019'), duration: 3, progress: '100', predecessor: '6FS', resourceId: [3] + }, + { + taskID: 10, taskName: 'Get approval from customer', startDate: new Date('02/18/2019'), + endDate: new Date('02/19/2019'), duration: 2, progress: '100', predecessor: '9FS', resourceId: [1] + }, + { + taskID: 11, taskName: 'Design complete', startDate: new Date('02/17/2019'), + endDate: new Date('02/17/2019'), duration: 0, predecessor: '10FS' + } + ] + }, + { + taskID: 12, + taskName: 'Implementation phase', + startDate: new Date('02/25/2019'), + endDate: new Date('03/05/2019'), + subtasks: [ + { + taskID: 13, + taskName: 'Phase 1', + startDate: new Date('02/25/2019'), + endDate: new Date('03/07/2019'), + subtasks: [{ + taskID: 14, + taskName: 'Implementation module 1', + startDate: new Date('02/25/2019'), + endDate: new Date('03/07/2019'), + subtasks: [ + { + taskID: 15, taskName: 'Development task 1', startDate: new Date('02/22/2019'), + endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3] + }, + { + taskID: 16, taskName: 'Development task 2', startDate: new Date('02/22/2019'), + endDate: new Date('02/24/2019'), duration: 3, progress: '50', predecessor: '11FS', resourceId: [3] + }, + { + taskID: 17, taskName: 'Testing', startDate: new Date('02/25/2019'), + endDate: new Date('02/26/2019'), duration: 2, progress: '0', predecessor: '15FS,16FS', resourceId: [4] + }, + { + taskID: 18, taskName: 'Bug fix', startDate: new Date('03/01/2019'), + endDate: new Date('03/02/2019'), duration: 2, progress: '0', predecessor: '17FS', resourceId: [3] + }, + { + taskID: 19, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'), + endDate: new Date('03/07/2019'), duration: 2, progress: '0', predecessor: '18FS', resourceId: [1] + }, + { + taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('03/05/2019'), + endDate: new Date('03/05/2019'), duration: 0, predecessor: '19FS' + } + + ] + }] + }, + + { + taskID: 21, + taskName: 'Phase 2', + startDate: new Date('02/25/2019'), + endDate: new Date('03/05/2019'), + subtasks: [{ + taskID: 22, + taskName: 'Implementation Module 2', + startDate: new Date('02/25/2019'), + endDate: new Date('03/05/2019'), + subtasks: [ + { + taskID: 23, taskName: 'Development task 1', startDate: new Date('02/22/2019'), + endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3] + }, + { + taskID: 24, taskName: 'Development task 2', startDate: new Date('02/22/2019'), + endDate: new Date('02/25/2019'), duration: 4, progress: '50', resourceId: [3] + }, + { + taskID: 25, taskName: 'Testing', startDate: new Date('02/26/2019'), + endDate: new Date('03/01/2019'), duration: 2, progress: '0', predecessor: '23FS,24FS', resourceId: [4] + }, + { + taskID: 26, taskName: 'Bug fix', startDate: new Date('03/02/2019'), + endDate: new Date('03/03/2019'), duration: 2, progress: '0', predecessor: '25FS', resourceId: [3] + }, + { + taskID: 27, taskName: 'Customer review meeting', startDate: new Date('03/07/2019'), + endDate: new Date('03/09/2019'), duration: 2, progress: '0', predecessor: '26FS', resourceId: [1] + }, + { + taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('03/03/2019'), + endDate: new Date('03/03/2019'), duration: 0, predecessor: '27FS' + } + + ] + }] + }, + + { + taskID: 29, + taskName: 'Phase 3', + startDate: new Date('02/25/2019'), + endDate: new Date('03/07/2019'), + subtasks: [{ + taskID: 30, + taskName: 'Implementation module 3', + startDate: new Date('02/25/2019'), + endDate: new Date('03/07/2019'), + subtasks: [ + { + taskID: 31, taskName: 'Development task 1', startDate: new Date('02/22/2019'), + endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3] + }, + { + taskID: 32, taskName: 'Development task 2', startDate: new Date('02/22/2019'), + endDate: new Date('02/24/2019'), duration: 3, progress: '50', resourceId: [3] + }, + { + taskID: 33, taskName: 'Testing', startDate: new Date('02/25/2019'), endDate: new Date('02/26/2019'), + duration: 2, progress: '0', predecessor: '31FS,32FS', resourceId: [4] + }, + { + taskID: 34, taskName: 'Bug fix', startDate: new Date('03/01/2019'), endDate: new Date('03/05/2019'), + duration: 2, progress: '0', predecessor: '33FS', resourceId: [3] + }, + { + taskID: 35, taskName: 'Customer review meeting', startDate: new Date('03/03/2019'), + endDate: new Date('03/04/2019'), duration: 2, progress: '0', predecessor: '34FS', + resourceId: [1] + }, + { + taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('03/02/2019'), + endDate: new Date('03/02/2019'), duration: 0, predecessor: '35FS' + }, + + ] + }] + } + ] + }, + { + taskID: 37, taskName: 'Integration', startDate: new Date('03/08/2019'), endDate: new Date('03/10/2019'), duration: 3, + progress: '0', predecessor: '20FS,28FS,36FS', resourceId: [3] + }, + { + taskID: 38, taskName: 'Final testing', startDate: new Date('03/11/2019'), endDate: new Date('03/12/2019'), duration: 2, + progress: '0', predecessor: '37FS', resourceId: [4] + }, + { + taskID: 39, taskName: 'Final delivery', startDate: new Date('03/10/2019'), endDate: new Date('03/10/2019'), + duration: 0, predecessor: '38FS' + } + ] + } +]; + +window.baselineData = [ + { + TaskId: 1, TaskName: 'Receive vehicle and create job card', BaselineStartDate: new Date('03/05/2018 10:00:00 AM'), + BaselineEndDate: new Date('03/05/2018 10:00:00 AM'), StartDate: new Date('03/05/2018 10:00:00 AM'), + EndDate: new Date('03/05/2018 10:00:00 AM') + }, + { + TaskId: 2, TaskName: 'Allot mechanic and send vehicle to service bay', BaselineStartDate: new Date('03/05/2018 10:00:00 AM'), + BaselineEndDate: new Date('03/05/2018 10:15:00 AM'), StartDate: new Date('03/05/2018 10:15:00 AM'), + EndDate: new Date('03/05/2018 10:20:00 AM') + }, + { + TaskId: 3, TaskName: 'Change the receive vehicle and create job cardengine oil', + BaselineStartDate: new Date('03/05/2018 10:15:00 AM'), + BaselineEndDate: new Date('03/05/2018 10:45:00 AM'), StartDate: new Date('03/05/2018 10:20:00 AM'), + EndDate: new Date('03/05/2018 10:35:00 AM') + }, + { + TaskId: 4, TaskName: 'Replace the oil filter', BaselineStartDate: new Date('03/05/2018 10:45:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:15:00 AM'), StartDate: new Date('03/05/2018 10:35:00 AM'), + EndDate: new Date('03/05/2018 11:00:00 AM') + }, + { + TaskId: 5, TaskName: 'Replace the air filter', BaselineStartDate: new Date('03/05/2018 10:45:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:15:00 AM'), StartDate: new Date('03/05/2018 10:35:00 AM'), + EndDate: new Date('03/05/2018 11:00:00 AM') + }, + { + TaskId: 6, TaskName: 'Replace the fuel filter', BaselineStartDate: new Date('03/05/2018 11:15:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:25:00 AM'), StartDate: new Date('03/05/2018 11:00:00 AM'), + EndDate: new Date('03/05/2018 11:20:00 AM') + }, + { + TaskId: 7, TaskName: 'Replace the cabin filter', BaselineStartDate: new Date('03/05/2018 11:00:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:20:00 AM'), StartDate: new Date('03/05/2018 11:00:00 AM'), + EndDate: new Date('03/05/2018 11:25:00 AM') + }, + { + TaskId: 8, TaskName: 'Replace the spark plugs', BaselineStartDate: new Date('03/05/2018 11:00:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:30:00 AM'), StartDate: new Date('03/05/2018 11:25:00 AM'), + EndDate: new Date('03/05/2018 11:45:00 AM') + }, + { + TaskId: 9, TaskName: 'Check level and refill brake fluid/clutch fluid', BaselineStartDate: new Date('03/05/2018 11:20:00 AM'), + BaselineEndDate: new Date('03/05/2018 11:40:00 AM'), StartDate: new Date('03/05/2018 11:30:00 AM'), + EndDate: new Date('03/05/2018 11:50:00 AM') + }, + { + TaskId: 10, TaskName: 'Check Brake Pads/Liners, Brake Discs/Drums, and replace if worn out.', + BaselineStartDate: new Date('03/05/2018 11:40:00 AM'), + BaselineEndDate: new Date('03/05/2018 12:00:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'), + EndDate: new Date('03/05/2018 12:20:00 PM') + }, + { + TaskId: 11, TaskName: 'Check level and refill power steering fluid', BaselineStartDate: new Date('03/05/2018 11:40:00 AM'), + BaselineEndDate: new Date('03/05/2018 12:00:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'), + EndDate: new Date('03/05/2018 12:15:00 PM') + }, + { + TaskId: 12, TaskName: 'Check level and refill Automatic/Manual Transmission Fluid', + BaselineStartDate: new Date('03/05/2018 12:00:00 PM'), + BaselineEndDate: new Date('03/05/2018 12:35:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'), + EndDate: new Date('03/05/2018 12:20:00 PM') + }, + { + TaskId: 13, TaskName: 'Grease and lubricate components', BaselineStartDate: new Date('03/05/2018 12:20:00 PM'), + BaselineEndDate: new Date('03/05/2018 12:35:00 PM'), StartDate: new Date('03/05/2018 12:20:00 PM'), + EndDate: new Date('03/05/2018 12:45:00 PM') + }, + { + TaskId: 14, TaskName: 'Inspect and replace the timing belt or timing chain if needed', + BaselineStartDate: new Date('03/05/2018 12:35:00 PM'), + BaselineEndDate: new Date('03/05/2018 1:00:00 PM'), StartDate: new Date('03/05/2018 12:45:00 PM'), + EndDate: new Date('03/05/2018 1:00:00 PM') + }, + { + TaskId: 15, TaskName: 'Wheel balancing', BaselineStartDate: new Date('03/05/2018 1:00:00 PM'), + BaselineEndDate: new Date('03/05/2018 1:20:00 PM'), StartDate: new Date('03/05/2018 1:00:00 PM'), + EndDate: new Date('03/05/2018 1:45:00 PM') + }, + { + TaskId: 16, TaskName: 'Wheel alignment', BaselineStartDate: new Date('03/05/2018 1:20:00 PM'), + BaselineEndDate: new Date('03/05/2018 1:45:00 PM'), StartDate: new Date('03/05/2018 1:45:00 PM'), + EndDate: new Date('03/05/2018 2:45:00 PM') + }, + { + TaskId: 17, TaskName: 'Check for proper operation of all lights, wipers etc.', BaselineStartDate: new Date('03/05/2018 1:50:00 PM'), + BaselineEndDate: new Date('03/05/2018 02:30:00 PM'), StartDate: new Date('03/05/2018 02:45:00 PM'), + EndDate: new Date('03/05/2018 03:30:00 PM') + }, + { + TaskId: 18, TaskName: 'Check for any Error codes in the ECU and take corrective action.', + BaselineStartDate: new Date('03/05/2018 2:30:00 PM'), + BaselineEndDate: new Date('03/05/2018 3:30:00 PM'), StartDate: new Date('03/05/2018 03:30:00 PM'), + EndDate: new Date('03/05/2018 04:15:00 PM') + }, + { + TaskId: 19, TaskName: 'Use scan tool read trouble code', BaselineStartDate: new Date('03/05/2018 03:30:00 PM'), + BaselineEndDate: new Date('03/05/2018 04:45:00 PM'), StartDate: new Date('03/05/2018 04:15:00 PM'), + EndDate: new Date('03/05/2018 04:45:00 PM') + }, + { + TaskId: 20, TaskName: 'Exterior washing', BaselineStartDate: new Date('03/05/2018 04:45:00 PM'), + BaselineEndDate: new Date('03/05/2018 05:15:00 PM'), StartDate: new Date('03/05/2018 04:45:00 PM'), + EndDate: new Date('03/05/2018 05:30:00 PM') + }, + { + TaskId: 21, TaskName: 'Interior vacuuming', BaselineStartDate: new Date('03/05/2018 05:15:00 PM'), + BaselineEndDate: new Date('03/05/2018 05:45:00 PM'), StartDate: new Date('03/05/2018 05:30:00 PM'), + EndDate: new Date('03/05/2018 06:00:00 PM') + }, + { + TaskId: 22, TaskName: 'Final service inspection', BaselineStartDate: new Date('03/05/2018 05:45:00 PM'), + BaselineEndDate: new Date('03/05/2018 06:00:00 PM'), StartDate: new Date('03/05/2018 06:00:00 PM'), + EndDate: new Date('03/05/2018 06:30:00 PM') + }, + { + TaskId: 23, TaskName: 'Vehicle handover', BaselineStartDate: new Date('03/05/2018 06:00:00 PM'), + BaselineEndDate: new Date('03/05/2018 06:00:00 PM'), StartDate: new Date('03/05/2018 06:30:00 PM'), + EndDate: new Date('03/05/2018 06:30:00 PM') + } +]; + +window.unscheduledData = [ + { + TaskId: 1, TaskName: 'Task 1', StartDate: new Date('01/03/2019'), + EndDate: new Date('01/08/2019'), Duration: '5', TaskType: '' + }, + { + TaskId: 2, TaskName: 'Task 2', Duration: '5', TaskType: 'Task with duration only' + }, + { + TaskId: 3, TaskName: 'Task 3', StartDate: new Date('01/03/2019'), TaskType: 'Task with start date only' + }, + { + TaskId: 4, TaskName: 'Task 4', EndDate: new Date('01/08/2019'), TaskType: 'Task with end date only' + }, +]; diff --git a/src/gantt/default-stack.json b/src/gantt/default-stack.json new file mode 100644 index 00000000..90ab892a --- /dev/null +++ b/src/gantt/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: projectNewData,\n height: '450px',\n allowSelection: true,\n highlightWeekends: true,\n taskFields: {\n id: 'TaskID',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n duration: 'Duration',\n progress: 'Progress',\n dependency: 'Predecessor',\n child: 'subtasks'\n },\n eventMarkers: [\n {\n day: new Date('04/09/2019'),\n label: 'Research phase'\n }, {\n day: new Date('04/30/2019'),\n label: 'Design phase'\n }, {\n day: new Date('05/23/2019'),\n label: 'Production phase'\n }, {\n day: new Date('06/20/2019'),\n label: 'Sales and marketing phase'\n }\n ],\n labelSettings: {\n leftLabel: 'TaskName'\n },\n projectStartDate: new Date('03/24/2019'),\n projectEndDate: new Date('07/06/2019')\n });\n ganttChart.appendTo('#Default');\n"} \ No newline at end of file diff --git a/src/gantt/default.html b/src/gantt/default.html new file mode 100644 index 00000000..0097c632 --- /dev/null +++ b/src/gantt/default.html @@ -0,0 +1,23 @@ +
        +
        +
        +
        +
        +
        + +
        +

        This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a + conceptual model to a sellable product.

        +
        + +
        +

        + In this example, you can see how to render a Gantt chart with the provided data source. The default timeline + view week-day mode is applied to Gantt chart. The dependency lines are enabled in this example to represent the + execution order or the hierarchy between the phases. +

        +

        + Tooltip is enabled for all the UI in this example. To see the tooltip in action, hover the mouse over or tap + taskbars, timeline units and dependency lines in touch enabled devices. +

        +
        \ No newline at end of file diff --git a/src/gantt/default.js b/src/gantt/default.js new file mode 100644 index 00000000..27b74db3 --- /dev/null +++ b/src/gantt/default.js @@ -0,0 +1,39 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: projectNewData, + height: '450px', + allowSelection: true, + highlightWeekends: true, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Predecessor', + child: 'subtasks' + }, + eventMarkers: [ + { + day: new Date('04/09/2019'), + label: 'Research phase' + }, { + day: new Date('04/30/2019'), + label: 'Design phase' + }, { + day: new Date('05/23/2019'), + label: 'Production phase' + }, { + day: new Date('06/20/2019'), + label: 'Sales and marketing phase' + } + ], + labelSettings: { + leftLabel: 'TaskName' + }, + projectStartDate: new Date('03/24/2019'), + projectEndDate: new Date('07/06/2019') + }); + ganttChart.appendTo('#Default'); +}; \ No newline at end of file diff --git a/src/gantt/editing-stack.json b/src/gantt/editing-stack.json new file mode 100644 index 00000000..9433f3bf --- /dev/null +++ b/src/gantt/editing-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: editingData,\n dateFormat: 'MMM dd, y',\n taskFields: {\n id: 'TaskID',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n duration: 'Duration',\n progress: 'Progress',\n dependency: 'Predecessor',\n child: 'subtasks',\n notes: 'info',\n resourceInfo: 'resources'\n },\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n allowTaskbarEditing: true,\n showDeleteConfirmDialog: true\n },\n toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],\n allowSelection: true,\n gridLines: 'Both',\n height: '450px',\n treeColumnIndex: 1,\n resourceNameMapping: 'resourceName',\n resourceIDMapping: 'resourceId',\n resources: editingResources,\n highlightWeekends: true,\n timelineSettings: {\n topTier: {\n unit: 'Week',\n format: 'MMM dd, y',\n },\n bottomTier: {\n unit: 'Day',\n },\n },\n columns: [\n { field: 'TaskID', width: 50 },\n { field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' },\n { field: 'StartDate' },\n { field: 'Duration' },\n { field: 'Progress' },\n { field: 'Predecessor' }\n ],\n eventMarkers: [\n { day: '4/17/2019', label: 'Project approval and kick-off' },\n { day: '5/3/2019', label: 'Foundation inspection' },\n { day: '6/7/2019', label: 'Site manager inspection' },\n { day: '7/16/2019', label: 'Property handover and sign-off' },\n ],\n labelSettings: {\n leftLabel: 'TaskName',\n rightLabel: '${if(taskData.subtasks)}${taskData.Duration} ${else if(resources)}${resources}${/if}'\n },\n editDialogFields: [\n { type: 'General', headerText: 'General'},\n { type: 'Dependency' },\n { type: 'Resources' },\n { type: 'Notes' },\n ],\n projectStartDate: new Date('03/25/2019'),\n projectEndDate: new Date('07/28/2019'),\n });\n ganttChart.appendTo('#Editing');\n"} \ No newline at end of file diff --git a/src/gantt/editing.html b/src/gantt/editing.html new file mode 100644 index 00000000..8b6f8cc4 --- /dev/null +++ b/src/gantt/editing.html @@ -0,0 +1,39 @@ +
        +
        +
        +
        + +
        +
        + +
        +

        This sample demonstrates the various phases involved in constructing a residential house, from testing the soil to + handing over the fully constructed property to the owner. This also demonstrates CRUD operations in a Gantt chart. + You can perform CRUD operations as follows, +

      • Add - To add new task, click Add toolbar button
        • +
      • Edit - To edit a task, double click a row or double click a taskbar or click toolbar Edit + button after + selected a row
        • +
      • Delete - To delete a task, click toolbar Delete button after selected a row
        • +
      • Update,Cancel - You can save or discard changes by click toolbar Update and Cancel button + respectively
        • +

        +
        + +
        +

        + This CRUD operations can be configured in Gantt chart using editSettings and + allowTaskbarEditing. Gantt chart + has two modes to manipulate the datasource +

      • Auto
        • +
      • Dialog
        • + In this demo, Auto mode is enabled for editing. On the TreeGrid side, you can start editing any row + by double + clicking on it or clicking on toolbar’s Edit button, then the currently selected row will be changed to edited + state. On the chart side, you can edit the tasks using edit dialog by double clicking on the taskbars and you + can edit the dependency connector lines using drag and drop action with connector line points available on the + either side of taskbar. +

        +
        \ No newline at end of file diff --git a/src/gantt/editing.js b/src/gantt/editing.js new file mode 100644 index 00000000..7d5dda81 --- /dev/null +++ b/src/gantt/editing.js @@ -0,0 +1,70 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: editingData, + dateFormat: 'MMM dd, y', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Predecessor', + child: 'subtasks', + notes: 'info', + resourceInfo: 'resources' + }, + editSettings: { + allowAdding: true, + allowEditing: true, + allowDeleting: true, + allowTaskbarEditing: true, + showDeleteConfirmDialog: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'], + allowSelection: true, + gridLines: 'Both', + height: '450px', + treeColumnIndex: 1, + resourceNameMapping: 'resourceName', + resourceIDMapping: 'resourceId', + resources: editingResources, + highlightWeekends: true, + timelineSettings: { + topTier: { + unit: 'Week', + format: 'MMM dd, y', + }, + bottomTier: { + unit: 'Day', + }, + }, + columns: [ + { field: 'TaskID', width: 50 }, + { field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' }, + { field: 'StartDate' }, + { field: 'Duration' }, + { field: 'Progress' }, + { field: 'Predecessor' } + ], + eventMarkers: [ + { day: '4/17/2019', label: 'Project approval and kick-off' }, + { day: '5/3/2019', label: 'Foundation inspection' }, + { day: '6/7/2019', label: 'Site manager inspection' }, + { day: '7/16/2019', label: 'Property handover and sign-off' }, + ], + labelSettings: { + leftLabel: 'TaskName', + rightLabel: '${if(taskData.subtasks)}${taskData.Duration} ${else if(resources)}${resources}${/if}' + }, + editDialogFields: [ + { type: 'General', headerText: 'General'}, + { type: 'Dependency' }, + { type: 'Resources' }, + { type: 'Notes' }, + ], + projectStartDate: new Date('03/25/2019'), + projectEndDate: new Date('07/28/2019'), + }); + ganttChart.appendTo('#Editing'); +}; \ No newline at end of file diff --git a/src/gantt/filtering-stack.json b/src/gantt/filtering-stack.json new file mode 100644 index 00000000..67bb0aca --- /dev/null +++ b/src/gantt/filtering-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: filteredData,\n dateFormat: 'MM/dd/yyyy hh:mm:ss',\n taskFields: {\n id: 'TaskID',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n duration: 'Duration',\n dependency: 'Predecessor',\n child: 'subtasks',\n },\n columns: [\n { field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' },\n { field: 'StartDate', headerText: 'Start Date' },\n { field: 'Duration', headerText: 'Duration' },\n { field: 'EndDate', headerText: 'End Date' },\n { field: 'Predecessor', headerText: 'Predecessor' }\n ],\n treeColumnIndex: 0,\n toolbar: ['Search'],\n allowFiltering: true,\n includeWeekend: true,\n height: '450px',\n timelineSettings: {\n timelineUnitSize: 60,\n topTier: {\n format: 'MMM dd, yyyy',\n unit: 'Day',\n },\n bottomTier: {\n unit: 'Hour',\n format: 'h.mm a'\n },\n },\n splitterSettings: {\n columnIndex: 3\n },\n durationUnit: 'Hour',\n dayWorkingTime: [{ from: 0, to: 24 }],\n labelSettings: {\n rightLabel: 'TaskName',\n },\n projectStartDate: new Date('07/16/1969 01:00:00 AM'),\n projectEndDate: new Date('07/25/1969'),\n actionComplete: function (args) {\n if (args.requestType == \"filterafteropen\" && (args.columnName === \"StartDate\" || args.columnName === \"EndDate\")) {\n args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].min = new Date(1969, 5, 1);\n args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].max = new Date(1969, 8, 30);\n args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].showTodayButton = false;\n args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].dataBind();\n }\n },\n });\n ganttChart.appendTo('#Filtering');\n"} \ No newline at end of file diff --git a/src/gantt/filtering.html b/src/gantt/filtering.html new file mode 100644 index 00000000..29754296 --- /dev/null +++ b/src/gantt/filtering.html @@ -0,0 +1,41 @@ +
        +
        +
        +
        + +
        +
        + +
        +

        This sample visualizes the manned lunar mission, which landed the first human on the Moon using the Apollo 11 + spacecraft in the year 1969. It also demonstrates the filtering feature available in the Gantt chart. You can filter + a particular column using the filter menu available in the columns. This sample is also enabled with the toolbar + searching option to filter the Gantt content across all the columns.

        +
        + +
        +

        + The filtering feature enables the user to view reduced amount of records based on filter criteria. The column + menu filtering can be enabled by setting allowFiltering property as true and toolbar + search box can + be enabled + by including the search item in the toolbar property. + Gantt chart also provides support for a set of filtering modes with hierarchyMode property. The + below are the + type of filter mode available in Gantt chart. +

      • Parent - This is the default filter hierarchy mode in Gantt chart. The filtered records are + displayed with its + parent records, if the filtered records not have any parent record then the filtered record alone will be + displayed.
        • +
      • Child - The filtered records are displayed with its child record, if the filtered records do + not have any + child record then only the filtered records are displayed.
        • +
      • Both - The filtered records are displayed with its both parent and child record. If the + filtered records do + not have any parent and child record then only the filtered records are displayed.
        • +
      • None - Only the filtered records are displayed.
        • +

        +
        \ No newline at end of file diff --git a/src/gantt/filtering.js b/src/gantt/filtering.js new file mode 100644 index 00000000..c57fbe05 --- /dev/null +++ b/src/gantt/filtering.js @@ -0,0 +1,57 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: filteredData, + dateFormat: 'MM/dd/yyyy hh:mm:ss', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + dependency: 'Predecessor', + child: 'subtasks', + }, + columns: [ + { field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' }, + { field: 'StartDate', headerText: 'Start Date' }, + { field: 'Duration', headerText: 'Duration' }, + { field: 'EndDate', headerText: 'End Date' }, + { field: 'Predecessor', headerText: 'Predecessor' } + ], + treeColumnIndex: 0, + toolbar: ['Search'], + allowFiltering: true, + includeWeekend: true, + height: '450px', + timelineSettings: { + timelineUnitSize: 60, + topTier: { + format: 'MMM dd, yyyy', + unit: 'Day', + }, + bottomTier: { + unit: 'Hour', + format: 'h.mm a' + }, + }, + splitterSettings: { + columnIndex: 3 + }, + durationUnit: 'Hour', + dayWorkingTime: [{ from: 0, to: 24 }], + labelSettings: { + rightLabel: 'TaskName', + }, + projectStartDate: new Date('07/16/1969 01:00:00 AM'), + projectEndDate: new Date('07/25/1969'), + actionComplete: function (args) { + if (args.requestType == "filterafteropen" && (args.columnName === "StartDate" || args.columnName === "EndDate")) { + args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].min = new Date(1969, 5, 1); + args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].max = new Date(1969, 8, 30); + args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].showTodayButton = false; + args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].dataBind(); + } + }, + }); + ganttChart.appendTo('#Filtering'); +}; \ No newline at end of file diff --git a/src/gantt/images/face-mask.svg b/src/gantt/images/face-mask.svg new file mode 100644 index 00000000..14eab7f9 --- /dev/null +++ b/src/gantt/images/face-mask.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + diff --git a/src/gantt/images/moments.svg b/src/gantt/images/moments.svg new file mode 100644 index 00000000..3f4f20ee --- /dev/null +++ b/src/gantt/images/moments.svg @@ -0,0 +1,32 @@ + + + + + + + + + + diff --git a/src/gantt/images/oscar.svg b/src/gantt/images/oscar.svg new file mode 100644 index 00000000..ed9352c9 --- /dev/null +++ b/src/gantt/images/oscar.svg @@ -0,0 +1,27 @@ + + + + + + + + + + diff --git a/src/gantt/remote-data-stack.json b/src/gantt/remote-data-stack.json new file mode 100644 index 00000000..a1422bc9 --- /dev/null +++ b/src/gantt/remote-data-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n\n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';\n var data = new ej.data.DataManager({\n url: hostUrl + 'api/GanttData',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var ganttChart = new ej.gantt.Gantt({\n dataSource: data,\n height: '450px',\n taskFields: {\n id: 'TaskId',\n name: 'TaskName',\n startDate: 'StartDate',\n duration: 'Duration',\n progress: 'Progress',\n dependency: 'Predecessor',\n child: 'SubTasks',\n },\n columns: [\n { field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' },\n { field: 'StartDate' },\n { field: 'Duration' },\n ],\n treeColumnIndex: 0,\n allowSelection: true,\n gridLines: 'Both',\n showColumnMenu: false,\n highlightWeekends: true,\n timelineSettings: {\n timelineUnitSize: 50,\n topTier: {\n unit: 'Month',\n format: 'MMM dd, y',\n },\n bottomTier: {\n unit: 'Day',\n formatter: function(date) {\n var month = date.getMonth();\n if (month === 1) {\n return '';\n } else {\n var presentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n var start = new Date(presentDate.getFullYear(), 0, 0);\n var diff = Number(presentDate) - Number(start);\n var oneDay = 1000 * 60 * 60 * 24;\n var day = Math.floor(diff / oneDay);\n return 'day ' + (day - 59);\n }\n },\n },\n },\n labelSettings: {\n leftLabel: 'TaskName',\n },\n includeWeekend: true,\n projectStartDate: new Date('02/24/2019'),\n projectEndDate: new Date('06/10/2019'),\n });\n ganttChart.appendTo('#RemoteData');\n"} \ No newline at end of file diff --git a/src/gantt/remote-data.html b/src/gantt/remote-data.html new file mode 100644 index 00000000..27b1f205 --- /dev/null +++ b/src/gantt/remote-data.html @@ -0,0 +1,43 @@ +
        +
        +
        +
        + +
        + +
        + +
        +

        This sample demonstrates the way of binding data to Gantt chart with a remote service. The Gantt chart data source + is bound to remote data using the DataManager. The data in this sample shows the various phases of barley + harvesting.

        +
        + +
        +

        + The dataSource property in Gantt chart can be assigned with the instance of + DataManager to bind remote data. + The DataManager, which will act as an interface between the service endpoint and the Gantt chart, will require + the below minimal information to interact with service endpoint properly. +

      • DataManager->url - Defines the service endpoint to fetch data
        • +
      • DataManager->adaptor - Defines the adaptor option. By default, ODataAdaptor is used for remote + binding.
        • + Adaptor is responsible for processing response and request from/to the service endpoint. + @syncfusion/ej2-data + package provides some predefined adaptors which are designed to interact with particular service endpoints. They + are, +
      • UrlAdaptor - Use this to interact any remote services. This is the base adaptor for all remote + based adaptors.
        • +
      • ODataAdaptor - Use this to interact with OData endpoints.
        • +
      • ODataV4Adaptor - Use this to interact with OData V4 endpoints.
        • +
      • WebApiAdaptor - Use this to interact with Web API created under OData standards.
        • +
      • WebMethodAdaptor - Use this to interact with web methods.
        • + In this demo, remote data is bound by assigning service data as an instance of DataManager to the + dataSource + property. + More information on the data binding can be found in this documentation section. +

        +
        \ No newline at end of file diff --git a/src/gantt/remote-data.js b/src/gantt/remote-data.js new file mode 100644 index 00000000..932cc68c --- /dev/null +++ b/src/gantt/remote-data.js @@ -0,0 +1,61 @@ +this.default = function () { + var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; + var data = new ej.data.DataManager({ + url: hostUrl + 'api/GanttData', + adaptor: new ej.data.WebApiAdaptor(), + crossDomain: true + }); + var ganttChart = new ej.gantt.Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskId', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Predecessor', + child: 'SubTasks', + }, + columns: [ + { field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' }, + { field: 'StartDate' }, + { field: 'Duration' }, + ], + treeColumnIndex: 0, + allowSelection: true, + gridLines: 'Both', + showColumnMenu: false, + highlightWeekends: true, + timelineSettings: { + timelineUnitSize: 50, + topTier: { + unit: 'Month', + format: 'MMM dd, y', + }, + bottomTier: { + unit: 'Day', + formatter: function(date) { + var month = date.getMonth(); + if (month === 1) { + return ''; + } else { + var presentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()); + var start = new Date(presentDate.getFullYear(), 0, 0); + var diff = Number(presentDate) - Number(start); + var oneDay = 1000 * 60 * 60 * 24; + var day = Math.floor(diff / oneDay); + return 'day ' + (day - 59); + } + }, + }, + }, + labelSettings: { + leftLabel: 'TaskName', + }, + includeWeekend: true, + projectStartDate: new Date('02/24/2019'), + projectEndDate: new Date('06/10/2019'), + }); + ganttChart.appendTo('#RemoteData'); +}; \ No newline at end of file diff --git a/src/gantt/sample.json b/src/gantt/sample.json new file mode 100644 index 00000000..dc32a74e --- /dev/null +++ b/src/gantt/sample.json @@ -0,0 +1,207 @@ +{ + "name": "Gantt", + "directory": "gantt", + "category": "Calendars", + "ftName": "gantt", + "type": "preview", + "hideOnDevice": true, + "dataSourcePath": "src/gantt/data-source.js", + "samples": [ + { + "url": "default", + "name": "Default Functionalities", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "taskFields", + "height", + "highlightWeekends", + "eventMarkers", + "labelSettings" + ] + }, + "description": "This example demonstrates the simple Gantt chart with summary task, child tasks, milestone tasks, dependencies with event markers of project" + }, + { + "url": "remote-data", + "name": "Remote Data", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "height", + "taskFields", + "columns", + "treeColumnIndex", + "allowSelection", + "gridLines", + "highlightWeekends", + "timelineSettings", + "labelSettings", + "includeWeekend", + "projectStartDate", + "projectEndDate" + ] + }, + "description": "This sample demonstrates the way of binding data to Gantt chart with remote service. The Gantt chart data source is bound to remote data using DataManager." + }, + { + "url": "editing", + "name": "Editing", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "dateFormat", + "height", + "taskFields", + "editSettings", + "toolbar", + "columns", + "treeColumnIndex", + "allowSelection", + "gridLines", + "resourceNameMapping", + "resourceIDMapping", + "resources", + "highlightWeekends", + "timelineSettings", + "labelSettings", + "labelSettings", + "projectStartDate", + "projectEndDate" + ] + }, + "description": "This example demonstrates the cell editing, dialog editing, taskbar editing and dependency editing support in Gantt" + }, + { + "url": "filtering", + "name": "Filtering", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "dateFormat", + "taskFields", + "columns", + "treeColumnIndex", + "height", + "timelineSettings", + "labelSettings", + "toolbar", + "allowFiltering", + "includeWeekend", + "timelineSettings", + "splitterSettings", + "durationUnit", + "dayWorkingTime", + "projectStartDate", + "projectEndDate" + ] + }, + "description": "This example demonstrates the filtering support with filter menu option for various types of columns in Gantt" + }, + { + "url": "timeline", + "name": "Timeline", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "taskFields", + "treeColumnIndex", + "height", + "projectStartDate", + "projectEndDate", + "highlightWeekends", + "resourceNameMapping", + "resourceIDMapping", + "resources", + "timelineSettings", + "splitterSettings", + "treeColumnIndex", + "labelSettings", + "eventMarkers" + ] + }, + "description": "This example demonstrates the various timeline mode options and properties available to customize the timeline in Gantt" + }, + { + "url": "baseline", + "name": "Baseline", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "renderBaseline", + "taskFields", + "columns", + "treeColumnIndex", + "allowSelection", + "includeWeekend", + "timelineSettings", + "tooltipSettings", + "durationUnit", + "dateFormat", + "dayWorkingTime", + "height", + "projectStartDate", + "projectEndDate" + ] + }, + "description": "Baselines are enabled to view the deviation between the planned dates of tasks and actual progress of task dates" + }, + { + "url": "taskbar-template", + "name": "Taskbar Template", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "dateFormat", + "taskFields", + "columns", + "treeColumnIndex", + "rowHeight", + "taskbarHeight", + "dayWorkingTime", + "durationUnit", + "eventMarkers", + "height", + "taskbarTemplate", + "milestoneTemplate", + "projectStartDate", + "projectEndDate", + "timelineSettings", + "splitterSettings", + "labelSettings", + "tooltipSettings" + ] + }, + "description": "This example demonstrates the taskbar template support with child taskbar template, parent taskbar template and milestone template." + }, + { + "url": "unscheduled-tasks", + "name": "Unscheduled Tasks", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "taskFields", + "editSettings", + "toolbar", + "height", + "labelSettings", + "allowUnscheduledTasks", + "projectStartDate", + "projectEndDate", + "toolbarClick", + "splitterSettings", + "columns" + ] + }, + "description": "This example demonstrates the unscheduled tasks in Gantt with custom toolbar item and dynamic add support." + } + ] +} \ No newline at end of file diff --git a/src/gantt/taskbar-template-stack.json b/src/gantt/taskbar-template-stack.json new file mode 100644 index 00000000..80da4e3d --- /dev/null +++ b/src/gantt/taskbar-template-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n\n\n\n
        \n
        \n
        \n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: customizedData,\n dateFormat: 'hh:mm a',\n taskFields: {\n id: 'TaskId',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n dependency: 'Predecessor',\n },\n columns: [\n { field: 'TaskId', headerText: 'Event Id' },\n { field: 'TaskName', headerText: 'Event Name', width: '250', clipMode: 'EllipsisWithTooltip' },\n { field: 'StartDate', headerText: 'Start Time' },\n { field: 'EndDate', headerText: 'End Time' },\n { field: 'Winner', headerText: 'Winner' },\n { field: 'Movie', headerText: 'Movie' },\n { field: 'Performance', headerText: 'Moments / Performance Details' }\n ],\n splitterSettings: {\n columnIndex: 1\n },\n treeColumnIndex: 1,\n rowHeight: 75,\n taskbarHeight: 65,\n dayWorkingTime: [{ from: 0, to: 24 }],\n durationUnit: 'Minute',\n timelineSettings: {\n timelineUnitSize: 60,\n topTier: {\n unit: 'Hour',\n format: 'MMM dd, yyyy'\n },\n bottomTier: {\n unit: 'Minutes',\n count: 2,\n format: 'h:mm a'\n },\n },\n eventMarkers: [\n {\n day: new Date('03/05/2018 07:09:00 PM'),\n label: 'Performance'\n }, {\n day: new Date('03/05/2018 07:46:00 PM'),\n label: 'Moments'\n }, {\n day: new Date('03/05/2018 07:59:00 PM'),\n label: 'Performance'\n }, {\n day: new Date('03/05/2018 08:08:00 PM'),\n label: 'Moments'\n }, {\n day: new Date('03/05/2018 08:24:00 PM'),\n label: 'Moments'\n }, {\n day: new Date('03/05/2018 08:31:00 PM'),\n label: 'Performance'\n }, {\n day: new Date('03/05/2018 08:47:00 PM'),\n label: 'Moments'\n }\n ],\n height: '450px',\n taskbarTemplate: '#childtask',\n milestoneTemplate: '#milestone',\n labelSettings: {\n leftLabel: 'TaskName',\n },\n tooltipSettings: {\n taskbar: '#tooltip',\n },\n projectStartDate: new Date('03/05/2018 06:00 PM'),\n projectEndDate: new Date('03/05/2018 09:50 PM')\n });\n ganttChart.appendTo('#TaskbarTemplate');\n"} \ No newline at end of file diff --git a/src/gantt/taskbar-template.html b/src/gantt/taskbar-template.html new file mode 100644 index 00000000..2ae6353f --- /dev/null +++ b/src/gantt/taskbar-template.html @@ -0,0 +1,130 @@ + + + + +
        +
        +
        +
        + +
        +
        + +
        +

        This sample visualizes the complete event schedule of the 90th Academy awards. + Taskbars are customized using template support and timeline header is customized for a better view of the data. +

        +
        + +
        +

        + The Gantt chart provides support for customizing taskbar UI using taskbar template feature. The + taskbarTemplate + property accepts either string or HTML element`s ID value, which will be used as the template for the taskbars. + The summary tasks and the milestone items can also customized using the parentTaskbarTemplate and + milestoneTemplate properties. + In this demo, we have customized the taskbar UI to display the data from custom columns and the taskbarTemplate + is assigned with the ID of a SCRIPT element whose content is used as the template. + The template expression should be provided inside ${...} interpolation syntax +

        +
        \ No newline at end of file diff --git a/src/gantt/taskbar-template.js b/src/gantt/taskbar-template.js new file mode 100644 index 00000000..e1c46c9f --- /dev/null +++ b/src/gantt/taskbar-template.js @@ -0,0 +1,78 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: customizedData, + dateFormat: 'hh:mm a', + taskFields: { + id: 'TaskId', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + dependency: 'Predecessor', + }, + columns: [ + { field: 'TaskId', headerText: 'Event Id' }, + { field: 'TaskName', headerText: 'Event Name', width: '250', clipMode: 'EllipsisWithTooltip' }, + { field: 'StartDate', headerText: 'Start Time' }, + { field: 'EndDate', headerText: 'End Time' }, + { field: 'Winner', headerText: 'Winner' }, + { field: 'Movie', headerText: 'Movie' }, + { field: 'Performance', headerText: 'Moments / Performance Details' } + ], + splitterSettings: { + columnIndex: 1 + }, + treeColumnIndex: 1, + rowHeight: 75, + taskbarHeight: 65, + dayWorkingTime: [{ from: 0, to: 24 }], + durationUnit: 'Minute', + timelineSettings: { + timelineUnitSize: 60, + topTier: { + unit: 'Hour', + format: 'MMM dd, yyyy' + }, + bottomTier: { + unit: 'Minutes', + count: 2, + format: 'h:mm a' + }, + }, + eventMarkers: [ + { + day: new Date('03/05/2018 07:09:00 PM'), + label: 'Performance' + }, { + day: new Date('03/05/2018 07:46:00 PM'), + label: 'Moments' + }, { + day: new Date('03/05/2018 07:59:00 PM'), + label: 'Performance' + }, { + day: new Date('03/05/2018 08:08:00 PM'), + label: 'Moments' + }, { + day: new Date('03/05/2018 08:24:00 PM'), + label: 'Moments' + }, { + day: new Date('03/05/2018 08:31:00 PM'), + label: 'Performance' + }, { + day: new Date('03/05/2018 08:47:00 PM'), + label: 'Moments' + } + ], + height: '450px', + taskbarTemplate: '#childtask', + milestoneTemplate: '#milestone', + labelSettings: { + leftLabel: 'TaskName', + }, + tooltipSettings: { + taskbar: '#tooltip', + }, + projectStartDate: new Date('03/05/2018 06:00 PM'), + projectEndDate: new Date('03/05/2018 09:50 PM') + }); + ganttChart.appendTo('#TaskbarTemplate'); +}; \ No newline at end of file diff --git a/src/gantt/timeline-stack.json b/src/gantt/timeline-stack.json new file mode 100644 index 00000000..fcca8b79 --- /dev/null +++ b/src/gantt/timeline-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        \n
        \n
        Field
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Unit width
        \n         		\n
        \n \n
        \n
        \n
        Top tier
        \n         		\n
        \n \n
        \n
        \n
        Count
        \n         		\n
        \n \n
        \n
        \n
        \n Unit\n
        \n         		\n
        \n \n
        \n
        \n
        \n Format\n
        \n         		\n
        \n \n
        \n
        \n
        Bottom tier
        \n         		\n
        \n \n
        \n
        \n
        Count
        \n         		\n
        \n \n
        \n
        \n
        \n Unit\n
        \n         		\n
        \n \n
        \n
        \n
        \n Format\n
        \n         		\n
        \n \n
        \n
        \n

        \n\n\n\n","index.js":"{{ripple}}\n var yearformat = [\n { id: 'MMM \"yy', format: 'Jan \"18' },\n { id: 'y', format: '2018' },\n { id: 'MMMM, y', format: 'January, 18' },\n ];\n var monthformat = [\n { id: 'MMM dd, yyyy', format: 'Jan 01, 2018' },\n { id: 'MMMM', format: 'January' },\n { id: 'MMM', format: 'Jan' },\n ];\n var weekformat = [\n { id: 'MMM dd, yyyy', format: 'Jan 01, 2019' },\n { id: 'EEE MMM dd, \"yy', format: 'Mon Jan 01, \"19' },\n { id: 'EEE MMM dd', format: 'Mon Jan 01' },\n ];\n var dayformat = [\n { id: 'EEE, dd', format: 'Mon, 01' },\n { id: 'E', format: 'Mon' },\n { id: 'dd', format: '01' },\n ];\n var hourformat = [\n { id: 'hh', format: '00' },\n { id: 'hh : mm a', format: '00 : 00 AM' },\n { id: 'h : mm a', format: '0 : 00 AM' },\n ];\n var unit = [\n { id: 'Year', unit: 'Year' },\n { id: 'Month', unit: 'Month' },\n { id: 'Week', unit: 'Week' },\n { id: 'Day', unit: 'Day' },\n { id: 'Hour', unit: 'Hour' },\n ];\n var gantt = new ej.gantt.Gantt({\n dataSource: projectData,\n taskFields: {\n id: 'taskID',\n name: 'taskName',\n startDate: 'startDate',\n endDate: 'endDate',\n duration: 'duration',\n progress: 'progress',\n dependency: 'predecessor',\n child: 'subtasks',\n },\n height: '450px',\n highlightWeekends: true,\n projectStartDate: new Date('02/03/2019'),\n projectEndDate: new Date('03/23/2019'),\n resourceNameMapping: 'resourceName',\n resourceIDMapping: 'resourceId',\n resources: projectResources,\n timelineSettings: {\n topTier: {\n format: 'MMM dd, yyyy',\n unit: 'Week',\n },\n bottomTier: {\n unit: 'Day',\n }\n },\n splitterSettings: {\n columnIndex: 0\n },\n treeColumnIndex: 1,\n labelSettings: {\n rightLabel: 'taskName',\n },\n eventMarkers: [\n {\n day: '02/08/2019',\n label: 'Project kick-off'\n }\n ],\n });\n gantt.appendTo('#Timeline');\n\n var topTierCount = new ej.inputs.NumericTextBox({\n format: 'n',\n min: 1,\n max: 50,\n value: 1,\n change: function (e) {\n var count = e.value;\n gantt.timelineSettings.topTier.count = count;\n }\n });\n topTierCount.appendTo('#count');\n\n var bottomTierCount = new ej.inputs.NumericTextBox({\n min: 1,\n max: 50,\n format: 'n',\n value: 1,\n change: function (e) {\n var count = e.value;\n gantt.timelineSettings.bottomTier.count = count;\n }\n });\n bottomTierCount.appendTo('#btCount');\n\n var topTierformat = new ej.dropdowns.DropDownList({\n dataSource: weekformat,\n fields: { text: 'format', value: 'id' },\n value: 'MMM dd, yyyy',\n change: function (e) {\n var format = e.value;\n gantt.timelineSettings.topTier.format = format.toString();\n }\n });\n topTierformat.appendTo('#format');\n\n var topTierUnit = new ej.dropdowns.DropDownList({\n dataSource: unit,\n fields: { text: 'unit', value: 'id' },\n value: 'Week',\n change: function (e) {\n var unit = e.value;\n gantt.timelineSettings.topTier.unit = unit;\n if (unit === 'Year') {\n topTierformat.dataSource = yearformat;\n } else if (unit === 'Month') {\n topTierformat.dataSource = monthformat;\n } else if (unit === 'Week') {\n topTierformat.dataSource = weekformat;\n } else if (unit === 'Day') {\n topTierformat.dataSource = dayformat;\n } else {\n topTierformat.dataSource = hourformat;\n }\n topTierformat.refresh();\n updateUnitWidth(unit, 'top');\n gantt.timelineSettings.topTier.unit = unit;\n }\n });\n topTierUnit.appendTo('#unit');\n\n var bottomTierformat = new ej.dropdowns.DropDownList({\n dataSource: dayformat,\n fields: { text: 'format', value: 'id' },\n change: function (e) {\n var format = e.value;\n gantt.timelineSettings.bottomTier.format = format.toString();\n }\n });\n bottomTierformat.appendTo('#btFormat');\n\n var bottomTierUnit = new ej.dropdowns.DropDownList({\n dataSource: unit,\n fields: { text: 'unit', value: 'id' },\n value: 'Day',\n change: function (e) {\n var unit = e.value;\n gantt.timelineSettings.bottomTier.unit = unit;\n if (unit === 'Year') {\n bottomTierformat.dataSource = yearformat;\n } else if (unit === 'Month') {\n bottomTierformat.dataSource = monthformat;\n } else if (unit === 'Week') {\n bottomTierformat.dataSource = weekformat;\n } else if (unit === 'Day') {\n bottomTierformat.dataSource = dayformat;\n } else {\n bottomTierformat.dataSource = hourformat;\n }\n bottomTierformat.refresh();\n updateUnitWidth(unit, 'bottom');\n gantt.timelineSettings.bottomTier.unit = unit ;\n }\n });\n bottomTierUnit.appendTo('#btUnit');\n\n var topTier = new ej.buttons.CheckBox({ checked: true });\n topTier.appendTo('#topTierCheck');\n\n var bottomTier = new ej.buttons.CheckBox({ checked: true });\n bottomTier.appendTo('#bottomTierCheck');\n\n document.getElementById('topTierCheck').onclick = function() {\n if (topTier.checked) {\n gantt.timelineSettings.topTier.unit = 'Week';\n topTierCount.enabled = true;\n topTierformat.enabled = true;\n topTierUnit.enabled = true;\n } else {\n gantt.timelineSettings.topTier.unit = 'None';\n topTierCount.enabled = false;\n topTierformat.enabled = false;\n topTierUnit.enabled = false;\n }\n };\n\n document.getElementById('bottomTierCheck').onclick = function() {\n if (bottomTier.checked) {\n gantt.timelineSettings.bottomTier.unit = 'Day';\n bottomTierCount.enabled = true;\n bottomTierformat.enabled = true;\n bottomTierUnit.enabled = true;\n } else {\n gantt.timelineSettings.bottomTier.unit = 'None';\n bottomTierCount.enabled = false;\n bottomTierformat.enabled = false;\n bottomTierUnit.enabled = false;\n }\n };\n\n var unitWidthNumObj = new ej.inputs.NumericTextBox({\n min: 10,\n format: 'n',\n value: 33,\n change: function (e) {\n var width = e.value;\n gantt.timelineSettings.timelineUnitSize = width;\n }\n });\n unitWidthNumObj.appendTo('#unitWidth');\n\n function updateUnitWidth(unit, tier) {\n var topUnit = tier === 'top' ? unit : gantt.timelineSettings.topTier.unit;\n var bottomUnit = tier === 'bottom' ? unit : gantt.timelineSettings.bottomTier.unit;\n var units = ['None', 'Hour', 'Day', 'Week', 'Month', 'Year'];\n var bootomCellUnit;\n var unitWidth;\n if (units.indexOf(topUnit) === 0 && units.indexOf(bottomUnit) === 0) {\n bootomCellUnit = 'Day';\n } else if (units.indexOf(topUnit) === 0 && units.indexOf(bottomUnit) > 0) {\n bootomCellUnit = bottomUnit;\n } else if (units.indexOf(topUnit) > 0 && units.indexOf(bottomUnit) === 0) {\n bootomCellUnit = topUnit;\n } else if (units.indexOf(topUnit) <= units.indexOf(bottomUnit)) {\n bootomCellUnit = topUnit;\n } else {\n bootomCellUnit = bottomUnit;\n }\n if (bootomCellUnit === 'Year') {\n unitWidth = 2000;\n } else if (bootomCellUnit === 'Month') {\n unitWidth = 300;\n } else if (bootomCellUnit === 'Week') {\n unitWidth = 150;\n } else if (bootomCellUnit === 'Day') {\n unitWidth = 33;\n } else if (bootomCellUnit === 'Hour') {\n unitWidth = 25;\n }\n unitWidthNumObj.value = unitWidth;\n } \n"} \ No newline at end of file diff --git a/src/gantt/timeline.html b/src/gantt/timeline.html new file mode 100644 index 00000000..d645b04f --- /dev/null +++ b/src/gantt/timeline.html @@ -0,0 +1,139 @@ +
        +
        +
        +
        +
        + +
        +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        Unit width
        +         		+
        + +
        +
        +
        Top tier
        +         		+
        + +
        +
        +
        Count
        +         		+
        + +
        +
        +
        + Unit +
        +         		+
        + +
        +
        +
        + Format +
        +         		+
        + +
        +
        +
        Bottom tier
        +         		+
        + +
        +
        +
        Count
        +         		+
        + +
        +
        +
        + Unit +
        +         		+
        + +
        +
        +
        + Format +
        +         		+
        + +
        +
        +
        + +
        +

        This sample illustrates the different phases from planning to delivery, involved in a software development + lifecycle. It demonstrates the different timeline modes available in the Gantt chart. Options are available to + change the unit, format, and count of the header texts for both top and bottom timeline headers.

        +
        + +
        +

        + In this example, you can see how to change the timeline settings in Gantt chart. The top and bottom timeline + header texts can be customized by using the timelineSettings.topTier and + timelineSettings.bottomTier properties. + Using these properties, you can change the format, count, and units of the timeline header texts. +

        +

        + Gantt chart has built-in support for many timeline modes such as minutes, hour, day, week, month and year. +

        +

        The + default timeline headers can also be replaced with custom header texts by using the formatter + method. +

        +

        + Tooltip is enabled by default for the timeline headers, to see the tooltip in action, hover a point or tap on a + point in touch enabled devices. +

        +
        \ No newline at end of file diff --git a/src/gantt/timeline.js b/src/gantt/timeline.js new file mode 100644 index 00000000..ad6a8c13 --- /dev/null +++ b/src/gantt/timeline.js @@ -0,0 +1,248 @@ +this.default = function () { + var yearformat = [ + { id: 'MMM "yy', format: 'Jan "18' }, + { id: 'y', format: '2018' }, + { id: 'MMMM, y', format: 'January, 18' }, + ]; + var monthformat = [ + { id: 'MMM dd, yyyy', format: 'Jan 01, 2018' }, + { id: 'MMMM', format: 'January' }, + { id: 'MMM', format: 'Jan' }, + ]; + var weekformat = [ + { id: 'MMM dd, yyyy', format: 'Jan 01, 2019' }, + { id: 'EEE MMM dd, "yy', format: 'Mon Jan 01, "19' }, + { id: 'EEE MMM dd', format: 'Mon Jan 01' }, + ]; + var dayformat = [ + { id: 'EEE, dd', format: 'Mon, 01' }, + { id: 'E', format: 'Mon' }, + { id: 'dd', format: '01' }, + ]; + var hourformat = [ + { id: 'hh', format: '00' }, + { id: 'hh : mm a', format: '00 : 00 AM' }, + { id: 'h : mm a', format: '0 : 00 AM' }, + ]; + var unit = [ + { id: 'Year', unit: 'Year' }, + { id: 'Month', unit: 'Month' }, + { id: 'Week', unit: 'Week' }, + { id: 'Day', unit: 'Day' }, + { id: 'Hour', unit: 'Hour' }, + ]; + var gantt = new ej.gantt.Gantt({ + dataSource: projectData, + taskFields: { + id: 'taskID', + name: 'taskName', + startDate: 'startDate', + endDate: 'endDate', + duration: 'duration', + progress: 'progress', + dependency: 'predecessor', + child: 'subtasks', + }, + height: '450px', + highlightWeekends: true, + projectStartDate: new Date('02/03/2019'), + projectEndDate: new Date('03/23/2019'), + resourceNameMapping: 'resourceName', + resourceIDMapping: 'resourceId', + resources: projectResources, + timelineSettings: { + topTier: { + format: 'MMM dd, yyyy', + unit: 'Week', + }, + bottomTier: { + unit: 'Day', + } + }, + splitterSettings: { + columnIndex: 0 + }, + treeColumnIndex: 1, + labelSettings: { + rightLabel: 'taskName', + }, + eventMarkers: [ + { + day: '02/08/2019', + label: 'Project kick-off' + } + ], + }); + gantt.appendTo('#Timeline'); + + var topTierCount = new ej.inputs.NumericTextBox({ + format: 'n', + min: 1, + max: 50, + value: 1, + change: function (e) { + var count = e.value; + gantt.timelineSettings.topTier.count = count; + } + }); + topTierCount.appendTo('#count'); + + var bottomTierCount = new ej.inputs.NumericTextBox({ + min: 1, + max: 50, + format: 'n', + value: 1, + change: function (e) { + var count = e.value; + gantt.timelineSettings.bottomTier.count = count; + } + }); + bottomTierCount.appendTo('#btCount'); + + var topTierformat = new ej.dropdowns.DropDownList({ + dataSource: weekformat, + fields: { text: 'format', value: 'id' }, + value: 'MMM dd, yyyy', + change: function (e) { + var format = e.value; + gantt.timelineSettings.topTier.format = format.toString(); + } + }); + topTierformat.appendTo('#format'); + + var topTierUnit = new ej.dropdowns.DropDownList({ + dataSource: unit, + fields: { text: 'unit', value: 'id' }, + value: 'Week', + change: function (e) { + var unit = e.value; + gantt.timelineSettings.topTier.unit = unit; + if (unit === 'Year') { + topTierformat.dataSource = yearformat; + } else if (unit === 'Month') { + topTierformat.dataSource = monthformat; + } else if (unit === 'Week') { + topTierformat.dataSource = weekformat; + } else if (unit === 'Day') { + topTierformat.dataSource = dayformat; + } else { + topTierformat.dataSource = hourformat; + } + topTierformat.refresh(); + updateUnitWidth(unit, 'top'); + gantt.timelineSettings.topTier.unit = unit; + } + }); + topTierUnit.appendTo('#unit'); + + var bottomTierformat = new ej.dropdowns.DropDownList({ + dataSource: dayformat, + fields: { text: 'format', value: 'id' }, + change: function (e) { + var format = e.value; + gantt.timelineSettings.bottomTier.format = format.toString(); + } + }); + bottomTierformat.appendTo('#btFormat'); + + var bottomTierUnit = new ej.dropdowns.DropDownList({ + dataSource: unit, + fields: { text: 'unit', value: 'id' }, + value: 'Day', + change: function (e) { + var unit = e.value; + gantt.timelineSettings.bottomTier.unit = unit; + if (unit === 'Year') { + bottomTierformat.dataSource = yearformat; + } else if (unit === 'Month') { + bottomTierformat.dataSource = monthformat; + } else if (unit === 'Week') { + bottomTierformat.dataSource = weekformat; + } else if (unit === 'Day') { + bottomTierformat.dataSource = dayformat; + } else { + bottomTierformat.dataSource = hourformat; + } + bottomTierformat.refresh(); + updateUnitWidth(unit, 'bottom'); + gantt.timelineSettings.bottomTier.unit = unit ; + } + }); + bottomTierUnit.appendTo('#btUnit'); + + var topTier = new ej.buttons.CheckBox({ checked: true }); + topTier.appendTo('#topTierCheck'); + + var bottomTier = new ej.buttons.CheckBox({ checked: true }); + bottomTier.appendTo('#bottomTierCheck'); + + document.getElementById('topTierCheck').onclick = function() { + if (topTier.checked) { + gantt.timelineSettings.topTier.unit = 'Week'; + topTierCount.enabled = true; + topTierformat.enabled = true; + topTierUnit.enabled = true; + } else { + gantt.timelineSettings.topTier.unit = 'None'; + topTierCount.enabled = false; + topTierformat.enabled = false; + topTierUnit.enabled = false; + } + }; + + document.getElementById('bottomTierCheck').onclick = function() { + if (bottomTier.checked) { + gantt.timelineSettings.bottomTier.unit = 'Day'; + bottomTierCount.enabled = true; + bottomTierformat.enabled = true; + bottomTierUnit.enabled = true; + } else { + gantt.timelineSettings.bottomTier.unit = 'None'; + bottomTierCount.enabled = false; + bottomTierformat.enabled = false; + bottomTierUnit.enabled = false; + } + }; + + var unitWidthNumObj = new ej.inputs.NumericTextBox({ + min: 10, + format: 'n', + value: 33, + change: function (e) { + var width = e.value; + gantt.timelineSettings.timelineUnitSize = width; + } + }); + unitWidthNumObj.appendTo('#unitWidth'); + + function updateUnitWidth(unit, tier) { + var topUnit = tier === 'top' ? unit : gantt.timelineSettings.topTier.unit; + var bottomUnit = tier === 'bottom' ? unit : gantt.timelineSettings.bottomTier.unit; + var units = ['None', 'Hour', 'Day', 'Week', 'Month', 'Year']; + var bootomCellUnit; + var unitWidth; + if (units.indexOf(topUnit) === 0 && units.indexOf(bottomUnit) === 0) { + bootomCellUnit = 'Day'; + } else if (units.indexOf(topUnit) === 0 && units.indexOf(bottomUnit) > 0) { + bootomCellUnit = bottomUnit; + } else if (units.indexOf(topUnit) > 0 && units.indexOf(bottomUnit) === 0) { + bootomCellUnit = topUnit; + } else if (units.indexOf(topUnit) <= units.indexOf(bottomUnit)) { + bootomCellUnit = topUnit; + } else { + bootomCellUnit = bottomUnit; + } + if (bootomCellUnit === 'Year') { + unitWidth = 2000; + } else if (bootomCellUnit === 'Month') { + unitWidth = 300; + } else if (bootomCellUnit === 'Week') { + unitWidth = 150; + } else if (bootomCellUnit === 'Day') { + unitWidth = 33; + } else if (bootomCellUnit === 'Hour') { + unitWidth = 25; + } + unitWidthNumObj.value = unitWidth; + } +}; \ No newline at end of file diff --git a/src/gantt/unscheduled-tasks-stack.json b/src/gantt/unscheduled-tasks-stack.json new file mode 100644 index 00000000..17882f2a --- /dev/null +++ b/src/gantt/unscheduled-tasks-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ganttChart = new ej.gantt.Gantt({\n dataSource: unscheduledData,\n taskFields: {\n id: 'TaskId',\n name: 'TaskName',\n startDate: 'StartDate',\n endDate: 'EndDate',\n duration: 'Duration',\n },\n editSettings: {\n allowAdding: true,\n allowEditing: true\n },\n columns: [\n {field: 'TaskId', width: 60 },\n {field: 'TaskName', width: 80 },\n {field: 'StartDate', width: 120}, \n {field: 'EndDate', width: 120 }, \n {field: 'Duration', width: 90 }, \n {field: 'TaskType', visible: false}\n ],\n splitterSettings: {\n columnIndex: 4\n },\n toolbar: [{ text: 'Insert task', tooltipText: 'Insert task at top', id: 'toolbarAdd', prefixIcon: 'e-add-icon tb-icons' }],\n height: '450px',\n labelSettings: {\n leftLabel: 'TaskName',\n rightLabel: 'TaskType'\n },\n allowUnscheduledTasks: true,\n projectStartDate: new Date('01/01/2019'),\n projectEndDate: new Date('01/20/2019'),\n toolbarClick: toolbarClick,\n });\n ganttChart.appendTo('#Unscheduled');\n\n function toolbarClick() {\n var data = {\n Duration: null,\n StartDate: null,\n EndDate: null,\n TaskType: ''\n };\n ganttChart.addRecord(data);\n }\n"} \ No newline at end of file diff --git a/src/gantt/unscheduled-tasks.html b/src/gantt/unscheduled-tasks.html new file mode 100644 index 00000000..b551250c --- /dev/null +++ b/src/gantt/unscheduled-tasks.html @@ -0,0 +1,28 @@ + +
        +
        +
        +
        +
        +
        + +
        +

        This sample visualizes the support for displaying unscheduled tasks in Gantt and adding empty rows using the custom toolbar button.

        +
        + +
        +

        + Unscheduled tasks are tasks in a project that are not scheduled with proper dates or duration at the commencement of the project. + These tasks can be scheduled properly at any time during project implementation based on factors such as resource availability, dependent tasks, and more. + This example shows how to display the unscheduled tasks in Gantt by enabling the allowUnscheuldedTasks property. + This also shows how to add an empty row in Gantt by using a custom toolbar button click action. By using the toolbarClick event and addRecord method, + an empty row can be added at the top of the rows with undefined task details. +

        +
        \ No newline at end of file diff --git a/src/gantt/unscheduled-tasks.js b/src/gantt/unscheduled-tasks.js new file mode 100644 index 00000000..3e163264 --- /dev/null +++ b/src/gantt/unscheduled-tasks.js @@ -0,0 +1,48 @@ +this.default = function () { + var ganttChart = new ej.gantt.Gantt({ + dataSource: unscheduledData, + taskFields: { + id: 'TaskId', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + }, + editSettings: { + allowAdding: true, + allowEditing: true + }, + columns: [ + {field: 'TaskId', width: 60 }, + {field: 'TaskName', width: 80 }, + {field: 'StartDate', width: 120}, + {field: 'EndDate', width: 120 }, + {field: 'Duration', width: 90 }, + {field: 'TaskType', visible: false} + ], + splitterSettings: { + columnIndex: 4 + }, + toolbar: [{ text: 'Insert task', tooltipText: 'Insert task at top', id: 'toolbarAdd', prefixIcon: 'e-add-icon tb-icons' }], + height: '450px', + labelSettings: { + leftLabel: 'TaskName', + rightLabel: 'TaskType' + }, + allowUnscheduledTasks: true, + projectStartDate: new Date('01/01/2019'), + projectEndDate: new Date('01/20/2019'), + toolbarClick: toolbarClick, + }); + ganttChart.appendTo('#Unscheduled'); + + function toolbarClick() { + var data = { + Duration: null, + StartDate: null, + EndDate: null, + TaskType: '' + }; + ganttChart.addRecord(data); + } +}; \ No newline at end of file diff --git a/src/grid/advanced-exporting-stack.json b/src/grid/advanced-exporting-stack.json index 70f57608..251a0292 100644 --- a/src/grid/advanced-exporting-stack.json +++ b/src/grid/advanced-exporting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowExcelExport: true,\n allowPdfExport: true,\n allowPaging: true,\n pageSettings: { pageCount: 2, pageSize: 10 },\n toolbar: ['ExcelExport', 'PdfExport'],\n columns: [\n { field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 },\n { field: 'ProductName', headerText: 'Product Name', width: 200 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 145 },\n { field: 'UnitsInStock', headerText: 'Units In Stock', textAlign: 'Right', width: 140 },\n { field: 'UnitPrice', headerText: 'Unit Price', textAlign: 'Right', width: 140, format: 'C2' },\n ]\n });\n grid.appendTo('#Grid');\n grid.toolbarClick = function (args) {\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport(getPdfExportProperties());\n }\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport(getExcelExportProperties());\n }\n if (args.item.id === 'Grid_csvexport') {\n grid.csvExport();\n }\n };\n\n var date = '';\n date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());\n date += '/' + ((new Date()).getFullYear().toString());\n\n function getExcelExportProperties() {\n return {\n header: {\n headerRows: 7,\n rows: [\n { index: 1, cells: [{ index: 1, colSpan: 5, value: 'INVOICE', style: { fontColor: '#C25050', fontSize: 25, hAlign: 'Center', bold: true } }] },\n {\n index: 3,\n cells: [\n { index: 1, colSpan: 2, value: \"Advencture Traders\", style: { fontColor: '#C67878', fontSize: 15, bold: true } },\n { index: 4, value: \"INVOICE NUMBER\", style: { fontColor: '#C67878', bold: true } },\n { index: 5, value: \"DATE\", style: { fontColor: '#C67878', bold: true }, width: 150 }\n ]\n },\n {\n index: 4,\n cells: [{ index: 1, colSpan: 2, value: \"2501 Aerial Center Parkway\" },\n { index: 4, value: 2034 }, { index: 5, value: date, width: 150 }\n\n ]\n },\n\n {\n index: 5,\n cells: [\n { index: 1, colSpan: 2, value: \"Tel +1 888.936.8638 Fax +1 919.573.0306\" },\n { index: 4, value: \"CUSOTMER ID\", style: { fontColor: '#C67878', bold: true } }, { index: 5, value: \"TERMS\", width: 150, style: { fontColor: '#C67878', bold: true } }\n\n ]\n },\n {\n index: 6,\n cells: [\n\n { index: 4, value: 564 }, { index: 5, value: \"Net 30 days\", width: 150 }\n ]\n }\n ]\n },\n\n footer: {\n footerRows: 8,\n rows: [\n { cells: [{ colSpan: 6, value: \"Thank you for your business!\", style: { fontColor: '#C67878', hAlign: 'Center', bold: true } }] },\n { cells: [{ colSpan: 6, value: \"!Visit Again!\", style: { fontColor: '#C67878', hAlign: 'Center', bold: true } }] }\n ]\n },\n \n fileName: \"exceldocument.xlsx\"\n };\n }\n\n function getPdfExportProperties() {\n return {\n header: {\n fromTop: 0,\n height: 120,\n contents: [\n {\n type: 'Text',\n value: 'INVOICE',\n position: { x: 280, y: 0 },\n style: { textBrushColor: '#C25050', fontSize: 25 },\n },\n {\n type: 'Text',\n value: 'INVOICE NUMBER',\n position: { x: 500, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Date',\n position: { x: 600, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n }, {\n type: 'Text',\n value: '223344',\n position: { x: 500, y: 50 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: date,\n position: { x: 600, y: 50 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'CUSTOMER ID',\n position: { x: 500, y: 70 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'TERMS',\n position: { x: 600, y: 70 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n }, {\n type: 'Text',\n value: '223',\n position: { x: 500, y: 90 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Net 30 days',\n position: { x: 600, y: 90 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Adventure Traders',\n position: { x: 20, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 20 }\n },\n {\n type: 'Text',\n value: '2501 Aerial Center Parkway',\n position: { x: 20, y: 65 },\n style: { textBrushColor: '#000000', fontSize: 11 }\n },\n {\n type: 'Text',\n value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',\n position: { x: 20, y: 80 },\n style: { textBrushColor: '#000000', fontSize: 11 }\n },\n ]\n },\n footer: {\n fromBottom: 160,\n height: 100,\n contents: [\n {\n type: 'Text',\n value: 'Thank you for your business !',\n position: { x: 250, y: 20 },\n style: { textBrushColor: '#C67878', fontSize: 14 }\n },\n {\n type: 'Text',\n value: '! Visit Again !',\n position: { x: 300, y: 45 },\n style: { textBrushColor: '#C67878', fontSize: 14 }\n }\n ]\n },\n \n fileName: \"pdfdocument.pdf\"\n };\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowExcelExport: true,\n allowPdfExport: true,\n allowPaging: true,\n pageSettings: { pageCount: 2, pageSize: 10 },\n toolbar: ['ExcelExport', 'PdfExport'],\n columns: [\n { field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 },\n { field: 'ProductName', headerText: 'Product Name', width: 200 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 145 },\n { field: 'UnitsInStock', headerText: 'Units In Stock', textAlign: 'Right', width: 140 },\n { field: 'UnitPrice', headerText: 'Unit Price', textAlign: 'Right', width: 140, format: 'C2' },\n ]\n });\n grid.appendTo('#Grid');\n grid.toolbarClick = function (args) {\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport(getPdfExportProperties());\n }\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport(getExcelExportProperties());\n }\n if (args.item.id === 'Grid_csvexport') {\n grid.csvExport();\n }\n };\n\n var date = '';\n date += ((new Date()).getMonth().toString()) + '/' + ((new Date()).getDate().toString());\n date += '/' + ((new Date()).getFullYear().toString());\n\n function getExcelExportProperties() {\n return {\n header: {\n headerRows: 7,\n rows: [\n { index: 1, cells: [{ index: 1, colSpan: 5, value: 'INVOICE', style: { fontColor: '#C25050', fontSize: 25, hAlign: 'Center', bold: true } }] },\n {\n index: 3,\n cells: [\n { index: 1, colSpan: 2, value: \"Advencture Traders\", style: { fontColor: '#C67878', fontSize: 15, bold: true } },\n { index: 4, value: \"INVOICE NUMBER\", style: { fontColor: '#C67878', bold: true } },\n { index: 5, value: \"DATE\", style: { fontColor: '#C67878', bold: true }, width: 150 }\n ]\n },\n {\n index: 4,\n cells: [{ index: 1, colSpan: 2, value: \"2501 Aerial Center Parkway\" },\n { index: 4, value: 2034 }, { index: 5, value: date, width: 150 }\n\n ]\n },\n\n {\n index: 5,\n cells: [\n { index: 1, colSpan: 2, value: \"Tel +1 888.936.8638 Fax +1 919.573.0306\" },\n { index: 4, value: \"CUSOTMER ID\", style: { fontColor: '#C67878', bold: true } }, { index: 5, value: \"TERMS\", width: 150, style: { fontColor: '#C67878', bold: true } }\n\n ]\n },\n {\n index: 6,\n cells: [\n\n { index: 4, value: 564 }, { index: 5, value: \"Net 30 days\", width: 150 }\n ]\n }\n ]\n },\n\n footer: {\n footerRows: 8,\n rows: [\n { cells: [{ colSpan: 6, value: \"Thank you for your business!\", style: { fontColor: '#C67878', hAlign: 'Center', bold: true } }] },\n { cells: [{ colSpan: 6, value: \"!Visit Again!\", style: { fontColor: '#C67878', hAlign: 'Center', bold: true } }] }\n ]\n },\n \n fileName: \"exceldocument.xlsx\"\n };\n }\n\n function getPdfExportProperties() {\n return {\n header: {\n fromTop: 0,\n height: 120,\n contents: [\n {\n type: 'Text',\n value: 'INVOICE',\n position: { x: 280, y: 0 },\n style: { textBrushColor: '#C25050', fontSize: 25 },\n },\n {\n type: 'Text',\n value: 'INVOICE NUMBER',\n position: { x: 500, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Date',\n position: { x: 600, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n }, {\n type: 'Text',\n value: '223344',\n position: { x: 500, y: 50 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: date,\n position: { x: 600, y: 50 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'CUSTOMER ID',\n position: { x: 500, y: 70 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'TERMS',\n position: { x: 600, y: 70 },\n style: { textBrushColor: '#C67878', fontSize: 10 },\n }, {\n type: 'Text',\n value: '223',\n position: { x: 500, y: 90 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Net 30 days',\n position: { x: 600, y: 90 },\n style: { textBrushColor: '#000000', fontSize: 10 },\n },\n {\n type: 'Text',\n value: 'Adventure Traders',\n position: { x: 20, y: 30 },\n style: { textBrushColor: '#C67878', fontSize: 20 }\n },\n {\n type: 'Text',\n value: '2501 Aerial Center Parkway',\n position: { x: 20, y: 65 },\n style: { textBrushColor: '#000000', fontSize: 11 }\n },\n {\n type: 'Text',\n value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',\n position: { x: 20, y: 80 },\n style: { textBrushColor: '#000000', fontSize: 11 }\n },\n ]\n },\n footer: {\n fromBottom: 160,\n height: 100,\n contents: [\n {\n type: 'Text',\n value: 'Thank you for your business !',\n position: { x: 250, y: 20 },\n style: { textBrushColor: '#C67878', fontSize: 14 }\n },\n {\n type: 'Text',\n value: '! Visit Again !',\n position: { x: 300, y: 45 },\n style: { textBrushColor: '#C67878', fontSize: 14 }\n }\n ]\n },\n \n fileName: \"pdfdocument.pdf\"\n };\n }\n"} \ No newline at end of file diff --git a/src/grid/aggregate-default-stack.json b/src/grid/aggregate-default-stack.json index 59e41185..1ce69237 100644 --- a/src/grid/aggregate-default-stack.json +++ b/src/grid/aggregate-default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'Freight', width: 160, format: 'C2', textAlign: 'Right' },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 140 }\n ],\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Sum: ${Sum}'\n }]\n },\n {\n columns: [{\n type: 'Average',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Average: ${Average}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'Freight', width: 160, format: 'C2', textAlign: 'Right' },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 140 }\n ],\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Sum: ${Sum}'\n }]\n },\n {\n columns: [{\n type: 'Average',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Average: ${Average}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/aggregate-group-stack.json b/src/grid/aggregate-group-stack.json index e4f210e6..20a2c164 100644 --- a/src/grid/aggregate-group-stack.json +++ b/src/grid/aggregate-group-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var refresh;\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n allowGrouping: true,\n groupSettings: { showDropArea: false, columns: ['CategoryName'] },\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n load: function() {\n refresh = grid.refreshing;\n },\n dataBound: function() {\n if (refresh) {\n grid.groupColumn('CategoryName');\n refresh = false;\n }\n },\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'UnitsInStock',\n groupFooterTemplate: 'Total units: ${Sum}'\n },\n {\n type: 'TrueCount',\n field: 'Discontinued',\n groupFooterTemplate: 'Discontinued: ${TrueCount}'\n },\n {\n type: 'Max',\n field: 'UnitsInStock',\n groupCaptionTemplate: 'Maximum: ${Max}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var refresh;\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n allowGrouping: true,\n groupSettings: { showDropArea: false, columns: ['CategoryName'] },\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n load: function() {\n refresh = grid.refreshing;\n },\n dataBound: function() {\n if (refresh) {\n grid.groupColumn('CategoryName');\n refresh = false;\n }\n },\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'UnitsInStock',\n groupFooterTemplate: 'Total units: ${Sum}'\n },\n {\n type: 'TrueCount',\n field: 'Discontinued',\n groupFooterTemplate: 'Discontinued: ${TrueCount}'\n },\n {\n type: 'Max',\n field: 'UnitsInStock',\n groupCaptionTemplate: 'Maximum: ${Max}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/auto-wrap-stack.json b/src/grid/auto-wrap-stack.json index 4e4fcbc9..b7c81a0c 100644 --- a/src/grid/auto-wrap-stack.json +++ b/src/grid/auto-wrap-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        Source:\n \n Wikipedia: List of Prolific inventors\n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.inventoryData,\n allowPaging: true,\n allowTextWrap: true,\n columns: [\n { field: 'Inventor', headerText: 'Inventor Name', width: 140 },\n { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 185, textAlign: 'Right' },\n { field: 'Country', headerText: 'Country', width: 120 },\n { field: 'Active', headerText: 'Active', width: 130 },\n { field: 'Mainfieldsofinvention', headerText: 'Main fields of invention', width: 180 },\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
        diff --git a/src/grid/batch-editing-stack.json b/src/grid/batch-editing-stack.json index 78dd52a4..d436f8ec 100644 --- a/src/grid/batch-editing-stack.json +++ b/src/grid/batch-editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file diff --git a/src/grid/checkbox-selection-stack.json b/src/grid/checkbox-selection-stack.json index 62fd9473..0550d200 100644 --- a/src/grid/checkbox-selection-stack.json +++ b/src/grid/checkbox-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.inventoryData,\n allowPaging: true,\n allowSelection: true,\n selectionSettings: { persistSelection: true },\n editSettings: { allowDeleting: true },\n toolbar: [ 'Delete' ],\n enableHover: false,\n columns: [\n { type: 'checkbox', width: 50 },\n { field: 'Inventor', isPrimaryKey: true, headerText: 'Inventor Name', width: 180 },\n { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 195, textAlign: 'Right' },\n { field: 'Country', headerText: 'Country', width: 120 },\n { field: 'Active', headerText: 'Active', width: 130 }\n ],\n pageSettings: { pageCount: 2 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.inventoryData,\n allowPaging: true,\n allowSelection: true,\n selectionSettings: { persistSelection: true },\n editSettings: { allowDeleting: true },\n toolbar: [ 'Delete' ],\n enableHover: false,\n columns: [\n { type: 'checkbox', width: 50 },\n { field: 'Inventor', isPrimaryKey: true, headerText: 'Inventor Name', width: 180 },\n { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 195, textAlign: 'Right' },\n { field: 'Country', headerText: 'Country', width: 120 },\n { field: 'Active', headerText: 'Active', width: 130 }\n ],\n pageSettings: { pageCount: 2 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/clipboard-stack.json b/src/grid/clipboard-stack.json index 7842f139..84f6900d 100644 --- a/src/grid/clipboard-stack.json +++ b/src/grid/clipboard-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n var alertDialogObj = new ej.popups.Dialog({\n header: 'Copy with Header',\n content: 'Atleast one row should be selected to copy with header',\n showCloseIcon: false,\n target: '.control-section',\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }\n }],\n width: '300px',\n visible: false,\n animationSettings: { effect: 'None' }\n });\n alertDialogObj.appendTo('#alertDialog');\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowPaging: true,\n toolbar: [{ text: 'Copy', tooltipText: 'Copy', prefixIcon: 'e-copy', id: 'copy' },\n { text: 'Copy With Header', tooltipText: 'Copy With Header', prefixIcon: 'e-copy', id: 'copyHeader' }],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 5 },\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n toolbarClick: function (args) {\n if(grid.getSelectedRecords().length>0) {\n var withHeader = false;\n if (args.item.id === 'copyHeader') {\n withHeader = true;\n }\n grid.copy(withHeader);\n } else {\n alertDialogObj.show();\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n var alertDialogObj = new ej.popups.Dialog({\n header: 'Copy with Header',\n content: 'Atleast one row should be selected to copy with header',\n showCloseIcon: false,\n target: '.control-section',\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }\n }],\n width: '300px',\n visible: false,\n animationSettings: { effect: 'None' }\n });\n alertDialogObj.appendTo('#alertDialog');\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowPaging: true,\n toolbar: [{ text: 'Copy', tooltipText: 'Copy', prefixIcon: 'e-copy', id: 'copy' },\n { text: 'Copy With Header', tooltipText: 'Copy With Header', prefixIcon: 'e-copy', id: 'copyHeader' }],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 5 },\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n toolbarClick: function (args) {\n if(grid.getSelectedRecords().length>0) {\n var withHeader = false;\n if (args.item.id === 'copyHeader') {\n withHeader = true;\n }\n grid.copy(withHeader);\n } else {\n alertDialogObj.show();\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/clipboard.html b/src/grid/clipboard.html index 823cead1..dbe96c5e 100644 --- a/src/grid/clipboard.html +++ b/src/grid/clipboard.html @@ -24,6 +24,7 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/grid/column-chooser-stack.json b/src/grid/column-chooser-stack.json index 94f41c07..c94a4b17 100644 --- a/src/grid/column-chooser-stack.json +++ b/src/grid/column-chooser-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n showColumnChooser: true,\n allowPaging: true,\n toolbar: ['ColumnChooser'],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150, showInColumnChooser: false },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },\n { field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n showColumnChooser: true,\n allowPaging: true,\n toolbar: ['ColumnChooser'],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150, showInColumnChooser: false },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },\n { field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/column-menu-stack.json b/src/grid/column-menu-stack.json index b72f8499..173eeedb 100644 --- a/src/grid/column-menu-stack.json +++ b/src/grid/column-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowGrouping: true,\n allowSorting: true,\n allowFiltering: true,\n filterSettings: { type: 'CheckBox' },\n allowPaging: true,\n groupSettings: { showGroupedColumn: true },\n showColumnMenu: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right', showInColumnChooser: false },\n { field: 'CustomerName', headerText: 'Customer Name' },\n { field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' },\n { field: 'ShipName', headerText: 'Ship Name', width: 300 },\n { field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },\n { field: 'ShipCity', headerText: 'Ship City', width: 200 }\n ]\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowGrouping: true,\n allowSorting: true,\n allowFiltering: true,\n filterSettings: { type: 'CheckBox' },\n allowPaging: true,\n groupSettings: { showGroupedColumn: true },\n showColumnMenu: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'Right', showInColumnChooser: false },\n { field: 'CustomerName', headerText: 'Customer Name' },\n { field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' },\n { field: 'ShipName', headerText: 'Ship Name', width: 300 },\n { field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },\n { field: 'ShipCity', headerText: 'Ship City', width: 200 }\n ]\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file diff --git a/src/grid/column-resize-stack.json b/src/grid/column-resize-stack.json index 787f92f9..692a96e9 100644 --- a/src/grid/column-resize-stack.json +++ b/src/grid/column-resize-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowResizing: true,\n height: 400,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', minWidth: 120, width: 200, maxWidth: 300, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', minWidth: 8, width: 200 },\n { field: 'OrderDate', headerText: 'Order Date', minWidth: 8, width: 200, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 150, format: 'C2', minWidth: 8, textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', minWidth: 8, width: 300 },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 200, format: 'yMd', textAlign: 'Right', allowResizing: false },\n { field: 'ShipCountry', headerText: 'Ship Country', minWidth: 8, width: 200 },\n { field: 'ShipCity', headerText: 'Ship City', minWidth: 8, width: 200 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowResizing: true,\n height: 400,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', minWidth: 120, width: 200, maxWidth: 300, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', minWidth: 8, width: 200 },\n { field: 'OrderDate', headerText: 'Order Date', minWidth: 8, width: 200, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 150, format: 'C2', minWidth: 8, textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', minWidth: 8, width: 300 },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 200, format: 'yMd', textAlign: 'Right', allowResizing: false },\n { field: 'ShipCountry', headerText: 'Ship Country', minWidth: 8, width: 200 },\n { field: 'ShipCity', headerText: 'Ship City', minWidth: 8, width: 200 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/column-spanning-stack.json b/src/grid/column-spanning-stack.json index cd24a0a1..4e0a2aea 100644 --- a/src/grid/column-spanning-stack.json +++ b/src/grid/column-spanning-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.columnSpanData,\n queryCellInfo: QueryCellEvent,\n gridLines: 'Both',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },\n { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },\n { field: '9:00', headerText: '9.00 AM', width: 120 },\n { field: '9:30', headerText: '9.30 AM', width: 120 },\n { field: '10:00', headerText: '10.00 AM', width: 120 },\n { field: '10:30', headerText: '10.30 AM', width: 120 },\n { field: '11:00', headerText: '11.00 AM', width: 120 },\n { field: '11:30', headerText: '11.30 AM', width: 120 },\n { field: '12:00', headerText: '12.00 PM', width: 120 },\n { field: '12:30', headerText: '12.30 PM', width: 120 },\n { field: '2:30', headerText: '2.30 PM', width: 120 },\n { field: '3:00', headerText: '3.00 PM', width: 120 },\n { field: '3:30', headerText: '3.30 PM', width: 120 },\n { field: '4:00', headerText: '4.00 PM', width: 120 },\n { field: '4:30', headerText: '4.30 PM', width: 120 },\n { field: '5:00', headerText: '5.00 PM', width: 120 }\n ],\n width: 'auto',\n height: 'auto',\n allowTextWrap: true,\n });\n grid.appendTo('#Grid');\n\nfunction QueryCellEvent(args) {\n var data = args.data;\n switch (data.EmployeeID) {\n case 10001:\n if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 3;\n }\n break;\n case 10002:\n if (args.column.field === '9:30' || args.column.field === '2:30' ||\n args.column.field === '4:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 4;\n }\n break;\n case 10003:\n if (args.column.field === '9:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '10:30' || args.column.field === '3:30' ||\n args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10004:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 4;\n }\n else if (args.column.field === '4:00' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10005:\n if (args.column.field === '9:00') {\n args.colSpan = 4;\n }\n else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10006:\n if (args.column.field === '9:00' || args.column.field === '4:30' ||\n args.column.field === '2:30' || args.column.field === '3:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '10:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10007:\n if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '11:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n }\n break;\n case 10008:\n if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n default:\n extendQueryCellEvent(args, data.EmployeeID);\n }\n}\nfunction extendQueryCellEvent(args, value) {\n switch (value) {\n case 10009:\n if (args.column.field === '9:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 100010:\n if (args.column.field === '9:00' || args.column.field === '2:30' ||\n args.column.field === '4:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '10:30') {\n args.colSpan = 2;\n }\n break;\n }\n}"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.columnSpanData,\n queryCellInfo: QueryCellEvent,\n gridLines: 'Both',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },\n { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },\n { field: '9:00', headerText: '9.00 AM', width: 120 },\n { field: '9:30', headerText: '9.30 AM', width: 120 },\n { field: '10:00', headerText: '10.00 AM', width: 120 },\n { field: '10:30', headerText: '10.30 AM', width: 120 },\n { field: '11:00', headerText: '11.00 AM', width: 120 },\n { field: '11:30', headerText: '11.30 AM', width: 120 },\n { field: '12:00', headerText: '12.00 PM', width: 120 },\n { field: '12:30', headerText: '12.30 PM', width: 120 },\n { field: '2:30', headerText: '2.30 PM', width: 120 },\n { field: '3:00', headerText: '3.00 PM', width: 120 },\n { field: '3:30', headerText: '3.30 PM', width: 120 },\n { field: '4:00', headerText: '4.00 PM', width: 120 },\n { field: '4:30', headerText: '4.30 PM', width: 120 },\n { field: '5:00', headerText: '5.00 PM', width: 120 }\n ],\n width: 'auto',\n height: 'auto',\n allowTextWrap: true,\n });\n grid.appendTo('#Grid');\n\nfunction QueryCellEvent(args) {\n var data = args.data;\n switch (data.EmployeeID) {\n case 10001:\n if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 3;\n }\n break;\n case 10002:\n if (args.column.field === '9:30' || args.column.field === '2:30' ||\n args.column.field === '4:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 4;\n }\n break;\n case 10003:\n if (args.column.field === '9:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '10:30' || args.column.field === '3:30' ||\n args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10004:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n }\n else if (args.column.field === '11:00') {\n args.colSpan = 4;\n }\n else if (args.column.field === '4:00' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10005:\n if (args.column.field === '9:00') {\n args.colSpan = 4;\n }\n else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 10006:\n if (args.column.field === '9:00' || args.column.field === '4:30' ||\n args.column.field === '2:30' || args.column.field === '3:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '10:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10007:\n if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {\n args.colSpan = 2;\n }\n else if (args.column.field === '11:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n }\n break;\n case 10008:\n if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n default:\n extendQueryCellEvent(args, data.EmployeeID);\n }\n}\nfunction extendQueryCellEvent(args, value) {\n switch (value) {\n case 10009:\n if (args.column.field === '9:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '4:30' || args.column.field === '2:30') {\n args.colSpan = 2;\n }\n break;\n case 100010:\n if (args.column.field === '9:00' || args.column.field === '2:30' ||\n args.column.field === '4:00' || args.column.field === '11:30') {\n args.colSpan = 3;\n }\n else if (args.column.field === '10:30') {\n args.colSpan = 2;\n }\n break;\n }\n}"} \ No newline at end of file diff --git a/src/grid/column-template-stack.json b/src/grid/column-template-stack.json index 5ba79507..4d7048f1 100644 --- a/src/grid/column-template-stack.json +++ b/src/grid/column-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.employeeData).executeLocal(new ej.data.Query().take(8)),\n columns: [\n {\n headerText: 'Employee Image', textAlign: 'Center',\n template: '#template', width: 150\n },\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 120 },\n { field: 'Title', headerText: 'Title', width: 170 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n },\n { field: 'ReportsTo', headerText: 'Reports To', width: 120, textAlign: 'Right' }\n ],\n width: 'auto',\n height: 359\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.employeeData).executeLocal(new ej.data.Query().take(8)),\n columns: [\n {\n headerText: 'Employee Image', textAlign: 'Center',\n template: '#template', width: 150\n },\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 120 },\n { field: 'Title', headerText: 'Title', width: 170 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n },\n { field: 'ReportsTo', headerText: 'Reports To', width: 120, textAlign: 'Right' }\n ],\n width: 'auto',\n height: 359\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/column-template.html b/src/grid/column-template.html index a4949ec7..1a926b8c 100644 --- a/src/grid/column-template.html +++ b/src/grid/column-template.html @@ -1,10 +1,10 @@ \n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false },\n allowPaging: true,\n pageSettings: {pageCount: 5},\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit',\n format: 'yMd', width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n },\n { headerText: 'Manage Records', width: 160,\n commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },\n { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },\n { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },\n { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }]\n }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false },\n allowPaging: true,\n pageSettings: {pageCount: 5},\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit',\n format: 'yMd', width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n },\n { headerText: 'Manage Records', width: 160,\n commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },\n { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },\n { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },\n { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }]\n }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/context-menu-stack.json b/src/grid/context-menu-stack.json index 0b624738..e4ccb89a 100644 --- a/src/grid/context-menu-stack.json +++ b/src/grid/context-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowExcelExport: true,\n allowPdfExport: true,\n allowSorting: true,\n editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true },\n allowPaging: true,\n contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',\n 'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport',\n 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage'],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', isPrimaryKey: true },\n { field: 'CustomerName', headerText: 'Customer Name' },\n { field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' },\n { field: 'ShipName', headerText: 'Ship Name', width: 200 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150, editType: 'dropdownedit' },\n { field: 'ShipCity', headerText: 'Ship City', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowExcelExport: true,\n allowPdfExport: true,\n allowSorting: true,\n editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true },\n allowPaging: true,\n contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',\n 'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport',\n 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage'],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', isPrimaryKey: true },\n { field: 'CustomerName', headerText: 'Customer Name' },\n { field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' },\n { field: 'ShipName', headerText: 'Ship Name', width: 200 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150, editType: 'dropdownedit' },\n { field: 'ShipCity', headerText: 'Ship City', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n\n\n"} \ No newline at end of file diff --git a/src/grid/default-exporting-stack.json b/src/grid/default-exporting-stack.json index 27ee62a2..162ad178 100644 --- a/src/grid/default-exporting-stack.json +++ b/src/grid/default-exporting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n var refresh;\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowExcelExport: true,\n allowPdfExport: true,\n allowPaging: true,\n allowGrouping: true,\n toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],\n groupSettings: { showDropArea: false, columns: ['ShipCountry'] },\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },\n { field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }\n ],\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n groupFooterTemplate: 'Total freight: ${Sum}'\n }]\n }],\n load: function() {\n refresh = grid.refreshing;\n },\n dataBound: function() {\n if (refresh) {\n grid.groupColumn('ShipCountry');\n refresh = false;\n }\n },\n });\n grid.appendTo('#Grid');\n grid.toolbarClick = function (args) {\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport();\n }\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport();\n }\n if (args.item.id === 'Grid_csvexport') {\n grid.csvExport();\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n var refresh;\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowExcelExport: true,\n allowPdfExport: true,\n allowPaging: true,\n allowGrouping: true,\n toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],\n groupSettings: { showDropArea: false, columns: ['ShipCountry'] },\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },\n { field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }\n ],\n aggregates: [{\n columns: [{\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n groupFooterTemplate: 'Total freight: ${Sum}'\n }]\n }],\n load: function() {\n refresh = grid.refreshing;\n },\n dataBound: function() {\n if (refresh) {\n grid.groupColumn('ShipCountry');\n refresh = false;\n }\n },\n });\n grid.appendTo('#Grid');\n grid.toolbarClick = function (args) {\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport();\n }\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport();\n }\n if (args.item.id === 'Grid_csvexport') {\n grid.csvExport();\n }\n };\n"} \ No newline at end of file diff --git a/src/grid/default-paging-stack.json b/src/grid/default-paging-stack.json index deb437cb..1d89877f 100644 --- a/src/grid/default-paging-stack.json +++ b/src/grid/default-paging-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n height: 365,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 135, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 4, pageSizes: true }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n height: 365,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 135, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 4, pageSizes: true }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/default-stack.json b/src/grid/default-stack.json index 5187933b..6ac58704 100644 --- a/src/grid/default-stack.json +++ b/src/grid/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var data = new ej.data.DataManager(window.orderData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var data = new ej.data.DataManager(window.orderData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/detail-template-stack.json b/src/grid/detail-template-stack.json index 3d8044ca..253c7246 100644 --- a/src/grid/detail-template-stack.json +++ b/src/grid/detail-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}var instance = new ej.base.Internationalization();\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n detailTemplate: '#detailtemplate',\n height: 335,\n width: 'auto',\n columns: [\n { field: 'FirstName', headerText: 'First Name', width: 110 },\n { field: 'LastName', headerText: 'Last Name', width: 110 },\n { field: 'Title', headerText: 'Title', width: 150 },\n { field: 'Country', headerText: 'Country', width: 110 }\n ]\n });\n grid.appendTo('#Grid');\n};\nwindow.format = function (value) {\n return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}var instance = new ej.base.Internationalization();\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n detailTemplate: '#detailtemplate',\n height: 335,\n width: 'auto',\n columns: [\n { field: 'FirstName', headerText: 'First Name', width: 110 },\n { field: 'LastName', headerText: 'Last Name', width: 110 },\n { field: 'Title', headerText: 'Title', width: 150 },\n { field: 'Country', headerText: 'Country', width: 110 }\n ]\n });\n grid.appendTo('#Grid');\n};\nwindow.format = function (value) {\n return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });\n"} \ No newline at end of file diff --git a/src/grid/dialog-editing-stack.json b/src/grid/dialog-editing-stack.json index c1efbf41..d93a49d4 100644 --- a/src/grid/dialog-editing-stack.json +++ b/src/grid/dialog-editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number:true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number:true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/dialog-template-stack.json b/src/grid/dialog-template-stack.json index 4dc98111..8d546c99 100644 --- a/src/grid/dialog-template-stack.json +++ b/src/grid/dialog-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var countryData = ej.data.DataUtil.distinct(orderData, 'ShipCountry', true);\n var shipCityData = ej.data.DataUtil.distinct(orderData, 'ShipCity', true);\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: '#dialogtemplate' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 120, defaultValue: ''\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140, defaultValue: ''\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2'\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170, validationRules: { date: [true, 'Enter valid date'] }\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, defaultValue: ''\n }\n ],\n actionComplete: function(args) {\n if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {\n var data = args.rowData;\n // Convert Widget for the Freight field\n new ej.inputs.NumericTextBox({value: data.Freight, format: 'C2', placeholder: 'Freight', floatLabelType: 'Always' },\n args.form.elements.namedItem('Freight'));\n \n // Convert Widget for the ShipCountry field\n new ej.dropdowns.DropDownList({value: data.ShipCountry, popupHeight: '300px', floatLabelType: 'Always',\n dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'},\n args.form.elements.namedItem('ShipCountry'));\n \n // Convert Widget for the OrderDate field\n new ej.calendars.DatePicker({value: data.OrderDate, placeholder: 'Order Date', floatLabelType: 'Always' },\n args.form.elements.namedItem('OrderDate'));\n \n // Convert Widget for the ShipCity field\n new ej.dropdowns.DropDownList({value: data.ShipCity, dataSource: shipCityData, floatLabelType: 'Always',\n popupHeight: '300px', fields: {text: 'ShipCity', value: 'ShipCity' }, placeholder: 'Ship City' },\n args.form.elements.namedItem('ShipCity'));\n\n if (ej.base.Browser.isDevice) {\n args.dialog.height = window.innerHeight - 90 + 'px';\n args.dialog.dataBind();\n }\n \n // Set initail Focus\n if (args.requestType === 'beginEdit') {\n args.form.elements.namedItem('CustomerID').focus();\n } else {\n args.form.elements.namedItem('OrderID').focus();\n }\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var countryData = ej.data.DataUtil.distinct(orderData, 'ShipCountry', true);\n var shipCityData = ej.data.DataUtil.distinct(orderData, 'ShipCity', true);\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: '#dialogtemplate' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 120, defaultValue: ''\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140, defaultValue: ''\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2'\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170, validationRules: { date: [true, 'Enter valid date'] }\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, defaultValue: ''\n }\n ],\n actionComplete: function(args) {\n if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {\n var data = args.rowData;\n // Convert Widget for the Freight field\n new ej.inputs.NumericTextBox({value: data.Freight, format: 'C2', placeholder: 'Freight', floatLabelType: 'Always' },\n args.form.elements.namedItem('Freight'));\n \n // Convert Widget for the ShipCountry field\n new ej.dropdowns.DropDownList({value: data.ShipCountry, popupHeight: '300px', floatLabelType: 'Always',\n dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'},\n args.form.elements.namedItem('ShipCountry'));\n \n // Convert Widget for the OrderDate field\n new ej.calendars.DatePicker({value: data.OrderDate, placeholder: 'Order Date', floatLabelType: 'Always' },\n args.form.elements.namedItem('OrderDate'));\n \n // Convert Widget for the ShipCity field\n new ej.dropdowns.DropDownList({value: data.ShipCity, dataSource: shipCityData, floatLabelType: 'Always',\n popupHeight: '300px', fields: {text: 'ShipCity', value: 'ShipCity' }, placeholder: 'Ship City' },\n args.form.elements.namedItem('ShipCity'));\n\n if (ej.base.Browser.isDevice) {\n args.dialog.height = window.innerHeight - 90 + 'px';\n args.dialog.dataBind();\n }\n \n // Set initail Focus\n if (args.requestType === 'beginEdit') {\n args.form.elements.namedItem('CustomerID').focus();\n } else {\n args.form.elements.namedItem('OrderID').focus();\n }\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/dialog-template.html b/src/grid/dialog-template.html index a4c6748c..b07b4215 100644 --- a/src/grid/dialog-template.html +++ b/src/grid/dialog-template.html @@ -1,14 +1,15 @@ + \n\n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n\n \n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowPaging: true,\n allowRowDragAndDrop: true,\n selectionSettings: { type: 'Multiple' },\n rowDropSettings: { targetID: 'DestGrid' },\n pageSettings: { pageCount: 2 },\n width: '49%',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 135 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }\n ]\n });\n grid.appendTo('#Grid');\n var destGrid = new ej.grids.Grid({\n dataSource: [],\n allowPaging: true,\n allowRowDragAndDrop: true,\n selectionSettings: { type: 'Multiple' },\n rowDropSettings: { targetID: 'Grid' },\n pageSettings: { pageCount: 2 },\n width: '49%',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 135 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }\n ]\n });\n destGrid.appendTo('#DestGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n - +
        diff --git a/src/grid/drag-drop-within-grid-stack.json b/src/grid/drag-drop-within-grid-stack.json index 666a05d6..9bcffa63 100644 --- a/src/grid/drag-drop-within-grid-stack.json +++ b/src/grid/drag-drop-within-grid-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n
        \n
        \n
        \n
        \n \n \n \n\n \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowRowDragAndDrop: true,\n selectionSettings: { type: 'Multiple' },\n height: 400,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, width: 80, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 130, textAlign: 'Left' },\n { field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', headerText: 'Freight', width: 130, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCity', headerText: 'Ship City', width: 130, textAlign: 'Left' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n - +
        diff --git a/src/grid/events-stack.json b/src/grid/events-stack.json index 910bb2ae..57ab3b18 100644 --- a/src/grid/events-stack.json +++ b/src/grid/events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n allowGrouping: true,\n allowReordering: true,\n allowSorting: true,\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 170 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170 },\n ],\n load: load,\n created: create,\n actionBegin: actionBegin,\n actionComplete: actionComplete,\n dataBound: dataBound,\n rowSelecting: rowSelecting,\n rowSelected: rowSelected,\n columnDragStart: columnDragStart,\n columnDrag: columnDrag,\n columnDrop: columnDrop\n });\n grid.appendTo('#Grid');\n \n // sets the clear button\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n function columnDragStart() {\n appendElement('Grid columnDragStart event called
        ');\n }\n function columnDrop() {\n appendElement('Grid columnDrop event called
        ');\n }\n function columnDrag() {\n appendElement('Grid columnDrag event called
        ');\n }\n function load() {\n appendElement('Grid load event called
        ');\n }\n function create() {\n appendElement('Grid create event called
        ');\n }\n function actionBegin() {\n appendElement('Grid actionBegin event called
        ');\n }\n function actionComplete() {\n appendElement('Grid actionComplete event called
        ');\n }\n function dataBound() {\n appendElement('Grid dataBound event called
        ');\n }\n function rowSelecting() {\n appendElement('Grid rowSelecting event called
        ');\n }\n function rowSelected() {\n appendElement('Grid rowSelected event called
        ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
        diff --git a/src/grid/filter-menu-stack.json b/src/grid/filter-menu-stack.json index a0a16e6f..75388654 100644 --- a/src/grid/filter-menu-stack.json +++ b/src/grid/filter-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n
        \n
        \n FilterType\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * Grid filtermenu sample\n */\n\n var filtertype = [\n { id: 'Menu', type: 'Menu' },\n { id: 'CheckBox', type: 'Checkbox' },\n { id: 'Excel', type: 'Excel' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderDataSource,\n allowPaging: true,\n allowFiltering: true,\n filterSettings: { type: 'Menu' },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format :{type:'dateTime', format: 'M/d/y hh:mm a'}, textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n\n // sets the filterType\n var dropDownFilterType = new ej.dropdowns.DropDownList({\n dataSource: filtertype,\n fields: { text: 'type', value: 'id' },\n value: 'Menu',\n change: function (e) {\n var dropSelectedValue = e.value;\n grid.filterSettings.type = dropSelectedValue;\n grid.clearFiltering();\n }\n });\n dropDownFilterType.appendTo('#filtertype');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n
        \n
        \n FilterType\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Grid filtermenu sample\n */\n\n var filtertype = [\n { id: 'Menu', type: 'Menu' },\n { id: 'CheckBox', type: 'Checkbox' },\n { id: 'Excel', type: 'Excel' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderDataSource,\n allowPaging: true,\n allowFiltering: true,\n filterSettings: { type: 'Menu' },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format :{type:'dateTime', format: 'M/d/y hh:mm a'}, textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n\n // sets the filterType\n var dropDownFilterType = new ej.dropdowns.DropDownList({\n dataSource: filtertype,\n fields: { text: 'type', value: 'id' },\n value: 'Menu',\n change: function (e) {\n var dropSelectedValue = e.value;\n grid.filterSettings.type = dropSelectedValue;\n grid.clearFiltering();\n }\n });\n dropDownFilterType.appendTo('#filtertype');\n"} \ No newline at end of file diff --git a/src/grid/filter-menu.html b/src/grid/filter-menu.html index 60606c20..540d9a53 100644 --- a/src/grid/filter-menu.html +++ b/src/grid/filter-menu.html @@ -21,13 +21,13 @@
        - + - +

        This sample demonstrates the way of filtering Grid columns using menu, checkbox and excel filter UI. In this sample, click the filtering diff --git a/src/grid/filter-stack.json b/src/grid/filter-stack.json index 885c0549..c35c268a 100644 --- a/src/grid/filter-stack.json +++ b/src/grid/filter-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n allowFiltering: true,\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n allowFiltering: true,\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/foreign-key-stack.json b/src/grid/foreign-key-stack.json index 51c03268..08ba30e3 100644 --- a/src/grid/foreign-key-stack.json +++ b/src/grid/foreign-key-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowPaging: true,\n allowSorting: true,\n allowFiltering: true,\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n filterSettings: { type: 'Menu' },\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },\n columns: [\n {\n field: 'OrderID', width: 120, headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }\n },\n {\n field: 'CustomerID', foreignKeyField: 'CustomerID', foreignKeyValue: 'ContactName', dataSource: window.customerData,\n width: 150, headerText: 'Customer Name', validationRules: { required: true }\n },\n {\n field: 'Freight', textAlign: 'Right', width: 100, editType: 'numericedit', format: 'C2'\n },\n { field: 'ShipName', headerText: 'Ship Name', width: 170 },\n { field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }\n ]\n }\n);\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n allowPaging: true,\n allowSorting: true,\n allowFiltering: true,\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n filterSettings: { type: 'Menu' },\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },\n columns: [\n {\n field: 'OrderID', width: 120, headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }\n },\n {\n field: 'CustomerID', foreignKeyField: 'CustomerID', foreignKeyValue: 'ContactName', dataSource: window.customerData,\n width: 150, headerText: 'Customer Name', validationRules: { required: true }\n },\n {\n field: 'Freight', textAlign: 'Right', width: 100, editType: 'numericedit', format: 'C2'\n },\n { field: 'ShipName', headerText: 'Ship Name', width: 170 },\n { field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }\n ]\n }\n);\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/frozen-rows-columns-stack.json b/src/grid/frozen-rows-columns-stack.json index b2cb46e5..ed5e8b74 100644 --- a/src/grid/frozen-rows-columns-stack.json +++ b/src/grid/frozen-rows-columns-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Frozen Rows
        \n         		\n
        \n \n
        \n
        \n
        Frozen Columns
        \n         		\n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Grid frozen rows and columns sample\n */\n\n var data = new ej.data.DataManager(window.data).executeLocal(new ej.data.Query().take(50));\n var grid = new ej.grids.Grid({\n dataSource: data,\n height: 410,\n allowSelection: false,\n enableHover: false,\n allowSorting: true,\n allowMultiSorting: false,\n allowResizing: true,\n frozenColumns: 1,\n frozenRows: 2,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'Freight', width: 125, format: 'C2' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 130 },\n { field: 'CustomerName', headerText: 'Customer Name', width: 180 },\n { field: 'OrderDate', headerText: 'Order Date', width: 150, format: 'yMd', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 180, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', width: 300 },\n { field: 'ShipAddress', headerText: 'Ship Address', width: 270 },\n { field: 'ShipCity', headerText: 'Ship City', width: 250 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 250 }\n ]\n });\n grid.appendTo('#Grid');\n //Render NumericTextbox component with specific range for frozen rows.\n var rows = new ej.inputs.NumericTextBox({\n min: 0,\n max: 5,\n value: 2\n });\n rows.appendTo('#rows');\n //Render NumericTextbox component with specific range for frozen columns.\n var columns = new ej.inputs.NumericTextBox({\n min: 1,\n max: 2,\n value: 1\n });\n columns.appendTo('#columns');\n //Render Button component in properties panel.\n var buttonSet = new ej.buttons.Button();\n buttonSet.appendTo('#buttonSet');\n if (ej.base.Browser.isDevice) {\n columns.max = 1;\n rows.max = 5;\n }\n //After clicking 'Set' button, the `frozenRows` and `frozenColumns` values will be updated in Grid.\n document.getElementById('buttonSet').onclick = function () {\n grid.frozenColumns = columns.value;\n grid.frozenRows = rows.value;\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Frozen Rows
        \n         		\n
        \n \n
        \n
        \n
        Frozen Columns
        \n         		\n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Grid frozen rows and columns sample\n */\n\n var data = new ej.data.DataManager(window.data).executeLocal(new ej.data.Query().take(50));\n var grid = new ej.grids.Grid({\n dataSource: data,\n height: 410,\n allowSelection: false,\n enableHover: false,\n allowSorting: true,\n allowMultiSorting: false,\n allowResizing: true,\n frozenColumns: 1,\n frozenRows: 2,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'Freight', width: 125, format: 'C2' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 130 },\n { field: 'CustomerName', headerText: 'Customer Name', width: 180 },\n { field: 'OrderDate', headerText: 'Order Date', width: 150, format: 'yMd', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 180, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', width: 300 },\n { field: 'ShipAddress', headerText: 'Ship Address', width: 270 },\n { field: 'ShipCity', headerText: 'Ship City', width: 250 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 250 }\n ]\n });\n grid.appendTo('#Grid');\n //Render NumericTextbox component with specific range for frozen rows.\n var rows = new ej.inputs.NumericTextBox({\n min: 0,\n max: 5,\n value: 2\n });\n rows.appendTo('#rows');\n //Render NumericTextbox component with specific range for frozen columns.\n var columns = new ej.inputs.NumericTextBox({\n min: 1,\n max: 2,\n value: 1\n });\n columns.appendTo('#columns');\n //Render Button component in properties panel.\n var buttonSet = new ej.buttons.Button();\n buttonSet.appendTo('#buttonSet');\n if (ej.base.Browser.isDevice) {\n columns.max = 1;\n rows.max = 5;\n }\n //After clicking 'Set' button, the `frozenRows` and `frozenColumns` values will be updated in Grid.\n document.getElementById('buttonSet').onclick = function () {\n grid.frozenColumns = columns.value;\n grid.frozenRows = rows.value;\n };\n"} \ No newline at end of file diff --git a/src/grid/frozen-rows-columns.html b/src/grid/frozen-rows-columns.html index b0207849..311a9b43 100644 --- a/src/grid/frozen-rows-columns.html +++ b/src/grid/frozen-rows-columns.html @@ -36,11 +36,13 @@
        + +

        This sample demonstrates the frozen rows and columns feature of the Grid. Scroll the movable content vertically/horizontally to view the frozen rows/columns with the content.

        diff --git a/src/grid/grid-lines-stack.json b/src/grid/grid-lines-stack.json index d1a798eb..acb5e3d8 100644 --- a/src/grid/grid-lines-stack.json +++ b/src/grid/grid-lines-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n
        \n
        \n GridLines\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var lines = [\n { id: 'Default', type: 'Default' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' },\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n gridLines: 'Default',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ]\n });\n grid.appendTo('#Grid');\n\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: lines,\n fields: { text: 'type', value: 'id' },\n value: 'Default',\n change: function (e) {\n grid.gridLines = e.value;\n grid.dataBind();\n grid.refresh();\n },\n });\n dropDownListObject.appendTo('#ddlelement');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n
        \n
        \n GridLines\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var lines = [\n { id: 'Default', type: 'Default' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' },\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n gridLines: 'Default',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ]\n });\n grid.appendTo('#Grid');\n\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: lines,\n fields: { text: 'type', value: 'id' },\n value: 'Default',\n change: function (e) {\n grid.gridLines = e.value;\n grid.dataBind();\n grid.refresh();\n },\n });\n dropDownListObject.appendTo('#ddlelement');\n"} \ No newline at end of file diff --git a/src/grid/grid-lines.html b/src/grid/grid-lines.html index 76524301..d8852c52 100644 --- a/src/grid/grid-lines.html +++ b/src/grid/grid-lines.html @@ -21,13 +21,13 @@
        - + - +

        This sample demonstrates visibility of the grid lines that separates the rows and columns. In this sample, you can change the gridline from the properties panel.

        diff --git a/src/grid/grid-overview-stack.json b/src/grid/grid-overview-stack.json index 0f381100..5bb44b5d 100644 --- a/src/grid/grid-overview-stack.json +++ b/src/grid/grid-overview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.getTradeData(1000),\n allowSelection: true,\n allowFiltering: true,\n allowSorting: true,\n enableVirtualization: true,\n filterSettings: { type: 'Menu' },\n selectionSettings: { persistSelection: true, type: \"Multiple\", checkboxOnly: true },\n enableHover: false,\n height: 600,\n rowHeight: 38,\n columns: [\n { type: \"checkbox\", field: \"\", allowFiltering: false, allowSorting: false, width: '60' },\n { field: 'EmployeeID', visible: false, headerText: 'Employee ID', isPrimaryKey: true, width: '130' },\n {\n field: 'Employees', headerText: 'Employee Name', width: '200', clipMode: 'EllipsisWithTooltip',\n template: '#empTemplate',\n filter: { type: 'CheckBox' }\n },\n { field: 'Designation', headerText: 'Designation', width: '170', filter: { type: 'CheckBox' }, clipMode: 'EllipsisWithTooltip' },\n { field: 'Mail', headerText: 'Mail', width: '230', filter: { type: 'Menu' } },\n {\n field: 'Location', width: '140', headerText: 'Location', filter: { type: 'CheckBox' },\n template: '#coltemplate'\n },\n { field: 'Status', headerText: 'Status', filter: { type: 'CheckBox', itemTemplate: '#StatusItemTemp' }, width: '150', template: \"#statusTemplate\" },\n { field: 'Trustworthiness', headerText: 'Trustworthiness', filter: { type: 'CheckBox', itemTemplate: '${ trustTemp(data)}' }, width: '200', template: \"#trustTemplate\" },\n { field: 'Rating', filter: { type: 'CheckBox', itemTemplate: '
        ${ratingDetail(data)}
        ' }, headerText: 'Rating', width: '160', template: '#ratingTemplate' },\n { field: 'Software', allowFiltering: false, allowSorting: false, headerText: 'Software Proficiency', width: '180', template: '#progessTemplate' },\n { field: 'CurrentSalary', headerText: 'Current Salary', format: \"C2\", filter: { type: 'Menu' }, textAlign: 'Right', width: '160' },\n { field: 'Address', headerText: 'Address', width: '240', filter: { type: 'Menu' }, clipMode: 'EllipsisWithTooltip' },\n ],\n queryCellInfo: queryCellInfo,\n dataBound: startTimer,\n actionComplete: complete\n });\n var dReady = false;\n var dtTime = false;\n var isDataBound = false;\n var isDataChanged = true;\n var intervalFun;\n var clrIntervalFun;\n var clrIntervalFun1;\n var clrIntervalFun2;\n var ddObj;\n var dropSlectedIndex = null;\n var stTime;\n stTime = performance.now();\n grid.appendTo('#Grid');\n grid.on('data-ready', function () {\n dReady = true;\n });\n var listObj = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select a Data Range',\n popupHeight: '240px',\n width: '220px',\n change: function () { valueChange(); }\n });\n listObj.appendTo('#ddl');\n\n function complete(args) {\n if (args.requestType === \"filterchoicerequest\") {\n if (args.filterModel.options.field === \"Trustworthiness\" || args.filterModel.options.field === \"Rating\" || args.filterModel.options.field === \"Status\") {\n var span = args.filterModel.dialogObj.element.querySelectorAll('.e-selectall')[0];\n if(!ej.base.isNullOrUndefined(span)) {\n ej.base.closest(span, '.e-ftrchk').classList.add(\"e-hide\");\n }\n }\n }\n }\n window.trustTemp = function (e) {\n if (e.Trustworthiness === \"Select All\") {\n return '';\n }\n return ' ' + e.Trustworthiness + '';\n };\n window.ratingDetail = function (e) {\n var grid = document.querySelector(\".e-grid\").ej2_instances[0];\n var div = document.createElement('div');\n div.className = 'rating';\n var span;\n if (e.Rating === \"Select All\") {\n return '';\n }\n for (var i = 0; i < 5; i++) {\n if (i < e.Rating) {\n span = document.createElement('span');\n span.className = 'star checked';\n div.appendChild(span);\n } else {\n span = document.createElement('span');\n span.className = 'star';\n div.appendChild(span);\n }\n }\n return div.outerHTML;\n };\n window.statusDetail = function (e) {\n var grid = document.querySelector(\".e-grid\").ej2_instances[0];\n var div = document.createElement('div');\n var span;\n if (e.Status === \"Select All\") {\n return 'Select All';\n }\n span = document.createElement('span');\n if (e.Status === \"Active\") {\n span.className = 'statustxt e-activecolor';\n span.textContent = \"Active\";\n div.className = 'statustemp e-activecolor';\n }\n if (e.Status === \"Inactive\") {\n span = document.createElement('span');\n span.className = 'statustxt e-inactivecolor';\n span.textContent = \"Inactive\";\n div.className = 'statustemp e-inactivecolor';\n }\n div.appendChild(span);\n return div.outerHTML;\n };\n function queryCellInfo(args) {\n if (args.column.field === 'Employees') {\n if (args.data.EmployeeImg === 'usermale') {\n args.cell.querySelector('.e-userimg').classList.add(\"sf-icon-Male\");\n } else {\n args.cell.querySelector('.e-userimg').classList.add(\"sf-icon-FeMale\");\n }\n }\n if (args.column.field === 'Status') {\n if (args.cell.textContent === \"Active\") {\n args.cell.querySelector(\".statustxt\").classList.add(\"e-activecolor\");\n args.cell.querySelector(\".statustemp\").classList.add(\"e-activecolor\");\n }\n if (args.cell.textContent === \"Inactive\") {\n args.cell.querySelector(\".statustxt\").classList.add(\"e-inactivecolor\");\n args.cell.querySelector(\".statustemp\").classList.add(\"e-inactivecolor\");\n }\n }\n if (args.column.field === 'Rating') {\n if (args.column.field === 'Rating') {\n for (var i = 0; i < args.data.Rating; i++) {\n args.cell.querySelectorAll(\"span\")[i].classList.add(\"checked\");\n }\n }\n }\n if (args.column.field === \"Software\") {\n if (args.data.Software <= 20) {\n args.data.Software = args.data.Software + 30;\n }\n args.cell.querySelector(\".bar\").style.width = args.data.Software + \"%\";\n args.cell.querySelector(\".barlabel\").textContent = args.data.Software + \"%\"; \n if (args.data.Status === \"Inactive\") {\n args.cell.querySelector(\".bar\").classList.add(\"progressdisable\");\n }\n }\n }\n function startTimer(args) {\n clearTimeout(clrIntervalFun);\n clearInterval(intervalFun);\n dtTime = true;\n }\n function valueChange() {\n listObj.closePopup();\n grid.showSpinner();\n dropSlectedIndex = null;\n var index = listObj.value;\n clearTimeout(clrIntervalFun2);\n clrIntervalFun2 = setTimeout(function () {\n isDataChanged = true;\n stTime = null;\n var contentElement = grid.contentModule.getPanel().firstChild;\n contentElement.scrollLeft = 0;\n contentElement.scrollTop = 0;\n grid.pageSettings.currentPage = 1;\n stTime = performance.now();\n grid.dataSource = getTradeData(index);\n grid.hideSpinner();\n }, 100);\n }\n document.getElementById('Grid').addEventListener('DOMSubtreeModified', function () {\n if (dReady && stTime && isDataChanged) {\n var msgEle = document.getElementById('msg'); \n var val = (performance.now() - stTime).toFixed(0);\n stTime = null;\n dtTime = false;\n dReady = false;\n isDataChanged = false;\n msgEle.innerHTML = 'Load Time: ' + \"\" + val + \"\" + 'ms';\n msgEle.classList.remove('e-hide');\n }\n });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n
        \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.getTradeData(1000),\n allowSelection: true,\n allowFiltering: true,\n allowSorting: true,\n enableVirtualization: true,\n filterSettings: { type: 'Menu' },\n selectionSettings: { persistSelection: true, type: \"Multiple\", checkboxOnly: true },\n enableHover: false,\n height: 600,\n rowHeight: 38,\n columns: [\n { type: \"checkbox\", field: \"\", allowFiltering: false, allowSorting: false, width: '60' },\n { field: 'EmployeeID', visible: false, headerText: 'Employee ID', isPrimaryKey: true, width: '130' },\n {\n field: 'Employees', headerText: 'Employee Name', width: '200', clipMode: 'EllipsisWithTooltip',\n template: '#empTemplate',\n filter: { type: 'CheckBox' }\n },\n { field: 'Designation', headerText: 'Designation', width: '170', filter: { type: 'CheckBox' }, clipMode: 'EllipsisWithTooltip' },\n { field: 'Mail', headerText: 'Mail', width: '230', filter: { type: 'Menu' } },\n {\n field: 'Location', width: '140', headerText: 'Location', filter: { type: 'CheckBox' },\n template: '#coltemplate'\n },\n { field: 'Status', headerText: 'Status', filter: { type: 'CheckBox', itemTemplate: '#StatusItemTemp' }, width: '150', template: \"#statusTemplate\" },\n { field: 'Trustworthiness', headerText: 'Trustworthiness', filter: { type: 'CheckBox', itemTemplate: '${ trustTemp(data)}' }, width: '200', template: \"#trustTemplate\" },\n { field: 'Rating', filter: { type: 'CheckBox', itemTemplate: '
        ${ratingDetail(data)}
        ' }, headerText: 'Rating', width: '160', template: '#ratingTemplate' },\n { field: 'Software', allowFiltering: false, allowSorting: false, headerText: 'Software Proficiency', width: '180', template: '#progessTemplate' },\n { field: 'CurrentSalary', headerText: 'Current Salary', format: \"C2\", filter: { type: 'Menu' }, textAlign: 'Right', width: '160' },\n { field: 'Address', headerText: 'Address', width: '240', filter: { type: 'Menu' }, clipMode: 'EllipsisWithTooltip' },\n ],\n queryCellInfo: queryCellInfo,\n dataBound: startTimer,\n actionComplete: complete\n });\n var dReady = false;\n var dtTime = false;\n var isDataBound = false;\n var isDataChanged = true;\n var intervalFun;\n var clrIntervalFun;\n var clrIntervalFun1;\n var clrIntervalFun2;\n var ddObj;\n var dropSlectedIndex = null;\n var stTime;\n stTime = performance.now();\n grid.appendTo('#Grid');\n grid.on('data-ready', function () {\n dReady = true;\n });\n var listObj = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select a Data Range',\n popupHeight: '240px',\n width: '220px',\n change: function () { valueChange(); }\n });\n listObj.appendTo('#ddl');\n\n function complete(args) {\n if (args.requestType === \"filterchoicerequest\") {\n if (args.filterModel.options.field === \"Trustworthiness\" || args.filterModel.options.field === \"Rating\" || args.filterModel.options.field === \"Status\") {\n var span = args.filterModel.dialogObj.element.querySelectorAll('.e-selectall')[0];\n if(!ej.base.isNullOrUndefined(span)) {\n ej.base.closest(span, '.e-ftrchk').classList.add(\"e-hide\");\n }\n }\n }\n }\n window.trustTemp = function (e) {\n if (e.Trustworthiness === \"Select All\") {\n return '';\n }\n return ' ' + e.Trustworthiness + '';\n };\n window.ratingDetail = function (e) {\n var grid = document.querySelector(\".e-grid\").ej2_instances[0];\n var div = document.createElement('div');\n div.className = 'rating';\n var span;\n if (e.Rating === \"Select All\") {\n return '';\n }\n for (var i = 0; i < 5; i++) {\n if (i < e.Rating) {\n span = document.createElement('span');\n span.className = 'star checked';\n div.appendChild(span);\n } else {\n span = document.createElement('span');\n span.className = 'star';\n div.appendChild(span);\n }\n }\n return div.outerHTML;\n };\n window.statusDetail = function (e) {\n var grid = document.querySelector(\".e-grid\").ej2_instances[0];\n var div = document.createElement('div');\n var span;\n if (e.Status === \"Select All\") {\n return 'Select All';\n }\n span = document.createElement('span');\n if (e.Status === \"Active\") {\n span.className = 'statustxt e-activecolor';\n span.textContent = \"Active\";\n div.className = 'statustemp e-activecolor';\n }\n if (e.Status === \"Inactive\") {\n span = document.createElement('span');\n span.className = 'statustxt e-inactivecolor';\n span.textContent = \"Inactive\";\n div.className = 'statustemp e-inactivecolor';\n }\n div.appendChild(span);\n return div.outerHTML;\n };\n function queryCellInfo(args) {\n if (args.column.field === 'Employees') {\n if (args.data.EmployeeImg === 'usermale') {\n args.cell.querySelector('.e-userimg').classList.add(\"sf-icon-Male\");\n } else {\n args.cell.querySelector('.e-userimg').classList.add(\"sf-icon-FeMale\");\n }\n }\n if (args.column.field === 'Status') {\n if (args.cell.textContent === \"Active\") {\n args.cell.querySelector(\".statustxt\").classList.add(\"e-activecolor\");\n args.cell.querySelector(\".statustemp\").classList.add(\"e-activecolor\");\n }\n if (args.cell.textContent === \"Inactive\") {\n args.cell.querySelector(\".statustxt\").classList.add(\"e-inactivecolor\");\n args.cell.querySelector(\".statustemp\").classList.add(\"e-inactivecolor\");\n }\n }\n if (args.column.field === 'Rating') {\n if (args.column.field === 'Rating') {\n for (var i = 0; i < args.data.Rating; i++) {\n args.cell.querySelectorAll(\"span\")[i].classList.add(\"checked\");\n }\n }\n }\n if (args.column.field === \"Software\") {\n if (args.data.Software <= 20) {\n args.data.Software = args.data.Software + 30;\n }\n args.cell.querySelector(\".bar\").style.width = args.data.Software + \"%\";\n args.cell.querySelector(\".barlabel\").textContent = args.data.Software + \"%\"; \n if (args.data.Status === \"Inactive\") {\n args.cell.querySelector(\".bar\").classList.add(\"progressdisable\");\n }\n }\n }\n function startTimer(args) {\n clearTimeout(clrIntervalFun);\n clearInterval(intervalFun);\n dtTime = true;\n }\n function valueChange() {\n listObj.closePopup();\n grid.showSpinner();\n dropSlectedIndex = null;\n var index = listObj.value;\n clearTimeout(clrIntervalFun2);\n clrIntervalFun2 = setTimeout(function () {\n isDataChanged = true;\n stTime = null;\n var contentElement = grid.contentModule.getPanel().firstChild;\n contentElement.scrollLeft = 0;\n contentElement.scrollTop = 0;\n grid.pageSettings.currentPage = 1;\n stTime = performance.now();\n grid.dataSource = getTradeData(index);\n grid.hideSpinner();\n }, 100);\n }\n document.getElementById('Grid').addEventListener('DOMSubtreeModified', function () {\n if (dReady && stTime && isDataChanged) {\n var msgEle = document.getElementById('msg'); \n var val = (performance.now() - stTime).toFixed(0);\n stTime = null;\n dtTime = false;\n dReady = false;\n isDataChanged = false;\n msgEle.innerHTML = 'Load Time: ' + \"\" + val + \"\" + 'ms';\n msgEle.classList.remove('e-hide');\n }\n });\n"} \ No newline at end of file diff --git a/src/grid/grouping-stack.json b/src/grid/grouping-stack.json index 72e7a952..f25a3039 100644 --- a/src/grid/grouping-stack.json +++ b/src/grid/grouping-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        Source:\n Wikipedia: List of Prolific inventors\n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var refresh;\n var alertDialogObj = new ej.popups.Dialog({\n header: 'Grouping',\n content: 'Grouping is disabled for this column',\n showCloseIcon: false,\n target: '.control-section',\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }\n }],\n width: '300px',\n visible: false,\n animationSettings: { effect: 'None' }\n });\n alertDialogObj.appendTo('#alertDialog');\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n var grid = new ej.grids.Grid({\n dataSource: window.inventoryData,\n allowPaging: true,\n allowSorting: true,\n allowGrouping: true,\n groupSettings: { columns: ['Country'] },\n height: 400,\n columns: [\n { field: 'Inventor', headerText: 'Inventor Name', width: 160 },\n { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 195, textAlign: 'Right' },\n { field: 'Country', headerText: 'Country', width: 120 },\n { field: 'Active', headerText: 'Active', width: 120 },\n { field: 'Mainfieldsofinvention', headerText: 'Main fields of invention',allowGrouping: false, width: 200 },\n ],\n pageSettings: { pageCount: 5 },\n load: function() {\n refresh = grid.refreshing;\n },\n dataBound: function() {\n if (refresh) {\n grid.groupColumn('Country');\n refresh = false;\n }\n },\n created:function() {\n grid.on(\"columnDragStart\", columnDragStart, this);\n }\n });\n grid.appendTo('#Grid');\n function columnDragStart(args) {\n if(args.column.field === \"Mainfieldsofinvention\"){\n alertDialogObj.show();\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
        diff --git a/src/grid/header-template-stack.json b/src/grid/header-template-stack.json index 2b06f699..ca7f13a8 100644 --- a/src/grid/header-template-stack.json +++ b/src/grid/header-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var data = new ej.data.DataManager(window.employeeData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', width: 120, textAlign: 'Right', headerTemplate: '#employeetemplate' },\n { field: 'FirstName', headerText: 'First Name', width: 140 },\n {\n field: 'BirthDate', headerText: 'Birth Date', width: 130, format: 'yMd',\n textAlign: 'Right', headerTemplate: '#datetemplate'\n },\n { field: 'City', width: 120 },\n { field: 'Country', headerText: 'Country', width: 140, format: 'yMd', textAlign: 'Right' },\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var data = new ej.data.DataManager(window.employeeData).executeLocal(new ej.data.Query().take(15));\n var grid = new ej.grids.Grid({\n dataSource: data,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', width: 120, textAlign: 'Right', headerTemplate: '#employeetemplate' },\n { field: 'FirstName', headerText: 'First Name', width: 140 },\n {\n field: 'BirthDate', headerText: 'Birth Date', width: 130, format: 'yMd',\n textAlign: 'Right', headerTemplate: '#datetemplate'\n },\n { field: 'City', width: 120 },\n { field: 'Country', headerText: 'Country', width: 140, format: 'yMd', textAlign: 'Right' },\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/header-template.html b/src/grid/header-template.html index b61f93fa..3755a8db 100644 --- a/src/grid/header-template.html +++ b/src/grid/header-template.html @@ -1,28 +1,26 @@ -
        -
        -
        -
        -
        -
        +
        +
        +
        +
        +
        +
        + \n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var dataManger = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders',\n adaptor: new ej.data.ODataAdaptor(),\n crossDomain: true\n });\n var dataManger2 = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',\n adaptor: new ej.data.ODataAdaptor(),\n crossDomain: true\n });\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSorting: true,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 },\n { field: 'Country', headerText: 'Country', width: 110 }\n ],\n childGrid: {\n dataSource: dataManger,\n queryString: 'EmployeeID',\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120 },\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: dataManger2,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ],\n },\n },\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var dataManger = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders',\n adaptor: new ej.data.ODataAdaptor(),\n crossDomain: true\n });\n var dataManger2 = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',\n adaptor: new ej.data.ODataAdaptor(),\n crossDomain: true\n });\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSorting: true,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 },\n { field: 'Country', headerText: 'Country', width: 110 }\n ],\n childGrid: {\n dataSource: dataManger,\n queryString: 'EmployeeID',\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120 },\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: dataManger2,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ],\n },\n },\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/hover-stack.json b/src/grid/hover-stack.json index fcb5dd33..c34e3119 100644 --- a/src/grid/hover-stack.json +++ b/src/grid/hover-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowPaging: true,\n allowSelection: false,\n enableHover: true,\n columns: [\n { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'Right' },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'Right', format: 'C2' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'Center',\n type: 'boolean', displayAsCheckBox: true\n },\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowPaging: true,\n allowSelection: false,\n enableHover: true,\n columns: [\n { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'Right' },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'Right', format: 'C2' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'Center',\n type: 'boolean', displayAsCheckBox: true\n },\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/local-data-stack.json b/src/grid/local-data-stack.json index ffc89bfa..950138d1 100644 --- a/src/grid/local-data-stack.json +++ b/src/grid/local-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/master-detail-export-stack.json b/src/grid/master-detail-export-stack.json index e88fc812..a9eed112 100644 --- a/src/grid/master-detail-export-stack.json +++ b/src/grid/master-detail-export-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: employeeData,\n toolbar: [ 'PdfExport', 'ExcelExport'],\n allowPdfExport: true,\n allowExcelExport : true,\n toolbarClick: function (args) {\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport({hierarchyExportMode: 'All'});\n }\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport({hierarchyExportMode: 'All'});\n }\n },\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 }\n ],\n childGrid: {\n dataSource: hierarchyOrderdata,\n queryString: 'EmployeeID',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2'},\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: customerData,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ]\n }\n }\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: employeeData,\n toolbar: [ 'PdfExport', 'ExcelExport'],\n allowPdfExport: true,\n allowExcelExport : true,\n toolbarClick: function (args) {\n if (args.item.id === 'Grid_excelexport') {\n grid.excelExport({hierarchyExportMode: 'All'});\n }\n if (args.item.id === 'Grid_pdfexport') {\n grid.pdfExport({hierarchyExportMode: 'All'});\n }\n },\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 }\n ],\n childGrid: {\n dataSource: hierarchyOrderdata,\n queryString: 'EmployeeID',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2'},\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: customerData,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ]\n }\n }\n });\n grid.appendTo('#Grid');\n\n"} \ No newline at end of file diff --git a/src/grid/normal-editing-stack.json b/src/grid/normal-editing-stack.json index 0e5e40f4..e6569b19 100644 --- a/src/grid/normal-editing-stack.json +++ b/src/grid/normal-editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Add New Row Position
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var newRowPosition = [\n { id: 'Top', newRowPosition: 'Top' },\n { id: 'Bottom', newRowPosition: 'Bottom' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderDataSource,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition:'Top' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n actionBegin: actionBegin,\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 140\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 140, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', format: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n width: 160\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n\n function actionBegin(args) {\n if (args.requestType === 'save') {\n if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') {\n args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - grid.pageSettings.pageSize;\n } else if (grid.editSettings.newRowPosition === 'Bottom') {\n args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - 1;\n }\n }\n }\n\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: newRowPosition,\n fields: { text: 'newRowPosition', value: 'id' },\n value: 'Top',\n change: function (e) {\n var newRowPosition = e.value;\n grid.editSettings.newRowPosition = newRowPosition;\n }\n });\n dropDownType.appendTo('#newRowPosition');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Add New Row Position
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var newRowPosition = [\n { id: 'Top', newRowPosition: 'Top' },\n { id: 'Bottom', newRowPosition: 'Bottom' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderDataSource,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition:'Top' },\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n actionBegin: actionBegin,\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 140\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 140, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', format: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n width: 160\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n });\n grid.appendTo('#Grid');\n\n function actionBegin(args) {\n if (args.requestType === 'save') {\n if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') {\n args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - grid.pageSettings.pageSize;\n } else if (grid.editSettings.newRowPosition === 'Bottom') {\n args.index = (grid.pageSettings.currentPage * grid.pageSettings.pageSize) - 1;\n }\n }\n }\n\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: newRowPosition,\n fields: { text: 'newRowPosition', value: 'id' },\n value: 'Top',\n change: function (e) {\n var newRowPosition = e.value;\n grid.editSettings.newRowPosition = newRowPosition;\n }\n });\n dropDownType.appendTo('#newRowPosition');\n"} \ No newline at end of file diff --git a/src/grid/normal-editing.html b/src/grid/normal-editing.html index 8a7b9bdb..e08743ca 100644 --- a/src/grid/normal-editing.html +++ b/src/grid/normal-editing.html @@ -17,13 +17,13 @@
        - + - +

        This sample demonstrates CRUD operations in Grid. You can perform CRUD operations as follows,

          diff --git a/src/grid/paging-api-stack.json b/src/grid/paging-api-stack.json index efb765d1..8bcdd100 100644 --- a/src/grid/paging-api-stack.json +++ b/src/grid/paging-api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
          \n\n
          \n
          \n
          \n
          \n
          \n
          \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
          \n
          Allow Paging
          \n           		\n
          \n \n
          \n
          \n
          \n Page Size\n
          \n           		\n
          \n \n
          \n
          \n
          \n Page Count\n
          \n           		\n
          \n \n
          \n
          \n
          \n Current Page\n
          \n           		\n
          \n \n
          \n
          \n
          \n\n\n\n\n\n
          ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'Right' },\n { field: 'ProductName', headerText: 'Product Name', width: 190 },\n { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'Right', format: 'C2', },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'Right' }\n ],\n actionComplete: paging\n });\n grid.appendTo('#Grid');\n\n //Render NumericTextbox component for pageSize.\n var pageSize = new ej.inputs.NumericTextBox({\n min: 1,\n max: 200,\n value: 12,\n format: '##',\n change: function () {\n pageSize.value = pageSize.value > grid.pageSettings.totalRecordsCount ?\n grid.pageSettings.totalRecordsCount : pageSize.value;\n grid.pageSettings.pageSize = pageSize.value;\n currentPage.max = Math.ceil(grid.pageSettings.totalRecordsCount / grid.pageSettings.pageSize);\n }\n });\n pageSize.appendTo('#pagesize');\n\n //Render NumericTextbox component for pageCount.\n var pageCount = new ej.inputs.NumericTextBox({\n min: 1,\n max: 8,\n value: 2,\n format: '##',\n change: function () {\n pageCount.value = pageCount.value > 8 ? 8 : pageCount.value;\n grid.pageSettings.pageCount = pageCount.value;\n\n }\n });\n pageCount.appendTo('#pagecount');\n\n //Render NumericTextbox component for currenPage.\n var currentPage = new ej.inputs.NumericTextBox({\n min: 1,\n max: 17,\n value: 1,\n format: '##',\n change: function () {\n currentPage.value = currentPage.value > currentPage.max ? currentPage.max : currentPage.value;\n var pageNumber = currentPage.value;\n grid.goToPage(pageNumber);\n }\n });\n currentPage.appendTo('#currentpage');\n\n //Render checkbox component for enable Paging.\n var enablePaging = new ej.buttons.CheckBox({ checked: true });\n enablePaging.appendTo('#allowCheck');\n\n document.getElementById('allowCheck').onclick = function () {\n grid.allowPaging = enablePaging.checked;\n if (!grid.allowPaging) {\n pageCount.enabled = false;\n pageSize.enabled = false;\n currentPage.enabled = false;\n } else {\n pageCount.enabled = true;\n pageSize.enabled = true;\n currentPage.enabled = true;\n }\n };\n function paging(args) {\n if (args.requestType === 'paging') {\n currentPage.value = parseInt(args.currentPage, 10);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.productData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'Right' },\n { field: 'ProductName', headerText: 'Product Name', width: 190 },\n { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'Right', format: 'C2', },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'Right' }\n ],\n actionComplete: paging\n });\n grid.appendTo('#Grid');\n\n //Render NumericTextbox component for pageSize.\n var pageSize = new ej.inputs.NumericTextBox({\n min: 1,\n max: 200,\n value: 12,\n format: '##',\n change: function () {\n pageSize.value = pageSize.value > grid.pageSettings.totalRecordsCount ?\n grid.pageSettings.totalRecordsCount : pageSize.value;\n grid.pageSettings.pageSize = pageSize.value;\n currentPage.max = Math.ceil(grid.pageSettings.totalRecordsCount / grid.pageSettings.pageSize);\n }\n });\n pageSize.appendTo('#pagesize');\n\n //Render NumericTextbox component for pageCount.\n var pageCount = new ej.inputs.NumericTextBox({\n min: 1,\n max: 8,\n value: 2,\n format: '##',\n change: function () {\n pageCount.value = pageCount.value > 8 ? 8 : pageCount.value;\n grid.pageSettings.pageCount = pageCount.value;\n\n }\n });\n pageCount.appendTo('#pagecount');\n\n //Render NumericTextbox component for currenPage.\n var currentPage = new ej.inputs.NumericTextBox({\n min: 1,\n max: 17,\n value: 1,\n format: '##',\n change: function () {\n currentPage.value = currentPage.value > currentPage.max ? currentPage.max : currentPage.value;\n var pageNumber = currentPage.value;\n grid.goToPage(pageNumber);\n }\n });\n currentPage.appendTo('#currentpage');\n\n //Render checkbox component for enable Paging.\n var enablePaging = new ej.buttons.CheckBox({ checked: true });\n enablePaging.appendTo('#allowCheck');\n\n document.getElementById('allowCheck').onclick = function () {\n grid.allowPaging = enablePaging.checked;\n if (!grid.allowPaging) {\n pageCount.enabled = false;\n pageSize.enabled = false;\n currentPage.enabled = false;\n } else {\n pageCount.enabled = true;\n pageSize.enabled = true;\n currentPage.enabled = true;\n }\n };\n function paging(args) {\n if (args.requestType === 'paging') {\n currentPage.value = parseInt(args.currentPage, 10);\n }\n }\n"} \ No newline at end of file diff --git a/src/grid/paging-api.html b/src/grid/paging-api.html index 558ac8bc..c7f39130 100644 --- a/src/grid/paging-api.html +++ b/src/grid/paging-api.html @@ -1,3 +1,4 @@ + - +
        diff --git a/src/grid/print-stack.json b/src/grid/print-stack.json index 29e39819..ed7f7076 100644 --- a/src/grid/print-stack.json +++ b/src/grid/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        \n Hierarchy PrintMode\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var hierarchyPrintModes = ['Expanded', 'All', 'None'];\n var dropdown = new ej.dropdowns.DropDownList({\n dataSource: hierarchyPrintModes,\n value: 'All',\n change: function(e) {\n grid.hierarchyPrintMode = grid.childGrid.hierarchyPrintMode = e.value;\n }\n }); \n dropdown.appendTo(\"#dropdown\");\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSorting: true,\n hierarchyPrintMode: 'All',\n toolbar: [ 'Print'],\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 }\n ],\n childGrid: {\n dataSource: window.hierarchyOrderdata,\n queryString: 'EmployeeID',\n hierarchyPrintMode: 'All',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2'},\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: customerData,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ]\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        \n Hierarchy PrintMode\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var hierarchyPrintModes = ['Expanded', 'All', 'None'];\n var dropdown = new ej.dropdowns.DropDownList({\n dataSource: hierarchyPrintModes,\n value: 'All',\n change: function(e) {\n grid.hierarchyPrintMode = grid.childGrid.hierarchyPrintMode = e.value;\n }\n }); \n dropdown.appendTo(\"#dropdown\");\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSorting: true,\n hierarchyPrintMode: 'All',\n toolbar: [ 'Print'],\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n { field: 'City', headerText: 'City', width: 110 }\n ],\n childGrid: {\n dataSource: window.hierarchyOrderdata,\n queryString: 'EmployeeID',\n hierarchyPrintMode: 'All',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },\n { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2'},\n { field: 'ShipName', headerText: 'Ship Name', width: 150 }\n ],\n childGrid: {\n dataSource: customerData,\n queryString: 'CustomerID',\n columns: [\n { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },\n { field: 'Phone', headerText: 'Phone', width: 100 },\n { field: 'Address', headerText: 'Address', width: 120 },\n { field: 'Country', headerText: 'Country', width: 100 }\n ]\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/reactive-aggregate-batch-edit-stack.json b/src/grid/reactive-aggregate-batch-edit-stack.json index 8f082407..dcd141bc 100644 --- a/src/grid/reactive-aggregate-batch-edit-stack.json +++ b/src/grid/reactive-aggregate-batch-edit-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}} \n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n allowGrouping: true,\n groupSettings: { showDropArea: false, columns: ['CustomerID'] },\n editSettings: { allowEditing: true, allowDeleting: true, mode: 'Batch' },\n toolbar: [ 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n aggregates: [{\n columns: [ {\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Sum : ${Sum}'\n },\n {\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n groupFooterTemplate: 'Sum : ${Sum}'\n },\n {\n type: 'Average',\n field: 'Freight',\n format: 'C2',\n groupCaptionTemplate: 'Average: ${Average}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}} \n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 5 },\n allowGrouping: true,\n groupSettings: { showDropArea: false, columns: ['CustomerID'] },\n editSettings: { allowEditing: true, allowDeleting: true, mode: 'Batch' },\n toolbar: [ 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n validationRules: { required: true }, width: 120\n },\n {\n field: 'CustomerID', headerText: 'Customer ID',\n validationRules: { required: true }, width: 140\n },\n {\n field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n width: 120, format: 'C2', validationRules: { required: true }\n },\n {\n field: 'OrderDate', headerText: 'Order Date', editType: 'datepickeredit', format: 'yMd',\n width: 170\n },\n {\n field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n edit: { params: { popupHeight: '300px' } }\n }\n ],\n aggregates: [{\n columns: [ {\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n footerTemplate: 'Sum : ${Sum}'\n },\n {\n type: 'Sum',\n field: 'Freight',\n format: 'C2',\n groupFooterTemplate: 'Sum : ${Sum}'\n },\n {\n type: 'Average',\n field: 'Freight',\n format: 'C2',\n groupCaptionTemplate: 'Average: ${Average}'\n }]\n }]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/remote-data-stack.json b/src/grid/remote-data-stack.json index ed7b3c3c..7d82ba9c 100644 --- a/src/grid/remote-data-stack.json +++ b/src/grid/remote-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';\n var data = new ej.data.DataManager({\n url: hostUrl + 'api/Orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var grid = new ej.grids.Grid({\n dataSource: data,\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 130, textAlign: 'Right' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 170 },\n { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' },\n { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' },\n ],\n pageSettings: { pageCount: 3 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';\n var data = new ej.data.DataManager({\n url: hostUrl + 'api/Orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var grid = new ej.grids.Grid({\n dataSource: data,\n allowPaging: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 130, textAlign: 'Right' },\n { field: 'CustomerID', headerText: 'Customer ID', width: 170 },\n { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' },\n { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' },\n ],\n pageSettings: { pageCount: 3 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/reorder-stack.json b/src/grid/reorder-stack.json index ae55783c..d5ad9cde 100644 --- a/src/grid/reorder-stack.json +++ b/src/grid/reorder-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n
        \n \n \n \n \n \n \n \n \n \n
        \n
        Column
        \n         		\n
        \n \n
        \n
        \n
        Column Index
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var columnsName = [\n { id: 'EmployeeID', name: 'Employee ID' },\n { id: 'FirstName', name: 'Name' },\n { id: 'Title', name: 'Title' },\n { id: 'HireDate', name: 'Hire Date' }\n ];\n var columnsIndex = [\n { id: '0', name: '1' },\n { id: '1', name: '2' },\n { id: '2', name: '3' },\n { id: '3', name: '4' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowReordering: true,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 190 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ],\n actionComplete: function (args) {\n if (args.requestType === 'reorder') {\n var columnName = dropDownColumn.value;\n var index = grid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n }\n });\n grid.appendTo('#Grid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'EmployeeID',\n change: function (e) {\n var columnName = e.value;\n var index = grid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n\n }\n });\n dropDownColumn.appendTo('#columns');\n\n var dropDownIndex = new ej.dropdowns.DropDownList({\n dataSource: columnsIndex,\n fields: { text: 'name', value: 'id' },\n value: '0',\n change: function (e) {\n var columnName = dropDownColumn.value;\n var toColumnIndex = e.value;\n grid.reorderColumns(columnName, (grid.columns[toColumnIndex]).field);\n }\n });\n dropDownIndex.appendTo('#columnIndex');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n
        \n \n \n \n \n \n \n \n \n \n
        \n
        Column
        \n         		\n
        \n \n
        \n
        \n
        Column Index
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var columnsName = [\n { id: 'EmployeeID', name: 'Employee ID' },\n { id: 'FirstName', name: 'Name' },\n { id: 'Title', name: 'Title' },\n { id: 'HireDate', name: 'Hire Date' }\n ];\n var columnsIndex = [\n { id: '0', name: '1' },\n { id: '1', name: '2' },\n { id: '2', name: '3' },\n { id: '3', name: '4' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowReordering: true,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 190 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ],\n actionComplete: function (args) {\n if (args.requestType === 'reorder') {\n var columnName = dropDownColumn.value;\n var index = grid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n }\n });\n grid.appendTo('#Grid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'EmployeeID',\n change: function (e) {\n var columnName = e.value;\n var index = grid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n\n }\n });\n dropDownColumn.appendTo('#columns');\n\n var dropDownIndex = new ej.dropdowns.DropDownList({\n dataSource: columnsIndex,\n fields: { text: 'name', value: 'id' },\n value: '0',\n change: function (e) {\n var columnName = dropDownColumn.value;\n var toColumnIndex = e.value;\n grid.reorderColumns(columnName, (grid.columns[toColumnIndex]).field);\n }\n });\n dropDownIndex.appendTo('#columnIndex');\n"} \ No newline at end of file diff --git a/src/grid/reorder.html b/src/grid/reorder.html index c3a85dc8..f4665cc4 100644 --- a/src/grid/reorder.html +++ b/src/grid/reorder.html @@ -33,13 +33,13 @@
        - + - +

        Reordering can be enabled by setting diff --git a/src/grid/row-height-stack.json b/src/grid/row-height-stack.json index 070e6c8f..b1033aed 100644 --- a/src/grid/row-height-stack.json +++ b/src/grid/row-height-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * Row Height sample\n */\n\n var gridData = new ej.data.DataManager(window.data).executeLocal(new ej.data.Query().take(30));\n var grid = new ej.grids.Grid({\n dataSource: gridData,\n toolbar: [\n { prefixIcon: 'e-small-icon', id: 'big', align: 'right' },\n { prefixIcon: 'e-medium-icon', id: 'medium', align: 'right' },\n { prefixIcon: 'e-big-icon', id: 'small', align: 'right' }\n ],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n height: 400,\n rowHeight: 20,\n toolbarClick: function (args) {\n if (args.item.id === 'small') {\n grid.rowHeight = 20;\n }\n if (args.item.id === 'medium') {\n grid.rowHeight = 40;\n }\n if (args.item.id === 'big') {\n grid.rowHeight = 60;\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * Row Height sample\n */\n\n var gridData = new ej.data.DataManager(window.data).executeLocal(new ej.data.Query().take(30));\n var grid = new ej.grids.Grid({\n dataSource: gridData,\n toolbar: [\n { prefixIcon: 'e-small-icon', id: 'big', align: 'right' },\n { prefixIcon: 'e-medium-icon', id: 'medium', align: 'right' },\n { prefixIcon: 'e-big-icon', id: 'small', align: 'right' }\n ],\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n height: 400,\n rowHeight: 20,\n toolbarClick: function (args) {\n if (args.item.id === 'small') {\n grid.rowHeight = 20;\n }\n if (args.item.id === 'medium') {\n grid.rowHeight = 40;\n }\n if (args.item.id === 'big') {\n grid.rowHeight = 60;\n }\n }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/row-height.html b/src/grid/row-height.html index 71e21fc7..cd997a5d 100644 --- a/src/grid/row-height.html +++ b/src/grid/row-height.html @@ -1,3 +1,27 @@ +
        @@ -18,28 +42,3 @@ property.

        - \ No newline at end of file diff --git a/src/grid/row-spanning-stack.json b/src/grid/row-spanning-stack.json index 4b4eb3d5..8be0fbc3 100644 --- a/src/grid/row-spanning-stack.json +++ b/src/grid/row-spanning-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.columnSpanData,\n queryCellInfo: QueryCellEvent,\n gridLines: 'Both',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },\n { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },\n { field: '9:00', headerText: '9.00 AM', width: 120 },\n { field: '9:30', headerText: '9.30 AM', width: 120 },\n { field: '10:00', headerText: '10.00 AM', width: 120 },\n { field: '10:30', headerText: '10.30 AM', width: 120 },\n { field: '11:00', headerText: '11.00 AM', width: 120 },\n { field: '11:30', headerText: '11.30 AM', width: 120 },\n { field: '12:00', headerText: '12.00 PM', width: 120 },\n { field: '12:30', headerText: '12.30 PM', width: 120 },\n { field: '1:00', headerText: '1.00 PM', width: 120 },\n { field: '1:30', headerText: '1.30 PM', width: 120 },\n { field: '2:00', headerText: '2.00 PM', width: 120 },\n { field: '2:30', headerText: '2.30 PM', width: 120 },\n { field: '3:00', headerText: '3.00 PM', width: 120 },\n { field: '3:30', headerText: '3.30 PM', width: 120 },\n { field: '4:00', headerText: '4.00 PM', width: 120 },\n { field: '4:30', headerText: '4.30 PM', width: 120 },\n { field: '5:00', headerText: '5.00 PM', width: 120 }\n ],\n width: 'auto',\n height: 'auto',\n allowTextWrap: true,\n });\n grid.appendTo('#Grid');\n\nfunction QueryCellEvent(args) {\n var data = args.data;\n switch (data.EmployeeID) {\n case 10001:\n if (args.column.field === '9:00' || args.column.field === '2:30') {\n args.colSpan = 2;\n } else if (args.column.field === '11:00') {\n args.colSpan = 3;\n } else if (args.column.field === '1:00') {\n args.colSpan = 3;\n args.rowSpan = 10;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n args.rowSpan = 2;\n } else if (args.column.field === 'EmployeeName') {\n args.rowSpan = 2;\n }\n break;\n case 10002:\n if (args.column.field === '9:30') {\n args.colSpan = 3;\n } else if (args.column.field === '11:00') {\n args.colSpan = 4;\n } else if (args.column.field === '2:30') {\n args.colSpan = 2;\n args.rowSpan = 5;\n } else if (args.column.field === '3:30') {\n args.colSpan = 2;\n }\n break;\n case 10003:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '10:30' || args.column.field === '3:30' || args.column.field === '4:30') {\n args.colSpan = 2;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10004:\n if (args.column.field === '11:00') {\n args.colSpan = 4;\n } else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n case 10005:\n if (args.column.field === '9:00') {\n args.colSpan = 4;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n } else if (args.column.field === '3:30') {\n args.colSpan = 2;\n args.rowSpan = 2;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n }\n break;\n default: rowSpanIteration(args, data.EmployeeID);\n }\n}\nfunction rowSpanIteration(args, value) {\n switch (value) {\n case 10006:\n if (args.column.field === '9:00' || args.column.field === '4:30') {\n args.colSpan = 2;\n } else if (args.column.field === '10:00') {\n args.colSpan = 3;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10007:\n if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '3:00') {\n args.colSpan = 2;\n } else if (args.column.field === '11:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n }\n break;\n case 10008:\n if (args.column.field === '9:00' || args.column.field === '10:30') {\n args.colSpan = 3;\n } else if (args.column.field === '2:30') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n case 10009:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n }\n break;\n case 10010:\n if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n } else if (args.column.field === '10:30') {\n args.colSpan = 2;\n }\n break;\n }\n }"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.columnSpanData,\n queryCellInfo: QueryCellEvent,\n gridLines: 'Both',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },\n { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },\n { field: '9:00', headerText: '9.00 AM', width: 120 },\n { field: '9:30', headerText: '9.30 AM', width: 120 },\n { field: '10:00', headerText: '10.00 AM', width: 120 },\n { field: '10:30', headerText: '10.30 AM', width: 120 },\n { field: '11:00', headerText: '11.00 AM', width: 120 },\n { field: '11:30', headerText: '11.30 AM', width: 120 },\n { field: '12:00', headerText: '12.00 PM', width: 120 },\n { field: '12:30', headerText: '12.30 PM', width: 120 },\n { field: '1:00', headerText: '1.00 PM', width: 120 },\n { field: '1:30', headerText: '1.30 PM', width: 120 },\n { field: '2:00', headerText: '2.00 PM', width: 120 },\n { field: '2:30', headerText: '2.30 PM', width: 120 },\n { field: '3:00', headerText: '3.00 PM', width: 120 },\n { field: '3:30', headerText: '3.30 PM', width: 120 },\n { field: '4:00', headerText: '4.00 PM', width: 120 },\n { field: '4:30', headerText: '4.30 PM', width: 120 },\n { field: '5:00', headerText: '5.00 PM', width: 120 }\n ],\n width: 'auto',\n height: 'auto',\n allowTextWrap: true,\n });\n grid.appendTo('#Grid');\n\nfunction QueryCellEvent(args) {\n var data = args.data;\n switch (data.EmployeeID) {\n case 10001:\n if (args.column.field === '9:00' || args.column.field === '2:30') {\n args.colSpan = 2;\n } else if (args.column.field === '11:00') {\n args.colSpan = 3;\n } else if (args.column.field === '1:00') {\n args.colSpan = 3;\n args.rowSpan = 10;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n args.rowSpan = 2;\n } else if (args.column.field === 'EmployeeName') {\n args.rowSpan = 2;\n }\n break;\n case 10002:\n if (args.column.field === '9:30') {\n args.colSpan = 3;\n } else if (args.column.field === '11:00') {\n args.colSpan = 4;\n } else if (args.column.field === '2:30') {\n args.colSpan = 2;\n args.rowSpan = 5;\n } else if (args.column.field === '3:30') {\n args.colSpan = 2;\n }\n break;\n case 10003:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '10:30' || args.column.field === '3:30' || args.column.field === '4:30') {\n args.colSpan = 2;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10004:\n if (args.column.field === '11:00') {\n args.colSpan = 4;\n } else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n case 10005:\n if (args.column.field === '9:00') {\n args.colSpan = 4;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n } else if (args.column.field === '3:30') {\n args.colSpan = 2;\n args.rowSpan = 2;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n }\n break;\n default: rowSpanIteration(args, data.EmployeeID);\n }\n}\nfunction rowSpanIteration(args, value) {\n switch (value) {\n case 10006:\n if (args.column.field === '9:00' || args.column.field === '4:30') {\n args.colSpan = 2;\n } else if (args.column.field === '10:00') {\n args.colSpan = 3;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n }\n break;\n case 10007:\n if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '3:00') {\n args.colSpan = 2;\n } else if (args.column.field === '11:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n }\n break;\n case 10008:\n if (args.column.field === '9:00' || args.column.field === '10:30') {\n args.colSpan = 3;\n } else if (args.column.field === '2:30') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '4:00') {\n args.colSpan = 2;\n }\n break;\n case 10009:\n if (args.column.field === '9:00') {\n args.colSpan = 3;\n } else if (args.column.field === '11:30') {\n args.colSpan = 3;\n args.rowSpan = 2;\n } else if (args.column.field === '4:30') {\n args.colSpan = 2;\n }\n break;\n case 10010:\n if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:00') {\n args.colSpan = 3;\n } else if (args.column.field === '10:30') {\n args.colSpan = 2;\n }\n break;\n }\n }"} \ No newline at end of file diff --git a/src/grid/row-template-stack.json b/src/grid/row-template-stack.json index 5f39cac1..b214a908 100644 --- a/src/grid/row-template-stack.json +++ b/src/grid/row-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}var instance = new ej.base.Internationalization();\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n rowTemplate: '#rowtemplate',\n height: 335,\n width: 'auto',\n columns: [\n { headerText: 'Employee Image', width: 150, textAlign: 'Center', field: 'OrderID' },\n { headerText: 'Employee Details', width: 300, field: 'EmployeeID', textAlign: 'Left' }\n ]\n });\n grid.appendTo('#Grid');\n};\nwindow.format = function (value) {\n return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}var instance = new ej.base.Internationalization();\n\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n rowTemplate: '#rowtemplate',\n height: 335,\n width: 'auto',\n columns: [\n { headerText: 'Employee Image', width: 150, textAlign: 'Center', field: 'OrderID' },\n { headerText: 'Employee Details', width: 300, field: 'EmployeeID', textAlign: 'Left' }\n ]\n });\n grid.appendTo('#Grid');\n};\nwindow.format = function (value) {\n return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });\n"} \ No newline at end of file diff --git a/src/grid/sample.json b/src/grid/sample.json index 774d40b7..8e6e27f2 100644 --- a/src/grid/sample.json +++ b/src/grid/sample.json @@ -1,63 +1,62 @@ { - "name": "Data Grid", - "directory": "grid", - "category": "Grids", - "type": "update", - "ftName" :"datagrid", - "dataSourcePath": "src/grid/data-source.js", - "samples": [ - { "url":"grid-overview", "name": "Overview","description":"This demo for Essential JS 2 grid control is an overview of how to display and manipulate large data with configuration options.", "category":"Data Grid","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound","actionComplete","load"] }}, - { "url":"default", "name": "Default Functionalities", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the default rendering of the grid control with minimum configuration.","api":{"Grid":["columns","dataSource"] }}, - { "url":"grouping", "name": "Grouping", "category":"Data Grid","description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "api":{"Grid":["allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping"] }}, - { "url":"grid-lines", "name": "GridLines" ,"category":"Data Grid","description":"This demo for Essential JS 2 grid control demonstrates the visibility of the grid lines that separate the rows and columns.","api":{"Grid":["gridLines","dataSource"] }}, - { "url":"scrolling", "name": "Default Scrolling", "category":"Scrolling","description":"This demo for Essential JS 2 grid control shows the usage of the horizontal and vertical scrollbars to view grid content that exceeds the grid area.", "api":{"Grid":["dataSource","height","width","columns"] }}, - { "url":"virtual-scrolling", "name": "Virtual Scrolling", "category":"Scrolling","description":"This demo demonstrates how to use Essential JS 2 grid to show a large data view without performance degradation by rendering only the required rows and columns.", "api":{"Grid":["dataSource","enableVirtualization","enableColumnVirtualization","dataBound","height","columns"] }}, - { "url":"events", "name": "Events", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the events that have been triggered during the grid operations.", "api":{"Grid":["dataSource","allowPaging","pageSettings","allowGrouping","allowReordering","allowSorting","columns","load","created","actionBegin","actionComplete","dataBound","rowSelecting","rowSelected","columnDragStart","columnDrag","columnDrop"] }}, - { "url":"hierarchy", "name": "Hierarchy Grid" ,"category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the hierarchical binding feature that helps to build multilevel parent-child relationships.", "api":{"Grid":["dataSource","allowSorting","columns","detailDataBound","dataBound","created","childGrid"] }}, - { "url":"clipboard", "name": "Clipboard", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the copy-to-clipboard functionality.", "api":{"Grid":["dataSource","allowPaging","toolbar","columns","pageSettings","allowSelection","selectionSettings","toolbarClick"] }}, - { "url":"local-data", "name": "Local Data", "category": "Data Binding","description":"This demo for Essential JS 2 grid control shows how to bind with a local data source.","api":{"Grid":["dataSource","allowPaging","columns","pageSettings"] }}, - { "url":"remote-data", "name": "Remote Data", "category": "Data Binding","description":"This demo for Essential JS 2 grid control shows how to consume data from a remote data service.","api":{"Grid":["dataSource","allowPaging","columns","pageSettings"] }}, - { "url":"auto-wrap", "name": "AutoWrap Column Cells", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the grid cell content is autowrapped to show large cell content.", "api":{"Grid":["dataSource","allowPaging","allowTextWrap","columns","pageSettings"] }}, - { "url":"show-hide", "name": "Show or Hide Column", "category":"Columns","description":"This demo for Essential JS 2 grid control demonstrates the dynamic show and hide columns feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, - { "url":"column-template", "name": "Column Template", "category":"Columns","description":"This demo for Essential JS 2 grid control shows the usage of template columns in grid.", "api":{"Grid":["dataSource","width","height","columns"] }}, - { "url":"stacked-header", "type":"update", "name": "Stacked Header", "category":"Columns","description":"This demo for Essential JS 2 grid control shows the usage of the stacked header feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, - { "url":"reorder", "name": "Reorder", "category": "Columns","description":"This demo for Essential JS 2 grid control shows the reordering columns features.", "api":{"Grid":["dataSource","allowReordering","actionComplete","columns"] }}, - { "url":"row-template", "name": "Row Template", "category":"Rows","description":"This demo for Essential JS 2 grid control shows the usage of the row template feature.","api":{"Grid":["dataSource","rowTemplate","height","width","columns"] }}, - { "url":"detail-template", "name": "Detail Template", "category":"Rows","description":"This demo for Essential JS 2 grid control shows the usage of the detail template feature.", "api":{"Grid":["dataSource","detailTemplate","height","width","columns"] }}, - { "url":"hover", "name": "Row Hover", "category":"Rows", "hideOnDevice":true,"description":"This demo for Essential JS 2 grid control shows the usage of the row hover feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","enableHover"] }}, - { "url":"row-height", "name": "Row Height", "category":"Rows", "description":"This demo for Essential JS 2 grid control shows the row height feature.", "api":{"Grid":["dataSource","toolbar","height","columns","rowHeight","toolbarClick"] }}, - { "url":"drag-and-drop", "name": "Row Drag And Drop", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged between grids using the row drag-and-drop feature.","hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width"] }}, - { "url":"drag-drop-within-grid", "name": "Row Drag And Drop Within Grid", "type": "new", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged within the grid using the row drag-and-drop feature.","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","width"] }}, - { "url":"row-spanning", "name": "Row Spanning", "category":"Rows", "description":"This demo for Essential JS 2 grid control shows the usage of the row and column spanning feature.", "type":"new","hideOnDevice":true,"api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }}, - { "url":"sorting", "name": "Multi Sorting", "category":"Sorting","description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }}, - { "url":"sorting-api", "name": "Sorting API", "category":"Sorting", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid.", "api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }}, - { "url":"filter", "name": "Default Filtering", "category":"Filtering","description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, - { "url":"filter-menu", "name": "Filter Menu", "category":"Filtering", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "api":{"Grid":["allowFiltering","filterSettings","dataSource","allowPaging","pageSettings","columns"] }}, - { "url":"search", "name": "Search", "category":"Filtering","description":"This demo for Essential JS 2 grid control shows the content searching feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }}, - { "url":"default-paging", "name": "Default Paging", "category": "Paging","description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, - { "url":"paging-api", "name": "Paging API", "category": "Paging","description":"This demo for Essential JS 2 grid control shows the usage of the paging API.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }}, - { "url":"selection", "name": "Default Selection", "category":"Selection","description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }}, - { "url":"selection-api", "name": "Selection API", "category": "Selection","description":"This demo for Essential JS 2 grid control shows how to perform selection programmatically.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }}, - { "url":"checkbox-selection", "name": "Checkbox Selection", "category":"Selection","description":"This demo for Essential JS 2 grid control shows how the check box selection feature can be used to select grid rows.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }}, - { "url":"aggregate-default", "name": "Default Aggregate", "category": "Aggregates","description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated and shown in a column footer.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","aggregates"] }}, - { "url":"aggregate-group", "name": "Group and Caption Aggregate", "category": "Aggregates","description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated for each group of items and shown in a group caption and footer.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowGrouping","groupSettings","aggregates"] } }, - { "url":"reactive-aggregate-batch-edit", "description":"This demo for Essential JS 2 grid control shows how aggregate values are updated while the data is edited in batch-edit mode.", "name": "Reactive Aggregate", "category": "Aggregates","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowGrouping","groupSettings","aggregates", "editSettings", "toolbar"] } }, - { "url":"normal-editing", "name": "Inline Editing", "type": "update", "category":"Editing","description":"This demo for Essential JS 2 grid control shows the inline editing operation.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, - { "url":"dialog-editing", "name": "Dialog Editing", "category":"Editing","description":"This demo for Essential JS 2 grid control shows how to edit grid rows using the Essential JS 2 dialog control.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, - { "url":"dialog-template", "name": "Dialog Template", "description":"This demo for Essential JS 2 grid control shows how to edit the grid rows using Essential JS 2 dialog-template.", "category":"Editing","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, - { "url":"batch-editing", "name": "Batch Editing", "category":"Editing","description":"This demo for Essential JS 2 grid control shows how to perform bulk changes to the grid content using batch edit mode.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, - { "url":"command-column", "name": "Command Column", "category":"Editing", "description":"This demo for Essential JS 2 grid control shows how to edit and delete records using a command column.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, - { "url":"column-chooser", "name": "Column Chooser", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the column chooser feature can be used to show or hide columns dynamically.", "api":{"Grid":["dataSource","allowPaging","showColumnChooser","columns","toolbar"] }}, - { "url":"header-template", "name": "Header Template", "category":"Columns","description":"This demo for Essential JS 2 grid control shows the usage of the header template feature.", "api":{"Grid":["dataSource","columns"] }}, - { "url":"column-resize", "name": "Column Resize", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the column resizing feature can be used to change width dynamically.", "api":{"Grid":["dataSource","allowResizing","height","columns"] }}, - { "url":"default-exporting", "name": "Default Exporting", "category":"Exporting","description":"This demo for Essential JS 2 grid control shows the client-side exporting of grid content to Excel, PDF, and CSV formats.", "api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","allowPaging","toolbar","pageSettings","columns","groupSettings","allowGrouping"] }}, - { "url":"advanced-exporting", "name": "Advanced Exporting", "category":"Exporting","description":"This demo for Essential JS 2 grid control demonstrates how exporting can be customized to add headers and footers in exported documents.", "api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns"] }}, - { "url":"master-detail-export", "name": "Hierarchy Exporting", "category":"Exporting", "type":"new", "description":"This demo for Essential JS 2 grid control shows how to export the hierarchy grid content.", "api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns", "childGrid"] }}, - { "url":"print", "name": "Print", "category":"Exporting", "type":"update", "hideOnDevice":true,"description":"This demo for Essential JS 2 grid control shows how to print the grid content.", "api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns"] }}, - { "url":"column-spanning", "name": "Column Spanning", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows the usage of the column spanning feature.", "api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }}, - { "url":"frozen-rows-columns", "name": "Frozen Rows And Columns", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows how the rows and columns can be frozen or pinned.", "api":{"Grid":["dataSource","allowSelection","columns","frozenColumns","frozenRows","height"] }}, - { "url":"column-menu", "name": "Column Menu", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows the usage of the various column functionalities of the column menu feature.", "api":{"Grid":["dataSource","allowSorting", "allowGrouping", "allowFiltering", "showColumnMenu", "filterSettings", "groupSettings", "columns", "allowSorting"]}}, - { "url":"context-menu", "name": "Context Menu", "category":"Data Grid", "description":"This demo for Essential JS 2 grid control shows the usage of the context menu in grid control. Grid has an option to show the context menu when it’s right-clicked on.", "api":{"Grid":["dataSource","allowSorting", "allowGrouping", "allowPdfExport", "allowExcelExport", "editSettings", "allowPaging", "contextMenuItems", "columns"]}}, - { "url":"foreign-key", "name": "Foreign Key Column", "category":"Columns", "description":"This demo for Essential JS 2 grid control demonstrates the usage of a foreign key column and performing actions such as filtering, sorting, and editing in the foreign key column.", "api":{"Grid":["dataSource","allowSorting","allowPaging", "columns", "allowFiltering", "filterSettings", "editSettings"]}} - ] -} \ No newline at end of file + "name": "Data Grid", + "directory": "grid", + "category": "Grids", + "ftName" :"datagrid", + "dataSourcePath": "src/grid/data-source.js", + "samples": [ + { "url":"grid-overview", "name": "Overview","description":"This demo for Essential JS 2 grid control is an overview of how to display and manipulate large data with configuration options.", "category":"Data Grid","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound","actionComplete","load"] }}, + { "url":"default", "name": "Default Functionalities", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the default rendering of the grid control with minimum configuration.","api":{"Grid":["columns","dataSource"] }}, + { "url":"grouping", "name": "Grouping", "category":"Data Grid","description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "api":{"Grid":["allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping"] }}, + { "url":"grid-lines", "name": "GridLines" ,"category":"Data Grid","description":"This demo for Essential JS 2 grid control demonstrates the visibility of the grid lines that separate the rows and columns.","api":{"Grid":["gridLines","dataSource"] }}, + { "url":"scrolling", "name": "Default Scrolling", "category":"Scrolling","description":"This demo for Essential JS 2 grid control shows the usage of the horizontal and vertical scrollbars to view grid content that exceeds the grid area.", "api":{"Grid":["dataSource","height","width","columns"] }}, + { "url":"virtual-scrolling", "name": "Virtual Scrolling", "category":"Scrolling","description":"This demo demonstrates how to use Essential JS 2 grid to show a large data view without performance degradation by rendering only the required rows and columns.", "api":{"Grid":["dataSource","enableVirtualization","enableColumnVirtualization","dataBound","height","columns"] }}, + { "url":"events", "name": "Events", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the events that have been triggered during the grid operations.", "api":{"Grid":["dataSource","allowPaging","pageSettings","allowGrouping","allowReordering","allowSorting","columns","load","created","actionBegin","actionComplete","dataBound","rowSelecting","rowSelected","columnDragStart","columnDrag","columnDrop"] }}, + { "url":"hierarchy", "name": "Hierarchy Grid" ,"category":"Data Grid","description":"This demo for Essential JS 2 grid control shows the hierarchical binding feature that helps to build multilevel parent-child relationships.", "api":{"Grid":["dataSource","allowSorting","columns","detailDataBound","dataBound","created","childGrid"] }}, + { "url":"clipboard", "name": "Clipboard", "category":"Data Grid","description":"This demo for Essential JS 2 grid control shows copy to clipboard functionality of grid. Select rows and click Copy button from toolbar to copy content.", "api":{"Grid":["dataSource","allowPaging","toolbar","columns","pageSettings","allowSelection","selectionSettings","toolbarClick"] }}, + { "url":"local-data", "name": "Local Data", "category": "Data Binding","description":"This demo for Essential JS 2 grid control demonstrates the way for binding a grid with a local data source.","api":{"Grid":["dataSource","allowPaging","columns","pageSettings"] }}, + { "url":"remote-data", "name": "Remote Data", "category": "Data Binding","description":"This demo for Essential JS 2 grid control shows the way of data binding grid with remote service. Grid data source is bound to remote data using DataManager.","api":{"Grid":["dataSource","allowPaging","columns","pageSettings"] }}, + { "url":"auto-wrap", "name": "AutoWrap Column Cells", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the grid cell content is autowrapped to show large cell content.", "api":{"Grid":["dataSource","allowPaging","allowTextWrap","columns","pageSettings"] }}, + { "url":"show-hide", "name": "Show or Hide Column", "category":"Columns","description":"This demo for Essential JS 2 grid control demonstrates the dynamic show and hide columns feature. Use the properties panel to hide/show the column.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, + { "url":"column-template", "name": "Column Template", "category":"Columns","description":"This demo for Essential JS 2 grid control demonstrates usage of template columns in Grid to shown custom images in the Employee Image column.", "api":{"Grid":["dataSource","width","height","columns"] }}, + { "url":"stacked-header", "name": "Stacked Header", "category":"Columns","description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, + { "url":"reorder", "name": "Reorder", "category": "Columns","description":"This demo for Essential JS 2 grid control shows the reordering columns feature. Select column name and index from properties panel to reorder the columns.", "api":{"Grid":["dataSource","allowReordering","actionComplete","columns"] }}, + { "url":"row-template", "name": "Row Template", "category":"Rows","description":"This demo for Essential JS 2 grid control shows the usage of the row template feature. We have rendered each Grid row using template.","api":{"Grid":["dataSource","rowTemplate","height","width","columns"] }}, + { "url":"detail-template", "name": "Detail Template", "category":"Rows","description":"This demo for Essential JS 2 grid control shows the grid with detail template feature. Click the expand button to show the detailed information about a row.", "api":{"Grid":["dataSource","detailTemplate","height","width","columns"] }}, + { "url":"hover", "name": "Row Hover", "category":"Rows", "hideOnDevice":true,"description":"This demo for Essential JS 2 grid control shows the Grid with the row hover feature. Move the mouse over the Grid rows to see the hover effect.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","enableHover"] }}, + { "url":"row-height", "name": "Row Height", "category":"Rows", "description":"This demo for Essential JS 2 grid control shows the row height feature. Click on the toolbar icons to change row's height.", "api":{"Grid":["dataSource","toolbar","height","columns","rowHeight","toolbarClick"] }}, + { "url":"drag-and-drop", "name": "Row Drag And Drop", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged between grids using the row drag-and-drop feature.","hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width"] }}, + { "url":"drag-drop-within-grid", "name": "Row Drag And Drop Within Grid", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged within the grid using the row drag-and-drop feature.","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","width"] }}, + { "url":"row-spanning", "name": "Row Spanning", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates the row spanning feature. In this sample, we have spanned row cells together.","hideOnDevice":true,"api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }}, + { "url":"sorting", "name": "Multi Sorting", "category":"Sorting","description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }}, + { "url":"sorting-api", "name": "Sorting API", "category":"Sorting", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }}, + { "url":"filter", "name": "Default Filtering", "category":"Filtering","description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, + { "url":"filter-menu", "name": "Filter Menu", "category":"Filtering", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "api":{"Grid":["allowFiltering","filterSettings","dataSource","allowPaging","pageSettings","columns"] }}, + { "url":"search", "name": "Search", "category":"Filtering","description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }}, + { "url":"default-paging", "name": "Default Paging", "category": "Paging","description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, + { "url":"paging-api", "name": "Paging API", "category": "Paging","description":"This demo for Essential JS 2 grid control shows the usage of the paging API, use the properties panel to change the pageSize, pageCount and current page.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }}, + { "url":"selection", "name": "Default Selection", "category":"Selection","description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }}, + { "url":"selection-api", "name": "Selection API", "category": "Selection","description":"This demo for Essential JS 2 grid control shows how to perform selection programmatically by using the buttons in properties panel.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }}, + { "url":"checkbox-selection", "name": "Checkbox Selection", "category":"Selection","description":"This demo for Essential JS 2 grid control shows how the check box selection feature can be used to select grid rows.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }}, + { "url":"aggregate-default", "name": "Default Aggregate", "category": "Aggregates","description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated and shown in a column footer.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","aggregates"] }}, + { "url":"aggregate-group", "name": "Group and Caption Aggregate", "category": "Aggregates","description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated for each group of items and shown in a group caption and footer.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowGrouping","groupSettings","aggregates"] } }, + { "url":"reactive-aggregate-batch-edit", "description":"This demo for Essential JS 2 grid control shows how aggregate values are updated while the data is edited in batch-edit mode.", "name": "Reactive Aggregate", "category": "Aggregates","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowGrouping","groupSettings","aggregates", "editSettings", "toolbar"] } }, + { "url":"normal-editing", "name": "Inline Editing", "category":"Editing","description":"This demo for Essential JS 2 grid control shows the inline editing operation. In the below sample, You can perform CRUD operations in grid.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, + { "url":"dialog-editing", "name": "Dialog Editing", "category":"Editing","description":"This demo for Essential JS 2 grid control shows how to edit grid rows using the Essential JS 2 dialog control.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, + { "url":"dialog-template", "name": "Dialog Template", "description":"This demo for Essential JS 2 grid control shows how to edit the grid rows using Essential JS 2 dialog-template.", "category":"Editing","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, + { "url":"batch-editing", "name": "Batch Editing", "category":"Editing","description":"This demo for Essential JS 2 grid control shows how to perform bulk changes to the grid content using batch edit mode.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, + { "url":"command-column", "name": "Command Column", "category":"Editing", "description":"This demo for Essential JS 2 grid control shows how to edit and delete records using a command column.", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings","toolbar"] }}, + { "url":"column-chooser", "name": "Column Chooser", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the column chooser feature can be used to show or hide columns dynamically.", "api":{"Grid":["dataSource","allowPaging","showColumnChooser","columns","toolbar"] }}, + { "url":"header-template", "name": "Header Template", "category":"Columns","description":"This demo for Essential JS 2 grid control shows the Grid header template feature, we have shown custom icons in the column headers.", "api":{"Grid":["dataSource","columns"] }}, + { "url":"column-resize", "name": "Column Resize", "category":"Columns","description":"This demo for Essential JS 2 grid control shows how the column resizing feature can be used to change width dynamically.", "api":{"Grid":["dataSource","allowResizing","height","columns"] }}, + { "url":"default-exporting", "name": "Default Exporting", "category":"Exporting","description":"This demo for Essential JS 2 grid control shows the client-side exporting of grid content to Excel, PDF, and CSV formats.", "api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","allowPaging","toolbar","pageSettings","columns","groupSettings","allowGrouping"] }}, + { "url":"advanced-exporting", "name": "Advanced Exporting", "category":"Exporting","description":"This demo for Essential JS 2 grid control demonstrates how exporting can be customized to add headers and footers in exported documents.", "api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns"] }}, + { "url":"master-detail-export", "name": "Hierarchy Exporting", "category":"Exporting", "description":"This demo for Essential JS 2 grid control demonstrates how to export hierarchy grid in exported documents.", "api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns", "childGrid"] }}, + { "url":"print", "name": "Print", "category":"Exporting", "hideOnDevice":true,"description":"This demo for Essential JS 2 grid control shows how to print the grid content. Click the print button from the toolbar item to print Grid.", "api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns"] }}, + { "url":"column-spanning", "name": "Column Spanning", "category":"Columns", "description":"This demo for Essential JS 2 grid control demonstrates the grid with column spanning feature to span multiple adjacent cells together.", "api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }}, + { "url":"frozen-rows-columns", "name": "Frozen Rows And Columns", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns.", "api":{"Grid":["dataSource","allowSelection","columns","frozenColumns","frozenRows","height"] }}, + { "url":"column-menu", "name": "Column Menu", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows the usage of the various column functionalities of the column menu feature.", "api":{"Grid":["dataSource","allowSorting", "allowGrouping", "allowFiltering", "showColumnMenu", "filterSettings", "groupSettings", "columns", "allowSorting"]}}, + { "url":"context-menu", "name": "Context Menu", "category":"Data Grid", "description":"This demo for Essential JS 2 grid control shows demonstrates the usage of context menu in grid. Right click anywhere on the grid to view context menu.", "api":{"Grid":["dataSource","allowSorting", "allowGrouping", "allowPdfExport", "allowExcelExport", "editSettings", "allowPaging", "contextMenuItems", "columns"]}}, + { "url":"foreign-key", "name": "Foreign Key Column", "category":"Columns", "description":"This demo for Essential JS 2 grid control shows the usage of a foreign key column and perform actions like filtering, sorting and editing.", "api":{"Grid":["dataSource","allowSorting","allowPaging", "columns", "allowFiltering", "filterSettings", "editSettings"]}} + ] + } \ No newline at end of file diff --git a/src/grid/scrolling-stack.json b/src/grid/scrolling-stack.json index 757ac3b0..e7d743bf 100644 --- a/src/grid/scrolling-stack.json +++ b/src/grid/scrolling-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n height: 410,\n width: 'auto',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 160 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', width: '170' },\n { field: 'ShipAddress', headerText: 'Ship Address', width: '170' },\n { field: 'ShipCity', headerText: 'Ship City', width: '150' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderDatas,\n height: 410,\n width: 'auto',\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 160 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },\n { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipName', headerText: 'Ship Name', width: '170' },\n { field: 'ShipAddress', headerText: 'Ship Address', width: '170' },\n { field: 'ShipCity', headerText: 'Ship City', width: '150' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/search-stack.json b/src/grid/search-stack.json index a93688b5..094e4087 100644 --- a/src/grid/search-stack.json +++ b/src/grid/search-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n toolbar: ['Search'],\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n toolbar: ['Search'],\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150,\n textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/selection-api-stack.json b/src/grid/selection-api-stack.json index 58535486..c4ad4a07 100644 --- a/src/grid/selection-api-stack.json +++ b/src/grid/selection-api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        Source:\n \n Wikipedia: List of Prolific inventors\n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Select Rows
        \n
        \n
        Start
        \n\n         		\n
        \n \n
        \n
        \n
        To
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n
        \n
        Clear Selection
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}} /**\n * Grid SelectionAPI\n */\n \n var grid = new ej.grids.Grid({\n dataSource: window.inventoryData,\n allowPaging: true,\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n enableHover: false,\n columns: [\n { field: 'Inventor', headerText: 'Inventor Name', width: 180 },\n { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 195, textAlign: 'Right' },\n { field: 'Country', headerText: 'Country', width: 120 },\n { field: 'Active', headerText: 'Active', width: 130 }\n ],\n pageSettings: { pageCount: 2 }\n });\n grid.appendTo('#Grid');\n\n //Render numerTextBox component for select range.\n var start = new ej.inputs.NumericTextBox({\n format: '##',\n min: 0,\n max: 11\n });\n start.appendTo('#start');\n\n //Render numerTextBox component for select range.\n var to = new ej.inputs.NumericTextBox({\n format: '##',\n min: 0,\n max: 11\n });\n to.appendTo('#to');\n\n //Render button component for select rows.\n var select = new ej.buttons.Button();\n select.appendTo('#select');\n\n //Render button component for clear selection.\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n\n //Selects rows.\n document.getElementById('select').onclick = function () {\n var startRow = start.value;\n var toRow = to.value;\n grid.selectionModule.selectRowsByRange(startRow, toRow);\n };\n\n //clears selection.\n document.getElementById('clear').onclick = function () {\n grid.clearSelection();\n };\n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
        diff --git a/src/grid/selection-stack.json b/src/grid/selection-stack.json index a3cf07b7..37f2120f 100644 --- a/src/grid/selection-stack.json +++ b/src/grid/selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        Selection Type
        \n         		\n
        \n \n
        \n
        \n
        \n Selection Mode\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var type = [\n { id: 'Single', type: 'Single' },\n { id: 'Multiple', type: 'Multiple' }\n ];\n var mode = [\n { id: 'Row', mode: 'Row' },\n { id: 'Cell', mode: 'Cell' },\n { id: 'Both', mode: 'Both' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n enableHover: false,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 135 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ]\n });\n grid.appendTo('#Grid');\n\n //Render DropDownList component for selection type.\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'Multiple',\n change: function (e) {\n var type = e.value;\n grid.selectionSettings.type = type;\n }\n });\n dropDownType.appendTo('#type');\n\n //Render DropDownList component for selection type.\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Row',\n change: function (e) {\n var mode = e.value;\n grid.selectionSettings.mode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        Selection Type
        \n         		\n
        \n \n
        \n
        \n
        \n Selection Mode\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var type = [\n { id: 'Single', type: 'Single' },\n { id: 'Multiple', type: 'Multiple' }\n ];\n var mode = [\n { id: 'Row', mode: 'Row' },\n { id: 'Cell', mode: 'Cell' },\n { id: 'Both', mode: 'Both' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.employeeData,\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n enableHover: false,\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 135 },\n { field: 'FirstName', headerText: 'Name', width: 125 },\n { field: 'Title', headerText: 'Title', width: 180 },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right',\n width: 135, format: { skeleton: 'yMd', type: 'date' }\n }\n ]\n });\n grid.appendTo('#Grid');\n\n //Render DropDownList component for selection type.\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'Multiple',\n change: function (e) {\n var type = e.value;\n grid.selectionSettings.type = type;\n }\n });\n dropDownType.appendTo('#type');\n\n //Render DropDownList component for selection type.\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Row',\n change: function (e) {\n var mode = e.value;\n grid.selectionSettings.mode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/grid/selection.html b/src/grid/selection.html index f7b90135..a6e12382 100644 --- a/src/grid/selection.html +++ b/src/grid/selection.html @@ -29,13 +29,13 @@
        - + - +

        This sample demonstrates the selection feature in Grid, which allows you to select row or cell through simple mouse down or keyboard interaction. You can change type and mode from the properties panel.

        diff --git a/src/grid/show-hide-stack.json b/src/grid/show-hide-stack.json index a5216f0d..e9192c23 100644 --- a/src/grid/show-hide-stack.json +++ b/src/grid/show-hide-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Column
        \n         		\n
        \n \n
        \n
        \n
        \n \n
        \n         		\n
        \n \n
        \n
        \n
        \n Hidden Columns\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'CategoryName', name: 'Category Name' },\n { id: 'ProductName', name: 'Product Name' },\n { id: 'UnitsInStock', name: 'Units In Stock' },\n { id: 'Discontinued', name: 'Discontinued' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'Center', type: 'boolean',\n displayAsCheckBox: true\n }\n ]\n });\n grid.appendTo('#Grid');\n\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n fields: { text: 'name', value: 'id' },\n value: 'CategoryName',\n change: function (e) {\n var columnName = e.value;\n var column = grid.getColumnByField(columnName);\n if (column.visible === undefined || column.visible) {\n show.disabled = true;\n hide.disabled = false;\n } else {\n hide.disabled = true;\n show.disabled = false;\n }\n }\n });\n dropDownListObject.appendTo('#ddlelement');\n\n var show = new ej.buttons.Button({ disabled: true });\n show.appendTo('#show');\n\n var hide = new ej.buttons.Button();\n hide.appendTo('#hide');\n\n var hiddenColumns = document.getElementById('hiddencolumns');\n\n document.getElementById('show').onclick = function () {\n var columnName = dropDownListObject.value;\n var column = grid.getColumnByField(columnName);\n grid.showHider.show(column.headerText, 'headerText');\n show.disabled = true;\n hide.disabled = false;\n hiddenColumns.value = hiddenColumns.value.replace(column.headerText + '\\n', '');\n };\n document.getElementById('hide').onclick = function () {\n var columnName = dropDownListObject.value;\n var column = grid.getColumnByField(columnName);\n if (grid.getHeaderTable().querySelectorAll('th.e-hide').length === 3) {\n alert('Atleast one Column should be visible');\n }\n else {\n grid.showHider.hide(column.headerText, 'headerText');\n hide.disabled = true;\n show.disabled = false;\n hiddenColumns.value = hiddenColumns.value + column.headerText + '\\n';\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Column
        \n         		\n
        \n \n
        \n
        \n
        \n \n
        \n         		\n
        \n \n
        \n
        \n
        \n Hidden Columns\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'CategoryName', name: 'Category Name' },\n { id: 'ProductName', name: 'Product Name' },\n { id: 'UnitsInStock', name: 'Units In Stock' },\n { id: 'Discontinued', name: 'Discontinued' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.categoryData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'CategoryName', headerText: 'Category Name', width: 160 },\n { field: 'ProductName', headerText: 'Product Name', width: 170 },\n { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },\n {\n field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'Center', type: 'boolean',\n displayAsCheckBox: true\n }\n ]\n });\n grid.appendTo('#Grid');\n\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n fields: { text: 'name', value: 'id' },\n value: 'CategoryName',\n change: function (e) {\n var columnName = e.value;\n var column = grid.getColumnByField(columnName);\n if (column.visible === undefined || column.visible) {\n show.disabled = true;\n hide.disabled = false;\n } else {\n hide.disabled = true;\n show.disabled = false;\n }\n }\n });\n dropDownListObject.appendTo('#ddlelement');\n\n var show = new ej.buttons.Button({ disabled: true });\n show.appendTo('#show');\n\n var hide = new ej.buttons.Button();\n hide.appendTo('#hide');\n\n var hiddenColumns = document.getElementById('hiddencolumns');\n\n document.getElementById('show').onclick = function () {\n var columnName = dropDownListObject.value;\n var column = grid.getColumnByField(columnName);\n grid.showHider.show(column.headerText, 'headerText');\n show.disabled = true;\n hide.disabled = false;\n hiddenColumns.value = hiddenColumns.value.replace(column.headerText + '\\n', '');\n };\n document.getElementById('hide').onclick = function () {\n var columnName = dropDownListObject.value;\n var column = grid.getColumnByField(columnName);\n if (grid.getHeaderTable().querySelectorAll('th.e-hide').length === 3) {\n alert('Atleast one Column should be visible');\n }\n else {\n grid.showHider.hide(column.headerText, 'headerText');\n hide.disabled = true;\n show.disabled = false;\n hiddenColumns.value = hiddenColumns.value + column.headerText + '\\n';\n }\n };\n"} \ No newline at end of file diff --git a/src/grid/show-hide.html b/src/grid/show-hide.html index db6c323f..98476ad9 100644 --- a/src/grid/show-hide.html +++ b/src/grid/show-hide.html @@ -47,13 +47,13 @@
        - + - +

        The Grid column can be showed/hidden dynamically using showColumns diff --git a/src/grid/sorting-api-stack.json b/src/grid/sorting-api-stack.json index 1ff2328b..b5df978d 100644 --- a/src/grid/sorting-api-stack.json +++ b/src/grid/sorting-api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

        \n\n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Column
        \n         		\n
        \n \n
        \n
        \n
        Direction
        \n         		\n
        \n \n
        \n
        \n
        \n \n
        \n\n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n
        ","index.js":"{{ripple}}\n var columnNames = [\n { Id: 'OrderID', name: 'Order ID' },\n { Id: 'CustomerName', name: 'Customer Name' },\n { Id: 'OrderDate', name: 'Order Date' },\n { Id: 'Freight', name: 'Freight' }\n ];\n var direction = [\n { Id: 'Ascending', name: 'Ascending' },\n { Id: 'Descending', name: 'Descending' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n allowSorting: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 160 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }\n ],\n pageSettings: { pageCount: 2 }\n });\n grid.appendTo('#Grid');\n\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n fields: { text: 'name', value: 'Id' },\n value: 'OrderID'\n });\n dropDownColumns.appendTo('#columns');\n\n var dropDownDirection = new ej.dropdowns.DropDownList({\n dataSource: direction,\n fields: { text: 'name', value: 'Id' },\n value: 'Ascending'\n });\n dropDownDirection.appendTo('#direction');\n\n var sort = new ej.buttons.Button();\n sort.appendTo('#sort');\n\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n\n document.getElementById('sort').onclick = function () {\n var columnName = dropDownColumns.value;\n var sortType = dropDownDirection.value;\n grid.sortColumn(columnName, sortType, false);\n };\n document.getElementById('clear').onclick = function () {\n grid.clearSorting();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n \n\n\n\n
        ","index.js":"{{ripple}}\n var columnNames = [\n { Id: 'OrderID', name: 'Order ID' },\n { Id: 'CustomerName', name: 'Customer Name' },\n { Id: 'OrderDate', name: 'Order Date' },\n { Id: 'Freight', name: 'Freight' }\n ];\n var direction = [\n { Id: 'Ascending', name: 'Ascending' },\n { Id: 'Descending', name: 'Descending' }\n ];\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n allowSorting: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 160 },\n { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }\n ],\n pageSettings: { pageCount: 2 }\n });\n grid.appendTo('#Grid');\n\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n fields: { text: 'name', value: 'Id' },\n value: 'OrderID'\n });\n dropDownColumns.appendTo('#columns');\n\n var dropDownDirection = new ej.dropdowns.DropDownList({\n dataSource: direction,\n fields: { text: 'name', value: 'Id' },\n value: 'Ascending'\n });\n dropDownDirection.appendTo('#direction');\n\n var sort = new ej.buttons.Button();\n sort.appendTo('#sort');\n\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n\n document.getElementById('sort').onclick = function () {\n var columnName = dropDownColumns.value;\n var sortType = dropDownDirection.value;\n grid.sortColumn(columnName, sortType, false);\n };\n document.getElementById('clear').onclick = function () {\n grid.clearSorting();\n };\n"} \ No newline at end of file diff --git a/src/grid/sorting-api.html b/src/grid/sorting-api.html index f702c854..a7cc1b56 100644 --- a/src/grid/sorting-api.html +++ b/src/grid/sorting-api.html @@ -1,3 +1,4 @@ + - +
        diff --git a/src/grid/sorting-stack.json b/src/grid/sorting-stack.json index 90b7f263..d03ad9b1 100644 --- a/src/grid/sorting-stack.json +++ b/src/grid/sorting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n Order ID\n
        \n         		\n
        \n \n
        \n
        \n
        \n Customer Name\n
        \n         		\n
        \n \n
        \n
        \n
        \n Order Date\n
        \n         		\n
        \n \n
        \n
        \n
        \n Freight\n
        \n         		\n
        \n \n
        \n
        \n
        \n Ship Country\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n allowSorting: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n actionComplete: sort,\n sortSettings: { columns: [{ field: 'OrderDate', direction: 'Ascending' }, { field: 'Freight', direction: 'Descending' }] }\n });\n grid.appendTo('#Grid');\n\n var orderID = new ej.buttons.CheckBox();\n orderID.appendTo('#OrderID');\n\n var customerName = new ej.buttons.CheckBox();\n customerName.appendTo('#CustomerName');\n\n var orderDate = new ej.buttons.CheckBox({ checked: true });\n orderDate.appendTo('#OrderDate');\n\n var freight = new ej.buttons.CheckBox({ checked: true });\n freight.appendTo('#Freight');\n\n var shipCountry = new ej.buttons.CheckBox();\n shipCountry.appendTo('#ShipCountry');\n\n document.getElementById('OrderID').onclick = function() {\n if (orderID.checked) {\n grid.sortColumn('OrderID', 'Ascending', true);\n } else {\n grid.removeSortColumn('OrderID');\n }\n };\n document.getElementById('CustomerName').onclick = function() {\n if (customerName.checked) {\n grid.sortColumn('CustomerName', 'Ascending', true);\n } else {\n grid.removeSortColumn('CustomerName');\n }\n };\n document.getElementById('OrderDate').onclick = function() {\n if (orderDate.checked) {\n grid.sortColumn('OrderDate', 'Ascending', true);\n } else {\n grid.removeSortColumn('OrderDate');\n }\n };\n document.getElementById('Freight').onclick = function() {\n if (freight.checked) {\n grid.sortColumn('Freight', 'Ascending', true);\n } else {\n grid.removeSortColumn('Freight');\n }\n };\n document.getElementById('ShipCountry').onclick = function() {\n if (shipCountry.checked) {\n grid.sortColumn('ShipCountry', 'Ascending', true);\n } else {\n grid.removeSortColumn('ShipCountry');\n }\n };\n function sort(args) {\n if (args.requestType === 'sorting') {\n for (var i = 0, a = grid.getColumns(); i < a.length; i++) {\n var columns = a[i];\n for (var j = 0, b = grid.sortSettings.columns; j < b.length; j++) {\n var sortcolumns = b[j];\n if (sortcolumns.field === columns.field) {\n check(sortcolumns.field, true);\n break;\n }\n else {\n check(columns.field,false);\n }\n }\n }\n }\n }\n function check(field, state) {\n switch (field) {\n case 'OrderID':\n orderID.checked = state; break;\n case 'CustomerName':\n customerName.checked = state; break;\n case 'OrderDate':\n orderDate.checked = state; break;\n case 'Freight':\n freight.checked = state; break;\n case 'ShipCountry':\n shipCountry.checked = state;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n Order ID\n
        \n         		\n
        \n \n
        \n
        \n
        \n Customer Name\n
        \n         		\n
        \n \n
        \n
        \n
        \n Order Date\n
        \n         		\n
        \n \n
        \n
        \n
        \n Freight\n
        \n         		\n
        \n \n
        \n
        \n
        \n Ship Country\n
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n allowSorting: true,\n columns: [\n { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },\n { field: 'CustomerName', headerText: 'Customer Name', width: 150 },\n { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right' },\n { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }\n ],\n actionComplete: sort,\n sortSettings: { columns: [{ field: 'OrderDate', direction: 'Ascending' }, { field: 'Freight', direction: 'Descending' }] }\n });\n grid.appendTo('#Grid');\n\n var orderID = new ej.buttons.CheckBox();\n orderID.appendTo('#OrderID');\n\n var customerName = new ej.buttons.CheckBox();\n customerName.appendTo('#CustomerName');\n\n var orderDate = new ej.buttons.CheckBox({ checked: true });\n orderDate.appendTo('#OrderDate');\n\n var freight = new ej.buttons.CheckBox({ checked: true });\n freight.appendTo('#Freight');\n\n var shipCountry = new ej.buttons.CheckBox();\n shipCountry.appendTo('#ShipCountry');\n\n document.getElementById('OrderID').onclick = function() {\n if (orderID.checked) {\n grid.sortColumn('OrderID', 'Ascending', true);\n } else {\n grid.removeSortColumn('OrderID');\n }\n };\n document.getElementById('CustomerName').onclick = function() {\n if (customerName.checked) {\n grid.sortColumn('CustomerName', 'Ascending', true);\n } else {\n grid.removeSortColumn('CustomerName');\n }\n };\n document.getElementById('OrderDate').onclick = function() {\n if (orderDate.checked) {\n grid.sortColumn('OrderDate', 'Ascending', true);\n } else {\n grid.removeSortColumn('OrderDate');\n }\n };\n document.getElementById('Freight').onclick = function() {\n if (freight.checked) {\n grid.sortColumn('Freight', 'Ascending', true);\n } else {\n grid.removeSortColumn('Freight');\n }\n };\n document.getElementById('ShipCountry').onclick = function() {\n if (shipCountry.checked) {\n grid.sortColumn('ShipCountry', 'Ascending', true);\n } else {\n grid.removeSortColumn('ShipCountry');\n }\n };\n function sort(args) {\n if (args.requestType === 'sorting') {\n for (var i = 0, a = grid.getColumns(); i < a.length; i++) {\n var columns = a[i];\n for (var j = 0, b = grid.sortSettings.columns; j < b.length; j++) {\n var sortcolumns = b[j];\n if (sortcolumns.field === columns.field) {\n check(sortcolumns.field, true);\n break;\n }\n else {\n check(columns.field,false);\n }\n }\n }\n }\n }\n function check(field, state) {\n switch (field) {\n case 'OrderID':\n orderID.checked = state; break;\n case 'CustomerName':\n customerName.checked = state; break;\n case 'OrderDate':\n orderDate.checked = state; break;\n case 'Freight':\n freight.checked = state; break;\n case 'ShipCountry':\n shipCountry.checked = state;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/grid/stacked-header-stack.json b/src/grid/stacked-header-stack.json index 34d5fec7..a6c37b20 100644 --- a/src/grid/stacked-header-stack.json +++ b/src/grid/stacked-header-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n allowResizing: true,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, minWidth: 10 },\n {\n headerText: 'Order Details', columns: [\n { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 135, format: 'yMd', minWidth: 10 },\n { field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 120, format: 'C2', minWidth: 10 },\n ]\n },\n {\n headerText: 'Ship Details', columns: [\n { field: 'ShippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 145, format: 'yMd', minWidth: 10 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 140, minWidth: 10 },\n ]\n }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var grid = new ej.grids.Grid({\n dataSource: window.orderData,\n allowPaging: true,\n allowResizing: true,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, minWidth: 10 },\n {\n headerText: 'Order Details', columns: [\n { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 135, format: 'yMd', minWidth: 10 },\n { field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 120, format: 'C2', minWidth: 10 },\n ]\n },\n {\n headerText: 'Ship Details', columns: [\n { field: 'ShippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 145, format: 'yMd', minWidth: 10 },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 140, minWidth: 10 },\n ]\n }\n ]\n });\n grid.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/grid/virtual-scrolling-stack.json b/src/grid/virtual-scrolling-stack.json index a5e351d6..048e2bbf 100644 --- a/src/grid/virtual-scrolling-stack.json +++ b/src/grid/virtual-scrolling-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n \n \n \n \n Time Taken: 0 ms\n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n\n var date1;\n var date2;\n var flag = true;\n var genarateData = new ej.buttons.Button({}, '#genarate');\n var columns = [\n { field: 'FIELD1', headerText: 'Player Name', width: 140 },\n { field: 'FIELD2', headerText: 'Year', width: 120, textAlign: 'right' },\n { field: 'FIELD3', headerText: 'Stint', width: 120, textAlign: 'right' },\n { field: 'FIELD4', headerText: 'TMID', width: 120, textAlign: 'right' },\n { field: 'FIELD5', headerText: 'LGID', width: 120, textAlign: 'right' },\n { field: 'FIELD6', headerText: 'GP', width: 120, textAlign: 'right' },\n { field: 'FIELD7', headerText: 'GS', width: 120, textAlign: 'right' },\n { field: 'FIELD8', headerText: 'Minutes', width: 120, textAlign: 'right' },\n { field: 'FIELD9', headerText: 'Points', width: 120, textAlign: 'right' },\n { field: 'FIELD10', headerText: 'OREB', width: 130, textAlign: 'right' },\n { field: 'FIELD11', headerText: 'DREB', width: 130, textAlign: 'right' },\n { field: 'FIELD12', headerText: 'REB', width: 120, textAlign: 'right' },\n { field: 'FIELD13', headerText: 'Assists', width: 120, textAlign: 'right' },\n { field: 'FIELD14', headerText: 'Steals', width: 120, textAlign: 'right' },\n { field: 'FIELD15', headerText: 'Blocks', width: 120, textAlign: 'right' },\n { field: 'FIELD16', headerText: 'Turnovers', width: 130, textAlign: 'right' },\n { field: 'FIELD17', headerText: 'PF', width: 130, textAlign: 'right' },\n { field: 'FIELD18', headerText: 'FGA', width: 150, textAlign: 'right' },\n { field: 'FIELD19', headerText: 'FGM', width: 120, textAlign: 'right' },\n { field: 'FIELD20', headerText: 'FTA', width: 150, textAlign: 'right' },\n { field: 'FIELD21', headerText: 'FTM', width: 120, textAlign: 'right' },\n { field: 'FIELD22', headerText: 'Three Attempted', width: 150, textAlign: 'right' },\n { field: 'FIELD23', headerText: 'Three Made', width: 130, textAlign: 'right' },\n { field: 'FIELD24', headerText: 'Post GP', width: 120, textAlign: 'right' },\n { field: 'FIELD25', headerText: 'Post GS', width: 120, textAlign: 'right' },\n { field: 'FIELD26', headerText: 'Post Minutes', width: 120, textAlign: 'right' },\n { field: 'FIELD27', headerText: 'Post Points', width: 130, textAlign: 'right' },\n { field: 'FIELD28', headerText: 'Post OREB', width: 130, textAlign: 'right' },\n { field: 'FIELD29', headerText: 'Post DREB', width: 130, textAlign: 'right' },\n { field: 'FIELD30', headerText: 'Post REB', width: 130, textAlign: 'right' }\n ];\n genarateData.element.onclick = function () {\n if (!window.virtualData.length) {\n show();\n window.dataSource();\n date1 = new Date().getTime();\n grid.dataSource = window.virtualData;\n }\n else {\n flag = true;\n show();\n date1 = new Date().getTime();\n grid.refresh();\n }\n };\n var grid = new ej.grids.Grid({\n dataSource: [],\n enableVirtualization: true,\n enableColumnVirtualization: true,\n height: 600,\n pageSettings: {pageSize: 50},\n columns: columns,\n dataBound: hide\n });\n grid.appendTo('#Grid');\n\n function show() {\n document.getElementById('popup').style.display = 'inline-block';\n }\n function hide() {\n if (flag && date1) {\n date2 = new Date().getTime();\n document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (date2 - date1) + 'ms';\n flag = false;\n }\n document.getElementById('popup').style.display = 'none';\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
        diff --git a/src/heatmap/array-cell-stack.json b/src/heatmap/array-cell-stack.json index 6757dd6a..b0502ad0 100644 --- a/src/heatmap/array-cell-stack.json +++ b/src/heatmap/array-cell-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Array data binding sample\n */\n\n var arrayCellData = [\n [0, 0, 10.75], [0, 1, 14.5], [0, 2, 25.5], [0, 3, 39.5], [0, 4, 59.75], [0, 5, 35.50], [0, 6, 75.5],\n [1, 0, 20.75], [1, 1, 35.5], [1, 2, 29.5], [1, 3, 75.5], [1, 4, 80], [1, 5, 65], [1, 6, 85],\n [2, 0, 6], [2, 1, 18.5], [2, 2, 30.05], [2, 3, 35.5], [2, 4, 40.75], [2, 5, 50.75], [2, 6, 65],\n [3, 0, 30.5], [3, 1, 20.5], [3, 2, 45.30], [3, 3, 50], [3, 4, 55], [3, 5, 85.80], [3, 6, 87.5],\n [4, 0, 10.5], [4, 1, 20.75], [4, 2, 35.5], [4, 3, 35.5], [4, 4, 45.5], [4, 5, 65], [4, 6, 75.5],\n [5, 0, 45.5], [5, 1, 20.75], [5, 2, 45.5], [5, 3, 50.75], [5, 4, 79.30], [5, 5, 84.20], [5, 6, 87.36],\n [6, 0, 26.82], [6, 1, 70], [6, 2, 75], [6, 3, 79.5], [6, 4, 88.5], [6, 5, 89.5], [6, 6, 91.75],\n [7, 0, 15.75], [7, 1, 20.75], [7, 2, 25.5], [7, 3, 42.35], [7, 4, 45.15], [7, 5, 76.5], [7, 6, 80.5],\n [8, 0, 1.98], [8, 1, 15.23], [8, 2, 43], [8, 3, 49], [8, 4, 63.80], [8, 5, 67.97], [8, 6, 70.52],\n [9, 0, 14.31], [9, 1, 42.87], [9, 2, 77.28], [9, 3, 77.82], [9, 4, 81.44], [9, 5, 81.92], [9, 6, 83.75],\n [10, 0, 25.5], [10, 1, 35.5], [10, 2, 40.5], [10, 3, 45.05], [10, 4, 50.5], [10, 5, 75.5], [10, 6, 90.58]\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Percentage of Individuals Using Internet by Country',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'Australia', 'Mexico', 'Canada', 'Brazil', 'USA',\n 'UK', 'Germany', 'Russia', 'France', 'Japan'],\n },\n yAxis: {\n labels: ['2000', '2005', '2010', '2011', '2012', '2013', '2014'],\n },\n dataSource: {\n data: arrayCellData,\n isJsonData: false,\n adaptorType: 'Cell'\n }, paletteSettings: {\n palette: [{ color: '#3498DB' },\n { color: '#2C3E50' }\n ]\n },\n cellSettings: {\n border: {\n width: 0\n },\n textStyle: {\n color: 'white'\n },\n format: '{value} %'\n },\n legendSettings: {\n visible: false,\n },\n load: function (args) {\n var arrayCellTheme = location.hash.split('/')[1];\n arrayCellTheme = arrayCellTheme ? arrayCellTheme : 'Material';\n args.heatmap.theme = (arrayCellTheme.charAt(0).toUpperCase() + arrayCellTheme.slice(1));\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Array data binding sample\n */\n\n var arrayCellData = [\n [0, 0, 10.75], [0, 1, 14.5], [0, 2, 25.5], [0, 3, 39.5], [0, 4, 59.75], [0, 5, 35.50], [0, 6, 75.5],\n [1, 0, 20.75], [1, 1, 35.5], [1, 2, 29.5], [1, 3, 75.5], [1, 4, 80], [1, 5, 65], [1, 6, 85],\n [2, 0, 6], [2, 1, 18.5], [2, 2, 30.05], [2, 3, 35.5], [2, 4, 40.75], [2, 5, 50.75], [2, 6, 65],\n [3, 0, 30.5], [3, 1, 20.5], [3, 2, 45.30], [3, 3, 50], [3, 4, 55], [3, 5, 85.80], [3, 6, 87.5],\n [4, 0, 10.5], [4, 1, 20.75], [4, 2, 35.5], [4, 3, 35.5], [4, 4, 45.5], [4, 5, 65], [4, 6, 75.5],\n [5, 0, 45.5], [5, 1, 20.75], [5, 2, 45.5], [5, 3, 50.75], [5, 4, 79.30], [5, 5, 84.20], [5, 6, 87.36],\n [6, 0, 26.82], [6, 1, 70], [6, 2, 75], [6, 3, 79.5], [6, 4, 88.5], [6, 5, 89.5], [6, 6, 91.75],\n [7, 0, 15.75], [7, 1, 20.75], [7, 2, 25.5], [7, 3, 42.35], [7, 4, 45.15], [7, 5, 76.5], [7, 6, 80.5],\n [8, 0, 1.98], [8, 1, 15.23], [8, 2, 43], [8, 3, 49], [8, 4, 63.80], [8, 5, 67.97], [8, 6, 70.52],\n [9, 0, 14.31], [9, 1, 42.87], [9, 2, 77.28], [9, 3, 77.82], [9, 4, 81.44], [9, 5, 81.92], [9, 6, 83.75],\n [10, 0, 25.5], [10, 1, 35.5], [10, 2, 40.5], [10, 3, 45.05], [10, 4, 50.5], [10, 5, 75.5], [10, 6, 90.58]\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Percentage of Individuals Using Internet by Country',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'Australia', 'Mexico', 'Canada', 'Brazil', 'USA',\n 'UK', 'Germany', 'Russia', 'France', 'Japan'],\n },\n yAxis: {\n labels: ['2000', '2005', '2010', '2011', '2012', '2013', '2014'],\n },\n dataSource: {\n data: arrayCellData,\n isJsonData: false,\n adaptorType: 'Cell'\n }, paletteSettings: {\n palette: [{ color: '#3498DB' },\n { color: '#2C3E50' }\n ]\n },\n cellSettings: {\n border: {\n width: 0\n },\n textStyle: {\n color: 'white'\n },\n format: '{value} %'\n },\n legendSettings: {\n visible: false,\n },\n load: function (args) {\n var arrayCellTheme = location.hash.split('/')[1];\n arrayCellTheme = arrayCellTheme ? arrayCellTheme : 'Material';\n args.heatmap.theme = (arrayCellTheme.charAt(0).toUpperCase() + arrayCellTheme.slice(1));\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/array-cell.html b/src/heatmap/array-cell.html index d86dc4f5..ebb62a63 100644 --- a/src/heatmap/array-cell.html +++ b/src/heatmap/array-cell.html @@ -25,8 +25,10 @@ Heatmap.Inject(Tooltip) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/array-row-stack.json b/src/heatmap/array-row-stack.json index 89c17c5d..f24c12d4 100644 --- a/src/heatmap/array-row-stack.json +++ b/src/heatmap/array-row-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Array data binding sample\n */\n\n var arrayRowData = [\n [9.5, 2.2, 4.2, 8.2, -0.5, 3.2, 5.4, 7.4, 6.2, 1.4],\n [4.3, 8.9, 10.8, 6.5, 5.1, 6.2, 7.6, 7.5, 6.1, 7.6],\n [3.9, 2.7, 2.5, 3.7, 2.6, 5.1, 5.8, 2.9, 4.5, 5.1],\n [2.4, -3.7, 4.1, 6.0, 5.0, 2.4, 3.3, 4.6, 4.3, 2.7],\n [2.0, 7.0, -4.1, 8.9, 2.7, 5.9, 5.6, 1.9, -1.7, 2.9],\n [5.4, 1.1, 6.9, 4.5, 2.9, 3.4, 1.5, -2.8, -4.6, 1.2],\n [-1.3, 3.9, 3.5, 6.6, 5.2, 7.7, 1.4, -3.6, 6.6, 4.3],\n [-1.6, 2.3, 2.9, -2.5, 1.3, 4.9, 10.1, 3.2, 4.8, 2.0],\n [10.8, -1.6, 4.0, 6.0, 7.7, 2.6, 5.6, -2.5, 3.8, -1.9],\n [6.2, 9.8, -1.5, 2.0, -1.5, 4.3, 6.7, 3.8, -1.2, 2.4],\n [1.2, 10.9, 4.0, -1.4, 2.2, 1.6, -2.6, 2.3, 1.7, 2.4],\n [5.1, -2.4, 8.2, -1.1, 3.5, 6.0, -1.3, 7.2, 9.0, 4.2]\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'GDP Growth Rate for Major Economies (in Percentage)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'India', 'Australia', 'Mexico', 'Canada', 'Brazil',\n 'USA', 'UK', 'Germany', 'Russia', 'France', 'Japan'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']\n }, paletteSettings: {\n palette: [{ value: -1, color: '#F0D6AD' },\n { value: 0, color: '#9da49a' },\n { value: 3.5, color: '#d7c7a7' },\n { value: 6.0, color: '#6e888f' },\n { value: 7.5, color: '#466f86' },\n { value: 10, color: '#19547B' },\n ],\n },\n legendSettings: {\n visible: false\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n dataSource: arrayRowData,\n load: function (args) {\n var arrayRowTheme = location.hash.split('/')[1];\n arrayRowTheme = arrayRowTheme ? arrayRowTheme : 'Material';\n args.heatmap.theme = (arrayRowTheme.charAt(0).toUpperCase() + arrayRowTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Array data binding sample\n */\n\n var arrayRowData = [\n [9.5, 2.2, 4.2, 8.2, -0.5, 3.2, 5.4, 7.4, 6.2, 1.4],\n [4.3, 8.9, 10.8, 6.5, 5.1, 6.2, 7.6, 7.5, 6.1, 7.6],\n [3.9, 2.7, 2.5, 3.7, 2.6, 5.1, 5.8, 2.9, 4.5, 5.1],\n [2.4, -3.7, 4.1, 6.0, 5.0, 2.4, 3.3, 4.6, 4.3, 2.7],\n [2.0, 7.0, -4.1, 8.9, 2.7, 5.9, 5.6, 1.9, -1.7, 2.9],\n [5.4, 1.1, 6.9, 4.5, 2.9, 3.4, 1.5, -2.8, -4.6, 1.2],\n [-1.3, 3.9, 3.5, 6.6, 5.2, 7.7, 1.4, -3.6, 6.6, 4.3],\n [-1.6, 2.3, 2.9, -2.5, 1.3, 4.9, 10.1, 3.2, 4.8, 2.0],\n [10.8, -1.6, 4.0, 6.0, 7.7, 2.6, 5.6, -2.5, 3.8, -1.9],\n [6.2, 9.8, -1.5, 2.0, -1.5, 4.3, 6.7, 3.8, -1.2, 2.4],\n [1.2, 10.9, 4.0, -1.4, 2.2, 1.6, -2.6, 2.3, 1.7, 2.4],\n [5.1, -2.4, 8.2, -1.1, 3.5, 6.0, -1.3, 7.2, 9.0, 4.2]\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'GDP Growth Rate for Major Economies (in Percentage)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'India', 'Australia', 'Mexico', 'Canada', 'Brazil',\n 'USA', 'UK', 'Germany', 'Russia', 'France', 'Japan'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']\n }, paletteSettings: {\n palette: [{ value: -1, color: '#F0D6AD' },\n { value: 0, color: '#9da49a' },\n { value: 3.5, color: '#d7c7a7' },\n { value: 6.0, color: '#6e888f' },\n { value: 7.5, color: '#466f86' },\n { value: 10, color: '#19547B' },\n ],\n },\n legendSettings: {\n visible: false\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n dataSource: arrayRowData,\n load: function (args) {\n var arrayRowTheme = location.hash.split('/')[1];\n arrayRowTheme = arrayRowTheme ? arrayRowTheme : 'Material';\n args.heatmap.theme = (arrayRowTheme.charAt(0).toUpperCase() + arrayRowTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/array-row.html b/src/heatmap/array-row.html index c6efdb4b..43a33e23 100644 --- a/src/heatmap/array-row.html +++ b/src/heatmap/array-row.html @@ -22,8 +22,10 @@ Tooltip module using the Heatmap.Inject(Tooltip) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/bubble-types-stack.json b/src/heatmap/bubble-types-stack.json index 9bc9981f..0f274e48 100644 --- a/src/heatmap/bubble-types-stack.json +++ b/src/heatmap/bubble-types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Female Participation Rate in Labor Force for the Countries',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Singapore', 'Spain', 'Australia', 'Germany', 'Belgium', 'USA', 'France', 'UK'],\n labelRotation: 45,\n labelIntersectAction: 'None'\n },\n yAxis: {\n labels: ['1995', '2000', '2005', '2010', '2015']\n },\n dataSource: window.tableBubbleData,\n cellSettings: {\n border: {\n width: 1\n },\n showLabel: false,\n tileType: 'Bubble',\n bubbleType: 'Size'\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n paletteSettings: {\n palette: [{ value: 35, color: '#50A3B1' },\n { value: 45, color: '#78D1BD' },\n { value: 55, color: '#CAE8B4' },\n { value: 65, color: '#EDF8B6' },\n { value: 78, color: '#FFFFDA' }\n ],\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n },\n legendSettings: {\n visible: true\n },\n });\n heatmap.appendTo('#container');\n\n var bubbleTypeObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function (){ bubbleTypeChange(); }\n });\n bubbleTypeObj.appendTo('#bubbleType');\n\n function bubbleTypeChange() {\n heatmap.cellSettings.bubbleType = bubbleTypeObj.value.toString() === 'Size' ?\n 'Size' : bubbleTypeObj.value.toString() === 'Color' ?\n 'Color' : bubbleTypeObj.value.toString() === 'Sector' ?\n 'Sector' : null;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n         \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Bubble Type:
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Female Participation Rate in Labor Force for the Countries',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Singapore', 'Spain', 'Australia', 'Germany', 'Belgium', 'USA', 'France', 'UK'],\n labelRotation: 45,\n labelIntersectAction: 'None'\n },\n yAxis: {\n labels: ['1995', '2000', '2005', '2010', '2015']\n },\n dataSource: window.tableBubbleData,\n cellSettings: {\n border: {\n width: 1\n },\n showLabel: false,\n tileType: 'Bubble',\n bubbleType: 'Size'\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n },\n paletteSettings: {\n palette: [{ value: 35, color: '#50A3B1' },\n { value: 45, color: '#78D1BD' },\n { value: 55, color: '#CAE8B4' },\n { value: 65, color: '#EDF8B6' },\n { value: 78, color: '#FFFFDA' }\n ],\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n },\n legendSettings: {\n visible: true\n },\n });\n heatmap.appendTo('#container');\n\n var bubbleTypeObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function (){ bubbleTypeChange(); }\n });\n bubbleTypeObj.appendTo('#bubbleType');\n\n function bubbleTypeChange() {\n heatmap.cellSettings.bubbleType = bubbleTypeObj.value.toString() === 'Size' ?\n 'Size' : bubbleTypeObj.value.toString() === 'Color' ?\n 'Color' : bubbleTypeObj.value.toString() === 'Sector' ?\n 'Sector' : null;\n }\n"} \ No newline at end of file diff --git a/src/heatmap/bubble-types.html b/src/heatmap/bubble-types.html index d8ffaddc..3138cbd4 100644 --- a/src/heatmap/bubble-types.html +++ b/src/heatmap/bubble-types.html @@ -48,8 +48,10 @@ Heatmap.Inject(Tooltip) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/calendar-heatmap-stack.json b/src/heatmap/calendar-heatmap-stack.json index 9a41164f..61c3e082 100644 --- a/src/heatmap/calendar-heatmap-stack.json +++ b/src/heatmap/calendar-heatmap-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Annual Summary of User Activities in GitLab',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n height: '300px',\n xAxis: {\n opposedPosition: true,\n valueType: 'DateTime',\n minimum: new Date(2017, 6, 23),\n maximum: new Date(2018, 6, 30),\n intervalType: 'Days',\n showLabelOn: 'Months',\n labelFormat: 'MMM',\n increment: 7,\n labelIntersectAction: 'Rotate45',\n },\n yAxis: {\n labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n isInversed: true,\n },\n cellSettings: {\n showLabel: false,\n border: {\n color: 'white'\n }\n },\n paletteSettings: {\n palette: [\n { value: 0, color: 'rgb(238,238,238)', label: 'no contributions' },\n { value: 1, color: 'rgb(172, 213, 242)', label: '1-15 contributions' },\n { value: 16, color: 'rgb(127, 168, 201)', label: '16-31 contributions' },\n { value: 32, color: 'rgb(82, 123, 160)', label: '31-49 contributions' },\n { value: 50, color: 'rgb(37, 78, 119)', label: '50+ contributions' },\n ],\n type: 'Fixed',\n emptyPointColor: 'white'\n },\n legendSettings: {\n position: 'Bottom',\n width: '20%',\n alignment: 'Near',\n showLabel: true,\n labelDisplayType: 'None',\n enableSmartLegend: true\n },\n tooltipRender: function (args) {\n var intl = new ej.base.Internationalization();\n var format = intl.getDateFormat({ format: 'EEE MMM dd, yyyy' });\n var newDate = args.xValue;\n var date = new Date(newDate.getTime());\n var axisLabel = args.heatmap.axisCollections[1].axisLabels;\n var index = axisLabel.indexOf(args.yLabel);\n (date).setDate((date).getDate() + index);\n var value = format(date);\n args.content = [(args.value === 0 ? 'No' : args.value) + ' ' + 'contributions' + '
        ' + value];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.calendarDataSource\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Annual Summary of User Activities in GitLab',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n height: '300px',\n xAxis: {\n opposedPosition: true,\n valueType: 'DateTime',\n minimum: new Date(2017, 6, 23),\n maximum: new Date(2018, 6, 30),\n intervalType: 'Days',\n showLabelOn: 'Months',\n labelFormat: 'MMM',\n increment: 7,\n labelIntersectAction: 'Rotate45',\n },\n yAxis: {\n labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n isInversed: true,\n },\n cellSettings: {\n showLabel: false,\n border: {\n color: 'white'\n }\n },\n paletteSettings: {\n palette: [\n { value: 0, color: 'rgb(238,238,238)', label: 'no contributions' },\n { value: 1, color: 'rgb(172, 213, 242)', label: '1-15 contributions' },\n { value: 16, color: 'rgb(127, 168, 201)', label: '16-31 contributions' },\n { value: 32, color: 'rgb(82, 123, 160)', label: '31-49 contributions' },\n { value: 50, color: 'rgb(37, 78, 119)', label: '50+ contributions' },\n ],\n type: 'Fixed',\n emptyPointColor: 'white'\n },\n legendSettings: {\n position: 'Bottom',\n width: '20%',\n alignment: 'Near',\n showLabel: true,\n labelDisplayType: 'None',\n enableSmartLegend: true\n },\n tooltipRender: function (args) {\n var intl = new ej.base.Internationalization();\n var format = intl.getDateFormat({ format: 'EEE MMM dd, yyyy' });\n var newDate = args.xValue;\n var date = new Date(newDate.getTime());\n var axisLabel = args.heatmap.axisCollections[1].axisLabels;\n var index = axisLabel.indexOf(args.yLabel);\n (date).setDate((date).getDate() + index);\n var value = format(date);\n args.content = [(args.value === 0 ? 'No' : args.value) + ' ' + 'contributions' + '
        ' + value];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.calendarDataSource\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/calendar-heatmap.html b/src/heatmap/calendar-heatmap.html index 4fc23133..06e3ca70 100644 --- a/src/heatmap/calendar-heatmap.html +++ b/src/heatmap/calendar-heatmap.html @@ -20,8 +20,10 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/cell-json-binding-stack.json b/src/heatmap/cell-json-binding-stack.json index ad6630c7..213a7a1c 100644 --- a/src/heatmap/cell-json-binding-stack.json +++ b/src/heatmap/cell-json-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap JSON data binding sample\n */\n\n var jsonCellData = [\n { 'rowid': 'France', 'columnid': '2010', 'value': '77.6' },\n { 'rowid': 'France', 'columnid': '2011', 'value': '79.4' },\n { 'rowid': 'France', 'columnid': '2012', 'value': '80.8' },\n { 'rowid': 'France', 'columnid': '2013', 'value': '86.6' },\n { 'rowid': 'France', 'columnid': '2014', 'value': '83.7' },\n { 'rowid': 'France', 'columnid': '2015', 'value': '84.5' },\n { 'rowid': 'France', 'columnid': '2016', 'value': '82.6' },\n { 'rowid': 'USA', 'columnid': '2010', 'value': '60.6' },\n { 'rowid': 'USA', 'columnid': '2011', 'value': '65.4' },\n { 'rowid': 'USA', 'columnid': '2012', 'value': '70.8' },\n { 'rowid': 'USA', 'columnid': '2013', 'value': '73.8' },\n { 'rowid': 'USA', 'columnid': '2014', 'value': '75.3' },\n { 'rowid': 'USA', 'columnid': '2015', 'value': '77.5' },\n { 'rowid': 'USA', 'columnid': '2016', 'value': '77.6' },\n { 'rowid': 'Spain', 'columnid': '2010', 'value': '64.9' },\n { 'rowid': 'Spain', 'columnid': '2011', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2012', 'value': '60.8' },\n { 'rowid': 'Spain', 'columnid': '2013', 'value': '65.6' },\n { 'rowid': 'Spain', 'columnid': '2014', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2015', 'value': '68.5' },\n { 'rowid': 'Spain', 'columnid': '2016', 'value': '75.6' },\n { 'rowid': 'China', 'columnid': '2010', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2011', 'value': '52.3' },\n { 'rowid': 'China', 'columnid': '2012', 'value': '54.8' },\n { 'rowid': 'China', 'columnid': '2013', 'value': '51.1' },\n { 'rowid': 'China', 'columnid': '2014', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2015', 'value': '56.9' },\n { 'rowid': 'China', 'columnid': '2016', 'value': '59.3' },\n { 'rowid': 'Italy', 'columnid': '2010', 'value': '43.6' },\n { 'rowid': 'Italy', 'columnid': '2011', 'value': '43.2' },\n { 'rowid': 'Italy', 'columnid': '2012', 'value': '55.8' },\n { 'rowid': 'Italy', 'columnid': '2013', 'value': '50.1' },\n { 'rowid': 'Italy', 'columnid': '2014', 'value': '48.5' },\n { 'rowid': 'Italy', 'columnid': '2015', 'value': '50.7' },\n { 'rowid': 'Italy', 'columnid': '2016', 'value': '52.4' },\n { 'rowid': 'UK', 'columnid': '2010', 'value': '28.2' },\n { 'rowid': 'UK', 'columnid': '2011', 'value': '31.6' },\n { 'rowid': 'UK', 'columnid': '2012', 'value': '29.8' },\n { 'rowid': 'UK', 'columnid': '2013', 'value': '33.1' },\n { 'rowid': 'UK', 'columnid': '2014', 'value': '32.6' },\n { 'rowid': 'UK', 'columnid': '2015', 'value': '34.4' },\n { 'rowid': 'UK', 'columnid': '2016', 'value': '35.8' },\n { 'rowid': 'Germany', 'columnid': '2010', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2011', 'value': '29' },\n { 'rowid': 'Germany', 'columnid': '2012', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2013', 'value': '27.6' },\n { 'rowid': 'Germany', 'columnid': '2014', 'value': '33' },\n { 'rowid': 'Germany', 'columnid': '2015', 'value': '35' },\n { 'rowid': 'Germany', 'columnid': '2016', 'value': '35.6' },\n { 'rowid': 'Mexico', 'columnid': '2010', 'value': '23.2' },\n { 'rowid': 'Mexico', 'columnid': '2011', 'value': '24.9' },\n { 'rowid': 'Mexico', 'columnid': '2012', 'value': '30.1' },\n { 'rowid': 'Mexico', 'columnid': '2013', 'value': '22.2' },\n { 'rowid': 'Mexico', 'columnid': '2014', 'value': '29.3' },\n { 'rowid': 'Mexico', 'columnid': '2015', 'value': '32.1' },\n { 'rowid': 'Mexico', 'columnid': '2016', 'value': '35' },\n { 'rowid': 'Thailand', 'columnid': '2010', 'value': '15.9' },\n { 'rowid': 'Thailand', 'columnid': '2011', 'value': '19.8' },\n { 'rowid': 'Thailand', 'columnid': '2012', 'value': '21.8' },\n { 'rowid': 'Thailand', 'columnid': '2013', 'value': '23.5' },\n { 'rowid': 'Thailand', 'columnid': '2014', 'value': '24.8' },\n { 'rowid': 'Thailand', 'columnid': '2015', 'value': '29.9' },\n { 'rowid': 'Thailand', 'columnid': '2016', 'value': '32.6' },\n { 'rowid': 'Austria', 'columnid': '2010', 'value': '22' },\n { 'rowid': 'Austria', 'columnid': '2011', 'value': '21.3' },\n { 'rowid': 'Austria', 'columnid': '2012', 'value': '24.2' },\n { 'rowid': 'Austria', 'columnid': '2013', 'value': '23.2' },\n { 'rowid': 'Austria', 'columnid': '2014', 'value': '25' },\n { 'rowid': 'Austria', 'columnid': '2015', 'value': '26.7' },\n { 'rowid': 'Austria', 'columnid': '2016', 'value': '28.1' },\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Most Visited Destinations by International Tourist Arrivals',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Austria', 'China', 'France', 'Germany', 'Italy', 'Mexico', 'Spain', 'Thailand', 'UK', 'USA'],\n },\n yAxis: {\n labels: ['2010', '2011', '2012', '2013', '2014', '2015', '2016'],\n },\n dataSource: {\n data: jsonCellData,\n isJsonData: true,\n adaptorType: 'Cell',\n xDataMapping: 'rowid',\n yDataMapping: 'columnid',\n valueMapping: 'value'\n }, cellSettings: {\n border: {\n radius: 4,\n width: 1,\n color: 'white'\n },\n showLabel: true,\n format: '{value} M',\n }, \n load: function (args) {\n var jsonCellTheme = location.hash.split('/')[1];\n jsonCellTheme = jsonCellTheme ? jsonCellTheme : 'Material';\n args.heatmap.theme = (jsonCellTheme.charAt(0).toUpperCase() + jsonCellTheme.slice(1));\n },\n paletteSettings: {\n palette: [{ color: '#DCD57E' },\n { color: '#A6DC7E' },\n { color: '#7EDCA2' },\n { color: '#6EB5D0' }\n ],\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap JSON data binding sample\n */\n\n var jsonCellData = [\n { 'rowid': 'France', 'columnid': '2010', 'value': '77.6' },\n { 'rowid': 'France', 'columnid': '2011', 'value': '79.4' },\n { 'rowid': 'France', 'columnid': '2012', 'value': '80.8' },\n { 'rowid': 'France', 'columnid': '2013', 'value': '86.6' },\n { 'rowid': 'France', 'columnid': '2014', 'value': '83.7' },\n { 'rowid': 'France', 'columnid': '2015', 'value': '84.5' },\n { 'rowid': 'France', 'columnid': '2016', 'value': '82.6' },\n { 'rowid': 'USA', 'columnid': '2010', 'value': '60.6' },\n { 'rowid': 'USA', 'columnid': '2011', 'value': '65.4' },\n { 'rowid': 'USA', 'columnid': '2012', 'value': '70.8' },\n { 'rowid': 'USA', 'columnid': '2013', 'value': '73.8' },\n { 'rowid': 'USA', 'columnid': '2014', 'value': '75.3' },\n { 'rowid': 'USA', 'columnid': '2015', 'value': '77.5' },\n { 'rowid': 'USA', 'columnid': '2016', 'value': '77.6' },\n { 'rowid': 'Spain', 'columnid': '2010', 'value': '64.9' },\n { 'rowid': 'Spain', 'columnid': '2011', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2012', 'value': '60.8' },\n { 'rowid': 'Spain', 'columnid': '2013', 'value': '65.6' },\n { 'rowid': 'Spain', 'columnid': '2014', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2015', 'value': '68.5' },\n { 'rowid': 'Spain', 'columnid': '2016', 'value': '75.6' },\n { 'rowid': 'China', 'columnid': '2010', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2011', 'value': '52.3' },\n { 'rowid': 'China', 'columnid': '2012', 'value': '54.8' },\n { 'rowid': 'China', 'columnid': '2013', 'value': '51.1' },\n { 'rowid': 'China', 'columnid': '2014', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2015', 'value': '56.9' },\n { 'rowid': 'China', 'columnid': '2016', 'value': '59.3' },\n { 'rowid': 'Italy', 'columnid': '2010', 'value': '43.6' },\n { 'rowid': 'Italy', 'columnid': '2011', 'value': '43.2' },\n { 'rowid': 'Italy', 'columnid': '2012', 'value': '55.8' },\n { 'rowid': 'Italy', 'columnid': '2013', 'value': '50.1' },\n { 'rowid': 'Italy', 'columnid': '2014', 'value': '48.5' },\n { 'rowid': 'Italy', 'columnid': '2015', 'value': '50.7' },\n { 'rowid': 'Italy', 'columnid': '2016', 'value': '52.4' },\n { 'rowid': 'UK', 'columnid': '2010', 'value': '28.2' },\n { 'rowid': 'UK', 'columnid': '2011', 'value': '31.6' },\n { 'rowid': 'UK', 'columnid': '2012', 'value': '29.8' },\n { 'rowid': 'UK', 'columnid': '2013', 'value': '33.1' },\n { 'rowid': 'UK', 'columnid': '2014', 'value': '32.6' },\n { 'rowid': 'UK', 'columnid': '2015', 'value': '34.4' },\n { 'rowid': 'UK', 'columnid': '2016', 'value': '35.8' },\n { 'rowid': 'Germany', 'columnid': '2010', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2011', 'value': '29' },\n { 'rowid': 'Germany', 'columnid': '2012', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2013', 'value': '27.6' },\n { 'rowid': 'Germany', 'columnid': '2014', 'value': '33' },\n { 'rowid': 'Germany', 'columnid': '2015', 'value': '35' },\n { 'rowid': 'Germany', 'columnid': '2016', 'value': '35.6' },\n { 'rowid': 'Mexico', 'columnid': '2010', 'value': '23.2' },\n { 'rowid': 'Mexico', 'columnid': '2011', 'value': '24.9' },\n { 'rowid': 'Mexico', 'columnid': '2012', 'value': '30.1' },\n { 'rowid': 'Mexico', 'columnid': '2013', 'value': '22.2' },\n { 'rowid': 'Mexico', 'columnid': '2014', 'value': '29.3' },\n { 'rowid': 'Mexico', 'columnid': '2015', 'value': '32.1' },\n { 'rowid': 'Mexico', 'columnid': '2016', 'value': '35' },\n { 'rowid': 'Thailand', 'columnid': '2010', 'value': '15.9' },\n { 'rowid': 'Thailand', 'columnid': '2011', 'value': '19.8' },\n { 'rowid': 'Thailand', 'columnid': '2012', 'value': '21.8' },\n { 'rowid': 'Thailand', 'columnid': '2013', 'value': '23.5' },\n { 'rowid': 'Thailand', 'columnid': '2014', 'value': '24.8' },\n { 'rowid': 'Thailand', 'columnid': '2015', 'value': '29.9' },\n { 'rowid': 'Thailand', 'columnid': '2016', 'value': '32.6' },\n { 'rowid': 'Austria', 'columnid': '2010', 'value': '22' },\n { 'rowid': 'Austria', 'columnid': '2011', 'value': '21.3' },\n { 'rowid': 'Austria', 'columnid': '2012', 'value': '24.2' },\n { 'rowid': 'Austria', 'columnid': '2013', 'value': '23.2' },\n { 'rowid': 'Austria', 'columnid': '2014', 'value': '25' },\n { 'rowid': 'Austria', 'columnid': '2015', 'value': '26.7' },\n { 'rowid': 'Austria', 'columnid': '2016', 'value': '28.1' },\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Most Visited Destinations by International Tourist Arrivals',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Austria', 'China', 'France', 'Germany', 'Italy', 'Mexico', 'Spain', 'Thailand', 'UK', 'USA'],\n },\n yAxis: {\n labels: ['2010', '2011', '2012', '2013', '2014', '2015', '2016'],\n },\n dataSource: {\n data: jsonCellData,\n isJsonData: true,\n adaptorType: 'Cell',\n xDataMapping: 'rowid',\n yDataMapping: 'columnid',\n valueMapping: 'value'\n }, cellSettings: {\n border: {\n radius: 4,\n width: 1,\n color: 'white'\n },\n showLabel: true,\n format: '{value} M',\n }, \n load: function (args) {\n var jsonCellTheme = location.hash.split('/')[1];\n jsonCellTheme = jsonCellTheme ? jsonCellTheme : 'Material';\n args.heatmap.theme = (jsonCellTheme.charAt(0).toUpperCase() + jsonCellTheme.slice(1));\n },\n paletteSettings: {\n palette: [{ color: '#DCD57E' },\n { color: '#A6DC7E' },\n { color: '#7EDCA2' },\n { color: '#6EB5D0' }\n ],\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/cell-json-binding.html b/src/heatmap/cell-json-binding.html index b795a799..2acc3058 100644 --- a/src/heatmap/cell-json-binding.html +++ b/src/heatmap/cell-json-binding.html @@ -32,8 +32,10 @@ Legend module using the Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/cell-selection-stack.json b/src/heatmap/cell-selection-stack.json index 7e47774d..0a714d6d 100644 --- a/src/heatmap/cell-selection-stack.json +++ b/src/heatmap/cell-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Sample for Cell Selection\n */\n\n \n var heatmap = new ej.heatmap.HeatMap({\n titleSettings:{\n text:'Top export products 2014-2018, Value in USD million'\n },\n xAxis: {\n labels: ['Cereals', 'Meat', 'Spices', 'Tea', 'Edible Oil', 'Dairy Products', 'Wheat'],\n },\n yAxis: {\n labels:['2014','2015','2016','2017','2018']\n },\n allowSelection: true,\n dataSource: window.cellSelectionData,\n paletteSettings: {\n palette: [\n {color: '#3C5E62 '},\n {color: '#86C843 '}\n ],\n },\n legendSettings: {\n visible:false,\n },\n showTooltip: true,\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n cellSelected: function(args) {\n var obj = document.getElementById('container1').ej2_instances[0];\n var data = args.data;\n var length = data.length;\n var xAxis = [];\n var flag = [];\n var series = [];\n var columnData = {};\n for (var i = 0; i < length; i++) {\n if (xAxis.indexOf(data[i].xLabel) === -1) {\n xAxis.push(data[i].xLabel);\n flag.push(false);\n }\n }\n for (i = 0; i < length; i++) {\n var index = xAxis.indexOf(data[i].xLabel);\n if (!flag[index]) {\n flag[index] = true;\n var column = {};\n column.type = 'Column';\n column.xName = 'x';\n column.yName = 'y';\n column.width = 2;\n column.name = data[i].xLabel;\n column.marker = { dataLabel: { visible: false } };\n column.dataSource = [];\n columnData = {};\n columnData.x = data[i].yLabel;\n columnData.y = data[i].value;\n column.dataSource.push(columnData);\n series.push(column);\n }\n else {\n columnData = {};\n columnData.x = data[i].yLabel;\n columnData.y = data[i].value;\n series[index].dataSource.push(columnData);\n }\n }\n obj.series = series;\n obj.refresh();\n },\n });\n heatmap.appendTo('#container');\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n primaryYAxis:\n {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n series:window.chartData,\n tooltip: {\n enable: true\n },\n load: function(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n chart.appendTo('#container1');\n var button = new ej.buttons.Button();\n button.appendTo('#clearSelection');\n document.getElementById('clearSelection').onclick = function () {\n heatmap.clearSelection();\n chart.series =window.chartData;\n chart.refresh();\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Sample for Cell Selection\n */\n\n \n var heatmap = new ej.heatmap.HeatMap({\n titleSettings:{\n text:'Top export products 2014-2018, Value in USD million'\n },\n xAxis: {\n labels: ['Cereals', 'Meat', 'Spices', 'Tea', 'Edible Oil', 'Dairy Products', 'Wheat'],\n },\n yAxis: {\n labels:['2014','2015','2016','2017','2018']\n },\n allowSelection: true,\n dataSource: window.cellSelectionData,\n paletteSettings: {\n palette: [\n {color: '#3C5E62 '},\n {color: '#86C843 '}\n ],\n },\n legendSettings: {\n visible:false,\n },\n showTooltip: true,\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n cellSelected: function(args) {\n var obj = document.getElementById('container1').ej2_instances[0];\n var data = args.data;\n var length = data.length;\n var xAxis = [];\n var flag = [];\n var series = [];\n var columnData = {};\n for (var i = 0; i < length; i++) {\n if (xAxis.indexOf(data[i].xLabel) === -1) {\n xAxis.push(data[i].xLabel);\n flag.push(false);\n }\n }\n for (i = 0; i < length; i++) {\n var index = xAxis.indexOf(data[i].xLabel);\n if (!flag[index]) {\n flag[index] = true;\n var column = {};\n column.type = 'Column';\n column.xName = 'x';\n column.yName = 'y';\n column.width = 2;\n column.name = data[i].xLabel;\n column.marker = { dataLabel: { visible: false } };\n column.dataSource = [];\n columnData = {};\n columnData.x = data[i].yLabel;\n columnData.y = data[i].value;\n column.dataSource.push(columnData);\n series.push(column);\n }\n else {\n columnData = {};\n columnData.x = data[i].yLabel;\n columnData.y = data[i].value;\n series[index].dataSource.push(columnData);\n }\n }\n obj.series = series;\n obj.refresh();\n },\n });\n heatmap.appendTo('#container');\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'Category', interval: 1, majorGridLines: { width: 0 }\n },\n chartArea: { border: { width: 0 } },\n primaryYAxis:\n {\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }\n },\n series:window.chartData,\n tooltip: {\n enable: true\n },\n load: function(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n chart.appendTo('#container1');\n var button = new ej.buttons.Button();\n button.appendTo('#clearSelection');\n document.getElementById('clearSelection').onclick = function () {\n heatmap.clearSelection();\n chart.series =window.chartData;\n chart.refresh();\n };\n\n"} \ No newline at end of file diff --git a/src/heatmap/cell-selection.html b/src/heatmap/cell-selection.html index d5b11b9c..936a0094 100644 --- a/src/heatmap/cell-selection.html +++ b/src/heatmap/cell-selection.html @@ -37,8 +37,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/color-and-size-attributes-stack.json b/src/heatmap/color-and-size-attributes-stack.json index 2b9d9a94..87bdf009 100644 --- a/src/heatmap/color-and-size-attributes-stack.json +++ b/src/heatmap/color-and-size-attributes-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var jsonCellBubbleData = [\n { Year: '2017', Months: 'Jan-Feb', Accidents: 4, Fatalities: 39 },\n { Year: '2017', Months: 'Mar-Apr', Accidents: 3, Fatalities: 8 },\n { Year: '2017', Months: 'May-Jun', Accidents: 1, Fatalities: 3 },\n { Year: '2017', Months: 'Jul-Aug', Accidents: 1, Fatalities: 0 },\n { Year: '2017', Months: 'Sep-Oct', Accidents: 4, Fatalities: 4 },\n { Year: '2017', Months: 'Nov-Dec', Accidents: 2, Fatalities: 15 },\n { Year: '2016', Months: 'Jan-Feb', Accidents: 4, Fatalities: 28 },\n { Year: '2016', Months: 'Mar-Apr', Accidents: 5, Fatalities: 92 },\n { Year: '2016', Months: 'May-Jun', Accidents: 5, Fatalities: 73 },\n { Year: '2016', Months: 'Jul-Aug', Accidents: 3, Fatalities: 1 },\n { Year: '2016', Months: 'Sep-Oct', Accidents: 3, Fatalities: 4 },\n { Year: '2016', Months: 'Nov-Dec', Accidents: 4, Fatalities: 126 },\n { Year: '2015', Months: 'Jan-Feb', Accidents: 1, Fatalities: 45 },\n { Year: '2015', Months: 'Mar-Apr', Accidents: 5, Fatalities: 152 },\n { Year: '2015', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },\n { Year: '2015', Months: 'Jul-Aug', Accidents: 4, Fatalities: 54 },\n { Year: '2015', Months: 'Sep-Oct', Accidents: 5, Fatalities: 243 },\n { Year: '2015', Months: 'Nov-Dec', Accidents: 2, Fatalities: 45 },\n { Year: '2014', Months: 'Jan-Feb', Accidents: 2, Fatalities: 18 },\n { Year: '2014', Months: 'Mar-Apr', Accidents: 3, Fatalities: 239 },\n { Year: '2014', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },\n { Year: '2014', Months: 'Jul-Aug', Accidents: 4, Fatalities: 501 },\n { Year: '2014', Months: 'Sep-Oct', Accidents: 1, Fatalities: 2 },\n { Year: '2014', Months: 'Nov-Dec', Accidents: 4, Fatalities: 162 },\n { Year: '2013', Months: 'Jan-Feb', Accidents: 2, Fatalities: 68 },\n { Year: '2013', Months: 'Mar-Apr', Accidents: 3, Fatalities: 7 },\n { Year: '2013', Months: 'May-Jun', Accidents: 2, Fatalities: 12 },\n { Year: '2013', Months: 'Jul-Aug', Accidents: 4, Fatalities: 15 },\n { Year: '2013', Months: 'Sep-Oct', Accidents: 2, Fatalities: 64 },\n { Year: '2013', Months: 'Nov-Dec', Accidents: 3, Fatalities: 83 },\n { Year: '2012', Months: 'Jan-Feb', Accidents: 0, Fatalities: 0 },\n { Year: '2012', Months: 'Mar-Apr', Accidents: 2, Fatalities: 158 },\n { Year: '2012', Months: 'May-Jun', Accidents: 5, Fatalities: 90 },\n { Year: '2012', Months: 'Jul-Aug', Accidents: 0, Fatalities: 0 },\n { Year: '2012', Months: 'Sep-Oct', Accidents: 3, Fatalities: 33 },\n { Year: '2012', Months: 'Nov-Dec', Accidents: 4, Fatalities: 42 }\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2017', '2016', '2015', '2014', '2013', '2012'],\n },\n yAxis: {\n labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec'],\n },\n dataSource: {\n data: jsonCellBubbleData,\n isJsonData: true,\n adaptorType: 'Cell',\n xDataMapping: 'Year',\n yDataMapping: 'Months',\n bubbleDataMapping: { size: 'Accidents', color: 'Fatalities' }\n },\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n tileType: 'Bubble',\n bubbleType: 'SizeAndColor'\n },\n paletteSettings: {\n palette: [{ color: '#C06C84' },\n { color: '#355C7D' }\n ],\n type: 'Gradient'\n },\n tooltipRender: function (args) {\n args.content = ['Year ' + ' : ' + args.xLabel + '
        ' + 'Months ' + ' : ' + args.yLabel + '
        ' +\n\t\t\t'Accidents ' + ' : ' + (args.value)[0].bubbleData + '
        ' + 'Fatalities ' + ' : ' +\n\t\t\t(args.value)[1].bubbleData];\n },\n legendSettings: {\n visible: true\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n }\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var jsonCellBubbleData = [\n { Year: '2017', Months: 'Jan-Feb', Accidents: 4, Fatalities: 39 },\n { Year: '2017', Months: 'Mar-Apr', Accidents: 3, Fatalities: 8 },\n { Year: '2017', Months: 'May-Jun', Accidents: 1, Fatalities: 3 },\n { Year: '2017', Months: 'Jul-Aug', Accidents: 1, Fatalities: 0 },\n { Year: '2017', Months: 'Sep-Oct', Accidents: 4, Fatalities: 4 },\n { Year: '2017', Months: 'Nov-Dec', Accidents: 2, Fatalities: 15 },\n { Year: '2016', Months: 'Jan-Feb', Accidents: 4, Fatalities: 28 },\n { Year: '2016', Months: 'Mar-Apr', Accidents: 5, Fatalities: 92 },\n { Year: '2016', Months: 'May-Jun', Accidents: 5, Fatalities: 73 },\n { Year: '2016', Months: 'Jul-Aug', Accidents: 3, Fatalities: 1 },\n { Year: '2016', Months: 'Sep-Oct', Accidents: 3, Fatalities: 4 },\n { Year: '2016', Months: 'Nov-Dec', Accidents: 4, Fatalities: 126 },\n { Year: '2015', Months: 'Jan-Feb', Accidents: 1, Fatalities: 45 },\n { Year: '2015', Months: 'Mar-Apr', Accidents: 5, Fatalities: 152 },\n { Year: '2015', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },\n { Year: '2015', Months: 'Jul-Aug', Accidents: 4, Fatalities: 54 },\n { Year: '2015', Months: 'Sep-Oct', Accidents: 5, Fatalities: 243 },\n { Year: '2015', Months: 'Nov-Dec', Accidents: 2, Fatalities: 45 },\n { Year: '2014', Months: 'Jan-Feb', Accidents: 2, Fatalities: 18 },\n { Year: '2014', Months: 'Mar-Apr', Accidents: 3, Fatalities: 239 },\n { Year: '2014', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },\n { Year: '2014', Months: 'Jul-Aug', Accidents: 4, Fatalities: 501 },\n { Year: '2014', Months: 'Sep-Oct', Accidents: 1, Fatalities: 2 },\n { Year: '2014', Months: 'Nov-Dec', Accidents: 4, Fatalities: 162 },\n { Year: '2013', Months: 'Jan-Feb', Accidents: 2, Fatalities: 68 },\n { Year: '2013', Months: 'Mar-Apr', Accidents: 3, Fatalities: 7 },\n { Year: '2013', Months: 'May-Jun', Accidents: 2, Fatalities: 12 },\n { Year: '2013', Months: 'Jul-Aug', Accidents: 4, Fatalities: 15 },\n { Year: '2013', Months: 'Sep-Oct', Accidents: 2, Fatalities: 64 },\n { Year: '2013', Months: 'Nov-Dec', Accidents: 3, Fatalities: 83 },\n { Year: '2012', Months: 'Jan-Feb', Accidents: 0, Fatalities: 0 },\n { Year: '2012', Months: 'Mar-Apr', Accidents: 2, Fatalities: 158 },\n { Year: '2012', Months: 'May-Jun', Accidents: 5, Fatalities: 90 },\n { Year: '2012', Months: 'Jul-Aug', Accidents: 0, Fatalities: 0 },\n { Year: '2012', Months: 'Sep-Oct', Accidents: 3, Fatalities: 33 },\n { Year: '2012', Months: 'Nov-Dec', Accidents: 4, Fatalities: 42 }\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2017', '2016', '2015', '2014', '2013', '2012'],\n },\n yAxis: {\n labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec'],\n },\n dataSource: {\n data: jsonCellBubbleData,\n isJsonData: true,\n adaptorType: 'Cell',\n xDataMapping: 'Year',\n yDataMapping: 'Months',\n bubbleDataMapping: { size: 'Accidents', color: 'Fatalities' }\n },\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n tileType: 'Bubble',\n bubbleType: 'SizeAndColor'\n },\n paletteSettings: {\n palette: [{ color: '#C06C84' },\n { color: '#355C7D' }\n ],\n type: 'Gradient'\n },\n tooltipRender: function (args) {\n args.content = ['Year ' + ' : ' + args.xLabel + '
        ' + 'Months ' + ' : ' + args.yLabel + '
        ' +\n\t\t\t'Accidents ' + ' : ' + (args.value)[0].bubbleData + '
        ' + 'Fatalities ' + ' : ' +\n\t\t\t(args.value)[1].bubbleData];\n },\n legendSettings: {\n visible: true\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n }\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/heatmap/color-and-size-attributes.html b/src/heatmap/color-and-size-attributes.html index 03818595..317f203c 100644 --- a/src/heatmap/color-and-size-attributes.html +++ b/src/heatmap/color-and-size-attributes.html @@ -24,8 +24,10 @@ legend by injecting the Legend module using the Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/default-stack.json b/src/heatmap/default-stack.json index 241c0d6d..06496362 100644 --- a/src/heatmap/default-stack.json +++ b/src/heatmap/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Default sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Sales Revenue per Employee (in 1000 US$)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],\n },\n yAxis: {\n labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.getDatasource().dataSource,\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Default sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Sales Revenue per Employee (in 1000 US$)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],\n },\n yAxis: {\n labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.getDatasource().dataSource,\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/heatmap/default.html b/src/heatmap/default.html index e5d118b4..edea52e1 100644 --- a/src/heatmap/default.html +++ b/src/heatmap/default.html @@ -26,8 +26,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/empty-points-stack.json b/src/heatmap/empty-points-stack.json index e4ee3094..ab107ca8 100644 --- a/src/heatmap/empty-points-stack.json +++ b/src/heatmap/empty-points-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Deffective Count per 1000 Products from a Manufacturing Unit',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2007', '2008', '2009', '2010', '2011',\n '2012', '2013', '2014', '2015', '2016', '2017'],\n },\n yAxis: {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May',\n 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],\n\n }, cellSettings: {\n border: {\n width: '0',\n color: 'white'\n },\n showLabel: true\n },\n paletteSettings: {\n palette: [{ color: 'rgb(172, 213, 242)' },\n { color: 'rgb(127, 168, 201)' },\n { color: 'rgb(82, 123, 160)' },\n { color: 'rgb(37, 78, 119)' },\n ],\n type: 'Gradient'\n },\n legendSettings: {\n position: 'Bottom',\n width: '250px',\n showLabel: true,\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' deffective units'];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.emptyPointDataSource\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Deffective Count per 1000 Products from a Manufacturing Unit',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2007', '2008', '2009', '2010', '2011',\n '2012', '2013', '2014', '2015', '2016', '2017'],\n },\n yAxis: {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May',\n 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],\n\n }, cellSettings: {\n border: {\n width: '0',\n color: 'white'\n },\n showLabel: true\n },\n paletteSettings: {\n palette: [{ color: 'rgb(172, 213, 242)' },\n { color: 'rgb(127, 168, 201)' },\n { color: 'rgb(82, 123, 160)' },\n { color: 'rgb(37, 78, 119)' },\n ],\n type: 'Gradient'\n },\n legendSettings: {\n position: 'Bottom',\n width: '250px',\n showLabel: true,\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' deffective units'];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n dataSource: window.emptyPointDataSource\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/empty-points.html b/src/heatmap/empty-points.html index 03b124dc..5e36d7a8 100644 --- a/src/heatmap/empty-points.html +++ b/src/heatmap/empty-points.html @@ -25,8 +25,10 @@ the Legend module using the Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/inversed-stack.json b/src/heatmap/inversed-stack.json index 1a4b21e3..946de2a2 100644 --- a/src/heatmap/inversed-stack.json +++ b/src/heatmap/inversed-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Population Growth Rate of the most Populous Countries',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'India', 'USA', 'Indonesia', 'Brazil', 'Pakistan',\n 'Nigeria', 'Bangladesh', 'Russia', 'Mexico'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n isInversed: true\n },\n yAxis: {\n labels: ['1965-1970', '1970-1975', '1975-1980', '1980-1985', '1985-1990',\n '1990-1995', '1995-2000', '2000-2005', '2005-2010', '2010-2015'],\n isInversed: true\n },\n dataSource: window.inveredAxisData,\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n format: '{value} %'\n },\n paletteSettings: {\n palette: [{ value: 0, color: '#4b7287' },\n { value: 0.5, color: '#b5b29f' },\n { value: 1, color: '#F0D6AD' },\n { value: 1.5, color: '#9da49a' },\n { value: 2, color: '#466f86' },\n { value: 2.5, color: '#d7c7a7' },\n { value: 3, color: '#6e888f' },\n ],\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n },\n legendSettings: {\n visible: false\n },\n });\n heatmap.appendTo('#container');\n\n var xlistObj = new ej.buttons.CheckBox({ label: 'Reverse X-Axis Origin', checked: true, change: valueXChange });\n xlistObj.appendTo('#XOpposedPosition');\n\n function valueXChange() {\n heatmap.xAxis.isInversed = xlistObj.checked;\n }\n\n var ylistObj = new ej.buttons.CheckBox({ label: 'Reverse Y-Axis Origin', checked: true, change: valueYChange });\n ylistObj.appendTo('#YOpposedPosition');\n function valueYChange() {\n heatmap.yAxis.isInversed = ylistObj.checked;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Population Growth Rate of the most Populous Countries',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'India', 'USA', 'Indonesia', 'Brazil', 'Pakistan',\n 'Nigeria', 'Bangladesh', 'Russia', 'Mexico'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n isInversed: true\n },\n yAxis: {\n labels: ['1965-1970', '1970-1975', '1975-1980', '1980-1985', '1985-1990',\n '1990-1995', '1995-2000', '2000-2005', '2005-2010', '2010-2015'],\n isInversed: true\n },\n dataSource: window.inveredAxisData,\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n format: '{value} %'\n },\n paletteSettings: {\n palette: [{ value: 0, color: '#4b7287' },\n { value: 0.5, color: '#b5b29f' },\n { value: 1, color: '#F0D6AD' },\n { value: 1.5, color: '#9da49a' },\n { value: 2, color: '#466f86' },\n { value: 2.5, color: '#d7c7a7' },\n { value: 3, color: '#6e888f' },\n ],\n },\n load: function (args) {\n var inversedAxisTheme = location.hash.split('/')[1];\n inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n inversedAxisTheme.slice(1));\n },\n legendSettings: {\n visible: false\n },\n });\n heatmap.appendTo('#container');\n\n var xlistObj = new ej.buttons.CheckBox({ label: 'Reverse X-Axis Origin', checked: true, change: valueXChange });\n xlistObj.appendTo('#XOpposedPosition');\n\n function valueXChange() {\n heatmap.xAxis.isInversed = xlistObj.checked;\n }\n\n var ylistObj = new ej.buttons.CheckBox({ label: 'Reverse Y-Axis Origin', checked: true, change: valueYChange });\n ylistObj.appendTo('#YOpposedPosition');\n function valueYChange() {\n heatmap.yAxis.isInversed = ylistObj.checked;\n }\n"} \ No newline at end of file diff --git a/src/heatmap/inversed.html b/src/heatmap/inversed.html index 3f749ddf..83349cae 100644 --- a/src/heatmap/inversed.html +++ b/src/heatmap/inversed.html @@ -52,8 +52,10 @@ Heatmap.Inject(Tooltip) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/large-data-stack.json b/src/heatmap/large-data-stack.json index b6f3a6a5..12a264a9 100644 --- a/src/heatmap/large-data-stack.json +++ b/src/heatmap/large-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Annual Flight Traffic Report',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n minimum: new Date(2017, 0, 1),\n maximum: new Date(2017, 11, 31),\n intervalType: 'Days',\n valueType: 'DateTime',\n labelFormat: 'MMM',\n showLabelOn: 'Months'\n },\n yAxis: {\n labels: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',\n '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',\n '22:00', '23:00', '24:00']\n },\n renderingMode: 'Canvas',\n dataSource:window.largeData,\n paletteSettings: {\n palette: [\n { value: 150, color: '#A6DC7E' },\n { value: 250, color: '#DCD57E' },\n { value: 300, color: '#DC8D7E' },\n ],\n type: 'Gradient'\n },\n cellSettings: {\n border: {\n width: 0\n }\n },\n legendSettings: {\n visible: false\n },\n tooltipRender: function (args) {\n var intl = new ej.base.Internationalization();\n var format = intl.getDateFormat({format: \"MMM dd, yyyy\" });\n var value = format(args.xValue);\n args.content = [value + \" \" + args.yLabel + \" : \" + args.value + \" flight arrivals\"];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Annual Flight Traffic Report',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n minimum: new Date(2017, 0, 1),\n maximum: new Date(2017, 11, 31),\n intervalType: 'Days',\n valueType: 'DateTime',\n labelFormat: 'MMM',\n showLabelOn: 'Months'\n },\n yAxis: {\n labels: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',\n '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',\n '22:00', '23:00', '24:00']\n },\n renderingMode: 'Canvas',\n dataSource:window.largeData,\n paletteSettings: {\n palette: [\n { value: 150, color: '#A6DC7E' },\n { value: 250, color: '#DCD57E' },\n { value: 300, color: '#DC8D7E' },\n ],\n type: 'Gradient'\n },\n cellSettings: {\n border: {\n width: 0\n }\n },\n legendSettings: {\n visible: false\n },\n tooltipRender: function (args) {\n var intl = new ej.base.Internationalization();\n var format = intl.getDateFormat({format: \"MMM dd, yyyy\" });\n var value = format(args.xValue);\n args.content = [value + \" \" + args.yLabel + \" : \" + args.value + \" flight arrivals\"];\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/heatmap/large-data.html b/src/heatmap/large-data.html index 58c938e0..179e9b81 100644 --- a/src/heatmap/large-data.html +++ b/src/heatmap/large-data.html @@ -23,8 +23,10 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/legend-stack.json b/src/heatmap/legend-stack.json index 270aa0fa..60b1b0f6 100644 --- a/src/heatmap/legend-stack.json +++ b/src/heatmap/legend-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Legend Position:
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Hourly Weather Forecast (in Celsius)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['London', 'Berlin', 'Madrid', 'Paris', 'Rome', 'Lisbon', 'Dublin']\n },\n yAxis: {\n labels: ['12AM', '2AM', '4AM', '6AM', '8AM', '10AM', '12PM',\n '2PM', '4PM', '6PM', '8PM', '10PM']\n },\n cellSettings: {\n showLabel: false,\n format: '{value} C'\n },\n dataSource: window.legentSampleData,\n paletteSettings: {\n palette: [{ value: 0, color: '#6EB5D0' },\n { value: 10, color: '#7EDCA2' },\n { value: 19, color: '#DCD57E' },\n { value: 22, color: '#DCD57E' }, \n ]\n },\n tooltipRender: function (args) {\n args.content = [args.xLabel + ' | ' + args.yLabel + ' : ' + args.value + '\\xB0 C'];\n },\n load: function (args) {\n var legendTheme = location.hash.split('/')[1];\n legendTheme = legendTheme ? legendTheme : 'Material';\n args.heatmap.theme = (legendTheme.charAt(0).toUpperCase() + legendTheme.slice(1));\n },\n legendSettings: {\n position: 'Left',\n labelFormat: '{value}\\xB0 C',\n },\n });\n heatmap.appendTo('#container');\n\n var legentListObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () { valueXChange(); }\n });\n legentListObj.appendTo('#LegendPosition');\n\n function valueXChange() {\n heatmap.legendSettings.position = legentListObj.value.toString() === 'Right' ?\n 'Right' : legentListObj.value.toString() === 'Bottom' ?\n 'Bottom' : legentListObj.value.toString() === 'Left' ?\n 'Left' : legentListObj.value.toString() === 'Top' ? 'Top' : null;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Legend Position:
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Hourly Weather Forecast (in Celsius)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['London', 'Berlin', 'Madrid', 'Paris', 'Rome', 'Lisbon', 'Dublin']\n },\n yAxis: {\n labels: ['12AM', '2AM', '4AM', '6AM', '8AM', '10AM', '12PM',\n '2PM', '4PM', '6PM', '8PM', '10PM']\n },\n cellSettings: {\n showLabel: false,\n format: '{value} C'\n },\n dataSource: window.legentSampleData,\n paletteSettings: {\n palette: [{ value: 0, color: '#6EB5D0' },\n { value: 10, color: '#7EDCA2' },\n { value: 19, color: '#DCD57E' },\n { value: 22, color: '#DCD57E' }, \n ]\n },\n tooltipRender: function (args) {\n args.content = [args.xLabel + ' | ' + args.yLabel + ' : ' + args.value + '\\xB0 C'];\n },\n load: function (args) {\n var legendTheme = location.hash.split('/')[1];\n legendTheme = legendTheme ? legendTheme : 'Material';\n args.heatmap.theme = (legendTheme.charAt(0).toUpperCase() + legendTheme.slice(1));\n },\n legendSettings: {\n position: 'Left',\n labelFormat: '{value}\\xB0 C',\n },\n });\n heatmap.appendTo('#container');\n\n var legentListObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () { valueXChange(); }\n });\n legentListObj.appendTo('#LegendPosition');\n\n function valueXChange() {\n heatmap.legendSettings.position = legentListObj.value.toString() === 'Right' ?\n 'Right' : legentListObj.value.toString() === 'Bottom' ?\n 'Bottom' : legentListObj.value.toString() === 'Left' ?\n 'Left' : legentListObj.value.toString() === 'Top' ? 'Top' : null;\n }\n"} \ No newline at end of file diff --git a/src/heatmap/legend.html b/src/heatmap/legend.html index 31da3144..587f54dc 100644 --- a/src/heatmap/legend.html +++ b/src/heatmap/legend.html @@ -53,8 +53,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/multi-level-labels-stack.json b/src/heatmap/multi-level-labels-stack.json index d0f24632..2cce72d2 100644 --- a/src/heatmap/multi-level-labels-stack.json +++ b/src/heatmap/multi-level-labels-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Heatmap Multi-Leval-Labels sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Product wise Monthly sales revenue for a e-commerce website',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis : {\n labels: ['Laptop', 'Mobile', 'Gaming', 'Cosmetics', 'Fragrance', 'Watches', 'Handbags', 'Apparel',\n 'Kitchenware', 'Furniture', 'Home Decor'],\n border: {\n width: 1,\n type: 'Rectangle',\n color: '#a19d9d'\n },\n textStyle: {\n color: 'black',\n \n },\n multiLevelLabels: [\n {\n border: { type: 'Rectangle', color: '#a19d9d' },\n textStyle: {\n color: 'black',\n fontWeight: 'Bold'\n },\n categories: [\n { start: 0, end: 2, text: 'Electronics', },\n { start: 3, end: 4, text: 'Beauty and personal care', },\n { start: 5, end: 7, text: 'Fashion', },\n { start: 8, end: 10, text: 'Household', },\n ]\n },\n ]\n },\n yAxis : {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n border: {\n width: 0\n },\n textStyle: {\n color: 'black'\n },\n isInversed: true,\n multiLevelLabels: [\n {\n border: { type: 'Brace', color: '#a19d9d' },\n textStyle: {\n color: 'black',\n fontWeight: 'Bold'\n },\n categories: [\n { start: 0, end: 2, text: 'Q1' },\n { start: 3, end: 5, text: 'Q2' },\n { start: 6, end: 8, text: 'Q3' },\n { start: 9, end: 11, text: 'Q4' }\n ]\n },\n ]\n },\n paletteSettings: {\n palette: [{ color: '#F0ADCE' },\n { color: '#19307B' }\n ],\n },\n legendSettings: {\n visible: false,\n }, \n cellRender: function (args) {\n args.displayText = '$ ' + (args.value / 10) + 'K';\n },\n\n tooltipRender: function (args) {\n args.content = [args.xLabel + ' | ' + args.yLabel + ' : $ ' + (args.value/ 10) + 'K'];\n },\n cellSettings: {\n border: {\n width: 0,\n },\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme .charAt(0).toUpperCase() + selectedTheme .slice(1));\n selectedTheme = selectedTheme.toLowerCase();\n if(selectedTheme === 'material' || selectedTheme === 'fabric' || selectedTheme === 'bootstrap')\n {\n args.heatmap.xAxis.textStyle.color = 'Black';\n args.heatmap.yAxis.textStyle.color = 'Black';\n args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'Black';\n args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'Black';\n }\n else\n {\n args.heatmap.xAxis.textStyle.color = 'White';\n args.heatmap.yAxis.textStyle.color = 'White';\n args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'White';\n args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'White';\n }\n },\n dataSource: window.multiLevelLabelData\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Heatmap Multi-Leval-Labels sample\n */\n\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Product wise Monthly sales revenue for a e-commerce website',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis : {\n labels: ['Laptop', 'Mobile', 'Gaming', 'Cosmetics', 'Fragrance', 'Watches', 'Handbags', 'Apparel',\n 'Kitchenware', 'Furniture', 'Home Decor'],\n border: {\n width: 1,\n type: 'Rectangle',\n color: '#a19d9d'\n },\n textStyle: {\n color: 'black',\n \n },\n multiLevelLabels: [\n {\n border: { type: 'Rectangle', color: '#a19d9d' },\n textStyle: {\n color: 'black',\n fontWeight: 'Bold'\n },\n categories: [\n { start: 0, end: 2, text: 'Electronics', },\n { start: 3, end: 4, text: 'Beauty and personal care', },\n { start: 5, end: 7, text: 'Fashion', },\n { start: 8, end: 10, text: 'Household', },\n ]\n },\n ]\n },\n yAxis : {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n border: {\n width: 0\n },\n textStyle: {\n color: 'black'\n },\n isInversed: true,\n multiLevelLabels: [\n {\n border: { type: 'Brace', color: '#a19d9d' },\n textStyle: {\n color: 'black',\n fontWeight: 'Bold'\n },\n categories: [\n { start: 0, end: 2, text: 'Q1' },\n { start: 3, end: 5, text: 'Q2' },\n { start: 6, end: 8, text: 'Q3' },\n { start: 9, end: 11, text: 'Q4' }\n ]\n },\n ]\n },\n paletteSettings: {\n palette: [{ color: '#F0ADCE' },\n { color: '#19307B' }\n ],\n },\n legendSettings: {\n visible: false,\n }, \n cellRender: function (args) {\n args.displayText = '$ ' + (args.value / 10) + 'K';\n },\n\n tooltipRender: function (args) {\n args.content = [args.xLabel + ' | ' + args.yLabel + ' : $ ' + (args.value/ 10) + 'K'];\n },\n cellSettings: {\n border: {\n width: 0,\n },\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = (selectedTheme .charAt(0).toUpperCase() + selectedTheme .slice(1));\n selectedTheme = selectedTheme.toLowerCase();\n if(selectedTheme === 'highcontrast')\n {\n args.heatmap.xAxis.textStyle.color = 'White';\n args.heatmap.yAxis.textStyle.color = 'White';\n args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'White';\n args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'White';\n }\n else\n {\n args.heatmap.xAxis.textStyle.color = 'Black';\n args.heatmap.yAxis.textStyle.color = 'Black';\n args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'Black';\n args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'Black';\n }\n },\n dataSource: window.multiLevelLabelData\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/multi-level-labels.html b/src/heatmap/multi-level-labels.html index 7e9e81e3..20459042 100644 --- a/src/heatmap/multi-level-labels.html +++ b/src/heatmap/multi-level-labels.html @@ -28,8 +28,10 @@ using the Heatmap.Inject(Tooltip) method.

        + + \ No newline at end of file diff --git a/src/heatmap/multi-level-labels.js b/src/heatmap/multi-level-labels.js index 8f59ae58..72f9395e 100644 --- a/src/heatmap/multi-level-labels.js +++ b/src/heatmap/multi-level-labels.js @@ -90,20 +90,20 @@ this.default = function () { selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.heatmap.theme = (selectedTheme .charAt(0).toUpperCase() + selectedTheme .slice(1)); selectedTheme = selectedTheme.toLowerCase(); - if(selectedTheme === 'material' || selectedTheme === 'fabric' || selectedTheme === 'bootstrap') - { - args.heatmap.xAxis.textStyle.color = 'Black'; - args.heatmap.yAxis.textStyle.color = 'Black'; - args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'Black'; - args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'Black'; - } - else + if(selectedTheme === 'highcontrast') { args.heatmap.xAxis.textStyle.color = 'White'; args.heatmap.yAxis.textStyle.color = 'White'; args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'White'; args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'White'; } + else + { + args.heatmap.xAxis.textStyle.color = 'Black'; + args.heatmap.yAxis.textStyle.color = 'Black'; + args.heatmap.xAxis.multiLevelLabels[0].textStyle.color = 'Black'; + args.heatmap.yAxis.multiLevelLabels[0].textStyle.color = 'Black'; + } }, dataSource: window.multiLevelLabelData }); diff --git a/src/heatmap/opposed-stack.json b/src/heatmap/opposed-stack.json index 95ef0452..f4405391 100644 --- a/src/heatmap/opposed-stack.json +++ b/src/heatmap/opposed-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Monthly Flight Traffic at JFK Airport',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2007', '2008', '2009', '2010', '2011',\n '2012', '2013', '2014', '2015', '2016', '2017'],\n opposedPosition: true,\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May',\n 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],\n opposedPosition: true\n },\n legendSettings: {\n visible: false,\n },\n cellSettings: {\n showLabel: false,\n border: {\n width: 0,\n },\n format: '{value} flights'\n },\n dataSource: window.opposedAxisData,\n load: function (args) {\n var opposedAxisTheme = location.hash.split('/')[1];\n opposedAxisTheme = opposedAxisTheme ? opposedAxisTheme : 'Material';\n args.heatmap.theme = (opposedAxisTheme.charAt(0).toUpperCase() + opposedAxisTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n var xlistObj = new ej.buttons.CheckBox({ label: 'Change X-Axis Position', checked: true, change: valueXChange });\n xlistObj.appendTo('#XOpposedPosition');\n\n function valueXChange() {\n heatmap.xAxis.opposedPosition = xlistObj.checked;\n }\n\n var ylistObj = new ej.buttons.CheckBox({ label: 'Change Y-Axis Position', checked: true, change: valueYChange });\n ylistObj.appendTo('#YOpposedPosition');\n\n function valueYChange() {\n heatmap.yAxis.opposedPosition = ylistObj.checked;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Monthly Flight Traffic at JFK Airport',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2007', '2008', '2009', '2010', '2011',\n '2012', '2013', '2014', '2015', '2016', '2017'],\n opposedPosition: true,\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May',\n 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],\n opposedPosition: true\n },\n legendSettings: {\n visible: false,\n },\n cellSettings: {\n showLabel: false,\n border: {\n width: 0,\n },\n format: '{value} flights'\n },\n dataSource: window.opposedAxisData,\n load: function (args) {\n var opposedAxisTheme = location.hash.split('/')[1];\n opposedAxisTheme = opposedAxisTheme ? opposedAxisTheme : 'Material';\n args.heatmap.theme = (opposedAxisTheme.charAt(0).toUpperCase() + opposedAxisTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n var xlistObj = new ej.buttons.CheckBox({ label: 'Change X-Axis Position', checked: true, change: valueXChange });\n xlistObj.appendTo('#XOpposedPosition');\n\n function valueXChange() {\n heatmap.xAxis.opposedPosition = xlistObj.checked;\n }\n\n var ylistObj = new ej.buttons.CheckBox({ label: 'Change Y-Axis Position', checked: true, change: valueYChange });\n ylistObj.appendTo('#YOpposedPosition');\n\n function valueYChange() {\n heatmap.yAxis.opposedPosition = ylistObj.checked;\n }\n"} \ No newline at end of file diff --git a/src/heatmap/opposed.html b/src/heatmap/opposed.html index f0d3ffae..71b7b97e 100644 --- a/src/heatmap/opposed.html +++ b/src/heatmap/opposed.html @@ -49,8 +49,10 @@ Heatmap.Inject(Tooltip) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/palette-stack.json b/src/heatmap/palette-stack.json index 25c08420..29bc3e92 100644 --- a/src/heatmap/palette-stack.json +++ b/src/heatmap/palette-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Palette Type:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        Enable Smart Legend:
        \n         		\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'U.S. Government Energy Consumption by Agency (Trillion Btu)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2005', '2006', '2007', '2008', '2009', '2010',\n '2011', '2012', '2013', '2014', '2015'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['Agriculture', 'Energy', 'Administration', 'Health', 'Interior',\n 'Justice', 'NASA', 'Transportation']\n },\n dataSource: window.palatteSampleData,\n paletteSettings: {\n palette: [{ value: 4.3, color: '#FFFFDA' },\n { value: 7, color: '#EDF8B6' },\n { value: 9, color: '#CAE8B4' },\n { value: 15, color: '#78D1BD' },\n { value: 18, color: '#36BCC6' },\n { value: 25, color: '#208FC6' },\n { value: 30, color: '#253494' },\n { value: 32, color: '#081D58' }\n ],\n type: 'Fixed'\n },\n load: function (args) {\n var paletteTheme = location.hash.split('/')[1];\n paletteTheme = paletteTheme ? paletteTheme : 'Material';\n args.heatmap.theme = (paletteTheme.charAt(0).toUpperCase() + paletteTheme.slice(1));\n },\n cellSettings: {\n border: { width: 0 },\n showLabel: false,\n },\n legendSettings: {\n position: 'Bottom',\n width: '400px',\n enableSmartLegend: true\n },\n });\n heatmap.appendTo('#container');\n\n var fixedRadioButton = new ej.buttons.RadioButton({\n label: 'Fixed', name: 'paletteType',\n change: function () { valueXChange(); }, value: 'Fixed', checked: true\n });\n fixedRadioButton.appendTo('#fixed');\n\n var gradientradioButton = new ej.buttons.RadioButton({\n label: 'Gradient', name: 'paletteType',\n change: function (){ valueXChange(); }, value: 'Gradient'\n });\n gradientradioButton.appendTo('#gradient');\n\n var smartLegend = new ej.buttons.CheckBox({\n name: 'enableSmartLegend',\n change: function (){ valueChange(); }, checked: true\n });\n smartLegend.appendTo('#smartLegend');\n\n function valueXChange() {\n smartLegend.disabled = fixedRadioButton.checked ? false : true;\n heatmap.paletteSettings.type = fixedRadioButton.checked ? 'Fixed' : 'Gradient';\n }\n function valueChange() {\n heatmap.legendSettings.enableSmartLegend = smartLegend.checked;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Palette Type:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        Enable Smart Legend:
        \n         		\n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'U.S. Government Energy Consumption by Agency (Trillion Btu)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['2005', '2006', '2007', '2008', '2009', '2010',\n '2011', '2012', '2013', '2014', '2015'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['Agriculture', 'Energy', 'Administration', 'Health', 'Interior',\n 'Justice', 'NASA', 'Transportation']\n },\n dataSource: window.palatteSampleData,\n paletteSettings: {\n palette: [{ value: 4.3, color: '#FFFFDA' },\n { value: 7, color: '#EDF8B6' },\n { value: 9, color: '#CAE8B4' },\n { value: 15, color: '#78D1BD' },\n { value: 18, color: '#36BCC6' },\n { value: 25, color: '#208FC6' },\n { value: 30, color: '#253494' },\n { value: 32, color: '#081D58' }\n ],\n type: 'Fixed'\n },\n load: function (args) {\n var paletteTheme = location.hash.split('/')[1];\n paletteTheme = paletteTheme ? paletteTheme : 'Material';\n args.heatmap.theme = (paletteTheme.charAt(0).toUpperCase() + paletteTheme.slice(1));\n },\n cellSettings: {\n border: { width: 0 },\n showLabel: false,\n },\n legendSettings: {\n position: 'Bottom',\n width: '400px',\n enableSmartLegend: true\n },\n });\n heatmap.appendTo('#container');\n\n var fixedRadioButton = new ej.buttons.RadioButton({\n label: 'Fixed', name: 'paletteType',\n change: function () { valueXChange(); }, value: 'Fixed', checked: true\n });\n fixedRadioButton.appendTo('#fixed');\n\n var gradientradioButton = new ej.buttons.RadioButton({\n label: 'Gradient', name: 'paletteType',\n change: function (){ valueXChange(); }, value: 'Gradient'\n });\n gradientradioButton.appendTo('#gradient');\n\n var smartLegend = new ej.buttons.CheckBox({\n name: 'enableSmartLegend',\n change: function (){ valueChange(); }, checked: true\n });\n smartLegend.appendTo('#smartLegend');\n\n function valueXChange() {\n smartLegend.disabled = fixedRadioButton.checked ? false : true;\n heatmap.paletteSettings.type = fixedRadioButton.checked ? 'Fixed' : 'Gradient';\n }\n function valueChange() {\n heatmap.legendSettings.enableSmartLegend = smartLegend.checked;\n }\n"} \ No newline at end of file diff --git a/src/heatmap/palette.html b/src/heatmap/palette.html index d093e79f..ec42ed58 100644 --- a/src/heatmap/palette.html +++ b/src/heatmap/palette.html @@ -65,8 +65,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/render-mode-stack.json b/src/heatmap/render-mode-stack.json index 3b98d167..d1ab11e8 100644 --- a/src/heatmap/render-mode-stack.json +++ b/src/heatmap/render-mode-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Rendering Mode:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Net Migration Rate of Northern Europe From 1965 to 2015',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Channel Isl', 'Denmark', 'Estonia', 'Finland',\n 'Iceland', 'Ireland', 'Latvia', 'Lithuania', 'Norway', 'Sweden', 'UK'],\n labelRotation: -90,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['1965-1970', '1970-1975', '1975-1980', '1980-1985', '1985-1990',\n '1990-1995', '1995-2000', '2000-2005', '2005-2010', '2010-2015']\n },\n dataSource: window.renderModeData,\n paletteSettings: {\n palette: [{ color: '#C06C84' },\n { color: '#355C7D' }\n ],\n },\n renderingMode: 'SVG',\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n format: '{value} %'\n },\n legendSettings: {\n position: 'Bottom',\n width: '200px'\n },\n load: function (args) {\n var renderModeTheme = location.hash.split('/')[1];\n renderModeTheme = renderModeTheme ? renderModeTheme : 'Material';\n args.heatmap.theme = (renderModeTheme.charAt(0).toUpperCase() + renderModeTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n var svgRadioButton = new ej.buttons.RadioButton({\n label: 'SVG', name: 'renderingmode',\n change: function () { valueXChange(); }, value: 'SVG', checked: true\n });\n svgRadioButton.appendTo('#svg');\n\n var canvasradioButton = new ej.buttons.RadioButton({\n label: 'Canvas', name: 'renderingmode',\n change: function () { valueXChange(); }, value: 'Canvas'\n });\n canvasradioButton.appendTo('#canvas');\n\n function valueXChange() {\n heatmap.renderingMode = svgRadioButton.checked ? 'SVG' : 'Canvas';\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n
        \n
        Rendering Mode:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Net Migration Rate of Northern Europe From 1965 to 2015',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Channel Isl', 'Denmark', 'Estonia', 'Finland',\n 'Iceland', 'Ireland', 'Latvia', 'Lithuania', 'Norway', 'Sweden', 'UK'],\n labelRotation: -90,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['1965-1970', '1970-1975', '1975-1980', '1980-1985', '1985-1990',\n '1990-1995', '1995-2000', '2000-2005', '2005-2010', '2010-2015']\n },\n dataSource: window.renderModeData,\n paletteSettings: {\n palette: [{ color: '#C06C84' },\n { color: '#355C7D' }\n ],\n },\n renderingMode: 'SVG',\n cellSettings: {\n border: {\n width: 0\n },\n showLabel: false,\n format: '{value} %'\n },\n legendSettings: {\n position: 'Bottom',\n width: '200px'\n },\n load: function (args) {\n var renderModeTheme = location.hash.split('/')[1];\n renderModeTheme = renderModeTheme ? renderModeTheme : 'Material';\n args.heatmap.theme = (renderModeTheme.charAt(0).toUpperCase() + renderModeTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n var svgRadioButton = new ej.buttons.RadioButton({\n label: 'SVG', name: 'renderingmode',\n change: function () { valueXChange(); }, value: 'SVG', checked: true\n });\n svgRadioButton.appendTo('#svg');\n\n var canvasradioButton = new ej.buttons.RadioButton({\n label: 'Canvas', name: 'renderingmode',\n change: function () { valueXChange(); }, value: 'Canvas'\n });\n canvasradioButton.appendTo('#canvas');\n\n function valueXChange() {\n heatmap.renderingMode = svgRadioButton.checked ? 'SVG' : 'Canvas';\n }\n"} \ No newline at end of file diff --git a/src/heatmap/render-mode.html b/src/heatmap/render-mode.html index 519e467d..9e97820c 100644 --- a/src/heatmap/render-mode.html +++ b/src/heatmap/render-mode.html @@ -51,8 +51,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/row-json-binding-stack.json b/src/heatmap/row-json-binding-stack.json index f4c9b10f..6e78033b 100644 --- a/src/heatmap/row-json-binding-stack.json +++ b/src/heatmap/row-json-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n\n\n
        ","index.js":"{{ripple}}\n var jsonTableData = [\n { 'Region': 'USA', '2000': 93, '2004': 101, '2008': 112, '2012': 103, '2016': 121 },\n { 'Region': 'GBR', '2000': 28, '2004': 30, '2008': 49, '2012': 65, '2016': 67 },\n { 'Region': 'China', '2000': 58, '2004': 63, '2008': 100, '2012': 91, '2016': 70 },\n { 'Region': 'Russia', '2000': 89, '2004': 90, '2008': 60, '2012': 69, '2016': 55 },\n { 'Region': 'Germany', '2000': 56, '2004': 49, '2008': 41, '2012': 44, '2016': 42 },\n { 'Region': 'Japan', '2000': 18, '2004': 37, '2008': 25, '2012': 38, '2016': 41 },\n { 'Region': 'France', '2000': 38, '2004': 33, '2008': 43, '2012': 35, '2016': 42 },\n { 'Region': 'KOR', '2000': 28, '2004': 30, '2008': 32, '2012': 30, '2016': 21 },\n { 'Region': 'Italy', '2000': 34, '2004': 32, '2008': 27, '2012': 28, '2016': 28 }];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Olympic Medal Achievements of most Successful Countries',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'France', 'GBR', 'Germany', 'Italy', 'Japan', 'KOR', 'Russia', 'USA'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n title : {text: 'Olympic Year'},\n labels: ['2000', '2004', '2008', '2012', '2016'],\n },\n dataSource: {\n data: jsonTableData,\n isJsonData: true,\n adaptorType: 'Table',\n xDataMapping: 'Region',\n }, paletteSettings: {\n palette: [{ color: '#F0C27B' },\n { color: '#4B1248' }\n ],\n },\n cellSettings: {\n border: {\n width: 1,\n radius: 4,\n color: 'white'\n }\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' medals'];\n },\n load: function (args) {\n var jsonRowTheme = location.hash.split('/')[1];\n jsonRowTheme = jsonRowTheme ? jsonRowTheme : 'Material';\n args.heatmap.theme = (jsonRowTheme.charAt(0).toUpperCase() + jsonRowTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n\n\n","index.js":"{{ripple}}\n var jsonTableData = [\n { 'Region': 'USA', '2000': 93, '2004': 101, '2008': 112, '2012': 103, '2016': 121 },\n { 'Region': 'GBR', '2000': 28, '2004': 30, '2008': 49, '2012': 65, '2016': 67 },\n { 'Region': 'China', '2000': 58, '2004': 63, '2008': 100, '2012': 91, '2016': 70 },\n { 'Region': 'Russia', '2000': 89, '2004': 90, '2008': 60, '2012': 69, '2016': 55 },\n { 'Region': 'Germany', '2000': 56, '2004': 49, '2008': 41, '2012': 44, '2016': 42 },\n { 'Region': 'Japan', '2000': 18, '2004': 37, '2008': 25, '2012': 38, '2016': 41 },\n { 'Region': 'France', '2000': 38, '2004': 33, '2008': 43, '2012': 35, '2016': 42 },\n { 'Region': 'KOR', '2000': 28, '2004': 30, '2008': 32, '2012': 30, '2016': 21 },\n { 'Region': 'Italy', '2000': 34, '2004': 32, '2008': 27, '2012': 28, '2016': 28 }];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Olympic Medal Achievements of most Successful Countries',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['China', 'France', 'GBR', 'Germany', 'Italy', 'Japan', 'KOR', 'Russia', 'USA'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n title : {text: 'Olympic Year'},\n labels: ['2000', '2004', '2008', '2012', '2016'],\n },\n dataSource: {\n data: jsonTableData,\n isJsonData: true,\n adaptorType: 'Table',\n xDataMapping: 'Region',\n }, paletteSettings: {\n palette: [{ color: '#F0C27B' },\n { color: '#4B1248' }\n ],\n },\n cellSettings: {\n border: {\n width: 1,\n radius: 4,\n color: 'white'\n }\n },\n tooltipRender: function (args) {\n args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' medals'];\n },\n load: function (args) {\n var jsonRowTheme = location.hash.split('/')[1];\n jsonRowTheme = jsonRowTheme ? jsonRowTheme : 'Material';\n args.heatmap.theme = (jsonRowTheme.charAt(0).toUpperCase() + jsonRowTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/row-json-binding.html b/src/heatmap/row-json-binding.html index f52d9df3..63c0913b 100644 --- a/src/heatmap/row-json-binding.html +++ b/src/heatmap/row-json-binding.html @@ -27,8 +27,10 @@ Heatmap component features are segregated into individual feature-wise modules. To use data adaptor support, we need to inject Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and use a legend by injecting the Legend module using the Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/heatmap/sample.json b/src/heatmap/sample.json index 03d78071..b1930ea7 100644 --- a/src/heatmap/sample.json +++ b/src/heatmap/sample.json @@ -16,7 +16,6 @@ "url": "calendar-heatmap", "name": "Calendar Heatmap", "category": "Heatmap Chart", - "type":"update", "description": "This demo for Essential JS2 Heatmap control for displays the time series data and displays the axis labels at specific time interval.", "api": {"HeatMap": [ "titleSettings", "xAxis", "yAxis", "dataSource", "height", "paletteSettings", "legendSettings", "tooltipRender", "cellSettings" ] } }, @@ -31,7 +30,7 @@ "url": "color-and-size-attributes", "name": "Color and Size Attributes", "category": "Bubble Heatmap", - "description": "This demo for Essential JS2 Heatmap control shows how to bind the multiple data to bubble heat map.", + "description": "This demo for Essential JS2 Heatmap control shows how to bind the multiple data to bubble type heat map.", "api": {"HeatMap": [ "titleSettings", "xAxis", "yAxis", "dataSource", "paletteSettings", "legendSettings", "tooltipRender", "cellSettings" ] } }, { @@ -73,7 +72,7 @@ "url": "inversed", "name": "Inversed Axis", "category": "Features", - "description": "This demo for Essential JS2 Heatmap control shows how to inverse the axis in heat map", + "description": "This demo for Essential JS2 Heatmap control shows how to inverse the both x-axis and y-axis in heat map", "api": {"HeatMap": [ "titleSettings", "xAxis", "yAxis", "dataSource", "cellSettings", "paletteSettings", "legendSettings"] } }, { @@ -87,8 +86,7 @@ "url": "multi-level-labels", "name": "Multi Level Labels", "category": "Features", - "type":"new", - "description": "This demo for Essential JS2 Heatmap control shows how to group the axis labels", + "description": "This demo for Essential JS2 Heatmap control shows how to group the axis labels with multiple levels.", "api": { "HeatMap": [ "titleSettings", @@ -104,8 +102,8 @@ "url": "cell-selection", "name": "Selection", "category": "Features", - "type":"new", - "description": "This demo for Essential JS2 Heatmap control shows how to select the cell.", + "type": "update", + "description": "This demo for Essential JS2 Heatmap control shows how to select and deselect the heat map cell using mouse and touch action.", "api": { "HeatMap": [ "titleSettings", @@ -121,7 +119,6 @@ "url": "legend", "name": "Legend Placement", "category": "Features", - "type": "update", "description": "This demo for Essential JS2 Heatmap control shows how to place the heatmap legend in different positions.", "api": {"HeatMap": ["titleSettings", "xAxis", "yAxis", "dataSource","paletteSettings", "cellSettings", "legendSettings","renderingMode", "tooltipRender"] } }, @@ -136,7 +133,6 @@ "url": "palette", "name": "Palette Mode", "category": "Features", - "type": "update", "description": "This demo for Essential JS2 Heatmap control demonstrates applying gradient colors or solid colors for the heatmap cells.", "api": {"HeatMap": [ "titleSettings", "xAxis", "yAxis", "dataSource", "paletteSettings", "cellSettings", "legendSettings" ] } }, @@ -151,8 +147,7 @@ "url": "tooltip-template", "name": "Tooltip Template", "category": "Features", - "type": "update", - "description": "This demo for Essential JS2 Heatmap control shows the usage of tooltip template in heat map.", + "description": "This demo for Essential JS2 Heatmap control shows how to customize the tool tip text using template support in heat map.", "api": {"HeatMap": [ "titleSettings", "xAxis", "yAxis", "dataSource", "cellSettings", "legendSettings", "paletteSettings", "tooltipRender" ] } } ] diff --git a/src/heatmap/tooltip-template-stack.json b/src/heatmap/tooltip-template-stack.json index d618bc05..6f0397eb 100644 --- a/src/heatmap/tooltip-template-stack.json +++ b/src/heatmap/tooltip-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Russia', 'UK', 'USA'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],\n },\n dataSource: window.defaultTableDataSource,\n cellSettings: {\n border: {\n width: 0\n },\n format: '{value} M'\n },\n legendSettings: {\n visible: false,\n },\n paletteSettings: {\n palette: [{ value: 0, color: '#C2E7EC' },\n { value: 0.6, color: '#AEDFE6' },\n { value: 0.75, color: '#9AD7E0' },\n { value: 1, color: '#86CFDA' },\n { value: 1.5, color: '#72C7D4' },\n { value: 2, color: '#5EBFCE' },\n { value: 2.5, color: '#4AB7C8' },\n { value: 3, color: '#36AFC2' },\n { value: 3.5, color: '#309DAE' },\n { value: 5, color: '#2B8C9B' },\n { value: 5.5, color: '#257A87' },\n { value: 6, color: '#206974' },\n { value: 8, color: '#1B5761' },\n { value: 9, color: '#15464D' },\n { value: 9.5, color: '#000000' },\n ],\n type: 'Fixed'\n },\n tooltipSettings: {\n fill: '#265259',\n textStyle: {\n color: '#FFFFFF',\n size:\"12px\"\n },\n border:{\n width:1,\n color:\"#98BABF\"\n }\n },\n tooltipRender: function (args) {\n args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];\n },\n load: function (args) {\n var templateTheme = location.hash.split('/')[1];\n templateTheme = templateTheme ? templateTheme : 'Material';\n args.heatmap.theme = (templateTheme.charAt(0).toUpperCase() + templateTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',\n textStyle: {\n size: '15px',\n fontWeight: 500,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Russia', 'UK', 'USA'],\n labelRotation: 45,\n labelIntersectAction: 'None',\n },\n yAxis: {\n labels: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],\n },\n dataSource: window.defaultTableDataSource,\n cellSettings: {\n border: {\n width: 0\n },\n format: '{value} M'\n },\n legendSettings: {\n visible: false,\n },\n paletteSettings: {\n palette: [{ value: 0, color: '#C2E7EC' },\n { value: 0.6, color: '#AEDFE6' },\n { value: 0.75, color: '#9AD7E0' },\n { value: 1, color: '#86CFDA' },\n { value: 1.5, color: '#72C7D4' },\n { value: 2, color: '#5EBFCE' },\n { value: 2.5, color: '#4AB7C8' },\n { value: 3, color: '#36AFC2' },\n { value: 3.5, color: '#309DAE' },\n { value: 5, color: '#2B8C9B' },\n { value: 5.5, color: '#257A87' },\n { value: 6, color: '#206974' },\n { value: 8, color: '#1B5761' },\n { value: 9, color: '#15464D' },\n { value: 9.5, color: '#000000' },\n ],\n type: 'Fixed'\n },\n tooltipSettings: {\n fill: '#265259',\n textStyle: {\n color: '#FFFFFF',\n size:\"12px\"\n },\n border:{\n width:1,\n color:\"#98BABF\"\n }\n },\n tooltipRender: function (args) {\n args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];\n },\n load: function (args) {\n var templateTheme = location.hash.split('/')[1];\n templateTheme = templateTheme ? templateTheme : 'Material';\n args.heatmap.theme = (templateTheme.charAt(0).toUpperCase() + templateTheme.slice(1));\n },\n });\n heatmap.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/heatmap/tooltip-template.html b/src/heatmap/tooltip-template.html index c504d26d..ba4cd80d 100644 --- a/src/heatmap/tooltip-template.html +++ b/src/heatmap/tooltip-template.html @@ -26,8 +26,10 @@ Heatmap.Inject(Legend) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/inplace-editor/default-stack.json b/src/inplace-editor/default-stack.json index 8e4e7aae..6518e45c 100644 --- a/src/inplace-editor/default-stack.json +++ b/src/inplace-editor/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        Editable On
        \n         		\n
        \n \n
        \n
        \n
        Show Buttons
        \n         		\n
        \n \n
        \n
        \n
        Disable
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var editObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Text',\n value: 'Andrew',\n submitOnEnter: true,\n model: {\n placeholder: 'Enter employee name'\n },\n popupSettings: {\n title: 'Enter Employee Name'\n }\n });\n editObj.appendTo('#inplace_editor');\n var numericObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Numeric',\n value: '$100.00',\n model: {\n format: 'c2',\n value: 100,\n placeholder: 'Currency format'\n }\n });\n numericObj.appendTo('#numericTextBoxEle');\n var maskedObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Mask',\n value: '012-345-6789',\n model: {\n mask: '000-000-0000'\n }\n });\n maskedObj.appendTo('#maskedTextBoxEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_default');\n var editableOn = new ej.dropdowns.DropDownList({\n width: '90%',\n change: onEditableOn\n });\n editableOn.appendTo('#editableon');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n editObj.mode = mode;\n editObj.dataBind();\n numericObj.mode = mode;\n numericObj.dataBind();\n maskedObj.mode = mode;\n maskedObj.dataBind();\n }\n var checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onChange, labelPosition: 'Before' });\n checkBoxObj.appendTo('#showbuttons');\n function onChange(args) {\n editObj.showButtons = args.checked;\n numericObj.showButtons = args.checked;\n maskedObj.showButtons = args.checked;\n }\n var enableCheckObj = new ej.buttons.CheckBox({ checked: true, change: onChangeEnable, labelPosition: 'Before' });\n enableCheckObj.appendTo('#editorEnable');\n function onChangeEnable(args) {\n editObj.disabled = !args.checked;\n numericObj.disabled = !args.checked;\n maskedObj.disabled = !args.checked;\n }\n function onEditableOn(e) {\n if (e.itemData.value === 'Click') {\n editObj.editableOn = 'Click';\n numericObj.editableOn = 'Click';\n maskedObj.editableOn = 'Click';\n }\n else if (e.itemData.value === 'DblClick') {\n editObj.editableOn = 'DblClick';\n numericObj.editableOn = 'DblClick';\n maskedObj.editableOn = 'DblClick';\n }\n else {\n editObj.editableOn = 'EditIconClick';\n numericObj.editableOn = 'EditIconClick';\n maskedObj.editableOn = 'EditIconClick';\n }\n editObj.dataBind();\n }\n document.getElementById('right-pane').onscroll = function () {\n if (editorMode.value === 'Inline') { return; }\n if (editObj && (editObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n editObj.enableEditMode = false;\n }\n if (maskedObj && (maskedObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n maskedObj.enableEditMode = false;\n }\n if (numericObj && (numericObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n numericObj.enableEditMode = false;\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        Editable On
        \n         		\n
        \n \n
        \n
        \n
        Show Buttons
        \n         		\n
        \n \n
        \n
        \n
        Disable
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n\n","index.js":"{{ripple}}\n var editObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Text',\n value: 'Andrew',\n submitOnEnter: true,\n model: {\n placeholder: 'Enter employee name'\n },\n popupSettings: {\n title: 'Enter Employee Name'\n }\n });\n editObj.appendTo('#inplace_editor');\n var numericObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Numeric',\n value: '$100.00',\n model: {\n format: 'c2',\n value: 100,\n placeholder: 'Currency format'\n }\n });\n numericObj.appendTo('#numericTextBoxEle');\n var maskedObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Mask',\n value: '012-345-6789',\n model: {\n mask: '000-000-0000'\n }\n });\n maskedObj.appendTo('#maskedTextBoxEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_default');\n var editableOn = new ej.dropdowns.DropDownList({\n width: '90%',\n change: onEditableOn\n });\n editableOn.appendTo('#editableon');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n editObj.mode = mode;\n editObj.dataBind();\n numericObj.mode = mode;\n numericObj.dataBind();\n maskedObj.mode = mode;\n maskedObj.dataBind();\n }\n var checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onChange, labelPosition: 'Before' });\n checkBoxObj.appendTo('#showbuttons');\n function onChange(args) {\n editObj.showButtons = args.checked;\n numericObj.showButtons = args.checked;\n maskedObj.showButtons = args.checked;\n }\n var enableCheckObj = new ej.buttons.CheckBox({ checked: false, change: onChangeEnable, labelPosition: 'Before' });\n enableCheckObj.appendTo('#editorEnable');\n function onChangeEnable(args) {\n editObj.disabled = args.checked;\n numericObj.disabled = args.checked;\n maskedObj.disabled = args.checked;\n }\n function onEditableOn(e) {\n if (e.itemData.value === 'Click') {\n editObj.editableOn = 'Click';\n numericObj.editableOn = 'Click';\n maskedObj.editableOn = 'Click';\n }\n else if (e.itemData.value === 'DblClick') {\n editObj.editableOn = 'DblClick';\n numericObj.editableOn = 'DblClick';\n maskedObj.editableOn = 'DblClick';\n }\n else {\n editObj.editableOn = 'EditIconClick';\n numericObj.editableOn = 'EditIconClick';\n maskedObj.editableOn = 'EditIconClick';\n }\n editObj.dataBind();\n }\n var defaultpane = document.getElementById('right-pane');\n if(defaultpane) {\n defaultpane.onscroll = function () {\n if (editorMode.value === 'Inline') { return; }\n if (editObj && (editObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n editObj.enableEditMode = false;\n }\n if (maskedObj && (maskedObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n maskedObj.enableEditMode = false;\n }\n if (numericObj && (numericObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n numericObj.enableEditMode = false;\n }\n };\n}\n\n"} \ No newline at end of file diff --git a/src/inplace-editor/default.html b/src/inplace-editor/default.html index a73f0a16..abb811c2 100644 --- a/src/inplace-editor/default.html +++ b/src/inplace-editor/default.html @@ -29,7 +29,6 @@
        -
        @@ -40,8 +39,8 @@ @@ -100,11 +99,11 @@

        @@ -128,7 +127,7 @@ You can cancel the edit request by pressing the Esc key.

        - More information on the In-place Editor instantiation can be found in the  + More information on the In-place Editor instantiation can be found in the  documentation section.

        @@ -140,16 +139,6 @@ visibility: hidden; } - .inplace-control-section .control_wrapper { - width: 100%; - } - - .inplace-control-section .control-wrapper { - width: 100%; - max-width: 400px; - margin: auto; - } - .inplace-control-section .control_wrapper .control-center { text-align: center; } @@ -158,11 +147,6 @@ height: auto; } - .inplace-control-section .control_wrapper table td { - width: 200px; - height: 100px; - } - .inplace-control-section.input-layout .control_wrapper table td .control-label { margin-bottom: 0px; } @@ -176,11 +160,31 @@ width: 100%; } } + + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/inplace-editor/dropdowns-stack.json b/src/inplace-editor/dropdowns-stack.json index 83849fd9..1823e410 100644 --- a/src/inplace-editor/dropdowns-stack.json +++ b/src/inplace-editor/dropdowns-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n \n \n\n
        ","index.js":"{{ripple}}\n var autocompleteData = ['Australia', 'Bermuda', 'Canada', 'Cameroon', 'Denmark', 'Finland', 'Greenland', 'Poland'];\n var editObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'AutoComplete',\n value: 'Australia',\n model: {\n dataSource: autocompleteData,\n placeholder: ' Type to search countries'\n },\n });\n editObj.appendTo('#autoCompleteEle');\n var multiObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'MultiSelect',\n popupSettings: {\n model: { width: 'auto' }\n },\n value: ['Canada', 'Bermuda'],\n model: {\n dataSource: autocompleteData,\n placeholder: 'Choose the countries',\n mode: 'Box'\n }\n });\n multiObj.appendTo('#multiSelectEle');\n var comboObbj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'ComboBox',\n value: 'Finland',\n model: {\n dataSource: autocompleteData,\n placeholder: 'Find a countries'\n }\n });\n comboObbj.appendTo('#comboBoxEle');\n var dropObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DropDownList',\n value: 'Canada',\n model: {\n dataSource: autocompleteData,\n placeholder: 'Find a countries'\n }\n });\n dropObj.appendTo('#dropdownEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_dropdowns');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n editObj.mode = mode;\n editObj.dataBind();\n multiObj.mode = mode;\n multiObj.dataBind();\n comboObbj.mode = mode;\n comboObbj.dataBind();\n dropObj.mode = mode;\n dropObj.dataBind();\n }\n document.getElementById('right-pane').onscroll = function() {\n if (editorMode.value === 'Inline') { return; }\n if (editObj && (editObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n editObj.enableEditMode = false;\n }\n if (multiObj && (multiObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n multiObj.enableEditMode = false;\n }\n if (comboObbj && (comboObbj.element.querySelectorAll('.e-editable-open').length > 0)) {\n comboObbj.enableEditMode = false;\n }\n if (dropObj && (dropObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dropObj.enableEditMode = false;\n }\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n \n \n\n \n\n","index.js":"{{ripple}}\n var autocompleteData = ['Australia', 'Bermuda', 'Canada', 'Cameroon', 'Denmark', 'Finland', 'Greenland', 'Poland'];\n var editObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'AutoComplete',\n value: 'Australia',\n model: {\n dataSource: autocompleteData,\n placeholder: ' Type to search countries'\n },\n });\n editObj.appendTo('#autoCompleteEle');\n var multiObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'MultiSelect',\n popupSettings: {\n model: { width: 'auto' }\n },\n value: ['Canada', 'Bermuda'],\n model: {\n dataSource: autocompleteData,\n placeholder: 'Choose the countries',\n mode: 'Box'\n }\n });\n multiObj.appendTo('#multiSelectEle');\n var comboObbj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'ComboBox',\n value: 'Finland',\n model: {\n dataSource: autocompleteData,\n placeholder: 'Find a countries'\n }\n });\n comboObbj.appendTo('#comboBoxEle');\n var dropObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DropDownList',\n value: 'Canada',\n model: {\n dataSource: autocompleteData,\n placeholder: 'Find a countries'\n }\n });\n dropObj.appendTo('#dropdownEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_dropdowns');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n editObj.mode = mode;\n editObj.dataBind();\n multiObj.mode = mode;\n multiObj.dataBind();\n comboObbj.mode = mode;\n comboObbj.dataBind();\n dropObj.mode = mode;\n dropObj.dataBind();\n }\n var dropdownpane = document.getElementById('right-pane');\n if(dropdownpane) {\n dropdownpane.onscroll = function() {\n if (editorMode.value === 'Inline') { return; }\n if (editObj && (editObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n editObj.enableEditMode = false;\n }\n if (multiObj && (multiObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n multiObj.enableEditMode = false;\n }\n if (comboObbj && (comboObbj.element.querySelectorAll('.e-editable-open').length > 0)) {\n comboObbj.enableEditMode = false;\n }\n if (dropObj && (dropObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dropObj.enableEditMode = false;\n }\n };\n}\n"} \ No newline at end of file diff --git a/src/inplace-editor/dropdowns.html b/src/inplace-editor/dropdowns.html index dc2bac6b..e79f12c7 100644 --- a/src/inplace-editor/dropdowns.html +++ b/src/inplace-editor/dropdowns.html @@ -85,12 +85,12 @@

        - The above components and their features are editable in place and can be customized with the model + The above controls and their features are editable in place and can be customized with the model properties of the specific component.

        More information on the In-place Editor instantiation can be found in the  + href="https://ej2.syncfusion.com/javascript/documentation/inplace-editor/es5-getting-started/"> documentation section.

        @@ -103,6 +103,10 @@ visibility: hidden; } + + + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/inplace-editor/dropdowns.js b/src/inplace-editor/dropdowns.js index 73224e2e..873f26c8 100644 --- a/src/inplace-editor/dropdowns.js +++ b/src/inplace-editor/dropdowns.js @@ -18,7 +18,6 @@ this.default = function () { }, value: ['Canada', 'Bermuda'], model: { - width: 150, dataSource: autocompleteData, placeholder: 'Choose the countries', mode: 'Box' diff --git a/src/inplace-editor/edit-post-stack.json b/src/inplace-editor/edit-post-stack.json index c7f69986..bfe81aab 100644 --- a/src/inplace-editor/edit-post-stack.json +++ b/src/inplace-editor/edit-post-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var multiData = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];\n var titleObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n emptyText: 'Enter your question title',\n name: 'Title',\n value: 'Succinctly E-Book about TypeScript',\n validationRules: {\n Title: { required: [true, 'Enter valid title'] },\n },\n model: {\n placeholder: 'Enter your question title'\n }\n });\n titleObj.appendTo('#inplace_title_editor');\n var tagObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n value: ['TypeScript', 'JavaScript'],\n type: 'MultiSelect', emptyText: 'Enter your tags',\n actionSuccess: function (e) {\n e.value = chipCreation(e.value.split(','));\n }, name: 'Tag',\n popupSettings: { model: { width: 'auto' } },\n validationRules: {\n Tag: { required: [true, 'Enter valid tags'] },\n },\n model: {\n mode: 'Box',\n dataSource: multiData,\n placeholder: 'Enter your tags'\n }\n });\n tagObj.appendTo('#inplace_tag_editor');\n var rteObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n editableOn: 'EditIconClick',\n submitOnEnter: false, type: 'RTE',\n popupSettings: {\n model: {\n width: (document.querySelector('#inplace-editor-control.form-layout ')).offsetWidth\n }\n },\n value: 'The extensive adoption of JavaScript for application development, and the ability to use HTML and JavaScript to create Windows Store apps, has made JavaScript a vital part of the Windows development ecosystem. Microsoft has done extensive work to make JavaScript easier to use.',\n name: 'rte',\n validationRules: {\n rte: { required: [true, 'Enter valid comments'] }\n },\n emptyText: 'Enter your comment',\n model: {\n toolbarSettings: {\n enableFloating: false,\n items: ['Bold', 'Italic', 'Underline', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|', 'OrderedList', 'UnorderedList']\n }\n }\n });\n rteObj.appendTo('#inplace_comment_editor');\n\n chipOnCreate();\n function chipOnCreate() {\n tagObj.element.querySelector('.e-editable-value').innerHTML = chipCreation(tagObj.value);\n }\n function chipCreation(data) {\n var value = '
        ';\n [].slice.call(data).forEach(function (val) {\n value += '
        ' + val + '
        ';\n });\n value += '
        ';\n return value;\n }\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_form');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n titleObj.mode = mode;\n titleObj.dataBind();\n tagObj.mode = mode;\n tagObj.dataBind();\n rteObj.mode = mode;\n rteObj.dataBind();\n }\n document.getElementById('right-pane').onscroll = function () {\n if (editorMode.value === 'Inline') { return; }\n if (titleObj && (titleObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n titleObj.enableEditMode = false;\n }\n if (tagObj && (tagObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n tagObj.enableEditMode = false;\n }\n if (rteObj && (rteObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n rteObj.enableEditMode = false;\n }\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}\n var multiData = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];\n var titleObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n emptyText: 'Enter your question title',\n name: 'Title',\n value: 'Succinctly E-Book about TypeScript',\n validationRules: {\n Title: { required: [true, 'Enter valid title'] },\n },\n model: {\n placeholder: 'Enter your question title'\n }\n });\n titleObj.appendTo('#inplace_title_editor');\n var tagObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n value: ['TypeScript', 'JavaScript'],\n type: 'MultiSelect', emptyText: 'Enter your tags',\n actionSuccess: function (e) {\n e.value = chipCreation(e.value.split(','));\n }, name: 'Tag',\n validationRules: {\n Tag: { required: [true, 'Enter valid tags'] },\n },\n model: {\n dataSource: multiData,\n placeholder: 'Enter your tags'\n }\n });\n tagObj.appendTo('#inplace_tag_editor');\n var rteObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n editableOn: 'EditIconClick',\n submitOnEnter: false, type: 'RTE',\n popupSettings : {\n model: {\n width: (document.querySelector('#inplace-editor-control.form-layout ')).offsetWidth\n }\n },\n value: 'The extensive adoption of JavaScript for application development, and the ability to use HTML and JavaScript to create Windows Store apps, has made JavaScript a vital part of the Windows development ecosystem. Microsoft has done extensive work to make JavaScript easier to use.',\n name: 'rte',\n validationRules: {\n rte: { required: [true, 'Enter valid comments'] }\n },\n emptyText: 'Enter your comment',\n model: {\n toolbarSettings: {\n enableFloating: false,\n items: ['Bold', 'Italic', 'Underline', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|', 'OrderedList', 'UnorderedList']\n }\n }\n });\n rteObj.appendTo('#inplace_comment_editor');\n\n chipOnCreate();\n function chipOnCreate() {\n tagObj.element.querySelector('.e-editable-value').innerHTML = chipCreation(tagObj.value);\n }\n function chipCreation(data) {\n var value = '
        ';\n [].slice.call(data).forEach(function (val) {\n value += '
        ' + val + '
        ';\n });\n value += '
        ';\n return value;\n }\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_form');\n function changeEditorMode(e) {\n if (e.itemData.value === 'popup') {\n titleObj.mode = 'Popup';\n tagObj.mode = 'Popup';\n rteObj.mode = 'Popup';\n }\n else {\n titleObj.mode = 'Inline';\n tagObj.mode = 'Inline';\n rteObj.mode = 'Inline';\n }\n titleObj.dataBind();\n tagObj.dataBind();\n rteObj.dataBind();\n }\n document.getElementById('right-pane').onscroll = function () {\n if(titleObj.mode === 'Popup' || tagObj.mode === 'Popup' || rteObj.mode === 'Popup') { \n titleObj.enableEditMode = false; \n tagObj.enableEditMode = false; \n rteObj.enableEditMode = false;\n }\n };\n"} \ No newline at end of file diff --git a/src/inplace-editor/edit-post.html b/src/inplace-editor/edit-post.html index dd5f57f0..4029a6be 100644 --- a/src/inplace-editor/edit-post.html +++ b/src/inplace-editor/edit-post.html @@ -31,8 +31,8 @@
        @@ -62,7 +62,7 @@

        - More information on the In-place Editor instantiation can be found in the + More information on the In-place Editor instantiation can be found in the documentation section.

        @@ -74,11 +74,6 @@ visibility: hidden; } - .inplace-editor-control-section #confirmation { - max-width: 500px; - margin: auto; - } - .inplace-editor-control-section #formId { padding-top: 20px; margin-bottom: 45px; @@ -125,4 +120,13 @@ margin-bottom: 0; } } - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/inplace-editor/edit-post.js b/src/inplace-editor/edit-post.js index 5d7d4d7c..f97f815f 100644 --- a/src/inplace-editor/edit-post.js +++ b/src/inplace-editor/edit-post.js @@ -20,7 +20,6 @@ this.default = function () { actionSuccess: function (e) { e.value = chipCreation(e.value.split(',')); }, name: 'Tag', - popupSettings: { model: { width: 'auto' } }, validationRules: { Tag: { required: [true, 'Enter valid tags'] }, }, @@ -34,11 +33,11 @@ this.default = function () { mode: 'Inline', editableOn: 'EditIconClick', submitOnEnter: false, type: 'RTE', - popupSettings: { + popupSettings : { model: { width: (document.querySelector('#inplace-editor-control.form-layout ')).offsetWidth } - }, + }, value: 'The extensive adoption of JavaScript for application development, and the ability to use HTML and JavaScript to create Windows Store apps, has made JavaScript a vital part of the Windows development ecosystem. Microsoft has done extensive work to make JavaScript easier to use.', name: 'rte', validationRules: { @@ -73,27 +72,25 @@ this.default = function () { }); editorMode.appendTo('#editorMode_form'); function changeEditorMode(e) { - var mode = e.itemData.value; - titleObj.mode = mode; + if (e.itemData.value === 'popup') { + titleObj.mode = 'Popup'; + tagObj.mode = 'Popup'; + rteObj.mode = 'Popup'; + } + else { + titleObj.mode = 'Inline'; + tagObj.mode = 'Inline'; + rteObj.mode = 'Inline'; + } titleObj.dataBind(); - tagObj.mode = mode; tagObj.dataBind(); - rteObj.mode = mode; rteObj.dataBind(); } - var editpane = document.getElementById('right-pane'); - if (editpane) { - editpane.onscroll = function () { - if (editorMode.value === 'Inline') { return; } - if (titleObj && (titleObj.element.querySelectorAll('.e-editable-open').length > 0)) { - titleObj.enableEditMode = false; - } - if (tagObj && (tagObj.element.querySelectorAll('.e-editable-open').length > 0)) { - tagObj.enableEditMode = false; - } - if (rteObj && (rteObj.element.querySelectorAll('.e-editable-open').length > 0)) { - rteObj.enableEditMode = false; - } - }; - } + document.getElementById('right-pane').onscroll = function () { + if(titleObj.mode === 'Popup' || tagObj.mode === 'Popup' || rteObj.mode === 'Popup') { + titleObj.enableEditMode = false; + tagObj.enableEditMode = false; + rteObj.enableEditMode = false; + } + }; }; \ No newline at end of file diff --git a/src/inplace-editor/pickers-stack.json b/src/inplace-editor/pickers-stack.json index c15c59b1..25a04045 100644 --- a/src/inplace-editor/pickers-stack.json +++ b/src/inplace-editor/pickers-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n \n \n\n
        ","index.js":"{{ripple}}\n var dateObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Date',\n value: new Date('5/23/2017'),\n model: {\n placeholder: 'Select a date',\n }\n });\n dateObj.appendTo('#datePickerEle');\n var timeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Time',\n value: new Date('5/23/2017 12:00 PM'),\n model: {\n placeholder: 'Select a time',\n }\n });\n timeObj.appendTo('#timePickerEle');\n var dateTimeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DateTime',\n value: new Date('5/23/2017 12:00 PM'),\n model: {\n placeholder: 'Select a date and time'\n }\n });\n dateTimeObj.appendTo('#dateTimePickerEle');\n var dateRangeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DateRange',\n value: [new Date('5/23/2017'),new Date('7/5/2017')],\n model: {\n placeholder: 'Select a date range',\n }\n });\n dateRangeObj.appendTo('#dateRangePickerEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_pickers');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n dateObj.mode = mode;\n dateObj.dataBind();\n timeObj.mode = mode;\n timeObj.dataBind();\n dateTimeObj.mode = mode;\n dateTimeObj.dataBind();\n dateRangeObj.mode = mode;\n dateRangeObj.dataBind();\n }\n document.getElementById('right-pane').onscroll = function() {\n if (editorMode.value === 'Inline') { return; }\n if (dateObj && (dateObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateObj.enableEditMode = false;\n }\n if (timeObj && (timeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n timeObj.enableEditMode = false;\n }\n if (dateObj && (dateTimeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateTimeObj.enableEditMode = false;\n }\n if (dateObj && (dateRangeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateRangeObj.enableEditMode = false;\n }\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n
        \n
        Mode
        \n         		\n
        \n \n
        \n
        \n
        \n \n \n\n \n\n","index.js":"{{ripple}}\n var dateObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Date',\n value: new Date('5/23/2017'),\n model: {\n placeholder: 'Select a date',\n }\n });\n dateObj.appendTo('#datePickerEle');\n var timeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'Time',\n value: new Date('5/23/2017 12:00 PM'),\n model: {\n placeholder: 'Select a time',\n }\n });\n timeObj.appendTo('#timePickerEle');\n var dateTimeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DateTime',\n value: new Date('5/23/2017 12:00 PM'),\n model: {\n placeholder: 'Select a date and time'\n }\n });\n dateTimeObj.appendTo('#dateTimePickerEle');\n var dateRangeObj = new ej.inplaceeditor.InPlaceEditor({\n mode: 'Inline',\n type: 'DateRange',\n value: [new Date('5/23/2017'),new Date('7/5/2017')],\n model: {\n placeholder: 'Select a date range',\n }\n });\n dateRangeObj.appendTo('#dateRangePickerEle');\n var editorMode = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeEditorMode\n });\n editorMode.appendTo('#editorMode_pickers');\n function changeEditorMode(e) {\n var mode = e.itemData.value;\n dateObj.mode = mode;\n dateObj.dataBind();\n timeObj.mode = mode;\n timeObj.dataBind();\n dateTimeObj.mode = mode;\n dateTimeObj.dataBind();\n dateRangeObj.mode = mode;\n dateRangeObj.dataBind();\n }\n var pickerspane = document.getElementById('right-pane');\n if(pickerspane) {\n pickerspane.onscroll = function() {\n if (editorMode.value === 'Inline') { return; }\n if (dateObj && (dateObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateObj.enableEditMode = false;\n }\n if (timeObj && (timeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n timeObj.enableEditMode = false;\n }\n if (dateObj && (dateTimeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateTimeObj.enableEditMode = false;\n }\n if (dateObj && (dateRangeObj.element.querySelectorAll('.e-editable-open').length > 0)) {\n dateRangeObj.enableEditMode = false;\n }\n };\n}\n"} \ No newline at end of file diff --git a/src/inplace-editor/pickers.html b/src/inplace-editor/pickers.html index cebb271a..f26fbe2b 100644 --- a/src/inplace-editor/pickers.html +++ b/src/inplace-editor/pickers.html @@ -86,13 +86,13 @@

        - The above components and their features are editable in place and can be customized with the model + The above controls and their features are editable in place and can be customized with the model properties of the specific component.

        More information on the In-place Editor instantiation can be found in the  + href="https://ej2.syncfusion.com/javascript/documentation/inplace-editor/es5-getting-started/"> documentation section.

        @@ -105,6 +105,10 @@ visibility: hidden; } + + + + \ No newline at end of file + + @media (max-width: 768px) { + .inplace-control-section.pickers-layout { + padding-left: 0; + padding-right: 0; + } + + .inplace-control-section .control_wrapper table tr td:nth-child(1) { + width: 130px; + } + + .inplace-control-section .control_wrapper table tr td:nth-child(2) { + width: 200px; + } + } + + \ No newline at end of file diff --git a/src/inplace-editor/sample.json b/src/inplace-editor/sample.json index 6bba6c48..cfbd3462 100644 --- a/src/inplace-editor/sample.json +++ b/src/inplace-editor/sample.json @@ -1,32 +1,35 @@ { "name": "In-place Editor", "directory": "inplace-editor", - "category": "Forms", + "category": "Editors", "ftName" :"inplace-editor", - "type": "preview", "samples": [ { "url": "default", "name": "Overview", "category": "In-place Editor", + "description":"This sample demonstrates the default behavior of the In-place Editor control, which works by editing the values in inline and popup in JavaScript platform.", "api": { "InPlaceEditor": ["mode", "type", "value", "showButtons", "disabled"] } }, { "url": "dropdowns", "name": "DropDown Controls", "category": "In-place Editor", + "description":"This sample demonstrates the usage of dropdown controls such as Autocomplete, ComboBox, DropDownList, and MultiSelect in JavaScript platform.", "api": { "InPlaceEditor": ["mode", "type", "value", "enableEditMode", "model"] } }, { "url": "pickers", "name": "Date Controls", "category": "In-place Editor", + "description":"This sample demonstrates the usage of picker controls such as Date, Time, DateTime, and DateRange in JavaScript platform.", "api": { "InPlaceEditor": ["mode", "type", "value", "enableEditMode", "model"] } }, { "url": "edit-post", "name": "Edit Post", "category": "Use Case", + "description":"This sample demonstrates the usage of In-place Editor control with a form element in JavaScript platform. Edit the values in place to update to the post.", "api": { "InPlaceEditor": ["mode", "type", "value"] } } ] diff --git a/src/linear-gauge/annotation-stack.json b/src/linear-gauge/annotation-stack.json index 7997fa0d..e1edd7a1 100644 --- a/src/linear-gauge/annotation-stack.json +++ b/src/linear-gauge/annotation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n\n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Linear Gauge Annotation Sample\n */\nvar gauge;\n\n var count = 0;\n gauge = new ej.lineargauge.LinearGauge({\n rangePalettes: ['#30b32d', '#ffdd00', '#f03e3e'],\n orientation: 'Horizontal',\n axes: [{\n maximum: 90,\n labelStyle: {\n font: {\n size: '0px'\n }\n },\n line: {\n width: 0\n },\n pointers: [\n {\n value: 35,\n height: 15,\n width: 15,\n color: '#757575',\n placement: 'Near',\n markerType: 'Triangle',\n offset: -50\n }\n ],\n majorTicks: {\n interval: 10,\n height: 0\n },\n minorTicks: {\n height: 0\n },\n ranges: [{\n start: 0,\n end: 30,\n startWidth: 50,\n endWidth: 50\n },\n {\n start: 30,\n end: 60,\n startWidth: 50,\n endWidth: 50\n },\n {\n start: 60,\n end: 90,\n startWidth: 50,\n endWidth: 50\n }]\n }],\n load: gaugeLoad\n });\n gauge.appendTo('#annotationContainer');\n\nfunction gaugeLoad(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n if (this.count === undefined) {\n gauge.annotations = [\n {\n content: '

        CPU Utilization

        ',\n horizontalAlignment: 'Center',\n x: 35,\n y: 50, zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 15,\n y: -25,\n zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 45,\n y: -25,\n zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 75,\n y: -25,\n zIndex: '1'\n },\n {\n content: '

        Low

        ',\n axisIndex: 0,\n axisValue: 15,\n y: 20, zIndex: '1'\n },\n {\n content: '

        Moderate

        ',\n axisIndex: 0,\n axisValue: 45,\n y: 20, zIndex: '1'\n },\n {\n content: '

        High

        ',\n axisIndex: 0,\n axisValue: 75,\n y: 20, zIndex: '1'\n }\n ];\n this.count = 0;\n gauge.refresh();\n }\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n\n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Linear Gauge Annotation Sample\n */\nvar gauge;\n\n var count = 0;\n gauge = new ej.lineargauge.LinearGauge({\n rangePalettes: ['#30b32d', '#ffdd00', '#f03e3e'],\n orientation: 'Horizontal',\n axes: [{\n maximum: 90,\n labelStyle: {\n font: {\n size: '0px'\n }\n },\n line: {\n width: 0\n },\n pointers: [\n {\n value: 35,\n height: 15,\n width: 15,\n color: '#757575',\n placement: 'Near',\n markerType: 'Triangle',\n offset: -50\n }\n ],\n majorTicks: {\n interval: 10,\n height: 0\n },\n minorTicks: {\n height: 0\n },\n ranges: [{\n start: 0,\n end: 30,\n startWidth: 50,\n endWidth: 50\n },\n {\n start: 30,\n end: 60,\n startWidth: 50,\n endWidth: 50\n },\n {\n start: 60,\n end: 90,\n startWidth: 50,\n endWidth: 50\n }]\n }],\n load: gaugeLoad\n });\n gauge.appendTo('#annotationContainer');\n\nfunction gaugeLoad(args) {\n\n if (this.count === undefined) {\n gauge.annotations = [\n {\n content: '

        CPU Utilization

        ',\n horizontalAlignment: 'Center',\n x: 35,\n y: 50, zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 15,\n y: -25,\n zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 45,\n y: -25,\n zIndex: '1'\n },\n {\n content: '
        ',\n axisIndex: 0,\n axisValue: 75,\n y: -25,\n zIndex: '1'\n },\n {\n content: '

        Low

        ',\n axisIndex: 0,\n axisValue: 15,\n y: 20, zIndex: '1'\n },\n {\n content: '

        Moderate

        ',\n axisIndex: 0,\n axisValue: 45,\n y: 20, zIndex: '1'\n },\n {\n content: '

        High

        ',\n axisIndex: 0,\n axisValue: 75,\n y: 20, zIndex: '1'\n }\n ];\n this.count = 0;\n gauge.refresh();\n }\n}"} \ No newline at end of file diff --git a/src/linear-gauge/annotation.html b/src/linear-gauge/annotation.html index f7bbd63e..af7f9c82 100644 --- a/src/linear-gauge/annotation.html +++ b/src/linear-gauge/annotation.html @@ -20,6 +20,7 @@ More information about annotations can be found in this documentation section.
        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/annotation.js b/src/linear-gauge/annotation.js index 37d47191..e8e6821b 100644 --- a/src/linear-gauge/annotation.js +++ b/src/linear-gauge/annotation.js @@ -59,9 +59,11 @@ this.default = function () { gauge.appendTo('#annotationContainer'); }; function gaugeLoad(args) { + // custom code start var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + // custom code end if (this.count === undefined) { gauge.annotations = [ { diff --git a/src/linear-gauge/axes-stack.json b/src/linear-gauge/axes-stack.json index 0585c7c1..aa376ae6 100644 --- a/src/linear-gauge/axes-stack.json +++ b/src/linear-gauge/axes-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Axis Minimum\n    0\n
        \n         		\n
        \n \n
        \n
        \n
        Axis Maximum\n    100\n
        \n         		\n
        \n \n
        \n
        \n
        Axis Inversed
        \n         		\n
        \n \n
        \n
        \n
        Axis Opposed
        \n         		\n
        \n \n
        \n
        \n
        Label Format
        \n         		\n
        \n \n
        \n
        \n
        Pointer type
        \n         		\n
        \n \n
        \n
        \n
        Marker Placement
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Axes Sample\n */\n\n var gauge = new ej.lineargauge.LinearGauge(linearAxes());\n gauge.appendTo('#axisContainer');\n document.getElementById('opposed').onchange = function (sender) {\n var ele = document.getElementById('opposed');\n gauge.axes[0].opposedPosition = ele.checked;\n if (ele.checked) {\n gauge.axes[0].pointers[0].placement = 'Near';\n gauge.axes[0].pointers[0].markerType = 'Triangle';\n gauge.axes[0].pointers[0].offset = -20;\n gauge.axes[0].labelStyle.offset = 0;\n gauge.annotations[0].x = 10;\n gauge.annotations[0].y = -60;\n }\n else {\n gauge.axes[0].pointers[0].placement = 'Far';\n gauge.axes[0].pointers[0].offset = 0;\n gauge.axes[0].pointers[0].offset = 30;\n gauge.axes[0].pointers[0].markerType = 'InvertedTriangle';\n gauge.axes[0].labelStyle.offset = 38;\n gauge.annotations[0].x = 10;\n gauge.annotations[0].y = 60;\n }\n gauge.refresh();\n };\n document.getElementById('axisInversed').onchange = function (sender) {\n var ele = document.getElementById('axisInversed');\n gauge.axes[0].isInversed = ele.checked;\n gauge.refresh();\n };\n document.getElementById('min').ontouchmove = document.getElementById('min').onpointermove =\n document.getElementById('min').onchange = function () {\n var min = document.getElementById('min');\n var max = document.getElementById('max');\n gauge.axes[0].minimum = parseInt(min.value, 10);\n gauge.axes[0].maximum = parseInt(max.value, 10);\n document.getElementById('minValue').innerHTML = 'Axis Minimum    ' + min.value;\n gauge.refresh();\n gauge.annotations[0].axisValue = gauge.axes[0].pointers[0].currentValue;\n gauge.refresh();\n };\n document.getElementById('max').ontouchmove = document.getElementById('max').onpointermove =\n document.getElementById('max').onchange = function () {\n var min = document.getElementById('min');\n var max = document.getElementById('max');\n gauge.axes[0].maximum = parseInt(max.value, 10);\n gauge.axes[0].minimum = parseInt(min.value, 10);\n document.getElementById('maxValue').innerHTML = 'Axis Maximum    ' + max.value;\n gauge.refresh();\n gauge.annotations[0].axisValue = gauge.axes[0].pointers[0].currentValue;\n gauge.refresh();\n };\n document.getElementById('format').onchange = function () {\n var ele = document.getElementById('format');\n gauge.axes[0].labelStyle.format = ele.value.indexOf('{value}') > -1 ? ele.value : gauge.axes[0].labelStyle.format;\n gauge.refresh();\n };\n var pointerPlace = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].placement = pointerPlace.value;\n gauge.refresh();\n }\n });\n pointerPlace.appendTo('#pointerPlace');\n var pointerType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].type = pointerType.value;\n pointerPlace.enabled = (pointerType.value === 'Marker');\n gauge.refresh();\n }\n });\n pointerType.appendTo('#pointerType');\n\nfunction getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}\nfunction linearAxes() {\n var gauge = new ej.lineargauge.LinearGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n orientation: 'Horizontal',\n axes: [{\n line: {\n color: '#9E9E9E'\n },\n pointers: [{\n value: 10,\n height: 15,\n width: 15,\n color: '#757575',\n offset: 30\n }],\n majorTicks: {\n color: '#9E9E9E',\n interval: 10\n },\n minorTicks: {\n color: '#9E9E9E',\n interval: 2\n },\n labelStyle: {\n offset: 48\n }\n }],\n annotations: [{\n content: '

        ' +\n '${axes[0].pointers[0].currentValue} MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n x: 10,\n y: 60, zIndex: '1'\n }]\n });\n return gauge;\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Axis Minimum\n    0\n
        \n         		\n
        \n \n
        \n
        \n
        Axis Maximum\n    100\n
        \n         		\n
        \n \n
        \n
        \n
        Axis Inversed
        \n         		\n
        \n \n
        \n
        \n
        Axis Opposed
        \n         		\n
        \n \n
        \n
        \n
        Label Format
        \n         		\n
        \n \n
        \n
        \n
        Pointer type
        \n         		\n
        \n \n
        \n
        \n
        Marker Placement
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Axes Sample\n */\n\n var gauge = new ej.lineargauge.LinearGauge(linearAxes());\n gauge.appendTo('#axisContainer');\n // code for property panel\n document.getElementById('opposed').onchange = function (sender) {\n var ele = document.getElementById('opposed');\n gauge.axes[0].opposedPosition = ele.checked;\n if (ele.checked) {\n gauge.axes[0].pointers[0].placement = 'Near';\n gauge.axes[0].pointers[0].markerType = 'Triangle';\n gauge.axes[0].pointers[0].offset = -20;\n gauge.axes[0].labelStyle.offset = 0;\n gauge.annotations[0].x = 10;\n gauge.annotations[0].y = -60;\n }\n else {\n gauge.axes[0].pointers[0].placement = 'Far';\n gauge.axes[0].pointers[0].offset = 0;\n gauge.axes[0].pointers[0].offset = 30;\n gauge.axes[0].pointers[0].markerType = 'InvertedTriangle';\n gauge.axes[0].labelStyle.offset = 38;\n gauge.annotations[0].x = 10;\n gauge.annotations[0].y = 60;\n }\n gauge.refresh();\n };\n document.getElementById('axisInversed').onchange = function (sender) {\n var ele = document.getElementById('axisInversed');\n gauge.axes[0].isInversed = ele.checked;\n gauge.refresh();\n };\n document.getElementById('min').ontouchmove = document.getElementById('min').onpointermove =\n document.getElementById('min').onchange = function () {\n var min = document.getElementById('min');\n var max = document.getElementById('max');\n gauge.axes[0].minimum = parseInt(min.value, 10);\n gauge.axes[0].maximum = parseInt(max.value, 10);\n document.getElementById('minValue').innerHTML = 'Axis Minimum    ' + min.value;\n gauge.refresh();\n gauge.annotations[0].axisValue = gauge.axes[0].pointers[0].currentValue;\n gauge.refresh();\n };\n document.getElementById('max').ontouchmove = document.getElementById('max').onpointermove =\n document.getElementById('max').onchange = function () {\n var min = document.getElementById('min');\n var max = document.getElementById('max');\n gauge.axes[0].maximum = parseInt(max.value, 10);\n gauge.axes[0].minimum = parseInt(min.value, 10);\n document.getElementById('maxValue').innerHTML = 'Axis Maximum    ' + max.value;\n gauge.refresh();\n gauge.annotations[0].axisValue = gauge.axes[0].pointers[0].currentValue;\n gauge.refresh();\n };\n document.getElementById('format').onchange = function () {\n var ele = document.getElementById('format');\n gauge.axes[0].labelStyle.format = ele.value.indexOf('{value}') > -1 ? ele.value : gauge.axes[0].labelStyle.format;\n gauge.refresh();\n };\n var pointerPlace = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].placement = pointerPlace.value;\n gauge.refresh();\n }\n });\n pointerPlace.appendTo('#pointerPlace');\n var pointerType = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].pointers[0].type = pointerType.value;\n pointerPlace.enabled = (pointerType.value === 'Marker');\n gauge.refresh();\n }\n });\n pointerType.appendTo('#pointerType');\n\nfunction getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}\n/**\n * Code for Linear gauge\n */\nfunction linearAxes() {\n var gauge = new ej.lineargauge.LinearGauge({\n\n orientation: 'Horizontal',\n axes: [{\n line: {\n color: '#9E9E9E'\n },\n pointers: [{\n value: 10,\n height: 15,\n width: 15,\n color: '#757575',\n offset: 30\n }],\n majorTicks: {\n color: '#9E9E9E',\n interval: 10\n },\n minorTicks: {\n color: '#9E9E9E',\n interval: 2\n },\n labelStyle: {\n offset: 48\n }\n }],\n annotations: [{\n content: '

        ' +\n '${axes[0].pointers[0].currentValue} MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n x: 10,\n y: 60, zIndex: '1'\n }]\n });\n return gauge;\n}"} \ No newline at end of file diff --git a/src/linear-gauge/axes.html b/src/linear-gauge/axes.html index bcc31f06..d6ea5a5f 100644 --- a/src/linear-gauge/axes.html +++ b/src/linear-gauge/axes.html @@ -4,6 +4,7 @@
        +
        @@ -109,6 +110,7 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/axes.js b/src/linear-gauge/axes.js index 075ff879..5358c93b 100644 --- a/src/linear-gauge/axes.js +++ b/src/linear-gauge/axes.js @@ -4,6 +4,7 @@ this.default = function () { var gauge = new ej.lineargauge.LinearGauge(linearAxes()); gauge.appendTo('#axisContainer'); + // code for property panel document.getElementById('opposed').onchange = function (sender) { var ele = document.getElementById('opposed'); gauge.axes[0].opposedPosition = ele.checked; @@ -83,13 +84,18 @@ this.default = function () { function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } +/** + * Code for Linear gauge + */ function linearAxes() { var gauge = new ej.lineargauge.LinearGauge({ + // custom code start load: function (args) { - var selectedTheme = location.hash.split('/')[1]; - selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + var selectTheme = location.hash.split('/')[1]; + selectTheme = selectTheme ? selectTheme : 'Material'; + args.gauge.theme = (selectTheme.charAt(0).toUpperCase() + selectTheme.slice(1)); }, + // custom code end orientation: 'Horizontal', axes: [{ line: { diff --git a/src/linear-gauge/container-stack.json b/src/linear-gauge/container-stack.json index c2c18dbb..a6c2c698 100644 --- a/src/linear-gauge/container-stack.json +++ b/src/linear-gauge/container-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n\n \n
        \n
        Orientation
        \n         		\n
        \n \n
        \n
        \n
        Container Type
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Container Sample\n */\n\n var gauge = new ej.lineargauge.LinearGauge({\n title: 'Temperature Measure',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n container: {\n width: 13,\n roundedCornerRadius: 5,\n type: 'Thermometer'\n },\n axes: [{\n minimum: 0,\n maximum: 180,\n line: {\n width: 0\n },\n majorTicks: {\n interval: 20,\n color: '#9e9e9e'\n },\n minorTicks: {\n color: '#9e9e9e'\n },\n pointers: [\n {\n value: 90,\n height: 13,\n width: 13,\n roundedCornerRadius: 5,\n type: 'Bar',\n color: '#f02828'\n }\n ]\n },\n {\n minimum: 0,\n maximum: 180,\n line: {\n width: 0\n },\n majorTicks: {\n interval: 20\n },\n opposedPosition: true,\n pointers: [\n {\n width: 0\n }\n ]\n }]\n });\n gauge.appendTo('#boxContainer');\n var containerMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.container.type = containerMode.value;\n gauge.refresh();\n }\n });\n containerMode.appendTo('#containerMode');\n var orientationMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.orientation = orientationMode.value;\n gauge.refresh();\n }\n });\n orientationMode.appendTo('#orientationMode');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n\n \n
        \n
        Orientation
        \n         		\n
        \n \n
        \n
        \n
        Container Type
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Container Sample\n */\n\n var gauge = new ej.lineargauge.LinearGauge({\n title: 'Temperature Measure',\n\n container: {\n width: 13,\n roundedCornerRadius: 5,\n type: 'Thermometer'\n },\n axes: [{\n minimum: 0,\n maximum: 180,\n line: {\n width: 0\n },\n majorTicks: {\n interval: 20,\n color: '#9e9e9e'\n },\n minorTicks: {\n color: '#9e9e9e'\n },\n pointers: [\n {\n value: 90,\n height: 13,\n width: 13,\n roundedCornerRadius: 5,\n type: 'Bar',\n color: '#f02828'\n }\n ]\n },\n {\n minimum: 0,\n maximum: 180,\n line: {\n width: 0\n },\n majorTicks: {\n interval: 20\n },\n opposedPosition: true,\n pointers: [\n {\n width: 0\n }\n ]\n }]\n });\n gauge.appendTo('#boxContainer');\n // Code for property panel\n var containerMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.container.type = containerMode.value;\n gauge.refresh();\n }\n });\n containerMode.appendTo('#containerMode');\n var orientationMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.orientation = orientationMode.value;\n gauge.refresh();\n }\n });\n orientationMode.appendTo('#orientationMode');\n"} \ No newline at end of file diff --git a/src/linear-gauge/container.html b/src/linear-gauge/container.html index 413536b5..346b4574 100644 --- a/src/linear-gauge/container.html +++ b/src/linear-gauge/container.html @@ -4,6 +4,7 @@
        +
        @@ -27,9 +28,9 @@ @@ -41,12 +42,14 @@

        - This sample demonstrates the type of containers used in linear gauge. Orientation and container type of linear gauge can be changed by using Orientation and Container Type options + This sample demonstrates the type of containers used in linear gauge. Orientation and container type of linear + gauge can be changed by using Orientation and Container Type options

        - This sample demonstrates the orientation and container customization in linear gauge. The gauge can be rendered either in + This sample demonstrates the orientation and container customization in linear gauge. The gauge can be rendered + either in vertical or horizontal orientation. And you can use type property in container to change the type of the container.

        @@ -56,8 +59,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/container.js b/src/linear-gauge/container.js index 50ff7562..22e4b76e 100644 --- a/src/linear-gauge/container.js +++ b/src/linear-gauge/container.js @@ -4,11 +4,13 @@ this.default = function () { var gauge = new ej.lineargauge.LinearGauge({ title: 'Temperature Measure', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end container: { width: 13, roundedCornerRadius: 5, @@ -56,6 +58,7 @@ this.default = function () { }] }); gauge.appendTo('#boxContainer'); + // Code for property panel var containerMode = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select Range Bar Color', diff --git a/src/linear-gauge/data-stack.json b/src/linear-gauge/data-stack.json index 3b76d7a7..f2ee4484 100644 --- a/src/linear-gauge/data-stack.json +++ b/src/linear-gauge/data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Thermometer linear gauge\n */\n\n var gauge1 = new ej.lineargauge.LinearGauge(firstGauge());\n gauge1.appendTo('#container1');\n var gauge3 = new ej.lineargauge.LinearGauge(thirdGauge());\n gauge3.appendTo('#container3');\n var gauge2 = new ej.lineargauge.LinearGauge(secondGauge());\n gauge2.appendTo('#container2');\n\nfunction firstGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n container: {\n width: 30,\n backgroundColor: '#e0e0e0',\n border: {\n width: 0\n },\n offset: 30\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n orientation: 'Horizontal', \n axes: [{\n line: {\n offset: 30\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 10,\n placement: 'Near',\n offset: -60,\n height: 10,\n width: 10,\n markerType: 'Triangle'\n }],\n ranges: [\n {\n start: 0,\n end: 10,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }\n ]\n }],\n annotations: [\n {\n content:\n '

        Exercise Tracking

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 150,\n y: -180, zIndex: '1'\n },\n {\n content: '

        Running

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -130, zIndex: '1'\n },\n {\n content: '

        10 MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n y: -65, zIndex: '1'\n }\n ]\n });\n return gauge1;\n}\nfunction secondGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n axes: [{\n line: {\n offset: 30\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 28,\n height: 10,\n width: 10,\n placement: 'Near',\n offset: -60,\n markerType: 'Triangle'\n }],\n ranges: [\n {\n start: 0,\n end: 28,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }\n ]\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n orientation: 'Horizontal',\n container: {\n width: 30,\n backgroundColor: '#e0e0e0',\n border: {\n width: 0\n },\n offset: -50\n },\n annotations: [{\n content:\n '

        Cycling

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -110, zIndex: '1'\n },\n {\n content: '

        28 MPH

        ',\n axisIndex: 0,\n axisValue: 28,\n y: -70, zIndex: '1'\n }]\n });\n return gauge1;\n}\nfunction thirdGauge() {\n var gauge3 = new ej.lineargauge.LinearGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n annotations: [{\n content: '

        Walking

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -120, zIndex: '1'\n },\n {\n content: '

        2000 Steps

        ',\n axisIndex: 0,\n axisValue: 2.2,\n y: -65, zIndex: '1'\n }],\n orientation: 'Horizontal',\n container: {\n width: 30,\n backgroundColor: '#e0e0e0',\n border: {\n width: 0\n },\n offset: -90\n },\n axes: [{\n maximum: 10,\n line: {\n offset: 30\n },\n labelStyle: {\n format: '{value}k',\n offset: 50\n },\n pointers: [{\n value: 2,\n height: 10,\n width: 10,\n placement: 'Near',\n offset: -60,\n markerType: 'Triangle'\n }],\n ranges: [\n {\n start: 0,\n end: 2,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }\n ]\n }] \n });\n return gauge3;\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Thermometer linear gauge\n */\n\n var gauge1 = new ej.lineargauge.LinearGauge(firstGauge());\n gauge1.appendTo('#container1');\n var gauge3 = new ej.lineargauge.LinearGauge(thirdGauge());\n gauge3.appendTo('#container3');\n var gauge2 = new ej.lineargauge.LinearGauge(secondGauge());\n gauge2.appendTo('#container2');\n\n\nfunction firstGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n container: {\n width: 30,\n border: {\n width: 0\n },\n offset: 30\n },\n\n orientation: 'Horizontal',\n axes: [{\n line: {\n offset: 30\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 10,\n placement: 'Near',\n offset: -60,\n height: 10,\n width: 10,\n markerType: 'Triangle'\n }],\n ranges: [{\n start: 0,\n end: 10,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }]\n }],\n annotations: [{\n content: '

        Exercise Tracking

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 150,\n y: -180,\n zIndex: '1'\n },\n {\n content: '

        Running

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -130,\n zIndex: '1'\n },\n {\n content: '

        10 MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n y: -65,\n zIndex: '1'\n }\n ]\n });\n return gauge1;\n}\n\nfunction secondGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n axes: [{\n line: {\n offset: 30\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 28,\n height: 10,\n width: 10,\n placement: 'Near',\n offset: -60,\n markerType: 'Triangle'\n }],\n ranges: [{\n start: 0,\n end: 28,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }]\n }],\n\n orientation: 'Horizontal',\n container: {\n width: 30,\n border: {\n width: 0\n },\n offset: -50\n },\n annotations: [{\n content: '

        Cycling

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -110,\n zIndex: '1'\n },\n {\n content: '

        28 MPH

        ',\n axisIndex: 0,\n axisValue: 28,\n y: -70,\n zIndex: '1'\n }\n ]\n });\n return gauge1;\n}\n\nfunction thirdGauge() {\n var gauge3 = new ej.lineargauge.LinearGauge({\n\n annotations: [{\n content: '

        Walking

        ',\n axisIndex: 0,\n axisValue: 0,\n x: 50,\n y: -120,\n zIndex: '1'\n },\n {\n content: '

        2000 Steps

        ',\n axisIndex: 0,\n axisValue: 2.2,\n y: -65,\n zIndex: '1'\n }\n ],\n orientation: 'Horizontal',\n container: {\n width: 30,\n border: {\n width: 0\n },\n offset: -90\n },\n axes: [{\n maximum: 10,\n line: {\n offset: 30\n },\n labelStyle: {\n format: '{value}k',\n offset: 50\n },\n pointers: [{\n value: 2,\n height: 10,\n width: 10,\n placement: 'Near',\n offset: -60,\n markerType: 'Triangle'\n }],\n ranges: [{\n start: 0,\n end: 2,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }]\n }]\n });\n return gauge3;\n}"} \ No newline at end of file diff --git a/src/linear-gauge/data.html b/src/linear-gauge/data.html index 5b1bd4d0..364db16d 100644 --- a/src/linear-gauge/data.html +++ b/src/linear-gauge/data.html @@ -28,8 +28,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/data.js b/src/linear-gauge/data.js index ea00634c..a1528c99 100644 --- a/src/linear-gauge/data.js +++ b/src/linear-gauge/data.js @@ -9,22 +9,29 @@ this.default = function () { var gauge2 = new ej.lineargauge.LinearGauge(secondGauge()); gauge2.appendTo('#container2'); }; + function firstGauge() { var gauge1 = new ej.lineargauge.LinearGauge({ container: { width: 30, - backgroundColor: '#e0e0e0', border: { width: 0 }, offset: 30 }, - load: function (args) { + // custom code start + load: function (args1) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + args1.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + if (args1.gauge.theme.toLowerCase().indexOf('dark') > 1 || args1.gauge.theme.toLowerCase() === 'highcontrast') { + args1.gauge.annotations[1].content = '

        Running

        '; + } }, - orientation: 'Horizontal', + // custom code end + orientation: 'Horizontal', axes: [{ line: { offset: 30 @@ -40,43 +47,43 @@ function firstGauge() { width: 10, markerType: 'Triangle' }], - ranges: [ - { - start: 0, - end: 10, - startWidth: 30, - endWidth: 30, - color: '#30b32d' - } - ] + ranges: [{ + start: 0, + end: 10, + startWidth: 30, + endWidth: 30, + color: '#30b32d' + }] }], - annotations: [ - { - content: - '

        Exercise Tracking

        ', + annotations: [{ + content: '

        Exercise Tracking

        ', axisIndex: 0, axisValue: 0, x: 150, - y: -180, zIndex: '1' + y: -180, + zIndex: '1' }, { content: '

        Running

        ', + '/images/Running.svg" />

        Running

        ', axisIndex: 0, axisValue: 0, x: 50, - y: -130, zIndex: '1' + y: -130, + zIndex: '1' }, { content: '

        10 MPH

        ', axisIndex: 0, axisValue: 10, - y: -65, zIndex: '1' + y: -65, + zIndex: '1' } ] }); return gauge1; } + function secondGauge() { var gauge1 = new ej.lineargauge.LinearGauge({ axes: [{ @@ -94,72 +101,88 @@ function secondGauge() { offset: -60, markerType: 'Triangle' }], - ranges: [ - { - start: 0, - end: 28, - startWidth: 30, - endWidth: 30, - color: '#30b32d' - } - ] + ranges: [{ + start: 0, + end: 28, + startWidth: 30, + endWidth: 30, + color: '#30b32d' + }] }], - load: function (args) { + // custom code start + load: function (args2) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + args2.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + if (args2.gauge.theme.toLowerCase().indexOf('dark') > 1 || args2.gauge.theme.toLowerCase() === 'highcontrast') { + args2.gauge.annotations[0].content = '

        Cycling

        '; + } }, + // custom code end orientation: 'Horizontal', container: { width: 30, - backgroundColor: '#e0e0e0', border: { width: 0 }, offset: -50 }, annotations: [{ - content: - '

        Cycling

        ', - axisIndex: 0, - axisValue: 0, - x: 50, - y: -110, zIndex: '1' - }, - { - content: '

        28 MPH

        ', - axisIndex: 0, - axisValue: 28, - y: -70, zIndex: '1' - }] + content: '

        Cycling

        ', + axisIndex: 0, + axisValue: 0, + x: 50, + y: -110, + zIndex: '1' + }, + { + content: '

        28 MPH

        ', + axisIndex: 0, + axisValue: 28, + y: -70, + zIndex: '1' + } + ] }); return gauge1; } + function thirdGauge() { var gauge3 = new ej.lineargauge.LinearGauge({ - load: function (args) { + // custom code start + load: function (args3) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + args3.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + if (args3.gauge.theme.toLowerCase().indexOf('dark') > 1 || args3.gauge.theme.toLowerCase() === 'highcontrast') { + args3.gauge.annotations[0].content = '

        Walking

        '; + } }, + // custom code end annotations: [{ - content: '

        Walking

        ', - axisIndex: 0, - axisValue: 0, - x: 50, - y: -120, zIndex: '1' - }, - { - content: '

        2000 Steps

        ', - axisIndex: 0, - axisValue: 2.2, - y: -65, zIndex: '1' - }], + content: '

        Walking

        ', + axisIndex: 0, + axisValue: 0, + x: 50, + y: -120, + zIndex: '1' + }, + { + content: '

        2000 Steps

        ', + axisIndex: 0, + axisValue: 2.2, + y: -65, + zIndex: '1' + } + ], orientation: 'Horizontal', container: { width: 30, - backgroundColor: '#e0e0e0', border: { width: 0 }, @@ -182,16 +205,14 @@ function thirdGauge() { offset: -60, markerType: 'Triangle' }], - ranges: [ - { - start: 0, - end: 2, - startWidth: 30, - endWidth: 30, - color: '#30b32d' - } - ] - }] + ranges: [{ + start: 0, + end: 2, + startWidth: 30, + endWidth: 30, + color: '#30b32d' + }] + }] }); return gauge3; } \ No newline at end of file diff --git a/src/linear-gauge/default-stack.json b/src/linear-gauge/default-stack.json index e22b66b4..3b667dc6 100644 --- a/src/linear-gauge/default-stack.json +++ b/src/linear-gauge/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Default linear gauge\n */\n\n var gauge = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n pointers: [{\n value: 10,\n height: 15,\n width: 15,\n placement: 'Near',\n offset: -50,\n markerType: 'Triangle'\n }],\n majorTicks: {\n color: '#9E9E9E',\n interval: 10\n },\n minorTicks: {\n color: '#9E9E9E',\n interval: 2\n },\n labelStyle: {\n offset: 48\n }\n }],\n annotations: [{\n content: '

        10 MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n x: 10,\n y: -70, zIndex: '1'\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n gauge.appendTo('#defaultContainer');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Default linear gauge\n */\n\n var gauge = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n pointers: [{\n value: 10,\n height: 15,\n width: 15,\n placement: 'Near',\n offset: -50,\n markerType: 'Triangle'\n }],\n majorTicks: {\n interval: 10\n },\n minorTicks: {\n interval: 2\n },\n labelStyle: {\n offset: 48\n }\n }],\n annotations: [{\n content: '

        10 MPH

        ',\n axisIndex: 0,\n axisValue: 10,\n x: 10,\n y: -70, zIndex: '1'\n }],\n\n });\n gauge.appendTo('#defaultContainer');\n"} \ No newline at end of file diff --git a/src/linear-gauge/default.html b/src/linear-gauge/default.html index 44049dbc..b1a04b40 100644 --- a/src/linear-gauge/default.html +++ b/src/linear-gauge/default.html @@ -25,8 +25,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/default.js b/src/linear-gauge/default.js index fca13875..cbfe2b96 100644 --- a/src/linear-gauge/default.js +++ b/src/linear-gauge/default.js @@ -14,11 +14,9 @@ this.default = function () { markerType: 'Triangle' }], majorTicks: { - color: '#9E9E9E', interval: 10 }, minorTicks: { - color: '#9E9E9E', interval: 2 }, labelStyle: { @@ -32,11 +30,13 @@ this.default = function () { x: 10, y: -70, zIndex: '1' }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); gauge.appendTo('#defaultContainer'); }; \ No newline at end of file diff --git a/src/linear-gauge/images/cycling1.svg b/src/linear-gauge/images/cycling1.svg new file mode 100644 index 00000000..224f6879 --- /dev/null +++ b/src/linear-gauge/images/cycling1.svg @@ -0,0 +1,53 @@ + + + + + + + + diff --git a/src/linear-gauge/images/running1.svg b/src/linear-gauge/images/running1.svg new file mode 100644 index 00000000..5c62f294 --- /dev/null +++ b/src/linear-gauge/images/running1.svg @@ -0,0 +1,56 @@ + + + + + + + + diff --git a/src/linear-gauge/images/walking1.svg b/src/linear-gauge/images/walking1.svg new file mode 100644 index 00000000..9dc95ad6 --- /dev/null +++ b/src/linear-gauge/images/walking1.svg @@ -0,0 +1,54 @@ + + + + + + + + + diff --git a/src/linear-gauge/ranges-stack.json b/src/linear-gauge/ranges-stack.json index 7286920e..bac8debf 100644 --- a/src/linear-gauge/ranges-stack.json +++ b/src/linear-gauge/ranges-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n
        \n
        Select Range
        \n         		\n
        \n \n
        \n
        \n
        Range Color
        \n         		\n
        \n
        \n \n
        \n\n
        \n
        \n
        Range Font Color
        \n         		\n
        \n \n
        \n
        \n
        Range Start\n    0\n
        \n         		\n
        \n \n
        \n
        \n
        Range End\n    32\n
        \n         		\n
        \n \n
        \n
        \n
        Range Start Width\n    15\n
        \n         		\n
        \n \n
        \n
        \n
        Range End Width\n    15\n
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Linear Gauge Range Sample\n */\nfunction linear() {\n var gauge = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n line: {\n width: 0\n },\n labelStyle: {\n format: '{value}%',\n offset: 30\n },\n pointers: [\n {\n value: 35,\n height: 10,\n width: 10,\n markerType: 'Triangle',\n placement: 'Near',\n offset: -40,\n }\n ],\n majorTicks: {\n height: 0\n },\n minorTicks: {\n height: 0\n },\n ranges: [{\n start: 0,\n end: 32,\n color: '#30B32D',\n startWidth: 15,\n endWidth: 15\n },\n {\n start: 32,\n end: 68,\n startWidth: 15,\n endWidth: 15,\n color: '#FFDF00'\n },\n {\n start: 68,\n end: 100,\n startWidth: 15,\n endWidth: 15,\n color: '#F03E3E'\n }]\n }],\n annotations: [{\n content: '

        35

        ',\n axisIndex: 0,\n axisValue: 35,\n y: -50, zIndex: '1'\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return gauge;\n}\n\n var gauge = new ej.lineargauge.LinearGauge(linear());\n gauge.appendTo('#rangeContainer');\n document.getElementById('end').ontouchmove = document.getElementById('end').onpointermove =\n document.getElementById('end').onchange = function () {\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n gauge.axes[0].ranges[+rangeIndex.value].start = parseInt(start.value, 10);\n gauge.axes[0].ranges[+rangeIndex.value].end = parseInt(end.value, 10);\n document.getElementById('endRangeValue').innerHTML = 'Range End    ' + end.value;\n gauge.refresh();\n };\n var rangeIndex = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var value = +rangeIndex.value;\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n var rangeColor = document.getElementById('color');\n var startWidth = document.getElementById('startWidth');\n var endWidth = document.getElementById('endWidth');\n start.value = gauge.axes[0].ranges[value].start.toString();\n end.value = gauge.axes[0].ranges[value].end.toString();\n startWidth.value = gauge.axes[0].ranges[value].startWidth.toString();\n endWidth.value = gauge.axes[0].ranges[value].endWidth.toString();\n rangeColor.value = gauge.axes[0].ranges[value].color.toString();\n document.getElementById('startWidthValue').innerHTML = 'Range Start Width   ' + startWidth.value;\n document.getElementById('endWidthValue').innerHTML = 'Range End Width   ' + endWidth.value;\n document.getElementById('startRangeValue').innerHTML = 'Range Start    ' + start.value;\n document.getElementById('endRangeValue').innerHTML = 'Range End    ' + end.value;\n gauge.refresh();\n }\n });\n rangeIndex.appendTo('#rangeIndex');\n document.getElementById('color').onchange = function () {\n var ele = document.getElementById('color');\n gauge.axes[0].ranges[+rangeIndex.value].color = ele.value;\n gauge.refresh();\n };\n document.getElementById('startWidth').ontouchmove = document.getElementById('startWidth').onpointermove =\n document.getElementById('startWidth').onchange = function () {\n var ele = document.getElementById('startWidth');\n gauge.axes[0].ranges[+rangeIndex.value].startWidth = parseInt(ele.value, 10);\n document.getElementById('startWidthValue').innerHTML = 'Range Start Width   ' + ele.value;\n gauge.refresh();\n };\n document.getElementById('endWidth').ontouchmove = document.getElementById('endWidth').onpointermove =\n document.getElementById('endWidth').onchange = function () {\n var ele = document.getElementById('endWidth');\n gauge.axes[0].ranges[+rangeIndex.value].endWidth = parseInt(ele.value, 10);\n document.getElementById('endWidthValue').innerHTML = 'Range End Width   ' + ele.value;\n gauge.refresh();\n };\n var useRangeColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].labelStyle.useRangeColor = (useRangeColor.value === 'range') ? true : false;\n gauge.refresh();\n }\n });\n useRangeColor.appendTo('#useRangeColor');\n document.getElementById('start').ontouchmove = document.getElementById('start').onpointermove =\n document.getElementById('start').onchange = function () {\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n gauge.axes[0].ranges[+rangeIndex.value].start = parseInt(start.value, 10);\n gauge.axes[0].ranges[+rangeIndex.value].end = parseInt(end.value, 10);\n document.getElementById('startRangeValue').innerHTML = 'Range Start    ' + start.value;\n gauge.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n
        \n
        Select Range
        \n         		\n
        \n \n
        \n
        \n
        Range Color
        \n         		\n
        \n
        \n \n
        \n\n
        \n
        \n
        Range Font Color
        \n         		\n
        \n \n
        \n
        \n
        Range Start\n    0\n
        \n         		\n
        \n \n
        \n
        \n
        Range End\n    32\n
        \n         		\n
        \n \n
        \n
        \n
        Range Start Width\n    15\n
        \n         		\n
        \n \n
        \n
        \n
        Range End Width\n    15\n
        \n         		\n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Linear Gauge Range Sample\n */\nfunction linear() {\n var gauge = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n line: {\n width: 0\n },\n labelStyle: {\n format: '{value}%',\n offset: 30\n },\n pointers: [\n {\n value: 35,\n height: 10,\n width: 10,\n markerType: 'Triangle',\n placement: 'Near',\n offset: -40,\n }\n ],\n majorTicks: {\n height: 0\n },\n minorTicks: {\n height: 0\n },\n ranges: [{\n start: 0,\n end: 32,\n color: '#30B32D',\n startWidth: 15,\n endWidth: 15\n },\n {\n start: 32,\n end: 68,\n startWidth: 15,\n endWidth: 15,\n color: '#FFDF00'\n },\n {\n start: 68,\n end: 100,\n startWidth: 15,\n endWidth: 15,\n color: '#F03E3E'\n }]\n }],\n annotations: [{\n content: '

        35

        ',\n axisIndex: 0,\n axisValue: 35,\n y: -50, zIndex: '1'\n }],\n\n });\n return gauge;\n}\n\n var gauge = new ej.lineargauge.LinearGauge(linear());\n gauge.appendTo('#rangeContainer');\n document.getElementById('end').ontouchmove = document.getElementById('end').onpointermove =\n document.getElementById('end').onchange = function () {\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n gauge.axes[0].ranges[+rangeIndex.value].start = parseInt(start.value, 10);\n gauge.axes[0].ranges[+rangeIndex.value].end = parseInt(end.value, 10);\n document.getElementById('endRangeValue').innerHTML = 'Range End    ' + end.value;\n gauge.refresh();\n };\n var rangeIndex = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n var value = +rangeIndex.value;\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n var rangeColor = document.getElementById('color');\n var startWidth = document.getElementById('startWidth');\n var endWidth = document.getElementById('endWidth');\n start.value = gauge.axes[0].ranges[value].start.toString();\n end.value = gauge.axes[0].ranges[value].end.toString();\n startWidth.value = gauge.axes[0].ranges[value].startWidth.toString();\n endWidth.value = gauge.axes[0].ranges[value].endWidth.toString();\n rangeColor.value = gauge.axes[0].ranges[value].color.toString();\n document.getElementById('startWidthValue').innerHTML = 'Range Start Width   ' + startWidth.value;\n document.getElementById('endWidthValue').innerHTML = 'Range End Width   ' + endWidth.value;\n document.getElementById('startRangeValue').innerHTML = 'Range Start    ' + start.value;\n document.getElementById('endRangeValue').innerHTML = 'Range End    ' + end.value;\n gauge.refresh();\n }\n });\n rangeIndex.appendTo('#rangeIndex');\n\n // Code for Property Panel\n \n document.getElementById('color').onchange = function () {\n var ele = document.getElementById('color');\n gauge.axes[0].ranges[+rangeIndex.value].color = ele.value;\n gauge.refresh();\n };\n document.getElementById('startWidth').ontouchmove = document.getElementById('startWidth').onpointermove =\n document.getElementById('startWidth').onchange = function () {\n var ele = document.getElementById('startWidth');\n gauge.axes[0].ranges[+rangeIndex.value].startWidth = parseInt(ele.value, 10);\n document.getElementById('startWidthValue').innerHTML = 'Range Start Width   ' + ele.value;\n gauge.refresh();\n };\n document.getElementById('endWidth').ontouchmove = document.getElementById('endWidth').onpointermove =\n document.getElementById('endWidth').onchange = function () {\n var ele = document.getElementById('endWidth');\n gauge.axes[0].ranges[+rangeIndex.value].endWidth = parseInt(ele.value, 10);\n document.getElementById('endWidthValue').innerHTML = 'Range End Width   ' + ele.value;\n gauge.refresh();\n };\n var useRangeColor = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Range Bar Color',\n width: 120,\n change: function () {\n gauge.axes[0].labelStyle.useRangeColor = (useRangeColor.value === 'range') ? true : false;\n gauge.refresh();\n }\n });\n useRangeColor.appendTo('#useRangeColor');\n document.getElementById('start').ontouchmove = document.getElementById('start').onpointermove =\n document.getElementById('start').onchange = function () {\n var start = document.getElementById('start');\n var end = document.getElementById('end');\n gauge.axes[0].ranges[+rangeIndex.value].start = parseInt(start.value, 10);\n gauge.axes[0].ranges[+rangeIndex.value].end = parseInt(end.value, 10);\n document.getElementById('startRangeValue').innerHTML = 'Range Start    ' + start.value;\n gauge.refresh();\n };\n"} \ No newline at end of file diff --git a/src/linear-gauge/ranges.html b/src/linear-gauge/ranges.html index 7e8317f0..b3f8b2f9 100644 --- a/src/linear-gauge/ranges.html +++ b/src/linear-gauge/ranges.html @@ -2,6 +2,7 @@
        +
        @@ -117,8 +118,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/ranges.js b/src/linear-gauge/ranges.js index 2266180c..1f464052 100644 --- a/src/linear-gauge/ranges.js +++ b/src/linear-gauge/ranges.js @@ -56,11 +56,13 @@ function linear() { axisValue: 35, y: -50, zIndex: '1' }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return gauge; } @@ -100,6 +102,9 @@ this.default = function () { } }); rangeIndex.appendTo('#rangeIndex'); + + // Code for Property Panel + document.getElementById('color').onchange = function () { var ele = document.getElementById('color'); gauge.axes[0].ranges[+rangeIndex.value].color = ele.value; diff --git a/src/linear-gauge/sample.json b/src/linear-gauge/sample.json index 5db5fa44..702b1b3f 100644 --- a/src/linear-gauge/sample.json +++ b/src/linear-gauge/sample.json @@ -7,7 +7,7 @@ { "url": "default", "name": "Default", - "description": "This demo for Essential JS2 Linear Gauge control illustrates the default rendering of linear gauge.", + "description": "This demo for Essential JS2 Linear Gauge control illustrates the default rendering of linear gauge that measures the values of scales.", "category": "Linear Gauge" }, { diff --git a/src/linear-gauge/style-stack.json b/src/linear-gauge/style-stack.json index 08fb8d42..1f352c95 100644 --- a/src/linear-gauge/style-stack.json +++ b/src/linear-gauge/style-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Linear Gauge Style Sample\n */\n\n var gauge1 = new ej.lineargauge.LinearGauge(firstGauge());\n gauge1.appendTo('#container1');\n var gauge2 = new ej.lineargauge.LinearGauge(secondGauge());\n gauge2.appendTo('#container2');\n var gauge3 = new ej.lineargauge.LinearGauge(thirdGauge());\n gauge3.appendTo('#container3');\n var gauge4 = new ej.lineargauge.LinearGauge(fourthGauge());\n gauge4.appendTo('#container4');\n\nfunction firstGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n line: {\n color: '#9E9E9E'\n },\n pointers: [{\n value: 80,\n offset: 10,\n height: 13,\n width: 13,\n }],\n majorTicks: {\n interval: 10,\n color: '#9E9E9E',\n },\n minorTicks: {\n color: '#9E9E9E'\n },\n }]\n });\n return gauge1;\n}\nfunction secondGauge() {\n var gauge2 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n container: {\n width: 30,\n backgroundColor: '#e0e0e0',\n border: {\n width: 0\n },\n offset: -20\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n line: {\n offset: 30\n },\n majorTicks: {\n interval: 10,\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 10,\n placement: 'Near',\n offset: -50,\n height: 15,\n width: 15,\n markerType: 'Triangle'\n }],\n ranges: [\n {\n start: 0,\n end: 10,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }\n ]\n }]\n });\n return gauge2;\n}\nfunction thirdGauge() {\n var gauge3 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n line: {\n offset: -20,\n color: '#9E9E9E'\n },\n pointers: [\n {\n value: 70,\n offset: 20,\n height: 13,\n width: 13,\n },\n {\n value: 70,\n type: 'Bar',\n height: 10,\n color: 'red'\n }\n ],\n majorTicks: {\n interval: 10,\n color: '#9E9E9E'\n },\n minorTicks: {\n color: '#9E9E9E'\n },\n }],\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n return gauge3;\n}\nfunction fourthGauge() {\n var gauge4 = new ej.lineargauge.LinearGauge({\n axes: [{\n line: {\n width: 0\n },\n majorTicks: {\n interval: 10,\n height: 0\n },\n minorTicks: {\n height: 0\n },\n labelStyle: {\n offset: 55\n },\n pointers: [\n {\n value: 60,\n height: 15,\n width: 15,\n placement: 'Near',\n offset: -50,\n markerType: 'Triangle'\n },\n {\n type: 'Bar',\n color: '#ff9200',\n value: 60,\n height: 30\n }\n ],\n }],\n orientation: 'Horizontal',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n container: {\n width: 30,\n offset: 0,\n backgroundColor: '#e0e0e0'\n }\n });\n return gauge4;\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Linear Gauge Style Sample\n */\n\n var gauge1 = new ej.lineargauge.LinearGauge(firstGauge());\n gauge1.appendTo('#container1');\n var gauge2 = new ej.lineargauge.LinearGauge(secondGauge());\n gauge2.appendTo('#container2');\n var gauge3 = new ej.lineargauge.LinearGauge(thirdGauge());\n gauge3.appendTo('#container3');\n var gauge4 = new ej.lineargauge.LinearGauge(fourthGauge());\n gauge4.appendTo('#container4');\n\nfunction firstGauge() {\n var gauge1 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n\n axes: [{\n line: {\n color: '#9E9E9E'\n },\n pointers: [{\n value: 80,\n offset: 10,\n height: 13,\n width: 13,\n }],\n majorTicks: {\n interval: 10,\n color: '#9E9E9E',\n },\n minorTicks: {\n color: '#9E9E9E'\n },\n }]\n });\n return gauge1;\n}\nfunction secondGauge() {\n var gauge2 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n container: {\n width: 30,\n backgroundColor: '#e0e0e0',\n border: {\n width: 0\n },\n offset: -20\n },\n\n axes: [{\n line: {\n offset: 30\n },\n majorTicks: {\n interval: 10,\n },\n labelStyle: {\n offset: 50\n },\n pointers: [{\n value: 10,\n placement: 'Near',\n offset: -50,\n height: 15,\n width: 15,\n markerType: 'Triangle'\n }],\n ranges: [\n {\n start: 0,\n end: 10,\n startWidth: 30,\n endWidth: 30,\n color: '#30b32d'\n }\n ]\n }]\n });\n return gauge2;\n}\nfunction thirdGauge() {\n var gauge3 = new ej.lineargauge.LinearGauge({\n orientation: 'Horizontal',\n axes: [{\n line: {\n offset: -20,\n color: '#9E9E9E'\n },\n pointers: [\n {\n value: 70,\n offset: 20,\n height: 13,\n width: 13,\n },\n {\n value: 70,\n type: 'Bar',\n height: 10,\n color: 'red'\n }\n ],\n majorTicks: {\n interval: 10,\n color: '#9E9E9E'\n },\n minorTicks: {\n color: '#9E9E9E'\n },\n }],\n\n });\n return gauge3;\n}\nfunction fourthGauge() {\n var gauge4 = new ej.lineargauge.LinearGauge({\n axes: [{\n line: {\n width: 0\n },\n majorTicks: {\n interval: 10,\n height: 0\n },\n minorTicks: {\n height: 0\n },\n labelStyle: {\n offset: 55\n },\n pointers: [\n {\n value: 60,\n height: 15,\n width: 15,\n placement: 'Near',\n offset: -50,\n markerType: 'Triangle'\n },\n {\n type: 'Bar',\n color: '#ff9200',\n value: 60,\n height: 30\n }\n ],\n }],\n orientation: 'Horizontal',\n\n container: {\n width: 30,\n offset: 0,\n backgroundColor: '#e0e0e0'\n }\n });\n return gauge4;\n}"} \ No newline at end of file diff --git a/src/linear-gauge/style.html b/src/linear-gauge/style.html index d5b936a3..d0ee4944 100644 --- a/src/linear-gauge/style.html +++ b/src/linear-gauge/style.html @@ -31,8 +31,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/style.js b/src/linear-gauge/style.js index e7900e6e..e982676c 100644 --- a/src/linear-gauge/style.js +++ b/src/linear-gauge/style.js @@ -14,11 +14,13 @@ this.default = function () { function firstGauge() { var gauge1 = new ej.lineargauge.LinearGauge({ orientation: 'Horizontal', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ line: { color: '#9E9E9E' @@ -51,11 +53,13 @@ function secondGauge() { }, offset: -20 }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end axes: [{ line: { offset: 30 @@ -117,11 +121,13 @@ function thirdGauge() { color: '#9E9E9E' }, }], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); } + // custom code end }); return gauge3; } @@ -159,11 +165,13 @@ function fourthGauge() { ], }], orientation: 'Horizontal', + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end container: { width: 30, offset: 0, diff --git a/src/linear-gauge/tooltip-stack.json b/src/linear-gauge/tooltip-stack.json index 50759737..e741aff3 100644 --- a/src/linear-gauge/tooltip-stack.json +++ b/src/linear-gauge/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Linear Gauge Tooltip Sample\n */\nvar gauge;\n\n gauge = new ej.lineargauge.LinearGauge({\n container: {\n width: 140,\n border: {\n width: 2,\n color: '#a6a6a6'\n }\n },\n tooltip: {\n enable: true,\n fill: '#fffff',\n textStyle: {\n color: '#fffff'\n }\n },\n orientation: 'Horizontal',\n axes: [\n {\n minimum: 0,\n maximum: 10,\n line: {\n offset: 140\n },\n majorTicks: {\n interval: 1\n },\n minorTicks: {\n interval: 0.2\n },\n labelStyle: {\n font: {\n color: '#000000'\n }\n },\n pointers: [{\n type: 'Bar',\n value: 5.4,\n offset: 15,\n color: '#ff66b3'\n }],\n },\n {\n opposedPosition: true,\n minimum: 0,\n maximum: 25,\n line: {\n offset: -140,\n },\n labelStyle: {\n font: {\n color: '#000000'\n }\n },\n majorTicks: {\n interval: 1\n },\n minorTicks: {\n interval: 0.2\n },\n pointers: [{\n type: 'Bar',\n offset: -15,\n value: 16.5,\n color: '#4d94ff'\n }]\n }\n ],\n annotations: [\n {\n content: '

        Inches

        ',\n axisIndex: 0,\n axisValue: 5.4,\n x: 35,\n y: -58,\n zIndex: '1'\n },\n {\n content: '

        Centimeters

        ',\n axisIndex: 1,\n axisValue: 16.5,\n x: 50,\n y: 52,\n zIndex: '1'\n }\n ],\n axisLabelRender: labelRender,\n tooltipRender: renderTooltip,\n load: gaugeLoad,\n loaded: gaugeLoaded,\n resized: gaugeResized,\n });\n gauge.appendTo('#tooltipContainer');\n\nfunction renderTooltip(args) {\n args.content = (args.axis.visibleRange.max === 25) ? args.content + ' cm' : args.content + ' in';\n}\nfunction labelRender(args) {\n if (args.axis.visibleRange.min === args.value || args.axis.visibleRange.max === args.value) {\n args.text = '';\n }\n}\nfunction gaugeMobileSize() {\n gauge.axes[1].majorTicks.interval = 2;\n gauge.axes[1].minorTicks.interval = 1;\n gauge.orientation = 'Vertical';\n gauge.annotations[0].x = -57;\n gauge.annotations[0].y = -30;\n gauge.annotations[1].x = 50;\n gauge.annotations[1].y = -45;\n}\nfunction gaugeDesktopSize() {\n gauge.axes[1].majorTicks.interval = 1;\n gauge.axes[1].minorTicks.interval = 0.5;\n gauge.orientation = 'Horizontal';\n gauge.annotations[0].x = 35;\n gauge.annotations[0].y = -58;\n gauge.annotations[1].x = 50;\n gauge.annotations[1].y = 52;\n}\nfunction gaugeResized(args) {\n if (args.currentSize.width < 500) {\n gaugeMobileSize();\n }\n else {\n gaugeDesktopSize();\n }\n}\nfunction gaugeLoad(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n var width = parseInt(((this.width, this.element.offsetWidth) || this.element.offsetWidth || 600), 10);\n if (width < 500) {\n gaugeMobileSize();\n }\n else {\n gaugeDesktopSize();\n }\n}\nfunction gaugeLoaded(args) {\n if (document.getElementById('tooltipContainer')) {\n if (gauge.availableSize.width < 500) {\n document.getElementById('tooltipContainer_Annotation_0').style.transform = 'rotate(270deg)';\n document.getElementById('tooltipContainer_Annotation_1').style.transform = 'rotate(270deg)';\n }\n else {\n document.getElementById('tooltipContainer_Annotation_0').style.transform = '';\n document.getElementById('tooltipContainer_Annotation_1').style.transform = '';\n }\n }\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Linear Gauge Tooltip Sample\n */\nvar gauge;\n\n gauge = new ej.lineargauge.LinearGauge({\n container: {\n width: 140,\n border: {\n width: 2,\n color: '#a6a6a6'\n }\n },\n tooltip: {\n enable: true,\n },\n orientation: 'Horizontal',\n axes: [\n {\n minimum: 0,\n maximum: 10,\n line: {\n offset: 140\n },\n majorTicks: {\n interval: 1\n },\n minorTicks: {\n interval: 0.2\n },\n pointers: [{\n type: 'Bar',\n value: 5.4,\n offset: 15,\n color: '#ff66b3'\n }],\n },\n {\n opposedPosition: true,\n minimum: 0,\n maximum: 25,\n line: {\n offset: -140,\n },\n majorTicks: {\n interval: 1\n },\n minorTicks: {\n interval: 0.2\n },\n pointers: [{\n type: 'Bar',\n offset: -15,\n value: 16.5,\n color: '#4d94ff'\n }]\n }\n ],\n annotations: [\n {\n content: '

        Inches

        ',\n axisIndex: 0,\n axisValue: 5.4,\n x: 35,\n y: -58,\n zIndex: '1'\n },\n {\n content: '

        Centimeters

        ',\n axisIndex: 1,\n axisValue: 16.5,\n x: 50,\n y: 52,\n zIndex: '1'\n }\n ],\n axisLabelRender: labelRender,\n tooltipRender: renderTooltip,\n load: gaugeLoad,\n loaded: gaugeLoaded,\n resized: gaugeResized,\n });\n gauge.appendTo('#tooltipContainer');\n\nfunction renderTooltip(args) {\n args.content = (args.axis.visibleRange.max === 25) ? args.content + ' cm' : args.content + ' in';\n}\nfunction labelRender(args) {\n if (args.axis.visibleRange.min === args.value || args.axis.visibleRange.max === args.value) {\n args.text = '';\n }\n}\nfunction gaugeMobileSize() {\n gauge.axes[1].majorTicks.interval = 2;\n gauge.axes[1].minorTicks.interval = 1;\n gauge.orientation = 'Vertical';\n gauge.annotations[0].x = -57;\n gauge.annotations[0].y = -30;\n gauge.annotations[1].x = 50;\n gauge.annotations[1].y = -45;\n}\nfunction gaugeDesktopSize() {\n gauge.axes[1].majorTicks.interval = 1;\n gauge.axes[1].minorTicks.interval = 0.5;\n gauge.orientation = 'Horizontal';\n gauge.annotations[0].x = 35;\n gauge.annotations[0].y = -58;\n gauge.annotations[1].x = 50;\n gauge.annotations[1].y = 52;\n}\nfunction gaugeResized(args) {\n if (args.currentSize.width < 500) {\n gaugeMobileSize();\n }\n else {\n gaugeDesktopSize();\n }\n}\nfunction gaugeLoad(args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n if (args.gauge.theme.toLowerCase().indexOf('dark') > 1 || args.gauge.theme.toLowerCase() === 'highcontrast') {\n args.gauge.annotations[0].content = '

        Inches

        ';\n args.gauge.annotations[1].content = '

        Centimeters

        ';\n }\n var width = parseInt(((this.width, this.element.offsetWidth) || this.element.offsetWidth || 600), 10);\n if (width < 500) {\n gaugeMobileSize();\n }\n else {\n gaugeDesktopSize();\n }\n}\nfunction gaugeLoaded(args) {\n if (document.getElementById('tooltipContainer')) {\n if (gauge.availableSize.width < 500) {\n document.getElementById('tooltipContainer_Annotation_0').style.transform = 'rotate(270deg)';\n document.getElementById('tooltipContainer_Annotation_1').style.transform = 'rotate(270deg)';\n }\n else {\n document.getElementById('tooltipContainer_Annotation_0').style.transform = '';\n document.getElementById('tooltipContainer_Annotation_1').style.transform = '';\n }\n }\n}"} \ No newline at end of file diff --git a/src/linear-gauge/tooltip.html b/src/linear-gauge/tooltip.html index a0c515db..9ddc2a84 100644 --- a/src/linear-gauge/tooltip.html +++ b/src/linear-gauge/tooltip.html @@ -22,8 +22,10 @@ documentation section.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/linear-gauge/tooltip.js b/src/linear-gauge/tooltip.js index b5e0027e..2de0d1ec 100644 --- a/src/linear-gauge/tooltip.js +++ b/src/linear-gauge/tooltip.js @@ -13,10 +13,6 @@ this.default = function () { }, tooltip: { enable: true, - fill: '#fffff', - textStyle: { - color: '#fffff' - } }, orientation: 'Horizontal', axes: [ @@ -32,11 +28,6 @@ this.default = function () { minorTicks: { interval: 0.2 }, - labelStyle: { - font: { - color: '#000000' - } - }, pointers: [{ type: 'Bar', value: 5.4, @@ -51,11 +42,6 @@ this.default = function () { line: { offset: -140, }, - labelStyle: { - font: { - color: '#000000' - } - }, majorTicks: { interval: 1 }, @@ -72,7 +58,7 @@ this.default = function () { ], annotations: [ { - content: '

        Inches

        ', + content: '

        Inches

        ', axisIndex: 0, axisValue: 5.4, x: 35, @@ -80,7 +66,7 @@ this.default = function () { zIndex: '1' }, { - content: '

        Centimeters

        ', + content: '

        Centimeters

        ', axisIndex: 1, axisValue: 16.5, x: 50, @@ -134,6 +120,10 @@ function gaugeLoad(args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); + if (args.gauge.theme.toLowerCase().indexOf('dark') > 1 || args.gauge.theme.toLowerCase() === 'highcontrast') { + args.gauge.annotations[0].content = '

        Inches

        '; + args.gauge.annotations[1].content = '

        Centimeters

        '; + } var width = parseInt(((this.width, this.element.offsetWidth) || this.element.offsetWidth || 600), 10); if (width < 500) { gaugeMobileSize(); diff --git a/src/list-box/api-stack.json b/src/list-box/api-stack.json new file mode 100644 index 00000000..a57348c6 --- /dev/null +++ b/src/list-box/api-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n
        \n
        Sort order
        \n         		\n
        \n \n
        \n
        \n
        Selection Mode
        \n         		\n
        \n \n
        \n
        \n
        \n \n \n \n \n","index.js":"{{ripple}}\n/**\n * ListBox sorting sample.\n */\n\n\n \n\n // Initialize ListBox component.\n var listObj= new ej.dropdowns.ListBox({\n // Set the vegetableData to the data source.\n dataSource: window.vegetableData,\n\n // Map the appropriate columns to fields property along with groupBy option.\n fields: { groupBy: 'Category', text: 'Name', value: 'Id' },\n });\n listObj.appendTo('#listbox-group');\n\n // Initialize DropDownList component.\n var ddlObj = new ej.dropdowns. DropDownList(\n {\n value: 'None',\n popupHeight: '200px',\n // Change event of the Dropdownlist.\n change:function (e){\n \n listObj.sortOrder = e.value ; \n }\n });\n ddlObj.appendTo('#ddl');\n\n var ddlObj1 = new ej.dropdowns.DropDownList(\n {\n value: 'Multiple',\n popupHeight: '200px',\n // Change event of the Dropdownlist.\n change:function (e){\n listObj.selectionSettings.mode = e.value;\n }\n });\n ddlObj1.appendTo('#mode');\n\n"} \ No newline at end of file diff --git a/src/list-box/api.html b/src/list-box/api.html new file mode 100644 index 00000000..4becb9bb --- /dev/null +++ b/src/list-box/api.html @@ -0,0 +1,69 @@ +
        +
        + +
        +
        +
        + + + + + + + + + + + +
        +
        Sort order
        +         		+
        + +
        +
        +
        Selection Mode
        +         		+
        + +
        +
        +
        +
        +

        This sample demonstrates the API functionalities of the ListBox component by using its properties from the property pane. Select any combination of properties from the property pane to achieve desired functionalities in ListBox.

        +
        + +
        +

        In this demo, a ListBox is rendered with grouping feature by setting the groupBy property + in fields property. This sample has been showcased with following set of properties,

        +
          +
        • You can switch to Single or Multiple selection mode by selecting the mode from the selection mode dropdown list.
          • +
        • You can switch to None, Ascending, or Descending sort orders by selecting the sort order from the sort order dropdown list.
          • +
        +

        In this sample, by default, grouping is enabled and vegetableData is grouped based on its category. The user can change the sort order and selection type using dropdownlist.

        +

        More information about the ListBox api can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/list-box/api.js b/src/list-box/api.js new file mode 100644 index 00000000..7bf1990c --- /dev/null +++ b/src/list-box/api.js @@ -0,0 +1,43 @@ + +/** + * ListBox sorting sample. + */ + +this.default = function() { + + + // Initialize ListBox component. + var listObj= new ej.dropdowns.ListBox({ + // Set the vegetableData to the data source. + dataSource: window.vegetableData, + + // Map the appropriate columns to fields property along with groupBy option. + fields: { groupBy: 'Category', text: 'Name', value: 'Id' }, + }); + listObj.appendTo('#listbox-group'); + + // Initialize DropDownList component. + var ddlObj = new ej.dropdowns. DropDownList( + { + value: 'None', + popupHeight: '200px', + // Change event of the Dropdownlist. + change:function (e){ + + listObj.sortOrder = e.value ; + } + }); + ddlObj.appendTo('#ddl'); + + var ddlObj1 = new ej.dropdowns.DropDownList( + { + value: 'Multiple', + popupHeight: '200px', + // Change event of the Dropdownlist. + change:function (e){ + listObj.selectionSettings.mode = e.value; + } + }); + ddlObj1.appendTo('#mode'); + +}; \ No newline at end of file diff --git a/src/list-box/checkbox-stack.json b/src/list-box/checkbox-stack.json new file mode 100644 index 00000000..9646e876 --- /dev/null +++ b/src/list-box/checkbox-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n
        \n\n\n\n","index.js":"{{ripple}}/**\n * ListBox Checkbox sample\n */\n\n\n\n // Initialize the ListBox component.\n var listObj = new ej.dropdowns.ListBox({\n // Set the dataSource property.\n dataSource: window.info,\n \n // Set the selection settings with showCheckbox as enabled.\n selectionSettings: { showCheckbox: true }\n \n });\n \n listObj.appendTo('#multi-select-listbox');\n \n\n "} \ No newline at end of file diff --git a/src/list-box/checkbox.html b/src/list-box/checkbox.html new file mode 100644 index 00000000..1eb9b255 --- /dev/null +++ b/src/list-box/checkbox.html @@ -0,0 +1,32 @@ +
        +
        + +
        +
        +
        +

        This sample demonstrates the checkbox functionalities of the ListBox. Click one or more items from the list of items in the ListBox.

        +
        +
        +

        The ListBox component has built-in support to select multiple items from the list. The Checkbox selection can be enabled by setting the + showCheckbox as true + in the selectionSettings property.

        +

        To perform the checkbox feature in the ListBox, the CheckBoxSelection module has to be injected at the application level.

        +

        More information about checkbox selection in ListBox can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/list-box/checkbox.js b/src/list-box/checkbox.js new file mode 100644 index 00000000..b2ad7fb6 --- /dev/null +++ b/src/list-box/checkbox.js @@ -0,0 +1,20 @@ +/** + * ListBox Checkbox sample + */ + +this.default = function () { + + // Initialize the ListBox component. + var listObj = new ej.dropdowns.ListBox({ + // Set the dataSource property. + dataSource: window.info, + + // Set the selection settings with showCheckbox as enabled. + selectionSettings: { showCheckbox: true } + + }); + + listObj.appendTo('#multi-select-listbox'); + + +}; \ No newline at end of file diff --git a/src/list-box/data-source.js b/src/list-box/data-source.js new file mode 100644 index 00000000..c02bc44b --- /dev/null +++ b/src/list-box/data-source.js @@ -0,0 +1,71 @@ +window.vegetableData = [ + { Name: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' }, + { Name: 'Chickpea', Category: 'Beans', Id: 'item2' }, + { Name: 'Garlic', Category: 'Bulb and Stem', Id: 'item3' }, + { Name: 'Green bean', Category: 'Beans', Id: 'item4' }, + { Name: 'Horse gram', Category: 'Beans', Id: 'item5' }, + { Name: 'Nopal', Category: 'Bulb and Stem', Id: 'item6' }, + { Name: 'Onion', Category: 'Bulb and Stem', Id: 'item7' }, + { Name: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item8' }, + { Name: 'Spinach', Category: 'Leafy and Salad', Id: 'item9' }, + { Name: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item10' }, + { Name: 'Yarrow', Category: 'Leafy and Salad', Id: 'item11' } +]; + window.groupa=[ + { Country: 'Australia', Code: 'AU' }, + { Country: 'Bermuda', Code: 'BM' }, + { Country: 'Canada', Code: 'CA' }, + { Country: 'Cameroon', Code: 'CM' }, + { Country: 'Denmark', Code: 'DK' }, + { Country: 'France', Code: 'FR' }, + { Country: 'Finland', Code: 'FI' }, + { Country: 'Germany', Code: 'DE' }, + { Country: 'Hong Kong', Code: 'HK' } + ]; + window.groupb= [ + { Country: 'India', Code: 'IN' }, + { Country: 'Italy', Code: 'IT' }, + { Country: 'Japan', Code: 'JP' }, + { Country: 'Mexico', Code: 'MX' }, + { Country: 'Norway', Code: 'NO' }, + { Country: 'Poland', Code: 'PL' }, + { Country: 'Switzerland', Code: 'CH' }, + { Country: 'United Kingdom', Code: 'GB' }, + { Country: 'United States', Code: 'US' } + ]; + + window.dragAndDropA=[ + { Region: 'Australia', Code: 'AU' }, + { Region: 'Bermuda', Code: 'BM' }, + { Region: 'Canada', Code: 'CA' }, + { Region: 'Cameroon', Code: 'CM' }, + { Region: 'Denmark', Code: 'DK' }, + { Region: 'France', Code: 'FR' }, + { Region: 'Finland', Code: 'FI' }, + { Region: 'Germany', Code: 'DE' }, + { Region: 'Hong Kong', Code: 'HK' } + ]; + window.dragAndDropB= [ + { Region: 'India', Code: 'IN' }, + { Region: 'Italy', Code: 'IT' }, + { Region: 'Japan', Code: 'JP' }, + { Region: 'Mexico', Code: 'MX' }, + { Region: 'Norway', Code: 'NO' }, + { Region: 'Poland', Code: 'PL' }, + { Region: 'Switzerland', Code: 'CH' }, + { Region: 'United Kingdom', Code: 'GB' }, + { Region: 'United States', Code: 'US' } + ]; + + window.info= [ + { text: 'Hennessey Venom' }, + { text: 'Bugatti Chiron' }, + { text: 'Bugatti Veyron Super Sport' }, + { text: 'SSC Ultimate Aero' }, + { text: 'Koenigsegg CCR' }, + { text: 'McLaren F1' }, + { text: 'Aston Martin One- 77' }, + { text: 'Jaguar XJ220' }, + { text: 'McLaren P1' }, + { text: 'Ferrari LaFerrari' } + ]; diff --git a/src/list-box/default-stack.json b/src/list-box/default-stack.json new file mode 100644 index 00000000..8e181b91 --- /dev/null +++ b/src/list-box/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n

        Select your favorite car:

        \n \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}/**\n * ListBox Default Sample\n */\n\nthis.default=function(){\n // Initialize ListBox component.\n var listObj= new ej.dropdowns.ListBox({ \n // Set the info to the data source property.\n dataSource: window.info\n });\n listObj.appendTo('#listbox');\n"} \ No newline at end of file diff --git a/src/list-box/default.html b/src/list-box/default.html new file mode 100644 index 00000000..5203b9ec --- /dev/null +++ b/src/list-box/default.html @@ -0,0 +1,34 @@ +
        +
        +

        Select your favorite car:

        + +
        +
        +
        + +
        +

        This sample demonstrates the default functionalities of a ListBox. Click any item to select a single item or ctrl + click to select multiple items.

        +
        +
        +

        The ListBox is a graphical user interface component used to display a list of items. Users can select one or more items in the list using a checkbox or by keyboard selection. + It supports sorting, grouping, reordering, and drag and drop of items.

        +

        In this sample, data is bound to the ListBox using the dataSource + property. You can select your favorite cars from the ListBox.

        +

        More information about the ListBox can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/list-box/default.js b/src/list-box/default.js new file mode 100644 index 00000000..5bde90db --- /dev/null +++ b/src/list-box/default.js @@ -0,0 +1,12 @@ +/** + * ListBox Default Sample + */ + +this.default=function(){ + // Initialize ListBox component. + var listObj= new ej.dropdowns.ListBox({ + // Set the info to the data source property. + dataSource: window.info + }); + listObj.appendTo('#listbox'); +}; \ No newline at end of file diff --git a/src/list-box/drag-and-drop-stack.json b/src/list-box/drag-and-drop-stack.json new file mode 100644 index 00000000..eaa3e94b --- /dev/null +++ b/src/list-box/drag-and-drop-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n

        Group A

        \n \n
        \n \n
        \n

        Group B

        \n \n \n
        \n
        \n
        \n\n\n\n\n\n","index.js":"{{ripple}}/**\n * ListBox drag and drop sample.\n */\n\nvar dataA = new ej.data.DataManager({\n json: window.dragAndDropA\n});\n\n\n\n // Initialize ListBox component.\n var listObj1= new ej.dropdowns.ListBox({ \n // Set the scope of the ListBox.\n scope: 'combined-list',\n\n // Set the dragAndDropA data to the data source.\n dataSource: dataA,\n\n // Set allowDragAndDrop as `true`.\n allowDragAndDrop: true,\n \n height: '330px',\n\n drop: onDropGroupA,\n // Map the appropriate columns to fields property.\n fields: { text:'Region' }\n });\n\n listObj1.appendTo('#listbox1');\n\n \n var dataB = new ej.data.DataManager({\n json: window.dragAndDropB\n });\n\n // Initialize ListBox component.\n var listObj2= new ej.dropdowns.ListBox({ \n // Set the scope of the ListBox.\n scope: 'combined-list',\n\n // Set the dragAndDropB data to the data source.\n dataSource: dataB,\n\n // Set allowDragAndDrop as `true`.\n allowDragAndDrop: true,\n\n height: '330px',\n\n drop: onDropGroupB,\n\n // Set field property with text as `Name`.\n fields: { text:'Region' }\n });\n \n listObj2.appendTo('#listbox2');\n\n\n var modifiedDataA = { addedRecords: [], deletedRecords: [], changedRecords: [] };\n var modifiedDataB = { addedRecords: [], deletedRecords: [], changedRecords: [] };\n\n document.getElementById('savechange').onclick = function() {\n // Saving the manipulated records in to data manager.\n dataA.saveChanges(modifiedDataA, listObj1.fields.text);\n dataB.saveChanges(modifiedDataB, listObj2.fields.text);\n modifiedDataA.addedRecords = []; modifiedDataB.addedRecords = [];\n };\n\n function onDropGroupA(args) {\n args.items.forEach(function (item) {\n if (!listObj1.getDataByValue(item[listObj1.fields.text])) {/*Preventing item manipulation while doing drag and drop within same list box.*/\n modifiedDataB.addedRecords.push(item);\n modifiedDataA.deletedRecords.push(item);\n }\n });\n }\n\n function onDropGroupB(args) {\n args.items.forEach(function (item) {\n if (!listObj2.getDataByValue(item[listObj2.fields.text])) {\n modifiedDataA.addedRecords.push(item);\n modifiedDataB.deletedRecords.push(item);\n }\n });\n }\n"} \ No newline at end of file diff --git a/src/list-box/drag-and-drop.html b/src/list-box/drag-and-drop.html new file mode 100644 index 00000000..fdee697d --- /dev/null +++ b/src/list-box/drag-and-drop.html @@ -0,0 +1,93 @@ +
        +
        +
        +

        Group A

        + +
        + +
        +

        Group B

        + + +
        +
        +
        + +
        +

        This sample demonstrates the drag and drop functionalities of a ListBox. Drag an item or a group of selected items and drop it within the same list box or into another list box.

        +
        + +
        +

        The ListBox component allows the user to drag and drop a desired item from one list box into another list box. The drag and drop feature can be enabled by using the following properties,

        +
          +
        • To drag and drop a desired item within the ListBox, the allowDragAndDrop property should be set to true.
          • +
        • To drag and drop between two listboxes, the scope property should be set to both the listboxes.
          • +
        +

        In this sample, a list of countries is loaded in Group A and another list of countries is loaded in Group B. You can drag and drop an item or multiple items from + Group A to Group B, and vice versa. By clicking update button, user can save the changes to the corresponding JSON using Datamanager saveChanges method.

        +

        More information about drag and drop functionalities in the ListBox can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/list-box/drag-and-drop.js b/src/list-box/drag-and-drop.js new file mode 100644 index 00000000..9b23abbe --- /dev/null +++ b/src/list-box/drag-and-drop.js @@ -0,0 +1,85 @@ +/** + * ListBox drag and drop sample. + */ + +var dataA = new ej.data.DataManager({ + json: window.dragAndDropA +}); + +this.default = function() { + + // Initialize ListBox component. + var listObj1= new ej.dropdowns.ListBox({ + // Set the scope of the ListBox. + scope: 'combined-list', + + // Set the dragAndDropA data to the data source. + dataSource: dataA, + + // Set allowDragAndDrop as `true`. + allowDragAndDrop: true, + + height: '330px', + + drop: onDropGroupA, + // Map the appropriate columns to fields property. + fields: { text:'Region' } + }); + + listObj1.appendTo('#listbox1'); + + + var dataB = new ej.data.DataManager({ + json: window.dragAndDropB + }); + + // Initialize ListBox component. + var listObj2= new ej.dropdowns.ListBox({ + // Set the scope of the ListBox. + scope: 'combined-list', + + // Set the dragAndDropB data to the data source. + dataSource: dataB, + + // Set allowDragAndDrop as `true`. + allowDragAndDrop: true, + + height: '330px', + + drop: onDropGroupB, + + // Set field property with text as `Name`. + fields: { text:'Region' } + }); + + listObj2.appendTo('#listbox2'); + + + var modifiedDataA = { addedRecords: [], deletedRecords: [], changedRecords: [] }; + var modifiedDataB = { addedRecords: [], deletedRecords: [], changedRecords: [] }; + + document.getElementById('savechange').onclick = function() { + // Saving the manipulated records in to data manager. + dataA.saveChanges(modifiedDataA, listObj1.fields.text); + dataB.saveChanges(modifiedDataB, listObj2.fields.text); + modifiedDataA.addedRecords = []; modifiedDataB.addedRecords = []; + }; + + function onDropGroupA(args) { + args.items.forEach(function (item) { + if (!listObj1.getDataByValue(item[listObj1.fields.text])) {/*Preventing item manipulation while doing drag and drop within same list box.*/ + modifiedDataB.addedRecords.push(item); + modifiedDataA.deletedRecords.push(item); + } + }); + } + + function onDropGroupB(args) { + args.items.forEach(function (item) { + if (!listObj2.getDataByValue(item[listObj2.fields.text])) { + modifiedDataA.addedRecords.push(item); + modifiedDataB.deletedRecords.push(item); + } + }); + } +}; \ No newline at end of file diff --git a/src/list-box/dual-list-box-stack.json b/src/list-box/dual-list-box-stack.json new file mode 100644 index 00000000..87a97190 --- /dev/null +++ b/src/list-box/dual-list-box-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n

        Group A

        \n \n
        \n
        \n

        Group B

        \n \n
        \n
        \n
        \n\n\n\n\n","index.js":"{{ripple}}/**\n * ListBox dual list box sample.\n */\n\nthis.default = function(){\n\n // Initialize ListBox component.\n var listObj1= new ej.dropdowns.ListBox({ \n // Set the groupa data to the data source.\n dataSource: window.groupa,\n\n // Map the appropriate columns to fields property.\n fields: { text:'Country'},\n\n height: '330px',\n\n // Set the scope of the ListBox.\n scope: '#listbox2',\n // Set the tool settings with set of items.\n toolbarSettings: { items: ['moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom']}\n });\n \n listObj1.appendTo('#listbox1');\n\n // Initialize ListBox component.\n var listObj2= new ej.dropdowns.ListBox({ \n // Set the groupa data to the data source.\n dataSource: window.groupb,\n\n height: '330px',\n\n // Set field property with text as `Name`.\n fields: { text:'Country'},\n \n });\n\n listObj2.appendTo('#listbox2');\n"} \ No newline at end of file diff --git a/src/list-box/dual-list-box.html b/src/list-box/dual-list-box.html new file mode 100644 index 00000000..14a4490e --- /dev/null +++ b/src/list-box/dual-list-box.html @@ -0,0 +1,69 @@ +
        +
        +
        +

        Group A

        + +
        +
        +

        Group B

        + +
        +
        +
        + +
        +

        This sample demonstrates the functionalities of the dual list box. Select an item from Group A and click the moveTo button to move item from Group A to Group B. +

        +
        +

        The dual list box allows the user to move items between two list boxes. Dual list box can be created by listing items in the toolbarSettings property along with + scope property. The supported operations are,

        +
          +
        • moveUp - Moves the selected item in the upward direction.
          • +
        • moveDown - Moves the selected item in the downward direction.
          • +
        • moveTo - Moves the selected item to the Group B list box.
          • +
        • moveFrom - Moves the selected item from Group B list box to Group A.
          • +
        • moveAllTo - Moves all the items to the Group B list box.
          • +
        • moveAllFrom - Moves all the items from Group B list box to Group A.
          • +
        +

        More information about the dual list box can be found in the + documentation section. +

        +
        + + + + \ No newline at end of file diff --git a/src/list-box/dual-list-box.js b/src/list-box/dual-list-box.js new file mode 100644 index 00000000..1b857a4e --- /dev/null +++ b/src/list-box/dual-list-box.js @@ -0,0 +1,38 @@ +/** + * ListBox dual list box sample. + */ + +this.default = function(){ + + // Initialize ListBox component. + var listObj1= new ej.dropdowns.ListBox({ + // Set the groupa data to the data source. + dataSource: window.groupa, + + // Map the appropriate columns to fields property. + fields: { text:'Country'}, + + height: '330px', + + // Set the scope of the ListBox. + scope: '#listbox2', + // Set the tool settings with set of items. + toolbarSettings: { items: ['moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom']} + }); + + listObj1.appendTo('#listbox1'); + + // Initialize ListBox component. + var listObj2= new ej.dropdowns.ListBox({ + // Set the groupa data to the data source. + dataSource: window.groupb, + + height: '330px', + + // Set field property with text as `Name`. + fields: { text:'Country'}, + + }); + + listObj2.appendTo('#listbox2'); +}; \ No newline at end of file diff --git a/src/list-box/sample.json b/src/list-box/sample.json new file mode 100644 index 00000000..166a638e --- /dev/null +++ b/src/list-box/sample.json @@ -0,0 +1,15 @@ +{ + "name": "List Box", + "directory": "list-box", + "category": "Dropdowns", + "ftName": "list-box", + "type": "preview", + "samples": [ + { "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of Syncfusion JavaScript ListBox component with minimum configuration.", "category": "List Box", "api": { "ListBox": ["dataSource"] } }, + { "url": "dual-list-box", "name": "Dual ListBox", "description": "This example demonstrates how to move items between the two list boxes using dual list box functionality.", "category": "List Box", "api": { "ListBox": ["dataSource", "fields", "scope", "toolbarSettings", "height"] } }, + { "url": "drag-and-drop", "name": "Drag And Drop", "description": "This example demonstrates how to drag and drop within the Syncfusion JavaScript ListBox and between two list boxes.", "category": "List Box", "api": { "ListBox": ["dataSource", "scope", "allowDragAndDrop", "fields", "height"] } }, + { "url": "checkbox", "name": "Checkbox", "description": "This example demonstrates how to select multiple items from the Syncfusion JavaScript ListBox using checkbox functionality.", "category": "List Box", "api": { "ListBox": ["dataSource", "selectionSettings"] } }, + { "url": "api", "name": "API", "description": "This example how to customize the Syncfusion JavaScript ListBox component using the available set of APIs.", "category": "List Box", "api": { "ListBox": ["dataSource", "fields", "sortOrder", "selectionSettings"] } } + ], + "dataSourcePath": "src/list-box/data-source.js" +} \ No newline at end of file diff --git a/src/listview/call-history-stack.json b/src/listview/call-history-stack.json index 9f595f57..158c5f93 100644 --- a/src/listview/call-history-stack.json +++ b/src/listview/call-history-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Call history Sample\n */\n\n// tslint:disable-next-line:max-func-body-length\n\n if (!ej.base.Browser.isDevice.isDevice) {\n document.getElementsByClassName('layoutWrapper')[0].classList.add('e-device-layout');\n } else {\n document.getElementsByClassName('tabContainer')[0].classList.add('e-visbile-layer');\n }\n //Define an array of JSON data\n\n // Template of the list item\n var template = '
        ' +\n '${text} ' +\n '${group}, ${time}
        ';\n\n //Initialize ListView component\n var listObj1 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n });\n listObj1.appendTo('#all');\n\n var listObj2 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n });\n listObj2.appendTo('#received');\n\n var newData = [];\n\n var listObj3 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n\n });\n listObj3.appendTo('#missed');\n\n // Method used to filter the dataSource based on the given arguments\n function filterData(dataSource, value) {\n var newData = [];\n dataSource.filter(function (data) {\n if ((data.id).indexOf(value) !== -1) {\n newData.push(data);\n }\n });\n return newData;\n }\n\n var types = ['', 'received', 'missed'];\n var listObjects = [listObj1, listObj2, listObj3];\n // Intialize Tab component\n var tabObj = new ej.navigations.Tab({\n items: [\n {\n header: { 'text': 'All' }, content: '#all'\n },\n {\n header: { 'text': 'Received' }, content: '#received'\n },\n {\n header: { 'text': 'Missed' }, content: '#missed'\n }\n ],\n selected: function (args) {\n var newData;\n newData = filterData(window.callHistoryData, types[args.selectedIndex]);\n listObjects[args.selectedIndex].dataSource = newData;\n }\n });\n tabObj.appendTo('#tab');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Call history Sample\n */\n\n// tslint:disable-next-line:max-func-body-length\n\n if (!ej.base.Browser.isDevice.isDevice) {\n document.getElementsByClassName('layoutWrapper')[0].classList.add('e-device-layout');\n } else {\n document.getElementsByClassName('tabContainer')[0].classList.add('e-visbile-layer');\n }\n //Define an array of JSON data\n\n // Template of the list item\n var template = '
        ' +\n '${text} ' +\n '${group}, ${time}
        ';\n\n //Initialize ListView component\n var listObj1 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n });\n listObj1.appendTo('#all');\n\n var listObj2 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n });\n listObj2.appendTo('#received');\n\n var newData = [];\n\n var listObj3 = new ej.lists.ListView({\n // Set the datasource\n dataSource: window.callHistoryData,\n // Map the fields from the datasource into fields property\n fields: { text: 'text', groupBy: 'category' },\n cssClass: 'e-list-template',\n //Map the template for list items\n template: template,\n\n });\n listObj3.appendTo('#missed');\n\n // Method used to filter the dataSource based on the given arguments\n function filterData(dataSource, value) {\n var newData = [];\n dataSource.filter(function (data) {\n if ((data.id).indexOf(value) !== -1) {\n newData.push(data);\n }\n });\n return newData;\n }\n\n var types = ['', 'received', 'missed'];\n var listObjects = [listObj1, listObj2, listObj3];\n // Intialize Tab component\n var tabObj = new ej.navigations.Tab({\n items: [\n {\n header: { 'text': 'All' }, content: '#all'\n },\n {\n header: { 'text': 'Received' }, content: '#received'\n },\n {\n header: { 'text': 'Missed' }, content: '#missed'\n }\n ],\n selected: function (args) {\n var newData;\n newData = filterData(window.callHistoryData, types[args.selectedIndex]);\n listObjects[args.selectedIndex].dataSource = newData;\n }\n });\n tabObj.appendTo('#tab');\n\n"} \ No newline at end of file diff --git a/src/listview/call-history.html b/src/listview/call-history.html index 5f6dada3..24a2ef4e 100644 --- a/src/listview/call-history.html +++ b/src/listview/call-history.html @@ -162,6 +162,14 @@ color: black; } + @font-face { + font-family: 'e-customized-icons'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8iS4cAAAEoAAAAVmNtYXDS5tJrAAABjAAAAEBnbHlmdMAKbQAAAdQAAAOwaGVhZBNseyYAAADQAAAANmhoZWEHogNjAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQCaAdgAAAHMAAAACG1heHABEAEuAAABCAAAACBuYW1lc0cOBgAABYQAAAIlcG9zdNSlKbQAAAesAAAARwABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAtxzLE18PPPUACwPoAAAAANgtmycAAAAA2C2bJwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAADASIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6QLpZwNS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAukC6Wf//wAA6QLpZ///AAAAAAABAAYABgAAAAEAAgAAAAAAmgHYAAIAAAAAA+oD6gAzAIcAAAEzHxghNT8WEx8THQEPEisBLxI9AT8SAgAQECQmKCgpKScTEhIREA8ODQwKCgQHBQQBAfwqAQMFBgcKCgwNDg8QERISEycpKSgoJiQgDQwMDAwXFhUUEhEPDQsJCAIDAQEBAQMCCAkLDQ8REhQVFhcMDAwMDQ0MDAwMFxYVFBIRDw0LCQgCAwEBAQEDAggJCw0PERIUFRYXDAwMDAGFAQMEBwkKDQ4ICAkKCgoLCwwMDAcNDg8Og3sPDw4NDgwMDAsLCgoKCQgIDg0KCQcEAwJnAQEBAgMHCgsNDxESExUWFwwMDQwNDA0MDAwXFhUTExAPDQwJBwMCAgEBAgIDBwkMDQ8QExMVFhcMDAwNDA0MDQwMFxYVExIRDw0LCgcDAgEBAAAAAwAAAAAD8wPzAF8AwAEhAAABDxMfFz8XLxcPAjcfFA8XLxc/Fx8CJw8UHxc/Fy8XDwIBqRQUFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUFBQVFhYWFhYWFRUTFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUExUVFhYWFhYWtg4NGxkZGBYWFRMSEA8OCwsIBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxkZGBYWFRMSEA8NDAsIBwUDAQEDBQcICwsODxASExUVFxgZGRsbHB0dHh4dHd0QDx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiEDPAYICQoLDQ0OEBAREhITFBUVFRYXFhYWFRQUFBISERAQDg0MDAoJBwcFBAIBAQIEBQcHCQoMDA0OEBAREhIUFBQVFhYWFxYVFRUUExISERAQDg0NCwoJCAYFBAIBAQIEZAQECgwODxASExUVFxgYGhsbHB0dHh4dHRwbGxkZGBYWFBQSEA8NDAoJBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxoYGBcVFRMSEA8OCwsIBwUDAQEDBTYFBQwNEBESFRYXGRobHB0fHyEgIiIiIiEgHx4eHBsaGRcWFBMRDw4MCQgGAwEBAwYICQwODxETFBYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIRDw4MCQgGAwEBAwYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAh0ZW1wLWN1cxJGQl9DaGVja2JveF9zZWxlY3QAAAA=) format('truetype'); + font-weight: normal; + font-style: normal; + } + + .layout #list-container .e-icon:before { content: '\e902'; } @@ -176,10 +184,7 @@ border-color: white; } - @font-face { - font-family: 'e-customized-icons'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8iS4cAAAEoAAAAVmNtYXDS5tJrAAABjAAAAEBnbHlmdMAKbQAAAdQAAAOwaGVhZBNseyYAAADQAAAANmhoZWEHogNjAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQCaAdgAAAHMAAAACG1heHABEAEuAAABCAAAACBuYW1lc0cOBgAABYQAAAIlcG9zdNSlKbQAAAesAAAARwABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAtxzLE18PPPUACwPoAAAAANgtmycAAAAA2C2bJwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAADASIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6QLpZwNS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAukC6Wf//wAA6QLpZ///AAAAAAABAAYABgAAAAEAAgAAAAAAmgHYAAIAAAAAA+oD6gAzAIcAAAEzHxghNT8WEx8THQEPEisBLxI9AT8SAgAQECQmKCgpKScTEhIREA8ODQwKCgQHBQQBAfwqAQMFBgcKCgwNDg8QERISEycpKSgoJiQgDQwMDAwXFhUUEhEPDQsJCAIDAQEBAQMCCAkLDQ8REhQVFhcMDAwMDQ0MDAwMFxYVFBIRDw0LCQgCAwEBAQEDAggJCw0PERIUFRYXDAwMDAGFAQMEBwkKDQ4ICAkKCgoLCwwMDAcNDg8Og3sPDw4NDgwMDAsLCgoKCQgIDg0KCQcEAwJnAQEBAgMHCgsNDxESExUWFwwMDQwNDA0MDAwXFhUTExAPDQwJBwMCAgEBAgIDBwkMDQ8QExMVFhcMDAwNDA0MDQwMFxYVExIRDw0LCgcDAgEBAAAAAwAAAAAD8wPzAF8AwAEhAAABDxMfFz8XLxcPAjcfFA8XLxc/Fx8CJw8UHxc/Fy8XDwIBqRQUFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUFBQVFhYWFhYWFRUTFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUExUVFhYWFhYWtg4NGxkZGBYWFRMSEA8OCwsIBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxkZGBYWFRMSEA8NDAsIBwUDAQEDBQcICwsODxASExUVFxgZGRsbHB0dHh4dHd0QDx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiEDPAYICQoLDQ0OEBAREhITFBUVFRYXFhYWFRQUFBISERAQDg0MDAoJBwcFBAIBAQIEBQcHCQoMDA0OEBAREhIUFBQVFhYWFxYVFRUUExISERAQDg0NCwoJCAYFBAIBAQIEZAQECgwODxASExUVFxgYGhsbHB0dHh4dHRwbGxkZGBYWFBQSEA8NDAoJBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxoYGBcVFRMSEA8OCwsIBwUDAQEDBTYFBQwNEBESFRYXGRobHB0fHyEgIiIiIiEgHx4eHBsaGRcWFBMRDw4MCQgGAwEBAwYICQwODxETFBYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIRDw4MCQgGAwEBAwYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAh0ZW1wLWN1cxJGQl9DaGVja2JveF9zZWxlY3QAAAA=) format('truetype'); - font-weight: normal; - font-style: normal; + .bootstrap4 .layout #list-container .e-listview .e-active .e-icon { + color: #fff; } - + \ No newline at end of file diff --git a/src/listview/checklist-stack.json b/src/listview/checklist-stack.json index 4ae29026..aa16182a 100644 --- a/src/listview/checklist-stack.json +++ b/src/listview/checklist-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n

        Flat List

        \n\n \n
        \n
        \n
        \n
        \n

        Group List

        \n\n \n
        \n
        \n
        \n\n \n\n \n
        \n
        ","index.js":"{{ripple}}/**\n * ListView Checklist Sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.CheckListData,\n\n //Enables checkbox\n showCheckBox: true\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#listview-def');\n\n //Initialize ListView component\n var grpListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listData,\n\n //Map the appropriate columns to fields property\n fields: { groupBy: 'category' },\n\n //Enables checkbox\n showCheckBox: true\n });\n\n //Render initialized ListView component\n grpListObj.appendTo('#listview-grp');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n

        Flat List

        \n\n \n
        \n
        \n
        \n
        \n

        Group List

        \n\n \n
        \n
        \n
        \n\n \n\n \n
        \n
        ","index.js":"{{ripple}}/**\n * ListView Checklist Sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.CheckListData,\n\n //Enables checkbox\n showCheckBox: true\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#listview-def');\n\n //Initialize ListView component\n var grpListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listData,\n\n //Map the appropriate columns to fields property\n fields: { groupBy: 'category' },\n\n //Enables checkbox\n showCheckBox: true\n });\n\n //Render initialized ListView component\n grpListObj.appendTo('#listview-grp');\n"} \ No newline at end of file diff --git a/src/listview/default-stack.json b/src/listview/default-stack.json index e64a3110..b35b1d99 100644 --- a/src/listview/default-stack.json +++ b/src/listview/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n

        Flat List

        \n \n
        \n
          \n
        • Hennessey Venom
          • \n
        • Bugatti Chiron
          • \n
        • Bugatti Veyron Super Sport
          • \n
        • SSC Ultimate Aero
          • \n
        • Koenigsegg CCR
          • \n
        • McLaren F1
          • \n
        • Aston Martin One-77
          • \n
        • Jaguar XJ220
          • \n
        • McLaren P1
          • \n
        • Ferrari LaFerrari
          • \n
        \n
        \n
        \n
        \n

        Group List

        \n \n
        \n
        \n
        \n\n \n\n \n
        \n
        ","index.js":"{{ripple}}/**\n * ListView Default Sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView();\n\n //Render initialized ListView component\n listObj.appendTo('#listview-def');\n\n //Initialize ListView component\n var grpListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listData,\n\n //Map the appropriate columns to fields property\n fields: { groupBy: 'category' }\n\n });\n\n //Render initialized ListView component\n grpListObj.appendTo('#listview-grp');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n

        Flat List

        \n \n
        \n
          \n
        • Hennessey Venom
          • \n
        • Bugatti Chiron
          • \n
        • Bugatti Veyron Super Sport
          • \n
        • SSC Ultimate Aero
          • \n
        • Koenigsegg CCR
          • \n
        • McLaren F1
          • \n
        • Aston Martin One-77
          • \n
        • Jaguar XJ220
          • \n
        • McLaren P1
          • \n
        • Ferrari LaFerrari
          • \n
        \n
        \n
        \n
        \n

        Group List

        \n \n
        \n
        \n
        \n\n \n\n \n
        \n
        ","index.js":"{{ripple}}/**\n * ListView Default Sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView();\n\n //Render initialized ListView component\n listObj.appendTo('#listview-def');\n\n //Initialize ListView component\n var grpListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listData,\n\n //Map the appropriate columns to fields property\n fields: { groupBy: 'category' }\n\n });\n\n //Render initialized ListView component\n grpListObj.appendTo('#listview-grp');\n\n"} \ No newline at end of file diff --git a/src/listview/group-template-stack.json b/src/listview/group-template-stack.json index 34e679bb..0155e95f 100644 --- a/src/listview/group-template-stack.json +++ b/src/listview/group-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n \n
        \n\n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Group Template Sample\n */\n\n\n // Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.groupData,\n\n //Map the appropriate columns to fields property\n fields: { text: 'Name', groupBy: 'order' },\n\n cssClass: 'e-list-template',\n\n //Set customized group-header template\n groupTemplate: '
        ${items[0].category}
        ',\n\n //Set customized list template\n template: '
        ' +\n '' +\n '${Name}' +\n '${content}' +\n '
        ',\n\n //Set header title\n headerTitle: 'Settings',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#groupedList');\n\n \n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n \n
        \n\n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Group Template Sample\n */\n\n\n // Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.groupData,\n\n //Map the appropriate columns to fields property\n fields: { text: 'Name', groupBy: 'order' },\n\n cssClass: 'e-list-template',\n\n //Set customized group-header template\n groupTemplate: '
        ${items[0].category}
        ',\n\n //Set customized list template\n template: '
        ' +\n '' +\n '${Name}' +\n '${content}' +\n '
        ',\n\n //Set header title\n headerTitle: 'Settings',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#groupedList');\n\n \n"} \ No newline at end of file diff --git a/src/listview/group-template.html b/src/listview/group-template.html index e9f02fdf..4de9041f 100644 --- a/src/listview/group-template.html +++ b/src/listview/group-template.html @@ -189,4 +189,8 @@ .highcontrast #groupedList.e-list-template .e-active .e-list-content { color: #000; } + + .bootstrap4 #groupedList.e-listview .e-active .icon { + color: #fff; + } \ No newline at end of file diff --git a/src/listview/nested-list-stack.json b/src/listview/nested-list-stack.json index 4afe6cf4..b0d4bbdc 100644 --- a/src/listview/nested-list-stack.json +++ b/src/listview/nested-list-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n\n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Nested Sample\n */\n\n\n //Initialize ListView component\n var nestedListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listViewData,\n\n //Map appropriate columns to fields property\n fields: { iconCss: 'icon', tooltip: 'text' },\n\n //Set true to show icons\n showIcon: true,\n\n //Set header title\n headerTitle: 'Folders',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n//Render initialized ListView component\nnestedListObj.appendTo('#listview');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n\n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Nested Sample\n */\n\n\n //Initialize ListView component\n var nestedListObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.listViewData,\n\n //Map appropriate columns to fields property\n fields: { iconCss: 'icon', tooltip: 'text' },\n\n //Set true to show icons\n showIcon: true,\n\n //Set header title\n headerTitle: 'Folders',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n//Render initialized ListView component\nnestedListObj.appendTo('#listview');\n\n"} \ No newline at end of file diff --git a/src/listview/remote-data-stack.json b/src/listview/remote-data-stack.json index 8dc83d2b..3e56f23e 100644 --- a/src/listview/remote-data-stack.json +++ b/src/listview/remote-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Remote Sample\n */\n\n\n //Initialize ListView component\n var remoteListObj = new ej.lists.ListView({\n\n //Initialize dataSource with the DataManager instance.\n dataSource: new ej.data.DataManager({\n url: '//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/',\n crossDomain: true\n }),\n\n //Initialize query with the Query instance to get specified set of data\n query: new ej.data.Query().from('Products').select('ProductID,ProductName').take(10),\n\n //Map the appropriate columns to fields property\n fields: { id: 'ProductID', text: 'ProductName' },\n\n //Set header title\n headerTitle: 'Products',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n //Render initialized ListView component\n remoteListObj.appendTo('#listview');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Remote Sample\n */\n\n\n //Initialize ListView component\n var remoteListObj = new ej.lists.ListView({\n\n //Initialize dataSource with the DataManager instance.\n dataSource: new ej.data.DataManager({\n url: '//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/',\n crossDomain: true\n }),\n\n //Initialize query with the Query instance to get specified set of data\n query: new ej.data.Query().from('Products').select('ProductID,ProductName').take(10),\n\n //Map the appropriate columns to fields property\n fields: { id: 'ProductID', text: 'ProductName' },\n\n //Set header title\n headerTitle: 'Products',\n\n //Set true to show header title\n showHeader: true\n\n });\n\n //Render initialized ListView component\n remoteListObj.appendTo('#listview');\n\n"} \ No newline at end of file diff --git a/src/listview/templates-stack.json b/src/listview/templates-stack.json index ddc82491..5720509b 100644 --- a/src/listview/templates-stack.json +++ b/src/listview/templates-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n\n \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Template Sample\n */\n\n\n var template = '
        ${if(imgSrc!==\"\")}' +\n ' ' +\n '${/if} ${title} ' +\n '${description} ${if(timeStamp!==\"\")}
        ' +\n ' ' +\n '
        ' +\n '${timeStamp}
        ${/if}
        ';\n\n //Initialize ListView component\n var templateObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.templateData,\n\n //Set defined customized template\n template: template,\n\n //Set header title\n headerTitle: 'Syncfusion Blog',\n\n cssClass: 'e-list-template',\n\n //Set true to show header title\n showHeader: true,\n\n //bind event to customize ListView\n actionComplete: onComplete\n\n });\n\n //Render initialized ListView component\n templateObj.appendTo('#listview_template');\n\n //Customizing the elements to perform our own events\n var share = document.getElementsByClassName('share');\n var comments = document.getElementsByClassName('comments');\n var bookmark = document.getElementsByClassName('bookmark');\n var description = document.getElementsByClassName('e-list-content');\n var timeStamp = document.getElementsByClassName('timeStamp');\n var i;\n for (i = 0; i < comments.length; i++) {\n comments[i].setAttribute('title', 'We can customize this element to perform our own action');\n comments[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < bookmark.length; i++) {\n bookmark[i].setAttribute('title', 'We can customize this element to perform our own action');\n bookmark[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < share.length; i++) {\n share[i].setAttribute('title', 'We can customize this element to perform our own action');\n share[i].addEventListener('click',function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < description.length; i++) {\n description[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < timeStamp.length; i++) {\n timeStamp[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n function onComplete() {\n var listHeader = templateObj.element.childNodes[0];\n var header = listHeader.childNodes[0];\n if (header.style.display === 'none' || listHeader.childNodes.length === 3) {\n if (listHeader.childNodes[2] != null) {\n var childHeader = listHeader.childNodes[2];\n childHeader.remove();\n }\n } else {\n var headerEle = templateObj.element.querySelector('.e-list-header');\n var headerElement = templateObj.element.querySelector('#list-logo');\n var clone = headerElement.cloneNode(true);\n headerEle.appendChild(clone);\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n\n \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Template Sample\n */\n\n\n var template = '
        ${if(imgSrc!==\"\")}' +\n ' ' +\n '${/if} ${title} ' +\n '${description} ${if(timeStamp!==\"\")}
        ' +\n ' ' +\n '
        ' +\n '${timeStamp}
        ${/if}
        ';\n\n //Initialize ListView component\n var templateObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property\n dataSource: window.templateData,\n\n //Set defined customized template\n template: template,\n\n //Set header title\n headerTitle: 'Syncfusion Blog',\n\n cssClass: 'e-list-template',\n\n //Set true to show header title\n showHeader: true,\n\n //bind event to customize ListView\n actionComplete: onComplete\n\n });\n\n //Render initialized ListView component\n templateObj.appendTo('#listview_template');\n\n //Customizing the elements to perform our own events\n var share = document.getElementsByClassName('share');\n var comments = document.getElementsByClassName('comments');\n var bookmark = document.getElementsByClassName('bookmark');\n var description = document.getElementsByClassName('e-list-content');\n var timeStamp = document.getElementsByClassName('timeStamp');\n var i;\n for (i = 0; i < comments.length; i++) {\n comments[i].setAttribute('title', 'We can customize this element to perform our own action');\n comments[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < bookmark.length; i++) {\n bookmark[i].setAttribute('title', 'We can customize this element to perform our own action');\n bookmark[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < share.length; i++) {\n share[i].setAttribute('title', 'We can customize this element to perform our own action');\n share[i].addEventListener('click',function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < description.length; i++) {\n description[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n for (i = 0; i < timeStamp.length; i++) {\n timeStamp[i].addEventListener('click', function (event) {\n event.stopPropagation();\n });\n }\n\n function onComplete() {\n var listHeader = templateObj.element.childNodes[0];\n var header = listHeader.childNodes[0];\n if (header.style.display === 'none' || listHeader.childNodes.length === 3) {\n if (listHeader.childNodes[2] != null) {\n var childHeader = listHeader.childNodes[2];\n childHeader.remove();\n }\n } else {\n var headerEle = templateObj.element.querySelector('.e-list-header');\n var headerElement = templateObj.element.querySelector('#list-logo');\n var clone = headerElement.cloneNode(true);\n headerEle.appendChild(clone);\n }\n }\n\n"} \ No newline at end of file diff --git a/src/listview/templates.html b/src/listview/templates.html index 8479fc51..cd8f5802 100644 --- a/src/listview/templates.html +++ b/src/listview/templates.html @@ -173,4 +173,10 @@ display: none } } + + .bootstrap4 #listview_template.e-listview .bookmark::before, + .bootstrap4 #listview_template.e-listview .share::before, + .bootstrap4 #listview_template.e-listview .comments::before { + color: #495057; + } \ No newline at end of file diff --git a/src/listview/virtualization-stack.json b/src/listview/virtualization-stack.json index 3868489d..ba0fd48b 100644 --- a/src/listview/virtualization-stack.json +++ b/src/listview/virtualization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Load data
        \n         		\n
        \n \n
        \n
        \n
        Time taken
        \n         		\n
        \n 0 ms\n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Virtualization Sample\n */\nvar dataSource = {};\nvar startTime;\nvar endTime;\nvar listObj;\nvar liElement;\n\n\n liElement = document.getElementById('ui-list');\n\n if (ej.base.Browser.isDevice) {\n liElement.classList.add('ui-mobile');\n }\n\n ej.popups.createSpinner({\n target: liElement\n });\n\n [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach(function (ds) {\n var spyIndex;\n var index;\n var data = window.commonData.slice();\n for (var i = 10; i <= ds[0]; i++) {\n while (index === spyIndex) {\n index = parseInt((Math.random() * 10).toString(), 10);\n }\n data.push({ name: data[index].name, icon: data[index].icon, imgUrl: data[index].imgUrl, id: i.toString() });\n spyIndex = index;\n }\n dataSource[ds[1]] = data;\n });\n\n var template = '
        ' +\n '' +\n '${icon} ' +\n '${name}
        ';\n\n listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property.\n dataSource: dataSource.data1,\n\n //enable UI virtualization\n enableVirtualization: true,\n\n //Set height\n height: 500,\n\n cssClass: 'e-list-template',\n\n //Set header title\n headerTitle: 'Contacts',\n\n //Set true to show header title\n showHeader: true,\n\n //Set defined customized template\n template: template,\n\n actionBegin: function () {\n startTime = new Date();\n },\n actionComplete: function () {\n endTime = new Date();\n document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';\n }\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#ui-list');\n\n // Initialize DropDownList Component\n var ddObj = new ej.dropdowns.DropDownList({\n // Set the initial index of the list\n index: 0,\n // set the height of the dropdown list component\n popupHeight: '200px',\n // Handling the dropdown list change event to change slider tooltip showOn property\n change: onChange\n });\n\n ddObj.appendTo('#ddl');\n\n\n\nfunction onChange(e) {\n ej.popups.showSpinner(liElement);\n startTime = new Date();\n listObj.dataSource = dataSource['data' + e.value];\n listObj.dataBind();\n endTime = new Date();\n document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';\n ej.popups.hideSpinner(liElement);\n}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Load data
        \n         		\n
        \n \n
        \n
        \n
        Time taken
        \n         		\n
        \n 0 ms\n
        \n
        \n
        \n\n\n\n\n
        ","index.js":"{{ripple}}/**\n * ListView Virtualization Sample\n */\nvar dataSource = {};\nvar startTime;\nvar endTime;\nvar listObj;\nvar liElement;\n\n\n liElement = document.getElementById('ui-list');\n\n if (ej.base.Browser.isDevice) {\n liElement.classList.add('ui-mobile');\n }\n\n ej.popups.createSpinner({\n target: liElement\n });\n\n [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach(function (ds) {\n var spyIndex;\n var index;\n var data = window.commonData.slice();\n for (var i = 10; i <= ds[0]; i++) {\n while (index === spyIndex) {\n index = parseInt((Math.random() * 10).toString(), 10);\n }\n data.push({ name: data[index].name, icon: data[index].icon, imgUrl: data[index].imgUrl, id: i.toString() });\n spyIndex = index;\n }\n dataSource[ds[1]] = data;\n });\n\n var template = '
        ' +\n '' +\n '${icon} ' +\n '${name}
        ';\n\n listObj = new ej.lists.ListView({\n\n //Set defined data to dataSource property.\n dataSource: dataSource.data1,\n\n //enable UI virtualization\n enableVirtualization: true,\n\n //Set height\n height: 500,\n\n cssClass: 'e-list-template',\n\n //Set header title\n headerTitle: 'Contacts',\n\n //Set true to show header title\n showHeader: true,\n\n //Set defined customized template\n template: template,\n\n actionBegin: function () {\n startTime = new Date();\n },\n actionComplete: function () {\n endTime = new Date();\n document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';\n }\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#ui-list');\n\n // Initialize DropDownList Component\n var ddObj = new ej.dropdowns.DropDownList({\n // Set the initial index of the list\n index: 0,\n // set the height of the dropdown list component\n popupHeight: '200px',\n // Handling the dropdown list change event to change slider tooltip showOn property\n change: onChange\n });\n\n ddObj.appendTo('#ddl');\n\n\n\nfunction onChange(e) {\n ej.popups.showSpinner(liElement);\n startTime = new Date();\n listObj.dataSource = dataSource['data' + e.value];\n listObj.dataBind();\n endTime = new Date();\n document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';\n ej.popups.hideSpinner(liElement);\n}\n"} \ No newline at end of file diff --git a/src/maps/annotation-stack.json b/src/maps/annotation-stack.json index 2ca9664f..061eac4a 100644 --- a/src/maps/annotation-stack.json +++ b/src/maps/annotation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n \n \n \n \n \n\n
        \n
        \n
        \n

        Facts about Africa

        \n
        \n
        \n
        \n
          \n
        • Africa is the second largest and second most populated continent in the world.
          • \n
        • Africa has 54 sovereign states and 10 non-sovereign territories.
          • \n
        • Algeria is the largest country in Africa, where as Mayotte is the smallest.
          • \n
        \n
        \n
        \n
        \n
        \n \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Maps annotation sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '85%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '

        {{:name}}

        ',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n \n \n \n \n \n\n
        \n
        \n
        \n

        Facts about Africa

        \n
        \n
        \n
        \n
          \n
        • Africa is the second largest and second most populated continent in the world.
          • \n
        • Africa has 54 sovereign states and 10 non-sovereign territories.
          • \n
        • Algeria is the largest country in Africa, where as Mayotte is the smallest.
          • \n
        \n
        \n
        \n
        \n
        \n \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Maps annotation sample\n */\n\n var maps = new ej.maps.Maps({\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '85%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '

        {{:name}}

        ',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file diff --git a/src/maps/annotation.html b/src/maps/annotation.html index 41ea5dde..cf81c2bb 100644 --- a/src/maps/annotation.html +++ b/src/maps/annotation.html @@ -1,6 +1,7 @@
        + @@ -36,6 +37,7 @@ This sample depicts the facts about Africa in an annotation. Africa shape is filled with gradient color.

        + +

        In this example, you can see how to place a desired HTML element at desired location in the maps. Any number of annotation can be placed on the maps. In this sample, the gradient fill color has been applied for the shape. diff --git a/src/maps/annotation.js b/src/maps/annotation.js index cf380ced..166334ee 100644 --- a/src/maps/annotation.js +++ b/src/maps/annotation.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var theme = location.hash.split('/')[1]; - theme = theme ? theme : 'Material'; - args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); + var selectedtheme = location.hash.split('/')[1]; + selectedtheme = selectedtheme ? selectedtheme : 'Material'; + args.maps.theme = (selectedtheme.charAt(0).toUpperCase() + selectedtheme.slice(1)); }, + // custom code end zoomSettings: { enable: false }, diff --git a/src/maps/bubble-stack.json b/src/maps/bubble-stack.json index 391029bd..e96682b7 100644 --- a/src/maps/bubble-stack.json +++ b/src/maps/bubble-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

        \n
        \n
        \n
        \n ${name} \n
        \n
        \n
        \n
        \n Rank : ${rank}\n
        \n
        \n Population : ${population}\n
        \n
        \n \n
        \n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Bubble sample\n */\n\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var bubbletheme = location.hash.split('/')[1];\n bubbletheme = bubbletheme ? bubbletheme : 'Material';\n args.maps.theme = (bubbletheme.charAt(0).toUpperCase() + bubbletheme.slice(1));\n },\n bubbleRendering: function (args) {\n args.radius = args.data.value;\n },\n format: 'n',\n useGroupingSeparator: true,\n zoomSettings: {\n enable: true,\n horizontalAlignment: 'Near',\n toolBarOrientation: 'Vertical',\n pinchZooming: true\n },\n titleSettings: {\n text: 'Top 30 countries with highest Internet users',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5'\n },\n bubbleSettings: [\n {\n visible: true,\n valuePath: 'value',\n colorValuePath: 'color',\n minRadius: 3,\n maxRadius: 70,\n\t\t\t\t\t\topacity: 0.8,\n dataSource: window.internetUsers,\n\t\t\t\t\t\ttooltipSettings: {\n visible: true,\n valuePath: 'population',\n template: '#template'\n },\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n ${name} \n
        \n
        \n
        \n
        \n Rank : ${rank}\n
        \n
        \n Population : ${population}\n
        \n
        \n \n
        \n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Bubble sample\n */\n\n\n var maps = new ej.maps.Maps({\n\n bubbleRendering: function (args) {\n args.radius = args.data.value;\n },\n format: 'n',\n useGroupingSeparator: true,\n zoomSettings: {\n enable: true,\n horizontalAlignment: 'Near',\n toolBarOrientation: 'Vertical',\n pinchZooming: true\n },\n titleSettings: {\n text: 'Top 30 countries with highest Internet users',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5'\n },\n bubbleSettings: [\n {\n visible: true,\n valuePath: 'value',\n colorValuePath: 'color',\n minRadius: 3,\n maxRadius: 70,\n\t\t\t\t\t\topacity: 0.8,\n dataSource: window.internetUsers,\n\t\t\t\t\t\ttooltipSettings: {\n visible: true,\n valuePath: 'population',\n template: '#template'\n },\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/bubble.html b/src/maps/bubble.html index d50cb3ae..6f5dc417 100644 --- a/src/maps/bubble.html +++ b/src/maps/bubble.html @@ -17,6 +17,7 @@
        + diff --git a/src/maps/bubble.js b/src/maps/bubble.js index 6df099c3..c0879f45 100644 --- a/src/maps/bubble.js +++ b/src/maps/bubble.js @@ -4,11 +4,13 @@ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var bubbletheme = location.hash.split('/')[1]; bubbletheme = bubbletheme ? bubbletheme : 'Material'; args.maps.theme = (bubbletheme.charAt(0).toUpperCase() + bubbletheme.slice(1)); }, + // custom code end bubbleRendering: function (args) { args.radius = args.data.value; }, diff --git a/src/maps/color-mapping-stack.json b/src/maps/color-mapping-stack.json index 1b6f1f29..d60a45de 100644 --- a/src/maps/color-mapping-stack.json +++ b/src/maps/color-mapping-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n ${State} \n
        \n
        \n
        \n
        \n
        Inches : ${inches}
        \n
        \n
        \n
        Category : ${value}
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Type
        \n         		\n \n
        \n
        Change Opacity
        \n         		\n
        \n \n
        \n
        \n
        Min Opacity
        \n         		\n \n
        \n
        Max Opacity
        \n         		\n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n load: function (args) {\n var colormaptheme = location.hash.split('/')[1];\n colormaptheme = colormaptheme ? colormaptheme : 'Material';\n args.maps.colormaptheme = (colormaptheme.charAt(0).toUpperCase() + colormaptheme.slice(1));\n },\n titleSettings: {\n text: 'Spring Precipitation Averages of US States',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n position: 'Bottom',\n height: '10',\n width: '80%',\n mode: 'Interactive',\n titleStyle: {\n size: '18px',\n fontStyle: 'Medium',\n fontFamily: 'Roboto, Noto, Sans-serif',\n fontWeight: 'Medium',\n opacity: 0.5\n },\n title: {\n text: 'Inches'\n },\n },\n layers: [\n {\n dataSource: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/color-mapping.json'),\n shapeDataPath: 'State',\n shapeData: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeSettings: {\n colorValuePath: 'inches',\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.2\n },\n colorMapping: [\n {\n from: 0.1, to: 1, color: '#DEEBAE', label: '0 - 1'\n },\n {\n from: 1, to: 2, color: '#A4D6AD', label: '1 - 2'\n },\n {\n from: 2, to: 3, color: '#37AFAB', label: '2 - 3'\n },\n {\n from: 3, to: 4, color: '#547C84', label: '3 - 4'\n },\n {\n from: 4, to: 5, color: '#CEBF93', label: '4 - 5'\n },\n {\n from: 5, to: 6, color: '#a69d70', label: '5 - 6'\n },\n ],\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'State',\n template: '#template'\n },\n }\n ]\n });\n maps.appendTo('#default-container');\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false, disabled: true\n }, '#opacity');\n document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove =\n document.getElementById('minopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('minopacity');\n var minOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = minOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = minOpacity;\n maps.refresh();\n }\n };\n document.getElementById('maxopacity').onpointermove = document.getElementById('maxopacity').ontouchmove =\n document.getElementById('maxopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('maxopacity');\n var maxOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = maxOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = maxOpacity;\n maps.refresh();\n }\n };\n highlightCheckBox.change = opacity = function (e) {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (e.checked) {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = parseFloat(maxOpacity.value);\n minOpacity.disabled = false;\n maxOpacity.disabled = false;\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = null;\n minOpacity.disabled = true;\n maxOpacity.disabled = true;\n }\n maps.refresh();\n };\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Range ColorMaping',\n width: '100%',\n change: function () {\n var element = sampleValue.value.toString();\n if (element === 'RangeColorMapping') {\n highlightCheckBox.disabled = true;\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 1;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 1';\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].from = 1;\n maps.layers[0].shapeSettings.colorMapping[1].to = 2;\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = '1 - 2';\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = 2;\n maps.layers[0].shapeSettings.colorMapping[2].to = 3;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].label = '2 - 3';\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = 3;\n maps.layers[0].shapeSettings.colorMapping[3].to = 4;\n maps.layers[0].shapeSettings.colorMapping[3].color = '#547C84';\n maps.layers[0].shapeSettings.colorMapping[3].label = '3 - 4';\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = 4;\n maps.layers[0].shapeSettings.colorMapping[4].to = 5;\n maps.layers[0].shapeSettings.colorMapping[4].color = '#CEBF93';\n maps.layers[0].shapeSettings.colorMapping[4].label = '4 - 5';\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = 5;\n maps.layers[0].shapeSettings.colorMapping[5].to = 6;\n maps.layers[0].shapeSettings.colorMapping[5].color = '#a69d70';\n maps.layers[0].shapeSettings.colorMapping[5].label = '5 - 6';\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n }\n else if (element === 'EqualColorMapping') {\n highlightCheckBox.disabled = true;\n maps.layers[0].shapeSettings.colorValuePath = 'value';\n maps.layers[0].shapeSettings.colorMapping[0].from = null;\n maps.layers[0].shapeSettings.colorMapping[0].to = null;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = null;\n maps.layers[0].shapeSettings.colorMapping[0].value = 'Low';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = 'Moderate';\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].value = 'High';\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Category';\n maps.refresh();\n }\n if (element === 'DesaturationColorMapping') {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (highlightCheckBox.checked) {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n }\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 6;\n maps.layers[0].shapeSettings.colorMapping[0].color = ['#F0D6AD', '#19547B'];\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 6';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].color = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = null;\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n highlightCheckBox.disabled = false;\n }\n }\n });\n sampleValue.appendTo('#colorMapping');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n ${State} \n
        \n
        \n
        \n
        \n
        Inches : ${inches}
        \n
        \n
        \n
        Category : ${value}
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Color Mapping Type
        \n         		\n \n
        \n
        Change Opacity
        \n         		\n
        \n \n
        \n
        \n
        Min Opacity
        \n         		\n
        \n \n
        \n
        \n
        Max Opacity
        \n         		\n
        \n \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Spring Precipitation Averages of US States',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n position: 'Bottom',\n height: '10',\n width: '80%',\n mode: 'Interactive',\n titleStyle: {\n size: '18px'\n },\n title: {\n text: 'Inches'\n },\n },\n layers: [\n {\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/color-mapping.json'),\n shapeDataPath: 'State',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeSettings: {\n colorValuePath: 'inches',\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.2\n },\n colorMapping: [\n {\n from: 0.1, to: 1, color: '#DEEBAE', label: '0 - 1'\n },\n {\n from: 1, to: 2, color: '#A4D6AD', label: '1 - 2'\n },\n {\n from: 2, to: 3, color: '#37AFAB', label: '2 - 3'\n },\n {\n from: 3, to: 4, color: '#547C84', label: '3 - 4'\n },\n {\n from: 4, to: 5, color: '#CEBF93', label: '4 - 5'\n },\n {\n from: 5, to: 6, color: '#a69d70', label: '5 - 6'\n },\n ],\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'State',\n template: '#template'\n },\n }\n ]\n });\n maps.appendTo('#default-container');\n // Code for Property Panel\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false\n }, '#opacity');\n document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove =\n document.getElementById('minopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('minopacity');\n var minOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = minOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = minOpacity;\n maps.refresh();\n }\n };\n document.getElementById('maxopacity').onpointermove = document.getElementById('maxopacity').ontouchmove =\n document.getElementById('maxopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('maxopacity');\n var maxOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = maxOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = maxOpacity;\n maps.refresh();\n }\n };\n highlightCheckBox.change = opacity = function (e) {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (e.checked) {\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = parseFloat(maxOpacity.value);\n minOpacity.disabled = false;\n maxOpacity.disabled = false;\n }\n else {\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = null;\n minOpacity.disabled = true;\n maxOpacity.disabled = true;\n }\n maps.refresh();\n };\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Range ColorMaping',\n width: '110%',\n change: function () {\n var element = sampleValue.value.toString();\n if (element === 'RangeColorMapping') {\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 1;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 1';\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].from = 1;\n maps.layers[0].shapeSettings.colorMapping[1].to = 2;\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = '1 - 2';\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = 2;\n maps.layers[0].shapeSettings.colorMapping[2].to = 3;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].label = '2 - 3';\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = 3;\n maps.layers[0].shapeSettings.colorMapping[3].to = 4;\n maps.layers[0].shapeSettings.colorMapping[3].color = '#547C84';\n maps.layers[0].shapeSettings.colorMapping[3].label = '3 - 4';\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = 4;\n maps.layers[0].shapeSettings.colorMapping[4].to = 5;\n maps.layers[0].shapeSettings.colorMapping[4].color = '#CEBF93';\n maps.layers[0].shapeSettings.colorMapping[4].label = '4 - 5';\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = 5;\n maps.layers[0].shapeSettings.colorMapping[5].to = 6;\n maps.layers[0].shapeSettings.colorMapping[5].color = '#a69d70';\n maps.layers[0].shapeSettings.colorMapping[5].label = '5 - 6';\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n }\n else if (element === 'EqualColorMapping') {\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n maps.layers[0].shapeSettings.colorValuePath = 'value';\n maps.layers[0].shapeSettings.colorMapping[0].from = null;\n maps.layers[0].shapeSettings.colorMapping[0].to = null;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = null;\n maps.layers[0].shapeSettings.colorMapping[0].value = 'Low';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = 'Moderate';\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].value = 'High';\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Category';\n maps.refresh();\n }\n if (element === 'DesaturationColorMapping') {\n document.getElementById('text1').style.display = 'block';\n document.getElementById('input1').style.display = 'block';\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (highlightCheckBox.checked) {\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n }\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 6;\n maps.layers[0].shapeSettings.colorMapping[0].color = ['#F0D6AD', '#19547B'];\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 6';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].color = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = null;\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n }\n }\n });\n sampleValue.appendTo('#colorMapping');\n"} \ No newline at end of file diff --git a/src/maps/color-mapping.html b/src/maps/color-mapping.html index e1998a06..7c64368f 100644 --- a/src/maps/color-mapping.html +++ b/src/maps/color-mapping.html @@ -23,14 +23,15 @@
        +
        - - @@ -80,6 +85,7 @@ Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a marker or tap a marker in touch enabled devices.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/color-mapping.js b/src/maps/color-mapping.js index a37baf96..38754930 100644 --- a/src/maps/color-mapping.js +++ b/src/maps/color-mapping.js @@ -1,10 +1,12 @@ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var templatetheme = location.hash.split('/')[1]; - templatetheme = templatetheme ? templatetheme : 'Material'; - args.maps.theme = (templatetheme.charAt(0).toUpperCase() + templatetheme.slice(1)); + var mapTheme = location.hash.split('/')[1]; + mapTheme = mapTheme ? mapTheme : 'Material'; + args.maps.theme = (mapTheme.charAt(0).toUpperCase() + mapTheme.slice(1)); }, + // custom code end titleSettings: { text: 'Spring Precipitation Averages of US States', textStyle: { @@ -21,11 +23,7 @@ this.default = function () { width: '80%', mode: 'Interactive', titleStyle: { - size: '18px', - fontStyle: 'Medium', - fontFamily: 'Roboto, Noto, Sans-serif', - fontWeight: 'Medium', - opacity: 0.5 + size: '18px' }, title: { text: 'Inches' @@ -74,9 +72,10 @@ this.default = function () { ] }); maps.appendTo('#default-container'); + // Code for Property Panel var opacity; var highlightCheckBox = new ej.buttons.CheckBox({ - change: opacity, checked: false, disabled: true + change: opacity, checked: false }, '#opacity'); document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove = document.getElementById('minopacity').onchange = function () { @@ -102,6 +101,10 @@ this.default = function () { var minOpacity = document.getElementById('minopacity'); var maxOpacity = document.getElementById('maxopacity'); if (e.checked) { + document.getElementById('text3').style.display = 'block'; + document.getElementById('input3').style.display = 'block'; + document.getElementById('text2').style.display = 'block'; + document.getElementById('input2').style.display = 'block'; maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value); maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value); maps.layers[0].shapeSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value); @@ -110,6 +113,10 @@ this.default = function () { maxOpacity.disabled = false; } else { + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null; maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null; maps.layers[0].shapeSettings.colorMapping[1].minOpacity = null; @@ -126,7 +133,12 @@ this.default = function () { change: function () { var element = sampleValue.value.toString(); if (element === 'RangeColorMapping') { - highlightCheckBox.disabled = true; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; + document.getElementById('text1').style.display = 'none'; + document.getElementById('input1').style.display = 'none'; + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; maps.layers[0].shapeSettings.colorValuePath = 'inches'; maps.layers[0].shapeSettings.colorMapping[0].from = 0.1; maps.layers[0].shapeSettings.colorMapping[0].to = 1; @@ -162,7 +174,12 @@ this.default = function () { maps.refresh(); } else if (element === 'EqualColorMapping') { - highlightCheckBox.disabled = true; + document.getElementById('text1').style.display = 'none'; + document.getElementById('input1').style.display = 'none'; + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; maps.layers[0].shapeSettings.colorValuePath = 'value'; maps.layers[0].shapeSettings.colorMapping[0].from = null; maps.layers[0].shapeSettings.colorMapping[0].to = null; @@ -198,9 +215,15 @@ this.default = function () { maps.refresh(); } if (element === 'DesaturationColorMapping') { + document.getElementById('text1').style.display = 'block'; + document.getElementById('input1').style.display = 'block'; var minOpacity = document.getElementById('minopacity'); var maxOpacity = document.getElementById('maxopacity'); if (highlightCheckBox.checked) { + document.getElementById('text2').style.display = 'block'; + document.getElementById('input2').style.display = 'block'; + document.getElementById('text3').style.display = 'block'; + document.getElementById('input3').style.display = 'block'; maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value); maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value); } @@ -241,7 +264,6 @@ this.default = function () { maps.layers[0].shapeSettings.colorMapping[5].value = null; maps.legendSettings.title.text = 'Inches'; maps.refresh(); - highlightCheckBox.disabled = false; } } }); diff --git a/src/maps/curved-lines-stack.json b/src/maps/curved-lines-stack.json index 9c94137d..81a525a6 100644 --- a/src/maps/curved-lines-stack.json +++ b/src/maps/curved-lines-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        Source:\n www.tibettravel.org\n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n centerPosition: {\n latitude: 30.41078179084589,\n longitude: 90.52734374999999\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 3.5\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: 'Flights from India to China',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: [\n {\n name: 'India'\n },\n {\n name: 'China'\n }\n ],\n shapeSettings: {\n colorValuePath: 'name',\n fill: '#fcfbf9',\n border: {\n width: 0.1,\n color: 'black'\n },\n colorMapping: [\n {\n value: 'China',\n color: '#f7d083'\n },\n {\n value: 'India',\n color: '#FFFE99'\n }\n ]\n },\n navigationLineSettings: window.navigationData,\n markerSettings: [\n {\n dataSource: window.markerLocation,\n visible: true,\n shape: 'Circle',\n fill: 'white',\n border: { width: 1, color: 'black' },\n width: 4,\n animationDuration: 0,\n tooltipSettings: {\n visible: true,\n valuePath: 'title'\n }\n },\n {\n dataSource: [\n { 'name': 'New Delhi',\n 'latitude': 28.6139391,\n 'longitude': 77.2090212\n }\n ],\n visible: true,\n template: '
        New Delhi' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: -50,\n y: 10\n }\n },\n {\n dataSource: [\n {\n 'name': 'Mumbai',\n 'latitude': 19.0759837,\n 'longitude': 72.8776559\n }\n ],\n visible: true,\n template: '
        Mumbai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Chennai',\n 'latitude': 13.0826802,\n 'longitude': 80.2707184\n }\n ],\n visible: true,\n template: '
        Chennai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kolkata',\n 'latitude': 22.572646,\n 'longitude': 88.363895\n }\n ],\n visible: true,\n template: '
        Kolkata' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kunming',\n 'latitude': 24.880095,\n 'longitude': 102.832891\n }\n ],\n visible: true,\n template: '
        Kunming' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Beijing',\n 'latitude': 39.9041999,\n 'longitude': 116.4073963\n }\n ],\n visible: true,\n template: '
        Beijing' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Shanghai',\n 'latitude': 31.2303904,\n 'longitude': 121.4737021\n }\n ],\n visible: true,\n template: '
        Shanghai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Hong Kong',\n 'latitude': 22.396428,\n 'longitude': 114.109497\n }\n ],\n visible: true,\n template: '
        Hong Kong' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 20,\n y: 20\n }\n },\n {\n dataSource: [\n {\n 'name': 'Guangzhou',\n 'latitude': 23.12911,\n 'longitude': 113.264385\n }\n ],\n visible: true,\n template: '
        Guangzhou' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 35,\n y: -10\n }\n }\n ],\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json')\n }\n ],\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n www.tibettravel.org\n
        \n
        \n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n\n centerPosition: {\n latitude: 30.41078179084589,\n longitude: 90.52734374999999\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 3.5\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: 'Flights from India to China',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: [\n {\n name: 'India'\n },\n {\n name: 'China'\n }\n ],\n shapeSettings: {\n colorValuePath: 'name',\n fill: '#fcfbf9',\n border: {\n width: 0.1,\n color: 'black'\n },\n colorMapping: [\n {\n value: 'China',\n color: '#f7d083'\n },\n {\n value: 'India',\n color: '#FFFE99'\n }\n ]\n },\n navigationLineSettings: window.navigationData,\n markerSettings: [\n {\n dataSource: window.markerLocation,\n visible: true,\n shape: 'Circle',\n fill: 'white',\n border: { width: 1, color: 'black' },\n width: 4,\n animationDuration: 0,\n tooltipSettings: {\n visible: true,\n valuePath: 'title'\n }\n },\n {\n dataSource: [\n { 'name': 'New Delhi',\n 'latitude': 28.6139391,\n 'longitude': 77.2090212\n }\n ],\n visible: true,\n template: '
        New Delhi' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: -50,\n y: 10\n }\n },\n {\n dataSource: [\n {\n 'name': 'Mumbai',\n 'latitude': 19.0759837,\n 'longitude': 72.8776559\n }\n ],\n visible: true,\n template: '
        Mumbai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Chennai',\n 'latitude': 13.0826802,\n 'longitude': 80.2707184\n }\n ],\n visible: true,\n template: '
        Chennai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kolkata',\n 'latitude': 22.572646,\n 'longitude': 88.363895\n }\n ],\n visible: true,\n template: '
        Kolkata' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kunming',\n 'latitude': 24.880095,\n 'longitude': 102.832891\n }\n ],\n visible: true,\n template: '
        Kunming' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Beijing',\n 'latitude': 39.9041999,\n 'longitude': 116.4073963\n }\n ],\n visible: true,\n template: '
        Beijing' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Shanghai',\n 'latitude': 31.2303904,\n 'longitude': 121.4737021\n }\n ],\n visible: true,\n template: '
        Shanghai' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Hong Kong',\n 'latitude': 22.396428,\n 'longitude': 114.109497\n }\n ],\n visible: true,\n template: '
        Hong Kong' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 20,\n y: 20\n }\n },\n {\n dataSource: [\n {\n 'name': 'Guangzhou',\n 'latitude': 23.12911,\n 'longitude': 113.264385\n }\n ],\n visible: true,\n template: '
        Guangzhou' +\n '
        ',\n animationDuration: 0,\n offset: {\n x: 35,\n y: -10\n }\n }\n ],\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json')\n }\n ],\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/maps/curved-lines.html b/src/maps/curved-lines.html index 9e5fad45..e70bd832 100644 --- a/src/maps/curved-lines.html +++ b/src/maps/curved-lines.html @@ -1,5 +1,6 @@
        + diff --git a/src/maps/curved-lines.js b/src/maps/curved-lines.js index 8b621467..1dd04def 100644 --- a/src/maps/curved-lines.js +++ b/src/maps/curved-lines.js @@ -1,10 +1,12 @@ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var theme = location.hash.split('/')[1]; - theme = theme ? theme : 'Material'; - args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); + var selecttheme = location.hash.split('/')[1]; + selecttheme = selecttheme ? selecttheme : 'Material'; + args.maps.theme = (selecttheme.charAt(0).toUpperCase() + selecttheme.slice(1)); }, + // custom code end centerPosition: { latitude: 30.41078179084589, longitude: 90.52734374999999 diff --git a/src/maps/cyber-attack-map-stack.json b/src/maps/cyber-attack-map-stack.json new file mode 100644 index 00000000..8d89a4e2 --- /dev/null +++ b/src/maps/cyber-attack-map-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n

        \n
        {{:name}}
        \n
        \n
        \n
        \n

        \n
        United States
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * sample for cyber attack map\n */\n\n var maps = new ej.maps.Maps({\n titleSettings: {\n text: 'Cyber Attack Map of United States',\n textStyle: { size: '16px' }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n border: { color: '#D2691E', width: 0.5 },\n fill: '#FFFFE0'\n },\n navigationLineSettings: [\n {\n dashArray: '5,1', visible: true,\n angle: -0.3, color: '#ffffb3',\n latitude: [15.758401, 39.864171],\n longitude: [101.155642, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: 0.4, color: '#ffffb3',\n latitude: [57.725612, 39.864171],\n longitude: [-101.802160, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.2, color: '#ffffb3',\n latitude: [39.634177, 39.864171],\n longitude: [42.410740, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.1, color: '#ffffb3',\n latitude: [22.860388, 39.864171],\n longitude: [79.739066, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.1, color: '#ffffb3',\n latitude: [-24.763753, 39.864171],\n longitude: [134.852191, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.4, color: '#ffffb3',\n latitude: [34.611098, 39.864171],\n longitude: [104.189872, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.8, color: '#ffffb3',\n latitude: [-12.354844, 39.864171],\n longitude: [-49.017709, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.4, color: '#ffffb3',\n latitude: [3.450682, 39.864171],\n longitude: [-72.943141, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.7, color: '#ffffb3',\n latitude: [62.448268, 39.864171],\n longitude: [97.251835, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.3, color: '#ffffb3',\n latitude: [65.931163, 39.864171],\n longitude: [-45.812820, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.2, color: '#ffffb3',\n latitude: [-21.206222, 39.864171],\n longitude: [17.122018, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.2, color: '#ffffb3',\n latitude: [35.839969, 39.864171],\n longitude: [137.904641, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.2, color: '#ffffb3',\n latitude: [46.582184, 39.864171],\n longitude: [2.232903, -100.854833],\n },\n {\n dashArray: '5,1', visible: true,\n angle: -0.2, color: '#ffffb3',\n latitude: [0.390617, 39.864171],\n longitude: [37.893734, -100.854833],\n }\n ],\n markerSettings: [\n {\n visible: true, height: 15, width: 15,\n template: '#template', animationDuration: 0,\n dataSource: [\n { latitude: 15.758401, longitude: 101.155642, name: 'Thailand' },\n { latitude: 57.725612, longitude: -101.802160, name: 'Canada' },\n { latitude: 39.634177, longitude: 42.410740, name: 'Turkey' },\n { latitude: 22.860388, longitude: 79.739066, name: 'India' },\n { latitude: -24.763753, longitude: 134.852191, name: 'Australia' },\n { latitude: 34.611098, longitude: 104.189872, name: 'China' },\n { latitude: -12.354844, longitude: -49.017709, name: 'Brazil' },\n { latitude: 3.450682, longitude: -72.943141, name: 'Colombia' },\n { latitude: 62.448268, longitude: 97.251835, name: 'Russia' },\n { latitude: 65.931163, longitude: -45.812820, name: 'Greenland' },\n { latitude: -21.206222, longitude: 17.122018, name: 'Namibia' },\n { latitude: 35.839969, longitude: 137.904641, name: 'Japan' },\n { latitude: 46.582184, longitude: 2.232903, name: 'France' },\n { latitude: 0.390617, longitude: 37.893734, name: 'Kenya' }\n ]\n },\n {\n visible: true, height: 15, width: 15,\n template: '#parent_template', animationDuration: 0,\n dataSource: [{\n latitude: 39.864171,\n longitude: -100.854833\n }]\n },\n ]\n },\n ],\n\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/cyber-attack-map.html b/src/maps/cyber-attack-map.html new file mode 100644 index 00000000..103f9ff7 --- /dev/null +++ b/src/maps/cyber-attack-map.html @@ -0,0 +1,136 @@ +
        +
        +
        + + +
        +

        + This sample depicts a cyberattack map, which displays the cyberattacks and threats from various countries to the + USA. +

        +
        +
        +

        + In this example, you can see how to dynamically display a navigation line with linear animation. Marker + templates are added to denote the source and destination locations. Any custom HTML element can be used as a + marker. +

        +
        +

        Injecting Module

        +

        + The maps component features are segregated into individual modules by feature. To use marker template, inject + the Marker module using the Maps.Inject(Marker) method, and use the navigation lines + by injecting the NavigationLine module. +

        +
        + \ No newline at end of file diff --git a/src/maps/cyber-attack-map.js b/src/maps/cyber-attack-map.js new file mode 100644 index 00000000..9e782bff --- /dev/null +++ b/src/maps/cyber-attack-map.js @@ -0,0 +1,186 @@ +/** + * sample for cyber attack map + */ +this.default = function () { + var maps = new ej.maps.Maps({ + titleSettings: { + text: 'Cyber Attack Map of United States', + textStyle: { size: '16px' } + }, + layers: [ + { + shapeData: new ej.maps.MapAjax('./src/maps/map-data/world-map.json'), + shapeSettings: { + border: { color: '#D2691E', width: 0.5 }, + fill: '#FFFFE0' + }, + navigationLineSettings: [ + { + dashArray: '5,1', visible: true, + angle: -0.3, color: '#ffffb3', + latitude: [15.758401, 39.864171], + longitude: [101.155642, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: 0.4, color: '#ffffb3', + latitude: [57.725612, 39.864171], + longitude: [-101.802160, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.2, color: '#ffffb3', + latitude: [39.634177, 39.864171], + longitude: [42.410740, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.1, color: '#ffffb3', + latitude: [22.860388, 39.864171], + longitude: [79.739066, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.1, color: '#ffffb3', + latitude: [-24.763753, 39.864171], + longitude: [134.852191, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.4, color: '#ffffb3', + latitude: [34.611098, 39.864171], + longitude: [104.189872, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.8, color: '#ffffb3', + latitude: [-12.354844, 39.864171], + longitude: [-49.017709, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.4, color: '#ffffb3', + latitude: [3.450682, 39.864171], + longitude: [-72.943141, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.7, color: '#ffffb3', + latitude: [62.448268, 39.864171], + longitude: [97.251835, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.3, color: '#ffffb3', + latitude: [65.931163, 39.864171], + longitude: [-45.812820, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.2, color: '#ffffb3', + latitude: [-21.206222, 39.864171], + longitude: [17.122018, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.2, color: '#ffffb3', + latitude: [35.839969, 39.864171], + longitude: [137.904641, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.2, color: '#ffffb3', + latitude: [46.582184, 39.864171], + longitude: [2.232903, -100.854833], + }, + { + dashArray: '5,1', visible: true, + angle: -0.2, color: '#ffffb3', + latitude: [0.390617, 39.864171], + longitude: [37.893734, -100.854833], + } + ], + markerSettings: [ + { + visible: true, height: 15, width: 15, + template: '#template', animationDuration: 0, + dataSource: [ + { latitude: 15.758401, longitude: 101.155642, name: 'Thailand' }, + { latitude: 57.725612, longitude: -101.802160, name: 'Canada' }, + { latitude: 39.634177, longitude: 42.410740, name: 'Turkey' }, + { latitude: 22.860388, longitude: 79.739066, name: 'India' }, + { latitude: -24.763753, longitude: 134.852191, name: 'Australia' }, + { latitude: 34.611098, longitude: 104.189872, name: 'China' }, + { latitude: -12.354844, longitude: -49.017709, name: 'Brazil' }, + { latitude: 3.450682, longitude: -72.943141, name: 'Colombia' }, + { latitude: 62.448268, longitude: 97.251835, name: 'Russia' }, + { latitude: 65.931163, longitude: -45.812820, name: 'Greenland' }, + { latitude: -21.206222, longitude: 17.122018, name: 'Namibia' }, + { latitude: 35.839969, longitude: 137.904641, name: 'Japan' }, + { latitude: 46.582184, longitude: 2.232903, name: 'France' }, + { latitude: 0.390617, longitude: 37.893734, name: 'Kenya' } + ] + }, + { + visible: true, height: 15, width: 15, + template: '#parent_template', animationDuration: 0, + dataSource: [{ + latitude: 39.864171, + longitude: -100.854833 + }] + }, + ] + }, + ], + // custom code start + load: function (args) { + var theme = location.hash.split('/')[1]; + theme = theme ? theme : 'Material'; + args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); + }, + loaded: function (args) { + var lines = args.maps.layers[0].navigationLineSettings; + var animation = function (i) { + var line = document.getElementById('container_LayerIndex_0_NavigationIndex_' + i + '_Line0'); + var marker = document.getElementById('container_LayerIndex_0_MarkerIndex_0_dataIndex_' + i); + if (line) { + line.style.strokeDasharray = '1000'; + line.style.strokeDashoffset = '1000'; + if (i < 4) { + line.style.animation = marker.style.animation = 'dash 5s linear 0s infinite'; + marker.style.visibility = 'hidden'; + setTimeout(function () { + marker.style.visibility = 'visible'; + }, 0); + } + else if (i < 8) { + line.style.animation = marker.style.animation = 'dash 6s linear 2s infinite'; + marker.style.visibility = 'hidden'; + setTimeout(function () { + marker.style.visibility = 'visible'; + }, 2000); + } + else if (i < 12) { + line.style.animation = marker.style.animation = 'dash 6s linear 4.5s infinite'; + marker.style.visibility = 'hidden'; + setTimeout(function () { + marker.style.visibility = 'visible'; + }, 4500); + } + else { + line.style.animation = marker.style.animation = 'dash 5s linear 7s infinite'; + marker.style.visibility = 'hidden'; + setTimeout(function () { + marker.style.visibility = 'visible'; + }, 7000); + } + } + }; + for (var i = 0; i < lines.length; i++) { + animation(i); + } + } + // custom code end + }); + maps.appendTo('#container'); +}; \ No newline at end of file diff --git a/src/maps/data-label-stack.json b/src/maps/data-label-stack.json index bfce19e2..a77ba555 100644 --- a/src/maps/data-label-stack.json +++ b/src/maps/data-label-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        -
        Color Mapping
        +         		+
        Color Mapping Type
        		 +
        -
        Change Opacity
        +         		-
        +
        -
        Min Opacity
        +         		- +
        -
        Max Opacity
        +         		- +
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Show Labels
        \n         		\n \n
        \n
        Smart label mode
        \n         		\n \n
        \n
        Intersect action
        \n         		\n \n
        \n \n
        \n \n \n \n\n
        ","index.js":"{{ripple}}/**\n * Datalabel sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var labeltheme = location.hash.split('/')[1];\n labeltheme = labeltheme ? labeltheme : 'Material';\n args.maps.theme = (labeltheme.charAt(0).toUpperCase() + labeltheme.slice(1));\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n\t\t\t\t tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n var intersectaction = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: function () {\n maps.layers[0].dataLabelSettings.intersectionAction = intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n var smartlabelmode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: function () {\n maps.layers[0].dataLabelSettings.smartLabelMode = smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = function () {\n var element = (document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Show Labels
        \n         		\n \n
        \n
        Smart label mode
        \n         		\n \n
        \n
        Intersect action
        \n         		\n \n
        \n \n
        \n \n \n \n","index.js":"{{ripple}}/**\n * Datalabel sample\n */\n\n var maps = new ej.maps.Maps({\n\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n\t\t\t\t tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n // Code for Property Panel\n var intersectaction = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: function () {\n maps.layers[0].dataLabelSettings.intersectionAction = intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n var smartlabelmode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: function () {\n maps.layers[0].dataLabelSettings.smartLabelMode = smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = function () {\n var element = (document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"} \ No newline at end of file diff --git a/src/maps/data-label.html b/src/maps/data-label.html index 79ad9535..6b5b18e1 100644 --- a/src/maps/data-label.html +++ b/src/maps/data-label.html @@ -1,6 +1,7 @@
        +
        @@ -64,9 +65,10 @@ padding: 0px !important; } - + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/data-label.js b/src/maps/data-label.js index ede59ccc..8727067a 100644 --- a/src/maps/data-label.js +++ b/src/maps/data-label.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var labeltheme = location.hash.split('/')[1]; labeltheme = labeltheme ? labeltheme : 'Material'; args.maps.theme = (labeltheme.charAt(0).toUpperCase() + labeltheme.slice(1)); }, + // custom code end zoomSettings: { enable: false }, @@ -30,6 +32,7 @@ this.default = function () { ] }); maps.appendTo('#datalabel'); + // Code for Property Panel var intersectaction = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select intersect action', diff --git a/src/maps/default-stack.json b/src/maps/default-stack.json index 2ed61907..e9ee1301 100644 --- a/src/maps/default-stack.json +++ b/src/maps/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Sample for maps default\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var defaulttheme = location.hash.split('/')[1];\n defaulttheme = defaulttheme ? defaulttheme : 'Material';\n args.maps.theme = (defaulttheme.charAt(0).toUpperCase() + defaulttheme.slice(1));\n },\n titleSettings: {\n text: 'YouTube office locations',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/default-datasource.json'),\n shapeSettings: {\n colorValuePath: 'color',\n },\n markerSettings: [\n {\n visible: true,\n dataSource: [\n { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno'},\n { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel'},\n { latitude: 40.7424509, longitude: -74.0081468, name: 'New York'},\n { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro'},\n { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto'},\n { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris'},\n { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin'},\n { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai'},\n { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato'},\n { latitude: 51.5326602, longitude: -0.1262422, name: 'London'}\n ],\n shape: 'Image',\n imageUrl: '//npmci.syncfusion.com/production/demos/src/maps/images/ballon.png',\n height: 20,\n width: 20,\n offset: {\n y: -10,\n x: 0\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n animationDuration: 0\n },\n {\n visible: true,\n tooltipSettings: {\n visible: true\n },\n template: '
        Asia' +\n '
        ',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Australia' +\n '
        ',\n dataSource: [\n { latitude: -25.88583769986199, longitude: 134.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Africa' +\n '
        ',\n dataSource: [\n { latitude: 16.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Europe' +\n '
        ',\n dataSource: [\n { latitude: 49.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        North America' +\n '
        ',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        South America' +\n '
        ',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Sample for maps default\n */\n\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'YouTube office locations',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/default-datasource.json'),\n shapeSettings: {\n colorValuePath: 'color',\n },\n markerSettings: [\n {\n visible: true,\n dataSource: [\n { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno'},\n { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel'},\n { latitude: 40.7424509, longitude: -74.0081468, name: 'New York'},\n { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro'},\n { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto'},\n { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris'},\n { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin'},\n { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai'},\n { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato'},\n { latitude: 51.5326602, longitude: -0.1262422, name: 'London'}\n ],\n shape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/maps/images/ballon.png',\n height: 20,\n width: 20,\n offset: {\n y: -10,\n x: 0\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n animationDuration: 0\n },\n {\n visible: true,\n tooltipSettings: {\n visible: true\n },\n template: '
        Asia' +\n '
        ',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Australia' +\n '
        ',\n dataSource: [\n { latitude: -25.88583769986199, longitude: 134.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Africa' +\n '
        ',\n dataSource: [\n { latitude: 16.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Europe' +\n '
        ',\n dataSource: [\n { latitude: 49.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        North America' +\n '
        ',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        South America' +\n '
        ',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/maps/default.html b/src/maps/default.html index 136ebe7c..1bdb67d4 100644 --- a/src/maps/default.html +++ b/src/maps/default.html @@ -1,6 +1,7 @@
        + diff --git a/src/maps/default.js b/src/maps/default.js index 97b3eff8..03f96a7b 100644 --- a/src/maps/default.js +++ b/src/maps/default.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var defaulttheme = location.hash.split('/')[1]; defaulttheme = defaulttheme ? defaulttheme : 'Material'; args.maps.theme = (defaulttheme.charAt(0).toUpperCase() + defaulttheme.slice(1)); }, + // custom code end titleSettings: { text: 'YouTube office locations', textStyle: { diff --git a/src/maps/drilldown-stack.json b/src/maps/drilldown-stack.json index 55059ac8..019fa2dc 100644 --- a/src/maps/drilldown-stack.json +++ b/src/maps/drilldown-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n \n World Map \n\n

         >> 

        \n

        \n
        \n
        \n
        \n

        Click on a shape to drill

        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n \n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n shapeSelected: function (args) {\n var shape = args.shapeData.continent;\n if(maps.baseLayerIndex === 0){\n if (shape === 'Africa') {\n maps.baseLayerIndex = 1;\n maps.refresh();\n }\n else if (shape === 'Europe') {\n maps.baseLayerIndex = 2;\n maps.refresh();\n }\n else if (shape === 'Asia') {\n maps.baseLayerIndex = 3;\n maps.refresh();\n }\n else if (shape === 'North America') {\n maps.baseLayerIndex = 4;\n maps.refresh();\n }\n else if (shape === 'South America') {\n maps.baseLayerIndex = 5;\n maps.refresh();\n }\n else if (shape === 'Australia') {\n maps.baseLayerIndex = 6;\n maps.refresh();\n }\n var button = document.getElementById('button');\n button.style.display = 'block';\n document.getElementById('content').innerHTML = '';\n document.getElementById('category').style.visibility = 'visible';\n document.getElementById('text').innerHTML = shape;\n document.getElementById('symbol').style.visibility = 'visible';\n }\n \n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n layerType: 'Geometry',\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/default-datasource.json'),\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapeSettings: {\n colorValuePath: 'drillColor'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'continent'\n },\n markerSettings: [\n {\n visible: true,\n tooltipSettings: {\n visible: true\n },\n template: '
        Asia' +\n '
        ',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Australia' +\n '
        ',\n dataSource: [\n { latitude: -28.88583769986199, longitude: 130.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Africa' +\n '
        ',\n dataSource: [\n { latitude: 10.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Europe' +\n '
        ',\n dataSource: [\n { latitude: 47.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
        North America' +\n '
        ',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        South America' +\n '
        ',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#80306A'\n },\n highlightSettings: {\n enable: true,\n fill: '#80306A'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/europe.json'),\n shapeSettings: {\n fill: '#622D6C'\n },\n highlightSettings: {\n enable: true,\n fill: '#622D6C'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/asia.json'),\n shapeSettings: {\n fill: '#462A6D'\n },\n highlightSettings: {\n enable: true,\n fill: '#462A6D'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/north-america.json'),\n shapeSettings: {\n fill: '#C13664'\n },\n highlightSettings: {\n enable: true,\n fill: '#C13664'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/south-america.json'),\n shapeSettings: {\n fill: '#9C3367'\n },\n highlightSettings: {\n enable: true,\n fill: '#9C3367'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/oceania.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/australia.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n });\n maps.appendTo('#mapdrilldown');\n document.getElementById('category').onclick = function () {\n maps.baseLayerIndex = 0;\n maps.refresh();\n var button = document.getElementById('button');\n button.style.display = 'none';\n document.getElementById('content').innerHTML = 'Click on a shape to drill';\n document.getElementById('category').style.visibility = 'hidden';\n document.getElementById('text').innerHTML = '';\n document.getElementById('symbol').style.visibility = 'hidden';\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n World Map \n\n

         >> 

        \n

        \n
        \n
        \n
        \n

        Click on a shape to drill

        \n
        \n\n\n","index.js":"{{ripple}}\n var touchmove = false;\n var maps = new ej.maps.Maps({\n\n shapeSelected: function (args) {\n var shape = args.shapeData.continent;\n if(maps.baseLayerIndex === 0){\n if (shape === 'Africa') {\n maps.baseLayerIndex = 1;\n maps.refresh();\n }\n else if (shape === 'Europe') {\n maps.baseLayerIndex = 2;\n maps.refresh();\n }\n else if (shape === 'Asia') {\n maps.baseLayerIndex = 3;\n maps.refresh();\n }\n else if (shape === 'North America') {\n maps.baseLayerIndex = 4;\n maps.refresh();\n }\n else if (shape === 'South America') {\n maps.baseLayerIndex = 5;\n maps.refresh();\n }\n else if (shape === 'Australia') {\n maps.baseLayerIndex = 6;\n maps.refresh();\n }\n var button = document.getElementById('button');\n button.style.display = 'block';\n document.getElementById('content').innerHTML = '';\n document.getElementById('category').style.visibility = 'visible';\n document.getElementById('text').innerHTML = shape;\n document.getElementById('symbol').style.visibility = 'visible';\n }\n touchmove = false;\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n layerType: 'Geometry',\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/default-datasource.json'),\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n colorValuePath: 'drillColor'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'continent'\n },\n markerSettings: [\n {\n visible: true,\n tooltipSettings: {\n visible: true\n },\n template: '
        Asia' +\n '
        ',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Australia' +\n '
        ',\n dataSource: [\n { latitude: -28.88583769986199, longitude: 130.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Africa' +\n '
        ',\n dataSource: [\n { latitude: 10.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        Europe' +\n '
        ',\n dataSource: [\n { latitude: 47.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
        North America' +\n '
        ',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        South America' +\n '
        ',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#80306A'\n },\n highlightSettings: {\n enable: true,\n fill: '#80306A'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/europe.json'),\n shapeSettings: {\n fill: '#622D6C'\n },\n highlightSettings: {\n enable: true,\n fill: '#622D6C'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/asia.json'),\n shapeSettings: {\n fill: '#462A6D'\n },\n highlightSettings: {\n enable: true,\n fill: '#462A6D'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/north-america.json'),\n shapeSettings: {\n fill: '#C13664'\n },\n highlightSettings: {\n enable: true,\n fill: '#C13664'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/south-america.json'),\n shapeSettings: {\n fill: '#9C3367'\n },\n highlightSettings: {\n enable: true,\n fill: '#9C3367'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/oceania.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/australia.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n });\n maps.appendTo('#mapdrilldown');\n // Code for Property Panel\n document.getElementById('category').onclick = function () {\n maps.baseLayerIndex = 0;\n maps.refresh();\n var button = document.getElementById('button');\n button.style.display = 'none';\n document.getElementById('content').innerHTML = 'Click on a shape to drill';\n document.getElementById('category').style.visibility = 'hidden';\n document.getElementById('text').innerHTML = '';\n document.getElementById('symbol').style.visibility = 'hidden';\n };\n"} \ No newline at end of file diff --git a/src/maps/drilldown.html b/src/maps/drilldown.html index cf91aded..752d7b40 100644 --- a/src/maps/drilldown.html +++ b/src/maps/drilldown.html @@ -1,3 +1,4 @@ +
        \n
        \n\n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        ","index.js":"{{ripple}}/**\n * Earthquake sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var earththeme = location.hash.split('/')[1];\n earththeme = earththeme ? earththeme : 'Material';\n args.maps.theme = (earththeme.charAt(0).toUpperCase() + earththeme.slice(1));\n },\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: true,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps'); \n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        ","index.js":"{{ripple}}/**\n * Earthquake sample\n */\n\n var maps = new ej.maps.Maps({\n\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps'); \n"} \ No newline at end of file diff --git a/src/maps/earthquake.html b/src/maps/earthquake.html index c6302fa8..6287e2f3 100644 --- a/src/maps/earthquake.html +++ b/src/maps/earthquake.html @@ -1,5 +1,6 @@
        + diff --git a/src/maps/earthquake.js b/src/maps/earthquake.js index 5e61b940..293dea2f 100644 --- a/src/maps/earthquake.js +++ b/src/maps/earthquake.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var earththeme = location.hash.split('/')[1]; earththeme = earththeme ? earththeme : 'Material'; args.maps.theme = (earththeme.charAt(0).toUpperCase() + earththeme.slice(1)); }, + // custom code end centerPosition: { latitude: 1.5053645409602877, longitude: 105.14038085937499 diff --git a/src/maps/export-stack.json b/src/maps/export-stack.json index 7b027eca..d618db0a 100644 --- a/src/maps/export-stack.json +++ b/src/maps/export-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Export Type:\n
        \n         		\n
        \n \n
        \n
        \n
        File Name:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var exporttheme = location.hash.split('/')[1];\n exporttheme = exporttheme ? exporttheme : 'Material';\n args.maps.theme = (exporttheme.charAt(0).toUpperCase() + exporttheme.slice(1));\n },\n titleSettings: {\n text: 'Location of the Wonders in the World',\n textStyle: {\n size: '16px'\n },\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n\t\t\t\tshapeSettings: { fill: 'lightgrey', border: { color: 'black', width: 0.1 } },\n markerSettings: [\n {\n animationDuration: 0,\n visible: true,\n dataSource: [\n { longitude: 116.5703749, latitude: 40.4319077, name: 'The Great Wall of China, China ' },\n { longitude: 35.4443622, latitude: 30.3284544, name: 'Petra, Jorden' },\n { longitude: 78.0421552, latitude: 27.1750151, name: 'Taj Mahal, Agra, India' },\n { longitude: 12.4922309, latitude: 41.8902102, name: 'The Roman Colosseum, Rome, Italy' },\n { longitude: -88.5677826, latitude: 20.6842849, name: 'The Chichen Itza, Mexico' },\n { longitude: -72.5449629, latitude: -13.1631412, name: 'Machu Picchu, Peru' },\n { longitude: -43.2104872, latitude: -22.951916, name: 'Christ Redeemer, Rio de janeiro, Brazil' },\n ],\n shape: 'Balloon',\n fill: '#E13E40',\n height: 20,\n width: 15,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ], \n }\n ]\n });\n maps.appendTo('#export-container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 100\n });\n mode.appendTo('#mode');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n maps.export(mode.value, fileName);\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Export Type:\n
        \n         		\n
        \n \n
        \n
        \n
        File Name:
        \n         		\n
        \n \n
        \n
        \n \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Location of the Wonders in the World',\n textStyle: {\n size: '16px'\n },\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n\t\t\t\tshapeSettings: { fill: 'lightgrey', border: { color: 'black', width: 0.1 } },\n markerSettings: [\n {\n animationDuration: 0,\n visible: true,\n dataSource: [\n { longitude: 116.5703749, latitude: 40.4319077, name: 'The Great Wall of China, China ' },\n { longitude: 35.4443622, latitude: 30.3284544, name: 'Petra, Jorden' },\n { longitude: 78.0421552, latitude: 27.1750151, name: 'Taj Mahal, Agra, India' },\n { longitude: 12.4922309, latitude: 41.8902102, name: 'The Roman Colosseum, Rome, Italy' },\n { longitude: -88.5677826, latitude: 20.6842849, name: 'The Chichen Itza, Mexico' },\n { longitude: -72.5449629, latitude: -13.1631412, name: 'Machu Picchu, Peru' },\n { longitude: -43.2104872, latitude: -22.951916, name: 'Christ Redeemer, Rio de janeiro, Brazil' },\n ],\n shape: 'Balloon',\n fill: '#E13E40',\n height: 20,\n width: 15,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ], \n }\n ]\n });\n maps.appendTo('#export-container');\n // Code for Property Panel\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 100\n });\n mode.appendTo('#mode');\n var togglebtn = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n maps.export(mode.value, fileName);\n };\n"} \ No newline at end of file diff --git a/src/maps/export.html b/src/maps/export.html index 556a6478..f5cc5afb 100644 --- a/src/maps/export.html +++ b/src/maps/export.html @@ -2,11 +2,13 @@
        +
        +
        @@ -62,6 +64,7 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/export.js b/src/maps/export.js index 4ef49ff2..5c7c53d6 100644 --- a/src/maps/export.js +++ b/src/maps/export.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var exporttheme = location.hash.split('/')[1]; exporttheme = exporttheme ? exporttheme : 'Material'; args.maps.theme = (exporttheme.charAt(0).toUpperCase() + exporttheme.slice(1)); }, + // custom code end titleSettings: { text: 'Location of the Wonders in the World', textStyle: { @@ -45,6 +47,7 @@ this.default = function () { ] }); maps.appendTo('#export-container'); + // Code for Property Panel var mode = new ej.dropdowns.DropDownList({ index: 0, width: 100 diff --git a/src/maps/heat-map-stack.json b/src/maps/heat-map-stack.json index e55a7671..231ca03d 100644 --- a/src/maps/heat-map-stack.json +++ b/src/maps/heat-map-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Heatmap sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var heatmaptheme = location.hash.split('/')[1];\n heatmaptheme = heatmaptheme ? heatmaptheme : 'Material';\n args.maps.theme = (heatmaptheme.charAt(0).toUpperCase() + heatmaptheme.slice(1));\n },\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n\t\t\twidth: '350',\n alignment: 'Center',\n labelDisplayMode: 'Trim'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name}
        Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Heatmap sample\n */\n\n var maps = new ej.maps.Maps({\n\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n\t\t\twidth: '350',\n alignment: 'Center',\n labelDisplayMode: 'Trim'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name}
        Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/heat-map.html b/src/maps/heat-map.html index 0902028e..88e7b701 100644 --- a/src/maps/heat-map.html +++ b/src/maps/heat-map.html @@ -1,5 +1,6 @@
        + diff --git a/src/maps/heat-map.js b/src/maps/heat-map.js index 79a27fb4..1a1c535a 100644 --- a/src/maps/heat-map.js +++ b/src/maps/heat-map.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var heatmaptheme = location.hash.split('/')[1]; heatmaptheme = heatmaptheme ? heatmaptheme : 'Material'; args.maps.theme = (heatmaptheme.charAt(0).toUpperCase() + heatmaptheme.slice(1)); }, + // custom code end format: 'n', useGroupingSeparator: true, titleSettings: { diff --git a/src/maps/highlighted-region-stack.json b/src/maps/highlighted-region-stack.json index b1bc208b..0b7ef3a7 100644 --- a/src/maps/highlighted-region-stack.json +++ b/src/maps/highlighted-region-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        ATM locations in Oklahoma, USA
        \n
        \n
        \n\n
        \n\n
        ","index.js":"{{ripple}}/**\n * Highlighted region sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var highlighttheme = location.hash.split('/')[1];\n highlighttheme = highlighttheme ? highlighttheme : 'Material';\n args.maps.theme = (highlighttheme.charAt(0).toUpperCase() + highlighttheme.slice(1));\n },\n centerPosition: {\n latitude: 35.65, longitude: -97.3\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 1.75\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/oklahoma.json'),\n shapeSettings: {\n fill: '#F5F5F5',\n border: { color: '#EEDA97', width: 1 }\n },\n markerSettings: [\n {\n width: 20,\n height: 20,\n animationDuration: 0,\n visible: true,\n shape: 'Image',\n imageUrl: '//npmci.syncfusion.com/production/demos/src/maps/images/ballon.png',\n fill: '#000080',\n border: {\n color: 'transparent'\n },\n dataSource: [\n {\n latitude: 35.6379762, longitude: -97.4823761\n }, {\n latitude: 35.5676663, longitude: -97.5128031\n }, {\n latitude: 35.5412361, longitude: -97.601552\n }, {\n latitude: 35.5451471, longitude: -97.5661039\n }, {\n latitude: 35.5120376, longitude: -97.5918531\n }, {\n latitude: 35.5112516, longitude: -97.5843\n }, {\n latitude: 35.4737072, longitude: -97.5158072\n }, {\n latitude: 35.4575239, longitude: -97.6179457\n }, {\n latitude: 35.4362676, longitude: -97.5998354\n }, {\n latitude: 35.3954872, longitude: -97.5962305\n }, {\n latitude: 35.3492258, longitude: -97.5294113\n },\n {\n latitude: 35.5260794, longitude: -98.7032318\n },\n {\n latitude: 34.7827916, longitude: -98.3001709\n },\n {\n latitude: 34.0793936, longkitude: -98.5583496\n },\n {\n latitude: 36.1434199, longitude: -97.0690155\n },\n {\n latitude: 36.0170318, longitude: -96.11063\n },\n {\n latitude: 36.1608845, longitude: -96.0205078\n },\n {\n latitude: 36.1323292, longitude: -95.9624863\n },\n {\n latitude: 36.1317746, longitude: -95.9046364\n },\n {\n latitude: 36.1604341, longitude: -95.8885002\n },\n ]\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 130,\n height: 130,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 35.5112516,\n longitude: -97.5843,\n text: '10/18 ATMs'\n }\n ],\n border: {\n color: 'transparent'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n }\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 100,\n height: 100,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 36.0808845,\n longitude: -96.0205078,\n text: '5/18 ATMs'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n },\n border: {\n color: 'transparent'\n }\n },\n {\n visible: true,\n template: '
        {{:name}}
        ',\n dataSource: [\n {\n longitude: -101.9450281, latitude: 35.2018863, name: 'Amarillo'\n },\n {\n longitude: -98.0971969, latitude: 35.5514624, name: 'El Reno'\n },\n {\n longitude: -97.8432238, latitude: 35.5150073, name: 'Yukon'\n },\n {\n longitude: -97.2557752, latitude: 35.4933852, name: 'Harrah'\n },\n {\n longitude: -97.1019391, latitude: 35.3620257, name: 'Shawnee'\n },\n {\n longitude: -97.072877, latitude: 35.6853011, name: 'Wellston'\n },\n {\n longitude: -96.2093353, latitude: 36.133417, name: 'Lotsee'\n },\n {\n longitude: -96.3077788, latitude: 36.1879088, name: 'Sand Springs'\n },\n {\n longitude: -98.7075369, latitude: 35.931371, name: 'Oakwood'\n },\n {\n longitude: -98.0003367, latitude: 35.0403272, name: 'Chickasha'\n },\n {\n longitude: -97.1836494, latitude: 36.4595554, name: 'Red Rock'\n },\n {\n longitude: -96.7148021, latitude: 35.4859752, name: 'Prague'\n },\n {\n longitude: -97.9339651, latitude: 36.1022835, name: 'Hennessey'\n },\n {\n longitude: -96.2595621, latitude: 35.2453183, name: 'Wetumka'\n },\n {\n longitude: -97.4499583, latitude: 35.0304344, name: 'Purcell'\n },\n {\n longitude: -96.1059044, latitude: 35.605942, name: 'Okmulgee'\n },\n {\n longitude: -97.9684792, latitude: 35.8439429, name: 'Kingfisher'\n },\n {\n longitude: -95.7691956, latitude: 34.9332303, name: 'McAlester'\n },\n {\n longitude: -96.1289978, latitude: 34.3853794, name: 'Atoka'\n },\n {\n longitude: -97.1191406, latitude: 34.5042932, name: 'Davis'\n },\n {\n longitude: -98.0310059, latitude: 37.1537496, name: 'Anthony'\n },\n {\n longitude: -98.3564758, latitude: 36.7542898, name: 'Cherokee'\n },\n {\n longitude: -95.3695679, latitude: 35.7476268, name: 'Muskogee'\n },\n {\n longitude: -95.582428, latitude: 35.2871057, name: 'Eufaula'\n },\n {\n longitude: -96.9412994, latitude: 36.0446575, name: 'Mehan'\n },\n {\n longitude: -99.0925598, latitude: 35.0299964, name: 'Hobart'\n },\n {\n longitude: -98.4924316, latitude: 33.9137338, name: 'Wichita Falls'\n },\n {\n longitude: -98.9675903, latitude: 35.5154609, name: 'Clinton'\n },\n {\n longitude: -98.923645, latitude: 36.1478557, name: 'Seiling'\n },\n {\n longitude: -99.2985535, latitude: 36.1500735, name: 'Vici'\n },\n {\n longitude: -95.3173828, latitude: 36.3084855, name: 'Pryor'\n },\n {\n longitude: -96.7524719, latitude: 34.9596836, name: 'Konawa'\n }\n ]\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        ATM locations in Oklahoma, USA
        \n
        \n
        \n\n\n
        \n\n
        ","index.js":"{{ripple}}/**\n * Highlighted region sample\n */\n\n var maps = new ej.maps.Maps({\n\n centerPosition: {\n latitude: 35.65, longitude: -97.3\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 1.75\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/oklahoma.json'),\n shapeSettings: {\n fill: '#F5F5F5',\n border: { color: '#EEDA97', width: 1 }\n },\n markerSettings: [\n {\n width: 20,\n height: 20,\n animationDuration: 0,\n visible: true,\n shape: 'Image',\n imageUrl: '//ej2.syncfusion.com/javascript/demos/src/maps/images/ballon.png',\n fill: '#000080',\n border: {\n color: 'transparent'\n },\n dataSource: [\n {\n latitude: 35.6379762, longitude: -97.4823761\n }, {\n latitude: 35.5676663, longitude: -97.5128031\n }, {\n latitude: 35.5412361, longitude: -97.601552\n }, {\n latitude: 35.5451471, longitude: -97.5661039\n }, {\n latitude: 35.5120376, longitude: -97.5918531\n }, {\n latitude: 35.5112516, longitude: -97.5843\n }, {\n latitude: 35.4737072, longitude: -97.5158072\n }, {\n latitude: 35.4575239, longitude: -97.6179457\n }, {\n latitude: 35.4362676, longitude: -97.5998354\n }, {\n latitude: 35.3954872, longitude: -97.5962305\n }, {\n latitude: 35.3492258, longitude: -97.5294113\n },\n {\n latitude: 35.5260794, longitude: -98.7032318\n },\n {\n latitude: 34.7827916, longitude: -98.3001709\n },\n {\n latitude: 34.0793936, longkitude: -98.5583496\n },\n {\n latitude: 36.1434199, longitude: -97.0690155\n },\n {\n latitude: 36.0170318, longitude: -96.11063\n },\n {\n latitude: 36.1608845, longitude: -96.0205078\n },\n {\n latitude: 36.1323292, longitude: -95.9624863\n },\n {\n latitude: 36.1317746, longitude: -95.9046364\n },\n {\n latitude: 36.1604341, longitude: -95.8885002\n },\n ]\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 130,\n height: 130,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 35.5112516,\n longitude: -97.5843,\n text: '10/18 ATMs'\n }\n ],\n border: {\n color: 'transparent'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n }\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 100,\n height: 100,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 36.0808845,\n longitude: -96.0205078,\n text: '5/18 ATMs'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n },\n border: {\n color: 'transparent'\n }\n },\n {\n visible: true,\n template: '
        {{:name}}
        ',\n dataSource: [\n {\n longitude: -101.9450281, latitude: 35.2018863, name: 'Amarillo'\n },\n {\n longitude: -98.0971969, latitude: 35.5514624, name: 'El Reno'\n },\n {\n longitude: -97.8432238, latitude: 35.5150073, name: 'Yukon'\n },\n {\n longitude: -97.2557752, latitude: 35.4933852, name: 'Harrah'\n },\n {\n longitude: -97.1019391, latitude: 35.3620257, name: 'Shawnee'\n },\n {\n longitude: -97.072877, latitude: 35.6853011, name: 'Wellston'\n },\n {\n longitude: -96.2093353, latitude: 36.133417, name: 'Lotsee'\n },\n {\n longitude: -96.3077788, latitude: 36.1879088, name: 'Sand Springs'\n },\n {\n longitude: -98.7075369, latitude: 35.931371, name: 'Oakwood'\n },\n {\n longitude: -98.0003367, latitude: 35.0403272, name: 'Chickasha'\n },\n {\n longitude: -97.1836494, latitude: 36.4595554, name: 'Red Rock'\n },\n {\n longitude: -96.7148021, latitude: 35.4859752, name: 'Prague'\n },\n {\n longitude: -97.9339651, latitude: 36.1022835, name: 'Hennessey'\n },\n {\n longitude: -96.2595621, latitude: 35.2453183, name: 'Wetumka'\n },\n {\n longitude: -97.4499583, latitude: 35.0304344, name: 'Purcell'\n },\n {\n longitude: -96.1059044, latitude: 35.605942, name: 'Okmulgee'\n },\n {\n longitude: -97.9684792, latitude: 35.8439429, name: 'Kingfisher'\n },\n {\n longitude: -95.7691956, latitude: 34.9332303, name: 'McAlester'\n },\n {\n longitude: -96.1289978, latitude: 34.3853794, name: 'Atoka'\n },\n {\n longitude: -97.1191406, latitude: 34.5042932, name: 'Davis'\n },\n {\n longitude: -98.0310059, latitude: 37.1537496, name: 'Anthony'\n },\n {\n longitude: -98.3564758, latitude: 36.7542898, name: 'Cherokee'\n },\n {\n longitude: -95.3695679, latitude: 35.7476268, name: 'Muskogee'\n },\n {\n longitude: -95.582428, latitude: 35.2871057, name: 'Eufaula'\n },\n {\n longitude: -96.9412994, latitude: 36.0446575, name: 'Mehan'\n },\n {\n longitude: -99.0925598, latitude: 35.0299964, name: 'Hobart'\n },\n {\n longitude: -98.4924316, latitude: 33.9137338, name: 'Wichita Falls'\n },\n {\n longitude: -98.9675903, latitude: 35.5154609, name: 'Clinton'\n },\n {\n longitude: -98.923645, latitude: 36.1478557, name: 'Seiling'\n },\n {\n longitude: -99.2985535, latitude: 36.1500735, name: 'Vici'\n },\n {\n longitude: -95.3173828, latitude: 36.3084855, name: 'Pryor'\n },\n {\n longitude: -96.7524719, latitude: 34.9596836, name: 'Konawa'\n }\n ]\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/highlighted-region.html b/src/maps/highlighted-region.html index eaa37cd1..5afc6db1 100644 --- a/src/maps/highlighted-region.html +++ b/src/maps/highlighted-region.html @@ -4,6 +4,7 @@
        ATM locations in Oklahoma, USA
        + diff --git a/src/maps/highlighted-region.js b/src/maps/highlighted-region.js index b939dcbc..b8928a3a 100644 --- a/src/maps/highlighted-region.js +++ b/src/maps/highlighted-region.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var highlighttheme = location.hash.split('/')[1]; highlighttheme = highlighttheme ? highlighttheme : 'Material'; args.maps.theme = (highlighttheme.charAt(0).toUpperCase() + highlighttheme.slice(1)); }, + // custom code end centerPosition: { latitude: 35.65, longitude: -97.3 }, diff --git a/src/maps/legend-stack.json b/src/maps/legend-stack.json index a4d30c56..709054b3 100644 --- a/src/maps/legend-stack.json +++ b/src/maps/legend-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Type
        \n         		\n \n
        \n
        Position
        \n         		\n \n
        \n
        Remaining items in data source
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Legend sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var legendtheme = location.hash.split('/')[1];\n legendtheme = legendtheme ? legendtheme : 'Material';\n args.maps.theme = (legendtheme.charAt(0).toUpperCase() + legendtheme.slice(1));\n },\n tooltipRender: function (args) {\n if (!args.options.data) {\n args.cancel = true;\n }\n },\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Population density (per square kilometers) - 2015',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/legend-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name} : ${density} per square kms'\n },\n shapeSettings: {\n colorValuePath: 'density',\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0.00001, to: 100, color: 'rgb(153,174,214)', label: '<100'\n },\n {\n from: 100, to: 200, color: 'rgb(115,143,199)', label: '100 - 200'\n },\n {\n from: 200, to: 300, color: 'rgb(77,112,184)', label: '200 - 300'\n },\n {\n from: 300, to: 500, color: 'rgb(38,82,168)', label: '300 - 500'\n },\n {\n from: 500, to: 19000, color: 'rgb(0,51,153)', label: '>500'\n },\n {\n color: null, label: null\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n var legendPosition = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: 90,\n change: function () {\n maps.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n maps.legendSettings.orientation = 'Vertical';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n }\n else {\n maps.legendSettings.orientation = 'Horizontal';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n }\n maps.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 90,\n change: function () {\n maps.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (maps.legendSettings.orientation === 'Horizontal' || maps.legendSettings.orientation === 'None') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n else {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n }\n else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n maps.refresh();\n }\n });\n mode.appendTo('#legendMode');\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false\n }, '#opacity');\n highlightCheckBox.change = opacity = function (e) {\n if (e.checked) {\n maps.layers[0].shapeSettings.colorMapping[5].color = 'lightgrey';\n maps.layers[0].shapeSettings.colorMapping[5].label = 'No Data';\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n }\n maps.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n \n
        \n
        \n\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Type
        \n         		\n \n
        \n
        Position
        \n         		\n \n
        \n
        Remaining items in data source
        \n         		\n
        \n \n
        \n
        \n
        \n\n
        ","index.js":"{{ripple}}/**\n * Legend sample\n */\n\n var maps = new ej.maps.Maps({\n\n tooltipRender: function (args) {\n if (!args.options.data) {\n args.cancel = true;\n }\n },\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Population density (per square kilometers) - 2015',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/legend-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name} : ${density} per square kms'\n },\n shapeSettings: {\n colorValuePath: 'density',\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0.00001, to: 100, color: 'rgb(153,174,214)', label: '<100'\n },\n {\n from: 100, to: 200, color: 'rgb(115,143,199)', label: '100 - 200'\n },\n {\n from: 200, to: 300, color: 'rgb(77,112,184)', label: '200 - 300'\n },\n {\n from: 300, to: 500, color: 'rgb(38,82,168)', label: '300 - 500'\n },\n {\n from: 500, to: 19000, color: 'rgb(0,51,153)', label: '>500'\n },\n {\n color: null, label: null\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n // Code for Property Panel\n var legendPosition = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: 100,\n change: function () {\n maps.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n maps.legendSettings.orientation = 'Vertical';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n }\n else {\n maps.legendSettings.orientation = 'Horizontal';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n }\n maps.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 100,\n change: function () {\n maps.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (maps.legendSettings.orientation === 'Horizontal' || maps.legendSettings.orientation === 'None') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n else {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n }\n else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n maps.refresh();\n }\n });\n mode.appendTo('#legendMode');\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false\n }, '#opacity');\n highlightCheckBox.change = opacity = function (e) {\n if (e.checked) {\n maps.layers[0].shapeSettings.colorMapping[5].color = 'lightgrey';\n maps.layers[0].shapeSettings.colorMapping[5].label = 'No Data';\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n }\n maps.refresh();\n };\n"} \ No newline at end of file diff --git a/src/maps/legend.html b/src/maps/legend.html index 94f9758d..c3f24a5a 100644 --- a/src/maps/legend.html +++ b/src/maps/legend.html @@ -1,11 +1,13 @@
        +
        +
        diff --git a/src/maps/legend.js b/src/maps/legend.js index 7c1d8692..fdfa24d8 100644 --- a/src/maps/legend.js +++ b/src/maps/legend.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var legendtheme = location.hash.split('/')[1]; legendtheme = legendtheme ? legendtheme : 'Material'; args.maps.theme = (legendtheme.charAt(0).toUpperCase() + legendtheme.slice(1)); }, + // custom code end tooltipRender: function (args) { if (!args.options.data) { args.cancel = true; @@ -65,6 +67,7 @@ this.default = function () { ] }); maps.appendTo('#container'); + // Code for Property Panel var legendPosition = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Legend Position', diff --git a/src/maps/map-with-slider-stack.json b/src/maps/map-with-slider-stack.json index 08a2013c..9ff3710a 100644 --- a/src/maps/map-with-slider-stack.json +++ b/src/maps/map-with-slider-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        \n
        \n

        \n \n
        \n\n
        ","index.js":"{{ripple}}var sliderVal = [-1.5, 3.75];\n\n var colorCodes = ['#7E9CDC', '#DCD57E', '#7EDCA2', '#6EB5D0', '#A6DC7E', '#DCA87E', '#d075c6'];\n var maps = new ej.maps.Maps({\n margin: {\n bottom: 20\n },\n titleSettings: {\n text: 'Average annual population growth in North American countries',\n textStyle: {\n size: '16px'\n }\n },\n loaded: function (args) {\n if (!ej.base.isNullOrUndefined(document.getElementById('mapslider_Annotation_0'))) {\n annotationRender(sliderVal);\n }\n },\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#mapslider-annotation',\n x: '35%', y: '93%'\n }\n ],\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/north-america.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/population-growth.json'),\n shapeSettings: {\n colorValuePath: 'population',\n colorMapping: [\n {\n from: -1.5, to: -0.75, color: '#7E9CDC'\n },\n {\n from: -0.75, to: 0.0001, color: '#DCD57E'\n },\n {\n from: 0.1, to: 0.75, color: '#7EDCA2'\n },\n {\n from: 0.76, to: 1.5, color: '#6EB5D0'\n },\n {\n from: 1.5, to: 2.25, color: '#A6DC7E'\n },\n {\n from: 2.25, to: 3, color: '#DCA87E'\n },\n {\n from: 3, to: 3.75, color: '#d075c6'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n format: '${name} : ${population}%'\n }\n }\n ],\n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n }\n });\n maps.appendTo('#mapslider');\n function annotationRender(val) {\n var slider = new ej.inputs.Slider({\n min: -1.5, max: 3.75,\n value: val,\n step: 0.75,\n type: 'Range',\n ticks: { placement: 'After', largeStep: 0.75 },\n changed: function (args) {\n if (!isNaN(args.value[0]) && !isNaN(args.value[1])) {\n for (var i = 0; i < maps.layers[0].shapeSettings.colorMapping.length; i++) {\n if (maps.layers[0].shapeSettings.colorMapping[i].from < args.value[0] ||\n maps.layers[0].shapeSettings.colorMapping[i].to > args.value[1]) {\n maps.layers[0].shapeSettings.colorMapping[i].color = '#E5E5E5';\n } else {\n maps.layers[0].shapeSettings.colorMapping[i].color = colorCodes[i];\n }\n }\n sliderVal = args.value;\n maps.refresh();\n }\n }\n });\n slider.appendTo('#mapannotation');\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n
        \n
        \n

        \n \n \n
        \n\n
        ","index.js":"{{ripple}}var sliderVal = [-1.5, 3.75];\n\n var colorCodes = ['#7E9CDC', '#DCD57E', '#7EDCA2', '#6EB5D0', '#A6DC7E', '#DCA87E', '#d075c6'];\n var maps = new ej.maps.Maps({\n margin: {\n bottom: 20\n },\n titleSettings: {\n text: 'Average annual population growth in North American countries',\n textStyle: {\n size: '16px'\n }\n },\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#mapslider-annotation',\n horizontalAlignment: 'Center',\n y: '93%'\n\n }\n ],\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/north-america.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/population-growth.json'),\n shapeSettings: {\n colorValuePath: 'population',\n colorMapping: [\n {\n from: -1.5, to: -0.75, color: '#7E9CDC'\n },\n {\n from: -0.75, to: 0, color: '#DCD57E'\n },\n {\n from: 0.1, to: 0.75, color: '#7EDCA2'\n },\n {\n from: 0.76, to: 1.5, color: '#6EB5D0'\n },\n {\n from: 1.5, to: 2.25, color: '#A6DC7E'\n },\n {\n from: 2.25, to: 3, color: '#DCA87E'\n },\n {\n from: 3, to: 3.75, color: '#d075c6'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n format: '${name} : ${population}%'\n }\n }\n ],\n\n });\n maps.appendTo('#mapslider');\n function annotationRender(val) {\n var slider = new ej.inputs.Slider({\n min: -1.5, max: 3.75,\n value: val,\n step: 0.75,\n type: 'Range',\n ticks: { placement: 'After', largeStep: 0.75 },\n changed: function (args) {\n if (!isNaN(args.value[0]) && !isNaN(args.value[1])) {\n for (var i = 0; i < maps.layers[0].shapeSettings.colorMapping.length; i++) {\n if (maps.layers[0].shapeSettings.colorMapping[i].from < args.value[0] ||\n maps.layers[0].shapeSettings.colorMapping[i].to > args.value[1]) {\n maps.layers[0].shapeSettings.colorMapping[i].color = '#E5E5E5';\n } else {\n maps.layers[0].shapeSettings.colorMapping[i].color = colorCodes[i];\n }\n }\n sliderVal = args.value;\n maps.refresh();\n }\n }\n });\n slider.appendTo('#mapannotation');\n }\n"} \ No newline at end of file diff --git a/src/maps/map-with-slider.html b/src/maps/map-with-slider.html index 12b25416..79af78a7 100644 --- a/src/maps/map-with-slider.html +++ b/src/maps/map-with-slider.html @@ -25,6 +25,7 @@


        + diff --git a/src/maps/map-with-slider.js b/src/maps/map-with-slider.js index 14ed7f52..8921f4b0 100644 --- a/src/maps/map-with-slider.js +++ b/src/maps/map-with-slider.js @@ -11,11 +11,13 @@ this.default = function () { size: '16px' } }, + // custom code start loaded: function (args) { if (!ej.base.isNullOrUndefined(document.getElementById('mapslider_Annotation_0'))) { annotationRender(sliderVal); } }, + // custom code end zoomSettings: { enable: false }, @@ -65,11 +67,13 @@ this.default = function () { } } ], + // custom code start load: function (args) { var theme = location.hash.split('/')[1]; theme = theme ? theme : 'Material'; args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); } + // custom code end }); maps.appendTo('#mapslider'); function annotationRender(val) { diff --git a/src/maps/marker-stack.json b/src/maps/marker-stack.json index 353eaf22..92c5ae49 100644 --- a/src/maps/marker-stack.json +++ b/src/maps/marker-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        Source:\n www.citymayors.com\n
        \n
        \n
        \n
        \n
        \n
        \n ${name} \n
        \n
        \n
        \n
        \n Country : ${Country}\n
        \n
        \n Population : ${population}\n
        \n
        \n \n
        \n \n \n \n
        ","index.js":"{{ripple}}/**\n * Marker sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var markertheme = location.hash.split('/')[1];\n markertheme = markertheme ? markertheme : 'Material';\n args.maps.theme = (markertheme.charAt(0).toUpperCase() + markertheme.slice(1));\n },\n useGroupingSeparator: true,\n format: 'n',\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Top 25 populated cities in the world',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n dataSource: window.topPopulation,\n shapeSettings: {\n fill: '#C3E6ED'\n },\n markerSettings: [\n {\n dataSource: window.topPopulation,\n visible: true,\n animationDuration: 0,\n shape: 'Circle',\n fill: 'white',\n width: 3,\n border: { width: 2, color: '#285255' },\n tooltipSettings: {\n template: '#template',\n visible: true,\n valuePath: 'population',\n }\n },\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n www.citymayors.com\n
        \n
        \n
        \n
        \n
        \n
        \n ${name} \n
        \n
        \n
        \n
        \n Country : ${Country}\n
        \n
        \n Population : ${population}\n
        \n
        \n \n
        \n \n \n","index.js":"{{ripple}}/**\n * Marker sample\n */\n\n var maps = new ej.maps.Maps({\n\n useGroupingSeparator: true,\n format: 'n',\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Top 25 populated cities in the world',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n dataSource: window.topPopulation,\n shapeSettings: {\n fill: '#C3E6ED'\n },\n markerSettings: [\n {\n dataSource: window.topPopulation,\n visible: true,\n animationDuration: 0,\n shape: 'Circle',\n fill: 'white',\n width: 3,\n border: { width: 2, color: '#285255' },\n tooltipSettings: {\n template: '#template',\n visible: true,\n valuePath: 'population',\n }\n },\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/marker-template-stack.json b/src/maps/marker-template-stack.json index 9d568635..47acd512 100644 --- a/src/maps/marker-template-stack.json +++ b/src/maps/marker-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        Source:\n www.bom.gov.au\n
        \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Marker template sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var templatetheme = location.hash.split('/')[1];\n templatetheme = templatetheme ? templatetheme : 'Material';\n args.maps.theme = (templatetheme.charAt(0).toUpperCase() + templatetheme.slice(1));\n },\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: ' Australia cities weather detail',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/australia.json'),\n markerSettings: [\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Perth', latitude: -31.950527, longitude: 115.860457, Temperature: 31.6 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Adelaide', latitude: -34.928499, longitude: 138.600746, Temperature: 28.5 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Townsville', latitude: -19.2589635, longitude: 146.8169483, Temperature: 31.3 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Sydney', latitude: -33.868820, longitude: 151.209296, Temperature: 26.4 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Alice Springs', latitude: -23.698042, longitude: 133.880747, Temperature: 36.4 },\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' + \n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Brisbane', latitude: -27.469771, longitude: 153.025124, Temperature: 29.1 }\n ]\n }\n ],\n tooltipSettings: {\n visible: false\n },\n shapeSettings: {\n autofill: true,\n palette: ['#E2B247', '#88DB46', '#42C4E2', '#C08AF8', '#52BACC', '#F4CE2F', '#6986ED'],\n border: {\n width: 0.5,\n color: 'white'\n },\n }\n }\n ]\n });\n maps.appendTo('#markertemp');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n www.bom.gov.au\n
        \n
        \n\n \n","index.js":"{{ripple}}/**\n * Marker template sample\n */\n\n var maps = new ej.maps.Maps({\n\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: ' Australia cities weather detail',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/australia.json'),\n markerSettings: [\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Perth', latitude: -31.950527, longitude: 115.860457, Temperature: 31.6 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Adelaide', latitude: -34.928499, longitude: 138.600746, Temperature: 28.5 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Townsville', latitude: -19.2589635, longitude: 146.8169483, Temperature: 31.3 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Sydney', latitude: -33.868820, longitude: 151.209296, Temperature: 26.4 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' +\n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Alice Springs', latitude: -23.698042, longitude: 133.880747, Temperature: 36.4 },\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
        ' + \n '

        {{:Name}}:{{:Temperature}}°C

        ',\n dataSource: [\n { Name: 'Brisbane', latitude: -27.469771, longitude: 153.025124, Temperature: 29.1 }\n ]\n }\n ],\n tooltipSettings: {\n visible: false\n },\n shapeSettings: {\n autofill: true,\n palette: ['#E2B247', '#88DB46', '#42C4E2', '#C08AF8', '#52BACC', '#F4CE2F', '#6986ED'],\n border: {\n width: 0.5,\n color: 'white'\n },\n }\n }\n ]\n });\n maps.appendTo('#markertemp');\n"} \ No newline at end of file diff --git a/src/maps/marker-template.html b/src/maps/marker-template.html index 2d5c6a51..3e7f5cde 100644 --- a/src/maps/marker-template.html +++ b/src/maps/marker-template.html @@ -1,5 +1,6 @@
        + @@ -20,6 +21,7 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/marker-template.js b/src/maps/marker-template.js index 93d89c3b..e890d7e2 100644 --- a/src/maps/marker-template.js +++ b/src/maps/marker-template.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var templatetheme = location.hash.split('/')[1]; - templatetheme = templatetheme ? templatetheme : 'Material'; - args.maps.theme = (templatetheme.charAt(0).toUpperCase() + templatetheme.slice(1)); + var templateTheme = location.hash.split('/')[1]; + templateTheme = templateTheme ? templateTheme : 'Material'; + args.maps.theme = (templateTheme.charAt(0).toUpperCase() + templateTheme.slice(1)); }, + // custom code end zoomSettings: { enable: false }, diff --git a/src/maps/marker.html b/src/maps/marker.html index 15e22412..6688586a 100644 --- a/src/maps/marker.html +++ b/src/maps/marker.html @@ -1,5 +1,6 @@
        + @@ -41,7 +42,7 @@

        - + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/marker.js b/src/maps/marker.js index dd3417a3..72340943 100644 --- a/src/maps/marker.js +++ b/src/maps/marker.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var markertheme = location.hash.split('/')[1]; markertheme = markertheme ? markertheme : 'Material'; args.maps.theme = (markertheme.charAt(0).toUpperCase() + markertheme.slice(1)); }, + // custom code end useGroupingSeparator: true, format: 'n', zoomSettings: { diff --git a/src/maps/multi-layer-stack.json b/src/maps/multi-layer-stack.json index b49b8f0e..2e015be1 100644 --- a/src/maps/multi-layer-stack.json +++ b/src/maps/multi-layer-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        Source:\n www.samsung.com\n
        \n
        \n \n \n \n
        \n
        \n\n\n \n","index.js":"{{ripple}}/**\n * Multilayer sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var layertheme = location.hash.split('/')[1];\n layertheme = layertheme ? layertheme : 'Material';\n args.maps.theme = (layertheme.charAt(0).toUpperCase() + layertheme.slice(1));\n },\n zoomSettings: {\n enable: true,\n pinchZooming: true\n },\n titleSettings: {\n text: 'Samsung Semiconductor office locations in USA',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/usa.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.1\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'iso_3166_2',\n smartLabelMode: 'Hide'\n }\n },\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/texas.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n template: '#markercircle',\n dataSource: [\n {\n latitude: 30.267153,\n longitude: -97.7430608,\n name: 'Austin'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
        Manufacturing Center,
        Research and Development Center'\n }\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 31.80289258670676,\n longitude: -98.96484375\n }\n ],\n template: '
        TX
        '\n }\n ]\n },\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/california.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n dataSource: [\n {\n latitude: 37.3382082,\n longitude: -121.8863286,\n name: 'San Jose'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
        Regional Office,
        Research and Development Center'\n },\n template: '#markercircle'\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 37.09023980307208,\n longitude: -119.35546875000001\n }\n ],\n template: '
        CA
        '\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n\n
        Source:\n www.samsung.com\n
        \n
        \n \n \n \n
        \n\n
        \n\n\n \n","index.js":"{{ripple}}/**\n * Multilayer sample\n */\n\n var maps = new ej.maps.Maps({\n\n zoomSettings: {\n enable: true,\n pinchZooming: true\n },\n titleSettings: {\n text: 'Samsung Semiconductor office locations in USA',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.1\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'iso_3166_2',\n smartLabelMode: 'Hide'\n }\n },\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/texas.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n template: '#markercircle',\n dataSource: [\n {\n latitude: 30.267153,\n longitude: -97.7430608,\n name: 'Austin'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
        Manufacturing Center,
        Research and Development Center'\n }\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 31.80289258670676,\n longitude: -98.96484375\n }\n ],\n template: '
        TX
        '\n }\n ]\n },\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/california.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n dataSource: [\n {\n latitude: 37.3382082,\n longitude: -121.8863286,\n name: 'San Jose'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
        Regional Office,
        Research and Development Center'\n },\n template: '#markercircle'\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 37.09023980307208,\n longitude: -119.35546875000001\n }\n ],\n template: '
        CA
        '\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/multi-layer.html b/src/maps/multi-layer.html index aae4b904..2d95a11b 100644 --- a/src/maps/multi-layer.html +++ b/src/maps/multi-layer.html @@ -1,6 +1,7 @@
        + @@ -9,6 +10,7 @@
        +
        + + +

        diff --git a/src/maps/multi-layer.js b/src/maps/multi-layer.js index 990a9ca6..e51b25ee 100644 --- a/src/maps/multi-layer.js +++ b/src/maps/multi-layer.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var layertheme = location.hash.split('/')[1]; layertheme = layertheme ? layertheme : 'Material'; args.maps.theme = (layertheme.charAt(0).toUpperCase() + layertheme.slice(1)); }, + // custom code end zoomSettings: { enable: true, pinchZooming: true diff --git a/src/maps/navigation-line-stack.json b/src/maps/navigation-line-stack.json index d7f86414..bd8daf78 100644 --- a/src/maps/navigation-line-stack.json +++ b/src/maps/navigation-line-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

        \n
        \n
        Source:\n www.lineaships.com\n
        \n
        \n\n\n
        ","index.js":"{{ripple}}/**\n * Linea penisular sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var selectedtheme = location.hash.split('/')[1];\n selectedtheme = selectedtheme ? selectedtheme : 'Material';\n args.maps.theme = (selectedtheme.charAt(0).toUpperCase() + selectedtheme.slice(1));\n },\n titleSettings: {\n text: 'Shipping sea route between various cities',\n textStyle: {\n size: '18px'\n }\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 13\n },\n mapsArea: {\n background: '#4863A0'\n },\n centerPosition: {\n latitude: 25.54244147012483,\n longitude: -89.62646484375\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapeSettings: { \n fill: '#789071'\n },\n navigationLineSettings: window.penisular_location,\n markerSettings: [\n {\n visible: true,\n shape: 'Circle',\n fill: 'white',\n width: 10,\n height: 10,\n dataSource: window.penisular_marker\n },\n {\n visible: true,\n template: '
        ALTAMIRA' +\n '
        ',\n dataSource: [\n { latitude: 22.403410892712124, longitude: -99.5 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        HOUSTON' +\n '
        ',\n dataSource: [\n { latitude: 30.332197482973, longitude: -95.36270141601562 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        PANAMA CITY' +\n '
        ',\n dataSource: [\n { latitude: 30.380747605060766, longitude: -85.81283569335938 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        TAMPA' +\n '
        ',\n dataSource: [\n { latitude: 27.9337540167772, longitude: -81.29908447265625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        PROGRESO' +\n '
        ',\n dataSource: [\n { latitude: 20.62336521195344, longitude: -89.6649169921875 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n www.lineaships.com\n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Linea penisular sample\n */\n\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Shipping sea route between various cities',\n textStyle: {\n size: '18px'\n }\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 13\n },\n mapsArea: {\n background: '#4863A0'\n },\n centerPosition: {\n latitude: 25.54244147012483,\n longitude: -89.62646484375\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeSettings: { \n fill: '#789071'\n },\n navigationLineSettings: window.penisular_location,\n markerSettings: [\n {\n visible: true,\n shape: 'Circle',\n fill: 'white',\n width: 10,\n height: 10,\n dataSource: window.penisular_marker\n },\n {\n visible: true,\n template: '
        ALTAMIRA' +\n '
        ',\n dataSource: [\n { latitude: 22.403410892712124, longitude: -99.5 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        HOUSTON' +\n '
        ',\n dataSource: [\n { latitude: 30.332197482973, longitude: -95.36270141601562 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        PANAMA CITY' +\n '
        ',\n dataSource: [\n { latitude: 30.380747605060766, longitude: -85.81283569335938 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        TAMPA' +\n '
        ',\n dataSource: [\n { latitude: 27.9337540167772, longitude: -81.29908447265625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
        PROGRESO' +\n '
        ',\n dataSource: [\n { latitude: 20.62336521195344, longitude: -89.6649169921875 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/navigation-line.html b/src/maps/navigation-line.html index b9d33612..aad87674 100644 --- a/src/maps/navigation-line.html +++ b/src/maps/navigation-line.html @@ -1,5 +1,6 @@
        + @@ -20,6 +21,7 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/navigation-line.js b/src/maps/navigation-line.js index e6e6f9ff..9397a022 100644 --- a/src/maps/navigation-line.js +++ b/src/maps/navigation-line.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var selectedtheme = location.hash.split('/')[1]; - selectedtheme = selectedtheme ? selectedtheme : 'Material'; - args.maps.theme = (selectedtheme.charAt(0).toUpperCase() + selectedtheme.slice(1)); + var selectedTheme = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.maps.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); }, + // custom code end titleSettings: { text: 'Shipping sea route between various cities', textStyle: { diff --git a/src/maps/osm-stack.json b/src/maps/osm-stack.json index 0cd0aae4..751ca21e 100644 --- a/src/maps/osm-stack.json +++ b/src/maps/osm-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n load: function (args) {\n var osmtheme = location.hash.split('/')[1];\n osmtheme = osmtheme ? osmtheme : 'Material';\n args.maps.osmtheme = (osmtheme.charAt(0).toUpperCase() + osmtheme.slice(1));\n },\n titleSettings: {\n text: 'Headquarters of the United Nations',\n textStyle: {\n size: '16px'\n }\n },\n centerPosition: {\n latitude: 40.7209,\n longitude: -73.9680\n },\n zoomSettings: {\n zoomFactor: 10,\n enable: false\n },\n layers: [{\n layerType: 'OSM',\n animationDuration: 0,\n markerSettings: [\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Manhattan, New York, USA',\n latitude: 40.7488758,\n longitude: -73.9730091\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n }]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n \n","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Headquarters of the United Nations',\n textStyle: {\n size: '16px'\n }\n },\n centerPosition: {\n latitude: 40.7209,\n longitude: -73.9680\n },\n zoomSettings: {\n zoomFactor: 10,\n enable: false\n },\n layers: [{\n layerType: 'OSM',\n animationDuration: 0,\n markerSettings: [\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Manhattan, New York, USA',\n latitude: 40.7488758,\n longitude: -73.9730091\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n }]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/osm-with-navigation-lines-stack.json b/src/maps/osm-with-navigation-lines-stack.json index bf2c18b1..4c4748d0 100644 --- a/src/maps/osm-with-navigation-lines-stack.json +++ b/src/maps/osm-with-navigation-lines-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n \n
        \n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n load: function (args) {\n var osmnavitheme = location.hash.split('/')[1];\n osmnavitheme = osmnavitheme ? osmnavitheme : 'Material';\n args.maps.osmnavitheme = (osmnavitheme.charAt(0).toUpperCase() + osmnavitheme.slice(1));\n },\n titleSettings: {\n text: 'Flight route from Los Angeles to Mexico city',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n zoomFactor: 5,\n enable: false\n },\n centerPosition: {\n latitude: 27.0902,\n longitude: -105.7129\n },\n layers: [\n {\n layerType: 'OSM',\n markerSettings: [\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 23.6445,\n longitude: -102.832\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n offset: { x: 2, y: -7 },\n template: '
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 24.2005,\n longitude: -102.832\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n offset: { x: 2, y: -7 },\n template: '
        Mexico
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 24.0005,\n longitude: -101.200\n }],\n },\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Los Angeles',\n latitude: 34.0522,\n longitude: -118.2437\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n template: '
        Los Angeles
        ' +\n 'International Airport
        ',\n dataSource: [{\n name: 'Los Angeles City',\n latitude: 34.7000,\n longitude: -121.5000\n }],\n },\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n latitude: 28.5,\n longitude: -110.400\n }],\n }\n ],\n navigationLineSettings: [{\n width: 8,\n visible: true,\n angle: -0.05,\n color: '#00ace6',\n latitude: [23.6445, 34.0522],\n longitude: [-102.832, -118.2437]\n }]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n \n \n
        \n\n
        ","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Flight route from Los Angeles to Mexico city',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n zoomFactor: 5,\n enable: false\n },\n centerPosition: {\n latitude: 27.0902,\n longitude: -105.7129\n },\n layers: [\n {\n layerType: 'OSM',\n markerSettings: [\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 23.6445,\n longitude: -102.832\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n offset: { x: 2, y: -7 },\n template: '
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 24.2005,\n longitude: -102.832\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n offset: { x: 2, y: -7 },\n template: '
        Mexico
        ',\n dataSource: [{\n name: 'Mexico City',\n latitude: 24.0005,\n longitude: -101.200\n }],\n },\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n name: 'Los Angeles',\n latitude: 34.0522,\n longitude: -118.2437\n }],\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n visible: true,\n template: '
        Los Angeles
        ' +\n 'International Airport
        ',\n dataSource: [{\n name: 'Los Angeles City',\n latitude: 34.7000,\n longitude: -121.5000\n }],\n },\n {\n visible: true,\n template: '
        ',\n dataSource: [{\n latitude: 28.5,\n longitude: -110.400\n }],\n }\n ],\n navigationLineSettings: [{\n width: 8,\n visible: true,\n angle: -0.05,\n color: '#00ace6',\n latitude: [23.6445, 34.0522],\n longitude: [-102.832, -118.2437]\n }]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/osm-with-navigation-lines.html b/src/maps/osm-with-navigation-lines.html index 0dfde326..d15392f5 100644 --- a/src/maps/osm-with-navigation-lines.html +++ b/src/maps/osm-with-navigation-lines.html @@ -4,6 +4,7 @@ © OpenStreetMap contributors

        + diff --git a/src/maps/osm-with-navigation-lines.js b/src/maps/osm-with-navigation-lines.js index c430a107..f9e442a0 100644 --- a/src/maps/osm-with-navigation-lines.js +++ b/src/maps/osm-with-navigation-lines.js @@ -1,10 +1,12 @@ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var templatetheme = location.hash.split('/')[1]; - templatetheme = templatetheme ? templatetheme : 'Material'; - args.maps.theme = (templatetheme.charAt(0).toUpperCase() + templatetheme.slice(1)); + var navigateTheme = location.hash.split('/')[1]; + navigateTheme = navigateTheme ? navigateTheme : 'Material'; + args.maps.theme = (navigateTheme.charAt(0).toUpperCase() + navigateTheme.slice(1)); }, + // custom code end titleSettings: { text: 'Flight route from Los Angeles to Mexico city', textStyle: { diff --git a/src/maps/osm-with-sublayers-stack.json b/src/maps/osm-with-sublayers-stack.json index dbba89c2..4d80b9cc 100644 --- a/src/maps/osm-with-sublayers-stack.json +++ b/src/maps/osm-with-sublayers-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n \n
        \n
        Source:\n Seven Continents\n
        \n
        \n\n
        ","index.js":"{{ripple}}window.default = function () {\n var maps = new ej.maps.Maps({\n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n titleSettings: {\n text: 'Location of Africa continent in the World map',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: true\n },\n layers: [{\n layerType: 'OSM',\n },\n {\n type: 'SubLayer',\n animationDuration: 0,\n shapeData: new ej.maps.MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#5100a3',\n opacity: 0.4\n }\n }]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        \n \n
        Source:\n Seven Continents\n
        \n
        \n\n
        ","index.js":"{{ripple}}window.default = function () {\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Location of Africa continent in the World map',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: true\n },\n layers: [{\n layerType: 'OSM',\n },\n {\n type: 'SubLayer',\n animationDuration: 0,\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#5100a3',\n opacity: 0.4\n }\n }]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/osm-with-sublayers.html b/src/maps/osm-with-sublayers.html index 5152676e..a6fb0af8 100644 --- a/src/maps/osm-with-sublayers.html +++ b/src/maps/osm-with-sublayers.html @@ -4,6 +4,7 @@ © OpenStreetMap contributors

        + diff --git a/src/maps/osm-with-sublayers.js b/src/maps/osm-with-sublayers.js index 5879e24d..807d9783 100644 --- a/src/maps/osm-with-sublayers.js +++ b/src/maps/osm-with-sublayers.js @@ -1,10 +1,12 @@ window.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var theme = location.hash.split('/')[1]; theme = theme ? theme : 'Material'; args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); }, + // custom code end titleSettings: { text: 'Location of Africa continent in the World map', textStyle: { diff --git a/src/maps/osm.html b/src/maps/osm.html index c58122cb..fe2e5727 100644 --- a/src/maps/osm.html +++ b/src/maps/osm.html @@ -4,6 +4,7 @@ © OpenStreetMap contributors

        + @@ -21,6 +22,7 @@ Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a marker or tap a marker in touch enabled devices.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/osm.js b/src/maps/osm.js index dc2a8121..f67b772b 100644 --- a/src/maps/osm.js +++ b/src/maps/osm.js @@ -1,10 +1,12 @@ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var templatetheme = location.hash.split('/')[1]; templatetheme = templatetheme ? templatetheme : 'Material'; args.maps.theme = (templatetheme.charAt(0).toUpperCase() + templatetheme.slice(1)); }, + // custom code end titleSettings: { text: 'Headquarters of the United Nations', textStyle: { diff --git a/src/maps/pie-stack.json b/src/maps/pie-stack.json index 7b4c62a9..9f5efe1e 100644 --- a/src/maps/pie-stack.json +++ b/src/maps/pie-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n

        Name

        \n
        \n
        \n \n
        \n\n \n\n
        ","index.js":"{{ripple}}\n \n var chart, chart1, chart2, chart3, chart4, chart5;\n var maps = new ej.maps.Maps({\n load: function (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n resize: function (args){\n chart.destroy();\n chart1.destroy();\n chart2.destroy();\n chart3.destroy();\n chart4.destroy();\n chart5.destroy();\n },\n loaded: function(args){\n chart = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Russia',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 16 }, { 'x': '15-24 years', y: 11.5 },\n { 'x': '25-54 years', y: 45.9 }, { 'x': '55-64 years', y: 13.5 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_0');\n chart1 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Canada',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 15.5 }, { 'x': '15-24 years', y: 12.9 },\n { 'x': '25-54 years', y: 41.4 }, { 'x': '55-64 years', y: 13.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart1.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_1');\n chart2 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'USA',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 20 }, { 'x': '15-24 years', y: 13.7 },\n { 'x': '25-54 years', y: 40.2 }, { 'x': '55-64 years', y: 12.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart2.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_2');\n chart3 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'China',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 17.2 }, { 'x': '15-24 years', y: 15.4 },\n { 'x': '25-54 years', y: 46.9 }, { 'x': '55-64 years', y: 11.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart3.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_3');\n chart4 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Brazil',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 24.2 }, { 'x': '15-24 years', y: 16.7 },\n { 'x': '25-54 years', y: 43.6 }, { 'x': '55-64 years', y: 8.2 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart4.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_4');\n chart5 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Australia',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 18.1 }, { 'x': '15-24 years', y: 13.4 },\n { 'x': '25-54 years', y: 42 }, { 'x': '55-64 years', y: 11.8 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart5.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_5');\n },\n titleSettings: {\n text: 'Top 6 largest countries age group details',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n position: 'Bottom'\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0, to: 4, color: '#634D6F', label: '0-14 years',\n },\n {\n from: 5, to: 14, color: '#B34D6D', label: '15-24 years'\n },\n {\n from: 15, to: 59, color: '#557C5C', label: '25-54 years'\n },\n {\n from: 60, to: 100, color: '#5E55E2', label: '55-64 years'\n }\n ]\n },\n markerSettings: [\n {\n visible: true,\n template: '#template',\n dataSource: [\n { 'latitude': 61.938950426660604, 'longitude': 97.03125 },\n { 'latitude': 57.70414723434193, 'longitude': -114.08203125 },\n { 'latitude': 39.90973623453719, 'longitude': -103.0078125 },\n { 'latitude': 35.746512259918504, 'longitude': 102.216796875 },\n { 'latitude': -8.667918002363107, 'longitude': -52.55859375 },\n { 'latitude': -23.725011735951796, 'longitude': 132.978515625 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container'); \n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n

        Name

        \n
        \n
        \n \n \n
        \n\n \n\n
        ","index.js":"{{ripple}}\n \n var chart, chart1, chart2, chart3, chart4, chart5;\n var maps = new ej.maps.Maps({\n\n resize: function (args){\n chart.destroy();\n chart1.destroy();\n chart2.destroy();\n chart3.destroy();\n chart4.destroy();\n chart5.destroy();\n },\n loaded: function(args){\n chart = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Russia',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 16 }, { 'x': '15-24 years', y: 11.5 },\n { 'x': '25-54 years', y: 45.9 }, { 'x': '55-64 years', y: 13.5 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_0');\n chart1 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Canada',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 15.5 }, { 'x': '15-24 years', y: 12.9 },\n { 'x': '25-54 years', y: 41.4 }, { 'x': '55-64 years', y: 13.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart1.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_1');\n chart2 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'USA',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 20 }, { 'x': '15-24 years', y: 13.7 },\n { 'x': '25-54 years', y: 40.2 }, { 'x': '55-64 years', y: 12.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart2.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_2');\n chart3 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'China',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 17.2 }, { 'x': '15-24 years', y: 15.4 },\n { 'x': '25-54 years', y: 46.9 }, { 'x': '55-64 years', y: 11.3 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart3.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_3');\n chart4 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Brazil',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 24.2 }, { 'x': '15-24 years', y: 16.7 },\n { 'x': '25-54 years', y: 43.6 }, { 'x': '55-64 years', y: 8.2 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart4.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_4');\n chart5 = new ej.charts.AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n legendSettings:{\n visible: false\n },\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n animation: {\n enable: false\n },\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: 'Australia',\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: [\n { 'x': '0-14 years', y: 18.1 }, { 'x': '15-24 years', y: 13.4 },\n { 'x': '25-54 years', y: 42 }, { 'x': '55-64 years', y: 11.8 },\n ],\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart5.appendTo('#container_LayerIndex_0_MarkerIndex_0_DataIndex_5');\n },\n titleSettings: {\n text: 'Top 6 largest countries age group details',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n position: 'Bottom'\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0, to: 4, color: '#634D6F', label: '0-14 years',\n },\n {\n from: 5, to: 14, color: '#B34D6D', label: '15-24 years'\n },\n {\n from: 15, to: 59, color: '#557C5C', label: '25-54 years'\n },\n {\n from: 60, to: 100, color: '#5E55E2', label: '55-64 years'\n }\n ]\n },\n markerSettings: [\n {\n visible: true,\n template: '#template',\n dataSource: [\n { 'latitude': 61.938950426660604, 'longitude': 97.03125 },\n { 'latitude': 57.70414723434193, 'longitude': -114.08203125 },\n { 'latitude': 39.90973623453719, 'longitude': -103.0078125 },\n { 'latitude': 35.746512259918504, 'longitude': 102.216796875 },\n { 'latitude': -8.667918002363107, 'longitude': -52.55859375 },\n { 'latitude': -23.725011735951796, 'longitude': 132.978515625 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container'); \n "} \ No newline at end of file diff --git a/src/maps/pie.html b/src/maps/pie.html index 1316b062..6dbf31d7 100644 --- a/src/maps/pie.html +++ b/src/maps/pie.html @@ -2,6 +2,7 @@
        + @@ -29,6 +30,7 @@ + + diff --git a/src/maps/pie.js b/src/maps/pie.js index af3345cd..6558b631 100644 --- a/src/maps/pie.js +++ b/src/maps/pie.js @@ -2,11 +2,13 @@ this.default = function () { var chart, chart1, chart2, chart3, chart4, chart5; var maps = new ej.maps.Maps({ + // custom code start load: function (args) { - var theme = location.hash.split('/')[1]; - theme = theme ? theme : 'Material'; - args.maps.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); + var pieTheme = location.hash.split('/')[1]; + pieTheme = pieTheme ? pieTheme : 'Material'; + args.maps.pieTheme = (pieTheme.charAt(0).toUpperCase() + pieTheme.slice(1)); }, + // custom code end resize: function (args){ chart.destroy(); chart1.destroy(); diff --git a/src/maps/print-stack.json b/src/maps/print-stack.json index b6a8e40e..e09d7ffa 100644 --- a/src/maps/print-stack.json +++ b/src/maps/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n
        \n
        \n
        \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var printtheme = location.hash.split('/')[1];\n printtheme = printtheme ? printtheme : 'Material';\n args.maps.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1));\n },\n tooltipRender: function (args) {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000 , to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name}
        Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#print-container');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n maps.print();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n
        \n \n
        \n \n \n \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n\n\n","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n\n tooltipRender: function (args) {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000 , to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name}
        Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#print-container');\n // Code for Property Panel\n var togglebtn = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n maps.print();\n };\n"} \ No newline at end of file diff --git a/src/maps/print.html b/src/maps/print.html index 510aa7b8..475f0d64 100644 --- a/src/maps/print.html +++ b/src/maps/print.html @@ -2,11 +2,13 @@
        +
        +
        @@ -37,7 +39,7 @@ Maps component features are segregated into individual feature-wise modules. To use a legend, inject the Legend module using the Maps.Inject(Legend) method.

        - + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/print.js b/src/maps/print.js index fe447763..9f630681 100644 --- a/src/maps/print.js +++ b/src/maps/print.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var printtheme = location.hash.split('/')[1]; printtheme = printtheme ? printtheme : 'Material'; args.maps.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1)); }, + // custom code end tooltipRender: function (args) { if (args.options.toString().indexOf('population') > -1) { args.cancel = true; @@ -75,6 +77,7 @@ this.default = function () { ] }); maps.appendTo('#print-container'); + // Code for Property Panel var togglebtn = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true }); diff --git a/src/maps/projection-stack.json b/src/maps/projection-stack.json index 32f1e2f3..3a50ed7a 100644 --- a/src/maps/projection-stack.json +++ b/src/maps/projection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n
        \n
        \n
        \n \n \n \n \n
        \n
        Projection Type
        \n         		\n
        \n \n
        \n
        \n
        \n\n \n
        ","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n load: function (args) {\n var projecttheme = location.hash.split('/')[1];\n projecttheme = projecttheme ? projecttheme : 'Material';\n args.maps.theme = (projecttheme.charAt(0).toUpperCase() + projecttheme.slice(1));\n },\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far',\n textStyle: { \n } \n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n var projection = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: function () {\n maps.projectionType = projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n
        \n\n
        \n \n \n \n \n \n
        \n
        Projection Type
        \n         		\n
        \n \n
        \n
        \n
        \n\n \n","index.js":"{{ripple}}/**\n * Projection sample\n */\n\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far',\n textStyle: { \n } \n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // Code for Property Panel\n var projection = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: function () {\n maps.projectionType = projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"} \ No newline at end of file diff --git a/src/maps/projection.html b/src/maps/projection.html index b8b22fe8..ebc9c1c9 100644 --- a/src/maps/projection.html +++ b/src/maps/projection.html @@ -1,9 +1,11 @@
        +
        +
        @@ -46,8 +48,10 @@

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/projection.js b/src/maps/projection.js index a78ac301..80abcad0 100644 --- a/src/maps/projection.js +++ b/src/maps/projection.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var projecttheme = location.hash.split('/')[1]; projecttheme = projecttheme ? projecttheme : 'Material'; args.maps.theme = (projecttheme.charAt(0).toUpperCase() + projecttheme.slice(1)); }, + // custom code end titleSettings: { text: 'Members of the UN Security Council', textStyle: { @@ -54,6 +56,7 @@ this.default = function () { ] }); maps.appendTo('#container'); + // Code for Property Panel var projection = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select projection type', diff --git a/src/maps/sample.json b/src/maps/sample.json index f4e4127f..d243f89b 100644 --- a/src/maps/sample.json +++ b/src/maps/sample.json @@ -3,8 +3,8 @@ "directory": "maps", "category": "Data Visualization", "ftName": "maps", + "dataSourcePath":"src/maps/map-data.js", "type": "update", - "dataSourcePath":"src/maps/map-data.js", "samples": [ { "url": "default", @@ -111,7 +111,6 @@ "name": "Legend", "description": "This demo for Essential JS2 Maps control visualizes grouping of countries in the legend based on its population density.", "category": "Features", - "type": "update", "sourceFiles":[ { "displayName": "legend.html", "path":"src/maps/legend.html" }, { "displayName": "legend.js", "path":"src/maps/legend.js" }, @@ -122,9 +121,8 @@ { "url": "color-mapping", "name": "Color Mapping", - "description": "This sample shows the average amount of rainfall and snowfall in spring season of all the states in US. Also color mapping is applied to the shapes to differentiate it from other shapes.", + "description": "This sample shows the average amount of rainfall and snowfall in spring season of all the states in US. Color mapping is applied to the shapes", "category": "Features", - "type": "new", "api": {}, "sourceFiles":[ { "displayName": "color-mapping.html", "path":"src/maps/color-mapping.html" }, @@ -148,7 +146,6 @@ "url": "osm", "name": "OpenStreetMap", "category": "Map Providers", - "type": "new", "sourceFiles":[ { "displayName": "osm.html", "path":"src/maps/osm.html" }, { "displayName": "osm.js", "path":"src/maps/osm.js" } @@ -158,7 +155,6 @@ "url": "osm-with-navigation-lines", "name": "OSM with Navigation Lines", "category": "Map Providers", - "type": "new", "sourceFiles":[ { "displayName": "osm-with-navigation-lines.html", "path":"src/maps/osm-with-navigation-lines.html" }, { "displayName": "osm-with-navigation-lines.js", "path":"src/maps/osm-with-navigation-lines.js" } @@ -168,7 +164,6 @@ "url": "osm-with-sublayers", "name": "OSM with Sublayer", "category": "Map Providers", - "type": "new", "sourceFiles":[ { "displayName": "osm-with-sublayers.html", "path":"src/maps/osm-with-sublayers.html" }, { "displayName": "osm-with-sublayers.js", "path":"src/maps/osm-with-sublayers.js" }, @@ -298,6 +293,18 @@ { "displayName": "oklahoma.json", "path":"src/maps/map-data/oklahoma.json" } ] }, + { + "url": "cyber-attack-map", + "name": "Cyber Attack Map", + "description": "This demo for Essential JS2 Maps control visualizes the cyber attack map, which displays the cyber attacks and threats from various countries to USA.", + "category": "Use Cases", + "sourceFiles":[ + { "displayName": "cyber-attack-map.html", "path":"src/maps/cyber-attack-map.html" }, + { "displayName": "cyber-attack-map.js", "path":"src/maps/cyber-attack-map.js" }, + { "displayName": "world-map.json", "path":"src/maps/map-data/world-map.json" } + ], + "type": "new" + }, { "url": "pie", "name": "Map with Pie chart", @@ -314,7 +321,6 @@ "name": "Map with Slider", "description": "This demo for Essential JS2 Maps control demonstrates the rendering of normal geometry type shapes on the map.", "category": "Use Cases", - "type": "new", "api": {}, "sourceFiles":[ { "displayName": "map-with-slider.html", "path":"src/maps/map-with-slider.html" }, diff --git a/src/maps/seat-selection-stack.json b/src/maps/seat-selection-stack.json index a31e4a0d..067aa54f 100644 --- a/src/maps/seat-selection-stack.json +++ b/src/maps/seat-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n \n
        Bus seat selection
        \n
        \n
        \n \n
        \n
        \n \n
        \n\n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n\n
        Available\n
        \n
        \n\n
        Selected\n
        \n
        \n\n
        Booked\n
        \n
        \n
        \n Clear Selection

        \n
        \n
        \n\t\t\n \n
        ","index.js":"{{ripple}}\n var seatInfo = document.getElementById('selectedseats');\n ej.maps.Maps.Inject(ej.maps.Selection);\n var maps = new ej.maps.Maps({\n load: function (args) {\n var seattheme = location.hash.split('/')[1];\n seattheme = seattheme ? seattheme : 'Material';\n args.maps.theme = (seattheme.charAt(0).toUpperCase() + seattheme.slice(1));\n },\n projectionType: 'Equirectangular',\n itemSelection: function (args) {\n if (args.shapeData.fill === 'Orange') {\n args.fill = 'Orange !important';\n document.getElementById(args.target).setAttribute('class', 'ShapeselectionMapStyle');\n return;\n }\n args.fill = 'green';\n var seat = args.shapeData.seatno;\n var connector = ' ';\n if (seatInfo.innerHTML === '') {\n seatInfo.innerHTML = 'Seats Selected -';\n }\n else {\n connector = ', ';\n }\n var seatString = '' + connector + seat + '';\n var seatString1 = ' ' + seat + ',';\n var lastString = 'Seats Selected - ' + seat + '';\n if (seatInfo.innerHTML.indexOf(seatString) === -1 && seatInfo.innerHTML.indexOf(seatString1) === -1 &&\n seatInfo.innerHTML.indexOf(lastString) === -1) {\n seatInfo.innerHTML += '' + connector + seat + '';\n }\n else {\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString, '');\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString1, '');\n if (seatInfo.innerHTML === lastString) {\n seatInfo.innerHTML = '';\n }\n }\n },\n height: '400',\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n geometryType: 'Normal',\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/seat.json'),\n shapeSettings: {\n colorValuePath: 'fill'\n },\n selectionSettings: {\n enable: true,\n opacity: 1,\n enableMultiSelect: true\n }\n }\n ]\n });\n maps.appendTo('#maps');\n\t// to clear the selected seats\n document.getElementById('clear-btn').onclick = function () {\n seatInfo.innerHTML = '';\n var selected = document.getElementsByClassName('ShapeselectionMapStyle');\n for (var i = 0, length_1 = selected.length; i < length_1; i++) {\n selected[0].setAttribute('class', '');\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        Bus seat selection
        \n
        \n
        \n \n
        \n
        \n \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        \n\n
        Available\n
        \n
        \n\n
        Selected\n
        \n
        \n\n
        Booked\n
        \n
        \n
        \n Clear Selection

        \n
        \n
        \n\t\t\n \n","index.js":"{{ripple}}\n var seatInfo = document.getElementById('selectedseats');\n ej.maps.Maps.Inject(ej.maps.Selection);\n var maps = new ej.maps.Maps({\n\n projectionType: 'Equirectangular',\n itemSelection: function (args) {\n if (args.shapeData.fill === 'Orange') {\n args.fill = 'Orange !important';\n document.getElementById(args.target).setAttribute('class', 'ShapeselectionMapStyle');\n return;\n }\n args.fill = 'green';\n var seat = args.shapeData.seatno;\n var connector = ' ';\n if (seatInfo.innerHTML === '') {\n seatInfo.innerHTML = 'Seats Selected -';\n }\n else {\n connector = ', ';\n }\n var seatString = '' + connector + seat + '';\n var seatString1 = ' ' + seat + ',';\n var lastString = 'Seats Selected - ' + seat + '';\n if (seatInfo.innerHTML.indexOf(seatString) === -1 && seatInfo.innerHTML.indexOf(seatString1) === -1 &&\n seatInfo.innerHTML.indexOf(lastString) === -1) {\n seatInfo.innerHTML += '' + connector + seat + '';\n }\n else {\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString, '');\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString1, '');\n if (seatInfo.innerHTML === lastString) {\n seatInfo.innerHTML = '';\n }\n }\n },\n height: '400',\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n geometryType: 'Normal',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/seat.json'),\n shapeSettings: {\n colorValuePath: 'fill'\n },\n selectionSettings: {\n enable: true,\n opacity: 1,\n enableMultiSelect: true\n }\n }\n ]\n });\n maps.appendTo('#maps');\n // to clear the selected seats\n document.getElementById('clear-btn').onclick = function () {\n seatInfo.innerHTML = '';\n var selected = document.getElementsByClassName('ShapeselectionMapStyle');\n for (var i = 0, length_1 = selected.length; i < length_1; i++) {\n selected[0].setAttribute('class', '');\n }\n };\n\n"} \ No newline at end of file diff --git a/src/maps/seat-selection.html b/src/maps/seat-selection.html index 35833d74..680c70d2 100644 --- a/src/maps/seat-selection.html +++ b/src/maps/seat-selection.html @@ -10,7 +10,7 @@
        - +
        @@ -54,10 +54,11 @@

        Injecting Module

        - Maps component features are segregated into individual feature-wise modules. To use the selection, inject the Selection module using the Maps.Inject(Selection) method. More information on the selection can be found in this documentation section. + Maps component features are segregated into individual feature-wise modules. To use the selection, inject the Selection module using the Maps.Inject(Selection) method.

        + \ No newline at end of file + + \ No newline at end of file diff --git a/src/maps/seat-selection.js b/src/maps/seat-selection.js index 9c982af1..d11a989e 100644 --- a/src/maps/seat-selection.js +++ b/src/maps/seat-selection.js @@ -2,11 +2,13 @@ this.default = function () { var seatInfo = document.getElementById('selectedseats'); ej.maps.Maps.Inject(ej.maps.Selection); var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var seattheme = location.hash.split('/')[1]; seattheme = seattheme ? seattheme : 'Material'; args.maps.theme = (seattheme.charAt(0).toUpperCase() + seattheme.slice(1)); }, + // custom code end projectionType: 'Equirectangular', itemSelection: function (args) { if (args.shapeData.fill === 'Orange') { @@ -58,7 +60,7 @@ this.default = function () { ] }); maps.appendTo('#maps'); - // to clear the selected seats + // to clear the selected seats document.getElementById('clear-btn').onclick = function () { seatInfo.innerHTML = ''; var selected = document.getElementsByClassName('ShapeselectionMapStyle'); diff --git a/src/maps/selection-stack.json b/src/maps/selection-stack.json index c60982ba..8528cec1 100644 --- a/src/maps/selection-stack.json +++ b/src/maps/selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
        \n
        \n
        \n
        Source:\n en.wikipedia.org\n
        \n \n
        \n x\n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n
        \n \n \n \n \n \n
        \n \n \n \n \n \n
        \n \n \n \n \n \n
        \n \n \n \n
        \n \n
        \n \n \n \n \n
        ","index.js":"{{ripple}}/**\n * Maps selection sample\n */\n\n \n var maps = new ej.maps.Maps({\n load: function (args) {\n var selectiontheme = location.hash.split('/')[1];\n selectiontheme = selectiontheme ? selectiontheme : 'Material';\n args.maps.theme = (selectiontheme.charAt(0).toUpperCase() + selectiontheme.slice(1));\n },\n itemSelection: function (args) {\n if (args.shapeData !== ej.base.isNullOrUndefined) {\n var matched = navigator.userAgent;\n var browser = matched.toLowerCase();\n var isIE11 = !!navigator.userAgent.match(/Trident\\/7\\./);\n if (isIE11) {\n browser = 'msie';\n }\n var object = args.data;\n var popup = document.getElementById('closepopup');\n var closebutton = document.getElementById('closebutton');\n var winner = document.getElementById('winner');\n var state = document.getElementById('state');\n var trumpvote = document.getElementById('trumpvotes');\n var clintonvote = document.getElementById('clintonvotes');\n popup.style.display = 'block';\n closebutton.style.display = 'block';\n closebutton.style.left = '206px';\n closebutton.style.top = '-15px';\n closebutton.onclick = function () {\n var popup = document.getElementById('closepopup');\n var closebutton = document.getElementById('closebutton');\n popup.style.display = 'none';\n closebutton.style.display = 'none';\n };\n if (browser !== 'mozilla') {\n state.innerText = args.data.State;\n winner.innerText = args.data.Candidate;\n trumpvote.innerText = args.data.Trump + '%';\n clintonvote.innerText = args.data.Clinton + '%';\n }\n else {\n state.textContent = args.data.State;\n winner.textContent = args.data.Candidate;\n trumpvote.textContent = args.data.Trump + '%';\n clintonvote.textContent = args.data.Clinton + '%';\n }\n }\n },\n titleSettings: {\n text: 'USA Election Results - 2016',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Top',\n width: '80%',\n textStyle: {\n fontWeight: '400',\n size: '14px'\n }\n },\n zoomSettings: {\n enable: false\n },\n \n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'State',\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/selection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'State'\n },\n highlightSettings: {\n enable: true,\n fill: '#A3B0D0'\n },\n selectionSettings: {\n enable: true,\n fill: '#4C515B ',\n opacity: 1\n },\n shapeSettings: {\n colorValuePath: 'Candidate',\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        Source:\n en.wikipedia.org\n
        \n \n
        \n x\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n \n
        \n \n \n \n \n \n
        \n \n \n \n \n \n
        \n \n \n \n \n \n
        \n \n \n \n
        \n \n
        \n \n \n \n","index.js":"{{ripple}}/**\n * Maps selection sample\n */\n\n \n var maps = new ej.maps.Maps({\n\n itemSelection: function (args) {\n if (args.shapeData !== ej.base.isNullOrUndefined) {\n var matched = navigator.userAgent;\n var browser = matched.toLowerCase();\n var isIE11 = !!navigator.userAgent.match(/Trident\\/7\\./);\n if (isIE11) {\n browser = 'msie';\n }\n var object = args.data;\n var popup = document.getElementById('closepopup');\n var closebutton = document.getElementById('closebutton');\n var winner = document.getElementById('winner');\n var state = document.getElementById('state');\n var trumpvote = document.getElementById('trumpvotes');\n var clintonvote = document.getElementById('clintonvotes');\n popup.style.display = 'block';\n closebutton.style.display = 'block';\n closebutton.style.left = '206px';\n closebutton.style.top = '-15px';\n closebutton.onclick = function () {\n var popup = document.getElementById('closepopup');\n var closebutton = document.getElementById('closebutton');\n popup.style.display = 'none';\n closebutton.style.display = 'none';\n };\n if (browser !== 'mozilla') {\n state.innerText = args.data.State;\n winner.innerText = args.data.Candidate;\n trumpvote.innerText = args.data.Trump + '%';\n clintonvote.innerText = args.data.Clinton + '%';\n }\n else {\n state.textContent = args.data.State;\n winner.textContent = args.data.Candidate;\n trumpvote.textContent = args.data.Trump + '%';\n clintonvote.textContent = args.data.Clinton + '%';\n }\n }\n },\n titleSettings: {\n text: 'USA Election Results - 2016',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Top',\n width: '80%',\n textStyle: {\n fontWeight: '400',\n size: '14px'\n }\n },\n zoomSettings: {\n enable: false\n },\n \n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'State',\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/selection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'State'\n },\n highlightSettings: {\n enable: true,\n fill: '#A3B0D0'\n },\n selectionSettings: {\n enable: true,\n fill: '#4C515B ',\n opacity: 1\n },\n shapeSettings: {\n colorValuePath: 'Candidate',\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/selection.html b/src/maps/selection.html index 732ec050..248123d1 100644 --- a/src/maps/selection.html +++ b/src/maps/selection.html @@ -1,10 +1,11 @@
        + - + \n \n \n
        ","index.js":"{{ripple}}/**\n * Maps zooming sample\n */\n \n var maps = new ej.maps.Maps({\n load: function (args) {\n var zoomtheme = location.hash.split('/')[1];\n zoomtheme = zoomtheme ? zoomtheme : 'Material';\n args.maps.theme = (zoomtheme.charAt(0).toUpperCase() + zoomtheme.slice(1));\n },\n zoomSettings: {\n enable: true,\n toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],\n pinchZooming: true\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n shapeSettings: {\n autofill: true,\n colorValuePath: 'color'\n },\n dataSource: new ej.maps.MapAjax(location.origin + location.pathname + 'src/maps/map-data/zooming-datasource.json'),\n }\n ]\n });\n maps.appendTo('#mapszooming');\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 500,\n min: 0, max: 1000, step: 250,\n change: sliderChange\n }, '#range');\n slider.change = sliderChange = function (e) {\n maps.layers[0].animationDuration = e.value;\n maps.refresh();\n document.getElementById('dur').innerHTML = e.value.toString() + ' ms';\n };\n document.getElementById('mousewheel').onchange = function () {\n var element = (document.getElementById('mousewheel'));\n maps.zoomSettings.mouseWheelZoom = element.checked;\n maps.refresh();\n };\n document.getElementById('pinch').onchange = function () {\n var element = (document.getElementById('pinch'));\n maps.zoomSettings.pinchZooming = element.checked;\n maps.refresh();\n };\n document.getElementById('zoom').onchange = function () {\n var element = (document.getElementById('zoom'));\n maps.zoomSettings.enable = element.checked;\n maps.refresh();\n };\n document.getElementById('doubletap').onchange = function () {\n var element = (document.getElementById('doubletap'));\n maps.zoomSettings.doubleClickZoom = element.checked;\n\t\tmaps.zoomSettings.zoomOnClick = (!element.checked);\n var ele1 = document.getElementById('singletap');\n if (element.checked) {\n ele1.disabled = true;\n }\n else {\n ele1.disabled = false;\n }\n\t\tmaps.refresh();\n };\n document.getElementById('singletap').onchange = function () {\n var element = (document.getElementById('singletap'));\n var ele1 = document.getElementById('doubletap');\n maps.zoomSettings.zoomOnClick = element.checked;\n\t\tmaps.zoomSettings.doubleClickZoom = (!element.checked);\n if (element.checked) {\n ele1.disabled = true;\n }\n else {\n ele1.disabled = false;\n }\n\t\tmaps.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
        \n
        \n
        \n \n
        \n \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Zooming
        \n         		\n \n
        \n
        Mouse wheel zoom
        \n         		\n \n
        \n
        Pinch zoom
        \n         		\n \n
        \n
        Single click zoom
        \n         		\n \n
        \n
        Double click zoom
        \n         		\n \n
        \n
        Animation duration
        500 ms
        \n         		\n
        \n
        \n
        \n \n \n \n","index.js":"{{ripple}}/**\n * Maps zooming sample\n */\n \n var maps = new ej.maps.Maps({\n\n zoomSettings: {\n enable: true,\n toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],\n pinchZooming: true\n },\n layers: [\n {\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n shapeSettings: {\n autofill: true,\n colorValuePath: 'color'\n },\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/zooming-datasource.json'),\n }\n ]\n });\n maps.appendTo('#mapszooming');\n // Code for Property Panel\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 500,\n min: 0, max: 1000, step: 250,\n change: sliderChange\n }, '#range');\n slider.change = sliderChange = function (e) {\n maps.layers[0].animationDuration = e.value;\n maps.refresh();\n document.getElementById('dur').innerHTML = e.value.toString() + ' ms';\n };\n document.getElementById('mousewheel').onchange = function () {\n var element = (document.getElementById('mousewheel'));\n maps.zoomSettings.mouseWheelZoom = element.checked;\n maps.refresh();\n };\n document.getElementById('pinch').onchange = function () {\n var element = (document.getElementById('pinch'));\n maps.zoomSettings.pinchZooming = element.checked;\n maps.refresh();\n };\n document.getElementById('zoom').onchange = function () {\n var element = (document.getElementById('zoom'));\n maps.zoomSettings.enable = element.checked;\n maps.refresh();\n };\n document.getElementById('doubletap').onchange = function () {\n var element = (document.getElementById('doubletap'));\n maps.zoomSettings.doubleClickZoom = element.checked;\n\t\tmaps.zoomSettings.zoomOnClick = (!element.checked);\n var ele1 = document.getElementById('singletap');\n if (element.checked) {\n ele1.disabled = true;\n }\n else {\n ele1.disabled = false;\n }\n\t\tmaps.refresh();\n };\n document.getElementById('singletap').onchange = function () {\n var element = (document.getElementById('singletap'));\n var ele1 = document.getElementById('doubletap');\n maps.zoomSettings.zoomOnClick = element.checked;\n\t\tmaps.zoomSettings.doubleClickZoom = (!element.checked);\n if (element.checked) {\n ele1.disabled = true;\n }\n else {\n ele1.disabled = false;\n }\n\t\tmaps.refresh();\n };\n"} \ No newline at end of file diff --git a/src/maps/zooming.html b/src/maps/zooming.html index 62f9acae..5894de5d 100644 --- a/src/maps/zooming.html +++ b/src/maps/zooming.html @@ -1,80 +1,9 @@ -
        +
        @@ -145,4 +74,78 @@ #range > * { padding: 0px !important; } - \ No newline at end of file + + + + \ No newline at end of file diff --git a/src/maps/zooming.js b/src/maps/zooming.js index 63c180d5..0c81d100 100644 --- a/src/maps/zooming.js +++ b/src/maps/zooming.js @@ -3,11 +3,13 @@ */ this.default = function () { var maps = new ej.maps.Maps({ + // custom code start load: function (args) { var zoomtheme = location.hash.split('/')[1]; zoomtheme = zoomtheme ? zoomtheme : 'Material'; args.maps.theme = (zoomtheme.charAt(0).toUpperCase() + zoomtheme.slice(1)); }, + // custom code end zoomSettings: { enable: true, toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'], @@ -27,6 +29,7 @@ this.default = function () { ] }); maps.appendTo('#mapszooming'); + // Code for Property Panel var sliderChange; var slider = new ej.inputs.Slider({ value: 500, diff --git a/src/maskedtextbox/custom-mask-stack.json b/src/maskedtextbox/custom-mask-stack.json index 5f29c3f4..b0af82aa 100644 --- a/src/maskedtextbox/custom-mask-stack.json +++ b/src/maskedtextbox/custom-mask-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        Time (ex: 10:00 PM, 10:00 AM)\n
        \n \n \n
        IP Address (ex: 212.212.111.222)
        \n \n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var mask1 = new ej.inputs.MaskedTextBox({\n mask: '00:00 >PM',\n // Custom characters to specify time value\n customCharacters: {\n P: 'P,A,a,p',\n M: 'M,m'\n },\n floatLabelType: 'Never'\n });\n mask1.appendTo('#mask1');\n var mask2 = new ej.inputs.MaskedTextBox({\n // Mask in range format\n mask: '[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]',\n floatLabelType: 'Never'\n });\n mask2.appendTo('#mask2');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        Time (ex: 10:00 PM, 10:00 AM)\n
        \n \n \n
        IP Address (ex: 212.212.111.222)
        \n \n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n var mask1 = new ej.inputs.MaskedTextBox({\n mask: '00:00 >PM',\n // Custom characters to specify time value\n customCharacters: {\n P: 'P,A,a,p',\n M: 'M,m'\n },\n floatLabelType: 'Never'\n });\n mask1.appendTo('#mask1');\n var mask2 = new ej.inputs.MaskedTextBox({\n // Mask in range format\n mask: '[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]',\n floatLabelType: 'Never'\n });\n mask2.appendTo('#mask2');\n"} \ No newline at end of file diff --git a/src/maskedtextbox/custom-mask.html b/src/maskedtextbox/custom-mask.html index e397cd60..00592ec1 100644 --- a/src/maskedtextbox/custom-mask.html +++ b/src/maskedtextbox/custom-mask.html @@ -18,9 +18,9 @@

        The custom mask is achieved by the following ways:

        Custom characters:

        -

        You can form the mask with any non-mask elements (literals), and you can configure the behavior of that non-mask element as mask element +

        You can form the mask with any non-mask elements (literals), and you can configure the behavior of that non-mask element as mask element through the - customCharacters property. + customCharacters property.

        In this demo, the “Time” mask '99 : 99 >PM' contains the literals P and M, where it is configured to allow the inputs as 'P', 'A', 'p', 'a', and 'M', 'm'.

        @@ -30,8 +30,8 @@

        Here, in the “IP Address” example, each character is masked by an regular expression to allow a particular range of values.

        -

        For more information, you can refer to the Custom characters and - Regular expression sections from the documentation.

        +

        For more information, you can refer to the Custom characters and + Regular expression sections from the documentation.

        \n
        \n
        Mobile Number\n
        \n \n
        Country ISO Code\n
        \n \n
        D.O.B\n
        \n \n
        Product Key\n
        \n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n // Render Masked Textbox with default mask\n var mask = new ej.inputs.MaskedTextBox({\n mask: '000-000-0000'\n });\n mask.appendTo('#mask1');\n var mask2 = new ej.inputs.MaskedTextBox({\n mask: '>LL / LLL'\n });\n mask2.appendTo('#mask2');\n var mask3 = new ej.inputs.MaskedTextBox({\n mask: '00/00/0000'\n });\n mask3.appendTo('#mask3');\n var mask4 = new ej.inputs.MaskedTextBox({\n mask: '>AAAAA-AAAAA-AAAAA-AAAAA'\n });\n mask4.appendTo('#mask4');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        Mobile Number\n
        \n \n
        Country ISO Code\n
        \n \n
        D.O.B\n
        \n \n
        Product Key\n
        \n \n
        \n
        \n\n\n
        ","index.js":"{{ripple}}\n // Render Masked Textbox with default mask\n var mask = new ej.inputs.MaskedTextBox({\n mask: '000-000-0000'\n });\n mask.appendTo('#mask1');\n var mask2 = new ej.inputs.MaskedTextBox({\n mask: '>LL / LLL'\n });\n mask2.appendTo('#mask2');\n var mask3 = new ej.inputs.MaskedTextBox({\n mask: '00/00/0000'\n });\n mask3.appendTo('#mask3');\n var mask4 = new ej.inputs.MaskedTextBox({\n mask: '>AAAAA-AAAAA-AAAAA-AAAAA'\n });\n mask4.appendTo('#mask4');\n"} \ No newline at end of file diff --git a/src/maskedtextbox/default.html b/src/maskedtextbox/default.html index 84c21c06..6ab81f5a 100644 --- a/src/maskedtextbox/default.html +++ b/src/maskedtextbox/default.html @@ -24,13 +24,13 @@

        The MaskedTextBox is a textbox extended component that allows the user to enter only the valid input based - on the provided mask. + on the provided mask. It is used to get the input with specific formats like Phone number, Date, Time, IP, Social security number, etc. -

        MaskedTextBox supports the list of mask elements based +

        MaskedTextBox supports the list of mask elements based on the standard MSDN mask elements.

        -

        More information about the MaskedTextBox instantiation can be found in the documentation section.

        +

        More information about the MaskedTextBox instantiation can be found in the documentation section.

        \n
        \n
        Formats
        \n \n
        \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Mask
        \n         		\n
        \n \n \n
        \n
        \n
        Prompt Character
        \n         		\n
        \n \n \n
        \n
        \n
        Value
        \n         		\n \n
        \n
        \n
        Masked Value
        \n         		\n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ele1 = document.getElementById('input1');\n var ele3 = document.getElementById('val1');\n var ele4 = document.getElementById('val2');\n // Render dropdown to set prompt character for Masked Textbox\n var ddlObj = new ej.dropdowns.DropDownList({\n popupHeight: '200px',\n change: function () {\n mask.setProperties({ promptChar: ddlObj.value });\n ele3.innerHTML = mask.value;\n ele4.innerHTML = mask.getMaskedValue();\n }\n });\n ddlObj.appendTo('#ddl');\n // Render the Masked Textbox\n var mask = new ej.inputs.MaskedTextBox({\n mask: '(999)-999-9999',\n change: function (args) {\n ele3.innerHTML = args.value;\n ele4.innerHTML = args.maskedValue;\n },\n floatLabelType: 'Never'\n });\n ele1.value = '(999)-999-9999';\n mask.appendTo('#mask1');\n ele4.innerHTML = mask.getMaskedValue();\n // Mask will be updated for MaskedTextBox, whenever mask format from properties panel has been changed\n ele1.oninput = function () {\n var start = ele1.selectionStart;\n var end = ele1.selectionEnd;\n mask.setProperties({ mask: ele1.value });\n ele1.setSelectionRange(start, end);\n ele3.innerHTML = mask.value;\n ele4.innerHTML = mask.getMaskedValue();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
        \n
        \n
        Formats
        \n \n
        \n
        \n
        \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
        \n
        Mask
        \n         		\n
        \n \n \n
        \n
        \n
        Prompt Character
        \n         		\n
        \n \n \n
        \n
        \n
        Value
        \n         		\n \n
        \n
        \n
        Masked Value
        \n         		\n \n
        \n
        \n
        \n\n\n\n
        ","index.js":"{{ripple}}\n var ele1 = document.getElementById('input1');\n var ele3 = document.getElementById('val1');\n var ele4 = document.getElementById('val2');\n // Render dropdown to set prompt character for Masked Textbox\n var ddlObj = new ej.dropdowns.DropDownList({\n popupHeight: '200px',\n change: function () {\n mask.setProperties({ promptChar: ddlObj.value });\n ele3.innerHTML = mask.value;\n ele4.innerHTML = mask.getMaskedValue();\n }\n });\n ddlObj.appendTo('#ddl');\n // Render the Masked Textbox\n var mask = new ej.inputs.MaskedTextBox({\n mask: '(999)-999-9999',\n change: function (args) {\n ele3.innerHTML = args.value;\n ele4.innerHTML = args.maskedValue;\n },\n floatLabelType: 'Never'\n });\n ele1.value = '(999)-999-9999';\n mask.appendTo('#mask1');\n ele4.innerHTML = mask.getMaskedValue();\n // Mask will be updated for MaskedTextBox, whenever mask format from properties panel has been changed\n ele1.oninput = function () {\n var start = ele1.selectionStart;\n var end = ele1.selectionEnd;\n mask.setProperties({ mask: ele1.value });\n ele1.setSelectionRange(start, end);\n ele3.innerHTML = mask.value;\n ele4.innerHTML = mask.getMaskedValue();\n };\n"} \ No newline at end of file diff --git a/src/maskedtextbox/formats.html b/src/maskedtextbox/formats.html index 90d02ddf..9c3f2959 100644 --- a/src/maskedtextbox/formats.html +++ b/src/maskedtextbox/formats.html @@ -64,8 +64,8 @@

        Here, the "Value" and "Masked Value" labels from the properties panel returns the raw value (unmasked value) and masked value of the MaskedTextBox component. You can also get these raw value and masked value anytime through the - value property - and getMaskedValue method. + value property + and getMaskedValue method.

        diff --git a/src/maskedtextbox/sample.json b/src/maskedtextbox/sample.json index e6e62605..c70cba8d 100644 --- a/src/maskedtextbox/sample.json +++ b/src/maskedtextbox/sample.json @@ -7,7 +7,7 @@ "url": "default", "name": "Default Functionalities", "category": "Input Mask", - "description": "The Masked Textbox allows the user to enter only the valid input based on the provided mask format. The mask format can be any Phone number, Country ISO code, Date, Time, Social security number, product key and so on.", + "description": "The Masked Textbox allows users to enter only the valid input based on the provided mask format such as Phone number, Country ISO code, Date, Time and so on.", "api": { "MaskedTextBox": [ "mask" @@ -18,7 +18,7 @@ "url": "custom-mask", "name": "Custom Mask", "category": "Input Mask", - "description": "The custom mask can be done by using custom characters as mask elements and using regular expressions. In this demo the time format and IP address fields are achieved by using the custom mask literals and regex.", + "description": "The custom mask is done using custom characters as mask elements. Time format and IP address fields are achieved using the custom mask literals and regex.", "api": { "MaskedTextBox": [ "mask", diff --git a/src/menu/api-stack.json b/src/menu/api-stack.json index 8ffb1d5b..b790e575 100644 --- a/src/menu/api-stack.json +++ b/src/menu/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
        \n
        \n
        \n
          \n
          \n
          \n
          \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
          \n
          Orientation
          \n           		\n
          \n \n
          \n
          \n
          Enable / Disable item
          \n           		\n
          \n \n
          \n
          \n
          Show Item on Click
          \n           		\n \n
          \n
          \n
          \n\n\n
          ","index.js":"{{ripple}}/**\n * Menu API sample\n */\n\n\n //Menu datasource\n var data = [\n {\n header: 'Events',\n subItems: [\n { text: 'Conferences' },\n { text: 'Music' },\n { text: 'Workshops' }\n ]\n },\n {\n header: 'Movies',\n subItems: [\n { text: 'Now Showing' },\n { text: 'Coming Soon' }\n ]\n },\n {\n header: 'Directory',\n subItems: [\n { text: 'Media Gallery' },\n { text: 'Newsletters' }\n ]\n },\n {\n header: 'Queries',\n subItems: [\n { text: 'Our Policy' },\n { text: 'Site Map'},\n { text: '24x7 Support'}\n ]\n },\n { header: 'Services' }\n ];\n\n //Menu fields definition\n var menuFields = {\n text: ['header', 'text', 'value'],\n children: ['subItems', 'options']\n };\n\n //Menu initialization\n var menuObj = new ej.navigations.Menu({ items: data, fields: menuFields }, '#menu');\n\n //DropDownList initialization\n new ej.dropdowns.DropDownList(\n {\n value: 'Horizontal',\n popupHeight: '200px',\n change: function (args) {\n menuObj.orientation = args.value;\n }\n },\n '#ddl'); \n var headerData = [{ text: 'Events' }, { text: 'Movies'}, { text: 'Directory' }, { text: 'Queries' }, { text: 'Services' }];\n\n //MultiSelect initialization\n new ej.dropdowns.MultiSelect(\n {\n dataSource: headerData,\n popupHeight: '250px',\n width: '160px',\n mode: 'CheckBox',\n allowFiltering: false,\n placeholder: 'Select item',\n showDropDownIcon: true,\n change: function (args) {\n if (args.value) {\n menuObj.enableItems(['Events', 'Movies', 'Directory', 'Queries', 'Services'], true);\n menuObj.enableItems(args.value, false);\n }\n }\n },\n '#enableDisable');\n\n //CheckBox initialization\n new ej.buttons.CheckBox(\n {\n checked: false,\n change: function (args) {\n menuObj.showItemOnClick = args.checked;\n }\n },\n '#show-btn');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
          \n
          \n
          \n
            \n
            \n
            \n
            \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
            \n
            Orientation
            \n             		\n
            \n \n
            \n
            \n
            Enable / Disable item
            \n             		\n
            \n \n
            \n
            \n
            Show Item on Click
            \n             		\n \n
            \n
            \n
            \n\n\n","index.js":"{{ripple}}/**\n * Menu API sample\n */\n\n\n //Menu datasource\n var data = [\n {\n header: 'Events',\n subItems: [\n { text: 'Conferences' },\n { text: 'Music' },\n { text: 'Workshops' }\n ]\n },\n {\n header: 'Movies',\n subItems: [\n { text: 'Now Showing' },\n { text: 'Coming Soon' }\n ]\n },\n {\n header: 'Directory',\n subItems: [\n { text: 'Media Gallery' },\n { text: 'Newsletters' }\n ]\n },\n {\n header: 'Queries',\n subItems: [\n { text: 'Our Policy' },\n { text: 'Site Map'},\n { text: '24x7 Support'}\n ]\n },\n { header: 'Services' }\n ];\n\n //Menu fields definition\n var menuFields = {\n text: ['header', 'text', 'value'],\n children: ['subItems', 'options']\n };\n\n //Menu initialization\n var menuObj = new ej.navigations.Menu({ items: data, fields: menuFields }, '#menu');\n\n //DropDownList initialization\n new ej.dropdowns.DropDownList(\n {\n value: 'Horizontal',\n popupHeight: '200px',\n change: function (args) {\n menuObj.orientation = args.value;\n }\n },\n '#ddl'); \n var headerData = [{ text: 'Events' }, { text: 'Movies'}, { text: 'Directory' }, { text: 'Queries' }, { text: 'Services' }];\n\n //MultiSelect initialization\n new ej.dropdowns.MultiSelect(\n {\n dataSource: headerData,\n popupHeight: '250px',\n width: '160px',\n mode: 'CheckBox',\n allowFiltering: false,\n placeholder: 'Select item',\n showDropDownIcon: true,\n change: function (args) {\n if (args.value) {\n menuObj.enableItems(['Events', 'Movies', 'Directory', 'Queries', 'Services'], true);\n menuObj.enableItems(args.value, false);\n }\n }\n },\n '#enableDisable');\n\n //CheckBox initialization\n new ej.buttons.CheckBox(\n {\n checked: false,\n change: function (args) {\n menuObj.showItemOnClick = args.checked;\n }\n },\n '#show-btn');\n\n"} \ No newline at end of file diff --git a/src/menu/api.html b/src/menu/api.html index 436ee988..2e4cd44c 100644 --- a/src/menu/api.html +++ b/src/menu/api.html @@ -61,6 +61,8 @@ documentation section.

            + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/menu/data-binding-stack.json b/src/menu/data-binding-stack.json index 5dee67c5..e7bac94f 100644 --- a/src/menu/data-binding-stack.json +++ b/src/menu/data-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
            \n
            \n
              \n
              \n
              \n\n\n
              ","index.js":"{{ripple}}/**\n * Menu data binding sample\n */\n\n\n //Menu datasource\n var menuDatasource = [\n { id: 'parent1', text: 'Appliances', parentId: null },\n { id: 'parent2', text: 'Accessories', parentId: null },\n { id: 'parent3', text: 'Fashion', parentId: null },\n { id: 'parent4', text: 'Home & Living', parentId: null },\n { id: 'parent5', text: 'Entertainment', parentId: null },\n\n { id: 'parent6', text: 'Kitchen', parentId: 'parent1' },\n { id: 'parent7', text: 'Washing Machine', parentId: 'parent1' },\n { id: 'parent8', text: 'Air Conditioners', parentId: 'parent1' },\n\n { id: 'parent9', text: 'Electric Cookers', parentId: 'parent6' },\n { id: 'parent10', text: 'Coffee Makers', parentId: 'parent6' },\n { id: 'parent11', text: 'Blenders', parentId: 'parent6' },\n\n { id: 'parent12', text: 'Fully Automatic', parentId: 'parent7' },\n { id: 'parent13', text: 'Semi Automatic', parentId: 'parent7' },\n\n { id: 'parent14', text: 'Inverter ACs', parentId: 'parent8' },\n { id: 'parent15', text: 'Split ACs', parentId: 'parent8' },\n { id: 'parent16', text: 'Window ACs', parentId: 'parent8' },\n\n { id: 'parent17', text: 'Mobile', parentId: 'parent2' },\n { id: 'parent18', text: 'Computer', parentId: 'parent2' },\n\n { id: 'parent19', text: 'Headphones', parentId: 'parent17' },\n { id: 'parent20', text: 'Memory Cards', parentId: 'parent17' },\n { id: 'parent21', text: 'Power Banks', parentId: 'parent17' },\n\n { id: 'parent22', text: 'Pendrives', parentId: 'parent18' },\n { id: 'parent23', text: 'External Hard Disks', parentId: 'parent18' },\n { id: 'parent24', text: 'Monitors', parentId: 'parent18' },\n\n { id: 'parent25', text: 'Men', parentId: 'parent3' },\n { id: 'parent26', text: 'Women', parentId: 'parent3' },\n\n { id: 'parent27', text: 'Shirts', parentId: 'parent25' },\n { id: 'parent28', text: 'Jackets', parentId: 'parent25' },\n { id: 'parent29', text: 'Track Suits', parentId: 'parent25' },\n\n { id: 'parent30', text: 'Kurtas', parentId: 'parent26' },\n { id: 'parent31', text: 'Salwars', parentId: 'parent26' },\n { id: 'parent32', text: 'Sarees', parentId: 'parent26' },\n\n { id: 'parent33', text: 'Furniture', parentId: 'parent4' },\n { id: 'parent34', text: 'Decor', parentId: 'parent4' },\n\n { id: 'parent35', text: 'Beds', parentId: 'parent33' },\n { id: 'parent36', text: 'Mattresses', parentId: 'parent33' },\n { id: 'parent37', text: 'Dining Tables', parentId: 'parent33' },\n\n { id: 'parent38', text: 'Clocks', parentId: 'parent34' },\n { id: 'parent39', text: 'Wall Decals', parentId: 'parent34' },\n { id: 'parent40', text: 'Paintings', parentId: 'parent34' },\n\n { id: 'parent41', text: 'Televisions', parentId: 'parent5' },\n { id: 'parent42', text: 'Home Theatres', parentId: 'parent5' },\n { id: 'parent43', text: 'Gaming Laptops', parentId: 'parent5' }\n ];\n\n //Menu initialization\n new ej.navigations.Menu({ items: menuDatasource }, '#menu');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
              \n
              \n
                \n
                \n
                \n\n\n\n
                ","index.js":"{{ripple}}/**\n * Menu data binding sample\n */\n\n\n //Menu datasource\n var menuDatasource = [\n { id: 'parent1', text: 'Appliances', parentId: null },\n { id: 'parent2', text: 'Accessories', parentId: null },\n { id: 'parent3', text: 'Fashion', parentId: null },\n { id: 'parent4', text: 'Home & Living', parentId: null },\n { id: 'parent5', text: 'Entertainment', parentId: null },\n\n { id: 'parent6', text: 'Kitchen', parentId: 'parent1' },\n { id: 'parent7', text: 'Washing Machine', parentId: 'parent1' },\n { id: 'parent8', text: 'Air Conditioners', parentId: 'parent1' },\n\n { id: 'parent9', text: 'Electric Cookers', parentId: 'parent6' },\n { id: 'parent10', text: 'Coffee Makers', parentId: 'parent6' },\n { id: 'parent11', text: 'Blenders', parentId: 'parent6' },\n\n { id: 'parent12', text: 'Fully Automatic', parentId: 'parent7' },\n { id: 'parent13', text: 'Semi Automatic', parentId: 'parent7' },\n\n { id: 'parent14', text: 'Inverter ACs', parentId: 'parent8' },\n { id: 'parent15', text: 'Split ACs', parentId: 'parent8' },\n { id: 'parent16', text: 'Window ACs', parentId: 'parent8' },\n\n { id: 'parent17', text: 'Mobile', parentId: 'parent2' },\n { id: 'parent18', text: 'Computer', parentId: 'parent2' },\n\n { id: 'parent19', text: 'Headphones', parentId: 'parent17' },\n { id: 'parent20', text: 'Memory Cards', parentId: 'parent17' },\n { id: 'parent21', text: 'Power Banks', parentId: 'parent17' },\n\n { id: 'parent22', text: 'Pendrives', parentId: 'parent18' },\n { id: 'parent23', text: 'External Hard Disks', parentId: 'parent18' },\n { id: 'parent24', text: 'Monitors', parentId: 'parent18' },\n\n { id: 'parent25', text: 'Men', parentId: 'parent3' },\n { id: 'parent26', text: 'Women', parentId: 'parent3' },\n\n { id: 'parent27', text: 'Shirts', parentId: 'parent25' },\n { id: 'parent28', text: 'Jackets', parentId: 'parent25' },\n { id: 'parent29', text: 'Track Suits', parentId: 'parent25' },\n\n { id: 'parent30', text: 'Kurtas', parentId: 'parent26' },\n { id: 'parent31', text: 'Salwars', parentId: 'parent26' },\n { id: 'parent32', text: 'Sarees', parentId: 'parent26' },\n\n { id: 'parent33', text: 'Furniture', parentId: 'parent4' },\n { id: 'parent34', text: 'Decor', parentId: 'parent4' },\n\n { id: 'parent35', text: 'Beds', parentId: 'parent33' },\n { id: 'parent36', text: 'Mattresses', parentId: 'parent33' },\n { id: 'parent37', text: 'Dining Tables', parentId: 'parent33' },\n\n { id: 'parent38', text: 'Clocks', parentId: 'parent34' },\n { id: 'parent39', text: 'Wall Decals', parentId: 'parent34' },\n { id: 'parent40', text: 'Paintings', parentId: 'parent34' },\n\n { id: 'parent41', text: 'Televisions', parentId: 'parent5' },\n { id: 'parent42', text: 'Home Theatres', parentId: 'parent5' },\n { id: 'parent43', text: 'Gaming Laptops', parentId: 'parent5' }\n ];\n\n //Menu initialization\n new ej.navigations.Menu({ items: menuDatasource }, '#menu');\n\n"} \ No newline at end of file diff --git a/src/menu/data-binding.html b/src/menu/data-binding.html index 315c2454..befeb620 100644 --- a/src/menu/data-binding.html +++ b/src/menu/data-binding.html @@ -19,6 +19,7 @@ data binding section.

                + \ No newline at end of file + + diff --git a/src/menu/default-stack.json b/src/menu/default-stack.json index f00efad2..e6c6bb47 100644 --- a/src/menu/default-stack.json +++ b/src/menu/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                \n
                \n
                  \n
                  \n
                  \n\n\n\n
                  ","index.js":"{{ripple}}/**\n * Menu default sample.\n */\n\n\n // Menu items definition \n var menuItems = [\n {\n text: 'File',\n iconCss: 'em-icons e-file',\n items: [\n { text: 'Open', iconCss: 'em-icons e-open' },\n { text: 'Save', iconCss: 'e-icons e-save' },\n { separator: true },\n { text: 'Exit' }\n ]\n },\n {\n text: 'Edit',\n iconCss: 'em-icons e-edit',\n items: [\n { text: 'Cut', iconCss: 'em-icons e-cut' },\n { text: 'Copy', iconCss: 'em-icons e-copy' },\n { text: 'Paste', iconCss: 'em-icons e-paste' }\n ]\n },\n {\n text: 'View',\n items: [\n {\n text: 'Toolbars',\n items: [\n { text: 'Menu Bar' },\n { text: 'Bookmarks Toolbar' },\n { text: 'Customize' },\n ]\n },\n {\n text: 'Zoom',\n items: [\n { text: 'Zoom In' },\n { text: 'Zoom Out' },\n { text: 'Reset' },\n ]\n },\n { text: 'Full Screen' }\n ]\n },\n {\n text: 'Tools',\n items: [\n { text: 'Spelling & Grammar' },\n { text: 'Customize' },\n { separator: true },\n { text: 'Options' }\n ]\n },\n {\n text: 'Help'\n }\n ];\n\n //Menu initialization\n new ej.navigations.Menu({ items: menuItems }, '#menu');\n\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                  \n
                  \n
                    \n
                    \n
                    \n\n\n\n
                    ","index.js":"{{ripple}}/**\n * Menu default sample.\n */\n\n\n // Menu items definition \n var menuItems = [\n {\n text: 'File',\n iconCss: 'em-icons e-file',\n items: [\n { text: 'Open', iconCss: 'em-icons e-open' },\n { text: 'Save', iconCss: 'em-icons e-save' },\n { separator: true },\n { text: 'Exit' }\n ]\n },\n {\n text: 'Edit',\n iconCss: 'em-icons e-edit',\n items: [\n { text: 'Cut', iconCss: 'em-icons e-cut' },\n { text: 'Copy', iconCss: 'em-icons e-copy' },\n { text: 'Paste', iconCss: 'em-icons e-paste' }\n ]\n },\n {\n text: 'View',\n items: [\n {\n text: 'Toolbars',\n items: [\n { text: 'Menu Bar' },\n { text: 'Bookmarks Toolbar' },\n { text: 'Customize' },\n ]\n },\n {\n text: 'Zoom',\n items: [\n { text: 'Zoom In' },\n { text: 'Zoom Out' },\n { text: 'Reset' },\n ]\n },\n { text: 'Full Screen' }\n ]\n },\n {\n text: 'Tools',\n items: [\n { text: 'Spelling & Grammar' },\n { text: 'Customize' },\n { separator: true },\n { text: 'Options' }\n ]\n },\n {\n text: 'Help'\n }\n ];\n\n //Menu initialization\n new ej.navigations.Menu({ items: menuItems }, '#menu');\n\n\n"} \ No newline at end of file diff --git a/src/menu/default.html b/src/menu/default.html index 94126dac..52a42345 100644 --- a/src/menu/default.html +++ b/src/menu/default.html @@ -22,58 +22,66 @@ documentation section.

                    + + + \ No newline at end of file diff --git a/src/menu/default.js b/src/menu/default.js index 8cee12a5..cfcae338 100644 --- a/src/menu/default.js +++ b/src/menu/default.js @@ -10,7 +10,7 @@ this.default = function() { iconCss: 'em-icons e-file', items: [ { text: 'Open', iconCss: 'em-icons e-open' }, - { text: 'Save', iconCss: 'e-icons e-save' }, + { text: 'Save', iconCss: 'em-icons e-save' }, { separator: true }, { text: 'Exit' } ] diff --git a/src/menu/sample.json b/src/menu/sample.json index db157591..8bbbafac 100644 --- a/src/menu/sample.json +++ b/src/menu/sample.json @@ -3,7 +3,6 @@ "directory": "menu", "category": "Navigation", "ftName": "menu-bar", - "type": "update", "samples": [ { "url": "default", @@ -23,7 +22,6 @@ "url": "scrollable", "name": "Scrollable", "category": "Menu Bar", - "type": "new", "api":{ "Menu": ["items", "enableScrolling", "cssClass", "beforeOpen"] }, "description": "This example demonstrates how to load menu and sub menus with large number of menu items in horizontal / vertical scrollable Syncfusion JavaScript ES5 menu." }, diff --git a/src/menu/scrollable-stack.json b/src/menu/scrollable-stack.json index 095ed49d..a5f5d09c 100644 --- a/src/menu/scrollable-stack.json +++ b/src/menu/scrollable-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                    \n
                    \n
                      \n
                      \n
                      \n\n\n
                      ","index.js":"{{ripple}}/**\n * Scrollable Menu sample\n */\n\n // Menu items definition\n var menuItems = [\n {\n text: 'Appliances',\n id: 'appliances',\n items: [\n {\n text: 'Kitchen',\n items: [\n { text: 'Electric Cookers' },\n { text: 'Coffee Makers' },\n { text: 'Blenders' },\n { text: 'Microwave Ovens' }\n ]\n },\n {\n text: 'Television',\n items: [\n { text: 'Our Exclusive TVs' },\n { text: 'Smart TVs' },\n { text: 'Big Screen TVs' }\n ]\n },\n {\n text: 'Washing Machine'\n },\n {\n text: 'Refrigerators'\n },\n {\n text: 'Air Conditioners',\n items: [\n { text: 'Inverter ACs' },\n { text: 'Split ACs' },\n { text: 'Window ACs' },\n ]\n },\n {\n text: 'Water Purifiers'\n },\n {\n text: 'Air Purifiers'\n },\n {\n text: 'Chimneys'\n },\n {\n text: 'Inverters'\n },\n {\n text: 'Healthy Living'\n },\n {\n text: 'Vacuum Cleaners'\n },\n {\n text: 'Room Heaters'\n },\n {\n text: 'New Launches'\n }\n ]\n },\n {\n text: 'Accessories',\n items: [\n {\n text: 'Mobile',\n id: 'mobile',\n items: [\n { text: 'Headphones' },\n { text: 'Batteries' },\n { text: 'Memory Cards' },\n { text: 'Power Banks' },\n { text: 'Mobile Cases' },\n { text: 'Screen Protectors' },\n { text: 'Data Cables' },\n { text: 'Chargers' },\n { text: 'Selfie Sticks' },\n { text: 'OTG Cable' }\n ]\n },\n {\n text: 'Laptops'\n },\n {\n text: 'Desktop PC',\n items: [\n { text: 'Pendrives' },\n { text: 'External Hard Disks' },\n { text: 'Monitors' },\n { text: 'Keyboards' }\n ]\n },\n {\n text: 'Camera',\n items: [\n { text: 'Lens' },\n { text: 'Tripods' }\n ]\n }\n ]\n },\n {\n text: 'Fashion',\n items: [\n {\n text: 'Men'\n },\n {\n text: 'Women'\n }\n ]\n },\n {\n text: 'Home & Living',\n items: [\n {\n text: 'Furniture'\n },\n {\n text: 'Decor'\n },\n {\n text: 'Smart Home Automation'\n },\n {\n text: 'Dining & Serving'\n }\n ]\n },\n {\n text: 'Entertainment',\n items: [\n {\n text: 'Televisions'\n },\n {\n text: 'Home Theatres'\n },\n {\n text: 'Gaming Laptops'\n }\n ]\n },\n {\n text: 'Contact Us'\n },\n {\n text: 'Help'\n }\n ];\n\n // Menu model definition \n var menuOptions = {\n items: menuItems,\n cssClass: 'e-custom-scroll',\n // Allows to enable the scroll option\n enableScrolling: true,\n // Increased duration for smooth animation.\n animationSettings: { duration: 800 },\n beforeOpen: function(args) {\n // Restricting sub menu wrapper height\n if (args.parentItem.text === 'Appliances') {\n ej.base.closest(args.element, '.e-menu-wrapper').style.height = '320px';\n }\n if (args.parentItem.text === 'Mobile') {\n ej.base.closest(args.element, '.e-menu-wrapper').style.height = '260px';\n }\n }\n };\n\n // Menu initialization\n new ej.navigations.Menu(menuOptions, '#menu');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                      \n
                      \n
                        \n
                        \n
                        \n\n\n\n
                        ","index.js":"{{ripple}}/**\n * Scrollable Menu sample\n */\n\n // Menu items definition\n var menuItems = [\n {\n text: 'Appliances',\n id: 'appliances',\n items: [\n {\n text: 'Kitchen',\n items: [\n { text: 'Electric Cookers' },\n { text: 'Coffee Makers' },\n { text: 'Blenders' },\n { text: 'Microwave Ovens' }\n ]\n },\n {\n text: 'Television',\n items: [\n { text: 'Our Exclusive TVs' },\n { text: 'Smart TVs' },\n { text: 'Big Screen TVs' }\n ]\n },\n {\n text: 'Washing Machine'\n },\n {\n text: 'Refrigerators'\n },\n {\n text: 'Air Conditioners',\n items: [\n { text: 'Inverter ACs' },\n { text: 'Split ACs' },\n { text: 'Window ACs' },\n ]\n },\n {\n text: 'Water Purifiers'\n },\n {\n text: 'Air Purifiers'\n },\n {\n text: 'Chimneys'\n },\n {\n text: 'Inverters'\n },\n {\n text: 'Healthy Living'\n },\n {\n text: 'Vacuum Cleaners'\n },\n {\n text: 'Room Heaters'\n },\n {\n text: 'New Launches'\n }\n ]\n },\n {\n text: 'Accessories',\n items: [\n {\n text: 'Mobile',\n id: 'mobile',\n items: [\n { text: 'Headphones' },\n { text: 'Batteries' },\n { text: 'Memory Cards' },\n { text: 'Power Banks' },\n { text: 'Mobile Cases' },\n { text: 'Screen Protectors' },\n { text: 'Data Cables' },\n { text: 'Chargers' },\n { text: 'Selfie Sticks' },\n { text: 'OTG Cable' }\n ]\n },\n {\n text: 'Laptops'\n },\n {\n text: 'Desktop PC',\n items: [\n { text: 'Pendrives' },\n { text: 'External Hard Disks' },\n { text: 'Monitors' },\n { text: 'Keyboards' }\n ]\n },\n {\n text: 'Camera',\n items: [\n { text: 'Lens' },\n { text: 'Tripods' }\n ]\n }\n ]\n },\n {\n text: 'Fashion',\n items: [\n {\n text: 'Men'\n },\n {\n text: 'Women'\n }\n ]\n },\n {\n text: 'Home & Living',\n items: [\n {\n text: 'Furniture'\n },\n {\n text: 'Decor'\n },\n {\n text: 'Smart Home Automation'\n },\n {\n text: 'Dining & Serving'\n }\n ]\n },\n {\n text: 'Entertainment',\n items: [\n {\n text: 'Televisions'\n },\n {\n text: 'Home Theatres'\n },\n {\n text: 'Gaming Laptops'\n }\n ]\n },\n {\n text: 'Contact Us'\n },\n {\n text: 'Help'\n }\n ];\n\n // Menu model definition \n var menuOptions = {\n items: menuItems,\n cssClass: 'e-custom-scroll',\n // Allows to enable the scroll option\n enableScrolling: true,\n // Increased duration for smooth animation.\n animationSettings: { duration: 800 },\n beforeOpen: function(args) {\n // Restricting sub menu wrapper height\n if (args.parentItem.text === 'Appliances') {\n ej.base.closest(args.element, '.e-menu-wrapper').style.height = '320px';\n }\n if (args.parentItem.text === 'Mobile') {\n ej.base.closest(args.element, '.e-menu-wrapper').style.height = '260px';\n }\n }\n };\n\n // Menu initialization\n new ej.navigations.Menu(menuOptions, '#menu');\n\n"} \ No newline at end of file diff --git a/src/menu/scrollable.html b/src/menu/scrollable.html index d665d319..e913e2d5 100644 --- a/src/menu/scrollable.html +++ b/src/menu/scrollable.html @@ -19,6 +19,7 @@ Menu section.

                        + \ No newline at end of file + + diff --git a/src/menu/template-stack.json b/src/menu/template-stack.json index 56f10463..9874ba71 100644 --- a/src/menu/template-stack.json +++ b/src/menu/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                        \n
                        \n
                          \n
                          \n \n \n
                          \n\n\n
                          ","index.js":"{{ripple}}/**\n * Menu Template sample\n */\n\n\n\n // Template datasource\n var data = [\n {\n category: 'Products',\n options: [\n { value: 'JavaScript', url: 'javascript' },\n { value: 'Angular', url: 'angular' },\n { value: 'ASP.NET Core', url: 'core' },\n { value: 'ASP.NET MVC', url: 'mvc' }\n ]\n },\n {\n category: 'Services',\n options: [\n { value: 'Application Development', count: '1200+' },\n { value: 'Maintenance & Support', count: '3700+' },\n { value: 'Quality Assurance' },\n { value: 'Cloud Integration', count: '900+' }\n ]\n },\n { \n category: 'About Us',\n options: [\n {\n id: 'about',\n about: {\n value: \"We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses.\"\n }\n }\n ]\n },\n { category: 'Careers' },\n { category: 'Sign In' },\n ];\n\n // Menu model definition \n var menuOptions = {\n items: data,\n fields: {\n text: ['category', 'value'],\n children: ['options']\n },\n template: '#menuTemplate'\n };\n \n // Menu initialization\n new ej.navigations.Menu(menuOptions, '#menu');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                          \n
                          \n
                            \n
                            \n \n \n
                            \n\n\n\n
                            ","index.js":"{{ripple}}/**\n * Menu Template sample\n */\n\n\n\n // Template datasource\n var data = [\n {\n category: 'Products',\n options: [\n { value: 'JavaScript', url: 'javascript' },\n { value: 'Angular', url: 'angular' },\n { value: 'ASP.NET Core', url: 'core' },\n { value: 'ASP.NET MVC', url: 'mvc' }\n ]\n },\n {\n category: 'Services',\n options: [\n { value: 'Application Development', count: '1200+' },\n { value: 'Maintenance & Support', count: '3700+' },\n { value: 'Quality Assurance' },\n { value: 'Cloud Integration', count: '900+' }\n ]\n },\n { \n category: 'About Us',\n options: [\n {\n id: 'about',\n about: {\n value: \"We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses.\"\n }\n }\n ]\n },\n { category: 'Careers' },\n { category: 'Sign In' },\n ];\n\n // Menu model definition \n var menuOptions = {\n items: data,\n fields: {\n text: ['category', 'value'],\n children: ['options']\n },\n template: '#menuTemplate'\n };\n \n // Menu initialization\n new ej.navigations.Menu(menuOptions, '#menu');\n\n"} \ No newline at end of file diff --git a/src/menu/template.html b/src/menu/template.html index 9095b3f7..8c19ed63 100644 --- a/src/menu/template.html +++ b/src/menu/template.html @@ -61,15 +61,20 @@ templates section in the documentation.

                            + + +
                            \n
                            \n
                            \n
                            \n
                            \n\n\n
                            ","index.js":"{{ripple}}/**\n * Menu - toolbar integration sample\n */\n\n\n var menuTemplate = '
                              ';\n var searchTemplate = '
                              ';\n var dropDownBtnTemplate = '';\n\n // Initialize Toolbar component\n new ej.navigations.Toolbar(\n {\n created: create,\n items: [\n { template: menuTemplate },\n { template: searchTemplate, align: 'right' },\n { template: dropDownBtnTemplate, align: 'right' },\n { prefixIcon: 'em-icons e-shopping-cart', align: 'right' },\n ]\n },\n '#shoppingtoolbar');\n\n function create() {\n // Menu items definition \n var menuItems = [\n {\n text: 'Appliances',\n items: [\n { \n text: 'Kitchen',\n items: [\n { text: 'Electric Cookers' },\n { text: 'Coffee Makers' },\n { text: 'Blenders' }\n ]\n },\n { \n text: 'Washing Machine',\n items: [\n { text: 'Fully Automatic' },\n { text: 'Semi Automatic' }\n ]\n },\n { \n text: 'Air Conditioners',\n items: [\n { text: 'Inverter ACs' },\n { text: 'Split ACs' },\n { text: 'Window ACs' }\n ]\n }\n ]\n },\n { \n text: 'Accessories',\n items: [\n { \n text: 'Mobile',\n items: [\n { text: 'Headphones' },\n { text: 'Memory Cards' },\n { text: 'Power Banks' }\n ]\n },\n { \n text: 'Computer',\n items: [\n { text: 'Pendrives' },\n { text: 'External Hard Disks' },\n { text: 'Monitors' }\n ]\n }\n ]\n },\n { \n text: 'Fashion',\n items: [\n { \n text: 'Men',\n items: [\n { text: 'Shirts' },\n { text: 'Jackets' },\n { text: 'Track Suits' }\n ]\n },\n { \n text: 'Women',\n items: [\n { text: 'Kurtas' },\n { text: 'Salwars' },\n { text: 'Sarees' }\n ]\n }\n ]\n },\n { \n text: 'Home & Living',\n items: [\n { \n text: 'Furniture',\n items: [\n { text: 'Beds' },\n { text: 'Mattresses' },\n { text: 'Dining Tables' }\n ]\n },\n { \n text: 'Decor',\n items: [\n { text: 'Clocks' },\n { text: 'Wall Decals' },\n { text: 'Paintings' }\n ]\n }\n ]\n }\n ];\n\n var userData = [\n { text: 'My Profile' },\n { text: 'Orders' },\n { text: 'Rewards' },\n { text: 'Logout' }\n ];\n\n // Initialize Menu component\n new ej.navigations.Menu({ items: menuItems }, '#menu');\n\n // Initialize DropDownButton component\n new ej.splitbuttons.DropDownButton({ items: userData }, '#userDBtn');\n\n this.refreshOverflow();\n this.element.querySelector('.e-shopping-cart').classList.remove('e-icons');\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                              \n
                              \n
                              \n
                              \n
                              \n\n\n\n","index.js":"{{ripple}}/**\n * Menu - toolbar integration sample\n */\n\n\n var menuTemplate = '
                                ';\n var searchTemplate = '
                                ';\n var dropDownBtnTemplate = '';\n\n // Initialize Toolbar component\n new ej.navigations.Toolbar(\n {\n created: create,\n items: [\n { template: menuTemplate },\n { template: searchTemplate, align: 'right' },\n { template: dropDownBtnTemplate, align: 'right' },\n { prefixIcon: 'em-icons e-shopping-cart', align: 'right' },\n ]\n },\n '#shoppingtoolbar');\n\n function create() {\n // Menu items definition \n var menuItems = [\n {\n text: 'Appliances',\n items: [\n { \n text: 'Kitchen',\n items: [\n { text: 'Electric Cookers' },\n { text: 'Coffee Makers' },\n { text: 'Blenders' }\n ]\n },\n { \n text: 'Washing Machine',\n items: [\n { text: 'Fully Automatic' },\n { text: 'Semi Automatic' }\n ]\n },\n { \n text: 'Air Conditioners',\n items: [\n { text: 'Inverter ACs' },\n { text: 'Split ACs' },\n { text: 'Window ACs' }\n ]\n }\n ]\n },\n { \n text: 'Accessories',\n items: [\n { \n text: 'Mobile',\n items: [\n { text: 'Headphones' },\n { text: 'Memory Cards' },\n { text: 'Power Banks' }\n ]\n },\n { \n text: 'Computer',\n items: [\n { text: 'Pendrives' },\n { text: 'External Hard Disks' },\n { text: 'Monitors' }\n ]\n }\n ]\n },\n { \n text: 'Fashion',\n items: [\n { \n text: 'Men',\n items: [\n { text: 'Shirts' },\n { text: 'Jackets' },\n { text: 'Track Suits' }\n ]\n },\n { \n text: 'Women',\n items: [\n { text: 'Kurtas' },\n { text: 'Salwars' },\n { text: 'Sarees' }\n ]\n }\n ]\n },\n { \n text: 'Home & Living',\n items: [\n { \n text: 'Furniture',\n items: [\n { text: 'Beds' },\n { text: 'Mattresses' },\n { text: 'Dining Tables' }\n ]\n },\n { \n text: 'Decor',\n items: [\n { text: 'Clocks' },\n { text: 'Wall Decals' },\n { text: 'Paintings' }\n ]\n }\n ]\n }\n ];\n\n var userData = [\n { text: 'My Profile' },\n { text: 'Orders' },\n { text: 'Rewards' },\n { text: 'Logout' }\n ];\n\n // Initialize Menu component\n new ej.navigations.Menu({ items: menuItems }, '#menu');\n\n // Initialize DropDownButton component\n new ej.splitbuttons.DropDownButton({ items: userData }, '#userDBtn');\n\n this.refreshOverflow();\n this.element.querySelector('.e-shopping-cart').classList.remove('e-icons');\n }\n"} \ No newline at end of file diff --git a/src/menu/toolbar-integration.html b/src/menu/toolbar-integration.html index e3613071..fc7905b1 100644 --- a/src/menu/toolbar-integration.html +++ b/src/menu/toolbar-integration.html @@ -62,6 +62,10 @@ margin-top: 3.5px; } + + + \ No newline at end of file + + + \ No newline at end of file diff --git a/src/multi-select/checkbox-stack.json b/src/multi-select/checkbox-stack.json index 9b191e18..1d095459 100644 --- a/src/multi-select/checkbox-stack.json +++ b/src/multi-select/checkbox-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n

                                CheckBox

                                \n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Checkbox Samples\n */\n// initialize MultiSelect component\n\n \nvar checkList = new ej.dropdowns.MultiSelect({\n // set the country data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set the type of mode for checkbox to visualized the checkbox added in li element.\n mode: 'CheckBox',\n // set true for enable the selectAll support.\n showSelectAll: true,\n // set true for enable the dropdown icon.\n showDropDownIcon: true,\n // set the placeholder to MultiSelect filter input element\n filterBarPlaceholder: 'Search countries',\n // set the MultiSelect popup height\n popupHeight: '350px'\n});\ncheckList.appendTo('#checkbox');\n// Initialize the CheckBox component\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Show Select All',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.showSelectAll = args.checked;\n }\n });\n checkBoxObj.appendTo('#selectall');\n // Initialize the CheckBox component\n checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'DropDown Button',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.showDropDownIcon = args.checked;\n }\n });\n checkBoxObj.appendTo('#dropicon');\n // Initialize the CheckBox component\n checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Selection Reorder',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.enableSelectionOrder = args.checked;\n }\n });\n checkBoxObj.appendTo('#reorder');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                CheckBox

                                \n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Checkbox Samples\n */\n// initialize MultiSelect component\n\n \nvar checkList = new ej.dropdowns.MultiSelect({\n // set the country data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set the type of mode for checkbox to visualized the checkbox added in li element.\n mode: 'CheckBox',\n // set true for enable the selectAll support.\n showSelectAll: true,\n // set true for enable the dropdown icon.\n showDropDownIcon: true,\n // set the placeholder to MultiSelect filter input element\n filterBarPlaceholder: 'Search countries',\n // set the MultiSelect popup height\n popupHeight: '350px'\n});\ncheckList.appendTo('#checkbox');\n// Initialize the CheckBox component\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Show Select All',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.showSelectAll = args.checked;\n }\n });\n checkBoxObj.appendTo('#selectall');\n // Initialize the CheckBox component\n checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'DropDown Button',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.showDropDownIcon = args.checked;\n }\n });\n checkBoxObj.appendTo('#dropicon');\n // Initialize the CheckBox component\n checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Selection Reorder',\n // bind change event\n change: function(args) {\n // enable or disable the SelectAll in multiselect on CheckBox checked state\n checkList.enableSelectionOrder = args.checked;\n }\n });\n checkBoxObj.appendTo('#reorder');\n"} \ No newline at end of file diff --git a/src/multi-select/chip-customization-stack.json b/src/multi-select/chip-customization-stack.json index 0062a0b7..fdf152c3 100644 --- a/src/multi-select/chip-customization-stack.json +++ b/src/multi-select/chip-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n

                                Chip Customization

                                \n \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var colors = new ej.dropdowns.MultiSelect({\n // set the colors data to dataSource property\n dataSource: window.msColorsData,\n // map the appropriate columns to fields property\n fields: { text: 'Color', value: 'Code' },\n // set the value to MultiSelect\n value: ['#75523C', '#4CD242', '#FF745C', '#3B8289', '#CA3832'],\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Colors',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box',\n // bind the tagging event\n tagging: function (e) {\n // set the current selected item text as class to chip element.\n e.setClass(e.itemData[colors.fields.text].toLowerCase());\n }\n });\n colors.appendTo('#chip-customization');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n

                                Chip Customization

                                \n \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var colors = new ej.dropdowns.MultiSelect({\n // set the colors data to dataSource property\n dataSource: window.msColorsData,\n // map the appropriate columns to fields property\n fields: { text: 'Color', value: 'Code' },\n // set the value to MultiSelect\n value: ['#75523C', '#4CD242', '#FF745C', '#3B8289', '#CA3832'],\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Colors',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box',\n // bind the tagging event\n tagging: function (e) {\n // set the current selected item text as class to chip element.\n e.setClass(e.itemData[colors.fields.text].toLowerCase());\n }\n });\n colors.appendTo('#chip-customization');\n"} \ No newline at end of file diff --git a/src/multi-select/custom-value-stack.json b/src/multi-select/custom-value-stack.json index 62ade1fc..8fb6c3fe 100644 --- a/src/multi-select/custom-value-stack.json +++ b/src/multi-select/custom-value-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n

                                Custom Value Support

                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var games = new ej.dropdowns.MultiSelect({\n // set the countries data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set true to enable the custom value support.\n allowCustomValue: true,\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n games.appendTo('#default');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                Custom Value Support

                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var games = new ej.dropdowns.MultiSelect({\n // set the countries data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set true to enable the custom value support.\n allowCustomValue: true,\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n games.appendTo('#default');\n"} \ No newline at end of file diff --git a/src/multi-select/data-binding-stack.json b/src/multi-select/data-binding-stack.json index 069b6248..dbd56ce3 100644 --- a/src/multi-select/data-binding-stack.json +++ b/src/multi-select/data-binding-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n

                                Local Data

                                \n \n
                                \n
                                \n
                                \n

                                Remote Data

                                \n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n var listObj = new ej.dropdowns.MultiSelect({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // set the placeholder to MultiSelect input element\n placeholder: 'Select names',\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // sort the resulted items\n sortOrder: 'Ascending'\n });\n listObj.appendTo('#remote');\n\n // initialize MultiSelect component\n var games = new ej.dropdowns.MultiSelect({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code'},\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n });\n games.appendTo('#local');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n

                                Local Data

                                \n \n
                                \n
                                \n
                                \n

                                Remote Data

                                \n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n","index.js":"{{ripple}}\n\n var listObj = new ej.dropdowns.MultiSelect({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // set the placeholder to MultiSelect input element\n placeholder: 'Select names',\n // map the appropriate columns to fields property\n fields: { text: 'FirstName', value: 'EmployeeID' },\n // sort the resulted items\n sortOrder: 'Ascending'\n });\n listObj.appendTo('#remote');\n\n // initialize MultiSelect component\n var games = new ej.dropdowns.MultiSelect({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code'},\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n });\n games.appendTo('#local');\n\n"} \ No newline at end of file diff --git a/src/multi-select/data-binding.html b/src/multi-select/data-binding.html index 1fdf7d1d..f9bebe4f 100644 --- a/src/multi-select/data-binding.html +++ b/src/multi-select/data-binding.html @@ -64,6 +64,7 @@

                                Remote Data

                                documentation section.

                                + \ No newline at end of file + + \ No newline at end of file diff --git a/src/multi-select/default-stack.json b/src/multi-select/default-stack.json index 9de9440c..8e0c74c9 100644 --- a/src/multi-select/default-stack.json +++ b/src/multi-select/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n

                                Default Mode

                                \n \n
                                \n
                                \n

                                Box Mode

                                \n \n\n
                                \n\n
                                \n

                                Delimiter Mode

                                \n \n\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var listObj = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n listObj.appendTo('#box');\n\n // initialize MultiSelect component\n var listObj1 = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Default'\n });\n listObj1.appendTo('#default');\n\n // initialize MultiSelect component\n var listObj2 = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Delimiter'\n });\n listObj2.appendTo('#delimiter');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                Default Mode

                                \n \n
                                \n
                                \n

                                Box Mode

                                \n \n\n
                                \n\n
                                \n

                                Delimiter Mode

                                \n \n\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var listObj = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n listObj.appendTo('#box');\n\n // initialize MultiSelect component\n var listObj1 = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Default'\n });\n listObj1.appendTo('#default');\n\n // initialize MultiSelect component\n var listObj2 = new ej.dropdowns.MultiSelect({\n // set the placeholder to MultiSelect input element\n placeholder: 'Favorite Sports',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Delimiter'\n });\n listObj2.appendTo('#delimiter');\n"} \ No newline at end of file diff --git a/src/multi-select/diacritics-filtering-stack.json b/src/multi-select/diacritics-filtering-stack.json index 10b8fe63..7728dc04 100644 --- a/src/multi-select/diacritics-filtering-stack.json +++ b/src/multi-select/diacritics-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n

                                Diacritics Filtering

                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Diacritics functionality Sample\n */\n\n // initialize MultiSelect component\n var dropdownObj = new ej.dropdowns.MultiSelect({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to MultiSelect input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n

                                Diacritics Filtering

                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Diacritics functionality Sample\n */\n\n // initialize MultiSelect component\n var dropdownObj = new ej.dropdowns.MultiSelect({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to MultiSelect input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true,\n // set true for enable the filtering support.\n allowFiltering: true\n });\n dropdownObj.appendTo('#list');\n"} \ No newline at end of file diff --git a/src/multi-select/filtering-stack.json b/src/multi-select/filtering-stack.json index 686e796a..caa79d26 100644 --- a/src/multi-select/filtering-stack.json +++ b/src/multi-select/filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n

                                Filtering

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n var listObj = new ej.dropdowns.MultiSelect({\n // set placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set the countries data to dataSource property\n dataSource: window.ddCountryData,\n query: new ej.data.Query(),\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var multiselect_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n multiselect_query = (e.text !== '') ? multiselect_query.where('Name', 'startswith', e.text, true) : multiselect_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, multiselect_query);\n }\n });\n listObj.appendTo('#list');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Filtering

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n var listObj = new ej.dropdowns.MultiSelect({\n // set placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set the countries data to dataSource property\n dataSource: window.ddCountryData,\n query: new ej.data.Query(),\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set true for enable the filtering support.\n allowFiltering: true,\n // bind the filtering event\n filtering: function (e) {\n var multiselect_query = new ej.data.Query();\n // frame the query based on search string with filter type.\n multiselect_query = (e.text !== '') ? multiselect_query.where('Name', 'startswith', e.text, true) : multiselect_query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(window.ddCountryData, multiselect_query);\n }\n });\n listObj.appendTo('#list');\n\n"} \ No newline at end of file diff --git a/src/multi-select/grouping-icon-stack.json b/src/multi-select/grouping-icon-stack.json index b2abc795..e1169e0f 100644 --- a/src/multi-select/grouping-icon-stack.json +++ b/src/multi-select/grouping-icon-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n

                                Grouping

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize the MultiSelect component\n var groupList = new ej.dropdowns.MultiSelect({\n // set the vegetables data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set placeholder to MultiSelect input element\n placeholder: 'Select vegetables',\n });\n groupList.appendTo('#group');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Grouping

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n\n\n","index.js":"{{ripple}}\n\n\n // initialize the MultiSelect component\n var groupList = new ej.dropdowns.MultiSelect({\n // set the vegetables data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },\n // set placeholder to MultiSelect input element\n placeholder: 'Select vegetables',\n });\n groupList.appendTo('#group');\n"} \ No newline at end of file diff --git a/src/multi-select/grouping-icon.html b/src/multi-select/grouping-icon.html index e39928fe..c1497bac 100644 --- a/src/multi-select/grouping-icon.html +++ b/src/multi-select/grouping-icon.html @@ -24,6 +24,7 @@

                                Grouping

                                + \ No newline at end of file + + \ No newline at end of file diff --git a/src/multi-select/sample.json b/src/multi-select/sample.json index ddb1d396..955a5843 100644 --- a/src/multi-select/sample.json +++ b/src/multi-select/sample.json @@ -4,16 +4,16 @@ "category": "Dropdowns", "ftName": "multiselect-dropdown", "samples": [ - { "url": "default", "name": "Default Functionalities", "description": "This demo for Syncfusion JavaScript multiselect control shows the default rendering of the multiselect component with minimum configuration.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["mode", "placeholder"] } }, - { "url": "data-binding", "name": "Data Binding", "description": "This demo for Syncfusion JavaScript multiselect control shows how to bind with local data source and how to fetch data from remote data service.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["query", "dataSource", "fields", "sortOrder", "placeholder"] } }, - { "url": "grouping-icon", "name": "Grouping", "description": "This demo explains the grouping of suggestions based on different categories with individual header and icon support in the Syncfusion JavaScript multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder"] } }, - { "url": "template", "name": "Template", "description": "This demo explains on how to customize the appearance of each item in the pop-up list using template option in Syncfusion JavaScript multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "headerTemplate", "itemTemplate", "valueTemplate", "mode", "placeholder"] } }, - { "url": "filtering", "name": "Filtering", "description": "This demo explains the filtering functionalities of the Syncfusion JavaScript multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["query", "dataSource", "fields", "placeholder", "allowFiltering", "filtering"] } }, - { "url": "custom-value", "name": "Custom Value", "description": "This demo for Syncfusion JavaScript multiselect control demonstrates the addition of a new value that is not present in the predefined list.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "allowCustomValue"] } }, - { "url": "chip-customization", "name": "Chip Customization", "description": "This demo for Syncfusion JavaScript multiselect control demonstrates on how to customize the selected chip element when select.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "tagging"] } }, - { "url": "checkbox", "name": "CheckBox", "description": "This demo for Syncfusion JavaScript multiselect control demonstrates the built-in support to select the multiple values through checkbox.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder"] } }, - { "url": "selection-limit", "name": "Selection Limit", "description": "This demo for Syncfusion JavaScript multiselect control demonstrates to limit the number of items that is selected in a component.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "maximumSelectionLimit"] } }, - { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This demo explains the diacritics filter functionality of the Syncfusion JavaScript multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "placeholder", "allowFiltering", "ignoreAccent"] } } + { "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript(ES5) multiselect control with minimum configuration.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["mode", "placeholder"] } }, + { "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["query", "dataSource", "fields", "sortOrder", "placeholder"] } }, + { "url": "grouping-icon", "name": "Grouping", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder"] } }, + { "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript(ES5) multiselect control pop-up list using the template.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "headerTemplate", "itemTemplate", "valueTemplate", "mode", "placeholder"] } }, + { "url": "filtering", "name": "Filtering", "description": "This example demonstrates how the filtering functionalities works based on the typed characters in the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["query", "dataSource", "fields", "placeholder", "allowFiltering", "filtering"] } }, + { "url": "custom-value", "name": "Custom Value", "description": "This example demonstrates the addition of a new value that is not present in the predefined list of the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "allowCustomValue"] } }, + { "url": "chip-customization", "name": "Chip Customization", "description": "This example demonstrates how to customize the appearance of the selected chip element in the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "tagging"] } }, + { "url": "checkbox", "name": "CheckBox", "description": "This example demonstrates how to select the multiple values through checkbox in the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder"] } }, + { "url": "selection-limit", "name": "Selection Limit", "description": "This example demonstrates the maximum selection limit functionalities with checkbox of the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "fields", "placeholder", "mode", "maximumSelectionLimit"] } }, + { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript(ES5) multiselect control.", "category": "MultiSelect Dropdown", "api": { "MultiSelect": ["dataSource", "placeholder", "allowFiltering", "ignoreAccent"] } } ], "dataSourcePath": "src/drop-down-list/data-source.js" } \ No newline at end of file diff --git a/src/multi-select/selection-limit-stack.json b/src/multi-select/selection-limit-stack.json index 57a89d67..d00430ef 100644 --- a/src/multi-select/selection-limit-stack.json +++ b/src/multi-select/selection-limit-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n

                                Selection Limit

                                \n \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Selection Limit
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Selection Limit Samples\n */\n \n\n // initialize the MultiSelect component\n var checkList = new ej.dropdowns.MultiSelect({\n // set the country data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the type of mode for checkbox to visualized the checkbox added in li element.\n mode: 'CheckBox',\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set maximum selection length in Multiselect.\n maximumSelectionLength: 3,\n // set true for enable the dropdown icon.\n showDropDownIcon: true,\n // set the placeholder to MultiSelect filter input element\n filterBarPlaceholder: 'Search countries',\n // set the MultiSelect popup height\n popupHeight: '350px'\n\n });\n checkList.appendTo('#selectLimit');\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n value: 3,\n min: 1,\n max: window.ddCountryData.length,\n format: 'n0'\n });\n numeric.appendTo('#maxsel');\n // Render Button control in properties panel\n var buttonApply = new ej.buttons.Button();\n buttonApply.appendTo('#buttonApply');\n\n document.getElementById('buttonApply').onclick = function () {\n var maxsel = parseFloat((document.getElementById('maxsel')).value);\n checkList.value = null;\n checkList.maximumSelectionLength = maxsel;\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n

                                Selection Limit

                                \n \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Selection Limit
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * MultiSelect Selection Limit Samples\n */\n \n\n // initialize the MultiSelect component\n var checkList = new ej.dropdowns.MultiSelect({\n // set the country data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the type of mode for checkbox to visualized the checkbox added in li element.\n mode: 'CheckBox',\n // set the placeholder to MultiSelect input element\n placeholder: 'Select countries',\n // set maximum selection length in Multiselect.\n maximumSelectionLength: 3,\n // set true for enable the dropdown icon.\n showDropDownIcon: true,\n // set the placeholder to MultiSelect filter input element\n filterBarPlaceholder: 'Search countries',\n // set the MultiSelect popup height\n popupHeight: '350px'\n\n });\n checkList.appendTo('#selectLimit');\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n value: 3,\n min: 1,\n max: window.ddCountryData.length,\n format: 'n0'\n });\n numeric.appendTo('#maxsel');\n // Render Button control in properties panel\n var buttonApply = new ej.buttons.Button();\n buttonApply.appendTo('#buttonApply');\n\n document.getElementById('buttonApply').onclick = function () {\n var maxsel = parseFloat((document.getElementById('maxsel')).value);\n checkList.value = null;\n checkList.maximumSelectionLength = maxsel;\n };\n"} \ No newline at end of file diff --git a/src/multi-select/template-stack.json b/src/multi-select/template-stack.json index 66962b1a..299c6bbb 100644 --- a/src/multi-select/template-stack.json +++ b/src/multi-select/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n

                                Template

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var listObj = new ej.dropdowns.MultiSelect({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Eimg' },\n // set the template content for popup header element\n headerTemplate: '
                                Photo Employee Info
                                ',\n // set the template content for displays the selected items in input element.\n itemTemplate: '
                                \"employee\"/' +\n '
                                ${Name}
                                ${Designation}
                                ',\n // set the template content for displays the selected items in input element.\n valueTemplate: '
                                ' +\n '\"employee\"/' +\n '
                                ${Name}
                                ',\n // set placeholder to MultiSelect input element\n placeholder: 'Select employees',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n listObj.appendTo('#template');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Template

                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n\n\n // initialize MultiSelect component\n var listObj = new ej.dropdowns.MultiSelect({\n // set the employees data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Eimg' },\n // set the template content for popup header element\n headerTemplate: '
                                Photo Employee Info
                                ',\n // set the template content for displays the selected items in input element.\n itemTemplate: '
                                \"employee\"/' +\n '
                                ${Name}
                                ${Designation}
                                ',\n // set the template content for displays the selected items in input element.\n valueTemplate: '
                                ' +\n '\"employee\"/' +\n '
                                ${Name}
                                ',\n // set placeholder to MultiSelect input element\n placeholder: 'Select employees',\n // set the type of mode for how to visualized the selected items in input element.\n mode: 'Box'\n });\n listObj.appendTo('#template');\n"} \ No newline at end of file diff --git a/src/multi-select/template.html b/src/multi-select/template.html index d3e18bfa..0031f34b 100644 --- a/src/multi-select/template.html +++ b/src/multi-select/template.html @@ -51,6 +51,7 @@

                                Template

                                background-color: #f5f5f5; } + /* custom code start*/ .fabric .header { background-color: #fff; border-bottom: 1px solid #ccc; @@ -75,12 +76,53 @@

                                Template

                                background-color: #000; } + .bootstrap4 .header { + color: #6c757d; + } + .e-bigger.bootstrap .header { line-height: 44px; height: 44px; font-size: 13px; } + .bootstrap4 .value { + margin-left: -4px; + height: 22px; + width: 22px; + margin-top: 1px; + } + + .bootstrap4 .name { + padding: 3px 22px; + line-height: 1.5em; + margin-top: 1px; + } + + .bootstrap4 #template_popup.e-popup .empImage { + margin: 1px 16px; + } + + .bootstrap4 #template_popup.e-popup .job { + margin-top: 0; + } + .e-bigger.bootstrap4 #template_popup.e-popup .job { + margin-top: -15px; + } + + .e-bigger.bootstrap4 .value { + margin-top: 1px; + height: 26px; + width: 26px; + margin-left: -6px; + } + + .bootstrap4.e-bigger .name { + padding: 0 0 0 25px; + line-height: 1.6em; + margin-top: 0px; + } + /* custom code end*/ .ename { display: block !important; font-size: 16px; @@ -282,4 +324,5 @@

                                Template

                                .fabric .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close.e-icon { left: 0px; } + \ No newline at end of file diff --git a/src/numerictextbox/custom-format-stack.json b/src/numerictextbox/custom-format-stack.json index 1d7cacb5..6ba5ef8d 100644 --- a/src/numerictextbox/custom-format-stack.json +++ b/src/numerictextbox/custom-format-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                Enter the distance\n
                                \n \n
                                Enter the tax\n
                                \n \n
                                Enter the amount\n
                                \n \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n format: '###.### km',\n value: 250,\n min: 0\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox\n var percent = new ej.inputs.NumericTextBox({\n format: '### \\'%\\'',\n min: 0,\n value: 25,\n max: 100\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox\n var currency = new ej.inputs.NumericTextBox({\n format: '$ ###.##',\n min: 0,\n value: 1025\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                Enter the distance\n
                                \n \n
                                Enter the tax\n
                                \n \n
                                Enter the amount\n
                                \n \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n format: '###.### km',\n value: 250,\n min: 0\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox\n var percent = new ej.inputs.NumericTextBox({\n format: '### \\'%\\'',\n min: 0,\n value: 25,\n max: 100\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox\n var currency = new ej.inputs.NumericTextBox({\n format: '$ ###.##',\n min: 0,\n value: 1025\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file diff --git a/src/numerictextbox/custom-format.html b/src/numerictextbox/custom-format.html index f50bdfa3..b86f61aa 100644 --- a/src/numerictextbox/custom-format.html +++ b/src/numerictextbox/custom-format.html @@ -19,14 +19,14 @@

                                The NumericTextBox provides an option to customize the display format of the numeric value using the - format property. + format property. It accepts the standard numeric format string and custom numeric format string as specified in MSDN. The formatted value displays when the component is not focused.

                                In this demo, NumericTextBox control renders with the custom format ###.## km.

                                More information on the format configuration can be found in the - documentation section. + documentation section.

                                diff --git a/src/numerictextbox/default-stack.json b/src/numerictextbox/default-stack.json index 44e96941..859cdedf 100644 --- a/src/numerictextbox/default-stack.json +++ b/src/numerictextbox/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n
                                Percentage TextBox\n
                                \n \n
                                Currency TextBox\n
                                \n \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n value: 10\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox\n var percent = new ej.inputs.NumericTextBox({\n format: 'p2',\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox\n var currency = new ej.inputs.NumericTextBox({\n format: 'c2',\n value: 100\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n
                                Percentage TextBox\n
                                \n \n
                                Currency TextBox\n
                                \n \n
                                \n
                                \n\n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox\n var numeric = new ej.inputs.NumericTextBox({\n value: 10\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox\n var percent = new ej.inputs.NumericTextBox({\n format: 'p2',\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox\n var currency = new ej.inputs.NumericTextBox({\n format: 'c2',\n value: 100\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file diff --git a/src/numerictextbox/default.html b/src/numerictextbox/default.html index a6cebb06..86feec20 100644 --- a/src/numerictextbox/default.html +++ b/src/numerictextbox/default.html @@ -26,7 +26,7 @@

                                More information on the NumericTextBox instantiation can be found in the - documentation section. + documentation section.

                                diff --git a/src/numerictextbox/range-validation-stack.json b/src/numerictextbox/range-validation-stack.json index c17ca072..cf74c1ab 100644 --- a/src/numerictextbox/range-validation-stack.json +++ b/src/numerictextbox/range-validation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n \n
                                \n
                                \n\n\n\n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Min Value
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Max Value
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Increment Step
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                ","index.js":"{{ripple}}\n // Render numeric textbox with specific range\n var numeric = new ej.inputs.NumericTextBox({\n min: 10,\n max: 100,\n value: 15\n });\n numeric.appendTo('#numeric');\n // Render Button control in properties panel\n var buttonApply = new ej.buttons.Button();\n buttonApply.appendTo('#buttonApply');\n // After clicking apply button- 'min', 'max' and 'increment step' details will be received from properties panel\n // and set it to Numeric Textbox.\n document.getElementById('buttonApply').onclick = function () {\n var min = parseFloat(document.getElementById('min').value);\n var max = parseFloat(document.getElementById('max').value);\n var step = parseFloat(document.getElementById('step').value);\n numeric.min = min;\n numeric.max = max;\n numeric.step = step;\n };\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n \n
                                \n
                                \n\n\n\n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Min Value
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Max Value
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Increment Step
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                ","index.js":"{{ripple}}\n // Render numeric textbox with specific range\n var numeric = new ej.inputs.NumericTextBox({\n min: 10,\n max: 100,\n value: 15\n });\n numeric.appendTo('#numeric');\n // Render Button control in properties panel\n var buttonApply = new ej.buttons.Button();\n buttonApply.appendTo('#buttonApply');\n // After clicking apply button- 'min', 'max' and 'increment step' details will be received from properties panel\n // and set it to Numeric Textbox.\n document.getElementById('buttonApply').onclick = function () {\n var min = parseFloat(document.getElementById('min').value);\n var max = parseFloat(document.getElementById('max').value);\n var step = parseFloat(document.getElementById('step').value);\n numeric.min = min;\n numeric.max = max;\n numeric.step = step;\n };\n\n"} \ No newline at end of file diff --git a/src/numerictextbox/range-validation.html b/src/numerictextbox/range-validation.html index 7917e06c..b9d77dc4 100644 --- a/src/numerictextbox/range-validation.html +++ b/src/numerictextbox/range-validation.html @@ -14,9 +14,9 @@

                                The NumericTextBox has the options to restrict the input value between a specific range using the - min, - max, and - strictMode properties. + min, + max, and + strictMode properties.

                                diff --git a/src/numerictextbox/restrict-decimals-stack.json b/src/numerictextbox/restrict-decimals-stack.json index c68629a7..0fe57e01 100644 --- a/src/numerictextbox/restrict-decimals-stack.json +++ b/src/numerictextbox/restrict-decimals-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n
                                Percentage TextBox\n
                                \n \n
                                Currency TextBox\n
                                \n \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox with decimal places as 3\n var numeric = new ej.inputs.NumericTextBox({\n format: 'n3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 10\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox with decimal places as 3\n var percent = new ej.inputs.NumericTextBox({\n format: 'p3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox with decimal places as 3\n var currency = new ej.inputs.NumericTextBox({\n format: 'c3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 100\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                Numeric TextBox\n
                                \n \n
                                Percentage TextBox\n
                                \n \n
                                Currency TextBox\n
                                \n \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n // Render the Numeric Textbox with decimal places as 3\n var numeric = new ej.inputs.NumericTextBox({\n format: 'n3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 10\n });\n numeric.appendTo('#numeric');\n // Render the Percentage Textbox with decimal places as 3\n var percent = new ej.inputs.NumericTextBox({\n format: 'p3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n });\n percent.appendTo('#percent');\n // Render the Currency Textbox with decimal places as 3\n var currency = new ej.inputs.NumericTextBox({\n format: 'c3',\n decimals: 3,\n validateDecimalOnType: true,\n value: 100\n });\n currency.appendTo('#currency');\n"} \ No newline at end of file diff --git a/src/numerictextbox/restrict-decimals.html b/src/numerictextbox/restrict-decimals.html index e2a4eafc..25bbdff6 100644 --- a/src/numerictextbox/restrict-decimals.html +++ b/src/numerictextbox/restrict-decimals.html @@ -19,11 +19,11 @@

                                The NumericTextBox provides an option to restrict the number of decimal values, by using the - decimals property. To restrict the number of decimal values on typing, use the decimals and validateDecimalOnType properties. + decimals property. To restrict the number of decimal values on typing, use the decimals and validateDecimalOnType properties.

                                More information on the restrict decimals configuration can be found in the - documentation section. + documentation section.

                                + \ No newline at end of file diff --git a/src/pdfviewer/custom-toolbar.js b/src/pdfviewer/custom-toolbar.js index 1b61e8d1..899293c7 100644 --- a/src/pdfviewer/custom-toolbar.js +++ b/src/pdfviewer/custom-toolbar.js @@ -1,7 +1,9 @@ +/*jshint esversion: 6 */ var inputTemplate = '
                                '; var ele = '
                                of 0
                                '; var isBookmarkOpen = false; var isBookmarkClick = false; +var isBookmarkView = false; var isTextSearchBoxOpen = false; var bookmarkPopup; var textSearchPopup; @@ -14,6 +16,7 @@ var openDocument; var matchCase = false; var fileInputElement; var filename; +var treeObj; this.default = function () { toolbarObj = new ej.navigations.Toolbar({ items: [ @@ -45,6 +48,7 @@ this.default = function () { }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation); viewer.appendTo('#pdfViewer'); + isBookmarkView = false; document.getElementById('fileUpload').addEventListener('change', readFile, false); currentPageBox = document.getElementById('currentPage'); currentPageBox.value = '1'; @@ -111,17 +115,22 @@ function bookmarkClicked() { if (!isBookmarkOpen) { var bookmarkDetails = viewer.bookmark.getBookmarks(); if (bookmarkDetails.bookmarks) { - var bookmarks = bookmarkDetails.bookmarks.bookMark; - var treeObj = new ej.navigations.TreeView({ - fields: { - dataSource: bookmarks, - id: 'Id', - parentID: 'Pid', - text: 'Title', - hasChildren: 'HasChild', - }, nodeSelected: nodeClick - }); - treeObj.appendTo('#bookmarkview'); + if (!isBookmarkView) { + var bookmarks = bookmarkDetails.bookmarks.bookMark; + treeObj = new ej.navigations.TreeView({ + fields: { + dataSource: bookmarks, + id: 'Id', + child: 'Child', + text: 'Title', + hasChildren: 'HasChild', + }, nodeSelected: nodeClick + }); + isBookmarkView = true; + treeObj.appendTo('#bookmarkview'); + ['mouseover', 'keydown'].forEach( (evt) => document.getElementById("bookmarkview").addEventListener(evt, (event) => { + setHeight(event.target); })); + } bookmarkPopup.show(); isBookmarkOpen = true; isBookmarkClick = true; @@ -196,6 +205,7 @@ function readFile(args) { viewer.load(uploadedFileUrl, null); currentPageBox.value = '1'; document.getElementById("bookmarkview").innerHTML = ""; + isBookmarkView = false; isBookmarkOpen = false; viewer.fileName = filename; }; @@ -261,6 +271,7 @@ function updateZoomButtons() { } function nodeClick(args) { var bookmarksDetails = viewer.bookmark.getBookmarks(); + setHeight(args.node); var bookmarksDestination = bookmarksDetails.bookmarksDestination; var bookid = Number(args.nodeData.id); var pageIndex = bookmarksDestination.bookMarkDestination[bookid].PageIndex; @@ -268,6 +279,23 @@ function nodeClick(args) { viewer.bookmark.goToBookmark(pageIndex, Y); return false; } +// tslint:disable-next-line +function setHeight(element) { + if (treeObj.fullRowSelect) { + if (element.classList.contains('e-treeview')) { + element = element.querySelector('.e-node-focus').querySelector('.e-fullrow'); + } + else if (element.classList.contains('e-list-parent')) { + element = element.querySelector('.e-fullrow'); + } + else if (element.classList.value !== ('e-fullrow') && element.closest('.e-list-item')) { + element = element.closest('.e-list-item').querySelector('.e-fullrow'); + } + if (element.nextElementSibling) { + element.style.height = element.nextElementSibling.offsetHeight + 'px'; + } + } +} function searchInputKeypressed(event) { enablePrevButton(true); enableNextButton(true); @@ -280,11 +308,15 @@ function searchClickHandler() { if (searchButton.classList.contains('e-pv-search-icon')) { viewer.textSearch.cancelTextSearch(); initiateTextSearch(); + searchButton.classList.remove('e-pv-search-icon'); + searchButton.classList.add('e-pv-search-close'); } else if (searchButton.classList.contains('e-pv-search-close')) { searchInput.value = ''; searchInput.focus(); viewer.textSearch.cancelTextSearch(); + searchButton.classList.remove('e-pv-search-close'); + searchButton.classList.add('e-pv-search-icon'); } } function initiateTextSearch() { diff --git a/src/pdfviewer/default.html b/src/pdfviewer/default.html index e05df5a4..24be3aa0 100644 --- a/src/pdfviewer/default.html +++ b/src/pdfviewer/default.html @@ -26,7 +26,7 @@

                                More information on the PDF Viewer instantiation can be found in this + href="https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started"> documentation section.

                                diff --git a/src/pdfviewer/right-to-left.html b/src/pdfviewer/right-to-left.html new file mode 100644 index 00000000..a46e5c78 --- /dev/null +++ b/src/pdfviewer/right-to-left.html @@ -0,0 +1,25 @@ +
                                +
                                +
                                +
                                +
                                +
                                + +
                                +

                                RTL provides an option to switch the text direction and layout of the PDF Viewer from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL PDF Viewer, set the enableRtl to true.

                                +
                                + +
                                +

                                + In this example, you can see PDF Viewer right-to-left and the locale set in arabic[locale value is ar-AE] +

                                +

                                + By default, locale value is en-US. If you want to change the en-US culture to a different culture, you have to change the locale accordingly. +

                                +

                                + More information on the PDF Viewer features can be found in this + + documentation section. +

                                +
                                diff --git a/src/pdfviewer/right-to-left.js b/src/pdfviewer/right-to-left.js new file mode 100644 index 00000000..f560a82a --- /dev/null +++ b/src/pdfviewer/right-to-left.js @@ -0,0 +1,80 @@ +this.default = function () { + // Render the PDF viewer control + var viewer = new ej.pdfviewer.PdfViewer ({ + documentPath: "RTLText.pdf", + locale: 'ar-AE', + enableRtl: true, + serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer' + }); + ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation); + ej.base.L10n.load({ + 'ar-AE': { + 'PdfViewer' : { + 'PdfViewer': 'قوات الدفاع الشعبي المشاهد', + 'Cancel' : 'إلغاء', + 'Download file' : 'تحميل الملف', + 'Download': 'تحميل', + 'Enter Password' : 'هذا المستند محمي بكلمة مرور. يرجى إدخال كلمة مرور.', + 'File Corrupted' : 'ملف تالف', + 'File Corrupted Content' : 'الملف تالف ولا يمكن فتحه.', + 'Fit Page' : 'لائق بدنيا الصفحة', + 'Fit Width' : 'لائق بدنيا عرض', + 'Automatic' : 'تلقائي', + 'Go To First Page' : 'عرض الصفحة الأولى', + 'Invalid Password' : 'كلمة سر خاطئة. حاول مرة اخرى.', + 'Next Page' : 'عرض الصفحة التالية', + 'OK': 'حسنا', + 'Open' : 'فتح الملف', + 'Page Number' : 'رقم الصفحة الحالية', + 'Previous Page' : 'عرض الصفحة السابقة', + 'Go To Last Page' : 'عرض الصفحة الأخيرة', + 'Zoom' : 'تكبير', + 'Zoom In' : 'تكبير في', + 'Zoom Out' : 'تكبير خارج', + 'Page Thumbnails': 'مصغرات الصفحة', + 'Bookmarks': 'المرجعية', + 'Print' : 'اطبع الملف', + 'Password Protected' : 'كلمة المرور مطلوبة', + 'Copy': 'نسخ', + 'Text Selection': 'أداة اختيار النص', + 'Panning': 'وضع عموم', + 'Text Search': 'بحث عن نص', + 'Find in document': 'ابحث في المستند', + 'Match case': 'حالة مباراة', + 'Apply': 'تطبيق', + 'GoToPage': 'انتقل إلى صفحة', + // tslint:disable-next-line:max-line-length + 'No matches': 'انتهى العارض من البحث في المستند. لم يتم العثور على مزيد من التطابقات', + 'No Text Found': 'لم يتم العثور على نص', + // tslint:disable-next-line:max-line-length + 'Server error': 'خدمة الانترنت لا يستمع. يعتمد قوات الدفاع الشعبي المشاهد على خدمة الويب لجميع ميزاته. يرجى بدء خدمة الويب للمتابعة.', + 'Undo': 'فك', + 'Redo': 'فعل ثانية', + 'Annotation': 'إضافة أو تعديل التعليقات التوضيحية', + 'Highlight': 'تسليط الضوء على النص', + 'Underline': 'تسطير النص', + 'Strikethrough': 'نص يتوسطه خط', + 'Delete': 'حذف التعليق التوضيحي', + 'Opacity': 'غموض', + 'Color edit': 'غير اللون', + 'Opacity edit': 'تغيير التعتيم', + 'Highlight context': 'تسليط الضوء', + 'Underline context': 'أكد', + 'Strikethrough context': 'يتوسطه', + 'Open text': 'افتح', + 'First text': 'الصفحة الأولى', + 'Previous text': 'الصفحة السابقة', + 'Next text': 'الصفحة التالية', + 'Last text': 'آخر صفحة', + 'Zoom in text': 'تكبير', + 'Zoom out text': 'تصغير', + 'Selection text': 'اختيار', + 'Pan text': 'مقلاة', + 'Print text': 'طباعة', + 'Search text': 'بحث', + 'Annotation Edit text': 'تحرير التعليق التوضيحي' + } + } + }); + viewer.appendTo('#pdfViewer'); +}; \ No newline at end of file diff --git a/src/pdfviewer/sample.json b/src/pdfviewer/sample.json index cbe57f69..644df42b 100644 --- a/src/pdfviewer/sample.json +++ b/src/pdfviewer/sample.json @@ -3,10 +3,10 @@ "directory": "pdfviewer", "category": "Viewer", "ftName": "pdfviewer", - "type": "preview", + "type": "update", "samples": [ { - "url":"default", "name": "Default Functionalities", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer", "api": { + "url":"default", "name": "Default Functionalities", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer", "type": "update", "api": { "PdfViewer": [ "serviceUrl", "documentPath" @@ -22,7 +22,15 @@ "serviceUrl" ] } - + }, + { + "url":"right-to-left", "name": "Right to Left", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with Right to Left Configuration.", "category": "PDF Viewer", "type": "new", "api": { + "PdfViewer": [ + "documentPath", + "enableRtl", + "serviceUrl" + ] + } } ] } \ No newline at end of file diff --git a/src/pivot-view/aggregation-stack.json b/src/pivot-view/aggregation-stack.json index c472f787..acbe8643 100644 --- a/src/pivot-view/aggregation-stack.json +++ b/src/pivot-view/aggregation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n formatSettings: [{ name: 'ProCost', format: 'C' }],\n drilledMembers: [{ name: 'EnerType', items: ['Biomass', 'Free Energy'] }],\n columns: [\n { name: 'EnerType', caption: 'Energy Type' },\n { name: 'EneSource', caption: 'Energy Source' }\n ],\n data: window.renewableEnergy,\n expandAll: false,\n rows: [\n { name: 'Year', caption: 'Production Year' },\n { name: 'HalfYear', caption: 'Half Year' },\n { name: 'Quarter', caption: 'Quarter Year' }\n ],\n values: [\n { name: 'PowUnits', caption: 'Units (GWh)' },\n { name: 'ProCost', caption: 'Cost (MM)' }\n ],\n filters: []\n }, showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView'); \n var balanceDropDown = new ej.dropdowns.DropDownList({\n placeholder: 'Cost',\n floatLabelType: 'Auto',\n change: function (args) {\n setSummaryType('ProCost', args.value);\n }\n });\n balanceDropDown.appendTo('#pricedrpdwn');\n var summaryDropDown = new ej.dropdowns.DropDownList({\n placeholder: 'Units',\n floatLabelType: 'Auto',\n change: function (args) {\n setSummaryType('PowUnits', args.value);\n }\n });\n summaryDropDown.appendTo('#freightdrpdwn');\n function setSummaryType(fieldName, summaryType) {\n var isAvail = false;\n for (var vCnt = 0; vCnt < pivotGridObj.dataSource.values.length; vCnt++) {\n if (pivotGridObj.dataSource.values[vCnt].name === fieldName) {\n pivotGridObj.dataSource.values[vCnt].type = summaryType;\n isAvail = true;\n }\n }\n if (isAvail) {\n pivotGridObj.updateDataSource();\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n formatSettings: [{ name: 'ProCost', format: 'C' }],\n drilledMembers: [{ name: 'EnerType', items: ['Biomass', 'Free Energy'] }],\n columns: [\n { name: 'EnerType', caption: 'Energy Type' },\n { name: 'EneSource', caption: 'Energy Source' }\n ],\n data: window.renewableEnergy,\n expandAll: false,\n rows: [\n { name: 'Year', caption: 'Production Year' },\n { name: 'HalfYear', caption: 'Half Year' },\n { name: 'Quarter', caption: 'Quarter Year' }\n ],\n values: [\n { name: 'PowUnits', caption: 'Units (GWh)' },\n { name: 'ProCost', caption: 'Cost (MM)' }\n ],\n filters: []\n }, showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView'); \n var balanceDropDown = new ej.dropdowns.DropDownList({\n placeholder: 'Cost',\n floatLabelType: 'Auto',\n change: function (args) {\n setSummaryType('ProCost', args.value);\n }\n });\n balanceDropDown.appendTo('#pricedrpdwn');\n var summaryDropDown = new ej.dropdowns.DropDownList({\n placeholder: 'Units',\n floatLabelType: 'Auto',\n change: function (args) {\n setSummaryType('PowUnits', args.value);\n }\n });\n summaryDropDown.appendTo('#freightdrpdwn');\n function setSummaryType(fieldName, summaryType) {\n var isAvail = false;\n for (var vCnt = 0; vCnt < pivotGridObj.dataSource.values.length; vCnt++) {\n if (pivotGridObj.dataSource.values[vCnt].name === fieldName) {\n pivotGridObj.dataSource.values[vCnt].type = summaryType;\n isAvail = true;\n }\n }\n if (isAvail) {\n pivotGridObj.updateDataSource();\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/aggregation.html b/src/pivot-view/aggregation.html index 8d4bdeda..231ea7b6 100644 --- a/src/pivot-view/aggregation.html +++ b/src/pivot-view/aggregation.html @@ -67,6 +67,7 @@
                                +

                                This sample demonstrates the aggregate types in the pivot table widget.

                                @@ -83,4 +84,5 @@

                                To achieve aggregation through UI, navigate to "User Interaction > Field List" sample and click and open the value field settings menu to experience the same.

                                -
                                \ No newline at end of file +
                                + \ No newline at end of file diff --git a/src/pivot-view/calculated-field-stack.json b/src/pivot-view/calculated-field-stack.json index 259c10c3..8024bcf5 100644 --- a/src/pivot-view/calculated-field-stack.json +++ b/src/pivot-view/calculated-field-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Sample with Calculated Fields.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' },\n { name: 'Sold', caption: 'Units Sold' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n calculatedFieldSettings: [\n {\n name: 'Total',\n formula: '\"Sum(In_Stock)\"+\"Sum(Sold)\"'\n }\n ]\n },\n allowCalculatedField: true,\n showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#calculated-field-btn');\n button.element.onclick = function () {\n pivotGridObj.calculatedFieldModule.createCalculatedFieldDialog();\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Calculated Fields.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' },\n { name: 'Sold', caption: 'Units Sold' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n calculatedFieldSettings: [\n {\n name: 'Total',\n formula: '\"Sum(In_Stock)\"+\"Sum(Sold)\"'\n }\n ]\n },\n allowCalculatedField: true,\n showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#calculated-field-btn');\n button.element.onclick = function () {\n pivotGridObj.calculatedFieldModule.createCalculatedFieldDialog();\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/calculated-field.html b/src/pivot-view/calculated-field.html index d41ba788..7ea7fd5f 100644 --- a/src/pivot-view/calculated-field.html +++ b/src/pivot-view/calculated-field.html @@ -18,7 +18,7 @@
                                - +

                                In this sample, Total Units acts as the calculated field. Users are allowed to insert a new calculated field based on the existing @@ -29,4 +29,5 @@ create these fields using basic mathematical expression collaborating with existing fields. Calculated fields can be created through UI dialog as well as code behind and it can be enabled by setting allowCalculatedField as true. The calculatedFieldSettings property is available to configure the calculated field in code behind. -

                                \ No newline at end of file +
                                + \ No newline at end of file diff --git a/src/pivot-view/cell-template-stack.json b/src/pivot-view/cell-template-stack.json new file mode 100644 index 00000000..edb2bc37 --- /dev/null +++ b/src/pivot-view/cell-template-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView sample with Cell Template.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.renewableEnergy,\n expandAll: true,\n enableSorting: true,\n drilledMembers: [{name:'Year', items:['FY 2015', 'FY 2017', 'FY 2018']}],\n formatSettings: [{ name: 'ProCost', format: 'C0' }, { name: 'PowUnits', format: 'N0' }],\n rows: [\n { name: 'Year', caption: 'Production Year' },\n { name: 'HalfYear', caption: 'Half Year' }\n ],\n columns: [\n { name: 'EnerType', caption: 'Energy Type' },\n { name: 'EneSource', caption: 'Energy Source' }\n ],\n values: [\n { name: 'ProCost', caption: 'Revenue Growth' }\n ],\n filters: []\n },\n dataBound: function (args) {\n trend();\n },\n height: 300,\n width: '100%',\n cellTemplate: '${getCellContent(data)}',\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n window.getCellContent = function (e) {\n var template;\n if (e && e.targetCell.className.indexOf('e-valuescontent') > -1) {\n template = '';\n } else {\n template = '';\n }\n return template;\n };\n /* jshint ignore:start */\n function trend() {\n var cTable = document.getElementsByClassName(\"e-table\");\n var colLen = pivotGridObj.pivotValues[3].length;\n var cLen = cTable[3].children[0].children.length;\n var rLen = cTable[3].children[1].children.length;\n \n for (let k = 0; k < rLen; k++) {\n if (pivotGridObj.pivotValues[k] && pivotGridObj.pivotValues[k][0] !== undefined) {\n rowIndx = (pivotGridObj.pivotValues[k][0]).rowIndex;\n break;\n }\n }\n var rowHeaders = [].slice.call(cTable[2].children[1].querySelectorAll('td'));\n var rows = pivotGridObj.dataSource.rows;\n if (rowHeaders.length > 1) {\n for (var i = 0, Cnt = rows; i < Cnt.length; i++) {\n var fields = {};\n var fieldHeaders = [];\n for (var j = 0, Lnt = rowHeaders; j < Lnt.length; j++) {\n var header = rowHeaders[j];\n if (header.className.indexOf('e-gtot') === -1 && header.className.indexOf('e-rowsheader') > -1 && header.getAttribute('fieldname') === rows[i].name) {\n var headerName = rowHeaders[j].getAttribute('fieldname') + '_' + rowHeaders[j].textContent;\n fields[rowHeaders[j].textContent] = j;\n fieldHeaders.push(rowHeaders[j].textContent);\n }\n }\n if (i === 0) {\n for (var rnt = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) {\n if (rnt !== 0) {\n var row = fields[fieldHeaders[rnt]];\n var prevRow = fields[fieldHeaders[rnt - 1]];\n for (var j = 0, ci = 1; j < cLen && ci < colLen; j++, ci++) {\n var node = cTable[3].children[1].children[row].childNodes[j];\n var prevNode = cTable[3].children[1].children[prevRow].childNodes[j];\n var ri = undefined;\n var prevRi = undefined;\n if (node) {\n ri = node.getAttribute(\"index\");\n }\n if (prevNode) {\n prevRi = prevNode.getAttribute(\"index\");\n }\n if (ri && ri < pivotGridObj.pivotValues.length) {\n if ((pivotGridObj.pivotValues[prevRi][ci]).value > (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap')) {\n var trendElement = node.querySelector('.tempwrap');\n trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-loss');\n } else if ((pivotGridObj.pivotValues[prevRi][ci]).value < (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap')) {\n var trendElement = node.querySelector('.tempwrap');\n trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-profit');\n }\n }\n }\n }\n }\n } else {\n for (var rnt = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) {\n var row = fields[fieldHeaders[rnt]];\n for (var j = 0, ci = 1; j < cLen && ci < colLen; j++, ci++) {\n var node = cTable[3].children[1].children[row].childNodes[j];\n var prevNode = cTable[3].children[1].children[row - 1].childNodes[j];\n var ri = undefined;\n var prevRi = undefined;\n if (node) {\n ri = node.getAttribute(\"index\");\n }\n if (prevNode) {\n prevRi = prevNode.getAttribute(\"index\");\n }\n if (ri && ri < pivotGridObj.pivotValues.length) {\n var cRowFieldName = cTable[2].children[1].children[row].childNodes[0].getAttribute('fieldname');\n var prevRowFieldName = cTable[2].children[1].children[row -1].childNodes[0].getAttribute('fieldname');\n if ((pivotGridObj.pivotValues[prevRi][ci]).value > (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap') &&\n cRowFieldName === prevRowFieldName) {\n var trendElement = node.querySelector('.tempwrap');\n trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-loss');\n } else if ((pivotGridObj.pivotValues[prevRi][ci]).value < (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap') &&\n cRowFieldName === prevRowFieldName) {\n var trendElement = node.querySelector('.tempwrap');\n trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-profit');\n }\n }\n }\n }\n }\n }\n }\n }\n \n /* jshint ignore:end */\n\n"} \ No newline at end of file diff --git a/src/pivot-view/cell-template.html b/src/pivot-view/cell-template.html new file mode 100644 index 00000000..79fdd9e4 --- /dev/null +++ b/src/pivot-view/cell-template.html @@ -0,0 +1,68 @@ +
                                +
                                +
                                +
                                +
                                +
                                + +
                                +

                                In this sample, we demonstrate on how to provide templates for each pivot grid value cell based on user + requirement.

                                +
                                +
                                +

                                + The Pivot Table provides a custom layout for each cell's display using the cell template feature. + The cellTemplate property accepts either an HTML string or the element's ID, which can be used to + append additional HTML elements in order to showcase each cell with a template. + Using cell templates in this sample, we are representing the revenue cost for each year with trend icons. + To calculate the trend, we have applied conditions for each cell using pivot values from a + dataBound event. + Based on the applied condition, we are showing the appropriate trend icons. + +

                                +
                                + + \ No newline at end of file diff --git a/src/pivot-view/cell-template.js b/src/pivot-view/cell-template.js new file mode 100644 index 00000000..2515ec7a --- /dev/null +++ b/src/pivot-view/cell-template.js @@ -0,0 +1,135 @@ +/** + * PivotView sample with Cell Template. + */ +this.default = function () { + ej.base.enableRipple(false); + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + data: window.renewableEnergy, + expandAll: true, + enableSorting: true, + drilledMembers: [{name:'Year', items:['FY 2015', 'FY 2017', 'FY 2018']}], + formatSettings: [{ name: 'ProCost', format: 'C0' }, { name: 'PowUnits', format: 'N0' }], + rows: [ + { name: 'Year', caption: 'Production Year' }, + { name: 'HalfYear', caption: 'Half Year' } + ], + columns: [ + { name: 'EnerType', caption: 'Energy Type' }, + { name: 'EneSource', caption: 'Energy Source' } + ], + values: [ + { name: 'ProCost', caption: 'Revenue Growth' } + ], + filters: [] + }, + dataBound: function (args) { + trend(); + }, + height: 300, + width: '100%', + cellTemplate: '${getCellContent(data)}', + gridSettings: { columnWidth: 140 } + }); + pivotGridObj.appendTo('#PivotView'); + + window.getCellContent = function (e) { + var template; + if (e && e.targetCell.className.indexOf('e-valuescontent') > -1) { + template = ''; + } else { + template = ''; + } + return template; + }; + /* jshint ignore:start */ + function trend() { + var cTable = document.getElementsByClassName("e-table"); + var colLen = pivotGridObj.pivotValues[3].length; + var cLen = cTable[3].children[0].children.length; + var rLen = cTable[3].children[1].children.length; + + for (let k = 0; k < rLen; k++) { + if (pivotGridObj.pivotValues[k] && pivotGridObj.pivotValues[k][0] !== undefined) { + rowIndx = (pivotGridObj.pivotValues[k][0]).rowIndex; + break; + } + } + var rowHeaders = [].slice.call(cTable[2].children[1].querySelectorAll('td')); + var rows = pivotGridObj.dataSource.rows; + if (rowHeaders.length > 1) { + for (var i = 0, Cnt = rows; i < Cnt.length; i++) { + var fields = {}; + var fieldHeaders = []; + for (var j = 0, Lnt = rowHeaders; j < Lnt.length; j++) { + var header = rowHeaders[j]; + if (header.className.indexOf('e-gtot') === -1 && header.className.indexOf('e-rowsheader') > -1 && header.getAttribute('fieldname') === rows[i].name) { + var headerName = rowHeaders[j].getAttribute('fieldname') + '_' + rowHeaders[j].textContent; + fields[rowHeaders[j].textContent] = j; + fieldHeaders.push(rowHeaders[j].textContent); + } + } + if (i === 0) { + for (var rnt = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) { + if (rnt !== 0) { + var row = fields[fieldHeaders[rnt]]; + var prevRow = fields[fieldHeaders[rnt - 1]]; + for (var j = 0, ci = 1; j < cLen && ci < colLen; j++, ci++) { + var node = cTable[3].children[1].children[row].childNodes[j]; + var prevNode = cTable[3].children[1].children[prevRow].childNodes[j]; + var ri = undefined; + var prevRi = undefined; + if (node) { + ri = node.getAttribute("index"); + } + if (prevNode) { + prevRi = prevNode.getAttribute("index"); + } + if (ri && ri < pivotGridObj.pivotValues.length) { + if ((pivotGridObj.pivotValues[prevRi][ci]).value > (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap')) { + var trendElement = node.querySelector('.tempwrap'); + trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-loss'); + } else if ((pivotGridObj.pivotValues[prevRi][ci]).value < (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap')) { + var trendElement = node.querySelector('.tempwrap'); + trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-profit'); + } + } + } + } + } + } else { + for (var rnt = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) { + var row = fields[fieldHeaders[rnt]]; + for (var j = 0, ci = 1; j < cLen && ci < colLen; j++, ci++) { + var node = cTable[3].children[1].children[row].childNodes[j]; + var prevNode = cTable[3].children[1].children[row - 1].childNodes[j]; + var ri = undefined; + var prevRi = undefined; + if (node) { + ri = node.getAttribute("index"); + } + if (prevNode) { + prevRi = prevNode.getAttribute("index"); + } + if (ri && ri < pivotGridObj.pivotValues.length) { + var cRowFieldName = cTable[2].children[1].children[row].childNodes[0].getAttribute('fieldname'); + var prevRowFieldName = cTable[2].children[1].children[row -1].childNodes[0].getAttribute('fieldname'); + if ((pivotGridObj.pivotValues[prevRi][ci]).value > (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap') && + cRowFieldName === prevRowFieldName) { + var trendElement = node.querySelector('.tempwrap'); + trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-loss'); + } else if ((pivotGridObj.pivotValues[prevRi][ci]).value < (pivotGridObj.pivotValues[ri][ci]).value && node.querySelector('.tempwrap') && + cRowFieldName === prevRowFieldName) { + var trendElement = node.querySelector('.tempwrap'); + trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-profit'); + } + } + } + } + } + } + } + } + + /* jshint ignore:end */ +}; diff --git a/src/pivot-view/charts-stack.json b/src/pivot-view/charts-stack.json index b4702016..34633bc3 100644 --- a/src/pivot-view/charts-stack.json +++ b/src/pivot-view/charts-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Sample with Chart integration.\n */\n\n var onInit = true;\n var measure = 'In Stock';\n var engineModule;\n var chart;\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n valueSortSettings: { headerDelimiter: ' - ' },\n data: window.Pivot_Data,\n expandAll: false,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' }],\n filters: []\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 120 },\n dataBound: function (args) {\n if (onInit) {\n onChartLoad();\n }\n }\n });\n pivotGridObj.appendTo('#PivotView'); \n var measuresddl = new ej.dropdowns.DropDownList({\n change: function (args) {\n measure = args.value.toString();\n onChartLoad();\n }\n });\n measuresddl.appendTo('#measures');\n /* tslint:disable */\n function onChartLoad() {\n if (ej.base.Browser.isDevice) {\n ej.base.addClass([document.getElementById('ddldiv')], 'e-device');\n }\n if (onInit) {\n onInit = false;\n engineModule = ej.base.extend({}, pivotGridObj.engineModule, null, true);\n }\n if (engineModule) {\n var valuesContent = engineModule.valueContent;\n var data = [];\n for (var cCnt = 0; cCnt < valuesContent.length; cCnt++) {\n if (!valuesContent[cCnt][0].type) {\n data[cCnt] = valuesContent[cCnt];\n }\n }\n var chartSeries = void 0;\n for (cCnt = 0; cCnt < 1; cCnt++) {\n if (data[cCnt]) {\n for (var rCnt = measure === 'In Stock' ? 1 : 2; rCnt < Object.keys(data[cCnt]).length; rCnt++) {\n if (data[cCnt][rCnt] && !engineModule.pivotValues[0][rCnt].type && !data[cCnt][rCnt].type && rCnt > 0) {\n var colText = engineModule.pivotValues[0][rCnt].formattedText;\n if (!chartSeries) {\n chartSeries = [{\n dataSource: data,\n xName: cCnt + '.valueSort.levelName',\n yName: rCnt + '.value',\n type: 'Column',\n name: colText\n }];\n }\n else {\n chartSeries.push({\n dataSource: data,\n xName: cCnt + '.valueSort.levelName',\n yName: rCnt + '.value',\n type: 'Column',\n name: colText\n });\n }\n rCnt++;\n }\n }\n }\n }\n if (chart && chart.element) {\n chart.primaryYAxis = {\n title: measure\n };\n chart.primaryXAxis = {\n valueType: 'Category',\n title: 'Country',\n labelIntersectAction: 'Rotate45'\n };\n chart.series = chartSeries;\n chart.refresh();\n }\n else { \n chart = new ej.charts.Chart({\n title: 'Sales Analysis',\n legendSettings: {\n visible: true\n },\n tooltip: {\n enable: true\n },\n primaryYAxis: {\n title: measure,\n },\n primaryXAxis: {\n valueType: 'Category',\n title: 'Country',\n labelIntersectAction: 'Rotate45'\n },\n series: chartSeries,\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n }, '#chart');\n }\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Chart integration.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [\n { name: \"Year\" },\n { name: \"Order_Source\", caption: \"Order Source\" }\n ],\n rows: [{ name: \"Country\" }, { name: \"Products\" }],\n valueSortSettings: { headerDelimiter: \" - \" },\n data: window.Pivot_Data,\n expandAll: false,\n formatSettings: [{ name: \"Amount\", format: \"C\" }],\n values: [{ name: \"Amount\", caption: \"Sales Amount\" }],\n filters: []\n },\n showFieldList: true,\n displayOption: { view: \"Chart\" },\n chartSettings: {\n title: \"Sales Analysis\",\n chartSeries: { type: \"Column\" },\n load: function(args) {\n var selectedTheme = location.hash.split(\"/\")[1];\n selectedTheme = selectedTheme ? selectedTheme : \"Material\";\n args.chart.theme =\n selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1);\n }\n }\n });\n pivotGridObj.appendTo(\"#PivotView\");\n var chartTypesDropDown = new ej.dropdowns.DropDownList({\n placeholder: \"Chart Types\",\n floatLabelType: \"Auto\",\n change: function(args) {\n pivotGridObj.chartSettings.chartSeries.type = args.value;\n }\n });\n chartTypesDropDown.appendTo(\"#charttypesddl\");\n\n"} \ No newline at end of file diff --git a/src/pivot-view/charts.html b/src/pivot-view/charts.html index cee291fa..654ac445 100644 --- a/src/pivot-view/charts.html +++ b/src/pivot-view/charts.html @@ -1,48 +1,95 @@ -
                                +
                                -
                                -
                                -
                                -
                                -
                                -
                                - +
                                +
                                + +
                                + + + + + + +
                                +
                                + +
                                +
                                +
                                +
                                -

                                This sample demonstrates the integration of pivotgrid data into a simple chart widget.

                                +

                                This sample demonstrates the basic rendering of the Chart control using pivot data. PivotTable Field List is also + enabled to change the report at runtime.

                                -

                                In this sample, the stock and sales of certain products, across different countries over certain fiscal years are acquired - from the pivotgrid and plotted in the chart widget as series. The - stock and - sales values can be switched using the drop-down list located on the top-right corner of the chart widget. -

                                - Since we have only a simple chart now, we have bound the aggregated pivotgrid data alone without the major UI interaction - like drill-down. On pivotchart implementation in the near future, we will provide rich UI interaction. -

                                -
                                + In this sample, the Pivot View component plots a chart widget based on the pivot report bound to it. This can be + achieved by setting the property displayOption.view to Chart. The + built-in options are:

                                - \ No newline at end of file + In the sample, the field list option is enabled, through which you can see the result in the chart by altering + the report dynamically. +
                                +

                                +

                                + Injecting Module: +

                                +

                                + The pivotgrid widget features are segregated into individual modules. To take advantage of chart support, + we need to inject the PivotChart module using the PivotView.Inject(PivotChart) method. +

                                +
                                + \ No newline at end of file diff --git a/src/pivot-view/charts.js b/src/pivot-view/charts.js index 48759327..945fb7d8 100644 --- a/src/pivot-view/charts.js +++ b/src/pivot-view/charts.js @@ -1,123 +1,43 @@ /** * PivotView Sample with Chart integration. */ -this.default = function () { - var onInit = true; - var measure = 'In Stock'; - var engineModule; - var chart; - ej.base.enableRipple(false); - var pivotGridObj = new ej.pivotview.PivotView({ - dataSource: { - enableSorting: true, - columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }], - rows: [{ name: 'Country' }, { name: 'Products' }], - valueSortSettings: { headerDelimiter: ' - ' }, - data: window.Pivot_Data, - expandAll: false, - values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' }], - filters: [] - }, - width: '100%', - height: 300, - gridSettings: { columnWidth: 120 }, - dataBound: function (args) { - if (onInit) { - onChartLoad(); - } - } - }); - pivotGridObj.appendTo('#PivotView'); - var measuresddl = new ej.dropdowns.DropDownList({ - change: function (args) { - measure = args.value.toString(); - onChartLoad(); - } - }); - measuresddl.appendTo('#measures'); - /* tslint:disable */ - function onChartLoad() { - if (ej.base.Browser.isDevice) { - ej.base.addClass([document.getElementById('ddldiv')], 'e-device'); - } - if (onInit) { - onInit = false; - engineModule = ej.base.extend({}, pivotGridObj.engineModule, null, true); - } - if (engineModule) { - var valuesContent = engineModule.valueContent; - var data = []; - for (var cCnt = 0; cCnt < valuesContent.length; cCnt++) { - if (!valuesContent[cCnt][0].type) { - data[cCnt] = valuesContent[cCnt]; - } - } - var chartSeries = void 0; - for (cCnt = 0; cCnt < 1; cCnt++) { - if (data[cCnt]) { - for (var rCnt = measure === 'In Stock' ? 1 : 2; rCnt < Object.keys(data[cCnt]).length; rCnt++) { - if (data[cCnt][rCnt] && !engineModule.pivotValues[0][rCnt].type && !data[cCnt][rCnt].type && rCnt > 0) { - var colText = engineModule.pivotValues[0][rCnt].formattedText; - if (!chartSeries) { - chartSeries = [{ - dataSource: data, - xName: cCnt + '.valueSort.levelName', - yName: rCnt + '.value', - type: 'Column', - name: colText - }]; - } - else { - chartSeries.push({ - dataSource: data, - xName: cCnt + '.valueSort.levelName', - yName: rCnt + '.value', - type: 'Column', - name: colText - }); - } - rCnt++; - } - } - } - } - if (chart && chart.element) { - chart.primaryYAxis = { - title: measure - }; - chart.primaryXAxis = { - valueType: 'Category', - title: 'Country', - labelIntersectAction: 'Rotate45' - }; - chart.series = chartSeries; - chart.refresh(); - } - else { - chart = new ej.charts.Chart({ - title: 'Sales Analysis', - legendSettings: { - visible: true - }, - tooltip: { - enable: true - }, - primaryYAxis: { - title: measure, - }, - primaryXAxis: { - valueType: 'Category', - title: 'Country', - labelIntersectAction: 'Rotate45' - }, - series: chartSeries, - load: function (args) { - var selectedTheme = location.hash.split('/')[1]; - selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)); - } - }, '#chart'); - } - } +this.default = function() { + ej.base.enableRipple(false); + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + enableSorting: true, + columns: [ + { name: "Year" }, + { name: "Order_Source", caption: "Order Source" } + ], + rows: [{ name: "Country" }, { name: "Products" }], + valueSortSettings: { headerDelimiter: " - " }, + data: window.Pivot_Data, + expandAll: false, + formatSettings: [{ name: "Amount", format: "C" }], + values: [{ name: "Amount", caption: "Sales Amount" }], + filters: [] + }, + showFieldList: true, + displayOption: { view: "Chart" }, + chartSettings: { + title: "Sales Analysis", + chartSeries: { type: "Column" }, + load: function(args) { + var selectedTheme = location.hash.split("/")[1]; + selectedTheme = selectedTheme ? selectedTheme : "Material"; + args.chart.theme = + selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1); + } } + }); + pivotGridObj.appendTo("#PivotView"); + var chartTypesDropDown = new ej.dropdowns.DropDownList({ + placeholder: "Chart Types", + floatLabelType: "Auto", + change: function(args) { + pivotGridObj.chartSettings.chartSeries.type = args.value; + } + }); + chartTypesDropDown.appendTo("#charttypesddl"); }; diff --git a/src/pivot-view/conditional-formatting-stack.json b/src/pivot-view/conditional-formatting-stack.json index f3429b5f..82ea423f 100644 --- a/src/pivot-view/conditional-formatting-stack.json +++ b/src/pivot-view/conditional-formatting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n
                                \n \n
                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Sample with Calculated Fields.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' },\n { name: 'Sold', caption: 'Units Sold' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n conditionalFormatSettings: [\n {\n measure: 'In Stock',\n value1: 5000,\n conditions: 'LessThan',\n style: {\n backgroundColor: '#80cbc4',\n color: 'black',\n fontFamily: 'Tahoma',\n fontSize: '12px'\n }\n },\n {\n value1: 3400,\n value2: 40000,\n measure: 'Units Sold',\n conditions: 'Between',\n style: {\n backgroundColor: '#f48fb1',\n color: 'black',\n fontFamily: 'Tahoma',\n fontSize: '12px'\n }\n }\n ]\n },\n allowConditionalFormatting: true,\n showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 100 }\n });\n pivotGridObj.appendTo('#PivotView');\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#conditional-formatting-btn');\n button.element.onclick = function () {\n pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();\n };\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#reset-format');\n button1.element.onclick = function () {\n if (pivotGridObj.dataSource.conditionalFormatSettings.length > 0) {\n pivotGridObj.setProperties({ dataSource: { conditionalFormatSettings: [] } }, true);\n pivotGridObj.renderPivotGrid();\n }\n pivotGridObj.conditionalFormattingModule.destroy();\n document.getElementById('reset-format').blur();\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n
                                \n \n
                                \n \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Calculated Fields.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' },\n { name: 'Sold', caption: 'Units Sold' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n conditionalFormatSettings: [\n {\n measure: 'In Stock',\n value1: 5000,\n conditions: 'LessThan',\n style: {\n backgroundColor: '#80cbc4',\n color: 'black',\n fontFamily: 'Tahoma',\n fontSize: '12px'\n }\n },\n {\n value1: 3400,\n value2: 40000,\n measure: 'Units Sold',\n conditions: 'Between',\n style: {\n backgroundColor: '#f48fb1',\n color: 'black',\n fontFamily: 'Tahoma',\n fontSize: '12px'\n }\n }\n ]\n },\n allowConditionalFormatting: true,\n showFieldList: true,\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 100 }\n });\n pivotGridObj.appendTo('#PivotView');\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#conditional-formatting-btn');\n button.element.onclick = function () {\n pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();\n };\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#reset-format');\n button1.element.onclick = function () {\n if (pivotGridObj.dataSource.conditionalFormatSettings.length > 0) {\n pivotGridObj.setProperties({ dataSource: { conditionalFormatSettings: [] } }, true);\n pivotGridObj.renderPivotGrid();\n }\n pivotGridObj.conditionalFormattingModule.destroy();\n document.getElementById('reset-format').blur();\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/conditional-formatting.html b/src/pivot-view/conditional-formatting.html index 7790f9f8..666a38af 100644 --- a/src/pivot-view/conditional-formatting.html +++ b/src/pivot-view/conditional-formatting.html @@ -22,7 +22,7 @@
                                - +

                                This sample demonstrates formatting the appearance of the pivot grid cells with values based on the applied conditions.

                                @@ -83,4 +83,5 @@ width: 80%; margin-left: 20px; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/data-source.js b/src/pivot-view/data-source.js index 5edfd795..65c8c01b 100644 --- a/src/pivot-view/data-source.js +++ b/src/pivot-view/data-source.js @@ -2728,6 +2728,953 @@ var rData = [ 'ProCost': 23 } ]; + +var gData = [ + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 3 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 5 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 2 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 1 + + }, + { + 'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 3 + + }, + { + 'Date': '1/5/2015 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 3 + }, + { + 'Date': '2/2/2015 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 4 + + }, + { + 'Date': '2/10/2015 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '1/5/2015 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 3 + }, + { + 'Date': '2/2/2015 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '2/10/2015 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 4 + + }, + { + 'Date': '1/5/2015 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 8 + }, + { + 'Date': '2/2/2015 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 1 + + }, + { + 'Date': '2/10/2015 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 6 + + }, + { + 'Date': '2/20/2015 11:25:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 8 + + }, + { + 'Date': '3/07/2015 05:11:50 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '3/13/2015 05:11:55 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '9/1/2015 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '9/1/2015 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 2 + + }, + { + 'Date': '9/05/2015 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 10 + + }, + { + 'Date': '9/12/2015 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 3 + + }, + { + 'Date': '9/25/2015 04:15:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 2 + + }, + { + 'Date': '9/29/2015 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 3 + + }, + { + 'Date': '9/05/2015 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 2 + + }, + { + 'Date': '9/12/2015 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 3 + + }, + { + 'Date': '9/25/2015 04:15:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + }, + { + 'Date': '9/29/2015 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 7 + + }, + { + 'Date': '10/3/2015 18:11:47 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 1 + + }, + { + 'Date': '1/3/2016 17:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 5 + + }, + { + 'Date': '1/4/2016 15:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '1/5/2016 17:30:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 3 + + }, + { + 'Date': '1/8/2016 07:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 2 + + }, + { + 'Date': '10/3/2015 18:11:47 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/3/2016 17:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '1/4/2016 15:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/5/2016 17:30:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/8/2016 07:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 1 + + }, + { + 'Date': '1/10/2016 17:26:25 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 7 + + }, + { + 'Date': '2/11/2016 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 3 + + }, + { + 'Date': '2/12/2016 19:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '2/19/2016 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 5 + + }, + { + 'Date': '3/20/2016 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '2/19/2016 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 1 + + }, + { + 'Date': '3/20/2016 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 5 + + }, + { + 'Date': '3/23/2016 05:33:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 4 + + }, + { + 'Date': '3/06/2016 06:31:20 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '5/04/2016 21:41:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '5/11/2016 21:45:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 5 + + }, + { + 'Date': '3/20/2016 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '2/19/2016 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + + }, + { + 'Date': '3/20/2016 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 1 + + }, + { + 'Date': '3/23/2016 05:33:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 1 + + }, + { + 'Date': '3/06/2016 06:31:20 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '5/04/2016 21:41:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '5/11/2016 21:45:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 2 + + }, + { + 'Date': '6/17/2016 07:09:27 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 4 + + }, + { + 'Date': '7/1/2016 03:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '7/2/2016 05:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 5 + + }, + { + 'Date': '9/8/2016 11:50:17 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 2 + + }, + { + 'Date': '12/2/2016 16:05:33 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '6/17/2016 07:09:27 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '7/1/2016 03:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '7/2/2016 05:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 4 + + }, + { + 'Date': '9/8/2016 11:50:17 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + + }, + { + 'Date': '12/2/2016 16:05:33 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 3 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 3 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 5 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 2 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 1 + + }, + { + 'Date': '1/1/2017 20:18:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 3 + + }, + { + 'Date': '1/5/2017 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 3 + }, + { + 'Date': '2/2/2017 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 4 + + }, + { + 'Date': '2/10/2017 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '1/5/2017 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 3 + }, + { + 'Date': '2/2/2017 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '2/10/2017 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 4 + + }, + { + 'Date': '1/5/2017 20:19:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 8 + }, + { + 'Date': '2/2/2017 10:22:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 1 + + }, + { + 'Date': '2/10/2017 10:23:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 6 + + }, + { + 'Date': '2/20/2017 11:25:07 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 8 + + }, + { + 'Date': '3/07/2017 05:11:50 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '3/13/2017 05:11:55 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '9/1/2017 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '9/1/2017 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 2 + + }, + { + 'Date': '9/05/2017 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 10 + + }, + { + 'Date': '9/12/2017 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 3 + + }, + { + 'Date': '9/25/2017 04:15:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 2 + + }, + { + 'Date': '9/29/2017 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 3 + + }, + { + 'Date': '9/05/2017 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 2 + + }, + { + 'Date': '9/12/2017 04:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 3 + + }, + { + 'Date': '9/25/2017 04:15:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + }, + { + 'Date': '9/29/2017 05:14:43 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 7 + + }, + { + 'Date': '10/3/2017 18:11:47 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 1 + + }, + { + 'Date': '1/3/2018 17:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 5 + + }, + { + 'Date': '1/4/2018 15:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '1/5/2018 17:30:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 3 + + }, + { + 'Date': '1/8/2018 07:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 2 + + }, + { + 'Date': '10/3/2017 18:11:47 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/3/2018 17:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '1/4/2018 15:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/5/2018 17:30:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '1/8/2018 07:26:11 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 1 + + }, + { + 'Date': '1/10/2018 17:26:25 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 7 + + }, + { + 'Date': '2/11/2018 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 3 + + }, + { + 'Date': '2/12/2018 19:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '2/19/2018 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 5 + + }, + { + 'Date': '3/20/2018 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '2/19/2018 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1006, + 'Sold': 1 + + }, + { + 'Date': '3/20/2018 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 5 + + }, + { + 'Date': '3/23/2018 05:33:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 4 + + }, + { + 'Date': '3/06/2018 06:31:20 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '5/04/2018 21:41:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '5/11/2018 21:45:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 5 + + }, + { + 'Date': '3/20/2018 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 4 + + }, + { + 'Date': '2/19/2018 18:51:14 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + + }, + { + 'Date': '3/20/2018 06:31:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 1 + + }, + { + 'Date': '3/23/2018 05:33:12 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 1 + + }, + { + 'Date': '3/06/2018 06:31:20 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '5/04/2018 21:41:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 1 + + }, + { + 'Date': '5/11/2018 21:45:15 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1010, + 'Sold': 2 + + }, + { + 'Date': '6/17/2018 07:09:27 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 4 + + }, + { + 'Date': '7/1/2018 03:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1005, + 'Sold': 2 + + }, + { + 'Date': '7/2/2018 05:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1007, + 'Sold': 5 + + }, + { + 'Date': '9/8/2018 11:50:17 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1008, + 'Sold': 2 + + }, + { + 'Date': '12/2/2018 16:05:33 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 1 + + }, + { + 'Date': '6/17/2018 07:09:27 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1001, + 'Sold': 2 + + }, + { + 'Date': '7/1/2018 03:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Bikes', + 'Product_ID': 1004, + 'Sold': 1 + + }, + { + 'Date': '7/2/2018 05:47:38 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Clothings', + 'Product_ID': 1009, + 'Sold': 4 + + }, + { + 'Date': '9/8/2018 11:50:17 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1002, + 'Sold': 2 + + }, + { + 'Date': '12/2/2018 16:05:33 GMT+0530 (India Standard Time)', + 'Product_Categories': 'Accessories', + 'Product_ID': 1003, + 'Sold': 3 + + } +]; /* tslint:disable */ window.renewableEnergy = getClassDate(rData); @@ -2742,11 +3689,28 @@ function getClassDate(data) { data[ln].Year = 'FY ' + dtYr; data[ln].Quarter = dtdv <= 1 ? 'Q1 ' + ('FY ' + dtYr) : dtdv <= 2 ? 'Q2 ' + ('FY ' + dtYr) : dtdv <= 3 ? 'Q3 ' + ('FY ' + dtYr) : 'Q4 ' + ('FY ' + dtYr); - data[ln].HalfYear = (dtMn + 1) / 6 <= 1 ? 'H1 ' + ('FY ' + dtYr) : 'H2' + ('FY ' + dtYr); + data[ln].HalfYear = (dtMn + 1) / 6 <= 1 ? 'H1 ' + ('FY ' + dtYr) : 'H2 ' + ('FY ' + dtYr); delete (data[ln].Date); } return data; } + +window.Group_Data = getGroupData(gData); + +function getGroupData(data) { + var date; + var products = ['', 'Bottles and Cages', 'Cleaners', 'Fenders', 'Mountain Bikes', 'Road Bikes', 'Touring Bikes', 'Gloves', 'Jerseys', 'Shorts', 'Vests']; + var amount = [0, 2, 3, 8, 60, 75, 65, 3, 5, 4, 2]; + for (var ln = 0, lt = data.length; ln < lt; ln++) { + date = new Date(data[ln].Date.toString()); + data[ln].Date = date.toString(); + data[ln].Products = products[data[ln].Product_ID - 1000]; + data[ln].Sold = data[ln].Sold * (date.getFullYear() === 2015 ? 3 : date.getFullYear() === 2016 ? 4 : date.getFullYear() === 2017 ? 2 : 5); + data[ln].Amount = ((date.getFullYear() === 2018 ? 2 : 0) + data[ln].Sold) * amount[data[ln].Product_ID - 1000]; + } + return data; +} + window.Pivot_Data = [{ 'In_Stock': 34, 'Sold': 51, 'Amount': 383, 'Country': 'France', 'Product_Categories': 'Accessories', 'Products': 'Bottles and Cages', 'Order_Source': 'Retail Outlets', 'Year': 'FY 2015', 'Quarter': 'Q1' }, { 'In_Stock': 4, 'Sold': 423, 'Amount': 3595.5, 'Country': 'France', 'Product_Categories': 'Accessories', 'Products': 'Bottles and Cages', 'Order_Source': 'Sales Person', 'Year': 'FY 2015', 'Quarter': 'Q1' }, diff --git a/src/pivot-view/default-stack.json b/src/pivot-view/default-stack.json index ac7e4d4b..c62d5f11 100644 --- a/src/pivot-view/default-stack.json +++ b/src/pivot-view/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Default Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }],\n valueSortSettings: { headerDelimiter: ' - ' },\n values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],\n data: getPivotData(),\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n expandAll: false,\n filters: []\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n function getPivotData() {\n var pivotData = [\n { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 49, 'Amount': 83496, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 95, 'Amount': 161880, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 93, 'Amount': 139412, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 35, 'Amount': 52470, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 27264, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 69, 'Amount': 117576, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 75, 'Amount': 127800, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 20, 'Amount': 29985, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 28, 'Amount': 41977, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 48, 'Amount': 71957, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 57, 'Amount': 85448, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 25, 'Amount': 37480, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 69, 'Amount': 103436, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 53969, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 28, 'Amount': 41977, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 19, 'Amount': 28486, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 91, 'Amount': 145190.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 24, 'Amount': 38292, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 100, 'Amount': 159550, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 30, 'Amount': 47865, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 89, 'Amount': 141999.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 25, 'Amount': 39887.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 42, 'Amount': 67011, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 21, 'Amount': 33505.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 74, 'Amount': 126096, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 69, 'Amount': 110089.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 52, 'Amount': 82966, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 85, 'Amount': 144840, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 99, 'Amount': 148406, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 31, 'Amount': 49460.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 33, 'Amount': 52651.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 61464, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 64, 'Amount': 102112, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 57, 'Amount': 97128, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 39, 'Amount': 66456, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 76, 'Amount': 129504, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 33, 'Amount': 56232, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 81, 'Amount': 138024, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 65, 'Amount': 110760, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 47, 'Amount': 70458, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 16, 'Amount': 27264, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 71, 'Amount': 120984, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 61344, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 39, 'Amount': 58466, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 59, 'Amount': 100536, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 19, 'Amount': 28486, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 26, 'Amount': 38979, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 15, 'Amount': 22490, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 13, 'Amount': 20741.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 79, 'Amount': 118426, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 14, 'Amount': 20991, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 47, 'Amount': 74988.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 93, 'Amount': 148381.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 15, 'Amount': 23932.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 48, 'Amount': 76584, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 44, 'Amount': 70202, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 59, 'Amount': 94134.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 77, 'Amount': 131208, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 84, 'Amount': 143136, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 34, 'Amount': 54247, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 56, 'Amount': 95424, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 35, 'Amount': 55842.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 71, 'Amount': 113280.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 68160, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 24, 'Amount': 40896, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 31, 'Amount': 46474, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 92, 'Amount': 156768, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 14, 'Amount': 23856, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 95, 'Amount': 161880, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 51, 'Amount': 86904, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 39, 'Amount': 66456, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 53969, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 86, 'Amount': 128919, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 59965, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 96, 'Amount': 163584, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 24, 'Amount': 35981, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 97, 'Amount': 145408, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 69, 'Amount': 103436, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 95, 'Amount': 142410, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 30, 'Amount': 44975, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 11, 'Amount': 16494, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 95, 'Amount': 142410, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 11, 'Amount': 16494, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 27, 'Amount': 40478, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 68, 'Amount': 101937, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 100, 'Amount': 149905, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 45, 'Amount': 67460, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 40, 'Amount': 59965, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 18, 'Amount': 26987, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 70, 'Amount': 104935, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 43, 'Amount': 73272, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 43, 'Amount': 73272, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 52, 'Amount': 88608, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 100, 'Amount': 149905, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 70, 'Amount': 104935, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 37, 'Amount': 63048, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 69864, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 99, 'Amount': 148406, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 65415.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 81, 'Amount': 121424, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 20, 'Amount': 29985, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 85, 'Amount': 144840, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 49, 'Amount': 83496, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 23, 'Amount': 39192, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 34, 'Amount': 54247, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 53, 'Amount': 90312, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 82, 'Amount': 130831, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 60, 'Amount': 95730, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 71, 'Amount': 113280.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 25, 'Amount': 42600, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 28, 'Amount': 47712, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 21, 'Amount': 33505.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 49, 'Amount': 78179.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 50, 'Amount': 79775, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 56, 'Amount': 89348, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 63820, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 14, 'Amount': 22337, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 11, 'Amount': 17550.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 80, 'Amount': 127640, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 54, 'Amount': 86157, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 14, 'Amount': 22337, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 17, 'Amount': 27123.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 11, 'Amount': 17550.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' }];\n\n return pivotData;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Default Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }],\n valueSortSettings: { headerDelimiter: ' - ' },\n values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],\n data: getPivotData(),\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n expandAll: false,\n filters: []\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n function getPivotData() {\n var pivotData = [\n { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 49, 'Amount': 83496, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 95, 'Amount': 161880, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 93, 'Amount': 139412, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 35, 'Amount': 52470, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 27264, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 69, 'Amount': 117576, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 75, 'Amount': 127800, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 20, 'Amount': 29985, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 28, 'Amount': 41977, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 48, 'Amount': 71957, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 57, 'Amount': 85448, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 25, 'Amount': 37480, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 69, 'Amount': 103436, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 53969, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 28, 'Amount': 41977, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 19, 'Amount': 28486, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 91, 'Amount': 145190.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 24, 'Amount': 38292, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 100, 'Amount': 159550, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 30, 'Amount': 47865, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 89, 'Amount': 141999.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 25, 'Amount': 39887.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 42, 'Amount': 67011, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 21, 'Amount': 33505.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 74, 'Amount': 126096, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 69, 'Amount': 110089.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 52, 'Amount': 82966, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 85, 'Amount': 144840, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 99, 'Amount': 148406, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 31, 'Amount': 49460.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 33, 'Amount': 52651.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 61464, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 64, 'Amount': 102112, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 57, 'Amount': 97128, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 39, 'Amount': 66456, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 76, 'Amount': 129504, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 33, 'Amount': 56232, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 81, 'Amount': 138024, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 65, 'Amount': 110760, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 47, 'Amount': 70458, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 16, 'Amount': 27264, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 71, 'Amount': 120984, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 61344, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 39, 'Amount': 58466, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 59, 'Amount': 100536, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 19, 'Amount': 28486, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 26, 'Amount': 38979, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 15, 'Amount': 22490, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 13, 'Amount': 20741.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 79, 'Amount': 118426, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 14, 'Amount': 20991, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 47, 'Amount': 74988.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 93, 'Amount': 148381.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 15, 'Amount': 23932.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 48, 'Amount': 76584, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 44, 'Amount': 70202, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 59, 'Amount': 94134.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 77, 'Amount': 131208, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 84, 'Amount': 143136, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 34, 'Amount': 54247, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 56, 'Amount': 95424, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 35, 'Amount': 55842.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 71, 'Amount': 113280.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 90, 'Amount': 153360, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 68160, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 24, 'Amount': 40896, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 31, 'Amount': 46474, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 92, 'Amount': 156768, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 14, 'Amount': 23856, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 95, 'Amount': 161880, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 51, 'Amount': 86904, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 39, 'Amount': 66456, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 36, 'Amount': 53969, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 86, 'Amount': 128919, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 59965, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 96, 'Amount': 163584, 'Country': 'United Kingdom', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 24, 'Amount': 35981, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 97, 'Amount': 145408, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 69, 'Amount': 103436, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 95, 'Amount': 142410, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 30, 'Amount': 44975, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 11, 'Amount': 16494, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 95, 'Amount': 142410, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 11, 'Amount': 16494, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 27, 'Amount': 40478, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 68, 'Amount': 101937, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 100, 'Amount': 149905, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 45, 'Amount': 67460, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 16, 'Amount': 23989, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 40, 'Amount': 59965, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 18, 'Amount': 26987, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 70, 'Amount': 104935, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 43, 'Amount': 73272, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 43, 'Amount': 73272, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 83, 'Amount': 124422, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 52, 'Amount': 88608, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 91, 'Amount': 155064, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 100, 'Amount': 149905, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 70, 'Amount': 104935, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 37, 'Amount': 63048, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 69864, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 99, 'Amount': 148406, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 67, 'Amount': 114168, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 41, 'Amount': 65415.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 81, 'Amount': 121424, 'Country': 'United States', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 20, 'Amount': 29985, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 85, 'Amount': 144840, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 49, 'Amount': 83496, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 23, 'Amount': 39192, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 34, 'Amount': 54247, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 53, 'Amount': 90312, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 82, 'Amount': 130831, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },\n { 'Sold': 60, 'Amount': 95730, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 71, 'Amount': 113280.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },\n { 'Sold': 25, 'Amount': 42600, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 28, 'Amount': 47712, 'Country': 'United States', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 21, 'Amount': 33505.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 49, 'Amount': 78179.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 50, 'Amount': 79775, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },\n { 'Sold': 56, 'Amount': 89348, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 40, 'Amount': 63820, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },\n { 'Sold': 14, 'Amount': 22337, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },\n { 'Sold': 75, 'Amount': 119662.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 11, 'Amount': 17550.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },\n { 'Sold': 94, 'Amount': 149977, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 80, 'Amount': 127640, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 54, 'Amount': 86157, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 14, 'Amount': 22337, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },\n { 'Sold': 17, 'Amount': 27123.5, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },\n { 'Sold': 76, 'Amount': 121258, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },\n { 'Sold': 45, 'Amount': 71797.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },\n { 'Sold': 11, 'Amount': 17550.5, 'Country': 'United Kingdom', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' }];\n\n return pivotData;\n }\n"} \ No newline at end of file diff --git a/src/pivot-view/default.html b/src/pivot-view/default.html index b9ad470e..41cefa20 100644 --- a/src/pivot-view/default.html +++ b/src/pivot-view/default.html @@ -4,7 +4,7 @@
                                - +

                                This sample demonstrates the basic rendering of the pivotgrid widget with minimum configuration.

                                @@ -17,3 +17,4 @@ In this demo, the pivotgrid widget is populated with its minimum default settings.

                                + \ No newline at end of file diff --git a/src/pivot-view/defer-update-stack.json b/src/pivot-view/defer-update-stack.json index d745d071..cf3d3942 100644 --- a/src/pivot-view/defer-update-stack.json +++ b/src/pivot-view/defer-update-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Pivot Field List sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n enginePopulated: function () {\n if (!ej.base.Browser.isDevice && fieldlistObj && pivotGridObj) {\n fieldlistObj.update(pivotGridObj);\n }\n },\n allowDeferLayoutUpdate: true,\n width: '99%',\n height: 620,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldlistObj = new ej.pivotview.PivotFieldList({\n dataSource: {\n data: window.Pivot_Data,\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany', 'United States'] }],\n filterSettings: [{ name: 'Products', items: ['Gloves', 'Helmets', 'Shorts', 'Vests'], type: 'Include' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true,\n expandAll: false,\n allowLabelFilter: true,\n allowValueFilter: true,\n },\n allowDeferLayoutUpdate: true,\n allowCalculatedField: true,\n renderMode: 'Fixed',\n load: function () {\n if (ej.base.Browser.isDevice) {\n ej.base.setStyleAttribute(document.getElementById('PivotFieldList'), {\n 'width': 0,\n 'height': 0,\n 'float': 'left',\n 'display': 'none'\n });\n fieldlistObj.renderMode = 'Popup';\n fieldlistObj.target = '.control-section';\n }\n },\n enginePopulated: function () {\n if (fieldlistObj.isRequiredUpdate) {\n fieldlistObj.updateView(pivotGridObj);\n }\n pivotGridObj.notify('ui-update', pivotGridObj);\n if (!ej.base.Browser.isDevice) {\n fieldlistObj.notify('tree-view-update', fieldlistObj);\n }\n },\n dataBound: function () {\n if (ej.base.Browser.isDevice) {\n pivotGridObj.element.style.width = '100%';\n pivotGridObj.allowCalculatedField = true;\n pivotGridObj.showFieldList = true;\n }\n pivotGridObj.tooltip.destroy();\n pivotGridObj.refresh();\n }\n });\n fieldlistObj.appendTo('#PivotFieldList');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * Pivot Field List sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n enginePopulated: function () {\n if (!ej.base.Browser.isDevice && fieldlistObj && pivotGridObj) {\n fieldlistObj.update(pivotGridObj);\n }\n },\n allowDeferLayoutUpdate: true,\n width: '99%',\n height: 620,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldlistObj = new ej.pivotview.PivotFieldList({\n dataSource: {\n data: window.Pivot_Data,\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany', 'United States'] }],\n filterSettings: [{ name: 'Products', items: ['Gloves', 'Helmets', 'Shorts', 'Vests'], type: 'Include' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true,\n expandAll: false,\n allowLabelFilter: true,\n allowValueFilter: true,\n },\n allowDeferLayoutUpdate: true,\n allowCalculatedField: true,\n renderMode: 'Fixed',\n load: function () {\n if (ej.base.Browser.isDevice) {\n ej.base.setStyleAttribute(document.getElementById('PivotFieldList'), {\n 'width': 0,\n 'height': 0,\n 'float': 'left',\n 'display': 'none'\n });\n fieldlistObj.renderMode = 'Popup';\n fieldlistObj.target = '.control-section';\n }\n },\n enginePopulated: function () {\n if (fieldlistObj.isRequiredUpdate) {\n fieldlistObj.updateView(pivotGridObj);\n }\n pivotGridObj.notify('ui-update', pivotGridObj);\n if (!ej.base.Browser.isDevice) {\n fieldlistObj.notify('tree-view-update', fieldlistObj);\n }\n },\n dataBound: function () {\n if (ej.base.Browser.isDevice) {\n pivotGridObj.element.style.width = '100%';\n pivotGridObj.allowCalculatedField = true;\n pivotGridObj.showFieldList = true;\n }\n pivotGridObj.tooltip.destroy();\n pivotGridObj.refresh();\n }\n });\n fieldlistObj.appendTo('#PivotFieldList');\n\n"} \ No newline at end of file diff --git a/src/pivot-view/defer-update.html b/src/pivot-view/defer-update.html index 6445a2c5..e68a05d8 100644 --- a/src/pivot-view/defer-update.html +++ b/src/pivot-view/defer-update.html @@ -6,7 +6,7 @@
                                - +

                                This sample demonstrates the defer layout update feature of the pivot grid widget.

                                @@ -33,4 +33,5 @@ .e-pivotfieldlist .e-static { width: 100% !important; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/drill-options-stack.json b/src/pivot-view/drill-options-stack.json index 6d6e02a7..eb2d3501 100644 --- a/src/pivot-view/drill-options-stack.json +++ b/src/pivot-view/drill-options-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Sample with Drill Options.\n */ \n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n data: window.Pivot_Data,\n expandAll: false,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: []\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var radioButton = new ej.buttons.RadioButton({\n label: 'Collapse All',\n name: 'DrillOperation',\n checked: true,\n change: onRadioChange\n });\n radioButton.appendTo('#collapse');\n radioButton = new ej.buttons.RadioButton({\n label: 'Expand All',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#expand');\n radioButton = new ej.buttons.RadioButton({\n label: 'FY 2015',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#fy15');\n radioButton = new ej.buttons.RadioButton({\n label: 'FY 2015 >> Q1',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#fy15_q1');\n radioButton = new ej.buttons.RadioButton({\n label: 'United States',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#us');\n radioButton = new ej.buttons.RadioButton({\n label: 'United States >> Clothing',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#us_clothing');\n function onRadioChange(args) {\n var id = args.event.target.id;\n if (id !== 'collapse') {\n /** To restrict multiple times grid rendering on property change. */\n pivotGridObj.setProperties({ dataSource: { expandAll: false, drilledMembers: [] } }, true);\n }\n else {\n pivotGridObj.dataSource.drilledMembers = [];\n }\n if (id === 'collapse') {\n pivotGridObj.dataSource.expandAll = false;\n }\n else if (id === 'expand') {\n pivotGridObj.dataSource.expandAll = true;\n }\n else if (id === 'fy15') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Year', items: ['FY 2015'] }];\n }\n else if (id === 'fy15_q1') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Year', items: ['FY 2015'] },\n { name: 'Quarter', items: ['Q1'] }];\n }\n else if (id === 'us') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Country', items: ['United States'] }];\n }\n else {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Country', items: ['United States'] },\n { name: 'Product_Categories', items: ['Clothing'] }];\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n","index.js":"{{ripple}}/**\n * PivotView Sample with Drill Options.\n */ \n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n data: window.Pivot_Data,\n expandAll: false,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: []\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var radioButton = new ej.buttons.RadioButton({\n label: 'Collapse All',\n name: 'DrillOperation',\n checked: true,\n change: onRadioChange\n });\n radioButton.appendTo('#collapse');\n radioButton = new ej.buttons.RadioButton({\n label: 'Expand All',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#expand');\n radioButton = new ej.buttons.RadioButton({\n label: 'FY 2015',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#fy15');\n radioButton = new ej.buttons.RadioButton({\n label: 'FY 2015 >> Q1',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#fy15_q1');\n radioButton = new ej.buttons.RadioButton({\n label: 'United States',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#us');\n radioButton = new ej.buttons.RadioButton({\n label: 'United States >> Clothing',\n name: 'DrillOperation',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#us_clothing');\n function onRadioChange(args) {\n var id = args.event.target.id;\n if (id !== 'collapse') {\n /** To restrict multiple times grid rendering on property change. */\n pivotGridObj.setProperties({ dataSource: { expandAll: false, drilledMembers: [] } }, true);\n }\n else {\n pivotGridObj.dataSource.drilledMembers = [];\n }\n if (id === 'collapse') {\n pivotGridObj.dataSource.expandAll = false;\n }\n else if (id === 'expand') {\n pivotGridObj.dataSource.expandAll = true;\n }\n else if (id === 'fy15') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Year', items: ['FY 2015'] }];\n }\n else if (id === 'fy15_q1') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Year', items: ['FY 2015'] },\n { name: 'Quarter', items: ['Q1'] }];\n }\n else if (id === 'us') {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Country', items: ['United States'] }];\n }\n else {\n pivotGridObj.dataSource.drilledMembers = [{ name: 'Country', items: ['United States'] },\n { name: 'Product_Categories', items: ['Clothing'] }];\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/drill-options.html b/src/pivot-view/drill-options.html index f3d7b44a..e51c1df5 100644 --- a/src/pivot-view/drill-options.html +++ b/src/pivot-view/drill-options.html @@ -56,7 +56,7 @@ - +

                                This sample demonstrates the drill up and drill down capabilities of pivotgrid widget.

                                @@ -69,4 +69,5 @@ items options inside the drilledMembers property in pivotgrid widget.

                                -
                                \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/drill-through-stack.json b/src/pivot-view/drill-through-stack.json index bdc0b9ef..54da2f65 100644 --- a/src/pivot-view/drill-through-stack.json +++ b/src/pivot-view/drill-through-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n expandAll: false,\n enableSorting: true,\n rows: [{ name: 'Country' }, { name: 'Products' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }]\n },\n width: '100%',\n allowDrillThrough: true,\n height: 300,\n showFieldList: true,\n showTooltip: false,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n expandAll: false,\n enableSorting: true,\n rows: [{ name: 'Country' }, { name: 'Products' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }]\n },\n width: '100%',\n allowDrillThrough: true,\n height: 300,\n showFieldList: true,\n showTooltip: false,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file diff --git a/src/pivot-view/drill-through.html b/src/pivot-view/drill-through.html index e65c4410..57a967df 100644 --- a/src/pivot-view/drill-through.html +++ b/src/pivot-view/drill-through.html @@ -4,7 +4,7 @@
                                - +

                                This demo demonstrates how to obtain a list of raw items for a particular cell using the drill-through option.

                                @@ -15,4 +15,5 @@ details using the column chooser option in the dialog.

                                This feature can be enabled by setting the allowDrillThrough as true.

                                - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/editing-stack.json b/src/pivot-view/editing-stack.json index 881d324c..e827e098 100644 --- a/src/pivot-view/editing-stack.json +++ b/src/pivot-view/editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Sample with Edit Options.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [],\n rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 },\n showTooltip: false,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }\n });\n pivotGridObj.appendTo('#PivotView');\n var radioButton = new ej.buttons.RadioButton({\n label: 'Inline Editing',\n name: 'EditOpeartion',\n checked: true,\n change: onRadioChange\n });\n radioButton.appendTo('#inline');\n radioButton = new ej.buttons.RadioButton({\n label: 'Batch Editing',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#batch');\n radioButton = new ej.buttons.RadioButton({\n label: 'Dialog Editing',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#dialog');\n radioButton = new ej.buttons.RadioButton({\n label: 'Command Columns',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#cc');\n function onRadioChange(args) {\n var id = args.event.target.id;\n if (id === 'inline') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Normal';\n }\n else if (id === 'batch') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Batch';\n }\n else if (id === 'dialog') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Dialog';\n }\n else {\n pivotGridObj.editSettings.allowCommandColumns = true;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Edit Options.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [],\n rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 },\n showTooltip: false,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }\n });\n pivotGridObj.appendTo('#PivotView');\n var radioButton = new ej.buttons.RadioButton({\n label: 'Inline Editing',\n name: 'EditOpeartion',\n checked: true,\n change: onRadioChange\n });\n radioButton.appendTo('#inline');\n radioButton = new ej.buttons.RadioButton({\n label: 'Batch Editing',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#batch');\n radioButton = new ej.buttons.RadioButton({\n label: 'Dialog Editing',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#dialog');\n radioButton = new ej.buttons.RadioButton({\n label: 'Command Columns',\n name: 'EditOpeartion',\n checked: false,\n change: onRadioChange\n });\n radioButton.appendTo('#cc');\n function onRadioChange(args) {\n var id = args.event.target.id;\n if (id === 'inline') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Normal';\n }\n else if (id === 'batch') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Batch';\n }\n else if (id === 'dialog') {\n pivotGridObj.editSettings.allowCommandColumns = false;\n pivotGridObj.editSettings.mode = 'Dialog';\n }\n else {\n pivotGridObj.editSettings.allowCommandColumns = true;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/editing.html b/src/pivot-view/editing.html index 30e52f25..382daf6a 100644 --- a/src/pivot-view/editing.html +++ b/src/pivot-view/editing.html @@ -39,7 +39,7 @@
                                - + @@ -69,4 +69,5 @@
                              • Command Columns - An additional column appends to the grid with icons to perform CRUD operations. Editing using cell double-click is restricted here.
                                • - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/exporting-stack.json b/src/pivot-view/exporting-stack.json index 74d99427..20b9e9cb 100644 --- a/src/pivot-view/exporting-stack.json +++ b/src/pivot-view/exporting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Export Type:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Exporting Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n width: '100%',\n height: 300,\n allowExcelExport: true,\n allowPdfExport: true,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView'); \n var exportType = new ej.dropdowns.DropDownList({\n index: 0,\n width: 160\n });\n exportType.appendTo('#mode');\n var exportBtn = new ej.buttons.Button({\n cssClass: 'e-flat', isPrimary: true,\n });\n exportBtn.appendTo('#export-btn');\n document.getElementById('export-btn').onclick = function () {\n if (exportType.value === 'excel') {\n pivotGridObj.excelExport();\n }\n else if (exportType.value === 'csv') {\n pivotGridObj.csvExport();\n }\n else {\n pivotGridObj.pdfExport();\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Export Type:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Exporting Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n width: '100%',\n height: 300,\n allowExcelExport: true,\n allowPdfExport: true,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView'); \n var exportType = new ej.dropdowns.DropDownList({\n index: 0,\n width: 160\n });\n exportType.appendTo('#mode');\n var exportBtn = new ej.buttons.Button({\n cssClass: 'e-flat', isPrimary: true,\n });\n exportBtn.appendTo('#export-btn');\n document.getElementById('export-btn').onclick = function () {\n if (exportType.value === 'excel') {\n pivotGridObj.excelExport();\n }\n else if (exportType.value === 'csv') {\n pivotGridObj.csvExport();\n }\n else {\n pivotGridObj.pdfExport();\n }\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/exporting.html b/src/pivot-view/exporting.html index 8366b9c5..2621e1a8 100644 --- a/src/pivot-view/exporting.html +++ b/src/pivot-view/exporting.html @@ -34,7 +34,7 @@
                                - +

                                This sample demonstrates client-side exporting of the pivotgrid widget to Excel, CSV and PDF formats.

                                @@ -55,4 +55,5 @@ .e-pivottable .e-static { width: 80% !important; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/external-binding-stack.json b/src/pivot-view/external-binding-stack.json new file mode 100644 index 00000000..3d2499ae --- /dev/null +++ b/src/pivot-view/external-binding-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Selection feature with HeatMap integration.\n */\n\n ej.base.enableRipple(false);\n var onInit = true;\n var selectedCells;\n var heatmap;\n var measureList = {};\n var xLabels = [];\n var yLabels = [];\n var jsonDataSource = [];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: true,\n values: [{ name: 'Sold', caption: 'Units Sold' }],\n filters: [],\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n valueSortSettings: { headerDelimiter: ' - ' }\n },\n showTooltip: false,\n width: '100%',\n height: 300,\n dataBound: function () {\n if (onInit) {\n pivotGridObj.grid.selectionModule.selectCellsByRange({ cellIndex: 1, rowIndex: 1 }, { cellIndex: 3, rowIndex: 4 });\n }\n },\n cellSelected: function (args) {\n selectedCells = args.selectedCellsInfo;\n if (selectedCells && selectedCells.length > 0) {\n frameSeries();\n heatmapUpdate();\n }\n },\n gridSettings: {\n columnWidth: 120,\n allowSelection: true,\n selectionSettings: { mode: 'Cell', type: 'Multiple', cellSelectionMode: 'Box' }\n }\n });\n pivotGridObj.appendTo('#PivotView');\n\n\n /* tslint:disable */\n function frameSeries() {\n xLabels = [];\n yLabels = [];\n jsonDataSource = [];\n var columnGroupObject = {};\n var cellCount = 0;\n while (cellCount < selectedCells.length) {\n var sCell = selectedCells[cellCount];\n var sColumnSeries = (pivotGridObj.dataSource.values.length > 1 && measureList[sCell.measure]) ?\n (sCell.columnHeaders.toString() + ' ~ ' + measureList[sCell.measure]) : sCell.columnHeaders.toString();\n sColumnSeries = sColumnSeries == '' && sCell.measure != '' ? 'Grand Total' : sColumnSeries;\n var rHeaders = sCell.rowHeaders == '' && sCell.currentCell.axis != 'column' ? 'Grand Total' : sCell.rowHeaders;\n if (rHeaders != '' && sColumnSeries) {\n if (columnGroupObject[sColumnSeries]) {\n columnGroupObject[sColumnSeries].push({ x: rHeaders.toString(), y: Number(sCell.value) });\n } else {\n columnGroupObject[sColumnSeries] = [{ x: rHeaders.toString(), y: Number(sCell.value) }];\n yLabels.push(sColumnSeries);\n }\n if (xLabels.indexOf(rHeaders.toString()) == -1) {\n xLabels.push(rHeaders.toString());\n }\n }\n cellCount++;\n }\n for (var xcnt = 0; xcnt < xLabels.length; xcnt++) {\n var xName = xLabels[xcnt];\n var row = { 'xMember': xName };\n for (var ycnt = 0; ycnt < yLabels.length; ycnt++) {\n var YName = yLabels[ycnt];\n row[YName] = '';\n for (var hCount = 0; hCount < columnGroupObject[YName].length; hCount++) {\n if (columnGroupObject[YName][hCount].x === xName) {\n row[YName] = columnGroupObject[YName][hCount].y;\n }\n }\n }\n jsonDataSource.push(row);\n }\n }\n\n function heatmapUpdate() {\n if (onInit) {\n onInit = false;\n heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Sales Analysis'\n },\n legendSettings: {\n position: 'Top'\n },\n xAxis: {\n title: { text: pivotGridObj.dataSource.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ') },\n labels: xLabels,\n labelRotation: 315\n },\n yAxis: {\n title: { text: pivotGridObj.dataSource.values.map(function (args) { return args.caption || args.name; }).join(' ~ ') },\n labels: yLabels\n },\n dataSource: {\n data: jsonDataSource,\n isJsonData: true,\n adaptorType: 'Table',\n xDataMapping: 'xMember'\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.heatmap.theme = selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1);\n },\n }, '#heatmap');\n } else {\n heatmap.dataSource.data = jsonDataSource;\n heatmap.xAxis = {\n title: { text: pivotGridObj.dataSource.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ') },\n labels: xLabels,\n labelRotation: 315\n };\n heatmap.yAxis = {\n title: { text: pivotGridObj.dataSource.values.map(function (args) { return args.caption || args.name; }).join(' ~ ') },\n labels: yLabels\n };\n heatmap.refresh();\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/external-binding.html b/src/pivot-view/external-binding.html new file mode 100644 index 00000000..c814d998 --- /dev/null +++ b/src/pivot-view/external-binding.html @@ -0,0 +1,23 @@ +
                                +
                                +
                                +
                                +
                                +
                                +
                                +
                                + +
                                +

                                This sample demonstrates rendering Heatmap control by providing desired data from a pivot grid on selection. Not + only Heatmap, but any other control (including third party) can be used for this purpose. +

                                +
                                +
                                +

                                In this sample, the cell selection feature is enabled with the api allowSelection property and its + type and mode are configured using the + selectionSettings property. The cellSelected event event gets fired on every selection + operation performed in the pivot grid. This event returns the selected cell information, like row header name, + column header name, measure name, and value. Based on this information, the heatmap will be plotted. +

                                +
                                + \ No newline at end of file diff --git a/src/pivot-view/external-binding.js b/src/pivot-view/external-binding.js new file mode 100644 index 00000000..83442cdf --- /dev/null +++ b/src/pivot-view/external-binding.js @@ -0,0 +1,135 @@ +/** + * PivotView Sample with Selection feature with HeatMap integration. + */ +this.default = function () { + ej.base.enableRipple(false); + var onInit = true; + var selectedCells; + var heatmap; + var measureList = {}; + var xLabels = []; + var yLabels = []; + var jsonDataSource = []; + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + data: window.Pivot_Data, + expandAll: true, + values: [{ name: 'Sold', caption: 'Units Sold' }], + filters: [], + enableSorting: true, + columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }], + rows: [{ name: 'Country' }, { name: 'Products' }], + valueSortSettings: { headerDelimiter: ' - ' } + }, + showTooltip: false, + width: '100%', + height: 300, + dataBound: function () { + if (onInit) { + pivotGridObj.grid.selectionModule.selectCellsByRange({ cellIndex: 1, rowIndex: 1 }, { cellIndex: 3, rowIndex: 4 }); + } + }, + cellSelected: function (args) { + selectedCells = args.selectedCellsInfo; + if (selectedCells && selectedCells.length > 0) { + frameSeries(); + heatmapUpdate(); + } + }, + gridSettings: { + columnWidth: 120, + allowSelection: true, + selectionSettings: { mode: 'Cell', type: 'Multiple', cellSelectionMode: 'Box' } + } + }); + pivotGridObj.appendTo('#PivotView'); + + + /* tslint:disable */ + function frameSeries() { + xLabels = []; + yLabels = []; + jsonDataSource = []; + var columnGroupObject = {}; + var cellCount = 0; + while (cellCount < selectedCells.length) { + var sCell = selectedCells[cellCount]; + var sColumnSeries = (pivotGridObj.dataSource.values.length > 1 && measureList[sCell.measure]) ? + (sCell.columnHeaders.toString() + ' ~ ' + measureList[sCell.measure]) : sCell.columnHeaders.toString(); + sColumnSeries = sColumnSeries == '' && sCell.measure != '' ? 'Grand Total' : sColumnSeries; + var rHeaders = sCell.rowHeaders == '' && sCell.currentCell.axis != 'column' ? 'Grand Total' : sCell.rowHeaders; + if (rHeaders != '' && sColumnSeries) { + if (columnGroupObject[sColumnSeries]) { + columnGroupObject[sColumnSeries].push({ x: rHeaders.toString(), y: Number(sCell.value) }); + } else { + columnGroupObject[sColumnSeries] = [{ x: rHeaders.toString(), y: Number(sCell.value) }]; + yLabels.push(sColumnSeries); + } + if (xLabels.indexOf(rHeaders.toString()) == -1) { + xLabels.push(rHeaders.toString()); + } + } + cellCount++; + } + for (var xcnt = 0; xcnt < xLabels.length; xcnt++) { + var xName = xLabels[xcnt]; + var row = { 'xMember': xName }; + for (var ycnt = 0; ycnt < yLabels.length; ycnt++) { + var YName = yLabels[ycnt]; + row[YName] = ''; + for (var hCount = 0; hCount < columnGroupObject[YName].length; hCount++) { + if (columnGroupObject[YName][hCount].x === xName) { + row[YName] = columnGroupObject[YName][hCount].y; + } + } + } + jsonDataSource.push(row); + } + } + + function heatmapUpdate() { + if (onInit) { + onInit = false; + heatmap = new ej.heatmap.HeatMap({ + titleSettings: { + text: 'Sales Analysis' + }, + legendSettings: { + position: 'Top' + }, + xAxis: { + title: { text: pivotGridObj.dataSource.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ') }, + labels: xLabels, + labelRotation: 315 + }, + yAxis: { + title: { text: pivotGridObj.dataSource.values.map(function (args) { return args.caption || args.name; }).join(' ~ ') }, + labels: yLabels + }, + dataSource: { + data: jsonDataSource, + isJsonData: true, + adaptorType: 'Table', + xDataMapping: 'xMember' + }, + load: function (args) { + var selectedTheme = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.heatmap.theme = selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1); + }, + }, '#heatmap'); + } else { + heatmap.dataSource.data = jsonDataSource; + heatmap.xAxis = { + title: { text: pivotGridObj.dataSource.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ') }, + labels: xLabels, + labelRotation: 315 + }; + heatmap.yAxis = { + title: { text: pivotGridObj.dataSource.values.map(function (args) { return args.caption || args.name; }).join(' ~ ') }, + labels: yLabels + }; + heatmap.refresh(); + } + } +}; diff --git a/src/pivot-view/field-list-stack.json b/src/pivot-view/field-list-stack.json index 27459649..819b5f02 100644 --- a/src/pivot-view/field-list-stack.json +++ b/src/pivot-view/field-list-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Pivot Field List sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n enginePopulated: function () {\n if (!ej.base.Browser.isDevice && fieldlistObj && pivotGridObj) {\n fieldlistObj.update(pivotGridObj);\n }\n },\n width: '99%',\n height: 600,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldlistObj = new ej.pivotview.PivotFieldList({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n allowLabelFilter: true,\n allowValueFilter: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true\n },\n allowCalculatedField: true,\n renderMode: 'Fixed',\n load: function () {\n if (ej.base.Browser.isDevice) {\n fieldlistObj.renderMode = 'Popup';\n fieldlistObj.target = '.control-section';\n ej.base.setStyleAttribute(document.getElementById('PivotFieldList'), {\n\t\t\t\t\t'width': 0,\n 'height': 0,\n 'float': 'left',\n 'display': 'none'\n });\n }\n },\n dataBound: function () {\n if (ej.base.Browser.isDevice) {\n pivotGridObj.element.style.width = '100%';\n pivotGridObj.allowCalculatedField = true;\n pivotGridObj.showFieldList = true;\n }\n pivotGridObj.tooltip.destroy();\n pivotGridObj.refresh();\n },\n enginePopulated: function () {\n fieldlistObj.updateView(pivotGridObj);\n }\n });\n fieldlistObj.appendTo('#PivotFieldList');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * Pivot Field List sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n enginePopulated: function () {\n if (!ej.base.Browser.isDevice && fieldlistObj && pivotGridObj) {\n fieldlistObj.update(pivotGridObj);\n }\n },\n width: '99%',\n height: 600,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldlistObj = new ej.pivotview.PivotFieldList({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n allowLabelFilter: true,\n allowValueFilter: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true\n },\n allowCalculatedField: true,\n renderMode: 'Fixed',\n load: function () {\n if (ej.base.Browser.isDevice) {\n fieldlistObj.renderMode = 'Popup';\n fieldlistObj.target = '.control-section';\n ej.base.setStyleAttribute(document.getElementById('PivotFieldList'), {\n\t\t\t\t\t'width': 0,\n 'height': 0,\n 'float': 'left',\n 'display': 'none'\n });\n }\n },\n dataBound: function () {\n if (ej.base.Browser.isDevice) {\n pivotGridObj.element.style.width = '100%';\n pivotGridObj.allowCalculatedField = true;\n pivotGridObj.showFieldList = true;\n }\n pivotGridObj.tooltip.destroy();\n pivotGridObj.refresh();\n },\n enginePopulated: function () {\n fieldlistObj.updateView(pivotGridObj);\n }\n });\n fieldlistObj.appendTo('#PivotFieldList');\n\n"} \ No newline at end of file diff --git a/src/pivot-view/field-list.html b/src/pivot-view/field-list.html index 4a58ddc6..92457f02 100644 --- a/src/pivot-view/field-list.html +++ b/src/pivot-view/field-list.html @@ -6,7 +6,7 @@
                                - +

                                This sample demonstrates the field list feature of the pivotgrid widget. In this sample, fields are automatically populated @@ -44,4 +44,5 @@ .e-pivotfieldlist .e-static { width: 100% !important; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/filtering-stack.json b/src/pivot-view/filtering-stack.json index 476c94b3..1c2d3602 100644 --- a/src/pivot-view/filtering-stack.json +++ b/src/pivot-view/filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Members:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Filter Type:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Filtering Sample.\n */\n\n var fieldCollections = {};\n var filterCollections= {};\n var isInitial = true;\n var type = ['Include', 'Exclude'];\n var values = [];\n var fields = ['Country', 'Products', 'Year'];\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n if (isInitial) {\n /** To fill the members for each fields into the object fieldCollections. */\n var fieldCnt = fields.length - 1;\n while (fieldCnt > -1) {\n var members = Object.keys(pivotGridObj.engineModule.fieldList[fields[fieldCnt]].members);\n var memberCnt = members.length - 1;\n var memberColl = [];\n while (memberCnt > -1) {\n memberColl.push({ Member: members[memberCnt], Checked: members[memberCnt] + '_' + false });\n memberCnt--;\n }\n fieldCollections[fields[fieldCnt]] = memberColl;\n fieldCnt--;\n }\n values = fieldCollections[fields[0]];\n isInitial = false;\n }\n for (var i = 0, Cnt = pivotGridObj.dataSource.filterSettings; i < Cnt.length; i++) {\n filterCollections[Cnt[i].name] = Cnt[i];\n }\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var valuesddl = new ej.dropdowns.MultiSelect({\n dataSource: values,\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n enableSelectionOrder: false,\n fields: { text: 'Member' },\n select: function (args) {\n applyBtn.disabled = false;\n setMemberCheckedState(fieldsddl.itemData, args.item.textContent, args.item.textContent + '_' + true);\n },\n removed: function (args) {\n setMemberCheckedState(fieldsddl.itemData, args.item.textContent, args.item.textContent + '_' + false);\n setApplyBtnState();\n },\n open: function (args) {\n args.popup.element.querySelector(\".e-filter-parent\").style.display = 'none';\n }\n });\n valuesddl.appendTo('#values');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '98%',\n change: function (args) {\n valuesddl.dataSource = fieldCollections[args.value.toString()];\n valuesddl.value = getSelectedMembers(args.value.toString());\n if (filterCollections[args.value.toString()]) {\n typeddl.value = filterCollections[args.value.toString()].type;\n }\n valuesddl.dataBind();\n typeddl.dataBind();\n }\n });\n fieldsddl.appendTo('#fields');\n var typeddl = new ej.dropdowns.DropDownList({\n dataSource: type,\n width: '98%',\n index: 1\n });\n typeddl.appendTo('#type');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true, disabled: true\n });\n applyBtn.appendTo('#apply');\n document.getElementById('apply').onclick = function () {\n /** You can set your filter settings here. */\n pivotGridObj.dataSource.filterSettings = [\n { name: fields[0], items: getSelectedMembers(fields[0]), type: updateFilterType(fields[0]) },\n { name: fields[1], items: getSelectedMembers(fields[1]), type: updateFilterType(fields[1]) },\n { name: fields[2], items: getSelectedMembers(fields[2]), type: updateFilterType(fields[2]) }\n ];\n };\n\n /** To get the filter type of the field in the object filterCollection. */\n function updateFilterType(fieldName) {\n if (fieldsddl.itemData === fieldName) {\n return typeddl.itemData;\n } else if (filterCollections[fieldName]) {\n return filterCollections[fieldName].type;\n } else {\n return 'Exclude';\n }\n }\n\n /** To get the checked members/status here as string array. */\n function getSelectedMembers(field) {\n var membersColl = [];\n var members = fieldCollections[field];\n var memLength = members.length - 1;\n while (memLength > -1) {\n if (members[memLength].Checked === members[memLength].Member + '_' + true) {\n membersColl.push(members[memLength].Member.toString());\n }\n memLength--;\n }\n return membersColl;\n }\n /** To set the checked status of the members maintained in the object fieldCollections. */\n function setMemberCheckedState(field, member, checkedState) {\n var members = fieldCollections[field];\n var memLength = members.length - 1;\n while (memLength > -1) {\n if (members[memLength].Member === member) {\n members[memLength].Checked = checkedState;\n break;\n }\n memLength--;\n }\n }\n\n /** To set disabled/enabled state in the Apply button. */\n function setApplyBtnState() {\n var fieldArray = ['Country', 'Products', 'Year'];\n var loopCount = fieldArray.length;\n var isSelected = false;\n while (loopCount) {\n if (getSelectedMembers(fieldArray[loopCount - 1]).length > 0) {\n isSelected = true;\n break;\n }\n loopCount--;\n }\n applyBtn.disabled = !isSelected;\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Members:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Filter Type:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Filtering Sample.\n */\n\n var fieldCollections = {};\n var filterCollections= {};\n var isInitial = true;\n var type = ['Include', 'Exclude'];\n var values = [];\n var fields = ['Country', 'Products', 'Year'];\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n if (isInitial) {\n /** To fill the members for each fields into the object fieldCollections. */\n var fieldCnt = fields.length - 1;\n while (fieldCnt > -1) {\n var members = Object.keys(pivotGridObj.engineModule.fieldList[fields[fieldCnt]].members);\n var memberCnt = members.length - 1;\n var memberColl = [];\n while (memberCnt > -1) {\n memberColl.push({ Member: members[memberCnt], Checked: members[memberCnt] + '_' + false });\n memberCnt--;\n }\n fieldCollections[fields[fieldCnt]] = memberColl;\n fieldCnt--;\n }\n values = fieldCollections[fields[0]];\n isInitial = false;\n }\n for (var i = 0, Cnt = pivotGridObj.dataSource.filterSettings; i < Cnt.length; i++) {\n filterCollections[Cnt[i].name] = Cnt[i];\n }\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var valuesddl = new ej.dropdowns.MultiSelect({\n dataSource: values,\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n enableSelectionOrder: false,\n fields: { text: 'Member' },\n select: function (args) {\n applyBtn.disabled = false;\n setMemberCheckedState(fieldsddl.itemData, args.item.textContent, args.item.textContent + '_' + true);\n },\n removed: function (args) {\n setMemberCheckedState(fieldsddl.itemData, args.item.textContent, args.item.textContent + '_' + false);\n setApplyBtnState();\n },\n open: function (args) {\n args.popup.element.querySelector(\".e-filter-parent\").style.display = 'none';\n }\n });\n valuesddl.appendTo('#values');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '98%',\n change: function (args) {\n valuesddl.dataSource = fieldCollections[args.value.toString()];\n valuesddl.value = getSelectedMembers(args.value.toString());\n if (filterCollections[args.value.toString()]) {\n typeddl.value = filterCollections[args.value.toString()].type;\n }\n valuesddl.dataBind();\n typeddl.dataBind();\n }\n });\n fieldsddl.appendTo('#fields');\n var typeddl = new ej.dropdowns.DropDownList({\n dataSource: type,\n width: '98%',\n index: 1\n });\n typeddl.appendTo('#type');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true, disabled: true\n });\n applyBtn.appendTo('#apply');\n document.getElementById('apply').onclick = function () {\n /** You can set your filter settings here. */\n pivotGridObj.dataSource.filterSettings = [\n { name: fields[0], items: getSelectedMembers(fields[0]), type: updateFilterType(fields[0]) },\n { name: fields[1], items: getSelectedMembers(fields[1]), type: updateFilterType(fields[1]) },\n { name: fields[2], items: getSelectedMembers(fields[2]), type: updateFilterType(fields[2]) }\n ];\n };\n\n /** To get the filter type of the field in the object filterCollection. */\n function updateFilterType(fieldName) {\n if (fieldsddl.itemData === fieldName) {\n return typeddl.itemData;\n } else if (filterCollections[fieldName]) {\n return filterCollections[fieldName].type;\n } else {\n return 'Exclude';\n }\n }\n\n /** To get the checked members/status here as string array. */\n function getSelectedMembers(field) {\n var membersColl = [];\n var members = fieldCollections[field];\n var memLength = members.length - 1;\n while (memLength > -1) {\n if (members[memLength].Checked === members[memLength].Member + '_' + true) {\n membersColl.push(members[memLength].Member.toString());\n }\n memLength--;\n }\n return membersColl;\n }\n /** To set the checked status of the members maintained in the object fieldCollections. */\n function setMemberCheckedState(field, member, checkedState) {\n var members = fieldCollections[field];\n var memLength = members.length - 1;\n while (memLength > -1) {\n if (members[memLength].Member === member) {\n members[memLength].Checked = checkedState;\n break;\n }\n memLength--;\n }\n }\n\n /** To set disabled/enabled state in the Apply button. */\n function setApplyBtnState() {\n var fieldArray = ['Country', 'Products', 'Year'];\n var loopCount = fieldArray.length;\n var isSelected = false;\n while (loopCount) {\n if (getSelectedMembers(fieldArray[loopCount - 1]).length > 0) {\n isSelected = true;\n break;\n }\n loopCount--;\n }\n applyBtn.disabled = !isSelected;\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/filtering.html b/src/pivot-view/filtering.html index d0dd7d34..fb370618 100644 --- a/src/pivot-view/filtering.html +++ b/src/pivot-view/filtering.html @@ -52,7 +52,7 @@
                                - +

                                This sample demonstrates filtering of field headers either by including or excluding them.

                                @@ -100,4 +100,5 @@ .pivotgrid-property-section { overflow: auto; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/grid-configuration-stack.json b/src/pivot-view/grid-configuration-stack.json index 6c3e908c..5aa50bd9 100644 --- a/src/pivot-view/grid-configuration-stack.json +++ b/src/pivot-view/grid-configuration-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView sample with Grid Configurations.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }],\n valueSortSettings: { headerDelimiter: ' - ' },\n values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],\n data: window.defaultData,\n expandAll: false,\n filters: []\n },\n width: '100%',\n height: 300,\n showFieldList: true,\n gridSettings: {\n allowReordering: true,\n allowResizing: true,\n columnWidth: 140\n }\n });\n pivotGridObj.appendTo('#PivotView');\n var reorder = new ej.buttons.CheckBox({ label: 'Allow Reordering', checked: true, change: onChange });\n reorder.appendTo('#reorder');\n var resize = new ej.buttons.CheckBox({ label: 'Allow Resizing', checked: true, change: onChange });\n resize.appendTo('#resize');\n var autowrap = new ej.buttons.CheckBox({ label: 'Allow Text Wrap', checked: false, change: onChange });\n autowrap.appendTo('#autowrap');\n var lines = [\n { id: 'Default', type: 'Default' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' },\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' }\n ];\n var gridlines = new ej.dropdowns.DropDownList({\n placeholder: 'GridLines',\n floatLabelType: 'Auto',\n dataSource: lines,\n fields: { text: 'type', value: 'id' },\n value: 'Both',\n change: function (e) {\n pivotGridObj.gridSettings.gridLines = e.value;\n },\n });\n gridlines.appendTo('#gridlines');\n function onChange(args) {\n if (args.event.target.id === 'reorder') {\n pivotGridObj.gridSettings.allowReordering = args.checked;\n }\n else if (args.event.target.id === 'resize') {\n pivotGridObj.gridSettings.allowResizing = args.checked;\n }\n else {\n pivotGridObj.gridSettings.allowTextWrap = args.checked;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView sample with Grid Configurations.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Quarter' }],\n valueSortSettings: { headerDelimiter: ' - ' },\n values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],\n data: window.defaultData,\n expandAll: false,\n filters: []\n },\n width: '100%',\n height: 300,\n showFieldList: true,\n gridSettings: {\n allowReordering: true,\n allowResizing: true,\n columnWidth: 140\n }\n });\n pivotGridObj.appendTo('#PivotView');\n var reorder = new ej.buttons.CheckBox({ label: 'Allow Reordering', checked: true, change: onChange });\n reorder.appendTo('#reorder');\n var resize = new ej.buttons.CheckBox({ label: 'Allow Resizing', checked: true, change: onChange });\n resize.appendTo('#resize');\n var autowrap = new ej.buttons.CheckBox({ label: 'Allow Text Wrap', checked: false, change: onChange });\n autowrap.appendTo('#autowrap');\n var lines = [\n { id: 'Default', type: 'Default' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' },\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' }\n ];\n var gridlines = new ej.dropdowns.DropDownList({\n placeholder: 'GridLines',\n floatLabelType: 'Auto',\n dataSource: lines,\n fields: { text: 'type', value: 'id' },\n value: 'Both',\n change: function (e) {\n pivotGridObj.gridSettings.gridLines = e.value;\n },\n });\n gridlines.appendTo('#gridlines');\n function onChange(args) {\n if (args.event.target.id === 'reorder') {\n pivotGridObj.gridSettings.allowReordering = args.checked;\n }\n else if (args.event.target.id === 'resize') {\n pivotGridObj.gridSettings.allowResizing = args.checked;\n }\n else {\n pivotGridObj.gridSettings.allowTextWrap = args.checked;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/grid-configuration.html b/src/pivot-view/grid-configuration.html index 4343618e..0353507f 100644 --- a/src/pivot-view/grid-configuration.html +++ b/src/pivot-view/grid-configuration.html @@ -39,7 +39,7 @@
                                - +

                                This sample demonstrates the visibility of gridlines and text wrap along with user interactions like reordering and resizing columns. You can change the visibility and user interaction settings through the options available in the properties @@ -91,4 +91,5 @@ To enable column resize behavior, set the allowResizing property as true.

                                -
                                \ No newline at end of file +
                                + \ No newline at end of file diff --git a/src/pivot-view/grouping-bar-stack.json b/src/pivot-view/grouping-bar-stack.json index 7b490f1e..1b615d3d 100644 --- a/src/pivot-view/grouping-bar-stack.json +++ b/src/pivot-view/grouping-bar-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Grouping bar Sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: false,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]\n },\n width: '100%',\n height: 300,\n showGroupingBar: true,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n var filter = new ej.buttons.CheckBox({\n label: 'Show Filter Icon',\n checked: true,\n change: onChange\n });\n filter.appendTo('#filter');\n var sort = new ej.buttons.CheckBox({\n label: 'Show Sort Icon',\n checked: true,\n change: onChange\n });\n sort.appendTo('#sort');\n var remove = new ej.buttons.CheckBox({\n label: 'Show Remove Icon',\n checked: true,\n change: onChange\n });\n remove.appendTo('#remove');\n var summary = new ej.buttons.CheckBox({\n label: 'Show Value Type Icon',\n checked: true,\n change: onChange\n });\n summary.appendTo('#summary');\n \n function onChange(args) {\n if (args.event.target.id === 'filter') {\n pivotGridObj.groupingBarSettings.showFilterIcon = args.checked;\n }\n else if (args.event.target.id === 'sort') {\n pivotGridObj.groupingBarSettings.showSortIcon = args.checked;\n }\n else if (args.event.target.id === 'remove') {\n pivotGridObj.groupingBarSettings.showRemoveIcon = args.checked;\n } else {\n pivotGridObj.groupingBarSettings.showValueTypeIcon = args.checked;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Grouping bar Sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: false,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]\n },\n width: '100%',\n height: 300,\n showGroupingBar: true,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n var filter = new ej.buttons.CheckBox({\n label: 'Show Filter Icon',\n checked: true,\n change: onChange\n });\n filter.appendTo('#filter');\n var sort = new ej.buttons.CheckBox({\n label: 'Show Sort Icon',\n checked: true,\n change: onChange\n });\n sort.appendTo('#sort');\n var remove = new ej.buttons.CheckBox({\n label: 'Show Remove Icon',\n checked: true,\n change: onChange\n });\n remove.appendTo('#remove');\n var summary = new ej.buttons.CheckBox({\n label: 'Show Value Type Icon',\n checked: true,\n change: onChange\n });\n summary.appendTo('#summary');\n \n function onChange(args) {\n if (args.event.target.id === 'filter') {\n pivotGridObj.groupingBarSettings.showFilterIcon = args.checked;\n }\n else if (args.event.target.id === 'sort') {\n pivotGridObj.groupingBarSettings.showSortIcon = args.checked;\n }\n else if (args.event.target.id === 'remove') {\n pivotGridObj.groupingBarSettings.showRemoveIcon = args.checked;\n } else {\n pivotGridObj.groupingBarSettings.showValueTypeIcon = args.checked;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/grouping-bar.html b/src/pivot-view/grouping-bar.html index 05fa7d5a..98b14c3a 100644 --- a/src/pivot-view/grouping-bar.html +++ b/src/pivot-view/grouping-bar.html @@ -39,7 +39,7 @@
                                - +

                                This sample demonstrates the grouping bar feature of the pivotgrid widget. In the sample, fields are automatically populated from the bound data source, and it can be used to create a pivot view at runtime.

                                @@ -62,3 +62,4 @@ } } + \ No newline at end of file diff --git a/src/pivot-view/grouping-stack.json b/src/pivot-view/grouping-stack.json new file mode 100644 index 00000000..e0229693 --- /dev/null +++ b/src/pivot-view/grouping-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Group Date by:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Group Product ID by:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Grouping bar Sample\n */\n\n ej.base.enableRipple(false);\n var selectedGroups = ['Years', 'Months', 'Days'];\n var groupData = ['Years', 'Quarters', 'Months', 'Days'];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: ej.base.extend([], window.Group_Data, null, true),\n expandAll: false,\n enableSorting: true,\n formatSettings: [ { name: 'Amount', format: 'C0' }, { name: 'Sold', format: 'N0' },\n { name: 'Date', type: 'date', format: 'dd/MM/yyyy-hh:mm a' }\n ],\n rows: [\n { name: 'Date', caption: 'Date' }\n ],\n columns: [\n { name: 'Product_ID', caption: 'Product ID' },\n { name: 'Products', caption: 'Products' }\n ],\n values: [\n { name: 'Sold', caption: 'Unit Sold' },\n { name: 'Amount', caption: 'Sold Amount' }\n ],\n filters: [],\n groupSettings: [{ name: 'Date', type: 'Date', groupInterval: ['Years', 'Months', 'Days']},\n { name: 'Product_ID', type: 'Number', rangeInterval: 4 }]\n },\n width: '100%',\n height: 300,\n showGroupingBar: true,\n gridSettings: { \n columnWidth: 140,\n columnRender: function (args) {\n if (args.dataSource.rows.length > 3 && args.columns[0].width <=250){\n args.columns[0].width = 285;\n }\n }\n }\n });\n pivotGridObj.appendTo('#PivotView');\n\n var dateGroup = new ej.dropdowns.MultiSelect({\n dataSource: groupData,\n mode: 'CheckBox',\n showDropDownIcon: true,\n enableSelectionOrder: false,\n popupWidth: 'auto',\n value: ['Years', 'Months', 'Days'],\n placeholder: 'Select group',\n filterBarPlaceholder: 'Search group',\n select: function (args) {\n applyGroupSettings(args);\n },\n removed: function (args) {\n applyGroupSettings(args);\n }\n });\n dateGroup.appendTo('#dategroup');\n \n var numberGroup = new ej.inputs.NumericTextBox({\n width: '100%',\n format: '###',\n min: 1,\n max: 10,\n value: 4,\n placeholder: \"Example: 4\"\n });\n numberGroup.appendTo('#numbergroup');\n\n var applyBtn = new ej.buttons.Button({\n isPrimary: true\n });\n applyBtn.appendTo('#group-apply');\n\n function applyGroupSettings(args) {\n if (args.name === 'select') {\n if (selectedGroups.indexOf(args.itemData) === -1) {\n selectedGroups.push(args.itemData);\n }\n } else {\n if (selectedGroups.indexOf(args.itemData) > -1) {\n var index = selectedGroups.indexOf(args.itemData);\n selectedGroups.splice(index, 1);\n }\n }\n }\n \n document.getElementById('group-apply').onclick = function () {\n var groupSettings = [];\n if (selectedGroups.length > 0) {\n groupSettings.push({ name: 'Date', type: 'Date', groupInterval: selectedGroups});\n }\n if (numberGroup.value > 1) {\n groupSettings.push({ name: 'Product_ID', type: 'Number', rangeInterval: numberGroup.value });\n }\n pivotGridObj.dataSource.groupSettings = groupSettings;\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/grouping.html b/src/pivot-view/grouping.html new file mode 100644 index 00000000..9e469947 --- /dev/null +++ b/src/pivot-view/grouping.html @@ -0,0 +1,94 @@ +
                                +
                                +
                                +
                                +
                                +
                                + +
                                + + + + + + + + + + + + + + + +
                                +
                                Group Date by: +
                                +                                 		+
                                + +
                                +
                                +
                                Group Product ID by: +
                                +                                 		+
                                + +
                                +
                                +
                                + +
                                +
                                +
                                + +
                                +

                                This sample demonstrates grouping of dates and number types in the row and column headers of Pivot Grid.

                                +
                                +
                                +

                                In this sample, the date type can be separated and showcased individually as year, quarter, month, or day by + selecting the appropriate option from the Group date by drop-down list. Also, numbers can be grouped by + entering the appropriate value in the Group Product ID by giving a range number in the the numeric text + box. +

                                +

                                + Grouping can be applied through code-behind using the groupSettings object in the pivot grid widget + along with the following properties: +

                                + + + + + + + + + + + + + + + + + +
                                + name : + Specifies the normal field.
                                + type : + Specifies the field type for applying the group settings. For example, date formatted fields should be + in Date type and number formatted fields should be in Number type.
                                + groupInterval : + Specifies the interval for date fields in years, quarters, months, etc.
                                + rangeInterval : + Specifies the interval value to group the number field.
                                +
                                + + + \ No newline at end of file diff --git a/src/pivot-view/grouping.js b/src/pivot-view/grouping.js new file mode 100644 index 00000000..de9d092d --- /dev/null +++ b/src/pivot-view/grouping.js @@ -0,0 +1,101 @@ +/** + * PivotView Grouping bar Sample + */ +this.default = function () { + ej.base.enableRipple(false); + var selectedGroups = ['Years', 'Months', 'Days']; + var groupData = ['Years', 'Quarters', 'Months', 'Days']; + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + data: ej.base.extend([], window.Group_Data, null, true), + expandAll: false, + enableSorting: true, + formatSettings: [ { name: 'Amount', format: 'C0' }, { name: 'Sold', format: 'N0' }, + { name: 'Date', type: 'date', format: 'dd/MM/yyyy-hh:mm a' } + ], + rows: [ + { name: 'Date', caption: 'Date' } + ], + columns: [ + { name: 'Product_ID', caption: 'Product ID' }, + { name: 'Products', caption: 'Products' } + ], + values: [ + { name: 'Sold', caption: 'Unit Sold' }, + { name: 'Amount', caption: 'Sold Amount' } + ], + filters: [], + groupSettings: [{ name: 'Date', type: 'Date', groupInterval: ['Years', 'Months', 'Days']}, + { name: 'Product_ID', type: 'Number', rangeInterval: 4 }] + }, + width: '100%', + height: 300, + showGroupingBar: true, + gridSettings: { + columnWidth: 140, + columnRender: function (args) { + if (args.dataSource.rows.length > 3 && args.columns[0].width <=250){ + args.columns[0].width = 285; + } + } + } + }); + pivotGridObj.appendTo('#PivotView'); + + var dateGroup = new ej.dropdowns.MultiSelect({ + dataSource: groupData, + mode: 'CheckBox', + showDropDownIcon: true, + enableSelectionOrder: false, + popupWidth: 'auto', + value: ['Years', 'Months', 'Days'], + placeholder: 'Select group', + filterBarPlaceholder: 'Search group', + select: function (args) { + applyGroupSettings(args); + }, + removed: function (args) { + applyGroupSettings(args); + } + }); + dateGroup.appendTo('#dategroup'); + + var numberGroup = new ej.inputs.NumericTextBox({ + width: '100%', + format: '###', + min: 1, + max: 10, + value: 4, + placeholder: "Example: 4" + }); + numberGroup.appendTo('#numbergroup'); + + var applyBtn = new ej.buttons.Button({ + isPrimary: true + }); + applyBtn.appendTo('#group-apply'); + + function applyGroupSettings(args) { + if (args.name === 'select') { + if (selectedGroups.indexOf(args.itemData) === -1) { + selectedGroups.push(args.itemData); + } + } else { + if (selectedGroups.indexOf(args.itemData) > -1) { + var index = selectedGroups.indexOf(args.itemData); + selectedGroups.splice(index, 1); + } + } + } + + document.getElementById('group-apply').onclick = function () { + var groupSettings = []; + if (selectedGroups.length > 0) { + groupSettings.push({ name: 'Date', type: 'Date', groupInterval: selectedGroups}); + } + if (numberGroup.value > 1) { + groupSettings.push({ name: 'Product_ID', type: 'Number', rangeInterval: numberGroup.value }); + } + pivotGridObj.dataSource.groupSettings = groupSettings; + }; +}; diff --git a/src/pivot-view/hyper-link-stack.json b/src/pivot-view/hyper-link-stack.json index f4f0b5d3..7aaaa92e 100644 --- a/src/pivot-view/hyper-link-stack.json +++ b/src/pivot-view/hyper-link-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Show Hyperlink:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition based settings:\n
                                \n
                                \n
                                Measures:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Header based settings:\n
                                \n
                                \n
                                Header Text:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                Event Trace:\n                                 \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Hyperlink Sample.\n */\n\n ej.base.enableRipple(false);\n var operators = ['Equals', 'NotEquals', 'GreaterThan', 'GreaterThanOrEqualTo',\n 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var measures = [\n { value: 'In Stock', text: 'In Stock' },\n { value: 'Units Sold', text: 'Units Sold' },\n { value: 'Sold Amount', text: 'Sold Amount' }\n ];\n var options = [\n { value: 'allcells', text: 'All cells' },\n { value: 'rowheader', text: 'Row headers' },\n { value: 'columnheader', text: 'Column headers' },\n { value: 'valuecells', text: 'Value cells' },\n { value: 'summarycells', text: 'Summary cells' },\n { value: 'conditional', text: 'Condition based option' },\n { value: 'headertext', text: 'Header based option' }\n ];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: true\n },\n hyperlinkSettings: {\n showValueCellHyperlink: true,\n cssClass: 'e-custom-class'\n },\n hyperlinkCellClick: function (args) {\n var cell = '';\n if (args.currentCell.className.indexOf('e-stot') > -1 || args.currentCell.className.indexOf('e-gtot') > -1 || args.currentCell.className.indexOf('e-summary') > -1) {\n cell += 'Summary ';\n }\n if (args.currentCell.querySelector('.e-headercelldiv') && !(args.data).indexObject) {\n cell += 'Value Header ';\n } else if (args.currentCell.className.indexOf('e-rowsheader') > -1) {\n cell += 'Row Header ';\n }\n else if (args.currentCell.className.indexOf('e-columnsheader') > -1) {\n cell += 'Column Header ';\n }\n else if (args.currentCell.className.indexOf('e-valuescontent') > -1) {\n cell += 'Value ';\n }\n if (args.currentCell.querySelector('a') && \n (args.currentCell.querySelector('a').innerText === 'France' || args.currentCell.querySelector('a').innerText === 'Germany')) {\n var country = args.currentCell.querySelector('a').innerText;\n args.currentCell.querySelector('a').setAttribute('data-url',(country === 'France' ?\n 'https://en.wikipedia.org/wiki/France' : 'https://en.wikipedia.org/wiki/Germany'));\n args.cancel = false;\n } else {\n appendElement('' + cell + '' +' cell click event called
                                ');\n }\n },\n showTooltip: false,\n gridSettings: { columnWidth: 140 },\n width: '100%',\n height: 600\n });\n pivotGridObj.appendTo('#PivotView');\n\n var optionsdll = new ej.dropdowns.DropDownList({\n dataSource: options,\n fields: { value: 'value', text: 'text' },\n value: 'valuecells',\n width: '100%',\n change: function (args) {\n document.querySelector('.text1cls').style.display = 'none';\n document.querySelector('.text2cls').style.display = 'none';\n document.querySelector('.measurecls').style.display = 'none';\n document.querySelector('.conditioncls').style.display = 'none';\n document.querySelector('.input1cls').style.display = 'none';\n document.querySelector('.input2cls').style.display = 'none';\n document.querySelector('.textinputcls').style.display = 'none';\n document.querySelector('.updatecls').style.display = 'none';\n if (args.value == 'allcells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: true,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n } else if (args.value == 'rowheader') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: true,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n } else if (args.value == 'columnheader') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: true,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'valuecells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: true,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'summarycells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: true,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'conditional') {\n document.querySelector('.text1cls').style.display = '';\n document.querySelector('.measurecls').style.display = '';\n document.querySelector('.conditioncls').style.display = '';\n document.querySelector('.input1cls').style.display = '';\n if (operatorddl.value === 'Between' || operatorddl.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n document.querySelector('.updatecls').style.display = '';\n } else if (args.value == 'headertext') {\n document.querySelector('.text2cls').style.display = '';\n document.querySelector('.textinputcls').style.display = '';\n document.querySelector('.updatecls').style.display = '';\n }\n }\n });\n optionsdll.appendTo('#hyperlinks');\n var measuresddl = new ej.dropdowns.DropDownList({\n dataSource: measures,\n fields: { value: 'value', text: 'text' },\n value: 'In Stock',\n width: '100%'\n });\n measuresddl.appendTo('#hyperlinks-measures');\n var operatorddl = new ej.dropdowns.DropDownList({\n value: 'NotEquals',\n dataSource: operators,\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n }\n });\n operatorddl.appendTo('#hyperlinks-conditions');\n var valueInput1 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 400\"\n });\n valueInput1.appendTo('#hyperlinks-value1');\n var valueInput2 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 4000\"\n });\n valueInput2.appendTo('#hyperlinks-value2');\n var textInput = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"FY 2015.In Stock\"',\n width: '100%'\n });\n textInput.appendTo('#hyperlinks-text');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true\n });\n applyBtn.appendTo('#hyperlinks-apply');\n document.getElementById('hyperlinks-apply').onclick = function () {\n if (optionsdll.value === 'conditional') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: [\n {\n measure: measuresddl.value,\n conditions: operatorddl.value,\n value1: valueInput1.value,\n value2: valueInput2.value\n }\n ]\n };\n } else if (optionsdll.value === 'headertext') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: textInput.value,\n conditionalSettings: []\n };\n }\n };\n\n var clearBtn = new ej.buttons.Button();\n clearBtn.appendTo('#hyperlinks-clear');\n\n document.getElementById('hyperlinks-clear').onclick = function() {\n document.getElementById('hyperlinks-EventLog').innerHTML = '';\n };\n\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('hyperlinks-EventLog');\n log.insertBefore(span, log.firstChild);\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Show Hyperlink:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition based settings:\n
                                \n
                                \n
                                Measures:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Header based settings:\n
                                \n
                                \n
                                Header Text:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                Event Trace:\n                                 \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Hyperlink Sample.\n */\n\n ej.base.enableRipple(false);\n var operators = ['Equals', 'NotEquals', 'GreaterThan', 'GreaterThanOrEqualTo',\n 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var measures = [\n { value: 'In Stock', text: 'In Stock' },\n { value: 'Units Sold', text: 'Units Sold' },\n { value: 'Sold Amount', text: 'Sold Amount' }\n ];\n var options = [\n { value: 'allcells', text: 'All cells' },\n { value: 'rowheader', text: 'Row headers' },\n { value: 'columnheader', text: 'Column headers' },\n { value: 'valuecells', text: 'Value cells' },\n { value: 'summarycells', text: 'Summary cells' },\n { value: 'conditional', text: 'Condition based option' },\n { value: 'headertext', text: 'Header based option' }\n ];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: true\n },\n hyperlinkSettings: {\n showValueCellHyperlink: true,\n cssClass: 'e-custom-class'\n },\n hyperlinkCellClick: function (args) {\n var cell = '';\n if (args.currentCell.className.indexOf('e-stot') > -1 || args.currentCell.className.indexOf('e-gtot') > -1 || args.currentCell.className.indexOf('e-summary') > -1) {\n cell += 'Summary ';\n }\n if (args.currentCell.querySelector('.e-headercelldiv') && !(args.data).indexObject) {\n cell += 'Value Header ';\n } else if (args.currentCell.className.indexOf('e-rowsheader') > -1) {\n cell += 'Row Header ';\n }\n else if (args.currentCell.className.indexOf('e-columnsheader') > -1) {\n cell += 'Column Header ';\n }\n else if (args.currentCell.className.indexOf('e-valuescontent') > -1) {\n cell += 'Value ';\n }\n if (args.currentCell.querySelector('a') && \n (args.currentCell.querySelector('a').innerText === 'France' || args.currentCell.querySelector('a').innerText === 'Germany')) {\n var country = args.currentCell.querySelector('a').innerText;\n args.currentCell.querySelector('a').setAttribute('data-url',(country === 'France' ?\n 'https://en.wikipedia.org/wiki/France' : 'https://en.wikipedia.org/wiki/Germany'));\n args.cancel = false;\n } else {\n appendElement('' + cell + '' +' cell click event called
                                ');\n }\n },\n showTooltip: false,\n gridSettings: { columnWidth: 140 },\n width: '100%',\n height: 600\n });\n pivotGridObj.appendTo('#PivotView');\n\n var optionsdll = new ej.dropdowns.DropDownList({\n dataSource: options,\n fields: { value: 'value', text: 'text' },\n value: 'valuecells',\n width: '100%',\n change: function (args) {\n document.querySelector('.text1cls').style.display = 'none';\n document.querySelector('.text2cls').style.display = 'none';\n document.querySelector('.measurecls').style.display = 'none';\n document.querySelector('.conditioncls').style.display = 'none';\n document.querySelector('.input1cls').style.display = 'none';\n document.querySelector('.input2cls').style.display = 'none';\n document.querySelector('.textinputcls').style.display = 'none';\n document.querySelector('.updatecls').style.display = 'none';\n if (args.value == 'allcells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: true,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n } else if (args.value == 'rowheader') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: true,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n } else if (args.value == 'columnheader') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: true,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'valuecells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: true,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'summarycells') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: true,\n headerText: undefined,\n conditionalSettings: []\n };\n }else if (args.value == 'conditional') {\n document.querySelector('.text1cls').style.display = '';\n document.querySelector('.measurecls').style.display = '';\n document.querySelector('.conditioncls').style.display = '';\n document.querySelector('.input1cls').style.display = '';\n if (operatorddl.value === 'Between' || operatorddl.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n document.querySelector('.updatecls').style.display = '';\n } else if (args.value == 'headertext') {\n document.querySelector('.text2cls').style.display = '';\n document.querySelector('.textinputcls').style.display = '';\n document.querySelector('.updatecls').style.display = '';\n }\n }\n });\n optionsdll.appendTo('#hyperlinks');\n var measuresddl = new ej.dropdowns.DropDownList({\n dataSource: measures,\n fields: { value: 'value', text: 'text' },\n value: 'In Stock',\n width: '100%'\n });\n measuresddl.appendTo('#hyperlinks-measures');\n var operatorddl = new ej.dropdowns.DropDownList({\n value: 'NotEquals',\n dataSource: operators,\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n }\n });\n operatorddl.appendTo('#hyperlinks-conditions');\n var valueInput1 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 400\"\n });\n valueInput1.appendTo('#hyperlinks-value1');\n var valueInput2 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 4000\"\n });\n valueInput2.appendTo('#hyperlinks-value2');\n var textInput = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"FY 2015.In Stock\"',\n width: '100%'\n });\n textInput.appendTo('#hyperlinks-text');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true\n });\n applyBtn.appendTo('#hyperlinks-apply');\n document.getElementById('hyperlinks-apply').onclick = function () {\n if (optionsdll.value === 'conditional') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: undefined,\n conditionalSettings: [\n {\n measure: measuresddl.value,\n conditions: operatorddl.value,\n value1: valueInput1.value,\n value2: valueInput2.value\n }\n ]\n };\n } else if (optionsdll.value === 'headertext') {\n pivotGridObj.hyperlinkSettings = {\n showHyperlink: false,\n showRowHeaderHyperlink: false,\n showColumnHeaderHyperlink: false,\n showValueCellHyperlink: false,\n showSummaryCellHyperlink: false,\n headerText: textInput.value,\n conditionalSettings: []\n };\n }\n };\n\n var clearBtn = new ej.buttons.Button();\n clearBtn.appendTo('#hyperlinks-clear');\n\n document.getElementById('hyperlinks-clear').onclick = function() {\n document.getElementById('hyperlinks-EventLog').innerHTML = '';\n };\n\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('hyperlinks-EventLog');\n log.insertBefore(span, log.firstChild);\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/hyper-link.html b/src/pivot-view/hyper-link.html index 2bb6f9f8..d0e41ab8 100644 --- a/src/pivot-view/hyper-link.html +++ b/src/pivot-view/hyper-link.html @@ -119,7 +119,7 @@
                                - +

                                This sample demonstrates showing the hyperlink options for pivot grid cells.

                                @@ -209,4 +209,5 @@ color: red; text-decoration: none; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/label-filtering-stack.json b/src/pivot-view/label-filtering-stack.json index ec37b1ac..277c685d 100644 --- a/src/pivot-view/label-filtering-stack.json +++ b/src/pivot-view/label-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Filtering Sample.\n */\n\n ej.base.enableRipple(false);\n var fieldCollections = {};\n var operators = ['Equals', 'DoesNotEquals', 'BeginWith', 'DoesNotBeginWith', 'EndsWith',\n 'DoesNotEndsWith', 'Contains', 'DoesNotContains', 'GreaterThan',\n 'GreaterThanOrEqualTo', 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var fields = ['Country', 'Products', 'Year'];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n allowLabelFilter: true,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n fieldCollections = {};\n for (var i = 0, len = pivotGridObj.dataSource.filterSettings; i < len.length; i++) {\n var field = len[i];\n fieldCollections[field.name] = field;\n }\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '100%',\n change: function (args) {\n if (fieldCollections[args.value]) {\n operatorddl.value = fieldCollections[args.value].condition;\n valueInput1.value = fieldCollections[args.value].value1;\n valueInput2.value = fieldCollections[args.value].value2;\n }\n else {\n setFilters(args.value, 'DoesNotEquals', '', '');\n operatorddl.value = 'DoesNotEquals';\n valueInput1.value = '';\n valueInput2.value = '';\n }\n updateButtonState();\n }\n });\n fieldsddl.appendTo('#label-fields');\n var operatorddl = new ej.dropdowns.DropDownList({\n dataSource: operators,\n value: 'DoesNotEquals',\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n setFilters(fieldsddl.value, args.value, valueInput1.value, valueInput2.value);\n updateButtonState();\n }\n });\n operatorddl.appendTo('#label-conditions');\n var valueInput1 = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"Germany\"',\n change: function (e) {\n setFilters(fieldsddl.value, operatorddl.value, e.value, valueInput2.value);\n updateButtonState();\n },\n width: '100%'\n });\n valueInput1.appendTo('#label-value1');\n var valueInput2 = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"States\"',\n change: function (e) {\n setFilters(fieldsddl.value, operatorddl.value, valueInput1.value, e.value);\n updateButtonState();\n },\n width: '100%'\n });\n valueInput2.appendTo('#label-value2');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true, disabled: true\n });\n applyBtn.appendTo('#label-apply');\n var clearBtn = new ej.buttons.Button({ });\n clearBtn.appendTo('#label-clear');\n function setFilters(fieldName, condition, operand1, operand2) {\n fieldCollections[fieldName] = {\n name: fieldName,\n type: 'Label',\n condition: condition,\n value1: operand1,\n value2: operand2\n };\n }\n function updateButtonState() {\n applyBtn.disabled = true;\n for (var i = 0, len = fields; i < len.length; i++) {\n var field = len[i];\n if (fieldCollections[field] && (fieldCollections[field].value1 !== '' || fieldCollections[field].value2 !== '')) {\n applyBtn.disabled = false;\n break;\n }\n }\n }\n document.getElementById('label-apply').onclick = function () {\n var filterOptions = [];\n for (var i = 0, len = fields; i < len.length; i++) {\n var field = len[i];\n if (fieldCollections[field] && fieldCollections[field].value1 !== ''){ \n filterOptions.push(fieldCollections[field]);\n }\n }\n if (filterOptions.length === 0) {\n filterOptions = [{\n name: fieldsddl.value,\n type: 'Label',\n condition: operatorddl.value,\n value1: valueInput1.value.toString(),\n value2: valueInput2.value.toString()\n }];\n }\n pivotGridObj.dataSource.filterSettings = filterOptions;\n };\n document.getElementById('label-clear').onclick = function () {\n pivotGridObj.dataSource.filterSettings = [];\n valueInput1.value = '';\n valueInput2.value = '';\n fieldCollections = {};\n updateButtonState();\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Filtering Sample.\n */\n\n ej.base.enableRipple(false);\n var fieldCollections = {};\n var operators = ['Equals', 'DoesNotEquals', 'BeginWith', 'DoesNotBeginWith', 'EndsWith',\n 'DoesNotEndsWith', 'Contains', 'DoesNotContains', 'GreaterThan',\n 'GreaterThanOrEqualTo', 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var fields = ['Country', 'Products', 'Year'];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n allowLabelFilter: true,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n fieldCollections = {};\n for (var i = 0, len = pivotGridObj.dataSource.filterSettings; i < len.length; i++) {\n var field = len[i];\n fieldCollections[field.name] = field;\n }\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '100%',\n change: function (args) {\n if (fieldCollections[args.value]) {\n operatorddl.value = fieldCollections[args.value].condition;\n valueInput1.value = fieldCollections[args.value].value1;\n valueInput2.value = fieldCollections[args.value].value2;\n }\n else {\n setFilters(args.value, 'DoesNotEquals', '', '');\n operatorddl.value = 'DoesNotEquals';\n valueInput1.value = '';\n valueInput2.value = '';\n }\n updateButtonState();\n }\n });\n fieldsddl.appendTo('#label-fields');\n var operatorddl = new ej.dropdowns.DropDownList({\n dataSource: operators,\n value: 'DoesNotEquals',\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n setFilters(fieldsddl.value, args.value, valueInput1.value, valueInput2.value);\n updateButtonState();\n }\n });\n operatorddl.appendTo('#label-conditions');\n var valueInput1 = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"Germany\"',\n change: function (e) {\n setFilters(fieldsddl.value, operatorddl.value, e.value, valueInput2.value);\n updateButtonState();\n },\n width: '100%'\n });\n valueInput1.appendTo('#label-value1');\n var valueInput2 = new ej.inputs.MaskedTextBox({\n value: '',\n placeholder: 'Example: \"States\"',\n change: function (e) {\n setFilters(fieldsddl.value, operatorddl.value, valueInput1.value, e.value);\n updateButtonState();\n },\n width: '100%'\n });\n valueInput2.appendTo('#label-value2');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true, disabled: true\n });\n applyBtn.appendTo('#label-apply');\n var clearBtn = new ej.buttons.Button({ });\n clearBtn.appendTo('#label-clear');\n function setFilters(fieldName, condition, operand1, operand2) {\n fieldCollections[fieldName] = {\n name: fieldName,\n type: 'Label',\n condition: condition,\n value1: operand1,\n value2: operand2\n };\n }\n function updateButtonState() {\n applyBtn.disabled = true;\n for (var i = 0, len = fields; i < len.length; i++) {\n var field = len[i];\n if (fieldCollections[field] && (fieldCollections[field].value1 !== '' || fieldCollections[field].value2 !== '')) {\n applyBtn.disabled = false;\n break;\n }\n }\n }\n document.getElementById('label-apply').onclick = function () {\n var filterOptions = [];\n for (var i = 0, len = fields; i < len.length; i++) {\n var field = len[i];\n if (fieldCollections[field] && fieldCollections[field].value1 !== ''){ \n filterOptions.push(fieldCollections[field]);\n }\n }\n if (filterOptions.length === 0) {\n filterOptions = [{\n name: fieldsddl.value,\n type: 'Label',\n condition: operatorddl.value,\n value1: valueInput1.value.toString(),\n value2: valueInput2.value.toString()\n }];\n }\n pivotGridObj.dataSource.filterSettings = filterOptions;\n };\n document.getElementById('label-clear').onclick = function () {\n pivotGridObj.dataSource.filterSettings = [];\n valueInput1.value = '';\n valueInput2.value = '';\n fieldCollections = {};\n updateButtonState();\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/label-filtering.html b/src/pivot-view/label-filtering.html index 240d601f..b11dc974 100644 --- a/src/pivot-view/label-filtering.html +++ b/src/pivot-view/label-filtering.html @@ -65,7 +65,7 @@
                                - +

                                This sample demonstrates filtering of field headers based on the text.

                                @@ -128,4 +128,5 @@ .pivotgrid-property-section { overflow: auto; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/local-stack.json b/src/pivot-view/local-stack.json index 9c836677..9900cf64 100644 --- a/src/pivot-view/local-stack.json +++ b/src/pivot-view/local-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView sample for Local data source.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.renewableEnergy,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'ProCost', format: 'C0' }, { name: 'PowUnits', format: 'N0' }],\n drilledMembers: [{ name: 'EnerType', items: ['Biomass', 'Free Energy'] }],\n rows: [\n { name: 'Year', caption: 'Production Year' },\n { name: 'HalfYear', caption: 'Half Year' },\n { name: 'Quarter', caption: 'Quarter' }\n ],\n columns: [\n { name: 'EnerType', caption: 'Energy Type' },\n { name: 'EneSource', caption: 'Energy Source' }\n ],\n values: [\n { name: 'PowUnits', caption: 'Units (GWh)' },\n { name: 'ProCost', caption: 'Cost (MM)' }\n ],\n filters: []\n },\n height: 300,\n width: '100%',\n gridSettings: { columnWidth: 120 }\n });\n pivotGridObj.appendTo('#PivotView');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView sample for Local data source.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.renewableEnergy,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'ProCost', format: 'C0' }, { name: 'PowUnits', format: 'N0' }],\n drilledMembers: [{ name: 'EnerType', items: ['Biomass', 'Free Energy'] }],\n rows: [\n { name: 'Year', caption: 'Production Year' },\n { name: 'HalfYear', caption: 'Half Year' },\n { name: 'Quarter', caption: 'Quarter' }\n ],\n columns: [\n { name: 'EnerType', caption: 'Energy Type' },\n { name: 'EneSource', caption: 'Energy Source' }\n ],\n values: [\n { name: 'PowUnits', caption: 'Units (GWh)' },\n { name: 'ProCost', caption: 'Cost (MM)' }\n ],\n filters: []\n },\n height: 300,\n width: '100%',\n gridSettings: { columnWidth: 120 }\n });\n pivotGridObj.appendTo('#PivotView');\n"} \ No newline at end of file diff --git a/src/pivot-view/local.html b/src/pivot-view/local.html index c095e948..7b840e3e 100644 --- a/src/pivot-view/local.html +++ b/src/pivot-view/local.html @@ -4,7 +4,7 @@
                                - +

                                This sample demonstrates the basic rendering of the pivotgrid widget with local data.

                                @@ -13,4 +13,5 @@ dataSource->data property can be assigned with the JSON data to populate the widget.

                                In this demo, the JSON data is assigned from an external file.

                                - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/locale.json b/src/pivot-view/locale.json index 81d7d5ea..249e2e2b 100644 --- a/src/pivot-view/locale.json +++ b/src/pivot-view/locale.json @@ -100,7 +100,52 @@ "baseItem": "Basisartikel:", "example": "z.B :", "details": "Einzelheiten", - "manageRecords": "Datensätze verwalten" + "manageRecords": "Datensätze verwalten", + "Years": " Jahre", + "Quarters": "Viertel", + "Months": "Monate", + "Days": "Tage", + "Hours": "Std", + "Minutes": "Protokoll", + "Seconds": "Sekunden", + "save": "Einen Bericht speichern", + "new": "Erstellen Sie einen neuen Bericht", + "load": "Belastung", + "saveAs": "Speichern Sie als aktuellen Bericht", + "rename": "Benennen Sie einen aktuellen Bericht um", + "export": "Export", + "subTotals": "Zwischensummen", + "grandTotals": "Gesamtsummen", + "reportName": "Berichtsname:", + "pdf": "PDF", + "excel": "Excel", + "csv": "CSV", + "showSubTotals": "Zwischensummen anzeigen", + "doNotShowSubTotals": "Keine Zwischensummen anzeigen", + "showSubTotalsRowsOnly": "Nur Zwischensummenzeilen anzeigen", + "showSubTotalsColumnsOnly": "Nur Untersummenspalten anzeigen", + "showGrandTotals": "Gesamtsummen anzeigen", + "doNotShowGrandTotals": "Keine Summen anzeigen", + "showGrandTotalsRowsOnly": "Nur Summenzeilen anzeigen", + "showGrandTotalsColumnsOnly": "Nur Summenspalten anzeigen", + "fieldList": "Feldliste anzeigen", + "grid": "Tabelle anzeigen", + "toolbarFormatting": "Bedingte Formatierung", + "chart": "Diagramm", + "reportMsg": "Bitte geben Sie einen gültigen Berichtsnamen ein!!!", + "reportList": "Berichtsliste", + "removeConfirm": "Möchten Sie diesen Bericht wirklich löschen?", + "emptyReport": "Keine Berichte gefunden!!", + "bar": "Bar", + "line": "Linie", + "area": "Bereich", + "scatter": "Streuen", + "polar": "Polar", + "of": "von", + "emptyFormat": "Kein Format gefunden!!!", + "emptyInput": "Geben Sie einen Wert ein", + "newReportConfirm": "Möchten Sie Änderungen im Bericht speichern?", + "emptyReportName": "Geben Sie einen Berichtsnamen ein" }, "pivotfieldlist": { "staticFieldList": "Drehpunktfeld Liste", @@ -293,7 +338,52 @@ "baseItem": "العنصر الأساسي:", "example": "على سبيل المثال:", "details": "تفاصيل", - "manageRecords": "إدارة السجلات" + "manageRecords": "إدارة السجلات", + "Years": "سنوات", + "Quarters": "أرباع", + "Months": "الشهور", + "Days": "أيام", + "Hours": "ساعات", + "Minutes": "الدقائق", + "Seconds": "ثواني", + "save": "حفظ التقرير", + "new": "قم بإنشاء تقرير جديد", + "load": "حمل", + "saveAs": "حفظ كتقرير حالي", + "rename": "إعادة تسمية التقرير الحالي", + "export": "تصدير", + "subTotals": "المجاميع الفرعية", + "grandTotals": "المجاميع الكبرى", + "reportName": "تقرير اسم :", + "pdf": "PDF", + "excel": "Excel", + "csv": "CSV", + "showSubTotals": "إظهار المجاميع الفرعية", + "doNotShowSubTotals": "لا تظهر المجاميع الفرعية", + "showSubTotalsRowsOnly": "إظهار صفوف المجاميع الفرعية فقط", + "showSubTotalsColumnsOnly": "إظهار أعمدة المجاميع الفرعية فقط", + "showGrandTotals": "إظهار المجاميع الكبرى", + "doNotShowGrandTotals": "لا تظهر المجاميع الكبرى", + "showGrandTotalsRowsOnly": "إظهار صفوف الإجماليات الكلية فقط", + "showGrandTotalsColumnsOnly": "إظهار أعمدة الإجماليات الكلية فقط", + "fieldList": "إظهار قائمة الحقول", + "grid": "إظهار الجدول", + "toolbarFormatting": "تنسيق مشروط", + "chart": "خريطة", + "reportMsg": "الرجاء إدخال اسم التقرير الصحيح!!!", + "reportList": "قائمة التقرير", + "removeConfirm": "هل أنت متأكد من حذف هذا التقرير؟", + "emptyReport": "لم يتم العثور على تقارير !!", + "bar": "شريط", + "line": "خط", + "area": "منطقة", + "scatter": "تبعثر", + "polar": "قطبي", + "of": "من", + "emptyFormat": "لا يوجد شكل!", + "emptyInput": "أدخل قيمة", + "newReportConfirm": "هل تريد حفظ التغييرات للإبلاغ؟", + "emptyReportName": "أدخل اسم التقرير" }, "pivotfieldlist": { "staticFieldList": "قم بتدوير الحقول", @@ -486,7 +576,52 @@ "baseItem": "Base item :", "example": "e.g:", "details": "Details", - "manageRecords": "Manage Records" + "manageRecords": "Manage Records", + "Years": "Years", + "Quarters": "Quarters", + "Months": "Months", + "Days": "Days", + "Hours": "Hours", + "Minutes": "Minutes", + "Seconds": "Seconds", + "save": "Save a report", + "new": "Create a new report", + "load": "Load", + "saveAs": "Save as current report", + "rename": "Rename a current report", + "export": "Export", + "subTotals": "Sub totals", + "grandTotals": "Grand totals", + "reportName": "Report Name :", + "pdf": "PDF", + "excel": "Excel", + "csv": "CSV", + "showSubTotals": "Show sub totals", + "doNotShowSubTotals": "Do not show sub totals", + "showSubTotalsRowsOnly": "Show sub totals rows only", + "showSubTotalsColumnsOnly": "Show sub totals columns only", + "showGrandTotals": "Show grand totals", + "doNotShowGrandTotals": "Do not show grand totals", + "showGrandTotalsRowsOnly": "Show grand totals rows only", + "showGrandTotalsColumnsOnly": "Show grand totals columns only", + "fieldList": "Show fieldlist", + "grid": "Show table", + "toolbarFormatting": "Conditional formatting", + "chart": "Chart", + "reportMsg": "Please enter vaild report name!!!", + "reportList": "Report list", + "removeConfirm": "Are you sure want to delete this report?", + "emptyReport": "No reports found!!", + "bar": "Bar", + "line": "Line", + "area": "Area", + "scatter": "Scatter", + "polar": "Polar", + "of": "of", + "emptyFormat": "No format found!!!", + "emptyInput": "Enter a value", + "newReportConfirm": "Want to save changes to report?", + "emptyReportName": "Enter a report name" }, "pivotfieldlist": { "staticFieldList": "Pivot Field List", @@ -679,7 +814,52 @@ "baseItem": "基本項目：", "example": "例如：", "details": "細節", - "manageRecords": "管理记录" + "manageRecords": "管理记录", + "Years": "年份", + "Quarters": "住处", + "Months": "月", + "Days": "天", + "Hours": "小时", + "Minutes": "分钟", + "Seconds": "秒", + "save": "保存报告", + "new": "创建一个新报告", + "load": "加载", + "saveAs": "保存为当前报告", + "rename": "重命名当前报告", + "export": "出口", + "subTotals": "小计", + "grandTotals": "总计", + "reportName": "报告名称：", + "pdf": "PDF", + "excel": "Excel", + "csv": "CSV", + "showSubTotals": "显示小计", + "doNotShowSubTotals": "不要显示小计", + "showSubTotalsRowsOnly": "仅显示子总计行", + "showSubTotalsColumnsOnly": "仅显示子总计列", + "showGrandTotals": "显示总计", + "doNotShowGrandTotals": "不要显示总计", + "showGrandTotalsRowsOnly": "仅显示总计行数", + "showGrandTotalsColumnsOnly": "仅显示总计列", + "fieldList": "显示字段列表", + "grid": "显示表格", + "toolbarFormatting": "条件格式", + "chart": "图表", + "reportMsg": "请输入有效的报告名称!!!", + "reportList": "报告清单", + "removeConfirm": "您确定要删除此报告吗？", + "emptyReport": "没有找到报告!!", + "bar": "酒吧", + "line": "线", + "area": "区域", + "scatter": "分散", + "polar": "极性", + "of": "的", + "emptyFormat": "找不到格式!!!", + "emptyInput": "输入一个值", + "newReportConfirm": "想要保存更改报告？", + "emptyReportName": "输入报告名称" }, "pivotfieldlist": { "staticFieldList": "樞軸欄位清單", @@ -872,7 +1052,52 @@ "baseItem": "Élément de base:", "example": "par exemple :", "details": "Détails", - "manageRecords": "gérer les enregistrements" + "manageRecords": "gérer les enregistrements", + "Years": "Années", + "Quarters": "Quartiers", + "Months": "Mois", + "Days": "Jours", + "Hours": "Heures", + "Minutes": "Minutes", + "Seconds": "Secondes", + "save": "Sauvegarder un rapport", + "new": "Créer un nouveau rapport", + "load": "Charger", + "saveAs": "Enregistrer comme état actuel", + "rename": "Renommer un rapport en cours", + "export": "Exporter", + "subTotals": "Sous totaux", + "grandTotals": "Grands totaux", + "reportName": "Nom du rapport :", + "pdf": "PDF", + "excel": "Excel", + "csv": "CSV", + "showSubTotals": "Afficher les totaux partiels", + "doNotShowSubTotals": "Ne pas afficher les sous-totaux", + "showSubTotalsRowsOnly": "Afficher uniquement les lignes de sous-totaux", + "showSubTotalsColumnsOnly": "Afficher uniquement les colonnes de totaux partiels", + "showGrandTotals": "Afficher les totaux généraux", + "doNotShowGrandTotals": "ne pas montrer les grands totaux", + "showGrandTotalsRowsOnly": "Afficher uniquement les lignes de totaux généraux", + "showGrandTotalsColumnsOnly": "Afficher uniquement la colonne des totaux généraux", + "fieldList": "Afficher la liste des champs", + "grid": "Afficher la table", + "toolbarFormatting": "Mise en forme conditionnelle", + "chart": "Graphique", + "reportMsg": "S'il vous plaît entrer le nom du rapport vaild !!!", + "reportList": "Liste de rapport", + "removeConfirm": "Voulez-vous vraiment supprimer ce rapport?", + "emptyReport": "Aucun rapport trouvé !!", + "bar": "Bar", + "line": "Ligne", + "area": "Surface", + "scatter": "Dispersion", + "polar": "Polaire", + "of": "de", + "emptyFormat": "Aucun format trouvé !!!", + "emptyInput": "Entrez une valeur", + "newReportConfirm": "Voulez-vous enregistrer les modifications à signaler?", + "emptyReportName": "Entrez un nom de rapport" }, "pivotfieldlist": { "staticFieldList": "Liste des champs de pivot", diff --git a/src/pivot-view/remote-stack.json b/src/pivot-view/remote-stack.json index 24cfaa03..9d465551 100644 --- a/src/pivot-view/remote-stack.json +++ b/src/pivot-view/remote-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView sample for Remote data source.\n */\n\n var remoteData;\n ej.base.enableRipple(false);\n new ej.data.DataManager({\n url: 'https://bi.syncfusion.com/northwindservice/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }).executeQuery(new ej.data.Query().take(8)).then(function (e) {\n remoteData = e.result;\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: remoteData,\n expandAll: true,\n filters: [],\n columns: [{ name: 'ProductName', caption: 'Product Name' }],\n rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],\n formatSettings: [{ name: 'UnitPrice', format: 'C0' }],\n values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]\n },\n height: 300,\n width: '100%',\n gridSettings: { columnWidth: 120 }\n });\n pivotGridObj.appendTo('#PivotView');\n });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView sample for Remote data source.\n */\n\n ej.base.enableRipple(false);\n var remoteData = new ej.data.DataManager({\n url: 'https://bi.syncfusion.com/northwindservice/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: remoteData,\n expandAll: true,\n filters: [],\n columns: [{ name: 'ProductName', caption: 'Product Name' }],\n rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],\n formatSettings: [{ name: 'UnitPrice', format: 'C0' }],\n values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]\n },\n height: 300,\n width: '100%',\n gridSettings: { columnWidth: 120 }\n });\n pivotGridObj.appendTo('#PivotView');\n"} \ No newline at end of file diff --git a/src/pivot-view/remote.html b/src/pivot-view/remote.html index 6548110a..76b1907f 100644 --- a/src/pivot-view/remote.html +++ b/src/pivot-view/remote.html @@ -4,7 +4,7 @@ - +

                                This sample demonstrates the basic rendering of the pivotgrid widget with remote data.

                                @@ -24,4 +24,5 @@ In this demo, remote data is bound by assigning service data as an instance of DataManager to the dataSource->data property. - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/remote.js b/src/pivot-view/remote.js index 4ef0ac92..7d0aac1d 100644 --- a/src/pivot-view/remote.js +++ b/src/pivot-view/remote.js @@ -2,28 +2,25 @@ * PivotView sample for Remote data source. */ this.default = function () { - var remoteData; ej.base.enableRipple(false); - new ej.data.DataManager({ + var remoteData = new ej.data.DataManager({ url: 'https://bi.syncfusion.com/northwindservice/api/orders', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true - }).executeQuery(new ej.data.Query().take(8)).then(function (e) { - remoteData = e.result; - var pivotGridObj = new ej.pivotview.PivotView({ - dataSource: { - data: remoteData, - expandAll: true, - filters: [], - columns: [{ name: 'ProductName', caption: 'Product Name' }], - rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }], - formatSettings: [{ name: 'UnitPrice', format: 'C0' }], - values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }] - }, - height: 300, - width: '100%', - gridSettings: { columnWidth: 120 } - }); - pivotGridObj.appendTo('#PivotView'); }); + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + data: remoteData, + expandAll: true, + filters: [], + columns: [{ name: 'ProductName', caption: 'Product Name' }], + rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }], + formatSettings: [{ name: 'UnitPrice', format: 'C0' }], + values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }] + }, + height: 300, + width: '100%', + gridSettings: { columnWidth: 120 } + }); + pivotGridObj.appendTo('#PivotView'); }; \ No newline at end of file diff --git a/src/pivot-view/right-to-left-stack.json b/src/pivot-view/right-to-left-stack.json index 96febbe3..8407901d 100644 --- a/src/pivot-view/right-to-left-stack.json +++ b/src/pivot-view/right-to-left-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView RTL Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n },\n width: '100%',\n height: 300,\n allowCalculatedField: true,\n showGroupingBar: true,\n showFieldList: true,\n enableRtl: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView RTL Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n },\n width: '100%',\n height: 300,\n allowCalculatedField: true,\n showGroupingBar: true,\n showFieldList: true,\n enableRtl: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file diff --git a/src/pivot-view/right-to-left.html b/src/pivot-view/right-to-left.html index c6090f8d..1691e4a1 100644 --- a/src/pivot-view/right-to-left.html +++ b/src/pivot-view/right-to-left.html @@ -4,7 +4,7 @@
                                - +

                                This sample demonstrates the right-to-left view of the PivotGrid, Grouping Bar and @@ -34,4 +34,5 @@ overflow: auto; } } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/sample.json b/src/pivot-view/sample.json index 68c5e421..9a0d0877 100644 --- a/src/pivot-view/sample.json +++ b/src/pivot-view/sample.json @@ -27,14 +27,13 @@ "url": "field-list", "name": "Field List", "category": "User Interaction", - "type": "update", - "description": "This demo for Essential JS2 Pivot Table control demonstrate the field list feature of the pivotgrid widget, field list allows the user to rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options" + "description": "This demo for Essential JS2 Pivot Table control demonstrate the field list feature of the pivotgrid widget" }, { "url": "grouping-bar", "name": "Grouping Bar", "category": "User Interaction", - "description": "This demo for Essential JS2 Pivot Table control demonstrate the grouping bar feature of the pivotgrid widget, grouping bar allows the user to rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options" + "description": "This demo for Essential JS2 Pivot Table control demonstrate the grouping bar feature of the pivotgrid widget" }, { "url": "conditional-formatting", @@ -42,24 +41,43 @@ "category": "User Interaction", "description": "This demo for Essential JS2 Pivot Table control demonstrate formatting the appearance of the pivot grid cells with values based on the applied conditions" }, + { + "url": "selection", + "name": "Selection", + "category": "User Interaction", + "type": "new", + "description": "This demo for Essential JS2 Pivot Table control demonstrate the cell selection feature of the pivotgrid widget" + }, { "url": "summary-customization", "name": "Show/Hide Totals", "category": "User Interaction", - "type": "new", "description": "This demo for Essential JS2 Pivot Table control demonstrate the summary customization feature of the pivotgrid widget" }, + { + "url": "grouping", + "name": "Grouping", + "category": "User Interaction", + "type": "new", + "description": "This demo for Essential JS2 Pivot Table control demonstrate the grouping feature for date and number fields" + }, + { + "url": "toolbar", + "name": "Toolbar", + "category": "User Interaction", + "type": "new", + "description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar support of the pivotgrid widget" + }, { "url": "calculated-field", "name": "Calculated Field", "category": "Formula", - "description": "This demo for Essential JS2 Pivot Table control shows calculated field, and it allows users to add calculated items either through a dialog window at run time or through code behind" + "description": "This demo for Essential JS2 Pivot Table control shows calculated field, and it allows users to add calculated items" }, { "url": "aggregation", "name": "Aggregation", "category": "Formula", - "type": "update", "description": "This demo for Essential JS2 Pivot Table control shows different types of aggregation for value fields" }, { @@ -72,7 +90,7 @@ "url": "value-sorting", "name": "Value Sorting", "category": "Sorting", - "description": "This demo for Essential JS2 Pivot Table control shows sorting values on column or row wise" + "description": "This demo for Essential JS2 Pivot Table control shows sorting values on column or row wise in ascending or descending order" }, { "url": "filtering", @@ -96,40 +114,51 @@ "url": "charts", "name": "Chart", "category": "Integration", + "type": "update", "description": "This demo for Essential JS2 Pivot Table control demonstrate integration of pivot table data into a simple chart widget" }, + { + "url": "external-binding", + "name": "External Binding", + "category": "Integration", + "type": "new", + "description": "This demo for Essential JS2 Pivot Table control demonstrate the rendering of chart widget with cell selection option." + }, { "url": "virtual-scrolling", "name": "Virtual Scrolling", "category": "Scrolling", "description": "This demo for Essential JS2 Pivot Table control shows virtual scrolling option available vertically and horizontally to load large records with ease" }, + { + "url": "cell-template", + "name": "Cell Template", + "category": "Customization", + "type": "new", + "description": "This demo for Essential JS2 Pivot Table control demonstrate cell template option on cells of the pivotgrid widget" + }, { "url": "drill-through", "name": "Drill Through", "category": "Miscellaneous", - "type": "new", "description": "This demo for Essential JS2 Pivot Table control shows the raw items of any value cells in pivot grid" }, { "url": "editing", "name": "Editing", "category": "Miscellaneous", - "type": "new", "description": "This demo for Essential JS2 Pivot Table control allows to edit, add and delete the value cells in pivot grid" }, { "url": "hyper-link", "name": "Hyperlink", "category": "Miscellaneous", - "type": "new", "description": "This demo for Essential JS2 Pivot Table control shows hyperlink option on cells of the pivotgrid widget" }, { "url": "defer-update", "name": "Defer Layout Update", "category": "Miscellaneous", - "type": "new", "description": "This demo for Essential JS2 Pivot Table control demonstrate defer layout update feature of the pivotgrid widget" }, { diff --git a/src/pivot-view/selection-stack.json b/src/pivot-view/selection-stack.json new file mode 100644 index 00000000..093022a4 --- /dev/null +++ b/src/pivot-view/selection-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n

                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Selection Modes:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Selection Types:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n
                                Event Trace:\n                                 \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Sample with Selection feature with Chart integration.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: window.Pivot_Data,\n expandAll: true,\n values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],\n filters: [],\n enableSorting: true,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n valueSortSettings: { headerDelimiter: ' - ' }\n },\n width: '100%',\n height: 300,\n cellSelected: function (args) {\n document.getElementById('selection-EventLog').innerHTML = '';\n if (args.selectedCellsInfo.length > 0) {\n var count = 0;\n while (args.selectedCellsInfo.length > count) {\n var cell = args.selectedCellsInfo[count];\n var summMeasure = this.engineModule.fieldList[cell.measure] ? this.engineModule.fieldList[cell.measure].aggregateType + ' of ' +\n this.engineModule.fieldList[cell.measure].caption : '';\n appendElement(\n (cell.columnHeaders == '' ? '' : 'Column Headers: ' + '' + cell.columnHeaders + '
                                ') +\n (cell.rowHeaders == '' ? '' : 'Row Headers: ' + '' + cell.rowHeaders + '
                                ') +\n (summMeasure == '' ? '' : 'Measure: ' + '' + summMeasure + '
                                ') +\n 'Value: ' + '' + cell.currentCell.formattedText + '

                                ');\n count++;\n }\n }\n },\n gridSettings: {\n columnWidth: 120,\n allowSelection: true,\n selectionSettings: { mode: 'Cell', type: 'Multiple', cellSelectionMode: 'Box' }\n }\n });\n pivotGridObj.appendTo('#PivotView');\n var modeddl = new ej.dropdowns.DropDownList({\n floatLabelType: 'Auto',\n width: 150,\n change: function (args) {\n pivotGridObj.gridSettings.selectionSettings.mode = args.value;\n pivotGridObj.renderModule.updateGridSettings();\n }\n });\n modeddl.appendTo('#mode');\n var typeddl = new ej.dropdowns.DropDownList({\n floatLabelType: 'Auto',\n width: 150,\n change: function (args) {\n pivotGridObj.gridSettings.selectionSettings.type = args.value;\n pivotGridObj.renderModule.updateGridSettings();\n }\n });\n typeddl.appendTo('#type');\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('selection-EventLog');\n log.appendChild(span);\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/selection.html b/src/pivot-view/selection.html new file mode 100644 index 00000000..c4abff6b --- /dev/null +++ b/src/pivot-view/selection.html @@ -0,0 +1,105 @@ +
                                +
                                +
                                +
                                +
                                +
                                + +
                                + + + + + + + + + + + + + + + + + +
                                +
                                Selection Modes: +
                                +                                 		+
                                + +
                                +
                                +
                                Selection Types: +
                                +                                 		+
                                + +
                                +
                                +
                                +
                                Event Trace: +                                 +
                                +
                                +
                                + +
                                +
                                +
                                + +
                                +

                                This sample demonstrates different types of grid cell selection options and an event to get complete information + about the same. +

                                +
                                +
                                +

                                + This feature provides interactive support to highlight rows, columns, values, and summary cells that you select. + Selection can be done through either mouse or keyboard interaction. + To enable selection, set allowSelectionproperty as true. +

                                +

                                PivotGrid supports two types of selection which can be set using + selectionSettings.type property. They are:

                                +
                                  +
                                • Single - Enabled by default. Allows the user to select single row or column or cell at a time. +
                                  • +
                                • Multiple - Allows the user to select more than one row or column or cell at the same time.
                                  • +
                                +

                                Also, there are three modes of selection which can be set using + selectionSettings.mode property. They are: +

                                +
                                  +
                                • Row - Enabled by default. Enables the complete row selection in a pivot grid.
                                  • +
                                • Column - Enables the complete column selection in a pivot grid.
                                  • +
                                • Cell - Enables the cell selection in pivot grid.
                                  • +
                                • Both - Enables both the row and column selection in pivot grid.
                                  • +
                                +

                                To perform the multiselection, hold CTRL key and click the desired cells. + To select range of cells, hold SHIFT key and click the cells.

                                +

                                While using the Pivot Grid in a touch device environment, tap over a row, column, or other cells. + This results in a pop-up with a multiselect icon. Now tap the icon to proceed with multiselection. +

                                +

                                In this demo, pick the selection type and selection mode from the properties panel in order to perform the + desired selection process. + The selected cell information can be seen in the Event Trace part with the help of the cellSelected + event. +

                                +
                                + + + \ No newline at end of file diff --git a/src/pivot-view/selection.js b/src/pivot-view/selection.js new file mode 100644 index 00000000..ae1c7887 --- /dev/null +++ b/src/pivot-view/selection.js @@ -0,0 +1,68 @@ +/** + * PivotView Sample with Selection feature with Chart integration. + */ +this.default = function () { + ej.base.enableRipple(false); + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + data: window.Pivot_Data, + expandAll: true, + values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }], + filters: [], + enableSorting: true, + columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }], + formatSettings: [{ name: 'Amount', format: 'C0' }], + rows: [{ name: 'Country' }, { name: 'Products' }], + valueSortSettings: { headerDelimiter: ' - ' } + }, + width: '100%', + height: 300, + cellSelected: function (args) { + document.getElementById('selection-EventLog').innerHTML = ''; + if (args.selectedCellsInfo.length > 0) { + var count = 0; + while (args.selectedCellsInfo.length > count) { + var cell = args.selectedCellsInfo[count]; + var summMeasure = this.engineModule.fieldList[cell.measure] ? this.engineModule.fieldList[cell.measure].aggregateType + ' of ' + + this.engineModule.fieldList[cell.measure].caption : ''; + appendElement( + (cell.columnHeaders == '' ? '' : 'Column Headers: ' + '' + cell.columnHeaders + '
                                ') + + (cell.rowHeaders == '' ? '' : 'Row Headers: ' + '' + cell.rowHeaders + '
                                ') + + (summMeasure == '' ? '' : 'Measure: ' + '' + summMeasure + '
                                ') + + 'Value: ' + '' + cell.currentCell.formattedText + '

                                '); + count++; + } + } + }, + gridSettings: { + columnWidth: 120, + allowSelection: true, + selectionSettings: { mode: 'Cell', type: 'Multiple', cellSelectionMode: 'Box' } + } + }); + pivotGridObj.appendTo('#PivotView'); + var modeddl = new ej.dropdowns.DropDownList({ + floatLabelType: 'Auto', + width: 150, + change: function (args) { + pivotGridObj.gridSettings.selectionSettings.mode = args.value; + pivotGridObj.renderModule.updateGridSettings(); + } + }); + modeddl.appendTo('#mode'); + var typeddl = new ej.dropdowns.DropDownList({ + floatLabelType: 'Auto', + width: 150, + change: function (args) { + pivotGridObj.gridSettings.selectionSettings.type = args.value; + pivotGridObj.renderModule.updateGridSettings(); + } + }); + typeddl.appendTo('#type'); + function appendElement(html) { + var span = document.createElement('span'); + span.innerHTML = html; + var log = document.getElementById('selection-EventLog'); + log.appendChild(span); + } +}; diff --git a/src/pivot-view/sorting-stack.json b/src/pivot-view/sorting-stack.json index 33b34cc1..af959a18 100644 --- a/src/pivot-view/sorting-stack.json +++ b/src/pivot-view/sorting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Order:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Member Sorting sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var order = ['Ascending', 'Descending'];\n var fields = [\n { Field: 'Country', Order: 'Country_asc' },\n { Field: 'Products', Order: 'Products_asc' },\n { Field: 'Year', Order: 'Year_asc' },\n { Field: 'Order Source', Order: 'Order Source_asc' }\n ];\n var checkBoxObj = new ej.buttons.CheckBox({\n label: 'Enable Sorting', labelPosition: 'After', checked: true,\n change: function (args) {\n if (args.checked) {\n fieldsddl.enabled = true;\n orderddl.enabled = true;\n applyBtn.disabled = false; \n }\n else {\n fieldsddl.enabled = false;\n orderddl.enabled = false;\n\t\t\t\tapplyBtn.disabled = true;\n }\n }\n });\n checkBoxObj.appendTo('#sorting');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n fields: { text: 'Field', value: 'Order' },\n index: 0,\n enabled: true,\n change: function (args) {\n if (fieldsddl.dataSource[fieldsddl.index].Order === fieldsddl.dataSource[fieldsddl.index].Field + '_asc') {\n orderddl.index = 0;\n }\n else {\n orderddl.index = 1;\n }\n }\n });\n fieldsddl.appendTo('#sorting-fields');\n var orderddl = new ej.dropdowns.DropDownList({\n dataSource: order,\n index: 0,\n enabled: true,\n change: function (args) {\n if (args.value === 'Ascending') {\n fieldsddl.dataSource[fieldsddl.index].Order = fieldsddl.dataSource[fieldsddl.index].Field + '_asc';\n }\n else {\n fieldsddl.dataSource[fieldsddl.index].Order = fieldsddl.dataSource[fieldsddl.index].Field + '_desc';\n }\n fieldsddl.refresh();\n }\n });\n orderddl.appendTo('#sorting-order');\n var applyBtn = new ej.buttons.Button({\n cssClass: 'e-flat', isPrimary: true,\n });\n applyBtn.appendTo('#sorting-apply');\n document.getElementById('sorting-apply').onclick = function () {\n if (checkBoxObj.checked) {\n pivotGridObj.dataSource.enableSorting = true;\n pivotGridObj.dataSource.sortSettings = [\n { name: 'Country', order: fieldsddl.dataSource[0].Order === 'Country_asc' ? 'Ascending' : 'Descending' },\n { name: 'Products', order: fieldsddl.dataSource[1].Order === 'Products_asc' ? 'Ascending' : 'Descending' },\n { name: 'Year', order: fieldsddl.dataSource[2].Order === 'Year_asc' ? 'Ascending' : 'Descending' },\n { name: 'Order_Source', order: fieldsddl.dataSource[3].Order === 'Order Source_asc' ? 'Ascending' : 'Descending' }\n ];\n }\n else {\n pivotGridObj.dataSource.enableSorting = false;\n pivotGridObj.dataSource.sortSettings = [];\n }\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Order:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Member Sorting sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true\n },\n width: '100%',\n height: 300,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n var order = ['Ascending', 'Descending'];\n var fields = [\n { Field: 'Country', Order: 'Country_asc' },\n { Field: 'Products', Order: 'Products_asc' },\n { Field: 'Year', Order: 'Year_asc' },\n { Field: 'Order Source', Order: 'Order Source_asc' }\n ];\n var checkBoxObj = new ej.buttons.CheckBox({\n label: 'Enable Sorting', labelPosition: 'After', checked: true,\n change: function (args) {\n if (args.checked) {\n fieldsddl.enabled = true;\n orderddl.enabled = true;\n applyBtn.disabled = false; \n }\n else {\n fieldsddl.enabled = false;\n orderddl.enabled = false;\n\t\t\t\tapplyBtn.disabled = true;\n }\n }\n });\n checkBoxObj.appendTo('#sorting');\n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n fields: { text: 'Field', value: 'Order' },\n index: 0,\n enabled: true,\n change: function (args) {\n if (fieldsddl.dataSource[fieldsddl.index].Order === fieldsddl.dataSource[fieldsddl.index].Field + '_asc') {\n orderddl.index = 0;\n }\n else {\n orderddl.index = 1;\n }\n }\n });\n fieldsddl.appendTo('#sorting-fields');\n var orderddl = new ej.dropdowns.DropDownList({\n dataSource: order,\n index: 0,\n enabled: true,\n change: function (args) {\n if (args.value === 'Ascending') {\n fieldsddl.dataSource[fieldsddl.index].Order = fieldsddl.dataSource[fieldsddl.index].Field + '_asc';\n }\n else {\n fieldsddl.dataSource[fieldsddl.index].Order = fieldsddl.dataSource[fieldsddl.index].Field + '_desc';\n }\n fieldsddl.refresh();\n }\n });\n orderddl.appendTo('#sorting-order');\n var applyBtn = new ej.buttons.Button({\n cssClass: 'e-flat', isPrimary: true,\n });\n applyBtn.appendTo('#sorting-apply');\n document.getElementById('sorting-apply').onclick = function () {\n if (checkBoxObj.checked) {\n pivotGridObj.dataSource.enableSorting = true;\n pivotGridObj.dataSource.sortSettings = [\n { name: 'Country', order: fieldsddl.dataSource[0].Order === 'Country_asc' ? 'Ascending' : 'Descending' },\n { name: 'Products', order: fieldsddl.dataSource[1].Order === 'Products_asc' ? 'Ascending' : 'Descending' },\n { name: 'Year', order: fieldsddl.dataSource[2].Order === 'Year_asc' ? 'Ascending' : 'Descending' },\n { name: 'Order_Source', order: fieldsddl.dataSource[3].Order === 'Order Source_asc' ? 'Ascending' : 'Descending' }\n ];\n }\n else {\n pivotGridObj.dataSource.enableSorting = false;\n pivotGridObj.dataSource.sortSettings = [];\n }\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/sorting.html b/src/pivot-view/sorting.html index 6f6b2a25..84bce46b 100644 --- a/src/pivot-view/sorting.html +++ b/src/pivot-view/sorting.html @@ -48,7 +48,7 @@
                                - +

                                This sample demonstrates ordering of fields either in ascending or descending order.

                                @@ -75,4 +75,5 @@ .e-bigger .hdrlabel { font-size: 14px; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/summary-customization-stack.json b/src/pivot-view/summary-customization-stack.json index f77e8c46..f4e31af8 100644 --- a/src/pivot-view/summary-customization-stack.json +++ b/src/pivot-view/summary-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n Hide grand totals\n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n Hide sub-totals\n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Grouping bar Sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n drilledMembers: [{ name: 'Country', items: ['France'] }],\n filterSettings: [{ name: 'Products', items: ['Gloves', 'Helmets', 'Shorts', 'Vests'], type: 'Include' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n enableSorting: true,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n expandAll: false,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n showGrandTotals: false\n },\n width: '100%',\n height: 400,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n var radioButton = new ej.buttons.RadioButton({ label: 'Row', name: 'total', value: 'Row', change: onChange });\n radioButton.appendTo('#summary-radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Column', name: 'total', value: 'Column', change: onChange });\n radioButton.appendTo('#summary-radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Both', name: 'total', value: 'Both', checked: true, change: onChange });\n radioButton.appendTo('#summary-radio3');\n var fields = [\n { Name: 'Country' },\n { Name: 'Year' }\n ];\n var valuesddl = new ej.dropdowns.MultiSelect({\n dataSource: fields,\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n enableSelectionOrder: false,\n fields: { text: 'Name' },\n placeholder: 'Select fields to hide its sub-totals',\n select: function (args) {\n for (var i = 0; i < pivotGridObj.dataSource.columns.length; i++) {\n if ((pivotGridObj.dataSource.columns[i].name || pivotGridObj.dataSource.columns[i].caption) === args.itemData.Name) {\n pivotGridObj.dataSource.columns[i].showSubTotals = false;\n }\n }\n for (var j = 0; j < pivotGridObj.dataSource.rows.length; j++) {\n if ((pivotGridObj.dataSource.rows[j].name || pivotGridObj.dataSource.rows[j].name) === args.itemData.Name) {\n pivotGridObj.dataSource.rows[j].showSubTotals = false;\n }\n }\n },\n removed: function (args) {\n for (var i = 0; i < pivotGridObj.dataSource.columns.length; i++) {\n if ((pivotGridObj.dataSource.columns[i].name || pivotGridObj.dataSource.columns[i].caption) === args.itemData.Name) {\n pivotGridObj.dataSource.columns[i].showSubTotals = true;\n }\n }\n for (var j = 0; j < pivotGridObj.dataSource.rows.length; j++) {\n if ((pivotGridObj.dataSource.rows[j].name || pivotGridObj.dataSource.rows[j].name) === args.itemData.Name) {\n pivotGridObj.dataSource.rows[j].showSubTotals = true;\n }\n }\n },\n open: function (args) {\n args.popup.element.querySelector(\".e-filter-parent\").style.display = 'none';\n }\n });\n valuesddl.appendTo('#summary-values');\n function onChange(args) {\n pivotGridObj.setProperties({ dataSource: { showGrandTotals: true } }, true);\n pivotGridObj.setProperties({ dataSource: { showRowGrandTotals: true } }, true);\n pivotGridObj.setProperties({ dataSource: { showColumnGrandTotals: true } }, true);\n if (args.value === 'Column') {\n pivotGridObj.dataSource.showColumnGrandTotals = false;\n }\n else if (args.value === 'Row') {\n pivotGridObj.dataSource.showRowGrandTotals = false;\n }\n else if (args.value === 'Both') {\n pivotGridObj.dataSource.showGrandTotals = false;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                \n Hide grand totals\n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n Hide sub-totals\n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Grouping bar Sample\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n drilledMembers: [{ name: 'Country', items: ['France'] }],\n filterSettings: [{ name: 'Products', items: ['Gloves', 'Helmets', 'Shorts', 'Vests'], type: 'Include' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n enableSorting: true,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n data: window.Pivot_Data,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n expandAll: false,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n showGrandTotals: false\n },\n width: '100%',\n height: 400,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n var radioButton = new ej.buttons.RadioButton({ label: 'Row', name: 'total', value: 'Row', change: onChange });\n radioButton.appendTo('#summary-radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Column', name: 'total', value: 'Column', change: onChange });\n radioButton.appendTo('#summary-radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Both', name: 'total', value: 'Both', checked: true, change: onChange });\n radioButton.appendTo('#summary-radio3');\n var fields = [\n { Name: 'Country' },\n { Name: 'Year' }\n ];\n var valuesddl = new ej.dropdowns.MultiSelect({\n dataSource: fields,\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n enableSelectionOrder: false,\n fields: { text: 'Name' },\n placeholder: 'Select fields to hide its sub-totals',\n select: function (args) {\n for (var i = 0; i < pivotGridObj.dataSource.columns.length; i++) {\n if ((pivotGridObj.dataSource.columns[i].name || pivotGridObj.dataSource.columns[i].caption) === args.itemData.Name) {\n pivotGridObj.dataSource.columns[i].showSubTotals = false;\n }\n }\n for (var j = 0; j < pivotGridObj.dataSource.rows.length; j++) {\n if ((pivotGridObj.dataSource.rows[j].name || pivotGridObj.dataSource.rows[j].name) === args.itemData.Name) {\n pivotGridObj.dataSource.rows[j].showSubTotals = false;\n }\n }\n },\n removed: function (args) {\n for (var i = 0; i < pivotGridObj.dataSource.columns.length; i++) {\n if ((pivotGridObj.dataSource.columns[i].name || pivotGridObj.dataSource.columns[i].caption) === args.itemData.Name) {\n pivotGridObj.dataSource.columns[i].showSubTotals = true;\n }\n }\n for (var j = 0; j < pivotGridObj.dataSource.rows.length; j++) {\n if ((pivotGridObj.dataSource.rows[j].name || pivotGridObj.dataSource.rows[j].name) === args.itemData.Name) {\n pivotGridObj.dataSource.rows[j].showSubTotals = true;\n }\n }\n },\n open: function (args) {\n args.popup.element.querySelector(\".e-filter-parent\").style.display = 'none';\n }\n });\n valuesddl.appendTo('#summary-values');\n function onChange(args) {\n pivotGridObj.setProperties({ dataSource: { showGrandTotals: true } }, true);\n pivotGridObj.setProperties({ dataSource: { showRowGrandTotals: true } }, true);\n pivotGridObj.setProperties({ dataSource: { showColumnGrandTotals: true } }, true);\n if (args.value === 'Column') {\n pivotGridObj.dataSource.showColumnGrandTotals = false;\n }\n else if (args.value === 'Row') {\n pivotGridObj.dataSource.showRowGrandTotals = false;\n }\n else if (args.value === 'Both') {\n pivotGridObj.dataSource.showGrandTotals = false;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/pivot-view/summary-customization.html b/src/pivot-view/summary-customization.html index 84637c35..0f545a89 100644 --- a/src/pivot-view/summary-customization.html +++ b/src/pivot-view/summary-customization.html @@ -53,7 +53,7 @@
                                - +

                                This sample demonstrates showing and hiding grand totals and subtotals in rows, columns, or both.

                                @@ -64,4 +64,5 @@

                                Also, in this sample, you can hide subtotals for specific fields too. It can be achieved by selecting appropriate fields from the drop-down available under the Hide sub-totals category. To hide subtotals for a specific field, set the showSubTotals property as false inside the field definition.

                                -
                                \ No newline at end of file +
                                + \ No newline at end of file diff --git a/src/pivot-view/toolbar-stack.json b/src/pivot-view/toolbar-stack.json new file mode 100644 index 00000000..9b339454 --- /dev/null +++ b/src/pivot-view/toolbar-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Toolbar Sample.\n */\n\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n expandAll: false,\n data: window.Pivot_Data,\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n enableSorting: true,\n allowLabelFilter: true,\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n allowValueFilter: true,\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n rows: [{ name: 'Country' }, { name: 'Products' }]\n },\n allowExcelExport: true,\n allowConditionalFormatting: true,\n allowPdfExport: true,\n showToolbar: true,\n displayOption:{view:'Both'},\n allowCalculatedField: true,\n showFieldList: true,\n width: '100%',\n toolbar: ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load',\n\t\t'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'FieldList'],\n saveReport: function (args) {\n var reports = [];\n var isSaved = false;\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n reports = JSON.parse(localStorage.pivotviewReports);\n }\n if (args.report && args.reportName && args.reportName !== '') {\n reports.map(function (item) {\n if (args.reportName === item.reportName) {\n item.report = args.report;\n isSaved = true;\n }\n });\n if (!isSaved) {\n reports.push(args);\n }\n localStorage.pivotviewReports = JSON.stringify(reports);\n }\n },\n fetchReport: function (args) {\n var reportCollection = [];\n var reeportList = [];\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n reportCollection = JSON.parse(localStorage.pivotviewReports);\n }\n reportCollection.map(function (item) {\n reeportList.push(item.reportName);\n });\n args.reportName = reeportList;\n },\n loadReport: function (args) {\n var reportCollection = [];\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n reportCollection = JSON.parse(localStorage.pivotviewReports);\n }\n reportCollection.map(function (item) {\n if (args.reportName === item.reportName) {\n args.report = item.report;\n }\n });\n if (args.report) {\n pivotGridObj.dataSource = JSON.parse(args.report).dataSource;\n }\n },\n removeReport: function (args) {\n var reportCollection = [];\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n reportCollection = JSON.parse(localStorage.pivotviewReports);\n }\n for (var i = 0; i < reportCollection.length; i++) {\n if (reportCollection[i].reportName === args.reportName) {\n reportCollection.splice(i, 1);\n }\n }\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n localStorage.pivotviewReports = JSON.stringify(reportCollection);\n }\n },\n renameReport: function (args) {\n var reportCollection = [];\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n reportCollection = JSON.parse(localStorage.pivotviewReports);\n }\n reportCollection.map(function (item) {\n if (args.reportName === item.reportName) {\n item.reportName = args.rename;\n }\n });\n if (localStorage.pivotviewReports && localStorage.pivotviewReports !== \"\") {\n localStorage.pivotviewReports = JSON.stringify(reportCollection);\n }\n },\n newReport: function () {\n pivotGridObj.setProperties({\n dataSource: {\n columns: [],\n rows: [],\n values: [],\n filters: []\n }\n }, false);\n },\n\t\ttoolbarRender: function (args) {\n\t\t\targs.customToolbar.splice(6, 0, {\n\t\t\t\ttype: 'Separator' \n\t\t\t});\n\t\t\targs.customToolbar.splice(9, 0, {\n\t\t\t\ttype: 'Separator' \n\t\t\t});\n\t\t},\n height: 300,\n gridSettings: {\n columnWidth: 140\n }\n });\n pivotGridObj.appendTo('#PivotView');\n"} \ No newline at end of file diff --git a/src/pivot-view/toolbar.html b/src/pivot-view/toolbar.html new file mode 100644 index 00000000..930e25d5 --- /dev/null +++ b/src/pivot-view/toolbar.html @@ -0,0 +1,29 @@ +
                                +
                                +
                                +
                                +
                                +
                                + +
                                +

                                This sample demonstrates the toolbar options of the pivotgrid widget.

                                +
                                +
                                +

                                + In this sample, users can generate a report at runtime, as well as save and load them. Save and load operations + are performed in localStorage (session storage) using the saveReport and loadReport events. Users can change the + grid or chart view using the toggle option. Other toolbar options available are: +

                                +

                                +

                                  +
                                • Create new report.
                                  • +
                                • Rename report.
                                  • +
                                • Remove report.
                                  • +
                                • Save as option.
                                  • +
                                • Hide subtotals and grand totals.
                                  • +
                                • Export to PDF, Excel, and CSV.
                                  • +
                                • PivotTable Field List
                                  • +
                                +

                                +
                                + \ No newline at end of file diff --git a/src/pivot-view/toolbar.js b/src/pivot-view/toolbar.js new file mode 100644 index 00000000..bccd991b --- /dev/null +++ b/src/pivot-view/toolbar.js @@ -0,0 +1,126 @@ +/** + * PivotView Toolbar Sample. + */ +this.default = function () { + ej.base.enableRipple(false); + var pivotGridObj = new ej.pivotview.PivotView({ + dataSource: { + expandAll: false, + data: window.Pivot_Data, + columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }], + filters: [{ name: 'Product_Categories', caption: 'Product Categories' }], + enableSorting: true, + allowLabelFilter: true, + values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' }, + { name: 'Amount', caption: 'Sold Amount' }], + allowValueFilter: true, + formatSettings: [{ name: 'Amount', format: 'C0' }], + rows: [{ name: 'Country' }, { name: 'Products' }] + }, + allowExcelExport: true, + allowConditionalFormatting: true, + allowPdfExport: true, + showToolbar: true, + displayOption:{view:'Both'}, + allowCalculatedField: true, + showFieldList: true, + width: '100%', + toolbar: ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', + 'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'FieldList'], + saveReport: function (args) { + var reports = []; + var isSaved = false; + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + reports = JSON.parse(localStorage.pivotviewReports); + } + if (args.report && args.reportName && args.reportName !== '') { + reports.map(function (item) { + if (args.reportName === item.reportName) { + item.report = args.report; + isSaved = true; + } + }); + if (!isSaved) { + reports.push(args); + } + localStorage.pivotviewReports = JSON.stringify(reports); + } + }, + fetchReport: function (args) { + var reportCollection = []; + var reeportList = []; + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + reportCollection = JSON.parse(localStorage.pivotviewReports); + } + reportCollection.map(function (item) { + reeportList.push(item.reportName); + }); + args.reportName = reeportList; + }, + loadReport: function (args) { + var reportCollection = []; + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + reportCollection = JSON.parse(localStorage.pivotviewReports); + } + reportCollection.map(function (item) { + if (args.reportName === item.reportName) { + args.report = item.report; + } + }); + if (args.report) { + pivotGridObj.dataSource = JSON.parse(args.report).dataSource; + } + }, + removeReport: function (args) { + var reportCollection = []; + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + reportCollection = JSON.parse(localStorage.pivotviewReports); + } + for (var i = 0; i < reportCollection.length; i++) { + if (reportCollection[i].reportName === args.reportName) { + reportCollection.splice(i, 1); + } + } + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + localStorage.pivotviewReports = JSON.stringify(reportCollection); + } + }, + renameReport: function (args) { + var reportCollection = []; + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + reportCollection = JSON.parse(localStorage.pivotviewReports); + } + reportCollection.map(function (item) { + if (args.reportName === item.reportName) { + item.reportName = args.rename; + } + }); + if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { + localStorage.pivotviewReports = JSON.stringify(reportCollection); + } + }, + newReport: function () { + pivotGridObj.setProperties({ + dataSource: { + columns: [], + rows: [], + values: [], + filters: [] + } + }, false); + }, + toolbarRender: function (args) { + args.customToolbar.splice(6, 0, { + type: 'Separator' + }); + args.customToolbar.splice(9, 0, { + type: 'Separator' + }); + }, + height: 300, + gridSettings: { + columnWidth: 140 + } + }); + pivotGridObj.appendTo('#PivotView'); +}; \ No newline at end of file diff --git a/src/pivot-view/value-filtering-stack.json b/src/pivot-view/value-filtering-stack.json index 0ee14457..6316244c 100644 --- a/src/pivot-view/value-filtering-stack.json +++ b/src/pivot-view/value-filtering-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Measures:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Value Filtering Sample.\n */\n\n ej.base.enableRipple(false);\n var fieldCollections = {};\n var operators = ['Equals', 'DoesNotEquals', 'GreaterThan', 'GreaterThanOrEqualTo',\n 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var fields = ['Country', 'Products', 'Year'];\n var measures = [\n { value: 'In_Stock', text: 'In Stock' },\n { value: 'Sold', text: 'Units Sold' },\n { value: 'Amount', text: 'Sold Amount' }\n ];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n allowValueFilter: true,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n columns: [{ name: 'Year' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n fieldCollections = {};\n for (var i = 0, Cnt = pivotGridObj.dataSource.filterSettings; i < Cnt.length; i++) {\n fieldCollections[Cnt[i].name] = Cnt[i];\n }\n },\n gridSettings: { columnWidth: 140 },\n width: '100%',\n height: 300\n });\n pivotGridObj.appendTo('#PivotView');\n \n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '100%',\n change: function (args) {\n if (fieldCollections[args.value]) {\n measuresddl.value = fieldCollections[args.value].measure;\n operatorddl.value = fieldCollections[args.value].condition;\n }\n else {\n setFilters(args.value, 'In_Stock', 'DoesNotEquals', '', '');\n operatorddl.value = 'DoesNotEquals';\n measuresddl.value = 'In_Stock';\n }\n }\n });\n fieldsddl.appendTo('#value-fields');\n var measuresddl = new ej.dropdowns.DropDownList({\n dataSource: measures,\n fields: { value: 'value', text: 'text' },\n value: 'In_Stock',\n width: '100%',\n change: function (args) {\n setFilters(fieldsddl.value, args.value, operatorddl.value, valueInput1.value, valueInput2.value);\n }\n });\n measuresddl.appendTo('#value-measures');\n var operatorddl = new ej.dropdowns.DropDownList({\n value: 'DoesNotEquals',\n dataSource: operators,\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n setFilters(fieldsddl.value, measuresddl.value, args.value, valueInput1.value, valueInput2.value);\n }\n });\n operatorddl.appendTo('#value-conditions');\n var valueInput1 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 9590\",\n change: function (e) {\n setFilters(fieldsddl.value, measuresddl.value, operatorddl.value, e.value, valueInput2.value);\n }\n });\n valueInput1.appendTo('#value-value1');\n var valueInput2 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 17500\",\n change: function (e) {\n setFilters(fieldsddl.value, measuresddl.value, operatorddl.value, valueInput1.value, e.value);\n }\n });\n valueInput2.appendTo('#value-value2');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true\n });\n applyBtn.appendTo('#value-apply');\n var clearBtn = new ej.buttons.Button({ });\n clearBtn.appendTo('#value-clear');\n function setFilters(fieldName, measureName, condition, operand1, operand2) {\n fieldCollections[fieldName] = {\n name: fieldName,\n type: 'Value',\n measure: measureName,\n condition: condition,\n value1: operand1,\n value2: operand2\n };\n }\n document.getElementById('value-apply').onclick = function () {\n var filterOptions = [];\n filterOptions = [{\n name: fieldsddl.value,\n type: 'Value',\n measure: measuresddl.value,\n condition: operatorddl.value,\n value1: valueInput1.value === null ? 1 : valueInput1.value,\n value2: valueInput2.value === null ? 1 : valueInput2.value\n }];\n pivotGridObj.dataSource.filterSettings = filterOptions;\n };\n document.getElementById('value-clear').onclick = function () {\n pivotGridObj.dataSource.filterSettings = [];\n valueInput1.value = '0';\n valueInput2.value = '0';\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Fields:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Measures:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Condition:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 1:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Value 2:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Value Filtering Sample.\n */\n\n ej.base.enableRipple(false);\n var fieldCollections = {};\n var operators = ['Equals', 'DoesNotEquals', 'GreaterThan', 'GreaterThanOrEqualTo',\n 'LessThan', 'LessThanOrEqualTo', 'Between', 'NotBetween'];\n var fields = ['Country', 'Products', 'Year'];\n var measures = [\n { value: 'In_Stock', text: 'In Stock' },\n { value: 'Sold', text: 'Units Sold' },\n { value: 'Amount', text: 'Sold Amount' }\n ];\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n allowValueFilter: true,\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],\n rows: [{ name: 'Country' }, { name: 'Products' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n columns: [{ name: 'Year' }],\n data: window.Pivot_Data,\n expandAll: false\n },\n dataBound: function (args) {\n fieldCollections = {};\n for (var i = 0, Cnt = pivotGridObj.dataSource.filterSettings; i < Cnt.length; i++) {\n fieldCollections[Cnt[i].name] = Cnt[i];\n }\n },\n gridSettings: { columnWidth: 140 },\n width: '100%',\n height: 300\n });\n pivotGridObj.appendTo('#PivotView');\n \n var fieldsddl = new ej.dropdowns.DropDownList({\n dataSource: fields,\n index: 0,\n width: '100%',\n change: function (args) {\n if (fieldCollections[args.value]) {\n measuresddl.value = fieldCollections[args.value].measure;\n operatorddl.value = fieldCollections[args.value].condition;\n }\n else {\n setFilters(args.value, 'In_Stock', 'DoesNotEquals', '', '');\n operatorddl.value = 'DoesNotEquals';\n measuresddl.value = 'In_Stock';\n }\n }\n });\n fieldsddl.appendTo('#value-fields');\n var measuresddl = new ej.dropdowns.DropDownList({\n dataSource: measures,\n fields: { value: 'value', text: 'text' },\n value: 'In_Stock',\n width: '100%',\n change: function (args) {\n setFilters(fieldsddl.value, args.value, operatorddl.value, valueInput1.value, valueInput2.value);\n }\n });\n measuresddl.appendTo('#value-measures');\n var operatorddl = new ej.dropdowns.DropDownList({\n value: 'DoesNotEquals',\n dataSource: operators,\n change: function (args) {\n if (args.value === 'Between' || args.value === 'NotBetween') {\n document.querySelector('.input2cls').style.display = '';\n }\n else {\n document.querySelector('.input2cls').style.display = 'none';\n }\n setFilters(fieldsddl.value, measuresddl.value, args.value, valueInput1.value, valueInput2.value);\n }\n });\n operatorddl.appendTo('#value-conditions');\n var valueInput1 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 9590\",\n change: function (e) {\n setFilters(fieldsddl.value, measuresddl.value, operatorddl.value, e.value, valueInput2.value);\n }\n });\n valueInput1.appendTo('#value-value1');\n var valueInput2 = new ej.inputs.NumericTextBox({\n width: '100%',\n value: '0',\n placeholder: \"Example: 17500\",\n change: function (e) {\n setFilters(fieldsddl.value, measuresddl.value, operatorddl.value, valueInput1.value, e.value);\n }\n });\n valueInput2.appendTo('#value-value2');\n var applyBtn = new ej.buttons.Button({\n isPrimary: true\n });\n applyBtn.appendTo('#value-apply');\n var clearBtn = new ej.buttons.Button({ });\n clearBtn.appendTo('#value-clear');\n function setFilters(fieldName, measureName, condition, operand1, operand2) {\n fieldCollections[fieldName] = {\n name: fieldName,\n type: 'Value',\n measure: measureName,\n condition: condition,\n value1: operand1,\n value2: operand2\n };\n }\n document.getElementById('value-apply').onclick = function () {\n var filterOptions = [];\n filterOptions = [{\n name: fieldsddl.value,\n type: 'Value',\n measure: measuresddl.value,\n condition: operatorddl.value,\n value1: valueInput1.value === null ? 1 : valueInput1.value,\n value2: valueInput2.value === null ? 1 : valueInput2.value\n }];\n pivotGridObj.dataSource.filterSettings = filterOptions;\n };\n document.getElementById('value-clear').onclick = function () {\n pivotGridObj.dataSource.filterSettings = [];\n valueInput1.value = '0';\n valueInput2.value = '0';\n };\n\n"} \ No newline at end of file diff --git a/src/pivot-view/value-filtering.html b/src/pivot-view/value-filtering.html index d131da10..4f40be34 100644 --- a/src/pivot-view/value-filtering.html +++ b/src/pivot-view/value-filtering.html @@ -76,7 +76,7 @@
                                - +

                                This sample demonstrates filtering of fields based on the grand total.

                                @@ -146,4 +146,5 @@ .pivotgrid-property-section { overflow: auto; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/value-sorting-stack.json b/src/pivot-view/value-sorting-stack.json index 3584a4d3..21372260 100644 --- a/src/pivot-view/value-sorting-stack.json +++ b/src/pivot-view/value-sorting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n valueSortSettings: {\n headerText: 'FY 2015##In Stock',\n headerDelimiter: '##',\n sortOrder: 'Descending'\n },\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n rows: [{ name: 'Country' }, { name: 'Products' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]\n },\n width: '100%',\n enableValueSorting: true,\n height: 300,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}\n ej.base.enableRipple(false);\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n valueSortSettings: {\n headerText: 'FY 2015##In Stock',\n headerDelimiter: '##',\n sortOrder: 'Descending'\n },\n values: [{ name: 'In_Stock', caption: 'In Stock' }, { name: 'Sold', caption: 'Units Sold' },\n { name: 'Amount', caption: 'Sold Amount' }],\n formatSettings: [{ name: 'Amount', format: 'C0' }],\n columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],\n data: window.Pivot_Data,\n expandAll: false,\n enableSorting: true,\n rows: [{ name: 'Country' }, { name: 'Products' }],\n filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]\n },\n width: '100%',\n enableValueSorting: true,\n height: 300,\n showFieldList: true,\n gridSettings: { columnWidth: 140 }\n });\n pivotGridObj.appendTo('#PivotView');\n\n"} \ No newline at end of file diff --git a/src/pivot-view/value-sorting.html b/src/pivot-view/value-sorting.html index 1d2f3217..cb8eb5a1 100644 --- a/src/pivot-view/value-sorting.html +++ b/src/pivot-view/value-sorting.html @@ -4,7 +4,7 @@
                                - +

                                This sample demonstrates ordering of values in ascending or descending order. Here, the FY 2015 -> In Stock column header text is ordered by defining sort-related settings in code behind.

                                @@ -20,4 +20,5 @@ value column needs to be sorted. The string which is used to separate the headers is given in the property headerDelimiters. The sorting direction is performed by the sortOrder property.

                                -
                                \ No newline at end of file + + \ No newline at end of file diff --git a/src/pivot-view/virtual-scrolling-stack.json b/src/pivot-view/virtual-scrolling-stack.json index 68d42bb2..6be55610 100644 --- a/src/pivot-view/virtual-scrolling-stack.json +++ b/src/pivot-view/virtual-scrolling-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n \n \n \n \n Time Taken: 0 sec\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * PivotView Virtual Scrolling Sample.\n */\n\n ej.base.enableRipple(false);\n var customername = ['TOM', 'Hawk', 'Jon', 'Chandler', 'Monica', 'Rachel', 'Phoebe', 'Gunther',\n 'Ross', 'Geller', 'Joey', 'Bing', 'Tribbiani', 'Janice', 'Bong', 'Perk', 'Green', 'Ken', 'Adams'];\n var city = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'Austin',\n 'San Francisco', 'Columbus', 'Washington', 'Portland', 'Oklahoma', 'Las Vegas', 'Virginia', 'St. Louis', 'Birmingham'];\n var date1;\n var date2;\n var isInit;\n var dt = 0;\n var data = function (count) {\n var result = [];\n for (var i = 1; i < (count + 1); i++) {\n dt++;\n var round = void 0;\n var toString_1 = i.toString();\n if (toString_1.length === 1) {\n round = '0000' + (i);\n }\n else if (toString_1.length === 2) {\n round = '000' + i;\n }\n else if (toString_1.length === 3) {\n round = '00' + i;\n }\n else if (toString_1.length === 4) {\n round = '0' + i;\n }\n else {\n round = toString_1;\n }\n result.push({\n ProductID: 'PRO-' + round,\n City: city[Math.round(Math.random() * city.length)] || city[0],\n Year: \"FY \" + (dt + 2013),\n CustomerName: customername[Math.round(Math.random() * customername.length)] || customername[0],\n Price: Math.round(Math.random() * 5000) + 5000,\n Sold: Math.round(Math.random() * 80) + 10,\n });\n if (dt / 4 == 1)\n dt = 0;\n\n }\n return result;\n };\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: [],\n enableSorting: false,\n expandAll: true,\n formatSettings: [{ name: 'Price', format: 'C0' }],\n rows: [{ name: 'ProductID' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }],\n },\n width: 860,\n height: 300,\n enableVirtualization: true,\n gridSettings: { columnWidth: 140 },\n dataBound: function () {\n if (date1 && isInit) {\n date2 = new Date().getTime();\n document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (date2 - date1) / 1000 + ' sec';\n }\n isInit = false;\n button.disabled = true;\n document.getElementById('popup').style.display = 'none';\n },\n });\n pivotGridObj.appendTo('#PivotView');\n\n var button = new ej.buttons.Button({ isPrimary: true, cssClass: 'e-info' });\n button.appendTo('#load');\n\n function show() {\n document.getElementById('popup').style.display = 'inline-block';\n }\n\n button.element.onclick = function() {\n show();\n isInit = true;\n pivotGridObj.dataSource.data = data(100000);\n date1 = new Date().getTime();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n \n \n \n \n Time Taken: 0 sec\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n","index.js":"{{ripple}}/**\n * PivotView Virtual Scrolling Sample.\n */\n\n ej.base.enableRipple(false);\n var customername = ['TOM', 'Hawk', 'Jon', 'Chandler', 'Monica', 'Rachel', 'Phoebe', 'Gunther',\n 'Ross', 'Geller', 'Joey', 'Bing', 'Tribbiani', 'Janice', 'Bong', 'Perk', 'Green', 'Ken', 'Adams'];\n var city = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'Austin',\n 'San Francisco', 'Columbus', 'Washington', 'Portland', 'Oklahoma', 'Las Vegas', 'Virginia', 'St. Louis', 'Birmingham'];\n var date1;\n var date2;\n var isInit;\n var dt = 0;\n var data = function (count) {\n var result = [];\n for (var i = 1; i < (count + 1); i++) {\n dt++;\n var round = void 0;\n var toString_1 = i.toString();\n if (toString_1.length === 1) {\n round = '0000' + (i);\n }\n else if (toString_1.length === 2) {\n round = '000' + i;\n }\n else if (toString_1.length === 3) {\n round = '00' + i;\n }\n else if (toString_1.length === 4) {\n round = '0' + i;\n }\n else {\n round = toString_1;\n }\n result.push({\n ProductID: 'PRO-' + round,\n City: city[Math.round(Math.random() * city.length)] || city[0],\n Year: \"FY \" + (dt + 2013),\n CustomerName: customername[Math.round(Math.random() * customername.length)] || customername[0],\n Price: Math.round(Math.random() * 5000) + 5000,\n Sold: Math.round(Math.random() * 80) + 10,\n });\n if (dt / 4 == 1)\n dt = 0;\n\n }\n return result;\n };\n var pivotGridObj = new ej.pivotview.PivotView({\n dataSource: {\n data: [],\n enableSorting: false,\n expandAll: true,\n formatSettings: [{ name: 'Price', format: 'C0' }],\n rows: [{ name: 'ProductID' }],\n columns: [{ name: 'Year' }],\n values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }],\n },\n width: 860,\n height: 300,\n enableVirtualization: true,\n gridSettings: { columnWidth: 140 },\n dataBound: function () {\n if (date1 && isInit) {\n date2 = new Date().getTime();\n document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (date2 - date1) / 1000 + ' sec';\n }\n isInit = false;\n button.disabled = true;\n document.getElementById('popup').style.display = 'none';\n },\n });\n pivotGridObj.appendTo('#PivotView');\n\n var button = new ej.buttons.Button({ isPrimary: true, cssClass: 'e-info' });\n button.appendTo('#load');\n\n function show() {\n document.getElementById('popup').style.display = 'inline-block';\n }\n\n button.element.onclick = function() {\n show();\n isInit = true;\n pivotGridObj.dataSource.data = data(100000);\n date1 = new Date().getTime();\n };\n"} \ No newline at end of file diff --git a/src/pivot-view/virtual-scrolling.html b/src/pivot-view/virtual-scrolling.html index fbaf8ac1..6132d256 100644 --- a/src/pivot-view/virtual-scrolling.html +++ b/src/pivot-view/virtual-scrolling.html @@ -11,7 +11,7 @@
                                - +

                                This sample demonstrates virtual scrolling option available vertically and horizontally to load large records with ease.

                                @@ -59,4 +59,5 @@ .e-bigger #performanceTime{ margin-top: 8px; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/query-builder/default-stack.json b/src/query-builder/default-stack.json index e853c1a6..d2afb6e9 100644 --- a/src/query-builder/default-stack.json +++ b/src/query-builder/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Default querybuilder sample\n */\n\n\nvar columnData = [\n { field: 'EmployeeID', label: 'Employee ID', type: 'number' },\n { field: 'FirstName', label: 'First Name', type: 'string' },\n { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },\n { field: 'Title', label: 'Title', type: 'string' },\n { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },\n { field: 'Country', label: 'Country', type: 'string' },\n { field: 'City', label: 'City', type: 'string' }\n];\nvar importRules = {\n 'condition': 'and',\n 'rules': [{\n 'label': 'Employee ID',\n 'field': 'EmployeeID',\n 'type': 'number',\n 'operator': 'equal',\n 'value': 1\n },\n {\n 'label': 'Title',\n 'field': 'Title',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Sales Manager'\n }\n ]\n};\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n width: '70%',\n dataSource: window.employeeData,\n columns: columnData,\n rule: importRules,\n created: createdControl\n });\n qryBldrObj.appendTo('#querybuilder');\n function createdControl() {\n if (ej.base.Browser.isDevice) {\n qryBldrObj.summaryView = true;\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Default querybuilder sample\n */\n\n\nvar columnData = [\n { field: 'EmployeeID', label: 'Employee ID', type: 'number' },\n { field: 'FirstName', label: 'First Name', type: 'string' },\n { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },\n { field: 'Title', label: 'Title', type: 'string' },\n { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },\n { field: 'Country', label: 'Country', type: 'string' },\n { field: 'City', label: 'City', type: 'string' }\n];\nvar importRules = {\n 'condition': 'and',\n 'rules': [{\n 'label': 'Employee ID',\n 'field': 'EmployeeID',\n 'type': 'number',\n 'operator': 'equal',\n 'value': 1\n },\n {\n 'label': 'Title',\n 'field': 'Title',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Sales Manager'\n }\n ]\n};\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n width: '70%',\n dataSource: window.employeeData,\n columns: columnData,\n rule: importRules,\n created: createdControl\n });\n qryBldrObj.appendTo('#querybuilder');\n\n function createdControl() {\n if (ej.base.Browser.isDevice) {\n qryBldrObj.summaryView = true;\n }\n }\n\n"} \ No newline at end of file diff --git a/src/query-builder/default.html b/src/query-builder/default.html index 9f4b95ee..fd1859b2 100644 --- a/src/query-builder/default.html +++ b/src/query-builder/default.html @@ -17,9 +17,8 @@

                                - + \ No newline at end of file diff --git a/src/query-builder/default.js b/src/query-builder/default.js index 6782793e..a8df837b 100644 --- a/src/query-builder/default.js +++ b/src/query-builder/default.js @@ -38,6 +38,7 @@ var importRules = { created: createdControl }); qryBldrObj.appendTo('#querybuilder'); + function createdControl() { if (ej.base.Browser.isDevice) { qryBldrObj.summaryView = true; diff --git a/src/query-builder/grid-stack.json b/src/query-builder/grid-stack.json index eb0c4306..7cdc986c 100644 --- a/src/query-builder/grid-stack.json +++ b/src/query-builder/grid-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}\n /**\n * Integration with Data Grid sample\n */\n\n \n var columnData = [\n { field: 'TaskID', label: 'Task ID', type: 'number' },\n { field: 'Name', label: 'Name', type: 'string' },\n { field: 'Category', label: 'Category', type: 'string' },\n { field: 'SerialNo', label: 'Serial No', type: 'string' },\n { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },\n { field: 'Status', label: 'Status', type: 'string' }\n ];\n var importRules = {\n 'condition': 'or',\n 'rules': [{\n 'label': 'Category',\n 'field': 'Category',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Laptop'\n }]\n };\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n width: '100%',\n dataSource: window.hardwareData,\n columns: columnData,\n rule: importRules,\n conditionChanged: updateRule,\n fieldChanged: updateRule,\n valueChanged: updateRule,\n operatorChanged: updateRule,\n ruleDelete: updateRule,\n groupDelete: updateRule,\n ruleInsert: updateRule,\n groupInsert: updateRule\n });\n qryBldrObj.appendTo('#querybuilder');\n var grid;\n createGrid(new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']));\n\t\tupdateRule();\n function updateRule() {\n var predicate = qryBldrObj.getPredicate({condition: qryBldrObj.rule.condition, rules: qryBldrObj.rule.rules});\n var query;\n if (predicate) {\n query = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status'])\n .where(predicate);\n } else {\n query = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']);\n }\n grid.query = query;\n grid.refresh();\n }\n\n function createGrid(query) {\n grid = new ej.grids.Grid({ \n dataSource: window.hardwareData,\n query: query,\n width: '100%',\n allowPaging: true,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', width: 120, textAlign: 'Right' },\n { field: 'Name', headerText: 'Name', width: 140 },\n { field: 'Category', headerText: 'Category', width: 140, textAlign: 'Right' },\n { field: 'InvoiceNo', headerText: 'Invoice No', width: 130 },\n { field: 'Status', headerText: 'Status', width: 120 },\n { field: 'SerialNo', headerText: 'Serial No', width: 130 },\n ],\n pageSettings: { pageSize: 8, pageCount: 5 },\n });\n grid.appendTo('#Grid');\n }\n "} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}\n /**\n * Integration with Data Grid sample\n */\n\n \n var columnData = [\n { field: 'TaskID', label: 'Task ID', type: 'number' },\n { field: 'Name', label: 'Name', type: 'string' },\n { field: 'Category', label: 'Category', type: 'string' },\n { field: 'SerialNo', label: 'Serial No', type: 'string' },\n { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },\n { field: 'Status', label: 'Status', type: 'string' }\n ];\n var importRules = {\n 'condition': 'or',\n 'rules': [{\n 'label': 'Category',\n 'field': 'Category',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Laptop'\n }]\n };\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n width: '100%',\n dataSource: window.hardwareData,\n columns: columnData,\n rule: importRules,\n ruleChange: updateRule\n });\n qryBldrObj.appendTo('#querybuilder');\n var grid;\n createGrid(new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']));\n\t\tupdateRule({rule: qryBldrObj.getValidRules(qryBldrObj.rule) });\n function updateRule(args) {\n var predicate = qryBldrObj.getPredicate(args.rule);\n var query;\n if (predicate) {\n query = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status'])\n .where(predicate);\n } else {\n query = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']);\n }\n grid.query = query;\n grid.refresh();\n }\n\n function createGrid(query) {\n grid = new ej.grids.Grid({ \n dataSource: window.hardwareData,\n query: query,\n width: '100%',\n allowPaging: true,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', width: 120, textAlign: 'Right' },\n { field: 'Name', headerText: 'Name', width: 140 },\n { field: 'Category', headerText: 'Category', width: 140, textAlign: 'Right' },\n { field: 'InvoiceNo', headerText: 'Invoice No', width: 130 },\n { field: 'Status', headerText: 'Status', width: 120 },\n { field: 'SerialNo', headerText: 'Serial No', width: 130 },\n ],\n pageSettings: { pageSize: 8, pageCount: 5 },\n });\n grid.appendTo('#Grid');\n }\n "} \ No newline at end of file diff --git a/src/query-builder/grid.js b/src/query-builder/grid.js index 3ce8bd1d..d96070f6 100644 --- a/src/query-builder/grid.js +++ b/src/query-builder/grid.js @@ -27,21 +27,14 @@ dataSource: window.hardwareData, columns: columnData, rule: importRules, - conditionChanged: updateRule, - fieldChanged: updateRule, - valueChanged: updateRule, - operatorChanged: updateRule, - ruleDelete: updateRule, - groupDelete: updateRule, - ruleInsert: updateRule, - groupInsert: updateRule + ruleChange: updateRule }); qryBldrObj.appendTo('#querybuilder'); var grid; createGrid(new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status'])); - updateRule(); - function updateRule() { - var predicate = qryBldrObj.getPredicate({condition: qryBldrObj.rule.condition, rules: qryBldrObj.rule.rules}); + updateRule({rule: qryBldrObj.getValidRules(qryBldrObj.rule) }); + function updateRule(args) { + var predicate = qryBldrObj.getPredicate(args.rule); var query; if (predicate) { query = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']) diff --git a/src/query-builder/sample.json b/src/query-builder/sample.json index f69b23bc..0e5566f2 100644 --- a/src/query-builder/sample.json +++ b/src/query-builder/sample.json @@ -3,7 +3,6 @@ "directory": "query-builder", "category": "Forms", "ftName": "query-builder", - "type": "preview", "dataSourcePath": "src/query-builder/data-source.js", "samples": [ { @@ -16,7 +15,8 @@ "width", "dataSource", "columns", - "rule" + "rule", + "created" ] }, "description": "This sample demonstrates the default functionalities of the Query Builder component. Click the plus button to add group or conditions." @@ -30,14 +30,7 @@ "width", "columns", "rule", - "conditionChanged", - "fieldChanged", - "valueChanged", - "operatorChanged", - "ruleDelete", - "groupDelete", - "ruleInsert", - "groupInsert" + "ruleChange" ] }, "description": "This sample demonstrates the integration of DropdownList, Slider controls as Templates in the Query Builder component." @@ -53,14 +46,7 @@ "dataSource", "columns", "rule", - "conditionChanged", - "fieldChanged", - "valueChanged", - "operatorChanged", - "ruleDelete", - "groupDelete", - "ruleInsert", - "groupInsert" + "ruleChange" ] }, "description": "This sample demonstrates the integration of Grid component to showcase the data population based on the created filters using Query Builder component." diff --git a/src/query-builder/template-stack.json b/src/query-builder/template-stack.json index 4124a7ab..2dad7b81 100644 --- a/src/query-builder/template-stack.json +++ b/src/query-builder/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                \n
                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Template sample\n */\n\n\n var elem;\n var dropDownObj;\n var boxObj;\n var multiSelectObj;\n var inOperators = ['in', 'notin'];\n var ticksSlider;\n var filter = [{\n field: 'Category',\n label: 'Category',\n type: 'string',\n template: {\n create: function () {\n elem = document.createElement('input');\n elem.setAttribute('type', 'text');\n return elem;\n },\n destroy: function (args) {\n var multiSelect = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect');\n if (multiSelect) {\n multiSelect.destroy();\n }\n var textBox = ej.base.getComponent(document.getElementById(args.elementId), 'textbox');\n if (textBox) {\n textBox.destroy();\n }\n },\n write: function (args) {\n if (inOperators.indexOf(args.operator) > -1) {\n multiSelectObj = new ej.dropdowns.MultiSelect({\n dataSource: ['Food', 'Travel', 'Shopping', 'Mortgage', 'Salary', 'Clothing', 'Bills'],\n value: args.values,\n mode: 'CheckBox',\n placeholder: 'Select category',\n change: function (e) {\n qryBldrObj.notifyChange(e.value, e.element);\n }\n });\n multiSelectObj.appendTo('#' + args.elements.id);\n } else {\n var inputobj = new ej.inputs.TextBox({\n placeholder: 'Value',\n input: function (e) {\n qryBldrObj.notifyChange(e.value, e.event.target);\n }\n });\n inputobj.appendTo('#' + args.elements.id);\n inputobj.value = args.values;\n inputobj.dataBind();\n }\n }\n }\n },\n {\n field: 'PaymentMode',\n label: 'PaymentMode',\n type: 'string',\n operators: [\n { key: 'Equal', value: 'equal' },\n { key: 'Not Equal', value: 'notequal' },\n { key: 'In', value: 'in' },\n { key: 'Not In', value: 'notin' }\n ],\n template: {\n create: function () {\n elem = document.createElement('input');\n elem.setAttribute('type', 'text');\n return elem;\n },\n destroy: function (args) {\n var selectObj = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect');\n if (selectObj) {\n selectObj.destroy();\n }\n var dropdown = ej.base.getComponent(document.getElementById(args.elementId), 'dropdownlist');\n if (dropdown) {\n dropdown.destroy();\n }\n },\n write: function (args) {\n var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];\n if (inOperators.indexOf(args.operator) > -1) {\n var multiSelectObj = new ej.dropdowns.MultiSelect({\n dataSource: ds,\n value: args.values,\n mode: 'CheckBox',\n placeholder: 'Select Transaction',\n change: function (e) {\n qryBldrObj.notifyChange(e.value, e.element);\n }\n });\n multiSelectObj.appendTo('#' + args.elements.id);\n }\n else {\n dropDownObj = new ej.dropdowns.DropDownList({\n dataSource: ds,\n value: args.values ? args.values : ds[0],\n change: function (e) {\n qryBldrObj.notifyChange(e.itemData.value, e.element);\n }\n });\n dropDownObj.appendTo('#' + args.elements.id);\n\n }\n }\n }\n },\n {\n field: 'TransactionType',\n label: 'TransactionType',\n type: 'string',\n operators: [{\n key: 'Equal',\n value: 'equal'\n }, {\n key: 'Not Equal',\n value: 'notequal'\n }],\n template: {\n create: function () {\n elem = document.createElement('input');\n elem.setAttribute('type', 'checkbox');\n return elem;\n },\n destroy: function (args) {\n ej.base.getComponent(document.getElementById(args.elementId), 'checkbox').destroy();\n },\n write: function (args) {\n var checked = args.values === 'IsExpensive' ? true : false;\n boxObj = new ej.buttons.CheckBox({\n label: 'Is Expensive',\n checked: checked,\n change: function (e) {\n qryBldrObj.notifyChange(e.checked ? 'expensive' : 'income', e.event.target);\n }\n });\n boxObj.appendTo('#' + args.elements.id);\n }\n }\n },\n {\n field: 'Description',\n label: 'Description',\n type: 'string'\n },\n {\n field: 'Date',\n label: 'Date',\n type: 'date'\n },\n {\n field: 'Amount',\n label: 'Amount',\n type: 'number',\n operators: [\n { key: 'Equal', value: 'equal' },\n { key: 'Greater than', value: 'greaterthan' },\n { key: 'Less than', value: 'lessthan' },\n { key: 'Less than or equal', value: 'lessthanorequal' },\n { key: 'Greater than or equal', value: 'greaterthanorequal' },\n { key: 'Not equal', value: 'notequal' }\n ],\n template: {\n create: function () {\n elem = document.createElement('div');\n elem.setAttribute('class', 'ticks_slider');\n return elem;\n },\n destroy: function (args) {\n ej.base.getComponent(document.getElementById(args.elementId), 'slider').destroy();\n },\n write: function (args) {\n ticksSlider = new ej.inputs.Slider({\n value: args.values,\n min: 0,\n max: 100,\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Hover' },\n type: 'MinRange',\n change: function (e) {\n qryBldrObj.notifyChange(e.value, args.elements);\n }\n });\n ticksSlider.appendTo('#' + args.elements.id);\n }\n }\n }\n ];\n var importRules = {\n 'condition': 'and',\n 'rules': [{\n 'label': 'Category',\n 'field': 'Category',\n 'type': 'string',\n 'operator': 'in',\n 'value': ['Clothing']\n },\n {\n 'condition': 'or',\n 'rules': [{\n 'label': 'TransactionType',\n 'field': 'TransactionType',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Income'\n },\n {\n 'label': 'PaymentMode',\n 'field': 'PaymentMode',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Cash'\n }\n ]\n }, {\n 'label': 'Amount',\n 'field': 'Amount',\n 'type': 'number',\n 'operator': 'equal',\n 'value': 10\n }\n ]\n };\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n dataSource: window.expenseData,\n columns: filter,\n width: '100%',\n rule: importRules,\n conditionChanged: updateRule,\n fieldChanged: updateRule,\n valueChanged: updateRule,\n operatorChanged: updateRule,\n ruleDelete: updateRule,\n groupDelete: updateRule,\n ruleInsert: updateRule,\n groupInsert: updateRule\n });\n qryBldrObj.appendTo('#querybuilder');\n var radioButton = new ej.buttons.RadioButton({\n label: 'JSON Rule',\n name: 'rule',\n value: 'json',\n checked: true,\n change: changeValue\n });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({\n label: 'SQL Rule',\n name: 'rule',\n value: 'sql',\n change: changeValue\n });\n radioButton.appendTo('#radio2');\n var element = document.getElementById('ruleContent');\n\n function updateRule() {\n if (ej.base.getComponent(radioButton.element, 'radio').checked) {\n element.textContent = qryBldrObj.getSqlFromRules(qryBldrObj.rule);\n } else {\n element.textContent = JSON.stringify({\n condition: qryBldrObj.rule.condition,\n rule: qryBldrObj.rule.rules\n }, null, 4);\n }\n }\n element.textContent = JSON.stringify({\n condition: qryBldrObj.rule.condition,\n rule: qryBldrObj.rule.rules\n }, null, 4);\n\n function changeValue() {\n element = document.getElementById('ruleContent');\n if (ej.base.getComponent(radioButton.element, 'radio').checked) {\n element.textContent = qryBldrObj.getSqlFromRules(qryBldrObj.rule);\n } else {\n element.textContent = JSON.stringify({\n condition: qryBldrObj.rule.condition,\n rules: qryBldrObj.rule.rules\n }, null, 4);\n }\n }\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var slider = [ticksSlider];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                \n
                                \n \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Template sample\n */\n\n\n var elem;\n var dropDownObj;\n var boxObj;\n var ticksSlider;\n var filter = [{\n field: 'Category',\n label: 'Category',\n type: 'string'\n },\n {\n field: 'PaymentMode',\n label: 'PaymentMode',\n type: 'string',\n operators: [\n { key: 'Equal', value: 'equal' },\n { key: 'Not Equal', value: 'notequal' }\n ],\n template: {\n create: function () {\n elem = document.createElement('input');\n elem.setAttribute('type', 'text');\n return elem;\n },\n destroy: function (args) {\n var dropdown = ej.base.getComponent(document.getElementById(args.elementId), 'dropdownlist');\n if (dropdown) {\n dropdown.destroy();\n }\n },\n write: function (args) {\n var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];\n dropDownObj = new ej.dropdowns.DropDownList({\n dataSource: ds,\n value: args.values ? args.values : ds[0],\n change: function (e) {\n qryBldrObj.notifyChange(e.itemData.value, e.element);\n }\n });\n dropDownObj.appendTo('#' + args.elements.id);\n }\n }\n },\n {\n field: 'TransactionType',\n label: 'TransactionType',\n type: 'string',\n operators: [{\n key: 'Equal',\n value: 'equal'\n }, {\n key: 'Not Equal',\n value: 'notequal'\n }],\n template: {\n create: function () {\n elem = document.createElement('input');\n elem.setAttribute('type', 'checkbox');\n return elem;\n },\n destroy: function (args) {\n ej.base.getComponent(document.getElementById(args.elementId), 'checkbox').destroy();\n },\n write: function (args) {\n var checked = args.values === 'IsExpensive' ? true : false;\n boxObj = new ej.buttons.CheckBox({\n label: 'Is Expensive',\n checked: checked,\n change: function (e) {\n qryBldrObj.notifyChange(e.checked ? 'expensive' : 'income', e.event.target);\n }\n });\n boxObj.appendTo('#' + args.elements.id);\n }\n }\n },\n {\n field: 'Description',\n label: 'Description',\n type: 'string'\n },\n {\n field: 'Date',\n label: 'Date',\n type: 'date'\n },\n {\n field: 'Amount',\n label: 'Amount',\n type: 'number',\n operators: [\n { key: 'Equal', value: 'equal' },\n { key: 'Greater than', value: 'greaterthan' },\n { key: 'Less than', value: 'lessthan' },\n { key: 'Less than or equal', value: 'lessthanorequal' },\n { key: 'Greater than or equal', value: 'greaterthanorequal' },\n { key: 'Not equal', value: 'notequal' }\n ],\n template: {\n create: function () {\n elem = document.createElement('div');\n elem.setAttribute('class', 'ticks_slider');\n return elem;\n },\n destroy: function (args) {\n ej.base.getComponent(document.getElementById(args.elementId), 'slider').destroy();\n },\n write: function (args) {\n ticksSlider = new ej.inputs.Slider({\n value: args.values,\n min: 0,\n max: 100,\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Hover' },\n type: 'MinRange',\n change: function (e) {\n qryBldrObj.notifyChange(e.value, args.elements);\n }\n });\n ticksSlider.appendTo('#' + args.elements.id);\n }\n }\n }\n ];\n var importRules = {\n 'condition': 'and',\n 'rules': [{\n 'label': 'Category',\n 'field': 'Category',\n 'type': 'string',\n 'operator': 'in',\n 'value': ['Clothing']\n },\n {\n 'condition': 'or',\n 'rules': [{\n 'label': 'TransactionType',\n 'field': 'TransactionType',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Income'\n },\n {\n 'label': 'PaymentMode',\n 'field': 'PaymentMode',\n 'type': 'string',\n 'operator': 'equal',\n 'value': 'Cash'\n }\n ]\n }, {\n 'label': 'Amount',\n 'field': 'Amount',\n 'type': 'number',\n 'operator': 'equal',\n 'value': 10\n }\n ]\n };\n var qryBldrObj = new ej.querybuilder.QueryBuilder({\n dataSource: window.expenseData,\n columns: filter,\n width: '100%',\n rule: importRules,\n ruleChange: updateRule\n });\n qryBldrObj.appendTo('#querybuilder');\n var radioButton = new ej.buttons.RadioButton({\n label: 'JSON Rule',\n name: 'rule',\n value: 'json',\n checked: true,\n change: changeValue\n });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({\n label: 'SQL Rule',\n name: 'rule',\n value: 'sql',\n change: changeValue\n });\n radioButton.appendTo('#radio2');\n var element = document.getElementById('ruleContent');\n\n function updateRule(args) {\n if (ej.base.getComponent(radioButton.element, 'radio').checked) {\n element.textContent = qryBldrObj.getSqlFromRules(args.rule);\n } else {\n element.textContent = JSON.stringify(args.rule, null, 4);\n }\n }\n element.textContent = JSON.stringify(qryBldrObj.getValidRules(qryBldrObj.rule), null, 4);\n\n function changeValue() {\n element = document.getElementById('ruleContent');\n var validRule = qryBldrObj.getValidRules(qryBldrObj.rule);\n if (ej.base.getComponent(radioButton.element, 'radio').checked) {\n element.textContent = qryBldrObj.getSqlFromRules(validRule);\n } else {\n element.textContent = JSON.stringify(validRule, null, 4);\n }\n }\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var tooltip = document.getElementsByClassName('e-handle e-control e-tooltip'), tooltipObj;\n for (var i = 0, len = tooltip.length; i < len; i++) {\n\t\t\ttooltipObj = tooltip[i].ej2_instances[0];\n // Refreshing each slider tooltip object position\n\t\t\ttooltipObj.refresh(tooltipObj.element);\n\t\t}\n }\n\n"} \ No newline at end of file diff --git a/src/query-builder/template.html b/src/query-builder/template.html index f0e8047e..60c6b141 100644 --- a/src/query-builder/template.html +++ b/src/query-builder/template.html @@ -42,7 +42,7 @@

                                This sample also illustrates the created filters in JSON and SQL modes.

                                More information about Query Builder can be found in this - + documentation section.

                                @@ -61,7 +61,8 @@ .highcontrast textarea#ruleContent { background-color: #000; } - + + /* custom code start */ .querybuilder-property { width: 100%; } @@ -74,4 +75,5 @@ .querybuilder-property div.e-radio-wrapper { padding-bottom: 10px; } + /* custom code end */ diff --git a/src/query-builder/template.js b/src/query-builder/template.js index c705f58f..b5dbee3c 100644 --- a/src/query-builder/template.js +++ b/src/query-builder/template.js @@ -6,54 +6,11 @@ this.default = function () { var elem; var dropDownObj; var boxObj; - var multiSelectObj; - var inOperators = ['in', 'notin']; var ticksSlider; var filter = [{ field: 'Category', label: 'Category', - type: 'string', - template: { - create: function () { - elem = document.createElement('input'); - elem.setAttribute('type', 'text'); - return elem; - }, - destroy: function (args) { - var multiSelect = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect'); - if (multiSelect) { - multiSelect.destroy(); - } - var textBox = ej.base.getComponent(document.getElementById(args.elementId), 'textbox'); - if (textBox) { - textBox.destroy(); - } - }, - write: function (args) { - if (inOperators.indexOf(args.operator) > -1) { - multiSelectObj = new ej.dropdowns.MultiSelect({ - dataSource: ['Food', 'Travel', 'Shopping', 'Mortgage', 'Salary', 'Clothing', 'Bills'], - value: args.values, - mode: 'CheckBox', - placeholder: 'Select category', - change: function (e) { - qryBldrObj.notifyChange(e.value, e.element); - } - }); - multiSelectObj.appendTo('#' + args.elements.id); - } else { - var inputobj = new ej.inputs.TextBox({ - placeholder: 'Value', - input: function (e) { - qryBldrObj.notifyChange(e.value, e.event.target); - } - }); - inputobj.appendTo('#' + args.elements.id); - inputobj.value = args.values; - inputobj.dataBind(); - } - } - } + type: 'string' }, { field: 'PaymentMode', @@ -61,9 +18,7 @@ this.default = function () { type: 'string', operators: [ { key: 'Equal', value: 'equal' }, - { key: 'Not Equal', value: 'notequal' }, - { key: 'In', value: 'in' }, - { key: 'Not In', value: 'notin' } + { key: 'Not Equal', value: 'notequal' } ], template: { create: function () { @@ -72,10 +27,6 @@ this.default = function () { return elem; }, destroy: function (args) { - var selectObj = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect'); - if (selectObj) { - selectObj.destroy(); - } var dropdown = ej.base.getComponent(document.getElementById(args.elementId), 'dropdownlist'); if (dropdown) { dropdown.destroy(); @@ -83,29 +34,14 @@ this.default = function () { }, write: function (args) { var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet']; - if (inOperators.indexOf(args.operator) > -1) { - var multiSelectObj = new ej.dropdowns.MultiSelect({ - dataSource: ds, - value: args.values, - mode: 'CheckBox', - placeholder: 'Select Transaction', - change: function (e) { - qryBldrObj.notifyChange(e.value, e.element); - } - }); - multiSelectObj.appendTo('#' + args.elements.id); - } - else { dropDownObj = new ej.dropdowns.DropDownList({ dataSource: ds, value: args.values ? args.values : ds[0], change: function (e) { - qryBldrObj.notifyChange(e.itemData.value, e.element); + qryBldrObj.notifyChange(e.itemData.value, e.element); } }); dropDownObj.appendTo('#' + args.elements.id); - - } } } }, @@ -229,14 +165,7 @@ this.default = function () { columns: filter, width: '100%', rule: importRules, - conditionChanged: updateRule, - fieldChanged: updateRule, - valueChanged: updateRule, - operatorChanged: updateRule, - ruleDelete: updateRule, - groupDelete: updateRule, - ruleInsert: updateRule, - groupInsert: updateRule + ruleChange: updateRule }); qryBldrObj.appendTo('#querybuilder'); var radioButton = new ej.buttons.RadioButton({ @@ -256,30 +185,22 @@ this.default = function () { radioButton.appendTo('#radio2'); var element = document.getElementById('ruleContent'); - function updateRule() { + function updateRule(args) { if (ej.base.getComponent(radioButton.element, 'radio').checked) { - element.textContent = qryBldrObj.getSqlFromRules(qryBldrObj.rule); + element.textContent = qryBldrObj.getSqlFromRules(args.rule); } else { - element.textContent = JSON.stringify({ - condition: qryBldrObj.rule.condition, - rule: qryBldrObj.rule.rules - }, null, 4); + element.textContent = JSON.stringify(args.rule, null, 4); } } - element.textContent = JSON.stringify({ - condition: qryBldrObj.rule.condition, - rule: qryBldrObj.rule.rules - }, null, 4); + element.textContent = JSON.stringify(qryBldrObj.getValidRules(qryBldrObj.rule), null, 4); function changeValue() { element = document.getElementById('ruleContent'); + var validRule = qryBldrObj.getValidRules(qryBldrObj.rule); if (ej.base.getComponent(radioButton.element, 'radio').checked) { - element.textContent = qryBldrObj.getSqlFromRules(qryBldrObj.rule); + element.textContent = qryBldrObj.getSqlFromRules(validRule); } else { - element.textContent = JSON.stringify({ - condition: qryBldrObj.rule.condition, - rules: qryBldrObj.rule.rules - }, null, 4); + element.textContent = JSON.stringify(validRule, null, 4); } } if (document.getElementById('right-pane')) { @@ -288,10 +209,11 @@ this.default = function () { // Handler used to reposition the tooltip on page scroll function onScroll() { - var slider = [ticksSlider]; - slider.forEach(function (slider) { + var tooltip = document.getElementsByClassName('e-handle e-control e-tooltip'), tooltipObj; + for (var i = 0, len = tooltip.length; i < len; i++) { + tooltipObj = tooltip[i].ej2_instances[0]; // Refreshing each slider tooltip object position - slider.refreshTooltip(); - }); + tooltipObj.refresh(tooltipObj.element); + } } }; diff --git a/src/range-navigator/date-time-stack.json b/src/range-navigator/date-time-stack.json new file mode 100644 index 00000000..3f512d4b --- /dev/null +++ b/src/range-navigator/date-time-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Exchange Rate USD to EUR

                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator with datetime axis\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\nvar regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)',\n 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)'];\nthis.renderDateTimeChart = function (dataSource) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }\n },\n series: [{\n dataSource: dataSource, xName: 'x', yName: 'y', width: 2, name: 'Rate', type: 'Spline'\n }],\n chartArea: { border: { width: 0 } },\n tooltip: { enable: true, shared: true },\n primaryYAxis: {\n labelFormat: 'n1', minimum: 0.6,\n maximum: 1, interval: 0.1, majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n },\n axisLabelRender: function (args) {\n if (args.axis.name === 'primaryYAxis') {\n args.text = '€' + args.text;\n }\n },\n height: '350', legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n valueType: 'DateTime',\n majorTickLines: {\n width: 0\n },\n tooltip: { enable: true, format: 'yyyy/MM/dd', displayMode: 'Always' },\n value: [new Date('2011-01-01'), new Date('2013-12-31')],\n series: [\n {\n dataSource: dataSource, xName: 'x', yName: 'y', type: 'Area',\n width: 2, animation: { enable: false },\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }\n ],\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n};\n\n var dataSource;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/stock-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n dataSource = JSON.parse(data);\n dataSource.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderDateTimeChart(dataSource);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/date-time.js b/src/range-navigator/date-time.js index ff533ca0..61c3d38f 100644 --- a/src/range-navigator/date-time.js +++ b/src/range-navigator/date-time.js @@ -9,7 +9,7 @@ var themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast']; var borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4']; var regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)']; -this.renderChart = function (dataSource) { +this.renderDateTimeChart = function (dataSource) { var chart = new ej.charts.Chart({ primaryXAxis: { valueType: 'DateTime', @@ -68,6 +68,6 @@ this.default = function () { dataSource.map(function (data) { data.x = new Date(data.x); }); - _this.renderChart(dataSource); + _this.renderDateTimeChart(dataSource); }; }; \ No newline at end of file diff --git a/src/range-navigator/default-stack.json b/src/range-navigator/default-stack.json new file mode 100644 index 00000000..19440406 --- /dev/null +++ b/src/range-navigator/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n

                                Bitcoin (USD) Price Range

                                \n
                                \n
                                \n
                                \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                ","index.js":"{{ripple}}/**\n * Default appearance of the range navigator\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\nvar regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)',\n 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)'];\nthis.renderDefaultChart = function (datasrc) {\n var range = new ej.charts.RangeNavigator({\n valueType: 'DateTime',\n tooltip: { enable: true, displayMode: 'Always' },\n value: [new Date('2017-09-01'), new Date('2018-02-01')],\n labelFormat: 'MMM-yy',\n navigatorStyleSettings: {\n unselectedRegionColor: 'transparent',\n selectedRegionColor: regionColor[themes.indexOf(theme)]\n },\n series: [\n {\n dataSource: datasrc,\n xName: 'x', yName: 'y', type: 'Area', width: 2,\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n};\n\n var datasrc;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/default_data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n datasrc.map(function (data) {\n data.x = new Date(data.x);\n });\n _this.renderDefaultChart(datasrc);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/default.js b/src/range-navigator/default.js index da0355a6..116f8fa6 100644 --- a/src/range-navigator/default.js +++ b/src/range-navigator/default.js @@ -9,7 +9,7 @@ var themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast']; var borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4']; var regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)']; -this.renderChart = function (datasrc) { +this.renderDefaultChart = function (datasrc) { var range = new ej.charts.RangeNavigator({ valueType: 'DateTime', tooltip: { enable: true, displayMode: 'Always' }, @@ -41,6 +41,6 @@ this.default = function () { datasrc.map(function (data) { data.x = new Date(data.x); }); - _this.renderChart(datasrc); + _this.renderDefaultChart(datasrc); }; }; \ No newline at end of file diff --git a/src/range-navigator/double-stack.json b/src/range-navigator/double-stack.json new file mode 100644 index 00000000..0be9a9a9 --- /dev/null +++ b/src/range-navigator/double-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Score Comparision AUS vs SL

                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator with numeric axis\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar chartAnnotation = [];\nchartAnnotation.push({ content: '
                                ', coordinateUnits: 'Pixel', region: 'Chart', x: '85%', y: '15%' });\nvar backgroundColor = theme === 'Highcontrast' ? 'black' : 'white';\nvar datasrc;\nvar sl;\nvar aus = [];\nthis.renderNumericChart = function (chartData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: { title: 'Overs', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelFormat: 'n1' },\n primaryYAxis: { title: 'Runs', minimum: 0, majorTickLines: { width: 0 }, lineStyle: { width: 0 } },\n chartArea: { border: { width: 0 } },\n series: [\n { name: 'AUS', dataSource: aus, xName: 'x', yName: 'y', width: 2, animation: { enable: false }, type: 'Spline' },\n { name: 'SL', dataSource: sl, xName: 'x', yName: 'y', width: 2, animation: { enable: false }, type: 'Spline' }\n ],\n annotations: chartAnnotation,\n height: '350', legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme,\n axisLabelRender: function (args) {\n if (args.axis.orientation === 'Horizontal') {\n var value = Math.abs(Number(args.text));\n args.text = String(value);\n }\n },\n loaded: function (args) {\n var series1 = args.chart.visibleSeries[0].interior;\n var series2 = args.chart.visibleSeries[1].interior;\n var html = '';\n html += '';\n html += '';\n html += '
                                		' + ' Australia' + '
                                		' + ' Sri Lanka' + '
                                ';\n chart.setAnnotationValue(0, '
                                ' +\n html +\n '
                                ');\n }\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n labelPosition: 'Outside',\n tooltip: { enable: true },\n value: [31, 50],\n series: [\n { dataSource: aus, xName: 'x', yName: 'y' },\n { dataSource: sl, xName: 'x', yName: 'y' }\n ],\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n tooltipRender: function (args) {\n args.text[0] = Math.round(parseInt(args.text[0], 10)).toString();\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n};\n\n var datasrc;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/double.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n sl = datasrc.srilanka;\n aus = datasrc.aus;\n getAnnotaiton(aus, ej.charts.getSeriesColor(theme)[0]);\n getAnnotaiton(sl, ej.charts.getSeriesColor(theme)[1]);\n _this.renderNumericChart(datasrc);\n };\n\nfunction getAnnotaiton(args, color) {\n for (var i = 0; i < args.length; i++) {\n if (args[i].isWicket) {\n chartAnnotation.push({\n content: '
                                W
                                ',\n x: args[i].x,\n y: args[i].y,\n coordinateUnits: 'Point'\n });\n }\n }\n}"} \ No newline at end of file diff --git a/src/range-navigator/double.js b/src/range-navigator/double.js index 7e66ebb6..96ae4ef5 100644 --- a/src/range-navigator/double.js +++ b/src/range-navigator/double.js @@ -11,7 +11,7 @@ var backgroundColor = theme === 'Highcontrast' ? 'black' : 'white'; var datasrc; var sl; var aus = []; -this.renderChart = function (chartData) { +this.renderNumericChart = function (chartData) { var chart = new ej.charts.Chart({ primaryXAxis: { title: 'Overs', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelFormat: 'n1' }, primaryYAxis: { title: 'Runs', minimum: 0, majorTickLines: { width: 0 }, lineStyle: { width: 0 } }, @@ -79,7 +79,7 @@ this.default = function () { aus = datasrc.aus; getAnnotaiton(aus, ej.charts.getSeriesColor(theme)[0]); getAnnotaiton(sl, ej.charts.getSeriesColor(theme)[1]); - _this.renderChart(datasrc); + _this.renderNumericChart(datasrc); }; }; function getAnnotaiton(args, color) { diff --git a/src/range-navigator/empty-data-stack.json b/src/range-navigator/empty-data-stack.json new file mode 100644 index 00000000..9604e0ac --- /dev/null +++ b/src/range-navigator/empty-data-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                AAPL 2012-17

                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                ","index.js":"{{ripple}}/**\n * Sample for empty points\n */\nvar _this = this;\nvar startDate = new Date(2012, 4, 2);\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\nvar regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)',\n 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)'];\nthis.renderEmptyPointChart = function (stockData) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', crosshairTooltip: { enable: true },\n edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }\n },\n series: [{\n dataSource: stockData, xName: 'x', yName: 'open', type: 'Area', name: 'AAPL',\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n chartArea: { border: { width: 0 } },\n primaryYAxis: {\n labelFormat: '${value}', minimum: 40, maximum: 140, interval: 20,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n },\n tooltip: { enable: true, shared: true },\n height: '350', legendSettings: { visible: false },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n labelPosition: 'Outside',\n valueType: 'DateTime',\n majorTickLines: {\n width: 0\n },\n majorGridLines: {\n width: 0\n },\n tooltip: { enable: true, displayMode: 'Always' },\n value: [new Date('2013-12-27'), new Date('2015-03-23')],\n navigatorBorder: { width: 0 },\n series: [{\n dataSource: stockData, xName: 'x', yName: 'open', type: 'Area', width: 2, animation: { enable: false },\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n};\n\n var dataSrc;\n var stockData = [];\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/empty-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n dataSrc = JSON.parse(data);\n dataSrc.map(function (data) {\n data.x = new Date(data.x);\n });\n for (var i = 0; i <= 250; i++) {\n stockData.push(dataSrc[i]);\n if (i > 45 && 50 > i) {\n stockData[i].open = null;\n }\n else if (i > 95 && 100 > i) {\n stockData[i].open = null;\n }\n else if (i > 145 && 150 > i) {\n stockData[i].open = null;\n }\n else if (i > 195 && 200 > i) {\n stockData[i].open = null;\n }\n else if (i > 245 && 250 > i) {\n stockData[i].open = null;\n }\n }\n _this.renderEmptyPointChart(stockData);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/empty-data.js b/src/range-navigator/empty-data.js index 3a615183..c5ffff10 100644 --- a/src/range-navigator/empty-data.js +++ b/src/range-navigator/empty-data.js @@ -2,7 +2,6 @@ * Sample for empty points */ var _this = this; -var stockData = []; var startDate = new Date(2012, 4, 2); var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -11,7 +10,7 @@ var themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast']; var borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4']; var regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)']; -this.renderChart = function (dataSrc) { +this.renderEmptyPointChart = function (stockData) { var chart = new ej.charts.Chart({ primaryXAxis: { valueType: 'DateTime', crosshairTooltip: { enable: true }, @@ -62,6 +61,7 @@ this.renderChart = function (dataSrc) { }; this.default = function () { var dataSrc; + var stockData = []; var ajax = new ej.base.Ajax('./src/range-navigator/data-source/empty-data.json', 'GET', true); ajax.send().then(); ajax.onSuccess = function (data) { @@ -87,6 +87,6 @@ this.default = function () { stockData[i].open = null; } } - _this.renderChart(dataSrc); + _this.renderEmptyPointChart(stockData); }; }; \ No newline at end of file diff --git a/src/range-navigator/export-stack.json b/src/range-navigator/export-stack.json new file mode 100644 index 00000000..b96eeb9c --- /dev/null +++ b/src/range-navigator/export-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                Conns,Inc Stock Close Details

                                \n
                                \n

                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Export Type:\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                File Name:
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator with print and export functionalities.\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#FF4081', '#007897', '#428BCA', '#FFD939'];\nvar regionColor = ['rgba(255, 64, 129, 0.3)', ' rgba(0, 120, 151, 0.3)',\n 'rgba(66, 139, 202, 0.3)', 'rgba(255, 217, 57, 0.3)'];\nthis.renderChart = function (datasrc) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', crosshairTooltip: { enable: true },\n edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }\n },\n series: [{\n dataSource: datasrc, xName: 'xDate', yName: 'Close', width: 2,\n name: 'Close',\n fill: regionColor[themes.indexOf(theme)], type: 'SplineArea',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n chartArea: { border: { width: 0 } },\n primaryYAxis: {\n minimum: 81, maximum: 87, interval: 2,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 },\n labelFormat: '{value}M', title: 'Million in USD'\n },\n tooltip: { enable: true, shared: true },\n legendSettings: { visible: false },\n height: '350',\n theme: theme\n });\n chart.appendTo('#chart');\n var dateTimeControl = new ej.charts.RangeNavigator({\n valueType: 'DateTime',\n animationDuration: 500,\n intervalType: 'Months',\n labelFormat: 'MMM', theme: theme,\n enableGrouping: true,\n value: [new Date('2013-05-01'), new Date('2013-08-01')],\n dataSource: datasrc,\n xName: 'xDate', yName: 'Close',\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n }\n });\n dateTimeControl.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90\n });\n mode.appendTo('#mode');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-export-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#exportBtn');\n document.getElementById('exportBtn').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n chart.exportModule.export(mode.value, fileName, null, [dateTimeControl, chart]);\n };\n var printBtn = new ej.buttons.Button({\n iconCss: 'e-icons e-print-icon', cssClass: 'e-flat', isPrimary: true,\n });\n printBtn.appendTo('#printBtn');\n document.getElementById('printBtn').onclick = function () {\n dateTimeControl.print(['container', 'chart']);\n };\n};\n\n var datasrc;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/export-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n datasrc.map(function (data) {\n data.xDate = new Date(data.xDate);\n });\n _this.renderChart(datasrc);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/export.html b/src/range-navigator/export.html index fed761b2..15512807 100644 --- a/src/range-navigator/export.html +++ b/src/range-navigator/export.html @@ -78,10 +78,10 @@

                                \n\n \n\n \n\n
                                \n

                                Filter From Hire Date

                                \n

                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample range navigator with filter functionalities\n */\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n this.renderFilterChart = function (datasrc) {\n var grid = new ej.grids.Grid({\n height: '350',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n columns: [\n { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Center' },\n { field: 'FirstName', headerText: 'Name', textAlign: 'Center' },\n { field: 'Title', headerText: 'Title', textAlign: 'Center' },\n {\n field: 'HireDate', headerText: 'Hire Date', textAlign: 'Center',\n format: { skeleton: 'yMd', type: 'date' }\n }\n ],\n });\n grid.appendTo('#grid');\n var range = new ej.charts.RangeNavigator({\n animationDuration: 500,\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n value: [new Date(1992, 5, 1), new Date(1993, 4, 1)],\n valueType: 'DateTime',\n allowSnapping: true,\n intervalType: 'Quarter',\n enableGrouping: true,\n groupBy: 'Years',\n enableDeferredUpdate: true,\n dataSource: datasrc, xName: 'HireDate', yName: 'yValue',\n changed: function (args) {\n grid.dataSource = datasrc.filter(function (data) {\n return (data.HireDate >= new Date(+args.start) && data.HireDate <= new Date(+args.end));\n });\n grid.refresh();\n },\n theme: theme\n });\n range.appendTo('#container');\n };\n \n var datasrc;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/grid-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n datasrc.map(function (data) {\n data.HireDate = new Date(data.HireDate);\n });\n _this.renderFilterChart(datasrc);\n };\n "} \ No newline at end of file diff --git a/src/range-navigator/filter.js b/src/range-navigator/filter.js index 0e2c749e..f4cd3cda 100644 --- a/src/range-navigator/filter.js +++ b/src/range-navigator/filter.js @@ -4,7 +4,7 @@ var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; var theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); - this.renderChart = function (datasrc) { + this.renderFilterChart = function (datasrc) { var grid = new ej.grids.Grid({ height: '350', width: ej.base.Browser.isDevice ? '100%' : '80%', @@ -49,6 +49,6 @@ datasrc.map(function (data) { data.HireDate = new Date(data.HireDate); }); - _this.renderChart(datasrc); + _this.renderFilterChart(datasrc); }; }; \ No newline at end of file diff --git a/src/range-navigator/light-weight-stack.json b/src/range-navigator/light-weight-stack.json new file mode 100644 index 00000000..1fa728e5 --- /dev/null +++ b/src/range-navigator/light-weight-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n

                                Calculate the Business and Weekend days in a period

                                \n

                                \n \n \n \n \n\n \n
                                \n \n \n \n \n \n
                                Total Business Days:
                                \n                                 		\n \n \n \n \n \n
                                Total Weekend Days:
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator without series\n */\nfunction GetDateTimeData(start, end, min, max, inc) {\n var series1 = [];\n var point = {};\n var value = 100;\n var date;\n inc = inc ? inc : 1;\n for (var i = 0; start <= end; i += inc) {\n date = start.getTime();\n if (min || max) {\n value = getRandomInt(min, max);\n }\n else {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n }\n point = { x: new Date(date), y: value };\n new Date(start.setDate(start.getDate() + 1));\n series1.push(point);\n }\n return series1;\n}\nfunction getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n\n var range = new ej.charts.RangeNavigator({\n valueType: 'DateTime',\n intervalType: 'Months',\n labelFormat: 'MMM',\n value: [new Date('2018-06-01'), new Date('2018-07-01')],\n dataSource: GetDateTimeData(new Date('2018-01-01'), new Date('2019-01-01')),\n xName: 'x', yName: 'y',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme,\n navigatorStyleSettings: {\n thumb: {\n type: 'Rectangle'\n },\n },\n changed: (function (args) {\n var currentDate = new Date(+args.start);\n var workingDaysCount = 0;\n var holidaysDaysCount = 0;\n while (currentDate <= new Date(+args.end)) {\n if (currentDate.getDay() > 0 && currentDate.getDay() <= 5) {\n workingDaysCount++;\n }\n else {\n holidaysDaysCount++;\n }\n currentDate.setDate(currentDate.getDate() + 1);\n }\n document.getElementById('workingcount').innerHTML = ' ' + workingDaysCount;\n document.getElementById('weekendcount').innerHTML = ' ' + holidaysDaysCount;\n })\n });\n range.appendTo('#datetime');\n "} \ No newline at end of file diff --git a/src/range-navigator/logarithmic-stack.json b/src/range-navigator/logarithmic-stack.json new file mode 100644 index 00000000..c4fc6a75 --- /dev/null +++ b/src/range-navigator/logarithmic-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n

                                Inflation vs Goods Consumers

                                \n
                                \n
                                \n\n
                                \n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator with logarithmic axis.\n */\nvar data = [];\nvar max = 100;\nfor (var i = 0; i < 100; i++) {\n data.push({\n x: Math.pow(10, i * 0.1),\n y: Math.floor(Math.random() * (80 - 30 + 1)) + 30\n });\n}\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\nvar regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)',\n 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)'];\n\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'Logarithmic', crosshairTooltip: { enable: false }, interval: 1,\n edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 },\n title: 'Numers of Goods Consumers'\n },\n primaryYAxis: { title: 'Inflation', minimum: 0, maximum: 100, labelFormat: '{value}%', majorTickLines: { width: 0 }, lineStyle: { width: 0 } },\n chartArea: { border: { width: 0 } },\n series: [{\n dataSource: data, xName: 'x', yName: 'y', width: 2,\n animation: { enable: false }, type: 'StepArea', marker: { visible: true },\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n crosshair: { enable: false, lineType: 'Vertical' },\n height: '350',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n tooltip: { enable: true },\n labelPosition: 'Outside',\n labelIntersectAction: 'None',\n valueType: 'Logarithmic',\n interval: 1,\n series: [{ dataSource: data, xName: 'x', yName: 'y', width: 2, type: 'StepLine' }],\n value: [4, 6],\n labelRender: function (args) {\n args.text = (+args.text).toExponential().toLocaleUpperCase();\n },\n tooltipRender: function (args) {\n args.text = [(+(+args.text).toFixed(1)).toExponential(1).toString().toLocaleUpperCase()];\n },\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/range-navigator/multilevel-stack.json b/src/range-navigator/multilevel-stack.json new file mode 100644 index 00000000..764ce583 --- /dev/null +++ b/src/range-navigator/multilevel-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n

                                Multi Level Labels

                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for multi level labels without series\n */\nvar logData = [];\n var value = 0;\n var point = {};\n for (var j = 1; j < 1090; j++) {\n value += (Math.random() * 10 - 5);\n value = value < 0 ? Math.abs(value) : value;\n point = { x: new Date(2000, 0, j), y: value, z: value + 10 };\n logData.push(point);\n }\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n \n var range = new ej.charts.RangeNavigator({\n labelPosition: 'Outside',\n tooltip: { enable: true, displayMode: 'Always' },\n valueType: 'DateTime',\n intervalType: 'Quarter',\n enableGrouping: true,\n groupBy: 'Years',\n value: [new Date('2001-01-01'), new Date('2002-01-01')],\n dataSource: logData, xName: 'x', yName: 'y',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme\n });\n range.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/range-navigator/period-selector-default-stack.json b/src/range-navigator/period-selector-default-stack.json new file mode 100644 index 00000000..a60ed90f --- /dev/null +++ b/src/range-navigator/period-selector-default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for stock chart\n */\nvar selectedThemes = location.hash.split('/')[1];\nselectedThemes = selectedTheme ? selectedTheme : 'Material';\nvar themes = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n plotOffset: 25,\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n },\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,\n majorTickLines: { width: 0 },title: 'Momentum', stripLines: [\n {\n start: 80, end: 120, text: '', visible: true,\n opacity: 0.03, zIndex: 'Behind', color: 'black'\n }\n ]\n }],\n series: [{\n dataSource: window.chartData, width: 2,\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n margin: { top: 0 },\n indicators: [{\n type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }\n }],\n tooltip: {\n enable: true, shared: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n theme: themes,\n legendSettings: { visible: false }\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n labelPosition: 'Outside',\n valueType: 'DateTime',\n value: [new Date(2014, 0), new Date(2015, 0)],\n series: [{ dataSource: window.chartData, xName: 'x', yName: 'high', type: 'Line', width: 1 }],\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n theme: themes,\n margin: { right: 0, left: 0, top: 0, bottom: 0 },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n periodSelectorSettings: {\n position: 'Top',\n height: 56,\n periods: [\n { text: '1M', interval: 1, intervalType: 'Months' },\n { text: '2M', interval: 2, intervalType: 'Months' },\n { text: '6M', interval: 6, intervalType: 'Months' },\n { text: 'YTD' },\n { text: '1Y', interval: 1, intervalType: 'Years' },\n { text: '2Y', interval: 2, intervalType: 'Years' },\n { text: 'ALL' }\n ]\n },\n loaded: function (args) {\n if (!ej.base.Browser.isDevice) {\n document.getElementById('container_Secondary_Element').style.transform = 'translate(13%)';\n }\n },\n load: function (args) {\n args.rangeNavigator.dateTimeModule = new ej.charts.DateTime(args.rangeNavigator);\n args.rangeNavigator.rangeTooltipModule = new ej.charts.RangeTooltip(args.rangeNavigator);\n args.rangeNavigator.periodSelectorModule = new ej.charts.PeriodSelector(args.rangeNavigator);\n args.rangeNavigator.logarithmicModule = new ej.charts.Logarithmic(args.rangeNavigator);\n args.rangeNavigator.areaSeriesModule = new ej.charts.AreaSeries(args.rangeNavigator);\n args.rangeNavigator.stepLineSeriesModule = new ej.charts.StepLineSeries(args.rangeNavigator);\n args.rangeNavigator.periodSelectorSettings.height = document.body.className.indexOf('e-bigger') > -1 ? 56 : 42;\n }\n });\n range.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/range-navigator/period-selector-stack.json b/src/range-navigator/period-selector-stack.json new file mode 100644 index 00000000..d4b55757 --- /dev/null +++ b/src/range-navigator/period-selector-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n Bitcoin (USD) Price\n
                                \n
                                \n
                                \n
                                \n \n \n \n
                                \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Sample for stock chart\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar removeSecondaryElement;\nvar datasrc;\nvar data1 = [];\nvar value;\nthis.renderPeriodSelectorChart = function (data1) {\n var chart = new ej.charts.Chart({\n series: [{\n dataSource: data1, width: 2, type: 'Candle', animation: { enable: true }, xName: 'date', low: 'Low',\n high: 'High', close: 'Close', volume: 'Volume', open: 'Open', name: 'Bitcoin', bearFillColor: '#2ecd71',\n bullFillColor: '#e74c3d', yName: 'Close'\n }], width: ej.base.Browser.isDevice ? '100%' : '80%', crosshair: { enable: true },\n annotations: [{ content: '
                                ', coordinateUnits: 'Pixel', region: 'Chart', x: '15%', y: '25%' }],\n zoomSettings: { enableMouseWheelZooming: true, mode: 'X', toolbarItems: [] }, tooltip: { enable: true, shared: true },\n chartArea: { border: { width: 0 } }, theme: theme, legendSettings: { visible: false }, height: '250',\n axisLabelRender: function (args) {\n if (args.axis.opposedPosition) {\n var value_1 = Math.round(Number(args.text)) / 1000;\n args.text = '$' + String(value_1) + 'k';\n }\n }, primaryYAxis: { labelFormat: 'n0', opposedPosition: true, lineStyle: { width: 0 } },\n tooltipRender: function (args) {\n if (args.text.length > 0) {\n var text = args.text.split('
                                ');\n var html = '' + text[0] + '';\n var value_2;\n for (var i = 1; i < text.length; i++) {\n value_2 = text[i].split(':');\n html += '';\n }\n html += '
                                ' + value_2[0] + ':$' +\n (+value_2[1].split(' ')[1].split('')[0]).toFixed(2) + '
                                ';\n chart.setAnnotationValue(0, '
                                ' + html + '
                                ');\n }\n args.text = '';\n }, primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift' },\n chartMouseMove: function () {\n if (!ej.charts.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n removeSecondaryElement();\n }\n },\n load: function (args) {\n args.chart.tooltip.format = args.chart.series[0].type === 'Candle' ?\n '${point.x}
                                High : ${point.high}
                                Low : ${point.low}
                                ' +\n 'Open : ${point.open}
                                Close : ${point.close}' :\n '${point.x}
                                Close : ${point.close}';\n document.getElementById('switch').style.display = \"block\";\n }, axisRangeCalculated: function (args) { chart.setAnnotationValue(0, '
                                '); },\n });\n chart.appendTo('#chart');\n removeSecondaryElement = function () {\n setTimeout(function () {\n if (ej.charts.getElement('annotation')) {\n ej.base.remove(ej.charts.getElement('annotation'));\n }\n }, 2000);\n };\n var rangeTop = new ej.charts.RangeNavigator({\n loaded: function (args) {\n if (!ej.base.Browser.isDevice) {\n document.getElementById('container_Secondary_Element').style.transform = 'translate(13%)';\n }\n }, disableRangeSelector: true, width: ej.base.Browser.isDevice ? '100%' : '80%',\n load: function (args) {\n args.rangeNavigator.periodSelectorSettings.height = document.body.className.indexOf('e-bigger') > -1 ? 56 : 42;\n }, labelPosition: 'Outside', valueType: 'DateTime', dataSource: data1, xName: 'date', yName: 'Close', theme: theme,\n periodSelectorSettings: {\n periods: [{ text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },\n { text: '6M', interval: 6, intervalType: 'Months' }, { text: '1Y', interval: 1, intervalType: 'Years' },\n { text: '2Y', interval: 2, intervalType: 'Years', selected: true }, { text: 'ALL' }], position: 'Top',\n }\n });\n rangeTop.appendTo('#container');\n var switchObj = new ej.buttons.Switch({\n change: function (args) {\n chart.series[0].type = !args.checked ? 'Line' : 'Candle';\n chart.annotations[0].content = '';\n chart.refresh();\n }, name: 'Closing Value', cssClass: 'custom-iOS', value: 'Closing value', checked: true,\n });\n switchObj.appendTo('#switch');\n var rangeBottom = new ej.charts.RangeNavigator({\n labelPosition: 'Outside', valueType: 'DateTime', series: [{ dataSource: data1, xName: 'date', yName: 'Close' }],\n changed: function (args) {\n rangeTop.periodSelectorModule.datePicker.startDate = args.start;\n rangeTop.periodSelectorModule.datePicker.endDate = args.end;\n rangeTop.dataBind();\n chart.primaryXAxis.zoomFactor = 1;\n chart.primaryXAxis.zoomPosition = 0;\n var filterData = data1.filter(function (data) {\n return (data.date.getTime() >= args.start.getTime() &&\n data.date.getTime() <= args.end.getTime());\n });\n chart.series[0].animation.enable = false;\n chart.series[0].dataSource = filterData;\n chart.setAnnotationValue(0, '
                                ');\n chart.refresh();\n }, width: ej.base.Browser.isDevice ? '100%' : '80%', value: [new Date('2016-05-15'), new Date('2018-05-15')], theme: theme,\n });\n rangeBottom.appendTo('#range');\n rangeTop.changed = function (args) {\n rangeBottom.rangeSlider.setSlider(args.start.getTime(), args.end.getTime(), false, false);\n var filterData = data1.filter(function (data) {\n return (data.date.getTime() >= args.start.getTime() &&\n data.date.getTime() <= args.end.getTime());\n });\n chart.series[0].animation.enable = false;\n chart.series[0].dataSource = filterData;\n chart.refresh();\n chart.setAnnotationValue(0, '
                                ');\n };\n};\n\n var datasrc;\n var data1 = [];\n var value;\n var j = 2100;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/period-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n for (var i = 0; i < datasrc.length; i++) {\n value = datasrc[i];\n data1.push({\n High: value.High, Low: value.Low, Close: value.Close, Open: value.Open, date: new Date(2010, 6, j)\n });\n j++;\n }\n _this.renderPeriodSelectorChart(data1);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/period-selector-stocks-stack.json b/src/range-navigator/period-selector-stocks-stack.json new file mode 100644 index 00000000..2cc950d3 --- /dev/null +++ b/src/range-navigator/period-selector-stocks-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                AAPL 2012-2015
                                \n
                                \n
                                159.67
                                \n
                                   +11.49 (+1.06%)
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n
                                ","index.js":"{{ripple}}/**\n * Sample for stock chart\n */\n var index = 0;\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n var removeSecondaryElement;\n var periodsValue = {\n position: 'Top',\n periods: [\n { text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },\n { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },\n { text: '1Y', interval: 1, intervalType: 'Years' },\n { text: '2Y', interval: 2, intervalType: 'Years', selected: true\n },\n { text: 'All' }\n ]\n };\n var annotationString = '
                                ';\n removeSecondaryElement = function () {\n setTimeout(function () {\n if (ej.charts.getElement('annotation')) {\n ej.base.remove(ej.charts.getElement('annotation'));\n }\n }, 2000);\n };\n var range;\n var pointColors = [];\n var chartSeries = [{\n dataSource: window.chartData, width: 2, type: 'Candle', animation: { enable: true },\n xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d'\n }, {\n dataSource: window.chartData, width: 2, type: 'Column', animation: { enable: true },\n xName: 'x', yName: 'volume', yAxisName: 'secondary'\n }];\n var getContent = function (value) {\n var text = value.split('
                                ');\n var html = '' + text[0] + '';\n for (var i = 1; i < text.length; i++) {\n var value1 = text[i].split(':');\n if (i === text.length - 1) {\n html += '';\n }\n }\n return html;\n };\n \n var chart = new ej.charts.Chart({\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } },\n annotations: [\n { content: '
                                ', coordinateUnits: 'Pixel', region: 'Chart', x: '15%', y: '20%' }\n ],\n primaryYAxis: {\n crosshairTooltip: { enable: true }, labelFormat: 'n0', plotOffset: 25,\n rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }, rangePadding: 'None', majorGridLines: { width: 0 }\n }, rows: [{ height: '30%' }, { height: '70%' }],\n axes: [{\n name: 'secondary', opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, rangePadding: 'None'\n }], height: '350',\n axisLabelRender: function (args) {\n if (args.axis.name === 'secondary') {\n args.text = Math.round((args.value / 10000000)) + 'B';\n }\n else if (args.axis.orientation === 'Vertical') {\n args.text = '$' + Math.round(args.value);\n }\n },\n axisRangeCalculated: function (args) {\n chart.setAnnotationValue(0, '
                                ');\n },\n loaded: function (args) {\n var labels = (args.chart.axisCollections[0]).visibleLabels;\n var maxValue = args.chart.axisCollections[0].visibleRange.max;\n if (args.chart.primaryXAxis.stripLines.length === 1) {\n for (var i = 0; i < labels.length; i += 2) {\n args.chart.primaryXAxis.stripLines.push({\n start: new Date(labels[i].value), end: labels[i + 1] ? new Date(labels[i + 1].value) : new Date(maxValue),\n zIndex: 'Behind', border: { width: 0, color: 'transparent' }, rotation: null,\n opacity: 0.7, textStyle: {}, text: '', color: 'whitesmoke', visible: true\n });\n }\n args.chart.refresh();\n }\n },\n series: chartSeries, tooltip: {\n enable: true, shared: true,\n format: '${point.x}
                                High : ${point.high}
                                Low :' +\n ' ${point.low}
                                Open : ${point.open}
                                Close : ${point.close}
                                Volume : ${point.volume}'\n },\n indicators: [{\n type: 'Tma', period: 3, fastPeriod: 8, slowPeriod: 5, seriesName: 'Apple Inc', macdType: 'Both', width: 2,\n macdPositiveColor: '#2ecd71', macdNegativeColor: '#e74c3d', fill: '#6063ff'\n }],\n tooltipRender: function (args) {\n if (args.series.type === 'Candle') {\n chart.setAnnotationValue(0, annotationString + (getContent(args.text) + '
                                ' + value1[0] + '' +\n Math.round(((+value1[1].split('')[0].split('')[1]) / 10000000)) + 'B';\n }\n else {\n html += '
                                ' + value1[0] + '$' +\n (+value1[1].split(' ')[1].split('')[0]).toFixed(2) + '
                                ') + '
                                ');\n }\n args.text = '';\n },\n pointRender: function (args) {\n if (args.series.type === 'Candle') {\n pointColors.push(args.fill);\n }\n else {\n args.fill = pointColors[args.point.index];\n }\n },\n chartMouseLeave: function (args) { removeSecondaryElement(); },\n chartMouseMove: function (args) {\n if (!ej.charts.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n removeSecondaryElement();\n }\n }, margin: { top: 0 }, chartArea: { border: { width: 1, color: 'whitesmoke' } },\n zoomSettings: { enableMouseWheelZooming: true, enablePinchZooming: true, mode: 'XY', toolbarItems: [] }, crosshair: { enable: true, lineType: 'Both' },\n width: ej.base.Browser.isDevice ? '100%' : '80%', theme: theme, legendSettings: { visible: false }\n });\n chart.appendTo('#chart');\n range = new ej.charts.RangeNavigator({\n valueType: 'DateTime',\n disableRangeSelector: true,\n dataSource: window.chartData, xName: 'x', yName: 'close', theme: theme,\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n load: function (args) {\n args.rangeNavigator.periodSelectorSettings.height = document.body.className.indexOf('e-bigger') > -1 ? 56 : 42;\n }, periodSelectorSettings: periodsValue,\n loaded: function (args) {\n if (!ej.base.Browser.isDevice) {\n document.getElementById('container_Secondary_Element').style.transform = 'translate(14%)';\n }\n var value = range.svgObject.getBoundingClientRect().left - range.element.getBoundingClientRect().left;\n document.getElementById('stockRange').style.transform = 'translateX(' + (value - 10) + 'px)';\n },\n changed: function (args) {\n var data = window.chartData.filter(function (data) {\n return (data.x.getTime() >= args.start.getTime() &&\n data.x.getTime() <= args.end.getTime());\n });\n chart.series[0].animation.enable = false;\n chart.primaryXAxis.zoomPosition = 0;\n chart.primaryXAxis.zoomFactor = 1;\n chart.series[1].animation.enable = false;\n chart.primaryXAxis.stripLines = [{ visible: true }];\n chart.indicators[0].animation.enable = false;\n pointColors = [];\n chart.series[0].dataSource = data;\n chart.series[1].dataSource = data;\n chart.refresh();\n chart.setAnnotationValue(0, '
                                ');\n }\n });\n range.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/range-navigator/period-selector-stocks.js b/src/range-navigator/period-selector-stocks.js index 774b7b39..09624823 100644 --- a/src/range-navigator/period-selector-stocks.js +++ b/src/range-navigator/period-selector-stocks.js @@ -122,7 +122,7 @@ removeSecondaryElement(); } }, margin: { top: 0 }, chartArea: { border: { width: 1, color: 'whitesmoke' } }, - zoomSettings: { enableMouseWheelZooming: true, mode: 'X', toolbarItems: [] }, crosshair: { enable: true, lineType: 'Both' }, + zoomSettings: { enableMouseWheelZooming: true, enablePinchZooming: true, mode: 'XY', toolbarItems: [] }, crosshair: { enable: true, lineType: 'Both' }, width: ej.base.Browser.isDevice ? '100%' : '80%', theme: theme, legendSettings: { visible: false } }); chart.appendTo('#chart'); diff --git a/src/range-navigator/period-selector.html b/src/range-navigator/period-selector.html index 6dc5e338..cca916c8 100644 --- a/src/range-navigator/period-selector.html +++ b/src/range-navigator/period-selector.html @@ -40,6 +40,9 @@
                                \n

                                Inflation - Consumer Price

                                \n
                                \n
                                \n
                                \n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                ","index.js":"{{ripple}}/**\n * Sample for range navigator with RTL support\n */\nvar _this = this;\nvar selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nvar themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\nvar borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4'];\nvar regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)',\n 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)'];\nthis.renderRTLChart = function (datasrc) {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', crosshairTooltip: { enable: true }, edgeLabelPlacement: 'Shift',\n isInversed: true, majorGridLines: { width: 0 }\n },\n primaryYAxis: {\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelFormat: '{value}%',\n maximum: 87, minimum: 82, interval: 1\n },\n chartArea: { border: { width: 0 } },\n series: [{\n dataSource: datasrc, xName: 'xDate', yName: 'High', width: 2, type: 'Area',\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)', name: 'Profit',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n tooltip: { enable: true, shared: true, header: 'England', format: '${point.x} : ${point.y}' },\n height: '350',\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n theme: theme, legendSettings: { visible: false }\n });\n chart.appendTo('#chart');\n var range = new ej.charts.RangeNavigator({\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n valueType: 'DateTime',\n tooltip: { enable: true, displayMode: 'Always' },\n intervalType: 'Years',\n value: [new Date('2014-01-01'), new Date('2015-12-31')],\n series: [{\n dataSource: datasrc, xName: 'xDate', yName: 'High', type: 'Area',\n fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)',\n border: { width: 2, color: borderColor[themes.indexOf(theme)] }\n }],\n enableRtl: true,\n changed: function (args) {\n chart.primaryXAxis.zoomFactor = args.zoomFactor;\n chart.primaryXAxis.zoomPosition = args.zoomPosition;\n chart.dataBind();\n },\n theme: theme\n });\n range.appendTo('#container');\n};\n\n var datasrc;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/range-navigator/data-source/axes-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n datasrc = JSON.parse(data);\n datasrc.map(function (data) {\n data.xDate = new Date(data.xDate);\n });\n _this.renderRTLChart(datasrc);\n };\n"} \ No newline at end of file diff --git a/src/range-navigator/right-to-left.js b/src/range-navigator/right-to-left.js index 322aa28a..2385f9f5 100644 --- a/src/range-navigator/right-to-left.js +++ b/src/range-navigator/right-to-left.js @@ -9,7 +9,7 @@ var themes = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast']; var borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#79ECE4']; var regionColor = ['rgba(0, 189, 174, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(121, 236, 228, 0.3)']; -this.renderChart = function (datasrc) { +this.renderRTLChart = function (datasrc) { var chart = new ej.charts.Chart({ primaryXAxis: { valueType: 'DateTime', crosshairTooltip: { enable: true }, edgeLabelPlacement: 'Shift', @@ -61,6 +61,6 @@ this.default = function () { datasrc.map(function (data) { data.xDate = new Date(data.xDate); }); - _this.renderChart(datasrc); + _this.renderRTLChart(datasrc); }; }; \ No newline at end of file diff --git a/src/range-navigator/sample.json b/src/range-navigator/sample.json index bb7be2b6..676332f3 100644 --- a/src/range-navigator/sample.json +++ b/src/range-navigator/sample.json @@ -61,7 +61,7 @@ { "url": "logarithmic", "name": "Logarithmic Axis", - "description": "This demo for Essential JS2 Range Navigator control shows how to visualize the logarithmic scale when data has values with both lower (e.g.: 10^-6) and higher (e.g.: 10^6) orders of magnitude.", + "description": "This demo for Essential JS2 Range Navigator control shows how to visualize and configure the logarithmic scale.", "category": "Axis", "api": { "RangeNavigator": [ @@ -75,7 +75,7 @@ { "url": "multilevel", "name": "Multilevel Labels", - "description": "This demo for Essential JS2 Range Navigator control shows how to display the second level labels.", + "description": "This demo for Essential JS2 Range Navigator control shows how to display the second level labels for a given range.", "category": "Axis", "api": { "RangeNavigator": [ @@ -142,7 +142,7 @@ { "url": "export", "name": "Print and Export", - "description": "This demo for Essential JS2 Range Navigator control shows how to print the charts and export the chart contents to SVG, PDF, JPEG, PNG, and Excel formats at client-side.", + "description": "This demo for Essential JS2 Range Navigator control shows how to print the charts and export the chart contents to various formats.", "category": "Export", "api": { "RangeNavigator": [ diff --git a/src/rich-text-editor/ajax-load-stack.json b/src/rich-text-editor/ajax-load-stack.json index 8cf81356..f4756599 100644 --- a/src/rich-text-editor/ajax-load-stack.json +++ b/src/rich-text-editor/ajax-load-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor Ajax content sample\n */\nvar defaultRTE;\n\n var ajax = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/rich-text-editor/ajax-content.html', 'GET', false);\n ajax.send().then(function(data) {\n defaultRTE = new ej.richtexteditor.RichTextEditor({ value: data });\n defaultRTE.appendTo('#defaultRTE');\n });\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor Ajax content sample\n */\nvar defaultRTE;\n\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/rich-text-editor/ajax-content.html', 'GET', false);\n ajax.send().then(function(data) {\n defaultRTE = new ej.richtexteditor.RichTextEditor({ value: data });\n defaultRTE.appendTo('#defaultRTE');\n });\n"} \ No newline at end of file diff --git a/src/rich-text-editor/api-stack.json b/src/rich-text-editor/api-stack.json index eead4324..7014ac3e 100644 --- a/src/rich-text-editor/api-stack.json +++ b/src/rich-text-editor/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n
                                \n

                                RichTextEditor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

                                \n

                                API’s:

                                \n
                                  \n
                                • \n

                                  maxLength - allows to restrict the maximum length to be entered.

                                  \n
                                  • \n
                                • \n

                                  readOnly - allows to change it as non-editable state.

                                  \n
                                  • \n
                                • \n

                                  enabled - enable or disable the RTE component.

                                  \n
                                  • \n
                                • \n

                                  enableHtmlEncode - Get the encoded string value through value property and source code panel

                                  \n
                                  • \n
                                • \n

                                  getValue - get the value of RTE.

                                  \n
                                  • \n
                                • \n

                                  getSelection - get the selected text of RTE.

                                  \n
                                  • \n
                                • \n

                                  selectAll - select all content in RTE.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Maximum Length
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                ReadOnly
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Enabled
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Enable Html Encode
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor API sample\n */\n\n var defaultAPI = new ej.richtexteditor.RichTextEditor({\n showCharCount: true,\n maxLength: 1000,\n });\n defaultAPI.appendTo(\"#defaultRTE\");\n\n var maxLength = new ej.inputs.NumericTextBox({\n value: 560,\n min: 555,\n max: 2000,\n format: 'n0',\n change: function (e) {\n defaultAPI.maxLength = maxLength.value;\n }\n });\n maxLength.appendTo('#maxlength');\n var readonly = new ej.buttons.CheckBox({\n // set false for enable the checked state at initial rendering\n checked: false,\n // bind change event\n change: function (args) {\n defaultAPI.readonly = (args).checked;\n }\n });\n readonly.appendTo('#readonly');\n var enable = new ej.buttons.CheckBox({\n // set false for enable the checked state at initial rendering\n checked: true,\n // bind change event\n change: function (args) {\n defaultAPI.enabled = (args).checked;\n }\n });\n enable.appendTo('#enable');\n var enablehtml = new ej.buttons.CheckBox({\n // set false for enable the checked state at initial rendering\n checked: false,\n // bind change event\n change: function (args) {\n defaultAPI.enableHtmlEncode = (args).checked;\n }\n });\n enablehtml.appendTo('#enablehtml');\n document.getElementById('getVal').onclick = function () {\n alert(defaultAPI.value);\n };\n document.getElementById('selectHtml').onclick = function () {\n alert(defaultAPI.getSelection());\n };\n document.getElementById('selectall').onclick = function () {\n defaultAPI.selectAll();\n };\n\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n

                                RichTextEditor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

                                \n

                                API’s:

                                \n
                                  \n
                                • \n

                                  maxLength - allows to restrict the maximum length to be entered.

                                  \n
                                  • \n
                                • \n

                                  readOnly - allows to change it as non-editable state.

                                  \n
                                  • \n
                                • \n

                                  enabled - enable or disable the RTE component.

                                  \n
                                  • \n
                                • \n

                                  enableHtmlEncode - Get the encoded string value through value property and source code panel

                                  \n
                                  • \n
                                • \n

                                  getValue - get the value of RTE.

                                  \n
                                  • \n
                                • \n

                                  getSelection - get the selected text of RTE.

                                  \n
                                  • \n
                                • \n

                                  selectAll - select all content in RTE.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Maximum Length
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                ReadOnly
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Enabled
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Enable Html Encode
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor API sample\n */\n\n var defaultAPI = new ej.richtexteditor.RichTextEditor({\n showCharCount: true,\n maxLength: 1000,\n });\n defaultAPI.appendTo(\"#defaultRTE\");\n\n var maxLength = new ej.inputs.NumericTextBox({\n value: 560,\n min: 555,\n max: 2000,\n format: 'n0',\n change: function (e) {\n defaultAPI.maxLength = maxLength.value;\n }\n });\n maxLength.appendTo('#maxlength');\n var readonly = new ej.buttons.CheckBox({\n // set false for disable the checked state at initial rendering\n checked: false,\n // bind change event\n change: function (args) {\n defaultAPI.readonly = (args).checked;\n }\n });\n readonly.appendTo('#readonly');\n var enable = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // bind change event\n change: function (args) {\n defaultAPI.enabled = (args).checked;\n }\n });\n enable.appendTo('#enable');\n var enablehtml = new ej.buttons.CheckBox({\n // set false for disable the checked state at initial rendering\n checked: false,\n // bind change event\n change: function (args) {\n defaultAPI.enableHtmlEncode = (args).checked;\n }\n });\n enablehtml.appendTo('#enablehtml');\n document.getElementById('getVal').onclick = function () {\n alert(defaultAPI.value);\n };\n document.getElementById('selectHtml').onclick = function () {\n alert(defaultAPI.getSelection());\n };\n document.getElementById('selectall').onclick = function () {\n defaultAPI.selectAll();\n };\n\n "} \ No newline at end of file diff --git a/src/rich-text-editor/api.js b/src/rich-text-editor/api.js index 17c9742f..82d1bd8a 100644 --- a/src/rich-text-editor/api.js +++ b/src/rich-text-editor/api.js @@ -20,7 +20,7 @@ this.default = function() { }); maxLength.appendTo('#maxlength'); var readonly = new ej.buttons.CheckBox({ - // set false for enable the checked state at initial rendering + // set false for disable the checked state at initial rendering checked: false, // bind change event change: function (args) { @@ -29,7 +29,7 @@ this.default = function() { }); readonly.appendTo('#readonly'); var enable = new ej.buttons.CheckBox({ - // set false for enable the checked state at initial rendering + // set true for enable the checked state at initial rendering checked: true, // bind change event change: function (args) { @@ -38,7 +38,7 @@ this.default = function() { }); enable.appendTo('#enable'); var enablehtml = new ej.buttons.CheckBox({ - // set false for enable the checked state at initial rendering + // set false for disable the checked state at initial rendering checked: false, // bind change event change: function (args) { diff --git a/src/rich-text-editor/blog-posting-stack.json b/src/rich-text-editor/blog-posting-stack.json index 66694325..8cbe33e9 100644 --- a/src/rich-text-editor/blog-posting-stack.json +++ b/src/rich-text-editor/blog-posting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                Kimberly
                                \n
                                \n
                                \n
                                \n
                                \n How to add a custom item to the toolbar of RichTextEditor\n
                                \n
                                Posted on May 7, 2018 6.10 PM
                                \n
                                \n I want to add a custom icon, “code-mirror” to the toolbar of RichTextEditor and display the RichTextEditor content in code-mirror format.\n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n
                                HTML
                                \n                                 		\n
                                JavaScript
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n \n \n Like\n \n \n \n \n Dislike\n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                1 Answer
                                \n
                                \n \n \n \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                Mabel Weber
                                \n
                                \n
                                Answered on May 7, 2018 6.30 PM
                                \n
                                \n
                                \n To add a custom icon\n code-mirror to the toolbar, you have to use template option of the\n toolbarSettings. To know more about adding custom icons, refer to\n custom tool sample of RichTextEditor.\n
                                \n
                                \n \n \n \n \n \n
                                \n \n \n Like\n \n \n \n \n Dislike\n \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n
                                \n
                                \n
                                \n \n \n \n \n\n \n
                                \n \n \n \n\n
                                \n
                                \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor Blog-post sample\n */\n\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#rteSubmit');\n var button2 = new ej.buttons.Button();\n button2.appendTo('#rteCancel');\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ placeholder: 'Write a reply' });\n defaultRTE.appendTo('#defaultRTE');\n var buttonEle = document.getElementById('rteSubmit');\n var cancelEle = document.getElementById('rteCancel');\n cancelEle.addEventListener('click', function (e) {\n var answerElement = defaultRTE.contentModule.getEditPanel();\n answerElement.innerHTML = '';\n defaultRTE.value = '';\n defaultRTE.dataBind();\n defaultRTE.refresh();\n });\n var empCount = 0;\n buttonEle.addEventListener('click', function (e) {\n var answerElement = defaultRTE.contentModule.getEditPanel();\n var comment = answerElement.innerHTML;\n var empList = ['emp1', 'emp2', 'emp3'];\n var nameListList = ['Anne Dodsworth', 'Janet Leverling', 'Laura Callahan'];\n if (comment !== null && comment.trim() !== '' && answerElement.innerText.trim() !== '') {\n var answer = document.querySelector('.answer');\n var cloneAnswer = answer.cloneNode(true);\n var authorName = cloneAnswer.querySelector('.authorname');\n var logo = cloneAnswer.querySelector('.logos');\n logo.classList.remove('logos');\n if (empCount < 3) {\n logo.classList.add(empList[empCount]);\n authorName.innerHTML = nameListList[empCount];\n empCount++;\n }\n else {\n logo.classList.add('logo');\n authorName.innerHTML = 'User';\n }\n var timeZone = cloneAnswer.querySelector('.detailsAnswer');\n var day = getMonthName(new Date().getMonth()) + ' ' + new Date().getDate();\n var hr = new Date().getHours() + ':' + new Date().getMinutes();\n if (new Date().getHours() > 12) {\n hr = hr + ' PM';\n }\n else {\n hr = hr + ' AM';\n }\n timeZone.innerHTML = 'Answered on ' + day + ', ' + new Date().getFullYear() + ' ' + hr;\n var postContent = cloneAnswer.querySelector('.posting');\n postContent.innerHTML = comment;\n var postElement = document.querySelector('.answerSection');\n postElement.appendChild(cloneAnswer);\n var countEle = document.querySelector('.answerCount');\n var count = parseInt(countEle.innerHTML, null);\n count = count + 1;\n countEle.innerHTML = count.toString() + ' Answers';\n answerElement.innerHTML = '';\n defaultRTE.value = '';\n defaultRTE.dataBind();\n defaultRTE.refresh();\n }\n });\n function getMonthName(index) {\n var month = [];\n month[0] = 'January';\n month[1] = 'February';\n month[2] = 'March';\n month[3] = 'April';\n month[4] = 'May';\n month[5] = 'June';\n month[6] = 'July';\n month[7] = 'August';\n month[8] = 'September';\n month[9] = 'October';\n month[10] = 'November';\n month[11] = 'December';\n return month[index];\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                Kimberly
                                \n
                                \n
                                \n
                                \n
                                \n How to add a custom item to the toolbar of RichTextEditor\n
                                \n
                                Posted on May 7, 2018 6.10 PM
                                \n
                                \n I want to add a custom icon, “code-mirror” to the toolbar of RichTextEditor and display the RichTextEditor content in code-mirror format.\n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n
                                HTML
                                \n                                 		\n
                                JavaScript
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n
                                \n \n \n Like\n \n \n \n \n Dislike\n \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                1 Answer
                                \n
                                \n \n \n \n \n \n \n \n \n
                                \n
                                \n                                 		\n
                                Mabel Weber
                                \n
                                \n
                                Answered on May 7, 2018 6.30 PM
                                \n
                                \n
                                \n To add a custom icon\n code-mirror to the toolbar, you have to use template option of the\n toolbarSettings. To know more about adding custom icons, refer to\n custom tool sample of RichTextEditor.\n
                                \n
                                \n \n \n \n \n \n
                                \n \n \n Like\n \n \n \n \n Dislike\n \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                \n
                                \n
                                \n
                                \n \n \n \n \n\n \n
                                \n \n \n \n\n
                                \n
                                \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor Blog-post sample\n */\n\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#rteSubmit');\n var button2 = new ej.buttons.Button();\n button2.appendTo('#rteCancel');\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ placeholder: 'Write a reply' });\n defaultRTE.appendTo('#defaultRTE');\n var buttonEle = document.getElementById('rteSubmit');\n var cancelEle = document.getElementById('rteCancel');\n cancelEle.addEventListener('click', function (e) {\n var answerElement = defaultRTE.contentModule.getEditPanel();\n answerElement.innerHTML = '';\n defaultRTE.value = '';\n defaultRTE.dataBind();\n defaultRTE.refresh();\n });\n var empCount = 0;\n buttonEle.addEventListener('click', function (e) {\n var answerElement = defaultRTE.contentModule.getEditPanel();\n var comment = answerElement.innerHTML;\n var empList = ['emp1', 'emp2', 'emp3'];\n var nameListList = ['Anne Dodsworth', 'Janet Leverling', 'Laura Callahan'];\n if (comment !== null && comment.trim() !== '' && answerElement.innerText.trim() !== '') {\n var answer = document.querySelector('.answer');\n var cloneAnswer = answer.cloneNode(true);\n var authorName = cloneAnswer.querySelector('.authorname');\n var logo = cloneAnswer.querySelector('.logos');\n logo.classList.remove('logos');\n if (empCount < 3) {\n logo.classList.add(empList[empCount]);\n authorName.innerHTML = nameListList[empCount];\n empCount++;\n }\n else {\n logo.classList.add('logo');\n authorName.innerHTML = 'User';\n }\n var timeZone = cloneAnswer.querySelector('.detailsAnswer');\n var day = getMonthName(new Date().getMonth()) + ' ' + new Date().getDate();\n var hr = new Date().getHours() + ':' + new Date().getMinutes();\n if (new Date().getHours() > 12) {\n hr = hr + ' PM';\n }\n else {\n hr = hr + ' AM';\n }\n timeZone.innerHTML = 'Answered on ' + day + ', ' + new Date().getFullYear() + ' ' + hr;\n var postContent = cloneAnswer.querySelector('.posting');\n postContent.innerHTML = comment;\n var postElement = document.querySelector('.answerSection');\n postElement.appendChild(cloneAnswer);\n var countEle = document.querySelector('.answerCount');\n var count = parseInt(countEle.innerHTML, null);\n count = count + 1;\n countEle.innerHTML = count.toString() + ' Answers';\n answerElement.innerHTML = '';\n defaultRTE.value = '';\n defaultRTE.dataBind();\n defaultRTE.refresh();\n }\n });\n function getMonthName(index) {\n var month = [];\n month[0] = 'January';\n month[1] = 'February';\n month[2] = 'March';\n month[3] = 'April';\n month[4] = 'May';\n month[5] = 'June';\n month[6] = 'July';\n month[7] = 'August';\n month[8] = 'September';\n month[9] = 'October';\n month[10] = 'November';\n month[11] = 'December';\n return month[index];\n }\n"} \ No newline at end of file diff --git a/src/rich-text-editor/blog-posting.html b/src/rich-text-editor/blog-posting.html index 47be5903..bcc0799c 100644 --- a/src/rich-text-editor/blog-posting.html +++ b/src/rich-text-editor/blog-posting.html @@ -177,6 +177,10 @@ clear: both; } + .highcontrast .header { + color: #fff; + } + @media (max-width: 550px) { .forum { padding: 20px 20px 60px 20px; @@ -191,6 +195,9 @@ padding: 10px 90px 60px 90px; box-shadow: 2px 2px 2px 2px #f5f5ef; } + .highcontrast .forum { + border: 1px solid #fff; + } } .e-like span { @@ -220,6 +227,10 @@ color: #000000; } + .highcontrast .explain { + color: #fff; + } + .separator { margin-top: 5px; border-bottom: 1px solid #DADADA; @@ -359,12 +370,20 @@ font-size: 13px; } + .highcontrast .posting { + color: #fff; + } + .authorname { font-family: SegoeUI-Semibold; color: #000000; font-size: 13px; } + .highcontrast .authorname { + color: #fff; + } + .detailsAnswer { color: #575757; font-size: 12px; diff --git a/src/rich-text-editor/client-side-events-stack.json b/src/rich-text-editor/client-side-events-stack.json index 1df5f8fd..33d5c3e3 100644 --- a/src/rich-text-editor/client-side-events-stack.json +++ b/src/rich-text-editor/client-side-events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n \n\n\n \n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor client side samples\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',\n 'FontName', 'FontSize', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|',\n 'Formats', 'Alignments', 'OrderedList', 'UnorderedList',\n 'Outdent', 'Indent', '|',\n 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',\n 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']\n },\n created: create,\n actionBegin: actionBegin,\n actionComplete: actionComplete,\n focus: focus,\n blur: blur,\n change: change,\n toolbarClick: toolbarClick\n });\n defaultRTE.appendTo('#defaultRTE');\n var clear = new ej.buttons.Button({});\n clear.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n function create() {\n appendElement('RichTextEditor create event called
                                ');\n }\n function actionBegin(args) {\n appendElement('' + args.requestType + ' action is called
                                ');\n handleFullScreen(args);\n }\n function actionComplete(args) {\n appendElement('' + args.requestType + ' action is completed
                                ');\n actionCompleteHandler();\n }\n function focus() {\n appendElement('RichTextEditor focus event called
                                ');\n }\n function blur() {\n appendElement('RichTextEditor blur event called
                                ');\n }\n function change() {\n appendElement('RidhTextEditor change event called
                                ');\n }\n function toolbarClick() {\n appendElement('RidhTextEditor toolbar click event called
                                ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n function actionCompleteHandler() {\n setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n \n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor client side events samples\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',\n 'FontName', 'FontSize', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|',\n 'Formats', 'Alignments', 'OrderedList', 'UnorderedList',\n 'Outdent', 'Indent', '|',\n 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',\n 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']\n },\n created: create,\n actionBegin: actionBegin,\n actionComplete: actionComplete,\n focus: focus,\n blur: blur,\n change: change,\n toolbarClick: toolbarClick\n });\n defaultRTE.appendTo('#defaultRTE');\n var clear = new ej.buttons.Button({});\n clear.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n function create() {\n appendElement('RichTextEditor create event called
                                ');\n }\n function actionBegin(args) {\n appendElement('' + args.requestType + ' action is called
                                ');\n handleFullScreen(args);\n }\n function actionComplete(args) {\n appendElement('' + args.requestType + ' action is completed
                                ');\n actionCompleteHandler();\n }\n function focus() {\n appendElement('RichTextEditor focus event called
                                ');\n }\n function blur() {\n appendElement('RichTextEditor blur event called
                                ');\n }\n function change() {\n appendElement('RidhTextEditor change event called
                                ');\n }\n function toolbarClick() {\n appendElement('RidhTextEditor toolbar click event called
                                ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n function actionCompleteHandler() {\n setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n\n "} \ No newline at end of file diff --git a/src/rich-text-editor/client-side-events.html b/src/rich-text-editor/client-side-events.html index 8c143800..d5595671 100644 --- a/src/rich-text-editor/client-side-events.html +++ b/src/rich-text-editor/client-side-events.html @@ -62,17 +62,20 @@ - - - + + +

                                This sample demonstrates the events that trigger on every action of the rich text editor. The event details are showcased in the event trace panel. @@ -105,8 +108,4 @@ padding: 5px; width: 25% } - - .sb-header { - z-index: 100; - } diff --git a/src/rich-text-editor/client-side-events.js b/src/rich-text-editor/client-side-events.js index afa521d1..014b5b25 100644 --- a/src/rich-text-editor/client-side-events.js +++ b/src/rich-text-editor/client-side-events.js @@ -1,6 +1,6 @@ /*jshint esversion: 6 */ /** - * RichTextEditor client side samples + * RichTextEditor client side events samples */ this.default = function() { var defaultRTE = new ej.richtexteditor.RichTextEditor({ diff --git a/src/rich-text-editor/code-mirror-stack.json b/src/rich-text-editor/code-mirror-stack.json index 9d2723f5..dc1539e2 100644 --- a/src/rich-text-editor/code-mirror-stack.json +++ b/src/rich-text-editor/code-mirror-stack.json @@ -1 +1 @@ -{"index.html":"\n\n

                                \n
                                \n
                                \n
                                \n

                                The rich text editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid HTML markup or markdown of the content

                                \n

                                Toolbar

                                \n
                                  \n
                                1. \n

                                  Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations,HTML view, etc

                                  \n
                                  2. \n
                                2. \n

                                  Toolbar is fully customizable

                                  \n
                                  3. \n
                                \n

                                Links

                                \n
                                  \n
                                1. \n

                                  You can insert a hyperlink with its corresponding dialog

                                  \n
                                  2. \n
                                2. \n

                                  Attach a hyperlink to the displayed text.

                                  \n
                                  3. \n
                                3. \n

                                  Customize the quick toolbar based on the hyperlink

                                  \n
                                  4. \n
                                \n

                                Image.

                                \n
                                  \n
                                1. \n

                                  Allows you to insert images from an online source as well as the local computer

                                  \n
                                  2. \n
                                2. \n

                                  You can upload an image

                                  \n
                                  3. \n
                                3. \n

                                  Provides an option to customize quick toolbar for an image

                                  \n
                                  4. \n
                                \n \"Logo\"\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor code-mirror sample\n */\nvar defaultRTE;\nvar divPreview;\n\n defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: [{\n template: ''\n }, 'Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']\n },\n created: onCreated\n });\n defaultRTE.appendTo('#defaultRTE');\n function onCreated() {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n setTimeout(function () { mirrorConversion(); }, 100);\n }\n divPreview = document.getElementById('DIV_Preview');\n var textArea = defaultRTE.contentModule.getEditPanel();\n var myCodeMirror;\n divPreview.addEventListener('click', function (e) {\n mirrorConversion();\n if (e.target.parentElement.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n }\n });\n function mirrorConversion() {\n var id = defaultRTE.getID() + 'mirror-view';\n var mirrorView = defaultRTE.element.querySelector('#' + id);\n var iconEle = divPreview.querySelector('span');\n if (divPreview.classList.contains('e-active')) {\n divPreview.classList.remove('e-active');\n iconEle.classList.add('e-html-preview');\n iconEle.classList.remove('e-code-mirror');\n textArea.style.display = 'block';\n mirrorView.style.display = 'none';\n textArea.innerHTML = myCodeMirror.getValue();\n }\n else {\n divPreview.classList.add('e-active');\n iconEle.classList.remove('e-html-preview');\n iconEle.classList.add('e-code-mirror');\n if (!mirrorView) {\n mirrorView = ej.base.createElement('div', { className: 'e-content' });\n mirrorView.id = id;\n textArea.parentNode.appendChild(mirrorView);\n }\n else {\n mirrorView.innerHTML = '';\n }\n textArea.style.display = 'none';\n mirrorView.style.display = 'block';\n renderCodeMirror(mirrorView, defaultRTE.value);\n }\n }\n function renderCodeMirror(mirrorView, content) {\n myCodeMirror = CodeMirror(mirrorView, {\n value: content,\n lineNumbers: true,\n mode: 'text/html',\n lineWrapping: true,\n });\n }\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid HTML markup or markdown of the content

                                \n

                                Toolbar

                                \n
                                  \n
                                1. \n

                                  Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations,HTML view, etc

                                  \n
                                  2. \n
                                2. \n

                                  Toolbar is fully customizable

                                  \n
                                  3. \n
                                \n

                                Links

                                \n
                                  \n
                                1. \n

                                  You can insert a hyperlink with its corresponding dialog

                                  \n
                                  2. \n
                                2. \n

                                  Attach a hyperlink to the displayed text.

                                  \n
                                  3. \n
                                3. \n

                                  Customize the quick toolbar based on the hyperlink

                                  \n
                                  4. \n
                                \n

                                Image.

                                \n
                                  \n
                                1. \n

                                  Allows you to insert images from an online source as well as the local computer

                                  \n
                                  2. \n
                                2. \n

                                  You can upload an image

                                  \n
                                  3. \n
                                3. \n

                                  Provides an option to customize quick toolbar for an image

                                  \n
                                  4. \n
                                \n \"Logo\"\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor code-mirror sample\n */\nvar defaultRTE;\nvar divPreview;\n\n defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: [{\n template: ''\n }, 'Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']\n },\n created: onCreated\n });\n defaultRTE.appendTo('#defaultRTE');\n function onCreated() {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n setTimeout(function () { mirrorConversion(); }, 100);\n }\n divPreview = document.getElementById('DIV_Preview');\n var textArea = defaultRTE.contentModule.getEditPanel();\n var myCodeMirror;\n divPreview.addEventListener('click', function (e) {\n mirrorConversion();\n if (e.target.parentElement.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'Underline',\n 'Alignments', 'OrderedList', 'UnorderedList',\n 'CreateLink', 'Image', '|', 'Undo', 'Redo']);\n }\n });\n function mirrorConversion() {\n var id = defaultRTE.getID() + 'mirror-view';\n var mirrorView = defaultRTE.element.querySelector('#' + id);\n var iconEle = divPreview.querySelector('span');\n if (divPreview.classList.contains('e-active')) {\n divPreview.classList.remove('e-active');\n iconEle.classList.add('e-html-preview');\n iconEle.classList.remove('e-code-mirror');\n textArea.style.display = 'block';\n mirrorView.style.display = 'none';\n textArea.innerHTML = myCodeMirror.getValue();\n }\n else {\n divPreview.classList.add('e-active');\n iconEle.classList.remove('e-html-preview');\n iconEle.classList.add('e-code-mirror');\n if (!mirrorView) {\n mirrorView = ej.base.createElement('div', { className: 'e-content' });\n mirrorView.id = id;\n textArea.parentNode.appendChild(mirrorView);\n }\n else {\n mirrorView.innerHTML = '';\n }\n textArea.style.display = 'none';\n mirrorView.style.display = 'block';\n renderCodeMirror(mirrorView, defaultRTE.value);\n }\n }\n function renderCodeMirror(mirrorView, content) {\n myCodeMirror = CodeMirror(mirrorView, {\n value: content,\n lineNumbers: true,\n mode: 'text/html',\n lineWrapping: true,\n });\n }\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/custom-toolbar-stack.json b/src/rich-text-editor/custom-toolbar-stack.json index aaf140a7..a25e0aaa 100644 --- a/src/rich-text-editor/custom-toolbar-stack.json +++ b/src/rich-text-editor/custom-toolbar-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n

                                The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.

                                \n
                                \n
                                \n
                                \n
                                ^
                                \n
                                _
                                \n
                                `
                                \n
                                {
                                \n
                                |
                                \n
                                }
                                \n
                                ~
                                \n
                                 
                                \n
                                ¡
                                \n
                                ¢
                                \n
                                £
                                \n
                                ¤
                                \n
                                ¥
                                \n
                                ₹
                                \n
                                ¦
                                \n
                                §
                                \n
                                ¨
                                \n
                                ©
                                \n
                                ª
                                \n
                                «
                                \n
                                ¬
                                \n
                                ­
                                \n
                                ®
                                \n
                                ¯
                                \n
                                °
                                \n
                                ±
                                \n
                                ²
                                \n
                                ³
                                \n
                                ´
                                \n
                                µ
                                \n
                                \n
                                ·
                                \n
                                ¸
                                \n
                                ¹
                                \n
                                º
                                \n
                                »
                                \n
                                ¼
                                \n
                                ½
                                \n
                                ¾
                                \n
                                ¿
                                \n
                                À
                                \n
                                Á
                                \n
                                Â
                                \n
                                Ã
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor Custom toolbar sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',\n 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',\n {\n tooltipText: 'Insert Symbol',\n template: ''\n }, '|', 'Undo', 'Redo'\n ]\n },\n created: onCreate\n });\n defaultRTE.appendTo('#defaultRTE');\n var selection = new ej.richtexteditor.NodeSelection();\n var ranges;\n function onCreate() {\n var customBtn = defaultRTE.element.querySelector('#custom_tbar');\n var dialogCtn = document.getElementById('rteSpecial_char');\n // Initialization of Dialog\n var dialog = new ej.popups.Dialog({\n header: 'Special Characters',\n content: dialogCtn,\n target: document.getElementById('rteSection'),\n showCloseIcon: false,\n isModal: true,\n height: 'auto',\n overlayClick: dialogOverlay,\n buttons: [{ buttonModel: { content: \"Insert\", isPrimary: true }, click: onInsert }, { buttonModel: { content: 'Cancel' }, click: dialogOverlay }]\n });\n // Render initialized Dialog\n dialog.appendTo('#customTbarDialog');\n dialog.hide();\n customBtn.onclick = function (e) {\n dialog.element.style.display = '';\n ranges = selection.getRange(document);\n dialog.width = '43%';\n dialog.dataBind();\n dialog.show();\n var dialogCtn = document.getElementById('rteSpecial_char');\n dialogCtn.onclick = function (e) {\n var target = e.target;\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (target.classList.contains('char_block')) {\n target.classList.add('e-active');\n if (activeEle) {\n activeEle.classList.remove('e-active');\n }\n }\n };\n customBtn.onclick = function (e) {\n defaultRTE.focusIn();\n dialog.element.style.display = '';\n ranges = selection.getRange(document);\n dialog.width = defaultRTE.element.offsetWidth * 0.5;\n dialog.dataBind();\n dialog.show();\n };\n };\n function onInsert() {\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (activeEle) {\n ranges.insertNode(document.createTextNode(activeEle.textContent));\n defaultRTE.formatter.saveData();\n defaultRTE.formatter.enableUndo(defaultRTE);\n }\n dialogOverlay();\n }\n function dialogOverlay() {\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (activeEle) {\n activeEle.classList.remove('e-active');\n }\n dialog.hide();\n }\n }\n\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.

                                \n
                                \n
                                \n
                                \n
                                ^
                                \n
                                _
                                \n
                                `
                                \n
                                {
                                \n
                                |
                                \n
                                }
                                \n
                                ~
                                \n
                                 
                                \n
                                ¡
                                \n
                                ¢
                                \n
                                £
                                \n
                                ¤
                                \n
                                ¥
                                \n
                                ₹
                                \n
                                ¦
                                \n
                                §
                                \n
                                ¨
                                \n
                                ©
                                \n
                                ª
                                \n
                                «
                                \n
                                ¬
                                \n
                                ­
                                \n
                                ®
                                \n
                                ¯
                                \n
                                °
                                \n
                                ±
                                \n
                                ²
                                \n
                                ³
                                \n
                                ´
                                \n
                                µ
                                \n
                                \n
                                ·
                                \n
                                ¸
                                \n
                                ¹
                                \n
                                º
                                \n
                                »
                                \n
                                ¼
                                \n
                                ½
                                \n
                                ¾
                                \n
                                ¿
                                \n
                                À
                                \n
                                Á
                                \n
                                Â
                                \n
                                Ã
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n\n","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor Custom toolbar sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',\n 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',\n {\n tooltipText: 'Insert Symbol',\n template: ''\n }, '|', 'Undo', 'Redo'\n ]\n },\n created: onCreate\n });\n defaultRTE.appendTo('#defaultRTE');\n var selection = new ej.richtexteditor.NodeSelection();\n var ranges;\n function onCreate() {\n var customBtn = defaultRTE.element.querySelector('#custom_tbar');\n var dialogCtn = document.getElementById('rteSpecial_char');\n // Initialization of Dialog\n var dialog = new ej.popups.Dialog({\n header: 'Special Characters',\n content: dialogCtn,\n target: document.getElementById('rteSection'),\n showCloseIcon: false,\n isModal: true,\n height: 'auto',\n overlayClick: dialogOverlay,\n buttons: [{ buttonModel: { content: \"Insert\", isPrimary: true }, click: onInsert }, { buttonModel: { content: 'Cancel' }, click: dialogOverlay }]\n });\n // Render initialized Dialog\n dialog.appendTo('#customTbarDialog');\n dialog.hide();\n customBtn.onclick = function (e) {\n dialog.element.style.display = '';\n ranges = selection.getRange(document);\n dialog.width = '43%';\n dialog.dataBind();\n dialog.show();\n var dialogCtn = document.getElementById('rteSpecial_char');\n dialogCtn.onclick = function (e) {\n var target = e.target;\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (target.classList.contains('char_block')) {\n target.classList.add('e-active');\n if (activeEle) {\n activeEle.classList.remove('e-active');\n }\n }\n };\n customBtn.onclick = function (e) {\n defaultRTE.focusIn();\n dialog.element.style.display = '';\n ranges = selection.getRange(document);\n dialog.width = defaultRTE.element.offsetWidth * 0.5;\n dialog.dataBind();\n dialog.show();\n };\n };\n function onInsert() {\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (activeEle) {\n if (defaultRTE.formatter.getUndoRedoStack().length === 0) {\n defaultRTE.formatter.saveData();\n }\n defaultRTE.executeCommand('insertText', activeEle.textContent);\n defaultRTE.formatter.saveData();\n defaultRTE.formatter.enableUndo(defaultRTE);\n }\n dialogOverlay();\n }\n function dialogOverlay() {\n var activeEle = dialog.element.querySelector('.char_block.e-active');\n if (activeEle) {\n activeEle.classList.remove('e-active');\n }\n dialog.hide();\n }\n }\n\n "} \ No newline at end of file diff --git a/src/rich-text-editor/custom-toolbar.html b/src/rich-text-editor/custom-toolbar.html index 2906bde6..8e977344 100644 --- a/src/rich-text-editor/custom-toolbar.html +++ b/src/rich-text-editor/custom-toolbar.html @@ -138,10 +138,6 @@ user-select: none; } - #rteSection { - height: 500px; - } - @media (min-width: 320px) and (max-width: 480px) { .fabric.e-bigger #customTbarDialog { min-width: 281px; @@ -169,4 +165,12 @@ min-width: 236px; } } - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/rich-text-editor/custom-toolbar.js b/src/rich-text-editor/custom-toolbar.js index 2a40bf2f..81d28fb2 100644 --- a/src/rich-text-editor/custom-toolbar.js +++ b/src/rich-text-editor/custom-toolbar.js @@ -64,7 +64,10 @@ this.default = function() { function onInsert() { var activeEle = dialog.element.querySelector('.char_block.e-active'); if (activeEle) { - ranges.insertNode(document.createTextNode(activeEle.textContent)); + if (defaultRTE.formatter.getUndoRedoStack().length === 0) { + defaultRTE.formatter.saveData(); + } + defaultRTE.executeCommand('insertText', activeEle.textContent); defaultRTE.formatter.saveData(); defaultRTE.formatter.enableUndo(defaultRTE); } diff --git a/src/rich-text-editor/form-validation-stack.json b/src/rich-text-editor/form-validation-stack.json index 92ec3229..3545dd0b 100644 --- a/src/rich-text-editor/form-validation-stack.json +++ b/src/rich-text-editor/form-validation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor default sample\n */\n \n\n\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something' });\n defaultRTE.appendTo('#defaultRTE');\n\n new ej.inputs.FormValidator('#form-element');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n \n
                                \n
                                \n
                                \n \n \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor form-validation sample\n */\n \n\n\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something' });\n defaultRTE.appendTo('#defaultRTE');\n\n new ej.inputs.FormValidator('#form-element');\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/form-validation.js b/src/rich-text-editor/form-validation.js index 5ea574a5..2a5a26df 100644 --- a/src/rich-text-editor/form-validation.js +++ b/src/rich-text-editor/form-validation.js @@ -1,5 +1,5 @@ /** - * RichTextEditor default sample + * RichTextEditor form-validation sample */ diff --git a/src/rich-text-editor/iframe-stack.json b/src/rich-text-editor/iframe-stack.json index d2d2b7f6..1a127d31 100644 --- a/src/rich-text-editor/iframe-stack.json +++ b/src/rich-text-editor/iframe-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor IFrame sample\n */\n\n var iframeRTE = new ej.richtexteditor.RichTextEditor({\n height: 500,\n iframeSettings: {\n enable: true\n },\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',\n 'FontName', 'FontSize', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|',\n 'Formats', 'Alignments', 'OrderedList', 'UnorderedList',\n 'Outdent', 'Indent', '|',\n 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',\n 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']\n },\n actionBegin: handleFullScreen,\n actionComplete: actionCompleteHandler\n });\n iframeRTE.appendTo('#iframeRTE');\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n function actionCompleteHandler() {\n setTimeout(function () { iframeRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n\n "} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor IFrame sample\n */\n\n var iframeRTE = new ej.richtexteditor.RichTextEditor({\n height: 500,\n iframeSettings: {\n enable: true\n },\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',\n 'FontName', 'FontSize', 'FontColor', 'BackgroundColor',\n 'LowerCase', 'UpperCase', '|',\n 'Formats', 'Alignments', 'OrderedList', 'UnorderedList',\n 'Outdent', 'Indent', '|',\n 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',\n 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']\n },\n actionBegin: handleFullScreen,\n actionComplete: actionCompleteHandler\n });\n iframeRTE.appendTo('#iframeRTE');\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n function actionCompleteHandler() {\n setTimeout(function () { iframeRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n\n "} \ No newline at end of file diff --git a/src/rich-text-editor/image-stack.json b/src/rich-text-editor/image-stack.json index e2c6dfe7..b1699762 100644 --- a/src/rich-text-editor/image-stack.json +++ b/src/rich-text-editor/image-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n

                                Rich Text Editor allows to insert images from online source as well as local \n computer where you want to insert the image in your content.

                                \n

                                Get started Quick Toolbar to click on the image

                                \n

                                It is possible to add custom style on the selected image inside the RichTextEditor through quick toolbar.

                                \n \"Logo\"\n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor Image sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n quickToolbarSettings: {\n image: [\n 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',\n 'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',\n {\n tooltipText: 'Rotate Left',\n template: ''\n }, 'Undo', 'Redo']\n },\n editorMode: 'Markdown',\n formatter: new ej.richtexteditor.MarkdownFormatter({\n listTags: { 'OL': '2. ', 'UL': '+ ' },\n formatTags: {\n 'Blockquote': '> '\n },\n selectionTags: { 'Bold': ' __ ', 'Italic': '_' }\n }),\n created: function () {\n mdPreview = document.getElementById('MD_Preview');\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) {\n markDownConversion();\n });\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview();\n });\n }\n });\n defaultRTE.appendTo('#defaultRTE');\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n function markDownConversion() {\n if (mdPreview && mdPreview.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview() {\n var id = defaultRTE.getID() + 'html-preview';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n if (mdsource.classList.contains('e-active')) {\n mdsource.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n defaultRTE.enableToolbarItem(defaultRTE.toolbarSettings.items);\n textArea.style.display = 'block';\n htmlPreview.style.display = 'none';\n }\n else {\n mdsource.classList.add('e-active');\n defaultRTE.disableToolbarItem(defaultRTE.toolbarSettings.items);\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content e-pre-source' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n }\n textArea.style.display = 'none';\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).\n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n","index.js":"{{ripple}}/**\n * Markdown Custom format sample\n */\nvar textArea;\nvar mdPreview;\nvar mdsource;\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n height: '260px',\n toolbarSettings: {\n items: ['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', '|',\n {\n tooltipText: 'Preview',\n template: ''\n }, 'Undo', 'Redo']\n },\n editorMode: 'Markdown',\n formatter: new ej.richtexteditor.MarkdownFormatter({\n listTags: { 'OL': '2. ', 'UL': '+ ' },\n formatTags: {\n 'Blockquote': '> '\n },\n selectionTags: { 'Bold': ' __ ', 'Italic': '_' }\n }),\n created: function () {\n mdPreview = document.getElementById('MD_Preview');\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) {\n MarkDownConversion();\n });\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview();\n });\n }\n });\n defaultRTE.appendTo('#defaultRTE');\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n function MarkDownConversion() {\n if (mdPreview && mdPreview.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview() {\n var id = defaultRTE.getID() + 'html-preview';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n if (mdsource.classList.contains('e-active')) {\n mdsource.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n defaultRTE.enableToolbarItem(defaultRTE.toolbarSettings.items);\n textArea.style.display = 'block';\n htmlPreview.style.display = 'none';\n }\n else {\n mdsource.classList.add('e-active');\n defaultRTE.disableToolbarItem(defaultRTE.toolbarSettings.items);\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content e-pre-source' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n }\n textArea.style.display = 'none';\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/markdown-editor-custom-format.html b/src/rich-text-editor/markdown-editor-custom-format.html index 207e152d..3c1876b7 100644 --- a/src/rich-text-editor/markdown-editor-custom-format.html +++ b/src/rich-text-editor/markdown-editor-custom-format.html @@ -37,6 +37,13 @@ .e-icon-btn .e-md-preview::before { content: '\e345'; } + .bootstrap4 .e-icon-btn.e-active .e-md-preview::before { + content: '\e790'; + } + + .bootstrap4 .e-icon-btn .e-md-preview::before { + content: '\e787'; + } .e-rte-content .e-content { float: right; diff --git a/src/rich-text-editor/markdown-editor-custom-format.js b/src/rich-text-editor/markdown-editor-custom-format.js index 7b3377bf..b36e82b3 100644 --- a/src/rich-text-editor/markdown-editor-custom-format.js +++ b/src/rich-text-editor/markdown-editor-custom-format.js @@ -29,7 +29,7 @@ this.default = function () { mdPreview = document.getElementById('MD_Preview'); textArea = defaultRTE.contentModule.getEditPanel(); textArea.addEventListener('keyup', function (e) { - markDownConversion(); + MarkDownConversion(); }); mdsource = document.getElementById('preview-code'); mdsource.addEventListener('click', function (e) { @@ -45,7 +45,7 @@ this.default = function () { script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js'; document.getElementsByTagName('head')[0].appendChild(script); } - function markDownConversion() { + function MarkDownConversion() { if (mdPreview && mdPreview.classList.contains('e-active')) { var id = defaultRTE.getID() + 'html-view'; var htmlPreview = defaultRTE.element.querySelector('#' + id); diff --git a/src/rich-text-editor/markdown-editor-preview-stack.json b/src/rich-text-editor/markdown-editor-preview-stack.json index 2dc979f9..e130beea 100644 --- a/src/rich-text-editor/markdown-editor-preview-stack.json +++ b/src/rich-text-editor/markdown-editor-preview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \nIn RichTextEditor , you click the toolbar buttons to format the words and the changes are visible immediately. \nMarkdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words \nand phrases should look different from each other\n\nRichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.\n\nWe can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).\n\nThe third-party library Marked is used in this sample to convert markdown into HTML content \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/**\n * Markdown editor preview sample\n */\nvar textArea;\nvar mdsource;\nvar mdSplit;\nvar htmlPreview;\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n height: '300px', editorMode: 'Markdown', actionBegin: handleFullScreen,\n toolbarSettings: {\n items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',\n { tooltipText: 'Preview', template: '' },\n { tooltipText: 'Split Editor', template: '' }, 'FullScreen', '|', 'Undo', 'Redo']\n },\n created: function () {\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) { markDownConversion(); });\n var rteObj = defaultRTE;\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview({ mode: true, type: 'preview' });\n if (e.currentTarget.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', 'Undo', 'Redo']);\n e.currentTarget.parentElement.nextElementSibling.classList.add('e-overlay');\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', 'Undo', 'Redo']);\n e.currentTarget.parentElement.nextElementSibling.classList.remove('e-overlay');\n }\n });\n mdSplit = document.getElementById('MD_Preview');\n mdSplit.addEventListener('click', function (e) {\n if (defaultRTE.element.classList.contains('e-rte-full-screen')) {\n fullPreview({ mode: true, type: '' });\n }\n mdsource.classList.remove('e-active');\n if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {\n defaultRTE.showFullScreen();\n }\n });\n },\n actionComplete: function (e) {\n if (e.targetItem === 'Maximize' && ej.base.isNullOrUndefined(e.args)) {\n fullPreview({ mode: true, type: '' });\n }\n else if (!mdSplit.parentElement.classList.contains('e-overlay')) {\n if (e.targetItem === 'Minimize') {\n textArea.style.display = 'block';\n textArea.style.width = '100%';\n if (htmlPreview) {\n htmlPreview.style.display = 'none';\n }\n mdSplit.classList.remove('e-active');\n mdsource.classList.remove('e-active');\n }\n markDownConversion();\n }\n setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n });\n function markDownConversion() {\n if (mdSplit.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview(e) {\n var id = defaultRTE.getID() + 'html-preview';\n htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {\n mdsource.classList.remove('e-active');\n mdSplit.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n textArea.style.display = 'block';\n textArea.style.width = '100%';\n htmlPreview.style.display = 'none';\n }\n else {\n mdsource.classList.add('e-active');\n mdSplit.classList.add('e-active');\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n }\n if (e.type === 'preview') {\n textArea.style.display = 'none';\n htmlPreview.classList.add('e-pre-source');\n }\n else {\n htmlPreview.classList.remove('e-pre-source');\n textArea.style.width = '50%';\n }\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n defaultRTE.appendTo('#defaultRTE');\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \nIn RichTextEditor , you click the toolbar buttons to format the words and the changes are visible immediately. \nMarkdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words \nand phrases should look different from each other\n\nRichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.\n\nWe can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).\n\nThe third-party library Marked is used in this sample to convert markdown into HTML content \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * Markdown editor preview sample\n */\nvar textArea;\nvar mdsource;\nvar mdSplit;\nvar htmlPreview;\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n height: '300px', editorMode: 'Markdown', actionBegin: handleFullScreen,\n toolbarSettings: {\n items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',\n { tooltipText: 'Preview', template: '' },\n { tooltipText: 'Split Editor', template: '' }, 'FullScreen', '|', 'Undo', 'Redo']\n },\n created: function () {\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) { MarkDownConversion(); });\n var rteObj = defaultRTE;\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview({ mode: true, type: 'preview' });\n if (e.currentTarget.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', 'Undo', 'Redo']);\n e.currentTarget.parentElement.nextElementSibling.classList.add('e-overlay');\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', 'Undo', 'Redo']);\n e.currentTarget.parentElement.nextElementSibling.classList.remove('e-overlay');\n }\n });\n mdSplit = document.getElementById('MD_Preview');\n mdSplit.addEventListener('click', function (e) {\n if (defaultRTE.element.classList.contains('e-rte-full-screen')) {\n fullPreview({ mode: true, type: '' });\n }\n mdsource.classList.remove('e-active');\n if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {\n defaultRTE.showFullScreen();\n }\n });\n },\n actionComplete: function (e) {\n if (e.targetItem === 'Maximize' && ej.base.isNullOrUndefined(e.args)) {\n fullPreview({ mode: true, type: '' });\n }\n else if (!mdSplit.parentElement.classList.contains('e-overlay')) {\n if (e.targetItem === 'Minimize') {\n textArea.style.display = 'block';\n textArea.style.width = '100%';\n if (htmlPreview) {\n htmlPreview.style.display = 'none';\n }\n mdSplit.classList.remove('e-active');\n mdsource.classList.remove('e-active');\n }\n MarkDownConversion();\n }\n setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);\n }\n });\n function MarkDownConversion() {\n if (mdSplit.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview(e) {\n var id = defaultRTE.getID() + 'html-preview';\n htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n if ((mdsource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {\n mdsource.classList.remove('e-active');\n mdSplit.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n textArea.style.display = 'block';\n textArea.style.width = '100%';\n htmlPreview.style.display = 'none';\n }\n else {\n mdsource.classList.add('e-active');\n mdSplit.classList.add('e-active');\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n }\n if (e.type === 'preview') {\n textArea.style.display = 'none';\n htmlPreview.classList.add('e-pre-source');\n }\n else {\n htmlPreview.classList.remove('e-pre-source');\n textArea.style.width = '50%';\n }\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n defaultRTE.appendTo('#defaultRTE');\n function handleFullScreen(e) {\n var leftBar;\n var transformElement;\n if (ej.base.Browser.isDevice) {\n leftBar = document.querySelector('#right-sidebar');\n transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n }\n else {\n leftBar = document.querySelector('#left-sidebar');\n transformElement = document.querySelector('#right-pane');\n }\n if (e.targetItem === 'Maximize') {\n ej.base.addClass([leftBar], ['e-close']);\n ej.base.removeClass([leftBar], ['e-open']);\n if (!ej.base.Browser.isDevice) {\n transformElement.style.marginLeft = '0px';\n }\n transformElement.style.transform = 'inherit';\n }\n else if (e.targetItem === 'Minimize') {\n ej.base.removeClass([leftBar], ['e-close']);\n if (!ej.base.Browser.isDevice) {\n ej.base.addClass([leftBar], ['e-open']);\n transformElement.style.marginLeft = leftBar.offsetWidth + 'px';\n }\n transformElement.style.transform = 'translateX(0px)';\n }\n }\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n"} \ No newline at end of file diff --git a/src/rich-text-editor/markdown-editor-preview.html b/src/rich-text-editor/markdown-editor-preview.html index f45f0217..9b8cff14 100644 --- a/src/rich-text-editor/markdown-editor-preview.html +++ b/src/rich-text-editor/markdown-editor-preview.html @@ -49,6 +49,14 @@ content: '\e345'; } + .bootstrap4 .e-icon-btn.e-active .e-md-preview::before { + content: '\e790'; + } + + .bootstrap4 .e-icon-btn .e-md-preview::before { + content: '\e787'; + } + .e-rte-content .e-content { float: right; width: 50%; @@ -66,7 +74,12 @@ border-right: 1px solid #fff; } + + + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/rich-text-editor/markdown-editor-preview.js b/src/rich-text-editor/markdown-editor-preview.js index 235e375c..75bf56d3 100644 --- a/src/rich-text-editor/markdown-editor-preview.js +++ b/src/rich-text-editor/markdown-editor-preview.js @@ -17,7 +17,7 @@ this.default = function () { }, created: function () { textArea = defaultRTE.contentModule.getEditPanel(); - textArea.addEventListener('keyup', function (e) { markDownConversion(); }); + textArea.addEventListener('keyup', function (e) { MarkDownConversion(); }); var rteObj = defaultRTE; mdsource = document.getElementById('preview-code'); mdsource.addEventListener('click', function (e) { @@ -60,12 +60,12 @@ this.default = function () { mdSplit.classList.remove('e-active'); mdsource.classList.remove('e-active'); } - markDownConversion(); + MarkDownConversion(); } setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400); } }); - function markDownConversion() { + function MarkDownConversion() { if (mdSplit.classList.contains('e-active')) { var id = defaultRTE.getID() + 'html-view'; var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview'); diff --git a/src/rich-text-editor/markdown-editor-stack.json b/src/rich-text-editor/markdown-editor-stack.json index e694de88..b01065b2 100644 --- a/src/rich-text-editor/markdown-editor-stack.json +++ b/src/rich-text-editor/markdown-editor-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \nThe sample is added to showcase **markdown editing**.\n\nType or edit the content and apply formatting to view markdown formatted content.\n\nWe can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).\n\nThe third-party library Marked is used in this sample to convert markdown into HTML content\n
                                \n
                                \n
                                \n
                                \n\n\n \n\n
                                ","index.js":"{{ripple}}/**\n * Markdown editor sample\n */\nvar textArea;\nvar mdsource;\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n height: '250px',\n toolbarSettings: {\n items: ['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', '|',\n {\n tooltipText: 'Preview',\n template: ''\n }, '|', 'Undo', 'Redo']\n },\n editorMode: 'Markdown',\n created: function () {\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) {\n markDownConversion();\n });\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview();\n if (e.currentTarget.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',\n 'UnorderedList', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Undo', 'Redo']);\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',\n 'UnorderedList', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Undo', 'Redo']);\n }\n });\n }\n });\n function markDownConversion() {\n if (mdsource.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview() {\n var id = defaultRTE.getID() + 'html-preview';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n var previewTextArea = defaultRTE.element.querySelector('.e-rte-content');\n if (mdsource.classList.contains('e-active')) {\n mdsource.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n textArea.style.display = 'block';\n htmlPreview.style.display = 'none';\n previewTextArea.style.overflow = 'hidden';\n }\n else {\n mdsource.classList.add('e-active');\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content e-pre-source' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n previewTextArea.style.overflow = 'auto';\n }\n if(previewTextArea.style.overflow === 'hidden') {\n previewTextArea.style.overflow = 'auto';\n }\n textArea.style.display = 'none';\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n defaultRTE.appendTo('#defaultRTE');\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \nThe sample is added to showcase **markdown editing**.\n\nType or edit the content and apply formatting to view markdown formatted content.\n\nWe can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).\n\nThe third-party library Marked is used in this sample to convert markdown into HTML content\n
                                \n
                                \n
                                \n
                                \n\n\n \n\n
                                ","index.js":"{{ripple}}/**\n * Markdown editor sample\n */\nvar textArea;\nvar mdsource;\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n height: '250px',\n toolbarSettings: {\n items: ['Bold', 'Italic', 'StrikeThrough', '|',\n 'Formats', 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', 'Image', 'CreateTable', '|',\n {\n tooltipText: 'Preview',\n template: ''\n }, '|', 'Undo', 'Redo']\n },\n editorMode: 'Markdown',\n created: function () {\n textArea = defaultRTE.contentModule.getEditPanel();\n textArea.addEventListener('keyup', function (e) {\n MarkDownConversion();\n });\n mdsource = document.getElementById('preview-code');\n mdsource.addEventListener('click', function (e) {\n fullPreview();\n if (e.currentTarget.classList.contains('e-active')) {\n defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',\n 'UnorderedList', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Undo', 'Redo']);\n }\n else {\n defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',\n 'UnorderedList', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Undo', 'Redo']);\n }\n });\n }\n });\n function MarkDownConversion() {\n if (mdsource.classList.contains('e-active')) {\n var id = defaultRTE.getID() + 'html-view';\n var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n }\n }\n function fullPreview() {\n var id = defaultRTE.getID() + 'html-preview';\n var htmlPreview = defaultRTE.element.querySelector('#' + id);\n var previewTextArea = defaultRTE.element.querySelector('.e-rte-content');\n if (mdsource.classList.contains('e-active')) {\n mdsource.classList.remove('e-active');\n mdsource.parentElement.title = 'Preview';\n textArea.style.display = 'block';\n htmlPreview.style.display = 'none';\n previewTextArea.style.overflow = 'hidden';\n }\n else {\n mdsource.classList.add('e-active');\n if (!htmlPreview) {\n htmlPreview = ej.base.createElement('div', { className: 'e-content e-pre-source' });\n htmlPreview.id = id;\n textArea.parentNode.appendChild(htmlPreview);\n previewTextArea.style.overflow = 'auto';\n }\n if(previewTextArea.style.overflow === 'hidden') {\n previewTextArea.style.overflow = 'auto';\n }\n textArea.style.display = 'none';\n htmlPreview.style.display = 'block';\n htmlPreview.innerHTML = marked(defaultRTE.contentModule.getEditPanel().value);\n mdsource.parentElement.title = 'Code View';\n }\n }\n defaultRTE.appendTo('#defaultRTE');\n loadExternalFile();\n // Dynamically load the marked.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/markdown-editor.html b/src/rich-text-editor/markdown-editor.html index 999dac1a..fb3b0ce1 100644 --- a/src/rich-text-editor/markdown-editor.html +++ b/src/rich-text-editor/markdown-editor.html @@ -48,4 +48,12 @@ .e-icon-btn .e-md-preview::before { content: '\e345'; } + .bootstrap4 .e-icon-btn.e-active .e-md-preview::before { + content: '\e790'; + } + + .bootstrap4 .e-icon-btn .e-md-preview::before { + content: '\e787'; + } + \ No newline at end of file diff --git a/src/rich-text-editor/markdown-editor.js b/src/rich-text-editor/markdown-editor.js index b8772f4e..b4e0e5d3 100644 --- a/src/rich-text-editor/markdown-editor.js +++ b/src/rich-text-editor/markdown-editor.js @@ -20,7 +20,7 @@ this.default = function () { created: function () { textArea = defaultRTE.contentModule.getEditPanel(); textArea.addEventListener('keyup', function (e) { - markDownConversion(); + MarkDownConversion(); }); mdsource = document.getElementById('preview-code'); mdsource.addEventListener('click', function (e) { @@ -36,7 +36,7 @@ this.default = function () { }); } }); - function markDownConversion() { + function MarkDownConversion() { if (mdsource.classList.contains('e-active')) { var id = defaultRTE.getID() + 'html-view'; var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview'); diff --git a/src/rich-text-editor/paste-cleanup-stack.json b/src/rich-text-editor/paste-cleanup-stack.json new file mode 100644 index 00000000..28cfcea6 --- /dev/null +++ b/src/rich-text-editor/paste-cleanup-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n

                                RichTextEditor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

                                \n

                                Paste Cleanup properties:

                                \n
                                  \n
                                • \n

                                  prompt - specifies whether to enable the prompt when pasting in RichTextEditor.

                                  \n
                                  • \n
                                • \n

                                  plainText - specifies whether to paste as plain text or not in RichTextEditor.

                                  \n
                                  • \n
                                • \n

                                  keepFormat- specifies whether to keep or remove the format when pasting in RichTextEditor.

                                  \n
                                  • \n
                                • \n

                                  deniedTags - specifies the tags to restrict when pasting in RichTextEditor.

                                  \n
                                  • \n
                                • \n

                                  deniedAttributes - specifies the attributes to restrict when pasting in RichTextEditor.

                                  \n
                                  • \n
                                • \n

                                  allowedStyleProperties - specifies the allowed style properties when pasting in RichTextEditor.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Format Option
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Denied Tags
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Denied Attributes
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Allowed Style Properties
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * RichTextEditor Paste Cleanup sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n pasteCleanupSettings: {\n prompt: true,\n plainText: false,\n keepFormat: false,\n deniedTags: [],\n deniedAttrs: [],\n allowedStyleProps: []\n }\n });\n defaultRTE.appendTo('#defaultRTE');\n var formatOption = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function(args) { valueChange(); }\n });\n formatOption.appendTo('#formattingOption');\n function valueChange() {\n if (formatOption.value === 'prompt') {\n defaultRTE.pasteCleanupSettings.prompt = true;\n } else if (formatOption.value === 'plainText') {\n defaultRTE.pasteCleanupSettings.prompt = false;\n defaultRTE.pasteCleanupSettings.plainText = true;\n } else if (formatOption.value === 'keepFormat') {\n defaultRTE.pasteCleanupSettings.prompt = false;\n defaultRTE.pasteCleanupSettings.plainText = false;\n defaultRTE.pasteCleanupSettings.keepFormat = true;\n } else if (formatOption.value === 'cleanFormat') {\n defaultRTE.pasteCleanupSettings.prompt = false;\n defaultRTE.pasteCleanupSettings.plainText = false;\n defaultRTE.pasteCleanupSettings.keepFormat = false;\n }\n defaultRTE.dataBind();\n }\n var allowedStylePropsElem = document.getElementById('allowedStyleProperties');\n var deniedTagsElem = document.getElementById('deniedTags');\n var deniedAttrsElem = document.getElementById('deniedAttributes');\n allowedStylePropsElem.addEventListener('blur', function(e) {\n defaultRTE.pasteCleanupSettings.allowedStyleProps = (eval)('[' + (e.target).value + ']' );// jshint ignore:line\n defaultRTE.dataBind();\n });\n deniedAttrsElem.addEventListener('blur', function(e) {\n defaultRTE.pasteCleanupSettings.deniedAttrs = (eval)('[' + (e.target).value + ']' );// jshint ignore:line\n defaultRTE.dataBind();\n });\n deniedTagsElem.addEventListener('blur', function(e) {\n defaultRTE.pasteCleanupSettings.deniedTags = (eval)('[' + (e.target).value + ']' );// jshint ignore:line\n defaultRTE.dataBind();\n });\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/paste-cleanup.html b/src/rich-text-editor/paste-cleanup.html new file mode 100644 index 00000000..1e196edf --- /dev/null +++ b/src/rich-text-editor/paste-cleanup.html @@ -0,0 +1,121 @@ +
                                +
                                +
                                +
                                +
                                +

                                RichTextEditor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

                                +

                                Paste Cleanup properties:

                                +
                                  +
                                • +

                                  prompt - specifies whether to enable the prompt when pasting in RichTextEditor.

                                  +
                                  • +
                                • +

                                  plainText - specifies whether to paste as plain text or not in RichTextEditor.

                                  +
                                  • +
                                • +

                                  keepFormat- specifies whether to keep or remove the format when pasting in RichTextEditor.

                                  +
                                  • +
                                • +

                                  deniedTags - specifies the tags to restrict when pasting in RichTextEditor.

                                  +
                                  • +
                                • +

                                  deniedAttributes - specifies the attributes to restrict when pasting in RichTextEditor.

                                  +
                                  • +
                                • +

                                  allowedStyleProperties - specifies the allowed style properties when pasting in RichTextEditor.

                                  +
                                  • +
                                +
                                +
                                +
                                +
                                +
                                +
                                +
                                + + + + + + + + + + + + + + + + + + + +
                                +
                                Format Option
                                +                                 		+
                                + +
                                +
                                +
                                Denied Tags
                                +                                 		+
                                + +
                                +
                                +
                                Denied Attributes
                                +                                 		+
                                + +
                                +
                                +
                                Allowed Style Properties
                                +                                 		+
                                + +
                                +
                                +
                                +
                                +
                                +

                                This example demonstrates the paste cleanup feature of the RichTextEditor control. Paste your content in the editor after configuring the corresponding options and cleanup settings.

                                +
                                + +
                                +

                                The pasted content can be cleaned up using pasteCleanup settings. The following settings are available to clean up the content:

                                +
                                  +
                                • Select any option in Format Option drop down list for the paste content.
                                  • +
                                    +
                                  • Select the Prompt option to invoke prompt dialog with paste options on pasting the content in editor.
                                    • +
                                  • Select the Plain Text option to paste the content as plain text.
                                    • +
                                  • Select the Keep Format option to keep the same format with copied content.
                                    • +
                                  • Select the Clean Format option to keep the same format with copied content.
                                    • +
                                  +
                                • Fill the denied tags text box to ignore the tags when pasting HTML content. For example: +
                                    +
                                  • ['a[!href]'] - paste the content by filtering anchor tags that don’t have the 'href' attribute.
                                    • +
                                  • ['a[href, target]'] - paste the content by filtering anchor tags that have the 'href' and 'target' attributes.
                                    • +
                                  +
                                  • +
                                  +
                                • Fill the denied attributes to paste the content by filtering out these attributes from the content. For example: +
                                    + ['id', 'title'] - This will remove the attributes 'id' and 'title' from all tags. +
                                  +
                                  • +
                                  +
                                • Fill the allowed style properties to paste the content by accepting these style attributes and removing other attributes. For example: +
                                    + ['color', 'margin'] - This will allow only the style properties 'color' and 'margin' in each pasted element. +
                                  +
                                  • +
                                +

                                Injecting Module

                                +

                                The previous features were built as modules to be included in your application. For example, inject the 'PasteCleanup' module using RichTextEditor.Inject (Toolbar, Link, Image, Count, HtmlEditor, PasteCleanup) to use the paste cleanup feature.

                                +
                                \ No newline at end of file diff --git a/src/rich-text-editor/paste-cleanup.js b/src/rich-text-editor/paste-cleanup.js new file mode 100644 index 00000000..fa99b94e --- /dev/null +++ b/src/rich-text-editor/paste-cleanup.js @@ -0,0 +1,54 @@ +/** + * RichTextEditor Paste Cleanup sample + */ +this.default = function() { + var defaultRTE = new ej.richtexteditor.RichTextEditor({ + pasteCleanupSettings: { + prompt: true, + plainText: false, + keepFormat: false, + deniedTags: [], + deniedAttrs: [], + allowedStyleProps: [] + } + }); + defaultRTE.appendTo('#defaultRTE'); + var formatOption = new ej.dropdowns.DropDownList({ + index: 0, + popupHeight: '200px', + change: function(args) { valueChange(); } + }); + formatOption.appendTo('#formattingOption'); + function valueChange() { + if (formatOption.value === 'prompt') { + defaultRTE.pasteCleanupSettings.prompt = true; + } else if (formatOption.value === 'plainText') { + defaultRTE.pasteCleanupSettings.prompt = false; + defaultRTE.pasteCleanupSettings.plainText = true; + } else if (formatOption.value === 'keepFormat') { + defaultRTE.pasteCleanupSettings.prompt = false; + defaultRTE.pasteCleanupSettings.plainText = false; + defaultRTE.pasteCleanupSettings.keepFormat = true; + } else if (formatOption.value === 'cleanFormat') { + defaultRTE.pasteCleanupSettings.prompt = false; + defaultRTE.pasteCleanupSettings.plainText = false; + defaultRTE.pasteCleanupSettings.keepFormat = false; + } + defaultRTE.dataBind(); + } + var allowedStylePropsElem = document.getElementById('allowedStyleProperties'); + var deniedTagsElem = document.getElementById('deniedTags'); + var deniedAttrsElem = document.getElementById('deniedAttributes'); + allowedStylePropsElem.addEventListener('blur', function(e) { + defaultRTE.pasteCleanupSettings.allowedStyleProps = (eval)('[' + (e.target).value + ']' );// jshint ignore:line + defaultRTE.dataBind(); + }); + deniedAttrsElem.addEventListener('blur', function(e) { + defaultRTE.pasteCleanupSettings.deniedAttrs = (eval)('[' + (e.target).value + ']' );// jshint ignore:line + defaultRTE.dataBind(); + }); + deniedTagsElem.addEventListener('blur', function(e) { + defaultRTE.pasteCleanupSettings.deniedTags = (eval)('[' + (e.target).value + ']' );// jshint ignore:line + defaultRTE.dataBind(); + }); +}; diff --git a/src/rich-text-editor/print-stack.json b/src/rich-text-editor/print-stack.json index 430e51cd..0a79c6f8 100644 --- a/src/rich-text-editor/print-stack.json +++ b/src/rich-text-editor/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor print sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',\n 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo', 'Print']\n }\n });\n defaultRTE.appendTo('#defaultRTE');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n

                                The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. \n Users can format their content using standard toolbar commands.

                                \n \n

                                Key features:

                                \n \n
                                  \n
                                • \n

                                  Provides <IFRAME> and <DIV> modes

                                  \n
                                  • \n
                                • \n

                                  Capable of handling markdown editing.

                                  \n
                                  • \n
                                • \n

                                  Contains a modular library to load the necessary functionality on demand.

                                  \n
                                  • \n
                                • \n

                                  Provides a fully customizable toolbar.

                                  \n
                                  • \n
                                • \n

                                  Provides HTML view to edit the source directly for developers.

                                  \n
                                  • \n
                                • \n

                                  Supports third-party library integration.

                                  \n
                                  • \n
                                • \n

                                  Allows preview of modified content before saving it.

                                  \n
                                  • \n
                                • \n

                                  Handles images, hyperlinks, video, hyperlinks, uploads, etc.

                                  \n
                                  • \n
                                • \n

                                  Contains undo/redo manager.

                                  \n
                                  • \n
                                • \n

                                  Creates bulleted and numbered lists.

                                  \n
                                  • \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor print sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n toolbarSettings: {\n items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',\n 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo', 'Print']\n }\n });\n defaultRTE.appendTo('#defaultRTE');\n\n"} \ No newline at end of file diff --git a/src/rich-text-editor/quick-toolbar-stack.json b/src/rich-text-editor/quick-toolbar-stack.json index 326a2dc8..de1a4a63 100644 --- a/src/rich-text-editor/quick-toolbar-stack.json +++ b/src/rich-text-editor/quick-toolbar-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * RichTextEditor Quick toolbar sample\n */\n\n var defaultRTE = new ej.richtexteditor.RichTextEditor({\n quickToolbarSettings: {\n image: [\n 'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', '|', 'Display', 'AltText', 'Dimension',\n {\n tooltipText: 'Rotate Left',\n template: '
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Allow Virtual Scrolling\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Hide Empty Days\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Days Count\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: [{ option: 'Agenda', allowVirtualScrolling: false }],\n selectedDate: new Date(2018, 1, 15),\n currentView: 'Agenda',\n eventSettings: { dataSource: window.generateObject() },\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize NumericTextBox component for agenda days count\n var numericText = new ej.inputs.NumericTextBox({\n value: 7,\n min: 1,\n max: 15,\n format: 'n0',\n change: function (args) {\n scheduleObj.agendaDaysCount = args.value !== null ? args.value : 7;\n scheduleObj.dataBind();\n }\n });\n numericText.appendTo('#agendadayscount');\n\n // Initialize DropDownList component for allow virtual scroll\n var virtualScrollDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n var allowVS = (args.value === 'true') ? true : false;\n scheduleObj.views = [{ option: 'Agenda', allowVirtualScrolling: allowVS }];\n scheduleObj.dataBind();\n }\n });\n virtualScrollDropDown.appendTo('#virtualscroll');\n\n // Initialize DropDownList component for hide empty agenda days\n var hideEmptyDaysDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.hideEmptyAgendaDays = (args.value === 'true') ? true : false;\n scheduleObj.dataBind();\n }\n });\n hideEmptyDaysDropDown.appendTo('#hideemptydays');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Allow Virtual Scrolling\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Hide Empty Days\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                Days Count\n
                                \n                                 		\n
                                \n \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: [{ option: 'Agenda', allowVirtualScrolling: false }],\n selectedDate: new Date(2018, 1, 15),\n currentView: 'Agenda',\n eventSettings: { dataSource: window.generateObject() },\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize NumericTextBox component for agenda days count\n var numericText = new ej.inputs.NumericTextBox({\n value: 7,\n min: 1,\n max: 15,\n format: 'n0',\n change: function (args) {\n scheduleObj.agendaDaysCount = args.value !== null ? args.value : 7;\n scheduleObj.dataBind();\n }\n });\n numericText.appendTo('#agendadayscount');\n\n // Initialize DropDownList component for allow virtual scroll\n var virtualScrollDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n var allowVS = (args.value === 'true') ? true : false;\n scheduleObj.views = [{ option: 'Agenda', allowVirtualScrolling: allowVS }];\n scheduleObj.dataBind();\n }\n });\n virtualScrollDropDown.appendTo('#virtualscroll');\n\n // Initialize DropDownList component for hide empty agenda days\n var hideEmptyDaysDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.hideEmptyAgendaDays = (args.value === 'true') ? true : false;\n scheduleObj.dataBind();\n }\n });\n hideEmptyDaysDropDown.appendTo('#hideemptydays');\n"} \ No newline at end of file diff --git a/src/schedule/block-events-stack.json b/src/schedule/block-events-stack.json index c3db7103..ed568089 100644 --- a/src/schedule/block-events-stack.json +++ b/src/schedule/block-events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n window.getEmployeeName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n window.getEmployeeImage = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n return '';\n };\n window.getEmployeeDesignation = function (value) {\n return value.resourceData.Designation;\n };\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineDay',\n views: [\n { option: 'Day' },\n { option: 'TimelineDay' },\n { option: 'TimelineMonth' }\n ],\n resourceHeaderTemplate: '#resource-template',\n group: {\n enableCompactView: false,\n resources: ['Employee']\n },\n resources: [{\n field: 'EmployeeId', title: 'Employees',\n name: 'Employee', allowMultiple: true,\n dataSource: [\n { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Content writer' },\n { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Designer' },\n { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Software Engineer' },\n { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Support Engineer' },\n { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Human Resource' },\n { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Content Analyst' }\n ],\n textField: 'Text', idField: 'Id', groupIDField: 'GroupId', colorField: 'Color'\n }],\n eventSettings: {\n dataSource: window.blockData\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n window.getEmployeeName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n window.getEmployeeImage = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n return '';\n };\n window.getEmployeeDesignation = function (value) {\n return value.resourceData.Designation;\n };\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineDay',\n views: [\n { option: 'Day' },\n { option: 'TimelineDay' },\n { option: 'TimelineMonth' }\n ],\n resourceHeaderTemplate: '#resource-template',\n group: {\n enableCompactView: false,\n resources: ['Employee']\n },\n resources: [{\n field: 'EmployeeId', title: 'Employees',\n name: 'Employee', allowMultiple: true,\n dataSource: [\n { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Content writer' },\n { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Designer' },\n { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Software Engineer' },\n { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Support Engineer' },\n { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Human Resource' },\n { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Content Analyst' }\n ],\n textField: 'Text', idField: 'Id', groupIDField: 'GroupId', colorField: 'Color'\n }],\n eventSettings: {\n dataSource: window.blockData\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/calendar-export-import-stack.json b/src/schedule/calendar-export-import-stack.json new file mode 100644 index 00000000..d4efe34c --- /dev/null +++ b/src/schedule/calendar-export-import-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n \n \n \n \n \n \n \n \n \n \n \n
                                \n
                                Export as iCalendar
                                \n                                 		\n \n
                                \n
                                Import iCalendar file
                                \n                                 		\n \n
                                \n
                                \n\n\n\n\n
                                ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#Schedule');\n\n var buttonObj = new ej.buttons.Button();\n buttonObj.appendTo('#ics-export');\n buttonObj.element.onclick = function () {\n scheduleObj.exportToICalendar();\n };\n\n // Initialize Uploder component for import\n var uploadObj = new ej.inputs.Uploader({\n allowedExtensions: '.ics',\n cssClass: 'calendar-import',\n buttons: { browse: 'Choose file' },\n multiple: false,\n showFileList: false,\n selected: function (args) {\n scheduleObj.importICalendar(args.event.target.files[0]);\n }\n });\n uploadObj.appendTo('#ics-import');\n\n"} \ No newline at end of file diff --git a/src/schedule/calendar-export-import.html b/src/schedule/calendar-export-import.html new file mode 100644 index 00000000..32d7c2e3 --- /dev/null +++ b/src/schedule/calendar-export-import.html @@ -0,0 +1,69 @@ +
                                +
                                +
                                +
                                + + + + + + + + + + + +
                                +
                                Export as iCalendar
                                +                                 		+ +
                                +
                                Import iCalendar file
                                +                                 		+ +
                                +
                                + + + + + +
                                +

                                + This example showcases how to export the Scheduler events to a calendar (.ics) file, as well as how to import + events from an .ics file (downloaded from any of the calendars like Google or Outlook) into our Scheduler. +

                                +
                                +
                                +

                                + In this example, the Scheduler events can be exported to a calendar (.ics) file by making use of the + exportToICalendar public method. By default, + the calendar is exported with a file name Calendar.ics. + To change this file name on export, pass the custom string value as fileName to get the file + downloaded with this provided name. + The events from external calendars can also be imported into Scheduler by making use of the + importICalendar method. This method accepts the blob object of an .ics file to be imported as a + mandatory argument. +

                                +

                                + Module Injection +

                                +

                                + To start using the export and import ICS functionality in Scheduler, you need to import the + ICalendarExport and ICalendarImport modules from @syncfusion/ej2-schedule + package and then inject them using the Schedule.Inject(ICalendarExport, ICalendarImport) method. +

                                +
                                \ No newline at end of file diff --git a/src/schedule/calendar-export-import.js b/src/schedule/calendar-export-import.js new file mode 100644 index 00000000..a339f570 --- /dev/null +++ b/src/schedule/calendar-export-import.js @@ -0,0 +1,31 @@ +this.default = function () { + var data = new ej.base.extend([], window.scheduleData, null, true); + // Initialize schedule component + var scheduleObj = new ej.schedule.Schedule({ + width: '100%', + height: '650px', + views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'], + selectedDate: new Date(2019, 0, 10), + eventSettings: { dataSource: data } + }); + scheduleObj.appendTo('#Schedule'); + + var buttonObj = new ej.buttons.Button(); + buttonObj.appendTo('#ics-export'); + buttonObj.element.onclick = function () { + scheduleObj.exportToICalendar(); + }; + + // Initialize Uploder component for import + var uploadObj = new ej.inputs.Uploader({ + allowedExtensions: '.ics', + cssClass: 'calendar-import', + buttons: { browse: 'Choose file' }, + multiple: false, + showFileList: false, + selected: function (args) { + scheduleObj.importICalendar(args.event.target.files[0]); + } + }); + uploadObj.appendTo('#ics-import'); +}; diff --git a/src/schedule/calendar-integration-stack.json b/src/schedule/calendar-integration-stack.json index f1e3d866..1de36711 100644 --- a/src/schedule/calendar-integration-stack.json +++ b/src/schedule/calendar-integration-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}\n var calendarId = '5105trob9dasha31vuqek6qgp0@group.calendar.google.com';\n var publicKey = 'AIzaSyD76zjMDsL_jkenM5AAnNsORypS1Icuqxg';\n var dataManger = new ej.data.DataManager({\n url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 10, 14),\n eventSettings: { dataSource: dataManger },\n readonly: true,\n dataBinding: function (e) {\n var items = e.result.items;\n var scheduleData = [];\n if (items.length > 0) {\n for (var i = 0; i < items.length; i++) {\n var event = items[i];\n var when = event.start.dateTime;\n var start = event.start.dateTime;\n var end = event.end.dateTime;\n if (!when) {\n when = event.start.date;\n start = event.start.date;\n end = event.end.date;\n }\n scheduleData.push({\n Id: event.id,\n Subject: event.summary,\n StartTime: new Date(start),\n EndTime: new Date(end),\n IsAllDay: !event.start.dateTime\n });\n }\n }\n e.result = scheduleData;\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n
                                ","index.js":"{{ripple}}\n var calendarId = '5105trob9dasha31vuqek6qgp0@group.calendar.google.com';\n var publicKey = 'AIzaSyD76zjMDsL_jkenM5AAnNsORypS1Icuqxg';\n var dataManger = new ej.data.DataManager({\n url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 10, 14),\n eventSettings: { dataSource: dataManger },\n readonly: true,\n dataBinding: function (e) {\n var items = e.result.items;\n var scheduleData = [];\n if (items.length > 0) {\n for (var i = 0; i < items.length; i++) {\n var event = items[i];\n var when = event.start.dateTime;\n var start = event.start.dateTime;\n var end = event.end.dateTime;\n if (!when) {\n when = event.start.date;\n start = event.start.date;\n end = event.end.date;\n }\n scheduleData.push({\n Id: event.id,\n Subject: event.summary,\n StartTime: new Date(start),\n EndTime: new Date(end),\n IsAllDay: !event.start.dateTime\n });\n }\n }\n e.result = scheduleData;\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/cell-dimension-stack.json b/src/schedule/cell-dimension-stack.json index 57e965ab..4f3ccdce 100644 --- a/src/schedule/cell-dimension-stack.json +++ b/src/schedule/cell-dimension-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Schedule cell dimension sample\n */\n\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n selectedDate: new Date(2018, 1, 15),\n cssClass: 'schedule-cell-dimension',\n showTimeIndicator: false,\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n
                                ","index.js":"{{ripple}}/**\n * Schedule cell dimension sample\n */\n\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n selectedDate: new Date(2018, 1, 15),\n cssClass: 'schedule-cell-dimension',\n showTimeIndicator: false,\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/cell-template-stack.json b/src/schedule/cell-template-stack.json index fffde61f..27d10e01 100644 --- a/src/schedule/cell-template-stack.json +++ b/src/schedule/cell-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n window.getCellContent = function (date) {\n if (date.getMonth() === 10 && date.getDate() === 23) {\n return '
                                Thanksgiving day
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 9) {\n return '
                                Party time
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 13) {\n return '
                                Party time
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 22) {\n return '
                                Happy birthday
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 24) {\n return '
                                Christmas Eve
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 25) {\n return '
                                Christmas Day
                                ';\n } else if (date.getMonth() === 0 && date.getDate() === 1) {\n return '
                                New Year\\'s Day
                                ';\n } else if (date.getMonth() === 0 && date.getDate() === 14) {\n return '
                                Get together
                                ';\n }\n return '';\n };\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n cellTemplate: '${if(type === \"monthCells\")}
                                ${getCellContent(data.date)}
                                ${/if}',\n views: ['Month'],\n currentView: 'Month',\n selectedDate: new Date(2017, 11, 15)\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                \n
                                \n
                                \n
                                \n
                                \n
                                \n\n\n\n\n\n
                                ","index.js":"{{ripple}}\n window.getCellContent = function (date) {\n if (date.getMonth() === 10 && date.getDate() === 23) {\n return '
                                Thanksgiving day
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 9) {\n return '
                                Party time
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 13) {\n return '
                                Party time
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 22) {\n return '
                                Happy birthday
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 24) {\n return '
                                Christmas Eve
                                ';\n } else if (date.getMonth() === 11 && date.getDate() === 25) {\n return '
                                Christmas Day
                                ';\n } else if (date.getMonth() === 0 && date.getDate() === 1) {\n return '
                                New Year\\'s Day
                                ';\n } else if (date.getMonth() === 0 && date.getDate() === 14) {\n return '
                                Get together
                                ';\n }\n return '';\n };\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n cellTemplate: '${if(type === \"monthCells\")}
                                ${getCellContent(data.date)}
                                ${/if}',\n views: ['Month'],\n currentView: 'Month',\n selectedDate: new Date(2017, 11, 15)\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/context-menu-stack.json b/src/schedule/context-menu-stack.json index 5d2b3a74..4cc99975 100644 --- a/src/schedule/context-menu-stack.json +++ b/src/schedule/context-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                \n
                                \n
                                \n
                                \n
                                  \n
                                  \n
                                  \n\n\n\n\n
                                  ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data\n },\n allowDragAndDrop: false,\n allowResizing: false,\n });\n scheduleObj.appendTo('#Schedule');\n\n var menuObj, selectedTarget;\n\n var menuItems = [{\n text: 'New Event',\n iconCss: 'e-icons new',\n id: 'Add'\n }, {\n text: 'New Recurring Event',\n iconCss: 'e-icons recurrence',\n id: 'AddRecurrence'\n }, {\n text: 'Today',\n iconCss: 'e-icons today',\n id: 'Today'\n }, {\n text: 'Edit Event',\n iconCss: 'e-icons edit',\n id: 'Save'\n }, {\n text: 'Edit Event',\n id: 'EditRecurrenceEvent',\n iconCss: 'e-icons edit',\n items: [{\n text: 'Edit Occurrence',\n id: 'EditOccurrence'\n }, {\n text: 'Edit Series',\n id: 'EditSeries'\n }]\n }, {\n text: 'Delete Event',\n iconCss: 'e-icons delete',\n id: 'Delete'\n }, {\n text: 'Delete Event',\n id: 'DeleteRecurrenceEvent',\n iconCss: 'e-icons delete',\n items: [{\n text: 'Delete Occurrence',\n id: 'DeleteOccurrence'\n }, {\n text: 'Delete Series',\n id: 'DeleteSeries'\n }]\n }];\n menuObj = new ej.navigations.ContextMenu({\n target: '.e-schedule',\n items: menuItems,\n beforeOpen: onContextMenuBeforeOpen,\n select: onMenuItemSelect,\n cssClass: 'schedule-context-menu'\n });\n menuObj.appendTo('#ContextMenu');\n\n function onContextMenuBeforeOpen(args) {\n var newEventElement = document.querySelector('.e-new-event');\n if (newEventElement) {\n ej.base.remove(newEventElement);\n ej.base.removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');\n }\n var targetElement = args.event.target;\n if (ej.base.closest(targetElement, '.e-contextmenu')) {\n return;\n }\n selectedTarget = ej.base.closest(targetElement, '.e-appointment,.e-work-cells,' +\n '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');\n if (ej.base.isNullOrUndefined(selectedTarget)) {\n args.cancel = true;\n return;\n }\n if (selectedTarget.classList.contains('e-appointment')) {\n var eventObj = scheduleObj.getEventDetails(selectedTarget);\n if (eventObj.RecurrenceRule) {\n menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);\n } else {\n menuObj.showItems(['Save', 'Delete'], true);\n menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n }\n return;\n }\n menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);\n }\n\n function onMenuItemSelect(args) {\n var selectedMenuItem = args.item.id;\n var eventObj;\n if (selectedTarget.classList.contains('e-appointment')) {\n eventObj = scheduleObj.getEventDetails(selectedTarget);\n }\n switch (selectedMenuItem) {\n case 'Today':\n scheduleObj.selectedDate = new Date();\n break;\n case 'Add':\n case 'AddRecurrence':\n var activeCellsData = scheduleObj.getCellDetails(selectedTarget);\n if (selectedMenuItem === 'Add') {\n scheduleObj.openEditor(activeCellsData, 'Add');\n } else {\n scheduleObj.openEditor(activeCellsData, 'Add', null, 1);\n }\n break;\n case 'Save':\n case 'EditOccurrence':\n case 'EditSeries':\n if (selectedMenuItem === 'EditSeries') {\n eventObj = new ej.data.DataManager(scheduleObj.eventsData).executeLocal(new ej.data.Query().where(scheduleObj.eventFields.id, 'equal', eventObj[scheduleObj.eventFields.recurrenceID]))[0];\n }\n scheduleObj.openEditor(eventObj, selectedMenuItem);\n break;\n case 'Delete':\n scheduleObj.deleteEvent(eventObj);\n break;\n case 'DeleteOccurrence':\n case 'DeleteSeries':\n scheduleObj.deleteEvent(eventObj, selectedMenuItem);\n break;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                  \n
                                  \n
                                  \n
                                  \n
                                    \n
                                    \n
                                    \n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: {\n dataSource: data\n },\n allowDragAndDrop: false,\n allowResizing: false,\n });\n scheduleObj.appendTo('#Schedule');\n\n var menuObj, selectedTarget;\n\n var menuItems = [{\n text: 'New Event',\n iconCss: 'e-icons new',\n id: 'Add'\n }, {\n text: 'New Recurring Event',\n iconCss: 'e-icons recurrence',\n id: 'AddRecurrence'\n }, {\n text: 'Today',\n iconCss: 'e-icons today',\n id: 'Today'\n }, {\n text: 'Edit Event',\n iconCss: 'e-icons edit',\n id: 'Save'\n }, {\n text: 'Edit Event',\n id: 'EditRecurrenceEvent',\n iconCss: 'e-icons edit',\n items: [{\n text: 'Edit Occurrence',\n id: 'EditOccurrence'\n }, {\n text: 'Edit Series',\n id: 'EditSeries'\n }]\n }, {\n text: 'Delete Event',\n iconCss: 'e-icons delete',\n id: 'Delete'\n }, {\n text: 'Delete Event',\n id: 'DeleteRecurrenceEvent',\n iconCss: 'e-icons delete',\n items: [{\n text: 'Delete Occurrence',\n id: 'DeleteOccurrence'\n }, {\n text: 'Delete Series',\n id: 'DeleteSeries'\n }]\n }];\n menuObj = new ej.navigations.ContextMenu({\n target: '.e-schedule',\n items: menuItems,\n beforeOpen: onContextMenuBeforeOpen,\n select: onMenuItemSelect,\n cssClass: 'schedule-context-menu'\n });\n menuObj.appendTo('#ContextMenu');\n\n function onContextMenuBeforeOpen(args) {\n var newEventElement = document.querySelector('.e-new-event');\n if (newEventElement) {\n ej.base.remove(newEventElement);\n ej.base.removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');\n }\n var targetElement = args.event.target;\n if (ej.base.closest(targetElement, '.e-contextmenu')) {\n return;\n }\n selectedTarget = ej.base.closest(targetElement, '.e-appointment,.e-work-cells,' +\n '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');\n if (ej.base.isNullOrUndefined(selectedTarget)) {\n args.cancel = true;\n return;\n }\n if (selectedTarget.classList.contains('e-appointment')) {\n var eventObj = scheduleObj.getEventDetails(selectedTarget);\n if (eventObj.RecurrenceRule) {\n menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);\n } else {\n menuObj.showItems(['Save', 'Delete'], true);\n menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n }\n return;\n }\n menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);\n }\n\n function onMenuItemSelect(args) {\n var selectedMenuItem = args.item.id;\n var eventObj;\n if (selectedTarget.classList.contains('e-appointment')) {\n eventObj = scheduleObj.getEventDetails(selectedTarget);\n }\n switch (selectedMenuItem) {\n case 'Today':\n scheduleObj.selectedDate = new Date();\n break;\n case 'Add':\n case 'AddRecurrence':\n var selectedCells = scheduleObj.getSelectedElements();\n var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);\n if (selectedMenuItem === 'Add') {\n scheduleObj.openEditor(activeCellsData, 'Add');\n } else {\n scheduleObj.openEditor(activeCellsData, 'Add', null, 1);\n }\n break;\n case 'Save':\n case 'EditOccurrence':\n case 'EditSeries':\n if (selectedMenuItem === 'EditSeries') {\n eventObj = new ej.data.DataManager(scheduleObj.eventsData).executeLocal(new ej.data.Query().where(scheduleObj.eventFields.id, 'equal', eventObj[scheduleObj.eventFields.recurrenceID]))[0];\n }\n scheduleObj.openEditor(eventObj, selectedMenuItem);\n break;\n case 'Delete':\n scheduleObj.deleteEvent(eventObj);\n break;\n case 'DeleteOccurrence':\n case 'DeleteSeries':\n scheduleObj.deleteEvent(eventObj, selectedMenuItem);\n break;\n }\n }\n"} \ No newline at end of file diff --git a/src/schedule/context-menu.html b/src/schedule/context-menu.html index d8e28546..65c3b8b4 100644 --- a/src/schedule/context-menu.html +++ b/src/schedule/context-menu.html @@ -35,6 +35,32 @@ .schedule-context-menu ul .e-menu-item .e-menu-icon { font-size: 12px; } + /* custom code start*/ + .highcontrast .schedule-context-menu .e-menu-item .today::before, + .fabric .schedule-context-menu .e-menu-item .today::before { + content: '\e321'; + } + + .bootstrap .schedule-context-menu .e-menu-item .today::before { + content: '\e312'; + } + + .highcontrast .schedule-context-menu .e-menu-item .delete::before, + .fabric .schedule-context-menu .e-menu-item .delete::before { + content: '\eb00'; + } + + .highcontrast .schedule-context-menu .e-menu-item .new::before, + .fabric .schedule-context-menu .e-menu-item .new::before { + content: '\e823'; + } + + .highcontrast .schedule-context-menu .e-menu-item .recurrence::before, + .fabric .schedule-context-menu .e-menu-item .recurrence::before { + content: '\e309'; + font-weight: bold; + } + /* custom code end*/
                                    diff --git a/src/schedule/context-menu.js b/src/schedule/context-menu.js index 06ea5e7d..7031d8c2 100644 --- a/src/schedule/context-menu.js +++ b/src/schedule/context-menu.js @@ -3,7 +3,7 @@ this.default = function () { var scheduleObj = new ej.schedule.Schedule({ width: '100%', height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), eventSettings: { dataSource: data }, @@ -109,7 +109,8 @@ this.default = function () { break; case 'Add': case 'AddRecurrence': - var activeCellsData = scheduleObj.getCellDetails(selectedTarget); + var selectedCells = scheduleObj.getSelectedElements(); + var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget); if (selectedMenuItem === 'Add') { scheduleObj.openEditor(activeCellsData, 'Add'); } else { diff --git a/src/schedule/datasource.js b/src/schedule/datasource.js index 89db65e4..a9187f93 100644 --- a/src/schedule/datasource.js +++ b/src/schedule/datasource.js @@ -14,146 +14,170 @@ window.scheduleData = [ { Id: 1, Subject: 'Explosion of Betelgeuse Star', - StartTime: new Date(2018, 1, 11, 9, 30), - EndTime: new Date(2018, 1, 11, 11, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 6, 9, 30), + EndTime: new Date(2019, 0, 6, 11, 0), CategoryColor: '#1aaa55' }, { Id: 2, Subject: 'Thule Air Crash Report', - StartTime: new Date(2018, 1, 12, 12, 0), - EndTime: new Date(2018, 1, 12, 14, 0), + Location: 'Newyork City', + StartTime: new Date(2019, 0, 7, 12, 0), + EndTime: new Date(2019, 0, 7, 14, 0), CategoryColor: '#357cd2' }, { Id: 3, Subject: 'Blue Moon Eclipse', - StartTime: new Date(2018, 1, 13, 9, 30), - EndTime: new Date(2018, 1, 13, 11, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 8, 9, 30), + EndTime: new Date(2019, 0, 8, 11, 0), CategoryColor: '#7fa900' }, { Id: 4, Subject: 'Meteor Showers in 2018', - StartTime: new Date(2018, 1, 14, 13, 0), - EndTime: new Date(2018, 1, 14, 14, 30), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 9, 13, 0), + EndTime: new Date(2019, 0, 9, 14, 30), CategoryColor: '#ea7a57' }, { Id: 5, Subject: 'Milky Way as Melting pot', - StartTime: new Date(2018, 1, 15, 12, 0), - EndTime: new Date(2018, 1, 15, 14, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 10, 12, 0), + EndTime: new Date(2019, 0, 10, 14, 0), CategoryColor: '#00bdae' }, { Id: 6, Subject: 'Mysteries of Bermuda Triangle', - StartTime: new Date(2018, 1, 15, 9, 30), - EndTime: new Date(2018, 1, 15, 11, 0), + Location: 'Bermuda', + StartTime: new Date(2019, 0, 10, 9, 30), + EndTime: new Date(2019, 0, 10, 11, 0), CategoryColor: '#f57f17' }, { Id: 7, Subject: 'Glaciers and Snowflakes', - StartTime: new Date(2018, 1, 16, 11, 0), - EndTime: new Date(2018, 1, 16, 12, 30), + Location: 'Himalayas', + StartTime: new Date(2019, 0, 11, 11, 0), + EndTime: new Date(2019, 0, 11, 12, 30), CategoryColor: '#1aaa55' }, { Id: 8, Subject: 'Life on Mars', - StartTime: new Date(2018, 1, 17, 9, 0), - EndTime: new Date(2018, 1, 17, 10, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 12, 9, 0), + EndTime: new Date(2019, 0, 12, 10, 0), CategoryColor: '#357cd2' }, { Id: 9, Subject: 'Alien Civilization', - StartTime: new Date(2018, 1, 19, 11, 0), - EndTime: new Date(2018, 1, 19, 13, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 14, 11, 0), + EndTime: new Date(2019, 0, 14, 13, 0), CategoryColor: '#7fa900' }, { Id: 10, Subject: 'Wildlife Galleries', - StartTime: new Date(2018, 1, 21, 11, 0), - EndTime: new Date(2018, 1, 21, 13, 0), + Location: 'Africa', + StartTime: new Date(2019, 0, 16, 11, 0), + EndTime: new Date(2019, 0, 16, 13, 0), CategoryColor: '#ea7a57' }, { Id: 11, Subject: 'Best Photography 2018', - StartTime: new Date(2018, 1, 22, 9, 30), - EndTime: new Date(2018, 1, 22, 11, 0), + Location: 'London', + StartTime: new Date(2019, 0, 17, 9, 30), + EndTime: new Date(2019, 0, 17, 11, 0), CategoryColor: '#00bdae' }, { Id: 12, Subject: 'Smarter Puppies', - StartTime: new Date(2018, 1, 9, 10, 0), - EndTime: new Date(2018, 1, 9, 11, 30), + Location: 'Sweden', + StartTime: new Date(2019, 0, 4, 10, 0), + EndTime: new Date(2019, 0, 4, 11, 30), CategoryColor: '#f57f17' }, { Id: 13, Subject: 'Myths of Andromeda Galaxy', - StartTime: new Date(2018, 1, 7, 10, 30), - EndTime: new Date(2018, 1, 7, 12, 30), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 2, 10, 30), + EndTime: new Date(2019, 0, 2, 12, 30), CategoryColor: '#1aaa55' }, { Id: 14, Subject: 'Aliens vs Humans', - StartTime: new Date(2018, 1, 5, 10, 0), - EndTime: new Date(2018, 1, 5, 11, 30), + Location: 'Research Centre of USA', + StartTime: new Date(2019, 0, 1, 10, 0), + EndTime: new Date(2019, 0, 1, 11, 30), CategoryColor: '#357cd2' }, { Id: 15, Subject: 'Facts of Humming Birds', - StartTime: new Date(2018, 1, 20, 9, 30), - EndTime: new Date(2018, 1, 20, 11, 0), + Location: 'California', + StartTime: new Date(2019, 0, 15, 9, 30), + EndTime: new Date(2019, 0, 15, 11, 0), CategoryColor: '#7fa900' }, { Id: 16, Subject: 'Sky Gazers', - StartTime: new Date(2018, 1, 23, 11, 0), - EndTime: new Date(2018, 1, 23, 13, 0), + Location: 'Alaska', + StartTime: new Date(2019, 0, 18, 11, 0), + EndTime: new Date(2019, 0, 18, 13, 0), CategoryColor: '#ea7a57' }, { Id: 17, Subject: 'The Cycle of Seasons', - StartTime: new Date(2018, 1, 12, 5, 30), - EndTime: new Date(2018, 1, 12, 7, 30), + Location: 'Research Centre of USA', + StartTime: new Date(2019, 0, 7, 5, 30), + EndTime: new Date(2019, 0, 7, 7, 30), CategoryColor: '#00bdae' }, { Id: 18, Subject: 'Space Galaxies and Planets', - StartTime: new Date(2018, 1, 12, 17, 0), - EndTime: new Date(2018, 1, 12, 18, 30), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 7, 17, 0), + EndTime: new Date(2019, 0, 7, 18, 30), CategoryColor: '#f57f17' }, { Id: 19, Subject: 'Lifecycle of Bumblebee', - StartTime: new Date(2018, 1, 15, 6, 0), - EndTime: new Date(2018, 1, 15, 7, 30), + Location: 'San Fransisco', + StartTime: new Date(2019, 0, 10, 6, 0), + EndTime: new Date(2019, 0, 10, 7, 30), CategoryColor: '#7fa900' }, { Id: 20, Subject: 'Alien Civilization', - StartTime: new Date(2018, 1, 15, 16, 0), - EndTime: new Date(2018, 1, 15, 18, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 10, 16, 0), + EndTime: new Date(2019, 0, 10, 18, 0), CategoryColor: '#ea7a57' }, { Id: 21, Subject: 'Alien Civilization', - StartTime: new Date(2018, 1, 11, 14, 0), - EndTime: new Date(2018, 1, 11, 16, 0), + Location: 'Space Centre USA', + StartTime: new Date(2019, 0, 6, 14, 0), + EndTime: new Date(2019, 0, 6, 16, 0), CategoryColor: '#ea7a57' }, { Id: 22, Subject: 'The Cycle of Seasons', - StartTime: new Date(2018, 1, 13, 14, 30), - EndTime: new Date(2018, 1, 13, 16, 0), + Location: 'Research Centre of USA', + StartTime: new Date(2019, 0, 8, 14, 30), + EndTime: new Date(2019, 0, 8, 16, 0), CategoryColor: '#00bdae' }, { Id: 23, Subject: 'Sky Gazers', - StartTime: new Date(2018, 1, 16, 14, 30), - EndTime: new Date(2018, 1, 16, 16, 0), + Location: 'Greenland', + StartTime: new Date(2019, 0, 11, 14, 30), + EndTime: new Date(2019, 0, 11, 16, 0), CategoryColor: '#ea7a57' }, { Id: 24, Subject: 'Facts of Humming Birds', - StartTime: new Date(2018, 1, 17, 12, 30), - EndTime: new Date(2018, 1, 17, 14, 30), + Location: 'California', + StartTime: new Date(2019, 0, 12, 12, 30), + EndTime: new Date(2019, 0, 12, 14, 30), CategoryColor: '#7fa900' } ]; @@ -4838,3 +4862,85 @@ window.blockData = [ EmployeeId: 3 } ]; + +window.resourceSampleData = [ + { + Id: 1, + Subject: 'Burning Man', + StartTime: new Date(2018, 5, 1, 15, 0), + EndTime: new Date(2018, 5, 1, 17, 30), + OwnerId: 1 + }, { + Id: 2, + Subject: 'Marketing Forum', + StartTime: new Date(2018, 5, 3, 10, 0), + EndTime: new Date(2018, 5, 3, 11, 30), + OwnerId: 2 + }, { + Id: 3, + Subject: 'Business Factory', + StartTime: new Date(2018, 5, 3, 13, 30), + EndTime: new Date(2018, 5, 3, 15, 0), + OwnerId: 3 + }, { + Id: 4, + Subject: 'Burning Man', + StartTime: new Date(2018, 5, 4, 11, 30), + EndTime: new Date(2018, 5, 4, 13, 0), + OwnerId: 1 + }, { + Id: 5, + Subject: 'Funnel Hacking', + StartTime: new Date(2018, 5, 5, 9, 30), + EndTime: new Date(2018, 5, 5, 11, 0), + OwnerId: 3 + }, { + Id: 6, + Subject: 'The human gathering"', + StartTime: new Date(2018, 5, 5, 13, 0), + EndTime: new Date(2018, 5, 5, 14, 30), + OwnerId: 2 + }, { + Id: 7, + Subject: 'Techweek', + StartTime: new Date(2018, 5, 6, 11, 0), + EndTime: new Date(2018, 5, 6, 12, 30), + OwnerId: 2 + }, { + Id: 8, + Subject: 'Grow Conference', + StartTime: new Date(2018, 5, 7, 10, 0), + EndTime: new Date(2018, 5, 7, 11, 30), + OwnerId: 1 + }, { + Id: 9, + Subject: 'Data Science Conference', + StartTime: new Date(2018, 5, 7, 13, 30), + EndTime: new Date(2018, 5, 7, 15, 0), + OwnerId: 1 + }, { + Id: 10, + Subject: 'Blogcademy', + StartTime: new Date(2018, 5, 8, 12, 0), + EndTime: new Date(2018, 5, 8, 13, 30), + OwnerId: 3 + }, { + Id: 11, + Subject: 'World Domination Summit', + StartTime: new Date(2018, 5, 9, 9, 30), + EndTime: new Date(2018, 5, 9, 11, 0), + OwnerId: 2 + }, { + Id: 12, + Subject: 'Content Marketing', + StartTime: new Date(2018, 5, 9, 13, 0), + EndTime: new Date(2018, 5, 9, 14, 30), + OwnerId: 1 + }, { + Id: 13, + Subject: 'Mobile World Conference', + StartTime: new Date(2018, 5, 15, 18, 0), + EndTime: new Date(2018, 5, 15, 20, 0), + OwnerId: 1 + } +]; \ No newline at end of file diff --git a/src/schedule/date-header-template-stack.json b/src/schedule/date-header-template-stack.json index 25dba942..8c7b6cf3 100644 --- a/src/schedule/date-header-template-stack.json +++ b/src/schedule/date-header-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n // Used in templates to get day string\n var instance = new ej.base.Internationalization();\n window.getDateHeaderText = function (value) {\n return instance.formatDate(value, { skeleton: 'Ed' });\n };\n window.getWeather = function (value) {\n switch (value.getDay()) {\n case 0:\n return '
                                    25°C
                                    ';\n case 1:\n return '
                                    18°C
                                    ';\n case 2:\n return '
                                    10°C
                                    ';\n case 3:\n return '
                                    16°C
                                    ';\n case 4:\n return '
                                    8°C
                                    ';\n case 5:\n return '
                                    27°C
                                    ';\n case 6:\n return '
                                    17°C
                                    ';\n default:\n return null;\n }\n };\n\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n dateHeaderTemplate: '
                                    ${getDateHeaderText(data.date)}
                                    ${getWeather(data.date)}',\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n cssClass: 'schedule-date-header-template',\n renderCell: function (args) {\n if (args.elementType === 'monthCells' && this.currentView === 'Month') {\n var ele = document.createElement('div');\n ele.innerHTML = getWeather(args.date);\n (args.element).appendChild(ele.firstChild);\n }\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n // Used in templates to get day string\n var instance = new ej.base.Internationalization();\n window.getDateHeaderText = function (value) {\n return instance.formatDate(value, { skeleton: 'Ed' });\n };\n window.getWeather = function (value) {\n switch (value.getDay()) {\n case 0:\n return '
                                    25°C
                                    ';\n case 1:\n return '
                                    18°C
                                    ';\n case 2:\n return '
                                    10°C
                                    ';\n case 3:\n return '
                                    16°C
                                    ';\n case 4:\n return '
                                    8°C
                                    ';\n case 5:\n return '
                                    27°C
                                    ';\n case 6:\n return '
                                    17°C
                                    ';\n default:\n return null;\n }\n };\n\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n dateHeaderTemplate: '
                                    ${getDateHeaderText(data.date)}
                                    ${getWeather(data.date)}',\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineMonth'],\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data },\n cssClass: 'schedule-date-header-template',\n renderCell: function (args) {\n if (args.elementType === 'monthCells' && this.currentView === 'Month') {\n var ele = document.createElement('div');\n ele.innerHTML = getWeather(args.date);\n (args.element).appendChild(ele.firstChild);\n }\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/date-header-template.js b/src/schedule/date-header-template.js index 17a37c5f..e37a25a9 100644 --- a/src/schedule/date-header-template.js +++ b/src/schedule/date-header-template.js @@ -31,7 +31,7 @@ this.default = function () { height: '650px', dateHeaderTemplate: '
                                    ${getDateHeaderText(data.date)}
                                    ${getWeather(data.date)}', views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineMonth'], - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), eventSettings: { dataSource: data }, cssClass: 'schedule-date-header-template', renderCell: function (args) { diff --git a/src/schedule/default-stack.json b/src/schedule/default-stack.json index ad457a25..f2d895d1 100644 --- a/src/schedule/default-stack.json +++ b/src/schedule/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current Date\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n dragStart: function (args) {\n args.navigation.enable = true;\n }\n });\n scheduleObj.appendTo('#Schedule');\n var currentDate = new ej.calendars.DatePicker({\n value: new Date(2018, 1, 15),\n showClearButton: false,\n change: function (args) {\n scheduleObj.selectedDate = args.value;\n scheduleObj.dataBind();\n }\n });\n currentDate.appendTo('#scheduledate');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current Date\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data },\n dragStart: function (args) {\n args.navigation.enable = true;\n }\n });\n scheduleObj.appendTo('#Schedule');\n var currentDate = new ej.calendars.DatePicker({\n value: new Date(2019, 0, 10),\n showClearButton: false,\n change: function (args) {\n scheduleObj.selectedDate = args.value;\n scheduleObj.dataBind();\n }\n });\n currentDate.appendTo('#scheduledate');\n"} \ No newline at end of file diff --git a/src/schedule/default.js b/src/schedule/default.js index c4993dc0..8061da68 100644 --- a/src/schedule/default.js +++ b/src/schedule/default.js @@ -2,7 +2,7 @@ this.default = function () { var data = new ej.base.extend([], window.scheduleData, null, true); var scheduleObj = new ej.schedule.Schedule({ height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), eventSettings: { dataSource: data }, dragStart: function (args) { args.navigation.enable = true; @@ -10,7 +10,7 @@ this.default = function () { }); scheduleObj.appendTo('#Schedule'); var currentDate = new ej.calendars.DatePicker({ - value: new Date(2018, 1, 15), + value: new Date(2019, 0, 10), showClearButton: false, change: function (args) { scheduleObj.selectedDate = args.value; diff --git a/src/schedule/editor-custom-field-stack.json b/src/schedule/editor-custom-field-stack.json index d42378d1..be653de5 100644 --- a/src/schedule/editor-custom-field-stack.json +++ b/src/schedule/editor-custom-field-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.eventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n popupOpen: function (args) {\n if (args.type === 'Editor') {\n // Create required custom elements in initial time\n if (!args.element.querySelector('.custom-field-row')) {\n var row = new ej.base.createElement('div', { className: 'custom-field-row' });\n var formElement = args.element.querySelector('.e-schedule-form');\n formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));\n var container = new ej.base.createElement('div', { className: 'custom-field-container' });\n var inputEle = new ej.base.createElement('input', {\n className: 'e-field', attrs: { name: 'EventType' }\n });\n container.appendChild(inputEle);\n row.appendChild(container);\n var drowDownList = new ej.dropdowns.DropDownList({\n dataSource: [\n { text: 'Public Event', value: 'public-event' },\n { text: 'Maintenance', value: 'maintenance' },\n { text: 'Commercial Event', value: 'commercial-event' },\n { text: 'Family Event', value: 'family-event' }\n ],\n fields: { text: 'text', value: 'value' },\n value: args.EventType,\n floatLabelType: 'Always', placeholder: 'Event Type'\n });\n drowDownList.appendTo(inputEle);\n inputEle.setAttribute('name', 'EventType');\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.eventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n popupOpen: function (args) {\n if (args.type === 'Editor') {\n // Create required custom elements in initial time\n if (!args.element.querySelector('.custom-field-row')) {\n var row = new ej.base.createElement('div', { className: 'custom-field-row' });\n var formElement = args.element.querySelector('.e-schedule-form');\n formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));\n var container = new ej.base.createElement('div', { className: 'custom-field-container' });\n var inputEle = new ej.base.createElement('input', {\n className: 'e-field', attrs: { name: 'EventType' }\n });\n container.appendChild(inputEle);\n row.appendChild(container);\n var drowDownList = new ej.dropdowns.DropDownList({\n dataSource: [\n { text: 'Public Event', value: 'public-event' },\n { text: 'Maintenance', value: 'maintenance' },\n { text: 'Commercial Event', value: 'commercial-event' },\n { text: 'Family Event', value: 'family-event' }\n ],\n fields: { text: 'text', value: 'value' },\n value: args.EventType,\n floatLabelType: 'Always', placeholder: 'Event Type'\n });\n drowDownList.appendTo(inputEle);\n inputEle.setAttribute('name', 'EventType');\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/editor-template-stack.json b/src/schedule/editor-template-stack.json index f4105c31..9519efc9 100644 --- a/src/schedule/editor-template-stack.json +++ b/src/schedule/editor-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.doctorsEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n showQuickInfo: false,\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n editorTemplate: '#EventEditorTemplate',\n popupOpen: function (args) {\n if (args.type === 'Editor') {\n var statusElement = args.element.querySelector('#EventType');\n if (!statusElement.classList.contains('e-dropdownlist')) {\n var dropDownListObject = new ej.dropdowns.DropDownList({\n placeholder: 'Select a status', value: statusElement.value,\n dataSource: ['New', 'Requested', 'Confirmed']\n });\n dropDownListObject.appendTo(statusElement);\n statusElement.setAttribute('name', 'EventType');\n }\n var startElement = args.element.querySelector('#StartTime');\n if (!startElement.classList.contains('e-datetimepicker')) {\n new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);\n }\n var endElement = args.element.querySelector('#EndTime');\n if (!endElement.classList.contains('e-datetimepicker')) {\n new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);\n }\n }\n },\n eventRendered: function (args) {\n switch (args.data.EventType) {\n case 'Requested':\n (args.element).style.backgroundColor = '#F57F17';\n break;\n case 'Confirmed':\n (args.element).style.backgroundColor = '#7fa900';\n break;\n case 'New':\n (args.element).style.backgroundColor = '#8e24aa';\n break;\n }\n },\n actionBegin: function (args) {\n if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {\n var data;\n if (args.requestType === 'eventCreate') {\n data = args.data[0];\n } else if (args.requestType === 'eventChange') {\n data = args.data;\n }\n if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {\n args.cancel = true;\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.doctorsEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n showQuickInfo: false,\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n editorTemplate: '#EventEditorTemplate',\n popupOpen: function (args) {\n if (args.type === 'Editor') {\n var statusElement = args.element.querySelector('#EventType');\n if (!statusElement.classList.contains('e-dropdownlist')) {\n var dropDownListObject = new ej.dropdowns.DropDownList({\n placeholder: 'Select a status', value: statusElement.value,\n dataSource: ['New', 'Requested', 'Confirmed']\n });\n dropDownListObject.appendTo(statusElement);\n statusElement.setAttribute('name', 'EventType');\n }\n var startElement = args.element.querySelector('#StartTime');\n if (!startElement.classList.contains('e-datetimepicker')) {\n new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);\n }\n var endElement = args.element.querySelector('#EndTime');\n if (!endElement.classList.contains('e-datetimepicker')) {\n new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);\n }\n }\n },\n eventRendered: function (args) {\n switch (args.data.EventType) {\n case 'Requested':\n (args.element).style.backgroundColor = '#F57F17';\n break;\n case 'Confirmed':\n (args.element).style.backgroundColor = '#7fa900';\n break;\n case 'New':\n (args.element).style.backgroundColor = '#8e24aa';\n break;\n }\n },\n actionBegin: function (args) {\n if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {\n var data;\n if (args.requestType === 'eventCreate') {\n data = args.data[0];\n } else if (args.requestType === 'eventChange') {\n data = args.data;\n }\n if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {\n args.cancel = true;\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/editor-validation-stack.json b/src/schedule/editor-validation-stack.json index b7510b1e..6e41b3a7 100644 --- a/src/schedule/editor-validation-stack.json +++ b/src/schedule/editor-validation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { name: 'Subject', validation: { required: true } },\n location: {\n name: 'Location', validation: {\n required: true,\n regex: ['^[a-zA-Z0-9- ]*$', 'Special character(s) not allowed in this field']\n }\n },\n description: {\n name: 'Description', validation: {\n required: true, minLength: 5, maxLength: 500\n }\n },\n startTime: { name: 'StartTime', validation: { required: true } },\n endTime: { name: 'EndTime', validation: { required: true } }\n }\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { name: 'Subject', validation: { required: true } },\n location: {\n name: 'Location', validation: {\n required: true,\n regex: ['^[a-zA-Z0-9- ]*$', 'Special character(s) not allowed in this field']\n }\n },\n description: {\n name: 'Description', validation: {\n required: true, minLength: 5, maxLength: 500\n }\n },\n startTime: { name: 'StartTime', validation: { required: true } },\n endTime: { name: 'EndTime', validation: { required: true } }\n }\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/editor-validation.js b/src/schedule/editor-validation.js index d0fade94..af5e8999 100644 --- a/src/schedule/editor-validation.js +++ b/src/schedule/editor-validation.js @@ -3,7 +3,7 @@ this.default = function () { var scheduleObj = new ej.schedule.Schedule({ width: '100%', height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), eventSettings: { dataSource: data, fields: { diff --git a/src/schedule/event-template-stack.json b/src/schedule/event-template-stack.json index 88de6306..5fa16c9d 100644 --- a/src/schedule/event-template-stack.json +++ b/src/schedule/event-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n // Used in templates to get time string\n var instance = new ej.base.Internationalization();\n window.getTimeString = function (value) {\n return instance.formatDate(value, { skeleton: 'hm' });\n };\n var data = new ej.base.extend([], window.webinarData, null, true);\n var viewsCollection = [\n { option: 'Week', eventTemplate: '#event-template' },\n { option: 'TimelineWeek', eventTemplate: '#timeline-event-template' }\n ];\n if (ej.base.Browser.isDevice) {\n viewsCollection = [{ option: 'Day', eventTemplate: '#event-template' },\n { option: 'TimelineDay', eventTemplate: '#timeline-event-template' }];\n }\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n startHour: '08:00',\n endHour: '18:00',\n workHours: {\n start: '08:00'\n },\n views: viewsCollection,\n selectedDate: new Date(2018, 1, 15),\n readonly: true,\n eventSettings: {\n dataSource: data\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n // Used in templates to get time string\n var instance = new ej.base.Internationalization();\n window.getTimeString = function (value) {\n return instance.formatDate(value, { skeleton: 'hm' });\n };\n var data = new ej.base.extend([], window.webinarData, null, true);\n var viewsCollection = [\n { option: 'Week', eventTemplate: '#event-template' },\n { option: 'TimelineWeek', eventTemplate: '#timeline-event-template' }\n ];\n if (ej.base.Browser.isDevice) {\n viewsCollection = [{ option: 'Day', eventTemplate: '#event-template' },\n { option: 'TimelineDay', eventTemplate: '#timeline-event-template' }];\n }\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n startHour: '08:00',\n endHour: '18:00',\n workHours: {\n start: '08:00'\n },\n views: viewsCollection,\n selectedDate: new Date(2018, 1, 15),\n readonly: true,\n eventSettings: {\n dataSource: data\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/event-template.html b/src/schedule/event-template.html index fa7ba913..6e8d6245 100644 --- a/src/schedule/event-template.html +++ b/src/schedule/event-template.html @@ -12,6 +12,7 @@

                                    +

                                    With the usage of template, the user can format and change the default appearance of the events by making use of the @@ -20,6 +21,7 @@ the events.

                                    +
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n created: OnCreate,\n actionBegin: OnActionBegin,\n actionComplete: OnActionComplete,\n actionFailure: OnActionFailure,\n cellClick: OnCellClick,\n cellDoubleClick: OnCellDoubleClick,\n destroyed: OnDestroyed,\n navigating: OnNavigating,\n eventClick: OnEventClick,\n popupOpen: OnPopupOpen,\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var btn = new ej.buttons.Button();\n btn.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n\n function OnCreate() {\n appendElement('Schedule load event called
                                    ');\n }\n function OnActionBegin() {\n appendElement('Schedule Action Begin event called
                                    ');\n }\n function OnActionComplete() {\n appendElement('Schedule Action Complete event called
                                    ');\n }\n function OnActionFailure() {\n appendElement('Schedule Action Failure event called
                                    ');\n }\n function OnCellDoubleClick() {\n appendElement('SChedule Cell Double Click event called
                                    ');\n }\n function OnCellClick() {\n appendElement('Schedule Cell Click event called
                                    ');\n }\n function OnNavigating() {\n appendElement('Schedule Navigating event called
                                    ');\n }\n function OnDestroyed() {\n appendElement('Schedule Destroyed event called
                                    ');\n }\n function OnEventClick() {\n appendElement('Schedule Event Click event called
                                    ');\n }\n function OnPopupOpen() {\n appendElement('Schedule Popup Open event called
                                    ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data },\n created: OnCreate,\n actionBegin: OnActionBegin,\n actionComplete: OnActionComplete,\n actionFailure: OnActionFailure,\n cellClick: OnCellClick,\n cellDoubleClick: OnCellDoubleClick,\n destroyed: OnDestroyed,\n navigating: OnNavigating,\n eventClick: OnEventClick,\n popupOpen: OnPopupOpen,\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var btn = new ej.buttons.Button();\n btn.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n\n function OnCreate() {\n appendElement('Schedule load event called
                                    ');\n }\n function OnActionBegin() {\n appendElement('Schedule Action Begin event called
                                    ');\n }\n function OnActionComplete() {\n appendElement('Schedule Action Complete event called
                                    ');\n }\n function OnActionFailure() {\n appendElement('Schedule Action Failure event called
                                    ');\n }\n function OnCellDoubleClick() {\n appendElement('SChedule Cell Double Click event called
                                    ');\n }\n function OnCellClick() {\n appendElement('Schedule Cell Click event called
                                    ');\n }\n function OnNavigating() {\n appendElement('Schedule Navigating event called
                                    ');\n }\n function OnDestroyed() {\n appendElement('Schedule Destroyed event called
                                    ');\n }\n function OnEventClick() {\n appendElement('Schedule Event Click event called
                                    ');\n }\n function OnPopupOpen() {\n appendElement('Schedule Popup Open event called
                                    ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n"} \ No newline at end of file diff --git a/src/schedule/events.html b/src/schedule/events.html index 9309e131..28437e6c 100644 --- a/src/schedule/events.html +++ b/src/schedule/events.html @@ -23,6 +23,7 @@
                                    + +

                                    This demo illustrates the client-side events that triggers on respective Scheduler actions and the same is being displayed on the event trace panel. diff --git a/src/schedule/events.js b/src/schedule/events.js index 1c2c04e1..bed90f8c 100644 --- a/src/schedule/events.js +++ b/src/schedule/events.js @@ -3,7 +3,7 @@ this.default = function () { var scheduleObj = new ej.schedule.Schedule({ width: '100%', height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), eventSettings: { dataSource: data }, created: OnCreate, actionBegin: OnActionBegin, diff --git a/src/schedule/excel-export-stack.json b/src/schedule/excel-export-stack.json new file mode 100644 index 00000000..bee2dd13 --- /dev/null +++ b/src/schedule/excel-export-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n

                                    \n
                                    \n
                                    \n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '550px',\n views: ['Week'],\n currentView: 'Week',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data },\n actionBegin: function (args) {\n if (args.requestType === 'toolbarItemRendering') {\n var exportItem = {\n align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',\n text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick\n };\n args.items.push(exportItem);\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n function onExportClick() {\n var exportValues = { fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'] };\n scheduleObj.exportToExcel(exportValues);\n }\n"} \ No newline at end of file diff --git a/src/schedule/excel-export.html b/src/schedule/excel-export.html new file mode 100644 index 00000000..aaf0652d --- /dev/null +++ b/src/schedule/excel-export.html @@ -0,0 +1,38 @@ +
                                    +
                                    +
                                    + + + +
                                    +

                                    This example demonstrates how to export the Scheduler events to an Excel file format at client-side. +

                                    +
                                    +
                                    +

                                    In this example, the Scheduler events data are exported to an Excel file by making use of the public method + exportToExcel. By default, the whole event collection bound to the Scheduler gets exported as an excel file. To + export only specific events of Scheduler, you need to pass the custom data collection as a parameter to the + exportToExcel method. This method accepts the export options as its arguments such as fileName, exportType, + fields, customData, and includeOccurrences. The fileName denotes the name to be given for the exported file and + the exportType allows you to set the format of the excel file to be exported either as .xlsx or .csv. The custom + or specific field collection of event dataSource to be exported can be provided through fields option and the + custom data collection can be exported by passing them through the customData option. There also exists option + to export individual instances of the recurring events to an excel file, by setting true or false to the + includeOccurrences option, denoting either to include or exclude the occurrences as separate instances on an + exported excel file.

                                    +

                                    + Module Injection +

                                    +

                                    Tostart using Excel exporting functionality in Scheduler, you need to import the ExcelExport module from + @syncfusion/ej2-schedule package and then inject it using the Schedule.Inject(ExcelExport) + method. +

                                    +
                                    \ No newline at end of file diff --git a/src/schedule/excel-export.js b/src/schedule/excel-export.js new file mode 100644 index 00000000..21fc73e9 --- /dev/null +++ b/src/schedule/excel-export.js @@ -0,0 +1,26 @@ +this.default = function () { + var data = new ej.base.extend([], window.scheduleData, null, true); + var scheduleObj = new ej.schedule.Schedule({ + width: '100%', + height: '550px', + views: ['Week'], + currentView: 'Week', + selectedDate: new Date(2019, 0, 10), + eventSettings: { dataSource: data }, + actionBegin: function (args) { + if (args.requestType === 'toolbarItemRendering') { + var exportItem = { + align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export', + text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick + }; + args.items.push(exportItem); + } + } + }); + scheduleObj.appendTo('#Schedule'); + + function onExportClick() { + var exportValues = { fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'] }; + scheduleObj.exportToExcel(exportValues); + } +}; \ No newline at end of file diff --git a/src/schedule/extended-views-stack.json b/src/schedule/extended-views-stack.json index ef07fb9d..52b00b46 100644 --- a/src/schedule/extended-views-stack.json +++ b/src/schedule/extended-views-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 5, 21),\n eventSettings: { dataSource: data },\n views: [\n { displayName: '3 Days', option: 'Day', interval: 3 },\n { displayName: '2 Weeks', option: 'Week', isSelected: true, interval: 2 },\n { displayName: '4 Months', option: 'Month', interval: 4 }\n ],\n eventRendered: function(args) { applyCategoryColor(args, scheduleObj.currentView);}\n });\n scheduleObj.appendTo('#Schedule');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 5, 21),\n eventSettings: { dataSource: data },\n views: [\n { displayName: '3 Days', option: 'Day', interval: 3 },\n { displayName: '2 Weeks', option: 'Week', isSelected: true, interval: 2 },\n { displayName: '4 Months', option: 'Month', interval: 4 }\n ],\n eventRendered: function(args) { applyCategoryColor(args, scheduleObj.currentView);}\n });\n scheduleObj.appendTo('#Schedule');\n\n"} \ No newline at end of file diff --git a/src/schedule/external-drag-drop-stack.json b/src/schedule/external-drag-drop-stack.json index b8e20572..6cc3dd70 100644 --- a/src/schedule/external-drag-drop-stack.json +++ b/src/schedule/external-drag-drop-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n

                                    Doctor's Appointments

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n

                                    Waiting List

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n window.getConsultantName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n\n window.getConsultantImage = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n if (resourceName === \"GENERAL\" || resourceName === \"DENTAL\") {\n return '';\n } else {\n return \"\";\n }\n };\n\n window.getConsultantDesignation = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n if (resourceName === \"GENERAL\" || resourceName === \"DENTAL\") {\n return '';\n } else {\n return value.resourceData.Designation;\n }\n };\n\n var hospitalData = new ej.base.extend([], window.hospitalData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineDay',\n resourceHeaderTemplate: '#resource-template',\n cssClass: 'schedule-drag-drop',\n workHours: {\n start: '08:00',\n end: '18:00'\n },\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineMonth' }\n ],\n group: {\n enableCompactView: false,\n resources: ['Departments', 'Consultants']\n },\n resources: [\n {\n field: 'DepartmentID', title: 'Department',\n name: 'Departments', allowMultiple: false,\n dataSource: [\n { Text: 'GENERAL', Id: 1, Color: '#bbdc00' },\n { Text: 'DENTAL', Id: 2, Color: '#9e5fff' }\n ],\n textField: 'Text', idField: 'Id', colorField: 'Color'\n },\n {\n field: 'ConsultantID', title: 'Consultant',\n name: 'Consultants', allowMultiple: false,\n dataSource: [\n { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' },\n { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' },\n { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' },\n { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' },\n { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' },\n { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' }\n ],\n textField: 'Text', idField: 'Id', groupIDField: 'GroupId', colorField: 'Color'\n }\n ],\n eventSettings: {\n dataSource: hospitalData,\n fields: {\n subject: { title: 'Patient Name', name: 'Name' },\n startTime: { title: \"From\", name: \"StartTime\" },\n endTime: { title: \"To\", name: \"EndTime\" },\n description: { title: 'Reason', name: 'Description' }\n }\n },\n actionBegin: onActionBegin,\n drag: onItemDrag\n });\n scheduleObj.appendTo('#Schedule');\n\n var waitingList = new ej.base.extend([], window.waitingList, null, true);\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: waitingList, id: 'Id', text: 'Name' },\n allowDragAndDrop: true,\n nodeDragStop: onTreeDragStop,\n nodeDragging: onItemDrag,\n nodeTemplate: '#treeTemplate',\n cssClass: 'treeview-external-drag'\n });\n treeObj.appendTo('#Tree');\n\n var isTreeItemDropped = false;\n var draggedItemId = '';\n\n function onItemDrag(event) {\n if (scheduleObj.isAdaptive) {\n var classElement = scheduleObj.element.querySelector('.e-device-hover');\n if (classElement) {\n classElement.classList.remove('e-device-hover');\n }\n if (event.target.classList.contains('e-work-cells')) {\n ej.base.addClass([event.target], 'e-device-hover');\n }\n }\n if (document.body.style.cursor === 'not-allowed') {\n document.body.style.cursor = '';\n }\n if (event.name == 'nodeDragging') {\n var dragElementIcon = document.querySelectorAll('.e-drag-item .e-icon-expandable');\n for (var i = 0; i < dragElementIcon.length; i++) {\n dragElementIcon[i].style.display = 'none';\n }\n }\n }\n\n function onActionBegin(event) {\n if (event.requestType === 'eventCreate' && isTreeItemDropped) {\n var treeViewdata = treeObj.fields.dataSource;\n var filteredPeople = treeViewdata.filter(function (item) { return item.Id !== parseInt(draggedItemId, 10); });\n treeObj.fields.dataSource = filteredPeople;\n var elements = document.querySelectorAll('.e-drag-item.treeview-external-drag');\n for (var i = 0; i < elements.length; i++) {\n remove(elements[i]);\n }\n }\n }\n\n function onTreeDragStop(event) {\n var treeElement = ej.base.closest(event.target, '.e-treeview');\n var classElement = scheduleObj.element.querySelector('.e-device-hover');\n if (classElement) {\n classElement.classList.remove('e-device-hover');\n }\n if (!treeElement) {\n event.cancel = true;\n var scheduleElement = ej.base.closest(event.target, '.e-content-wrap');\n if (scheduleElement) {\n var treeviewData = treeObj.fields.dataSource;\n if (event.target.classList.contains('e-work-cells')) {\n var filteredData =\n treeviewData.filter(function (item) { return item.Id === parseInt(event.draggedNodeData.id, 10); });\n var cellData = scheduleObj.getCellDetails(event.target);\n var resourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex);\n var eventData = {\n Name: filteredData[0].Name,\n StartTime: cellData.startTime,\n EndTime: cellData.endTime,\n IsAllDay: cellData.isAllDay,\n Description: filteredData[0].Description,\n DepartmentID: resourceDetails.resourceData.GroupId,\n ConsultantID: resourceDetails.resourceData.Id\n };\n scheduleObj.openEditor(eventData, 'Add', true);\n isTreeItemDropped = true;\n draggedItemId = event.draggedNodeData.id;\n }\n }\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n

                                    Doctor's Appointments

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n

                                    Waiting List

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n window.getConsultantName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n\n window.getConsultantImage = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n if (resourceName === \"GENERAL\" || resourceName === \"DENTAL\") {\n return '';\n } else {\n return \"\";\n }\n };\n\n window.getConsultantDesignation = function (value) {\n var resourceName = value.resourceData[value.resource.textField];\n if (resourceName === \"GENERAL\" || resourceName === \"DENTAL\") {\n return '';\n } else {\n return value.resourceData.Designation;\n }\n };\n\n var hospitalData = new ej.base.extend([], window.hospitalData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineDay',\n resourceHeaderTemplate: '#resource-template',\n cssClass: 'schedule-drag-drop',\n workHours: {\n start: '08:00',\n end: '18:00'\n },\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineMonth' }\n ],\n group: {\n enableCompactView: false,\n resources: ['Departments', 'Consultants']\n },\n resources: [\n {\n field: 'DepartmentID', title: 'Department',\n name: 'Departments', allowMultiple: false,\n dataSource: [\n { Text: 'GENERAL', Id: 1, Color: '#bbdc00' },\n { Text: 'DENTAL', Id: 2, Color: '#9e5fff' }\n ],\n textField: 'Text', idField: 'Id', colorField: 'Color'\n },\n {\n field: 'ConsultantID', title: 'Consultant',\n name: 'Consultants', allowMultiple: false,\n dataSource: [\n { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' },\n { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' },\n { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' },\n { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' },\n { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' },\n { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' }\n ],\n textField: 'Text', idField: 'Id', groupIDField: 'GroupId', colorField: 'Color'\n }\n ],\n eventSettings: {\n dataSource: hospitalData,\n fields: {\n subject: { title: 'Patient Name', name: 'Name' },\n startTime: { title: \"From\", name: \"StartTime\" },\n endTime: { title: \"To\", name: \"EndTime\" },\n description: { title: 'Reason', name: 'Description' }\n }\n },\n actionBegin: onActionBegin,\n drag: onItemDrag\n });\n scheduleObj.appendTo('#Schedule');\n\n var waitingList = new ej.base.extend([], window.waitingList, null, true);\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: waitingList, id: 'Id', text: 'Name' },\n allowDragAndDrop: true,\n nodeDragStop: onTreeDragStop,\n nodeDragging: onItemDrag,\n nodeTemplate: '#treeTemplate',\n cssClass: 'treeview-external-drag'\n });\n treeObj.appendTo('#Tree');\n\n var isTreeItemDropped = false;\n var draggedItemId = '';\n\n function onItemDrag(event) {\n if (scheduleObj.isAdaptive) {\n var classElement = scheduleObj.element.querySelector('.e-device-hover');\n if (classElement) {\n classElement.classList.remove('e-device-hover');\n }\n if (event.target.classList.contains('e-work-cells')) {\n ej.base.addClass([event.target], 'e-device-hover');\n }\n }\n if (document.body.style.cursor === 'not-allowed') {\n document.body.style.cursor = '';\n }\n if (event.name == 'nodeDragging') {\n var dragElementIcon = document.querySelectorAll('.e-drag-item .e-icon-expandable');\n for (var i = 0; i < dragElementIcon.length; i++) {\n dragElementIcon[i].style.display = 'none';\n }\n }\n }\n\n function onActionBegin(event) {\n if (event.requestType === 'eventCreate' && isTreeItemDropped) {\n var treeViewdata = treeObj.fields.dataSource;\n var filteredPeople = treeViewdata.filter(function (item) { return item.Id !== parseInt(draggedItemId, 10); });\n treeObj.fields.dataSource = filteredPeople;\n var elements = document.querySelectorAll('.e-drag-item.treeview-external-drag');\n for (var i = 0; i < elements.length; i++) {\n remove(elements[i]);\n }\n }\n }\n\n function onTreeDragStop(event) {\n var treeElement = ej.base.closest(event.target, '.e-treeview');\n var classElement = scheduleObj.element.querySelector('.e-device-hover');\n if (classElement) {\n classElement.classList.remove('e-device-hover');\n }\n if (!treeElement) {\n event.cancel = true;\n var scheduleElement = ej.base.closest(event.target, '.e-content-wrap');\n if (scheduleElement) {\n var treeviewData = treeObj.fields.dataSource;\n if (event.target.classList.contains('e-work-cells')) {\n var filteredData =\n treeviewData.filter(function (item) { return item.Id === parseInt(event.draggedNodeData.id, 10); });\n var cellData = scheduleObj.getCellDetails(event.target);\n var resourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex);\n var eventData = {\n Name: filteredData[0].Name,\n StartTime: cellData.startTime,\n EndTime: cellData.endTime,\n IsAllDay: cellData.isAllDay,\n Description: filteredData[0].Description,\n DepartmentID: resourceDetails.resourceData.GroupId,\n ConsultantID: resourceDetails.resourceData.Id\n };\n scheduleObj.openEditor(eventData, 'Add', true);\n isTreeItemDropped = true;\n draggedItemId = event.draggedNodeData.id;\n }\n }\n }\n }\n\n"} \ No newline at end of file diff --git a/src/schedule/external-drag-drop.html b/src/schedule/external-drag-drop.html index ab6b73c5..ddb10bea 100644 --- a/src/schedule/external-drag-drop.html +++ b/src/schedule/external-drag-drop.html @@ -53,6 +53,7 @@

                                    Waiting List

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceTeamData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'WorkWeek',\n selectedDate: new Date(2018, 5, 5),\n startHour: '09:00',\n endHour: '19:00',\n group: {\n byGroupID: false,\n resources: ['Projects', 'Categories']\n },\n resources: [\n {\n field: 'ProjectId', title: 'Choose Project', name: 'Projects',\n dataSource: [\n { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },\n { text: 'PROJECT 2', id: 2, color: '#56ca85' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }, {\n field: 'CategoryId', title: 'Category',\n name: 'Categories', allowMultiple: true,\n dataSource: [\n { text: 'Development', id: 1, color: '#df5286' },\n { text: 'Testing', id: 2, color: '#7fa900' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }\n ],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Summary', name: 'Subject' },\n description: { title: 'Comments', name: 'Description' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceTeamData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'WorkWeek',\n selectedDate: new Date(2018, 5, 5),\n startHour: '09:00',\n endHour: '19:00',\n group: {\n byGroupID: false,\n resources: ['Projects', 'Categories']\n },\n resources: [\n {\n field: 'ProjectId', title: 'Choose Project', name: 'Projects',\n dataSource: [\n { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },\n { text: 'PROJECT 2', id: 2, color: '#56ca85' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }, {\n field: 'CategoryId', title: 'Category',\n name: 'Categories', allowMultiple: true,\n dataSource: [\n { text: 'Development', id: 1, color: '#df5286' },\n { text: 'Testing', id: 2, color: '#7fa900' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }\n ],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Summary', name: 'Subject' },\n description: { title: 'Comments', name: 'Description' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/group-by-date-stack.json b/src/schedule/group-by-date-stack.json index 162d091c..d633a28a 100644 --- a/src/schedule/group-by-date-stack.json +++ b/src/schedule/group-by-date-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n group: {\n byDate: true,\n resources: ['Owners']\n },\n resources: [{\n field: 'TaskId', title: 'Assignee',\n name: 'Owners', allowMultiple: true,\n dataSource: [\n { text: 'Alice', id: 1, color: '#df5286' },\n { text: 'Smith', id: 2, color: '#7fa900' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }],\n views: ['Day', 'Week', 'Month', 'Agenda'],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Task', name: 'Subject' },\n location: { title: 'Project Name', name: 'Location' },\n description: { title: 'Comments', name: 'Description' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n group: {\n byDate: true,\n resources: ['Owners']\n },\n resources: [{\n field: 'TaskId', title: 'Assignee',\n name: 'Owners', allowMultiple: true,\n dataSource: [\n { text: 'Alice', id: 1, color: '#df5286' },\n { text: 'Smith', id: 2, color: '#7fa900' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }],\n views: ['Day', 'Week', 'Month', 'Agenda'],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Task', name: 'Subject' },\n location: { title: 'Project Name', name: 'Location' },\n description: { title: 'Comments', name: 'Description' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/group-custom-work-days-stack.json b/src/schedule/group-custom-work-days-stack.json index 614a4bf4..cd3df060 100644 --- a/src/schedule/group-custom-work-days-stack.json +++ b/src/schedule/group-custom-work-days-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.doctorData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n currentView: 'WorkWeek',\n resourceHeaderTemplate: '#resourceTemplate',\n group: {\n resources: ['Doctors']\n },\n resources: [{\n field: 'DoctorId', title: 'Doctor Name', name: 'Doctors',\n dataSource: [\n { text: 'Will Smith', id: 1, color: '#ea7a57', workDays: [1, 2, 4, 5], startHour: '08:00', endHour: '15:00' },\n { text: 'Alice', id: 2, color: 'rgb(53, 124, 210)', workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' },\n { text: 'Robson', id: 3, color: '#7fa900', startHour: '08:00', endHour: '16:00' }\n ],\n textField: 'text', idField: 'id', colorField: 'color', workDaysField: 'workDays', startHourField: 'startHour',\n endHourField: 'endHour'\n }],\n views: ['WorkWeek', 'Month'],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Service Type', name: 'Subject' },\n location: { title: 'Patient Name', name: 'Location' },\n description: { title: 'Summary', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' },\n startTimezone: { title: 'StartTimezone', name: 'StartTimezone' },\n endTimezone: { title: 'EndTimezone', name: 'EndTimezone' }\n }\n },\n actionBegin: function (args) {\n var isEventChange = (args.requestType === 'eventChange');\n if ((args.requestType === 'eventCreate' && args.data.length > 0)|| isEventChange) {\n var eventData = (isEventChange)? args.data: args.data[0];\n var eventField = scheduleObj.eventFields;\n var startDate = eventData[eventField.startTime];\n var endDate = eventData[eventField.endTime];\n var resourceIndex = [1, 2, 3].indexOf(eventData.DoctorId);\n args.cancel = !isValidateTime(startDate, endDate, resourceIndex);\n if (!args.cancel) {\n args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate, resourceIndex);\n }\n }\n },\n popupOpen: function (args) {\n if (args.target && args.target.classList.contains('e-work-cells')) {\n args.cancel = !args.target.classList.contains('e-work-hours');\n }\n },\n renderCell: function (args) {\n if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) {\n ej.base.addClass([args.element], ['willsmith', 'alice', 'robson'][parseInt(args.element.getAttribute('data-group-index'), 10)]);\n }\n },\n resizeStart: function (args) {\n args.cancel = true;\n },\n dragStart: function (args) {\n args.cancel = true;\n }\n });\n window.getDoctorName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getDoctorImage = function (value) {\n var resourceName = window.getDoctorName(value);\n return resourceName.replace(' ', '-').toLowerCase();\n };\n window.getDoctorLevel = function (value) {\n var resourceName = window.getDoctorName(value);\n return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';\n };\n scheduleObj.appendTo('#Schedule');\n function isValidateTime(startDate, endDate, resIndex) {\n var resource = scheduleObj.getResourcesByIndex(resIndex);\n var startHour = parseInt(resource.resourceData.startHour.toString().slice(0, 2), 10);\n var endHour = parseInt(resource.resourceData.endHour.toString().slice(0, 2), 10);\n return (startHour <= startDate.getHours() && endHour >= endDate.getHours());\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.doctorData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n currentView: 'WorkWeek',\n resourceHeaderTemplate: '#resourceTemplate',\n group: {\n resources: ['Doctors']\n },\n resources: [{\n field: 'DoctorId', title: 'Doctor Name', name: 'Doctors',\n dataSource: [\n { text: 'Will Smith', id: 1, color: '#ea7a57', workDays: [1, 2, 4, 5], startHour: '08:00', endHour: '15:00' },\n { text: 'Alice', id: 2, color: 'rgb(53, 124, 210)', workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' },\n { text: 'Robson', id: 3, color: '#7fa900', startHour: '08:00', endHour: '16:00' }\n ],\n textField: 'text', idField: 'id', colorField: 'color', workDaysField: 'workDays', startHourField: 'startHour',\n endHourField: 'endHour'\n }],\n views: ['WorkWeek', 'Month'],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Service Type', name: 'Subject' },\n location: { title: 'Patient Name', name: 'Location' },\n description: { title: 'Summary', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' },\n startTimezone: { title: 'StartTimezone', name: 'StartTimezone' },\n endTimezone: { title: 'EndTimezone', name: 'EndTimezone' }\n }\n },\n actionBegin: function (args) {\n var isEventChange = (args.requestType === 'eventChange');\n if ((args.requestType === 'eventCreate' && args.data.length > 0)|| isEventChange) {\n var eventData = (isEventChange)? args.data: args.data[0];\n var eventField = scheduleObj.eventFields;\n var startDate = eventData[eventField.startTime];\n var endDate = eventData[eventField.endTime];\n var resourceIndex = [1, 2, 3].indexOf(eventData.DoctorId);\n args.cancel = !isValidateTime(startDate, endDate, resourceIndex);\n if (!args.cancel) {\n args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate, resourceIndex);\n }\n }\n },\n popupOpen: function (args) {\n if (args.target && args.target.classList.contains('e-work-cells')) {\n args.cancel = !args.target.classList.contains('e-work-hours');\n }\n },\n renderCell: function (args) {\n if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) {\n ej.base.addClass([args.element], ['willsmith', 'alice', 'robson'][parseInt(args.element.getAttribute('data-group-index'), 10)]);\n }\n },\n resizeStart: function (args) {\n args.cancel = true;\n },\n dragStart: function (args) {\n args.cancel = true;\n }\n });\n window.getDoctorName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getDoctorImage = function (value) {\n var resourceName = window.getDoctorName(value);\n return resourceName.replace(' ', '-').toLowerCase();\n };\n window.getDoctorLevel = function (value) {\n var resourceName = window.getDoctorName(value);\n return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';\n };\n scheduleObj.appendTo('#Schedule');\n function isValidateTime(startDate, endDate, resIndex) {\n var resource = scheduleObj.getResourcesByIndex(resIndex);\n var startHour = parseInt(resource.resourceData.startHour.toString().slice(0, 2), 10);\n var endHour = parseInt(resource.resourceData.endHour.toString().slice(0, 2), 10);\n return (startHour <= startDate.getHours() && endHour >= endDate.getHours());\n }\n"} \ No newline at end of file diff --git a/src/schedule/group-editing-stack.json b/src/schedule/group-editing-stack.json index 3c1b375a..fc110196 100644 --- a/src/schedule/group-editing-stack.json +++ b/src/schedule/group-editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceConferenceData, null, true);\n var monthEventTemplate = '
                                    ${Subject}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'WorkWeek',\n selectedDate: new Date(2018, 5, 5),\n resourceHeaderTemplate: '#resourceTemplate',\n views: [\n { option: 'Day' }, { option: 'WorkWeek' },\n { option: 'Month', eventTemplate: monthEventTemplate },\n { option: 'TimelineWeek' }\n ],\n group: {\n allowGroupEdit: true,\n resources: ['Conferences']\n },\n resources: [{\n field: 'ConferenceId', title: 'Attendees',\n name: 'Conferences', allowMultiple: true,\n dataSource: [\n { Text: 'Margaret', Id: 1, Color: '#1aaa55' },\n { Text: 'Robert', Id: 2, Color: '#357cd2' },\n { Text: 'Laura', Id: 3, Color: '#7fa900' }\n ],\n textField: 'Text', idField: 'Id', colorField: 'Color'\n }],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Conference Name', name: 'Subject' },\n description: { title: 'Summary', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n window.getEmployeeName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getEmployeeImage = function (value) {\n var resourceName = window.getEmployeeName(value);\n return resourceName.replace(' ', '-').toLowerCase();\n };\n window.getEmployeeDesignation = function (value) {\n var resourceName = window.getEmployeeName(value);\n return (resourceName === 'Margaret') ? 'Sales Representative' : (resourceName === 'Robert') ?\n 'Vice President, Sales' : 'Inside Sales Coordinator';\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceConferenceData, null, true);\n var monthEventTemplate = '
                                    ${Subject}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'WorkWeek',\n selectedDate: new Date(2018, 5, 5),\n resourceHeaderTemplate: '#resourceTemplate',\n views: [\n { option: 'Day' }, { option: 'WorkWeek' },\n { option: 'Month', eventTemplate: monthEventTemplate },\n { option: 'TimelineWeek' }\n ],\n group: {\n allowGroupEdit: true,\n resources: ['Conferences']\n },\n resources: [{\n field: 'ConferenceId', title: 'Attendees',\n name: 'Conferences', allowMultiple: true,\n dataSource: [\n { Text: 'Margaret', Id: 1, Color: '#1aaa55' },\n { Text: 'Robert', Id: 2, Color: '#357cd2' },\n { Text: 'Laura', Id: 3, Color: '#7fa900' }\n ],\n textField: 'Text', idField: 'Id', colorField: 'Color'\n }],\n eventSettings: {\n dataSource: data,\n fields: {\n subject: { title: 'Conference Name', name: 'Subject' },\n description: { title: 'Summary', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n window.getEmployeeName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getEmployeeImage = function (value) {\n var resourceName = window.getEmployeeName(value);\n return resourceName.replace(' ', '-').toLowerCase();\n };\n window.getEmployeeDesignation = function (value) {\n var resourceName = window.getEmployeeName(value);\n return (resourceName === 'Margaret') ? 'Sales Representative' : (resourceName === 'Robert') ?\n 'Vice President, Sales' : 'Inside Sales Coordinator';\n };\n"} \ No newline at end of file diff --git a/src/schedule/header-bar-stack.json b/src/schedule/header-bar-stack.json index 12429a51..c3c5c198 100644 --- a/src/schedule/header-bar-stack.json +++ b/src/schedule/header-bar-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n views: ['Month'],\n currentView: 'Month',\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n actionBegin: function (args) {\n if (args.requestType === 'toolbarItemRendering') {\n var userIconItem = {\n align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'\n };\n args.items.push(userIconItem);\n }\n },\n actionComplete: function (args) {\n if (args.requestType === 'toolBarItemRendered') {\n var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');\n userIconEle.onclick = function () {\n profilePopup.relateTo = userIconEle;\n profilePopup.dataBind();\n if (profilePopup.element.classList.contains('e-popup-close')) {\n profilePopup.show();\n } else {\n profilePopup.hide();\n }\n };\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n var headerBarCheckObj = new ej.buttons.CheckBox({\n label: 'Show/Hide Header bar', checked: true,\n change: function (args) {\n profilePopup.hide();\n scheduleObj.showHeaderBar = args.checked;\n scheduleObj.dataBind();\n }\n });\n headerBarCheckObj.appendTo('#headerbar');\n var userContentEle = new ej.base.createElement('div', {\n className: 'e-profile-wrapper'\n });\n scheduleObj.element.parentElement.appendChild(userContentEle);\n\n var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');\n var getDOMString = new ej.base.compile('
                                    ' +\n '
                                    Nancy
                                    ' +\n '
                                    Product Manager
                                    ' +\n '
                                    Online
                                    ');\n var output = getDOMString({});\n var profilePopup = new ej.popups.Popup(userContentEle, {\n content: output[0],\n relateTo: userIconEle,\n position: { X: 'left', Y: 'bottom' },\n collision: { X: 'flip', Y: 'flip' },\n targetType: 'relative',\n viewPortElement: scheduleObj.element,\n width: 185,\n height: 80\n });\n profilePopup.hide();\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n views: ['Month'],\n currentView: 'Month',\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n actionBegin: function (args) {\n if (args.requestType === 'toolbarItemRendering') {\n var userIconItem = {\n align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'\n };\n args.items.push(userIconItem);\n }\n },\n actionComplete: function (args) {\n if (args.requestType === 'toolBarItemRendered') {\n var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');\n userIconEle.onclick = function () {\n profilePopup.relateTo = userIconEle;\n profilePopup.dataBind();\n if (profilePopup.element.classList.contains('e-popup-close')) {\n profilePopup.show();\n } else {\n profilePopup.hide();\n }\n };\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n var headerBarCheckObj = new ej.buttons.CheckBox({\n label: 'Show/Hide Header bar', checked: true,\n change: function (args) {\n profilePopup.hide();\n scheduleObj.showHeaderBar = args.checked;\n scheduleObj.dataBind();\n }\n });\n headerBarCheckObj.appendTo('#headerbar');\n var userContentEle = new ej.base.createElement('div', {\n className: 'e-profile-wrapper'\n });\n scheduleObj.element.parentElement.appendChild(userContentEle);\n\n var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');\n var getDOMString = new ej.base.compile('
                                    ' +\n '
                                    Nancy
                                    ' +\n '
                                    Product Manager
                                    ' +\n '
                                    Online
                                    ');\n var output = getDOMString({});\n var profilePopup = new ej.popups.Popup(userContentEle, {\n content: output[0],\n relateTo: userIconEle,\n position: { X: 'left', Y: 'bottom' },\n collision: { X: 'flip', Y: 'flip' },\n targetType: 'relative',\n viewPortElement: scheduleObj.element,\n width: 185,\n height: 80\n });\n profilePopup.hide();\n"} \ No newline at end of file diff --git a/src/schedule/header-bar.html b/src/schedule/header-bar.html index 807f3095..ec93b3ed 100644 --- a/src/schedule/header-bar.html +++ b/src/schedule/header-bar.html @@ -93,6 +93,13 @@ .e-profile-wrapper .status { font-size: 11px; } + + .highcontrast .e-profile-wrapper { + border: 1px solid #969696 + } + .highcontrast .e-profile-wrapper .profile-container { + background-color: #000; + }

                                    This demo shows the way of adding custom items into the Scheduler header bar. Here, an employee image is added to the diff --git a/src/schedule/header-rows-stack.json b/src/schedule/header-rows-stack.json index d24b7b7c..49f26ac9 100644 --- a/src/schedule/header-rows-stack.json +++ b/src/schedule/header-rows-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var instance = new ej.base.Internationalization();\n window.getMonthDetails = function (value) {\n return instance.formatDate(value.date, { skeleton: 'yMMMM' });\n };\n window.getWeekDetails = function (value) {\n return 'Week ' + ej.schedule.getWeekNumber(value.date);\n };\n var data = new ej.base.extend([], window.headerRowData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 0, 1),\n headerRows: [\n { option: 'Month', template: '#month-template' },\n { option: 'Week', template: '#week-template' },\n { option: 'Date' }\n ],\n views: [\n { option: 'TimelineMonth', interval: 12 }\n ],\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) { return window.applyCategoryColor(args, scheduleObj.currentView); }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var instance = new ej.base.Internationalization();\n window.getMonthDetails = function (value) {\n return instance.formatDate(value.date, { skeleton: 'yMMMM' });\n };\n window.getWeekDetails = function (value) {\n return 'Week ' + ej.schedule.getWeekNumber(value.date);\n };\n var data = new ej.base.extend([], window.headerRowData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 0, 1),\n headerRows: [\n { option: 'Month', template: '#month-template' },\n { option: 'Week', template: '#week-template' },\n { option: 'Date' }\n ],\n views: [\n { option: 'TimelineMonth', interval: 12 }\n ],\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) { return window.applyCategoryColor(args, scheduleObj.currentView); }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/hide-weekend-stack.json b/src/schedule/hide-weekend-stack.json index 503d690f..d13b2033 100644 --- a/src/schedule/hide-weekend-stack.json +++ b/src/schedule/hide-weekend-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n Working days\n
                                    \n                                     		\n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n Non-Working days\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n showWeekend: false,\n workDays: [1, 3, 4, 5],\n workHours: {\n start: '08:00'\n },\n views: ['Day', 'Week', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var weekDays = [\n { Name: 'Sunday', Value: '0' },\n { Name: 'Monday', Value: '1' },\n { Name: 'Tuesday', Value: '2' },\n { Name: 'Wednesday', Value: '3' },\n { Name: 'Thursday', Value: '4' },\n { Name: 'Friday', Value: '5' },\n { Name: 'Saturday', Value: '6' }\n ];\n var checkList = new ej.dropdowns.MultiSelect({\n value: ['1', '3', '4', '5'],\n dataSource: weekDays,\n fields: { text: 'Name', value: 'Value' },\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n popupWidth: 180,\n change: function (args) {\n var value = args.value.slice(0).map(Number).sort();\n scheduleObj.workDays = value.length === 0 ? [0] : value;\n scheduleObj.dataBind();\n }\n });\n checkList.appendTo('#workdayscheckbox');\n\n var toggleBtn = new ej.buttons.Button({ isToggle: true });\n toggleBtn.appendTo('#showweekendbtn');\n toggleBtn.element.onclick = function () {\n if (toggleBtn.element.classList.contains('e-active')) {\n toggleBtn.content = 'Hide';\n scheduleObj.showWeekend = true;\n } else {\n toggleBtn.content = 'Show';\n scheduleObj.showWeekend = false;\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n Working days\n
                                    \n                                     		\n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n Non-Working days\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n showWeekend: false,\n workDays: [1, 3, 4, 5],\n workHours: {\n start: '08:00'\n },\n views: ['Day', 'Week', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var weekDays = [\n { Name: 'Sunday', Value: '0' },\n { Name: 'Monday', Value: '1' },\n { Name: 'Tuesday', Value: '2' },\n { Name: 'Wednesday', Value: '3' },\n { Name: 'Thursday', Value: '4' },\n { Name: 'Friday', Value: '5' },\n { Name: 'Saturday', Value: '6' }\n ];\n var checkList = new ej.dropdowns.MultiSelect({\n value: ['1', '3', '4', '5'],\n dataSource: weekDays,\n fields: { text: 'Name', value: 'Value' },\n mode: 'CheckBox',\n showDropDownIcon: true,\n showClearButton: false,\n popupWidth: 180,\n change: function (args) {\n var value = args.value.slice(0).map(Number).sort();\n scheduleObj.workDays = value.length === 0 ? [0] : value;\n scheduleObj.dataBind();\n }\n });\n checkList.appendTo('#workdayscheckbox');\n\n var toggleBtn = new ej.buttons.Button({ isToggle: true });\n toggleBtn.appendTo('#showweekendbtn');\n toggleBtn.element.onclick = function () {\n if (toggleBtn.element.classList.contains('e-active')) {\n toggleBtn.content = 'Hide';\n scheduleObj.showWeekend = true;\n } else {\n toggleBtn.content = 'Show';\n scheduleObj.showWeekend = false;\n }\n };\n"} \ No newline at end of file diff --git a/src/schedule/keyboard-interaction-stack.json b/src/schedule/keyboard-interaction-stack.json index b63c615a..367e3b9e 100644 --- a/src/schedule/keyboard-interaction-stack.json +++ b/src/schedule/keyboard-interaction-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n selectedDate: new Date(2018, 1, 15),\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n //Focus the Schedule Control (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var scheduleElement = document.getElementById('Schedule');\n if (e.altKey && e.keyCode === 74 && scheduleElement) {\n scheduleElement.focus();\n }\n });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n selectedDate: new Date(2018, 1, 15),\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n //Focus the Schedule Control (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var scheduleElement = document.getElementById('Schedule');\n if (e.altKey && e.keyCode === 74 && scheduleElement) {\n scheduleElement.focus();\n }\n });\n"} \ No newline at end of file diff --git a/src/schedule/local-data-stack.json b/src/schedule/local-data-stack.json index 76fde685..7cf60c5a 100644 --- a/src/schedule/local-data-stack.json +++ b/src/schedule/local-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/month-agenda-stack.json b/src/schedule/month-agenda-stack.json index 51f8e5ff..d93f9877 100644 --- a/src/schedule/month-agenda-stack.json +++ b/src/schedule/month-agenda-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '510px',\n views: ['MonthAgenda'],\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '510px',\n views: ['MonthAgenda'],\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/month-agenda.html b/src/schedule/month-agenda.html index dc5be4f0..f1d1d6f0 100644 --- a/src/schedule/month-agenda.html +++ b/src/schedule/month-agenda.html @@ -4,6 +4,7 @@
                                    + +

                                    This demo showcases the layout of Month Agenda view and its working. diff --git a/src/schedule/read-only-events-stack.json b/src/schedule/read-only-events-stack.json index ca65aa64..d2206464 100644 --- a/src/schedule/read-only-events-stack.json +++ b/src/schedule/read-only-events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}} \n var data = new ej.base.extend([], window.readonlyEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n views: ['Day', 'Week', 'WorkWeek', 'Month']\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}} \n var data = new ej.base.extend([], window.readonlyEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n views: ['Day', 'Week', 'WorkWeek', 'Month']\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/recurrence-editor-generate-rule-stack.json b/src/schedule/recurrence-editor-generate-rule-stack.json index a77561dd..f5a52d6f 100644 --- a/src/schedule/recurrence-editor-generate-rule-stack.json +++ b/src/schedule/recurrence-editor-generate-rule-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var outputElement = document.querySelector('#rule-output');\n var recObject = new ej.schedule.RecurrenceEditor({\n change: function (args) {\n outputElement.innerText = args.value;\n }\n });\n recObject.appendTo('#RecurrenceEditor');\n recObject.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');\n outputElement.innerText = recObject.value;\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var outputElement = document.querySelector('#rule-output');\n var recObject = new ej.schedule.RecurrenceEditor({\n change: function (args) {\n outputElement.innerText = args.value;\n }\n });\n recObject.appendTo('#RecurrenceEditor');\n recObject.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');\n outputElement.innerText = recObject.value;\n"} \ No newline at end of file diff --git a/src/schedule/recurrence-editor-generate-rule.html b/src/schedule/recurrence-editor-generate-rule.html index f60f2b18..48b4335c 100644 --- a/src/schedule/recurrence-editor-generate-rule.html +++ b/src/schedule/recurrence-editor-generate-rule.html @@ -10,6 +10,7 @@
                                    + +

                                    This demo showcases the recurrence rule generation based on the options selected from the Recurrence editor and it usually follows the diff --git a/src/schedule/recurrence-editor-populate-rule-stack.json b/src/schedule/recurrence-editor-populate-rule-stack.json index ff267079..f9c74ec3 100644 --- a/src/schedule/recurrence-editor-populate-rule-stack.json +++ b/src/schedule/recurrence-editor-populate-rule-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

                                    \n
                                    \n
                                    \n Select Rule\n \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var recObject = new ej.schedule.RecurrenceEditor();\n recObject.appendTo('#RecurrenceEditor');\n recObject.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');\n\n var datas = [\n { rule: 'FREQ=DAILY;INTERVAL=1' },\n { rule: 'FREQ=DAILY;INTERVAL=2;UNTIL=20410606T000000Z' },\n { rule: 'FREQ=DAILY;INTERVAL=2;COUNT=8' },\n { rule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;UNTIL=20410729T000000Z' },\n { rule: 'FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1;UNTIL=20410729T000000Z' },\n { rule: 'FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1' },\n { rule: 'FREQ=YEARLY;BYDAY=MO;BYSETPOS=-1;INTERVAL=1;COUNT=5' }];\n var dropDownListObj = new ej.dropdowns.DropDownList({\n index: 2,\n popupHeight: '200px',\n dataSource: datas,\n change: function (e) {\n recObject.setRecurrenceRule(e.value);\n },\n fields: { text: 'rule', value: 'rule' }\n });\n dropDownListObj.appendTo('#RecurrenceList');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n Select Rule\n \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var recObject = new ej.schedule.RecurrenceEditor();\n recObject.appendTo('#RecurrenceEditor');\n recObject.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');\n\n var datas = [\n { rule: 'FREQ=DAILY;INTERVAL=1' },\n { rule: 'FREQ=DAILY;INTERVAL=2;UNTIL=20410606T000000Z' },\n { rule: 'FREQ=DAILY;INTERVAL=2;COUNT=8' },\n { rule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;UNTIL=20410729T000000Z' },\n { rule: 'FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1;UNTIL=20410729T000000Z' },\n { rule: 'FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2;INTERVAL=1' },\n { rule: 'FREQ=YEARLY;BYDAY=MO;BYSETPOS=-1;INTERVAL=1;COUNT=5' }];\n var dropDownListObj = new ej.dropdowns.DropDownList({\n index: 2,\n popupHeight: '200px',\n dataSource: datas,\n change: function (e) {\n recObject.setRecurrenceRule(e.value);\n },\n fields: { text: 'rule', value: 'rule' }\n });\n dropDownListObj.appendTo('#RecurrenceList');\n\n"} \ No newline at end of file diff --git a/src/schedule/recurrence-editor-populate-rule.html b/src/schedule/recurrence-editor-populate-rule.html index ae9d08a8..7381fd88 100644 --- a/src/schedule/recurrence-editor-populate-rule.html +++ b/src/schedule/recurrence-editor-populate-rule.html @@ -7,6 +7,7 @@
                                    + +

                                    This demo showcases how to fill the recurrence editor fields with appropriate values based on the user-provided recurrence diff --git a/src/schedule/recurrence-events-stack.json b/src/schedule/recurrence-events-stack.json index 7ac256ad..4c495541 100644 --- a/src/schedule/recurrence-events-stack.json +++ b/src/schedule/recurrence-events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n

                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.recurrenceData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 20),\n views: ['Day', 'Week', 'Month'],\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.recurrenceData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 20),\n views: ['Day', 'Week', 'Month'],\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/remote-data-stack.json b/src/schedule/remote-data-stack.json index 2ea46113..b1db2754 100644 --- a/src/schedule/remote-data-stack.json +++ b/src/schedule/remote-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var dataManger = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2017, 5, 5),\n eventSettings: { dataSource: dataManger },\n readonly: true\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var dataManger = new ej.data.DataManager({\n url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2017, 5, 5),\n eventSettings: { dataSource: dataManger },\n readonly: true\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/resource-grouping-stack.json b/src/schedule/resource-grouping-stack.json index 5931fbf2..897bf5b9 100644 --- a/src/schedule/resource-grouping-stack.json +++ b/src/schedule/resource-grouping-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n Flight timings between Barcelona and Los Angeles\n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n views: ['Week', 'Month', 'Agenda'],\n resourceHeaderTemplate: '#restemplate',\n group: {\n resources: ['Airlines']\n },\n resources: [{\n field: 'AirlineId', title: 'Airline Name',\n name: 'Airlines', allowMultiple: true,\n dataSource: [\n { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' },\n { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' },\n { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }\n ],\n textField: 'AirlineName', idField: 'AirlineId', colorField: 'AirlineColor'\n }],\n eventSettings: {\n dataSource: generateEvents(),\n fields: {\n subject: { title: 'Travel Summary', name: 'Subject' },\n location: { title: 'Source', name: 'Location' },\n description: { title: 'Comments', name: 'Description' },\n startTime: { title: 'Departure Time', name: 'StartTime' },\n endTime: { title: 'Arrival Time', name: 'EndTime' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n window.getAirlineImage = function (value) {\n var airlineName = window.getAirlineName(value);\n return airlineName.replace(' ', '-').toLowerCase();\n };\n window.getAirlineName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getAirlineModel = function (value) {\n var airlineName = window.getAirlineName(value);\n return (airlineName === 'Airways 1') ? 'CRJ 700' : (airlineName === 'Airways 2') ? 'Airbus A330' : 'ATR 72-600';\n };\n window.getAirlineSeats = function (value) {\n var airlineName = window.getAirlineName(value);\n return (airlineName === 'Airways 1') ? 50 : (airlineName === 'Airways 2') ? 75 : 100;\n };\n\n function generateEvents() {\n var subjectCollection = ['Barcelona to Los Angeles', 'Los Angeles to Barcelona'];\n var collections = [];\n var dataCollections = [1, 2, 3];\n var id = 1;\n for (var i = 0; i < dataCollections.length; i++) {\n var startDate = new Date(2018, 3, 1);\n startDate.setMilliseconds(1000 * 60 * 60 * 0.5 * (dataCollections[i] - 1));\n var lastDate = new Date((+startDate) + (1000 * 60 * 60 * 24 * 30));\n for (var date = startDate; date.getTime() < lastDate.getTime(); date = new Date(date.getTime() + (1000 * 60 * 60 * 5))) {\n var strDate = new Date(+date);\n var endDate = new Date((+strDate) + (1000 * 60 * 60 * (2.5 + (0.5 * dataCollections[i]))));\n collections.push({\n Id: id,\n Subject: subjectCollection[id % 2],\n StartTime: new Date(+strDate),\n EndTime: new Date(+endDate),\n AirlineId: dataCollections[i]\n });\n id += 1;\n }\n }\n return collections;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n Flight timings between Barcelona and Los Angeles\n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n views: ['Week', 'Month', 'Agenda'],\n resourceHeaderTemplate: '#restemplate',\n group: {\n resources: ['Airlines']\n },\n resources: [{\n field: 'AirlineId', title: 'Airline Name',\n name: 'Airlines', allowMultiple: true,\n dataSource: [\n { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' },\n { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' },\n { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }\n ],\n textField: 'AirlineName', idField: 'AirlineId', colorField: 'AirlineColor'\n }],\n eventSettings: {\n dataSource: generateEvents(),\n fields: {\n subject: { title: 'Travel Summary', name: 'Subject' },\n location: { title: 'Source', name: 'Location' },\n description: { title: 'Comments', name: 'Description' },\n startTime: { title: 'Departure Time', name: 'StartTime' },\n endTime: { title: 'Arrival Time', name: 'EndTime' }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n window.getAirlineImage = function (value) {\n var airlineName = window.getAirlineName(value);\n return airlineName.replace(' ', '-').toLowerCase();\n };\n window.getAirlineName = function (value) {\n return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n };\n window.getAirlineModel = function (value) {\n var airlineName = window.getAirlineName(value);\n return (airlineName === 'Airways 1') ? 'CRJ 700' : (airlineName === 'Airways 2') ? 'Airbus A330' : 'ATR 72-600';\n };\n window.getAirlineSeats = function (value) {\n var airlineName = window.getAirlineName(value);\n return (airlineName === 'Airways 1') ? 50 : (airlineName === 'Airways 2') ? 75 : 100;\n };\n\n\n"} \ No newline at end of file diff --git a/src/schedule/resource-grouping.html b/src/schedule/resource-grouping.html index 2df5d2e3..1c25062a 100644 --- a/src/schedule/resource-grouping.html +++ b/src/schedule/resource-grouping.html @@ -54,13 +54,14 @@ display: flex; text-align: left; } - + /* custom code start*/ .schedule-demo-heading { font-size: 16px; padding-bottom: 15px; text-align: center; font-weight: 500 } + /* custom code end*/ .e-schedule .e-agenda-view .template-wrap { display: table; @@ -136,10 +137,12 @@ .e-schedule.e-device .template-wrap .airline-seats { display: none; } - + + /* custom code start*/ @media (max-width: 550px) { .schedule-demo-heading { font-size: 14px; } } + /* custom code end*/ \ No newline at end of file diff --git a/src/schedule/resource-grouping.js b/src/schedule/resource-grouping.js index 1e628b0e..6d246a8b 100644 --- a/src/schedule/resource-grouping.js +++ b/src/schedule/resource-grouping.js @@ -47,6 +47,7 @@ this.default = function () { return (airlineName === 'Airways 1') ? 50 : (airlineName === 'Airways 2') ? 75 : 100; }; + //custom code start function generateEvents() { var subjectCollection = ['Barcelona to Los Angeles', 'Los Angeles to Barcelona']; var collections = []; @@ -71,4 +72,5 @@ this.default = function () { } return collections; } + //custom code end }; \ No newline at end of file diff --git a/src/schedule/resource-stack.json b/src/schedule/resource-stack.json new file mode 100644 index 00000000..9f11077b --- /dev/null +++ b/src/schedule/resource-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n \n
                                    \n \n
                                    \n \n
                                    \n
                                    \n\n\n\n\n\n","index.js":"{{ripple}}\n var ownerCollections = [\n { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },\n { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },\n { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }\n ];\n var data = new ej.base.extend([], window.resourceSampleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 5, 5),\n resources: [{\n field: 'OwnerId', title: 'Owners',\n name: 'Owners', allowMultiple: true,\n dataSource: ownerCollections,\n textField: 'OwnerText', idField: 'OwnerId', colorField: 'Color'\n }],\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#schedule');\n\n var ownerOneObj = new ej.buttons.CheckBox({ cssClass: 'margaret', value: '1', label: 'Margaret', checked: true, change: onChange });\n ownerOneObj.appendTo('#margaret');\n var ownerTwoObj = new ej.buttons.CheckBox({ cssClass: 'robert', value: '2', label: 'Robert', checked: true, change: onChange });\n ownerTwoObj.appendTo('#robert');\n var ownerThreeObj = new ej.buttons.CheckBox({ cssClass: 'laura', value: '3', label: 'Laura', checked: true, change: onChange });\n ownerThreeObj.appendTo('#laura');\n\n function onChange() {\n var predicate;\n var checkBoxes = [ownerOneObj, ownerTwoObj, ownerThreeObj];\n checkBoxes.forEach(function (checkBoxObj) {\n if (checkBoxObj.checked) {\n if (predicate) {\n predicate = predicate.or('OwnerId', 'equal', parseInt(checkBoxObj.value, 10));\n } else {\n predicate = new ej.data.Predicate('OwnerId', 'equal', parseInt(checkBoxObj.value, 10));\n }\n }\n });\n scheduleObj.eventSettings.query = new ej.data.Query().where(predicate);\n }\n"} \ No newline at end of file diff --git a/src/schedule/resource.html b/src/schedule/resource.html new file mode 100644 index 00000000..39cc679b --- /dev/null +++ b/src/schedule/resource.html @@ -0,0 +1,60 @@ +
                                    +
                                    +
                                    +
                                    +
                                    + +
                                    + + + + + + + + + + + + +
                                    + +
                                    + +
                                    + +
                                    +
                                    + +
                                    +

                                    + This example demonstrates how to dynamically show or hide the appointments of resources on Scheduler based on + the resource selection. +

                                    +
                                    + +
                                    +

                                    + In this example, the resource appointments are dynamically shown or hidden on the Scheduler, by passing the + filtered event data of selected resources to the Query option of the Eventsettings. +

                                    +
                                    + + + + \ No newline at end of file diff --git a/src/schedule/resource.js b/src/schedule/resource.js new file mode 100644 index 00000000..3aa9a219 --- /dev/null +++ b/src/schedule/resource.js @@ -0,0 +1,43 @@ +this.default = function () { + var ownerCollections = [ + { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' }, + { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' }, + { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' } + ]; + var data = new ej.base.extend([], window.resourceSampleData, null, true); + var scheduleObj = new ej.schedule.Schedule({ + width: '100%', + height: '650px', + selectedDate: new Date(2018, 5, 5), + resources: [{ + field: 'OwnerId', title: 'Owners', + name: 'Owners', allowMultiple: true, + dataSource: ownerCollections, + textField: 'OwnerText', idField: 'OwnerId', colorField: 'Color' + }], + eventSettings: { dataSource: data } + }); + scheduleObj.appendTo('#schedule'); + + var ownerOneObj = new ej.buttons.CheckBox({ cssClass: 'margaret', value: '1', label: 'Margaret', checked: true, change: onChange }); + ownerOneObj.appendTo('#margaret'); + var ownerTwoObj = new ej.buttons.CheckBox({ cssClass: 'robert', value: '2', label: 'Robert', checked: true, change: onChange }); + ownerTwoObj.appendTo('#robert'); + var ownerThreeObj = new ej.buttons.CheckBox({ cssClass: 'laura', value: '3', label: 'Laura', checked: true, change: onChange }); + ownerThreeObj.appendTo('#laura'); + + function onChange() { + var predicate; + var checkBoxes = [ownerOneObj, ownerTwoObj, ownerThreeObj]; + checkBoxes.forEach(function (checkBoxObj) { + if (checkBoxObj.checked) { + if (predicate) { + predicate = predicate.or('OwnerId', 'equal', parseInt(checkBoxObj.value, 10)); + } else { + predicate = new ej.data.Predicate('OwnerId', 'equal', parseInt(checkBoxObj.value, 10)); + } + } + }); + scheduleObj.eventSettings.query = new ej.data.Query().where(predicate); + } +}; \ No newline at end of file diff --git a/src/schedule/resources-stack.json b/src/schedule/resources-stack.json index 456163b4..9b3c5e5a 100644 --- a/src/schedule/resources-stack.json +++ b/src/schedule/resources-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n Cheapest one way fares from Barcelona to Los Angeles\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var dManager = [];\n var initialLoad = true;\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n views: ['Month'],\n readonly: true,\n resources: [{\n field: 'AirlineId',\n title: 'Airline',\n name: 'Airlines',\n allowMultiple: true,\n dataSource: [\n { text: 'Airways 1', id: 1 },\n { text: 'Airways 2', id: 2 },\n { text: 'Airways 3', id: 3 }\n ],\n textField: 'text', idField: 'id'\n }],\n eventSettings: {\n template: '#event-template',\n enableTooltip: true,\n tooltipTemplate: '#tooltip-template'\n },\n actionBegin: function (args) {\n if (args.requestType === 'toolbarItemRendering') {\n args.items[2].align = 'Center';\n args.items[2].suffixIcon = '';\n args.items = args.items.splice(2, 1);\n }\n },\n dataBinding: function (args) {\n if (initialLoad) {\n scheduleObj.eventSettings.dataSource = generateEvents(scheduleObj);\n initialLoad = false;\n }\n },\n dataBound: function () {\n var eventCollections = scheduleObj.getCurrentViewEvents();\n eventCollections.sort(function (a, b) {\n return ((a.Fare) - (b.Fare));\n });\n var indexDate = new Date(((eventCollections[0]).StartTime).getTime());\n indexDate.setHours(0, 0, 0, 0);\n var index = scheduleObj.getIndexOfDate(scheduleObj.activeView.renderDates, indexDate);\n var target = scheduleObj.element.querySelectorAll('.e-work-cells')[index];\n ej.base.addClass([target], 'best-price');\n target.appendChild(ej.base.createElement('div', { className: 'best-price', innerHTML: 'Best Price' }));\n },\n popupOpen: function (args) {\n args.cancel = true;\n }\n });\n window.getAirwaysName = function (value) {\n return (value === 1) ? 'Airways 1' : (value === 2) ? 'Airways 2' : 'Airways 3';\n };\n window.getAirwaysImage = function (value) {\n return (value === 1) ? 'airways-1' : (value === 2) ? 'airways-2' : 'airways-3';\n };\n window.getFormattedTime = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'Hm' });\n };\n\n scheduleObj.appendTo('#Schedule');\n\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-1', label: 'Airways 1', checked: true, change: onChange }, '#airways-1');\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-2', label: 'Airways 2', checked: true, change: onChange }, '#airways-2');\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-3', label: 'Airways 3', checked: true, change: onChange }, '#airways-3');\n\n function onChange(args) {\n var tdElement = scheduleObj.element.querySelector('.best-price:not(.e-work-cells)');\n if (tdElement) {\n ej.base.removeClass([ej.base.closest(tdElement, 'td')], 'best-price');\n ej.base.remove(tdElement);\n }\n var scheduleData = new ej.base.extend([], dManager, null, true);\n var selectedResource = [];\n var resourceCollection = [].slice.call(document.querySelectorAll('.e-resource'));\n resourceCollection.forEach(function (element, index) {\n if (element.getAttribute('aria-checked') === 'true') {\n selectedResource.push(index);\n }\n });\n var filteredData = [];\n var resources = scheduleObj.resourceBase.resourceCollection.slice(-1)[0].dataSource;\n var _loop_1 = function (resource) {\n var data = scheduleData.filter(function (event) { return resources[resource].id === event.AirlineId; });\n filteredData = filteredData.concat(data);\n };\n for (var _i = 0, selectedResource_1 = selectedResource; _i < selectedResource_1.length; _i++) {\n var resource = selectedResource_1[_i];\n _loop_1(resource);\n }\n filteredData = filterByFare(filteredData, scheduleObj);\n scheduleObj.eventSettings.dataSource = filteredData;\n scheduleObj.dataBind();\n }\n\n function filterByFare(appointments, scheduleObj) {\n appointments.sort(function (object1, object2) {\n var d1 = +(object1.StartTime);\n var d2 = +(object2.StartTime);\n var d3 = +(object1.EndTime);\n var d4 = +(object2.EndTime);\n return ((d1 - d2) || ((d4 - d2) - (d3 - d1)));\n });\n var renderDate = scheduleObj.activeView.getRenderDates();\n var finalData = [];\n for (var i = 0; i < renderDate.length; i++) {\n var date = renderDate[i];\n if (scheduleObj.selectedDate.getMonth() === date.getMonth()) {\n var strTime = new Date(+date);\n var endTime = new Date(new Date(strTime.getTime()).setHours(23, 59, 59, 59));\n var perDayData = scheduleObj.eventBase.filterEvents(strTime, endTime, appointments);\n if (perDayData.length > 0) {\n perDayData.sort(function (a, b) { return ((a.Fare) - (b.Fare)); });\n finalData.push(perDayData[0]);\n }\n }\n }\n return finalData;\n }\n\n function generateEvents(scheduleObj) {\n var collections = [];\n var dataCollections = [\n {\n Id: 100,\n StartTime: new Date(2018, 3, 1, 8, 30),\n EndTime: new Date(2018, 3, 1, 10, 0),\n AirlineId: 1\n }, {\n Id: 102,\n StartTime: new Date(2018, 3, 1, 11, 0),\n EndTime: new Date(2018, 3, 1, 12, 0),\n AirlineId: 2\n }, {\n Id: 103,\n StartTime: new Date(2018, 3, 1, 14, 0),\n EndTime: new Date(2018, 3, 1, 15, 0),\n AirlineId: 3\n }\n ];\n var start = new Date(2018, 3, 1);\n var dateCollections = Array.apply(null, { length: 30 })\n .map(function (value, index) { return new Date(start.getTime() + (1000 * 60 * 60 * 24 * index)); });\n var id = 1;\n var day = 0;\n for (var i = 0; i < dateCollections.length; i++) {\n var resource = 1;\n for (var j = 0; j < dataCollections.length; j++) {\n var strDate = new Date((dataCollections[j].StartTime).getTime());\n var endDate = new Date((dataCollections[j].EndTime).getTime());\n collections.push({\n Id: id,\n StartTime: new Date(strDate.setDate(strDate.getDate() + day)),\n EndTime: new Date(endDate.setDate(endDate.getDate() + day)),\n AirlineId: resource,\n Fare: ((Math.random() * 500) + 100).toFixed(2)\n });\n resource += 1;\n id += 1;\n }\n day += 1;\n }\n dManager = new ej.base.extend([], collections, null, true);\n var filteredCollection = filterByFare(collections, scheduleObj);\n return filteredCollection;\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n Cheapest one way fares from Barcelona to Los Angeles\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var dManager = [];\n var initialLoad = true;\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 1),\n views: ['Month'],\n readonly: true,\n resources: [{\n field: 'AirlineId',\n title: 'Airline',\n name: 'Airlines',\n allowMultiple: true,\n dataSource: [\n { text: 'Airways 1', id: 1 },\n { text: 'Airways 2', id: 2 },\n { text: 'Airways 3', id: 3 }\n ],\n textField: 'text', idField: 'id'\n }],\n eventSettings: {\n template: '#event-template',\n enableTooltip: true,\n tooltipTemplate: '#tooltip-template'\n },\n actionBegin: function (args) {\n if (args.requestType === 'toolbarItemRendering') {\n args.items[2].align = 'Center';\n args.items[2].suffixIcon = '';\n args.items = args.items.splice(2, 1);\n }\n },\n dataBinding: function (args) {\n if (initialLoad) {\n scheduleObj.eventSettings.dataSource = generateEvents(scheduleObj);\n initialLoad = false;\n }\n },\n dataBound: function () {\n var eventCollections = scheduleObj.getCurrentViewEvents();\n eventCollections.sort(function (a, b) {\n return ((a.Fare) - (b.Fare));\n });\n var indexDate = new Date(((eventCollections[0]).StartTime).getTime());\n indexDate.setHours(0, 0, 0, 0);\n var index = scheduleObj.getIndexOfDate(scheduleObj.activeView.renderDates, indexDate);\n var target = scheduleObj.element.querySelectorAll('.e-work-cells')[index];\n ej.base.addClass([target], 'best-price');\n target.appendChild(ej.base.createElement('div', { className: 'best-price', innerHTML: 'Best Price' }));\n },\n popupOpen: function (args) {\n args.cancel = true;\n }\n });\n window.getAirwaysName = function (value) {\n return (value === 1) ? 'Airways 1' : (value === 2) ? 'Airways 2' : 'Airways 3';\n };\n window.getAirwaysImage = function (value) {\n return (value === 1) ? 'airways-1' : (value === 2) ? 'airways-2' : 'airways-3';\n };\n window.getFormattedTime = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'Hm' });\n };\n\n scheduleObj.appendTo('#Schedule');\n\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-1', label: 'Airways 1', checked: true, change: onChange }, '#airways-1');\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-2', label: 'Airways 2', checked: true, change: onChange }, '#airways-2');\n new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-3', label: 'Airways 3', checked: true, change: onChange }, '#airways-3');\n\n function onChange(args) {\n var tdElement = scheduleObj.element.querySelector('.best-price:not(.e-work-cells)');\n if (tdElement) {\n ej.base.removeClass([ej.base.closest(tdElement, 'td')], 'best-price');\n ej.base.remove(tdElement);\n }\n var scheduleData = new ej.base.extend([], dManager, null, true);\n var selectedResource = [];\n var resourceCollection = [].slice.call(document.querySelectorAll('.e-resource'));\n resourceCollection.forEach(function (element, index) {\n if (element.getAttribute('aria-checked') === 'true') {\n selectedResource.push(index);\n }\n });\n var filteredData = [];\n var resources = scheduleObj.resourceBase.resourceCollection.slice(-1)[0].dataSource;\n var _loop_1 = function (resource) {\n var data = scheduleData.filter(function (event) { return resources[resource].id === event.AirlineId; });\n filteredData = filteredData.concat(data);\n };\n for (var _i = 0, selectedResource_1 = selectedResource; _i < selectedResource_1.length; _i++) {\n var resource = selectedResource_1[_i];\n _loop_1(resource);\n }\n filteredData = filterByFare(filteredData, scheduleObj);\n scheduleObj.eventSettings.dataSource = filteredData;\n scheduleObj.dataBind();\n }\n\n function filterByFare(appointments, scheduleObj) {\n appointments.sort(function (object1, object2) {\n var d1 = +(object1.StartTime);\n var d2 = +(object2.StartTime);\n var d3 = +(object1.EndTime);\n var d4 = +(object2.EndTime);\n return ((d1 - d2) || ((d4 - d2) - (d3 - d1)));\n });\n var renderDate = scheduleObj.activeView.getRenderDates();\n var finalData = [];\n for (var i = 0; i < renderDate.length; i++) {\n var date = renderDate[i];\n if (scheduleObj.selectedDate.getMonth() === date.getMonth()) {\n var strTime = new Date(+date);\n var endTime = new Date(new Date(strTime.getTime()).setHours(23, 59, 59, 59));\n var perDayData = scheduleObj.eventBase.filterEvents(strTime, endTime, appointments);\n if (perDayData.length > 0) {\n perDayData.sort(function (a, b) { return ((a.Fare) - (b.Fare)); });\n finalData.push(perDayData[0]);\n }\n }\n }\n return finalData;\n }\n\n\n"} \ No newline at end of file diff --git a/src/schedule/resources.html b/src/schedule/resources.html index 7e923dac..64296fea 100644 --- a/src/schedule/resources.html +++ b/src/schedule/resources.html @@ -162,13 +162,6 @@ display: none; } - .schedule-demo-heading { - font-size: 16px; - padding-bottom: 15px; - text-align: center; - font-weight: 500 - } - .e-tooltip-wrap.e-schedule-event-tooltip .event-tooltip { width: 217px; } @@ -314,6 +307,14 @@ margin-top: 0px; } + /* custom code start*/ + .schedule-demo-heading { + font-size: 16px; + padding-bottom: 15px; + text-align: center; + font-weight: 500 + } + .property-panel-content .e-checkbox-wrapper.e-resource.e-airways-1 .e-frame { background-color: #EA7A57; border-color: transparent; @@ -334,4 +335,5 @@ font-size: 14px; } } + /* custom code end*/ \ No newline at end of file diff --git a/src/schedule/resources.js b/src/schedule/resources.js index bd37fcb3..f4e53a01 100644 --- a/src/schedule/resources.js +++ b/src/schedule/resources.js @@ -124,6 +124,7 @@ this.default = function () { return finalData; } + //custom code start function generateEvents(scheduleObj) { var collections = []; var dataCollections = [ @@ -170,4 +171,5 @@ this.default = function () { var filteredCollection = filterByFare(collections, scheduleObj); return filteredCollection; } + //custom code end }; \ No newline at end of file diff --git a/src/schedule/sample.json b/src/schedule/sample.json index 97a998f1..f31ae96d 100644 --- a/src/schedule/sample.json +++ b/src/schedule/sample.json @@ -10,7 +10,7 @@ "url": "default", "name": "Default Functionalities", "category": "Scheduler", - "description": "This demo for Essential JS2 Scheduler control shows how the flat Scheduler looks like with its default set of minimal configurations.", + "description": "This example for Essential JS2 Scheduler control shows how the flat Scheduler looks like with its default set of minimal configurations.", "api": { "Schedule": [ "height", @@ -23,7 +23,7 @@ "url": "local-data", "name": "Local Data", "category": "Data Binding", - "description": "This demo for Essential JS2 Scheduler control shows the way of binding an array of JavaScript objects (local JSON datasource).", + "description": "This example for Essential JS2 Scheduler control shows the way of binding an array of JavaScript objects (local JSON datasource).", "api": { "Schedule": [ "eventSettings", @@ -35,7 +35,7 @@ "url": "remote-data", "name": "Remote Data", "category": "Data Binding", - "description": "This demo for Essential JS2 Scheduler control shows the way of binding remote services by using the DataManager.", + "description": "This example for Essential JS2 Scheduler control shows the way of binding remote services by using the DataManager.", "api": { "Schedule": [ "eventSettings", @@ -47,8 +47,7 @@ "url": "calendar-integration", "name": "Sync Google Calendar", "category": "Data Binding", - "type": "new", - "description": "This example shows how to integrate Google Calendar events into HTML5 JavaScript Scheduler.", + "description": "This example illustrates how to integrate the Google Calendar events into HTML5 JavaScript Scheduler.", "api": { "Schedule": [ "eventSettings", @@ -61,7 +60,7 @@ "url": "recurrence-events", "name": "Recurring Events", "category": "Appointments", - "description": "This demo for Essential JS2 Scheduler control shows the scheduler with recurring meetings handled on a regular pattern.", + "description": "This example for Essential JS2 Scheduler control shows the scheduler with recurring meetings handled on a regular pattern.", "api": { "Schedule": [ "width", @@ -76,8 +75,23 @@ "url": "block-events", "name": "Blocking Dates and Time", "category": "Appointments", + "description": "This example demonstrates how to block specific days or time intervals on HTML5 JavaScript Scheduler.", + "api": { + "Schedule": [ + "width", + "height", + "currentView", + "selectedDate", + "eventSettings" + ] + } + }, + { + "url": "search-events", + "name": "Search Events", + "category": "Appointments", "type": "new", - "description": "This example shows how to block specific days or time intervals on HTML5 JavaScript Scheduler.", + "description": "This example showcases how to search the events of HTML5 JavaScript Scheduler based on specific field criteria.", "api": { "Schedule": [ "width", @@ -92,7 +106,7 @@ "url": "timezone", "name": "Timezone", "category": "Appointments", - "description": "This demo for Essential JS2 Scheduler control shows how the events are displayed in different timings as per the selected timezone.", + "description": "This example for Essential JS2 Scheduler control shows how the events are displayed in different timings as per the selected timezone.", "api": { "Schedule": [ "timezone", @@ -106,7 +120,6 @@ "url": "external-drag-drop", "name": "External Drag and Drop", "category": "Appointments", - "type": "new", "description": "This example shows how to drag and drop the events from an external source into HTML5 JavaScript scheduler.", "api": { "Schedule": [ @@ -127,7 +140,6 @@ "url": "virtual-scrolling", "name": "Virtual Scrolling ", "category": "Scrolling", - "type": "new", "hideOnDevice": true, "description": "This example illustrates how to enable the virtual loading of resources and its events in JavaScript Scheduler.", "api": { @@ -143,7 +155,7 @@ "url": "views", "name": "Basic Views", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows the usage of basic views such as Day, Week, Work Week and Month.", + "description": "This example for Essential JS2 Scheduler control shows the usage of basic views such as Day, Week, Work Week and Month.", "api": { "Schedule": [ "currentView", @@ -157,7 +169,7 @@ "url": "timeline", "name": "Timeline Views", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows how the timeline scheduler looks like with its default set of configurations.", + "description": "This example for Essential JS2 Scheduler control shows how the timeline scheduler looks like with its default set of configurations.", "api": { "Schedule": [ "height", @@ -170,7 +182,7 @@ "url": "agenda", "name": "Agenda View", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows the agenda view and the configurations available in it.", + "description": "This example for Essential JS2 Scheduler control shows the agenda view and the configurations available in it.", "api": { "Schedule": [ "agendaDaysCount", @@ -186,7 +198,7 @@ "url": "month-agenda", "name": "Month Agenda View", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows the layout of Month Agenda view and how it works.", + "description": "This example for Essential JS2 Scheduler control shows the layout of Month Agenda view and how it works.", "api": { "Schedule": [ "currentView", @@ -200,7 +212,7 @@ "url": "views-configuration", "name": "Individual View Settings", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows how to customize each of the view with specific configurations.", + "description": "This example for Essential JS2 Scheduler control shows how to customize each of the view with specific configurations.", "api": { "Schedule": [ "currentView", @@ -214,7 +226,7 @@ "url": "extended-views", "name": "View Intervals", "category": "Views", - "description": "This demo for Essential JS2 Scheduler control shows how to display n number of days, weeks and months on a single view.", + "description": "This example for Essential JS2 Scheduler control shows how to display n number of days, weeks and months on a single view.", "api": { "Schedule": [ "currentView", @@ -228,8 +240,7 @@ "url": "timeline-resources", "name": "Room Scheduler", "category": "Multiple Resources", - "type": "update", - "description": "This demo for Essential JS2 Scheduler control shows how to design the room scheduling calendar and manage the events booked on a particular time interval.", + "description": "This example for Essential JS2 Scheduler control shows how to design the room scheduling calendar and manage the events booked on a particular time interval.", "api": { "Schedule": [ "currentView", @@ -244,7 +255,22 @@ "url": "resources", "name": "Fare Calendar", "category": "Multiple Resources", - "description": "This demo for Essential JS2 Scheduler control shows how to customize the scheduler to showcase it as an Airfare calendar.", + "description": "This example for Essential JS2 Scheduler control shows how to customize the scheduler to showcase it as an Airfare calendar.", + "api": { + "Schedule": [ + "currentView", + "views", + "selectedDate", + "eventSettings" + ] + } + }, + { + "url": "resource", + "name": "Resources", + "category": "Multiple Resources", + "type": "new", + "description": "This example depicts how to show or hide the resource events on JavaScript Scheduler based on the resource selection.", "api": { "Schedule": [ "currentView", @@ -258,7 +284,7 @@ "url": "group-editing", "name": "Shared Events", "category": "Multiple Resources", - "description": "This demo for Essential JS2 Scheduler control shows the usage of single event that are shared by multiple resources.", + "description": "This example for Essential JS2 Scheduler control shows the usage of single event that are shared by multiple resources.", "api": { "Schedule": [ "resourceHeaderTemplate", @@ -272,7 +298,7 @@ "url": "group-custom-work-days", "name": "Different Work Days", "category": "Multiple Resources", - "description": "This demo for Essential JS2 Scheduler control shows how to set different working days for each of the resources.", + "description": "This example for Essential JS2 Scheduler control shows how to set different working days for each of the resources.", "api": { "Schedule": [ "resourceHeaderTemplate", @@ -286,7 +312,7 @@ "url": "add-remove-resources", "name": "Show/Hide Resources", "category": "Multiple Resources", - "description": "This demo for Essential JS2 Scheduler control shows how to dynamically add or remove the resources to and from the scheduler layout.", + "description": "This example for Essential JS2 Scheduler control shows how to dynamically add or remove the resources to and from the scheduler layout.", "api": { "Schedule": [ "currentView", @@ -296,11 +322,27 @@ ] } }, + { + "url": "adaptive-rows", + "name": "Row Auto Height", + "category": "Multiple Resources", + "type": "new", + "description": "This example showcases how the work cells of Essential JS2 Scheduler auto adjusts its height based on the exceeding appointment count.", + "api": { + "Schedule": [ + "rowAutoHeight", + "currentView", + "views", + "selectedDate", + "eventSettings" + ] + } + }, { "url": "resource-grouping", "name": "Horizontal Grouping", "category": "Resource Grouping", - "description": "This demo for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in default view layouts.", + "description": "This example for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in default view layouts.", "api": { "Schedule": [ "resourceHeaderTemplate", @@ -314,8 +356,7 @@ "url": "timeline-resource-grouping", "name": "Timeline Grouping", "category": "Resource Grouping", - "type": "update", - "description": "This demo for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in timeline view layouts.", + "description": "This example for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in timeline view layouts.", "api": { "Schedule": [ "group", @@ -328,7 +369,7 @@ "url": "group-by-date", "name": "Date-wise Grouping", "category": "Resource Grouping", - "description": "This demo for Essential JS2 Scheduler control shows how the resources are grouped under each date.", + "description": "This example demonstrates how the resources of Essential JS2 Scheduler control are grouped based on dates.", "api": { "Schedule": [ "group", @@ -341,7 +382,7 @@ "url": "group-by-child", "name": "Hierarchical Grouping", "category": "Resource Grouping", - "description": "This demo for Essential JS2 Scheduler control shows how to group the child level resources against each of the parent level resources.", + "description": "This example for Essential JS2 Scheduler control shows how to group the child level resources against each of the parent level resources.", "api": { "Schedule": [ "startHour", @@ -356,7 +397,7 @@ "url": "cell-template", "name": "Cell", "category": "Templates", - "description": "This demo for Essential JS2 Scheduler control shows how to customize the background of the specific cells using cell template option.", + "description": "This example for Essential JS2 Scheduler control shows how to customize the background of the specific cells using cell template option.", "api": { "Schedule": [ "width", @@ -372,7 +413,7 @@ "url": "date-header-template", "name": "Date Header", "category": "Templates", - "description": "This demo for Essential JS2 Scheduler control shows how to customize the date header cells using the template option.", + "description": "This example for Essential JS2 Scheduler control shows how to customize the date header cells using the template option.", "api": { "Schedule": [ "cssClass", @@ -387,7 +428,7 @@ "url": "event-template", "name": "Events", "category": "Templates", - "description": "This demo for Essential JS2 Scheduler control shows how to customize the appearance of events using event template option.", + "description": "This example for Essential JS2 Scheduler control shows how to customize the appearance of events using event template option.", "api": { "Schedule": [ "width", @@ -403,7 +444,7 @@ "url": "tooltip", "name": "Tooltip", "category": "Templates", - "description": "This demo for Essential JS2 Scheduler control shows how to display tooltip over events as well as the way to customize it using template option.", + "description": "This example for Essential JS2 Scheduler control shows how to display tooltip over events as well as the way to customize it using template option.", "api": { "Schedule": [ "width", @@ -417,7 +458,7 @@ "url": "editor-validation", "name": "Field Validation", "category": "Editor Window", - "description": "This demo for Essential JS2 Scheduler control shows the way of adding default and custom validation rules to the editor fields of scheduler.", + "description": "This example for Essential JS2 Scheduler control shows the way of adding default and custom validation rules to the editor fields of scheduler.", "api": { "Schedule": [ "width", @@ -431,7 +472,7 @@ "url": "editor-custom-field", "name": "Additional Fields", "category": "Editor Window", - "description": "This demo for Essential JS2 Scheduler control shows how to add additional fields to the default editor window.", + "description": "This example for Essential JS2 Scheduler control shows how to add additional fields to the default editor window.", "api": { "Schedule": [ "selectedDate", @@ -444,7 +485,7 @@ "url": "editor-template", "name": "Editor Template", "category": "Editor Window", - "description": "This demo for Essential JS2 Scheduler control shows the way of customizing the default editor window with custom template design.", + "description": "This example for Essential JS2 Scheduler control shows the way of customizing the default editor window with custom template design.", "api": { "Schedule": [ "editorTemplate", @@ -459,7 +500,7 @@ "url": "header-rows", "name": "Header Rows", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control shows how to display the additional header rows on timeline view.", + "description": "This example for Essential JS2 Scheduler control shows how to display the additional header rows on timeline view.", "api": { "Schedule": [ "height", @@ -473,7 +514,7 @@ "url": "time-scale", "name": "Timescale", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control shows how to customize the grid lines of scheduler with different duration and count", + "description": "This example for Essential JS2 Scheduler control shows how to customize the grid lines of scheduler with different duration and count", "api": { "Schedule": [ "height", @@ -487,7 +528,6 @@ "url": "context-menu", "name": "Context Menu", "category": "Customization", - "type": "new", "description": "This example shows how to enable the context menu on HTML5 JavaScript Scheduler and perform the related actions using menu options.", "api": { "Schedule": [ @@ -502,7 +542,7 @@ "url": "header-bar", "name": "Header Bar", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control shows the way of adding custom items onto the scheduler header bar.", + "description": "This example for Essential JS2 Scheduler control shows the way of adding custom items onto the scheduler header bar.", "api": { "Schedule": [ "width", @@ -518,7 +558,7 @@ "url": "scroll-to", "name": "Scroll Time", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control shows the way of manually scrolling to specific time on scheduler.", + "description": "This example for Essential JS2 Scheduler control shows the way of manually scrolling to specific time on scheduler.", "api": { "Schedule": [ "width", @@ -533,7 +573,7 @@ "url": "work-days", "name": "Work Days", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control showcases how to set customized working days as well as first day of a week on scheduler.", + "description": "This example for Essential JS2 Scheduler control showcases how to set customized working days as well as first day of a week on scheduler.", "api": { "Schedule": [ "workDays", @@ -547,7 +587,7 @@ "url": "hide-weekend", "name": "Hide Non-Working Days", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control depicts the way to show or hide the weekend days of a week.", + "description": "This example for Essential JS2 Scheduler control depicts the way to show or hide the non working days of a week.", "api": { "Schedule": [ "showWeekend" @@ -558,7 +598,7 @@ "url": "work-hour", "name": "Work Hours", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control showcases how to set the work hour range on scheduler.", + "description": "This example for Essential JS2 Scheduler control showcases how to set the work hour range on scheduler.", "api": { "Schedule": [ "workHours", @@ -572,7 +612,7 @@ "url": "start-end-hour", "name": "Day Hour Limit", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control depicts how to restrict the start and end hours on scheduler.", + "description": "This example for Essential JS2 Scheduler control depicts how to restrict the start and end hours on scheduler.", "api": { "Schedule": [ "startHour", @@ -586,7 +626,7 @@ "url": "cell-dimension", "name": "Cell Dimension", "category": "Customization", - "description": "This demo for Essential JS2 Scheduler control shows how to set the width and height of the cells by overriding the default CSS classes.", + "description": "This example for Essential JS2 Scheduler control shows how to set the width and height of the cells by overriding the default CSS classes.", "api": { "Schedule": [ "cssClass", @@ -601,8 +641,7 @@ "url": "read-only-events", "name": "Read-only Events", "category": "Customization", - "type": "update", - "description": "This demo for Essential JS2 Scheduler control shows how to make specific events on the scheduler to be displayed in a read-only mode.", + "description": "This example for Essential JS2 Scheduler control shows how to make specific events on the scheduler to be displayed in a read-only mode.", "api": { "Schedule": [ "eventSettings", @@ -613,24 +652,52 @@ ] } }, + { + "url": "excel-export", + "name": "Excel Exporting", + "category": "Exporting", + "type": "new", + "hideOnDevice": false, + "description": "This example demonstrates how to export the Essential JS2 Scheduler events to the excel file format at client-side.", + "api": { + "Schedule": [ + "height", + "eventSettings", + "selectedDate" + ] + } + }, + { + "url": "calendar-export-import", + "name": "Export and Import ICS", + "category": "Exporting", + "type": "new", + "description": "This example shows how to export the Scheduler events to a calendar file, and also how to import events from an .ics file into our Essential JS2 Scheduler.", + "api": { + "Schedule": [ + "importICalendar", + "exportToICalendar" + ] + } + }, { "url": "recurrence-editor-generate-rule", "name": "Rule Generator", "category": "Recurrence Editor", - "description": "This demo for Essential JS2 Scheduler control showcases the recurrence rule generation based on the options selected from the recurrence editor." + "description": "This example for Essential JS2 Scheduler control showcases the recurrence rule generation based on the options selected from the recurrence editor." }, { "url": "recurrence-editor-populate-rule", "name": "Populate Rule", "category": "Recurrence Editor", - "description": "This demo for Essential JS2 Scheduler control shows how to fill the recurrence editor fields with values based on the provided recurrence rule string." + "description": "This example for Essential JS2 Scheduler control shows how to fill the recurrence editor fields with values based on the provided recurrence rule string." }, { "url": "keyboard-interaction", "name": "Keyboard Interaction", "category": "Miscellaneous", "hideOnDevice": true, - "description": "This demo for Essential JS2 Scheduler control showcases the keyboard shortcuts available on scheduler.", + "description": "This example for Essential JS2 Scheduler control showcases the keyboard shortcuts available on scheduler.", "api": { "Schedule": [ "width", @@ -645,7 +712,7 @@ "url": "events", "name": "Events", "category": "Miscellaneous", - "description": "This demo for Essential JS2 Scheduler control shows the client-side events that triggers on respective scheduler actions.", + "description": "This example for Essential JS2 Scheduler control shows the client-side events that triggers on respective scheduler actions.", "api": { "Schedule": [ "width", diff --git a/src/schedule/scroll-to-stack.json b/src/schedule/scroll-to-stack.json index afe71e5d..aa72bb5d 100644 --- a/src/schedule/scroll-to-stack.json +++ b/src/schedule/scroll-to-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Scroll To\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'],\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var scrollToHour = new ej.calendars.TimePicker({\n width: 100,\n value: new Date(2000, 0, 1, 9),\n format: 'HH:mm',\n change: function (args) {\n scheduleObj.scrollTo(args.text);\n }\n });\n scrollToHour.appendTo('#ScrollToHour');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Scroll To\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'],\n eventSettings: {\n dataSource: data\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var scrollToHour = new ej.calendars.TimePicker({\n width: 100,\n value: new Date(2000, 0, 1, 9),\n format: 'HH:mm',\n change: function (args) {\n scheduleObj.scrollTo(args.text);\n }\n });\n scrollToHour.appendTo('#ScrollToHour');\n"} \ No newline at end of file diff --git a/src/schedule/scroll-to.js b/src/schedule/scroll-to.js index 3ee5cd08..0c08dfd1 100644 --- a/src/schedule/scroll-to.js +++ b/src/schedule/scroll-to.js @@ -3,7 +3,7 @@ this.default = function () { var scheduleObj = new ej.schedule.Schedule({ width: '100%', height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'], eventSettings: { dataSource: data diff --git a/src/schedule/search-events-stack.json b/src/schedule/search-events-stack.json new file mode 100644 index 00000000..04f0e218 --- /dev/null +++ b/src/schedule/search-events-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n

                                    Search by all event fields

                                    \n
                                    \n \n
                                    \n
                                    \n

                                    Search by specific event fields

                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n \n
                                    \n \n
                                    \n \n
                                    \n \n
                                    \n \n \n \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '550px',\n selectedDate: new Date(2019, 0, 10),\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#schedule');\n\n ej.inputs.Input.createInput({\n element: document.getElementById('events-search'),\n properties: { placeholder: 'Enter the Search text' }\n });\n\n ej.inputs.Input.createInput({\n element: document.getElementById('searchEventName'),\n properties: { placeholder: 'Subject' }\n });\n\n ej.inputs.Input.createInput({\n element: document.getElementById('searchEventLocation'),\n properties: { placeholder: 'Location' }\n });\n\n var startScheduleDate = new ej.calendars.DatePicker({ value: null, showClearButton: false, placeholder: 'Start Date' });\n startScheduleDate.appendTo('#startScheduleDate');\n\n var endScheduleDate = new ej.calendars.DatePicker({ value: null, showClearButton: false, placeholder: 'End Date' });\n endScheduleDate.appendTo('#endScheduleDate');\n\n var searchButton = new ej.buttons.Button();\n searchButton.appendTo('#seperateSearch');\n document.getElementById('seperateSearch').onclick = function () {\n var searchObj = [];\n var startDate;\n var endDate;\n var formElements = [].slice.call(document.querySelectorAll('.event-search .search-field'));\n formElements.forEach(function (node) {\n if (node.value && node.value !== '') {\n var fieldOperator = 'contains';\n var predicateCondition = 'or';\n var fieldValue = node.value;\n var matchCase = true;\n if (node.classList.contains('e-datepicker')) {\n fieldOperator = node.classList.contains('e-start-time') ? 'greaterthanorequal' : 'lessthanorequal';\n predicateCondition = 'and';\n var fieldInstance = ((node)).ej2_instances[0];\n fieldValue = fieldInstance.value;\n if (node.classList.contains('e-start-time')) {\n startDate = new Date(+fieldValue);\n }\n if (node.classList.contains('e-end-time')) {\n var date = new Date(+fieldInstance.value);\n fieldValue = new Date(date.setDate(date.getDate() + 1));\n endDate = fieldValue;\n }\n matchCase = false;\n }\n searchObj.push({\n field: node.name, operator: fieldOperator, value: fieldValue, predicate: predicateCondition,\n matchcase: matchCase\n });\n }\n });\n if (searchObj.length > 0) {\n var filterCondition = searchObj[0];\n var predicate = new ej.data.Predicate(\n filterCondition.field, filterCondition.operator, filterCondition.value, filterCondition.matchcase);\n for (var i = 1; i < searchObj.length; i++) {\n predicate = predicate.and(searchObj[i].field, searchObj[i].operator, searchObj[i].value, searchObj[i].matchcase);\n }\n var result = new ej.data.DataManager(scheduleObj.getEvents(startDate, endDate, true)).\n executeLocal(new ej.data.Query().where(predicate));\n showSearchEvents('show', result);\n } else {\n showSearchEvents('hide');\n }\n };\n\n var clearButton = new ej.buttons.Button();\n clearButton.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('schedule').style.display = 'block';\n document.getElementById('form-search').reset();\n showSearchEvents('hide');\n };\n\n document.getElementById('events-search').onkeyup = function (args) {\n var searchString = (args.target).value;\n if (searchString !== '') {\n new ej.data.DataManager(scheduleObj.getEvents(null, null, true)).executeQuery(new ej.data.Query().\n search(searchString, ['Subject', 'Location', 'Description'], null, true, true)).then(function (e) {\n if ((e.result).length > 0) {\n showSearchEvents('show', e.result);\n } else {\n showSearchEvents('hide');\n }\n });\n } else {\n showSearchEvents('hide');\n }\n };\n\n function showSearchEvents(type, data) {\n if (type === 'show') {\n if (document.getElementById('grid').classList.contains('e-grid')) {\n var gridObj = document.querySelector('#grid').ej2_instances[0];\n gridObj.dataSource = data;\n gridObj.dataBind();\n } else {\n var grid = new ej.grids.Grid({\n dataSource: data,\n height: 505,\n width: 'auto',\n columns: [\n { field: 'Subject', headerText: 'Subject', width: 120 },\n { field: 'Location', headerText: 'Location', width: 120 },\n { field: 'StartTime', headerText: 'StartTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } },\n { field: 'EndTime', headerText: 'EndTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } },\n ]\n });\n grid.appendTo(document.querySelector('#grid'));\n scheduleObj.element.style.display = 'none';\n }\n } else {\n var resultGridObj = (document.querySelector('#grid')).ej2_instances;\n if (resultGridObj && resultGridObj.length > 0 && !resultGridObj[0].isDestroyed) {\n resultGridObj[0].destroy();\n }\n scheduleObj.element.style.display = 'block';\n }\n }\n"} \ No newline at end of file diff --git a/src/schedule/search-events.html b/src/schedule/search-events.html new file mode 100644 index 00000000..3b49f6ef --- /dev/null +++ b/src/schedule/search-events.html @@ -0,0 +1,88 @@ +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +

                                    Search by all event fields

                                    +
                                    + +
                                    + +
                                    +
                                    + +
                                    +

                                    + This example showcases the search results of Scheduler appointments in a grid. When the user provides the + search string on appropriate fields, the resulting event collection based on the search criteria will be + displayed in a Grid. +

                                    +
                                    + +
                                    +

                                    + In this example, the search text value is compared with the event field values of Scheduler DataSource and then + the filtered resultant event data collection is assigned to the DataSource of Grid. +

                                    +
                                    + + + + \ No newline at end of file diff --git a/src/schedule/search-events.js b/src/schedule/search-events.js new file mode 100644 index 00000000..447ee294 --- /dev/null +++ b/src/schedule/search-events.js @@ -0,0 +1,134 @@ +this.default = function () { + var data = new ej.base.extend([], window.scheduleData, null, true); + var scheduleObj = new ej.schedule.Schedule({ + width: '100%', + height: '550px', + selectedDate: new Date(2019, 0, 10), + eventSettings: { dataSource: data } + }); + scheduleObj.appendTo('#schedule'); + + ej.inputs.Input.createInput({ + element: document.getElementById('events-search'), + properties: { placeholder: 'Enter the Search text' } + }); + + ej.inputs.Input.createInput({ + element: document.getElementById('searchEventName'), + properties: { placeholder: 'Subject' } + }); + + ej.inputs.Input.createInput({ + element: document.getElementById('searchEventLocation'), + properties: { placeholder: 'Location' } + }); + + var startScheduleDate = new ej.calendars.DatePicker({ value: null, showClearButton: false, placeholder: 'Start Date' }); + startScheduleDate.appendTo('#startScheduleDate'); + + var endScheduleDate = new ej.calendars.DatePicker({ value: null, showClearButton: false, placeholder: 'End Date' }); + endScheduleDate.appendTo('#endScheduleDate'); + + var searchButton = new ej.buttons.Button(); + searchButton.appendTo('#seperateSearch'); + document.getElementById('seperateSearch').onclick = function () { + var searchObj = []; + var startDate; + var endDate; + var formElements = [].slice.call(document.querySelectorAll('.event-search .search-field')); + formElements.forEach(function (node) { + if (node.value && node.value !== '') { + var fieldOperator = 'contains'; + var predicateCondition = 'or'; + var fieldValue = node.value; + var matchCase = true; + if (node.classList.contains('e-datepicker')) { + fieldOperator = node.classList.contains('e-start-time') ? 'greaterthanorequal' : 'lessthanorequal'; + predicateCondition = 'and'; + var fieldInstance = ((node)).ej2_instances[0]; + fieldValue = fieldInstance.value; + if (node.classList.contains('e-start-time')) { + startDate = new Date(+fieldValue); + } + if (node.classList.contains('e-end-time')) { + var date = new Date(+fieldInstance.value); + fieldValue = new Date(date.setDate(date.getDate() + 1)); + endDate = fieldValue; + } + matchCase = false; + } + searchObj.push({ + field: node.name, operator: fieldOperator, value: fieldValue, predicate: predicateCondition, + matchcase: matchCase + }); + } + }); + if (searchObj.length > 0) { + var filterCondition = searchObj[0]; + var predicate = new ej.data.Predicate( + filterCondition.field, filterCondition.operator, filterCondition.value, filterCondition.matchcase); + for (var i = 1; i < searchObj.length; i++) { + predicate = predicate.and(searchObj[i].field, searchObj[i].operator, searchObj[i].value, searchObj[i].matchcase); + } + var result = new ej.data.DataManager(scheduleObj.getEvents(startDate, endDate, true)). + executeLocal(new ej.data.Query().where(predicate)); + showSearchEvents('show', result); + } else { + showSearchEvents('hide'); + } + }; + + var clearButton = new ej.buttons.Button(); + clearButton.appendTo('#clear'); + document.getElementById('clear').onclick = function () { + document.getElementById('schedule').style.display = 'block'; + document.getElementById('form-search').reset(); + showSearchEvents('hide'); + }; + + document.getElementById('events-search').onkeyup = function (args) { + var searchString = (args.target).value; + if (searchString !== '') { + new ej.data.DataManager(scheduleObj.getEvents(null, null, true)).executeQuery(new ej.data.Query(). + search(searchString, ['Subject', 'Location', 'Description'], null, true, true)).then(function (e) { + if ((e.result).length > 0) { + showSearchEvents('show', e.result); + } else { + showSearchEvents('hide'); + } + }); + } else { + showSearchEvents('hide'); + } + }; + + function showSearchEvents(type, data) { + if (type === 'show') { + if (document.getElementById('grid').classList.contains('e-grid')) { + var gridObj = document.querySelector('#grid').ej2_instances[0]; + gridObj.dataSource = data; + gridObj.dataBind(); + } else { + var grid = new ej.grids.Grid({ + dataSource: data, + height: 505, + width: 'auto', + columns: [ + { field: 'Subject', headerText: 'Subject', width: 120 }, + { field: 'Location', headerText: 'Location', width: 120 }, + { field: 'StartTime', headerText: 'StartTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } }, + { field: 'EndTime', headerText: 'EndTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } }, + ] + }); + grid.appendTo(document.querySelector('#grid')); + scheduleObj.element.style.display = 'none'; + } + } else { + var resultGridObj = (document.querySelector('#grid')).ej2_instances; + if (resultGridObj && resultGridObj.length > 0 && !resultGridObj[0].isDestroyed) { + resultGridObj[0].destroy(); + } + scheduleObj.element.style.display = 'block'; + } + } +}; \ No newline at end of file diff --git a/src/schedule/start-end-hour-stack.json b/src/schedule/start-end-hour-stack.json index b4f8fd33..a22db995 100644 --- a/src/schedule/start-end-hour-stack.json +++ b/src/schedule/start-end-hour-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Start Hour\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    End Hour\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n startHour: '08:00',\n endHour: '20:00',\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineDay', 'TimelineWeek'],\n workHours: { highlight: false },\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var start = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 8),\n format: 'HH:mm'\n });\n start.appendTo('#startTime');\n var end = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 20),\n format: 'HH:mm'\n });\n end.appendTo('#endTime');\n var button = new ej.buttons.Button();\n button.appendTo('#submit');\n document.getElementById('submit').onclick = function () {\n var start = document.getElementById('startTime');\n var end = document.getElementById('endTime');\n scheduleObj.startHour = start.value;\n scheduleObj.endHour = end.value;\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Start Hour\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    End Hour\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n startHour: '08:00',\n endHour: '20:00',\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineDay', 'TimelineWeek'],\n workHours: { highlight: false },\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n var start = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 8),\n format: 'HH:mm'\n });\n start.appendTo('#startTime');\n var end = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 20),\n format: 'HH:mm'\n });\n end.appendTo('#endTime');\n var button = new ej.buttons.Button();\n button.appendTo('#submit');\n document.getElementById('submit').onclick = function () {\n var start = document.getElementById('startTime');\n var end = document.getElementById('endTime');\n scheduleObj.startHour = start.value;\n scheduleObj.endHour = end.value;\n };\n"} \ No newline at end of file diff --git a/src/schedule/time-scale-stack.json b/src/schedule/time-scale-stack.json index f33a8467..26694756 100644 --- a/src/schedule/time-scale-stack.json +++ b/src/schedule/time-scale-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Interval
                                    \n (in Minutes)\n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Slot Count\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Grid lines\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Apply Template\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n window.majorSlotTemplate = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'hm' });\n };\n window.minorSlotTemplate = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');\n };\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n currentView: 'TimelineWeek',\n views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'],\n timeScale: {\n enable: true,\n interval: 60,\n slotCount: 6\n },\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#Schedule');\n var minorSlot = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.slotCount = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n minorSlot.appendTo('#slotCount');\n\n var majorSlotCount = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.interval = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n majorSlotCount.appendTo('#interval');\n\n var timeScale = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.enable = (args.value === 'enable') ? true : false;\n scheduleObj.dataBind();\n }\n });\n timeScale.appendTo('#timescale');\n\n var timescaleTemplate = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.majorSlotTemplate = (args.value === 'yes') ? '#majorSlotTemplate' : null;\n scheduleObj.timeScale.minorSlotTemplate = (args.value === 'yes') ? '#minorSlotTemplate' : null;\n scheduleObj.dataBind();\n }\n });\n timescaleTemplate.appendTo('#template');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Interval
                                    \n (in Minutes)\n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Slot Count\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Grid lines\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Apply Template\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n window.majorSlotTemplate = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'hm' });\n };\n window.minorSlotTemplate = function (date) {\n var instance = new ej.base.Internationalization();\n return instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');\n };\n var data = new ej.base.extend([], window.scheduleData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n currentView: 'TimelineWeek',\n views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'],\n timeScale: {\n enable: true,\n interval: 60,\n slotCount: 6\n },\n eventSettings: { dataSource: data }\n });\n scheduleObj.appendTo('#Schedule');\n var minorSlot = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.slotCount = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n minorSlot.appendTo('#slotCount');\n\n var majorSlotCount = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.interval = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n majorSlotCount.appendTo('#interval');\n\n var timeScale = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.enable = (args.value === 'enable') ? true : false;\n scheduleObj.dataBind();\n }\n });\n timeScale.appendTo('#timescale');\n\n var timescaleTemplate = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.timeScale.majorSlotTemplate = (args.value === 'yes') ? '#majorSlotTemplate' : null;\n scheduleObj.timeScale.minorSlotTemplate = (args.value === 'yes') ? '#minorSlotTemplate' : null;\n scheduleObj.dataBind();\n }\n });\n timescaleTemplate.appendTo('#template');\n"} \ No newline at end of file diff --git a/src/schedule/time-scale.js b/src/schedule/time-scale.js index 65c885c6..a2e7b9a3 100644 --- a/src/schedule/time-scale.js +++ b/src/schedule/time-scale.js @@ -10,7 +10,7 @@ this.default = function () { var data = new ej.base.extend([], window.scheduleData, null, true); var scheduleObj = new ej.schedule.Schedule({ height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), currentView: 'TimelineWeek', views: ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek'], timeScale: { diff --git a/src/schedule/timeline-resource-grouping-stack.json b/src/schedule/timeline-resource-grouping-stack.json index e806f0bd..f0605880 100644 --- a/src/schedule/timeline-resource-grouping-stack.json +++ b/src/schedule/timeline-resource-grouping-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceData.concat(window.timelineResourceData), null, true);\n var scheduleOptions = {\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 4),\n views: ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'Agenda'],\n currentView: 'TimelineWeek',\n group: {\n resources: ['Projects', 'Categories']\n },\n resources: [\n {\n field: 'ProjectId', title: 'Choose Project', name: 'Projects',\n dataSource: [\n { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },\n { text: 'PROJECT 2', id: 2, color: '#56ca85' },\n { text: 'PROJECT 3', id: 3, color: '#df5286' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }, {\n field: 'TaskId', title: 'Category',\n name: 'Categories', allowMultiple: true,\n dataSource: [\n { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },\n { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },\n { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },\n { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },\n { text: 'Micheal', id: 5, groupId: 3, color: '#df5286' },\n { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }\n ],\n textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color'\n }\n ],\n eventSettings: {\n dataSource: data\n }\n };\n var scheduleObj = new ej.schedule.Schedule(scheduleOptions, '#Schedule');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.resourceData.concat(window.timelineResourceData), null, true);\n var scheduleOptions = {\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 3, 4),\n views: ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'Agenda'],\n currentView: 'TimelineWeek',\n group: {\n resources: ['Projects', 'Categories']\n },\n resources: [\n {\n field: 'ProjectId', title: 'Choose Project', name: 'Projects',\n dataSource: [\n { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },\n { text: 'PROJECT 2', id: 2, color: '#56ca85' },\n { text: 'PROJECT 3', id: 3, color: '#df5286' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }, {\n field: 'TaskId', title: 'Category',\n name: 'Categories', allowMultiple: true,\n dataSource: [\n { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },\n { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },\n { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },\n { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },\n { text: 'Micheal', id: 5, groupId: 3, color: '#df5286' },\n { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }\n ],\n textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color'\n }\n ],\n eventSettings: {\n dataSource: data\n }\n };\n var scheduleObj = new ej.schedule.Schedule(scheduleOptions, '#Schedule');\n\n"} \ No newline at end of file diff --git a/src/schedule/timeline-resources-stack.json b/src/schedule/timeline-resources-stack.json index 07eebef0..4a4b7b74 100644 --- a/src/schedule/timeline-resources-stack.json +++ b/src/schedule/timeline-resources-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var isReadOnly = function (endDate) {\n return (endDate < new Date(2018, 6, 31, 0, 0));\n };\n window.getRoomName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n window.getRoomType = function (value) {\n return value.resourceData.type;\n };\n window.getRoomCapacity = function (value) {\n return value.resourceData.capacity;\n };\n var data = new ej.base.extend([], window.roomData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineWeek',\n workHours: {\n start: '08:00',\n end: '18:00'\n },\n timeScale: {\n slotCount: 1,\n interval: 60\n },\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineWeek' }\n ],\n resourceHeaderTemplate: '#resource-template',\n group: {\n enableCompactView: false,\n resources: ['MeetingRoom']\n },\n resources: [{\n field: 'RoomId', title: 'Room Type',\n name: 'MeetingRoom', allowMultiple: true,\n dataSource: [\n { text: 'Jammy', id: 1, color: '#ea7a57', capacity: 20, type: 'Conference' },\n { text: 'Tweety', id: 2, color: '#7fa900', capacity: 7, type: 'Cabin' },\n { text: 'Nestle', id: 3, color: '#5978ee', capacity: 5, type: 'Cabin' },\n { text: 'Phoenix', id: 4, color: '#fec200', capacity: 15, type: 'Conference' },\n { text: 'Mission', id: 5, color: '#df5286', capacity: 25, type: 'Conference' },\n { text: 'Hangout', id: 6, color: '#00bdae', capacity: 10, type: 'Cabin' },\n { text: 'Rick Roll', id: 7, color: '#865fcf', capacity: 20, type: 'Conference' },\n { text: 'Rainbow', id: 8, color: '#1aaa55', capacity: 8, type: 'Cabin' },\n { text: 'Swarm', id: 9, color: '#df5286', capacity: 30, type: 'Conference' },\n { text: 'Photogenic', id: 10, color: '#710193', capacity: 25, type: 'Conference' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }],\n eventSettings: {\n dataSource: data,\n fields: {\n id: 'Id',\n subject: { title: 'Summary', name: 'Subject' },\n location: { title: 'Location', name: 'Location' },\n description: { title: 'Comments', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' }\n }\n },\n popupOpen: function (args) {\n var data = args.data;\n if (args.type === 'QuickInfo' || args.type === 'Editor' || args.type === 'RecurrenceAlert' || args.type === 'DeleteAlert') {\n var target = (args.type === 'RecurrenceAlert' ||\n args.type === 'DeleteAlert') ? data.element[0] : args.target;\n if (!ej.base.isNullOrUndefined(target) && target.classList.contains('e-work-cells')) {\n if ((target.classList.contains('e-read-only-cells')) ||\n (!scheduleObj.isSlotAvailable(data.endTime, data.endTime, data.groupIndex))) {\n args.cancel = true;\n }\n }\n else if (!ej.base.isNullOrUndefined(target) && target.classList.contains('e-appointment') &&\n (isReadOnly(data.EndTime))) {\n args.cancel = true;\n }\n }\n },\n renderCell: function (args) {\n if (args.element.classList.contains('e-work-cells')) { \n if (args.date < new Date(2018, 6, 31, 0, 0)) {\n args.element.setAttribute('aria-readonly', 'true');\n args.element.classList.add('e-read-only-cells');\n }\n }\n if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {\n var target = args.element.querySelector('.e-resource-text');\n target.innerHTML = '
                                    Rooms
                                    Type
                                    Capacity
                                    ';\n }\n },\n eventRendered: function (args) {\n var data = args.data;\n if (isReadOnly(data.EndTime)) {\n args.element.setAttribute('aria-readonly', 'true');\n args.element.classList.add('e-read-only');\n }\n },\n actionBegin: function (args) {\n if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {\n var data = void 0;\n if (args.requestType === 'eventCreate') {\n data = args.data[0];\n }\n else if (args.requestType === 'eventChange') {\n data = args.data;\n }\n var groupIndex = scheduleObj.eventBase.getGroupIndexFromEvent(data);\n if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime, groupIndex)) {\n args.cancel = true;\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var isReadOnly = function (endDate) {\n return (endDate < new Date(2018, 6, 31, 0, 0));\n };\n window.getRoomName = function (value) {\n return value.resourceData[value.resource.textField];\n };\n window.getRoomType = function (value) {\n return value.resourceData.type;\n };\n window.getRoomCapacity = function (value) {\n return value.resourceData.capacity;\n };\n var data = new ej.base.extend([], window.roomData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 7, 1),\n currentView: 'TimelineWeek',\n workHours: {\n start: '08:00',\n end: '18:00'\n },\n timeScale: {\n slotCount: 1,\n interval: 60\n },\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineWeek' }\n ],\n resourceHeaderTemplate: '#resource-template',\n group: {\n enableCompactView: false,\n resources: ['MeetingRoom']\n },\n resources: [{\n field: 'RoomId', title: 'Room Type',\n name: 'MeetingRoom', allowMultiple: true,\n dataSource: [\n { text: 'Jammy', id: 1, color: '#ea7a57', capacity: 20, type: 'Conference' },\n { text: 'Tweety', id: 2, color: '#7fa900', capacity: 7, type: 'Cabin' },\n { text: 'Nestle', id: 3, color: '#5978ee', capacity: 5, type: 'Cabin' },\n { text: 'Phoenix', id: 4, color: '#fec200', capacity: 15, type: 'Conference' },\n { text: 'Mission', id: 5, color: '#df5286', capacity: 25, type: 'Conference' },\n { text: 'Hangout', id: 6, color: '#00bdae', capacity: 10, type: 'Cabin' },\n { text: 'Rick Roll', id: 7, color: '#865fcf', capacity: 20, type: 'Conference' },\n { text: 'Rainbow', id: 8, color: '#1aaa55', capacity: 8, type: 'Cabin' },\n { text: 'Swarm', id: 9, color: '#df5286', capacity: 30, type: 'Conference' },\n { text: 'Photogenic', id: 10, color: '#710193', capacity: 25, type: 'Conference' }\n ],\n textField: 'text', idField: 'id', colorField: 'color'\n }],\n eventSettings: {\n dataSource: data,\n fields: {\n id: 'Id',\n subject: { title: 'Summary', name: 'Subject' },\n location: { title: 'Location', name: 'Location' },\n description: { title: 'Comments', name: 'Description' },\n startTime: { title: 'From', name: 'StartTime' },\n endTime: { title: 'To', name: 'EndTime' }\n }\n },\n popupOpen: function (args) {\n var data = args.data;\n if (args.type === 'QuickInfo' || args.type === 'Editor' || args.type === 'RecurrenceAlert' || args.type === 'DeleteAlert') {\n var target = (args.type === 'RecurrenceAlert' ||\n args.type === 'DeleteAlert') ? data.element[0] : args.target;\n if (!ej.base.isNullOrUndefined(target) && target.classList.contains('e-work-cells')) {\n if ((target.classList.contains('e-read-only-cells')) ||\n (!scheduleObj.isSlotAvailable(data.endTime, data.endTime, data.groupIndex))) {\n args.cancel = true;\n }\n }\n else if (!ej.base.isNullOrUndefined(target) && target.classList.contains('e-appointment') &&\n (isReadOnly(data.EndTime))) {\n args.cancel = true;\n }\n }\n },\n renderCell: function (args) {\n if (args.element.classList.contains('e-work-cells')) { \n if (args.date < new Date(2018, 6, 31, 0, 0)) {\n args.element.setAttribute('aria-readonly', 'true');\n args.element.classList.add('e-read-only-cells');\n }\n }\n if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {\n var target = args.element.querySelector('.e-resource-text');\n target.innerHTML = '
                                    Rooms
                                    Type
                                    Capacity
                                    ';\n }\n },\n eventRendered: function (args) {\n var data = args.data;\n if (isReadOnly(data.EndTime)) {\n args.element.setAttribute('aria-readonly', 'true');\n args.element.classList.add('e-read-only');\n }\n },\n actionBegin: function (args) {\n if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {\n var data = void 0;\n if (args.requestType === 'eventCreate') {\n data = args.data[0];\n }\n else if (args.requestType === 'eventChange') {\n data = args.data;\n }\n var groupIndex = scheduleObj.eventBase.getGroupIndexFromEvent(data);\n if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime, groupIndex)) {\n args.cancel = true;\n }\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/timeline-stack.json b/src/schedule/timeline-stack.json index 69b91709..e7d27240 100644 --- a/src/schedule/timeline-stack.json +++ b/src/schedule/timeline-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current Date\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n currentView: 'TimelineWeek',\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineWeek' },\n { option: 'TimelineWorkWeek' },\n { option: 'TimelineMonth' },\n { option: 'Agenda' }\n ],\n eventSettings: { dataSource: new ej.base.extend([], window.scheduleData.concat(window.timelineData), null, true) }\n });\n scheduleObj.appendTo('#Schedule');\n\n var selectedDate = new ej.calendars.DatePicker({\n value: new Date(2018, 1, 15),\n showClearButton: false,\n change: function (args) {\n scheduleObj.selectedDate = args.value;\n scheduleObj.dataBind();\n }\n });\n selectedDate.appendTo('#scheduledate');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current Date\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n selectedDate: new Date(2019, 0, 10),\n currentView: 'TimelineWeek',\n views: [\n { option: 'TimelineDay' },\n { option: 'TimelineWeek' },\n { option: 'TimelineWorkWeek' },\n { option: 'TimelineMonth' },\n { option: 'Agenda' }\n ],\n eventSettings: { dataSource: new ej.base.extend([], window.scheduleData.concat(window.timelineData), null, true) }\n });\n scheduleObj.appendTo('#Schedule');\n\n var selectedDate = new ej.calendars.DatePicker({\n value: new Date(2019, 0, 10),\n showClearButton: false,\n change: function (args) {\n scheduleObj.selectedDate = args.value;\n scheduleObj.dataBind();\n }\n });\n selectedDate.appendTo('#scheduledate');\n"} \ No newline at end of file diff --git a/src/schedule/timeline.js b/src/schedule/timeline.js index dfafa8f1..52a714cb 100644 --- a/src/schedule/timeline.js +++ b/src/schedule/timeline.js @@ -1,7 +1,7 @@ this.default = function () { var scheduleObj = new ej.schedule.Schedule({ height: '650px', - selectedDate: new Date(2018, 1, 15), + selectedDate: new Date(2019, 0, 10), currentView: 'TimelineWeek', views: [ { option: 'TimelineDay' }, @@ -15,7 +15,7 @@ this.default = function () { scheduleObj.appendTo('#Schedule'); var selectedDate = new ej.calendars.DatePicker({ - value: new Date(2018, 1, 15), + value: new Date(2019, 0, 10), showClearButton: false, change: function (args) { scheduleObj.selectedDate = args.value; diff --git a/src/schedule/timezone-stack.json b/src/schedule/timezone-stack.json index f4736380..85911b65 100644 --- a/src/schedule/timezone-stack.json +++ b/src/schedule/timezone-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    Source:\n www.fifa.com\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Timezone\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n if (/MSIE \\d|Trident.*rv:/.test(navigator.userAgent)) {\n ej.schedule.Timezone.prototype.offset = function (date, timezone) {\n return moment.tz.zone(timezone).utcOffset(date.getTime());\n };\n }\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var timezone = new ej.schedule.Timezone();\n // Here remove the local offset from events\n for (var i = 0; i < data.length; i++) {\n data[i].StartTime = timezone.removeLocalOffset(data[i].StartTime);\n data[i].EndTime = timezone.removeLocalOffset(data[i].EndTime);\n }\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n timezone: 'UTC',\n workHours: { start: '11:00' },\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for timezone list\n var dropDownListObject = new ej.dropdowns.DropDownList({\n popupWidth: 250,\n change: function (args) {\n scheduleObj.timezone = args.value;\n scheduleObj.dataBind();\n }\n });\n dropDownListObject.appendTo('#scheduletimezone');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    Source:\n www.fifa.com\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Timezone\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n if (/MSIE \\d|Trident.*rv:/.test(navigator.userAgent)) {\n ej.schedule.Timezone.prototype.offset = function (date, timezone) {\n return moment.tz.zone(timezone).utcOffset(date.getTime());\n };\n }\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var timezone = new ej.schedule.Timezone();\n // Here remove the local offset from events\n for (var i = 0; i < data.length; i++) {\n data[i].StartTime = timezone.removeLocalOffset(data[i].StartTime);\n data[i].EndTime = timezone.removeLocalOffset(data[i].EndTime);\n }\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n timezone: 'UTC',\n workHours: { start: '11:00' },\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for timezone list\n var dropDownListObject = new ej.dropdowns.DropDownList({\n popupWidth: 250,\n change: function (args) {\n scheduleObj.timezone = args.value;\n scheduleObj.dataBind();\n }\n });\n dropDownListObject.appendTo('#scheduletimezone');\n"} \ No newline at end of file diff --git a/src/schedule/tooltip-stack.json b/src/schedule/tooltip-stack.json index 797cf192..7956b094 100644 --- a/src/schedule/tooltip-stack.json +++ b/src/schedule/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.eventsData, null, true);\n var template = '
                                    ' +\n '
                                    ' +\n '
                                    ${Subject}
                                    ' +\n '${if(City !== null && City !== undefined)}
                                    ${City}
                                    ${/if}' +\n '
                                    From : ${StartTime.toLocaleString()}
                                    ' +\n '
                                    To      : ${EndTime.toLocaleString()}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data,\n enableTooltip: true,\n tooltipTemplate: template\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var enableTooltipCheckObj = new ej.buttons.CheckBox({\n label: 'Enable Tooltip', checked: true,\n change: function (args) {\n if (args.checked) {\n scheduleObj.eventSettings.enableTooltip = true;\n } else {\n scheduleObj.eventSettings.enableTooltip = false;\n }\n scheduleObj.dataBind();\n }\n });\n enableTooltipCheckObj.appendTo('#enableTooltip');\n\n var enableTooltipTemplateCheckObj = new ej.buttons.CheckBox({\n label: 'Enable Tooltip Template', checked: true,\n change: function (args) {\n if (args.checked) {\n scheduleObj.eventSettings.tooltipTemplate = template;\n } else {\n scheduleObj.eventSettings.tooltipTemplate = null;\n }\n scheduleObj.dataBind();\n }\n });\n enableTooltipTemplateCheckObj.appendTo('#enableTooltipTemplate');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.eventsData, null, true);\n var template = '
                                    ' +\n '
                                    ' +\n '
                                    ${Subject}
                                    ' +\n '${if(City !== null && City !== undefined)}
                                    ${City}
                                    ${/if}' +\n '
                                    From : ${StartTime.toLocaleString()}
                                    ' +\n '
                                    To      : ${EndTime.toLocaleString()}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: {\n dataSource: data,\n enableTooltip: true,\n tooltipTemplate: template\n },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var enableTooltipCheckObj = new ej.buttons.CheckBox({\n label: 'Enable Tooltip', checked: true,\n change: function (args) {\n if (args.checked) {\n scheduleObj.eventSettings.enableTooltip = true;\n } else {\n scheduleObj.eventSettings.enableTooltip = false;\n }\n scheduleObj.dataBind();\n }\n });\n enableTooltipCheckObj.appendTo('#enableTooltip');\n\n var enableTooltipTemplateCheckObj = new ej.buttons.CheckBox({\n label: 'Enable Tooltip Template', checked: true,\n change: function (args) {\n if (args.checked) {\n scheduleObj.eventSettings.tooltipTemplate = template;\n } else {\n scheduleObj.eventSettings.tooltipTemplate = null;\n }\n scheduleObj.dataBind();\n }\n });\n enableTooltipTemplateCheckObj.appendTo('#enableTooltipTemplate');\n"} \ No newline at end of file diff --git a/src/schedule/views-configuration-stack.json b/src/schedule/views-configuration-stack.json index 0dc8f0c5..982ecfc0 100644 --- a/src/schedule/views-configuration-stack.json +++ b/src/schedule/views-configuration-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var instance = new ej.base.Internationalization();\n window.getTimeString = function (value) {\n return instance.formatDate(value, { skeleton: 'Hm' });\n };\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var agendaTemplate = '
                                    ${Subject}
                                    ${if(Description !== null && Description !== undefined)}' +\n '
                                    ${ Description }
                                    ${/if}
                                    ${getTimeString(data.StartTime)} ${if(City !== null &&' +\n 'City !== undefined)}, ${ City } ${/if}
                                    ';\n var monthEventTemplate = '
                                    ${Subject}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'Month',\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data },\n resources: [{\n field: 'GroupId', title: 'Owner', name: 'Owners',\n dataSource: [\n { GroupText: 'Group A', GroupId: 1, GroupColor: '#1aaa55' },\n { GroupText: 'Group B', GroupId: 2, GroupColor: '#357cd2' }\n ],\n textField: 'GroupText', idField: 'GroupId', colorField: 'GroupColor'\n }],\n views: [\n { option: 'Day', startHour: '07:00', endHour: '18:00' },\n { option: 'Week', startHour: '09:00', endHour: '19:00', showWeekend: false, timeScale: { interval: 60, slotCount: 4 } },\n { option: 'Month', group: { resources: ['Owners'] }, eventTemplate: monthEventTemplate },\n { option: 'Agenda', eventTemplate: agendaTemplate }\n ],\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var instance = new ej.base.Internationalization();\n window.getTimeString = function (value) {\n return instance.formatDate(value, { skeleton: 'Hm' });\n };\n var data = new ej.base.extend([], window.fifaEventsData, null, true);\n var agendaTemplate = '
                                    ${Subject}
                                    ${if(Description !== null && Description !== undefined)}' +\n '
                                    ${ Description }
                                    ${/if}
                                    ${getTimeString(data.StartTime)} ${if(City !== null &&' +\n 'City !== undefined)}, ${ City } ${/if}
                                    ';\n var monthEventTemplate = '
                                    ${Subject}
                                    ';\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n currentView: 'Month',\n selectedDate: new Date(2018, 5, 20),\n eventSettings: { dataSource: data },\n resources: [{\n field: 'GroupId', title: 'Owner', name: 'Owners',\n dataSource: [\n { GroupText: 'Group A', GroupId: 1, GroupColor: '#1aaa55' },\n { GroupText: 'Group B', GroupId: 2, GroupColor: '#357cd2' }\n ],\n textField: 'GroupText', idField: 'GroupId', colorField: 'GroupColor'\n }],\n views: [\n { option: 'Day', startHour: '07:00', endHour: '18:00' },\n { option: 'Week', startHour: '09:00', endHour: '19:00', showWeekend: false, timeScale: { interval: 60, slotCount: 4 } },\n { option: 'Month', group: { resources: ['Owners'] }, eventTemplate: monthEventTemplate },\n { option: 'Agenda', eventTemplate: agendaTemplate }\n ],\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n },\n });\n scheduleObj.appendTo('#Schedule');\n"} \ No newline at end of file diff --git a/src/schedule/views-stack.json b/src/schedule/views-stack.json index 9c66f1bd..cf48b4f4 100644 --- a/src/schedule/views-stack.json +++ b/src/schedule/views-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current View\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for views\n var dropDownListObject = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.currentView = args.value;\n scheduleObj.dataBind();\n }\n });\n dropDownListObject.appendTo('#scheduleview');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n
                                    \n
                                    Current View\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for views\n var dropDownListObject = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.currentView = args.value;\n scheduleObj.dataBind();\n }\n });\n dropDownListObject.appendTo('#scheduleview');\n"} \ No newline at end of file diff --git a/src/schedule/virtual-scrolling-stack.json b/src/schedule/virtual-scrolling-stack.json index ecdadc5d..b8465e2f 100644 --- a/src/schedule/virtual-scrolling-stack.json +++ b/src/schedule/virtual-scrolling-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var ownerData = generateResourceData(1, 300, 'Resource');\n var eventData = generateStaticEvents(new Date(2018, 4, 1), 300, 12);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n width: '100%',\n currentView: 'TimelineMonth',\n views: [{\n option: 'TimelineMonth',\n eventTemplate: '#timeline-event-template',\n allowVirtualScrolling: true\n }],\n group: {\n byGroupID: false,\n resources: ['Resources']\n },\n resources: [{\n field: 'ResourceId',\n title: 'Resource',\n name: 'Resources',\n allowMultiple: true,\n dataSource: ownerData,\n textField: 'Text',\n idField: 'Id',\n colorField: 'Color'\n }],\n selectedDate: new Date(2018, 4, 1),\n eventSettings: {\n dataSource: eventData\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n function generateStaticEvents(start, resCount, overlapCount) {\n var data = [];\n var id = 1;\n for (var i = 0; i < resCount; i++) {\n var randomCollection = [];\n var random = 0;\n for (var j = 0; j < overlapCount; j++) {\n random = Math.floor(Math.random() * (30));\n random = (random === 0) ? 1 : random;\n if (randomCollection.indexOf(random) !== -1 || randomCollection.indexOf(random + 2) !== -1 ||\n randomCollection.indexOf(random - 2) !== -1) {\n random += (Math.max.apply(null, randomCollection) + 10);\n }\n for (var k = 1; k <= 2; k++) {\n randomCollection.push(random + k);\n }\n var startDate = new Date(start.getFullYear(), start.getMonth(), random);\n startDate = new Date(startDate.getTime() + (((random % 10) * 10) * (1000 * 60)));\n var endDate = new Date(startDate.getTime() + ((1440 + 30) * (1000 * 60)));\n data.push({\n Id: id,\n Subject: 'Event #' + id,\n StartTime: startDate,\n EndTime: endDate,\n IsAllDay: (id % 10) ? false : true,\n ResourceId: i + 1\n });\n id++;\n }\n }\n return data;\n }\n\n function generateResourceData(startId, endId, text) {\n var data = [];\n var colors = [\n '#ff8787', '#9775fa', '#748ffc', '#3bc9db', '#69db7c',\n '#fdd835', '#748ffc', '#9775fa', '#df5286', '#7fa900',\n '#fec200', '#5978ee', '#00bdae', '#ea80fc'\n ];\n for (var a = startId; a <= endId; a++) {\n var n = Math.floor(Math.random() * colors.length);\n data.push({\n Id: a,\n Text: text + ' ' + a,\n Color: colors[n]\n });\n }\n return data;\n }\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n\n\n\n\n
                                    ","index.js":"{{ripple}}\n var ownerData = generateResourceData(1, 300, 'Resource');\n var eventData = generateStaticEvents(new Date(2018, 4, 1), 300, 12);\n var scheduleObj = new ej.schedule.Schedule({\n height: '650px',\n width: '100%',\n currentView: 'TimelineMonth',\n views: [{\n option: 'TimelineMonth',\n eventTemplate: '#timeline-event-template',\n allowVirtualScrolling: true\n }],\n group: {\n byGroupID: false,\n resources: ['Resources']\n },\n resources: [{\n field: 'ResourceId',\n title: 'Resource',\n name: 'Resources',\n allowMultiple: true,\n dataSource: ownerData,\n textField: 'Text',\n idField: 'Id',\n colorField: 'Color'\n }],\n selectedDate: new Date(2018, 4, 1),\n eventSettings: {\n dataSource: eventData\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n\n\n"} \ No newline at end of file diff --git a/src/schedule/virtual-scrolling.js b/src/schedule/virtual-scrolling.js index 58c12940..5bd3e56b 100644 --- a/src/schedule/virtual-scrolling.js +++ b/src/schedule/virtual-scrolling.js @@ -31,6 +31,7 @@ this.default = function () { }); scheduleObj.appendTo('#Schedule'); + //custom code start function generateStaticEvents(start, resCount, overlapCount) { var data = []; var id = 1; @@ -81,4 +82,5 @@ this.default = function () { } return data; } + //custom code end }; diff --git a/src/schedule/work-days-stack.json b/src/schedule/work-days-stack.json index e757bdd2..3053e284 100644 --- a/src/schedule/work-days-stack.json +++ b/src/schedule/work-days-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Work days\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    First day of week\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n workDays: [1, 3, 5],\n currentView:'WorkWeek',\n workHours: {\n start: '08:00'\n },\n views: ['Week', 'WorkWeek', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 14),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for work days\n var workDaysDropDown = new ej.dropdowns.DropDownList({\n popupWidth: 180,\n change: function (args) {\n scheduleObj.workDays = args.value.toString().split(',').map(Number);\n scheduleObj.dataBind();\n }\n });\n workDaysDropDown.appendTo('#scheduleworkdays');\n\n var dayOfWeekDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.firstDayOfWeek = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n dayOfWeekDropDown.appendTo('#scheduledayofweek');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n\n
                                    \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Work days\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    First day of week\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n // Initialize schedule component\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n workDays: [1, 3, 5],\n currentView:'WorkWeek',\n workHours: {\n start: '08:00'\n },\n views: ['Week', 'WorkWeek', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 14),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n // Initialize DropDownList component for work days\n var workDaysDropDown = new ej.dropdowns.DropDownList({\n popupWidth: 180,\n change: function (args) {\n scheduleObj.workDays = args.value.toString().split(',').map(Number);\n scheduleObj.dataBind();\n }\n });\n workDaysDropDown.appendTo('#scheduleworkdays');\n\n var dayOfWeekDropDown = new ej.dropdowns.DropDownList({\n change: function (args) {\n scheduleObj.firstDayOfWeek = parseInt(args.value, 10);\n scheduleObj.dataBind();\n }\n });\n dayOfWeekDropDown.appendTo('#scheduledayofweek');\n"} \ No newline at end of file diff --git a/src/schedule/work-hour-stack.json b/src/schedule/work-hour-stack.json index 0805cef1..d9120b2d 100644 --- a/src/schedule/work-hour-stack.json +++ b/src/schedule/work-hour-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Work Start\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Work End\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n workHours: {\n highlight: true,\n start: '08:00',\n end: '20:00'\n },\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var end = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 20),\n format: 'HH:mm'\n });\n end.appendTo('#endTime');\n\n var start = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 8),\n format: 'HH:mm'\n });\n start.appendTo('#startTime');\n\n var button = new ej.buttons.Button();\n button.appendTo('#submit');\n document.getElementById('submit').onclick = function (args) {\n var start = document.getElementById('startTime');\n var end = document.getElementById('endTime');\n scheduleObj.workHours.start = start.value;\n scheduleObj.workHours.end = end.value;\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                    \n
                                    \n
                                    \n
                                    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                    \n
                                    Work Start\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    Work End\n
                                    \n                                     		\n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n\n\n\n
                                    ","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.employeeEventData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n workHours: {\n highlight: true,\n start: '08:00',\n end: '20:00'\n },\n views: ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineWeek', 'TimelineMonth'],\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n\n var end = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 20),\n format: 'HH:mm'\n });\n end.appendTo('#endTime');\n\n var start = new ej.calendars.TimePicker({\n width: 90,\n value: new Date(2000, 0, 1, 8),\n format: 'HH:mm'\n });\n start.appendTo('#startTime');\n\n var button = new ej.buttons.Button();\n button.appendTo('#submit');\n document.getElementById('submit').onclick = function (args) {\n var start = document.getElementById('startTime');\n var end = document.getElementById('endTime');\n scheduleObj.workHours.start = start.value;\n scheduleObj.workHours.end = end.value;\n };\n"} \ No newline at end of file diff --git a/src/sidebar/api-stack.json b/src/sidebar/api-stack.json index eb162e79..4605944f 100644 --- a/src/sidebar/api-stack.json +++ b/src/sidebar/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n
                                    \n
                                    \n \n \n \n \n
                                    \n
                                    \n

                                    Overview

                                    \n
                                    \n

                                    The Sidebar component is a collapsible side content placed along with the main content either in left\n or right side of the page.\n

                                    \n

                                    \n
                                    \n

                                    \n

                                    Options

                                    \n
                                    \n
                                    \n \n

                                    \n Toggle - Toggles the sidebar to be open or closed state.\n

                                    \n \n

                                    \n \n

                                    \n Position - Allows to place the sidebar in right or left side of the page.\n

                                    \n \n

                                    \n \n\n

                                    \n Types - Specifies the act of expanding or collapsing the sidebar with main content.

                                    \n
                                    \n \n
                                    \n

                                    \n \n

                                    \n Closing on document click - Allows to collapse / close the sidebar on document click.

                                    \n \n

                                    \n \n

                                    \n Backdrop - Sets the backdrop over the main content area on open / expanded state.

                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n Essential JS 2 for JavScript(ES5) - Sidebar > API\n \n
                                    \n\n \n \n
                                    \n
                                    ","index.js":"{{ripple}}\n //Sidebar initialization\n var sidebar = new ej.navigations.Sidebar();\n sidebar.appendTo('#default-sidebar');\n\n // Toggle button for Sidebar open/close.\n var togglesidebar = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n togglesidebar.appendTo('#togglesidebar');\n\n togglesidebar.element.onclick = function () {\n sidebar.toggle();\n };\n\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/api/index.html');\n\n // Toggle button for closeOnDocumentClick property\n var positionButton = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n positionButton.appendTo('#positionbutton');\n\n // Toggle button for closeOnDocumentClick property\n var documentclick = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n documentclick.appendTo('#documentclick');\n\n // Toggle button for backdrop property\n var backdrop = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n backdrop.appendTo('#backdrop');\n\n //Toggle button click event handler\n positionButton.element.onclick = function () {\n if (positionButton.element.classList.contains('e-active')) {\n positionButton.content = 'Left';\n sidebar.position = \"Right\";\n document.getElementById(\"hamburger\").className += \" e-rtl\";\n } else {\n positionButton.content = 'Right';\n sidebar.position = \"Left\";\n document.getElementById(\"hamburger\").classList.remove(\"e-rtl\");\n }\n };\n\n documentclick.element.onclick = function () {\n if (documentclick.element.classList.contains('e-active')) {\n documentclick.content = 'False';\n //enable the closeOnDocumentClick property\n sidebar.closeOnDocumentClick = true;\n } else {\n documentclick.content = 'True';\n //disable the closeOnDocumentClick property\n sidebar.closeOnDocumentClick = false;\n }\n };\n\n backdrop.element.onclick = function () {\n if (backdrop.element.classList.contains('e-active')) {\n backdrop.content = 'False';\n //enable the backdrop property\n sidebar.showBackdrop = true;\n } else {\n backdrop.content = 'True';\n //disable the backdrop property\n sidebar.showBackdrop = false;\n }\n };\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n index: 3,\n placeholder: 'Select a type',\n popupHeight: '200px',\n cssClass: 'right',\n // bind the change event\n change: onChange\n });\n dropDownInstance.appendTo('#types');\n\n function onChange() {\n //dropdown change event handler\n sidebar.type = dropDownInstance.value;\n }\n // Close the Sidebar\n document.getElementById('close').onclick = function () {\n sidebar.hide();\n };\n //open the sidebar\n document.getElementById('hamburger').onclick = function () {\n sidebar.show();\n };\n\n\n\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n
                                    \n
                                    \n \n \n \n \n
                                    \n
                                    \n

                                    Overview

                                    \n
                                    \n

                                    The Sidebar component is a collapsible side content placed along with the main content either in left\n or right side of the page.\n

                                    \n

                                    \n
                                    \n

                                    \n

                                    Options

                                    \n
                                    \n
                                    \n \n

                                    \n Toggle - Toggles the sidebar to be open or closed state.\n

                                    \n \n

                                    \n \n

                                    \n Position - Allows to place the sidebar in right or left side of the page.\n

                                    \n \n

                                    \n \n\n

                                    \n Types - Specifies the act of expanding or collapsing the sidebar with main content.

                                    \n
                                    \n \n
                                    \n

                                    \n \n

                                    \n Closing on document click - Allows to collapse / close the sidebar on document click.

                                    \n \n

                                    \n \n

                                    \n Backdrop - Sets the backdrop over the main content area on open / expanded state.

                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n Essential JS 2 for JavScript(ES5) - Sidebar > API\n \n
                                    \n\n \n \n
                                    \n
                                    ","index.js":"{{ripple}}\n //Sidebar initialization\n var sidebar = new ej.navigations.Sidebar();\n sidebar.appendTo('#default-sidebar');\n\n // Toggle button for Sidebar open/close.\n var togglesidebar = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n togglesidebar.appendTo('#togglesidebar');\n\n togglesidebar.element.onclick = function () {\n sidebar.toggle();\n };\n\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/api/index.html');\n\n // Toggle button for closeOnDocumentClick property\n var positionButton = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n positionButton.appendTo('#positionbutton');\n\n // Toggle button for closeOnDocumentClick property\n var documentclick = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n documentclick.appendTo('#documentclick');\n\n // Toggle button for backdrop property\n var backdrop = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });\n backdrop.appendTo('#backdrop');\n\n //Toggle button click event handler\n positionButton.element.onclick = function () {\n if (positionButton.element.classList.contains('e-active')) {\n positionButton.content = 'Left';\n sidebar.position = \"Right\";\n document.getElementById(\"hamburger\").className += \" e-rtl\";\n } else {\n positionButton.content = 'Right';\n sidebar.position = \"Left\";\n document.getElementById(\"hamburger\").classList.remove(\"e-rtl\");\n }\n };\n\n documentclick.element.onclick = function () {\n if (documentclick.element.classList.contains('e-active')) {\n documentclick.content = 'False';\n //enable the closeOnDocumentClick property\n sidebar.closeOnDocumentClick = true;\n } else {\n documentclick.content = 'True';\n //disable the closeOnDocumentClick property\n sidebar.closeOnDocumentClick = false;\n }\n };\n\n backdrop.element.onclick = function () {\n if (backdrop.element.classList.contains('e-active')) {\n backdrop.content = 'False';\n //enable the backdrop property\n sidebar.showBackdrop = true;\n } else {\n backdrop.content = 'True';\n //disable the backdrop property\n sidebar.showBackdrop = false;\n }\n };\n\n var dropDownInstance = new ej.dropdowns.DropDownList({\n index: 3,\n placeholder: 'Select a type',\n popupHeight: '200px',\n cssClass: 'right',\n // bind the change event\n change: onChange\n });\n dropDownInstance.appendTo('#types');\n\n function onChange() {\n //dropdown change event handler\n sidebar.type = dropDownInstance.value;\n }\n // Close the Sidebar\n document.getElementById('close').onclick = function () {\n sidebar.hide();\n };\n //open the sidebar\n document.getElementById('hamburger').onclick = function () {\n sidebar.show();\n };\n\n\n\n\n"} \ No newline at end of file diff --git a/src/sidebar/api.html b/src/sidebar/api.html index b469910b..2616394c 100644 --- a/src/sidebar/api.html +++ b/src/sidebar/api.html @@ -91,6 +91,7 @@

                                    Options

                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n Essential JS 2 for JavaScript(ES5) - Sidebar > Default functionalities\n
                                    \n \n \n \n \n \n
                                    \n
                                    Main content
                                    \n
                                    Click the button to open/close the sidebar.\n
                                    \n \n
                                    \n

                                    Click the radio button to switch the sidebar position

                                    \n
                                    \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n\n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n //sidebar initialization\n var defaultSidebar = new ej.navigations.Sidebar();\n defaultSidebar.appendTo('#default-sidebar');\n\n //open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/default/index.html');\n\n //initialize the radio button\n var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange });\n leftbutton.appendTo('#left');\n\n var rightbutton = new ej.buttons.RadioButton({ label: 'Right', name: 'state', change: positionChange });\n rightbutton.appendTo('#right');\n //change the sidebar position\n\n function positionChange(args) {\n //radio button change event handler\n defaultSidebar.position = (args.event.target.id === \"left\") ? \"Left\" : \"Right\";\n if (args.event.target.id == \"right\") {\n document.getElementById(\"hamburger\").className += \" e-rtl\";\n }\n if (args.event.target.id == \"left\") {\n document.getElementById(\"hamburger\").classList.remove(\"e-rtl\");\n }\n\n }\n document.getElementById('toggle').onclick = function () {\n defaultSidebar.toggle();\n };\n document.getElementById('close').onclick = function () {\n defaultSidebar.hide();\n };\n document.getElementById('hamburger').onclick = function () {\n defaultSidebar.show();\n };\n\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n Essential JS 2 for JavaScript(ES5) - Sidebar > Default functionalities\n
                                    \n \n \n \n \n \n
                                    \n
                                    Main content
                                    \n
                                    Click the button to open/close the sidebar.\n
                                    \n \n
                                    \n

                                    Click the radio button to switch the sidebar position

                                    \n
                                    \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n\n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n //sidebar initialization\n var defaultSidebar = new ej.navigations.Sidebar();\n defaultSidebar.appendTo('#default-sidebar');\n\n //open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/default/index.html');\n\n //initialize the radio button\n var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange });\n leftbutton.appendTo('#left');\n\n var rightbutton = new ej.buttons.RadioButton({ label: 'Right', name: 'state', change: positionChange });\n rightbutton.appendTo('#right');\n //change the sidebar position\n\n function positionChange(args) {\n //radio button change event handler\n defaultSidebar.position = (args.event.target.id === \"left\") ? \"Left\" : \"Right\";\n if (args.event.target.id == \"right\") {\n document.getElementById(\"hamburger\").className += \" e-rtl\";\n }\n if (args.event.target.id == \"left\") {\n document.getElementById(\"hamburger\").classList.remove(\"e-rtl\");\n }\n\n }\n document.getElementById('toggle').onclick = function () {\n defaultSidebar.toggle();\n };\n document.getElementById('close').onclick = function () {\n defaultSidebar.hide();\n };\n document.getElementById('hamburger').onclick = function () {\n defaultSidebar.show();\n };\n\n\n"} \ No newline at end of file diff --git a/src/sidebar/default.html b/src/sidebar/default.html index 11a27d56..91f0a066 100644 --- a/src/sidebar/default.html +++ b/src/sidebar/default.html @@ -57,7 +57,7 @@
                                    \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new Tab\n
                                    \n
                                    \n
                                    \n Essential JS 2 For JavaScript(ES5 )- Sidebar > Dock\n \n \n \n
                                    \n
                                    Main content
                                    \n
                                    \n

                                    Click the radio button to switch the sidebar position

                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var dockBar = new ej.navigations.Sidebar({\n width: '220px',\n dockSize: '72px',\n enableDock: true\n });\n dockBar.appendTo('#dockSidebar');\n\n //radiobutton initialization\n var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange });\n leftbutton.appendTo('#left');\n\n var rightbutton = new ej.buttons.RadioButton({ label: 'Right', name: 'state', change: positionChange });\n rightbutton.appendTo('#right');\n\n //open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/docking-sidebar/index.html');\n\n function positionChange(args) {\n //radio button change event handler\n dockBar.position = (args.event.target.id === 'left') ? 'Left' : 'Right';\n }\n //switch the expand and collapse state\n document.getElementById('toggle').onclick = function () {\n dockBar.toggle();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                    \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new Tab\n
                                    \n
                                    \n
                                    \n Essential JS 2 For JavaScript(ES5 )- Sidebar > Dock\n \n \n \n
                                    \n
                                    Main content
                                    \n
                                    \n

                                    Click the radio button to switch the sidebar position

                                    \n
                                    \n
                                    \n \n
                                    \n
                                    \n \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n
                                    \n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n var dockBar = new ej.navigations.Sidebar({\n width: '220px',\n dockSize: '72px',\n enableDock: true\n });\n dockBar.appendTo('#dockSidebar');\n\n //radiobutton initialization\n var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange });\n leftbutton.appendTo('#left');\n\n var rightbutton = new ej.buttons.RadioButton({ label: 'Right', name: 'state', change: positionChange });\n rightbutton.appendTo('#right');\n\n //open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/docking-sidebar/index.html');\n\n function positionChange(args) {\n //radio button change event handler\n dockBar.position = (args.event.target.id === 'left') ? 'Left' : 'Right';\n }\n //switch the expand and collapse state\n document.getElementById('toggle').onclick = function () {\n dockBar.toggle();\n };\n"} \ No newline at end of file diff --git a/src/sidebar/docking-sidebar.html b/src/sidebar/docking-sidebar.html index 3c172283..2622639d 100644 --- a/src/sidebar/docking-sidebar.html +++ b/src/sidebar/docking-sidebar.html @@ -63,7 +63,7 @@
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n \n
                                    \n
                                      \n
                                    • \n
                                    • Navigation Pane
                                      • \n
                                    • Support
                                      • \n
                                    \n
                                    \n \n \n \n \n \n
                                    \n
                                    \n

                                    Responsive Sidebar With Treeview

                                    \n

                                    This is a graphical aid for visualising and categorising the site, in the style of an expandable and collapsable treeview component. It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s) and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers), falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of the treeview persists across page views in most situations

                                    \n

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim\n id est laborum.

                                    \n
                                    \n

                                    Lorem Ipsum Dolor

                                    \n

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

                                    \n
                                    \n

                                    Lorem Ipsum Dolor

                                    \n

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                                    \n\t\t\t\t
                                    \n

                                    Lorem Ipsum Dolor

                                    \n

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                                    \n
                                    \n
                                    \n \n
                                    \n \n \n
                                    \n
                                    ","index.js":"{{ripple}}\n\n // Sidebar Initialization\n var sidebarMenu = new ej.navigations.Sidebar({\n width: '290px',\n target: '.main-content',\n mediaQuery: '(min-width: 600px)',\n });\n sidebarMenu.appendTo('#sidebar-treeview');\n //end of Sidebar initialization\n \n // Toggle the Sidebar\n document.getElementById('hamburger').addEventListener('click', function () {\n sidebarMenu.toggle();\n });\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/responsive-panel/index.html');\n var data = [\n {\n nodeId: '01', nodeText: 'Installation', iconCss: 'icon-microchip icon',\n },\n {\n nodeId: '02', nodeText: 'Deployment', iconCss: 'icon-thumbs-up-alt icon',\n },\n {\n nodeId: '03', nodeText: 'Quick Start', iconCss: 'icon-docs icon',\n },\n {\n nodeId: '04', nodeText: 'Components', iconCss: 'icon-th icon',\n nodeChild: [\n { nodeId: '04-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' },\n { nodeId: '04-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '04-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '04-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '04-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '04-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon' }\n ]\n },\n {\n nodeId: '05', nodeText: 'API Reference', iconCss: 'icon-code icon',\n nodeChild: [\n { nodeId: '05-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' },\n { nodeId: '05-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '05-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '05-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '05-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon' },\n { nodeId: '05-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon' }\n ]\n },\n {\n nodeId: '06', nodeText: 'Browser Compatibility', iconCss: 'icon-chrome icon'\n },\n {\n nodeId: '07', nodeText: 'Upgrade Packages', iconCss: 'icon-up-hand icon'\n },\n {\n nodeId: '08', nodeText: 'Release Notes', iconCss: 'icon-bookmark-empty icon'\n },\n {\n nodeId: '09', nodeText: 'FAQ', iconCss: 'icon-help-circled icon'\n },\n {\n nodeId: '10', nodeText: 'License', iconCss: 'icon-doc-text icon'\n }\n ];\n\n // TreeView initialization\n var mainTreeView= new ej.navigations.TreeView({\n fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' }, expandOn: 'Click'\n });\n\n mainTreeView.appendTo('#main-treeview');\n\n"} \ No newline at end of file diff --git a/src/sidebar/responsive-panel.html b/src/sidebar/responsive-panel.html new file mode 100644 index 00000000..cdc40f53 --- /dev/null +++ b/src/sidebar/responsive-panel.html @@ -0,0 +1,313 @@ +
                                    + +
                                    + Click/Touch the button to view the sample +
                                    +
                                    + Open in new tab +
                                    + +
                                    + +
                                    +
                                      +
                                    • +
                                    • Navigation Pane
                                      • +
                                    • Support
                                      • +
                                    +
                                    + + + + + +
                                    +
                                    +

                                    Responsive Sidebar With Treeview

                                    +

                                    This is a graphical aid for visualising and categorising the site, in the style of an expandable and collapsable treeview component. It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s) and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers), falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of the treeview persists across page views in most situations

                                    +

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim + id est laborum.

                                    +
                                    +

                                    Lorem Ipsum Dolor

                                    +

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

                                    +
                                    +

                                    Lorem Ipsum Dolor

                                    +

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                                    +
                                    +

                                    Lorem Ipsum Dolor

                                    +

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                                    +
                                    +
                                    + +
                                    +
                                    +

                                    + Click/Touch the button to view the Sidebar sample in new tab. +

                                    +
                                    +
                                    +

                                    + This sample demonstrates how to use the TreeView component inside the Sidebar for navigation purposes. The Sidebar expands when the hamburger icon at the top-left corner of the header section is clicked, and TreeView expands and collapses when the TreeView expand/collapse icon is clicked. +

                                    +
                                    +
                                    + \ No newline at end of file diff --git a/src/sidebar/responsive-panel.js b/src/sidebar/responsive-panel.js new file mode 100644 index 00000000..b51fb93b --- /dev/null +++ b/src/sidebar/responsive-panel.js @@ -0,0 +1,73 @@ +this.default = function () { + + // Sidebar Initialization + var sidebarMenu = new ej.navigations.Sidebar({ + width: '290px', + target: '.main-content', + mediaQuery: '(min-width: 600px)', + }); + sidebarMenu.appendTo('#sidebar-treeview'); + //end of Sidebar initialization + + // Toggle the Sidebar + document.getElementById('hamburger').addEventListener('click', function () { + sidebarMenu.toggle(); + }); + // open new tab + document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/responsive-panel/index.html'); + var data = [ + { + nodeId: '01', nodeText: 'Installation', iconCss: 'icon-microchip icon', + }, + { + nodeId: '02', nodeText: 'Deployment', iconCss: 'icon-thumbs-up-alt icon', + }, + { + nodeId: '03', nodeText: 'Quick Start', iconCss: 'icon-docs icon', + }, + { + nodeId: '04', nodeText: 'Components', iconCss: 'icon-th icon', + nodeChild: [ + { nodeId: '04-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' }, + { nodeId: '04-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '04-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '04-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '04-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '04-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon' } + ] + }, + { + nodeId: '05', nodeText: 'API Reference', iconCss: 'icon-code icon', + nodeChild: [ + { nodeId: '05-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon' }, + { nodeId: '05-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '05-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '05-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '05-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon' }, + { nodeId: '05-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon' } + ] + }, + { + nodeId: '06', nodeText: 'Browser Compatibility', iconCss: 'icon-chrome icon' + }, + { + nodeId: '07', nodeText: 'Upgrade Packages', iconCss: 'icon-up-hand icon' + }, + { + nodeId: '08', nodeText: 'Release Notes', iconCss: 'icon-bookmark-empty icon' + }, + { + nodeId: '09', nodeText: 'FAQ', iconCss: 'icon-help-circled icon' + }, + { + nodeId: '10', nodeText: 'License', iconCss: 'icon-doc-text icon' + } + ]; + + // TreeView initialization + var mainTreeView= new ej.navigations.TreeView({ + fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' }, expandOn: 'Click' + }); + + mainTreeView.appendTo('#main-treeview'); +}; diff --git a/src/sidebar/sample.json b/src/sidebar/sample.json index 667c3324..56ccf2f5 100644 --- a/src/sidebar/sample.json +++ b/src/sidebar/sample.json @@ -2,10 +2,93 @@ "name": "Sidebar", "directory": "sidebar", "category": "Navigation", + "ftName": "sidebar", + "type": "update", "samples": [ - { "url": "default", "name": "Default Functionalities", "category": "Sidebar", "api": { "Sidebar": ["type", "position", "showBackdrop", "closeOnDocumentClick", "change", "mediaQuery"] }, "description": "This example demonstrates a simple, mobile-friendly and responsive JavaScript Sidebar (Navigation drawer, Side navigation menu) to navigate between various parts of an application with ease" }, - { "url": "docking-sidebar", "name": "Dock", "category": "Sidebar", "api": { "Sidebar": ["enableDock", "dockSize", "contextTo"]}, "description": "This example demonstrates how the JavaScript Sidebar is docked to the main content when it is in closed state" }, - { "url": "api", "name": "API", "category": "Sidebar", "api": { "Sidebar": ["showBackdrop", "position", "types", "closeOnDocumentClick"] }, "description": "This example demonstrates how to change the behavior and appearance of the JavaScript sidebar based on application through user friendly API’s like types, position, auto close and backdrop"}, - { "url": "sidebar-list", "name": "Sidebar With ListView", "category": "Sidebar", "api": { "Sidebar": ["open", "close"] }, "description": "This example demonstrates how the JavaScript Sidebar is integrated with a ListView to display a list of menu items" } + { + "url": "default", + "name": "Default Functionalities", + "category": "Sidebar", + "api": { + "Sidebar": [ + "type", + "position", + "showBackdrop", + "closeOnDocumentClick", + "change", + "mediaQuery" + ] + }, + "description": "It demonstrates a simple, mobile-friendly and responsive Sidebar (Navigation drawer, Side Navigation menu) which navigates various parts of an application." + }, + { + "url": "docking-sidebar", + "name": "Dock", + "category": "Sidebar", + "api": { + "Sidebar": [ + "enableDock", + "dockSize", + "contextTo" + ] + }, + "description": "This example demonstrates how the JavaScript Sidebar is docked to the main content when it is in closed state" + }, + { + "url": "api", + "name": "API", + "category": "Sidebar", + "api": { + "Sidebar": [ + "showBackdrop", + "position", + "types", + "closeOnDocumentClick" + ] + }, + "description": "It demonstrates how to change the behavior and appearance of sidebar in application through user friendly API’s like types, position, auto close and backdrop" + }, + { + "url": "sidebar-menu", + "name": "Sidebar Menu", + "type": "new", + "category": "Sidebar", + "api": { + "Sidebar": [ + "width", + "mediaQuery", + "target", + "dockSize", + "enableDock" + ] + }, + "description": "This example demonstrates how to render Menu for navigation purpose inside the React Sidebar of an application." + }, + { + "url": "responsive-panel", + "name": "Responsive Panel", + "type": "new", + "category": "Sidebar", + "api": { + "Sidebar": [ + "width", + "mediaQuery", + "target" + ] + }, + "description": "This example demonstrates how to render TreeView for navigation purpose inside the Javascript Sidebar" + }, + { + "url": "sidebar-list", + "name": "Sidebar With ListView", + "category": "Sidebar", + "api": { + "Sidebar": [ + "open", + "close" + ] + }, + "description": "This example demonstrates how the JavaScript Sidebar is integrated with a ListView to display a list of menu items" + } ] -} +} \ No newline at end of file diff --git a/src/sidebar/sidebar-list-stack.json b/src/sidebar/sidebar-list-stack.json index ba4a1754..cb9a0687 100644 --- a/src/sidebar/sidebar-list-stack.json +++ b/src/sidebar/sidebar-list-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n Essential JS 2 for JavaScript - Sidebar > Sidebar with ListView \n
                                    \n
                                    \n
                                    Menu
                                    \n \n
                                    Header Content
                                    \n
                                    \n \n \n \n \n
                                    \n
                                    Application content
                                    \n
                                    \n \n
                                    \n
                                    \n\n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n\n // Sidebar Initialization\n var sidebarInstance = new ej.navigations.Sidebar({\n width: '250px',\n type: 'Over'\n });\n sidebarInstance.appendTo('#sidebar-menu');\n //end of Sidebar initialization\n\n var dataList = [\n { text: 'Home' }, { text: 'About' }, { text: 'Careers' }, { text: 'FAQs' },\n { text: 'Blog' }, { text: 'Uses' }, { text: 'Contact' }\n ];\n\n //Initialize the ListView component\n var listviewInstance = new ej.lists.ListView({\n dataSource: dataList,\n fields: { tooltip: 'text' },\n select: onSelect\n });\n listviewInstance.appendTo('#menulist');\n\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-list/index.html');\n\n // Expand the Sidebar\n document.getElementById('hamburger').addEventListener('click', function () {\n sidebarInstance.show();\n });\n\n // Close the Sidebar\n document.getElementById('close').addEventListener('click', function () {\n sidebarInstance.hide();\n });\n\n function onSelect(args) {\n //Listview select event handler\n document.querySelector('.textArea').textContent = args.text + ' Page Content';\n sidebarInstance.hide();\n }\n\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n Essential JS 2 for JavaScript - Sidebar > Sidebar with ListView \n
                                    \n
                                    \n
                                    Menu
                                    \n \n
                                    Header Content
                                    \n
                                    \n \n \n \n \n
                                    \n
                                    Application content
                                    \n
                                    \n \n
                                    \n
                                    \n\n \n \n
                                    \n\n
                                    ","index.js":"{{ripple}}\n\n // Sidebar Initialization\n var sidebarInstance = new ej.navigations.Sidebar({\n width: '250px',\n type: 'Over'\n });\n sidebarInstance.appendTo('#sidebar-menu');\n //end of Sidebar initialization\n\n var dataList = [\n { text: 'Home' }, { text: 'About' }, { text: 'Careers' }, { text: 'FAQs' },\n { text: 'Blog' }, { text: 'Uses' }, { text: 'Contact' }\n ];\n\n //Initialize the ListView component\n var listviewInstance = new ej.lists.ListView({\n dataSource: dataList,\n fields: { tooltip: 'text' },\n select: onSelect\n });\n listviewInstance.appendTo('#menulist');\n\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-list/index.html');\n\n // Expand the Sidebar\n document.getElementById('hamburger').addEventListener('click', function () {\n sidebarInstance.show();\n });\n\n // Close the Sidebar\n document.getElementById('close').addEventListener('click', function () {\n sidebarInstance.hide();\n });\n\n function onSelect(args) {\n //Listview select event handler\n document.querySelector('.textArea').textContent = args.text + ' Page Content';\n sidebarInstance.hide();\n }\n\n\n"} \ No newline at end of file diff --git a/src/sidebar/sidebar-list.html b/src/sidebar/sidebar-list.html index cff0a340..2cbc7f6b 100644 --- a/src/sidebar/sidebar-list.html +++ b/src/sidebar/sidebar-list.html @@ -46,7 +46,6 @@
                                    \n \n
                                    \n Click/Touch the button to view the sample\n
                                    \n
                                    \n Open in new tab\n
                                    \n \n
                                    \n \n
                                    \n
                                      \n
                                    • \n \n
                                    • \n
                                      \n
                                        \n
                                        \n
                                        • \n
                                      • Support
                                        • \n
                                      • Tour
                                        • \n
                                      \n
                                      \n \n \n \n \n\n \n
                                      \n
                                      \n
                                      Responsive Sidebar with Menu
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n
                                      \n
                                      ","index.js":"{{ripple}}\n\n // Sidebar Initialization\n var sidebarMenu = new ej.navigations.Sidebar({\n width: '220px',\n mediaQuery: '(min-width: 600px)',\n target: '.main-content',\n dockSize: '50px',\n enableDock: true\n });\n sidebarMenu.appendTo('#sidebar-menu');\n //end of Sidebar initialization\n // Toggle the Sidebar\n document.getElementById('hamburger').addEventListener('click', function () {\n sidebarMenu.toggle();\n });\n // open new tab\n document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-menu/index.html');\n var mainMenuItems = [\n {\n text: 'Overview',\n iconCss: 'icon-globe icon',\n items: [\n { text: 'All Data' },\n { text: 'Category2' },\n { text: 'Category3' }\n ]\n },\n {\n text: 'Notification',\n iconCss: 'icon-bell-alt icon',\n items: [\n { text: 'Message' },\n { text: 'Facebook' },\n { text: 'Twitter' }\n ]\n },\n {\n text: 'Comments',\n iconCss: 'icon-comment-inv-alt2 icon',\n items: [\n { text: 'Category1' },\n { text: 'Category2' },\n { text: 'Category3' }\n ]\n },\n {\n text: 'Bookmarks',\n iconCss: 'icon-bookmark icon',\n items: [\n { text: 'All Comments' },\n { text: 'Add Comments' },\n { text: 'Delete Comments' }\n ]\n },\n {\n text: 'Images',\n iconCss: 'icon-picture icon',\n items: [\n { text: 'Add Name' },\n { text: 'Add Mobil Number' },\n { text: 'Add Imaage' },\n ]\n },\n {\n text: 'Users ',\n iconCss: 'icon-user icon',\n items: [\n { text: 'Mobile1' },\n { text: 'Mobile2' },\n { text: 'Telephone' }\n ]\n },\n {\n text: 'Settings',\n iconCss: 'icon-eye icon',\n items: [\n { text: 'Change Profile' },\n { text: 'Add Name' },\n { text: 'Add Details' }\n ]\n },\n {\n text: 'Info',\n iconCss: 'icon-tag icon',\n items: [\n { text: 'Facebook' },\n { text: 'Mobile' },\n ]\n },\n ];\n var mainMenuObj =\n new ej.navigations.Menu({ items: mainMenuItems, orientation: 'Vertical', cssClass: 'dock-menu' }, '#main-menubar');\n var accountMenuItem = [\n {\n text: 'Account',\n items: [\n { text: 'Profile' },\n { text: 'Sign out' },\n ]\n },\n ];\n // horizontal-menubar initialization\n var horizontalMenuobj =\n new ej.navigations.Menu({ items: accountMenuItem, orientation: 'Horizontal', cssClass: 'dock-menu' }, '#horizontal-menubar');\n\n\n"} \ No newline at end of file diff --git a/src/sidebar/sidebar-menu.html b/src/sidebar/sidebar-menu.html index 734ca8ea..a6071ace 100644 --- a/src/sidebar/sidebar-menu.html +++ b/src/sidebar/sidebar-menu.html @@ -1,66 +1,238 @@ -
                                      +
                                      - Click the button to view the sample + Click/Touch the button to view the sample
                                      Open in new tab
                                      - Essential JS 2 for JavaScript - Sidebar > Sidebar with ListView -
                                      - - - + + + +
                                      +
                                      +
                                      Responsive Sidebar with Menu
                                      +
                                      +
                                      -

                                      - Click the button to view the Sidebar sample in new tab. + Click/Touch the button to view the Sidebar sample in new tab.

                                      - In this sample, the ListView component is placed inside the Sidebar for navigation. + This sample demonstrates how to use the Menu component inside the Sidebar for navigation purposes. + Initially, the Sidebar renders in the dock state with icons, and expands when the hamburger icon at the + top-left corner of the header section is clicked.

                                      - \ No newline at end of file diff --git a/src/sidebar/sidebar-menu.js b/src/sidebar/sidebar-menu.js index 1d9bdb4a..b7f66128 100644 --- a/src/sidebar/sidebar-menu.js +++ b/src/sidebar/sidebar-menu.js @@ -1,43 +1,107 @@ this.default = function () { // Sidebar Initialization - var sidebarInstance = new ej.navigations.Sidebar({ - width: '250px', - type: 'Over' + var sidebarMenu = new ej.navigations.Sidebar({ + width: '220px', + mediaQuery: '(min-width: 600px)', + target: '.main-content', + dockSize: '50px', + enableDock: true }); - sidebarInstance.appendTo('#sidebar-menu'); + sidebarMenu.appendTo('#sidebar-menu'); //end of Sidebar initialization - - var dataList = [ - { text: 'Home' }, { text: 'About' }, { text: 'Careers' }, { text: 'FAQs' }, - { text: 'Blog' }, { text: 'Uses' }, { text: 'Contact' } - ]; - - //Initialize the ListView component - var listviewInstance = new ej.lists.ListView({ - dataSource: dataList, - fields: { tooltip: 'text' }, - select: onSelect - }); - listviewInstance.appendTo('#menulist'); - - // open new tab - document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'samples/sidebar/sidebar-menu/index.html'); - - // Expand the Sidebar + // Toggle the Sidebar document.getElementById('hamburger').addEventListener('click', function () { - sidebarInstance.show(); + sidebarMenu.toggle(); }); - - // Close the Sidebar - document.getElementById('close').addEventListener('click', function () { - sidebarInstance.hide(); - }); - - function onSelect(args) { - //Listview select event handler - document.querySelector('.content').textContent = args.text + ' Page Content'; - sidebarInstance.hide(); - } + // open new tab + document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-menu/index.html'); + var mainMenuItems = [ + { + text: 'Overview', + iconCss: 'icon-globe icon', + items: [ + { text: 'All Data' }, + { text: 'Category2' }, + { text: 'Category3' } + ] + }, + { + text: 'Notification', + iconCss: 'icon-bell-alt icon', + items: [ + { text: 'Message' }, + { text: 'Facebook' }, + { text: 'Twitter' } + ] + }, + { + text: 'Comments', + iconCss: 'icon-comment-inv-alt2 icon', + items: [ + { text: 'Category1' }, + { text: 'Category2' }, + { text: 'Category3' } + ] + }, + { + text: 'Bookmarks', + iconCss: 'icon-bookmark icon', + items: [ + { text: 'All Comments' }, + { text: 'Add Comments' }, + { text: 'Delete Comments' } + ] + }, + { + text: 'Images', + iconCss: 'icon-picture icon', + items: [ + { text: 'Add Name' }, + { text: 'Add Mobil Number' }, + { text: 'Add Imaage' }, + ] + }, + { + text: 'Users ', + iconCss: 'icon-user icon', + items: [ + { text: 'Mobile1' }, + { text: 'Mobile2' }, + { text: 'Telephone' } + ] + }, + { + text: 'Settings', + iconCss: 'icon-eye icon', + items: [ + { text: 'Change Profile' }, + { text: 'Add Name' }, + { text: 'Add Details' } + ] + }, + { + text: 'Info', + iconCss: 'icon-tag icon', + items: [ + { text: 'Facebook' }, + { text: 'Mobile' }, + ] + }, + ]; + var mainMenuObj = + new ej.navigations.Menu({ items: mainMenuItems, orientation: 'Vertical', cssClass: 'dock-menu' }, '#main-menubar'); + var accountMenuItem = [ + { + text: 'Account', + items: [ + { text: 'Profile' }, + { text: 'Sign out' }, + ] + }, + ]; + // horizontal-menubar initialization + var horizontalMenuobj = + new ej.navigations.Menu({ items: accountMenuItem, orientation: 'Horizontal', cssClass: 'dock-menu' }, '#horizontal-menubar'); }; diff --git a/src/slider/api-stack.json b/src/slider/api-stack.json index 5b0073f8..283ab2a7 100644 --- a/src/slider/api-stack.json +++ b/src/slider/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n
                                      \n
                                      Value
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Min
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Max
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Step
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Show Buttons
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Disabled
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Vertical Orientation
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Readonly
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var sliderObj = new ej.inputs.Slider({\n value: 30,\n min: 0,\n max: 100,\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Hover' },\n ticks: { placement: 'After', largeStep: 20 },\n type: 'MinRange',\n change: function (args) {\n sliderValue.value = args.value;\n }\n });\n sliderObj.appendTo('#slider');\n\n\n var sliderValue = new ej.inputs.NumericTextBox({\n value: 30,\n format: 'n0',\n change: function (args) {\n sliderObj.value = args.value;\n }\n });\n sliderValue.appendTo('#value');\n\n var sliderMin = new ej.inputs.NumericTextBox({\n value: 0,\n format: 'n0',\n change: function (args) {\n sliderObj.min = args.value;\n }\n });\n sliderMin.appendTo('#min');\n\n var sliderMax = new ej.inputs.NumericTextBox({\n value: 100,\n format: 'n0',\n change: function (args) {\n sliderObj.max = args.value;\n }\n });\n sliderMax.appendTo('#max');\n\n var sliderStep = new ej.inputs.NumericTextBox({\n value: 1,\n format: 'n0',\n change: function (args) {\n sliderObj.step = args.value;\n }\n });\n sliderStep.appendTo('#step');\n\n var button = new ej.buttons.CheckBox({\n checked: false,\n label: 'Show Buttons',\n change: function (args) {\n sliderObj.showButtons = args.checked;\n\n }\n });\n button.appendTo('#button');\n\n var buttonMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.showButtons = args.checked;\n\n }\n });\n buttonMb.appendTo('#mb-button');\n\n var orientationMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.orientation = args.checked ? 'Vertical' : 'Horizontal';\n }\n });\n orientationMb.appendTo('#mb-orientation');\n\n var readOnlyMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.readonly = args.checked;\n }\n });\n readOnlyMb.appendTo('#mb-readOnly');\n\n var disabledMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.enabled = !args.checked;\n }\n });\n disabledMb.appendTo('#mb-disabled');\n\n var orientation = new ej.buttons.CheckBox({\n checked: false,\n label: 'Vertical Orientation',\n change: function (args) {\n sliderObj.orientation = args.checked ? 'Vertical' : 'Horizontal';\n }\n });\n orientation.appendTo('#orientation');\n\n var readOnly = new ej.buttons.CheckBox({\n checked: false,\n label: 'Readonly',\n change: function (args) {\n sliderObj.readonly = args.checked;\n }\n });\n readOnly.appendTo('#readOnly');\n\n var disabled = new ej.buttons.CheckBox({\n checked: false,\n label: 'Disabled',\n change: function (args) {\n sliderObj.enabled = !args.checked;\n }\n });\n disabled.appendTo('#disabled');\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [sliderObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n
                                      \n
                                      Value
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Min
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Max
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Step
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Show Buttons
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Disabled
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Vertical Orientation
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Readonly
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var sliderObj = new ej.inputs.Slider({\n value: 30,\n min: 0,\n max: 100,\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Hover' },\n ticks: { placement: 'After', largeStep: 20 },\n type: 'MinRange',\n change: function (args) {\n sliderValue.value = args.value;\n }\n });\n sliderObj.appendTo('#slider');\n\n\n var sliderValue = new ej.inputs.NumericTextBox({\n value: 30,\n format: 'n0',\n change: function (args) {\n sliderObj.value = args.value;\n }\n });\n sliderValue.appendTo('#value');\n\n var sliderMin = new ej.inputs.NumericTextBox({\n value: 0,\n format: 'n0',\n change: function (args) {\n sliderObj.min = args.value;\n }\n });\n sliderMin.appendTo('#min');\n\n var sliderMax = new ej.inputs.NumericTextBox({\n value: 100,\n format: 'n0',\n change: function (args) {\n sliderObj.max = args.value;\n }\n });\n sliderMax.appendTo('#max');\n\n var sliderStep = new ej.inputs.NumericTextBox({\n value: 1,\n format: 'n0',\n change: function (args) {\n sliderObj.step = args.value;\n }\n });\n sliderStep.appendTo('#step');\n\n var button = new ej.buttons.CheckBox({\n checked: false,\n label: 'Show Buttons',\n change: function (args) {\n sliderObj.showButtons = args.checked;\n\n }\n });\n button.appendTo('#button');\n\n var buttonMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.showButtons = args.checked;\n\n }\n });\n buttonMb.appendTo('#mb-button');\n\n var orientationMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.orientation = args.checked ? 'Vertical' : 'Horizontal';\n }\n });\n orientationMb.appendTo('#mb-orientation');\n\n var readOnlyMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.readonly = args.checked;\n }\n });\n readOnlyMb.appendTo('#mb-readOnly');\n\n var disabledMb = new ej.buttons.CheckBox({\n checked: false,\n change: function (args) {\n sliderObj.enabled = !args.checked;\n }\n });\n disabledMb.appendTo('#mb-disabled');\n\n var orientation = new ej.buttons.CheckBox({\n checked: false,\n label: 'Vertical Orientation',\n change: function (args) {\n sliderObj.orientation = args.checked ? 'Vertical' : 'Horizontal';\n }\n });\n orientation.appendTo('#orientation');\n\n var readOnly = new ej.buttons.CheckBox({\n checked: false,\n label: 'Readonly',\n change: function (args) {\n sliderObj.readonly = args.checked;\n }\n });\n readOnly.appendTo('#readOnly');\n\n var disabled = new ej.buttons.CheckBox({\n checked: false,\n label: 'Disabled',\n change: function (args) {\n sliderObj.enabled = !args.checked;\n }\n });\n disabled.appendTo('#disabled');\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [sliderObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n"} \ No newline at end of file diff --git a/src/slider/api.js b/src/slider/api.js index eb892136..272a6d66 100644 --- a/src/slider/api.js +++ b/src/slider/api.js @@ -127,7 +127,7 @@ this.default = function () { var slider = [sliderObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } }; \ No newline at end of file diff --git a/src/slider/azure-pricing-stack.json b/src/slider/azure-pricing-stack.json index d9bc53a2..2d1f6d0c 100644 --- a/src/slider/azure-pricing-stack.json +++ b/src/slider/azure-pricing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Processor \n \n
                                      \n
                                      Each core included minimum 2.26 GHz power
                                      \n
                                      \n
                                      \n
                                      \n Memory \n \n
                                      \n
                                      Equal to burstable memory included
                                      \n
                                      \n
                                      \n
                                      \n Storage \n \n
                                      \n
                                      1000 GB bandwidth per month, at 100 Mbit/s uplink port
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Size Range
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Estimated Price
                                      \n
                                      \n $ \n \n /month\n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // tslint:disable-next-line:max-func-body-length\n var objElements = ['#xSmallBtn', '#smallBtn', '#mediumBtn', '#largeBtn', '#xLargeBtn'];\n var buttonObj = { obj: ej.buttons.Button, prop: { cssClass: 'e-info', isPrimary: true } };\n var proceessorElem, memoryElem, storageElem, elemValue, finalValue, discountValue;\n\n //cPanel Check Box\n var panelCheckBox = new ej.buttons.CheckBox({\n checked: false,\n label: 'Not required cPanel included',\n change: sliderValueChange\n });\n panelCheckBox.appendTo('#cPanel');\n\n //Discount Check Box\n var discountCheckBox = new ej.buttons.CheckBox({\n checked: false,\n label: '12 Months Save 25%. Pay Monthly',\n change: sliderValueChange\n });\n discountCheckBox.appendTo('#discount');\n\n //Processor Slider\n var processorSlider = new ej.inputs.Slider({\n min: 1,\n max: 16,\n value: 4,\n change: onChangeProcessor,\n created: onCreateProcessor\n });\n processorSlider.appendTo('#processor-slider');\n\n //Memory Slider\n var memorySlider = new ej.inputs.Slider({\n max: 12,\n min: 1,\n value: 4,\n change: onChangeMemory,\n created: onCreateMemory\n });\n\n memorySlider.appendTo('#memory-slider');\n\n //Storage Slider\n var storageSlider = new ej.inputs.Slider({\n min: 10,\n max: 500,\n value: 300,\n step: 10,\n change: onChangeStorage,\n created: onCreateStorage\n });\n storageSlider.appendTo('#storage-slider');\n\n //Signup Button\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#btn');\n\n //Render price range buttons\n for (var i = 0; i < objElements.length; i++) {\n buttonObj.obj = new ej.buttons.Button(buttonObj.prop);\n buttonObj.obj.appendTo(objElements[i]);\n }\n\n // Render price Dialog\n var alertDialogObj = new ej.popups.Dialog({\n content: '
                                      Cloud Price Details
                                      ' +\n '
                                      Processor Price
                                      ' +\n '
                                      Memory Price
                                      ' +\n '
                                      Storge Price
                                      ' +\n '
                                      Estimated Price
                                      ',\n showCloseIcon: false,\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'Close', isPrimary: true }\n }],\n closeOnEscape: false, width: '360px',\n target: document.getElementById('pricing-slider'),\n animationSettings: { effect: 'None' },\n visible: false\n });\n alertDialogObj.appendTo('#alertDialog');\n\n //Sets processor value\n function onCreateProcessor() {\n document.getElementById('processor').innerHTML = processorSlider.value + ' ' + 'CORE';\n }\n //Sets memory value\n function onCreateMemory(args) {\n document.getElementById('memory').innerHTML = memorySlider.value + ' ' + 'GB';\n }\n //Sets storage value\n function onCreateStorage(args) {\n document.getElementById('storage').innerHTML = storageSlider.value + ' ' + 'GB';\n sliderValueChange();\n }\n\n //Processor Slider value change method\n function onChangeProcessor(args) {\n onChange(document.getElementById('processor'), args.value, 'CORE');\n }\n\n //Memory Slider value change method\n function onChangeMemory(args) {\n onChange(document.getElementById('memory'), args.value, 'GB');\n }\n\n //Storage Slider value change method\n function onChangeStorage(args) {\n onChange(document.getElementById('storage'), args.value, 'GB');\n }\n //common method for Slider value change\n function onChange(elem, value, notation) {\n elem.innerText = value + ' ' + notation;\n sliderValueChange();\n }\n\n //method to calculate monthly cloud price based on slider value\n function sliderValueChange() {\n elemValue = document.getElementById('value');\n var porcessorValue = processorSlider.value;\n var memoryValue = memorySlider.value;\n var storageValue = storageSlider.value;\n //formula to calculate cloud price based on slider value\n finalValue = Number(((((porcessorValue * memoryValue) * 1000) + ((porcessorValue * memoryValue) * storageValue) + ((porcessorValue * memoryValue) * 100)) / 12).toFixed(2));\n if (document.getElementById('cPanel').ej2_instances[0].checked) {\n finalValue = Number((finalValue - 10).toFixed(2));\n }\n if (document.getElementById('discount').ej2_instances[0].checked) {\n finalValue = Number((finalValue - ((finalValue * 25) / 100)).toFixed(2));\n }\n elemValue.innerText = finalValue.toString();\n }\n\n //common method to change the slider value\n function sliderPriceValue(processor, memory, storage) {\n processorSlider.value = processor;\n memorySlider.value = memory;\n storageSlider.value = storage;\n }\n\n //change the slider value based on workload\n document.getElementById('xSmallBtn').onclick = function (e) {\n sliderPriceValue(1, 1, 10);\n };\n document.getElementById('smallBtn').onclick = function (e) {\n sliderPriceValue(1, 2, 10);\n };\n document.getElementById('mediumBtn').onclick = function (e) {\n sliderPriceValue(4, 4, 300);\n };\n document.getElementById('largeBtn').onclick = function (e) {\n sliderPriceValue(12, 6, 100);\n };\n document.getElementById('xLargeBtn').onclick = function (e) {\n sliderPriceValue(8, 12, 300);\n };\n\n //Show price dialog\n document.getElementById('btn').onclick = function (e) {\n var processorPrice = document.getElementById('processorPrice');\n onChange(processorPrice, processorSlider.value, 'CORE');\n var memoryPrice = document.getElementById('memoryPrice');\n onChange(memoryPrice, memorySlider.value, 'GB');\n var storgePrice = document.getElementById('storgePrice');\n onChange(storgePrice, storageSlider.value, 'GB');\n var cloudPrice = document.getElementById('cloudPrice');\n cloudPrice.innerText = '$' + finalValue;\n sliderValueChange();\n alertDialogObj.show();\n };\n\n //hide price dialog\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Processor \n \n
                                      \n
                                      Each core included minimum 2.26 GHz power
                                      \n
                                      \n
                                      \n
                                      \n Memory \n \n
                                      \n
                                      Equal to burstable memory included
                                      \n
                                      \n
                                      \n
                                      \n Storage \n \n
                                      \n
                                      1000 GB bandwidth per month, at 100 Mbit/s uplink port
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Size Range
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Estimated Price
                                      \n
                                      \n $ \n \n /month\n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // tslint:disable-next-line:max-func-body-length\n var objElements = ['#xSmallBtn', '#smallBtn', '#mediumBtn', '#largeBtn', '#xLargeBtn'];\n var buttonObj = { obj: ej.buttons.Button, prop: { cssClass: 'e-info', isPrimary: true } };\n var proceessorElem, memoryElem, storageElem, elemValue, finalValue, discountValue;\n\n //cPanel Check Box\n var panelCheckBox = new ej.buttons.CheckBox({\n checked: false,\n label: 'Not required cPanel included',\n change: sliderValueChange\n });\n panelCheckBox.appendTo('#cPanel');\n\n //Discount Check Box\n var discountCheckBox = new ej.buttons.CheckBox({\n checked: false,\n label: '12 Months Save 25%. Pay Monthly',\n change: sliderValueChange\n });\n discountCheckBox.appendTo('#discount');\n\n //Processor Slider\n var processorSlider = new ej.inputs.Slider({\n min: 1,\n max: 16,\n value: 4,\n change: onChangeProcessor,\n created: onCreateProcessor\n });\n processorSlider.appendTo('#processor-slider');\n\n //Memory Slider\n var memorySlider = new ej.inputs.Slider({\n max: 12,\n min: 1,\n value: 4,\n change: onChangeMemory,\n created: onCreateMemory\n });\n\n memorySlider.appendTo('#memory-slider');\n\n //Storage Slider\n var storageSlider = new ej.inputs.Slider({\n min: 10,\n max: 500,\n value: 300,\n step: 10,\n change: onChangeStorage,\n created: onCreateStorage\n });\n storageSlider.appendTo('#storage-slider');\n\n //Signup Button\n var button = new ej.buttons.Button({ isPrimary: true });\n button.appendTo('#btn');\n\n //Render price range buttons\n for (var i = 0; i < objElements.length; i++) {\n buttonObj.obj = new ej.buttons.Button(buttonObj.prop);\n buttonObj.obj.appendTo(objElements[i]);\n }\n\n // Render price Dialog\n var alertDialogObj = new ej.popups.Dialog({\n content: '
                                      Cloud Price Details
                                      ' +\n '
                                      Processor Price
                                      ' +\n '
                                      Memory Price
                                      ' +\n '
                                      Storge Price
                                      ' +\n '
                                      Estimated Price
                                      ',\n showCloseIcon: false,\n buttons: [{\n click: alertDlgBtnClick, buttonModel: { content: 'Close', isPrimary: true }\n }],\n closeOnEscape: false, width: '360px',\n target: document.getElementById('pricing-slider'),\n animationSettings: { effect: 'None' },\n visible: false\n });\n alertDialogObj.appendTo('#alertDialog');\n\n //Sets processor value\n function onCreateProcessor() {\n document.getElementById('processor').innerHTML = processorSlider.value + ' ' + 'CORE';\n }\n //Sets memory value\n function onCreateMemory(args) {\n document.getElementById('memory').innerHTML = memorySlider.value + ' ' + 'GB';\n }\n //Sets storage value\n function onCreateStorage(args) {\n document.getElementById('storage').innerHTML = storageSlider.value + ' ' + 'GB';\n sliderValueChange();\n }\n\n //Processor Slider value change method\n function onChangeProcessor(args) {\n onChange(document.getElementById('processor'), args.value, 'CORE');\n }\n\n //Memory Slider value change method\n function onChangeMemory(args) {\n onChange(document.getElementById('memory'), args.value, 'GB');\n }\n\n //Storage Slider value change method\n function onChangeStorage(args) {\n onChange(document.getElementById('storage'), args.value, 'GB');\n }\n //common method for Slider value change\n function onChange(elem, value, notation) {\n elem.innerText = value + ' ' + notation;\n sliderValueChange();\n }\n\n //method to calculate monthly cloud price based on slider value\n function sliderValueChange() {\n elemValue = document.getElementById('value');\n var porcessorValue = processorSlider.value;\n var memoryValue = memorySlider.value;\n var storageValue = storageSlider.value;\n //formula to calculate cloud price based on slider value\n finalValue = Number(((((porcessorValue * memoryValue) * 1000) + ((porcessorValue * memoryValue) * storageValue) + ((porcessorValue * memoryValue) * 100)) / 12).toFixed(2));\n if (document.getElementById('cPanel').ej2_instances[0].checked) {\n finalValue = Number((finalValue - 10).toFixed(2));\n }\n if (document.getElementById('discount').ej2_instances[0].checked) {\n finalValue = Number((finalValue - ((finalValue * 25) / 100)).toFixed(2));\n }\n elemValue.innerText = finalValue.toString();\n }\n\n //common method to change the slider value\n function sliderPriceValue(processor, memory, storage) {\n processorSlider.value = processor;\n memorySlider.value = memory;\n storageSlider.value = storage;\n }\n\n //change the slider value based on workload\n document.getElementById('xSmallBtn').onclick = function (e) {\n sliderPriceValue(1, 1, 10);\n };\n document.getElementById('smallBtn').onclick = function (e) {\n sliderPriceValue(1, 2, 10);\n };\n document.getElementById('mediumBtn').onclick = function (e) {\n sliderPriceValue(4, 4, 300);\n };\n document.getElementById('largeBtn').onclick = function (e) {\n sliderPriceValue(12, 6, 100);\n };\n document.getElementById('xLargeBtn').onclick = function (e) {\n sliderPriceValue(8, 12, 300);\n };\n\n //Show price dialog\n document.getElementById('btn').onclick = function (e) {\n var processorPrice = document.getElementById('processorPrice');\n onChange(processorPrice, processorSlider.value, 'CORE');\n var memoryPrice = document.getElementById('memoryPrice');\n onChange(memoryPrice, memorySlider.value, 'GB');\n var storgePrice = document.getElementById('storgePrice');\n onChange(storgePrice, storageSlider.value, 'GB');\n var cloudPrice = document.getElementById('cloudPrice');\n cloudPrice.innerText = '$' + finalValue;\n sliderValueChange();\n alertDialogObj.show();\n };\n\n //hide price dialog\n function alertDlgBtnClick() {\n alertDialogObj.hide();\n }\n"} \ No newline at end of file diff --git a/src/slider/azure-pricing.html b/src/slider/azure-pricing.html index c7882018..b3ff920c 100644 --- a/src/slider/azure-pricing.html +++ b/src/slider/azure-pricing.html @@ -419,4 +419,8 @@ padding-top: 12px; padding-bottom: 16px; } + + .bootstrap4 #pricing-slider .row { + box-shadow: none; + } \ No newline at end of file diff --git a/src/slider/default-stack.json b/src/slider/default-stack.json index 2dbacc26..6555415e 100644 --- a/src/slider/default-stack.json +++ b/src/slider/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange'\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range'\n });\n rangeObj.appendTo('#range');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange'\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range'\n });\n rangeObj.appendTo('#range');\n"} \ No newline at end of file diff --git a/src/slider/events-stack.json b/src/slider/events-stack.json index 2836a33b..275340b7 100644 --- a/src/slider/events-stack.json +++ b/src/slider/events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var minRangeObj = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep, smallstep\n ticks: { placement: 'Both', largeStep: 20, smallStep: 5, showSmallTicks: true },\n // Initialize tooltip with placement and showOn\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' },\n // create event for slider\n created: onCreated,\n // change event for slider\n change: onChange,\n // changed event for slider\n changed: onChanged\n });\n minRangeObj.appendTo('#minrange');\n //Clears the event log details\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n //Handler for create event trace\n function onCreated() {\n appendElement('Slider control has been created
                                      ');\n }\n //Handler for change event trace\n function onChange(args) {\n appendElement('Slider value is changing from ' + args.previousValue + ' to ' + args.value + '
                                      ');\n }\n //Handler for changed event trace\n function onChanged(args) {\n appendElement('Slider value has been changed from ' + args.previousValue + ' to ' + args.value + '
                                      ');\n }\n //Display event log\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [minRangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var minRangeObj = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep, smallstep\n ticks: { placement: 'Both', largeStep: 20, smallStep: 5, showSmallTicks: true },\n // Initialize tooltip with placement and showOn\n tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' },\n // create event for slider\n created: onCreated,\n // change event for slider\n change: onChange,\n // changed event for slider\n changed: onChanged\n });\n minRangeObj.appendTo('#minrange');\n //Clears the event log details\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n //Handler for create event trace\n function onCreated() {\n appendElement('Slider control has been created
                                      ');\n }\n //Handler for change event trace\n function onChange(args) {\n appendElement('Slider value is changing from ' + args.previousValue + ' to ' + args.value + '
                                      ');\n }\n //Handler for changed event trace\n function onChanged(args) {\n appendElement('Slider value has been changed from ' + args.previousValue + ' to ' + args.value + '
                                      ');\n }\n //Display event log\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [minRangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n"} \ No newline at end of file diff --git a/src/slider/events.js b/src/slider/events.js index 3cea4013..0dffe9e5 100644 --- a/src/slider/events.js +++ b/src/slider/events.js @@ -49,7 +49,7 @@ this.default = function () { var slider = [minRangeObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } }; \ No newline at end of file diff --git a/src/slider/format-stack.json b/src/slider/format-stack.json index b035d0f3..0051a9e8 100644 --- a/src/slider/format-stack.json +++ b/src/slider/format-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var currencyObj = new ej.inputs.Slider({\n // Set the initial range values for slider\n value: [20, 80],\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Initialize tooltip with placement and format\n tooltip: {\n placement: 'Before', isVisible: true,\n // Formatting tooltip value in currency with 2-decimal specifier.\n format: 'c2'\n },\n // Initialize ticks with placement, largestep, smallstep and format\n ticks: {\n placement: 'After', largeStep: 25, smallStep: 5, showSmallTicks: true,\n // Formatting ticks value in currency with 3-decimal specifier.\n format: 'c1'\n },\n // Set the type to render range slider\n type: 'Range'\n });\n currencyObj.appendTo('#currency');\n\n // Initialize Slider component\n var kilometerObj = new ej.inputs.Slider({\n // Set the initial range values for slider\n value: [1100, 1850],\n // Set slider minimum and maximum values\n min: 900, max: 2100,\n // Initialize tooltip with placement and format\n tooltip: {\n isVisible: true,\n placement: 'Before',\n /**\n * Formatting tooltip value in numeric with 2-decimal specifier if the any decimal values occurred.\n * Zeros will be filled if the values are not in 4-digits in the fractional part.\n */\n format: '00##.## km'\n },\n // Initialize ticks with placement, largestep, smallstep and format\n ticks: {\n placement: 'After',\n largeStep: 400,\n smallStep: 100,\n showSmallTicks: true,\n /**\n * Formatting ticks value in numeric with 2-decimal specifier if the any decimal values occurred.\n * Zeros will be filled if the values are not in 4-digits in the fractional part.\n */\n format: '00##.## km'\n },\n // Set the type to render range slider\n type: 'Range'\n });\n kilometerObj.appendTo('#kilometer');\n\n // Initialize Slider component\n var timeObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Set the initial range values for slider\n value: [new Date(2013, 6, 13, 12).getTime(), new Date(2013, 6, 13, 18).getTime()],\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n // Initialize ticks with placement, largestep, smallstep\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'Range'\n });\n timeObj.appendTo('#time');\n\n function tooltipChangeHandler(args) {\n // Splitting the range values from the tooltip using space into an array.\n var totalMiliSeconds = args.text.split(' ');\n // First part is the first handle value\n var firstPart = totalMiliSeconds[0];\n // Second part is the second handle value\n var secondPart = totalMiliSeconds[2];\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n firstPart = new Date(Number(firstPart)).toLocaleTimeString('en-us', custom);\n secondPart = new Date(Number(secondPart)).toLocaleTimeString('en-us', custom);\n // Assigning our custom text to the tooltip value.\n args.text = firstPart + ' - ' + secondPart;\n }\n\n function renderingTicksHandler(args) {\n var totalMiliSeconds = Number(args.value);\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Assigning our custom text to the tick value.\n args.text = new Date(totalMiliSeconds).toLocaleTimeString('en-us', custom);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var slider = [currencyObj, kilometerObj, timeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var currencyObj = new ej.inputs.Slider({\n // Set the initial range values for slider\n value: [20, 80],\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Initialize tooltip with placement and format\n tooltip: {\n placement: 'Before', isVisible: true,\n // Formatting tooltip value in currency with 2-decimal specifier.\n format: 'c2'\n },\n // Initialize ticks with placement, largestep, smallstep and format\n ticks: {\n placement: 'After', largeStep: 25, smallStep: 5, showSmallTicks: true,\n // Formatting ticks value in currency with 3-decimal specifier.\n format: 'c1'\n },\n // Set the type to render range slider\n type: 'Range'\n });\n currencyObj.appendTo('#currency');\n\n // Initialize Slider component\n var kilometerObj = new ej.inputs.Slider({\n // Set the initial range values for slider\n value: [1100, 1850],\n // Set slider minimum and maximum values\n min: 900, max: 2100,\n // Initialize tooltip with placement and format\n tooltip: {\n isVisible: true,\n placement: 'Before',\n /**\n * Formatting tooltip value in numeric with 2-decimal specifier if the any decimal values occurred.\n * Zeros will be filled if the values are not in 4-digits in the fractional part.\n */\n format: '00##.## km'\n },\n // Initialize ticks with placement, largestep, smallstep and format\n ticks: {\n placement: 'After',\n largeStep: 400,\n smallStep: 100,\n showSmallTicks: true,\n /**\n * Formatting ticks value in numeric with 2-decimal specifier if the any decimal values occurred.\n * Zeros will be filled if the values are not in 4-digits in the fractional part.\n */\n format: '00##.## km'\n },\n // Set the type to render range slider\n type: 'Range'\n });\n kilometerObj.appendTo('#kilometer');\n\n // Initialize Slider component\n var timeObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Set the initial range values for slider\n value: [new Date(2013, 6, 13, 12).getTime(), new Date(2013, 6, 13, 18).getTime()],\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n // Initialize ticks with placement, largestep, smallstep\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'Range'\n });\n timeObj.appendTo('#time');\n\n function tooltipChangeHandler(args) {\n // Splitting the range values from the tooltip using space into an array.\n var totalMiliSeconds = args.text.split(' ');\n // First part is the first handle value\n var firstPart = totalMiliSeconds[0];\n // Second part is the second handle value\n var secondPart = totalMiliSeconds[2];\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n firstPart = new Date(Number(firstPart)).toLocaleTimeString('en-us', custom);\n secondPart = new Date(Number(secondPart)).toLocaleTimeString('en-us', custom);\n // Assigning our custom text to the tooltip value.\n args.text = firstPart + ' - ' + secondPart;\n }\n\n function renderingTicksHandler(args) {\n var totalMiliSeconds = Number(args.value);\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Assigning our custom text to the tick value.\n args.text = new Date(totalMiliSeconds).toLocaleTimeString('en-us', custom);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var slider = [currencyObj, kilometerObj, timeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n\n\n"} \ No newline at end of file diff --git a/src/slider/format.js b/src/slider/format.js index e9c32a3e..e7d30ca2 100644 --- a/src/slider/format.js +++ b/src/slider/format.js @@ -122,7 +122,7 @@ this.default = function () { var slider = [currencyObj, kilometerObj, timeObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } diff --git a/src/slider/limits-stack.json b/src/slider/limits-stack.json index 52b1f752..7c646a9b 100644 --- a/src/slider/limits-stack.json +++ b/src/slider/limits-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      MinStart
                                      \n                                       		\n \n
                                      \n
                                      MinEnd
                                      \n                                       		\n \n
                                      \n
                                      MaxStart
                                      \n                                       		\n \n
                                      \n
                                      MaxEnd
                                      \n                                       		\n \n
                                      \n
                                      Lock First Handle
                                      \n                                       		\n \n
                                      \n
                                      Lock Second Handle
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Limits sample\n */\n\n var minRangeObj = new ej.inputs.Slider({\n min: 0,\n value: 25,\n max: 100,\n type: 'MinRange',\n ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },\n tooltip: { isVisible: true, placement: 'Before' },\n limits: { enabled: true, minStart: 10, minEnd: 40 }\n });\n minRangeObj.appendTo('#minRange');\n var rangeObj = new ej.inputs.Slider({\n min: 0,\n value: [25, 75],\n max: 100,\n type: 'Range',\n ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },\n tooltip: { isVisible: true, placement: 'Before' },\n limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 }\n });\n rangeObj.appendTo('#range');\n\n // Initialize NumericTextBox\n var minStart = new ej.inputs.NumericTextBox({\n value: 10,\n min: 0,\n max: 100,\n change: minStartChange\n });\n minStart.appendTo('#minStart');\n\n var minEnd = new ej.inputs.NumericTextBox({\n value: 40,\n min: 0,\n max: 100,\n change: minEndChange\n });\n minEnd.appendTo('#minEnd');\n\n var maxStart = new ej.inputs.NumericTextBox({\n value: 60,\n min: 0,\n max: 100,\n change: maxStartChange\n });\n maxStart.appendTo('#maxStart');\n\n var maxEnd = new ej.inputs.NumericTextBox({\n value: 90,\n min: 0,\n max: 100,\n change: maxEndChange\n });\n maxEnd.appendTo('#maxEnd');\n\n // Initialize Checkbox\n var fixedOne = new ej.buttons.CheckBox({ change: fixOne });\n fixedOne.appendTo('#fixedOne');\n\n var fixedSecond = new ej.buttons.CheckBox({ change: fixSecond });\n fixedSecond.appendTo('#fixedSecond');\n\n // Eventlisteners to lock first handle of the both sliders\n function fixOne(args) {\n minRangeObj.limits.startHandleFixed = args.checked;\n rangeObj.limits.startHandleFixed = args.checked;\n }\n\n // Eventlisteners to lock second handle of the both sliders\n function fixSecond(args) {\n minRangeObj.limits.endHandleFixed = args.checked;\n rangeObj.limits.endHandleFixed = args.checked;\n }\n\n // Eventlisteners to change limit values for both sliders\n function minStartChange(args) {\n minRangeObj.limits.minStart = args.value;\n rangeObj.limits.minStart = args.value;\n }\n\n function minEndChange(args) {\n minRangeObj.limits.minEnd = args.value;\n rangeObj.limits.minEnd = args.value;\n }\n\n function maxStartChange(args) {\n minRangeObj.limits.maxStart = args.value;\n rangeObj.limits.maxStart = args.value;\n }\n\n function maxEndChange(args) {\n minRangeObj.limits.maxEnd = args.value;\n rangeObj.limits.maxEnd = args.value;\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [minRangeObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      MinStart
                                      \n                                       		\n \n
                                      \n
                                      MinEnd
                                      \n                                       		\n \n
                                      \n
                                      MaxStart
                                      \n                                       		\n \n
                                      \n
                                      MaxEnd
                                      \n                                       		\n \n
                                      \n
                                      Lock First Handle
                                      \n                                       		\n \n
                                      \n
                                      Lock Second Handle
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Limits sample\n */\n\n var minRangeObj = new ej.inputs.Slider({\n min: 0,\n value: 25,\n max: 100,\n type: 'MinRange',\n ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },\n tooltip: { isVisible: true, placement: 'Before' },\n limits: { enabled: true, minStart: 10, minEnd: 40 }\n });\n minRangeObj.appendTo('#minRange');\n var rangeObj = new ej.inputs.Slider({\n min: 0,\n value: [25, 75],\n max: 100,\n type: 'Range',\n ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },\n tooltip: { isVisible: true, placement: 'Before' },\n limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 }\n });\n rangeObj.appendTo('#range');\n\n // Initialize NumericTextBox\n var minStart = new ej.inputs.NumericTextBox({\n value: 10,\n min: 0,\n max: 100,\n change: minStartChange\n });\n minStart.appendTo('#minStart');\n\n var minEnd = new ej.inputs.NumericTextBox({\n value: 40,\n min: 0,\n max: 100,\n change: minEndChange\n });\n minEnd.appendTo('#minEnd');\n\n var maxStart = new ej.inputs.NumericTextBox({\n value: 60,\n min: 0,\n max: 100,\n change: maxStartChange\n });\n maxStart.appendTo('#maxStart');\n\n var maxEnd = new ej.inputs.NumericTextBox({\n value: 90,\n min: 0,\n max: 100,\n change: maxEndChange\n });\n maxEnd.appendTo('#maxEnd');\n\n // Initialize Checkbox\n var fixedOne = new ej.buttons.CheckBox({ change: fixOne });\n fixedOne.appendTo('#fixedOne');\n\n var fixedSecond = new ej.buttons.CheckBox({ change: fixSecond });\n fixedSecond.appendTo('#fixedSecond');\n\n // Eventlisteners to lock first handle of the both sliders\n function fixOne(args) {\n minRangeObj.limits.startHandleFixed = args.checked;\n rangeObj.limits.startHandleFixed = args.checked;\n }\n\n // Eventlisteners to lock second handle of the both sliders\n function fixSecond(args) {\n minRangeObj.limits.endHandleFixed = args.checked;\n rangeObj.limits.endHandleFixed = args.checked;\n }\n\n // Eventlisteners to change limit values for both sliders\n function minStartChange(args) {\n minRangeObj.limits.minStart = args.value;\n rangeObj.limits.minStart = args.value;\n }\n\n function minEndChange(args) {\n minRangeObj.limits.minEnd = args.value;\n rangeObj.limits.minEnd = args.value;\n }\n\n function maxStartChange(args) {\n minRangeObj.limits.maxStart = args.value;\n rangeObj.limits.maxStart = args.value;\n }\n\n function maxEndChange(args) {\n minRangeObj.limits.maxEnd = args.value;\n rangeObj.limits.maxEnd = args.value;\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [minRangeObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n"} \ No newline at end of file diff --git a/src/slider/limits.js b/src/slider/limits.js index 33fb46ba..7febdb1a 100644 --- a/src/slider/limits.js +++ b/src/slider/limits.js @@ -104,7 +104,7 @@ this.default = function () { var slider = [minRangeObj, rangeObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } }; \ No newline at end of file diff --git a/src/slider/orientation-stack.json b/src/slider/orientation-stack.json index 85faaf04..5377f178 100644 --- a/src/slider/orientation-stack.json +++ b/src/slider/orientation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n\n \n \n \n \n \n
                                      \n
                                      Ticks
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Tooltip
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n orientation: 'Vertical'\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange',\n orientation: 'Vertical'\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n orientation: 'Vertical'\n });\n rangeObj.appendTo('#range');\n // Initialize Checkbox components\n var enableTicks = new ej.buttons.CheckBox({ checked: false, change: enableDisableTicks });\n enableTicks.appendTo('#ticks');\n\n var enableTooltip = new ej.buttons.CheckBox({ checked: false, change: enableDisableTooltip });\n enableTooltip.appendTo('#tooltip');\n\n // Array of slider objects\n var sliders = [defaultObj, minRangeObj, rangeObj];\n\n // Checkbox change handlers\n function enableDisableTicks(args) {\n var ticks = { placement: args.checked ? 'Before' : 'None', largeStep: 20, smallStep: 5, showSmallTicks: true };\n sliders.forEach(function (slider) {\n // Assigning ticks values to each slider\n slider.ticks = ticks;\n });\n }\n\n function enableDisableTooltip(args) {\n var tooltip = { isVisible: args.checked, placement: 'Before' };\n sliders.forEach(function (slider) {\n // Assigning tooltip values to each slider\n slider.tooltip = tooltip;\n });\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [defaultObj, minRangeObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n\n \n \n \n \n \n
                                      \n
                                      Ticks
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Tooltip
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n orientation: 'Vertical'\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange',\n orientation: 'Vertical'\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n orientation: 'Vertical'\n });\n rangeObj.appendTo('#range');\n // Initialize Checkbox components\n var enableTicks = new ej.buttons.CheckBox({ checked: false, change: enableDisableTicks });\n enableTicks.appendTo('#ticks');\n\n var enableTooltip = new ej.buttons.CheckBox({ checked: false, change: enableDisableTooltip });\n enableTooltip.appendTo('#tooltip');\n\n // Array of slider objects\n var sliders = [defaultObj, minRangeObj, rangeObj];\n\n // Checkbox change handlers\n function enableDisableTicks(args) {\n var ticks = { placement: args.checked ? 'Before' : 'None', largeStep: 20, smallStep: 5, showSmallTicks: true };\n sliders.forEach(function (slider) {\n // Assigning ticks values to each slider\n slider.ticks = ticks;\n });\n }\n\n function enableDisableTooltip(args) {\n var tooltip = { isVisible: args.checked, placement: 'Before' };\n sliders.forEach(function (slider) {\n // Assigning tooltip values to each slider\n slider.tooltip = tooltip;\n });\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n function onScroll() {\n var slider = [defaultObj, minRangeObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n"} \ No newline at end of file diff --git a/src/slider/orientation.js b/src/slider/orientation.js index 1b2b5dd8..264ca654 100644 --- a/src/slider/orientation.js +++ b/src/slider/orientation.js @@ -51,7 +51,7 @@ this.default = function () { var slider = [defaultObj, minRangeObj, rangeObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } }; \ No newline at end of file diff --git a/src/slider/rtl-stack.json b/src/slider/rtl-stack.json index f480feb2..5d4d6351 100644 --- a/src/slider/rtl-stack.json +++ b/src/slider/rtl-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n enableRtl: true\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange',\n enableRtl: true\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n enableRtl: true\n });\n rangeObj.appendTo('#range');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n enableRtl: true\n });\n defaultObj.appendTo('#default');\n var minRangeObj = new ej.inputs.Slider({\n value: 30,\n type: 'MinRange',\n enableRtl: true\n });\n minRangeObj.appendTo('#minrange');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n enableRtl: true\n });\n rangeObj.appendTo('#range');\n"} \ No newline at end of file diff --git a/src/slider/sample.json b/src/slider/sample.json index 0219c1c8..347da429 100644 --- a/src/slider/sample.json +++ b/src/slider/sample.json @@ -3,6 +3,7 @@ "directory": "slider", "category": "Inputs", "ftName" : "slider", + "type": "update", "samples": [ { "url": "default", @@ -213,7 +214,7 @@ "url": "selection-bar-customization", "name": "Bar", "category": "Customization", - "description": "Demo of Essential JS 2 slider control slider bar customization with colors and height.", + "description": "This example demonstrates how to highly customize Syncfusion React slider bar with colors and height.", "api": { "Slider": [ "value", @@ -230,7 +231,7 @@ "url": "ticks-customization", "name": "Ticks", "category": "Customization", - "description": "Demo of Essential JS 2 slider control's highly customizable slider values using ticks and a legend.", + "description": "Essential JS 2 slider control demo showing the highly customizable slider values using ticks and a legend.", "api": { "Slider": [ "value", @@ -254,6 +255,7 @@ "url": "tooltip-customization", "name": "Tooltip", "category": "Customization", + "type": "update", "description": "Demo of Essential JS 2 slider control customization of slider tooltip text and background color with formatted text values.", "api": { "Slider": [ @@ -283,7 +285,7 @@ "url": "azure-pricing", "name": "Cloud Pricing", "category": "Use Case", - "description": "Essential JS 2 slider control demo of real-world scenario using sample Azure cloud pricing.", + "description": "This example demonstrates the usage of Syncfusion React slider control in real world use case sample azure cloud pricing.", "api": { "Slider": [ "value", diff --git a/src/slider/selection-bar-customization-stack.json b/src/slider/selection-bar-customization-stack.json index 70cbc2a6..dc884db4 100644 --- a/src/slider/selection-bar-customization-stack.json +++ b/src/slider/selection-bar-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      Height
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Gradient color
                                      \n
                                      \n
                                      \n
                                      \n
                                      Dynamic thumb and selection bar color
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var heightSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n min: 0, max: 100\n });\n heightSlider.appendTo('#height_slider');\n\n // Initialize Slider component\n var gradientSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial range values for slider\n value: 50,\n type: 'MinRange'\n });\n gradientSlider.appendTo('#gradient_slider');\n\n var sliderTrack;\n var sliderHandle;\n\n // Initialize Slider component\n var dynamicColorSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n value: 20,\n type: 'MinRange',\n // Handler used for slider created event\n created: function() {\n sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');\n sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');\n (sliderHandle).style.backgroundColor = 'green';\n (sliderTrack).style.backgroundColor = 'green';\n },\n // Handler used for slider change event\n change: function (args) {\n if (args.value > 0 && args.value <= 25) {\n // Change handle and range bar color to green when\n (sliderHandle).style.backgroundColor = 'green';\n (sliderTrack).style.backgroundColor = 'green';\n } else if (args.value > 25 && args.value <= 50) {\n // Change handle and range bar color to royal blue\n (sliderHandle).style.backgroundColor = 'royalblue';\n (sliderTrack).style.backgroundColor = 'royalblue';\n } else if (args.value > 50 && args.value <= 75) {\n // Change handle and range bar color to dark orange\n (sliderHandle).style.backgroundColor = 'darkorange';\n (sliderTrack).style.backgroundColor = 'darkorange';\n } else if (args.value > 75 && args.value <= 100) {\n // Change handle and range bar color to red\n (sliderHandle).style.backgroundColor = 'red';\n (sliderTrack).style.backgroundColor = 'red';\n }\n }\n });\n dynamicColorSlider.appendTo('#dynamic_color_slider');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      Height
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Gradient color
                                      \n
                                      \n
                                      \n
                                      \n
                                      Dynamic thumb and selection bar color
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var heightSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n min: 0, max: 100\n });\n heightSlider.appendTo('#height_slider');\n\n // Initialize Slider component\n var gradientSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial range values for slider\n value: 50,\n type: 'MinRange'\n });\n gradientSlider.appendTo('#gradient_slider');\n\n var sliderTrack;\n var sliderHandle;\n\n // Initialize Slider component\n var dynamicColorSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n value: 20,\n type: 'MinRange',\n // Handler used for slider created event\n created: function() {\n sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');\n sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');\n (sliderHandle).style.backgroundColor = 'green';\n (sliderTrack).style.backgroundColor = 'green';\n },\n // Handler used for slider change event\n change: function (args) {\n if (args.value > 0 && args.value <= 25) {\n // Change handle and range bar color to green when\n (sliderHandle).style.backgroundColor = 'green';\n (sliderTrack).style.backgroundColor = 'green';\n } else if (args.value > 25 && args.value <= 50) {\n // Change handle and range bar color to royal blue\n (sliderHandle).style.backgroundColor = 'royalblue';\n (sliderTrack).style.backgroundColor = 'royalblue';\n } else if (args.value > 50 && args.value <= 75) {\n // Change handle and range bar color to dark orange\n (sliderHandle).style.backgroundColor = 'darkorange';\n (sliderTrack).style.backgroundColor = 'darkorange';\n } else if (args.value > 75 && args.value <= 100) {\n // Change handle and range bar color to red\n (sliderHandle).style.backgroundColor = 'red';\n (sliderTrack).style.backgroundColor = 'red';\n }\n }\n });\n dynamicColorSlider.appendTo('#dynamic_color_slider');\n"} \ No newline at end of file diff --git a/src/slider/thumb-customization-stack.json b/src/slider/thumb-customization-stack.json index 4fc64d06..62b20e6d 100644 --- a/src/slider/thumb-customization-stack.json +++ b/src/slider/thumb-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      Square
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Circle
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Oval
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Custom image
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var squareSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n min: 0, max: 100\n });\n squareSlider.appendTo('#square_slider');\n\n // Initialize Slider component\n var circleSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100\n });\n circleSlider.appendTo('#circle_slider');\n\n // Initialize Slider component\n var ovalSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100\n });\n ovalSlider.appendTo('#oval_slider');\n\n // Initialize Slider component\n var imageSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100,\n\n ticks: { placement: 'After'}\n });\n imageSlider.appendTo('#image_slider');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      Square
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Circle
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Oval
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Custom image
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Initialize Slider component\n var squareSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n min: 0, max: 100\n });\n squareSlider.appendTo('#square_slider');\n\n // Initialize Slider component\n var circleSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100\n });\n circleSlider.appendTo('#circle_slider');\n\n // Initialize Slider component\n var ovalSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100\n });\n ovalSlider.appendTo('#oval_slider');\n\n // Initialize Slider component\n var imageSlider = new ej.inputs.Slider({\n // Set the value for slider\n value: 30,\n // Set slider minimum and maximum values\n min: 0, max: 100,\n\n ticks: { placement: 'After'}\n });\n imageSlider.appendTo('#image_slider');\n"} \ No newline at end of file diff --git a/src/slider/ticks-customization-stack.json b/src/slider/ticks-customization-stack.json index 9cc0f134..106f8c80 100644 --- a/src/slider/ticks-customization-stack.json +++ b/src/slider/ticks-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      Dynamic ticks color
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Ticks with legends
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Ticks Customization sample\n */\n\n\n // Initialize Slider component\n var ticksSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial value for slider\n value: 20,\n // Set the step value for slider\n step: 5,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep\n ticks: { placement: 'Before', largeStep: 20 },\n // Handler used to add custom class to all tick element\n renderingTicks: function (args) {\n if (args.tickElement.classList.contains('e-large')) {\n args.tickElement.classList.add('e-custom');\n }\n }\n });\n ticksSlider.appendTo('#ticks_slider');\n\n // Initialize Slider component\n var customTicks = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial value for slider\n value: 20,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep, smallstep\n ticks: { placement: 'Both', largeStep: 20, smallStep: 5 },\n // Handler used to customize tick element\n renderedTicks: function (args) {\n var li = args.ticksWrapper.getElementsByClassName('e-large');\n var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];\n for (var i = 0; i < li.length; ++i) {\n li[i].querySelectorAll('.e-tick-both')[1].innerText = remarks[i];\n }\n }\n });\n customTicks.appendTo('#slider');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      Dynamic ticks color
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      Ticks with legends
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Ticks Customization sample\n */\n\n\n // Initialize Slider component\n var ticksSlider = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial value for slider\n value: 20,\n // Set the step value for slider\n step: 5,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep\n ticks: { placement: 'Before', largeStep: 20 },\n // Handler used to add custom class to all tick element\n renderingTicks: function (args) {\n if (args.tickElement.classList.contains('e-large')) {\n args.tickElement.classList.add('e-custom');\n }\n }\n });\n ticksSlider.appendTo('#ticks_slider');\n\n // Initialize Slider component\n var customTicks = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n min: 0, max: 100,\n // Set the intial value for slider\n value: 20,\n // Set the type to render minRange slider\n type: 'MinRange',\n // Initialize ticks with placement, largestep, smallstep\n ticks: { placement: 'Both', largeStep: 20, smallStep: 5 },\n // Handler used to customize tick element\n renderedTicks: function (args) {\n var li = args.ticksWrapper.getElementsByClassName('e-large');\n var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];\n for (var i = 0; i < li.length; ++i) {\n li[i].querySelectorAll('.e-tick-both')[1].innerText = remarks[i];\n }\n }\n });\n customTicks.appendTo('#slider');\n\n"} \ No newline at end of file diff --git a/src/slider/ticks-customization.html b/src/slider/ticks-customization.html index cddd4c42..6f91ecc4 100644 --- a/src/slider/ticks-customization.html +++ b/src/slider/ticks-customization.html @@ -14,14 +14,16 @@
                                      -

                                      This sample demonstrates the customization of Slider's tick. Drag the thumb over the bar for selecting the values between min and max.

                                      +

                                      This sample demonstrates the customization of Slider's tick. Drag the thumb over the bar for selecting the values between + min and max.

                                      In this demo, customization of ticks using CSS is demonstrated.

                                      • Dynamic ticks color - In this sample, ticks has been customized to different colors by adding icon at each ticks.
                                        • -
                                      • Ticks with legends - In this sample, track has been formatted to display custom text using renderingTicks and renderedTicks events.
                                        • +
                                      • Ticks with legends - In this sample, track has been formatted to display custom text using renderingTicks and renderedTicks + events.
                                      @@ -43,148 +45,161 @@ user-select: none; /* Standard syntax */ } - + .slider_labelText { text-align: -webkit-left; font-weight: 500; font-size: 13px; padding-bottom: 40px; } - + .slider_container { margin-top: 40px; } - + .e-bigger .slider-content-wrapper { width: 80%; } - + #ticks_slider.e-control.e-slider .e-range { z-index: unset; } - + .fabric #ticks_slider .e-slider-track { border: 0; height: 4px; top: calc(50% - 2px); margin: 0; } - + #ticks_slider .e-scale .e-tick { background-image: none; visibility: visible; font-family: 'e-customized-icons'; } + @font-face { + font-family: 'e-customized-icons'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8iS4cAAAEoAAAAVmNtYXDS5tJrAAABjAAAAEBnbHlmdMAKbQAAAdQAAAOwaGVhZBNseyYAAADQAAAANmhoZWEHogNjAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQCaAdgAAAHMAAAACG1heHABEAEuAAABCAAAACBuYW1lc0cOBgAABYQAAAIlcG9zdNSlKbQAAAesAAAARwABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAtxzLE18PPPUACwPoAAAAANgtmycAAAAA2C2bJwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAADASIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6QLpZwNS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAukC6Wf//wAA6QLpZ///AAAAAAABAAYABgAAAAEAAgAAAAAAmgHYAAIAAAAAA+oD6gAzAIcAAAEzHxghNT8WEx8THQEPEisBLxI9AT8SAgAQECQmKCgpKScTEhIREA8ODQwKCgQHBQQBAfwqAQMFBgcKCgwNDg8QERISEycpKSgoJiQgDQwMDAwXFhUUEhEPDQsJCAIDAQEBAQMCCAkLDQ8REhQVFhcMDAwMDQ0MDAwMFxYVFBIRDw0LCQgCAwEBAQEDAggJCw0PERIUFRYXDAwMDAGFAQMEBwkKDQ4ICAkKCgoLCwwMDAcNDg8Og3sPDw4NDgwMDAsLCgoKCQgIDg0KCQcEAwJnAQEBAgMHCgsNDxESExUWFwwMDQwNDA0MDAwXFhUTExAPDQwJBwMCAgEBAgIDBwkMDQ8QExMVFhcMDAwNDA0MDQwMFxYVExIRDw0LCgcDAgEBAAAAAwAAAAAD8wPzAF8AwAEhAAABDxMfFz8XLxcPAjcfFA8XLxc/Fx8CJw8UHxc/Fy8XDwIBqRQUFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUFBQVFhYWFhYWFRUTFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUExUVFhYWFhYWtg4NGxkZGBYWFRMSEA8OCwsIBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxkZGBYWFRMSEA8NDAsIBwUDAQEDBQcICwsODxASExUVFxgZGRsbHB0dHh4dHd0QDx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiEDPAYICQoLDQ0OEBAREhITFBUVFRYXFhYWFRQUFBISERAQDg0MDAoJBwcFBAIBAQIEBQcHCQoMDA0OEBAREhIUFBQVFhYWFxYVFRUUExISERAQDg0NCwoJCAYFBAIBAQIEZAQECgwODxASExUVFxgYGhsbHB0dHh4dHRwbGxkZGBYWFBQSEA8NDAoJBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxoYGBcVFRMSEA8OCwsIBwUDAQEDBTYFBQwNEBESFRYXGRobHB0fHyEgIiIiIiEgHx4eHBsaGRcWFBMRDw4MCQgGAwEBAwYICQwODxETFBYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIRDw4MCQgGAwEBAwYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAh0ZW1wLWN1cxJGQl9DaGVja2JveF9zZWxlY3QAAAA=) format('truetype'); + font-weight: normal; + font-style: normal; + } + #ticks_slider .e-scale { z-index: 0 !important; } - + #ticks_slider .e-scale .e-tick.e-custom::before { content: '\e967'; position: absolute; } - + #ticks_slider .e-scale :nth-child(1)::before { color: red; } - + #ticks_slider .e-scale :nth-child(2)::before { color: blue; } - + #ticks_slider .e-scale :nth-child(3)::before { color: green; } - + #ticks_slider .e-scale :nth-child(4)::before { color: blueviolet; } - + #ticks_slider .e-scale :nth-child(5)::before { color: orange; } - + #ticks_slider .e-scale :nth-child(6)::before { color: pink; } - + .material #ticks_slider .e-scale .e-tick.e-custom::before { font-size: 10px; } - + .material #ticks_slider .e-scale .e-tick.e-custom::before { line-height: 2.6; left: calc(50% - 5px); } - + .material #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { left: calc(0% - 5px); } - + .material #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { left: calc(100% - 6px); } - + .fabric #ticks_slider .e-scale .e-tick.e-custom::before { font-size: 14px; } - + .fabric #ticks_slider .e-scale .e-tick.e-custom::before { line-height: 2.4; left: calc(50% - 7px); } - + .fabric #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { left: calc(0% - 7px); } - + .fabric #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { left: calc(100% - 7px); } - + .bootstrap #ticks_slider .e-scale .e-tick.e-custom::before { font-size: 14px; } - + .bootstrap #ticks_slider .e-scale .e-tick.e-custom::before { line-height: 1.8; left: calc(50% - 7px); } - + .bootstrap #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { left: calc(0% - 7px); } - + .bootstrap #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { left: calc(100% - 7px); } - + .highcontrast #ticks_slider .e-scale .e-tick.e-custom::before { font-size: 14px; } - + .highcontrast #ticks_slider .e-scale .e-tick.e-custom::before { line-height: 2.5; left: calc(50% - 7px); } - + .highcontrast #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { left: calc(0% - 7px); } - + .highcontrast #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { left: calc(100% - 7px); } - + #slider+.e-scale .e-tick.e-first-tick :nth-child(2) { margin-left: -20px; } - - @font-face { - font-family: 'e-customized-icons'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8iS4cAAAEoAAAAVmNtYXDS5tJrAAABjAAAAEBnbHlmdMAKbQAAAdQAAAOwaGVhZBNseyYAAADQAAAANmhoZWEHogNjAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQCaAdgAAAHMAAAACG1heHABEAEuAAABCAAAACBuYW1lc0cOBgAABYQAAAIlcG9zdNSlKbQAAAesAAAARwABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAtxzLE18PPPUACwPoAAAAANgtmycAAAAA2C2bJwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAADASIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6QLpZwNS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAukC6Wf//wAA6QLpZ///AAAAAAABAAYABgAAAAEAAgAAAAAAmgHYAAIAAAAAA+oD6gAzAIcAAAEzHxghNT8WEx8THQEPEisBLxI9AT8SAgAQECQmKCgpKScTEhIREA8ODQwKCgQHBQQBAfwqAQMFBgcKCgwNDg8QERISEycpKSgoJiQgDQwMDAwXFhUUEhEPDQsJCAIDAQEBAQMCCAkLDQ8REhQVFhcMDAwMDQ0MDAwMFxYVFBIRDw0LCQgCAwEBAQEDAggJCw0PERIUFRYXDAwMDAGFAQMEBwkKDQ4ICAkKCgoLCwwMDAcNDg8Og3sPDw4NDgwMDAsLCgoKCQgIDg0KCQcEAwJnAQEBAgMHCgsNDxESExUWFwwMDQwNDA0MDAwXFhUTExAPDQwJBwMCAgEBAgIDBwkMDQ8QExMVFhcMDAwNDA0MDQwMFxYVExIRDw0LCgcDAgEBAAAAAwAAAAAD8wPzAF8AwAEhAAABDxMfFz8XLxcPAjcfFA8XLxc/Fx8CJw8UHxc/Fy8XDwIBqRQUFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUFBQVFhYWFhYWFRUTFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUExUVFhYWFhYWtg4NGxkZGBYWFRMSEA8OCwsIBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxkZGBYWFRMSEA8NDAsIBwUDAQEDBQcICwsODxASExUVFxgZGRsbHB0dHh4dHd0QDx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiEDPAYICQoLDQ0OEBAREhITFBUVFRYXFhYWFRQUFBISERAQDg0MDAoJBwcFBAIBAQIEBQcHCQoMDA0OEBAREhIUFBQVFhYWFxYVFRUUExISERAQDg0NCwoJCAYFBAIBAQIEZAQECgwODxASExUVFxgYGhsbHB0dHh4dHRwbGxkZGBYWFBQSEA8NDAoJBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxoYGBcVFRMSEA8OCwsIBwUDAQEDBTYFBQwNEBESFRYXGRobHB0fHyEgIiIiIiEgHx4eHBsaGRcWFBMRDw4MCQgGAwEBAwYICQwODxETFBYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIRDw4MCQgGAwEBAwYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAh0ZW1wLWN1cxJGQl9DaGVja2JveF9zZWxlY3QAAAA=) format('truetype'); - font-weight: normal; - font-style: normal; + + .bootstrap4 #ticks_slider .e-scale .e-tick.e-custom::before { + line-height: 2.3; + left: calc(50% - 7px); + } + + .bootstrap4 #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { + left: calc(0% - 7px); + } + + .bootstrap4 #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { + left: calc(100% - 7px); } - + \ No newline at end of file diff --git a/src/slider/ticks-stack.json b/src/slider/ticks-stack.json index 7af24726..f5bc3a07 100644 --- a/src/slider/ticks-stack.json +++ b/src/slider/ticks-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Disabled
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n min: 10,\n value: 30,\n max: 90,\n step: 5,\n ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true }\n });\n defaultObj.appendTo('#default');\n var rangeObj = new ej.inputs.Slider({\n min: 10,\n max: 90,\n value: [30, 70],\n step: 5,\n type: 'Range',\n ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true }\n });\n rangeObj.appendTo('#range');\n var listObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () {\n defaultObj.ticks = { placement: listObj.value };\n defaultObj.dataBind();\n rangeObj.ticks = { placement: listObj.value };\n rangeObj.dataBind();\n }\n });\n listObj.appendTo('#drop');\n\n // Initialize CheckBox Component\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: false,\n // Bind change event\n change: onChange\n });\n checkBoxObj.appendTo('#disabled');\n\n // Handler used to enable or disable sliders\n function onChange(args) {\n defaultObj.enabled = !args.checked;\n rangeObj.enabled = !args.checked;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Disabled
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n min: 10,\n value: 30,\n max: 90,\n step: 5,\n ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true }\n });\n defaultObj.appendTo('#default');\n var rangeObj = new ej.inputs.Slider({\n min: 10,\n max: 90,\n value: [30, 70],\n step: 5,\n type: 'Range',\n ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true }\n });\n rangeObj.appendTo('#range');\n var listObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () {\n defaultObj.ticks = { placement: listObj.value };\n defaultObj.dataBind();\n rangeObj.ticks = { placement: listObj.value };\n rangeObj.dataBind();\n }\n });\n listObj.appendTo('#drop');\n\n // Initialize CheckBox Component\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: false,\n // Bind change event\n change: onChange\n });\n checkBoxObj.appendTo('#disabled');\n\n // Handler used to enable or disable sliders\n function onChange(args) {\n defaultObj.enabled = !args.checked;\n rangeObj.enabled = !args.checked;\n }\n"} \ No newline at end of file diff --git a/src/slider/tooltip-customization-stack.json b/src/slider/tooltip-customization-stack.json index 5b6339ca..d961f838 100644 --- a/src/slider/tooltip-customization-stack.json +++ b/src/slider/tooltip-customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var timeObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // Set the initial range values for slider\n value: [new Date(2013, 6, 13, 12).getTime(), new Date(2013, 6, 13, 18).getTime()],\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true, cssClass: 'e-tooltip-cutomization'\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n // Initialize ticks with placement, largestep, smallstep\n created: function (args) {\n timeObj.keyUp({ keyCode: 9, target: timeObj.secondHandle });\n timeObj.secondHandle.focus();\n },\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'Range'\n });\n timeObj.appendTo('#default');\n\n var outObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Set the initial range values for slider\n value: new Date(2013, 6, 13, 17).getTime(),\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true, cssClass: 'e-tooltip-cutomization'\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n // Initialize ticks with placement, largestep, smallstep\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'MinRange'\n });\n outObj.appendTo('#out');\n\n function tooltipChangeHandler(args) {\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Splitting the range values from the tooltip using space into an array.\n if (args.text.indexOf('-') !== -1) {\n var totalMiliSeconds = args.text.split(' ');\n // First part is the first handle value\n var firstPart = totalMiliSeconds[0];\n // Second part is the second handle value\n var secondPart = totalMiliSeconds[2];\n\n firstPart = new Date(Number(firstPart)).toLocaleTimeString('en-us', custom);\n secondPart = new Date(Number(secondPart)).toLocaleTimeString('en-us', custom);\n // Assigning our custom text to the tooltip value.\n args.text = firstPart + ' - ' + secondPart;\n } else {\n args.text = 'Until ' + new Date(Number(args.text)).toLocaleTimeString('en-us', custom);\n }\n }\n\n function renderingTicksHandler(args) {\n var totalMiliSeconds = args.value;\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Assigning our custom text to the tick value.\n args.text = new Date(totalMiliSeconds).toLocaleTimeString('en-us', custom);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n timeObj.refreshTooltip();\n outObj.refreshTooltip();\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var timeObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // Set the initial range values for slider\n value: [new Date(2013, 6, 13, 12).getTime(), new Date(2013, 6, 13, 18).getTime()],\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true, cssClass: 'e-tooltip-cutomization'\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n // Initialize ticks with placement, largestep, smallstep\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'Range'\n });\n timeObj.appendTo('#default');\n\n var outObj = new ej.inputs.Slider({\n // Set slider minimum and maximum values\n // new Date(Year, Month, day, hours, minutes, seconds, millseconds)\n min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 23).getTime(),\n // 3600000 milliseconds = 1 Hour, 3600000 / 6 milliseconds = 10 Minutes\n step: 3600000 / 6,\n // Set the initial range values for slider\n value: new Date(2013, 6, 13, 17).getTime(),\n // Bind Tooltip change event for custom formatting\n tooltipChange: tooltipChangeHandler,\n // Initialize tooltip with placement\n tooltip: {\n placement: 'Before', isVisible: true, cssClass: 'e-tooltip-cutomization'\n },\n // Bind ticks event for custom formatting\n renderingTicks: renderingTicksHandler,\n created: function (args) {\n outObj.keyUp({ keyCode: 9, target: outObj.firstHandle });\n outObj.firstHandle.focus();\n },\n // Initialize ticks with placement, largestep, smallstep\n ticks: {\n placement: 'After',\n // 3 * 3600000 milliseconds = 3 Hour\n largeStep: 3 * 3600000,\n smallStep: 3600000, showSmallTicks: true\n },\n // Set the type to render range slider\n type: 'MinRange'\n });\n outObj.appendTo('#out');\n\n function tooltipChangeHandler(args) {\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Splitting the range values from the tooltip using space into an array.\n if (args.text.indexOf('-') !== -1) {\n var totalMiliSeconds = args.text.split(' ');\n // First part is the first handle value\n var firstPart = totalMiliSeconds[0];\n // Second part is the second handle value\n var secondPart = totalMiliSeconds[2];\n\n firstPart = new Date(Number(firstPart)).toLocaleTimeString('en-us', custom);\n secondPart = new Date(Number(secondPart)).toLocaleTimeString('en-us', custom);\n // Assigning our custom text to the tooltip value.\n args.text = firstPart + ' - ' + secondPart;\n } else {\n args.text = 'Until ' + new Date(Number(args.text)).toLocaleTimeString('en-us', custom);\n }\n }\n\n function renderingTicksHandler(args) {\n var totalMiliSeconds = args.value;\n /**\n * toLocaleTimeString is predefined javascript date function, which is used to\n * customize the date in different format\n */\n var custom = { hour: '2-digit', minute: '2-digit' };\n // Assigning our custom text to the tick value.\n args.text = new Date(totalMiliSeconds).toLocaleTimeString('en-us', custom);\n }\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n timeObj.refreshTooltip(timeObj.tooltipTarget);\n outObj.refreshTooltip(outObj.tooltipTarget);\n }\n"} \ No newline at end of file diff --git a/src/slider/tooltip-customization.html b/src/slider/tooltip-customization.html index 80ad6fdc..23864f17 100644 --- a/src/slider/tooltip-customization.html +++ b/src/slider/tooltip-customization.html @@ -44,8 +44,8 @@ margin-top: 40px; } - #default .e-material-handle, - #out .e-material-handle, + #default .e-handle, + #out .e-handle, .bootstrap #out .e-handle, .bootstrap #default .e-handle, .fabric #out .e-handle, @@ -86,16 +86,15 @@ color: #333; } - .e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-range .e-arrow-tip-inner { + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup .e-arrow-tip-inner{ color: #ffd939; } - .e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-range.e-slider-horizontal-before .e-arrow-tip-outer { + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup .e-arrow-tip-outer { border-top-color: #ffd939; - } - .e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-range.e-slider-horizontal-after .e-arrow-tip-outer { + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup .e-arrow-tip-outer { border-bottom-color: #ffd939; } @@ -104,9 +103,9 @@ background-color: #0375be; z-index: unset; } - - .e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-range, - .e-slider-tooltip.e-tooltip-wrap.e-popup { + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-default.e-slider-horizontal-after, + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup.e-material-default.e-slider-horizontal-before, + .e-tooltip-cutomization.e-slider-tooltip.e-tooltip-wrap.e-popup { background-color: #ffd939; border-color: #ffd939; } diff --git a/src/slider/tooltip-customization.js b/src/slider/tooltip-customization.js index 455b7254..75a37240 100644 --- a/src/slider/tooltip-customization.js +++ b/src/slider/tooltip-customization.js @@ -16,10 +16,6 @@ this.default = function () { // Bind ticks event for custom formatting renderingTicks: renderingTicksHandler, // Initialize ticks with placement, largestep, smallstep - created: function (args) { - timeObj.keyUp({ keyCode: 9, target: timeObj.secondHandle }); - timeObj.secondHandle.focus(); - }, ticks: { placement: 'After', // 3 * 3600000 milliseconds = 3 Hour @@ -47,6 +43,10 @@ this.default = function () { }, // Bind ticks event for custom formatting renderingTicks: renderingTicksHandler, + created: function (args) { + outObj.keyUp({ keyCode: 9, target: outObj.firstHandle }); + outObj.firstHandle.focus(); + }, // Initialize ticks with placement, largestep, smallstep ticks: { placement: 'After', @@ -98,7 +98,7 @@ this.default = function () { } // Handler used to reposition the tooltip on page scroll function onScroll() { - timeObj.refreshTooltip(); - outObj.refreshTooltip(); + timeObj.refreshTooltip(timeObj.tooltipTarget); + outObj.refreshTooltip(outObj.tooltipTarget); } }; \ No newline at end of file diff --git a/src/slider/tooltip-stack.json b/src/slider/tooltip-stack.json index 6fc00879..afc28fe0 100644 --- a/src/slider/tooltip-stack.json +++ b/src/slider/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n\n \n \n \n \n \n
                                      \n
                                      Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      ShowOn
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n showButtons: true,\n tooltip: { placement: 'Before', isVisible: true, showOn: 'Focus' }\n });\n defaultObj.appendTo('#default');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n showButtons: true,\n tooltip: { placement: 'Before', isVisible: true, showOn: 'Focus' }\n });\n rangeObj.appendTo('#range');\n var placementObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () {\n defaultObj.tooltip = { placement: placementObj.value };\n defaultObj.dataBind();\n rangeObj.tooltip = { placement: placementObj.value };\n rangeObj.dataBind();\n }\n });\n placementObj.appendTo('#placement');\n\n var showonObj = new ej.dropdowns.DropDownList({\n index: 1,\n popupHeight: '200px',\n change: function () {\n defaultObj.tooltip = { showOn: showonObj.value };\n defaultObj.dataBind();\n rangeObj.tooltip = { showOn: showonObj.value };\n rangeObj.dataBind();\n }\n });\n showonObj.appendTo('#showon');\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var slider = [defaultObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip();\n });\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n\n \n \n \n \n \n
                                      \n
                                      Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      ShowOn
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var defaultObj = new ej.inputs.Slider({\n value: 30,\n showButtons: true,\n tooltip: { placement: 'Before', isVisible: true, showOn: 'Focus' }\n });\n defaultObj.appendTo('#default');\n var rangeObj = new ej.inputs.Slider({\n value: [30, 70],\n type: 'Range',\n showButtons: true,\n tooltip: { placement: 'Before', isVisible: true, showOn: 'Focus' }\n });\n rangeObj.appendTo('#range');\n var placementObj = new ej.dropdowns.DropDownList({\n index: 0,\n popupHeight: '200px',\n change: function () {\n defaultObj.tooltip = { placement: placementObj.value };\n defaultObj.dataBind();\n rangeObj.tooltip = { placement: placementObj.value };\n rangeObj.dataBind();\n }\n });\n placementObj.appendTo('#placement');\n\n var showonObj = new ej.dropdowns.DropDownList({\n index: 1,\n popupHeight: '200px',\n change: function () {\n defaultObj.tooltip = { showOn: showonObj.value };\n defaultObj.dataBind();\n rangeObj.tooltip = { showOn: showonObj.value };\n rangeObj.dataBind();\n }\n });\n showonObj.appendTo('#showon');\n\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n // Handler used to reposition the tooltip on page scroll\n function onScroll() {\n var slider = [defaultObj, rangeObj];\n slider.forEach(function (slider) {\n // Refreshing each slider tooltip object position\n slider.refreshTooltip(slider.tooltipTarget);\n });\n }\n\n"} \ No newline at end of file diff --git a/src/slider/tooltip.js b/src/slider/tooltip.js index 760e5237..5467fcb7 100644 --- a/src/slider/tooltip.js +++ b/src/slider/tooltip.js @@ -45,7 +45,7 @@ this.default = function () { var slider = [defaultObj, rangeObj]; slider.forEach(function (slider) { // Refreshing each slider tooltip object position - slider.refreshTooltip(); + slider.refreshTooltip(slider.tooltipTarget); }); } diff --git a/src/smith-chart/custom-stack.json b/src/smith-chart/custom-stack.json index 153c38fe..17b72a42 100644 --- a/src/smith-chart/custom-stack.json +++ b/src/smith-chart/custom-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n            
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Radius   10\n \n
                                      \n
                                      \n
                                      \n
                                      \n Marker\n \n \n
                                      \n Data Label\n \n \n
                                      \n Animation\n \n \n
                                      \n Tooltip\n \n \n
                                      \n Legend\n \n \n
                                      \n Legend Position\n \n \n
                                      \n
                                      \n \n \n \n \n \n
                                      ","index.js":"{{ripple}}\n var smithchart = new ej.charts.Smithchart({\n load: function (args) {\n var customtheme = location.hash.split('/')[1];\n customtheme = customtheme ? customtheme : 'Material';\n args.smithchart.theme = (customtheme.charAt(0).toUpperCase() + customtheme.slice(1));\n },\n horizontalAxis: {\n minorGridLines: {\n visible: true\n }\n },\n radialAxis: {\n minorGridLines: {\n visible: true\n }\n },\n series: [\n {\n points: [\n { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },\n { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 4 },\n { resistance: 3.5, reactance: 3 }, { resistance: 2.5, reactance: 2 },\n { resistance: 2, reactance: 1.5 }, { resistance: 1.5, reactance: 1.25 },\n { resistance: 1, reactance: 0.9 }, { resistance: 0.5, reactance: 0.6 },\n { resistance: 0.3, reactance: 0.4 }, { resistance: 0, reactance: 0.15 },\n ],\n name: 'Transmission1',\n enableAnimation: false,\n width: 2,\n tooltip: { visible: true },\n enableSmartLabels: false,\n fill: '#0F94C4',\n marker: {\n shape: 'rectangle',\n visible: true,\n border: {\n width: 2,\n }\n }\n }, {\n points: [\n { resistance: 20, reactance: -51 }, { resistance: 10, reactance: -9 },\n { resistance: 9, reactance: -4.4 }, { resistance: 8, reactance: -3.4 },\n { resistance: 7, reactance: -2.6 }, { resistance: 6, reactance: -1.6 },\n { resistance: 5, reactance: -1.1 }, { resistance: 4.5, reactance: -0.9 },\n { resistance: 3.5, reactance: -0.8 }, { resistance: 2.5, reactance: -0.4 },\n { resistance: 2, reactance: -0.2 }, { resistance: 1.5, reactance: 0 },\n { resistance: 1, reactance: 0.1 }, { resistance: 0.5, reactance: 0.1 },\n { resistance: 0.3, reactance: 0.15 }, { resistance: 0, reactance: 0.04 },\n ],\n name: 'Transmission2',\n enableAnimation: false,\n width: 2,\n tooltip: { visible: true },\n enableSmartLabels: false,\n fill: '#EE0C88',\n marker: {\n shape: 'rectangle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n radius: 1,\n legendSettings: {\n visible: true,\n position: 'Top',\n border: { color: 'transparent' },\n shape: 'Circle'\n },\n title: {\n text: 'Impedance Transmission', enableTrim: true, maximumWidth: 200,\n visible: true, font: { size: '16px' }\n }\n });\n smithchart.appendTo('#container');\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 0, type: 'MinRange',\n change: sliderChange,\n max: 1, min: 0, step: 0.1\n }, '#radius');\n setTimeout(function() {\n slider.value = 1;\n slider.dataBind();\n }, 100);\n document.getElementById('radius1').innerHTML = 'Radius ' + 1;\n slider.change = sliderChange = function (e) {\n smithchart.radius = e.value;\n document.getElementById('radius1').innerHTML = 'Radius ' + e.value;\n smithchart.refresh();\n };\n var markerChange;\n var markerCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#marker');\n var datalabelChange;\n var datalabelCheckBox = new ej.buttons.CheckBox({\n change: markerChange\n }, '#datalabel');\n var animateChange;\n var animateCheckBox = new ej.buttons.CheckBox({\n change: markerChange\n }, '#animate');\n var tooltipChange;\n var tooltipCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#tooltip');\n var legendChange;\n var legendCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#legend');\n markerCheckBox.change = markerChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].marker.visible = true;\n smithchart.series[1].marker.visible = true;\n }\n else {\n smithchart.series[0].marker.visible = false;\n smithchart.series[1].marker.visible = false;\n }\n smithchart.refresh();\n };\n datalabelCheckBox.change = datalabelChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].marker.dataLabel.visible = true;\n smithchart.series[1].marker.dataLabel.visible = true;\n }\n else {\n smithchart.series[0].marker.dataLabel.visible = false;\n smithchart.series[1].marker.dataLabel.visible = false;\n }\n smithchart.refresh();\n };\n animateCheckBox.change = animateChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].enableAnimation = true;\n smithchart.series[1].enableAnimation = true;\n }\n else {\n smithchart.series[0].enableAnimation = false;\n smithchart.series[1].enableAnimation = false;\n }\n smithchart.refresh();\n };\n tooltipCheckBox.change = tooltipChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].tooltip.visible = true;\n smithchart.series[1].tooltip.visible = true;\n }\n else {\n smithchart.series[0].tooltip.visible = false;\n smithchart.series[1].tooltip.visible = false;\n }\n smithchart.refresh();\n };\n legendCheckBox.change = legendChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.legendSettings.visible = true;\n mode.enabled = true;\n }\n else {\n smithchart.legendSettings.visible = false;\n mode.enabled = false;\n }\n smithchart.refresh();\n };\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90,\n change: function () {\n var element = mode.value.toString();\n smithchart.legendSettings.position = element;\n smithchart.refresh();\n }\n });\n mode.appendTo('#legend1');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n            
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Radius   10\n \n
                                      \n
                                      \n
                                      \n
                                      \n Marker\n \n \n
                                      \n Data Label\n \n \n
                                      \n Animation\n \n \n
                                      \n Tooltip\n \n \n
                                      \n Legend\n \n \n
                                      \n Legend Position\n \n \n
                                      \n
                                      \n \n \n \n \n \n","index.js":"{{ripple}}\n var smithchart = new ej.charts.Smithchart({\n\n horizontalAxis: {\n minorGridLines: {\n visible: true\n }\n },\n radialAxis: {\n minorGridLines: {\n visible: true\n }\n },\n series: [\n {\n points: [\n { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },\n { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 4 },\n { resistance: 3.5, reactance: 3 }, { resistance: 2.5, reactance: 2 },\n { resistance: 2, reactance: 1.5 }, { resistance: 1.5, reactance: 1.25 },\n { resistance: 1, reactance: 0.9 }, { resistance: 0.5, reactance: 0.6 },\n { resistance: 0.3, reactance: 0.4 }, { resistance: 0, reactance: 0.15 },\n ],\n name: 'Transmission1',\n enableAnimation: false,\n width: 2,\n tooltip: { visible: true },\n enableSmartLabels: false,\n fill: '#0F94C4',\n marker: {\n shape: 'rectangle',\n visible: true,\n border: {\n width: 2,\n }\n }\n }, {\n points: [\n { resistance: 20, reactance: -51 }, { resistance: 10, reactance: -9 },\n { resistance: 9, reactance: -4.4 }, { resistance: 8, reactance: -3.4 },\n { resistance: 7, reactance: -2.6 }, { resistance: 6, reactance: -1.6 },\n { resistance: 5, reactance: -1.1 }, { resistance: 4.5, reactance: -0.9 },\n { resistance: 3.5, reactance: -0.8 }, { resistance: 2.5, reactance: -0.4 },\n { resistance: 2, reactance: -0.2 }, { resistance: 1.5, reactance: 0 },\n { resistance: 1, reactance: 0.1 }, { resistance: 0.5, reactance: 0.1 },\n { resistance: 0.3, reactance: 0.15 }, { resistance: 0, reactance: 0.04 },\n ],\n name: 'Transmission2',\n enableAnimation: false,\n width: 2,\n tooltip: { visible: true },\n enableSmartLabels: false,\n fill: '#EE0C88',\n marker: {\n shape: 'rectangle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n radius: 1,\n legendSettings: {\n visible: true,\n position: 'Top',\n border: { color: 'transparent' },\n shape: 'Circle'\n },\n title: {\n text: 'Impedance Transmission', enableTrim: true, maximumWidth: 200,\n visible: true, font: { size: '16px' }\n }\n });\n smithchart.appendTo('#container');\n // Code for Property Panel\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 0, type: 'MinRange',\n change: sliderChange,\n max: 1, min: 0, step: 0.1\n }, '#radius');\n setTimeout(function() {\n slider.value = 1;\n slider.dataBind();\n }, 100);\n document.getElementById('radius1').innerHTML = 'Radius ' + 1;\n slider.change = sliderChange = function (e) {\n smithchart.radius = e.value;\n document.getElementById('radius1').innerHTML = 'Radius ' + e.value;\n smithchart.refresh();\n };\n var markerChange;\n var markerCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#marker');\n var datalabelChange;\n var datalabelCheckBox = new ej.buttons.CheckBox({\n change: markerChange\n }, '#datalabel');\n var animateChange;\n var animateCheckBox = new ej.buttons.CheckBox({\n change: markerChange\n }, '#animate');\n var tooltipChange;\n var tooltipCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#tooltip');\n var legendChange;\n var legendCheckBox = new ej.buttons.CheckBox({\n change: markerChange, checked: true\n }, '#legend');\n markerCheckBox.change = markerChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].marker.visible = true;\n smithchart.series[1].marker.visible = true;\n }\n else {\n smithchart.series[0].marker.visible = false;\n smithchart.series[1].marker.visible = false;\n }\n smithchart.refresh();\n };\n datalabelCheckBox.change = datalabelChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].marker.dataLabel.visible = true;\n smithchart.series[1].marker.dataLabel.visible = true;\n }\n else {\n smithchart.series[0].marker.dataLabel.visible = false;\n smithchart.series[1].marker.dataLabel.visible = false;\n }\n smithchart.refresh();\n };\n animateCheckBox.change = animateChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].enableAnimation = true;\n smithchart.series[1].enableAnimation = true;\n }\n else {\n smithchart.series[0].enableAnimation = false;\n smithchart.series[1].enableAnimation = false;\n }\n smithchart.refresh();\n };\n tooltipCheckBox.change = tooltipChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.series[0].tooltip.visible = true;\n smithchart.series[1].tooltip.visible = true;\n }\n else {\n smithchart.series[0].tooltip.visible = false;\n smithchart.series[1].tooltip.visible = false;\n }\n smithchart.refresh();\n };\n legendCheckBox.change = legendChange = function (e) {\n var boolean = e.checked;\n if (boolean) {\n smithchart.legendSettings.visible = true;\n mode.enabled = true;\n }\n else {\n smithchart.legendSettings.visible = false;\n mode.enabled = false;\n }\n smithchart.refresh();\n };\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90,\n change: function () {\n var element = mode.value.toString();\n smithchart.legendSettings.position = element;\n smithchart.refresh();\n }\n });\n mode.appendTo('#legend1');\n"} \ No newline at end of file diff --git a/src/smith-chart/custom.html b/src/smith-chart/custom.html index 86728ef6..bd9d4524 100644 --- a/src/smith-chart/custom.html +++ b/src/smith-chart/custom.html @@ -2,6 +2,7 @@
                                      +
                                                 
                                      @@ -85,6 +86,7 @@ In this example, you can see how to render a Smith chart with multiple series. Legend has been enabled to denote the series in Smith chart.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/smith-chart/custom.js b/src/smith-chart/custom.js index aa980e14..7c460876 100644 --- a/src/smith-chart/custom.js +++ b/src/smith-chart/custom.js @@ -1,10 +1,12 @@ this.default = function () { var smithchart = new ej.charts.Smithchart({ + // custom code start load: function (args) { var customtheme = location.hash.split('/')[1]; customtheme = customtheme ? customtheme : 'Material'; args.smithchart.theme = (customtheme.charAt(0).toUpperCase() + customtheme.slice(1)); }, + // custom code end horizontalAxis: { minorGridLines: { visible: true @@ -77,6 +79,7 @@ this.default = function () { } }); smithchart.appendTo('#container'); + // Code for Property Panel var sliderChange; var slider = new ej.inputs.Slider({ value: 0, type: 'MinRange', diff --git a/src/smith-chart/default-stack.json b/src/smith-chart/default-stack.json index 33690725..c576e085 100644 --- a/src/smith-chart/default-stack.json +++ b/src/smith-chart/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n\t\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n Render Type\n \n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}/* eslint-disable */\n\n\n var smithchart = new ej.charts.Smithchart({\n load: function (args) {\n var defaulttheme = location.hash.split('/')[1];\n defaulttheme = defaulttheme ? defaulttheme : 'Material';\n args.smithchart.theme = (defaulttheme.charAt(0).toUpperCase() + defaulttheme.slice(1));\n },\n title: {\n visible: true,\n text: 'Transmission details'\n },\n series: [\n {\n points: [\n { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },\n { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },\n { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },\n { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },\n { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },\n { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },\n ],\n name: 'Transmission1',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n border: {\n width: 2,\n },\n visible: true \n }\n }, {\n points: [\n { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },\n { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },\n { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },\n { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },\n { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },\n { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },\n { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },\n { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 } \n ],\n name: 'Transmission2',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n legendSettings: {\n visible: true,\n shape: 'Circle'\n },\n renderType: 'Impedance',\n });\n smithchart.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90,\n change: function () {\n var element = mode.value.toString();\n smithchart.renderType = element;\n smithchart.refresh();\n }\n });\n mode.appendTo('#rendering');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n\t\n
                                      \n\n
                                      \n \n \n \n \n \n \n \n
                                      \n Render Type\n \n \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}/* eslint-disable */\n\n\n var smithchart = new ej.charts.Smithchart({\n\n title: {\n visible: true,\n text: 'Transmission details'\n },\n series: [\n {\n points: [\n { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },\n { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },\n { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },\n { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },\n { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },\n { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },\n ],\n name: 'Transmission1',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n border: {\n width: 2,\n },\n visible: true \n }\n }, {\n points: [\n { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },\n { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },\n { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },\n { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },\n { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },\n { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },\n { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },\n { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 } \n ],\n name: 'Transmission2',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n legendSettings: {\n visible: true,\n shape: 'Circle'\n },\n renderType: 'Impedance',\n });\n smithchart.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90,\n change: function () {\n var element = mode.value.toString();\n smithchart.renderType = element;\n smithchart.refresh();\n }\n });\n mode.appendTo('#rendering');\n"} \ No newline at end of file diff --git a/src/smith-chart/default.html b/src/smith-chart/default.html index aaff7010..228cd6de 100644 --- a/src/smith-chart/default.html +++ b/src/smith-chart/default.html @@ -3,6 +3,7 @@
                                      +
                                      @@ -35,10 +36,12 @@ Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a data point or tap a data point in touch enabled devices

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/smith-chart/default.js b/src/smith-chart/default.js index 8f70b141..f3b2c494 100644 --- a/src/smith-chart/default.js +++ b/src/smith-chart/default.js @@ -2,11 +2,13 @@ this.default = function () { var smithchart = new ej.charts.Smithchart({ + // custom code start load: function (args) { var defaulttheme = location.hash.split('/')[1]; defaulttheme = defaulttheme ? defaulttheme : 'Material'; args.smithchart.theme = (defaulttheme.charAt(0).toUpperCase() + defaulttheme.slice(1)); }, + // custom code end title: { visible: true, text: 'Transmission details' diff --git a/src/smith-chart/print-export-stack.json b/src/smith-chart/print-export-stack.json index bb82ed49..3ed64602 100644 --- a/src/smith-chart/print-export-stack.json +++ b/src/smith-chart/print-export-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Export Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      File Name
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n","index.js":"{{ripple}}\n var smithchart = new ej.charts.Smithchart({\n load: function (args) {\n var printtheme = location.hash.split('/')[1];\n printtheme = printtheme ? printtheme : 'Material';\n args.smithchart.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1));\n },\n horizontalAxis: {\n minorGridLines: {\n visible: true\n }\n },\n radialAxis: {\n minorGridLines: {\n visible: true\n }\n },\n series: [\n {\n points: [\n { resistance: 0.15, reactance: 0 },\n { resistance: 0.15, reactance: 0.15 },\n { resistance: 0.18, reactance: 0.3 },\n { resistance: 0.2, reactance: 0.4 },\n { resistance: 0.25, reactance: 0.6 },\n { resistance: 0.38, reactance: 0.95 },\n { resistance: 0.6, reactance: 1.25 },\n { resistance: 1, reactance: 1.6 },\n { resistance: 1.65, reactance: 1.9 },\n { resistance: 2.75, reactance: 2 },\n { resistance: 4.5, reactance: 0 },\n { resistance: 3, reactance: -2 },\n { resistance: 1.65, reactance: -1.95 },\n { resistance: 1, reactance: -1.65 },\n { resistance: 0.6, reactance: -1.25 },\n { resistance: 0.35, reactance: -0.9 },\n { resistance: 0.25, reactance: -0.6 },\n { resistance: 0.25, reactance: -0.4 },\n { resistance: 0.25, reactance: -0.3 },\n { resistance: 0.25, reactance: -0.15 },\n { resistance: 0.25, reactance: 0 },\n ],\n name: 'Transmission',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n legendSettings: {\n visible: true,\n shape: 'Circle'\n },\n });\n smithchart.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 90\n });\n mode.appendTo('#mode');\n var togglebtn1 = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn1.appendTo('#togglebtn1');\n document.getElementById('togglebtn1').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n smithchart.export(mode.value, fileName);\n };\n var togglebtn2 = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn2.appendTo('#togglebtn2');\n document.getElementById('togglebtn2').onclick = function () {\n smithchart.print();\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Export Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      File Name
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n","index.js":"{{ripple}}\n var smithchart = new ej.charts.Smithchart({\n\n horizontalAxis: {\n minorGridLines: {\n visible: true\n }\n },\n radialAxis: {\n minorGridLines: {\n visible: true\n }\n },\n series: [\n {\n points: [\n { resistance: 0.15, reactance: 0 },\n { resistance: 0.15, reactance: 0.15 },\n { resistance: 0.18, reactance: 0.3 },\n { resistance: 0.2, reactance: 0.4 },\n { resistance: 0.25, reactance: 0.6 },\n { resistance: 0.38, reactance: 0.95 },\n { resistance: 0.6, reactance: 1.25 },\n { resistance: 1, reactance: 1.6 },\n { resistance: 1.65, reactance: 1.9 },\n { resistance: 2.75, reactance: 2 },\n { resistance: 4.5, reactance: 0 },\n { resistance: 3, reactance: -2 },\n { resistance: 1.65, reactance: -1.95 },\n { resistance: 1, reactance: -1.65 },\n { resistance: 0.6, reactance: -1.25 },\n { resistance: 0.35, reactance: -0.9 },\n { resistance: 0.25, reactance: -0.6 },\n { resistance: 0.25, reactance: -0.4 },\n { resistance: 0.25, reactance: -0.3 },\n { resistance: 0.25, reactance: -0.15 },\n { resistance: 0.25, reactance: 0 },\n ],\n name: 'Transmission',\n enableAnimation: true,\n tooltip: { visible: true },\n marker: {\n shape: 'Circle',\n visible: true,\n border: {\n width: 2,\n }\n }\n },\n ],\n legendSettings: {\n visible: true,\n shape: 'Circle'\n },\n });\n smithchart.appendTo('#container');\n // Code for Property Panel\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 100\n });\n mode.appendTo('#mode');\n var togglebtn1 = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn1.appendTo('#togglebtn1');\n document.getElementById('togglebtn1').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n smithchart.export(mode.value, fileName);\n };\n var togglebtn2 = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn2.appendTo('#togglebtn2');\n document.getElementById('togglebtn2').onclick = function () {\n smithchart.print();\n };\n"} \ No newline at end of file diff --git a/src/smith-chart/print-export.html b/src/smith-chart/print-export.html index 34805682..8b148cad 100644 --- a/src/smith-chart/print-export.html +++ b/src/smith-chart/print-export.html @@ -2,6 +2,7 @@
                                      +
                                      @@ -26,7 +27,7 @@ @@ -60,6 +61,7 @@ In this example, you can see how to export and print the rendered Smith chart. Smith chart can be exported to JPEG, PNG, SVG, and PDF formats.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/smith-chart/print-export.js b/src/smith-chart/print-export.js index 9f6486b6..cafb5824 100644 --- a/src/smith-chart/print-export.js +++ b/src/smith-chart/print-export.js @@ -1,10 +1,12 @@ this.default = function () { var smithchart = new ej.charts.Smithchart({ + // custom code start load: function (args) { var printtheme = location.hash.split('/')[1]; printtheme = printtheme ? printtheme : 'Material'; args.smithchart.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1)); }, + // custom code end horizontalAxis: { minorGridLines: { visible: true @@ -58,9 +60,10 @@ this.default = function () { }, }); smithchart.appendTo('#container'); + // Code for Property Panel var mode = new ej.dropdowns.DropDownList({ index: 0, - width: 90 + width: 100 }); mode.appendTo('#mode'); var togglebtn1 = new ej.buttons.Button({ diff --git a/src/sparkline/axis-types-stack.json b/src/sparkline/axis-types-stack.json index 59a71783..ab3ca7b3 100644 --- a/src/sparkline/axis-types-stack.json +++ b/src/sparkline/axis-types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      - +
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Mean working hours for a month
                                      \n
                                      (DateTime axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      Percentage of the students in a class
                                      \n
                                      (Category axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      Expenditure details of various trips
                                      \n
                                      (Numeric axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n ","index.js":"{{ripple}}\n var sparkload = function(args) {\n var defaulttheme = location.hash.split('/')[1];\n defaulttheme = defaulttheme ? defaulttheme : 'Material';\n args.sparkline.theme = (defaulttheme.charAt(0).toUpperCase() + defaulttheme.slice(1));\n };\n var model = {\n load: sparkload,\n height: '100px',\n width: '170px',\n lineWidth: 1,\n type: 'Column',\n fill: '#3C78EF',\n tooltipSettings: {\n visible: true\n },\n yName: 'yval'\n };\n var datetime = new ej.charts.Sparkline(model);\n datetime.valueType = 'DateTime';\n datetime.dataSource = [\n { xDate: new Date(2018, 0, 1), x: 0, yval: 4 },\n { xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },\n { xDate: new Date(2018, 0, 3), x: 2, yval: 8 },\n { xDate: new Date(2018, 0, 4), x: 3, yval: 7 },\n { xDate: new Date(2018, 0, 5), x: 4, yval: 6 },\n { xDate: new Date(2018, 0, 8), x: 5, yval: 8 },\n { xDate: new Date(2018, 0, 9), x: 6, yval: 8 },\n { xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },\n { xDate: new Date(2018, 0, 11), x: 8, yval: 4 },\n { xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 },\n { xDate: new Date(2018, 0, 15), x: 10, yval: 8 },\n { xDate: new Date(2018, 0, 16), x: 11, yval: 6 },\n { xDate: new Date(2018, 0, 17), x: 12, yval: 6.5 },\n { xDate: new Date(2018, 0, 18), x: 13, yval: 7.5 },\n { xDate: new Date(2018, 0, 19), x: 14, yval: 7.5 },\n { xDate: new Date(2018, 0, 22), x: 15, yval: 4 },\n { xDate: new Date(2018, 0, 23), x: 16, yval: 8 },\n { xDate: new Date(2018, 0, 24), x: 17, yval: 6 },\n { xDate: new Date(2018, 0, 25), x: 18, yval: 7.5 },\n { xDate: new Date(2018, 0, 26), x: 19, yval: 4.5 },\n { xDate: new Date(2018, 0, 29), x: 20, yval: 6 },\n { xDate: new Date(2018, 0, 30), x: 21, yval: 5 },\n { xDate: new Date(2018, 0, 31), x: 22, yval: 7 }\n ];\n datetime.tooltipSettings.format = '${xDate} : ${yval}hrs';\n datetime.xName = 'xDate';\n datetime.appendTo('#datetime');\n var category = new ej.charts.Sparkline(model);\n category.valueType = 'Category';\n category.dataSource = [\n { x: 0, xval: 'Robert', yval: 60 },\n { x: 1, xval: 'Andrew', yval: 65 },\n { x: 2, xval: 'Suyama', yval: 70 },\n { x: 3, xval: 'Michael', yval: 80 },\n { x: 4, xval: 'Janet', yval: 55 },\n { x: 5, xval: 'Davolio', yval: 90 },\n { x: 6, xval: 'Fuller', yval: 75 },\n { x: 7, xval: 'Nancy', yval: 85 },\n { x: 8, xval: 'Margaret', yval: 77 },\n { x: 9, xval: 'Steven', yval: 68 },\n { x: 10, xval: 'Laura', yval: 96 },\n { x: 11, xval: 'Elizabeth', yval: 57 }\n ];\n category.tooltipSettings.format = '${xval} : ${yval}%';\n category.xName = 'xval';\n category.appendTo('#category');\n var numeric = new ej.charts.Sparkline(model);\n numeric.dataSource = [\n { x: 1, xval: 2010, yval: 190 },\n { x: 2, xval: 2011, yval: 165 },\n { x: 3, xval: 2012, yval: 158 },\n { x: 4, xval: 2013, yval: 175 },\n { x: 5, xval: 2014, yval: 200 },\n { x: 6, xval: 2015, yval: 180 },\n { x: 7, xval: 2016, yval: 210 }\n ];\n numeric.valueType = 'Numeric';\n numeric.tooltipSettings.format = '${x} : $${yval}';\n numeric.xName = 'x';\n numeric.appendTo('#numeric');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Mean working hours for a month
                                      \n
                                      (DateTime axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      Percentage of the students in a class
                                      \n
                                      (Category axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      Expenditure details of various trips
                                      \n
                                      (Numeric axis)
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n \n
                                      ","index.js":"{{ripple}}\n\n var model = {\n load: sparkload,\n height: '100px',\n width: '170px',\n lineWidth: 1,\n type: 'Column',\n fill: '#3C78EF',\n tooltipSettings: {\n visible: true\n },\n yName: 'yval'\n };\n var datetime = new ej.charts.Sparkline(model);\n datetime.valueType = 'DateTime';\n datetime.dataSource = [\n { xDate: new Date(2018, 0, 1), x: 0, yval: 4 },\n { xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },\n { xDate: new Date(2018, 0, 3), x: 2, yval: 8 },\n { xDate: new Date(2018, 0, 4), x: 3, yval: 7 },\n { xDate: new Date(2018, 0, 5), x: 4, yval: 6 },\n { xDate: new Date(2018, 0, 8), x: 5, yval: 8 },\n { xDate: new Date(2018, 0, 9), x: 6, yval: 8 },\n { xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },\n { xDate: new Date(2018, 0, 11), x: 8, yval: 4 },\n { xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 },\n { xDate: new Date(2018, 0, 15), x: 10, yval: 8 },\n { xDate: new Date(2018, 0, 16), x: 11, yval: 6 },\n { xDate: new Date(2018, 0, 17), x: 12, yval: 6.5 },\n { xDate: new Date(2018, 0, 18), x: 13, yval: 7.5 },\n { xDate: new Date(2018, 0, 19), x: 14, yval: 7.5 },\n { xDate: new Date(2018, 0, 22), x: 15, yval: 4 },\n { xDate: new Date(2018, 0, 23), x: 16, yval: 8 },\n { xDate: new Date(2018, 0, 24), x: 17, yval: 6 },\n { xDate: new Date(2018, 0, 25), x: 18, yval: 7.5 },\n { xDate: new Date(2018, 0, 26), x: 19, yval: 4.5 },\n { xDate: new Date(2018, 0, 29), x: 20, yval: 6 },\n { xDate: new Date(2018, 0, 30), x: 21, yval: 5 },\n { xDate: new Date(2018, 0, 31), x: 22, yval: 7 }\n ];\n datetime.tooltipSettings.format = '${xDate} : ${yval}hrs';\n datetime.xName = 'xDate';\n datetime.appendTo('#datetime');\n var category = new ej.charts.Sparkline(model);\n category.valueType = 'Category';\n category.dataSource = [\n { x: 0, xval: 'Robert', yval: 60 },\n { x: 1, xval: 'Andrew', yval: 65 },\n { x: 2, xval: 'Suyama', yval: 70 },\n { x: 3, xval: 'Michael', yval: 80 },\n { x: 4, xval: 'Janet', yval: 55 },\n { x: 5, xval: 'Davolio', yval: 90 },\n { x: 6, xval: 'Fuller', yval: 75 },\n { x: 7, xval: 'Nancy', yval: 85 },\n { x: 8, xval: 'Margaret', yval: 77 },\n { x: 9, xval: 'Steven', yval: 68 },\n { x: 10, xval: 'Laura', yval: 96 },\n { x: 11, xval: 'Elizabeth', yval: 57 }\n ];\n category.tooltipSettings.format = '${xval} : ${yval}%';\n category.xName = 'xval';\n category.appendTo('#category');\n var numeric = new ej.charts.Sparkline(model);\n numeric.dataSource = [\n { x: 1, xval: 2010, yval: 190 },\n { x: 2, xval: 2011, yval: 165 },\n { x: 3, xval: 2012, yval: 158 },\n { x: 4, xval: 2013, yval: 175 },\n { x: 5, xval: 2014, yval: 200 },\n { x: 6, xval: 2015, yval: 180 },\n { x: 7, xval: 2016, yval: 210 }\n ];\n numeric.valueType = 'Numeric';\n numeric.tooltipSettings.format = '${x} : $${yval}';\n numeric.xName = 'x';\n numeric.appendTo('#numeric');\n"} \ No newline at end of file diff --git a/src/sparkline/axis-types.html b/src/sparkline/axis-types.html index 4a86ea14..8504f062 100644 --- a/src/sparkline/axis-types.html +++ b/src/sparkline/axis-types.html @@ -33,10 +33,7 @@ - - - -
                                      +

                                      This sample depicts the various types of axis value types available in sparkline.

                                      @@ -45,8 +42,6 @@

                                      In this example, you can see the sparklines with various axis value types such as date-time, category, and numeric. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch enabled devices.

                                      - -
                                      \n
                                      \n
                                      \n

                                      \n Worldwide car sales by brand - 2017\n

                                      \n \n \n \n \n \n \n \n \n \n
                                      Sales Percentage\n
                                      \n
                                      Sales Count\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Source:\n carsalesbase.com\n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n            \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t\t\t\t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Sparkline\n \n \n
                                      \n Special Points\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      All\n \n Negative\n \n
                                      First\n \n Last\n \n
                                      High\n \n Low\n \n
                                      \n
                                      \n Marker\n \n \n
                                      \n Data Label\n \n \n
                                      \n Enable RTL\n \n \n
                                      \n Tooltip\n \n \n
                                      \n Track Line\n \n \n
                                      \n Axis Line\n \n \n
                                      \n Axis Value\n    0\n \n
                                      \n
                                      \n
                                      ","index.js":"{{ripple}}\n var sparkload = function(args) {\n var customtheme = location.hash.split('/')[1];\n customtheme = customtheme ? customtheme : 'Material';\n args.sparkline.theme = (customtheme.charAt(0).toUpperCase() + customtheme.slice(1));\n };\n var percentage = new ej.charts.Sparkline({\n load: sparkload, \n lineWidth: 1,\n type: 'Column',\n valueType: 'Category',\n height: '200px',\n width: '180px',\n dataSource: [\n { x: 0, xval: 'AUDI', yval: 1 },\n { x: 1, xval: 'BMW', yval: 5 },\n { x: 2, xval: 'BUICK', yval: -1 },\n { x: 3, xval: 'CETROEN', yval: -6 }, \n { x: 6, xval: 'FORD', yval: -2 },\n { x: 7, xval: 'HONDA', yval: 7 },\n { x: 8, xval: 'HYUNDAI', yval: -9 },\n { x: 9, xval: 'JEEP', yval: 0 },\n { x: 4, xval: 'CHEVROLET', yval: 0 },\n { x: 5, xval: 'FIAT', yval: 1 },\n { x: 10, xval: 'KIA', yval: -10 },\n { x: 11, xval: 'MAZDA', yval: 3 }, \n { x: 14, xval: 'OPEL/VHALL', yval: -6 },\n { x: 15, xval: 'PEUGEOT', yval: 0 },\n { x: 16, xval: 'RENAULT', yval: 7 },\n { x: 17, xval: 'SKODA', yval: 5 },\n { x: 12, xval: 'MERCEDES', yval: 13 },\n { x: 13, xval: 'NISSAN', yval: 5 },\n { x: 18, xval: 'SUBARU', yval: 5 },\n { x: 19, xval: 'SUZUKI', yval: 11 },\n { x: 20, xval: 'TOYOTA', yval: 5 },\n { x: 21, xval: 'VOLKSWAGEN', yval: 3 },\n ],\n xName: 'xval', yName: 'yval',\n markerSettings: {\n fill: 'red',\n size: 5\n },\n tooltipSettings: {\n format: '${xval}: ${yval}',\n trackLineSettings: {\n color: 'red',\n width: 1\n }\n },\n axisSettings: {\n lineSettings: {\n color: 'red',\n width: 2\n }\n }\n });\n percentage.appendTo('#percentage');\n var sales = new ej.charts.Sparkline({\n load: sparkload,\n height: '200px',\n width: '180px',\n lineWidth: 1,\n type: 'Column',\n valueType: 'Category',\n dataSource: [\n { x: 0, xval: 'AUDI', yval: 1847613 },\n { x: 1, xval: 'BMW', yval: 2030331 },\n { x: 2, xval: 'BUICK', yval: 1465823 },\n { x: 3, xval: 'CETROEN', yval: 999888 },\n { x: 4, xval: 'CHEVROLET', yval: 3857388 },\n { x: 5, xval: 'FIAT', yval: 1503806 },\n { x: 6, xval: 'FORD', yval: 5953122 },\n { x: 7, xval: 'HONDA', yval: 4967689 },\n { x: 8, xval: 'HYUNDAI', yval: 3951176 },\n { x: 9, xval: 'JEEP', yval: 1390130 },\n { x: 10, xval: 'KIA', yval: 2511293 },\n { x: 11, xval: 'MAZDA', yval: 1495557 },\n { x: 12, xval: 'MERCEDES', yval: 2834181 },\n { x: 13, xval: 'NISSAN', yval: 4834694 },\n { x: 14, xval: 'OPEL/VHALL', yval: 996559 },\n { x: 15, xval: 'PEUGEOT', yval: 1590300 },\n { x: 16, xval: 'RENAULT', yval: 2275227 },\n { x: 17, xval: 'SKODA', yval: 1180672 },\n { x: 18, xval: 'SUBARU', yval: 1050390 },\n { x: 19, xval: 'SUZUKI', yval: 2891415 },\n { x: 20, xval: 'TOYOTA', yval: 7843423 },\n { x: 21, xval: 'VOLKSWAGEN', yval: 6639250 },\n ],\n xName: 'xval', yName: 'yval',\n axisSettings: {\n lineSettings: {\n color: 'red',\n width: 2\n }\n },\n markerSettings: {\n fill: 'red',\n size: 5\n },\n tooltipSettings: {\n format: '${xval}: ${yval}',\n trackLineSettings: {\n color: 'red',\n width: 1\n }\n }\n });\n sales.appendTo('#sales');\n var sampleChange;\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Sales Percentage',\n width: '100%',\n change: sampleChange\n });\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 0, type: 'MinRange',\n change: sliderChange,\n max: 100, min: 0\n }, '#range');\n var allchange;\n var allCheckBox = new ej.buttons.CheckBox({\n checked: true, change: allchange\n }, '#all');\n var otherchange;\n var negativeCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#negative');\n var firstCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#first');\n var lastCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#last');\n var highCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#high');\n var lowCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#low');\n var markerchange;\n var markerCheckBox = new ej.buttons.CheckBox({\n change: markerchange\n }, '#marker');\n var datalabelchange;\n var datalabelCheckBox = new ej.buttons.CheckBox({\n change: datalabelchange\n }, '#datalabel');\n\tvar enableRTLchange;\n var enableRTLCheckBox = new ej.buttons.CheckBox({\n change: enableRTLchange\n }, '#enableRTL');\n var tooltipchange;\n var tooltipCheckBox = new ej.buttons.CheckBox({\n change: tooltipchange\n }, '#tooltip');\n var trackerchange;\n var trackerCheckBox = new ej.buttons.CheckBox({\n change: trackerchange\n }, '#trackline');\n var axislinechange;\n var axislineCheckBox = new ej.buttons.CheckBox({\n change: axislinechange\n }, '#axis1');\n sampleValue.change = sampleChange = function (drop) {\n if (drop.value === 'salespercentage') {\n slider.min = 0;\n slider.max = 10;\n }\n else {\n slider.min = 0;\n slider.max = 5000000;\n }\n if ((drop.value === 'salespercentage' && percentage.markerSettings.visible.length) ||\n (drop.value === 'salescount' && sales.markerSettings.visible.length)) {\n markerCheckBox.checked = true;\n }\n else {\n markerCheckBox.checked = false;\n }\n markerCheckBox.change = markerchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.markerSettings.visible = getVisible();\n }\n else {\n spark.markerSettings.visible = [];\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.dataLabelSettings.visible.length) ||\n (drop.value === 'salescount' && sales.dataLabelSettings.visible.length)) {\n datalabelCheckBox.checked = true;\n }\n else {\n datalabelCheckBox.checked = false;\n }\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (!markerCheckBox.checked && !datalabelCheckBox.checked) {\n allCheckBox.checked = false;\n negativeCheckBox.checked = false;\n firstCheckBox.checked = false;\n lastCheckBox.checked = false;\n highCheckBox.checked = false;\n lowCheckBox.checked = false;\n }\n if (markerCheckBox.checked) {\n var spark_1 = drop.value === 'salespercentage' ? percentage : sales;\n allCheckBox.checked = spark_1.markerSettings.visible.indexOf('All') > -1;\n negativeCheckBox.checked = spark_1.markerSettings.visible.indexOf('Negative') > -1;\n firstCheckBox.checked = spark_1.markerSettings.visible.indexOf('Start') > -1;\n lastCheckBox.checked = spark_1.markerSettings.visible.indexOf('End') > -1;\n highCheckBox.checked = spark_1.markerSettings.visible.indexOf('High') > -1;\n lowCheckBox.checked = spark_1.markerSettings.visible.indexOf('Low') > -1;\n }\n if (datalabelCheckBox.checked) {\n var spark_2 = drop.value === 'salespercentage' ? percentage : sales;\n allCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('All') > -1;\n negativeCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Negative') > -1;\n firstCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Start') > -1;\n lastCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('End') > -1;\n highCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('High') > -1;\n lowCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Low') > -1;\n }\n datalabelCheckBox.change = datalabelchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.dataLabelSettings.visible = getVisible();\n }\n else {\n spark.dataLabelSettings.visible = [];\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.tooltipSettings.visible === true) ||\n (drop.value === 'salescount' && sales.tooltipSettings.visible === true)) {\n tooltipCheckBox.checked = true;\n }\n else {\n tooltipCheckBox.checked = false;\n }\n if ((drop.value === 'salespercentage' && percentage.enableRtl === true) ||\n (drop.value === 'salescount' && sales.enableRtl === true)) {\n enableRTLCheckBox.checked = true;\n }\n else {\n enableRTLCheckBox.checked = false;\n }\n tooltipCheckBox.change = tooltipchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.visible = true;\n }\n else {\n spark.tooltipSettings.visible = false;\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.tooltipSettings.trackLineSettings.visible === true) ||\n (drop.value === 'salescount' && sales.tooltipSettings.trackLineSettings.visible === true)) {\n trackerCheckBox.checked = true;\n }\n else {\n trackerCheckBox.checked = false;\n }\n trackerCheckBox.change = trackerchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.trackLineSettings.visible = true;\n }\n else {\n spark.tooltipSettings.trackLineSettings.visible = false;\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.axisSettings.lineSettings.visible === true) ||\n (drop.value === 'salescount' && sales.axisSettings.lineSettings.visible === true)) {\n axislineCheckBox.checked = true;\n }\n else {\n axislineCheckBox.checked = false;\n }\n axislineCheckBox.change = axislinechange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.axisSettings.lineSettings.visible = true;\n }\n else {\n spark.axisSettings.lineSettings.visible = false;\n }\n spark.refresh();\n };\n if (drop.value === 'salespercentage' && percentage.axisSettings.value !== 0) {\n slider.value = percentage.axisSettings.value;\n slider.min = 0;\n slider.max = 10;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + percentage.axisSettings.value;\n }\n if (drop.value === 'salescount' && sales.axisSettings.value !== 0) {\n slider.value = sales.axisSettings.value;\n slider.min = 0;\n slider.max = 5000000;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + sales.axisSettings.value;\n }\n slider.change = sliderChange = function (e) {\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n spark.axisSettings.value = e.value;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + e.value;\n spark.refresh();\n };\n allCheckBox.checked = !(negativeCheckBox.checked || highCheckBox.checked || lowCheckBox.checked ||\n firstCheckBox.checked || lastCheckBox.checked);\n negativeCheckBox.disabled = highCheckBox.disabled = lowCheckBox.disabled = firstCheckBox.disabled =\n lastCheckBox.disabled = allCheckBox.checked;\n };\n sampleValue.appendTo('#spark');\n if (sampleValue.value === 'salespercentage') {\n slider.min = 0;\n slider.max = 10;\n }\n else {\n slider.min = 0;\n slider.max = 5000000;\n }\n allCheckBox.change = allchange = function (e) {\n var checked = e.checked;\n negativeCheckBox.disabled = checked;\n firstCheckBox.disabled = checked;\n lastCheckBox.disabled = checked;\n highCheckBox.disabled = checked;\n lowCheckBox.disabled = checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n spark.markerSettings.visible = (checked && markerCheckBox.checked) ? ['All'] : (markerCheckBox.checked) ? getVisible() : [];\n spark.dataLabelSettings.visible = (checked && datalabelCheckBox.checked) ? ['All'] :\n (datalabelCheckBox.checked) ? getVisible() : [];\n spark.refresh();\n };\n negativeCheckBox.change = otherchange = firstCheckBox.change = lastCheckBox.change = highCheckBox.change =\n lowCheckBox.change = function (e) {\n processMarkerLabel(e);\n };\n var processMarkerLabel = function (e) {\n var checked = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (markerCheckBox.checked) {\n spark.markerSettings.visible = getVisible();\n spark.refresh();\n }\n if (datalabelCheckBox.checked) {\n spark.dataLabelSettings.visible = getVisible();\n spark.refresh();\n }\n };\n var getVisible = function () {\n var visible = [];\n if (allCheckBox.checked) {\n return ['All'];\n }\n if (negativeCheckBox.checked) {\n visible.push('Negative');\n }\n if (firstCheckBox.checked) {\n visible.push('Start');\n }\n if (lastCheckBox.checked) {\n visible.push('End');\n }\n if (highCheckBox.checked) {\n visible.push('High');\n }\n if (lowCheckBox.checked) {\n visible.push('Low');\n }\n return visible;\n };\n markerCheckBox.change = markerchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.markerSettings.visible = getVisible();\n }\n else {\n spark.markerSettings.visible = [];\n }\n spark.refresh();\n };\n datalabelCheckBox.change = datalabelchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.dataLabelSettings.visible = getVisible();\n }\n else {\n spark.dataLabelSettings.visible = [];\n }\n spark.refresh();\n };\n\tenableRTLCheckBox.change = enableRTLchange = function (e) {\n\t\tvar boolean = e.checked;\n\t\tvar spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n\t\tif(boolean == true) {\n\t\t\tspark.enableRtl = true;\n\t\t}\n\t\telse {\n\t\t\tspark.enableRtl = false;\n\t\t}\n\t\tspark.refresh();\n\t};\n tooltipCheckBox.change = tooltipchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.visible = true;\n spark.tooltipSettings.format = '${xval}: ${yval}';\n }\n else {\n spark.tooltipSettings.visible = false;\n }\n spark.refresh();\n };\n trackerCheckBox.change = trackerchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.trackLineSettings.visible = true;\n spark.tooltipSettings.trackLineSettings.color = 'red';\n spark.tooltipSettings.trackLineSettings.width = 1;\n }\n else {\n spark.tooltipSettings.trackLineSettings.visible = false;\n }\n spark.refresh();\n };\n axislineCheckBox.change = axislinechange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.axisSettings.lineSettings.visible = true;\n spark.axisSettings.lineSettings.color = 'red';\n spark.axisSettings.lineSettings.width = 2;\n }\n else {\n spark.axisSettings.lineSettings.visible = false;\n }\n spark.refresh();\n };\n slider.change = sliderChange = function (e) {\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n spark.axisSettings.value = e.value;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + e.value;\n spark.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n

                                      \n Worldwide car sales by brand - 2017\n

                                      \n \n \n \n \n \n \n \n \n \n
                                      Sales Percentage\n
                                      \n
                                      Sales Count\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Source:\n carsalesbase.com\n
                                      \n
                                      \n \n \n \n \n \n\n \n
                                      \n            \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t\t\t\t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Sparkline\n \n \n
                                      \n Special Points\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      All\n \n Negative\n \n
                                      First\n \n Last\n \n
                                      High\n \n Low\n \n
                                      \n
                                      \n Marker\n \n \n
                                      \n Data Label\n \n \n
                                      \n Enable RTL\n \n \n
                                      \n Tooltip\n \n \n
                                      \n Track Line\n \n \n
                                      \n Axis Line\n \n \n
                                      \n Axis Value\n    0\n \n
                                      \n
                                      \n
                                      ","index.js":"{{ripple}}\n\n var percentage = new ej.charts.Sparkline({\n\n lineWidth: 1,\n type: 'Column',\n valueType: 'Category',\n height: '200px',\n width: '180px',\n dataSource: [\n { x: 0, xval: 'AUDI', yval: 1 },\n { x: 1, xval: 'BMW', yval: 5 },\n { x: 2, xval: 'BUICK', yval: -1 },\n { x: 3, xval: 'CETROEN', yval: -6 }, \n { x: 6, xval: 'FORD', yval: -2 },\n { x: 7, xval: 'HONDA', yval: 7 },\n { x: 8, xval: 'HYUNDAI', yval: -9 },\n { x: 9, xval: 'JEEP', yval: 0 },\n { x: 4, xval: 'CHEVROLET', yval: 0 },\n { x: 5, xval: 'FIAT', yval: 1 },\n { x: 10, xval: 'KIA', yval: -10 },\n { x: 11, xval: 'MAZDA', yval: 3 }, \n { x: 14, xval: 'OPEL/VHALL', yval: -6 },\n { x: 15, xval: 'PEUGEOT', yval: 0 },\n { x: 16, xval: 'RENAULT', yval: 7 },\n { x: 17, xval: 'SKODA', yval: 5 },\n { x: 12, xval: 'MERCEDES', yval: 13 },\n { x: 13, xval: 'NISSAN', yval: 5 },\n { x: 18, xval: 'SUBARU', yval: 5 },\n { x: 19, xval: 'SUZUKI', yval: 11 },\n { x: 20, xval: 'TOYOTA', yval: 5 },\n { x: 21, xval: 'VOLKSWAGEN', yval: 3 },\n ],\n xName: 'xval', yName: 'yval',\n markerSettings: {\n fill: 'red',\n size: 5\n },\n tooltipSettings: {\n format: '${xval}: ${yval}',\n trackLineSettings: {\n color: 'red',\n width: 1\n }\n },\n axisSettings: {\n lineSettings: {\n color: 'red',\n width: 2\n }\n }\n });\n percentage.appendTo('#percentage');\n var sales = new ej.charts.Sparkline({\n load: sparkload,\n height: '200px',\n width: '180px',\n lineWidth: 1,\n type: 'Column',\n valueType: 'Category',\n dataSource: [\n { x: 0, xval: 'AUDI', yval: 1847613 },\n { x: 1, xval: 'BMW', yval: 2030331 },\n { x: 2, xval: 'BUICK', yval: 1465823 },\n { x: 3, xval: 'CETROEN', yval: 999888 },\n { x: 4, xval: 'CHEVROLET', yval: 3857388 },\n { x: 5, xval: 'FIAT', yval: 1503806 },\n { x: 6, xval: 'FORD', yval: 5953122 },\n { x: 7, xval: 'HONDA', yval: 4967689 },\n { x: 8, xval: 'HYUNDAI', yval: 3951176 },\n { x: 9, xval: 'JEEP', yval: 1390130 },\n { x: 10, xval: 'KIA', yval: 2511293 },\n { x: 11, xval: 'MAZDA', yval: 1495557 },\n { x: 12, xval: 'MERCEDES', yval: 2834181 },\n { x: 13, xval: 'NISSAN', yval: 4834694 },\n { x: 14, xval: 'OPEL/VHALL', yval: 996559 },\n { x: 15, xval: 'PEUGEOT', yval: 1590300 },\n { x: 16, xval: 'RENAULT', yval: 2275227 },\n { x: 17, xval: 'SKODA', yval: 1180672 },\n { x: 18, xval: 'SUBARU', yval: 1050390 },\n { x: 19, xval: 'SUZUKI', yval: 2891415 },\n { x: 20, xval: 'TOYOTA', yval: 7843423 },\n { x: 21, xval: 'VOLKSWAGEN', yval: 6639250 },\n ],\n xName: 'xval', yName: 'yval',\n axisSettings: {\n lineSettings: {\n color: 'red',\n width: 2\n }\n },\n markerSettings: {\n fill: 'red',\n size: 5\n },\n tooltipSettings: {\n format: '${xval}: ${yval}',\n trackLineSettings: {\n color: 'red',\n width: 1\n }\n }\n });\n sales.appendTo('#sales');\n // Code for Property Panel\n var sampleChange;\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Sales Percentage',\n width: '100%',\n change: sampleChange\n });\n var sliderChange;\n var slider = new ej.inputs.Slider({\n value: 0, type: 'MinRange',\n change: sliderChange,\n max: 100, min: 0\n }, '#range');\n var allchange;\n var allCheckBox = new ej.buttons.CheckBox({\n checked: true, change: allchange\n }, '#all');\n var otherchange;\n var negativeCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#negative');\n var firstCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#first');\n var lastCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#last');\n var highCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#high');\n var lowCheckBox = new ej.buttons.CheckBox({\n change: otherchange, disabled: true\n }, '#low');\n var markerchange;\n var markerCheckBox = new ej.buttons.CheckBox({\n change: markerchange\n }, '#marker');\n var datalabelchange;\n var datalabelCheckBox = new ej.buttons.CheckBox({\n change: datalabelchange\n }, '#datalabel');\n\tvar enableRTLchange;\n var enableRTLCheckBox = new ej.buttons.CheckBox({\n change: enableRTLchange\n }, '#enableRTL');\n var tooltipchange;\n var tooltipCheckBox = new ej.buttons.CheckBox({\n change: tooltipchange\n }, '#tooltip');\n var trackerchange;\n var trackerCheckBox = new ej.buttons.CheckBox({\n change: trackerchange\n }, '#trackline');\n var axislinechange;\n var axislineCheckBox = new ej.buttons.CheckBox({\n change: axislinechange\n }, '#axis1');\n sampleValue.change = sampleChange = function (drop) {\n if (drop.value === 'salespercentage') {\n slider.min = 0;\n slider.max = 10;\n }\n else {\n slider.min = 0;\n slider.max = 5000000;\n }\n if ((drop.value === 'salespercentage' && percentage.markerSettings.visible.length) ||\n (drop.value === 'salescount' && sales.markerSettings.visible.length)) {\n markerCheckBox.checked = true;\n }\n else {\n markerCheckBox.checked = false;\n }\n markerCheckBox.change = markerchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.markerSettings.visible = getVisible();\n }\n else {\n spark.markerSettings.visible = [];\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.dataLabelSettings.visible.length) ||\n (drop.value === 'salescount' && sales.dataLabelSettings.visible.length)) {\n datalabelCheckBox.checked = true;\n }\n else {\n datalabelCheckBox.checked = false;\n }\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (!markerCheckBox.checked && !datalabelCheckBox.checked) {\n allCheckBox.checked = false;\n negativeCheckBox.checked = false;\n firstCheckBox.checked = false;\n lastCheckBox.checked = false;\n highCheckBox.checked = false;\n lowCheckBox.checked = false;\n }\n if (markerCheckBox.checked) {\n var spark_1 = drop.value === 'salespercentage' ? percentage : sales;\n allCheckBox.checked = spark_1.markerSettings.visible.indexOf('All') > -1;\n negativeCheckBox.checked = spark_1.markerSettings.visible.indexOf('Negative') > -1;\n firstCheckBox.checked = spark_1.markerSettings.visible.indexOf('Start') > -1;\n lastCheckBox.checked = spark_1.markerSettings.visible.indexOf('End') > -1;\n highCheckBox.checked = spark_1.markerSettings.visible.indexOf('High') > -1;\n lowCheckBox.checked = spark_1.markerSettings.visible.indexOf('Low') > -1;\n }\n if (datalabelCheckBox.checked) {\n var spark_2 = drop.value === 'salespercentage' ? percentage : sales;\n allCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('All') > -1;\n negativeCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Negative') > -1;\n firstCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Start') > -1;\n lastCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('End') > -1;\n highCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('High') > -1;\n lowCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Low') > -1;\n }\n datalabelCheckBox.change = datalabelchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.dataLabelSettings.visible = getVisible();\n }\n else {\n spark.dataLabelSettings.visible = [];\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.tooltipSettings.visible === true) ||\n (drop.value === 'salescount' && sales.tooltipSettings.visible === true)) {\n tooltipCheckBox.checked = true;\n }\n else {\n tooltipCheckBox.checked = false;\n }\n if ((drop.value === 'salespercentage' && percentage.enableRtl === true) ||\n (drop.value === 'salescount' && sales.enableRtl === true)) {\n enableRTLCheckBox.checked = true;\n }\n else {\n enableRTLCheckBox.checked = false;\n }\n tooltipCheckBox.change = tooltipchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.visible = true;\n }\n else {\n spark.tooltipSettings.visible = false;\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.tooltipSettings.trackLineSettings.visible === true) ||\n (drop.value === 'salescount' && sales.tooltipSettings.trackLineSettings.visible === true)) {\n trackerCheckBox.checked = true;\n }\n else {\n trackerCheckBox.checked = false;\n }\n trackerCheckBox.change = trackerchange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.trackLineSettings.visible = true;\n }\n else {\n spark.tooltipSettings.trackLineSettings.visible = false;\n }\n spark.refresh();\n };\n if ((drop.value === 'salespercentage' && percentage.axisSettings.lineSettings.visible === true) ||\n (drop.value === 'salescount' && sales.axisSettings.lineSettings.visible === true)) {\n axislineCheckBox.checked = true;\n }\n else {\n axislineCheckBox.checked = false;\n }\n axislineCheckBox.change = axislinechange = function (e) {\n var boolean = e.checked;\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.axisSettings.lineSettings.visible = true;\n }\n else {\n spark.axisSettings.lineSettings.visible = false;\n }\n spark.refresh();\n };\n if (drop.value === 'salespercentage' && percentage.axisSettings.value !== 0) {\n slider.value = percentage.axisSettings.value;\n slider.min = 0;\n slider.max = 10;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + percentage.axisSettings.value;\n }\n if (drop.value === 'salescount' && sales.axisSettings.value !== 0) {\n slider.value = sales.axisSettings.value;\n slider.min = 0;\n slider.max = 5000000;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + sales.axisSettings.value;\n }\n slider.change = sliderChange = function (e) {\n var spark = drop.value === 'salespercentage' ? percentage : sales;\n spark.axisSettings.value = e.value;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + e.value;\n spark.refresh();\n };\n allCheckBox.checked = !(negativeCheckBox.checked || highCheckBox.checked || lowCheckBox.checked ||\n firstCheckBox.checked || lastCheckBox.checked);\n negativeCheckBox.disabled = highCheckBox.disabled = lowCheckBox.disabled = firstCheckBox.disabled =\n lastCheckBox.disabled = allCheckBox.checked;\n };\n sampleValue.appendTo('#spark');\n if (sampleValue.value === 'salespercentage') {\n slider.min = 0;\n slider.max = 10;\n }\n else {\n slider.min = 0;\n slider.max = 5000000;\n }\n allCheckBox.change = allchange = function (e) {\n var checked = e.checked;\n negativeCheckBox.disabled = checked;\n firstCheckBox.disabled = checked;\n lastCheckBox.disabled = checked;\n highCheckBox.disabled = checked;\n lowCheckBox.disabled = checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n spark.markerSettings.visible = (checked && markerCheckBox.checked) ? ['All'] : (markerCheckBox.checked) ? getVisible() : [];\n spark.dataLabelSettings.visible = (checked && datalabelCheckBox.checked) ? ['All'] :\n (datalabelCheckBox.checked) ? getVisible() : [];\n spark.refresh();\n };\n negativeCheckBox.change = otherchange = firstCheckBox.change = lastCheckBox.change = highCheckBox.change =\n lowCheckBox.change = function (e) {\n processMarkerLabel(e);\n };\n var processMarkerLabel = function (e) {\n var checked = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (markerCheckBox.checked) {\n spark.markerSettings.visible = getVisible();\n spark.refresh();\n }\n if (datalabelCheckBox.checked) {\n spark.dataLabelSettings.visible = getVisible();\n spark.refresh();\n }\n };\n var getVisible = function () {\n var visible = [];\n if (allCheckBox.checked) {\n return ['All'];\n }\n if (negativeCheckBox.checked) {\n visible.push('Negative');\n }\n if (firstCheckBox.checked) {\n visible.push('Start');\n }\n if (lastCheckBox.checked) {\n visible.push('End');\n }\n if (highCheckBox.checked) {\n visible.push('High');\n }\n if (lowCheckBox.checked) {\n visible.push('Low');\n }\n return visible;\n };\n markerCheckBox.change = markerchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.markerSettings.visible = getVisible();\n }\n else {\n spark.markerSettings.visible = [];\n }\n spark.refresh();\n };\n datalabelCheckBox.change = datalabelchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.dataLabelSettings.visible = getVisible();\n }\n else {\n spark.dataLabelSettings.visible = [];\n }\n spark.refresh();\n };\n\tenableRTLCheckBox.change = enableRTLchange = function (e) {\n\t\tvar boolean = e.checked;\n\t\tvar spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n\t\tif(boolean == true) {\n\t\t\tspark.enableRtl = true;\n\t\t} \n\t\telse {\n\t\t\tspark.enableRtl = false;\n\t\t}\n\t\tspark.refresh();\n\t};\n tooltipCheckBox.change = tooltipchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.visible = true;\n spark.tooltipSettings.format = '${xval}: ${yval}';\n }\n else {\n spark.tooltipSettings.visible = false;\n }\n spark.refresh();\n };\n trackerCheckBox.change = trackerchange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.tooltipSettings.trackLineSettings.visible = true;\n spark.tooltipSettings.trackLineSettings.color = 'red';\n spark.tooltipSettings.trackLineSettings.width = 1;\n }\n else {\n spark.tooltipSettings.trackLineSettings.visible = false;\n }\n spark.refresh();\n };\n axislineCheckBox.change = axislinechange = function (e) {\n var boolean = e.checked;\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n if (boolean) {\n spark.axisSettings.lineSettings.visible = true;\n spark.axisSettings.lineSettings.color = 'red';\n spark.axisSettings.lineSettings.width = 2;\n }\n else {\n spark.axisSettings.lineSettings.visible = false;\n }\n spark.refresh();\n };\n slider.change = sliderChange = function (e) {\n var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n spark.axisSettings.value = e.value;\n document.getElementById('axisval').innerHTML = 'Axis value: ' + e.value;\n spark.refresh();\n };\n"} \ No newline at end of file diff --git a/src/sparkline/customization.html b/src/sparkline/customization.html index b3aaca5b..4faf4a0c 100644 --- a/src/sparkline/customization.html +++ b/src/sparkline/customization.html @@ -39,6 +39,7 @@

                                      + + +
                                                 
                                      diff --git a/src/sparkline/customization.js b/src/sparkline/customization.js index 019591ec..14981c4d 100644 --- a/src/sparkline/customization.js +++ b/src/sparkline/customization.js @@ -1,11 +1,15 @@ this.default = function () { + // custom code start var sparkload = function(args) { var customtheme = location.hash.split('/')[1]; customtheme = customtheme ? customtheme : 'Material'; args.sparkline.theme = (customtheme.charAt(0).toUpperCase() + customtheme.slice(1)); }; + // custom code end var percentage = new ej.charts.Sparkline({ - load: sparkload, + // custom code start + load: sparkload, + // custom code end lineWidth: 1, type: 'Column', valueType: 'Category', @@ -106,6 +110,7 @@ this.default = function () { } }); sales.appendTo('#sales'); + // Code for Property Panel var sampleChange; var sampleValue = new ej.dropdowns.DropDownList({ index: 0, @@ -243,7 +248,7 @@ this.default = function () { tooltipCheckBox.checked = false; } if ((drop.value === 'salespercentage' && percentage.enableRtl === true) || - (drop.value === 'salescount' && sales.enableRtl === true)) { + (drop.value === 'salescount' && sales.enableRtl === true)) { enableRTLCheckBox.checked = true; } else { @@ -406,7 +411,7 @@ this.default = function () { var spark = sampleValue.value === 'salespercentage' ? percentage : sales; if(boolean == true) { spark.enableRtl = true; - } + } else { spark.enableRtl = false; } diff --git a/src/sparkline/default-stack.json b/src/sparkline/default-stack.json index 4f3dc765..2f4ecddc 100644 --- a/src/sparkline/default-stack.json +++ b/src/sparkline/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n Population comparision between various countries\n
                                      \n
                                      \n (From 2005 to 2014)\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n Population\n
                                      \n                                       		\n
                                      \n Population Density\n
                                      \n                                       		\n
                                      \n Population Growth Rate\n
                                      \n                                       		\n
                                      \n Birth Rate\n
                                      \n
                                      \n Australia\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Canada\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n China\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n France\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Germany\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n India\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Russia\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Sweden\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n United Kingdom\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n United Sates\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n
                                      ","index.js":"{{ripple}}\n var sparkmodel1 = {\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Line',\n valueType: 'Category',\n fill: '#3C78EF',\n negativePointColor: '#fc5070',\n format: 'n',\n useGroupingSeparator: true,\n tooltipSettings: {\n visible: true,\n trackLineSettings: {\n visible: true,\n color: '#fc5070',\n width: 2\n }\n },\n xName: 'xval'\n };\n var sparkmodel2 = { \n valueType: 'Category',\n fill: '#3C78EF',\n opacity: 1,\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Area',\n border: {\n color: '#fc5070',\n width: 2\n },\n negativePointColor: '#fc5070',\n tooltipSettings: {\n visible: true,\n },\n xName: 'xval'\n };\n var sparkmodel3 = {\n negativePointColor: '#fc5070',\n tooltipSettings: {\n visible: true,\n },\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'WinLoss',\n valueType: 'Category',\n fill: '#3C78EF', \n xName: 'xval'\n };\n var sparkmodel4 = {\n valueType: 'Category',\n fill: '#3C78EF',\n negativePointColor: '#fc5070', \n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Column', \n tooltipSettings: {\n visible: true,\n },\n xName: 'xval'\n };\n var australia1 = new ej.charts.Sparkline(sparkmodel1);\n australia1.dataSource = window.defaultSparkData;\n australia1.yName = 'yval';\n australia1.tooltipSettings.format = '${xval} : ${yval}';\n australia1.appendTo('#p-australia');\n var canada1 = new ej.charts.Sparkline(sparkmodel1);\n canada1.dataSource = window.defaultSparkData;\n canada1.yName = 'yval1';\n canada1.tooltipSettings.format = '${xval} : ${yval1}';\n canada1.appendTo('#p-canada');\n var china1 = new ej.charts.Sparkline(sparkmodel1);\n china1.dataSource = window.defaultSparkData;\n china1.yName = 'yval2';\n china1.tooltipSettings.format = '${xval} : ${yval2}';\n china1.appendTo('#p-china');\n var france1 = new ej.charts.Sparkline(sparkmodel1);\n france1.dataSource = window.defaultSparkData;\n france1.yName = 'yval3';\n france1.tooltipSettings.format = '${xval} : ${yval3}';\n france1.appendTo('#p-france');\n var germany1 = new ej.charts.Sparkline(sparkmodel1);\n germany1.dataSource = window.defaultSparkData;\n germany1.tooltipSettings.format = '${xval} : ${yval4}';\n germany1.yName = 'yval4';\n germany1.appendTo('#p-germany');\n var india1 = new ej.charts.Sparkline(sparkmodel1);\n india1.dataSource = window.defaultSparkData;\n india1.tooltipSettings.format = '${xval} : ${yval5}';\n india1.yName = 'yval5';\n india1.appendTo('#p-india');\n var russia1 = new ej.charts.Sparkline(sparkmodel1);\n russia1.dataSource = window.defaultSparkData;\n russia1.tooltipSettings.format = '${xval} : ${yval6}';\n russia1.yName = 'yval6';\n russia1.appendTo('#p-russia');\n var sweden1 = new ej.charts.Sparkline(sparkmodel1);\n sweden1.dataSource = window.defaultSparkData;\n sweden1.tooltipSettings.format = '${xval} : ${yval7}';\n sweden1.yName = 'yval7';\n sweden1.appendTo('#p-sweden');\n var uk1 = new ej.charts.Sparkline(sparkmodel1);\n uk1.dataSource = window.defaultSparkData;\n uk1.tooltipSettings.format = '${xval} : ${yval8}';\n uk1.yName = 'yval8';\n uk1.appendTo('#p-uk');\n var us1 = new ej.charts.Sparkline(sparkmodel1);\n us1.dataSource = window.defaultSparkData;\n us1.tooltipSettings.format = '${xval} : ${yval9}';\n us1.yName = 'yval9';\n us1.appendTo('#p-us');\n var australia2 = new ej.charts.Sparkline(sparkmodel2);\n australia2.dataSource = window.defaultSparkData;\n australia2.yName = 'yval10';\n australia2.tooltipSettings.format = '${xval} : ${yval10}';\n australia2.appendTo('#d-australia');\n var canada2 = new ej.charts.Sparkline(sparkmodel2);\n canada2.dataSource = window.defaultSparkData;\n canada2.tooltipSettings.format = '${xval} : ${yval11}';\n canada2.yName = 'yval11';\n canada2.appendTo('#d-canada');\n var china2 = new ej.charts.Sparkline(sparkmodel2);\n china2.yName = 'yval12';\n china2.tooltipSettings.format = '${xval} : ${yval12}';\n china2.dataSource = window.defaultSparkData;\n china2.appendTo('#d-china');\n var france2 = new ej.charts.Sparkline(sparkmodel2);\n france2.dataSource = window.defaultSparkData;\n france2.tooltipSettings.format = '${xval} : ${yval13}';\n france2.yName = 'yval13';\n france2.appendTo('#d-france');\n var germany2 = new ej.charts.Sparkline(sparkmodel2);\n germany2.dataSource = window.defaultSparkData;\n germany2.tooltipSettings.format = '${xval} : ${yval14}';\n germany2.yName = 'yval14';\n germany2.appendTo('#d-germany');\n var india2 = new ej.charts.Sparkline(sparkmodel2);\n india2.dataSource = window.defaultSparkData;\n india2.tooltipSettings.format = '${xval} : ${yval15}';\n india2.yName = 'yval15';\n india2.appendTo('#d-india');\n var russia2 = new ej.charts.Sparkline(sparkmodel2);\n russia2.dataSource = window.defaultSparkData;\n russia2.tooltipSettings.format = '${xval} : ${yval16}';\n russia2.yName = 'yval16';\n russia2.appendTo('#d-russia');\n var sweden2 = new ej.charts.Sparkline(sparkmodel2);\n sweden2.dataSource = window.defaultSparkData;\n sweden2.tooltipSettings.format = '${xval} : ${yval17}';\n sweden2.yName = 'yval17';\n sweden2.appendTo('#d-sweden');\n var uk2 = new ej.charts.Sparkline(sparkmodel2);\n uk2.yName = 'yval18';\n uk2.tooltipSettings.format = '${xval} : ${yval18}';\n uk2.dataSource = window.defaultSparkData;\n uk2.appendTo('#d-uk');\n var us2 = new ej.charts.Sparkline(sparkmodel2);\n us2.yName = 'yval19';\n us2.dataSource = window.defaultSparkData;\n us2.tooltipSettings.format = '${xval} : ${yval19}';\n us2.appendTo('#d-us');\n var australia3 = new ej.charts.Sparkline(sparkmodel3);\n australia3.yName = 'yval20';\n australia3.tooltipSettings.format = '${xval} : ${yval20}';\n australia3.dataSource = window.defaultSparkData;\n australia3.appendTo('#g-australia');\n var canada3 = new ej.charts.Sparkline(sparkmodel3);\n canada3.yName = 'yval21';\n canada3.tooltipSettings.format = '${xval} : ${yval21}';\n canada3.dataSource = window.defaultSparkData;\n canada3.appendTo('#g-canada');\n var china3 = new ej.charts.Sparkline(sparkmodel3);\n china3.yName = 'yval22';\n china3.tooltipSettings.format = '${xval} : ${yval22}';\n china3.dataSource = window.defaultSparkData;\n china3.appendTo('#g-china');\n var france3 = new ej.charts.Sparkline(sparkmodel3);\n france3.yName = 'yval23';\n france3.tooltipSettings.format = '${xval} : ${yval23}';\n france3.dataSource = window.defaultSparkData;\n france3.appendTo('#g-france');\n var germany3 = new ej.charts.Sparkline(sparkmodel3);\n germany3.yName = 'yval24';\n germany3.tooltipSettings.format = '${xval} : ${yval24}';\n germany3.dataSource = window.defaultSparkData;\n germany3.appendTo('#g-germany');\n var india3 = new ej.charts.Sparkline(sparkmodel3);\n india3.yName = 'yval25';\n india3.tooltipSettings.format = '${xval} : ${yval25}';\n india3.dataSource = window.defaultSparkData;\n india3.appendTo('#g-india');\n var russia3 = new ej.charts.Sparkline(sparkmodel3);\n russia3.yName = 'yval26';\n russia3.tooltipSettings.format = '${xval} : ${yval26}';\n russia3.dataSource = window.defaultSparkData;\n russia3.appendTo('#g-russia');\n var sweden3 = new ej.charts.Sparkline(sparkmodel3);\n sweden3.yName = 'yval27';\n sweden3.tooltipSettings.format = '${xval} : ${yval27}';\n sweden3.dataSource = window.defaultSparkData;\n sweden3.appendTo('#g-sweden');\n var uk3 = new ej.charts.Sparkline(sparkmodel3);\n uk3.yName = 'yval28';\n uk3.tooltipSettings.format = '${xval} : ${yval28}';\n uk3.dataSource = window.defaultSparkData;\n uk3.appendTo('#g-uk');\n var us3 = new ej.charts.Sparkline(sparkmodel3);\n us3.tooltipSettings.format = '${xval} : ${yval29}';\n us3.yName = 'yval29';\n us3.dataSource = window.defaultSparkData;\n us3.appendTo('#g-us');\n var australia4 = new ej.charts.Sparkline(sparkmodel4);\n australia4.dataSource = window.defaultSparkData;\n australia4.yName = 'yval30';\n australia4.tooltipSettings.format = '${xval} : ${yval30}';\n australia4.axisSettings.minY = 12;\n australia4.appendTo('#b-australia');\n var canada4 = new ej.charts.Sparkline(sparkmodel4);\n canada4.dataSource = window.defaultSparkData;\n canada4.axisSettings.minY = 10.20;\n canada4.tooltipSettings.format = '${xval} : ${yval31}';\n canada4.yName = 'yval31';\n canada4.appendTo('#b-canada');\n var china4 = new ej.charts.Sparkline(sparkmodel4);\n china4.dataSource = window.defaultSparkData;\n china4.tooltipSettings.format = '${xval} : ${yval32}';\n china4.yName = 'yval32';\n china4.axisSettings.minY = 12;\n china4.appendTo('#b-china');\n var france4 = new ej.charts.Sparkline(sparkmodel4);\n france4.dataSource = window.defaultSparkData;\n france4.tooltipSettings.format = '${xval} : ${yval33}';\n france4.yName = 'yval33';\n france4.axisSettings.minY = 11.5;\n france4.appendTo('#b-france');\n var germany4 = new ej.charts.Sparkline(sparkmodel4);\n germany4.dataSource = window.defaultSparkData;\n germany4.axisSettings.minY = 8;\n germany4.tooltipSettings.format = '${xval} : ${yval34}';\n germany4.yName = 'yval34';\n germany4.appendTo('#b-germany');\n var india4 = new ej.charts.Sparkline(sparkmodel4);\n india4.dataSource = window.defaultSparkData;\n india4.axisSettings.minY = 19;\n india4.tooltipSettings.format = '${xval} : ${yval35}';\n india4.yName = 'yval35';\n india4.appendTo('#b-india');\n var russia4 = new ej.charts.Sparkline(sparkmodel4);\n russia4.dataSource = window.defaultSparkData;\n russia4.axisSettings.minY = 9.5;\n russia4.yName = 'yval36';\n russia4.tooltipSettings.format = '${xval} : ${yval36}';\n russia4.appendTo('#b-russia');\n var sweden4 = new ej.charts.Sparkline(sparkmodel4);\n sweden4.dataSource = window.defaultSparkData;\n sweden4.axisSettings.minY = 10;\n sweden4.tooltipSettings.format = '${xval} : ${yval37}';\n sweden4.yName = 'yval37';\n sweden4.appendTo('#b-sweden');\n var uk4 = new ej.charts.Sparkline(sparkmodel4);\n uk4.dataSource = window.defaultSparkData;\n uk4.axisSettings.minY = 10;\n uk4.tooltipSettings.format = '${xval} : ${yval38}';\n uk4.yName = 'yval38';\n uk4.appendTo('#b-uk');\n var us4 = new ej.charts.Sparkline(sparkmodel4);\n us4.dataSource = window.defaultSparkData;\n us4.axisSettings.minY = 13;\n us4.tooltipSettings.format = '${xval} : ${yval39}';\n us4.yName = 'yval39';\n us4.appendTo('#b-us');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n Population comparision between various countries\n
                                      \n
                                      \n (From 2005 to 2014)\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n Population\n
                                      \n                                       		\n
                                      \n Population Density\n
                                      \n                                       		\n
                                      \n Population Growth Rate\n
                                      \n                                       		\n
                                      \n Birth Rate\n
                                      \n
                                      \n Australia\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Canada\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n China\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n France\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Germany\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n India\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Russia\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n Sweden\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n United Kingdom\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n United Sates\n \n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n                                       		\n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n
                                      ","index.js":"{{ripple}}\n var sparkmodel1 = {\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Line',\n valueType: 'Category',\n fill: '#3C78EF',\n negativePointColor: '#fc5070',\n format: 'n',\n useGroupingSeparator: true,\n tooltipSettings: {\n visible: true,\n trackLineSettings: {\n visible: true,\n color: '#fc5070',\n width: 2\n }\n },\n xName: 'xval'\n };\n var sparkmodel2 = { \n valueType: 'Category',\n fill: '#3C78EF',\n opacity: 1,\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Area',\n border: {\n color: '#fc5070',\n width: 2\n },\n negativePointColor: '#fc5070',\n tooltipSettings: {\n visible: true,\n },\n xName: 'xval'\n };\n var sparkmodel3 = {\n negativePointColor: '#fc5070',\n tooltipSettings: {\n visible: true,\n },\n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'WinLoss',\n valueType: 'Category',\n fill: '#3C78EF', \n xName: 'xval'\n };\n var sparkmodel4 = {\n valueType: 'Category',\n fill: '#3C78EF',\n negativePointColor: '#fc5070', \n height: '50px',\n width: '90%', \n lineWidth: 2,\n type: 'Column', \n tooltipSettings: {\n visible: true,\n },\n xName: 'xval'\n };\n var australia1 = new ej.charts.Sparkline(sparkmodel1);\n australia1.dataSource = window.defaultSparkData;\n australia1.yName = 'yval';\n australia1.tooltipSettings.format = '${xval} : ${yval}';\n australia1.appendTo('#p-australia');\n var canada1 = new ej.charts.Sparkline(sparkmodel1);\n canada1.dataSource = window.defaultSparkData;\n canada1.yName = 'yval1';\n canada1.tooltipSettings.format = '${xval} : ${yval1}';\n canada1.appendTo('#p-canada');\n var china1 = new ej.charts.Sparkline(sparkmodel1);\n china1.dataSource = window.defaultSparkData;\n china1.yName = 'yval2';\n china1.tooltipSettings.format = '${xval} : ${yval2}';\n china1.appendTo('#p-china');\n var france1 = new ej.charts.Sparkline(sparkmodel1);\n france1.dataSource = window.defaultSparkData;\n france1.yName = 'yval3';\n france1.tooltipSettings.format = '${xval} : ${yval3}';\n france1.appendTo('#p-france');\n var germany1 = new ej.charts.Sparkline(sparkmodel1);\n germany1.dataSource = window.defaultSparkData;\n germany1.tooltipSettings.format = '${xval} : ${yval4}';\n germany1.yName = 'yval4';\n germany1.appendTo('#p-germany');\n var india1 = new ej.charts.Sparkline(sparkmodel1);\n india1.dataSource = window.defaultSparkData;\n india1.tooltipSettings.format = '${xval} : ${yval5}';\n india1.yName = 'yval5';\n india1.appendTo('#p-india');\n var russia1 = new ej.charts.Sparkline(sparkmodel1);\n russia1.dataSource = window.defaultSparkData;\n russia1.tooltipSettings.format = '${xval} : ${yval6}';\n russia1.yName = 'yval6';\n russia1.appendTo('#p-russia');\n var sweden1 = new ej.charts.Sparkline(sparkmodel1);\n sweden1.dataSource = window.defaultSparkData;\n sweden1.tooltipSettings.format = '${xval} : ${yval7}';\n sweden1.yName = 'yval7';\n sweden1.appendTo('#p-sweden');\n var uk1 = new ej.charts.Sparkline(sparkmodel1);\n uk1.dataSource = window.defaultSparkData;\n uk1.tooltipSettings.format = '${xval} : ${yval8}';\n uk1.yName = 'yval8';\n uk1.appendTo('#p-uk');\n var us1 = new ej.charts.Sparkline(sparkmodel1);\n us1.dataSource = window.defaultSparkData;\n us1.tooltipSettings.format = '${xval} : ${yval9}';\n us1.yName = 'yval9';\n us1.appendTo('#p-us');\n var australia2 = new ej.charts.Sparkline(sparkmodel2);\n australia2.dataSource = window.defaultSparkData;\n australia2.yName = 'yval10';\n australia2.tooltipSettings.format = '${xval} : ${yval10}';\n australia2.appendTo('#d-australia');\n var canada2 = new ej.charts.Sparkline(sparkmodel2);\n canada2.dataSource = window.defaultSparkData;\n canada2.tooltipSettings.format = '${xval} : ${yval11}';\n canada2.yName = 'yval11';\n canada2.appendTo('#d-canada');\n var china2 = new ej.charts.Sparkline(sparkmodel2);\n china2.yName = 'yval12';\n china2.tooltipSettings.format = '${xval} : ${yval12}';\n china2.dataSource = window.defaultSparkData;\n china2.appendTo('#d-china');\n var france2 = new ej.charts.Sparkline(sparkmodel2);\n france2.dataSource = window.defaultSparkData;\n france2.tooltipSettings.format = '${xval} : ${yval13}';\n france2.yName = 'yval13';\n france2.appendTo('#d-france');\n var germany2 = new ej.charts.Sparkline(sparkmodel2);\n germany2.dataSource = window.defaultSparkData;\n germany2.tooltipSettings.format = '${xval} : ${yval14}';\n germany2.yName = 'yval14';\n germany2.appendTo('#d-germany');\n var india2 = new ej.charts.Sparkline(sparkmodel2);\n india2.dataSource = window.defaultSparkData;\n india2.tooltipSettings.format = '${xval} : ${yval15}';\n india2.yName = 'yval15';\n india2.appendTo('#d-india');\n var russia2 = new ej.charts.Sparkline(sparkmodel2);\n russia2.dataSource = window.defaultSparkData;\n russia2.tooltipSettings.format = '${xval} : ${yval16}';\n russia2.yName = 'yval16';\n russia2.appendTo('#d-russia');\n var sweden2 = new ej.charts.Sparkline(sparkmodel2);\n sweden2.dataSource = window.defaultSparkData;\n sweden2.tooltipSettings.format = '${xval} : ${yval17}';\n sweden2.yName = 'yval17';\n sweden2.appendTo('#d-sweden');\n var uk2 = new ej.charts.Sparkline(sparkmodel2);\n uk2.yName = 'yval18';\n uk2.tooltipSettings.format = '${xval} : ${yval18}';\n uk2.dataSource = window.defaultSparkData;\n uk2.appendTo('#d-uk');\n var us2 = new ej.charts.Sparkline(sparkmodel2);\n us2.yName = 'yval19';\n us2.dataSource = window.defaultSparkData;\n us2.tooltipSettings.format = '${xval} : ${yval19}';\n us2.appendTo('#d-us');\n var australia3 = new ej.charts.Sparkline(sparkmodel3);\n australia3.yName = 'yval20';\n australia3.tooltipSettings.format = '${xval} : ${yval20}';\n australia3.dataSource = window.defaultSparkData;\n australia3.appendTo('#g-australia');\n var canada3 = new ej.charts.Sparkline(sparkmodel3);\n canada3.yName = 'yval21';\n canada3.tooltipSettings.format = '${xval} : ${yval21}';\n canada3.dataSource = window.defaultSparkData;\n canada3.appendTo('#g-canada');\n var china3 = new ej.charts.Sparkline(sparkmodel3);\n china3.yName = 'yval22';\n china3.tooltipSettings.format = '${xval} : ${yval22}';\n china3.dataSource = window.defaultSparkData;\n china3.appendTo('#g-china');\n var france3 = new ej.charts.Sparkline(sparkmodel3);\n france3.yName = 'yval23';\n france3.tooltipSettings.format = '${xval} : ${yval23}';\n france3.dataSource = window.defaultSparkData;\n france3.appendTo('#g-france');\n var germany3 = new ej.charts.Sparkline(sparkmodel3);\n germany3.yName = 'yval24';\n germany3.tooltipSettings.format = '${xval} : ${yval24}';\n germany3.dataSource = window.defaultSparkData;\n germany3.appendTo('#g-germany');\n var india3 = new ej.charts.Sparkline(sparkmodel3);\n india3.yName = 'yval25';\n india3.tooltipSettings.format = '${xval} : ${yval25}';\n india3.dataSource = window.defaultSparkData;\n india3.appendTo('#g-india');\n var russia3 = new ej.charts.Sparkline(sparkmodel3);\n russia3.yName = 'yval26';\n russia3.tooltipSettings.format = '${xval} : ${yval26}';\n russia3.dataSource = window.defaultSparkData;\n russia3.appendTo('#g-russia');\n var sweden3 = new ej.charts.Sparkline(sparkmodel3);\n sweden3.yName = 'yval27';\n sweden3.tooltipSettings.format = '${xval} : ${yval27}';\n sweden3.dataSource = window.defaultSparkData;\n sweden3.appendTo('#g-sweden');\n var uk3 = new ej.charts.Sparkline(sparkmodel3);\n uk3.yName = 'yval28';\n uk3.tooltipSettings.format = '${xval} : ${yval28}';\n uk3.dataSource = window.defaultSparkData;\n uk3.appendTo('#g-uk');\n var us3 = new ej.charts.Sparkline(sparkmodel3);\n us3.tooltipSettings.format = '${xval} : ${yval29}';\n us3.yName = 'yval29';\n us3.dataSource = window.defaultSparkData;\n us3.appendTo('#g-us');\n var australia4 = new ej.charts.Sparkline(sparkmodel4);\n australia4.dataSource = window.defaultSparkData;\n australia4.yName = 'yval30';\n australia4.tooltipSettings.format = '${xval} : ${yval30}';\n australia4.axisSettings.minY = 12;\n australia4.appendTo('#b-australia');\n var canada4 = new ej.charts.Sparkline(sparkmodel4);\n canada4.dataSource = window.defaultSparkData;\n canada4.axisSettings.minY = 10.20;\n canada4.tooltipSettings.format = '${xval} : ${yval31}';\n canada4.yName = 'yval31';\n canada4.appendTo('#b-canada');\n var china4 = new ej.charts.Sparkline(sparkmodel4);\n china4.dataSource = window.defaultSparkData;\n china4.tooltipSettings.format = '${xval} : ${yval32}';\n china4.yName = 'yval32';\n china4.axisSettings.minY = 12;\n china4.appendTo('#b-china');\n var france4 = new ej.charts.Sparkline(sparkmodel4);\n france4.dataSource = window.defaultSparkData;\n france4.tooltipSettings.format = '${xval} : ${yval33}';\n france4.yName = 'yval33';\n france4.axisSettings.minY = 11.5;\n france4.appendTo('#b-france');\n var germany4 = new ej.charts.Sparkline(sparkmodel4);\n germany4.dataSource = window.defaultSparkData;\n germany4.axisSettings.minY = 8;\n germany4.tooltipSettings.format = '${xval} : ${yval34}';\n germany4.yName = 'yval34';\n germany4.appendTo('#b-germany');\n var india4 = new ej.charts.Sparkline(sparkmodel4);\n india4.dataSource = window.defaultSparkData;\n india4.axisSettings.minY = 19;\n india4.tooltipSettings.format = '${xval} : ${yval35}';\n india4.yName = 'yval35';\n india4.appendTo('#b-india');\n var russia4 = new ej.charts.Sparkline(sparkmodel4);\n russia4.dataSource = window.defaultSparkData;\n russia4.axisSettings.minY = 9.5;\n russia4.yName = 'yval36';\n russia4.tooltipSettings.format = '${xval} : ${yval36}';\n russia4.appendTo('#b-russia');\n var sweden4 = new ej.charts.Sparkline(sparkmodel4);\n sweden4.dataSource = window.defaultSparkData;\n sweden4.axisSettings.minY = 10;\n sweden4.tooltipSettings.format = '${xval} : ${yval37}';\n sweden4.yName = 'yval37';\n sweden4.appendTo('#b-sweden');\n var uk4 = new ej.charts.Sparkline(sparkmodel4);\n uk4.dataSource = window.defaultSparkData;\n uk4.axisSettings.minY = 10;\n uk4.tooltipSettings.format = '${xval} : ${yval38}';\n uk4.yName = 'yval38';\n uk4.appendTo('#b-uk');\n var us4 = new ej.charts.Sparkline(sparkmodel4);\n us4.dataSource = window.defaultSparkData;\n us4.axisSettings.minY = 13;\n us4.tooltipSettings.format = '${xval} : ${yval39}';\n us4.yName = 'yval39';\n us4.appendTo('#b-us');\n"} \ No newline at end of file diff --git a/src/sparkline/default.js b/src/sparkline/default.js index f43bc715..03d156bd 100644 --- a/src/sparkline/default.js +++ b/src/sparkline/default.js @@ -13,7 +13,6 @@ this.default = function () { visible: true, trackLineSettings: { visible: true, - color: '#fc5070', width: 2 } }, diff --git a/src/sparkline/live-update-stack.json b/src/sparkline/live-update-stack.json index b3ae1e98..a066da84 100644 --- a/src/sparkline/live-update-stack.json +++ b/src/sparkline/live-update-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n CPU\n
                                      \n
                                      26% 1.2GHz
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Disk\n
                                      \n
                                      50%
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Memory\n
                                      \n
                                      6.5/15.8 GB (41%)
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Ethernet\n
                                      \n
                                      R: 50Kbps
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var liveload = function(args) {\n var livetheme = location.hash.split('/')[1];\n livetheme = livetheme ? livetheme : 'Material';\n args.sparkline.theme = (livetheme.charAt(0).toUpperCase() + livetheme.slice(1));\n };\n var spark = new ej.charts.Sparkline({\n height: '130px',\n width: '90%', \n load: liveload,\n axisSettings: {\n minY: 0, maxY: 150\n },\n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n border: {\n color: '#0358a0',\n width: 1\n },\n fill: '#e8f2fc',\n type: 'Area',\n valueType: 'Numeric',\n dataSource: [\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 30 },\n { x: 4, yval: 50 },\n { x: 5, yval: 40 },\n { x: 6, yval: 20 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 10, yval: 40 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 13, yval: 30 },\n { x: 14, yval: 50 },\n { x: 15, yval: 20 },\n { x: 16, yval: 10 },\n { x: 17, yval: 40 },\n { x: 18, yval: 30 },\n { x: 19, yval: 40 }\n ],\n xName: 'x', yName: 'yval'\n });\n spark.appendTo('#spark-container1');\n var temp1 = spark.dataSource.length - 1;\n function update() {\n if (spark.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 50;\n spark.dataSource.push({ x: ++temp1, yval: value });\n spark.dataSource.shift();\n spark.refresh();\n var cpu = document.getElementById('cpu');\n if (cpu) {\n cpu.innerHTML = ((value / 150) * 100).toFixed(0) + '% ' + ((value * 3) / 100).toFixed(2) + 'GHz';\n }\n }\n }\n var time = setInterval(update, 1000);\n var spark1 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%', \n load: liveload,\n lineWidth: 1, \n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n axisSettings: {\n minY: 4, maxY: 8\n },\n border: {\n color: '#b247c6',\n width: 1\n },\n type: 'Area',\n fill: '\t#f5e8fc',\n valueType: 'Numeric',\n xName: 'x', yName: 'yval', \n dataSource: [ \n { x: 3, yval: 6.07 },\n { x: 4, yval: 6.05 },\n { x: 5, yval: 6.09 },\n { x: 6, yval: 6.08 },\n { x: 0, yval: 6.05 },\n { x: 1, yval: 6.03 },\n { x: 2, yval: 6.02 },\n { x: 7, yval: 6.01 },\n { x: 8, yval: 6.03 },\n { x: 9, yval: 6.01 }, \n { x: 14, yval: 6.05 },\n { x: 15, yval: 6.03 },\n { x: 16, yval: 6.01 },\n { x: 17, yval: 6.09 },\n { x: 10, yval: 6.07 },\n { x: 11, yval: 6.05 },\n { x: 12, yval: 6.01 },\n { x: 13, yval: 6.06 },\n { x: 18, yval: 6.06 },\n { x: 19, yval: 6.05 }\n ]\n });\n spark1.appendTo('#spark-container2');\n var temp2 = spark1.dataSource.length - 1;\n function update1() {\n if (spark1.element.className.indexOf('e-sparkline') > -1) {\n var value = Math.random();\n if (value > 0.6) {\n value = 6 + (value / 10);\n }\n else {\n value = 6 - (value / 10);\n }\n spark1.dataSource.push({ x: ++temp2, yval: value });\n spark1.dataSource.shift();\n spark1.refresh();\n var memory = document.getElementById('memory');\n var gb = parseFloat(value.toString().replace('0', '')).toFixed(1);\n if (memory) {\n memory.innerHTML = gb + '/15.8 GB (' + ((value / 15.8) * 100).toFixed(0) + '%)';\n }\n }\n }\n var time1 = setInterval(update1, 1000);\n var spark2 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%', load: liveload,\n xName: 'x', yName: 'yval', \n lineWidth: 1,\n axisSettings: {\n minY: 0, maxY: 130\n }, \n border: {\n color: '#27ad66',\n width: 1\n },\n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n type: 'Area',\n fill: '#e0f9d1',\n valueType: 'Numeric',\n dataSource: [\n { x: 15, yval: 30 },\n { x: 16, yval: 10 },\n { x: 17, yval: 20 },\n { x: 18, yval: 60 },\n { x: 19, yval: 50 },\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 70 },\n { x: 4, yval: 50 },\n { x: 5, yval: 20 }, \n { x: 10, yval: 70 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 6, yval: 80 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 13, yval: 60 },\n { x: 14, yval: 50 } \n ]\n });\n spark2.appendTo('#spark-container3');\n var temp3 = spark2.dataSource.length - 1;\n function update2() {\n if (spark2.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 80;\n spark2.dataSource.push({ x: ++temp3, yval: value });\n spark2.dataSource.shift();\n spark2.refresh();\n var disk = document.getElementById('disk');\n if (disk) {\n disk.innerHTML = value.toFixed(0) + '%';\n }\n }\n }\n var time2 = setInterval(update2, 1000);\n var spark3 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%', \n load: liveload,\n lineWidth: 1,\n axisSettings: {\n minY: 0, maxY: 120\n },\n xName: 'x', yName: 'yval', \n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n border: {\n color: '#AA907A',\n width: 1\n },\n type: 'Area',\n fill: '#F2D8C7',\n valueType: 'Numeric',\n dataSource: [\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 70 },\n { x: 4, yval: 50 },\n { x: 5, yval: 20 },\n { x: 6, yval: 80 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 10, yval: 70 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 13, yval: 60 },\n { x: 14, yval: 50 },\n { x: 15, yval: 30 },\n { x: 16, yval: 10 },\n { x: 17, yval: 20 },\n { x: 18, yval: 60 },\n { x: 19, yval: 50 }\n ],\n });\n spark3.appendTo('#spark-container4');\n var temp4 = spark3.dataSource.length - 1;\n function update4() {\n if (spark3.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 80;\n spark3.dataSource.push({ x: ++temp3, yval: value });\n spark3.dataSource.shift();\n spark3.refresh();\n var net = document.getElementById('net');\n if (net) {\n net.innerHTML = 'R: ' + value.toFixed(0) + 'Kbps';\n }\n }\n }\n var time4 = setInterval(update4, 1000);\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n CPU\n
                                      \n
                                      26% 1.2GHz
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Disk\n
                                      \n
                                      50%
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Memory\n
                                      \n
                                      6.5/15.8 GB (41%)
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Ethernet\n
                                      \n
                                      R: 50Kbps
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n","index.js":"{{ripple}}\n\n var spark = new ej.charts.Sparkline({\n height: '130px',\n width: '90%',\n\n axisSettings: {\n minY: 0, maxY: 150\n },\n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n border: {\n color: '#0358a0',\n width: 1\n },\n fill: '#e8f2fc',\n type: 'Area',\n valueType: 'Numeric',\n dataSource: [\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 30 },\n { x: 4, yval: 50 },\n { x: 5, yval: 40 },\n { x: 6, yval: 20 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 10, yval: 40 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 13, yval: 30 },\n { x: 14, yval: 50 },\n { x: 15, yval: 20 },\n { x: 16, yval: 10 },\n { x: 17, yval: 40 },\n { x: 18, yval: 30 },\n { x: 19, yval: 40 }\n ],\n xName: 'x', yName: 'yval'\n });\n spark.appendTo('#spark-container1');\n var temp1 = spark.dataSource.length - 1;\n function update() {\n if (spark.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 50;\n spark.dataSource.push({ x: ++temp1, yval: value });\n spark.dataSource.shift();\n spark.refresh();\n var cpu = document.getElementById('cpu');\n if (cpu) {\n cpu.innerHTML = ((value / 150) * 100).toFixed(0) + '% ' + ((value * 3) / 100).toFixed(2) + 'GHz';\n }\n }\n }\n var time = setInterval(update, 1000);\n var spark1 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%',\n\n lineWidth: 1, \n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n axisSettings: {\n minY: 4, maxY: 8\n },\n border: {\n color: '#b247c6',\n width: 1\n },\n type: 'Area',\n fill: '\t#f5e8fc',\n valueType: 'Numeric',\n xName: 'x', yName: 'yval', \n dataSource: [ \n { x: 3, yval: 6.07 },\n { x: 4, yval: 6.05 },\n { x: 5, yval: 6.09 },\n { x: 6, yval: 6.08 },\n { x: 0, yval: 6.05 },\n { x: 1, yval: 6.03 },\n { x: 2, yval: 6.02 },\n { x: 7, yval: 6.01 },\n { x: 8, yval: 6.03 },\n { x: 9, yval: 6.01 }, \n { x: 14, yval: 6.05 },\n { x: 15, yval: 6.03 },\n { x: 16, yval: 6.01 },\n { x: 17, yval: 6.09 },\n { x: 10, yval: 6.07 },\n { x: 11, yval: 6.05 },\n { x: 12, yval: 6.01 },\n { x: 13, yval: 6.06 },\n { x: 18, yval: 6.06 },\n { x: 19, yval: 6.05 }\n ]\n });\n spark1.appendTo('#spark-container2');\n var temp2 = spark1.dataSource.length - 1;\n function update1() {\n if (spark1.element.className.indexOf('e-sparkline') > -1) {\n var value = Math.random();\n if (value > 0.6) {\n value = 6 + (value / 10);\n }\n else {\n value = 6 - (value / 10);\n }\n spark1.dataSource.push({ x: ++temp2, yval: value });\n spark1.dataSource.shift();\n spark1.refresh();\n var memory = document.getElementById('memory');\n var gb = parseFloat(value.toString().replace('0', '')).toFixed(1);\n if (memory) {\n memory.innerHTML = gb + '/15.8 GB (' + ((value / 15.8) * 100).toFixed(0) + '%)';\n }\n }\n }\n var time1 = setInterval(update1, 1000);\n var spark2 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%',\n // cudtom code start\n load: liveload,\n // custom code end\n xName: 'x', yName: 'yval', \n lineWidth: 1,\n axisSettings: {\n minY: 0, maxY: 130\n }, \n border: {\n color: '#27ad66',\n width: 1\n },\n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n type: 'Area',\n fill: '#e0f9d1',\n valueType: 'Numeric',\n dataSource: [\n { x: 15, yval: 30 },\n { x: 16, yval: 10 },\n { x: 17, yval: 20 },\n { x: 18, yval: 60 },\n { x: 19, yval: 50 },\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 70 },\n { x: 4, yval: 50 },\n { x: 5, yval: 20 }, \n { x: 10, yval: 70 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 6, yval: 80 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 13, yval: 60 },\n { x: 14, yval: 50 } \n ]\n });\n spark2.appendTo('#spark-container3');\n var temp3 = spark2.dataSource.length - 1;\n function update2() {\n if (spark2.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 80;\n spark2.dataSource.push({ x: ++temp3, yval: value });\n spark2.dataSource.shift();\n spark2.refresh();\n var disk = document.getElementById('disk');\n if (disk) {\n disk.innerHTML = value.toFixed(0) + '%';\n }\n }\n }\n var time2 = setInterval(update2, 1000);\n var spark3 = new ej.charts.Sparkline({\n height: '130px',\n width: '90%',\n\n lineWidth: 1,\n axisSettings: {\n minY: 0, maxY: 120\n },\n xName: 'x', yName: 'yval', \n containerArea: {\n background: 'white',\n border: {\n color: '#dcdfe0',\n width: 2\n }\n },\n border: {\n color: '#AA907A',\n width: 1\n },\n type: 'Area',\n fill: '#F2D8C7',\n valueType: 'Numeric',\n dataSource: [\n { x: 0, yval: 50 },\n { x: 1, yval: 30 },\n { x: 2, yval: 20 },\n { x: 3, yval: 70 },\n { x: 4, yval: 50 },\n { x: 5, yval: 20 },\n { x: 6, yval: 80 },\n { x: 7, yval: 10 },\n { x: 8, yval: 30 },\n { x: 9, yval: 10 },\n { x: 10, yval: 70 },\n { x: 11, yval: 50 },\n { x: 12, yval: 10 },\n { x: 13, yval: 60 },\n { x: 14, yval: 50 },\n { x: 15, yval: 30 },\n { x: 16, yval: 10 },\n { x: 17, yval: 20 },\n { x: 18, yval: 60 },\n { x: 19, yval: 50 }\n ],\n });\n spark3.appendTo('#spark-container4');\n var temp4 = spark3.dataSource.length - 1;\n function update4() {\n if (spark3.element.className.indexOf('e-sparkline') > -1) {\n var value = ((Math.random() * 100) + 5) % 80;\n spark3.dataSource.push({ x: ++temp3, yval: value });\n spark3.dataSource.shift();\n spark3.refresh();\n var net = document.getElementById('net');\n if (net) {\n net.innerHTML = 'R: ' + value.toFixed(0) + 'Kbps';\n }\n }\n }\n var time4 = setInterval(update4, 1000);\n"} \ No newline at end of file diff --git a/src/sparkline/live-update.html b/src/sparkline/live-update.html index 1d0358c0..46c88308 100644 --- a/src/sparkline/live-update.html +++ b/src/sparkline/live-update.html @@ -50,10 +50,12 @@ see the tooltip in action, hover the mouse over the data points or tap on a data point in touch enabled devices.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/sparkline/live-update.js b/src/sparkline/live-update.js index 94a20564..824b4278 100644 --- a/src/sparkline/live-update.js +++ b/src/sparkline/live-update.js @@ -1,13 +1,17 @@ this.default = function () { + // custom code start var liveload = function(args) { var livetheme = location.hash.split('/')[1]; livetheme = livetheme ? livetheme : 'Material'; args.sparkline.theme = (livetheme.charAt(0).toUpperCase() + livetheme.slice(1)); }; + // custom code end var spark = new ej.charts.Sparkline({ height: '130px', - width: '90%', + width: '90%', + // custom code start load: liveload, + // custom code end axisSettings: { minY: 0, maxY: 150 }, @@ -66,8 +70,10 @@ this.default = function () { var time = setInterval(update, 1000); var spark1 = new ej.charts.Sparkline({ height: '130px', - width: '90%', + width: '90%', + // custom code start load: liveload, + // custom code end lineWidth: 1, containerArea: { background: 'white', @@ -134,7 +140,10 @@ this.default = function () { var time1 = setInterval(update1, 1000); var spark2 = new ej.charts.Sparkline({ height: '130px', - width: '90%', load: liveload, + width: '90%', + // cudtom code start + load: liveload, + // custom code end xName: 'x', yName: 'yval', lineWidth: 1, axisSettings: { @@ -194,8 +203,10 @@ this.default = function () { var time2 = setInterval(update2, 1000); var spark3 = new ej.charts.Sparkline({ height: '130px', - width: '90%', + width: '90%', + // custom code start load: liveload, + // custom code end lineWidth: 1, axisSettings: { minY: 0, maxY: 120 diff --git a/src/sparkline/range-band-stack.json b/src/sparkline/range-band-stack.json index 0ba2503b..f4a20e5a 100644 --- a/src/sparkline/range-band-stack.json +++ b/src/sparkline/range-band-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n

                                      \n Sales Growth Comparison with various Products\n

                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n            \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Range Band Min 1\n \n
                                      \n
                                      \n Range Band Max 3\n \n
                                      \n
                                      \n
                                      ","index.js":"{{ripple}}\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.products).executeLocal(new ej.data.Query()),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'name', headerText: 'Name', textAlign: 'Right', width: 50 },\n { headerText: '2010', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: '2011', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n ],\n });\n grid.appendTo('#Grid');\n var sparkline = {\n height: '50px',\n width: '150px', \n load: function (args) { \n var rangetheme = location.hash.split('/')[1]; \n rangetheme = rangetheme ? rangetheme : 'Material'; \n args.sparkline.theme = (rangetheme.charAt(0).toUpperCase() + rangetheme.slice(1)); \n },\n lineWidth: 2,\n fill: '#0d3c9b',\n dataSource: window.lineData[0],\n rangeBandSettings: [\n {\n startRange: 1, endRange: 3, color: '#bfd4fc'\n }\n ]\n };\n setTimeout(function () {\n for (var i = 1; i < 6; i++) {\n var first = new ej.charts.Sparkline(sparkline);\n first.dataSource = window.lineData[i];\n first.appendTo('#sparkline2010' + i);\n var second = new ej.charts.Sparkline(sparkline);\n second.dataSource = window.lineData[i + 5];\n second.appendTo('#sparkline2011' + i);\n }\n }, 500);\n var sliderChange1;\n var sliderChange2;\n var slider1 = new ej.inputs.Slider({\n value: 1,\n change: sliderChange1,\n max: 6, min: 0, type: 'MinRange',\n }, '#range-min');\n var slider2 = new ej.inputs.Slider({\n value: 3,\n change: sliderChange2,\n max: 6, min: 0, type: 'MinRange',\n }, '#range-max');\n slider1.change = sliderChange1 = function (e) {\n changeRangeMin(e.value);\n };\n slider2.change = sliderChange2 = function (e) {\n changeRangeMax(e.value);\n };\n var changeRangeMin = function (min) {\n for (var i = 1; i < 6; i++) {\n var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n first.rangeBandSettings[0].startRange = min;\n second.rangeBandSettings[0].startRange = min;\n first.refresh();\n second.refresh();\n }\n };\n var changeRangeMax = function (max) {\n for (var i = 1; i < 6; i++) {\n var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n first.rangeBandSettings[0].endRange = max;\n second.rangeBandSettings[0].endRange = max;\n first.refresh();\n second.refresh();\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n

                                      \n Sales Growth Comparison with various Products\n

                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n\n \n
                                      \n            \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Range Band Min 1\n \n
                                      \n
                                      \n Range Band Max 3\n \n
                                      \n
                                      \n
                                      ","index.js":"{{ripple}}\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.products).executeLocal(new ej.data.Query()),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'name', headerText: 'Name', textAlign: 'Right', width: 50 },\n { headerText: '2010', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: '2011', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n ],\n });\n grid.appendTo('#Grid');\n var sparkline = {\n height: '50px',\n width: '150px',\n\n lineWidth: 2,\n fill: '#0d3c9b',\n dataSource: window.lineData[0],\n rangeBandSettings: [\n {\n startRange: 1, endRange: 3, color: '#bfd4fc'\n }\n ]\n };\n setTimeout(function () {\n for (var i = 1; i < 6; i++) {\n var first = new ej.charts.Sparkline(sparkline);\n first.dataSource = window.lineData[i];\n first.appendTo('#sparkline2010' + i);\n var second = new ej.charts.Sparkline(sparkline);\n second.dataSource = window.lineData[i + 5];\n second.appendTo('#sparkline2011' + i);\n }\n }, 500);\n var sliderChange1;\n var sliderChange2;\n var slider1 = new ej.inputs.Slider({\n value: 1,\n change: sliderChange1,\n max: 6, min: 0, type: 'MinRange',\n }, '#range-min');\n var slider2 = new ej.inputs.Slider({\n value: 3,\n change: sliderChange2,\n max: 6, min: 0, type: 'MinRange',\n }, '#range-max');\n slider1.change = sliderChange1 = function (e) {\n changeRangeMin(e.value);\n };\n slider2.change = sliderChange2 = function (e) {\n changeRangeMax(e.value);\n };\n var changeRangeMin = function (min) {\n for (var i = 1; i < 6; i++) {\n var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n first.rangeBandSettings[0].startRange = min;\n second.rangeBandSettings[0].startRange = min;\n first.refresh();\n second.refresh();\n }\n };\n var changeRangeMax = function (max) {\n for (var i = 1; i < 6; i++) {\n var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n first.rangeBandSettings[0].endRange = max;\n second.rangeBandSettings[0].endRange = max;\n first.refresh();\n second.refresh();\n }\n };\n"} \ No newline at end of file diff --git a/src/sparkline/range-band.html b/src/sparkline/range-band.html index 0f849fda..0434d5b5 100644 --- a/src/sparkline/range-band.html +++ b/src/sparkline/range-band.html @@ -26,9 +26,8 @@

                                      In this example, you can see how to render sparkline with range band and the customization options available in range band. Here, the sparklines are placed inside the data grid control.

                                      - -
                                      + + +
                                                 
                                      diff --git a/src/sparkline/range-band.js b/src/sparkline/range-band.js index 9764a3de..ad05bf6f 100644 --- a/src/sparkline/range-band.js +++ b/src/sparkline/range-band.js @@ -15,12 +15,14 @@ this.default = function () { grid.appendTo('#Grid'); var sparkline = { height: '50px', - width: '150px', + width: '150px', + // custom code start load: function (args) { var rangetheme = location.hash.split('/')[1]; rangetheme = rangetheme ? rangetheme : 'Material'; args.sparkline.theme = (rangetheme.charAt(0).toUpperCase() + rangetheme.slice(1)); }, + // custom code end lineWidth: 2, fill: '#0d3c9b', dataSource: window.lineData[0], diff --git a/src/sparkline/series-types-stack.json b/src/sparkline/series-types-stack.json index d63e0382..28afe409 100644 --- a/src/sparkline/series-types-stack.json +++ b/src/sparkline/series-types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Power production for a day
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Average weather comparision
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Revenue status
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Customer satisfaction score
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      USA
                                      \n
                                      \n
                                      \n
                                      GBR
                                      \n
                                      \n
                                      \n
                                      CHN
                                      \n
                                      \n
                                      Olympics medal details
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      ","index.js":"{{ripple}}\n var seriesload = function(args) {\n var seriestheme = location.hash.split('/')[1];\n seriestheme = seriestheme ? seriestheme : 'Material';\n args.sparkline.theme = (seriestheme.charAt(0).toUpperCase() + seriestheme.slice(1));\n };\n var line = new ej.charts.Sparkline({\n lineWidth: 1,\n type: 'Line',\n fill: '#3C78EF',\n height: '80px',\n width: '90%', load: seriesload, \n tooltipSettings: {\n trackLineSettings: {\n visible: true\n },\n visible: true,\n format: '${x} : ${yval}' \n }, \n valueType: 'Numeric',\n dataSource: [\n { x: 1, yval: 5 },\n { x: 2, yval: 6 },\n { x: 3, yval: 5 },\n { x: 4, yval: 7 }, \n { x: 10, yval: 5 },\n { x: 11, yval: 7 },\n { x: 12, yval: 8 },\n { x: 13, yval: 4 },\n { x: 5, yval: 4 },\n { x: 6, yval: 3 },\n { x: 7, yval: 9 },\n { x: 8, yval: 5 },\n { x: 9, yval: 6 }, \n { x: 19, yval: 2 },\n { x: 20, yval: 12 },\n { x: 21, yval: 4 },\n { x: 22, yval: 7 },\n { x: 23, yval: 6 },\n { x: 14, yval: 5 },\n { x: 15, yval: 3 },\n { x: 16, yval: 4 },\n { x: 17, yval: 11 },\n { x: 18, yval: 10 },\n { x: 24, yval: 8 },\n ],\n xName: 'x', yName: 'yval', \n markerSettings: {\n visible: ['All'],\n size: 2.5,\n fill: 'blue',\n }\n });\n line.appendTo('#line');\n var area = new ej.charts.Sparkline({\n border: { color: '#3C78EF', width: 2 },\n valueType: 'Category',\n axisSettings: {\n lineSettings: {\n visible: true\n }\n },\n height: '80px',\n width: '90%', load: seriesload,\n lineWidth: 1,\n type: 'Area',\n opacity: 1,\n fill: '#b2cfff', \n dataSource: [ \n { x: 5, xval: 'May', yval: 40 },\n { x: 6, xval: 'Jun', yval: 38 },\n { x: 7, xval: 'Jul', yval: 33 },\n { x: 8, xval: 'Aug', yval: 37 },\n { x: 1, xval: 'Jan', yval: 34 },\n { x: 2, xval: 'Feb', yval: 36 },\n { x: 3, xval: 'Mar', yval: 32 },\n { x: 4, xval: 'Apr', yval: 35 },\n { x: 9, xval: 'Sep', yval: 34 },\n { x: 10, xval: 'Oct', yval: 31 },\n { x: 11, xval: 'Nov', yval: 30 },\n { x: 12, xval: 'Dec', yval: 29 },\n ],\n xName: 'xval', yName: 'yval',\n tooltipSettings: {\n format: '${xval} : ${yval}°C',\n visible: true, \n trackLineSettings: {\n visible: true\n }\n }\n });\n area.appendTo('#area');\n var column = new ej.charts.Sparkline({\n \n fill: '#3C78EF',\n type: 'Column',\n valueType: 'Category',\n highPointColor: '#14aa21',\n xName: 'xval', yName: 'yval', \n dataSource: [\n { x: 1, xval: 'Jan', yval: 10 },\n { x: 2, xval: 'Feb', yval: 6 },\n { x: 3, xval: 'Mar', yval: 8 },\n { x: 4, xval: 'Apr', yval: -5 },\n { x: 9, xval: 'Sep', yval: -3 },\n { x: 10, xval: 'Oct', yval: 6 },\n { x: 11, xval: 'Nov', yval: 8 },\n { x: 12, xval: 'Dec', yval: 10 },\n { x: 5, xval: 'May', yval: 11 },\n { x: 6, xval: 'Jun', yval: 5 },\n { x: 7, xval: 'Jul', yval: -2 },\n { x: 8, xval: 'Aug', yval: 7 },\n \n ],\n height: '80px',\n width: '90%', load: seriesload,\n lineWidth: 1,\n tooltipSettings: {\n visible: true,\n format: '${xval} : ${yval}',\n }\n });\n column.appendTo('#column');\n var winloss = new ej.charts.Sparkline({\n height: '80px',\n width: '90%', load: seriesload,\n lineWidth: 1,\n type: 'WinLoss',\n fill: '#3C78EF',\n negativePointColor: '#fc5070',\n valueType: 'Numeric',\n dataSource: [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10],\n tooltipSettings: {\n format: '${x} : ${y}',\n }\n });\n winloss.appendTo('#winloss');\n var pie1 = new ej.charts.Sparkline({\n height: '40px',\n width: '100%', load: seriesload,\n lineWidth: 1,\n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n dataSource: [{ x: 'Gold', y: 46 }, { x: 'Silver', y: 37 }, { x: 'Bronze', y: 38 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n }\n });\n pie1.appendTo('#pie1');\n var pie2 = new ej.charts.Sparkline({\n \n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n height: '40px',\n width: '100%', load: seriesload,\n lineWidth: 1,\n dataSource: [{ x: 'Gold', y: 27 }, { x: 'Silver', y: 23 }, { x: 'Bronze', y: 17 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n }\n });\n pie2.appendTo('#pie2');\n var pie3 = new ej.charts.Sparkline({\n dataSource: [{ x: 'Gold', y: 26 }, { x: 'Silver', y: 18 }, { x: 'Bronze', y: 26 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n },\n height: '40px',\n width: '100%', load: seriesload,\n lineWidth: 1,\n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n \n });\n pie3.appendTo('#pie3');\n var pie4 = new ej.charts.Sparkline({\n type: 'Pie',\n dataSource: [{ x: 'Gold', y: 19 }, { x: 'Silver', y: 17 }, { x: 'Bronze', y: 19 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n },\n valueType: 'Category',\n xName: 'x', yName: 'y',\n height: '40px',\n width: '100%', load: seriesload,\n lineWidth: 1\n });\n pie4.appendTo('#pie4');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Power production for a day
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Average weather comparision
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Revenue status
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Customer satisfaction score
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      USA
                                      \n
                                      \n
                                      \n
                                      GBR
                                      \n
                                      \n
                                      \n
                                      CHN
                                      \n
                                      \n
                                      Olympics medal details
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      ","index.js":"{{ripple}}\n\n var line = new ej.charts.Sparkline({\n lineWidth: 1,\n type: 'Line',\n fill: '#3C78EF',\n height: '80px',\n width: '90%',\n\n tooltipSettings: {\n trackLineSettings: {\n visible: true\n },\n visible: true,\n format: '${x} : ${yval}' \n }, \n valueType: 'Numeric',\n dataSource: [\n { x: 1, yval: 5 },\n { x: 2, yval: 6 },\n { x: 3, yval: 5 },\n { x: 4, yval: 7 }, \n { x: 10, yval: 5 },\n { x: 11, yval: 7 },\n { x: 12, yval: 8 },\n { x: 13, yval: 4 },\n { x: 5, yval: 4 },\n { x: 6, yval: 3 },\n { x: 7, yval: 9 },\n { x: 8, yval: 5 },\n { x: 9, yval: 6 }, \n { x: 19, yval: 2 },\n { x: 20, yval: 12 },\n { x: 21, yval: 4 },\n { x: 22, yval: 7 },\n { x: 23, yval: 6 },\n { x: 14, yval: 5 },\n { x: 15, yval: 3 },\n { x: 16, yval: 4 },\n { x: 17, yval: 11 },\n { x: 18, yval: 10 },\n { x: 24, yval: 8 },\n ],\n xName: 'x', yName: 'yval', \n markerSettings: {\n visible: ['All'],\n size: 2.5,\n fill: 'blue',\n }\n });\n line.appendTo('#line');\n var area = new ej.charts.Sparkline({\n border: { color: '#3C78EF', width: 2 },\n valueType: 'Category',\n axisSettings: {\n lineSettings: {\n visible: true\n }\n },\n height: '80px',\n width: '90%',\n\n lineWidth: 1,\n tooltipSettings: {\n visible: true,\n format: '${xval} : ${yval}',\n }\n });\n column.appendTo('#column');\n var winloss = new ej.charts.Sparkline({\n height: '80px',\n width: '90%',\n\n lineWidth: 1,\n type: 'WinLoss',\n fill: '#3C78EF',\n negativePointColor: '#fc5070',\n valueType: 'Numeric',\n dataSource: [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10],\n tooltipSettings: {\n format: '${x} : ${y}',\n }\n });\n winloss.appendTo('#winloss');\n var pie1 = new ej.charts.Sparkline({\n height: '40px',\n width: '100%',\n\n lineWidth: 1,\n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n dataSource: [{ x: 'Gold', y: 46 }, { x: 'Silver', y: 37 }, { x: 'Bronze', y: 38 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n }\n });\n pie1.appendTo('#pie1');\n var pie2 = new ej.charts.Sparkline({\n \n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n height: '40px',\n width: '100%',\n\n lineWidth: 1,\n dataSource: [{ x: 'Gold', y: 27 }, { x: 'Silver', y: 23 }, { x: 'Bronze', y: 17 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n }\n });\n pie2.appendTo('#pie2');\n var pie3 = new ej.charts.Sparkline({\n dataSource: [{ x: 'Gold', y: 26 }, { x: 'Silver', y: 18 }, { x: 'Bronze', y: 26 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n },\n height: '40px',\n width: '100%',\n\n lineWidth: 1,\n type: 'Pie',\n valueType: 'Category',\n xName: 'x', yName: 'y',\n \n });\n pie3.appendTo('#pie3');\n var pie4 = new ej.charts.Sparkline({\n type: 'Pie',\n dataSource: [{ x: 'Gold', y: 19 }, { x: 'Silver', y: 17 }, { x: 'Bronze', y: 19 }],\n tooltipSettings: {\n visible: true,\n format: '${x} : ${y}',\n },\n valueType: 'Category',\n xName: 'x', yName: 'y',\n height: '40px',\n width: '100%',\n\n lineWidth: 1\n });\n pie4.appendTo('#pie4');\n"} \ No newline at end of file diff --git a/src/sparkline/series-types.js b/src/sparkline/series-types.js index 3694d26d..6d8bc4d4 100644 --- a/src/sparkline/series-types.js +++ b/src/sparkline/series-types.js @@ -1,15 +1,20 @@ this.default = function () { + // custom code start var seriesload = function(args) { var seriestheme = location.hash.split('/')[1]; seriestheme = seriestheme ? seriestheme : 'Material'; args.sparkline.theme = (seriestheme.charAt(0).toUpperCase() + seriestheme.slice(1)); }; + // custom code end var line = new ej.charts.Sparkline({ lineWidth: 1, type: 'Line', fill: '#3C78EF', height: '80px', - width: '90%', load: seriesload, + width: '90%', + // custom code start + load: seriesload, + // custom code end tooltipSettings: { trackLineSettings: { visible: true @@ -61,7 +66,10 @@ this.default = function () { } }, height: '80px', - width: '90%', load: seriesload, + width: '90%', + // custom code start + load: seriesload, + // custom code start lineWidth: 1, type: 'Area', opacity: 1, @@ -113,7 +121,10 @@ this.default = function () { ], height: '80px', - width: '90%', load: seriesload, + width: '90%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1, tooltipSettings: { visible: true, @@ -123,7 +134,10 @@ this.default = function () { column.appendTo('#column'); var winloss = new ej.charts.Sparkline({ height: '80px', - width: '90%', load: seriesload, + width: '90%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1, type: 'WinLoss', fill: '#3C78EF', @@ -137,7 +151,10 @@ this.default = function () { winloss.appendTo('#winloss'); var pie1 = new ej.charts.Sparkline({ height: '40px', - width: '100%', load: seriesload, + width: '100%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1, type: 'Pie', valueType: 'Category', @@ -155,7 +172,10 @@ this.default = function () { valueType: 'Category', xName: 'x', yName: 'y', height: '40px', - width: '100%', load: seriesload, + width: '100%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1, dataSource: [{ x: 'Gold', y: 27 }, { x: 'Silver', y: 23 }, { x: 'Bronze', y: 17 }], tooltipSettings: { @@ -171,7 +191,10 @@ this.default = function () { format: '${x} : ${y}', }, height: '40px', - width: '100%', load: seriesload, + width: '100%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1, type: 'Pie', valueType: 'Category', @@ -189,7 +212,10 @@ this.default = function () { valueType: 'Category', xName: 'x', yName: 'y', height: '40px', - width: '100%', load: seriesload, + width: '100%', + // custom code start + load: seriesload, + // custom code end lineWidth: 1 }); pie4.appendTo('#pie4'); diff --git a/src/sparkline/spark-grid-stack.json b/src/sparkline/spark-grid-stack.json index 6e507560..e6f0e20f 100644 --- a/src/sparkline/spark-grid-stack.json +++ b/src/sparkline/spark-grid-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}window.render = function (args) {\n for (var i = 0; i < 51; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px'\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n};\nwindow.winloss = function () {\n var windata = [];\n var r;\n for (var i = 1; i <= 12; i++) {\n r = Math.random();\n if (r <= 0.2) {\n windata.push(-Math.random() * 10);\n }\n else {\n windata.push(Math.random() * 10);\n }\n }\n return windata;\n};\n\nwindow.getSparkData = function (type, count) {\n if (type === 'line') {\n return window.lineData[count];\n }\n else {\n return window.columnData[count];\n }\n};\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.orderdata).executeLocal(new ej.data.Query().take(20)),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'EmployeeID', headerText: 'ID', textAlign: 'Right', width: 40 },\n { field: 'CustomerID', headerText: 'Name', width: 60 },\n { field: 'OrderDate', headerText: 'Order Date', width: 65, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 70 },\n { headerText: 'Tax per annum', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: 'One Day Index', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n { headerText: 'Year GR', template: '#columnTemplate3', textAlign: 'Center', width: 100 }\n ],\n });\n grid.appendTo('#Grid');\n function load(args) {\n var gridtheme = location.hash.split('/')[1];\n gridtheme = gridtheme ? gridtheme : 'Material'; \n args.sparkline.theme = (gridtheme.charAt(0).toUpperCase() + gridtheme.slice(1)); \n }\n setTimeout(function () {\n for (var i = 1; i < 21; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n lineWidth: 2,\n valueType: 'Numeric',\n fill: '#3C78EF',\n dataSource: getSparkData('line', i)\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n valueType: 'Numeric',\n fill: '#3C78EF',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n valueType: 'Numeric',\n fill: '#3C78EF',\n tiePointColor: 'darkgray',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n }, 500);\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n","index.js":"{{ripple}}window.render = function (args) {\n for (var i = 0; i < 51; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px'\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n};\nwindow.winloss = function () {\n var windata = [];\n var r;\n for (var i = 1; i <= 12; i++) {\n r = Math.random();\n if (r <= 0.2) {\n windata.push(-Math.random() * 10);\n }\n else {\n windata.push(Math.random() * 10);\n }\n }\n return windata;\n};\n\nwindow.getSparkData = function (type, count) {\n if (type === 'line') {\n return window.lineData[count];\n }\n else {\n return window.columnData[count];\n }\n};\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.orderdata).executeLocal(new ej.data.Query().take(20)),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'EmployeeID', headerText: 'ID', textAlign: 'Right', width: 40 },\n { field: 'CustomerID', headerText: 'Name', width: 60 },\n { field: 'OrderDate', headerText: 'Order Date', width: 65, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 70 },\n { headerText: 'Tax per annum', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: 'One Day Index', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n { headerText: 'Year GR', template: '#columnTemplate3', textAlign: 'Center', width: 100 }\n ],\n });\n grid.appendTo('#Grid');\n\n setTimeout(function () {\n for (var i = 1; i < 21; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n lineWidth: 2,\n valueType: 'Numeric',\n fill: '#3C78EF',\n dataSource: getSparkData('line', i)\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n valueType: 'Numeric',\n fill: '#3C78EF',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n valueType: 'Numeric',\n fill: '#3C78EF',\n tiePointColor: 'darkgray',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n }, 500);\n"} \ No newline at end of file diff --git a/src/sparkline/spark-grid.html b/src/sparkline/spark-grid.html index ad58224d..5b681482 100644 --- a/src/sparkline/spark-grid.html +++ b/src/sparkline/spark-grid.html @@ -28,8 +28,10 @@

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/sparkline/spark-grid.js b/src/sparkline/spark-grid.js index 1a9b10ec..6b84e648 100644 --- a/src/sparkline/spark-grid.js +++ b/src/sparkline/spark-grid.js @@ -60,11 +60,13 @@ this.default = function () { ], }); grid.appendTo('#Grid'); + // custom code start function load(args) { var gridtheme = location.hash.split('/')[1]; gridtheme = gridtheme ? gridtheme : 'Material'; args.sparkline.theme = (gridtheme.charAt(0).toUpperCase() + gridtheme.slice(1)); } + // custom code end setTimeout(function () { for (var i = 1; i < 21; i++) { var line = new ej.charts.Sparkline({ diff --git a/src/splitter/accordion-navigation-menu-stack.json b/src/splitter/accordion-navigation-menu-stack.json index e5efda13..075753b3 100644 --- a/src/splitter/accordion-navigation-menu-stack.json +++ b/src/splitter/accordion-navigation-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      ","index.js":"{{ripple}}/**\n * Sample for accordion in splitter\n */\n//tslint:disable: max-func-body-length\n\n // tslint:disable:max-line-length\n var acrdnObj = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: '
                                      ' },\n { header: 'ASP.NET MVC', content: '
                                      ' },\n { header: 'JavaScript', content: '
                                      ' }\n ],\n expanded: onexpanded,\n expanding: onexpanding\n });\n // tslint:enable:max-line-length\n acrdnObj.appendTo('#Accordion_default');\n var splitterObj = new ej.layouts.Splitter({\n height: '288px',\n paneSettings: [\n { size: '39%', min: '30%' },\n { size: '65%', min: '45%' }\n ],\n width: '100%'\n });\n splitterObj.appendTo('#splitter');\n // tslint:disable:max-line-length\n function onexpanded(e) {\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 0) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data = [\n { text: 'Grid', id: '1' },\n { text: 'Schedule', id: '2' },\n { text: 'Chart', id: '7' }\n ];\n var listObj = new ej.lists.ListView({\n dataSource: data,\n select: onselect\n });\n listObj.appendTo('#nested_Acc1');\n }\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data1 = [\n { text: 'Grid', id: '3' },\n { text: 'Schedule', id: '4' },\n { text: 'Chart', id: '8' }\n ];\n var listObj1 = new ej.lists.ListView({\n dataSource: data1,\n select: onselect\n });\n listObj1.appendTo('#nested_Acc2');\n }\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 2) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data2 = [\n { text: 'Grid', id: '5' },\n { text: 'Schedule', id: '6' },\n { text: 'Chart', id: '9' }\n ];\n var listObj2 = new ej.lists.ListView({\n dataSource: data2,\n select: onselect\n });\n listObj2.appendTo('#nested_Acc3');\n }\n }\n function onselect(e) {\n var listid = e.item.dataset.uid;\n switch (listid) {\n case '1':\n var ajax = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnet-grid-ajax.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '2':\n var ajax1 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnet-schedule-ajax.html', 'GET', true);\n ajax1.send().then();\n ajax1.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '3':\n var ajax2 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnetmvc-grid-ajax.html', 'GET', true);\n ajax2.send().then();\n ajax2.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '4':\n var ajax3 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnetmvc-schedule-ajax.html', 'GET', true);\n ajax3.send().then();\n ajax3.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '5':\n var ajax4 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/javascript-grid-ajax.html', 'GET', true);\n ajax4.send().then();\n ajax4.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n case '6':\n var ajax5 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/javascript-schedule-ajax.html', 'GET', true);\n ajax5.send().then();\n ajax5.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n case '7':\n var ajax6 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnet-chart-ajax.html', 'GET', true);\n ajax6.send().then();\n ajax6.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '8':\n var ajax7 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/aspnetmvc-chart-ajax.html', 'GET', true);\n ajax7.send().then();\n ajax7.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '9':\n var ajax8 = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/splitter/javascript-chart-ajax.html', 'GET', true);\n ajax8.send().then();\n ajax8.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n }\n }\n function onexpanding(e) {\n var index = e.index;\n switch (index) {\n case 0:\n document.getElementById('content').innerHTML = '

                                      About ASP.NET

                                      Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.';\n break;\n case 1:\n document.getElementById('content').innerHTML = '

                                      About ASP.NET MVC

                                      The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages.';\n break;\n case 2:\n document.getElementById('content').innerHTML = '

                                      About JavaScript

                                      JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.';\n break;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for accordion in splitter\n */\n//tslint:disable: max-func-body-length\n\n // tslint:disable:max-line-length\n var acrdnObj = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: '
                                      ' },\n { header: 'ASP.NET MVC', content: '
                                      ' },\n { header: 'JavaScript', content: '
                                      ' }\n ],\n expanded: onexpanded,\n expanding: onexpanding\n });\n // tslint:enable:max-line-length\n acrdnObj.appendTo('#Accordion_default');\n var splitterObj = new ej.layouts.Splitter({\n height: '288px',\n paneSettings: [\n { size: '39%', min: '30%' },\n { size: '65%', min: '45%' }\n ],\n width: '100%'\n });\n splitterObj.appendTo('#splitter');\n // tslint:disable:max-line-length\n function onexpanded(e) {\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 0) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data = [\n { text: 'Grid', id: '1' },\n { text: 'Schedule', id: '2' },\n { text: 'Chart', id: '7' }\n ];\n var listObj = new ej.lists.ListView({\n dataSource: data,\n select: onselect\n });\n listObj.appendTo('#nested_Acc1');\n }\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data1 = [\n { text: 'Grid', id: '3' },\n { text: 'Schedule', id: '4' },\n { text: 'Chart', id: '8' }\n ];\n var listObj1 = new ej.lists.ListView({\n dataSource: data1,\n select: onselect\n });\n listObj1.appendTo('#nested_Acc2');\n }\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 2) {\n if (e.element.querySelectorAll('.e-list-parent').length > 0) {\n return;\n }\n var data2 = [\n { text: 'Grid', id: '5' },\n { text: 'Schedule', id: '6' },\n { text: 'Chart', id: '9' }\n ];\n var listObj2 = new ej.lists.ListView({\n dataSource: data2,\n select: onselect\n });\n listObj2.appendTo('#nested_Acc3');\n }\n }\n function onselect(e) {\n var listid = e.item.dataset.uid;\n switch (listid) {\n case '1':\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnet-grid-ajax.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '2':\n var ajax1 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnet-schedule-ajax.html', 'GET', true);\n ajax1.send().then();\n ajax1.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '3':\n var ajax2 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnetmvc-grid-ajax.html', 'GET', true);\n ajax2.send().then();\n ajax2.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '4':\n var ajax3 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnetmvc-schedule-ajax.html', 'GET', true);\n ajax3.send().then();\n ajax3.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '5':\n var ajax4 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/javascript-grid-ajax.html', 'GET', true);\n ajax4.send().then();\n ajax4.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n case '6':\n var ajax5 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/javascript-schedule-ajax.html', 'GET', true);\n ajax5.send().then();\n ajax5.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n case '7':\n var ajax6 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnet-chart-ajax.html', 'GET', true);\n ajax6.send().then();\n ajax6.onSuccess = function (data) {\n splitterObj.paneSettings[1].content = data;\n };\n break;\n case '8':\n var ajax7 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/aspnetmvc-chart-ajax.html', 'GET', true);\n ajax7.send().then();\n ajax7.onSuccess = function (data1) {\n splitterObj.paneSettings[1].content = data1;\n };\n break;\n case '9':\n var ajax8 = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/splitter/javascript-chart-ajax.html', 'GET', true);\n ajax8.send().then();\n ajax8.onSuccess = function (data2) {\n splitterObj.paneSettings[1].content = data2;\n };\n break;\n }\n }\n function onexpanding(e) {\n var index = e.index;\n switch (index) {\n case 0:\n document.getElementById('accordion-splitter-content').innerHTML = '

                                      About ASP.NET

                                      Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.';\n break;\n case 1:\n document.getElementById('accordion-splitter-content').innerHTML = '

                                      About ASP.NET MVC

                                      The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages.';\n break;\n case 2:\n document.getElementById('accordion-splitter-content').innerHTML = '

                                      About JavaScript

                                      JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.';\n break;\n }\n }\n"} \ No newline at end of file diff --git a/src/splitter/accordion-navigation-menu.html b/src/splitter/accordion-navigation-menu.html index bb6dfed1..346f3960 100644 --- a/src/splitter/accordion-navigation-menu.html +++ b/src/splitter/accordion-navigation-menu.html @@ -5,7 +5,7 @@
                                      -
                                      +
                                      @@ -23,19 +23,9 @@

                                      + + + + \ No newline at end of file diff --git a/src/splitter/accordion-navigation-menu.js b/src/splitter/accordion-navigation-menu.js index db420fb0..7b8246f6 100644 --- a/src/splitter/accordion-navigation-menu.js +++ b/src/splitter/accordion-navigation-menu.js @@ -144,13 +144,13 @@ this.default = function () { var index = e.index; switch (index) { case 0: - document.getElementById('content').innerHTML = '

                                      About ASP.NET

                                      Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.'; + document.getElementById('accordion-splitter-content').innerHTML = '

                                      About ASP.NET

                                      Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.'; break; case 1: - document.getElementById('content').innerHTML = '

                                      About ASP.NET MVC

                                      The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages.'; + document.getElementById('accordion-splitter-content').innerHTML = '

                                      About ASP.NET MVC

                                      The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages.'; break; case 2: - document.getElementById('content').innerHTML = '

                                      About JavaScript

                                      JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.'; + document.getElementById('accordion-splitter-content').innerHTML = '

                                      About JavaScript

                                      JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.'; break; } } diff --git a/src/splitter/aspnet-chart-ajax.html b/src/splitter/aspnet-chart-ajax.html index e94edfd4..025fadba 100644 --- a/src/splitter/aspnet-chart-ajax.html +++ b/src/splitter/aspnet-chart-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET Charts

                                      ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. Its high performing quality helps to render a large amount of data quickly. It also comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, drill-down, and events to make the charts more interactive. diff --git a/src/splitter/aspnet-grid-ajax.html b/src/splitter/aspnet-grid-ajax.html index 70906427..5f6f0b09 100644 --- a/src/splitter/aspnet-grid-ajax.html +++ b/src/splitter/aspnet-grid-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET Grid

                                      The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregation of rows, and exporting to Excel, CSV, and PDF formats. diff --git a/src/splitter/aspnet-schedule-ajax.html b/src/splitter/aspnet-schedule-ajax.html index ade15e5b..d8625d12 100644 --- a/src/splitter/aspnet-schedule-ajax.html +++ b/src/splitter/aspnet-schedule-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET Schedule

                                      The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and a resizing action. diff --git a/src/splitter/aspnetmvc-chart-ajax.html b/src/splitter/aspnetmvc-chart-ajax.html index 3707b186..ccf0ddc5 100644 --- a/src/splitter/aspnetmvc-chart-ajax.html +++ b/src/splitter/aspnetmvc-chart-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET MVC Charts

                                      ASP.NET MVC charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. Its high performing quality helps to render a large amount of data quickly. It also comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, drill-down, and events to make the charts more interactive. diff --git a/src/splitter/aspnetmvc-grid-ajax.html b/src/splitter/aspnetmvc-grid-ajax.html index 4796ca88..12ae78a8 100644 --- a/src/splitter/aspnetmvc-grid-ajax.html +++ b/src/splitter/aspnetmvc-grid-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET MVC Grid

                                      The ASP.NET MVC DataGrid control, or DataTable for is a feature-rich control used to display data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregation of rows, and exporting to Excel, CSV, and PDF formats. diff --git a/src/splitter/aspnetmvc-schedule-ajax.html b/src/splitter/aspnetmvc-schedule-ajax.html index 417ee899..f2eb4569 100644 --- a/src/splitter/aspnetmvc-schedule-ajax.html +++ b/src/splitter/aspnetmvc-schedule-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About ASP.NET MVC Schedule

                                      The ASP.NET MVC Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and a resizing action. diff --git a/src/splitter/code-editor-layout-stack.json b/src/splitter/code-editor-layout-stack.json index fe1aefa8..a0eeb031 100644 --- a/src/splitter/code-editor-layout-stack.json +++ b/src/splitter/code-editor-layout-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      HTML

                                      \n
                                      \n <!DOCTYPE html>\n
                                      <html>
                                      \n
                                      <body>
                                      \n <div id="custom-image">\n
                                      <img src="//npmci.syncfusion.com/development/demos/src/albert.png">
                                      \n
                                      <div>
                                      \n
                                      </body>
                                      \n
                                      </html>
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      CSS

                                      \n
                                      \n img {\n
                                      margin:0 auto;
                                      \n
                                      display:flex;
                                      \n
                                      height:70px;
                                      \n }\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      JavaScript

                                      \n
                                      \n var image = document.getElementById("custom-image");\n
                                      image.addEventListener("click", function() {
                                      \n
                                      // Code block for click action
                                      \n }\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      Preview of sample

                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      ","index.js":"{{ripple}}/**\n * Sample for code editor layout\n */\n\n var splitObj1 = new ej.layouts.Splitter({\n height: '220px',\n paneSettings: [\n { size: '29%', min: '23%' },\n { size: '20%', min: '15%' },\n { size: '35%', min: '35%' }\n ],\n width: '100%'\n });\n splitObj1.appendTo('#splitter1');\n var splitObj2 = new ej.layouts.Splitter({\n height: '400px',\n paneSettings: [\n { size: '53%', min: '30%' }\n ],\n orientation: 'Vertical'\n });\n splitObj2.appendTo('#splitter2');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      HTML

                                      \n
                                      \n <!DOCTYPE html>\n
                                      <html>
                                      \n
                                      <body>
                                      \n <div id="custom-image">\n
                                      <img src="//ej2.syncfusion.com/javascript/demos/src/albert.png">
                                      \n
                                      <div>
                                      \n
                                      </body>
                                      \n
                                      </html>
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      CSS

                                      \n
                                      \n img {\n
                                      margin:0 auto;
                                      \n
                                      display:flex;
                                      \n
                                      height:70px;
                                      \n }\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      JavaScript

                                      \n
                                      \n var image = document.getElementById("custom-image");\n
                                      image.addEventListener("click", function() {
                                      \n
                                      // Code block for click action
                                      \n }\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      Preview of sample

                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for code editor layout\n */\n\n var splitObj1 = new ej.layouts.Splitter({\n height: '220px',\n paneSettings: [\n { size: '29%', min: '23%' },\n { size: '20%', min: '15%' },\n { size: '35%', min: '35%' }\n ],\n width: '100%'\n });\n splitObj1.appendTo('#splitter1');\n var splitObj2 = new ej.layouts.Splitter({\n height: '400px',\n paneSettings: [\n { size: '53%', min: '30%' }\n ],\n orientation: 'Vertical'\n });\n splitObj2.appendTo('#splitter2');\n"} \ No newline at end of file diff --git a/src/splitter/code-editor-layout.html b/src/splitter/code-editor-layout.html index aee34d18..73334637 100644 --- a/src/splitter/code-editor-layout.html +++ b/src/splitter/code-editor-layout.html @@ -3,7 +3,7 @@
                                      -
                                      +

                                      HTML

                                      <!DOCTYPE html> @@ -18,7 +18,7 @@

                                      HTML

                                      -
                                      +

                                      CSS

                                      img { @@ -30,7 +30,7 @@

                                      CSS

                                      -
                                      +

                                      JavaScript

                                      var image = document.getElementById("custom-image"); @@ -41,7 +41,7 @@

                                      JavaScript

                                      -
                                      +

                                      Preview of sample

                                      @@ -67,26 +67,22 @@

                                      Preview of sample

                                      #code-text { margin-left: 5px; } - .code-preview { + .code-editor-content .code-preview { margin-top: 15px; font-size: 12px; } - #target { - margin: 20px auto; - max-width: 600px; - } .control-section{ min-height: 370px; margin-bottom: 15px; margin-top: 10px; } - .h3 { + .code-editor-content .h3 { font-size: 14px; margin: 4px; } - .content { + .code-editor-content { padding: 12px; } .splitter-image { @@ -96,4 +92,13 @@

                                      Preview of sample

                                      margin-top: 10px; } + + + + \ No newline at end of file diff --git a/src/splitter/default-stack.json b/src/splitter/default-stack.json index bf103fa7..eb427eb1 100644 --- a/src/splitter/default-stack.json +++ b/src/splitter/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      Horizontal Splitter
                                      \n
                                      \n
                                      \n
                                      Left pane
                                      size: 25%
                                      min: 60px
                                      \n
                                      \n
                                      \n Middle pane
                                      size: 50%
                                      min: 60px
                                      \n
                                      \n
                                      \n Right pane
                                      size: 25%
                                      min: 60px
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Vertical Splitter
                                      \n
                                      \n
                                      \n Top pane
                                      size: 30%
                                      min: 60px
                                      \n
                                      \n
                                      \n Middle pane
                                      size: 40%
                                      min: 60px
                                      \n
                                      \n
                                      \n Bottom pane
                                      size: 30%
                                      min: 60px
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for default functionalities\n */\n\n var splitObj1 = new ej.layouts.Splitter({\n height: '110px',\n paneSettings: [\n { size: '25%', min: '60px' },\n { size: '50%', min: '60px' },\n { size: '25%', min: '60px' }\n ],\n width: '100%',\n separatorSize: 4\n });\n splitObj1.appendTo('#horizontal');\n var splitObj2 = new ej.layouts.Splitter({\n height: '240px',\n paneSettings: [\n { size: '30%', min: '60px' },\n { size: '40%', min: '60px' },\n { size: '30%', min: '60px' }\n ],\n width: '100%',\n orientation: 'Vertical',\n separatorSize: 4\n });\n splitObj2.appendTo('#vertical');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      Horizontal Splitter
                                      \n
                                      \n
                                      \n
                                      Left pane
                                      size: 25%
                                      min: 60px
                                      \n
                                      \n
                                      \n Middle pane
                                      size: 50%
                                      min: 60px
                                      \n
                                      \n
                                      \n Right pane
                                      size: 25%
                                      min: 60px
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Vertical Splitter
                                      \n
                                      \n
                                      \n Top pane
                                      size: 30%
                                      min: 60px
                                      \n
                                      \n
                                      \n Middle pane
                                      size: 40%
                                      min: 60px
                                      \n
                                      \n
                                      \n Bottom pane
                                      size: 30%
                                      min: 60px
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for default functionalities\n */\n\n var splitObj1 = new ej.layouts.Splitter({\n height: '110px',\n paneSettings: [\n { size: '25%', min: '60px' },\n { size: '50%', min: '60px' },\n { size: '25%', min: '60px' }\n ],\n width: '100%',\n separatorSize: 4\n });\n splitObj1.appendTo('#horizontal');\n var splitObj2 = new ej.layouts.Splitter({\n height: '240px',\n paneSettings: [\n { size: '30%', min: '60px' },\n { size: '40%', min: '60px' },\n { size: '30%', min: '60px' }\n ],\n width: '100%',\n orientation: 'Vertical',\n separatorSize: 4\n });\n splitObj2.appendTo('#vertical');\n"} \ No newline at end of file diff --git a/src/splitter/default.html b/src/splitter/default.html index 11aa6871..37d3bec0 100644 --- a/src/splitter/default.html +++ b/src/splitter/default.html @@ -3,13 +3,13 @@
                                      Horizontal Splitter
                                      -
                                      +
                                      Left pane
                                      size: 25%
                                      min: 60px
                                      -
                                      +
                                      Middle pane
                                      size: 50%
                                      min: 60px
                                      -
                                      +
                                      Right pane
                                      size: 25%
                                      min: 60px
                                      @@ -17,13 +17,13 @@
                                      Vertical Splitter
                                      -
                                      +
                                      Top pane
                                      size: 30%
                                      min: 60px
                                      -
                                      +
                                      Middle pane
                                      size: 40%
                                      min: 60px
                                      -
                                      +
                                      Bottom pane
                                      size: 30%
                                      min: 60px
                                      @@ -53,20 +53,12 @@ font-size: 14px; margin-bottom: 4px; } - .pane1 { - margin: 20px auto; - max-width: 440px; - } - .pane2 { - margin: 20px auto; - max-width: 440px; - } .control-section{ min-height: 370px; margin-bottom: 15px; margin-top: 10px; } - .content { + .default-splitter-content { text-align: center; align-items: center; justify-content: center; @@ -74,3 +66,16 @@ height: 100%; } + + + + diff --git a/src/splitter/details-view-stack.json b/src/splitter/details-view-stack.json index 963b855b..1501c1b7 100644 --- a/src/splitter/details-view-stack.json +++ b/src/splitter/details-view-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for list-view in splitter\n */\nvar commonData = [];\nvar dataSource = {};\nvar listObj;\nvar liElement;\n\n var splitterObj = new ej.layouts.Splitter({\n height: '292px',\n paneSettings: [\n { size: '35%', min: '25%' },\n { size: '65%', min: '45%' }\n ],\n width: '100%'\n });\n splitterObj.appendTo('#splitter');\n ej.lists.ListView.Inject(ej.lists.Virtualization);\n commonData = [\n { name: 'Margaret', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/margaret.png', id: '1' },\n { name: 'Laura', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/laura.png', id: '2' },\n { name: 'Robert', icon: 'R', id: '3' },\n { name: 'Albert', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/albert.png', id: '5' },\n { name: 'Michale', icon: 'M', id: '4' }\n ];\n liElement = document.getElementById('ui-list');\n if (ej.base.Browser.isDevice) {\n liElement.classList.add('ui-mobile');\n }\n [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach(function (ds) {\n var data = commonData.slice();\n dataSource[ds[1]] = data;\n });\n var template = '
                                      ' +\n '' +\n '${icon} ' +\n '${name}
                                      ';\n listObj = new ej.lists.ListView({\n dataSource: dataSource.data1,\n enableVirtualization: true,\n cssClass: 'e-list-template',\n height: 289,\n template: template,\n select: onSelect,\n actionComplete: function () {\n listObj.selectItem(dataSource.data1[0]);\n }\n });\n //Render initialized ListView component\n listObj.appendTo('#ui-list');\n function onSelect(e) {\n var listid = e.item.dataset.uid;\n // tslint:disable:max-line-length\n switch (listid) {\n case '1':\n splitterObj.paneSettings[1].content = '
                                      \"margeret\"
                                      Margeret Peacock
                                      TitleSales Representative
                                      Hire Date11/15/1994
                                      Address507 - 20th Ave. E. Apt. 2A
                                      CitySeattle
                                      Phone(206) 555-9857
                                      ';\n break;\n case '2':\n splitterObj.paneSettings[1].content = '
                                      \"laura\"
                                      Laura Callahan
                                      TitleSales Representative
                                      Hire Date09/25/1993
                                      Address908 W. Capital Way
                                      CityTacoma
                                      Phone(206) 555-9482
                                      ';\n break;\n case '3':\n splitterObj.paneSettings[1].content = '
                                      \"robert\"
                                      Robert King
                                      TitleSales Manager
                                      Hire Date03/20/1990
                                      Address14 Garrett Hill
                                      CityLondon
                                      Phone(71) 555-4848
                                      ';\n break;\n case '4':\n splitterObj.paneSettings[1].content = '
                                      \"michale\"
                                      Michale Suyama
                                      TitleInside Sales Coordinator
                                      Hire Date06/10/1998
                                      Address4726 - 11th Ave. N.E.
                                      CitySeattle
                                      Phone(206) 555-1189
                                      ';\n break;\n case '5':\n splitterObj.paneSettings[1].content = '
                                      \"albert\"
                                      Albert Dodsworth
                                      TitleSales Representative
                                      Hire Date10/5/1996
                                      Address7 Houndstooth Rd.
                                      CityLondon
                                      Phone(71) 555-4444
                                      ';\n break;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for list-view in splitter\n */\nvar commonData = [];\nvar dataSource = {};\nvar listObj;\nvar liElement;\n\n var splitterObj = new ej.layouts.Splitter({\n height: '292px',\n paneSettings: [\n { size: '35%', min: '25%' },\n { size: '65%', min: '45%' }\n ],\n width: '100%'\n });\n splitterObj.appendTo('#splitter');\n ej.lists.ListView.Inject(ej.lists.Virtualization);\n commonData = [\n { name: 'Margaret', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/margaret.png', id: '1' },\n { name: 'Laura', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/laura.png', id: '2' },\n { name: 'Robert', icon: 'R', id: '3' },\n { name: 'Albert', imgUrl: 'https://ej2.syncfusion.com/demos/src/listview/images/albert.png', id: '5' },\n { name: 'Michale', icon: 'M', id: '4' }\n ];\n liElement = document.getElementById('ui-list');\n if (ej.base.Browser.isDevice) {\n liElement.classList.add('ui-mobile');\n }\n [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach(function (ds) {\n var data = commonData.slice();\n dataSource[ds[1]] = data;\n });\n var template = '
                                      ' +\n '' +\n '${icon} ' +\n '${name}
                                      ';\n listObj = new ej.lists.ListView({\n dataSource: dataSource.data1,\n enableVirtualization: true,\n cssClass: 'e-list-template',\n height: 289,\n template: template,\n select: onSelect,\n actionComplete: function () {\n listObj.selectItem(dataSource.data1[0]);\n }\n });\n //Render initialized ListView component\n listObj.appendTo('#ui-list');\n function onSelect(e) {\n var listid = e.item.dataset.uid;\n // tslint:disable:max-line-length\n switch (listid) {\n case '1':\n splitterObj.paneSettings[1].content = '
                                      \"margeret\"
                                      Margeret Peacock
                                      TitleSales Representative
                                      Hire Date11/15/1994
                                      Address507 - 20th Ave. E. Apt. 2A
                                      CitySeattle
                                      Phone(206) 555-9857
                                      ';\n break;\n case '2':\n splitterObj.paneSettings[1].content = '
                                      \"laura\"
                                      Laura Callahan
                                      TitleSales Representative
                                      Hire Date09/25/1993
                                      Address908 W. Capital Way
                                      CityTacoma
                                      Phone(206) 555-9482
                                      ';\n break;\n case '3':\n splitterObj.paneSettings[1].content = '
                                      \"robert\"
                                      Robert King
                                      TitleSales Manager
                                      Hire Date03/20/1990
                                      Address14 Garrett Hill
                                      CityLondon
                                      Phone(71) 555-4848
                                      ';\n break;\n case '4':\n splitterObj.paneSettings[1].content = '
                                      \"michale\"
                                      Michale Suyama
                                      TitleInside Sales Coordinator
                                      Hire Date06/10/1998
                                      Address4726 - 11th Ave. N.E.
                                      CitySeattle
                                      Phone(206) 555-1189
                                      ';\n break;\n case '5':\n splitterObj.paneSettings[1].content = '
                                      \"albert\"
                                      Albert Dodsworth
                                      TitleSales Representative
                                      Hire Date10/5/1996
                                      Address7 Houndstooth Rd.
                                      CityLondon
                                      Phone(71) 555-4444
                                      ';\n break;\n }\n }\n"} \ No newline at end of file diff --git a/src/splitter/details-view.html b/src/splitter/details-view.html index 1aad86c4..33eb8322 100644 --- a/src/splitter/details-view.html +++ b/src/splitter/details-view.html @@ -4,7 +4,7 @@
                                      -
                                      +
                                      @@ -36,10 +36,6 @@ left: calc(50% - 1.5em); box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2); } - #target { - margin: 20px auto; - max-width: 710px; - } /* ListView template customization */ #ui-list.e-listview .showUI { @@ -83,4 +79,13 @@ font-size: 14px; text-align: center; } - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/splitter/expand-and-collapse-stack.json b/src/splitter/expand-and-collapse-stack.json new file mode 100644 index 00000000..d88b853c --- /dev/null +++ b/src/splitter/expand-and-collapse-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n Neural Networks Using C# Succinctly\n

                                      Neural networks are an exciting field of software development used to calculate outputs from input data. \n While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition, \n speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn \n how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of \n several values.

                                      Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately \n how to train a neural network to find weights and bias values that provide accurate predictions.\n An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is \n a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is \n useful to understand what types of problems they can solve.\n

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Data Capture and Extraction with C# Succinctly\n

                                      Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more\n engaging without relying entirely on specialized tools is an efficient way to improve productivity. \n In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.\n Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email \n is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world.\n

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Spark Succinctly\n

                                      Mastering big data requires an aptitude at every step of information processing. \n Post-processing, one of the most important steps, is where you find Apache Spark frequently employed. \n Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the \n third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and\n Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data.\n

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n","index.js":"{{ripple}}/**\n * Sample for expand-collapse in splitter\n */\n\n var splitObj = new ej.layouts.Splitter({\n height: '385px',\n paneSettings: [\n { size: '48%', collapsible: true },\n\t\t\t{ collapsible: true }\n ],\n\t\tseparatorSize: 3,\n width: '100%'\n });\n splitObj.appendTo('#splitter');\n var splitObj1 = new ej.layouts.Splitter({\n paneSettings: [\n { size: '50%', collapsible: true },\n { collapsible: true }\n ],\n\t\tseparatorSize: 3,\n orientation: 'Vertical'\n });\n splitObj1.appendTo('#verticalSplitter');\n"} \ No newline at end of file diff --git a/src/splitter/expand-and-collapse.html b/src/splitter/expand-and-collapse.html new file mode 100644 index 00000000..0d52e100 --- /dev/null +++ b/src/splitter/expand-and-collapse.html @@ -0,0 +1,98 @@ +
                                      +
                                      +
                                      +
                                      + Neural Networks Using C# Succinctly +

                                      Neural networks are an exciting field of software development used to calculate outputs from input data. + While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition, + speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn + how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of + several values.

                                      Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately + how to train a neural network to find weights and bias values that provide accurate predictions. + An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is + a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is + useful to understand what types of problems they can solve. +

                                      +
                                      +
                                      +
                                      +
                                      +
                                      + Data Capture and Extraction with C# Succinctly +

                                      Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more + engaging without relying entirely on specialized tools is an efficient way to improve productivity. + In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time. + Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email + is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world. +

                                      +
                                      +
                                      +
                                      +
                                      + Spark Succinctly +

                                      Mastering big data requires an aptitude at every step of information processing. + Post-processing, one of the most important steps, is where you find Apache Spark frequently employed. + Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the + third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and + Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data. +

                                      +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      + +
                                      +

                                      + This example demonstrates the expand and collapse functionalities of the Splitter control. To expand or collapse the panes, + hover the mouse over the separator (divider) bar and click the corresponding icon to expand or collapse pane. +

                                      +
                                      +
                                      +

                                      + The splitter (split container) allows expanding and collapsing its split panes. + You can control this behavior using the paneSettings Collapsible property. + The collapsible behavior can be enabled for specific pane alone. +

                                      +

                                      + When you hover the mouse over the pane's separator (divider), the expand and collapse icons will be visible. + While clicking the icon, the corresponding pane is expanded or collapsed. + The remaining panes automatically adjust its dimension based on the expanded or collapsed panes. + These icons are visible by default in mobile devices. +

                                      +
                                      + \ No newline at end of file diff --git a/src/splitter/expand-and-collapse.js b/src/splitter/expand-and-collapse.js new file mode 100644 index 00000000..4c40cb3e --- /dev/null +++ b/src/splitter/expand-and-collapse.js @@ -0,0 +1,24 @@ +/** + * Sample for expand-collapse in splitter + */ +this.default = function () { + var splitObj = new ej.layouts.Splitter({ + height: '385px', + paneSettings: [ + { size: '48%', collapsible: true }, + { collapsible: true } + ], + separatorSize: 3, + width: '100%' + }); + splitObj.appendTo('#splitter'); + var splitObj1 = new ej.layouts.Splitter({ + paneSettings: [ + { size: '50%', collapsible: true }, + { collapsible: true } + ], + separatorSize: 3, + orientation: 'Vertical' + }); + splitObj1.appendTo('#verticalSplitter'); +}; \ No newline at end of file diff --git a/src/splitter/javascript-chart-ajax.html b/src/splitter/javascript-chart-ajax.html index f647a85e..26e618fa 100644 --- a/src/splitter/javascript-chart-ajax.html +++ b/src/splitter/javascript-chart-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About JavaScript Charts

                                      The HTML5 JavaScript charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. Its high performing quality helps to render a large amount of data quickly. It also comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, drill-down, and events to make the charts more interactive. diff --git a/src/splitter/javascript-grid-ajax.html b/src/splitter/javascript-grid-ajax.html index 33d6f92c..112348e4 100644 --- a/src/splitter/javascript-grid-ajax.html +++ b/src/splitter/javascript-grid-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About JavaScript Grid

                                      The JavaScript DataGrid, or DataTable, is a feature-rich control for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats. diff --git a/src/splitter/javascript-schedule-ajax.html b/src/splitter/javascript-schedule-ajax.html index 3a732c53..a1a18e2d 100644 --- a/src/splitter/javascript-schedule-ajax.html +++ b/src/splitter/javascript-schedule-ajax.html @@ -1,4 +1,4 @@ -
                                      +

                                      About JavaScript Schedule

                                      The HTML5 JavaScript Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and a resizing action. diff --git a/src/splitter/outlook-style-layout-stack.json b/src/splitter/outlook-style-layout-stack.json index a15d1eeb..366e3039 100644 --- a/src/splitter/outlook-style-layout-stack.json +++ b/src/splitter/outlook-style-layout-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      Subject
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      ","index.js":"{{ripple}}/**\n * Sample for outlook style using splitter\n */\n\n var splitObj1 = new ej.layouts.Splitter({\n height: '493px',\n paneSettings: [\n { size: '28%', min: '27%' },\n { size: '33%', min: '23%' },\n { size: '37%', min: '30%' }\n ],\n width: '100%'\n });\n splitObj1.appendTo('#splitter1');\n var inputobj1 = new ej.inputs.TextBox({});\n inputobj1.appendTo('#firstname');\n var inputobj2 = new ej.inputs.TextBox({});\n inputobj2.appendTo('#lastname');\n var inputobj3 = new ej.inputs.TextBox({});\n inputobj3.appendTo('#subject');\n // Data source for TreeView component\n var mailBox = [\n { id: 1, name: 'Favorites', hasChild: true },\n { id: 2, pid: 1, name: 'Sales Reports', count: '4' },\n { id: 3, pid: 1, name: 'Sent Items' },\n { id: 4, pid: 1, name: 'Marketing Reports ', count: '6' },\n { id: 5, name: 'Andrew Fuller', hasChild: true, expanded: true },\n { id: 6, pid: 5, name: 'Inbox', selected: true, count: '20' },\n { id: 7, pid: 5, name: 'Drafts', count: '5' },\n { id: 15, pid: 5, name: 'Archive' },\n { id: 8, pid: 5, name: 'Deleted Items' },\n { id: 9, pid: 5, name: 'Sent Items' },\n { id: 10, pid: 5, name: 'Sales Reports', count: '4' },\n { id: 11, pid: 5, name: 'Marketing Reports', count: '6' },\n { id: 12, pid: 5, name: 'Outbox' },\n { id: 13, pid: 5, name: 'Junk Email' },\n { id: 14, pid: 5, name: 'RSS Feed' },\n { id: 15, pid: 5, name: 'Trash' }\n ];\n // Render the TreeView using template option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n nodeTemplate: '#treeTemplate',\n });\n treeObj.appendTo('#tree');\n // tslint:disable:max-line-length\n //Define an array of JSON data\n var dataSource = [\n { Name: 'Selma Tally', content: '
                                      Apology marketing email
                                      Hello Ananya Singleton
                                      ', id: '1', order: 0 },\n { Name: 'Illa Russo', content: '
                                      Annual conference
                                      Hi jeani Moresa
                                      ', id: '4', order: 0 },\n { Name: 'Camden Macmellon', content: '
                                      Reference request- Camden hester
                                      Hello Kerry Best,
                                      ', order: 0 },\n { Name: 'Garth Owen', content: '
                                      Application for job Title
                                      Hello Illa Russo
                                      ', id: '2', order: 0 },\n { Name: 'Ursula Patterson', content: '
                                      Programmaer Position Applicant
                                      Hello Kerry best,
                                      ', id: '2', order: 0 }\n ];\n // Initialize ListView component\n var listObj = new ej.lists.ListView({\n //Set defined data to dataSource property\n dataSource: dataSource,\n cssClass: 'e-list-template',\n //Map the appropriate columns to fields property\n fields: { text: 'Name', groupBy: 'order' },\n //Set customized group-header template\n groupTemplate: '
                                      ',\n //Set customized list template\n template: '
                                      ' +\n '${Name}' +\n '${content}' +\n '
                                      '\n });\n //Render initialized ListView component\n listObj.appendTo('#groupedList');\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#rteSubmit');\n var button2 = new ej.buttons.Button();\n button2.appendTo('#rteCancel');\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ height: '262px' });\n defaultRTE.appendTo('#defaultRTE');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      Subject
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n\n","index.js":"{{ripple}}/**\n * Sample for outlook style using splitter\n */\n\n var rteObj;\n var splitObj1 = new ej.layouts.Splitter({\n height: '493px',\n paneSettings: [\n { size: '28%', min: '27%' },\n { size: '33%', min: '23%' },\n { size: '37%', min: '30%' }\n ],\n resizeStop: onSplitterResize,\n width: '100%'\n });\n splitObj1.appendTo('#splitter1');\n var inputobj1 = new ej.inputs.TextBox({});\n inputobj1.appendTo('#firstname');\n var inputobj2 = new ej.inputs.TextBox({});\n inputobj2.appendTo('#lastname');\n var inputobj3 = new ej.inputs.TextBox({});\n inputobj3.appendTo('#subject');\n // Data source for TreeView component\n var mailBox = [\n { id: 1, name: 'Favorites', hasChild: true },\n { id: 2, pid: 1, name: 'Sales Reports', count: '4' },\n { id: 3, pid: 1, name: 'Sent Items' },\n { id: 4, pid: 1, name: 'Marketing Reports ', count: '6' },\n { id: 5, name: 'Andrew Fuller', hasChild: true, expanded: true },\n { id: 6, pid: 5, name: 'Inbox', selected: true, count: '20' },\n { id: 7, pid: 5, name: 'Drafts', count: '5' },\n { id: 15, pid: 5, name: 'Archive' },\n { id: 8, pid: 5, name: 'Deleted Items' },\n { id: 9, pid: 5, name: 'Sent Items' },\n { id: 10, pid: 5, name: 'Sales Reports', count: '4' },\n { id: 11, pid: 5, name: 'Marketing Reports', count: '6' },\n { id: 12, pid: 5, name: 'Outbox' },\n { id: 13, pid: 5, name: 'Junk Email' },\n { id: 14, pid: 5, name: 'RSS Feed' },\n { id: 15, pid: 5, name: 'Trash' }\n ];\n // Render the TreeView using template option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n nodeTemplate: '#treeTemplate',\n });\n treeObj.appendTo('#tree');\n // tslint:disable:max-line-length\n //Define an array of JSON data\n var dataSource = [\n { Name: 'Selma Tally', content: '
                                      Apology marketing email
                                      Hello Ananya Singleton
                                      ', id: '1', order: 0 },\n { Name: 'Illa Russo', content: '
                                      Annual conference
                                      Hi jeani Moresa
                                      ', id: '4', order: 0 },\n { Name: 'Camden Macmellon', content: '
                                      Reference request- Camden hester
                                      Hello Kerry Best,
                                      ', order: 0 },\n { Name: 'Garth Owen', content: '
                                      Application for job Title
                                      Hello Illa Russo
                                      ', id: '2', order: 0 },\n { Name: 'Ursula Patterson', content: '
                                      Programmaer Position Applicant
                                      Hello Kerry best,
                                      ', id: '2', order: 0 }\n ];\n // Initialize ListView component\n var listObj = new ej.lists.ListView({\n //Set defined data to dataSource property\n dataSource: dataSource,\n cssClass: 'e-list-template',\n //Map the appropriate columns to fields property\n fields: { text: 'Name', groupBy: 'order' },\n //Set customized group-header template\n groupTemplate: '
                                      ',\n //Set customized list template\n template: '
                                      ' +\n '${Name}' +\n '${content}' +\n '
                                      '\n });\n //Render initialized ListView component\n listObj.appendTo('#groupedList');\n var button1 = new ej.buttons.Button({ isPrimary: true });\n button1.appendTo('#rteSubmit');\n var button2 = new ej.buttons.Button();\n button2.appendTo('#rteCancel');\n var defaultRTE = new ej.richtexteditor.RichTextEditor({ height: '262px', created: onRteCreated });\n defaultRTE.appendTo('#defaultRTE');\n\n function onRteCreated() {\n rteObj = this;\n }\n\n function onSplitterResize() {\n rteObj.refresh();\n }\n"} \ No newline at end of file diff --git a/src/splitter/outlook-style-layout.html b/src/splitter/outlook-style-layout.html index 52e2a9be..8769121b 100644 --- a/src/splitter/outlook-style-layout.html +++ b/src/splitter/outlook-style-layout.html @@ -2,17 +2,17 @@
                                      -
                                      +
                                      -
                                      +
                                      -
                                      +
                                      @@ -75,20 +75,16 @@ #discard { margin-left: 7px; } - table { + .outlook-layout-content table { width: 100%; } - #target { - margin: 20px auto; - max-width: 820px; - } - td { + .outlook-layout-content td { padding: 2px; } .control-section{ min-height: 370px; } - .e-treeview .e-list-text { + .outlook-layout-content .e-treeview .e-list-text { width: 100%; } #groupedList.e-listview .e-list-group-item { @@ -104,4 +100,16 @@ padding-left: 3px; padding-right: 4px; } - \ No newline at end of file + #splitter1 #tree ul.e-list-parent.e-ul { + padding: 0 0 0 16px; + } + + + + + \ No newline at end of file diff --git a/src/splitter/outlook-style-layout.js b/src/splitter/outlook-style-layout.js index 41434a1c..dced0e78 100644 --- a/src/splitter/outlook-style-layout.js +++ b/src/splitter/outlook-style-layout.js @@ -2,6 +2,7 @@ * Sample for outlook style using splitter */ this.default = function () { + var rteObj; var splitObj1 = new ej.layouts.Splitter({ height: '493px', paneSettings: [ @@ -9,6 +10,7 @@ this.default = function () { { size: '33%', min: '23%' }, { size: '37%', min: '30%' } ], + resizeStop: onSplitterResize, width: '100%' }); splitObj1.appendTo('#splitter1'); @@ -73,6 +75,14 @@ this.default = function () { button1.appendTo('#rteSubmit'); var button2 = new ej.buttons.Button(); button2.appendTo('#rteCancel'); - var defaultRTE = new ej.richtexteditor.RichTextEditor({ height: '262px' }); + var defaultRTE = new ej.richtexteditor.RichTextEditor({ height: '262px', created: onRteCreated }); defaultRTE.appendTo('#defaultRTE'); + + function onRteCreated() { + rteObj = this; + } + + function onSplitterResize() { + rteObj.refresh(); + } }; \ No newline at end of file diff --git a/src/splitter/sample.json b/src/splitter/sample.json index 73b6f256..eddafbd8 100644 --- a/src/splitter/sample.json +++ b/src/splitter/sample.json @@ -3,12 +3,13 @@ "directory": "splitter", "category":"Layout", "ftName" :"splitter", - "type": "preview", + "type": "update", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"Splitter", "description": "This sample demonstrates the basic rendering of splitter.","api": { "Splitter": ["paneSettings", "height", "width", "orientation"] } }, - {"url":"accordion-navigation-menu", "name": "Accordion Navigation Menu", "category":"Use Case", "description": "This sample demonstrates the implementation of ajax in splitter.", "api": { "Splitter": ["paneSettings", "height", "width", "expanded", "expanding", "items", "datasource", "select"] } }, - {"url":"details-view", "name": "Details View", "category":"Use Case", "description": "This sample demonstrates the split view in splitter.", "api": { "Splitter": ["paneSettings", "height", "width","enableVirtualization", "cssClass", "template", "actionComplete", "datasource", "select"] } }, - {"url":"outlook-style-layout", "name": "Outlook-style Layout", "category":"Use Case", "description": "This sample demonstrates the basic rendering of outlook preview using splitter.", "api": { "Splitter": ["paneSettings", "height", "width","fields", "nodeTemplate", "template", "groupTemplate", "cssClass", "datasource", "select"]} }, - {"url":"code-editor-layout", "name": "Code Editor Layout", "category":"Use Case", "description": "This sample demonstrates the basic rendering of code editor using splitter.", "api": { "Splitter": ["paneSettings", "height", "width","orientation"]} } + {"url":"default", "name": "Default Functionalities", "category":"Splitter", "description": "The example explains the default functionalities of the JavaScript(ES5) splitter with resizable panes, separator, and orientation (horizontal and vertical).","api": { "Splitter": ["paneSettings", "height", "width", "orientation"] } }, + {"url":"expand-and-collapse", "name": "Expand and Collapse", "category":"Splitter", "type": "new", "description": "The example presents collapsible JavaScript Splitter that exposes expand and collapse action of panes with a different orientation and resizable panes.", "api": { "Splitter": ["paneSettings", "height", "width", "orientation"] } }, + {"url":"accordion-navigation-menu", "name": "Accordion Navigation Menu", "category":"Use Case", "description": "The example shows how to integrate Accordion and load the content from external sources using the Ajax library inside panes of JavaScript(ES5) Splitter.", "api": { "Splitter": ["paneSettings", "height", "width", "expanded", "expanding", "items", "datasource", "select"] } }, + {"url":"details-view", "name": "Details View", "category":"Use Case", "description": "The example demonstrates how to create employee details view layout using panes of JavaScript(ES5) Splitter and ListView with navigation.", "api": { "Splitter": ["paneSettings", "height", "width","enableVirtualization", "cssClass", "template", "actionComplete", "datasource", "select"] } }, + {"url":"outlook-style-layout", "name": "Outlook-style Layout", "category":"Use Case", "description": "The example explains how to construct an outlook style layout using JavaScript(ES5) Splitter, TreeView, ListView, and Rich Text Editor with multiple panes.", "api": { "Splitter": ["paneSettings", "height", "width","fields", "nodeTemplate", "template", "groupTemplate", "cssClass", "datasource", "select"]} }, + {"url":"code-editor-layout", "name": "Code Editor Layout", "category":"Use Case", "description": "The example shows how to construct code editor layout (UI) using JavaScript(ES5) Splitter with multiple, nested, different oriented, and resizable panes.", "api": { "Splitter": ["paneSettings", "height", "width","orientation"]} } ] } \ No newline at end of file diff --git a/src/stock-chart/area-stack.json b/src/stock-chart/area-stack.json new file mode 100644 index 00000000..5eb746bd --- /dev/null +++ b/src/stock-chart/area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}renderAreaStockChart = function (aapl) {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent' },\n crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent' },\n crosshairTooltip: { enable: true }\n },\n series: [\n {\n dataSource: aapl, xName: 'x', yName: 'high', type: 'Area', fill: '#BDEDE9'\n }\n ],\n seriesType : [],\n indicatorType : [],\n title: 'AAPL Stock Price',\n titleStyle: { fontWeight: '500', color: '#424242' },\n crosshair: { enable: true },\n\n });\n stockChart.appendTo('#container');\n };\n \n var aapl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aapl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n aapl = JSON.parse(data);\n aapl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderAreaStockChart(aapl);\n };\n \n\n"} \ No newline at end of file diff --git a/src/stock-chart/area.js b/src/stock-chart/area.js index 9aeb69ce..46353832 100644 --- a/src/stock-chart/area.js +++ b/src/stock-chart/area.js @@ -18,12 +18,14 @@ renderAreaStockChart = function (aapl) { title: 'AAPL Stock Price', titleStyle: { fontWeight: '500', color: '#424242' }, crosshair: { enable: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/default-stack.json b/src/stock-chart/default-stack.json new file mode 100644 index 00000000..79fdd9af --- /dev/null +++ b/src/stock-chart/default-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}window.default = function () {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n crosshairTooltip: { enable: true },\n },\n primaryXAxis: { \n majorGridLines: { color: 'transparent' },\n crosshairTooltip: { enable: true }\n },\n series: [\n {\n dataSource: window.chartData,\n type: 'Candle'\n },\n ],\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n },\n title: 'AAPL Stock Price',\n titleStyle: { fontWeight: '500', color: '#424242' },\n tooltip: { enable: true },\n crosshair: {\n enable: true, \n },\n\n });\n stockChart.appendTo('#container');\n \n\n "} \ No newline at end of file diff --git a/src/stock-chart/default.js b/src/stock-chart/default.js index d4a66bec..a09cfb7d 100644 --- a/src/stock-chart/default.js +++ b/src/stock-chart/default.js @@ -29,12 +29,14 @@ window.default = function () { crosshair: { enable: true, }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/disabled-navigator-stack.json b/src/stock-chart/disabled-navigator-stack.json new file mode 100644 index 00000000..9d528a74 --- /dev/null +++ b/src/stock-chart/disabled-navigator-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n\n \n \n \n \n \n \n\n\n
                                      ","index.js":"{{ripple}}renderDisabledStockChart = function (chartData) {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 },crosshairTooltip: { enable: true } },\n primaryYAxis: { lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n crosshairTooltip: { enable: true } },\n series: [\n {\n dataSource: chartData, xName: 'date', type: 'Line'\n }\n ],\n tooltip: { enable: true },\n crosshair: {\n enable: true\n }, \n enableSelector: false,\n\n });\n stockChart.appendTo('#disabledNavigatorChart');\n };\n \n var chartData;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/indicator-data.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n chartData = JSON.parse(data);\n chartData.map(function (data) {\n data.date = new Date(data.date);\n });\n renderDisabledStockChart(chartData);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/disabled-navigator.js b/src/stock-chart/disabled-navigator.js index 771c9130..22e2f7ac 100644 --- a/src/stock-chart/disabled-navigator.js +++ b/src/stock-chart/disabled-navigator.js @@ -15,12 +15,21 @@ renderDisabledStockChart = function (chartData) { enable: true }, enableSelector: false, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); + }, + tooltipRender: function (args) { + if  (args.text.split('
                                      ')[4]) { + var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]); + var value = (target / 100000000).toFixed(1) + 'B'; + args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value); + } } + // custom code end }); stockChart.appendTo('#disabledNavigatorChart'); }; diff --git a/src/stock-chart/disabled-period-stack.json b/src/stock-chart/disabled-period-stack.json new file mode 100644 index 00000000..262577ab --- /dev/null +++ b/src/stock-chart/disabled-period-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
                                      ","index.js":"{{ripple}}var selectedTheme = location.hash.split('/')[1];\nselectedTheme = selectedTheme ? selectedTheme : 'Material';\nvar theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\nrenderStockChart = function (aapl) {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }\n },\n series: [\n {\n dataSource: aapl, xName: 'x', yName: 'open', type: 'Area', fill: 'url(#' + theme.toLowerCase() + '-gradient-chart)'\n }\n ],\n enablePeriodSelector: false,\n tooltip: { enable: true },\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n },\n crosshair: {\n enable: true\n },\n theme: theme\n });\n stockChart.appendTo('#disabledPeriodChart');\n };\n \n var aapl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aapl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n aapl = JSON.parse(data);\n aapl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderStockChart(aapl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/disabled-period.html b/src/stock-chart/disabled-period.html index 2e0ecf2e..e416dbd1 100644 --- a/src/stock-chart/disabled-period.html +++ b/src/stock-chart/disabled-period.html @@ -1,13 +1,21 @@
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}renderInversedStockChart = function (aapl) {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { valueType: 'DateTime', isInversed: true,\n majorGridLines: { width: 0 },crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }, isInversed: true,crosshairTooltip: { enable: true }\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: aapl, xName: 'x', yName: 'high', type: 'Area', fill: '#BDEDE9'\n }\n ],\n seriesType : [],\n indicatorType : [],\n crosshair: { enable: true },\n title: 'AAPL Stock Price',\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var aapl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aapl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n aapl = JSON.parse(data);\n aapl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderInversedStockChart(aapl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/inversed-area.js b/src/stock-chart/inversed-area.js index f504d79b..3bad519e 100644 --- a/src/stock-chart/inversed-area.js +++ b/src/stock-chart/inversed-area.js @@ -17,12 +17,14 @@ renderInversedStockChart = function (aapl) { crosshair: { enable: true }, title: 'AAPL Stock Price', titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/live-stack.json b/src/stock-chart/live-stack.json new file mode 100644 index 00000000..8bff4d44 --- /dev/null +++ b/src/stock-chart/live-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}} var series1 = [];\n var point1;\n var value = 80;\n var i;\n var day;\n for (i = 1; i < 500; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = { date: new Date(2000, 1, 1, i), y: value.toFixed(1) \n series1.push(point1);\n }\n var time;\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent' } },\n primaryYAxis: { lineStyle: { color: ' transparent' },\n majorTickLines: { color: 'transparent', width: 0 } },\n chartArea: { border: { width: 0 } },\n seriesType: [],\n indicatorType: [],\n exportType: [],\n series: [\n {\n dataSource: series1, yName: 'y',\n type: 'Line', name: 'series1', enableTooltip: false,\n },\n ],\n periods: [\n { text: '1H', interval: 1, intervalType: 'Hours', },\n { text: '12H', interval: 12, intervalType: 'Hours' },\n { text: '1D', interval: 1, intervalType: 'Days', selected: true },\n { text: 'All' }\n ],\n crosshair: { enable: false },\n tooltip: { enable: false }\n });\n stockChart.appendTo('#container');\n var setTimeoutValue = 1000;\n var intervalId;\n var count = 1;\n\n"} \ No newline at end of file diff --git a/src/stock-chart/multi-pane-stack.json b/src/stock-chart/multi-pane-stack.json new file mode 100644 index 00000000..55dbe3dd --- /dev/null +++ b/src/stock-chart/multi-pane-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}window.default = function () {\n var stockChart = new ej.charts.StockChart({\n rows: [{ height: '30%' }, { height: '70%' }],\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n \n },\n axes: [{\n name: 'yAxis1', rowIndex: 1, opposedPosition: true, labelPosition: 'Inside',\n tickPosition: 'Inside',\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent' }\n }],\n series: [\n {\n dataSource: window.chartData, \n type: 'Candle', yAxisName: 'yAxis1'\n },\n {\n dataSource: window.chartData, \n type: 'Column', yName: 'volume'\n }\n ],\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n },\n axisLabelRender : function (args ) {\n var text = parseFloat(args.text);\n if (args.axis.name === 'primaryYAxis') {\n args.text = text / 100000000 + 'B';\n }\n },\n crosshair: { enable: true },\n title: 'AAPL Historical',\n titleStyle: { fontWeight: '500', color: '#424242' },\n tooltip: { enable: true },\n\n });\n stockChart.appendTo('#container');\n \n "} \ No newline at end of file diff --git a/src/stock-chart/multi-pane.js b/src/stock-chart/multi-pane.js index 0784ffe0..019ea566 100644 --- a/src/stock-chart/multi-pane.js +++ b/src/stock-chart/multi-pane.js @@ -41,12 +41,14 @@ window.default = function () { title: 'AAPL Historical', titleStyle: { fontWeight: '500', color: '#424242' }, tooltip: { enable: true }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/multiple-series-stack.json b/src/stock-chart/multiple-series-stack.json new file mode 100644 index 00000000..97c6127f --- /dev/null +++ b/src/stock-chart/multiple-series-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}renderMultipleStockChart = function (goog) {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: {\n valueType: 'DateTime', majorGridLines: { width: 0 },\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n interval: 40, lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }\n },\n indicatorType : [],\n trendlineType : [], \n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: goog, xName: 'x', yName: 'close', type: 'Line',\n },\n {\n dataSource: window.googl, xName: 'x', yName: 'close', type: 'Line',\n }\n ],\n title: 'Multiple Series',\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var goog;\n var googl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/goog.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n goog = JSON.parse(data);\n goog.map(function (data) {\n data.x = new Date(data.x);\n });\n renderMultipleStockChart(goog);\n };\n \n \n "} \ No newline at end of file diff --git a/src/stock-chart/multiple-series.js b/src/stock-chart/multiple-series.js index a52af8c2..01c3bc0c 100644 --- a/src/stock-chart/multiple-series.js +++ b/src/stock-chart/multiple-series.js @@ -21,12 +21,14 @@ renderMultipleStockChart = function (goog) { ], title: 'Multiple Series', titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/ohlc-stack.json b/src/stock-chart/ohlc-stack.json new file mode 100644 index 00000000..43a7fe05 --- /dev/null +++ b/src/stock-chart/ohlc-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\nrenderOhlcStockChart = function () {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { color: 'transparent' },\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n labelFormat: 'n0',\n rangePadding: 'None',\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent' }\n }, \n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: googl, type: 'HiloOpenClose',\n animation: { enable: true },\n xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close',\n bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n }\n ],\n tooltip: { enable: true, shared: true },\n crosshair: {\n enable: true\n },\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n },\n title: 'AAPL Stock Price' ,\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var googl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/googl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n googl = JSON.parse(data);\n googl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderOhlcStockChart(googl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/ohlc.js b/src/stock-chart/ohlc.js index 83d243aa..574a73d4 100644 --- a/src/stock-chart/ohlc.js +++ b/src/stock-chart/ohlc.js @@ -34,12 +34,14 @@ renderOhlcStockChart = function () { }, title: 'AAPL Stock Price' , titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/period-customization-stack.json b/src/stock-chart/period-customization-stack.json new file mode 100644 index 00000000..a58e1154 --- /dev/null +++ b/src/stock-chart/period-customization-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}} window.default = function () {\n var series1 = [];\n var point1;\n var value = 80;\n var i;\n for (i = 1; i < 1440; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = { x: new Date(2000, 1, 1, 0, i), y: value.toFixed(1) };\n series1.push(point1);\n }\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { \n valueType: 'DateTime', \n majorGridLines: { color: 'transparent' },\n crosshairTooltip: { enable: true } \n },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n crosshairTooltip: { enable: true } \n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: series1, xName: 'x', yName: 'y', type: 'Line'\n }\n ],\n crosshair: {\n enable: true, \n }, \n seriesType: [],\n indicatorType: [],\n exportType: [],\n trendlineType : [],\n title: 'AAPL stock price by minutes',\n titleStyle: { fontWeight: '500', color: '#424242' },\n periods: [\n { intervalType: 'Minutes', interval: 1, text: '1m' },\n { intervalType: 'Minutes', interval: 30, text: '30m' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 12, text: '12H', selected: true },\n { text: '1D' }\n ],\n\n });\n stockChart.appendTo('#container');\n \n"} \ No newline at end of file diff --git a/src/stock-chart/period-customization.js b/src/stock-chart/period-customization.js index c8c2cde4..c700a0f9 100644 --- a/src/stock-chart/period-customization.js +++ b/src/stock-chart/period-customization.js @@ -46,12 +46,14 @@ { intervalType: 'Hours', interval: 12, text: '12H', selected: true }, { text: '1D' } ], + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/plot-line-stack.json b/src/stock-chart/plot-line-stack.json new file mode 100644 index 00000000..032e9843 --- /dev/null +++ b/src/stock-chart/plot-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n renderPlotLineStockChart = function (amzn) {\n var stockChart = new ej.charts.StockChart({\n primaryYAxis: {\n stripLines: [{ start: 320, sizeType: 'Pixel', size: 1, color: 'green', dashArray: '10,5' },\n { start: 380, sizeType: 'Pixel', size: 1, color: 'red', dashArray: '10,5' }],\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }\n },\n chartArea: { border: { width: 0 } },\n primaryXAxis: { majorGridLines: { color: 'transparent' } },\n series: [\n {\n dataSource:amzn, xName: 'x', yName: 'close', type: 'Line', \n }\n ],\n seriesType : [],\n indicatorType : [],\n title: 'Plot line on Y axis',\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var amzn;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aman.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n amzn = JSON.parse(data);\n amzn.map(function (data) {\n data.x = new Date(data.x);\n });\n renderPlotLineStockChart(amzn);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/plot-line.js b/src/stock-chart/plot-line.js index 33056d69..7e84e622 100644 --- a/src/stock-chart/plot-line.js +++ b/src/stock-chart/plot-line.js @@ -18,12 +18,14 @@ indicatorType : [], title: 'Plot line on Y axis', titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/sample.json b/src/stock-chart/sample.json index ac8a6a17..00dee07a 100644 --- a/src/stock-chart/sample.json +++ b/src/stock-chart/sample.json @@ -2,7 +2,7 @@ "name": "Stock Chart", "directory": "stock-chart", "category": "Data Visualization", - "type": "preview", + "type": "update", "ftName": "stock-chart", "samples": [ { @@ -173,7 +173,21 @@ "intervalType" ] } - } + } , + { + "url": "stock-events", + "name": "Stock Events", + "description":"This demo for Essential JS2 Stock Chart control shows how to render and configure the stock events in stock chart.", + "category": "Stock Chart", + "type": "new", + "api": { + "RangeNavigator": [ + "valueType", + "series", + "intervalType" + ] + } + } ], "dataSourcePath": "src/stock-chart/stock-data.js" diff --git a/src/stock-chart/spline-area-stack.json b/src/stock-chart/spline-area-stack.json new file mode 100644 index 00000000..2cfb13a1 --- /dev/null +++ b/src/stock-chart/spline-area-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\nrenderSplineAreaStockChart = function (googl) {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n crosshairTooltip: { enable: true }\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: googl, xName: 'x', yName: 'high', type: 'SplineArea', fill: '#BDEDE9'\n }\n ],\n seriesType : [],\n indicatorType : [],\n title: 'Google Stock Price',\n crosshair: {\n enable: true\n },\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var googl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/googl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n googl = JSON.parse(data);\n googl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderSplineAreaStockChart(googl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/spline-area.js b/src/stock-chart/spline-area.js index 8f5e22b2..72740d5b 100644 --- a/src/stock-chart/spline-area.js +++ b/src/stock-chart/spline-area.js @@ -4,7 +4,8 @@ renderSplineAreaStockChart = function (googl) { primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } }, primaryYAxis: { lineStyle: { color: 'transparent' }, - majorTickLines: { color: 'transparent', width: 0 } + majorTickLines: { color: 'transparent', width: 0 }, + crosshairTooltip: { enable: true } }, chartArea: { border: { width: 0 } }, series: [ @@ -15,13 +16,18 @@ renderSplineAreaStockChart = function (googl) { seriesType : [], indicatorType : [], title: 'Google Stock Price', + crosshair: { + enable: true + }, titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/spline-live-stack.json b/src/stock-chart/spline-live-stack.json new file mode 100644 index 00000000..c80d1c68 --- /dev/null +++ b/src/stock-chart/spline-live-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}} var series1 = [];\n var point1;\n var value = 80;\n var i;\n var day;\n for (i = 1; i < 500; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = { date: new Date(2000, 1, 1, i), y: value.toFixed(1) };\n series1.push(point1);\n }\n window.default = function () {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: series1, xName: 'x', yName: 'y', type: 'Spline'\n }\n ],\n periods: [\n { text: '1H', interval: 1, intervalType: 'Hours', },\n { text: '12H', interval: 12, intervalType: 'Hours' },\n { text: '1D', interval: 1, intervalType: 'Days', selected: true },\n { text: 'All' }\n ],\n seriesType: [],\n indicatorType: [],\n exportType: [],\n tooltip: { enable: true },\n crosshair: { enable: true }\n });\n stockChart.appendTo('#container');\n \n"} \ No newline at end of file diff --git a/src/stock-chart/spline-stack.json b/src/stock-chart/spline-stack.json new file mode 100644 index 00000000..192908fe --- /dev/null +++ b/src/stock-chart/spline-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n renderSplineStockChart = function (aapl) {\n var stockChart = new ej.charts.StockChart({\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 }\n },\n chartArea: { border: { width: 0 } },\n series: [\n {\n dataSource: aapl, xName: 'x', yName: 'high', type: 'Spline'\n }\n ],\n seriesType : [],\n indicatorType : [],\n title: 'AAPL Stock Price',\n titleStyle: { fontWeight: '500', color: '#424242' },\n tooltip: { enable: true },\n crosshair: { enable: true },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n },\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n },\n });\n stockChart.appendTo('#container');\n };\n \n var aapl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aapl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n aapl = JSON.parse(data);\n aapl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderSplineStockChart(aapl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/spline.js b/src/stock-chart/spline.js index 1ae34b6c..b55fffde 100644 --- a/src/stock-chart/spline.js +++ b/src/stock-chart/spline.js @@ -23,7 +23,14 @@ selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); - } + }, + tooltipRender: function (args) { + if  (args.text.split('
                                      ')[4]) { + var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]); + var value = (target / 100000000).toFixed(1) + 'B'; + args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value); + } + }, }); stockChart.appendTo('#container'); }; diff --git a/src/stock-chart/stock-events-stack.json b/src/stock-chart/stock-events-stack.json new file mode 100644 index 00000000..e33e4136 --- /dev/null +++ b/src/stock-chart/stock-events-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}renderLineStockChart = function (aapl) {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent'},crosshairTooltip: { enable: true } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent'},\n crosshairTooltip: { enable: true }\n },\n series: [\n {\n dataSource: aapl, xName: 'x', yName: 'high', type: 'Spline',name:'google',close:'high'\n }\n ],\n stockEvents: [\n { date: new Date(2012, 3, 1), text: 'Q2', description: '2012 Quarter2', type: 'Flag', background: '#6c6d6d', border: { color: '#6c6d6d' } },\n {\n date: new Date(2012, 3, 20), text: 'Open', description: 'Markets opened', textStyle: { color: 'white' },\n background: '#f48a21', border: { color: '#f48a21' }\n },\n {\n date: new Date(2012, 6, 1), text: 'Q3', description: '2013 Quarter3', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2012, 9, 1), text: 'Q4', description: '2013 Quarter4', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2012, 7, 30), text: 'G', description: 'Google Stock',\n textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }\n },\n {\n date: new Date(2012, 10, 1), text: 'Y', description: 'Yahoo Stock', type: 'Square',\n textStyle: { color: 'white' }, background: '#841391', border: { color: '#841391' }\n },\n {\n date: new Date(2012, 12, 0), text: 'Y2', description: 'Year 2013', type: 'Pin', showOnSeries: false,\n textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }\n },\n {\n date: new Date(2013, 3, 1), text: 'Q2', description: '2013 Quarter2', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2013, 3, 20), text: 'Q2', description: 'Surge in Stocks', type: 'ArrowUp',\n textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' }\n },\n {\n date: new Date(2013, 6, 1), text: 'Q3', description: '2013 Quarter3', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2013, 9, 1), text: 'Q4', description: '2013 Quarter4', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2013, 12, 0), text: 'Y3', description: 'Year 2014', type: 'Pin', showOnSeries: false,\n textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }\n },\n {\n date: new Date(2014, 3, 1), text: 'Q2', description: '2014 Quarter2', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2014, 6, 1), text: 'Q3', description: '2014 Quarter3',\n textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }\n },\n {\n date: new Date(2014, 9, 1), text: 'Q4', description: '2014 Quarter4', type: 'Flag',\n textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }\n },\n {\n date: new Date(2014, 12, 0), text: 'Y4', description: 'Year 2015', type: 'Pin', showOnSeries: false,\n textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }\n },\n {\n date: new Date(2014, 2, 2), text: 'End', description: 'Markets closed', type: 'ArrowDown',\n textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' }\n },\n {\n date: new Date('2015-01-07'), text: 'A', description: 'Amazon Stock',\n textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }\n },\n {\n date: new Date(2015, 1, 2), text: 'Q1', description: 'AAPL Stock',\n textStyle: { color: 'white' }, background: '#dd3c9f', border: { color: '#dd3c9f' }, type: 'Text'\n },\n {\n date: new Date(2015, 2, 12), text: 'Close', description: 'Markets closed',\n textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }\n }\n ],\n \n title: 'AAPL Stock Price',\n seriesType : [],\n indicatorType : [],\n trendlineType: [],\n tooltip: { enable: true},\n crosshair: {\n enable: true\n },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark');\n },\n tooltipRender: function (args) {\n if  (args.text.split('
                                      ')[4]) {\n var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]);\n var value = (target / 100000000).toFixed(1) + 'B';\n args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value);\n }\n }\n });\n stockChart.appendTo('#container');\n };\n \n var aapl;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aapl.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n aapl = JSON.parse(data);\n aapl.map(function (data) {\n data.x = new Date(data.x);\n });\n renderLineStockChart(aapl);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/stock-events.html b/src/stock-chart/stock-events.html new file mode 100644 index 00000000..64719969 --- /dev/null +++ b/src/stock-chart/stock-events.html @@ -0,0 +1,15 @@ +
                                      +
                                      +
                                      +
                                      +

                                      + This sample visualizes stock events in stock chart. +

                                      +
                                      +
                                      +

                                      + In this example, you can see how to render and configure the Stock events. + SplineSeries is used to represent selected data value. +

                                      +
                                      +
                                      \ No newline at end of file diff --git a/src/stock-chart/stock-events.js b/src/stock-chart/stock-events.js new file mode 100644 index 00000000..08002775 --- /dev/null +++ b/src/stock-chart/stock-events.js @@ -0,0 +1,130 @@ +renderLineStockChart = function (aapl) { + var stockChart = new ej.charts.StockChart({ + chartArea: { border: { width: 0 } }, + primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent'},crosshairTooltip: { enable: true } }, + primaryYAxis: { + lineStyle: { color: 'transparent' }, + majorTickLines: { color: 'transparent'}, + crosshairTooltip: { enable: true } + }, + series: [ + { + dataSource: aapl, xName: 'x', yName: 'high', type: 'Spline',name:'google',close:'high' + } + ], + stockEvents: [ + { date: new Date(2012, 3, 1), text: 'Q2', description: '2012 Quarter2', type: 'Flag', background: '#6c6d6d', border: { color: '#6c6d6d' } }, + { + date: new Date(2012, 3, 20), text: 'Open', description: 'Markets opened', textStyle: { color: 'white' }, + background: '#f48a21', border: { color: '#f48a21' } + }, + { + date: new Date(2012, 6, 1), text: 'Q3', description: '2013 Quarter3', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2012, 9, 1), text: 'Q4', description: '2013 Quarter4', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2012, 7, 30), text: 'G', description: 'Google Stock', + textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } + }, + { + date: new Date(2012, 10, 1), text: 'Y', description: 'Yahoo Stock', type: 'Square', + textStyle: { color: 'white' }, background: '#841391', border: { color: '#841391' } + }, + { + date: new Date(2012, 12, 0), text: 'Y2', description: 'Year 2013', type: 'Pin', showOnSeries: false, + textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } + }, + { + date: new Date(2013, 3, 1), text: 'Q2', description: '2013 Quarter2', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2013, 3, 20), text: 'Q2', description: 'Surge in Stocks', type: 'ArrowUp', + textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' } + }, + { + date: new Date(2013, 6, 1), text: 'Q3', description: '2013 Quarter3', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2013, 9, 1), text: 'Q4', description: '2013 Quarter4', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2013, 12, 0), text: 'Y3', description: 'Year 2014', type: 'Pin', showOnSeries: false, + textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } + }, + { + date: new Date(2014, 3, 1), text: 'Q2', description: '2014 Quarter2', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2014, 6, 1), text: 'Q3', description: '2014 Quarter3', + textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } + }, + { + date: new Date(2014, 9, 1), text: 'Q4', description: '2014 Quarter4', type: 'Flag', + textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } + }, + { + date: new Date(2014, 12, 0), text: 'Y4', description: 'Year 2015', type: 'Pin', showOnSeries: false, + textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } + }, + { + date: new Date(2014, 2, 2), text: 'End', description: 'Markets closed', type: 'ArrowDown', + textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' } + }, + { + date: new Date('2015-01-07'), text: 'A', description: 'Amazon Stock', + textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } + }, + { + date: new Date(2015, 1, 2), text: 'Q1', description: 'AAPL Stock', + textStyle: { color: 'white' }, background: '#dd3c9f', border: { color: '#dd3c9f' }, type: 'Text' + }, + { + date: new Date(2015, 2, 12), text: 'Close', description: 'Markets closed', + textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } + } + ], + + title: 'AAPL Stock Price', + seriesType : [], + indicatorType : [], + trendlineType: [], + tooltip: { enable: true}, + crosshair: { + enable: true + }, + load: function (args) { + var selectedTheme = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); + }, + tooltipRender: function (args) { + if  (args.text.split('
                                      ')[4]) { + var target = parseFloat(args.text.split('
                                      ')[4].split('')[1].split('')[0]); + var value = (target / 100000000).toFixed(1) + 'B'; + args.text = args.text.replace(args.text.split('
                                      ')[4].split('')[1].split('')[0], value); + } + } + }); + stockChart.appendTo('#container'); + }; + this.default = function () { + var aapl; + var ajax = new ej.base.Ajax('./src/stock-chart/data-source/aapl.json', 'GET', true); + ajax.send().then(); + ajax.onSuccess = function (data) { + aapl = JSON.parse(data); + aapl.map(function (data) { + data.x = new Date(data.x); + }); + renderLineStockChart(aapl); + }; + }; \ No newline at end of file diff --git a/src/stock-chart/strip-line-stack.json b/src/stock-chart/strip-line-stack.json new file mode 100644 index 00000000..965e3440 --- /dev/null +++ b/src/stock-chart/strip-line-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\nrenderLineStockChart = function (amzn) {\n var stockChart = new ej.charts.StockChart({\n chartArea: { border: { width: 0 } },\n primaryXAxis: { valueType: 'DateTime', majorGridLines: { width: 0 } },\n primaryYAxis: {\n lineStyle: { color: 'transparent' },\n majorTickLines: { color: 'transparent', width: 0 },\n stripLines: [{ start: 340, end: 380, color: '#3CB371', opacity: 0.1 }]\n },\n series: [\n {\n dataSource: amzn, xName: 'x', yName: 'close', type: 'Line'\n }\n ],\n title: 'AAPL Historical',\n seriesType : [],\n indicatorType : [],\n titleStyle: { fontWeight: '500', color: '#424242' },\n\n });\n stockChart.appendTo('#container');\n };\n \n var amzn;\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/stock-chart/data-source/aman.json', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = function (data) {\n amzn = JSON.parse(data);\n amzn.map(function (data) {\n data.x = new Date(data.x);\n });\n renderLineStockChart(amzn);\n };\n "} \ No newline at end of file diff --git a/src/stock-chart/strip-line.js b/src/stock-chart/strip-line.js index 5b67874e..ed93c249 100644 --- a/src/stock-chart/strip-line.js +++ b/src/stock-chart/strip-line.js @@ -17,12 +17,14 @@ renderLineStockChart = function (amzn) { seriesType : [], indicatorType : [], titleStyle: { fontWeight: '500', color: '#424242' }, + // custom code start load: function (args) { var selectedTheme = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.stockChart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark'); } + // custom code end }); stockChart.appendTo('#container'); }; diff --git a/src/tab/default-stack.json b/src/tab/default-stack.json index 201d96e9..b78f1c76 100644 --- a/src/tab/default-stack.json +++ b/src/tab/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab default sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n items: [\n {\n header: { 'text': 'Twitter', 'iconCss': 'e-twitter' },\n content: 'Twitter is an online social networking service that enables users to send and read short 140-character ' +\n 'messages called \"tweets\". Registered users can read and post tweets, but those who are unregistered can only read ' +\n 'them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San ' +\n 'Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, ' +\n 'Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, ' +\n 'with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion ' +\n 'search queries per day.'\n },\n {\n header: { 'text': 'Facebook', 'iconCss': 'e-facebook' },\n content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +\n 'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +\n 'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\\'\\s ' +\n 'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +\n 'University. It gradually added support for students at various other universities and later to high-school students.'\n },\n {\n header: { 'text': 'WhatsApp', 'iconCss': 'e-whatsapp' },\n content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates ' +\n 'under a subscription business model. It uses the Internet to send text messages, images, video, user location and ' +\n 'audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +\n 'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +\n 'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#Tab');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab default sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n items: [\n {\n header: { 'text': 'Twitter', 'iconCss': 'e-twitter' },\n content: 'Twitter is an online social networking service that enables users to send and read short 140-character ' +\n 'messages called \"tweets\". Registered users can read and post tweets, but those who are unregistered can only read ' +\n 'them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San ' +\n 'Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, ' +\n 'Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, ' +\n 'with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion ' +\n 'search queries per day.'\n },\n {\n header: { 'text': 'Facebook', 'iconCss': 'e-facebook' },\n content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +\n 'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +\n 'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\\'\\s ' +\n 'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +\n 'University. It gradually added support for students at various other universities and later to high-school students.'\n },\n {\n header: { 'text': 'WhatsApp', 'iconCss': 'e-whatsapp' },\n content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates ' +\n 'under a subscription business model. It uses the Internet to send text messages, images, video, user location and ' +\n 'audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +\n 'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +\n 'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#Tab');\n"} \ No newline at end of file diff --git a/src/tab/orientation-stack.json b/src/tab/orientation-stack.json index d522dfe8..12ef3fed 100644 --- a/src/tab/orientation-stack.json +++ b/src/tab/orientation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Rome
                                      \n
                                      Paris
                                      \n
                                      London
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n
                                      \n
                                      Header Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Header Styles
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab orientation sample\n */\nvar romeEmployees = [\n { id: '1', name: 'Anne Dodsworth', role: 'Product Manager' },\n { id: '2', name: 'Laura Callahan', role: 'Team Lead' },\n { id: '3', name: 'Andrew Fuller', role: 'Developer' }\n];\nvar parisEmployees = [\n { id: '4', name: 'Robert King', role: 'Team Lead' },\n { id: '5', name: 'Michael Suyama', role: 'Developer' },\n { id: '6', name: 'Margaret Peacock', role: 'Developer' }\n];\nvar londonEmployees = [\n { id: '7', name: 'Janet Leverling', role: 'CEO' },\n { id: '8', name: 'Steven Buchanan', role: 'HR' },\n { id: '9', name: 'Nancy Davolio', role: 'Product Manager' }\n];\n\n//Initialize ListView component\n var listObj1 = new ej.lists.ListView({\n dataSource: romeEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n //Initialize ListView component\n var listObj2 = new ej.lists.ListView({\n dataSource: parisEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n //Initialize ListView component\n var listObj3 = new ej.lists.ListView({\n dataSource: londonEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None',\n height: 320,\n showCloseButton: true\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_orientation');\n\n //Render initialized ListView component\n listObj1.appendTo('#rome');\n\n //Render initialized ListView component\n listObj2.appendTo('#paris');\n\n //Render initialized ListView component\n listObj3.appendTo('#london');\n\n //Initialize DropDownList component\n var headerPositions = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderPosition\n });\n //Render initialized DropDownList component\n headerPositions.appendTo('#orientation');\n\n //Initialize DropDownList component\n var headerStyles = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderStyle\n });\n //Render initialized DropDownList component\n headerStyles.appendTo('#headerStyles');\n\n // Change event function for DropDownList component\n function changeHeaderPosition(args) {\n tabObj.headerPlacement = args.itemData.value;\n tabObj.dataBind();\n }\n\n // Change event function for DropDownList component\n function changeHeaderStyle(args){\n removeStyleClass();\n var name = args.itemData.value;\n if (name === 'fill') {\n tabObj.element.classList.add('e-fill');\n } else if (name === 'accent') {\n tabObj.element.classList.add('e-background');\n tabObj.element.classList.add('e-accent');\n }\n }\n function removeStyleClass() {\n tabObj.element.classList.remove('e-fill');\n tabObj.element.classList.remove('e-background');\n tabObj.element.classList.remove('e-accent');\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Rome
                                      \n
                                      Paris
                                      \n
                                      London
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Employee Info
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Header Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Header Styles
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab orientation sample\n */\nvar romeEmployees = [\n { id: '1', name: 'Anne Dodsworth', role: 'Product Manager' },\n { id: '2', name: 'Laura Callahan', role: 'Team Lead' },\n { id: '3', name: 'Andrew Fuller', role: 'Developer' }\n];\nvar parisEmployees = [\n { id: '4', name: 'Robert King', role: 'Team Lead' },\n { id: '5', name: 'Michael Suyama', role: 'Developer' },\n { id: '6', name: 'Margaret Peacock', role: 'Developer' }\n];\nvar londonEmployees = [\n { id: '7', name: 'Janet Leverling', role: 'CEO' },\n { id: '8', name: 'Steven Buchanan', role: 'HR' },\n { id: '9', name: 'Nancy Davolio', role: 'Product Manager' }\n];\n\n//Initialize ListView component\n var listObj1 = new ej.lists.ListView({\n dataSource: romeEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n //Initialize ListView component\n var listObj2 = new ej.lists.ListView({\n dataSource: parisEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n //Initialize ListView component\n var listObj3 = new ej.lists.ListView({\n dataSource: londonEmployees,\n template: '
                                      ${name}
                                      ${role}
                                      '\n });\n\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None',\n height: 320,\n showCloseButton: true\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_orientation');\n\n //Render initialized ListView component\n listObj1.appendTo('#rome');\n\n //Render initialized ListView component\n listObj2.appendTo('#paris');\n\n //Render initialized ListView component\n listObj3.appendTo('#london');\n\n //Initialize DropDownList component\n var headerPositions = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderPosition\n });\n //Render initialized DropDownList component\n headerPositions.appendTo('#orientation');\n\n //Initialize DropDownList component\n var headerStyles = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderStyle\n });\n //Render initialized DropDownList component\n headerStyles.appendTo('#headerStyles');\n\n // Change event function for DropDownList component\n function changeHeaderPosition(args) {\n tabObj.headerPlacement = args.itemData.value;\n tabObj.dataBind();\n }\n\n // Change event function for DropDownList component\n function changeHeaderStyle(args){\n removeStyleClass();\n var name = args.itemData.value;\n if (name === 'fill') {\n tabObj.element.classList.add('e-fill');\n } else if (name === 'accent') {\n tabObj.element.classList.add('e-background');\n tabObj.element.classList.add('e-accent');\n }\n }\n function removeStyleClass() {\n tabObj.element.classList.remove('e-fill');\n tabObj.element.classList.remove('e-background');\n tabObj.element.classList.remove('e-accent');\n }\n"} \ No newline at end of file diff --git a/src/tab/orientation.html b/src/tab/orientation.html index 2b5b0ad6..3de086dc 100644 --- a/src/tab/orientation.html +++ b/src/tab/orientation.html @@ -153,9 +153,11 @@ display: block; text-align: center; } + /* custom code start*/ .property-panel-content { padding: 10px; } + /* custom code end*/ #tab_orientation .e-listview:not(.e-list-template) .e-list-item { height: 63px; } @@ -169,13 +171,14 @@ width: 100%; } - + /* custom code start*/ @media screen and (min-width: 768px) { .e-sample-resize-container { width: 75%; margin: 0 auto; } } + /* custom code end*/ @media screen and (max-width: 481px) { .control-section.e-tab-section, diff --git a/src/tab/responsive-modes-stack.json b/src/tab/responsive-modes-stack.json index 939e859f..9d1c1163 100644 --- a/src/tab/responsive-modes-stack.json +++ b/src/tab/responsive-modes-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Header Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab adaptive sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None',\n height: 250,\n items: [\n {\n header: { 'text': 'HTML' },\n content: 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web ' +\n 'pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually ' +\n 'engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web ' +\n 'browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a ' +\n 'website semantically along with cues for presentation, making it a markup language, rather than a programming language.'\n },\n {\n header: { 'text': 'C Sharp(C#)' },\n content: 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development ' +\n 'team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.'\n },\n {\n header: { 'text': 'Java' },\n content: 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle ' +\n 'Corporation, that provides a system for developing application software and deploying it in a cross-platform computing ' +\n 'environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to ' +\n 'enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to ' +\n 'provide many features of native applications and can be embedded in HTML pages.'\n },\n {\n header: { 'text': 'VB.Net' },\n content: 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also ' +\n 'includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.'\n },\n {\n header: { 'text': 'Xamarin' },\n content: 'Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that ' +\n 'created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language ' +\n 'Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, ' +\n 'developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share ' +\n 'code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World ' +\n 'as of May 2015.'\n },\n {\n header: { 'text': 'ASP.NET' },\n content: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +\n 'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +\n 'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +\n 'to Microsoft\\'\\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +\n 'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +\n 'ASP.NET components to process SOAP messages.'\n },\n {\n header: { 'text': 'ASP.NET MVC' },\n content: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +\n 'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +\n 'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +\n 'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.'\n },\n {\n header: { 'text': 'JavaScript' },\n content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of ' +\n 'web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +\n 'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +\n 'both game development and the creation of desktop applications.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_adaptive');\n\n //Initialize DropDownList component\n var overflowModes = new ej.dropdowns.DropDownList({\n width: '100%',\n change: changeOverFlowMode\n });\n //Render initialized DropDownList component\n overflowModes.appendTo('#adaptive');\n\n var headerPositions = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderPosition\n });\n //Render initialized DropDownList component\n headerPositions.appendTo('#orientation');\n\n function changeOverFlowMode(args) {\n if (args.itemData.value === 'scrollable') {\n tabObj.overflowMode = 'Scrollable';\n } else {\n tabObj.overflowMode = 'Popup';\n }\n tabObj.dataBind();\n }\n\n function changeHeaderPosition(args) {\n tabObj.headerPlacement = args.itemData.value;\n tabObj.dataBind();\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Header Placement
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab adaptive sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None',\n height: 250,\n items: [\n {\n header: { 'text': 'HTML' },\n content: 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web ' +\n 'pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually ' +\n 'engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web ' +\n 'browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a ' +\n 'website semantically along with cues for presentation, making it a markup language, rather than a programming language.'\n },\n {\n header: { 'text': 'C Sharp(C#)' },\n content: 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development ' +\n 'team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.'\n },\n {\n header: { 'text': 'Java' },\n content: 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle ' +\n 'Corporation, that provides a system for developing application software and deploying it in a cross-platform computing ' +\n 'environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to ' +\n 'enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to ' +\n 'provide many features of native applications and can be embedded in HTML pages.'\n },\n {\n header: { 'text': 'VB.Net' },\n content: 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also ' +\n 'includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.'\n },\n {\n header: { 'text': 'Xamarin' },\n content: 'Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that ' +\n 'created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language ' +\n 'Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, ' +\n 'developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share ' +\n 'code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World ' +\n 'as of May 2015.'\n },\n {\n header: { 'text': 'ASP.NET' },\n content: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +\n 'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +\n 'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +\n 'to Microsoft\\'\\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +\n 'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +\n 'ASP.NET components to process SOAP messages.'\n },\n {\n header: { 'text': 'ASP.NET MVC' },\n content: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +\n 'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +\n 'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +\n 'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.'\n },\n {\n header: { 'text': 'JavaScript' },\n content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of ' +\n 'web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +\n 'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +\n 'both game development and the creation of desktop applications.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_adaptive');\n\n //Initialize DropDownList component\n var overflowModes = new ej.dropdowns.DropDownList({\n width: '100%',\n change: changeOverFlowMode\n });\n //Render initialized DropDownList component\n overflowModes.appendTo('#adaptive');\n\n var headerPositions = new ej.dropdowns.DropDownList({\n width: '90%',\n change: changeHeaderPosition\n });\n //Render initialized DropDownList component\n headerPositions.appendTo('#orientation');\n\n function changeOverFlowMode(args) {\n if (args.itemData.value === 'scrollable') {\n tabObj.overflowMode = 'Scrollable';\n } else {\n tabObj.overflowMode = 'Popup';\n }\n tabObj.dataBind();\n }\n\n function changeHeaderPosition(args) {\n tabObj.headerPlacement = args.itemData.value;\n tabObj.dataBind();\n }\n"} \ No newline at end of file diff --git a/src/tab/responsive-modes.html b/src/tab/responsive-modes.html index f3ab7290..c8fdf01a 100644 --- a/src/tab/responsive-modes.html +++ b/src/tab/responsive-modes.html @@ -73,6 +73,7 @@ min-width: 350px; max-width: 500px; } + /* custom code start*/ .property-panel-content { padding: 10px; } @@ -85,6 +86,7 @@ width: 75%; } } + /* custom code end*/ #tab_adaptive .e-tab-text { display: inherit; } diff --git a/src/tab/right-to-left-stack.json b/src/tab/right-to-left-stack.json index 1e3322fe..9cc8ac83 100644 --- a/src/tab/right-to-left-stack.json +++ b/src/tab/right-to-left-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab rtl sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n enableRtl: true,\n items: [\n {\n header: { 'text': 'Twitter' },\n content: 'Twitter is an online social networking service that enables users to send and read short 140-character ' +\n 'messages called \"tweets\". Registered users can read and post tweets, but those who are unregistered can only read ' +\n 'them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San ' +\n 'Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, ' +\n 'Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, ' +\n 'with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion ' +\n 'search queries per day.'\n },\n {\n header: { 'text': 'Facebook' },\n content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +\n 'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +\n 'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\\'\\s ' +\n 'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +\n 'University. It gradually added support for students at various other universities and later to high-school students.'\n },\n {\n header: { 'text': 'WhatsApp' },\n content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates ' +\n 'under a subscription business model. It uses the Internet to send text messages, images, video, user location and ' +\n 'audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +\n 'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +\n 'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_rtl');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab rtl sample\n */\n\n //Initialize Tab component\n var tabObj = new ej.navigations.Tab({\n enableRtl: true,\n items: [\n {\n header: { 'text': 'Twitter' },\n content: 'Twitter is an online social networking service that enables users to send and read short 140-character ' +\n 'messages called \"tweets\". Registered users can read and post tweets, but those who are unregistered can only read ' +\n 'them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San ' +\n 'Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, ' +\n 'Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, ' +\n 'with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion ' +\n 'search queries per day.'\n },\n {\n header: { 'text': 'Facebook' },\n content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +\n 'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +\n 'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\\'\\s ' +\n 'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +\n 'University. It gradually added support for students at various other universities and later to high-school students.'\n },\n {\n header: { 'text': 'WhatsApp' },\n content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates ' +\n 'under a subscription business model. It uses the Internet to send text messages, images, video, user location and ' +\n 'audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +\n 'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +\n 'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.'\n }\n ]\n });\n //Render initialized Tab component\n tabObj.appendTo('#tab_rtl');\n"} \ No newline at end of file diff --git a/src/tab/wizard-stack.json b/src/tab/wizard-stack.json index 50070307..e0bb9877 100644 --- a/src/tab/wizard-stack.json +++ b/src/tab/wizard-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Plan your journey
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n\n \n
                                      \n
                                      \n
                                      \n
                                      Select the train from the list
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n \n
                                      \n
                                      \n
                                      Enter the passenger details
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      NameAgeGenderBerth Preference
                                      \n \n \n \n \n \n \n \n
                                      \n \n \n \n \n \n \n \n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n \n
                                      \n
                                      \n
                                      Confirm the details and proceed
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab Wizard sample\n */\n// tslint:disable:max-line-length\nvar tabObj;\nvar availTrainGrid;\nvar ticketDetailGrid;\nvar endPoint;\nvar journeyDate;\nvar ticketType;\nvar startPoint;\nvar alertDlg;\nvar today = new Date();\nvar locations;\nvar selectedTrain;\n\nvar quota = [\n { id: '1', text: 'Business Class' },\n { id: '2', text: 'Economy Class' },\n { id: '4', text: 'Common Class' }\n];\nvar gender = [\n { id: '1', text: 'Male' },\n { id: '2', text: 'Female' }\n];\nvar berths = [\n { id: '1', text: 'Upper' },\n { id: '2', text: 'Lower' },\n { id: '3', text: 'Middle' },\n { id: '4', text: 'Window' },\n { id: '5', text: 'Aisle' }\n];\nvar cities = [\n { name: 'Chicago', fare: 300 },\n { name: 'San Francisco', fare: 125 },\n { name: 'Los Angeles', fare: 175 },\n { name: 'Seattle', fare: 250 },\n { name: 'Florida', fare: 150 }\n];\n\nfunction renderComponents() {\n /* Initialize Tab with disabled headers for the wizard */\n tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None', height: 390, showCloseButton: false,\n selecting: tabSelected,\n items: [\n { header: { 'text': 'New Booking' }, content: '#booking' },\n { header: { 'text': 'Train List' }, content: '#selectTrain', disabled: true },\n { header: { 'text': 'Add Passenger' }, content: '#details', disabled: true },\n { header: { 'text': 'Make Payment' }, content: '#confirm', disabled: true }\n ]\n });\n tabObj.appendTo('#tab_wizard');\n /* Initialize the components for creating wizard */\n startPoint = new ej.dropdowns.DropDownList({\n width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'From',\n fields: { text: 'name', value: 'name' }\n });\n startPoint.appendTo('#startPoint');\n endPoint = new ej.dropdowns.DropDownList({\n width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'To',\n fields: { text: 'name', value: 'name' }\n });\n endPoint.appendTo('#endPoint');\n journeyDate = new ej.calendars.DatePicker({\n width: '100%', floatLabelType: 'Auto', placeholder: 'Journey Date', min: new Date(today.getTime()),\n max: new Date(today.getTime() + 60 * 24 * 60 * 60 * 1000),\n value: new Date(),\n });\n journeyDate.appendTo('#journey_date');\n ticketType = new ej.dropdowns.DropDownList({\n dataSource: quota, placeholder: 'Ticket Type', floatLabelType: 'Auto', fields: { text: 'text', value: 'text' }\n });\n ticketType.appendTo('#ticket_type');\n alertDlg = new ej.popups.Dialog({\n header: 'Success', width: 250, isModal: true, visible: false, showCloseIcon: true,\n content: 'Your payment successfully processed', target: document.getElementById('dialog_target'), created: dlgCreated\n });\n alertDlg.appendTo('#alertDialog');\n alertDlg.hide();\n availTrainGrid = new ej.grids.Grid({\n width: \"100%\",\n columns: [\n { field: 'TrainNo', headerText: 'Train No', width: 120, type: 'number' },\n { field: 'Name', width: 140, headerText: 'Name' },\n { field: 'Departure', headerText: 'Departure', width: 120 },\n { field: 'Arrival', headerText: 'Arrival', width: 140 },\n { field: 'Availability', headerText: 'Availability', width: 140, type: 'number' }\n ],\n rowSelected: trainSelected\n });\n availTrainGrid.appendTo('#availableTrain');\n var age1 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age1.appendTo('#pass_age1');\n var age2 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age2.appendTo('#pass_age2');\n var age3 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age3.appendTo('#pass_age3');\n var gender1 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender1.appendTo('#pass_gender1');\n var gender2 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender2.appendTo('#pass_gender2');\n var gender3 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender3.appendTo('#pass_gender3');\n var berth1 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth1.appendTo('#pass_berth1');\n var berth2 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth2.appendTo('#pass_berth2');\n var berth3 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth3.appendTo('#pass_berth3');\n ticketDetailGrid = new ej.grids.Grid({\n width: \"100%\",\n columns: [\n { field: 'TrainNo', headerText: 'Train No', width: 120, type: 'number' },\n { field: 'PassName', width: 140, headerText: 'Name' },\n { field: 'Gender', headerText: 'Gender', width: 120 },\n { field: 'Berth', headerText: 'Berth', width: 140 }\n ],\n });\n ticketDetailGrid.appendTo('#ticketDetailGrid');\n document.getElementById('searchNext').onclick = function (e) { tabNavigations(e); };\n document.getElementById('bookTickets').onclick = function (e) { tabNavigations(e); };\n document.getElementById('confirmTickets').onclick = function (e) { tabNavigations(e); };\n document.getElementById('makePayment').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goToSearch').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goBackToBook').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goBackDetails').onclick = function (e) { tabNavigations(e); };\n}\nfunction tabSelected(e) {\n if (e.isSwiped) {\n e.cancel = true;\n }\n}\nfunction dlgCreated() {\n alertDlg.buttons = [{\n buttonModel: { content: 'Ok', isPrimary: true },\n click: function () {\n alertDlg.hide();\n tabObj.enableTab(0, true);\n tabObj.enableTab(1, false);\n tabObj.enableTab(2, false);\n tabObj.enableTab(3, false);\n tabObj.select(0);\n }\n }];\n}\nfunction tabNavigations(args) {\n switch (args.target.id) {\n case 'searchNext':\n /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */\n if (!ej.base.isNullOrUndefined(startPoint.value) && !ej.base.isNullOrUndefined(endPoint.value) &&\n !ej.base.isNullOrUndefined(ticketType.value) && !ej.base.isNullOrUndefined(journeyDate.value)) {\n if (!ej.base.isNullOrUndefined(startPoint.value) && startPoint.value === endPoint.value) {\n document.getElementById('err1').innerText = '* Arrival point can\\'t be same as Departure';\n }\n else {\n tabObj.enableTab(0, false);\n tabObj.enableTab(1, true);\n filterTrains(args);\n tabObj.select(1);\n document.getElementById('err1').innerText = '';\n document.getElementById('err2').innerText = '';\n }\n }\n else {\n document.getElementById('err1').innerText = '* Please fill all the details before proceeding';\n }\n break;\n case 'bookTickets':\n /* Based on the selected station generate Grid content to display trains available */\n if (availTrainGrid.getSelectedRecords() === undefined || availTrainGrid.getSelectedRecords().length === 0) {\n document.getElementById('err2').innerText = '* Select your convenient train';\n }\n else {\n tabObj.enableTab(2, true);\n tabObj.select(2);\n tabObj.enableTab(1, false);\n document.getElementById('err2').innerText = '';\n }\n break;\n case 'confirmTickets':\n /* Get the Passenger details and validate the fields must not be left empty */\n var name = document.getElementById('pass_name1');\n var age = document.getElementById('pass_age1');\n var gender = document.getElementById('pass_gender1');\n if (name.value === '' || age.value === '' || gender.value === '') {\n document.getElementById('err3').innerText = '* Please enter passenger details';\n }\n else {\n tabObj.enableTab(3, true);\n tabObj.select(3);\n tabObj.enableTab(2, false);\n document.getElementById('err3').innerText = '';\n finalizeDetails(args);\n }\n break;\n case 'makePayment':\n alertDlg.show();\n break;\n case 'goToSearch':\n /* Go back to change class, date or boarding places */\n selectedTrain = [];\n tabObj.enableTab(0, true);\n tabObj.select(0);\n tabObj.enableTab(1, false);\n break;\n case 'goBackToBook':\n /* Change the preferred train chosen already */\n tabObj.enableTab(1, true);\n tabObj.select(1);\n tabObj.enableTab(2, false);\n break;\n case 'goBackDetails':\n /* Update passenger detail before confirming the payment */\n tabObj.enableTab(2, true);\n tabObj.select(2);\n tabObj.enableTab(3, false);\n break;\n }\n}\nfunction filterTrains(args) {\n /* Generating trains based on source and destination chosen */\n var result = [];\n var fromCity = startPoint.text;\n var toCity = endPoint.text;\n var count = Math.floor((Math.random() * 3) + 2);\n for (var i = 0; i < count; i++) {\n var details = [];\n details.TrainNo = Math.floor((Math.random() * 20) + 19000);\n details.Name = 'Train ' + i;\n details.Departure = fromCity;\n details.Arrival = toCity;\n details.Availability = Math.floor((Math.random() * 20) + 20);\n result.push(details);\n }\n availTrainGrid.dataSource = result;\n}\nfunction finalizeDetails(args) {\n /* Get the passenger details and update table with name and other details for confirmation */\n var reserved = [];\n var passCount = 0;\n for (var i = 1; i <= 3; i++) {\n var name = document.getElementById('pass_name' + i);\n var berthSelected = document.getElementById('pass_berth' + i);\n var gender = document.getElementById('pass_gender' + i);\n if (name.value !== '') {\n var details = [];\n var berth = berthSelected.value;\n details.TrainNo = selectedTrain.TrainNo.toString();\n details.PassName = name.value;\n details.Gender = gender.value;\n details.Berth = (berth === '') ? 'Any' : berth;\n reserved.push(details);\n passCount++;\n }\n var calcFare = 0;\n for (var j = 0; j < cities; j++) {\n if (startPoint.value === cities[j].name) {\n calcFare = calcFare + cities[j].fare;\n }\n if (endPoint.value === cities[j].name) {\n calcFare = calcFare + cities[j].fare;\n }\n }\n var displayAmt = document.getElementById('amount');\n if (ticketType.value === 'Economy Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (300 + calcFare);\n }\n else if (ticketType.value === 'Business Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (500 + calcFare);\n }\n else if (ticketType.value === 'Common Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (150 + calcFare);\n }\n }\n ticketDetailGrid.dataSource = reserved;\n}\nfunction trainSelected(args) {\n selectedTrain = args.data;\n}\n\n\n renderComponents();\n\n// tslint:enable:max-line-length"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Plan your journey
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n\n \n
                                      \n
                                      \n
                                      \n
                                      Select the train from the list
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n \n
                                      \n
                                      \n
                                      Enter the passenger details
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      NameAgeGenderBerth Preference
                                      \n \n \n \n \n \n \n \n
                                      \n \n \n \n \n \n \n \n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n \n
                                      \n
                                      \n
                                      Confirm the details and proceed
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tab Wizard sample\n */\n// tslint:disable:max-line-length\nvar tabObj;\nvar availTrainGrid;\nvar ticketDetailGrid;\nvar endPoint;\nvar journeyDate;\nvar ticketType;\nvar startPoint;\nvar alertDlg;\nvar today = new Date();\nvar locations;\nvar selectedTrain;\n\nvar quota = [\n { id: '1', text: 'Business Class' },\n { id: '2', text: 'Economy Class' },\n { id: '4', text: 'Common Class' }\n];\nvar gender = [\n { id: '1', text: 'Male' },\n { id: '2', text: 'Female' }\n];\nvar berths = [\n { id: '1', text: 'Upper' },\n { id: '2', text: 'Lower' },\n { id: '3', text: 'Middle' },\n { id: '4', text: 'Window' },\n { id: '5', text: 'Aisle' }\n];\nvar cities = [\n { name: 'Chicago', fare: 300 },\n { name: 'San Francisco', fare: 125 },\n { name: 'Los Angeles', fare: 175 },\n { name: 'Seattle', fare: 250 },\n { name: 'Florida', fare: 150 }\n];\n\nfunction renderComponents() {\n /* Initialize Tab with disabled headers for the wizard */\n tabObj = new ej.navigations.Tab({\n heightAdjustMode: 'None', height: 390, showCloseButton: false,\n selecting: tabSelected,\n items: [\n { header: { 'text': 'New Booking' }, content: '#booking' },\n { header: { 'text': 'Train List' }, content: '#selectTrain', disabled: true },\n { header: { 'text': 'Add Passenger' }, content: '#details', disabled: true },\n { header: { 'text': 'Make Payment' }, content: '#confirm', disabled: true }\n ]\n });\n tabObj.appendTo('#tab_wizard');\n /* Initialize the components for creating wizard */\n startPoint = new ej.dropdowns.DropDownList({\n width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'From',\n fields: { text: 'name', value: 'name' }\n });\n startPoint.appendTo('#startPoint');\n endPoint = new ej.dropdowns.DropDownList({\n width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'To',\n fields: { text: 'name', value: 'name' }\n });\n endPoint.appendTo('#endPoint');\n journeyDate = new ej.calendars.DatePicker({\n width: '100%', floatLabelType: 'Auto', placeholder: 'Journey Date', min: new Date(today.getTime()),\n max: new Date(today.getTime() + 60 * 24 * 60 * 60 * 1000),\n value: new Date(),\n });\n journeyDate.appendTo('#journey_date');\n ticketType = new ej.dropdowns.DropDownList({\n dataSource: quota, placeholder: 'Ticket Type', floatLabelType: 'Auto', fields: { text: 'text', value: 'text' }\n });\n ticketType.appendTo('#ticket_type');\n alertDlg = new ej.popups.Dialog({\n header: 'Success', width: 250, isModal: true, visible: false, showCloseIcon: true,\n content: 'Your payment successfully processed', target: document.getElementById('dialog_target'), created: dlgCreated\n });\n alertDlg.appendTo('#alertDialog');\n alertDlg.hide();\n availTrainGrid = new ej.grids.Grid({\n width: \"100%\",\n columns: [\n { field: 'TrainNo', headerText: 'Train No', width: 120, type: 'number' },\n { field: 'Name', width: 140, headerText: 'Name' },\n { field: 'Departure', headerText: 'Departure', width: 120 },\n { field: 'Arrival', headerText: 'Arrival', width: 140 },\n { field: 'Availability', headerText: 'Availability', width: 140, type: 'number' }\n ],\n rowSelected: trainSelected\n });\n availTrainGrid.appendTo('#availableTrain');\n var age1 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age1.appendTo('#pass_age1');\n var age2 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age2.appendTo('#pass_age2');\n var age3 = new ej.inputs.NumericTextBox({ min:1, max: 100, value: 18, format: 'n0', showSpinButton: false });\n age3.appendTo('#pass_age3');\n var gender1 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender1.appendTo('#pass_gender1');\n var gender2 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender2.appendTo('#pass_gender2');\n var gender3 = new ej.dropdowns.DropDownList({\n dataSource: gender, text: 'Male', fields: { text: 'text', value: 'text' }\n });\n gender3.appendTo('#pass_gender3');\n var berth1 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth1.appendTo('#pass_berth1');\n var berth2 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth2.appendTo('#pass_berth2');\n var berth3 = new ej.dropdowns.DropDownList({\n dataSource: berths, placeholder: 'Optional', fields: { text: 'text', value: 'text' }\n });\n berth3.appendTo('#pass_berth3');\n ticketDetailGrid = new ej.grids.Grid({\n width: \"100%\",\n columns: [\n { field: 'TrainNo', headerText: 'Train No', width: 120, type: 'number' },\n { field: 'PassName', width: 140, headerText: 'Name' },\n { field: 'Gender', headerText: 'Gender', width: 120 },\n { field: 'Berth', headerText: 'Berth', width: 140 }\n ],\n });\n ticketDetailGrid.appendTo('#ticketDetailGrid');\n document.getElementById('searchNext').onclick = function (e) { tabNavigations(e); };\n document.getElementById('bookTickets').onclick = function (e) { tabNavigations(e); };\n document.getElementById('confirmTickets').onclick = function (e) { tabNavigations(e); };\n document.getElementById('makePayment').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goToSearch').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goBackToBook').onclick = function (e) { tabNavigations(e); };\n document.getElementById('goBackDetails').onclick = function (e) { tabNavigations(e); };\n}\nfunction tabSelected(e) {\n if (e.isSwiped) {\n e.cancel = true;\n }\n}\nfunction dlgCreated() {\n alertDlg.buttons = [{\n buttonModel: { content: 'Ok', isPrimary: true },\n click: function () {\n alertDlg.hide();\n tabObj.enableTab(0, true);\n tabObj.enableTab(1, false);\n tabObj.enableTab(2, false);\n tabObj.enableTab(3, false);\n tabObj.select(0);\n }\n }];\n}\nfunction tabNavigations(args) {\n switch (args.target.id) {\n case 'searchNext':\n /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */\n if (!ej.base.isNullOrUndefined(startPoint.value) && !ej.base.isNullOrUndefined(endPoint.value) &&\n !ej.base.isNullOrUndefined(ticketType.value) && !ej.base.isNullOrUndefined(journeyDate.value)) {\n if (!ej.base.isNullOrUndefined(startPoint.value) && startPoint.value === endPoint.value) {\n document.getElementById('err1').innerText = '* Arrival point can\\'t be same as Departure';\n }\n else {\n tabObj.enableTab(0, false);\n tabObj.enableTab(1, true);\n filterTrains(args);\n tabObj.select(1);\n document.getElementById('err1').innerText = '';\n document.getElementById('err2').innerText = '';\n }\n }\n else {\n document.getElementById('err1').innerText = '* Please fill all the details before proceeding';\n }\n break;\n case 'bookTickets':\n /* Based on the selected station generate Grid content to display trains available */\n if (availTrainGrid.getSelectedRecords() === undefined || availTrainGrid.getSelectedRecords().length === 0) {\n document.getElementById('err2').innerText = '* Select your convenient train';\n }\n else {\n tabObj.enableTab(2, true);\n tabObj.select(2);\n tabObj.enableTab(1, false);\n document.getElementById('err2').innerText = '';\n }\n break;\n case 'confirmTickets':\n /* Get the Passenger details and validate the fields must not be left empty */\n var name = document.getElementById('pass_name1');\n var age = document.getElementById('pass_age1');\n var gender = document.getElementById('pass_gender1');\n if (name.value === '' || age.value === '' || gender.value === '') {\n document.getElementById('err3').innerText = '* Please enter passenger details';\n }\n else {\n tabObj.enableTab(3, true);\n tabObj.select(3);\n tabObj.enableTab(2, false);\n document.getElementById('err3').innerText = '';\n finalizeDetails(args);\n }\n break;\n case 'makePayment':\n alertDlg.show();\n break;\n case 'goToSearch':\n /* Go back to change class, date or boarding places */\n selectedTrain = [];\n tabObj.enableTab(0, true);\n tabObj.select(0);\n tabObj.enableTab(1, false);\n break;\n case 'goBackToBook':\n /* Change the preferred train chosen already */\n tabObj.enableTab(1, true);\n tabObj.select(1);\n tabObj.enableTab(2, false);\n break;\n case 'goBackDetails':\n /* Update passenger detail before confirming the payment */\n tabObj.enableTab(2, true);\n tabObj.select(2);\n tabObj.enableTab(3, false);\n break;\n }\n}\nfunction filterTrains(args) {\n /* Generating trains based on source and destination chosen */\n var result = [];\n var fromCity = startPoint.text;\n var toCity = endPoint.text;\n var count = Math.floor((Math.random() * 3) + 2);\n for (var i = 0; i < count; i++) {\n var details = [];\n details.TrainNo = Math.floor((Math.random() * 20) + 19000);\n details.Name = 'Train ' + i;\n details.Departure = fromCity;\n details.Arrival = toCity;\n details.Availability = Math.floor((Math.random() * 20) + 20);\n result.push(details);\n }\n availTrainGrid.dataSource = result;\n}\nfunction finalizeDetails(args) {\n /* Get the passenger details and update table with name and other details for confirmation */\n var reserved = [];\n var passCount = 0;\n for (var i = 1; i <= 3; i++) {\n var name = document.getElementById('pass_name' + i);\n var berthSelected = document.getElementById('pass_berth' + i);\n var gender = document.getElementById('pass_gender' + i);\n if (name.value !== '') {\n var details = [];\n var berth = berthSelected.value;\n details.TrainNo = selectedTrain.TrainNo.toString();\n details.PassName = name.value;\n details.Gender = gender.value;\n details.Berth = (berth === '') ? 'Any' : berth;\n reserved.push(details);\n passCount++;\n }\n var calcFare = 0;\n for (var j = 0; j < cities; j++) {\n if (startPoint.value === cities[j].name) {\n calcFare = calcFare + cities[j].fare;\n }\n if (endPoint.value === cities[j].name) {\n calcFare = calcFare + cities[j].fare;\n }\n }\n var displayAmt = document.getElementById('amount');\n if (ticketType.value === 'Economy Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (300 + calcFare);\n }\n else if (ticketType.value === 'Business Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (500 + calcFare);\n }\n else if (ticketType.value === 'Common Class') {\n displayAmt.innerText = 'Total payable amount: $' + passCount * (150 + calcFare);\n }\n }\n ticketDetailGrid.dataSource = reserved;\n}\nfunction trainSelected(args) {\n selectedTrain = args.data;\n}\n\n\n renderComponents();\n\n// tslint:enable:max-line-length"} \ No newline at end of file diff --git a/src/tab/wizard.html b/src/tab/wizard.html index 35584c31..449e9930 100644 --- a/src/tab/wizard.html +++ b/src/tab/wizard.html @@ -202,9 +202,11 @@ } @media (max-width: 450px) { + /* custom code start*/ .e-sample-resize-container { height: 450px; } + /* custom code end*/ .responsive-align { width: 75%; diff --git a/src/textbox/default-stack.json b/src/textbox/default-stack.json index a50e3745..1a0dc28d 100644 --- a/src/textbox/default-stack.json +++ b/src/textbox/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      Floating Label
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Inputs
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Validation States
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Sizing
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Input & Elements
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for CSS input boxes.\n */\n\n var inputobj1 = new ej.inputs.TextBox({\n placeholder: 'First Name',\n floatLabelType: 'Auto'\n });\n inputobj1.appendTo('#firstname');\n var inputobj2 = new ej.inputs.TextBox({\n placeholder: 'Last Name',\n floatLabelType: 'Auto',\n enableRtl: true\n });\n inputobj2.appendTo('#lastname');\n var inputObject = {};\n var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');\n var inputIcon = document.querySelectorAll('.e-input-group-icon');\n var focusFn = function(index) {\n return function () { getParentNode(input[index]).classList.add('e-input-focus'); };\n };\n\n var blurFn = function(index) {\n return function () { getParentNode(input[index]).classList.remove('e-input-focus'); };\n };\n\n var mouseupFn = function () {\n var ele = this;\n setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500);\n };\n\n for (var i = 0; i < input.length; i++) {\n //Focus Event binding for input component\n input[i].addEventListener('focus', focusFn(i));\n //Blur Event binding for input component\n input[i].addEventListener('blur', blurFn(i));\n }\n for (var j = 0; j < inputIcon.length; j++) {\n inputIcon[j].addEventListener('mousedown', function () {\n this.classList.add('e-input-btn-ripple');\n });\n inputIcon[j].addEventListener('mouseup', mouseupFn);\n }\n function getParentNode(element) {\n var parentNode = element.parentNode;\n if (parentNode.classList.contains('e-input-in-wrap')) {\n return parentNode.parentNode;\n }\n return parentNode;\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      Floating Label
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Inputs
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Validation States
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Sizing
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Input & Elements
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for CSS input boxes.\n */\n\n var inputobj1 = new ej.inputs.TextBox({\n placeholder: 'First Name',\n floatLabelType: 'Auto'\n });\n inputobj1.appendTo('#firstname');\n var inputobj2 = new ej.inputs.TextBox({\n placeholder: 'Last Name',\n floatLabelType: 'Auto',\n enableRtl: true\n });\n inputobj2.appendTo('#lastname');\n\n"} \ No newline at end of file diff --git a/src/textbox/default.html b/src/textbox/default.html index bf239950..37dd9355 100644 --- a/src/textbox/default.html +++ b/src/textbox/default.html @@ -222,7 +222,25 @@ font-family: e-icons; font-size: 13px; } + /* custom code start*/ + + .bootstrap4 .e-input-picture:before { + content: '\e776'; + } + + .fabric .e-input-calendar:before, + .highcontrast .e-input-calendar:before { + content:'\e93a'; + } + + .bootstrap .e-input-calendar:before { + content:'\e960'; + } + .bootstrap4 .e-input-calendar:before { + content:'\e7be'; + } + .content-wrapper { width: 90%; margin: 0 auto; @@ -262,4 +280,5 @@ #description td { vertical-align: top; } + /* custom code end*/ diff --git a/src/textbox/default.js b/src/textbox/default.js index 4fccffaf..b29afd52 100644 --- a/src/textbox/default.js +++ b/src/textbox/default.js @@ -13,6 +13,7 @@ this.default = function () { enableRtl: true }); inputobj2.appendTo('#lastname'); + //custom code start var inputObject = {}; var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input'); var inputIcon = document.querySelectorAll('.e-input-group-icon'); @@ -48,4 +49,5 @@ this.default = function () { } return parentNode; } + //custom code end }; \ No newline at end of file diff --git a/src/textbox/multiline-textbox-stack.json b/src/textbox/multiline-textbox-stack.json new file mode 100644 index 00000000..e10c7806 --- /dev/null +++ b/src/textbox/multiline-textbox-stack.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
                                      Float label type\n \n
                                      Disabled
                                      Read only
                                      Rows
                                      \n
                                      \n \n \n","index.js":"{{ripple}}/**\n * Multiline TextBox sample\n */\n\n var textareaObj = new ej.inputs.TextBox({\n placeholder: 'Enter your address',\n floatLabelType: 'Auto'\n });\n textareaObj.appendTo('#default');\n\n // initialize check box component\n var enabledCheckBox = new ej.buttons.CheckBox({\n checked: false,\n cssClass: 'multiline',\n change: function (args) {\n textareaObj.enabled = !args.checked;\n }\n });\n enabledCheckBox.appendTo('#enabled');\n var readonlyCheckBox = new ej.buttons.CheckBox({\n checked: false,\n cssClass: 'multiline',\n change: function (args) {\n textareaObj.readonly = args.checked;\n }\n });\n readonlyCheckBox.appendTo('#readonly');\n //initialize numeric textbox \n var numeric = new ej.inputs.NumericTextBox({\n format: '##',\n min: 1,\n max: 20,\n value: 2,\n change: function (args) {\n textareaObj.addAttributes({rows: args.value});\n }\n });\n numeric.appendTo('#rows');\n // initialize dropdown component\n var floatLabel = new ej.dropdowns.DropDownList({\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function(args) {\n switch (args.value) {\n case 'Auto':\n textareaObj.floatLabelType = 'Auto';\n break;\n case 'Always':\n textareaObj.floatLabelType = 'Always';\n break;\n case 'Never':\n textareaObj.floatLabelType = 'Never';\n break;\n }\n }\n });\n floatLabel.appendTo('#select');\n\n"} \ No newline at end of file diff --git a/src/textbox/multiline-textbox.html b/src/textbox/multiline-textbox.html new file mode 100644 index 00000000..c3f73afc --- /dev/null +++ b/src/textbox/multiline-textbox.html @@ -0,0 +1,68 @@ +
                                      +
                                      +
                                      + +
                                      +
                                      +
                                      + +
                                      + + + + + + + + + + + + + + + + + + +
                                      Float label type + +
                                      Disabled
                                      Read only
                                      Rows
                                      +
                                      +
                                      +

                                      + This example demonstrates the multiline functionalities of the textbox control. + Enter or fill the textbox with multiple rows of text. + Choose the corresponding option from the property panel to update the multiline textbox. +

                                      +
                                      +
                                      +

                                      The Multiline Textbox is used to edit or display multiple lines of text that helps you to accept address, description, comments, feedbacks, and more in a form. + In this sample, rendered multiline textbox from textarea tag and the following options are available to customize it:

                                      +
                                        +
                                      • Choose float label types either 'Never', 'Always', or 'Auto' to float the placeholder text.
                                        • +
                                      • To make a read-only multiline textbox, check the "read-only" option.
                                        • +
                                      • Disable the textbox by unchecking an "enabled" option.
                                        • +
                                      • Change the number of rows count to restrict the length of the input.
                                        • +
                                      +

                                      Note: After resizing the multiline textbox manually, the selected rows option from the property panel is not updated to the multiline textbox.

                                      +
                                      + + + \ No newline at end of file diff --git a/src/textbox/multiline-textbox.js b/src/textbox/multiline-textbox.js new file mode 100644 index 00000000..8df572c2 --- /dev/null +++ b/src/textbox/multiline-textbox.js @@ -0,0 +1,59 @@ +/** + * Multiline TextBox sample + */ +this.default = function () { + var textareaObj = new ej.inputs.TextBox({ + placeholder: 'Enter your address', + floatLabelType: 'Auto' + }); + textareaObj.appendTo('#default'); + + // initialize check box component + var enabledCheckBox = new ej.buttons.CheckBox({ + checked: false, + cssClass: 'multiline', + change: function (args) { + textareaObj.enabled = !args.checked; + } + }); + enabledCheckBox.appendTo('#enabled'); + var readonlyCheckBox = new ej.buttons.CheckBox({ + checked: false, + cssClass: 'multiline', + change: function (args) { + textareaObj.readonly = args.checked; + } + }); + readonlyCheckBox.appendTo('#readonly'); + //initialize numeric textbox + var numeric = new ej.inputs.NumericTextBox({ + format: '##', + min: 1, + max: 20, + value: 2, + change: function (args) { + textareaObj.addAttributes({rows: args.value}); + } + }); + numeric.appendTo('#rows'); + // initialize dropdown component + var floatLabel = new ej.dropdowns.DropDownList({ + // set the height of the popup element + popupHeight: '200px', + // bind the change event + change: function(args) { + switch (args.value) { + case 'Auto': + textareaObj.floatLabelType = 'Auto'; + break; + case 'Always': + textareaObj.floatLabelType = 'Always'; + break; + case 'Never': + textareaObj.floatLabelType = 'Never'; + break; + } + } + }); + floatLabel.appendTo('#select'); +}; diff --git a/src/textbox/sample.json b/src/textbox/sample.json index 9a22be08..9f3e9fef 100644 --- a/src/textbox/sample.json +++ b/src/textbox/sample.json @@ -3,13 +3,22 @@ "directory": "textbox", "category": "Inputs", "ftName": "textbox", + "type": "update", "samples": [ { "url": "default", "name": "Default Functionalities", "category": "TextBox", - "description":"This sample covers the major features of the text box component, such as floating labels and placeholders, integrated icons, validation states, sizing, types, and more.", + "description":"The example describes key features of JavaScript(ES5) textbox such as a floating label, input group, placeholder, validation states, sizing, types, and more.", "api": { "TextBox": ["placeholder", "floatLabelType", "enableRtl"]} + }, + { + "url": "multiline-textbox", + "name": "Multiline TextBox", + "category": "TextBox", + "type": "new", + "description":"The example exposes a JavaScript(ES5) Multiline TextBox (textarea). It helps to render address, feedback, and more in HTML5 form with customizable.", + "api": { "TextBox": ["multiline", "value", "placeholder", "floatLabelType", "enableRtl","enabled", "readonly"]} } ] } \ No newline at end of file diff --git a/src/timepicker/default-stack.json b/src/timepicker/default-stack.json index df826a3c..670af967 100644 --- a/src/timepicker/default-stack.json +++ b/src/timepicker/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var timepicker = new ej.calendars.TimePicker();\n timepicker.appendTo('#timepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n","index.js":"{{ripple}}\n var timepicker = new ej.calendars.TimePicker();\n timepicker.appendTo('#timepicker');\n"} \ No newline at end of file diff --git a/src/timepicker/default.html b/src/timepicker/default.html index bd2058a7..20d114c0 100644 --- a/src/timepicker/default.html +++ b/src/timepicker/default.html @@ -22,6 +22,7 @@ documentation section.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/timepicker/list-formatting-stack.json b/src/timepicker/list-formatting-stack.json index 903269ab..813f2d29 100644 --- a/src/timepicker/list-formatting-stack.json +++ b/src/timepicker/list-formatting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var timeObj = new ej.calendars.TimePicker({\n value: new Date(),\n itemRender: itemRanderHandler,\n open: onOpen,\n cssClass: 'e-custom-style'\n });\n timeObj.appendTo('#timepicker');\n\n //initial time variable declaration\n var startTime;\n // scrollTo value will be assigned only if the timepicker value is not null or undefined and is a valid value.\n function onOpen(args) {\n if (timeObj.value && !isNaN(+timeObj.value))\n //assign the current value as the scrollTo value\n timeObj.scrollTo = timeObj.value;\n }\n //utilizing ItemEventArgs to access the beforeItemRender event argument\n function itemRanderHandler(args) {\n // inner element declaration for text\n var span = document.createElement('span');\n if (args.value.getHours() === 0 && args.value.getMinutes() === 0 && args.value.getSeconds() === 0) {\n //assign the initial value to the variable\n startTime = args.value;\n }\n //get the minutes details\n var minutes = (+args.value - +startTime) / 60000;\n //get the hours details\n var hours = parseInt('' + (minutes / 60), 10);\n var mins = (minutes % 60) / 6;\n //displayed text formation for each LI element.\n var minText;\n var minsText = ' mins';\n var hrsText = ' hrs';\n if (timeObj.locale != 'en') {\n if (timeObj.locale === 'fr-CH') {\n minsText = ' minutes';\n hrsText = ' heures';\n }\n if (timeObj.locale === 'de') {\n minsText = ' minuten';\n hrsText = ' stunden';\n }\n if (timeObj.locale === 'ar') {\n minsText = ' دقيقة';\n hrsText = ' ساعة';\n }\n if (timeObj.locale === 'zh') {\n minsText = ' 分鐘';\n hrsText = ' 小時';\n }\n }\n if (minutes === 0 || minutes === 30) {\n minText = minutes + minsText;\n } else {\n minText = (mins > 0) ? ('.' + mins) : '';\n }\n span.innerHTML = ' (' + ((hours > 0) ? (hours + minText + hrsText) : ('' + minText)) + ')';\n\n //disable the specific time from the selection\n if ((minutes / 60) % 3 === 0) {\n //disable the time values by addeding the e-disabled class.\n args.element.classList.add('e-disabled');\n }\n\n //append the custom SPAN element into LI element\n args.element.appendChild(span);\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var timeObj = new ej.calendars.TimePicker({\n value: new Date(),\n itemRender: itemRanderHandler,\n open: onOpen,\n cssClass: 'e-custom-style'\n });\n timeObj.appendTo('#timepicker');\n\n //initial time variable declaration\n var startTime;\n // scrollTo value will be assigned only if the timepicker value is not null or undefined and is a valid value.\n function onOpen(args) {\n if (timeObj.value && !isNaN(+timeObj.value))\n //assign the current value as the scrollTo value\n timeObj.scrollTo = timeObj.value;\n }\n //utilizing ItemEventArgs to access the beforeItemRender event argument\n function itemRanderHandler(args) {\n // inner element declaration for text\n var span = document.createElement('span');\n if (args.value.getHours() === 0 && args.value.getMinutes() === 0 && args.value.getSeconds() === 0) {\n //assign the initial value to the variable\n startTime = args.value;\n }\n //get the minutes details\n var minutes = (+args.value - +startTime) / 60000;\n //get the hours details\n var hours = parseInt('' + (minutes / 60), 10);\n var mins = (minutes % 60) / 6;\n //displayed text formation for each LI element.\n var minText;\n var minsText = ' mins';\n var hrsText = ' hrs';\n if (timeObj.locale != 'en') {\n if (timeObj.locale === 'fr-CH') {\n minsText = ' minutes';\n hrsText = ' heures';\n }\n if (timeObj.locale === 'de') {\n minsText = ' minuten';\n hrsText = ' stunden';\n }\n if (timeObj.locale === 'ar') {\n minsText = ' دقيقة';\n hrsText = ' ساعة';\n }\n if (timeObj.locale === 'zh') {\n minsText = ' 分鐘';\n hrsText = ' 小時';\n }\n }\n if (minutes === 0 || minutes === 30) {\n minText = minutes + minsText;\n } else {\n minText = (mins > 0) ? ('.' + mins) : '';\n }\n span.innerHTML = ' (' + ((hours > 0) ? (hours + minText + hrsText) : ('' + minText)) + ')';\n\n //disable the specific time from the selection\n if ((minutes / 60) % 3 === 0) {\n //disable the time values by addeding the e-disabled class.\n args.element.classList.add('e-disabled');\n }\n\n //append the custom SPAN element into LI element\n args.element.appendChild(span);\n }\n"} \ No newline at end of file diff --git a/src/timepicker/list-formatting.html b/src/timepicker/list-formatting.html index e72d99c4..375a6d34 100644 --- a/src/timepicker/list-formatting.html +++ b/src/timepicker/list-formatting.html @@ -27,6 +27,7 @@ documentation section.

                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var timepicker = new ej.calendars.TimePicker({\n value: new Date(),\n step: 60,\n format: 'HH:mm'\n });\n timepicker.appendTo('#timepicker');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n","index.js":"{{ripple}}\n var timepicker = new ej.calendars.TimePicker({\n value: new Date(),\n step: 60,\n format: 'HH:mm'\n });\n timepicker.appendTo('#timepicker');\n"} \ No newline at end of file diff --git a/src/timepicker/time-format.html b/src/timepicker/time-format.html index c10d5fce..bfeb7d58 100644 --- a/src/timepicker/time-format.html +++ b/src/timepicker/time-format.html @@ -29,6 +29,7 @@ documentation section.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/timepicker/time-range-stack.json b/src/timepicker/time-range-stack.json index 54003d04..7b2329fd 100644 --- a/src/timepicker/time-range-stack.json +++ b/src/timepicker/time-range-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var value;\n var isStartTimeChange = true;\n var startTime = new ej.calendars.TimePicker({\n placeholder: 'Start Time',\n change: onEnableEndTime\n });\n startTime.appendTo('#start');\n var endTime = new ej.calendars.TimePicker({\n placeholder: 'End Time',\n enabled: false\n });\n endTime.appendTo('#end');\n\n var checkboxObject = new ej.buttons.CheckBox({ label: 'Business Hours', change: changeTime });\n checkboxObject.appendTo('#dayRange');\n\n var endInput = document.getElementById('end');\n\n function changeTime(args) {\n isStartTimeChange = false;\n if (args.checked) {\n startTime.value = new Date('9/6/2017 9:00');\n endTime.enabled = true;\n endTime.value = new Date('9/6/2017 18:00');\n startTime.readonly = true;\n endTime.readonly = true;\n } else {\n endTime.value = null;\n startTime.value = null;\n endInput.value = '';\n startTime.readonly = false;\n endTime.readonly = false;\n endTime.enabled = false;\n }\n }\n function onEnableEndTime(args) {\n if (isStartTimeChange) {\n endTime.enabled = true;\n endTime.value = null;\n endInput.value = '';\n value = new Date(+args.value);\n value.setMinutes(value.getMinutes() + endTime.step);\n endTime.min = value;\n } else {\n isStartTimeChange = true;\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n","index.js":"{{ripple}}\n var value;\n var isStartTimeChange = true;\n var startTime = new ej.calendars.TimePicker({\n placeholder: 'Start Time',\n change: onEnableEndTime\n });\n startTime.appendTo('#start');\n var endTime = new ej.calendars.TimePicker({\n placeholder: 'End Time',\n enabled: false\n });\n endTime.appendTo('#end');\n\n var checkboxObject = new ej.buttons.CheckBox({ label: 'Business Hours', change: changeTime });\n checkboxObject.appendTo('#dayRange');\n\n var endInput = document.getElementById('end');\n\n function changeTime(args) {\n isStartTimeChange = false;\n if (args.checked) {\n startTime.value = new Date('9/6/2017 9:00');\n endTime.enabled = true;\n endTime.value = new Date('9/6/2017 18:00');\n startTime.readonly = true;\n endTime.readonly = true;\n } else {\n endTime.value = null;\n startTime.value = null;\n endInput.value = '';\n startTime.readonly = false;\n endTime.readonly = false;\n endTime.enabled = false;\n }\n }\n function onEnableEndTime(args) {\n if (isStartTimeChange) {\n endTime.enabled = true;\n endTime.value = null;\n endInput.value = '';\n value = new Date(+args.value);\n value.setMinutes(value.getMinutes() + endTime.step);\n endTime.min = value;\n } else {\n isStartTimeChange = true;\n }\n }\n"} \ No newline at end of file diff --git a/src/timepicker/time-range.html b/src/timepicker/time-range.html index 2989d017..ac296da0 100644 --- a/src/timepicker/time-range.html +++ b/src/timepicker/time-range.html @@ -32,6 +32,7 @@

                                      More information about the time range restriction can be found in the documentation section.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/toast/api-stack.json b/src/toast/api-stack.json index 06c92e16..281e212e 100644 --- a/src/toast/api-stack.json +++ b/src/toast/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      Show Animation

                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n

                                      Hide Animation

                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for Animation and Advanced APIs in toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right', Y :'Bottom'\n },\n target: document.body,\n beforeOpen: onBeforeOpen,\n close: onclose\n });\n toastObj.appendTo('#toastApi');\n var checkBoxObj = new ej.buttons.CheckBox({ label: 'Show Close Button', change: closeOnChange });\n checkBoxObj.appendTo('#closeButton');\n var checkBoxObj1 = new ej.buttons.CheckBox({ label: 'Show Progress Bar', change: OnProgressChange });\n checkBoxObj1.appendTo('#progressBar');\n var checkBoxObj2 = new ej.buttons.CheckBox({ label: 'Newest On Top', checked: true, change: closeNewestOnChange });\n checkBoxObj2.appendTo('#newestOnTop');\n var checkBoxObj3 = new ej.buttons.CheckBox({ label: 'Prevent Duplicates', change: OnPrevDubChange });\n checkBoxObj3.appendTo('#prevDuplicates');\n var checkBoxObj4 = new ej.buttons.CheckBox({ label: 'Action Buttons', change: OnactionBtnChange });\n checkBoxObj4.appendTo('#actionButtons');\n var btnEleShow = document.getElementById('toastBtnShow');\n var btnEleHide = document.getElementById('toastBtnHide');\n var prevDuplicates = false;\n btnEleShow.onclick = function () { showToast(); };\n btnEleHide.onclick = function () { toastObj.hide('All'); };\n\n document.onclick = function (e){\n if (e.target !== btnEleShow) {\n toastObj.hide('All');\n }\n };\n\n\n function showToast() {\n var title = document.getElementById('toast_input_title').value;\n var content = document.getElementById('toast_input_content').value;\n if (title === '' && content === '') {\n content = 'You have created a Toast message';\n }\n var showDuration = parseInt(document.getElementById('showDuration').value, 10);\n var hideDuration = parseInt(document.getElementById('hideDuration').value, 10);\n var timeOut = parseInt(document.getElementById('timeOut').value, 10);\n toastObj.show({\n title: title, content: content, timeOut: timeOut,\n animation: {\n show: { duration: showDuration },\n hide: { duration: hideDuration }\n }\n });\n }\n var dropDownListShow = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Animation', change: showChange, value: \"SlideBottomIn\"\n });\n dropDownListShow.appendTo('#ShowAnimation');\n var dropDownListHide = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Animation',\n change: hideChange, value: \"SlideBottomOut\"\n });\n dropDownListHide.appendTo('#HideAnimation');\n var dropDownListShowEase = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Easing',\n change: onShowEase\n });\n dropDownListShowEase.appendTo('#ShowEasing');\n var dropDownListHideEase = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Easing',\n change: onHideEase\n });\n dropDownListHideEase.appendTo('#HideEasing');\n function onShowEase(e) {\n toastObj.animation.show.easing = dropDownListShowEase.value.toString();\n }\n function onHideEase(e) {\n toastObj.animation.hide.easing = dropDownListHideEase.value.toString();\n }\n function showChange(e) {\n toastObj.animation.show.effect = dropDownListShow.value;\n }\n function hideChange(e) {\n toastObj.animation.hide.effect = dropDownListHide.value;\n }\n\n function onclose(e) {\n if (e.toastContainer.childElementCount === 0) {\n btnEleHide.style.display = 'none';\n }\n }\n\n function onBeforeOpen(e) {\n btnEleHide.style.display = 'inline-block';\n if (prevDuplicates) {\n e.cancel = preventDuplicate(e);\n }\n }\n function preventDuplicate(e) {\n var toastEle = e.element;\n var toasts = e.toastObj.element.children;\n for (var i = 0; i < toasts.length; i++) {\n var toastTitle = toasts[i].querySelector('.e-toast-title');\n var toastMessage = (toasts[i]).querySelector('.e-toast-message');\n if (toastTitle && toastTitle.isEqualNode(toastEle.querySelector('.e-toast-title'))) {\n return true;\n }\n if (!toastTitle && toastMessage && toastMessage.isEqualNode(toastEle.querySelector('.e-toast-message'))) {\n return true;\n }\n }\n return false;\n }\n function closeOnChange(e) {\n if(e.checked) toastObj.showCloseButton = true;\n else toastObj.showCloseButton = false;\n }\n function OnProgressChange(e) {\n if(e.checked) toastObj.showProgressBar = true;\n else toastObj.showProgressBar = false;\n }\n function closeNewestOnChange(e) {\n if(e.checked) toastObj.newestOnTop = true;\n else toastObj.newestOnTop = false;\n }\n function OnPrevDubChange(e) {\n prevDuplicates = e.checked;\n }\n function onActionBtnClick(e) {\n alert('Action button is clicked');\n }\n function OnactionBtnChange(e) {\n if (e.checked) {\n toastObj.buttons = [{ model: { content: '
                                      Click Here
                                      ' }, click: onActionBtnClick }];\n }\n else {\n toastObj.buttons = [];\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      Show Animation

                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n

                                      Hide Animation

                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for Animation and Advanced APIs in toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right', Y :'Bottom'\n },\n target: document.body,\n beforeOpen: onBeforeOpen,\n close: onclose\n });\n toastObj.appendTo('#toastApi');\n var checkBoxObj = new ej.buttons.CheckBox({ label: 'Show Close Button', change: closeOnChange });\n checkBoxObj.appendTo('#closeButton');\n var checkBoxObj1 = new ej.buttons.CheckBox({ label: 'Show Progress Bar', change: OnProgressChange });\n checkBoxObj1.appendTo('#progressBar');\n var checkBoxObj2 = new ej.buttons.CheckBox({ label: 'Newest On Top', checked: true, change: closeNewestOnChange });\n checkBoxObj2.appendTo('#newestOnTop');\n var checkBoxObj3 = new ej.buttons.CheckBox({ label: 'Prevent Duplicates', change: OnPrevDubChange });\n checkBoxObj3.appendTo('#prevDuplicates');\n var checkBoxObj4 = new ej.buttons.CheckBox({ label: 'Action Buttons', change: OnactionBtnChange });\n checkBoxObj4.appendTo('#actionButtons');\n var btnEleShow = document.getElementById('toastBtnShow');\n var btnEleHide = document.getElementById('toastBtnHide');\n var prevDuplicates = false;\n btnEleShow.onclick = function () { showToast(); };\n btnEleHide.onclick = function () { toastObj.hide('All'); };\n\n document.onclick = function (e){\n if (e.target !== btnEleShow) {\n toastObj.hide('All');\n }\n };\n\n\n function showToast() {\n var title = document.getElementById('toast_input_title').value;\n var content = document.getElementById('toast_input_content').value;\n if (title === '' && content === '') {\n content = 'You have created a Toast message';\n }\n var showDuration = parseInt(document.getElementById('showDuration').value, 10);\n var hideDuration = parseInt(document.getElementById('hideDuration').value, 10);\n var timeOut = parseInt(document.getElementById('timeOut').value, 10);\n toastObj.show({\n title: title, content: content, timeOut: timeOut,\n animation: {\n show: { duration: showDuration },\n hide: { duration: hideDuration }\n }\n });\n }\n var dropDownListShow = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Animation', change: showChange, value: \"SlideBottomIn\"\n });\n dropDownListShow.appendTo('#ShowAnimation');\n var dropDownListHide = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Animation',\n change: hideChange, value: \"SlideBottomOut\"\n });\n dropDownListHide.appendTo('#HideAnimation');\n var dropDownListShowEase = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Easing',\n change: onShowEase\n });\n dropDownListShowEase.appendTo('#ShowEasing');\n var dropDownListHideEase = new ej.dropdowns.DropDownList({\n placeholder: 'Select an Easing',\n change: onHideEase\n });\n dropDownListHideEase.appendTo('#HideEasing');\n function onShowEase(e) {\n toastObj.animation.show.easing = dropDownListShowEase.value.toString();\n }\n function onHideEase(e) {\n toastObj.animation.hide.easing = dropDownListHideEase.value.toString();\n }\n function showChange(e) {\n toastObj.animation.show.effect = dropDownListShow.value;\n }\n function hideChange(e) {\n toastObj.animation.hide.effect = dropDownListHide.value;\n }\n\n function onclose(e) {\n if (e.toastContainer.childElementCount === 0) {\n btnEleHide.style.display = 'none';\n }\n }\n\n function onBeforeOpen(e) {\n btnEleHide.style.display = 'inline-block';\n if (prevDuplicates) {\n e.cancel = preventDuplicate(e);\n }\n }\n function preventDuplicate(e) {\n var toastEle = e.element;\n var toasts = e.toastObj.element.children;\n for (var i = 0; i < toasts.length; i++) {\n var toastTitle = toasts[i].querySelector('.e-toast-title');\n var toastMessage = (toasts[i]).querySelector('.e-toast-message');\n if (toastTitle && toastTitle.isEqualNode(toastEle.querySelector('.e-toast-title'))) {\n return true;\n }\n if (!toastTitle && toastMessage && toastMessage.isEqualNode(toastEle.querySelector('.e-toast-message'))) {\n return true;\n }\n }\n return false;\n }\n function closeOnChange(e) {\n if(e.checked) toastObj.showCloseButton = true;\n else toastObj.showCloseButton = false;\n }\n function OnProgressChange(e) {\n if(e.checked) toastObj.showProgressBar = true;\n else toastObj.showProgressBar = false;\n }\n function closeNewestOnChange(e) {\n if(e.checked) toastObj.newestOnTop = true;\n else toastObj.newestOnTop = false;\n }\n function OnPrevDubChange(e) {\n prevDuplicates = e.checked;\n }\n function onActionBtnClick(e) {\n alert('Action button is clicked');\n }\n function OnactionBtnChange(e) {\n if (e.checked) {\n toastObj.buttons = [{ model: { content: '
                                      Click Here
                                      ' }, click: onActionBtnClick }];\n }\n else {\n toastObj.buttons = [];\n }\n }\n"} \ No newline at end of file diff --git a/src/toast/api.html b/src/toast/api.html index 8994a905..181e0e25 100644 --- a/src/toast/api.html +++ b/src/toast/api.html @@ -145,7 +145,8 @@

                                      Hide Animation

                                      More information about Toast can be found in this documentation section.

                                      - \ No newline at end of file + + \ No newline at end of file diff --git a/src/toast/default-stack.json b/src/toast/default-stack.json index 29c44c02..97bc736f 100644 --- a/src/toast/default-stack.json +++ b/src/toast/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for Basic Toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right'\n },\n close: onclose,\n beforeOpen: onBeforeOpen,\n });\n var btnEleShow = document.getElementById('toastBtnShow');\n var btnEleHide = document.getElementById('toastBtnHide');\n document.onclick = function (e) {\n if (e.target !== btnEleShow) {\n toastObj.hide('All');\n }\n };\n btnEleShow.onclick = function () {\n toastObj.show();\n };\n btnEleHide.onclick = function () {\n toastObj.hide('All');\n };\n \n function onclose(e) {\n if (e.toastContainer.childElementCount === 0 ) {\n btnEleHide.style.display = 'none';\n }\n }\n \n function onBeforeOpen(){\n btnEleHide.style.display = 'inline-block';\n }\n\n toastObj.appendTo('#toast_default');\n setTimeout(function () {\n toastObj.show({\n title: 'Adaptive Tiles Meeting', content: 'Conference Room 01 / Building 135 10:00 AM-10:30 AM',\n icon: 'e-meeting', target : document.body\n });\n }, 200);\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for Basic Toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right'\n },\n close: onclose,\n beforeOpen: onBeforeOpen,\n });\n var btnEleShow = document.getElementById('toastBtnShow');\n var btnEleHide = document.getElementById('toastBtnHide');\n document.onclick = function (e) {\n if (e.target !== btnEleShow) {\n toastObj.hide('All');\n }\n };\n btnEleShow.onclick = function () {\n toastObj.show();\n };\n btnEleHide.onclick = function () {\n toastObj.hide('All');\n };\n \n function onclose(e) {\n if (e.toastContainer.childElementCount === 0 ) {\n btnEleHide.style.display = 'none';\n }\n }\n \n function onBeforeOpen(){\n btnEleHide.style.display = 'inline-block';\n }\n\n toastObj.appendTo('#toast_default');\n setTimeout(function () {\n toastObj.show({\n title: 'Adaptive Tiles Meeting', content: 'Conference Room 01 / Building 135 10:00 AM-10:30 AM',\n icon: 'e-meeting', target : document.body\n });\n }, 200);\n"} \ No newline at end of file diff --git a/src/toast/default.html b/src/toast/default.html index 259e5ac1..dc4d5f2d 100644 --- a/src/toast/default.html +++ b/src/toast/default.html @@ -30,4 +30,8 @@ content: "\e705"; font-size: 17px; } + .bootstrap4 #toast_default .e-meeting::before { + content: "\e763"; + font-size: 20px; + } \ No newline at end of file diff --git a/src/toast/positions-stack.json b/src/toast/positions-stack.json index 3c710265..0e085861 100644 --- a/src/toast/positions-stack.json +++ b/src/toast/positions-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample for Positioning options in Toast\n */\n\n var toastObj = new ej.notifications.Toast({\n title: 'Matt sent you a friend request',\n content: 'You have a friend request yet to accept.',\n icon: 'e-laura',\n target: document.body,\n position: { X: 'Right', Y: 'Bottom' },\n close: onclose,\n beforeOpen: onBeforeOpen\n });\n\n if (!ej.base.isDevice) {\n toastObj.width = 350;\n toastObj.dataBind();\n }\n var listObj = new ej.dropdowns.DropDownList({\n index: 5,\n placeholder: 'Select a position',\n popupHeight: '200px',\n change: valueChange\n });\n listObj.appendTo('#position');\n var radioButton = new ej.buttons.RadioButton({ label: 'Target', name: 'toast', value: 'Target', change: checkboxChange });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Global', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });\n radioButton.appendTo('#radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Position', name: 'toastPos', value: 'Position', checked: true, change: checkboxChange2 });\n radioButton.appendTo('#dropdownRadio');\n radioButton = new ej.buttons.RadioButton({ label: 'Custom', name: 'toastPos', value: 'Custom', change: checkboxChange3 });\n radioButton.appendTo('#customRedio');\n var initialWid = toastObj.width.toString();\n toastObj.appendTo('#toast_pos');\n toastShow(200);\n function toastShow(timeOutDelay) {\n setTimeout(function () {\n toastObj.show();\n }, timeOutDelay);\n }\n var btnEle = document.getElementById('show_Toast');\n var hideBtn = document.getElementById('hideTosat');\n btnEle.onclick = function () {\n if (customFlag) {\n setcustomPosValue();\n }\n toastObj.show();\n };\n document.getElementById('hideTosat').onclick = function () {\n toastObj.hide('All');\n };\n document.onclick = function (e) {\n if (e.target !== btnEle && toastObj.target === document.body) {\n toastObj.hide('All');\n }\n };\n\n function onclose(e) {\n if (e.toastContainer.childElementCount === 0) {\n hideBtn.style.display = 'none';\n }\n }\n\n function onBeforeOpen() {\n hideBtn.style.display = 'inline-block';\n }\n\n var customFlag = false;\n function checkboxChange(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = '#toast_pos_target';\n toastShow(1000);\n }\n }\n function checkboxChange1(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = document.body;\n toastShow(1000);\n }\n }\n function checkboxChange2(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'table-cell';\n document.getElementById('customChoose').style.display = 'none';\n setToastPosValue(listObj.value.toString());\n customFlag = false;\n toastShow(1000);\n }\n }\n function checkboxChange3(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'none';\n document.getElementById('customChoose').style.display = 'table-cell';\n setcustomPosValue();\n customFlag = true;\n toastShow(1000);\n }\n }\n //To set custom position values\n function setcustomPosValue() {\n toastObj.width = initialWid;\n toastObj.position.X = parseInt(document.getElementById('xPos').value, 10);\n toastObj.position.Y = parseInt(document.getElementById('yPos').value, 10);\n }\n //Pre defined postions available based on target\n function setToastPosValue(value) {\n toastObj.width = initialWid;\n switch (value) {\n case 'topleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Top';\n break;\n case 'topright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Top';\n break;\n case 'topcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'topfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'bottomleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n }\n }\n function valueChange(e) {\n toastObj.hide('All');\n setToastPosValue(e.value.toString());\n toastShow(1000);\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample for Positioning options in Toast\n */\n\n var toastObj = new ej.notifications.Toast({\n title: 'Matt sent you a friend request',\n content: 'You have a friend request yet to accept.',\n icon: 'e-laura',\n target: document.body,\n position: { X: 'Right', Y: 'Bottom' },\n close: onclose,\n beforeOpen: onBeforeOpen\n });\n\n if (!ej.base.isDevice) {\n toastObj.width = 350;\n toastObj.dataBind();\n }\n var listObj = new ej.dropdowns.DropDownList({\n index: 5,\n placeholder: 'Select a position',\n popupHeight: '200px',\n change: valueChange\n });\n listObj.appendTo('#position');\n var radioButton = new ej.buttons.RadioButton({ label: 'Target', name: 'toast', value: 'Target', change: checkboxChange });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Global', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });\n radioButton.appendTo('#radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Position', name: 'toastPos', value: 'Position', checked: true, change: checkboxChange2 });\n radioButton.appendTo('#dropdownRadio');\n radioButton = new ej.buttons.RadioButton({ label: 'Custom', name: 'toastPos', value: 'Custom', change: checkboxChange3 });\n radioButton.appendTo('#customRedio');\n var initialWid = toastObj.width.toString();\n toastObj.appendTo('#toast_pos');\n toastShow(200);\n function toastShow(timeOutDelay) {\n setTimeout(function () {\n toastObj.show();\n }, timeOutDelay);\n }\n var btnEle = document.getElementById('show_Toast');\n var hideBtn = document.getElementById('hideTosat');\n btnEle.onclick = function () {\n if (customFlag) {\n setcustomPosValue();\n }\n toastObj.show();\n };\n document.getElementById('hideTosat').onclick = function () {\n toastObj.hide('All');\n };\n document.onclick = function (e) {\n if (e.target !== btnEle && toastObj.target === document.body) {\n toastObj.hide('All');\n }\n };\n\n function onclose(e) {\n if (e.toastContainer.childElementCount === 0) {\n hideBtn.style.display = 'none';\n }\n }\n\n function onBeforeOpen() {\n hideBtn.style.display = 'inline-block';\n }\n\n var customFlag = false;\n function checkboxChange(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = '#toast_pos_target';\n toastShow(1000);\n }\n }\n function checkboxChange1(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = document.body;\n toastShow(1000);\n }\n }\n function checkboxChange2(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'table-cell';\n document.getElementById('customChoose').style.display = 'none';\n setToastPosValue(listObj.value.toString());\n customFlag = false;\n toastShow(1000);\n }\n }\n function checkboxChange3(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'none';\n document.getElementById('customChoose').style.display = 'table-cell';\n setcustomPosValue();\n customFlag = true;\n toastShow(1000);\n }\n }\n //To set custom position values\n function setcustomPosValue() {\n toastObj.width = initialWid;\n toastObj.position.X = parseInt(document.getElementById('xPos').value, 10);\n toastObj.position.Y = parseInt(document.getElementById('yPos').value, 10);\n }\n //Pre defined postions available based on target\n function setToastPosValue(value) {\n toastObj.width = initialWid;\n switch (value) {\n case 'topleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Top';\n break;\n case 'topright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Top';\n break;\n case 'topcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'topfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'bottomleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n }\n }\n function valueChange(e) {\n toastObj.hide('All');\n setToastPosValue(e.value.toString());\n toastShow(1000);\n }\n"} \ No newline at end of file diff --git a/src/toast/positions.html b/src/toast/positions.html index 7daeac80..d308862a 100644 --- a/src/toast/positions.html +++ b/src/toast/positions.html @@ -87,12 +87,6 @@
                                      \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/toast/template-stack.json b/src/toast/template-stack.json index a3d22e7d..6179de15 100644 --- a/src/toast/template-stack.json +++ b/src/toast/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Sample Dynamic and Static template support\n */\n\n\n /* HTML static template toast customization */\n var toastObj = new ej.notifications.Toast({\n template: document.getElementById('template_toast_ele').innerHTML,\n position: !ej.base.Browser.isDevice ? { X: 'Right', Y: 'Bottom' } : { X: 'Center', Y: 'Top' },\n target: !ej.base.Browser.isDevice ? document.body : '#toast_template_target',\n extendedTimeout: 0,\n timeOut: 120000,\n open: onOpenToast, close: onToastClose, beforeOpen: onToastBeforeOpen\n });\n toastObj.appendTo('#toast_template');\n var toastData = [\n { from: ' Anjolie Stokes', subject: 'Networking Referral', image: { url: '//npmci.syncfusion.com/development/demos/src/toast/resource/laura.png' }, },\n { from: ' Ila Russo', subject: 'Business dinner invitation', image: { url: '//npmci.syncfusion.com/development/demos/src/toast/resource/janat.png' }, },\n { from: ' Camden Mcmillan', subject: 'Reference Request - Cameran Hester', image: { url: '//npmci.syncfusion.com/development/demos/src/toast/resource/camden.png' }, },\n { from: ' Chase Solomon', subject: 'New business relationship confirmation', image: { url: '//npmci.syncfusion.com/development/demos/src/toast/resource/chase.png' }, },\n {\n from: ' Inga Scott', subject: 'Application for Sales Associate', image: { url: '//npmci.syncfusion.com/development/demos/src/toast/resource/michael.png' },\n }\n ];\n var btnEle = document.getElementById('toast_mail_remainder');\n var alarm = document.getElementById('Alarm_turn_on');\n var snoozeFlag = false;\n btnEle.onclick = function () {\n toastObjEmail.show({ template: cardTemplateFn(toastData[toastFlag])[0].outerHTML });\n ++toastFlag;\n if (toastFlag === (toastData.length)) {\n toastFlag = 0;\n }\n };\n alarm.onclick = function () {\n toastObj.show();\n };\n var listObj = new ej.dropdowns.DropDownList({\n placeholder: 'Select a snooze time',\n popupHeight: '200px',\n change: listChange\n });\n function listChange(e) {\n snoozeFlag = true;\n toastObj.hide();\n }\n function onOpenToast(e) {\n var dismisBtn = document.getElementById('dismiss');\n var snooze = document.getElementById('snooze');\n snooze.onclick = function () {\n snoozeFlag = true;\n toastObj.hide();\n };\n dismisBtn.onclick = function () {\n toastObj.hide();\n };\n }\n function onToastClose(e) {\n alarm.style.display = 'inline-block';\n if (snoozeFlag) {\n //Set time out for toast based on selected time from drop down\n toastObj.show({ timeOut: (parseInt(listObj.value.toString(), 10) * 60000) });\n snoozeFlag = false;\n }\n }\n function onToastBeforeOpen(e) {\n alarm.style.display = 'none';\n listObj.appendTo(e.element.querySelector('#snoozeDD'));\n }\n setTimeout(function () {\n toastObj.show();\n }, 200);\n /* Create toast using template engine dynamically */\n var toastObjEmail = new ej.notifications.Toast({\n position: { X: 'Right' },\n newestOnTop: true,\n showCloseButton: true,\n timeOut: 0,\n animation: {\n hide: { effect: 'SlideRightOut' },\n show: { effect: 'SlideRightIn' }\n }, target : document.body\n });\n toastObjEmail.appendTo('#toast_custom');\n var toastFlag = 0;\n var cardTemplateFn = ej.base.compile((document.getElementById('toastEmail_template').innerHTML.trim()));\n setTimeout(function () {\n toastObjEmail.show({ template: cardTemplateFn(toastData[toastFlag])[0].outerHTML });\n ++toastFlag;\n }, 200);\n document.onclick = function (e) {\n var closestEle = ej.base.closest(e.target, '.e-toast-container');\n if (e.target !== alarm && e.target !== btnEle && closestEle !== toastObj.element && closestEle !== toastObjEmail.element) {\n toastObj.hide('All');\n toastObjEmail.hide('All');\n }\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * Sample Dynamic and Static template support\n */\n\n\n /* HTML static template toast customization */\n var toastObj = new ej.notifications.Toast({\n template: document.getElementById('template_toast_ele').innerHTML,\n position: !ej.base.Browser.isDevice ? { X: 'Right', Y: 'Bottom' } : { X: 'Center', Y: 'Top' },\n target: !ej.base.Browser.isDevice ? document.body : '#toast_template_target',\n extendedTimeout: 0,\n timeOut: 120000,\n open: onOpenToast, close: onToastClose, beforeOpen: onToastBeforeOpen\n });\n toastObj.appendTo('#toast_template');\n var toastData = [\n { from: ' Anjolie Stokes', subject: 'Networking Referral', image: { url: '//ej2.syncfusion.com/javascript/demos/src/toast/resource/laura.png' }, },\n { from: ' Ila Russo', subject: 'Business dinner invitation', image: { url: '//ej2.syncfusion.com/javascript/demos/src/toast/resource/janat.png' }, },\n { from: ' Camden Mcmillan', subject: 'Reference Request - Cameran Hester', image: { url: '//ej2.syncfusion.com/javascript/demos/src/toast/resource/camden.png' }, },\n { from: ' Chase Solomon', subject: 'New business relationship confirmation', image: { url: '//ej2.syncfusion.com/javascript/demos/src/toast/resource/chase.png' }, },\n {\n from: ' Inga Scott', subject: 'Application for Sales Associate', image: { url: '//ej2.syncfusion.com/javascript/demos/src/toast/resource/michael.png' },\n }\n ];\n var btnEle = document.getElementById('toast_mail_remainder');\n var alarm = document.getElementById('Alarm_turn_on');\n var snoozeFlag = false;\n btnEle.onclick = function () {\n toastObjEmail.show({ template: cardTemplateFn(toastData[toastFlag])[0].outerHTML });\n ++toastFlag;\n if (toastFlag === (toastData.length)) {\n toastFlag = 0;\n }\n };\n alarm.onclick = function () {\n toastObj.show();\n };\n var listObj = new ej.dropdowns.DropDownList({\n placeholder: 'Select a snooze time',\n popupHeight: '200px',\n change: listChange\n });\n function listChange(e) {\n snoozeFlag = true;\n toastObj.hide();\n }\n function onOpenToast(e) {\n var dismisBtn = document.getElementById('dismiss');\n var snooze = document.getElementById('snooze');\n snooze.onclick = function () {\n snoozeFlag = true;\n toastObj.hide();\n };\n dismisBtn.onclick = function () {\n toastObj.hide();\n };\n }\n function onToastClose(e) {\n alarm.style.display = 'inline-block';\n if (snoozeFlag) {\n //Set time out for toast based on selected time from drop down\n toastObj.show({ timeOut: (parseInt(listObj.value.toString(), 10) * 60000) });\n snoozeFlag = false;\n }\n }\n function onToastBeforeOpen(e) {\n alarm.style.display = 'none';\n listObj.appendTo(e.element.querySelector('#snoozeDD'));\n }\n setTimeout(function () {\n toastObj.show();\n }, 200);\n /* Create toast using template engine dynamically */\n var toastObjEmail = new ej.notifications.Toast({\n position: { X: 'Right' },\n newestOnTop: true,\n showCloseButton: true,\n timeOut: 0,\n animation: {\n hide: { effect: 'SlideRightOut' },\n show: { effect: 'SlideRightIn' }\n }, target : document.body\n });\n toastObjEmail.appendTo('#toast_custom');\n var toastFlag = 0;\n var cardTemplateFn = ej.base.compile((document.getElementById('toastEmail_template').innerHTML.trim()));\n setTimeout(function () {\n toastObjEmail.show({ template: cardTemplateFn(toastData[toastFlag])[0].outerHTML });\n ++toastFlag;\n }, 200);\n document.onclick = function (e) {\n var closestEle = ej.base.closest(e.target, '.e-toast-container');\n if (e.target !== alarm && e.target !== btnEle && closestEle !== toastObj.element && closestEle !== toastObjEmail.element) {\n toastObj.hide('All');\n toastObjEmail.hide('All');\n }\n };\n"} \ No newline at end of file diff --git a/src/toast/template.html b/src/toast/template.html index 22a05e28..3201522f 100644 --- a/src/toast/template.html +++ b/src/toast/template.html @@ -114,11 +114,6 @@ height: 50%; } - .toast-template-section #reminder { - text-align: center; - margin: 15px; - } - #toast_custom .e-toast .e-toast-title, #toast_custom .e-toast .e-toast-message, #toast_custom .e-toast .e-toast-message .e-toast-content, @@ -247,4 +242,13 @@ .material #template_toast .e-ddl-icon { color: white !important; } - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/toast/types-stack.json b/src/toast/types-stack.json index 8ba31812..bbcb09b9 100644 --- a/src/toast/types-stack.json +++ b/src/toast/types-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n
                                      ","index.js":"{{ripple}}/**\n * Sample for types of toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right'\n }, target: document.body,\n close: onclose,\n beforeOpen: onBeforeOpen\n });\n toastObj.appendTo('#toast_type');\n var toasts = [\n { title: 'Warning!', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning', icon: 'e-warning toast-icons' },\n { title: 'Success!', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success', icon: 'e-success toast-icons' },\n { title: 'Error!', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger', icon: 'e-error toast-icons' },\n { title: 'Information!', content: 'Please read the comments carefully.', cssClass: 'e-toast-info', icon: 'e-info toast-icons' }\n ];\n setTimeout(function () {\n toastObj.show(toasts[3]);\n }, 200);\n var infoBtn = document.getElementById('info_Toast');\n var warnBtn = document.getElementById('warning_Toast');\n var successBtn = document.getElementById('success_Toast');\n var errorBtn = document.getElementById('error_Toast');\n document.onclick = function (e) {\n if (e.target !== infoBtn && e.target !== warnBtn && e.target !== successBtn && e.target !== errorBtn) {\n toastObj.hide('All');\n }\n };\n\n function onclose (e){\n if (e.toastContainer.childElementCount === 0 ) {\n document.getElementById('hideTosat').style.display = 'none';\n }\n }\n \n function onBeforeOpen (){\n document.getElementById('hideTosat').style.display = 'inline-block';\n }\n\n document.getElementById('hideTosat').onclick = function () {\n toastObj.hide('All');\n };\n infoBtn.onclick = function () {\n toastObj.show(toasts[3]);\n };\n warnBtn.onclick = function () {\n toastObj.show(toasts[0]);\n };\n successBtn.onclick = function () {\n toastObj.show(toasts[1]);\n };\n errorBtn.onclick = function () {\n toastObj.show(toasts[2]);\n };\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n\n","index.js":"{{ripple}}/**\n * Sample for types of toast\n */\n\n var toastObj = new ej.notifications.Toast({\n position: {\n X: 'Right'\n }, target: document.body,\n close: onclose,\n beforeOpen: onBeforeOpen\n });\n toastObj.appendTo('#toast_type');\n var toasts = [\n { title: 'Warning!', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning', icon: 'e-warning toast-icons' },\n { title: 'Success!', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success', icon: 'e-success toast-icons' },\n { title: 'Error!', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger', icon: 'e-error toast-icons' },\n { title: 'Information!', content: 'Please read the comments carefully.', cssClass: 'e-toast-info', icon: 'e-info toast-icons' }\n ];\n setTimeout(function () {\n toastObj.show(toasts[3]);\n }, 200);\n var infoBtn = document.getElementById('info_Toast');\n var warnBtn = document.getElementById('warning_Toast');\n var successBtn = document.getElementById('success_Toast');\n var errorBtn = document.getElementById('error_Toast');\n document.onclick = function (e) {\n if (e.target !== infoBtn && e.target !== warnBtn && e.target !== successBtn && e.target !== errorBtn) {\n toastObj.hide('All');\n }\n };\n\n function onclose (e){\n if (e.toastContainer.childElementCount === 0 ) {\n document.getElementById('hideTosat').style.display = 'none';\n }\n }\n \n function onBeforeOpen (){\n document.getElementById('hideTosat').style.display = 'inline-block';\n }\n\n document.getElementById('hideTosat').onclick = function () {\n toastObj.hide('All');\n };\n infoBtn.onclick = function () {\n toastObj.show(toasts[3]);\n };\n warnBtn.onclick = function () {\n toastObj.show(toasts[0]);\n };\n successBtn.onclick = function () {\n toastObj.show(toasts[1]);\n };\n errorBtn.onclick = function () {\n toastObj.show(toasts[2]);\n };\n"} \ No newline at end of file diff --git a/src/toast/types.html b/src/toast/types.html index 0c6d5629..4e4a2d6c 100644 --- a/src/toast/types.html +++ b/src/toast/types.html @@ -48,11 +48,7 @@ min-width: 160px; max-width: 160px; } - - #toast_types { - text-align: center; - } - + .toast-icons { font-family: 'Toast_icons' !important; speak: none; @@ -86,4 +82,12 @@ .toast-icons.e-warning::before { content: "\e703"; } - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/toolbar/alignment-stack.json b/src/toolbar/alignment-stack.json index 06f9a905..85dbb0e6 100644 --- a/src/toolbar/alignment-stack.json +++ b/src/toolbar/alignment-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      MA
                                      \n
                                      \n
                                      Maria Anders11:27AM\n
                                      Sales Representative
                                      \n
                                      Can we schedule Meeting Appointment for today?
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      VA
                                      \n
                                      \n
                                      Victoria AshworthFri 7:50AM\n
                                      Sales Representative
                                      \n
                                      Yes we are available for meeting tomorrow
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      TH
                                      \n
                                      \n
                                      Thomas HardeyFri 7:50AM\n
                                      Sales Representative
                                      \n
                                      Customer has accepted our proposal. Would it be possible for arrange meeting tomorrow?
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate alignment functionalities.\n */\n\n var ele = '
                                      Inbox(33)
                                      ';\n ele = ele + '
                                      user@example.com
                                      ';\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-tbar-menu-icon tb-icons', tooltipText: 'Menu' },\n {\n template: ele,\n align: 'Center' },\n {\n prefixIcon: 'e-tbar-search-icon tb-icons', tooltipText: 'Search', align: 'Right' },\n {\n prefixIcon: 'e-tbar-settings-icon tb-icons', tooltipText: 'Popup', align: 'Right' } ]\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_align');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      MA
                                      \n
                                      \n
                                      Maria Anders11:27AM\n
                                      Sales Representative
                                      \n
                                      Can we schedule Meeting Appointment for today?
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      VA
                                      \n
                                      \n
                                      Victoria AshworthFri 7:50AM\n
                                      Sales Representative
                                      \n
                                      Yes we are available for meeting tomorrow
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      TH
                                      \n
                                      \n
                                      Thomas HardeyFri 7:50AM\n
                                      Sales Representative
                                      \n
                                      Customer has accepted our proposal. Would it be possible for arrange meeting tomorrow?
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate alignment functionalities.\n */\n\n var ele = '
                                      Inbox(33)
                                      ';\n ele = ele + '
                                      user@example.com
                                      ';\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-tbar-menu-icon tb-icons', tooltipText: 'Menu' },\n {\n template: ele,\n align: 'Center' },\n {\n prefixIcon: 'e-tbar-search-icon tb-icons', tooltipText: 'Search', align: 'Right' },\n {\n prefixIcon: 'e-tbar-settings-icon tb-icons', tooltipText: 'Popup', align: 'Right' } ]\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_align');\n"} \ No newline at end of file diff --git a/src/toolbar/default-stack.json b/src/toolbar/default-stack.json index 2c606f77..c2413e52 100644 --- a/src/toolbar/default-stack.json +++ b/src/toolbar/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate default functionalities.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy' },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic' },\n {\n prefixIcon: 'e-color-icon tb-icons', tooltipText: 'Color-Picker' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bullets-icon tb-icons', tooltipText: 'Bullets'},\n {\n prefixIcon: 'e-numbering-icon tb-icons', tooltipText: 'Numbering' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-ascending-icon tb-icons', tooltipText: 'Sort A - Z' },\n {\n prefixIcon: 'e-descending-icon tb-icons', tooltipText: 'Sort Z - A' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-upload-icon tb-icons', tooltipText: 'Upload' },\n {\n prefixIcon: 'e-download-icon tb-icons', tooltipText: 'Download' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-indent-icon tb-icons', tooltipText: 'Text Indent' },\n {\n prefixIcon: 'e-outdent-icon tb-icons', tooltipText: 'Text Outdent' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-clear-icon tb-icons', tooltipText: 'Clear' },\n {\n prefixIcon: 'e-reload-icon tb-icons', tooltipText: 'Reload' },\n {\n prefixIcon: 'e-export-icon tb-icons', tooltipText: 'Export'\n }]\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_default');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate default functionalities.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy' },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic' },\n {\n prefixIcon: 'e-color-icon tb-icons', tooltipText: 'Color-Picker' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bullets-icon tb-icons', tooltipText: 'Bullets'},\n {\n prefixIcon: 'e-numbering-icon tb-icons', tooltipText: 'Numbering' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-ascending-icon tb-icons', tooltipText: 'Sort A - Z' },\n {\n prefixIcon: 'e-descending-icon tb-icons', tooltipText: 'Sort Z - A' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-upload-icon tb-icons', tooltipText: 'Upload' },\n {\n prefixIcon: 'e-download-icon tb-icons', tooltipText: 'Download' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-indent-icon tb-icons', tooltipText: 'Text Indent' },\n {\n prefixIcon: 'e-outdent-icon tb-icons', tooltipText: 'Text Outdent' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-clear-icon tb-icons', tooltipText: 'Clear' },\n {\n prefixIcon: 'e-reload-icon tb-icons', tooltipText: 'Reload' },\n {\n prefixIcon: 'e-export-icon tb-icons', tooltipText: 'Export'\n }]\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_default');\n"} \ No newline at end of file diff --git a/src/toolbar/default.html b/src/toolbar/default.html index c1646ab4..29d619a3 100644 --- a/src/toolbar/default.html +++ b/src/toolbar/default.html @@ -33,6 +33,7 @@
                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/toolbar/popup-stack.json b/src/toolbar/popup-stack.json index 8fcb7b5a..c62fae88 100644 --- a/src/toolbar/popup-stack.json +++ b/src/toolbar/popup-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n


                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate popup mode feature.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n overflowMode: 'Popup',\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut', text: 'Cut', showTextOn: 'Overflow', overflow: 'Show' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy', text: 'Copy', showTextOn: 'Overflow', overflow: 'Show'},\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste', text: 'Paste', showTextOn: 'Overflow', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold', text: 'Bold', showTextOn: 'Overflow', overflow: 'Show' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline', text: 'Underline', showTextOn: 'Overflow',\n overflow: 'Show' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic', text: 'Italic', showTextOn: 'Overflow', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bullets-icon tb-icons', text: 'Bullets', tooltipText: 'Bullets', overflow: 'Show'},\n {\n prefixIcon: 'e-numbering-icon tb-icons', text: 'Numbering', tooltipText: 'Numbering', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-undo-icon tb-icons', tooltipText: 'Undo', text: 'Undo' },\n {\n prefixIcon: 'e-redo-icon tb-icons', tooltipText: 'Redo', text: 'Redo' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left', showTextOn : 'Overflow',\n overflow: 'Show', text: 'Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Justify' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-radar-icon tb-icons', text: 'Radar', tooltipText: 'Radar Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-line-icon tb-icons', text: 'Line', tooltipText: 'Line Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-doughnut-icon tb-icons', text: 'Doughnut', tooltipText: 'Doughnut Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-bubble-icon tb-icons', text: 'Bubble', tooltipText: 'Bubble Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-table-icon tb-icons', text: 'Table', tooltipText: 'Table' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-picture-icon tb-icons', text: 'Picture', tooltipText: 'Picture' , showTextOn : 'Overflow' },\n {\n text: 'Design', prefixIcon: 'e-design-icon tb-icons' , tooltipText: 'Design' , showTextOn : 'Overflow'\n }],\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_pop');\n var today = new Date();\n var ele = '
                                      ' + today.toLocaleString('en-us', { month: 'long' }) + ' ' + today.getFullYear() + '
                                      ';\n var toolbarObj1 = new ej.navigations.Toolbar({\n overflowMode: 'Popup',\n items: [\n {\n template: ele,\n overflow: 'Show'\n },\n {\n prefixIcon: 'e-icon-day e-icons', tooltipText: 'Today', text: 'Today', overflow: 'Hide', align: 'Right'\n },\n {\n type: 'Separator'\n },\n {\n prefixIcon: 'e-icon-week e-icons', tooltipText: 'Week', text: 'Week', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-icon-month e-icons', tooltipText: 'Month', text: 'Month', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-icon-year e-icons', tooltipText: 'Year', text: 'Year', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-print e-icons', tooltipText: 'Print', text: 'Print', overflow: 'Hide', showAlwaysInPopup: true\n },\n {\n prefixIcon: 'e-reccurence-icon e-icons', tooltipText: 'Sync', text: 'Sync', overflow: 'Hide', showAlwaysInPopup: true\n }\n ]\n });\n toolbarObj1.appendTo('#toolbar_popalways');\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n


                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Toolbar sample to demonstrate popup mode feature.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n overflowMode: 'Popup',\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut', text: 'Cut', showTextOn: 'Overflow', overflow: 'Show' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy', text: 'Copy', showTextOn: 'Overflow', overflow: 'Show'},\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste', text: 'Paste', showTextOn: 'Overflow', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold', text: 'Bold', showTextOn: 'Overflow', overflow: 'Show' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline', text: 'Underline', showTextOn: 'Overflow',\n overflow: 'Show' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic', text: 'Italic', showTextOn: 'Overflow', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bullets-icon tb-icons', text: 'Bullets', tooltipText: 'Bullets', overflow: 'Show'},\n {\n prefixIcon: 'e-numbering-icon tb-icons', text: 'Numbering', tooltipText: 'Numbering', overflow: 'Show'},\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-undo-icon tb-icons', tooltipText: 'Undo', text: 'Undo' },\n {\n prefixIcon: 'e-redo-icon tb-icons', tooltipText: 'Redo', text: 'Redo' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left', showTextOn : 'Overflow',\n overflow: 'Show', text: 'Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Justify' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-radar-icon tb-icons', text: 'Radar', tooltipText: 'Radar Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-line-icon tb-icons', text: 'Line', tooltipText: 'Line Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-doughnut-icon tb-icons', text: 'Doughnut', tooltipText: 'Doughnut Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-bubble-icon tb-icons', text: 'Bubble', tooltipText: 'Bubble Chart' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-table-icon tb-icons', text: 'Table', tooltipText: 'Table' , showTextOn : 'Overflow' },\n {\n prefixIcon: 'e-picture-icon tb-icons', text: 'Picture', tooltipText: 'Picture' , showTextOn : 'Overflow' },\n {\n text: 'Design', prefixIcon: 'e-design-icon tb-icons' , tooltipText: 'Design' , showTextOn : 'Overflow'\n }],\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_pop');\n var today = new Date();\n var ele = '
                                      ' + today.toLocaleString('en-us', { month: 'long' }) + ' ' + today.getFullYear() + '
                                      ';\n var toolbarObj1 = new ej.navigations.Toolbar({\n overflowMode: 'Popup',\n items: [\n {\n template: ele,\n overflow: 'Show'\n },\n {\n prefixIcon: 'e-icon-day e-icons', tooltipText: 'Today', text: 'Today', overflow: 'Hide', align: 'Right'\n },\n {\n type: 'Separator'\n },\n {\n prefixIcon: 'e-icon-week e-icons', tooltipText: 'Week', text: 'Week', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-icon-month e-icons', tooltipText: 'Month', text: 'Month', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-icon-year e-icons', tooltipText: 'Year', text: 'Year', overflow: 'Hide', align: 'Right'\n },\n {\n prefixIcon: 'e-print e-icons', tooltipText: 'Print', text: 'Print', overflow: 'Hide', showAlwaysInPopup: true\n },\n {\n prefixIcon: 'e-reccurence-icon e-icons', tooltipText: 'Sync', text: 'Sync', overflow: 'Hide', showAlwaysInPopup: true\n }\n ]\n });\n toolbarObj1.appendTo('#toolbar_popalways');\n"} \ No newline at end of file diff --git a/src/toolbar/popup.html b/src/toolbar/popup.html index 6c2e313b..ca3f6b5b 100644 --- a/src/toolbar/popup.html +++ b/src/toolbar/popup.html @@ -49,6 +49,7 @@
                                      + \ No newline at end of file + + diff --git a/src/toolbar/right-to-left-stack.json b/src/toolbar/right-to-left-stack.json index adb0fe68..3d105ff1 100644 --- a/src/toolbar/right-to-left-stack.json +++ b/src/toolbar/right-to-left-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * Toolbar sample to demonstrate RTL feature.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut' , overflow: 'Show' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy', overflow: 'Show' },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste' , overflow: 'Show' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold', overflow: 'Show' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline' , overflow: 'Show' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic' , overflow: 'Show' },\n {\n type: 'Separator' },\n {\n text: 'Bullets', prefixIcon: 'e-bullets-icon tb-icons', tooltipText: 'Bullets', showTextOn: 'Overflow' },\n {\n text: 'Numbering', prefixIcon: 'e-numbering-icon tb-icons', tooltipText: 'Numbering' , showTextOn: 'Overflow' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right',\n showTextOn : 'Overflow', text: 'Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center',\n showTextOn : 'Overflow', text: 'Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Justify' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-undo-icon tb-icons', tooltipText: 'Undo', text: 'Undo' },\n {\n prefixIcon: 'e-redo-icon tb-icons', tooltipText: 'Redo', text: 'Redo' },\n {\n type: 'Separator' },\n {\n text: 'Radar', prefixIcon: 'e-radar-icon tb-icons', tooltipText: 'Radar Chart' , showTextOn: 'Overflow' },\n {\n text: 'Line', prefixIcon: 'e-line-icon tb-icons', tooltipText: 'Line Chart' , showTextOn: 'Overflow' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-table-icon tb-icons', text: 'Table', tooltipText: 'Table' , showTextOn: 'Overflow' },\n {\n prefixIcon: 'e-picture-icon tb-icons', overflow: 'Hide', text: 'Picture',\n tooltipText: 'Picture' , showTextOn: 'Overflow' },\n {\n text: 'Design', prefixIcon: 'e-design-icon tb-icons', overflow: 'Hide',\n tooltipText: 'Design', showTextOn: 'Overflow'\n }]\n });\n toolbarObj.enableRtl = true;\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_rtl');\n\n //Initialize DropDownList component\n var overflowModes = new ej.dropdowns.DropDownList({\n width: '100%',\n change: changeOverFlowMode\n });\n //Render initialized DropDownList component\n overflowModes.appendTo('#drop');\n\n function changeOverFlowMode(args) {\n if (args.itemData.value === 'Scrollable') {\n toolbarObj.overflowMode = 'Scrollable';\n } else {\n toolbarObj.overflowMode = 'Popup';\n }\n toolbarObj.dataBind();\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/*jshint esversion: 6 */\n/**\n * Toolbar sample to demonstrate RTL feature.\n */\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut' , overflow: 'Show' },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy', overflow: 'Show' },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste' , overflow: 'Show' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold', overflow: 'Show' },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline' , overflow: 'Show' },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic' , overflow: 'Show' },\n {\n type: 'Separator' },\n {\n text: 'Bullets', prefixIcon: 'e-bullets-icon tb-icons', tooltipText: 'Bullets', showTextOn: 'Overflow' },\n {\n text: 'Numbering', prefixIcon: 'e-numbering-icon tb-icons', tooltipText: 'Numbering' , showTextOn: 'Overflow' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Left' },\n {\n prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right',\n showTextOn : 'Overflow', text: 'Right' },\n {\n prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center',\n showTextOn : 'Overflow', text: 'Center' },\n {\n prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify',\n showTextOn : 'Overflow', overflow: 'Show', text: 'Justify' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-undo-icon tb-icons', tooltipText: 'Undo', text: 'Undo' },\n {\n prefixIcon: 'e-redo-icon tb-icons', tooltipText: 'Redo', text: 'Redo' },\n {\n type: 'Separator' },\n {\n text: 'Radar', prefixIcon: 'e-radar-icon tb-icons', tooltipText: 'Radar Chart' , showTextOn: 'Overflow' },\n {\n text: 'Line', prefixIcon: 'e-line-icon tb-icons', tooltipText: 'Line Chart' , showTextOn: 'Overflow' },\n {\n type: 'Separator' },\n {\n prefixIcon: 'e-table-icon tb-icons', text: 'Table', tooltipText: 'Table' , showTextOn: 'Overflow' },\n {\n prefixIcon: 'e-picture-icon tb-icons', overflow: 'Hide', text: 'Picture',\n tooltipText: 'Picture' , showTextOn: 'Overflow' },\n {\n text: 'Design', prefixIcon: 'e-design-icon tb-icons', overflow: 'Hide',\n tooltipText: 'Design', showTextOn: 'Overflow'\n }]\n });\n toolbarObj.enableRtl = true;\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar_rtl');\n\n //Initialize DropDownList component\n var overflowModes = new ej.dropdowns.DropDownList({\n width: '100%',\n change: changeOverFlowMode\n });\n //Render initialized DropDownList component\n overflowModes.appendTo('#drop');\n\n function changeOverFlowMode(args) {\n if (args.itemData.value === 'Scrollable') {\n toolbarObj.overflowMode = 'Scrollable';\n } else {\n toolbarObj.overflowMode = 'Popup';\n }\n toolbarObj.dataBind();\n }\n"} \ No newline at end of file diff --git a/src/tooltip/ajax-content-stack.json b/src/tooltip/ajax-content-stack.json index 17922fc3..6ce27ed1 100644 --- a/src/tooltip/ajax-content-stack.json +++ b/src/tooltip/ajax-content-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n

                                      National Sports

                                      \n \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Loading ajax content sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set data to datasource property\n dataSource: [\n { id: '1', text: 'Australia' },\n { id: '2', text: 'Bhutan' },\n { id: '3', text: 'China' },\n { id: '4', text: 'Cuba' },\n { id: '5', text: 'India' },\n { id: '6', text: 'Switzerland' },\n { id: '7', text: 'United States' }\n ],\n\n //Map appropriate columns to fields property\n fields: { text: 'text', tooltip: 'id' }\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#countrylist');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Loading...',\n\n //Set tooltip target\n target: '#countrylist [title]',\n\n //Set tooltip position\n position: 'RightCenter',\n\n //Raise beforeRender event\n beforeRender: onBeforeRender\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n\n\n/**\n * Process tooltip ajax content.\n */\n\nfunction onBeforeRender(args) {\n var _this = this;\n this.content = 'Loading...';\n this.dataBind();\n var ajax = new ej.base.Ajax('//npmci.syncfusion.com/development/demos/src/tooltip/tooltipdata.json', 'GET', true);\n ajax.send().then(function (result) {\n result = JSON.parse(result);\n for (var i = 0; i < result.length; i++) {\n if (result[i].Id === args.target.getAttribute('data-content')) {\n /* tslint:disable */\n _this.content = \"
                                      \" + result[i].Sports + \"
                                      \";\n /* tslint:enable */\n\n }\n }\n _this.dataBind();\n }, function (reason) {\n _this.content = reason.message;\n _this.dataBind();\n });\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n

                                      National Sports

                                      \n \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Loading ajax content sample\n */\n\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n\n //Set data to datasource property\n dataSource: [\n { id: '1', text: 'Australia' },\n { id: '2', text: 'Bhutan' },\n { id: '3', text: 'China' },\n { id: '4', text: 'Cuba' },\n { id: '5', text: 'India' },\n { id: '6', text: 'Switzerland' },\n { id: '7', text: 'United States' }\n ],\n\n //Map appropriate columns to fields property\n fields: { text: 'text', tooltip: 'id' }\n\n });\n\n //Render initialized ListView component\n listObj.appendTo('#countrylist');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Loading...',\n\t\t\n\t\tcssClass: 'e-ajax-content',\n\n //Set tooltip target\n target: '#countrylist [title]',\n\n //Set tooltip position\n position: 'RightCenter',\n\n //Raise beforeRender event\n beforeRender: onBeforeRender\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n\n\n/**\n * Process tooltip ajax content.\n */\n\nfunction onBeforeRender(args) {\n var _this = this;\n this.content = 'Loading...';\n this.dataBind();\n var ajax = new ej.base.Ajax('//ej2.syncfusion.com/javascript/demos/src/tooltip/tooltipdata.json', 'GET', true);\n ajax.send().then(function (result) {\n result = JSON.parse(result);\n for (var i = 0; i < result.length; i++) {\n if (result[i].Id === args.target.getAttribute('data-content')) {\n /* tslint:disable */\n _this.content = \"
                                      \" + result[i].Sports + \"
                                      \";\n /* tslint:enable */\n\n }\n }\n _this.dataBind();\n }, function (reason) {\n _this.content = reason.message;\n _this.dataBind();\n });\n}"} \ No newline at end of file diff --git a/src/tooltip/ajax-content.html b/src/tooltip/ajax-content.html index f867e8da..4596e0d8 100644 --- a/src/tooltip/ajax-content.html +++ b/src/tooltip/ajax-content.html @@ -78,6 +78,15 @@ text-align: left; } } + + .bootstrap4 .e-tooltip-wrap.e-ajax-content .contentWrap { + padding: 0; + line-height: 18px; + } + + .bootstrap4 .e-tooltip-wrap.e-ajax-content .def { + display: inline-block; + }

                                      National Sports

                                      diff --git a/src/tooltip/ajax-content.js b/src/tooltip/ajax-content.js index e3803df4..c6992057 100644 --- a/src/tooltip/ajax-content.js +++ b/src/tooltip/ajax-content.js @@ -30,6 +30,8 @@ this.default = function () { //Set tooltip content content: 'Loading...', + + cssClass: 'e-ajax-content', //Set tooltip target target: '#countrylist [title]', diff --git a/src/tooltip/api-stack.json b/src/tooltip/api-stack.json index 3a67058f..5c24a8b0 100644 --- a/src/tooltip/api-stack.json +++ b/src/tooltip/api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Content
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Height
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Width
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Open Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Sticky Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip API sample\n */\n\n //Initialize Button component\n var button = new ej.buttons.Button();\n //Render initialized Button component\n button.appendTo('#default');\n\n // defined the array of data\n var data = ['Hover', 'Click', 'Auto'];\n\n //Initialize CheckBox component\n var check = new ej.buttons.CheckBox({\n checked: false,\n change: stickyChange\n });\n //Render initialized CheckBox component\n check.appendTo('#sticky');\n\n // initialize DropDownList component\n var dropDownListObject = new ej.dropdowns.DropDownList({\n //set the data to dataSource property\n dataSource: data,\n // set placeholder to DropDownList input element\n placeholder: 'Select mode',\n // set change event for mode change in Tooltip\n change: onModeChange\n });\n // render initialized DropDownList\n dropDownListObject.appendTo('#ddlelement');\n\n // initialize the Numeric Textbox for height\n var height = new ej.inputs.NumericTextBox({\n //set height for Tooltip\n value: 45,\n // set change event for height change in Tooltip\n change: onHeightChange\n });\n // render initialized Numeric Textbox\n height.appendTo('#height');\n\n // initialize the Numeric Textbox for width\n var width = new ej.inputs.NumericTextBox({\n //set width for Tooltip\n value: 100,\n // set change event for width change in Tooltip\n change: onWidthChange\n });\n // render initialized Numeric Textbox\n width.appendTo('#width');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n //Set tooltip content\n content: 'Tooltip content',\n //Set open mode for Tooltip\n opensOn: 'Click'\n });\n //Render initialized Tooltip component\n tooltip.appendTo('#default');\n\n //change event handler for height change in Tooltip\n function onHeightChange(args) {\n tooltip.height = args.value;\n tooltip.refresh(tooltip.element);\n }\n\n //change event handler for width change in Tooltip\n function onWidthChange(args) {\n tooltip.width = args.value;\n tooltip.refresh(tooltip.element);\n }\n\n //change event handler for mode change in Tooltip\n function onModeChange(args) {\n tooltip.opensOn = args.value;\n tooltip.close();\n }\n\n //change event handler for sticky mode in Tooltip\n function stickyChange(args) {\n tooltip.isSticky = args.checked;\n tooltip.close();\n }\n\n var rightPane = document.getElementById('right-pane');\n var tooltipWrap = document.getElementsByClassName('e-tooltip-wrap');\n var contentField = document.querySelector('#value');\n\n //Attached scroll and click event listners in right pane\n if (rightPane) {\n rightPane.addEventListener('click', onClick);\n rightPane.addEventListener('scroll', onScroll);\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (tooltipWrap.length > 0) {\n tooltip.close();\n }\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (args.target.parentNode.className === 'e-tab-text') {\n if (tooltipWrap.length > 0) {\n tooltip.close();\n }\n }\n }\n\n //change event handler for content change\n contentField.addEventListener('change', function() {\n tooltip.content = this.value;\n tooltip.refresh(tooltip.element);\n });\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Content
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Height
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Width
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Open Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Sticky Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip API sample\n */\n\n //Initialize Button component\n var button = new ej.buttons.Button();\n //Render initialized Button component\n button.appendTo('#default');\n\n // defined the array of data\n var data = ['Hover', 'Click', 'Auto'];\n\n //Initialize CheckBox component\n var check = new ej.buttons.CheckBox({\n checked: false,\n change: stickyChange\n });\n //Render initialized CheckBox component\n check.appendTo('#sticky');\n\n // initialize DropDownList component\n var dropDownListObject = new ej.dropdowns.DropDownList({\n //set the data to dataSource property\n dataSource: data,\n // set placeholder to DropDownList input element\n placeholder: 'Select mode',\n // set change event for mode change in Tooltip\n change: onModeChange\n });\n // render initialized DropDownList\n dropDownListObject.appendTo('#ddlelement');\n\n // initialize the Numeric Textbox for height\n var height = new ej.inputs.NumericTextBox({\n //set height for Tooltip\n value: 45,\n // set change event for height change in Tooltip\n change: onHeightChange\n });\n // render initialized Numeric Textbox\n height.appendTo('#height');\n\n // initialize the Numeric Textbox for width\n var width = new ej.inputs.NumericTextBox({\n //set width for Tooltip\n value: 100,\n // set change event for width change in Tooltip\n change: onWidthChange\n });\n // render initialized Numeric Textbox\n width.appendTo('#width');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n //Set tooltip content\n content: 'Tooltip content',\n //Set open mode for Tooltip\n opensOn: 'Click'\n });\n //Render initialized Tooltip component\n tooltip.appendTo('#default');\n\n //change event handler for height change in Tooltip\n function onHeightChange(args) {\n tooltip.height = args.value;\n tooltip.refresh(tooltip.element);\n }\n\n //change event handler for width change in Tooltip\n function onWidthChange(args) {\n tooltip.width = args.value;\n tooltip.refresh(tooltip.element);\n }\n\n //change event handler for mode change in Tooltip\n function onModeChange(args) {\n tooltip.opensOn = args.value;\n tooltip.close();\n }\n\n //change event handler for sticky mode in Tooltip\n function stickyChange(args) {\n tooltip.isSticky = args.checked;\n tooltip.close();\n }\n\n var rightPane = document.getElementById('right-pane');\n var tooltipWrap = document.getElementsByClassName('e-tooltip-wrap');\n var contentField = document.querySelector('#value');\n\n //Attached scroll and click event listners in right pane\n if (rightPane) {\n rightPane.addEventListener('click', onClick);\n rightPane.addEventListener('scroll', onScroll);\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (tooltipWrap.length > 0) {\n tooltip.close();\n }\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (args.target.parentNode.className === 'e-tab-text') {\n if (tooltipWrap.length > 0) {\n tooltip.close();\n }\n }\n }\n\n //change event handler for content change\n contentField.addEventListener('change', function() {\n tooltip.content = this.value;\n tooltip.refresh(tooltip.element);\n });\n"} \ No newline at end of file diff --git a/src/tooltip/default-stack.json b/src/tooltip/default-stack.json index 2a86ec9c..0a4f0360 100644 --- a/src/tooltip/default-stack.json +++ b/src/tooltip/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      Position
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip default sample\n */\n\n\n //Initialize Button component\n var button = new ej.buttons.Button();\n\n //Render initialized Button component\n button.appendTo('#Tooltip');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Lets go green & Save Earth !!!'\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n //Handle tooltip position based on drop-down value change\n document.querySelector('#positions').addEventListener('change', function () {\n tooltip.position = this.value;\n\n });\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      Position
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip default sample\n */\n\n\n //Initialize Button component\n var button = new ej.buttons.Button();\n\n //Render initialized Button component\n button.appendTo('#Tooltip');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Lets go green & Save Earth !!!'\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n //Handle tooltip position based on drop-down value change\n document.querySelector('#positions').addEventListener('change', function () {\n tooltip.position = this.value;\n\n });\n\n"} \ No newline at end of file diff --git a/src/tooltip/html-template-stack.json b/src/tooltip/html-template-stack.json index 14011d7e..654db2bb 100644 --- a/src/tooltip/html-template-stack.json +++ b/src/tooltip/html-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n \n
                                      \n \n \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * HTML template sample\n */\n\n\n //Initialize Button component\n var button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n //Render initialized Button component\n button.appendTo('#content');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n cssClass: 'e-tooltip-template-css',\n //Set tooltip open mode\n opensOn: 'Click',\n //Set tooltip content\n content: '
                                      ' +\n\t\t\t '
                                      ' +\n\t\t '

                                      Eastern Bluebird

                                      ' +\n '
                                      ' +\n\t\t\t '
                                      The Eastern Bluebird' +\n 'is easily found in open fields and sparse woodland areas, including along woodland edges. These' +\n 'are cavity-nesting birds and a pair of eastern bluebirds will raise 2-3 broods annually, with 2-8 light blue' +\n\t\t\t 'or whitish eggs per brood.
                                      ' +\n\t\t\t '
                                      ' +\n\t\t\t '
                                      ' +\n '

                                      Eastern bluebirds can be very vocal in flocks.' +\n 'Their calls include a rapid, mid-tone chatter and several long dropping pitch calls.

                                      ' +\n\t\t\t'

                                      Source: ' +\n\t\t\t'a href=\"https://en.wikipedia.org/wiki/Eastern_bluebird\" target=\"_blank\">https://en.wikipedia.org/wiki/Eastern_bluebird' +\n\t\t\t'

                                      ' +\n\t\t\t'
                                      ' +\n\t\t '
                                      ',\n //Raise beforeRender event\n beforeOpen: onBeforeRender\n });\n //Render initialized Tooltip component\n tooltip.appendTo('#content');\n\n //beforRender event handler for Tooltip\n function onBeforeRender() {\n var htmlcontent = document.getElementById('democontent');\n htmlcontent.style.display = 'block';\n tooltip.content = htmlcontent;\n }\n\n //Attached scroll and click event listners in right pane\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('click', onClick);\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tooltip.close();\n }\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (args.target.parentNode.className === 'e-tab-text') {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tooltip.close();\n }\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n \n
                                      \n \n \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * HTML template sample\n */\n\n\n //Initialize Button component\n var button = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });\n //Render initialized Button component\n button.appendTo('#content');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n cssClass: 'e-tooltip-template-css',\n //Set tooltip open mode\n opensOn: 'Click',\n //Set tooltip content\n content: '
                                      ' +\n\t\t\t '
                                      ' +\n\t\t '

                                      Eastern Bluebird

                                      ' +\n '
                                      ' +\n\t\t\t '
                                      The Eastern Bluebird' +\n 'is easily found in open fields and sparse woodland areas, including along woodland edges. These' +\n 'are cavity-nesting birds and a pair of eastern bluebirds will raise 2-3 broods annually, with 2-8 light blue' +\n\t\t\t 'or whitish eggs per brood.
                                      ' +\n\t\t\t '
                                      ' +\n\t\t\t '
                                      ' +\n '

                                      Eastern bluebirds can be very vocal in flocks.' +\n 'Their calls include a rapid, mid-tone chatter and several long dropping pitch calls.

                                      ' +\n\t\t\t'

                                      Source: ' +\n\t\t\t'a href=\"https://en.wikipedia.org/wiki/Eastern_bluebird\" target=\"_blank\">https://en.wikipedia.org/wiki/Eastern_bluebird' +\n\t\t\t'

                                      ' +\n\t\t\t'
                                      ' +\n\t\t '
                                      ',\n //Raise beforeRender event\n beforeOpen: onBeforeRender\n });\n //Render initialized Tooltip component\n tooltip.appendTo('#content');\n\n //beforRender event handler for Tooltip\n function onBeforeRender() {\n var htmlcontent = document.getElementById('democontent');\n htmlcontent.style.display = 'block';\n tooltip.content = htmlcontent;\n }\n\n //Attached scroll and click event listners in right pane\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('click', onClick);\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tooltip.close();\n }\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (args.target.parentNode.className === 'e-tab-text') {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tooltip.close();\n }\n }\n }\n\n"} \ No newline at end of file diff --git a/src/tooltip/html-template.html b/src/tooltip/html-template.html index a69a2f86..57154227 100644 --- a/src/tooltip/html-template.html +++ b/src/tooltip/html-template.html @@ -50,4 +50,8 @@ #democontent a { color: #62e0f7; } + + .bootstrap4 .e-tooltip-template-css { + filter: none; + } \ No newline at end of file diff --git a/src/tooltip/menu-stack.json b/src/tooltip/menu-stack.json index 9bcf79da..8e192016 100644 --- a/src/tooltip/menu-stack.json +++ b/src/tooltip/menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * menu sample\n */\n\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Wireless & networks',\n overflow: 'Hide',\n tooltipText: 'Wireless'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Device',\n overflow: 'Hide',\n tooltipText: 'Device'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Personal',\n overflow: 'Hide',\n tooltipText: 'Personal'\n }\n ],\n width: 390\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar-menu');\n\n //Initialize Tooltip component\n var tip = new ej.popups.Tooltip({\n //Set tooltip target\n target: '#toolbar-menu button',\n //Raise beforeRender event\n beforeRender: onBeforeRender,\n //Set tooltip width\n width: 170,\n //Set tooltip cssClass\n cssClass: 'e-tooltip-menu-settings',\n //Set tooltip open mode\n opensOn: 'Click'\n });\n //Render initialized Tooltip component\n tip.appendTo('#tooltip-menu');\n\n //Define an array of JSON data\n var data1 = [\n { Name: 'WI-FI', id: '1', icon: 'wifi' },\n { Name: 'Bluetooth', id: '2', icon: 'bluetooth' },\n { Name: 'SIM cards', id: '3', icon: 'sim' }\n ];\n var data2 = [\n { Name: 'Display', icon: 'display' },\n { Name: 'Sound', icon: 'sound' },\n { Name: 'Battery', icon: 'battery' },\n { Name: 'Users', icon: 'user' }\n ];\n var data3 = [\n { Name: 'Location', icon: 'location' },\n { Name: 'Security', icon: 'security' },\n { Name: 'Language', icon: 'language' }\n ];\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n //Map appropriate columns to fields property\n fields: { text: 'Name', iconCss: 'icon' },\n //Set true to show icons\n showIcon: true\n });\n\n var listObjects = [data1, data2, data3];\n //beforRender event handler for Tooltip\n function onBeforeRender(args) {\n var data = [\n { title: 'Wireless' },\n { title: 'Device' },\n { title: 'Personal' }\n ];\n for (var i = 0; i < data.length; i++) {\n if (data[i].title === args.target.parentElement.getAttribute('title')) {\n var list = document.createElement('div');\n list.id = 'tooltipMenu-list';\n listObj.dataSource = listObjects[i];\n listObj.appendTo(list);\n tip.content = list;\n }\n }\n }\n\n //Attached scroll and click event listners in right pane\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('click', onClick);\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (\n !args.target.parentNode.parentNode.classList.contains('e-toolbar-item')\n ) {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tip.close();\n }\n }\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tip.close();\n }\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}/**\n * menu sample\n */\n\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Wireless & networks',\n overflow: 'Hide',\n tooltipText: 'Wireless'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Device',\n overflow: 'Hide',\n tooltipText: 'Device'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons',\n text: 'Personal',\n overflow: 'Hide',\n tooltipText: 'Personal'\n }\n ],\n width: 390\n });\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar-menu');\n\n //Initialize Tooltip component\n var tip = new ej.popups.Tooltip({\n //Set tooltip target\n target: '#toolbar-menu button',\n //Raise beforeRender event\n beforeRender: onBeforeRender,\n //Set tooltip width\n width: 170,\n //Set tooltip cssClass\n cssClass: 'e-tooltip-menu-settings',\n //Set tooltip open mode\n opensOn: 'Click'\n });\n //Render initialized Tooltip component\n tip.appendTo('#tooltip-menu');\n\n //Define an array of JSON data\n var data1 = [\n { Name: 'WI-FI', id: '1', icon: 'wifi' },\n { Name: 'Bluetooth', id: '2', icon: 'bluetooth' },\n { Name: 'SIM cards', id: '3', icon: 'sim' }\n ];\n var data2 = [\n { Name: 'Display', icon: 'display' },\n { Name: 'Sound', icon: 'sound' },\n { Name: 'Battery', icon: 'battery' },\n { Name: 'Users', icon: 'user' }\n ];\n var data3 = [\n { Name: 'Location', icon: 'location' },\n { Name: 'Security', icon: 'security' },\n { Name: 'Language', icon: 'language' }\n ];\n\n //Initialize ListView component\n var listObj = new ej.lists.ListView({\n //Map appropriate columns to fields property\n fields: { text: 'Name', iconCss: 'icon' },\n //Set true to show icons\n showIcon: true\n });\n\n var listObjects = [data1, data2, data3];\n //beforRender event handler for Tooltip\n function onBeforeRender(args) {\n var data = [\n { title: 'Wireless' },\n { title: 'Device' },\n { title: 'Personal' }\n ];\n for (var i = 0; i < data.length; i++) {\n if (data[i].title === args.target.parentElement.getAttribute('title')) {\n var list = document.createElement('div');\n list.id = 'tooltipMenu-list';\n listObj.dataSource = listObjects[i];\n listObj.appendTo(list);\n tip.content = list;\n }\n }\n }\n\n //Attached scroll and click event listners in right pane\n if (document.getElementById('right-pane')) {\n document.getElementById('right-pane').addEventListener('click', onClick);\n document.getElementById('right-pane').addEventListener('scroll', onScroll);\n }\n\n //click event handler to close Tooltip while navigating to other tabs in right pane\n function onClick(args) {\n if (\n !args.target.parentNode.parentNode.classList.contains('e-toolbar-item')\n ) {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tip.close();\n }\n }\n }\n\n //scroll event handler to close Tooltip while perfomring page scroll\n function onScroll() {\n if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {\n tip.close();\n }\n }\n\n"} \ No newline at end of file diff --git a/src/tooltip/menu.html b/src/tooltip/menu.html index 5bfa0dd3..a40d9798 100644 --- a/src/tooltip/menu.html +++ b/src/tooltip/menu.html @@ -166,4 +166,16 @@ #tooltipMenu-list .language:before { content: "\e710"; } + + .bootstrap4 .e-tooltip-menu-settings.e-tooltip-wrap.e-popup { + border-color: rgba(0, 0, 0, .15); + } + + .bootstrap4 .e-tooltip-menu-settings.e-tooltip-wrap.e-popup .e-listview { + border: 0; + } + + .bootstrap4 .e-tooltip-menu-settings.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top { + border-bottom: 6px solid rgba(0, 0, 0, .15); + } \ No newline at end of file diff --git a/src/tooltip/sample.json b/src/tooltip/sample.json index 94941b14..dad4b274 100644 --- a/src/tooltip/sample.json +++ b/src/tooltip/sample.json @@ -72,19 +72,19 @@ "url": "menu", "name": "Tooltip Menu", "category": "Tooltip", - "description": "Demo of Essential JS 2 Tooltip control customization to look like a menu." + "description": "Demo of Essential JS 2 Tooltip control customization to look like a menu using toolbar and listview controls." }, { "url": "html-template", "name": "HTML Template", "category": "Tooltip", - "description": "Demo of Essential JS 2 Tooltip control customization as an HTML page using HTML tags and CSS." + "description": "Demo of Essential JS 2 Tooltip control customization as an HTML page using HTML tags to display a template content." }, { "url": "api", "name": "API", "category": "Tooltip", - "description": "Essential JS 2 Tooltip control demo showcasing the most frequently used API combinations, like content, height, width, open, sticky mode, and more." + "description": "Essential JS 2 Tooltip control demo showcasing the most frequently used API combinations, like content, height, width, open, sticky mode, and more." } ] -} \ No newline at end of file +} diff --git a/src/tooltip/smart-position-stack.json b/src/tooltip/smart-position-stack.json index d959e8c7..a8d08743 100644 --- a/src/tooltip/smart-position-stack.json +++ b/src/tooltip/smart-position-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n\n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip smart position sample\n */\n\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Drag me anywhere, to start walking with me !!!',\n\n //Set tooltip offsetX\n offsetX: -15,\n\n //Set tooltip target\n target: '#demoSmart',\n\n //Set tooltip animation\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#targetContainer');\n\n var ele = document.getElementById('demoSmart');\n var drag = new ej.base.Draggable(ele, {\n clone: false,\n dragArea: '#targetContainer',\n drag: function (args) {\n if (args.element.getAttribute('data-tooltip-id') === null) {\n tooltip.open(args.element);\n }\n else {\n tooltip.refresh(args.element);\n }\n },\n dragStart: function (args) {\n if (args.element.getAttribute('data-tooltip-id') !== null) {\n return;\n }\n tooltip.open(args.element);\n },\n dragStop: function (args) {\n tooltip.close();\n }\n });\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n\n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip smart position sample\n */\n\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip content\n content: 'Drag me anywhere, to start walking with me !!!',\n\n //Set tooltip offsetX\n offsetX: -15,\n\n //Set tooltip target\n target: '#demoSmart',\n\n //Set tooltip animation\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#targetContainer');\n\n var ele = document.getElementById('demoSmart');\n var drag = new ej.base.Draggable(ele, {\n clone: false,\n dragArea: '#targetContainer',\n drag: function (args) {\n if (args.element.getAttribute('data-tooltip-id') === null) {\n tooltip.open(args.element);\n }\n else {\n tooltip.refresh(args.element);\n }\n },\n dragStart: function (args) {\n if (args.element.getAttribute('data-tooltip-id') !== null) {\n return;\n }\n tooltip.open(args.element);\n },\n dragStop: function (args) {\n tooltip.close();\n }\n });\n"} \ No newline at end of file diff --git a/src/tooltip/template-stack.json b/src/tooltip/template-stack.json index 38dd8f4f..c69594c4 100644 --- a/src/tooltip/template-stack.json +++ b/src/tooltip/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip template sample\n */\n\n\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy'\n },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste'\n },\n {\n type: 'Separator'\n },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold'\n },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline'\n },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic'\n }\n ]\n });\n\n //Render initialized Toolbar component\n toolbarObj.appendTo('#Toolbar');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip target\n target: '#Toolbar [title]',\n\n //Raise beforeRender event\n beforeRender: onBeforeRender,\n\n //Set true to show Tip pointer\n showTipPointer: false,\n\n //Set tooltip offsetX\n offsetX: 70,\n\n //Set tooltip width\n width: 170\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n\n\n/**\n * Tooltip content customization.\n */\n\nfunction onBeforeRender(args) {\n var data = [\n { title: 'Bold', name: 'Bold (Ctrl+B)', description: 'Makes your text bold.' },\n { title: 'Underline', name: 'Underline (Ctrl+U)', description: 'Underline your text.' },\n { title: 'Italic', name: 'Italic (Ctrl+I)', description: 'Italicize your text.' },\n {\n title: 'Cut', name: 'Cut (Ctrl+X)',\n description: 'Remove the selection and put it on the Clipboard so you can paste it somewhere else.'\n },\n {\n title: 'Copy', name: 'Copy (Ctrl+C)',\n description: 'Put a copy of a selection on the Clipboard so you can paste it somewhere else.'\n },\n { title: 'Paste', name: 'Paste (Ctrl+V)', description: 'Add content on the Clipboard to your document.' }\n ];\n for (var i = 0; i < data.length; i++) {\n if (data[i].title === args.target.getAttribute('title')) {\n this.content = '
                                      ' + data[i].name + '

                                      ' + data[i].description + '

                                      ';\n }\n }\n}"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}/**\n * Tooltip template sample\n */\n\n\n\n //Initialize Toolbar component\n var toolbarObj = new ej.navigations.Toolbar({\n items: [\n {\n prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut'\n },\n {\n prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy'\n },\n {\n prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste'\n },\n {\n type: 'Separator'\n },\n {\n prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold'\n },\n {\n prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline'\n },\n {\n prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic'\n }\n ]\n });\n\n //Render initialized Toolbar component\n toolbarObj.appendTo('#Toolbar');\n\n //Initialize Tooltip component\n var tooltip = new ej.popups.Tooltip({\n\n //Set tooltip target\n target: '#Toolbar [title]',\n\n //Raise beforeRender event\n beforeRender: onBeforeRender,\n\n //Set true to show Tip pointer\n showTipPointer: false,\n\n //Set tooltip offsetX\n offsetX: 70,\n\n //Set tooltip width\n width: 170\n\n });\n\n //Render initialized Tooltip component\n tooltip.appendTo('#Tooltip');\n\n\n\n/**\n * Tooltip content customization.\n */\n\nfunction onBeforeRender(args) {\n var data = [\n { title: 'Bold', name: 'Bold (Ctrl+B)', description: 'Makes your text bold.' },\n { title: 'Underline', name: 'Underline (Ctrl+U)', description: 'Underline your text.' },\n { title: 'Italic', name: 'Italic (Ctrl+I)', description: 'Italicize your text.' },\n {\n title: 'Cut', name: 'Cut (Ctrl+X)',\n description: 'Remove the selection and put it on the Clipboard so you can paste it somewhere else.'\n },\n {\n title: 'Copy', name: 'Copy (Ctrl+C)',\n description: 'Put a copy of a selection on the Clipboard so you can paste it somewhere else.'\n },\n { title: 'Paste', name: 'Paste (Ctrl+V)', description: 'Add content on the Clipboard to your document.' }\n ];\n for (var i = 0; i < data.length; i++) {\n if (data[i].title === args.target.getAttribute('title')) {\n this.content = '
                                      ' + data[i].name + '

                                      ' + data[i].description + '

                                      ';\n }\n }\n}"} \ No newline at end of file diff --git a/src/tree-grid/aggregate.custom-stack.json b/src/tree-grid/aggregate.custom-stack.json index 82a3f331..f3da0665 100644 --- a/src/tree-grid/aggregate.custom-stack.json +++ b/src/tree-grid/aggregate.custom-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}var value = 'Frozen seafood';\nvar listObj;\nvar foods = [\n { food: 'Frozen seafood' },\n { food: 'Dairy' },\n { food: 'Edible' },\n { food: 'Solid Crystals' },\n];\n\n var customAggregateFn = function (data) {\n var sampleData = ej.grids.getObject('result', data);\n var countLength;\n countLength = 0;\n sampleData.filter(function (item) {\n var data = ej.grids.getObject('category', item);\n if (data === value) {\n countLength++;\n }\n });\n return countLength;\n };\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.summaryData,\n childMapping: 'subtasks',\n width: 'auto',\n height: 400,\n treeColumnIndex: 1,\n dataBound: function () {\n if (!ej.base.isNullOrUndefined(listObj)) {\n listObj.destroy();\n }\n listObj = new ej.dropdowns.DropDownList({\n dataSource: foods,\n fields: { value: 'food' },\n placeholder: 'Select a Category',\n width: '125px',\n value: value,\n change: function () {\n setTimeout(function () {\n value = listObj.value.toString();\n treeGridObj.refresh();\n }, 300);\n }\n });\n listObj.appendTo('#customers');\n },\n columns: [\n { field: 'ID', headerText: 'S.No', width: 60, textAlign: 'Right' },\n { field: 'Name', headerText: 'Shipment Name', width: 170 },\n { field: 'category', headerText: 'Category', width: 180 },\n { field: 'units', headerText: 'Unit', width: 60 },\n { field: 'unitPrice', headerText: 'Unit Price($)', width: 85, format: 'C0', type: 'number', textAlign: 'Right' },\n { field: 'price', headerText: 'Price($)', width: 90, format: 'C', textAlign: 'Right', type: 'number' },\n ],\n aggregates: [{\n showChildSummary: false,\n columns: [{\n type: 'Custom',\n customAggregate: customAggregateFn,\n columnName: 'category',\n format: 'C2',\n footerTemplate: 'Count of : ${Custom}'\n }]\n }],\n actionFailure: function (args){\n\n }\n });\n\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}var value = 'Frozen seafood';\nvar listObj;\nvar foods = [\n { food: 'Frozen seafood' },\n { food: 'Dairy' },\n { food: 'Edible' },\n { food: 'Solid Crystals' },\n];\n\n var customAggregateFn = function (data) {\n var sampleData = ej.grids.getObject('result', data);\n var countLength;\n countLength = 0;\n sampleData.filter(function (item) {\n var data = ej.grids.getObject('category', item);\n if (data === value) {\n countLength++;\n }\n });\n return countLength;\n };\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.summaryData,\n childMapping: 'subtasks',\n width: 'auto',\n height: 400,\n treeColumnIndex: 1,\n dataBound: function () {\n if (!ej.base.isNullOrUndefined(listObj)) {\n listObj.destroy();\n }\n listObj = new ej.dropdowns.DropDownList({\n dataSource: foods,\n fields: { value: 'food' },\n placeholder: 'Select a Category',\n width: '125px',\n value: value,\n change: function () {\n setTimeout(function () {\n value = listObj.value.toString();\n treeGridObj.refresh();\n }, 300);\n }\n });\n listObj.appendTo('#customers');\n },\n columns: [\n { field: 'ID', headerText: 'S.No', width: 60, textAlign: 'Right' },\n { field: 'Name', headerText: 'Shipment Name', width: 170 },\n { field: 'category', headerText: 'Category', width: 180 },\n { field: 'units', headerText: 'Unit', width: 60 },\n { field: 'unitPrice', headerText: 'Unit Price($)', width: 85, format: 'C0', type: 'number', textAlign: 'Right' },\n { field: 'price', headerText: 'Price($)', width: 90, format: 'C', textAlign: 'Right', type: 'number' },\n ],\n aggregates: [{\n showChildSummary: false,\n columns: [{\n type: 'Custom',\n customAggregate: customAggregateFn,\n columnName: 'category',\n format: 'C2',\n footerTemplate: 'Count of : ${Custom}'\n }]\n }],\n actionFailure: function (args){\n\n }\n });\n\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/aggregate.custom.html b/src/tree-grid/aggregate.custom.html index 73163ea6..77510b4a 100644 --- a/src/tree-grid/aggregate.custom.html +++ b/src/tree-grid/aggregate.custom.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates custom aggregate functionality of the TreeGrid. In this sample, the custom aggregate value for the columns “Category” is displayed in column footer with dropdown to display the count of selected category name.

                                      @@ -33,6 +33,7 @@ More information about aggregate can be found in this documentation section.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/aggregate.default-stack.json b/src/tree-grid/aggregate.default-stack.json index c258142e..3cb7fbc9 100644 --- a/src/tree-grid/aggregate.default-stack.json +++ b/src/tree-grid/aggregate.default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n Show Child Summary\n \n \n
                                      \n \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.summaryRowData,\n childMapping: 'children',\n treeColumnIndex: 1,\n height: 400,\n columns: [\n { field: 'FreightID', headerText: 'Freight ID', width: 130 },\n { field: 'FreightName', width: 200, headerText: 'Freight Name' },\n { field: 'UnitWeight', headerText: 'Weight Per Unit', type: 'number', width: 140, textAlign: 'Right' },\n { field: 'TotalUnits', headerText: 'Total Units', type: 'number', width: 140, textAlign: 'Right' }\n ],\n aggregates: [{\n columns: [\n {\n type: 'Max',\n field: 'UnitWeight',\n columnName: 'UnitWeight',\n footerTemplate: 'Maximum: ${Max}'\n },\n {\n type: 'Min',\n field: 'TotalUnits',\n columnName: 'TotalUnits',\n footerTemplate: 'Minimum: ${Min}'\n }]\n }]\n });\n treeGridObj.appendTo('#TreeGrid');\n var checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n function onChange(args) {\n if (args.checked) {\n treeGridObj.aggregates[0].showChildSummary = true;\n treeGridObj.refresh();\n }\n else {\n treeGridObj.aggregates[0].showChildSummary = false;\n treeGridObj.refresh();\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n Show Child Summary\n \n \n
                                      \n \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.summaryRowData,\n childMapping: 'children',\n treeColumnIndex: 1,\n height: 400,\n columns: [\n { field: 'FreightID', headerText: 'Freight ID', width: 130 },\n { field: 'FreightName', width: 200, headerText: 'Freight Name' },\n { field: 'UnitWeight', headerText: 'Weight Per Unit', type: 'number', width: 140, textAlign: 'Right' },\n { field: 'TotalUnits', headerText: 'Total Units', type: 'number', width: 140, textAlign: 'Right' }\n ],\n aggregates: [{\n columns: [\n {\n type: 'Max',\n field: 'UnitWeight',\n columnName: 'UnitWeight',\n footerTemplate: 'Maximum: ${Max}'\n },\n {\n type: 'Min',\n field: 'TotalUnits',\n columnName: 'TotalUnits',\n footerTemplate: 'Minimum: ${Min}'\n }]\n }]\n });\n treeGridObj.appendTo('#TreeGrid');\n var checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n function onChange(args) {\n if (args.checked) {\n treeGridObj.aggregates[0].showChildSummary = true;\n treeGridObj.refresh();\n }\n else {\n treeGridObj.aggregates[0].showChildSummary = false;\n treeGridObj.refresh();\n }\n }\n"} \ No newline at end of file diff --git a/src/tree-grid/aggregate.default.html b/src/tree-grid/aggregate.default.html index 2c10f530..70664a03 100644 --- a/src/tree-grid/aggregate.default.html +++ b/src/tree-grid/aggregate.default.html @@ -17,7 +17,7 @@
                                      - +

                                      This sample demonstrates aggregate functionality of the TreeGrid. In this sample, the aggregate value for the columns “Total Units”, “Total Cost” and “Unit Weight” is displayed in column footer and provide an option to show child summary.

                                      @@ -51,4 +51,5 @@

                                      More information about aggregate can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/auto.wrap-stack.json b/src/tree-grid/auto.wrap-stack.json index 19709ae5..cbe54bc8 100644 --- a/src/tree-grid/auto.wrap-stack.json +++ b/src/tree-grid/auto.wrap-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.textWrapData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n allowTextWrap: true,\n pageSettings: { pageSize : 8},\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'TaskName', width: 94 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', textAlign: 'Right', width: 90},\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 },\n { field: 'priority', headerText: 'Priority', width: 90 },\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.textWrapData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n allowTextWrap: true,\n pageSettings: { pageSize : 8},\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'TaskName', width: 94 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', textAlign: 'Right', width: 90},\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 },\n { field: 'priority', headerText: 'Priority', width: 90 },\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/auto.wrap.html b/src/tree-grid/auto.wrap.html index 4003457c..1a57f27c 100644 --- a/src/tree-grid/auto.wrap.html +++ b/src/tree-grid/auto.wrap.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid component with the auto wrap column cell feature. In this sample, you can see that Task Name column cell content exceeded the available width hence it has been wrapped into multiple lines. @@ -22,3 +22,4 @@ More information about Auto wrap cells can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/cell.edit.type-stack.json b/src/tree-grid/cell.edit.type-stack.json index 7400ee34..18a050a5 100644 --- a/src/tree-grid/cell.edit.type-stack.json +++ b/src/tree-grid/cell.edit.type-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n showDeleteConfirmDialog: true,\n mode: 'Row',\n newRowPosition: 'Above'\n },\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 70\n },\n {\n field: 'taskName', headerText: 'Task Name', editType: 'stringedit',\n validationRules: {required: true}, width: 170\n },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 180,\n editType: 'datetimepickeredit', edit: { params: { format: 'M/d/y hh:mm a' }},\n format: {format: 'M/d/y hh:mm a', type: 'dateTime'}, validationRules: { date: true }\n },\n {\n field: 'approved', headerText: 'Approved', width: 80, editType: 'booleanedit',\n type: 'boolean', displayAsCheckBox: true\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 85,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n { field: 'priority', headerText: 'Priority', width: 95, editType: 'dropdownedit', validationRules: { required: true } }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n showDeleteConfirmDialog: true,\n mode: 'Row',\n newRowPosition: 'Above'\n },\n toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 70\n },\n {\n field: 'taskName', headerText: 'Task Name', editType: 'stringedit',\n validationRules: {required: true}, width: 170\n },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 180,\n editType: 'datetimepickeredit', edit: { params: { format: 'M/d/y hh:mm a' }},\n format: {format: 'M/d/y hh:mm a', type: 'dateTime'}, validationRules: { date: true }\n },\n {\n field: 'approved', headerText: 'Approved', width: 80, editType: 'booleanedit',\n type: 'boolean', displayAsCheckBox: true\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 85,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n { field: 'priority', headerText: 'Priority', width: 95, editType: 'dropdownedit', validationRules: { required: true } }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/cell.edit.type.html b/src/tree-grid/cell.edit.type.html index 9828690d..f7d3c1a1 100644 --- a/src/tree-grid/cell.edit.type.html +++ b/src/tree-grid/cell.edit.type.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the supported cell edit types of TreeGrid columns. The list of cell edit types are as follows,

                                      @@ -36,4 +36,5 @@

                                      More information about Cell Edit types can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/cellalignment-stack.json b/src/tree-grid/cellalignment-stack.json index 7807f85c..3dde34d2 100644 --- a/src/tree-grid/cellalignment-stack.json +++ b/src/tree-grid/cellalignment-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Cell Alignment
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' }\n\n ];\n var alignment = [\n { id: 'Right', name: 'Right' },\n { id: 'Left', name: 'Left' },\n { id: 'Center', name: 'Center' },\n { id: 'Justify', name: 'Justify' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '100px',\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var alignment = treeGridObj.getColumnByField(columnName).textAlign;\n dropDownAlign.value = alignment;\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownAlign = new ej.dropdowns.DropDownList({\n dataSource: alignment,\n popupWidth: '100px',\n fields: { text: 'name', value: 'id' },\n value: 'Right',\n change: function (e) {\n var alignment = e.value;\n var columnName = dropDownColumn.value;\n treeGridObj.getColumnByField(columnName).textAlign = alignment;\n treeGridObj.refreshColumns();\n }\n });\n dropDownAlign.appendTo('#alignment');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Cell Alignment
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' }\n\n ];\n var alignment = [\n { id: 'Right', name: 'Right' },\n { id: 'Left', name: 'Left' },\n { id: 'Center', name: 'Center' },\n { id: 'Justify', name: 'Justify' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '100px',\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var alignment = treeGridObj.getColumnByField(columnName).textAlign;\n dropDownAlign.value = alignment;\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownAlign = new ej.dropdowns.DropDownList({\n dataSource: alignment,\n popupWidth: '100px',\n fields: { text: 'name', value: 'id' },\n value: 'Right',\n change: function (e) {\n var alignment = e.value;\n var columnName = dropDownColumn.value;\n treeGridObj.getColumnByField(columnName).textAlign = alignment;\n treeGridObj.refreshColumns();\n }\n });\n dropDownAlign.appendTo('#alignment');\n"} \ No newline at end of file diff --git a/src/tree-grid/cellalignment.html b/src/tree-grid/cellalignment.html index f1c945ca..594b4cfa 100644 --- a/src/tree-grid/cellalignment.html +++ b/src/tree-grid/cellalignment.html @@ -29,7 +29,7 @@
                                      - +

                                      This sample demonstrates the text alignment functionalities of the treegrid columns.

                                      @@ -57,5 +57,5 @@ More information about Cell Alignment can be found in this documentation section.

                                      - + diff --git a/src/tree-grid/checkbox-column-stack.json b/src/tree-grid/checkbox-column-stack.json new file mode 100644 index 00000000..62e84ecc --- /dev/null +++ b/src/tree-grid/checkbox-column-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: '410',\n autoCheckHierarchy: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 60, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 150, textAlign: 'Left', showCheckbox: true },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/checkbox-column.html b/src/tree-grid/checkbox-column.html new file mode 100644 index 00000000..3249c6cf --- /dev/null +++ b/src/tree-grid/checkbox-column.html @@ -0,0 +1,27 @@ +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      + +
                                      +

                                      This sample demonstrates the checkbox column selection functionality of TreeGrid. Click on any parent record checkbox then the child record checkboxes will get selected and + parent record checkbox will get selected while checking all of its child items.

                                      +
                                      + +
                                      +

                                      + The TreeGrid component can be rendered with checkbox on existing column and also this + can be enabled by showCheckbox property as true in columns API.

                                      +

                                      + For hierarchy selection between the records, we need to enable the autoCheckHierarchy property. +

                                      +

                                      + While using TreeGrid in a touch device, you have an option to select the checkboxes by tapping on the checkbox. +

                                      +

                                      + More information on the checkbox selection configuration can be found in this documentation section. +

                                      +
                                      + \ No newline at end of file diff --git a/src/tree-grid/checkbox-column.js b/src/tree-grid/checkbox-column.js new file mode 100644 index 00000000..f8257992 --- /dev/null +++ b/src/tree-grid/checkbox-column.js @@ -0,0 +1,18 @@ +this.default = function () { + var treeGridObj = new ej.treegrid.TreeGrid({ + dataSource: window.sampleData, + childMapping: 'subtasks', + treeColumnIndex: 1, + height: '410', + autoCheckHierarchy: true, + columns: [ + { field: 'taskID', headerText: 'Task ID', width: 60, textAlign: 'Right' }, + { field: 'taskName', headerText: 'Task Name', width: 150, textAlign: 'Left', showCheckbox: true }, + { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' }, + { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' }, + { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }, + { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }, + ] + }); + treeGridObj.appendTo('#TreeGrid'); +}; \ No newline at end of file diff --git a/src/tree-grid/checkbox-selection-stack.json b/src/tree-grid/checkbox-selection-stack.json new file mode 100644 index 00000000..73d5bae5 --- /dev/null +++ b/src/tree-grid/checkbox-selection-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowSelection: true,\n selectionSettings: { persistSelection: true },\n treeColumnIndex: 2,\n allowPaging: true,\n columns: [\n { type: 'checkbox', width: 50 },\n { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/checkbox-selection.html b/src/tree-grid/checkbox-selection.html new file mode 100644 index 00000000..122e8efe --- /dev/null +++ b/src/tree-grid/checkbox-selection.html @@ -0,0 +1,32 @@ +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      + +
                                      +

                                      This sample demonstrates the selection functionality of the TreeGrid using checkbox selection, To select and unselect all rows use header checkbox. + To select/unselect particular row, click the desired row.

                                      +
                                      + +
                                      +

                                      + TreeGrid mutliple selection can be achieved with the help of checkbox in each row. To render checkbox in each treegrid row, you need + to define column type as checkbox using columns->type property. +

                                      +

                                      + Selection can be persisted on all the operations using + selectionSettings-> persistSelection property. For persisting selection on the TreeGrid, any one of the column should be defined as a + primary key using + columns->isPrimaryKey property. +

                                      +

                                      + In this demo, TreeGrid mutliple selection has been enabled with the selection persistance. +

                                      +

                                      + More information on the TreeGrid instantiation can be found in + documentation section. +

                                      +
                                      + \ No newline at end of file diff --git a/src/tree-grid/checkbox-selection.js b/src/tree-grid/checkbox-selection.js new file mode 100644 index 00000000..c1b58b95 --- /dev/null +++ b/src/tree-grid/checkbox-selection.js @@ -0,0 +1,19 @@ +this.default = function () { + var treeGridObj = new ej.treegrid.TreeGrid({ + dataSource: window.sampleData, + childMapping: 'subtasks', + allowSelection: true, + selectionSettings: { persistSelection: true }, + treeColumnIndex: 2, + allowPaging: true, + columns: [ + { type: 'checkbox', width: 50 }, + { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 70, textAlign: 'Right' }, + { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' }, + { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }, + { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }, + { field: 'priority', headerText: 'Priority', width: 90 } + ] + }); + treeGridObj.appendTo('#TreeGrid'); +}; \ No newline at end of file diff --git a/src/tree-grid/columnformatting-stack.json b/src/tree-grid/columnformatting-stack.json index 7fc029c8..24d310ca 100644 --- a/src/tree-grid/columnformatting-stack.json +++ b/src/tree-grid/columnformatting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Format
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'price', name: 'Price' },\n { id: 'orderDate', name: 'Order Date' }\n ];\n var priceFormat = [\n { id: 'n2', format: 'n2' },\n { id: 'n3', format: 'n3' },\n { id: 'c2', format: 'c2' },\n { id: 'c3', format: 'c3' },\n { id: 'p2', format: 'p2' },\n { id: 'p3', format: 'p3' }\n ];\n var dateFormat = [\n { id: 'M/d/yyyy', format: 'Short Date' },\n { id: 'dddd, MMMM dd, yyyy', format: 'Long Date' },\n { id: 'MMMM, yyyy', format: 'Month/Year' },\n { id: 'MMMM, dd', format: 'Month/Day' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.formatData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 110 },\n { field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 210 },\n { field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 190,\n format: { format: 'dd/MM/yyyy', type: 'date' } },\n { field: 'price', headerText: 'Price', textAlign: 'Right', width: 120, format: 'c2', type: 'number' },\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '100%',\n fields: { text: 'name', value: 'id' },\n value: 'price',\n change: function (e) {\n var columnName = e.value;\n if (columnName === 'price') {\n dropDownFormat.dataSource = priceFormat;\n }\n if (columnName === 'orderDate') {\n dropDownFormat.dataSource = dateFormat;\n }\n dropDownFormat.index = 0;\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownFormat = new ej.dropdowns.DropDownList({\n dataSource: priceFormat,\n popupWidth: '110px',\n fields: { text: 'format', value: 'id' },\n value: 'c2',\n change: function (e) {\n var formatval = e.value;\n var columnName = dropDownColumn.value;\n if (columnName === 'price') {\n treeGridObj.getColumnByField(columnName).format = formatval;\n }\n if (columnName === 'orderDate') {\n treeGridObj.getColumnByField(columnName).format = { format: formatval, type: 'date' };\n }\n treeGridObj.refreshColumns();\n }\n });\n dropDownFormat.appendTo('#format');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Format
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'price', name: 'Price' },\n { id: 'orderDate', name: 'Order Date' }\n ];\n var priceFormat = [\n { id: 'n2', format: 'n2' },\n { id: 'n3', format: 'n3' },\n { id: 'c2', format: 'c2' },\n { id: 'c3', format: 'c3' },\n { id: 'p2', format: 'p2' },\n { id: 'p3', format: 'p3' }\n ];\n var dateFormat = [\n { id: 'M/d/yyyy', format: 'Short Date' },\n { id: 'dddd, MMMM dd, yyyy', format: 'Long Date' },\n { id: 'MMMM, yyyy', format: 'Month/Year' },\n { id: 'MMMM, dd', format: 'Month/Day' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.formatData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n pageSettings: { pageCount: 5 },\n columns: [\n { field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 110 },\n { field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 210 },\n { field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 190,\n format: { format: 'dd/MM/yyyy', type: 'date' } },\n { field: 'price', headerText: 'Price', textAlign: 'Right', width: 120, format: 'c2', type: 'number' },\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '100%',\n fields: { text: 'name', value: 'id' },\n value: 'price',\n change: function (e) {\n var columnName = e.value;\n if (columnName === 'price') {\n dropDownFormat.dataSource = priceFormat;\n }\n if (columnName === 'orderDate') {\n dropDownFormat.dataSource = dateFormat;\n }\n dropDownFormat.index = 0;\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownFormat = new ej.dropdowns.DropDownList({\n dataSource: priceFormat,\n popupWidth: '110px',\n fields: { text: 'format', value: 'id' },\n value: 'c2',\n change: function (e) {\n var formatval = e.value;\n var columnName = dropDownColumn.value;\n if (columnName === 'price') {\n treeGridObj.getColumnByField(columnName).format = formatval;\n }\n if (columnName === 'orderDate') {\n treeGridObj.getColumnByField(columnName).format = { format: formatval, type: 'date' };\n }\n treeGridObj.refreshColumns();\n }\n });\n dropDownFormat.appendTo('#format');\n"} \ No newline at end of file diff --git a/src/tree-grid/columnformatting.html b/src/tree-grid/columnformatting.html index a6d0ca8f..17d28b0a 100644 --- a/src/tree-grid/columnformatting.html +++ b/src/tree-grid/columnformatting.html @@ -29,7 +29,7 @@
                                      - +

                                      This sample demonstrates the way of displaying the content of TreeGrid columns based on the specified format. In this sample, format of columns can be changed dynamically through property panel.

                                      @@ -43,4 +43,4 @@ More information about Column Formatting can be found in this documentation section.

                                      - + diff --git a/src/tree-grid/columnmenu-stack.json b/src/tree-grid/columnmenu-stack.json index fd21611e..5f69b844 100644 --- a/src/tree-grid/columnmenu-stack.json +++ b/src/tree-grid/columnmenu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n allowResizing: true,\n filterSettings: { type: 'Menu' },\n allowSorting: true,\n showColumnMenu: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 110, },\n { field: 'taskName', headerText: 'Task Name', width: 190 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'approved', headerText: 'Approved', textAlign: 'Center', width: 140, type: 'boolean', displayAsCheckBox: true },\n { field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 140 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n allowResizing: true,\n filterSettings: { type: 'Menu' },\n allowSorting: true,\n showColumnMenu: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 110, },\n { field: 'taskName', headerText: 'Task Name', width: 190 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'approved', headerText: 'Approved', textAlign: 'Center', width: 140, type: 'boolean', displayAsCheckBox: true },\n { field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 140 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/columnmenu.html b/src/tree-grid/columnmenu.html index 822e3584..484ce2d2 100644 --- a/src/tree-grid/columnmenu.html +++ b/src/tree-grid/columnmenu.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the default functionalities of the Column Menu. Click on multiple icon of each column to open the column menu.

                                      @@ -36,6 +36,4 @@

                                      - - - + \ No newline at end of file diff --git a/src/tree-grid/columntemplate-stack.json b/src/tree-grid/columntemplate-stack.json index 210fd421..b0994a33 100644 --- a/src/tree-grid/columntemplate-stack.json +++ b/src/tree-grid/columntemplate-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n\n\n\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treegridObj = new ej.treegrid.TreeGrid({\n dataSource: window.textdata,\n childMapping: 'Children',\n treeColumnIndex: 0,\n rowDataBound: function (args) {\n var data = ej.grids.getObject('EmployeeID', args.data);\n var spkline = args.row.querySelector('#spkline' + data);\n var spkarea = args.row.querySelector('#spkarea' + data);\n var spkwl = args.row.querySelector('#spkwl' + data);\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px', load: sparkload,\n lineWidth: 2,\n valueType: 'Numeric',\n fill: '#3C78EF',\n dataSource: getSparkData('line', +data)\n });\n line.appendTo(spkline);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px', load: sparkload,\n type: 'Column',\n valueType: 'Numeric',\n fill: '#3C78EF',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', +data)\n });\n column.appendTo(spkarea);\n var winloss = new ej.charts.Sparkline({\n height: '50px',\n width: '150px', load: sparkload,\n type: 'WinLoss',\n valueType: 'Numeric',\n fill: '#3C78EF',\n tiePointColor: 'darkgray',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', +data)\n });\n winloss.appendTo(spkwl);\n },\n rowHeight: 83,\n columns: [\n { field: 'EmpID', headerText: 'Employee ID', width: 95 },\n { field: 'Name', headerText: 'Name', width: 110 },\n { field: 'DOB', headerText: 'DOB', width: 90, textAlign: 'Right', format: 'yMd' },\n {\n headerText: 'Tax per annum', textAlign: 'Center',\n template: '#columnTemplate1', width: 90\n },\n {\n headerText: 'One day index', textAlign: 'Center',\n template: '#columnTemplate2', width: 90\n },\n {\n headerText: 'Year GR', textAlign: 'Center',\n template: '#columnTemplate3', width: 120\n },\n ],\n width: 'auto',\n height: 359\n });\n treegridObj.appendTo('#TreeGrid');\n\nfunction sparkload (args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n}\nfunction getSparkData (type, count) {\n if (type === 'line') {\n return window.lineData[count];\n }\n else {\n return window.columnData[count];\n }\n}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n - + @@ -24,9 +25,10 @@
                                      +

                                      This sample demonstrates the usage of template columns in TreeGrid. - In this sample, we have shown chart controls in the Employee Image column. + In this sample, we have shown chart controls in the TreeGrid column.

                                      @@ -41,4 +43,5 @@

                                      More information about Column Template can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/columntemplate.js b/src/tree-grid/columntemplate.js index ee66d056..849a88f7 100644 --- a/src/tree-grid/columntemplate.js +++ b/src/tree-grid/columntemplate.js @@ -61,12 +61,14 @@ this.default = function () { height: 359 }); treegridObj.appendTo('#TreeGrid'); -}; +}; +// custom code start function sparkload (args) { var theme = location.hash.split('/')[1]; theme = theme ? theme : 'Material'; args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); -} +} +// custom code end function getSparkData (type, count) { if (type === 'line') { return window.lineData[count]; diff --git a/src/tree-grid/command-column-stack.json b/src/tree-grid/command-column-stack.json index df4b6321..4dca741e 100644 --- a/src/tree-grid/command-column-stack.json +++ b/src/tree-grid/command-column-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n mode: 'Row'\n },\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 80\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 200, validationRules: { required: true } },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true }\n },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n headerText: 'Manage Records', width: 130,\n commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },\n { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },\n { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },\n { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }]\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n mode: 'Row'\n },\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 80\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 200, validationRules: { required: true } },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true }\n },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n headerText: 'Manage Records', width: 130,\n commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },\n { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },\n { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },\n { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }]\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/command-column.html b/src/tree-grid/command-column.html index 93eb36b9..8ff3618a 100644 --- a/src/tree-grid/command-column.html +++ b/src/tree-grid/command-column.html @@ -3,6 +3,7 @@
                                      +

                                      This sample demonstrates CRUD operations in TreeGrid using command column. You can perform CRUD operations as follows, @@ -29,4 +30,5 @@


                                      More information on the command column configuration can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/conditional-formatting-stack.json b/src/tree-grid/conditional-formatting-stack.json index 27784676..638b4239 100644 --- a/src/tree-grid/conditional-formatting-stack.json +++ b/src/tree-grid/conditional-formatting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageSize: 11 },\n queryCellInfo: function (args) {\n\t\t\tvar span;\n if (args.cell.innerHTML === 'High') {\n var x = document.createElement('IMG');\n x.setAttribute('src', '//npmci.syncfusion.com/development/demos/src/tree-grid/images/__High.png');\n x.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(x);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Critical') {\n var y = document.createElement('IMG');\n y.setAttribute('src', '//npmci.syncfusion.com/development/demos/src/tree-grid/images/__Critical.png');\n y.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(y);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Low') {\n var z = document.createElement('IMG');\n z.setAttribute('src', '//npmci.syncfusion.com/development/demos/src/tree-grid/images/__Low.png');\n z.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(z);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Normal') {\n var a = document.createElement('IMG');\n a.setAttribute('src', '//npmci.syncfusion.com/development/demos/src/tree-grid/images/__Normal.png');\n a.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(a);\n args.cell.appendChild(span);\n }\n else if (+args.cell.innerHTML > 90 && +args.cell.innerHTML <= 100 && args.column.field === 'progress') {\n args.cell.setAttribute('style', 'background-color:#336c12;color:white;');\n }\n else if (+args.cell.innerHTML > 20 && args.column.field === 'progress') {\n args.cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');\n }\n },\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageSize: 11 },\n queryCellInfo: function (args) {\n\t\t\tvar span;\n if (args.cell.innerHTML === 'High') {\n var x = document.createElement('IMG');\n x.setAttribute('src', '//ej2.syncfusion.com/javascript/demos/src/tree-grid/images/__High.png');\n x.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(x);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Critical') {\n var y = document.createElement('IMG');\n y.setAttribute('src', '//ej2.syncfusion.com/javascript/demos/src/tree-grid/images/__Critical.png');\n y.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(y);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Low') {\n var z = document.createElement('IMG');\n z.setAttribute('src', '//ej2.syncfusion.com/javascript/demos/src/tree-grid/images/__Low.png');\n z.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(z);\n args.cell.appendChild(span);\n }\n else if (args.cell.innerHTML === 'Normal') {\n var a = document.createElement('IMG');\n a.setAttribute('src', '//ej2.syncfusion.com/javascript/demos/src/tree-grid/images/__Normal.png');\n a.setAttribute('height', '15px');\n span = document.createElement('span');\n span.innerHTML = args.cell.innerHTML;\n span.setAttribute('style', 'padding-left:7px;');\n args.cell.innerHTML = '';\n args.cell.appendChild(a);\n args.cell.appendChild(span);\n }\n else if (+args.cell.innerHTML > 90 && +args.cell.innerHTML <= 100 && args.column.field === 'progress') {\n args.cell.setAttribute('style', 'background-color:#336c12;color:white;');\n }\n else if (+args.cell.innerHTML > 20 && args.column.field === 'progress') {\n args.cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');\n }\n },\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/conditional-formatting.html b/src/tree-grid/conditional-formatting.html index 543305b3..e1dc3ee7 100644 --- a/src/tree-grid/conditional-formatting.html +++ b/src/tree-grid/conditional-formatting.html @@ -4,11 +4,7 @@
                                      - - +

                                      This samples demonstrates the way of customizing the cells by adding icons for Priority column and highlight the cells of Duration column based on certain condition using queryCellInfo event.

                                      @@ -23,3 +19,4 @@ In this demo, we have customized the column values by adding icons for Priority column and highlighted the Duration column based on certain condition using queryCellInfo event.

                                      + diff --git a/src/tree-grid/custom.contextmenu-stack.json b/src/tree-grid/custom.contextmenu-stack.json index 0cda811e..298b09d5 100644 --- a/src/tree-grid/custom.contextmenu-stack.json +++ b/src/tree-grid/custom.contextmenu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 380,\n contextMenuItems: [\n { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },\n { text: 'Expand the Row', target: '.e-content', id: 'expandrow' }\n ],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 80, textAlign: 'Right', editType: 'numericedit' },\n { field: 'taskName', headerText: 'Task Name', width: 210 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 100,\n editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'endDate', headerText: 'End Date', format: 'yMd', width: 100, editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right', editType: 'numericedit' },\n { field: 'progress', width: 80, headerText: 'Progress', textAlign: 'Right', editType: 'numericedit' },\n { field: 'priority', headerText: 'Priority', width: 90, editType: 'numericedit' }\n ],\n contextMenuOpen: function (arg) {\n var elem = arg.event.target;\n var uid = elem.closest('.e-row').getAttribute('data-uid');\n if (ej.base.isNullOrUndefined(ej.base.getValue('hasChildRecords', treeGridObj.grid.getRowObjectFromUID(uid).data))) {\n arg.cancel = true;\n }\n else {\n var flag = ej.base.getValue('expanded', treeGridObj.grid.getRowObjectFromUID(uid).data);\n var val = flag ? 'none' : 'block';\n document.querySelectorAll('li#expandrow')[0].setAttribute('style', 'display: ' + val + ';');\n val = !flag ? 'none' : 'block';\n document.querySelectorAll('li#collapserow')[0].setAttribute('style', 'display: ' + val + ';');\n }\n },\n contextMenuClick: function (args) {\n treeGridObj.getColumnByField('taskID');\n if (args.item.id === 'collapserow') {\n treeGridObj.collapseRow((treeGridObj.getSelectedRows()[0]), treeGridObj.getSelectedRecords()[0]);\n }\n else {\n treeGridObj.expandRow((treeGridObj.getSelectedRows()[0]), treeGridObj.getSelectedRecords()[0]);\n }\n }\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 380,\n contextMenuItems: [\n { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },\n { text: 'Expand the Row', target: '.e-content', id: 'expandrow' }\n ],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 80, textAlign: 'Right', editType: 'numericedit' },\n { field: 'taskName', headerText: 'Task Name', width: 210 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 100,\n editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'endDate', headerText: 'End Date', format: 'yMd', width: 100, editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right', editType: 'numericedit' },\n { field: 'progress', width: 80, headerText: 'Progress', textAlign: 'Right', editType: 'numericedit' },\n { field: 'priority', headerText: 'Priority', width: 90, editType: 'numericedit' }\n ],\n contextMenuOpen: function (arg) {\n var elem = arg.event.target;\n var uid = elem.closest('.e-row').getAttribute('data-uid');\n if (ej.base.isNullOrUndefined(ej.base.getValue('hasChildRecords', treeGridObj.grid.getRowObjectFromUID(uid).data))) {\n arg.cancel = true;\n }\n else {\n var flag = ej.base.getValue('expanded', treeGridObj.grid.getRowObjectFromUID(uid).data);\n var val = flag ? 'none' : 'block';\n document.querySelectorAll('li#expandrow')[0].setAttribute('style', 'display: ' + val + ';');\n val = !flag ? 'none' : 'block';\n document.querySelectorAll('li#collapserow')[0].setAttribute('style', 'display: ' + val + ';');\n }\n },\n contextMenuClick: function (args) {\n treeGridObj.getColumnByField('taskID');\n if (args.item.id === 'collapserow') {\n treeGridObj.collapseRow((treeGridObj.getSelectedRows()[0]), treeGridObj.getSelectedRecords()[0]);\n }\n else {\n treeGridObj.expandRow((treeGridObj.getSelectedRows()[0]), treeGridObj.getSelectedRecords()[0]);\n }\n }\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/custom.contextmenu.html b/src/tree-grid/custom.contextmenu.html index e6ef6734..57967e86 100644 --- a/src/tree-grid/custom.contextmenu.html +++ b/src/tree-grid/custom.contextmenu.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the usage of custom context menu in TreeGrid component. Right click anywhere on the TreeGrid to view custom context menu.

                                      @@ -22,4 +22,5 @@

                                      More information about Context Menu can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/data-source.js b/src/tree-grid/data-source.js index 3b43a3f3..30ce99e5 100644 --- a/src/tree-grid/data-source.js +++ b/src/tree-grid/data-source.js @@ -945,4 +945,51 @@ window.sortData = [ ] } +]; + +window.countries = [ + { name: 'USA', capital: 'Washington, D.C.', area: 9147590, population: 327892000, gdp: 2.2, timezone: 'UTC -5 to -10', rating: 5, unemployment: 3.9, coordinates: '37.0902° N, 95.7129° W', + states: [ + { name: 'Washington, D.C.', area: 184827, population: 693972, gdp: 4.7, timezone: 'UTC -5', unemployment: 4.3, coordinates: '38.9072° N, 77.0369° W' }, + { name: 'New York', area: 783.8, capital: 'Albany', population: 8175133, gdp: 1.9, timezone: 'UTC -5', unemployment: 3.9, coordinates: '40.7128° N, 74.0060° W' }, + { name: 'New Mexico', area: 315194, capital: 'Santa Fe', population: 2088070, gdp: 0.1, timezone: 'UTC -7', unemployment: 4.7, coordinates: '34.5199° N, 105.8701° W' }, + { name: 'Alaska', area: 1717856, capital: 'Juneau', population: 297832, gdp: -0.5, timezone: 'UTC -9', unemployment: 6.3, coordinates: '64.2008° N, 149.4937° W' } + ] + }, + { name: 'Greece', capital: 'Athens', area: 131957, population: 10783625, gdp: 1.5, timezone: 'UTC +2.0', rating: 3, unemployment: 20.8, coordinates: '39.0742° N, 21.8243° E', + states: [ + { name: 'Athens', area: 2929, population: 664046, gdp: 1, timezone: 'UTC +2.0', unemployment: 7.7, coordinates: '37.9838° N, 23.7275° E' }, + { name: 'Arcadia', capital: 'Tripoli', area: 28.83, population: 58799, gdp: 2.5, timezone: 'UTC +2.0', unemployment: 3.0, coordinates: '34.1397° N, 118.0353° W' }, + { name: 'Argolis', capital: 'Nafplio', area: 2154, population: 97044, gdp: 2.1, timezone: 'UTC +2.0', unemployment: 6.2, coordinates: '37.6525° N, 22.8582° E' } + ] + }, + { name: 'Germany', capital: 'Berlin', area: 357386, population: 82293457, gdp: 2.2, timezone: 'UTC +1.0', rating: 5, unemployment: 3.3, coordinates: '51.1657° N, 10.4515° E', + states: [ + { name: 'Berlin', area: 891.8, population: 3539234, gdp: 4.1, timezone: 'UTC +1.0', unemployment: 7.7, coordinates: '52.5200° N, 13.4050° E' }, + { name: 'Bavaria', capital: 'Munich', area: 70550, population: 12997204, gdp: 3.1, timezone: 'UTC +1.0', unemployment: 2.7, coordinates: '48.7904° N, 11.4979° E' }, + { name: 'Saxony', capital: 'Dresden', area: 18416, population: 4081308, gdp: 3.8, timezone: 'UTC +1.0', unemployment: 6.2, coordinates: '51.1045° N, 13.2017° E' } + ] + }, + { name: 'Bangladesh', capital: 'Dhaka', area: 147570, population: 185584811, gdp: 7.3, timezone: 'UTC +6.0', rating: 3, unemployment: 4.3, coordinates: '23.6850° N, 90.3563° E', + states: [ + { name: 'Dhaka', area: 306.4, population: 10356500, gdp: 7.28, timezone: 'UTC +6.0', unemployment: 7.4, coordinates: '23.8103° N, 90.4125° E' }, + { name: 'Barisal', capital: 'Barisal', area: 16.37, population: 202242, gdp: 6.3, timezone: 'UTC +6.0', unemployment: 5, coordinates: '22.7010° N, 90.3535° E' }, + { name: 'Chittagong', capital: 'Chittagong', area: 168.1, population: 3920222, gdp: 6.3, timezone: 'UTC +6.0', unemployment: 4.7, coordinates: '22.3569° N, 91.7832° E' } + ] + }, + { name: 'Egypt', capital: 'Cairo', area: 1001449, population: 99375741, gdp: 4.2, timezone: 'UTC +2.0', rating: 3, unemployment: 9.9, coordinates: '26.8206° N, 30.8025° E', + states: [ + { name: 'Cairo', area: 528, population: 7734614, gdp: 3.7, timezone: 'UTC +2.0', unemployment: 11.3, coordinates: '30.0444° N, 31.2357° E' }, + { name: 'Alexandria', capital: 'Bacos', area: 46.42, population: 3811516, gdp: 4.2, timezone: 'UTC +2.0', unemployment: 5.3, coordinates: '31.2001° N, 29.9187° E' }, + { name: 'Giza', capital: 'Giza', area: 1580, population: 2443203, gdp: 4.1, timezone: 'UTC +2.0', unemployment: 4.7, coordinates: '30.0131° N, 31.2089° E' } + ] + }, + { name: 'Canada', capital: 'Ottawa', area: 9984670, population: 36953765, gdp: 3.0, timezone: 'UTC -3.3 to -8', rating: 5, unemployment: 5.8, coordinates: '56.1304° N, 106.3468° W', + states: [ + { name: 'Ontario', capital: 'Toronto', area: 908607, population: 14374084, gdp: 2.8, timezone: 'UTC -5', unemployment: 5.9, coordinates: '51.2538° N, 85.3232° W' }, + { name: 'Quebec', capital: 'Quebec', area: 1542056, population: 8455402, gdp: 1.9, timezone: 'UTC -4 to -5', unemployment: 5.6, coordinates: '46.8139° N, 71.2080° W' }, + { name: 'Alberta', capital: 'Edmonton', area: 661848, population: 4334025, gdp: 1.6, timezone: 'UTC -7', unemployment: 7.8, coordinates: '53.9333° N, 116.5765° W' }, + { name: 'Manitoba', capital: 'Winnipeg', area: 647797, population: 1348809, gdp: 2.9, timezone: 'UTC -6', unemployment: 6, coordinates: '53.7609° N, 98.8139° W' } + ] + } ]; \ No newline at end of file diff --git a/src/tree-grid/default-stack.json b/src/tree-grid/default-stack.json index 32a11969..3b41bae8 100644 --- a/src/tree-grid/default-stack.json +++ b/src/tree-grid/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/default.contextmenu-stack.json b/src/tree-grid/default.contextmenu-stack.json index 7f3d723b..ad8a05b1 100644 --- a/src/tree-grid/default.contextmenu-stack.json +++ b/src/tree-grid/default.contextmenu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowExcelExport: true,\n allowPdfExport: true,\n allowSorting: true,\n editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Row' },\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',\n 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport',\n 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 80, isPrimaryKey: true, textAlign: 'Right', editType: 'numericedit' },\n { field: 'taskName', headerText: 'Task Name', width: 180 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 95,\n editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'endDate', headerText: 'End Date', format: 'yMd', width: 95, editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 85, textAlign: 'Right', editType: 'numericedit',\n edit: {params: {format: 'n'}} },\n { field: 'priority', headerText: 'Priority', width: 80 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowExcelExport: true,\n allowPdfExport: true,\n allowSorting: true,\n editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Row' },\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',\n 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport',\n 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 80, isPrimaryKey: true, textAlign: 'Right', editType: 'numericedit' },\n { field: 'taskName', headerText: 'Task Name', width: 180 },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 95,\n editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'endDate', headerText: 'End Date', format: 'yMd', width: 95, editType: 'datepickeredit', textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 85, textAlign: 'Right', editType: 'numericedit',\n edit: {params: {format: 'n'}} },\n { field: 'priority', headerText: 'Priority', width: 80 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/default.contextmenu.html b/src/tree-grid/default.contextmenu.html index 47ed0df3..e380e736 100644 --- a/src/tree-grid/default.contextmenu.html +++ b/src/tree-grid/default.contextmenu.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the usage of context menu in TreeGrid component. Right click anywhere on the TreeGrid to view context menu.

                                      @@ -47,3 +47,4 @@ More information about Context Menu can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/default.exporting-stack.json b/src/tree-grid/default.exporting-stack.json index dde707f7..bef261be 100644 --- a/src/tree-grid/default.exporting-stack.json +++ b/src/tree-grid/default.exporting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n allowExcelExport: true,\n allowPdfExport: true,\n toolbar: ['ExcelExport', 'CsvExport', 'PdfExport'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n treeGridObj.toolbarClick = function (args) {\n if (args.item.id === 'TreeGrid_gridcontrol_pdfexport') {\n treeGridObj.pdfExport();\n }\n if (args.item.id === 'TreeGrid_gridcontrol_excelexport') {\n treeGridObj.excelExport();\n }\n if (args.item.id === 'TreeGrid_gridcontrol_csvexport') {\n treeGridObj.csvExport();\n }\n};\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n allowExcelExport: true,\n allowPdfExport: true,\n toolbar: ['ExcelExport', 'CsvExport', 'PdfExport'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n treeGridObj.toolbarClick = function (args) {\n if (args.item.id === 'TreeGrid_gridcontrol_pdfexport') {\n treeGridObj.pdfExport();\n }\n if (args.item.id === 'TreeGrid_gridcontrol_excelexport') {\n treeGridObj.excelExport();\n }\n if (args.item.id === 'TreeGrid_gridcontrol_csvexport') {\n treeGridObj.csvExport();\n }\n};\n"} \ No newline at end of file diff --git a/src/tree-grid/default.exporting.html b/src/tree-grid/default.exporting.html index 217f0964..cf2eafd9 100644 --- a/src/tree-grid/default.exporting.html +++ b/src/tree-grid/default.exporting.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the client-side exporting of the TreeGrid, which allows you to export its data to the Excel, Pdf and CSV formats. Use the toolbar buttons to export TreeGrid data to desired format.

                                      @@ -18,3 +18,4 @@ More information about Exporting can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/default.html b/src/tree-grid/default.html index b6ecff62..064e0970 100644 --- a/src/tree-grid/default.html +++ b/src/tree-grid/default.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the default rendering of the TreeGrid with minimum configuration.

                                      @@ -24,4 +24,5 @@ More information on the TreeGrid instantiation can be found in documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/default.paging-stack.json b/src/tree-grid/default.paging-stack.json index 7bd7045e..84e7d85c 100644 --- a/src/tree-grid/default.paging-stack.json +++ b/src/tree-grid/default.paging-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n pageSettings: { pageSize: 10, pageCount: 2, pageSizes: true }\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n pageSettings: { pageSize: 10, pageCount: 2, pageSizes: true }\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/default.paging.html b/src/tree-grid/default.paging.html index d9735003..226ce49e 100644 --- a/src/tree-grid/default.paging.html +++ b/src/tree-grid/default.paging.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid paging feature. In this sample, click the numeric items to navigate to another page. You can also change the page size using the dropdown.

                                      @@ -24,3 +24,4 @@ More information about paging configuration can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/dialog.editing-stack.json b/src/tree-grid/dialog.editing-stack.json index fd998a0f..010bbed2 100644 --- a/src/tree-grid/dialog.editing-stack.json +++ b/src/tree-grid/dialog.editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', newRowPosition: 'Below' },\n height: 400,\n toolbar: ['Add', 'Edit', 'Delete','Update','Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 120\n },\n {\n field: 'taskName', headerText: 'TaskName', editType: 'stringedit', width: 225,\n validationRules: { required: true}\n },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true}\n },\n {\n field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true}\n },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 110,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 110,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', newRowPosition: 'Below' },\n height: 400,\n toolbar: ['Add', 'Edit', 'Delete','Update','Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 120\n },\n {\n field: 'taskName', headerText: 'TaskName', editType: 'stringedit', width: 225,\n validationRules: { required: true}\n },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true}\n },\n {\n field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150,\n editType: 'datepickeredit', format: 'yMd', validationRules: { date: true}\n },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 110,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 110,\n editType: 'numericedit', validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n },\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/dialog.editing.html b/src/tree-grid/dialog.editing.html index d3087fc6..bfcbe371 100644 --- a/src/tree-grid/dialog.editing.html +++ b/src/tree-grid/dialog.editing.html @@ -4,11 +4,9 @@
                                      - +

                                      This sample demonstrates the Dialog Editing

                                      - -
                                      @@ -34,4 +32,5 @@

                                      More information about Dialog Editing can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/edittemplate-stack.json b/src/tree-grid/edittemplate-stack.json index c314275b..a06447e9 100644 --- a/src/tree-grid/edittemplate-stack.json +++ b/src/tree-grid/edittemplate-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var elem;\n var autoCompleteObj;\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n mode: 'Row',\n newRowPosition: 'Below'\n },\n toolbar: ['Add','Edit', 'Delete', 'Update', 'Cancel',],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 80\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', validationRules: { required: true }, edit: {\n create: function () {\n elem = document.createElement('input');\n return elem;\n },\n read: function () {\n return autoCompleteObj.value;\n },\n destroy: function () {\n autoCompleteObj.destroy();\n },\n write: function (args) {\n autoCompleteObj = new ej.dropdowns.AutoComplete({\n dataSource: treeGridObj.grid.dataSource,\n fields: { value: 'taskName' },\n value: args.rowData[args.column.field]\n });\n autoCompleteObj.appendTo(elem);\n }\n },\n width: 190 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true } },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 80, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 80,\n editType: 'numericedit', validationRules: { number: true, min: 0 }, edit: { params: { format: 'n'}}\n },\n {\n field: 'priority', headerText: 'Priority', width: 90,\n editType: 'stringedit', validationRules: { required: true }\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var elem;\n var autoCompleteObj;\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 400,\n editSettings: {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n mode: 'Row',\n newRowPosition: 'Below'\n },\n toolbar: ['Add','Edit', 'Delete', 'Update', 'Cancel',],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 80\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', validationRules: { required: true }, edit: {\n create: function () {\n elem = document.createElement('input');\n return elem;\n },\n read: function () {\n return autoCompleteObj.value;\n },\n destroy: function () {\n autoCompleteObj.destroy();\n },\n write: function (args) {\n autoCompleteObj = new ej.dropdowns.AutoComplete({\n dataSource: treeGridObj.grid.dataSource,\n fields: { value: 'taskName' },\n value: args.rowData[args.column.field]\n });\n autoCompleteObj.appendTo(elem);\n }\n },\n width: 190 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true } },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 80, editType: 'numericedit',\n validationRules: { number: true, min: 0 }, edit: { params: { format: 'n' } }\n },\n {\n field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 80,\n editType: 'numericedit', validationRules: { number: true, min: 0 }, edit: { params: { format: 'n'}}\n },\n {\n field: 'priority', headerText: 'Priority', width: 90,\n editType: 'stringedit', validationRules: { required: true }\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/edittemplate.html b/src/tree-grid/edittemplate.html index db7b9b30..d5f8c1a9 100644 --- a/src/tree-grid/edittemplate.html +++ b/src/tree-grid/edittemplate.html @@ -4,7 +4,7 @@
                                      - +

                                      This samples demonstrates the TreeGrid Cell Edit template feature. Using Cell Edit Template feature we have rendered the AutoComplete component for “Task Name” column. @@ -26,4 +26,5 @@


                                      More information about Cell Edit template can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/events-stack.json b/src/tree-grid/events-stack.json index 5c1f095f..55ce39ae 100644 --- a/src/tree-grid/events-stack.json +++ b/src/tree-grid/events-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true },\n load: load,\n created: create,\n actionBegin: actionBegin,\n actionComplete: actionComplete,\n allowReordering: true,\n allowSorting: true,\n dataBound: dataBound,\n rowSelecting: rowSelecting,\n rowSelected: rowSelected,\n rowDeselected: rowDeselected,\n columnDragStart: columnDragStart,\n columnDrag: columnDrag,\n columnDrop: columnDrop,\n beginEdit: beginEdit,\n expanding: expanding,\n expanded : expanded,\n collapsing: collapsing,\n collapsed: collapsed,\n columns: [\n { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 110 },\n { field: 'taskName', headerText: 'Task Name', width: 210, validationRules: { required: true } },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', editType: 'datepickeredit', format: 'yMd', width: 110 },\n { field: 'progress', headerText: 'Progress', width: 110, textAlign: 'Right',\n editType: 'numericedit', edit: { params: { format: 'n'}}\n },\n ],\n pageSettings: { pageCount: 5, pageSize: 11 }\n });\n treeGridObj.appendTo('#TreeGrid');\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n document.getElementById('clear').onclick = function () {\n document.getElementById('EventLog').innerHTML = '';\n };\n function beginEdit() {\n appendElement('TreeGrid beginEdit event called
                                      ');\n }\n function rowDeselected() {\n appendElement('TreeGrid rowDeselected event called
                                      ');\n }\n function columnDragStart() {\n appendElement('TreeGrid columnDragStart event called
                                      ');\n }\n function columnDrop() {\n appendElement('TreeGrid columnDrop event called
                                      ');\n }\n function columnDrag() {\n appendElement('TreeGrid columnDrag event called
                                      ');\n }\n function load() {\n appendElement('TreeGrid load event called
                                      ');\n }\n function create() {\n appendElement('TreeGrid create event called
                                      ');\n }\n function actionBegin() {\n appendElement('TreeGrid actionBegin event called
                                      ');\n }\n function actionComplete() {\n appendElement('TreeGrid actionComplete event called
                                      ');\n }\n function dataBound() {\n appendElement('TreeGrid dataBound event called
                                      ');\n }\n function rowSelecting() {\n appendElement('TreeGrid rowSelecting event called
                                      ');\n }\n function rowSelected() {\n appendElement('TreeGrid rowSelected event called
                                      ');\n }\n function expanding() {\n appendElement('TreeGrid expanding event called
                                      ');\n }\n function expanded() {\n appendElement('TreeGrid expanded event called
                                      ');\n }\n function collapsing() {\n appendElement('TreeGrid collapsing event called
                                      ');\n }\n function collapsed() {\n appendElement('TreeGrid collapsed event called
                                      ');\n }\n function appendElement(html) {\n var span = document.createElement('span');\n span.innerHTML = html;\n var log = document.getElementById('EventLog');\n log.insertBefore(span, log.firstChild);\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
                                      @@ -32,6 +34,7 @@
                                      +

                                      This sample demonstrates all the events that have been triggered on all the TreeGrid operations with the help of Event Trace panel. @@ -46,4 +49,5 @@

                                      More information on the Grid events can be found in the documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/filter-menu-stack.json b/src/tree-grid/filter-menu-stack.json index 728843bf..11cce98f 100644 --- a/src/tree-grid/filter-menu-stack.json +++ b/src/tree-grid/filter-menu-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n\n \n \n \n \n
                                      \n
                                      Filter Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var filtertype = [\n { id: 'Menu', type: 'Menu' },\n { id: 'Excel', type: 'Excel' },\n ];\n\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n filterSettings: { type: 'Menu' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },\n { field: 'taskName', headerText: 'Task Name', width: 220 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 120 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownFilterType = new ej.dropdowns.DropDownList({\n dataSource: filtertype,\n fields: { text: 'type', value: 'id' },\n value: 'Menu',\n change: function (e) {\n var dropSelectedValue = e.value;\n treeGridObj.filterSettings.type = dropSelectedValue;\n treeGridObj.clearFiltering();\n }\n });\n dropDownFilterType.appendTo('#filterType');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n treeGridObj.filterSettings.hierarchyMode = mode;\n treeGridObj.clearFiltering();\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Filter Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var filtertype = [\n { id: 'Menu', type: 'Menu' },\n { id: 'Excel', type: 'Excel' },\n ];\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n filterSettings: { type: 'Menu' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },\n { field: 'taskName', headerText: 'Task Name', width: 220 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 140, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 120 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownFilterType = new ej.dropdowns.DropDownList({\n dataSource: filtertype,\n fields: { text: 'type', value: 'id' },\n value: 'Menu',\n change: function (e) {\n var dropSelectedValue = e.value;\n treeGridObj.filterSettings.type = dropSelectedValue;\n treeGridObj.clearFiltering();\n }\n });\n dropDownFilterType.appendTo('#filterType');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n treeGridObj.filterSettings.hierarchyMode = mode;\n treeGridObj.clearFiltering();\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/tree-grid/filter-menu.html b/src/tree-grid/filter-menu.html index a99b6fbb..55838d36 100644 --- a/src/tree-grid/filter-menu.html +++ b/src/tree-grid/filter-menu.html @@ -7,17 +7,16 @@
                                      - - - - - + + + +
                                      -
                                      Filter Type
                                      -                                       		-
                                      - -
                                      -
                                      +
                                      Filter Type
                                      +                                       		+
                                      + +
                                      +
                                      Hierarchy Mode
                                      @@ -30,7 +29,7 @@
                                      - +

                                      This sample demonstrates the way of filtering TreeGrid columns using menu and excel filter UI. In this sample, click the filtering @@ -43,7 +42,7 @@

                                      The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled by setting allowFiltering property as true.

                                      -

                                      TreeGrid supports the following filter types. They are

                                      +

                                      TreeGrid supports the following filter types. They are

                                      • FilterBar
                                      • Menu
                                        • @@ -64,4 +63,5 @@ More information filter configuration can be found in this documentation section.

                                        -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/filter-menu.js b/src/tree-grid/filter-menu.js index b9778ebb..dd6a80a3 100644 --- a/src/tree-grid/filter-menu.js +++ b/src/tree-grid/filter-menu.js @@ -3,7 +3,6 @@ this.default = function () { { id: 'Menu', type: 'Menu' }, { id: 'Excel', type: 'Excel' }, ]; - var mode = [ { id: 'Parent', mode: 'Parent' }, { id: 'Child', mode: 'Child' }, diff --git a/src/tree-grid/filter-stack.json b/src/tree-grid/filter-stack.json index 3a361089..f790a1c6 100644 --- a/src/tree-grid/filter-stack.json +++ b/src/tree-grid/filter-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var dropDownFilter;\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n filterSettings: { type: 'FilterBar', hierarchyMode: 'Parent', mode: 'Immediate' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90,\n filterBarTemplate: {\n create: function (args) {\n var dd = document.createElement('input');\n dd.id = 'duration';\n return dd;\n },\n write: function (args) {\n var dataSource = ['All', '1', '3', '4', '5', '6', '8', '9'];\n dropDownFilter = new ej.dropdowns.DropDownList({\n dataSource: dataSource,\n value: 'All',\n change: function (e) {\n var valuenum = +e.value;\n var id = dropDownFilter.element.id;\n var value = e.value;\n if (value !== 'All') {\n treeGridObj.filterByColumn(id, 'equal', valuenum);\n }\n else {\n treeGridObj.removeFilteredColsByField(id);\n }\n }\n });\n dropDownFilter.appendTo('#duration');\n }\n } }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n treeGridObj.filterSettings.hierarchyMode = mode;\n treeGridObj.clearFiltering();\n dropDownFilter.value = 'All';\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var dropDownFilter;\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowFiltering: true,\n filterSettings: { type: 'FilterBar', hierarchyMode: 'Parent', mode: 'Immediate' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90,\n filterBarTemplate: {\n create: function (args) {\n var dd = document.createElement('input');\n dd.id = 'duration';\n return dd;\n },\n write: function (args) {\n var dataSource = ['All', '1', '3', '4', '5', '6', '8', '9'];\n dropDownFilter = new ej.dropdowns.DropDownList({\n dataSource: dataSource,\n value: 'All',\n change: function (e) {\n var valuenum = +e.value;\n var id = dropDownFilter.element.id;\n var value = e.value;\n if (value !== 'All') {\n treeGridObj.filterByColumn(id, 'equal', valuenum);\n }\n else {\n treeGridObj.removeFilteredColsByField(id);\n }\n }\n });\n dropDownFilter.appendTo('#duration');\n }\n } }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n treeGridObj.filterSettings.hierarchyMode = mode;\n treeGridObj.clearFiltering();\n dropDownFilter.value = 'All';\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/tree-grid/filter.html b/src/tree-grid/filter.html index 11fd32ce..740dd4f3 100644 --- a/src/tree-grid/filter.html +++ b/src/tree-grid/filter.html @@ -17,7 +17,7 @@
                                      - +

                                      This sample demonstrates the default and template support of filterbar in TreeGrid. @@ -52,3 +52,4 @@ More information on the filter configuration can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/header.template-stack.json b/src/tree-grid/header.template-stack.json index 8bd44a1b..d06b4f07 100644 --- a/src/tree-grid/header.template-stack.json +++ b/src/tree-grid/header.template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n\n\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.headerData,\n childMapping: 'subtasks',\n treeColumnIndex: 0,\n allowPaging: true,\n columns: [\n { field: 'taskName', headerTemplate: '#projectName', width: 220 },\n { field: 'startDate', headerTemplate: '#dateTemplate', format: 'yMd', textAlign: 'Right' },\n { field: 'resourceId', headerTemplate: '#resource', textAlign: 'Right' },\n { field: 'duration', headerTemplate: '#durationTemplate', textAlign: 'Right' },\n { field: 'progress', headerTemplate: '#progressTemplate', textAlign: 'Right' }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n\n\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.headerData,\n childMapping: 'subtasks',\n treeColumnIndex: 0,\n allowPaging: true,\n columns: [\n { field: 'taskName', headerTemplate: '#projectName', width: 220 },\n { field: 'startDate', headerTemplate: '#dateTemplate', format: 'yMd', textAlign: 'Right' },\n { field: 'resourceId', headerTemplate: '#resource', textAlign: 'Right' },\n { field: 'duration', headerTemplate: '#durationTemplate', textAlign: 'Right' },\n { field: 'progress', headerTemplate: '#progressTemplate', textAlign: 'Right' }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/header.template.html b/src/tree-grid/header.template.html index e71971ec..e644b9c2 100644 --- a/src/tree-grid/header.template.html +++ b/src/tree-grid/header.template.html @@ -39,7 +39,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid header template feature. In this sample, we have shown custom icons in the column headers.

                                      @@ -62,4 +62,5 @@ .e-image { margin-right: 8px; } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/images/Bangladesh.png b/src/tree-grid/images/Bangladesh.png new file mode 100644 index 0000000000000000000000000000000000000000..1876083f8b7ab2d68567a777264e425cd1ff5202 GIT binary patch literal 4269 zcmbVPc{r49-@a!|vL`BJ8>8^pW{j~7vJILT3S}3@*k>^__O+C3*@>~2%2tv}QBqkR zM3!VrizV3`Ym&TE@6+?Xe|*n(e8+eFao^YSJI~*8o!507SHejPQ(msaTmS&@Vvl32 z006}50t^l?>)XKqm9TyybYnZZHQAFM>_#O31|DR00u)Ph^CDOg+&n@9ItV%dz$W8k zV@J2cnWOP!qO#jh8|4rpg@pzH9la2W8{UsVhq@EId`P;m<;JHlsE>y(%vKGDz)_3{ z-af~}s08aU3mbfxA70A?rgsdg6M|+D5D9cQXb91tL_>$@!hZ3hS^b~Wa2WKL3EfW@ z_V1wVa3`TgWGVrwrmU`nS5Z-cYG^5|sA;Mq)fAyfgo+v*p#@h#C?QnPDhM z(WHMfU&m}V17A;7H&G;$yn&)PUo>7TABXd^1YjZUW8kjehPt9a6z zOefR4$rPxO(XXmOR^$8+) zm{7??=&!WVKK~pG@*nyB!g~C3EUN#Ag|mWz|J>aF+U(y`ECv1S{w-bB;BWC0NG!!u zS<<$h&XZsrHxVqxz$RpLq0lec`Sii|&C&2;+VZ1dm-@n4g!FZ|cd3$iwE))OP6@^k z!)wTyRj#&Dig8b~gfZfa4@4Y+NhZTNgdNi_>8n8RU2sjvvT~5W-@JzP%I&G6NzT-6 z1{G^tmnbd1t*yzU{dj6Fqp@fnzN|H0Kjg5zP`9r(dk6vabG1tW`~biK01yCR9eEHC z0|5E}00sWf)8>jt_?{)4t31o(Mt`qKu88uIjM~c&<^0&=gSwGjkvdV+7C)Wc;VWa} zUSy|VtvC!aV9SWxv*)fa$LZ*<#L@scspc~7Fyfq{>dk7Q1MA>n>Hx<#p5`GNS>xmeRhPKk2yg{nq2*{G&2*KeUKxV$fy?DN8e#9Y z3LVl&lu(Gp@o~u%Ot|re$4cP;tl@i=#D0x1-k1HPFZ5_(Do@hhz{IZsgK*|kVs4d) z2)=M6a~iIZ*zPzbsASQ1Ig_VSnuEeH(i8d&UrfyjylA^t71t|gVW2ZyoVANuTJ zm(2F4I0%6_C@Z2c-<9>?puGwkajIRTd|TNA^t_fcruKvgi``uLC>80tpvso4z7F*3 zh3BD~T-6Swi2K@M6tmVhI-%Y2=V53fxjkr)RH~Pm(4qCq&ZqKgGzM4ML{feTgA0oo3XzR98X`|ua4r-MH0E7&73jqM!VvLO_zVH zUJA4yJyk3-8ZOqsetCamSoGQm=zeWV@C>9=ih}}{|5111)5q@V>~KTa${yU5MpfnE zmrAp&nz~$3*O&nFK{T80&U9|RFnuR?RTWIm;Cjh?WDLp4X>ll-!2(lwpg;n(}ouAMtR}`d@Lb*q0Pg6 z#VQNul%@}c$7UFHW&7nTyCwD{HEKS>aN5I={;- zEScfdPo5_XqhmT#p^c_7ZmHR<~7-GT1>7=YC0NG=Fx$-F@zrvco}`YmWC~ zJ-lLAS~A6d)q5=X)v(w>r@WU})&c1G#8Xujc8x1;_eG^)n+~CA%O!rR*MnPM;T?Cr z;WhqUQ+`TAgNARlx0A3%Inc7w)U>gKz~t;|8uoZ*uL*@q+Zb>jj2UQUn=8oROPfx8 z!z;Mm*2I5{;;tHV>xY)bQXf+*((`z?qAwksAQ+P?`uX~fykV3c`hl7}AZkUjGGXze8Hb8oC)3KpJ|=^ zP%N0A2CMVdj4IgQGhN%)vXVY4{KlJ2;HZ98%}rZ+Jk3EgDK1?}@F>t-nQPdBf|L^< z=i0vJsk)Y#1?o}uspta@U4Su8sqh8$oUjt~7u7CkJ)97KAENH&ULW7W;cC~II$%$e zd}&vR?3P*~P$7t0Af$e`X_B2qUBwyTd2TuYicj}cDt-1csCz4e6VLT0kkA3xw;q;` z3kTX%y<1N6ngE%c(bsi0bz1$M)*# zyF(BQ#8gwUD;s_Xnio1xLTjTVSjiPi@Sb>n+fHo*7+VqBgviRXEzq`#c&_l5sH+dT z^=sOLA$-J&NdfN1ZAI|-;)8c8QYI%tuQFW2-G?;XZA3*)>&ERzb6$vfKZo=#WV3(d zemjZE0ooqB$ewuUpMe4;j}*+1!`~WsN>(|2pE+=D>+Te1v%GS2EmqT;EhT`#D@y&m zb-v|>eu7|0C&M#g`+16iNj~rTM4=A)1BR=lyFsRJHbBU0^RvhYOJe^A&hs4ynm=tS zMpqkO?h5kS%Cr{0L5UD>0Nd}48e8Hsd(K;9Iw8MmUbnE0*v)hWWrbF`=x7^z zq(k^FPHcY~mVDKW13C_sgjFu<4V=D^&}8%_%ib|ei)1dy9WKhZX}XYtkskEs%Wo!3o1_;ov8)3e&G$m@4cgnLX&pH?H(Vp!815<4 z@}>9?h{rl33fZML%J3Q897VoT>(aZY?UFTTocjEZ!KJ05Y4=61 zPDuGmtk#ILeG!&<@uR=TQsEMbm}R$}b_|4??__Gf>d{1BpO5wDUh~a-=;g`YYI#C6 zM(KitZ?I&c3~e@l=T58T@r9H+Rl>rLG#AiB)bLw%c;mq22x<^GpoeOCt0vocTjUA3 zVb7h5y+s9fP0b1cIYo}2h;88|-CMKOJa2Y}7>JRJs{-2}dB#r5#%VU*kWI{J5{j=l zw(V^u{?zT%ZN)pQ`yiURdw)3dTZ3uXrzbYnp_a80mzw(1-{%SCZW(aWEdL|yn6D8x@!L1)_w6UTki60spb$R=z|9%BRP|1+gA-eo?`qE4atMDZ@*dzaY=GezE?n}79Jg%xo&c-zHBB7g?oJ4 zwQNE%gZ}E}%let{v3W`bH@Lu?H|SGqEV1Xd;#r+C2QWS!g-hdS-zp)GoLQ@#|}$lJyX|Z0=Au&m$XK9l-rx5sU~^Z zLm%YC1i~pE2Q3d$*eISS?PAw#G z&3RNvX+9-q!?domt?z-6D=4+<+GMghX@VIw#f*BQOe`0&RO=eN)zc&nIY zU+34qUpyaCi+$`j8C5oFFl7|O$>0wOoOdQTMAAsuK(XG{q_80S`fX2NZ|bN=;CDpZ z3u-Lvu3BVXdlj?6c{F``OtXKpqZu+84dwx~xsguz W**}T^R>K-wU~U__o<||o)&2$S7EKfY literal 0 HcmV?d00001 diff --git a/src/tree-grid/images/Canada.png b/src/tree-grid/images/Canada.png new file mode 100644 index 0000000000000000000000000000000000000000..137065e2fb61d65d8cddfec597f4b6a47bf94424 GIT binary patch literal 3653 zcmaJ@2{_bS8~@K3noGu1_H~T76tmDMgE2G4$eL{=WSxnz%xGqei9}pP6cR1ATV%ON zwv>uQn=$+lJPS9TGy4E9!k5DUNOZOz17Q{F8^Ca4_|gv@e84aP z01+*wiyP0)&KB>_4n_H{>!1XoVe43ciJ2hG*FTuSL-;WQm@HG|WK%N|!K9la_u}j@ zc46j>K<4g94#PRp-o-yM*x!hbG$SBP1b87pD1+yV5QK)XxOjmn@*6H*D6dbWk%(_9 zykJx0-=y5^91!Mg4g-Nh8S43Cu~@`TBNP_5%RnEei_phlacGPY8jI1xVDVTCULS+_ z-jG6X9Qpyg6NUQSmvCf?4CL{`@Mv^ILs$Jv zXlM8TRYODn(dP1;82{$`KY_U}hr$?WCkB@t&hZx}?tsR+t1!GdhvCa(b6nW$kRMTW z2xRlv+(331!rc5@)DYTxnJhXxf~)h*#?B6J#p3dOS^f+wiYZcvf?_i1cnsMPV}POV zz?d5tVX+p5M&`SAQn6U-P79nq2}>sbu%)p5!$TP?-Va;)zin|pwOucV&@iEA3WLMs zGw4(fI~4J4+j!>Bx#<5C@4GGi=UfbaYKs<rZ)6A<{JIyIu2kW9Hjri|P{mI{amNq&FQVlXPxtWx8C{ zR!oCrlsal?LxYO6+NY8d;R(ONU8F_poJdokW3lRfp@{S+aqcN(C8D;&V(*F3#^9XF z+NRL6uk!MiRyeh<9@~!|96ikKy0#~Ynqlj%NZZ@-D^w!ju>-5>Fjd!4aE!=6d^`BU zv;UJ%q^z{?q#4!lw+wkYsW*^ave)}`KKM>2RuL^IYeq~DfC<1O!sp7}*z1niL7 zU>La)-u2~b{{@?zbWM1y^^`}<+L5j=AA;PkfcJqx+INOKW=GBwJhF9vZ(gI`B?3X! zkvJ8jq1xfg&F}jnGO+Mia4z2Bxa?TSD0%R`BV7vO6OoN7P87=b9La-=h2nb*FAA$09=h$Ua0a^pcjOH3>+ZPWgtG5);48j zI`;`Extr5sHR9l7JG$~EcVd>kCjD}f^gN1kC=Nlv8Po7soLh7LL}UEJ4w3QCGaW-i z5u$b%MI}n>pHIU6Z0K%F4m2?o)4Sm8evZFbC(Gx5n)2*gn0`Idi8pp};Vr#zz5K%H z@%;GfES-Fn7nh~h(zqj^HIC7@!~v;;3kNGB*poCFx!|aIK}=}qbLz>7`O4vuptQ99 zco)|oDZ={|9Nyhn00%cNzH52cDE8z9^&++Vck_O|?rs-P+b{jwRaRbBY$_?<@E2dH zGgrsEfmNKQRCevvk~1~2PJZjJNnh`3#Be+}9>Z>x^AB7IQv-$BF1O2NRwec|X^yoX zkmG-}gm1i&s;toSv`?T>qYSRztlqF2Dh!#dc~Z)NntrZ5-3a2N$>C@l8&gKFk0?Iu zFwZszTrccJKkSm~zQ($q-19VJ7#`d1(^SW3kpuz3uZBwYU-mzpu%#pzlRuX7%!#{P6Ws{HWHorc5`#t$KvzsQ^e<=p*+(i z?o!O*vDjxXdZH#Bt*oY|J=KrJ#|Ks1%scQXU81V&_QiN%6z{1Gb6=t&XRH(|H}8VM zq9DtEar5m3#{9u<5C(f~1mluRLBH9?pz~+$K$+<1u>V(oL5vU>uIg$?<6tugZfWxQHvS1FV-cS zf}~}VE32ah=i$AxwKYXSjM+e@?=br8S;F|ff+OYJ+_MH_uY(yaIV|On{y4c+q|XVb zOM6}_@Vew;ih*5(sy|L0HKx)0W;ei|sKqQ$=J%M&^bjiHM0t5LuTM>tou31^wHwRd zy@M%l*;0HqnbDGPr;s#zN6IPh!qUXy1z&~tf(||PN@&kGeY`CoWTO%(?o*=0*#61JU~RYp3b--TLu_XnaJR54yRi=(CfE zX=40^qOC6R+geP&$n&*f8LuEpN;f?s=Q3|&544~ZHmIsp-|ITk+?3V|m!6H0mT75A zrt(W()mplH8OMoV6?=qGC&ewm4s?F#*_g8bxA=k!NGMUVr>CfKXZj2$a`jM||H0-n zcIVzUUrKzOKX*809Jepv0dW^!O`k&Ya0vG*Y$Y##*sdYf7;@I7cFKk~=~e5BFTb3V z9k9awB13e}qoZFDdqEjWNx#GQ}2)<4R|4eWiAmZK91!yyN+~CFgvsI>jey zI?{mY=^cDs-2rpbQQLYjsI-ZYv^5w-sF+YrF%h1ICB z+pccMPE!*S#rAbFKe#XzU+x%YdH3=fTEVkTV25+7 zE6h7$=gbC1t{MfLpsZ=x^@)NghOnfzw%`{IoEphV6v}>t^`^}mfDGm+7_^x+yfU6y z{1`3^2jH;;|9jRp`+R@5V+A~tKe#BFyGaIIZ6>ne;iL1l0hY^YCNt3JCB5O{HyLE0 zZz~}`8(l*C0~tO8g)#dNB@q@{^3^3FaHMLCr|ikG0kc+=F^=XM6gj`oga{oh*V&fo z8V4=k6@h2WdukeAB>^LtkTZ3%UFT##Ig3xsYc55QK&pxmAMNDi8XqraSuuL1IERj7 z*9YK_0*~mchqrC7eP7?1XJeB+xQPU4eQuR-{bcm=vf9lVaa9<^hk(VpdfI7gn7`6_ ztRDM>Gp|c?b)P6dp`5`O06~24P5cMqw_V@1ioTVD#RIXh>^v*yH#&rPD^Qi7cISMkx$hwU~W=(RKXd_)a`O^~l}^Oj8=|>+MJ7(>CVoKzueYw;EQT zm;BT8e1&m!!{D&a%gcohBkR%j9 z!Pk2L)FKLo1J*);2ng?BoJzEjx^Pt!_?u`b LpEv`<9Y+5GIHM4M literal 0 HcmV?d00001 diff --git a/src/tree-grid/images/Egypt.png b/src/tree-grid/images/Egypt.png new file mode 100644 index 0000000000000000000000000000000000000000..9565fd9dfb3ee9f93fc6b3887ad1a20ac972c313 GIT binary patch literal 5733 zcmd5=c|4Te+aFt$hGIeylOp@rmx;)}WEt7lm@UH?#$b?$q!P*+9$O-1%Q8g9QrWVM zeM#2rSS2M000{3 zYnuZAbhIL%fQ6p+JW)H4PkWsw=-3c$;ZOvB7d#Sh1A%izf(@`PXrwvP1rgxghExRr z7=+y{YzQ{SH=%GGR?6kKj1&>;^_vTzs!sHBfx9CKU{@sC%~MTq?L)mF*bSj3Xsuu@ zZS19myyK=Hh)3QEG_imOy2Divg6h}7szfM_0E;BJfQeWSPah~zP4G`%D6Rav86pV& zQ-t8ICipL-Y>dsoS~xrstRST*373(P0V}CU$tWnx$tp;IWu;{lAkr!j8EHvr8K{gj zR8|`NR}!RY!y`~ob8X$fbkS;Rf_Df6FDL}!@9!_=FDHe=qaiXXDk>0ZS%|ExBuzrn zC%}{7LX`CMx%@YSHqr-tIMn6es=T0Dc%%yf zhqu7tJpT5g*&Q4K=W_?=1=iB~(`#T6Yd22>&fiD$PmHlK)WFk+;Nl5K8fdEt(paS2 z+z?P1SzQ$^Ic;faEqNsw868DsU1dcbEol`UMO|fiS-Bg3W3_Q`Uo6s-@HZCmAFRwj zVti(H1S8f8_fMi}*)dv~>Rw3!xbU`8~P+ZLMA*~o;DD+J4(j`mYo`(r}iGr`Lh`Hqo!{RI5URGjs`to($;x+B8 zfs!0&%x@BTScZ$EhhiPo*XvOJX#aWY`?b-vZ>5e}Zebt>&covXQcXs+j~?`ZO4&K? zQrU4>z3r+DXqY_}D-1XT`2U$h0RUQlFL73FR98H--5TI37-I!Umi$AdD%6T-ZTy;N zI-uv5D&}s?W!9zYm>cSMQg(C!N6z%MLH$pdQ=3j2tW>75M$d9i&FtIwMRIh!M1n(i z)C0Gccja~hO&Vm9pY%m)_B?_WY{=HT{+d5g6&(GYQNHJcBSY57aZ9@Xt{T**e(|t; zHc#>dM)GGEPy4bwCO+}7j<|h7{;X`n!FhW~+1&PWc#x;r$6)K#dm-2&gr3fU?S0JD3rkA5iU}zEE}GNZk`|kXTFB z?+%fOBD)5k{GaDuNxLtz&;jLKUhU>bdse58` z8#SJl<4UK`MH4dzd+x;dNRW=uHrL`ul3ijSs=Q$drEuN^t9{E^O!{sjZb|Lg=ckM3N^{DBjj6NPqFiz*O8hi>LQytLkoRzk2ameA7Ku* z@JA|&-+xqt8Y^K*1N<@EZ^C0Y9qiLX7C)YI&?|u)`IEh*6L@0K{!VeFmSd?!1 z$zNma76n}um?x$PDwDTw^(Q-ji?E(|>UT#o$w-viSZ{vOmJe2Asw&)uEkqfHL5cep zCy8Xdp+(JN1LhoG!P^Jrggh|j*j{y^>2SD8FxZ~2Ji{S?IrSp_0tm%MZE8awOM^^N zCHsYAVos%7?Krz(xFUD!XA1w3ILZBip%W~|{QRV8khjHwm|fuFR!je9yPWHZw*Dm` z!+o*9PcORrkJNM3t*2({t>$BZp44xXl_f7nV2u8!P(I@rh3_Lz(LXpTcL#i;6NirX zny$8DAk@>I2XI*`DZ*MZSd_F>th*tS$T&4)89i-dM=jFF_=J8Z-q@=j%DldgZpjS1 zy_?4jDxxT|rF5!Ps4#ZlcwgDILFdF$HsWx-TOzaY+_q8U>TSY$wCqC8#Kt$NycFHK zYE@L40_?H7W6p6&#f1Q};y~da)5=!X>$NwTi~BUwv;Y?$z?B&IIW-OjxrF`@H&$2k z*==;czWwqg62ebkwuvktnK|?4wB}Wb>~ov0JSTa)4@xk9kWX-| zmYiVw_;7zlxE3P7F7a04;jg_?T)|`UHtZ9#Z6uV;Q`*Z&feNn;nTUK{_ z?FnIE##d%vN-@Ph0yB&~zsR@~koDUN$|0p^2EJKfb4F@PlrfuO$(LvuwE_z#b||rLh4>Vqk+~|Z+f$4Kn$_v zWfIXFqZz1^IPUEj#r?@+dS_Jdf zoaS~b0mG_*;Pm-R3>tuRLBJDyI22WxH_>A|W@Pv-4KWc+#|V;?jEKXyMjw>ly_TLO zY$a-EWfkQ31yC%?;-T^QyH0UB-TQ6r7X$n_rZXCP2*BIm>Pmo!&B*=bXWnS8*1Q*7 z;bXHYXw8kOs;NAByPf@?%dt!&Ukiy8(Sr6E=6_;x;mMl19R(VDS{Cj2w9A@3Qq3Szc`zpO$ zSM%BC8Ixku%?XJ&9o*!^y$wbklg$YZ6HkPe!BMJNTzrF+rr*T1`mV5qhJYAmRz^C) zseaQB#Z9R9%3Z#|rMFbeqZ*NjbRVNDh%X!|TlL~!Hj0lNan;=Ni6lpc52BHX!H|bX zqjgMAi|)nCQ@kM#pEKo>TJ@@5oPG#^zCMv9l>$X^?ZhlX7SL%K<)^#-mS&DVQG3QE zK@&4!9Mx%KN+$5VW2U=Jb#JQDMmphk0i6aT!O}g$V4zs-qw+4 z>^9&MnOwUw9pFIVT@ON%Y@GbB6Sf9p~o>Njft`n}CrARXZeV3}*Q@5#>hUhl)HkS~BMkDpCM$SG)3 zgNDWT&;!N3Z3F&EuQQ7w7d=C2VX9UcRB!ykr_#;spB+wt5hlXt%_LoTb#9!_$mEDA zV@Mt|Hg%4)rFMrVZI$M^q2;*%E#y0Dg#O8lCPmn$IIcofRwL3T ztC^Rvp`&JH{y`Sp3L8%zsG8%4_9?mtZr#KzbXf(|S`mFWI@sHmKKG_A8AbNy)H|vk z@U%?mi-z6fYOY8B;7W7;mE5Sp#ml~B(}LUo<(^OXj1DTwKs@r`P6MusFgzG#NLRJz zu+GW1FfMX+<`!w<^3}(Q|6JJ>cRD}UW!PbBe#PlEMASZ#f^ zpgsRQyV6u0ktNGVRwG9e@KdgXz6~}i!gTrZ_;XX;psE+0)n=~1^mo$?A)rNa(%Z0) zZ6PiSr6SKQhGVnV@h_Yzp1Qu8PZh7cn_|M&6uEe_X0AcO`Q~Yl3Ol2fS?>h8u9CP= zrZ50hh{3^TtzmHC8Y;cEdq5yqHG^CVgK|A(OWkrK`}r+y*2{gml_~rIH;C2|YK*!O zgJy4)<_#!v2ai1Ha@1_H06^s_VSNIS#J&kZF;S&rDwzSB6P(SiUJOtBx`L0Fh; z4HZ>y9b^xS1&%3-p~}w~V8uF@2WoUVtH)Tc*2Oy>r+nO1=Z!Aw*k;1NX$C&Dwy9AF znHG@y5rTF({Lr(x?X{HJJHu(WBO?06qpQ5}l#oo>LH1E}y{@G!p1sS)Fx^ zA6>U~GXG&zVma@W^(ePH7LBvJM=hP1TnWUM$?nj%fkC_+;U{gQntiSr^_lMd(5Pb0 zVXtBipfA4We<%=WJu#-RE53ZVtMBHABd?3)hTWMM)TfYAd^0^0uRe)C5M7yUj8j)9 zUT>g8%~u}?REzb5w7xKjcAYb%!FITi>p@<_hAL3Gm9fPp)#1hz%37D(&O555KQBp`l95`uLO}wb0eo* z-=bVx%Jto?!{^LOA=5m;Oh=5ZfVCp}KL(VJ6wVdSm)(aIch$f0b=DcHoiEF6H&mXl zM!iRegG;AiVt3C;7Cc}^Im0u}D>i42N`y{$=Kfd@(-dIWwSHuH(?XE%s(0AujZ+Xe z3+ACyC1qm+!F05>OE1K@RM&l&PdEO9?~4)l%Zbu7+U{~gsvg&QwK_CQ_+cA2taIsW z&4v27n(f<&2)N})bI&Yi|3or6Q}U+jAFX5k4%aog%SNbx^RiS!L_>YqP4n!J(C4Fx z=gCSSdo`a0h-7dz)v>e#$gQq+vVor5B5!n6*qLgmT3(J@QH!45s4m3;J&s(1SQqd| z)mDqzl=U%0^su36ZWLbAZNL62Yf%2fRi}V!TRR!(U$y$)^+Zf8&$0h8 z#LRm+pliBKE$a0#wrNhiA>N#}@w1gzYmj{dH~T=-5gTh?Q6%L(#u4h$VSC{Lu0z4- zdplYHVsd0=74$}P!QRJotrhp`;p)wj0}FV7$6^ONNK(s6&tiJfcgLLcOyJ;}(`nSu z1bWeEYgUFr3VNu{zwYq%O!wD(I%o`WyZPhpPLk7c?9Ajv1n%jO0ED7yFV4rJd%~k! zQE3~TSZx7hjmsO#OQIa11rLnE3dQWY?#zwI#fn{RmkYv{7YYwr%{divvq@wIzqCxf z1B#`cmT6n((ggA)Yc=Ea*@AhBfUNx~QVY9_!Ok`zqwtjnxBJnw%UajUcO9`1ZeF9v zH>%(@C*?i;0s@rBzR5cVYe8Sz{bB#RT%^ELWaVT0(^Ip(9daArR_A`Y8zOY@v&@&t z_9B;9@SDT&{R+pX#l6@K{`WLRB!c4hQqCHpinP^ZKsPETy!nb46tl^$XQ zd6|AGlr6$=;OFM}*Xc`S#YG+@WYW+uIsfya-Z5%;P`LQ~Y4%5k37nuvH9^^_>Lj=l zmaMN(3LkKUD!S_i56ToI)h!1|y+szt~(v&dM;kewgxMbq~X=GszH9Wd}n7~fR>Z``E@#5r#wPiJch0bhZ^RFSrPT@ zk|GqCDjN1;b*B&0IjMY&!m-p3b0ePY%Qv@A4EbH-?%LQfMDT(G`Gal(_TTs~Q4-n^ o-M|0p{@fBpXUTV!wa&&%OVduA49YGR#UEOhkyD(xj=I|0x7^-x;1jp;qxP*0wDhy*mxpd-vI@*5vMw;%~>55jUg`dBFdXie@ zhX!8d{IZg++)NjKyh%I+n_rt3NA0b5^>`oSJ=*Q4op&aD@GO=5a66TJdLJZK!32O{ z2qeJ(*tb{ipRLyij~{w`tPJay?;TFQ0McEW^=G_5@ zZpW(FsF|L=o&W&MjENS;0e~B60_D>vdPxUWGfbfUpQXE|sOD1ek)RD%Cv5W@>;y zrJM&PGR1T;E~Kmn#fK_)FEP=+7~$l}ltCOe41Tn;km2ot7rV1yn>N4N-`%b4IpOCKX0F91cupzzjwp84;+>QWH{rpjx}g zi6BI^GK~@^l$aWHAWBoPOo9iIoxU7Fg-^n&wG%Xvgu!|#4kI+WV<1!@f@+38>7||Qnd_?5%M4sg{D->xxpf)h$Z5)=mJ&{f`~%+96mo%BtRIE zEG8#}DRSltFLzf?%1r? zwQRGN7z&5VuXs`SXN8vrv@#muN7jA4#l1_GcfMfcrzKp+&V4dyJ!11N8tjUAa_j1Y zKcc!u?REW6mOV>6;{^h50@Hvg00nR}0`CK_xb($ay)v%Vtg%-2fX2lq#?-+@IIh^> zO^Lpm9p5l?=}zK;dKKwCUTUdsE{zBc^33lhI$Q#7YrR|?*S+z6#kV21B)d2TVaDbc zzo6}3XWACk7z~x6?LX{#Y~H_p@UHppYU-4i` zn+LtK6v%%L>~UKtA2FS5d(?ls@R|M5+JhCNV(-_@PEuhRjG7bX!OImTMCJCJY~`~r z*6+FB`%OtouW#cU-4!bj4GgbMY%Par_0PInTgsx`XHzS>Mn-$=MMpy~tlpdS$FRHu~g1cj{38PCrhA$M6vo=xTY53W3}+ zY?e8}T5~xQoki|!fOvTA#BN%$nOgO$>?$SNHnvpWS9L~fP?9^W-CT0Pw*`9J6`VsF zqisLuiZ|%$jw@F_KYz1FcwiII>l2FXt_|qhG6r{E5)Ac^#Zvjzd+&Yu`QV5>pvQjJ zHmIb|dODKO5&U=KpG_Z_^uun|wD*?hMZT&vr}VZ+GLAQSN3)Ei1d1ttO~v~Lb}ais z4V*fL0zT)RQLoeMdiKt$nx(~`xw8#ymd96f3-`>A2d%)lcizfh?@Hws`dpG6&$9WJ z!{r^~&4ha$$%ey?mCiGY=&rAZqmdaGN+~k{-@My%5;xBFcl_vLM6tr3`0Mi!HjDKS DmK3O_ literal 0 HcmV?d00001 diff --git a/src/tree-grid/images/Map.png b/src/tree-grid/images/Map.png new file mode 100644 index 0000000000000000000000000000000000000000..6efe3b17c571b97eb40c22542ee12ab2feb4e00a GIT binary patch literal 10611 zcmXYXWmH>D+x1BxKyjx?3GP;$;t+}yhvE*!wP?{4*J8yTiWRrw?!}!7?oizQ%l*9H zkE~?YoS8LO&Rn+lj!;#W#X=`T2LJ#|UJj-X03gIq5P*h)_%irdV)@_5Rb5sJs2r!* zLky6uB$Xrqpe7dM!4!fRzi^h*bp-(I-v2(JL8lT60ANOwhe>LB869TfL>tbfElzkI z^O5$B&c0V$D05f;Q!_Zu5x>Y^uR5i?Ueh{oZe;&er(drP#6A^BjLekVM-#4tEQ!o2 zCr_-WvxX)c$A{;!>@$GJ6C~TjuD{sx!|k;>=Ky)5uzVZq@hF_}wEgh=;mg~x`{K>fIK&rs?glETb=5g$qmk4F-;Kr$!$P)5UaWNgH<8qsb!bG_Y#BOh! zBd>Ht6;1Sll)B`@FKGU!u76gY$j-@68N>D^v+^OfZ?|KM(du|T1z{q0=V@uZ8yg!g zS3I%jUXWF)prD{B2#KMaJoq93)s}r}fUktG^MqIHp|WEHHI(!UI`9wERhJo#p3ClYbfmi>{zx>u7C&y{q%a zl3K<&j<8#~3TKDM#M}F~Lf8gM2(VHU@!#I2+Ho!w9k(P)jg*do*7-j7a85QH$l1F7kSv+?$gyzq zZvzYBn4O8g)!x-hvnAiOf~upf$P;t=|G<3jF8CIV_gnz}X7}r=hk;R|dp=(8kSJbs zXO*ZcEN*LeqT^XAtJ)k@% z2VRg95Q>0<9$9F2l*7d}qfP(wTW-E{F9De!E-}5lXpTe}Wv^tvye?|;E1&YxvcN&S z0U5Jmc_K}L}<(w5Z8-Kr?fmq zq8-*dzkT3}#@aP*VQbrnqjyVh|4ByjM&2Bdp?bBfBkI0Ht$+}=EhNxCPh zn2$}g>=)TdLU5+5lZb!0p3YwUaMS|l`FhZ|oz0A_STBvlG7i_?(4Gl(y7`**aJ>uQgB`tTnFm`pPsG}KQiL|%cUo9N?cU)^ z(gj;bPv=8L2zwbYM^tYA;pa=-E*^y42QvTATL!?^S|@vclmH9&2Nb6>&*0={WH)h8 zAl6cX@FX9)Ny(d0_xlc-e9{|JHRn0Gc7Hib5r=J_q@UVIs@IX$kp!>5uN;Q5^;9~8 zLceG5lLg!+rCVssc0Ocn6?#7&gzrc3@_tJ0WYgTYAx%l29t2@J{%vAI3xXzqn^cQ1 z;bG>%Wdmd}oyjj$P=)wkpNeaj8$A-I)nyQNLAWa*aJ>d!lR2MbWr|xT?)M4`hhVva zFDZ&emuK4=3E#+lmxS));*Ll#vvK=?VIo>_uQk5-ce161@RH7JqdHD;%JnS&=d(XA zTFq+$N35;)pJ1t>K23kqh6)Sn(YxAKV#5-%F{)UkL$bMhZ;9(|wLb-E6Z zAqqAiSX7Vf-j=|7AIF5zpWg-UmjahSiZ0|>F`3x#9@I~!cs0CVl|kiYnm;BFxiy@= zj1E!BSDo3kIrf;ghwl^PT>`rf9BfqWN`tz6&M!(7%u3K6bzML$;8?WHhBlwL{^Q@HAm5*ob&_c5rD)M7 zOq{$lLMk?dz|M7IXoob+F#A>60yL$j7`acL(T z1fxR}Yi0yHUo8H;Iao_~{JoabW-jvEdRFG*Yn&$|19rvBmra@Gj~~9{)~}X->)fgO zqNFJ3C$-rI!M(a(mV+|v--+%#J{`fyLlasA;`XDAlRwu9Rse#(P;niJY6QcJ*LhA4 zX+9}n@7%g#N#J210V!4=wq6a`{I`Lz-TESqgQ z`<$Zr$xuIx+eGUmmUzU>A1p*|Vmh+G_fJOdlKh<+E1rxAy5+wWUOl>zRMFQIvNwoh z!pg&#mk+-``w&at%ezGH3mBHs{WGA#4KtZe@t5l})sJgp}w5zw%^rxcE^pk7lU|7RcFHggi=fIx5yP*sq$s*!+M}K-*5n8a3&*kO!XjNsl z(8rumN^117K08JRuB;1k)CEjTE>&inh8ADUYnP=YetKl7;^5u_zr*WI5qhU#!MLh} zs#$XB8)rA4aJ5y@lcoXx7u{NQUHlC>66%`wTU4*giDcM&(<}0w`oZDJh>-vH=}sCM z?ib9N;X$jx`+I4c;B6az?v1Z+z~G zdD%Kr;@7PVglOE~f_Pn@klOtnm>qM;d1w;m%E>98L~ieWU~Ce}hd)xpI-x4;tRY8jZqzXRHa&Q>ZcqEgP<2GBiA)!L%OF{dl}vql zo^6BFN)y9+4|No4cJ^&CLsdYTvl$M2EI?1j4Jp85q|5e3=3UV0Eu`}yyjWdRc)fIw z$o%pyu?Q-*EV%WaUF+lpevaMvcG%Zzg7QUJeLA9W1`H?HL85NQ#Fy8?HC7wJ;Bapr z&V{qb2&(rhNqG&Uzgp~j z<+_oL!C7GUuIz(jatQT5QyIqE28r(-jJ;BE{pUX1^<<2MfT)Ex3Blyuobem7C93rY z3*mbk_wso!nB{M5D+t5P%=dP$2SW?0ma77USYQ&Eq!y?$9cJWFYR`u`%Q3#Viww-DyuFqmNcV<7A2lga|2`a3XsyY(?^9lqM{C7iBj?ss3rRe-~-RUOg%$J&@~!H#s^ z}AoNb-c9R4?L4Od`_6-Me}Yoob5h7R#jZ83!qjFLbTe@t;3S5( zd)VO7Xuu{HQ}o(9N~f$w4}_dsUvHKFwIPPQH}i5w9TKpvmp5Fu$x)5BT_5}gnYp%S z0`IYL8N!5~uZ6mxqonf3oM>W$)@WAf@ZuZw;0?rui8lQ-lXC-RtOqi zFR|S2;A{ZgcAwAxltn(|n5dwc)dZLsmccqqB~le_F5EdQ$$9R`z_ViLP8j8zKkJWC zfhF7SNVv1yqGSR@-jC!b>9nKf237u=S5J3n-U%KJ@acR8gW#W3!0=WQ zeT8!-)dHzF^-lVndDAKgJVL95DY&%ZmHm0S2e5m!y&|61eEa4MzN5eQY2Py}WL(!2eHqWT$W?Y{(? zOT<_;_apvJYslMsTcDH*;Qn>Ss6W( z3VtGB;pKm(BSX1?SUO}sz32wA^W#7@F{d!|8IR?qw8Vsjo9djaofQ=?9n6&e#{b1U*A$Mx2*Yl|77` z;9b5oYwF)vO0QMkxLH+efj0H%cc_l1G#H1-d^X={)wZZBQ{v9?ac4#ecIR$5jE@gO zavO`0KiBftjI1k3wA+iF{VJ~pQvK5+;vpeOUzS z>x|EHM_9j3H}x}wF>!i7l;A@1U*c3|9ILq>PWyR$sN{GNqqX}ME%2bt&4#RFkU5|S zp=vlmzgKRH;*e&Iu(HIS3K9>Hz%7YEbT#t=X%AEf;yy&i&m!BMmrEJLF;lfYW>Iz; zi>)u@;%sytdR)9q`^OmT3?QQm{$xmAI-%onW;eN*JHbb%*`{Ln(0sS(la#8@*}n&#)O9}t zJ{_2_Bp)5Zj{+C;`t%SnQDS@qV<+78xZPf+HZ|TmO908$ArMreB2!nKgFE#m|7m&f zEd9yNIF^A&_khdJhTj=fVLeKx^L3=>fDmCX3X!!g=#$ThdqR^9Wb=}siu5~nfYQMH zN!rgMVL2H@B5R8~?(DtFXGdUF4`&CP=8C`Dx`zdGfs4DknH3X1L5I30agJP6s=v|- ztN!}GZ3BwbZ*2j|O2dFqqo;)dGOUA)>^Q!H`+qu1+1ZGs5iH3~(<@c|!m4h?H(9W| zb#G2bf|tUV{@;OLM`9;AG#=|ciwbJ)QBtW$-^Jt-hq>MGS5_05KB>5TazvijsRG{m zpY+&WK_}N4oMLgTu|kLkeWlK|JFMPx5G^V6g6> zy7?9^^f^khyI0M4MgQRY+yVD_17s5M*7pzmFeFap`vT4I1(&I_)0^dC_n^y9q(orC z?Z~r#yvj_#p{5#~-qfjzr?lZAe-jJ$j!1&N81=Zcy7TzGQK1sW=QBzqS?Yw4Q||Vg ziJ1mAd?P;^dFL|L!rwv(@nRP&3Wetaum(^q)e@BtKt!ngQ$iDUVE?iVR!@0VQveuo z-1KD8GiY2;v3IV#`}#XWU@O`9&iSgH-K||*HWsZDv%i9|FO8}{Af?|;ut&Aw4AXB@ z!Q#&OgpT=i#Z7Xp`5WM9&ZFH&(|4NY6@uaaOVkxaI>JLJ@fF)qXJp|q!6l2g&a}NO_f$XGrMx50QEw-dHCF%tCd>! zWkJL5tV;WvEQ}Pc4POkrsM>|Xl_h3~Nf*{CM^!pmhwFbG)&|uBa#c0m@Ao#ub4NPe zjDxlfkYL_FGGvfD;(Y0C@r_Z2Ro(gbESz!49F)Jp1PQ{XWV3ixCO#KD=hHQZ9Z?=ax?22m9 z$Lk=$Vjwlo_EORt_ZYVZH+B6-&D#xKym$SfYisY!;OuU$0(MTe)Rcvt8@eGU(j*C9 zkzLf|7s6tkX4D24yuwk5=qAC1xcyjDG5h~ro0js3v&Z(x)8_pF># zDGQNt1sVSRaut^DQ*Tx5)}A2YYh^UVbQq6YW8!u`KsL@bKPW)*dn2h_ZV%`1+fIvf(J*xP6{cSD-5`BatciF~S z0S38gr=e=W630s|iQD0$*GqPId_b|^bKO@dP&M=|nQj#tQU#i1f^|j+Wow>~Z^6;N ziXwxCMj;w4X9(D22s$%A1S%2tDD-WzT03bk^eJz@D=z6cv|XJ*WsU(`-m46fGZzWbJ@40PuFOeb zxuRmvnJ`Dq`DsLt#mas46-rp^KcX>~RHLSJ{m zcf63iK6!%|6|}Gafjve`0n%lm1>_$oMbRXQF`37j(}Di7O24w)n3X7LF8qpsfwTZ* zlu`c0gbF&!;+JHUPrQI8j1BwypdrW2YiQwnK#`lT;SZcBH-T%?=H1aAfR^jjOr6bg zzCZC*4-`j)n^6sJx;trEGhO=alFeUJsnix6edy2P$j=_C1-qbg9?2>63o2(-Eqn0PsEs$=_!kAUFCyp;(OU+=RA4m6lsxQsapL+| zLTOr%e#!JJ3TYa%y*(C493NPwpAV`2WH8X9`&z0|jV;kVy7F+rU(6uCj1Y0rPqFVN z=TCr>Tyf%mBEM>KB66WUaUr{ehQ&a-A96GuIy)jzjigy-V<#*jwUE#dhq3iK+7qp~ zqr)SLEh%$xmd1N7M!Q~#=~ug+H0=0LX>3$W8bKJLeaSvFM*nJOWW=+o&CqfF9Z_=VF-viM# zN>D}U6?x!c0qJp7G(~>`Mvb}eL^dg2>z7I`py&&PUZpFTbAR}AX^c4R^0!V!(I2B_ zn-)C~7h(=c)f3BcxxAD7FpVIHJmBHPbE#$pbyGLCmFgQn>d9vW!bORN{HpPFb3T|iiWdo8wNv2i%%j!z z{Z{_opCnQnkn&(FnGFx`2Q`SKXI&bGU=n1BjoB=Yq$i-1EXVk8uziSmrtyL}V(c1-ron&686hhmcpp$1AGLa_kOrlz_=-bP*jW^lBU_mEqp2VT2Qd$PkhnA znq6wqnmO-mM{>B%P75vqC9ML)Bt-b?631Y87`${r}uN9kFULi3yOfF0ZK{qSCe;YhX`<8MZYEm3$Yh6GgONNag*Ck z6RL0bnI-C(yi=?4!pTkZq6Je?rpxY;o1>Swp-BlN znR3N80%fA|lMLJQel$Qvr)1DJi3rdBG_=m7Sg7lohXXzJG-?B<1{M7Z50jY%IKCwG zg}vCJyZg0wuS9nrhc6^E;=eF>KM|r0xW>H?Q>t48{3Hx_dV_buTJNU6JM4}^J)##5 z7-cSe(Wr8=gnNag0@ugZSxyQ5sY^mFe(eBd%*8y$q5*e``%AJyQj0o zzP{j5ukg_e)Ef=FONq;zw|4hA_`^J?%itk-1k1)wz=xc%YW}3TnqtxV1XvpBC|~Ke z-8jaJoFnK_b*|8dLw~p`V##U;w~`4wK~2iv{UCZEFGf14Xp)XK(`@KsP;+T>;(_FgCkXvyysz&C_sYG^jZ+2>nOiAqb%$PirqQ2gDd|HQ zrjc_e-iHBWP#Z)w&dWBEQjoy3N71tx{C5%Q{m-IK|8BxQ4f)J!nQdmcHUNp|GS$E_ z(ryN;1w6M~+?5llMX~*De0P7B*3}A-Q3!wBTuQP-zzyHnUyz^yVZNiL2F#=g9K(c^Ty%2>%^iq`{Wv5HYpp`EF1NH=Pm3 zo|#R#;SSaYLan!NtUyu>Oi8RJ(-(|eUMo@e*W{6X7hWV?R7HlLiORH}bIfJGJT#07 z4o{w(c;6XPlBi*f4=5H{RbCf$3bjE@UM5xoaPL67ji_CUG;)H}$jb?j$1236ZX1|O zaU1*Du@}76HvDG62!|**eb@71HP+wKA5>&hYYnH2aME_h`mfAE6j<$R%wK zMKECrtj;bkk&DLXWAL)X9#gsB|I%JtMu3_rXxYT;L=qWXx{ADZLSiEJ-vY8}Y3}W3(*a-bdGi#}<6qqt4r>${`FlU+TyO^XoTBHB zozxIRogzvgX-+9`{rp}DlVRT79j(gAARJhP?Al=0=eCg)A^MOw_re&Ptwwd%Pj*?b zoDaDAt^&zDB2r6vNws*S@7(}JJOe4r}p}12smTll&s?+uU z##DuuG{z=T7OM?}cLDZ!&kHd$`|w-kcKyEf z|X52%J9BLkc*s5P3ka1 zO@)^v%uoG6QHyVQ#>Mx&$vZ)@*DfFX_vfC`fD8)-3<-ly+e?YVELvHA8jX*&vOzDt&AB=@JW<^AF8a7+059;X<*hyTtH*gV(o-;uJb^fyA zR78vS-E$+m|7mDK9dTH~tE5DpVSewRXbY_E7@VQ+cj;&MLL;1VKknGXeGsv$p8`Ry z+4gs(({4r?(`tA-_fCEO425Q-dMR1@LxhfZD4*WSsV(to{dwM@@n-AO2a*%t551nX zjHdo@#HylMFbvi@n);41zBl`NX4ARG<6) zc?D@bAh#RBT?nD+NKl-x7xsVfV$q-+L0D|=Ohm2uQ?olZ+#K1W{Kf5~OYPkKqvIM8 z-25cXJ2k)g5ino%IKFNT^8`@@Yxrtomftd`o#Z5yVh7-QCWeYjq zVy!aNcUGN0R9e&J558^#JEyV@P@a~Azk*NP6XdKPa2bIFF^^G^nH>w)>|KkNygFCh zA1L7)ZLXU`n~|SCccQ8irP&fJA9ErtgPA~xz_D>L_2UsZzD_}{0u-d~uaMeSj2RHR zrWe2bf$wGd6j0nUO^0*;fKMmrxiIH2Jyz;Em5@Kt7zKS8yH#Vy!Qi&F#r zsZfy=r1t7%nSifNRl*uO93Nk0%((+zdIuVffR!F1dMHFSrXZ&!PKEYKeD$m19xf7{ zcI?8zTU!F}e?6@51nv%}l~#1{;d^q8Hor|&PG4&*$=LfFQ8>Ppqq7pKG$!=x2_9iidwc&>?;ry1ED@-P*7M2y3bBQ_qoL?Xte>+2U?FZ;wP z$sj`C&kE--`7AH}niQbn z)jcNC#F&Sm>AMhXg9NU;f>ip91NRM&L{}4iTQI7CmS{FPCd^ObCbdG+RO84t`$2v! zi1M@r7aJd}S&m#gM@eMABMPSUX~BS^%@(%tygqGYML~JO28^L)0!_K$|I--$pVaVY cwE8ntMeSfBJn9z{LMREy%P7MtrAz|C@Brn14Fm;Aky6`ARyh{DJ3Nh(%s$M@vZMZ z&;8zeew^87&8of6+N<^nQ&pD1#UjH3006jhvQTvZ00lV&gaT2Kch@n{I`W6qSxVbk z17_juW(+q6h?~Jo%)xSY#vjbp&5g}G9DkY%0RU+9R+`$*+DeK7rZ77e#n(-5rcgZOom)CgvZk?1dqRjja%{m6v#|@Xvk7ppf&X3_*W zJ_$oCot+&7SXtfN+*sT=Szz!FtnB>!{H$yotQ;K7NDO8t4|`{0cV>GhntyYEnmd`o ztsI=KVD{j@9F0w2F3!Rbq^AFzf}O*E*xEb&YnhM>#_DeDz{<|T_IFDEMpRPz|D)R3 z{Ri90S>619^!;BMJ8612n6s*zJHcGwrpOm(LGxFXgMcL5+}Ifg*Mz}r|GkQ;mM~|S zlO@anEGhYqRRc3>S=pPx+?-zhgGNb7K+fLD+1TFHTn;J>L2_ZSvN978=jW8-=ip&y zgK|LG*`;{+#5u(!B-y37c*LRH(tI5MriH>xUF^*5o&Qa1_CK^7|CRQyIoLTMB}2{O zR<7n|(r}m^_#e|2u==mMa7+JJe*dC1`|rB2{a0F6q%y33U+(|)vi}W2TF~F&e@qwo z@E_whw?|q$9BJBR^LVWQ03Ep;R9w@2b}s|d`I*-2C7n(z-3+|*g>75Ub6(rPmpvbG zg9zDz5~COP=x5MnD-`4^f{KG^)AlTW#nxEGFW}ONNyvURdxbKtz}Q2fALIqAc=Pk! z>E)EZm(aUPx7O36jb;gI> zzWxb$CM(v8%CrOEG2=@0^z?kl{&m9&3T(d;RULT5kysbP`!Y^yV%i%)vWy}~Vr_e5 zNIkBe?fvi!TFR@al)QAn!kyw75=ncPgfQCzCdBc5G=K%YcXiqJJsIa8W&fIyLDoFH zG%cpHmZvfp7D-7i-id`hzI|r-;CCGUL@mZtK(LyT^!fGyh6ySMi+4^vQFFT)8F_oJ z$bES5*RTFLiPVr*cZ=oea`8Zj=HndQ+TE>}zP^4(Cz{cay?yN3n%u(shI#Vfq$I(; zFXiR$!Ap8NIDwz>M_hK-;X3N-LGQ*h((;Zj;93QH5J(K$n>VV3`xlp&A)PsSz3asB zUS2=nGP#&$kBJcGj5c8+td z6c(m6H?P~-{g`}*iKtI(183FM9ew^>mr5oBOn8R)6^Yu8s@Rh$6|TW!tG}^9PZxsd zxNE|MwOo66cm&F>nb>hzQV_Fd*7$Y;Xc=UVlSHY?Lce@{pPq73Xeitv<=fj$&?!xH>$KF- zZTWA~e5p4?9rJ1*J9ekA|2zzQ?ddTHibUm4(U*==K5%&=?cwq1_OdWm17c*&DCEZC zwL9te`*(E*y{&tcPC$BkMa9_c_INfOAv=~zR?B&>=-soSR$=s3r-Q^-{ni?{(HeR7 zc5^p6PL*RQ@Y{EeDX7)Z`UZ}^pJ}BnH#%O8WJ5K=Ym>z*pH6P#tq9QhJx(@i#ADJf zcXxFinc3W)lZ$vS4~hDeXkO4rw-|Z5*&vjIajk`i6Va9o@t!rgl@b=yLr~(mxNACZ z-oKY}^#WnMVnT(`0&#%f_dv^)2>D!gn)71jVv0b>CDv;wgkXg|eyK=T?=25Sh?G&6 z+hO9eu4l|_qBsH6Ian&eVL&;7w4lgRwZ^TX0juCEpC6uB&~u0D6Vewia7*p)ZBN$9 z@-j0;dAQ2z<$m_yAh4oo;F7>K9DHG}YH%xg3?b^-`s*=NG@pqb7Gh$5Nm^>w!}i_M zeJNO_tqxg$SJy5ch&CI4NTF}wZPRg2%ftjDx>_IvquF@ogv(hK*3<&KNWZ#1eHP;a zzBD30mjW(hfH77(p2%sHtUX>AqvhLA7EQxin*%y!AH|xwrhnV1y6jj1*Ub3EvXqj) zed|d~`0eU!X@ra1P<=KwHff_=gfxuxYhNaWQTIL@y`{5R8%f+ZhX;$k2QKW*BQBH?fE*_ zrX9CXMg$4aEh6*{S(4y3{tnF7*Z51{>b#e>cpdm{F^Yb_oXQCv&f5C0c3g1I_Z2O= zhUgJyLO0!m5l3(l{XorQKTi{t^VKgJ;=LKi)i(bvuJZ=8cceorA|k}e=`vR%tX@#Z z>O}IKG>Yeen{%ZfV{7lHHqHC@Hw8~OMybJs1+QE2#hE3HMLVDu&A^6$nab7U)7w9f z8ce$~(<=0QCsz*}S-l!=)`mX2Gr9N-YU7R_T{nXqo^m6eg>f&gTa15GJ)j4>dRILL+7G z7`J5m#=CX93kXW)fSWx3Rw*wRmd^ir())DS$OP+p9;w6B%?t=J8^L)Am<*6oPUX7M z+NC-^bH)Z99Un!%eapSmfSbg+xxaWXOs1*u+Bh14V1LQWER#$?vP5$kogkXeo2r<^ z$`6I~+RoSM)5oDdx$ax9I63i*8+AT5SrmOR#vCPuWcQ@@+L^~Lfkd5&#c(jd{Es)A za%n)a^8$_DQZE(_dKZcpdkk>|UG6s%#b}tr70nUC)V0^0R9RxFP^DfgFF=}4N3&M~ zmEReKu9CK>d_dqmY=LF5@e)VgRu?Dw+qX{?f{~}5?r;oo4xiJF`{rA6NbrkB*G#cn z+}#h>$BmxVMvuO?2yNtLFHH*}e1lT&@NnRJTm40?)u}N^ysOMNApKYW^-6dV%1@RT zE&%M^Cdcfpz8D2F;_HJ*m8b$uYaZ>2F#W!Me(x*P8L4;8PQ8wALwnfa2l^MSt*zp& zX{ocKcSm{?+xz4Of(L^8*_Dlmu?q%x}>b0fi+j3#Nsf2w{Q&5b#Qt>JliVBJBqKvQ3DPF?3WBN1-h_QjgUsp=CZ69PUnao_qnd~s#g3jeB_ z%ikSC6CZ|CKi_4hMmmLvvB{(FS~evyE2IgSd)pMsFBC{Y{V`Ijj?K0xq{9&PFdRw* z+0Zr3z}QM&kRG*3K(xOmks8x)lNg8Xv57jq)B9J|4dL6EgHEw_5MAbIyn#8!t=^vYx(&-~0G1l2DYaQuy= z%g}=M#QjCsBBMc%p~SgISKcWT=luzH0Riw`elv8P24_#PFSUvrWP~fVmTFk?^JcLM zNhes?b~KFoH9|wbrUu5xhXw|G94&sR(#FeoAvgL$qn5d_%CnO79i~Bjj)6G^yskN! zmYq?Y`p`5eWLO|6!l0Y7!c0ye7R1V09~E^s`nD4Ft{EhfA((c*+hGMWb zNEeE_CiepB4nSD|N5EKut?2P=TQ4C2x6(o>abV#MPS1+5BMGLij`riWM(vLusj;#2 zvlMT8@s zv>8NW4`)(DJ^0)3T0jeWU|>GLOT>l_lop=C{rVu3%3hBKSldTC^a!Mm<0=MG-$jQT zq4iePx^W;VF}1;URUW5=tq(VZyNg%P@HChNN41t@Kl1UGppD2tGDOkGtX&8Tl9N%% zG%L@suPn)oL6$kqK5MLZ@PgLXB>7zNr#gIHpJhD>C^@r8=iaQWuGYKmL)M;7OFtDX zlFJOO3j0j5TyL=t;pGjRC6dV8sgMx*2)>bcsR9C8iBUlyh&FF#dRu2_OJsD*^z>{= zODoh}=!Vo8a1;X<18C|eRo1;L9BDq^KGHi9?zN4N3kwKLjE^(Z(AaMjO}pkcG%64i z5p^X;M!pQyhEUp*R<3eb^wKzldIX1Hu-mg4ZG}iRHO*&#>%D-G9^;jUTw zNMN8<_Ff6AH{9sYsU5}nbBMQ;{q^Jf!#bbsDk zJooYS<>v;@qD{*`zw(CeB(ZEv{;qCw?vs35+FaxID^p{SMt2gZJASI;w!5QeJWl&= zrpE5qqHrDsjgF360!3<7l_e!7-EwW~jL(+pB)G4BPuWGw+WL9mR&7(o=>RJ$n~KYf zn5?SXg?>#)U{i(1Chs5p0GJ?2=>8!}gRX=##aT?>@^3UCi3>Zs^ZWNUs?qpi-sEqH zySeVlYV5)1=f(d1k`f~lX~_kc$QXw**m*7~=GpgI4V@Fke~~O=xcpVxCIyPIbwRNe zC4WD0L5FHltKVLqkX$rbl!hQ61<*-x9~1`eTWr3)70$}IxsE%v7*0-iIVhp&5*q4x zGW1yTo&oem_;j#SZ1}@EpIBcX4%r4p7Ny|P^~|P$c5J=b?EYMLAQ)Le#v||-A8-0% z!hf}vJ=f{aXb178cx*TB&*A%>p68ywOr&1#8)k9zzHXK*)U~@x&7%8-$l;_;cO{AM z{rn}0Y<+i!iRpDAT{f3lIy<K555<*L-w6yf7&0X@l=>uZzC&og{)ZJX|d{(z*I5hIN`8L_|f0_k|gO9|D zq9%#UQCxpM_e(aFk_yz^!Afg8{B(k0(a(@2HFCx>O#ac??d1~wy=*XDYzjX!CueXt zSgf?j7Agurx4=pVuK^;y+c;YE$I=y;#nMBgfBc|7Llaw4UdP`Fdv!^@kWVK}vxw0# zVItknOrS3-?MWW)po^0!SDNR#nobQ`fx)Qw6;bwAswQNsx-3tOA(okQvzoM6I}B1e z-0Rm@$y2<%G_PV7(Fm$$=bwIkqYRohoc&C)cXR6%-o*l;7QdR;)lS!;?f}s8^P@I; zU1k!c<(V}ieGi;qf^jcx1|Qw7UXfldg(yr#)x!H*`i;t(FVpo6ia-g=;b*Qf3Bn4wS`CQ%Hv4g9#trX5$JC=f<;Fy;@ETOgT z?tLGT4n-h-2bmvd@H_Q-I_d`~Dn!hd`OW|hRZbAXAnm!5jNZzM16>tO`gV0s>G|2} za5-il#7W>~YrSi6+i)1^rU=)1y-NyZro9;GB3k$1p?zwq20LRwZ8|GmUL9^TimKP=SGK;+>1`cL1# zyH?CiCIBC0B>FJ#vXz97ksvZ-W8+~un7L2k(KPqMl zvG8@l23`w}Mu&!AEDIG!qf7<7R#Hsm>X<^Cdgyt1OWzxr#`UUeg@h?jDZs;rlhJUd zY4u=1eeaznm%DqNqn6@F2&6YYal!$FQZbrja93AWhT8c1ZN%jG0S!btDG^UhU;m1= z^-NApjn4J;>z64m*iQnfQHcuj^NH~ylZoH@UFWKVe;Ql-b9Xk} zn^}=R7wE+P)oQ4&KD4_mtU6KOs8EoAlT8V*vXPU+RV00MziZ>d#_I1jAwJq2D_#{BepDu6z~c_qq<%BPlNM$oHMWgls%cW8Pa5GU zEM4FdwCGqeBDHDpWS4i^U3WyN!QU>s96|>7gALF(57(IuTa8ImVuvOJc8iN_*=XQa z;^I$QB2Y-3RHDMW5@sXDF95W}Yb=oirj*YJ!llX>%o{z`yS9>(*|^dlA1-m-+)_p@ z_jbl+B%u~L&v2b2I)V^=qf@0XP}xZaS--s`BxJw2IfwKD$<-OTel0~sQYu8hJztzr4?P)NoP1pGNKC&zii^5J~lSS4Xh5OPQH<$P= zR(mPzo5a2;gVX;+CynVUQz1yD@x=Bp?DkWu!~Jf? z`E%B;%5A8;k6dIzdp42<#OLR8ehD=m9ru2Si!~Knd~DFjeep?uj~ZToc1@hfqL(Nw z-|}!XmX}4YQNYD>hz~+{#i7!!piPJ;7jn11JUHauVeta$dRAQ`z0|M4bZL1!a=u2J z&8K{6!a09Xww@UeXP`~vCIqoCC0uN|Y0bnQwziH=Puu^xc{(;bd%RGqbrbW9H#K#3 zUq@6tH8tLWxn>QS)2F2+;O)hN8IbGEu8S0PVN`!jby#UNb)vPWd#{?LqcFo|!Js!3EUq|s3y`rlT9 z^o1Yqybwv5?j|MO(oUAOnLG9m?nJ{L2!K108>}QNYmAKXp`4eSZr)6_NJ4&x5%sohek0~jDik25nW83 zytxUKxV!uJ=CC;p%(mRWk53l=8@&NOtT)m$myUb$*Pq}{F0QJ|!p#)`Ej946v4IcK zSk-GbTfXY9qrlk)oX%KWh!5L1uqUPYxAH)=Lpy?c9tdA>=S)6x>*b*)Zny)AQ7 ziFYHr=HLLx7zUB@TeJss6>8mlm~A68x{;>Yle6VGHu^FzW8pG5pi4BU(%{LR1@4-b z|5TXr_KW|SHjSE^>EjT$jh@Q_R z{u4lSRPdEz9SU#E6An9FGn28LG|@$xsGhj`T)Jii0z5B7DQj)5DbdlD#(U_PRQVl` z?TrNZ)TCD4#oPNT;K@%Qyswe!HYwAba#rF?M+TL6^eZtU`fo#&Ok-b>sl97^04>J0 z$<*5qiA!{dHq>?o20E2gUQv{+f_HA^htAu2)l=kiU!-fU8Gzmv2lEAd+S#O#F>`6k zR4mvg(qoHYbv5}q&;OA5K#hTjpdbb<`5=STs1el2=j!MQN8F+(^1NoR?rovPd9vrq zO3(GPF3bL*SGPNb*gQ&@KoN3(5eZzbK?8#Wv5{%cJ}JRcd`@}>mHt64nH~ML-j`Cy zx@`5-gU9A?eD?+{YnZIi;^WT*W7qTT+*E%v?Jdz|y%YnTy+}zZz@YgNF2>gjzO$La zicWg=x7Y0i3?eEoFQ-^O%#QjVCzoW}gUfLRnRNyw=xYdq&NDOZ z3n`T_QRi@RahuZK-*gjiQh@Wj|NOyDVvVaOM6bVHW@Rk{Lb4o`#u@F>+Ra+B6#X7* zA8|;!XoprdZ~da>-Wz&)yomDfo2;?(YG^pSpbsK6LzV+HGLh~#+fNu@y)M4KKYR?U z>sSQ75?|8HmcACbp74&3Pn^8lj<}B`2x3HLM3hh0etIy9^PFsCeXK+5;rxhoMzt!* zYMuJ!XD=PCd$+BU#fiULH(i>$8K)9?gXu1Op^YJLzu5FRTO-Vo5!Qb1|0E)_^BlSCfq~r_v!7o^ zmFMsFoNpA%Dg^+jyXB^6u!W}955Ed7TwM%GI*=_Hh!H6KJt+RNl-P!ghT+lYbmXhk z{(gp()Qi=gh$;s_xpp5|i0COU?#)A21hQ2MNn&OyB6+cAQ{F@5!Pw$=6)ditUbh(j z{OuRsGU+$gPqANmtnfusfugAUC9)(fLMmeAF+aPYiaWS$8BIRie*i^&9VZd>eSQ}) zCs8L$C*j6xEufr?e);_g3u=Wj9#7vcs;un@FPv4sn(2P2y>cF%nDX223mP*!B|M03 zix6%*Z{>5&sPM9ZDEVBIgFfNFK{14=GrIU}g*oR^(0n%q1(?qdUu9;em&5fyXt>C2 zG0Kwb{o482nr_`?-xf{Guqci-SE`Ys86(AH)T0Qe-*nT6tzKIH)YR^#$}lz-nZI2; zXjKf{F4Z?-LL{zx9hWtHeiZ%HuS`s~s{`CDJrj-&NTEr>e_>_!_6hn`a*TgxJ7z)6nz=owLa40%uqfGb@BtXJ@Lh92aXm)FZ4m}!j6vGXzwqMd3r8J}kk z^xMNK(`V%lxTqh7`w)jalil6Hw^w~x9vj9%w_CKsna$&)#@828>fxoOAEc$pXBX<+ zF+5z2t>kb;?)GMEdl8e~fp1XzDt`&->%QBCED4GQ1b9dLwynfa)-@_*y|2tKDoUK{ z9O&;1EH)Bb|I48z}6%p9;o~+ZfKM@VPb4yw0$IWwK{Df6o*2RlvqWS@wCfLzANYbd8qA_Pp&|NzL`H;`D9?WKB!!M z(d-tPa_LWlOY4@wdM7?Z zOuW%}PgE3DBU3`%Y!#=v`@Sv;$Q@gU+zkniq-wRlZ==QBMz(go{P^LBbf-caPZu^P zo4qy$?Ow%&PRpFwSf_0cri_Ib`E1VD+lJjg>-=e0pKho(#o^^D6u326>~lGmD^#E< zv_)aqz!Y@43AjL|4uViq`%d%x3R*obv&)?Q>9)qhf|?X<#0lRvVIi9`;)FQtS@D6n z-T)U-yY6ZxM;|1`dm?eU$UYO3(ps(o!};@gKwrVmw&12GB`Z5jl>G3Zk>KI|uhbwJ zdiq)IWZ6jdRY~}I@eV*HLf$kYYpYR7MMCe^mZd3jzAWq$@({k$(i_hb@t>FAa3mIs-!(bMKHy*)hYX0O7~7khGrw~`^e*@-rjrCj++O~Gt~_)*`Xd8A3ewx(-#14uRRGlk zkcp`9cS>w@en|xd%z|#wHod}a3xcYda>rFrkyiYaQ__+PK||FAH44gNM#lTSfK0KK zK}5s1ZzwvqV$k5SUdn*3>7{xW0HGo;)6Mfe3{NJ-OTDi5a1u-F>MC~w+ zt}dxW)~r$0KQ~jYz9{H^0kz47Z+paNZ=`c?qFKPXx!m>j_(h;{3TXIUV_n_NGrX}h zPC437!l4yWlw+rsn@i4kAHO?x1R0fU2Q{%VGn1jTO%yyE(cU@3kkVletGONjV38&+ zF{03x^F2>$HQ50AL6y;#26Tg!{Cs*X9+)7HhEDNBlh zIq(on1l$=9ye>rJlQoxGz1TNgtWz_CJzeB?`i`vI)0<8+fYR5KX<3_V@iUSeLkiPp zEAka4R#fVblWCabG_1{4{R49u%y0ZuA1C#)HaD1n5_yt>r)-R59TgR`MMaGS1lcj~ zzU7pCS?N}y;@4J>0~52XDW-5NPE9?do0*|YR=bsq_B*?iZVp6_T$bLc1Y3 z1Jeohau|}cPzmA_EH=u@>Ebj~=uZEHi9veDeEHc?bYvs$JB7DzY2a>P!Z09#mPQ<0 zHK(SA6qANc(*DctWHuV@u-JNhg#o!%R#y>Tqy4_1&6K@NYgRN{yNS3CHnnRnd)Y0w zO-*3zfcfa?SIF&)9UPOS2HUhi_)!I=FGLk4tD zBkQ$OP&-xnD0u3*#2yH-vSRNG%kn(gk9aA9gNscjN}VkDDxv>psQB@(9>4bs1;qtc zJ@!URKoyk~3AIh5A#zSavV6@SKe4vk+kGts33zZq&|f8FSYC~?p^0z2f4{J`gh9m5 zZr(`Bp5iGX5fTKRla^^05BmL9iRD6N(2^@SG|JY}5@xs0mQp7CskdlhzyNy)C4C+R zv2b)_@S$tL6?`hsfcSa~3U8-s1ZK$$UOp0Z;AB3y0kbGxNCovs<)iU=;29YoNb0}Y ze^fzNn|Y*LF;toIuIXPuG%=%uDsf z*6f@@sn{s~_6PO%kqbb{h54Q+Kco~52!-4*tB%qp|G$*^XsT-b(`2-ctJeIct^@#7VU{HsDO=2GJbZ-y$aDJEMhapb2@ z^zHxD@~^Cab6Z~{9AoIn52;2wLV|HkkLM0H#$o=}R{{WB|9neA#s7Vx|7HP~eySky zK>SagWxN^2{*qn*Ao%=9kmY|{rvFe2+*6@o06148$ZaOia{qomC?};1Es-z^U}xiE G=lDPAnSdPt literal 0 HcmV?d00001 diff --git a/src/tree-grid/inline.editing-stack.json b/src/tree-grid/inline.editing-stack.json index c7760cb5..d1da2c17 100644 --- a/src/tree-grid/inline.editing-stack.json +++ b/src/tree-grid/inline.editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Edit Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' },\n height: 400,\n toolbar: ['Add', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 90\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: {required: true} },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true} },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',\n validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: [{ id: 'CellEditing', name: 'Cell Editing' }, { id: 'RowEditing', name: 'Row Editing' }],\n fields: { text: 'name', value: 'id' },\n value: 'CellEditing',\n width: 120,\n change: function (e) {\n if (e.value === 'CellEditing') {\n treeGridObj.editSettings.mode = 'Cell';\n treeGridObj.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];\n }\n else {\n treeGridObj.editSettings.mode = 'Row';\n treeGridObj.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n }\n }\n });\n dropDownColumns.appendTo('#editmodes');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Edit Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' },\n height: 400,\n toolbar: ['Add', 'Delete', 'Update', 'Cancel'],\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true}, width: 90\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: {required: true} },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true} },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',\n validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: [{ id: 'CellEditing', name: 'Cell Editing' }, { id: 'RowEditing', name: 'Row Editing' }],\n fields: { text: 'name', value: 'id' },\n value: 'CellEditing',\n width: 120,\n change: function (e) {\n if (e.value === 'CellEditing') {\n treeGridObj.editSettings.mode = 'Cell';\n treeGridObj.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];\n }\n else {\n treeGridObj.editSettings.mode = 'Row';\n treeGridObj.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n }\n }\n });\n dropDownColumns.appendTo('#editmodes');\n\n"} \ No newline at end of file diff --git a/src/tree-grid/inline.editing.html b/src/tree-grid/inline.editing.html index b79c92b7..e01cbf88 100644 --- a/src/tree-grid/inline.editing.html +++ b/src/tree-grid/inline.editing.html @@ -18,7 +18,7 @@
                                      - +

                                      This sample demonstrates CRUD operations in Grid. You can perform CRUD operations as follows,

                                        @@ -52,3 +52,4 @@ documentation section

                                      + \ No newline at end of file diff --git a/src/tree-grid/keyboard-stack.json b/src/tree-grid/keyboard-stack.json index 6e354c64..773b5cc4 100644 --- a/src/tree-grid/keyboard-stack.json +++ b/src/tree-grid/keyboard-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Keys\n \n Description\n
                                      \n F2\n \n Cell edit\n
                                      \n Enter\n \n Save request\n
                                      \n Delete\n \n Delete row\n
                                      \n Ctrl + Shift + UpArrow\n \n Collapse Child Grid\n
                                      \n Ctrl + Shift + DownArrow\n \n Expand Child Grid\n
                                      \n Ctrl + UpArrow\n \n Collapse All\n
                                      \n Ctrl + DownArrow\n \n Expand All\n
                                      \n Ctrl + Home\n \n First row selection\n
                                      \n Ctrl + End\n \n Last row selection\n
                                      \n Home\n \n First cell selection\n
                                      \n End\n \n Last cell selection\n
                                      \n Up Arrow\n \n Move row selection up\n
                                      \n Down Arrow\n \n Move row selection down\n
                                      \n Right Arrow\n \n Move Cell selection right\n
                                      \n Left Arrow\n \n Move Cell selection left\n
                                      \n Shift + Down/Up\n \n Multiple row Selection\n
                                      \n Ctrl + j\n \n Focus TreeGrid element\n
                                      \n
                                      \n \n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n height: '900',\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },\n columns: [\n { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'TaskName', textAlign: 'Left', width: 230, validationRules: { required: true } },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 120, textAlign: 'Right', editType: 'datepickeredit' },\n { field: 'progress', headerText: 'Progress', width: 130, textAlign: 'Right',\n editType: 'numericedit', edit: { params: { format: 'n'}}\n },\n ],\n });\n treeGridObj.appendTo('#Grid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n Keys\n \n Description\n
                                      \n F2\n \n Cell edit\n
                                      \n Enter\n \n Save request\n
                                      \n Delete\n \n Delete row\n
                                      \n Ctrl + Shift + UpArrow\n \n Collapse Child Grid\n
                                      \n Ctrl + Shift + DownArrow\n \n Expand Child Grid\n
                                      \n Ctrl + UpArrow\n \n Collapse All\n
                                      \n Ctrl + DownArrow\n \n Expand All\n
                                      \n Ctrl + Home\n \n First row selection\n
                                      \n Ctrl + End\n \n Last row selection\n
                                      \n Home\n \n First cell selection\n
                                      \n End\n \n Last cell selection\n
                                      \n Up Arrow\n \n Move row selection up\n
                                      \n Down Arrow\n \n Move row selection down\n
                                      \n Right Arrow\n \n Move Cell selection right\n
                                      \n Left Arrow\n \n Move Cell selection left\n
                                      \n Shift + Down/Up\n \n Multiple row Selection\n
                                      \n Ctrl + j\n \n Focus TreeGrid element\n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n height: '900',\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },\n columns: [\n { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'TaskName', textAlign: 'Left', width: 230, validationRules: { required: true } },\n { field: 'startDate', headerText: 'Start Date', format: 'yMd', width: 120, textAlign: 'Right', editType: 'datepickeredit' },\n { field: 'progress', headerText: 'Progress', width: 130, textAlign: 'Right',\n editType: 'numericedit', edit: { params: { format: 'n'}}\n },\n ],\n });\n treeGridObj.appendTo('#Grid');\n"} \ No newline at end of file diff --git a/src/tree-grid/keyboard.html b/src/tree-grid/keyboard.html index 8ec834ba..d4aaafea 100644 --- a/src/tree-grid/keyboard.html +++ b/src/tree-grid/keyboard.html @@ -152,6 +152,7 @@
                                      +

                                      This demo showcases the keyboard shortcuts applicable on TreeGrid and also lists out in below description, how those applicable shortcuts interacts with TreeGrid actions. @@ -201,4 +202,5 @@

                                      More information on the TreeGrid keyboard interaction can be found in the documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/localdata-stack.json b/src/tree-grid/localdata-stack.json index 6c4ba15c..89d8bc46 100644 --- a/src/tree-grid/localdata-stack.json +++ b/src/tree-grid/localdata-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/localdata.html b/src/tree-grid/localdata.html index 8affe69c..fb6937fc 100644 --- a/src/tree-grid/localdata.html +++ b/src/tree-grid/localdata.html @@ -4,7 +4,7 @@
                                      - +

                                      This demo shows the way of binding an array of JavaScript objects (local JSON datasource) to TreeGrid.

                                      @@ -18,3 +18,4 @@ More information on the data binding can be found in this documentation section.

                                      + \ No newline at end of file diff --git a/src/tree-grid/lock.row-stack.json b/src/tree-grid/lock.row-stack.json index 5ec5dbe3..af945847 100644 --- a/src/tree-grid/lock.row-stack.json +++ b/src/tree-grid/lock.row-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Disable Rows
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageSize: 2, pageSizeMode: 'Root' },\n editSettings: {\n allowEditing: true,\n mode: 'Row',\n newRowPosition: 'Child'\n },\n toolbar: ['Edit', 'Update', 'Cancel'],\n enableHover: false,\n rowDataBound: function (args) {\n var key = 'taskID';\n if (dropDownColumns.value.indexOf(args.data[key]) !== -1) {\n ej.base.addClass([args.row], 'disableRow');\n }\n else {\n ej.base.removeClass([args.row], 'disableRow');\n }\n },\n beginEdit: function (args) {\n var key = 'taskID';\n if (dropDownColumns.value.indexOf(args.rowData[key]) !== -1) {\n args.cancel = true;\n }\n },\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 100\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: {required: true} },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true } },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',\n validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n ej.dropdowns.MultiSelect.Inject(ej.dropdowns.CheckBoxSelection);\n var dropDownColumns = new ej.dropdowns.MultiSelect({\n dataSource: window.lockRowDropDownData,\n mode: 'CheckBox',\n value: [2, 6],\n width: '150px',\n showDropDownIcon: true,\n popupHeight: '350px',\n select: function (e) {\n treeGridObj.refresh();\n },\n removed: function (e) {\n treeGridObj.refresh();\n }\n });\n dropDownColumns.appendTo('#lockrows');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Disable Rows
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageSize: 2, pageSizeMode: 'Root' },\n editSettings: {\n allowEditing: true,\n mode: 'Row',\n newRowPosition: 'Child'\n },\n toolbar: ['Edit', 'Update', 'Cancel'],\n enableHover: false,\n rowDataBound: function (args) {\n var key = 'taskID';\n if (dropDownColumns.value.indexOf(args.data[key]) !== -1) {\n ej.base.addClass([args.row], 'disableRow');\n }\n else {\n ej.base.removeClass([args.row], 'disableRow');\n }\n },\n beginEdit: function (args) {\n var key = 'taskID';\n if (dropDownColumns.value.indexOf(args.rowData[key]) !== -1) {\n args.cancel = true;\n }\n },\n columns: [\n {\n field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',\n validationRules: { required: true, number: true }, width: 100\n },\n { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: {required: true} },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',\n format: 'yMd', validationRules: { date: true } },\n {\n field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',\n validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}}\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n ej.dropdowns.MultiSelect.Inject(ej.dropdowns.CheckBoxSelection);\n var dropDownColumns = new ej.dropdowns.MultiSelect({\n dataSource: window.lockRowDropDownData,\n mode: 'CheckBox',\n value: [2, 6],\n width: '150px',\n showDropDownIcon: true,\n popupHeight: '350px',\n select: function (e) {\n treeGridObj.refresh();\n },\n removed: function (e) {\n treeGridObj.refresh();\n }\n });\n dropDownColumns.appendTo('#lockrows');\n"} \ No newline at end of file diff --git a/src/tree-grid/lock.row.html b/src/tree-grid/lock.row.html index 40a99d54..5728a077 100644 --- a/src/tree-grid/lock.row.html +++ b/src/tree-grid/lock.row.html @@ -18,7 +18,7 @@
                                      - +

                                      This samples demonstrates the way of preventing editing for certain row and disable the locked rows to differentiate edit and non-editable rows in TreeGrid. @@ -45,10 +45,14 @@ documentation section.

                                      + + + \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/multi.sorting-stack.json b/src/tree-grid/multi.sorting-stack.json index 18c29420..298f7eeb 100644 --- a/src/tree-grid/multi.sorting-stack.json +++ b/src/tree-grid/multi.sorting-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n Order Name\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Category\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Order Date\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Units\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sortData,\n childMapping: 'subtasks',\n treeColumnIndex: 0,\n allowPaging: true,\n allowSorting: true,\n columns: [\n { field: 'orderName', headerText: 'Order Name', width: 200 },\n { field: 'Category', headerText: 'Category', width: 140 },\n { field: 'orderDate', headerText: 'Order Date', width: 150, textAlign: 'Right', format: 'yMd', type: 'date' },\n { field: 'units', headerText: 'Units', width: 110, textAlign: 'Right' }\n ],\n actionComplete: sort,\n sortSettings: { columns: [{ field: 'Category', direction: 'Ascending' }, { field: 'orderName', direction: 'Ascending' }] }\n });\n treeGridObj.appendTo('#TreeGrid');\n var orderName = new ej.buttons.CheckBox({ checked: true });\n orderName.appendTo('#OrderName');\n var category = new ej.buttons.CheckBox({ checked: true });\n category.appendTo('#Category');\n var orderDate = new ej.buttons.CheckBox();\n orderDate.appendTo('#OrderDate');\n var units = new ej.buttons.CheckBox();\n units.appendTo('#Units');\n var unitPrice = new ej.buttons.CheckBox();\n unitPrice.appendTo('#UnitPrice');\n document.getElementById('OrderName').onclick = function () {\n if (orderName.checked) {\n treeGridObj.sortByColumn('orderName', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('orderName');\n }\n };\n document.getElementById('Category').onclick = function () {\n if (category.checked) {\n treeGridObj.sortByColumn('Category', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('Category');\n }\n };\n document.getElementById('OrderDate').onclick = function () {\n if (orderDate.checked) {\n treeGridObj.sortByColumn('orderDate', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('orderDate');\n }\n };\n document.getElementById('Units').onclick = function () {\n if (units.checked) {\n treeGridObj.sortByColumn('units', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('units');\n }\n };\n function sort(args) {\n if (args.requestType === 'sorting') {\n for (var _i = 0, _a = treeGridObj.getColumns(); _i < _a.length; _i++) {\n var columns = _a[_i];\n for (var _b = 0, _c = treeGridObj.sortSettings.columns; _b < _c.length; _b++) {\n var sortcolumns = _c[_b];\n if (sortcolumns.field === columns.field) {\n check(sortcolumns.field, true);\n break;\n }\n else {\n check(columns.field, false);\n }\n }\n }\n }\n }\n function check(field, state) {\n switch (field) {\n case 'orderName':\n orderName.checked = state;\n break;\n case 'Category':\n category.checked = state;\n break;\n case 'orderDate':\n orderDate.checked = state;\n break;\n case 'units':\n units.checked = state;\n break;\n case 'unitPrice':\n unitprice.checked = state;\n break;\n case 'price':\n price.checked = state;\n break;\n }\n }\n\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      \n Order Name\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Category\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Order Date\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Units\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sortData,\n childMapping: 'subtasks',\n treeColumnIndex: 0,\n allowPaging: true,\n allowSorting: true,\n columns: [\n { field: 'orderName', headerText: 'Order Name', width: 200 },\n { field: 'Category', headerText: 'Category', width: 140 },\n { field: 'orderDate', headerText: 'Order Date', width: 150, textAlign: 'Right', format: 'yMd', type: 'date' },\n { field: 'units', headerText: 'Units', width: 110, textAlign: 'Right' }\n ],\n actionComplete: sort,\n sortSettings: { columns: [{ field: 'Category', direction: 'Ascending' }, { field: 'orderName', direction: 'Ascending' }] }\n });\n treeGridObj.appendTo('#TreeGrid');\n var orderName = new ej.buttons.CheckBox({ checked: true });\n orderName.appendTo('#OrderName');\n var category = new ej.buttons.CheckBox({ checked: true });\n category.appendTo('#Category');\n var orderDate = new ej.buttons.CheckBox();\n orderDate.appendTo('#OrderDate');\n var units = new ej.buttons.CheckBox();\n units.appendTo('#Units');\n var unitPrice = new ej.buttons.CheckBox();\n unitPrice.appendTo('#UnitPrice');\n document.getElementById('OrderName').onclick = function () {\n if (orderName.checked) {\n treeGridObj.sortByColumn('orderName', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('orderName');\n }\n };\n document.getElementById('Category').onclick = function () {\n if (category.checked) {\n treeGridObj.sortByColumn('Category', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('Category');\n }\n };\n document.getElementById('OrderDate').onclick = function () {\n if (orderDate.checked) {\n treeGridObj.sortByColumn('orderDate', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('orderDate');\n }\n };\n document.getElementById('Units').onclick = function () {\n if (units.checked) {\n treeGridObj.sortByColumn('units', 'Ascending', true);\n }\n else {\n treeGridObj.grid.removeSortColumn('units');\n }\n };\n function sort(args) {\n if (args.requestType === 'sorting') {\n for (var _i = 0, _a = treeGridObj.getColumns(); _i < _a.length; _i++) {\n var columns = _a[_i];\n for (var _b = 0, _c = treeGridObj.sortSettings.columns; _b < _c.length; _b++) {\n var sortcolumns = _c[_b];\n if (sortcolumns.field === columns.field) {\n check(sortcolumns.field, true);\n break;\n }\n else {\n check(columns.field, false);\n }\n }\n }\n }\n }\n function check(field, state) {\n switch (field) {\n case 'orderName':\n orderName.checked = state;\n break;\n case 'Category':\n category.checked = state;\n break;\n case 'orderDate':\n orderDate.checked = state;\n break;\n case 'units':\n units.checked = state;\n break;\n case 'unitPrice':\n unitprice.checked = state;\n break;\n case 'price':\n price.checked = state;\n break;\n }\n }\n\n\n"} \ No newline at end of file diff --git a/src/tree-grid/multi.sorting.html b/src/tree-grid/multi.sorting.html index 20b1b069..ed8cbd5f 100644 --- a/src/tree-grid/multi.sorting.html +++ b/src/tree-grid/multi.sorting.html @@ -56,6 +56,7 @@
                                      +

                                      This sample demonstrates the TreeGrid multi sorting feature. To sort two or more columns, hold the CTRL key and click the column header.

                                      @@ -91,4 +92,5 @@ margin-top: 30px; } } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/paging.api-stack.json b/src/tree-grid/paging.api-stack.json index 08c86db4..552c7e75 100644 --- a/src/tree-grid/paging.api-stack.json +++ b/src/tree-grid/paging.api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Allow Paging
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Size Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Size\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Count\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Current Page\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var type = [\n { id: 'All', type: 'All' },\n { id: 'Root', type: 'Root' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var pageSize = new ej.inputs.NumericTextBox({\n min: 1,\n max: 200,\n format: '##',\n value: 12,\n change: function (e) {\n pageSize.value = pageSize.value > treeGridObj.pageSettings.totalRecordsCount ?\n treeGridObj.pageSettings.totalRecordsCount : pageSize.value;\n treeGridObj.pageSettings.pageSize = pageSize.value;\n currentPage.max = Math.ceil(treeGridObj.pageSettings.totalRecordsCount / treeGridObj.pageSettings.pageSize);\n }\n });\n pageSize.appendTo('#pagesize');\n var sizemode = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'All',\n change: function (e) {\n var type = e.value;\n if (type === 'Root') {\n treeGridObj.pageSettings = { pageSizeMode: 'Root', pageSize: 2 };\n }\n else {\n treeGridObj.pageSettings = { pageSizeMode: 'All', pageSize: pageSize.value };\n }\n toggleInputs(type === 'All');\n }\n });\n sizemode.appendTo('#sizemode');\n var pageCount = new ej.inputs.NumericTextBox({\n min: 1,\n max: 4,\n format: '##',\n value: 2,\n change: function (e) {\n pageCount.value = pageCount.value > 8 ? 8 : pageCount.value;\n treeGridObj.pageSettings.pageCount = pageCount.value;\n }\n });\n pageCount.appendTo('#pagecount');\n var currentPage = new ej.inputs.NumericTextBox({\n min: 1,\n max: 17,\n format: '##',\n value: 1,\n change: function (e) {\n currentPage.value = currentPage.value > currentPage.max ? currentPage.max : currentPage.value;\n var pageNumber = currentPage.value;\n treeGridObj.goToPage(pageNumber);\n }\n });\n currentPage.appendTo('#currentpage');\n var enablePaging = new ej.buttons.CheckBox({ checked: true });\n enablePaging.appendTo('#allowCheck');\n document.getElementById('allowCheck').onclick = function () {\n treeGridObj.allowPaging = enablePaging.checked;\n toggleInputs(treeGridObj.allowPaging, true);\n };\n function paging(args) {\n if (args.requestType === 'paging') {\n currentPage.value = parseInt(args.currentPage, 10);\n }\n }\n function toggleInputs(state, isPager) {\n if (!ej.base.isNullOrUndefined(isPager)) {\n document.getElementsByClassName('con-prop1')[0].style.display = state ? 'table-row' : 'none';\n }\n var flag = sizemode.value === 'All';\n var elem = document.getElementsByClassName('con-prop2');\n for (var i = 0; i < elem.length; i++) {\n elem[i].style.display = state && flag ? 'table-row' : 'none';\n }\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Allow Paging
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Size Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Size\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Page Count\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Current Page\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var type = [\n { id: 'All', type: 'All' },\n { id: 'Root', type: 'Root' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n allowPaging: true,\n pageSettings: { pageCount: 2 },\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var pageSize = new ej.inputs.NumericTextBox({\n min: 1,\n max: 200,\n format: '##',\n value: 12,\n change: function (e) {\n pageSize.value = pageSize.value > treeGridObj.pageSettings.totalRecordsCount ?\n treeGridObj.pageSettings.totalRecordsCount : pageSize.value;\n treeGridObj.pageSettings.pageSize = pageSize.value;\n currentPage.max = Math.ceil(treeGridObj.pageSettings.totalRecordsCount / treeGridObj.pageSettings.pageSize);\n }\n });\n pageSize.appendTo('#pagesize');\n var sizemode = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'All',\n change: function (e) {\n var type = e.value;\n if (type === 'Root') {\n treeGridObj.pageSettings = { pageSizeMode: 'Root', pageSize: 2 };\n }\n else {\n treeGridObj.pageSettings = { pageSizeMode: 'All', pageSize: pageSize.value };\n }\n toggleInputs(type === 'All');\n }\n });\n sizemode.appendTo('#sizemode');\n var pageCount = new ej.inputs.NumericTextBox({\n min: 1,\n max: 4,\n format: '##',\n value: 2,\n change: function (e) {\n pageCount.value = pageCount.value > 8 ? 8 : pageCount.value;\n treeGridObj.pageSettings.pageCount = pageCount.value;\n }\n });\n pageCount.appendTo('#pagecount');\n var currentPage = new ej.inputs.NumericTextBox({\n min: 1,\n max: 17,\n format: '##',\n value: 1,\n change: function (e) {\n currentPage.value = currentPage.value > currentPage.max ? currentPage.max : currentPage.value;\n var pageNumber = currentPage.value;\n treeGridObj.goToPage(pageNumber);\n }\n });\n currentPage.appendTo('#currentpage');\n var enablePaging = new ej.buttons.CheckBox({ checked: true });\n enablePaging.appendTo('#allowCheck');\n document.getElementById('allowCheck').onclick = function () {\n treeGridObj.allowPaging = enablePaging.checked;\n toggleInputs(treeGridObj.allowPaging, true);\n };\n function paging(args) {\n if (args.requestType === 'paging') {\n currentPage.value = parseInt(args.currentPage, 10);\n }\n }\n function toggleInputs(state, isPager) {\n if (!ej.base.isNullOrUndefined(isPager)) {\n document.getElementsByClassName('con-prop1')[0].style.display = state ? 'table-row' : 'none';\n }\n var flag = sizemode.value === 'All';\n var elem = document.getElementsByClassName('con-prop2');\n for (var i = 0; i < elem.length; i++) {\n elem[i].style.display = state && flag ? 'table-row' : 'none';\n }\n }\n"} \ No newline at end of file diff --git a/src/tree-grid/paging.api.html b/src/tree-grid/paging.api.html index 1987add1..1e40f835 100644 --- a/src/tree-grid/paging.api.html +++ b/src/tree-grid/paging.api.html @@ -65,7 +65,7 @@
                                      - +

                                      This sample demonstrates the usage of paging API in TreeGrid. In this sample, use the properties panel to change the page size mode, page size, page count and current page of the TreeGrid.

                                      @@ -94,4 +94,5 @@ display: none; } } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/print-stack.json b/src/tree-grid/print-stack.json index b41eb744..d08941b1 100644 --- a/src/tree-grid/print-stack.json +++ b/src/tree-grid/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 410,\n toolbar: ['Print'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 410,\n toolbar: ['Print'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/print.html b/src/tree-grid/print.html index f70dac30..703f9de2 100644 --- a/src/tree-grid/print.html +++ b/src/tree-grid/print.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the option to print the TreeGrid. Click the print button from the toolbar item to print TreeGrid.

                                      @@ -21,3 +21,4 @@ documentation section.

                                      + diff --git a/src/tree-grid/remote.data-stack.json b/src/tree-grid/remote.data-stack.json index d51d1e7d..57f9e04f 100644 --- a/src/tree-grid/remote.data-stack.json +++ b/src/tree-grid/remote.data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var data = new ej.data.DataManager({\n url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: data,\n hasChildMapping: 'isParent',\n idMapping: 'TaskID',\n parentIdMapping: 'ParentItem',\n height: 400,\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', width: 80, textAlign: 'Right' },\n { field: 'TaskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'StartDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'EndDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'Duration', headerText: 'Duration', width: 90, textAlign: 'Right' },\n { field: 'Progress', headerText: 'Progress', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var data = new ej.data.DataManager({\n url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n });\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: data,\n hasChildMapping: 'isParent',\n idMapping: 'TaskID',\n parentIdMapping: 'ParentItem',\n height: 400,\n treeColumnIndex: 1,\n allowPaging: true,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', width: 80, textAlign: 'Right' },\n { field: 'TaskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'StartDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'EndDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'Duration', headerText: 'Duration', width: 90, textAlign: 'Right' },\n { field: 'Progress', headerText: 'Progress', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/remote.data.html b/src/tree-grid/remote.data.html index 68c63966..992fc4fc 100644 --- a/src/tree-grid/remote.data.html +++ b/src/tree-grid/remote.data.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the way of binding remote services to TreeGrid component. Here, the DataManager is used to bind the remote data with TreeGrid.

                                      @@ -34,9 +34,8 @@

                                      In this demo, remote data is bound by assigning service data as an instance of DataManager to the dataSource property.

                                      - More information on the TreeGrid instantiation can be found in this - - documentation section. + More information on the data binding can be found in + documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/reorder-stack.json b/src/tree-grid/reorder-stack.json index ee913fb2..4bb368ff 100644 --- a/src/tree-grid/reorder-stack.json +++ b/src/tree-grid/reorder-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Column Index
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var columnNames = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'taskName', name: 'Task Name' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' },\n\n ];\n var columnsIndex = [\n { id: '0', name: '1' },\n { id: '1', name: '2' },\n { id: '2', name: '3' },\n { id: '3', name: '4' },\n\t\t{ id: '4', name: '5' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowReordering: true,\n allowPaging: true,\n pageSettings: { pageSize: 8 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right',\n width: 105, format: { skeleton: 'yMd', type: 'date' }\n },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }\n ],\n actionComplete: function (args) {\n if (args.requestType === 'reorder') {\n var columnName = dropDownColumn.value;\n var index = treegrid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n }\n });\n treegrid.appendTo('#Grid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '110px',\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var index = treegrid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownIndex = new ej.dropdowns.DropDownList({\n dataSource: columnsIndex,\n fields: { text: 'name', value: 'id' },\n value: '0',\n change: function (e) {\n var columnName = dropDownColumn.value;\n var toColumnIndex = e.value;\n treegrid.reorderColumns(columnName, treegrid.columns[toColumnIndex].field);\n }\n });\n dropDownIndex.appendTo('#columnIndex');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Column Index
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var columnNames = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'taskName', name: 'Task Name' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' },\n\n ];\n var columnsIndex = [\n { id: '0', name: '1' },\n { id: '1', name: '2' },\n { id: '2', name: '3' },\n { id: '3', name: '4' },\n\t\t{ id: '4', name: '5' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowReordering: true,\n allowPaging: true,\n pageSettings: { pageSize: 8 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n {\n field: 'startDate', headerText: 'Start Date', textAlign: 'Right',\n width: 105, format: { skeleton: 'yMd', type: 'date' }\n },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' }\n ],\n actionComplete: function (args) {\n if (args.requestType === 'reorder') {\n var columnName = dropDownColumn.value;\n var index = treegrid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n }\n });\n treegrid.appendTo('#Grid');\n var dropDownColumn = new ej.dropdowns.DropDownList({\n dataSource: columnNames,\n popupWidth: '110px',\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var index = treegrid.getColumnIndexByField(columnName);\n dropDownIndex.value = index.toString();\n }\n });\n dropDownColumn.appendTo('#columns');\n var dropDownIndex = new ej.dropdowns.DropDownList({\n dataSource: columnsIndex,\n fields: { text: 'name', value: 'id' },\n value: '0',\n change: function (e) {\n var columnName = dropDownColumn.value;\n var toColumnIndex = e.value;\n treegrid.reorderColumns(columnName, treegrid.columns[toColumnIndex].field);\n }\n });\n dropDownIndex.appendTo('#columnIndex');\n"} \ No newline at end of file diff --git a/src/tree-grid/reorder.html b/src/tree-grid/reorder.html index c5b0a05b..e1e0c7bc 100644 --- a/src/tree-grid/reorder.html +++ b/src/tree-grid/reorder.html @@ -28,6 +28,7 @@
                                      +

                                      This sample demonstrates reordering feature of the TreeGrid columns. Select column name and index from properties panel to reorder the columns. You can also reorder columns by simply drag and drop in the desired column position. @@ -42,4 +43,5 @@

                                      More information about Column Reorder can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/resizing-stack.json b/src/tree-grid/resizing-stack.json index f1b03e4e..5c82cab6 100644 --- a/src/tree-grid/resizing-stack.json +++ b/src/tree-grid/resizing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowResizing: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },\n { field: 'taskName', headerText: 'Task Name', width: 220, minWidth: 120, maxWidth: 300 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', allowResizing: false, width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 95 },\n { field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 120 },\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowResizing: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },\n { field: 'taskName', headerText: 'Task Name', width: 220, minWidth: 120, maxWidth: 300 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', allowResizing: false, width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 95 },\n { field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 120 },\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/resizing.html b/src/tree-grid/resizing.html index 4cac3a96..c871ac4a 100644 --- a/src/tree-grid/resizing.html +++ b/src/tree-grid/resizing.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid column resizing feature. Click and drag at the right corner of each column header to resize the column.

                                      @@ -26,3 +26,4 @@ More information about Column Resizing can be found in this documentation section.

                                      + diff --git a/src/tree-grid/row.hover-stack.json b/src/tree-grid/row.hover-stack.json index 30392611..efa962db 100644 --- a/src/tree-grid/row.hover-stack.json +++ b/src/tree-grid/row.hover-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 350,\n enableHover: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n height: 350,\n enableHover: true,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/row.hover.html b/src/tree-grid/row.hover.html index ad4f6f37..cb981ee0 100644 --- a/src/tree-grid/row.hover.html +++ b/src/tree-grid/row.hover.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid component with the row hover feature. Move the mouse over the TreeGrid rows to see the hover effect.

                                      @@ -17,3 +17,4 @@

                                      In this demo, by enabling the enableHover property, you can move the mouse over TreeGrid rows to see the hover effect.

                                      + \ No newline at end of file diff --git a/src/tree-grid/rowheight-stack.json b/src/tree-grid/rowheight-stack.json index 6a2fdf1f..cdc83f3e 100644 --- a/src/tree-grid/rowheight-stack.json +++ b/src/tree-grid/rowheight-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: [\n { prefixIcon: 'e-big-icon', id: 'small', align: 'Left', tooltipText: 'Small' },\n { prefixIcon: 'e-medium-icon', id: 'medium', align: 'Left', tooltipText: 'Medium' },\n { prefixIcon: 'e-small-icon', id: 'big', align: 'Left', tooltipText: 'Large' }\n ],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n height: 350,\n rowHeight: 20,\n toolbarClick: function (args) {\n if (args.item.id === 'small') {\n treegrid.rowHeight = 20;\n }\n if (args.item.id === 'medium') {\n treegrid.rowHeight = 40;\n }\n if (args.item.id === 'big') {\n treegrid.rowHeight = 60;\n }\n }\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: [\n { prefixIcon: 'e-big-icon', id: 'small', align: 'Left', tooltipText: 'Small' },\n { prefixIcon: 'e-medium-icon', id: 'medium', align: 'Left', tooltipText: 'Medium' },\n { prefixIcon: 'e-small-icon', id: 'big', align: 'Left', tooltipText: 'Large' }\n ],\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ],\n height: 350,\n rowHeight: 20,\n toolbarClick: function (args) {\n if (args.item.id === 'small') {\n treegrid.rowHeight = 20;\n }\n if (args.item.id === 'medium') {\n treegrid.rowHeight = 40;\n }\n if (args.item.id === 'big') {\n treegrid.rowHeight = 60;\n }\n }\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/rowheight.html b/src/tree-grid/rowheight.html index e98567fe..d9fc4ec4 100644 --- a/src/tree-grid/rowheight.html +++ b/src/tree-grid/rowheight.html @@ -4,7 +4,7 @@ - +

                                      This sample demonstrates the row height feature of the TreeGrid. In this demo, the rowHeight for all the Grid rows can be changed as 20px, 40px and 60px on ToolBar button click.

                                      @@ -19,29 +19,30 @@

                                      - + + \ No newline at end of file diff --git a/src/tree-grid/sample.json b/src/tree-grid/sample.json index 18409dec..f0192791 100644 --- a/src/tree-grid/sample.json +++ b/src/tree-grid/sample.json @@ -1,12 +1,16 @@ { - "name": "Tree Grid", + "name": "TreeGrid", "directory": "tree-grid", "category": "Grids", "type": "preview", "ftName" :"treegrid", "dataSourcePath": "src/tree-grid/data-source.js", "samples": [ - { "url":"default", "name": "Default Functionalities", "category":"Tree Grid","description":"This example shows how the Syncfusion Essential JS2 TreeGrid looks with its default configuration.","api":{"TreeGrid":["columns","dataSource","childMapping","treeColumnIndex","allowPaging"] }}, + { + "url": "treegrid.overview", "name": "Overview", "type":"new", "category": "Tree Grid","api":{"TreeGrid":["dataSource","childMapping","height","columns","allowReordering","allowFiltering","allowSorting","filterSettings","queryCellInfo"] }, + "description": "This sample demonstrates the overview of basic treegrid features such as sorting, filtering, conditional formatting, column template and scrolling." + }, + { "url":"default", "name": "Default Functionalities", "category":"Tree Grid","description":"This example shows how the Syncfusion Essential JS2 TreeGrid control looks with its default configuration.","api":{"TreeGrid":["columns","dataSource","childMapping","treeColumnIndex","allowPaging"] }}, { "url":"localdata", "name": "Local Data", "category":"Data Binding","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","columns"] }, "description": "This example shows the binding of an array of list objects in the Syncfusion Essential JS2 TreeGrid TreeGrid control." @@ -24,7 +28,7 @@ }, { "url":"columntemplate", "name": "Column Template", "category":"Columns","api":{"TreeGrid":["dataSource","childMapping", "treeColumnIndex","width","height","columns","rowHeight"] }, - "description": "This demo explains how to define template columns in Syncfusion Essential JS2 TreeGrid." + "description": "This demo explains how to define template columns in Syncfusion Essential JS2 TreeGrid TreeGrid control." }, { "url":"reorder", "name": "Reorder", "category": "Columns","api":{"TreeGrid":["dataSource","childMapping", "treeColumnIndex","allowReordering","actionComplete","columns","allowPaging"] }, @@ -58,17 +62,21 @@ "url":"stacked-header", "name": "Stacked Header", "category":"Columns","api":{"TreeGrid":["dataSource","childMapping", "treeColumnIndex","allowPaging","pageSettings","columns"] }, "description": "This demo explains how to provide a common header for the group of columns in Essential JS2 TreeGrid control." }, + { + "url":"checkbox-column", "name": "Checkbox Column", "category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex","enableHierarchySelection"] }, + "description": "This demo explains how the hierarchy selection between the records using column checkboxes in Essential JS2 TreeGrid control.", "type": "new" + }, { "url":"row.hover", "name": "Row Hover", "category":"Rows","api":{"TreeGrid":["dataSource","childMapping","allowSelection","columns","treeColumnIndex","enableHover","height"] }, "description": "This demo explains how the treegrid row color is changed while move the mouse over a row in Syncfusion Essential JS2 TreeGrid content." }, { "url":"rowheight", "name": "Row Height", "category":"Rows","api":{"TreeGrid":["dataSource","childMapping", "treeColumnIndex","height","rowHeight","allowPaging","toolbarClick","columns","toolbar"] }, - "description": "This demo explains the way of customizing the row height of Syncfusion Essential JS2 TreeGrid." + "description": "This demo explains the way of customizing the row height of Syncfusion Essential JS2 TreeGrid control." }, { "url":"inline.editing", "name": "Inline Editing", "category":"Editing","api":{"TreeGrid":["dataSource","childMapping","columns","treeColumnIndex","editSettings","height","toolbar"] }, - "description": "This example shows how to add and edit row or cell inline on the Syncfusion Essential JS2 TreeGrid." + "description": "This example shows how to add and edit row or cell inline on the Syncfusion Essential JS2 TreeGrid control." }, { "url":"dialog.editing", "name": "Dialog Editing", "category":"Editing","api":{"TreeGrid":["dataSource","childMapping","height","columns","treeColumnIndex","editSettings","toolbar"] }, @@ -126,6 +134,10 @@ "url":"selection-api", "name": "Selection API", "category":"Selection","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","allowSelection","selectionSettings","treeColumnIndex"] }, "description": "This demo explains how to select and clear multiple rows using methods of Syncfusion Essential JS2 TreeGrid." }, + { + "url":"checkbox-selection", "name": "Checkbox Selection", "category":"Selection","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }, + "description":"This demo for Syncfusion Essential JS2 TreeGrid control shows how the checkbox selection feature can be used to select treegrid rows.", "type": "new" + }, { "url":"aggregate.default", "name": "Default Aggregate", "category":"Aggregates","api":{"TreeGrid":["dataSource","childMapping","columns","treeColumnIndex","height","aggregates"] }, "description": "This demo explains how to display the summary values such as average, minimum, etc., for the columns in Syncfusion Essential JS2 TreeGrid." diff --git a/src/tree-grid/search-stack.json b/src/tree-grid/search-stack.json index 1c4d851b..5c28e373 100644 --- a/src/tree-grid/search-stack.json +++ b/src/tree-grid/search-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var grid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: ['Search'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n popupWidth: '100px',\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n grid.search('');\n grid.searchSettings.searchHierarchyMode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Hierarchy Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n \n
                                      \n","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var grid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: ['Search'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n popupWidth: '100px',\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n grid.search('');\n grid.searchSettings.searchHierarchyMode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"} \ No newline at end of file diff --git a/src/tree-grid/search.html b/src/tree-grid/search.html index 747096b8..bcb7a289 100644 --- a/src/tree-grid/search.html +++ b/src/tree-grid/search.html @@ -19,7 +19,7 @@
                                      - +

                                      This sample demonstrates the TreeGrid searching feature. In this sample, use the search box from toolbar to search TreeGrid records and the hierarchy mode of searching can be changed using property panel. @@ -52,4 +52,4 @@ More information on the searching configuration can be found in this documentation section.

                                      - + \ No newline at end of file diff --git a/src/tree-grid/selection-api-stack.json b/src/tree-grid/selection-api-stack.json index accca619..b9e1ab10 100644 --- a/src/tree-grid/selection-api-stack.json +++ b/src/tree-grid/selection-api-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Select Rows
                                      \n
                                      \n
                                      Start
                                      \n\n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      To
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Clear Selection
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var start = new ej.inputs.NumericTextBox({\n format: '##',\n min: 0,\n max: 11\n });\n start.appendTo('#start');\n var to = new ej.inputs.NumericTextBox({\n min: 0,\n max: 11,\n format: '##'\n });\n to.appendTo('#to');\n var select = new ej.buttons.Button();\n select.appendTo('#select');\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n document.getElementById('select').onclick = function () {\n var startRow = start.value;\n var toRow = to.value;\n var rows = [];\n for (var i = startRow; i <= toRow; i++) {\n rows.push(i);\n }\n treegrid.selectRows(rows);\n };\n document.getElementById('clear').onclick = function () {\n treegrid.clearSelection();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n +
                                      @@ -67,6 +69,7 @@
                                      +
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Selection Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Selection Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Cell Selection Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var type = [\n { id: 'Single', type: 'Single' },\n { id: 'Multiple', type: 'Multiple' }\n ];\n var mode = [\n { id: 'Row', mode: 'Row' },\n { id: 'Cell', mode: 'Cell' },\n ];\n var cellmode = [\n { id: 'Flow', mode: 'Flow' },\n { id: 'Box', mode: 'Box' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'Multiple',\n change: function (e) {\n var type = e.value;\n var mode = dropDownMode.value;\n treegrid.selectionSettings.type = type;\n if (type === 'Multiple' && mode === 'Cell') {\n document.getElementById('cellselection').style.display = 'table-row';\n }\n else {\n document.getElementById('cellselection').style.display = 'none';\n }\n }\n });\n dropDownType.appendTo('#type');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Row',\n change: function (e) {\n var mode = e.value;\n var type = dropDownType.value;\n treegrid.selectionSettings.mode = mode;\n if (type === 'Multiple' && mode === 'Cell') {\n document.getElementById('cellselection').style.display = 'table-row';\n }\n else {\n document.getElementById('cellselection').style.display = 'none';\n }\n }\n });\n dropDownMode.appendTo('#mode');\n var dropDownCellMode = new ej.dropdowns.DropDownList({\n dataSource: cellmode,\n fields: { text: 'mode', value: 'id' },\n value: 'Flow',\n change: function (e) {\n var cellmode = e.value;\n treegrid.selectionSettings.cellSelectionMode = cellmode;\n }\n });\n dropDownCellMode.appendTo('#cellmode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Selection Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Selection Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Cell Selection Mode\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var type = [\n { id: 'Single', type: 'Single' },\n { id: 'Multiple', type: 'Multiple' }\n ];\n var mode = [\n { id: 'Row', mode: 'Row' },\n { id: 'Cell', mode: 'Cell' },\n ];\n var cellmode = [\n { id: 'Flow', mode: 'Flow' },\n { id: 'Box', mode: 'Box' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n allowSelection: true,\n selectionSettings: { type: 'Multiple' },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownType = new ej.dropdowns.DropDownList({\n dataSource: type,\n fields: { text: 'type', value: 'id' },\n value: 'Multiple',\n change: function (e) {\n var type = e.value;\n var mode = dropDownMode.value;\n treegrid.selectionSettings.type = type;\n if (type === 'Multiple' && mode === 'Cell') {\n document.getElementById('cellselection').style.display = 'table-row';\n }\n else {\n document.getElementById('cellselection').style.display = 'none';\n }\n }\n });\n dropDownType.appendTo('#type');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n fields: { text: 'mode', value: 'id' },\n value: 'Row',\n change: function (e) {\n var mode = e.value;\n var type = dropDownType.value;\n treegrid.selectionSettings.mode = mode;\n if (type === 'Multiple' && mode === 'Cell') {\n document.getElementById('cellselection').style.display = 'table-row';\n }\n else {\n document.getElementById('cellselection').style.display = 'none';\n }\n }\n });\n dropDownMode.appendTo('#mode');\n var dropDownCellMode = new ej.dropdowns.DropDownList({\n dataSource: cellmode,\n fields: { text: 'mode', value: 'id' },\n value: 'Flow',\n change: function (e) {\n var cellmode = e.value;\n treegrid.selectionSettings.cellSelectionMode = cellmode;\n }\n });\n dropDownCellMode.appendTo('#cellmode');\n"} \ No newline at end of file diff --git a/src/tree-grid/selection.html b/src/tree-grid/selection.html index b98092c6..2f3ac3bd 100644 --- a/src/tree-grid/selection.html +++ b/src/tree-grid/selection.html @@ -41,6 +41,7 @@
                                      +

                                      This sample demonstrates the selection feature in TreeGrid, which allows you to select row or cell through simple mouse down or keyboard interaction. You can change selection type, selection mode and cell selection mode from the properties panel.

                                      @@ -94,4 +95,5 @@

                                      More information on the selection configuration can be found in this documentation section.

                                      -
                                      \ No newline at end of file +
                                      + \ No newline at end of file diff --git a/src/tree-grid/selfreference-stack.json b/src/tree-grid/selfreference-stack.json index 9fe82976..f01e3810 100644 --- a/src/tree-grid/selfreference-stack.json +++ b/src/tree-grid/selfreference-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.projectData,\n idMapping: 'TaskID',\n parentIdMapping: 'parentID',\n allowPaging: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 140 },\n { field: 'TaskName', headerText: 'Task Name', width: 160 },\n { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120, format: { skeleton: 'yMd', type: 'date' }},\n { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 120, format: { skeleton: 'yMd', type: 'date' }},\n { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 110},\n { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 110},\n { field: 'Priority', headerText: 'Priority', width: 110}\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.projectData,\n idMapping: 'TaskID',\n parentIdMapping: 'parentID',\n allowPaging: true,\n treeColumnIndex: 1,\n columns: [\n { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 140 },\n { field: 'TaskName', headerText: 'Task Name', width: 160 },\n { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120, format: { skeleton: 'yMd', type: 'date' }},\n { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 120, format: { skeleton: 'yMd', type: 'date' }},\n { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 110},\n { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 110},\n { field: 'Priority', headerText: 'Priority', width: 110}\n ]\n });\n treegrid.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/selfreference.html b/src/tree-grid/selfreference.html index f103263e..383ed23b 100644 --- a/src/tree-grid/selfreference.html +++ b/src/tree-grid/selfreference.html @@ -4,7 +4,7 @@ - +

                                      This sample demonstrates the way of binding self-referential flat data to TreeGrid component.

                                      @@ -18,4 +18,5 @@ More information on the data binding can be found in this documentation section.

                                      + diff --git a/src/tree-grid/showhidecolumn-stack.json b/src/tree-grid/showhidecolumn-stack.json index eada7877..7227d325 100644 --- a/src/tree-grid/showhidecolumn-stack.json +++ b/src/tree-grid/showhidecolumn-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Hidden Columns\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var columnsName = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 105, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 80 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 80 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var column = treegrid.getColumnByField(columnName);\n if (column.visible === undefined || column.visible) {\n show.disabled = true;\n hide.disabled = false;\n }\n else {\n hide.disabled = true;\n show.disabled = false;\n }\n }\n });\n dropDownListObject.appendTo('#ddlelement');\n var show = new ej.buttons.Button({ disabled: true });\n show.appendTo('#show');\n var hide = new ej.buttons.Button();\n hide.appendTo('#hide');\n var hiddenColumns = document.getElementById('hiddencolumns');\n document.getElementById('show').addEventListener('click', function () {\n var columnName = dropDownListObject.value;\n var column = treegrid.getColumnByField(columnName);\n treegrid.showColumns(column.headerText, 'headerText');\n show.disabled = true;\n hide.disabled = false;\n hiddenColumns.value = hiddenColumns.value.replace(column.headerText + '\\n', '');\n });\n document.getElementById('hide').addEventListener('click', function () {\n var columnName = dropDownListObject.value;\n var column = treegrid.getColumnByField(columnName);\n if (treegrid.getHeaderTable().querySelectorAll('th.e-hide').length === 3) {\n alert('Atleast one Column should be visible');\n }\n else {\n treegrid.hideColumns(column.headerText, 'headerText');\n hide.disabled = true;\n show.disabled = false;\n hiddenColumns.value = hiddenColumns.value + column.headerText + '\\n';\n }\n });\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n Hidden Columns\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n","index.js":"{{ripple}}\n var columnsName = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'startDate', name: 'Start Date' },\n { id: 'duration', name: 'Duration' },\n { id: 'progress', name: 'Progress' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 105, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 80 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 80 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'taskID',\n change: function (e) {\n var columnName = e.value;\n var column = treegrid.getColumnByField(columnName);\n if (column.visible === undefined || column.visible) {\n show.disabled = true;\n hide.disabled = false;\n }\n else {\n hide.disabled = true;\n show.disabled = false;\n }\n }\n });\n dropDownListObject.appendTo('#ddlelement');\n var show = new ej.buttons.Button({ disabled: true });\n show.appendTo('#show');\n var hide = new ej.buttons.Button();\n hide.appendTo('#hide');\n var hiddenColumns = document.getElementById('hiddencolumns');\n document.getElementById('show').addEventListener('click', function () {\n var columnName = dropDownListObject.value;\n var column = treegrid.getColumnByField(columnName);\n treegrid.showColumns(column.headerText, 'headerText');\n show.disabled = true;\n hide.disabled = false;\n hiddenColumns.value = hiddenColumns.value.replace(column.headerText + '\\n', '');\n });\n document.getElementById('hide').addEventListener('click', function () {\n var columnName = dropDownListObject.value;\n var column = treegrid.getColumnByField(columnName);\n if (treegrid.getHeaderTable().querySelectorAll('th.e-hide').length === 3) {\n alert('Atleast one Column should be visible');\n }\n else {\n treegrid.hideColumns(column.headerText, 'headerText');\n hide.disabled = true;\n show.disabled = false;\n hiddenColumns.value = hiddenColumns.value + column.headerText + '\\n';\n }\n });\n"} \ No newline at end of file diff --git a/src/tree-grid/showhidecolumn.html b/src/tree-grid/showhidecolumn.html index cf3a9fd3..2b3b84c2 100644 --- a/src/tree-grid/showhidecolumn.html +++ b/src/tree-grid/showhidecolumn.html @@ -45,6 +45,7 @@
                                      +
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Direction
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n\n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var columnsName = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'taskName', name: 'Task Name' },\n { id: 'progress', name: 'Progress' },\n { id: 'duration', name: 'Duration' }, ];\n var direction = [\n { id: 'Ascending', name: 'Ascending' },\n { id: 'Descending', name: 'Descending' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n height: 410,\n allowSorting: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 170 },\n { field: 'progress', headerText: 'Progress', width: 90, textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 90, textAlign: 'Right' }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'taskID'\n });\n dropDownColumns.appendTo('#columns');\n var dropDownDirection = new ej.dropdowns.DropDownList({\n dataSource: direction,\n fields: { text: 'name', value: 'id' },\n value: 'Ascending'\n });\n dropDownDirection.appendTo('#direction');\n var sort = new ej.buttons.Button();\n sort.appendTo('#sort');\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n document.getElementById('sort').onclick = function () {\n var columnName = dropDownColumns.value;\n var sortType = dropDownDirection.value;\n treeGridObj.sortByColumn(columnName, sortType, false);\n };\n document.getElementById('clear').onclick = function () {\n treeGridObj.clearSorting();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Column
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Direction
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n\n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var columnsName = [\n { id: 'taskID', name: 'Task ID' },\n { id: 'taskName', name: 'Task Name' },\n { id: 'progress', name: 'Progress' },\n { id: 'duration', name: 'Duration' }, ];\n var direction = [\n { id: 'Ascending', name: 'Ascending' },\n { id: 'Descending', name: 'Descending' }\n ];\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n height: 410,\n allowSorting: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },\n { field: 'taskName', headerText: 'Task Name', width: 170 },\n { field: 'progress', headerText: 'Progress', width: 90, textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 90, textAlign: 'Right' }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n var dropDownColumns = new ej.dropdowns.DropDownList({\n dataSource: columnsName,\n fields: { text: 'name', value: 'id' },\n value: 'taskID'\n });\n dropDownColumns.appendTo('#columns');\n var dropDownDirection = new ej.dropdowns.DropDownList({\n dataSource: direction,\n fields: { text: 'name', value: 'id' },\n value: 'Ascending'\n });\n dropDownDirection.appendTo('#direction');\n var sort = new ej.buttons.Button();\n sort.appendTo('#sort');\n var clear = new ej.buttons.Button();\n clear.appendTo('#clear');\n document.getElementById('sort').onclick = function () {\n var columnName = dropDownColumns.value;\n var sortType = dropDownDirection.value;\n treeGridObj.sortByColumn(columnName, sortType, false);\n };\n document.getElementById('clear').onclick = function () {\n treeGridObj.clearSorting();\n };\n"} \ No newline at end of file diff --git a/src/tree-grid/sorting.api.html b/src/tree-grid/sorting.api.html index bf77dbdf..43b47dac 100644 --- a/src/tree-grid/sorting.api.html +++ b/src/tree-grid/sorting.api.html @@ -41,7 +41,7 @@
                                      - +

                                      Sorting feature enables us to order the data in a particular direction. It can be enabled by setting the allowSorting as true.

                                      @@ -68,6 +68,7 @@ documentation section.

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/stacked-header-stack.json b/src/tree-grid/stacked-header-stack.json index f73055c4..e9cda936 100644 --- a/src/tree-grid/stacked-header-stack.json +++ b/src/tree-grid/stacked-header-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.stackedData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n pageSettings: { pageCount: 5 },\n columns: [\n {\n headerText: 'Order Details', textAlign: 'Center', columns: [\n { field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },\n { field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 170 },\n { field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 120, format: 'yMd' },\n ]\n },\n {\n headerText: 'Shipment Details', textAlign: 'Center', columns: [\n { field: 'shipMentCategory', headerText: 'Shipment Category', textAlign: 'Left', width: 150 },\n { field: 'shippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 120, format: 'yMd' },\n { field: 'units', headerText: 'Units', textAlign: 'Left', width: 80 },\n ]\n },\n {\n headerText: 'Price Details', textAlign: 'Center', columns: [\n { field: 'unitPrice', headerText: 'Price per unit', format: 'c0', type: 'number', width: 120, textAlign: 'Right' },\n { field: 'price', headerText: 'Total Price', width: 115, format: 'c', type: 'number', textAlign: 'Right' }\n ]\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.stackedData,\n allowPaging: true,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n pageSettings: { pageCount: 5 },\n columns: [\n {\n headerText: 'Order Details', textAlign: 'Center', columns: [\n { field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },\n { field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 170 },\n { field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 120, format: 'yMd' },\n ]\n },\n {\n headerText: 'Shipment Details', textAlign: 'Center', columns: [\n { field: 'shipMentCategory', headerText: 'Shipment Category', textAlign: 'Left', width: 150 },\n { field: 'shippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 120, format: 'yMd' },\n { field: 'units', headerText: 'Units', textAlign: 'Left', width: 80 },\n ]\n },\n {\n headerText: 'Price Details', textAlign: 'Center', columns: [\n { field: 'unitPrice', headerText: 'Price per unit', format: 'c0', type: 'number', width: 120, textAlign: 'Right' },\n { field: 'price', headerText: 'Total Price', width: 115, format: 'c', type: 'number', textAlign: 'Right' }\n ]\n }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/stacked-header.html b/src/tree-grid/stacked-header.html index 58c86c69..dac0cc06 100644 --- a/src/tree-grid/stacked-header.html +++ b/src/tree-grid/stacked-header.html @@ -4,6 +4,7 @@
                                      +

                                      This sample demonstrates the TreeGrid component with the stacked header feature. In this sample, we have shown multiple levels of column header.

                                      @@ -18,4 +19,5 @@

                                      More information on the stacked header can be found in this documentation section.

                                      -
                                      \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/toolbar.template-stack.json b/src/tree-grid/toolbar.template-stack.json index 8b576528..70f8062c 100644 --- a/src/tree-grid/toolbar.template-stack.json +++ b/src/tree-grid/toolbar.template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n toolbar: ['ExpandAll', 'CollapseAll', {text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter'}],\n toolbarClick: function (args) {\n if (args.item.id === 'toolbarfilter') {\n treeGridObj.filterByColumn('taskName', 'startswith', 'Testing');\n }\n },\n allowFiltering: true,\n childMapping: 'subtasks',\n height: 400,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },\n { field: 'taskName', headerText: 'Task Name', width: 150 },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', format: 'yMd' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n toolbar: ['ExpandAll', 'CollapseAll', {text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter'}],\n toolbarClick: function (args) {\n if (args.item.id === 'toolbarfilter') {\n treeGridObj.filterByColumn('taskName', 'startswith', 'Testing');\n }\n },\n allowFiltering: true,\n childMapping: 'subtasks',\n height: 400,\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },\n { field: 'taskName', headerText: 'Task Name', width: 150 },\n { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', format: 'yMd' },\n { field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },\n { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },\n { field: 'priority', headerText: 'Priority', width: 90 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n"} \ No newline at end of file diff --git a/src/tree-grid/toolbar.template.html b/src/tree-grid/toolbar.template.html index 0775d932..11cb2e0a 100644 --- a/src/tree-grid/toolbar.template.html +++ b/src/tree-grid/toolbar.template.html @@ -4,7 +4,7 @@
                                      - +

                                      This sample explains the way of rendering custom template element Refresh in a toolbar and while click on the icon clear the filtering for Task Name column in @@ -25,4 +25,5 @@ More information on the Toolbar Template can be found in documentation section.

                                      -
                                      \ No newline at end of file + + \ No newline at end of file diff --git a/src/tree-grid/treegrid.overview-stack.json b/src/tree-grid/treegrid.overview-stack.json new file mode 100644 index 00000000..be36ec31 --- /dev/null +++ b/src/tree-grid/treegrid.overview-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n\n \n \n \n \n \n \n \n \n
                                      \n
                                      \n","index.js":"{{ripple}}\n var treeGridObj = new ej.treegrid.TreeGrid({\n dataSource: window.countries,\n childMapping: 'states',\n height: 400,\n allowReordering: true,\n allowFiltering: true,\n allowSorting: true,\n filterSettings: { type: 'Excel' },\n queryCellInfo: queryCellInfo,\n columns: [\n {\n field: 'name', headerText: 'Province', template: '#flagtemplate',\n filter: { type: 'Excel', itemTemplate: '#flagtemplate' }, width: 170\n },\n { field: 'population', headerText: 'Population (Million)', valueAccessor: populationValue, textAlign: 'Right', width: 188 },\n { field: 'gdp', headerText: 'GDP Rate %', template: '#gdptemplate', allowFiltering: false, width: 120 },\n {\n field: 'rating', headerText: 'Credit Rating', customAttributes: { class: 'ratingCircle' },\n template: '#ratingtemplate', width: 150\n },\n {\n field: 'unemployment', headerText: 'Unemployment Rate', allowFiltering: false,\n template: '#unemploymentTemplate', width: 170\n },\n { field: 'coordinates', headerText: 'Coordinates', allowSorting: false, template: '#locationtemplate', width: 220 },\n { field: 'area', headerText: 'Area', template: '#areatemplate', width: 140 },\n { field: 'timezone', headerText: 'Time Zone', template: '#timezonetemplate', width: 150 }\n ]\n });\n treeGridObj.appendTo('#TreeGrid');\n\n window.utcZone = function (data) {\n var img = document.createElement('img');\n img.src = '//ej2.syncfusion.com/javascript/demos/src/tree-grid/images/__Normal.png';\n if (data.timezone.indexOf(\"-\") != -1) {\n img.className = 'negativeTimeZone';\n }\n return img.outerHTML;\n };\n function populationValue(field, data) {\n return data[field] / 1000000;\n }\n function queryCellInfo(args) {\n if (args.column.field === 'gdp') {\n if (args.data[args.column.field] < 2) {\n args.cell.querySelector('.statustxt').classList.add('e-lowgdp');\n args.cell.querySelector('.statustemp').classList.add('e-lowgdp');\n }\n }\n if (args.column.field === 'rating') {\n if (args.column.field === 'rating') {\n for (var i = 0; i < args.data[args.column.field]; i++) {\n args.cell.querySelectorAll('span')[i].classList.add('checked');\n }\n }\n }\n if (args.column.field === 'unemployment') {\n if (args.data[args.column.field] <= 4) {\n ej.base.addClass([args.cell.querySelector('.bar')], ['progressdisable']);\n }\n args.cell.querySelector('.bar').style.width = args.data[args.column.field] * 10 + '%';\n args.cell.querySelector('.barlabel').textContent = args.data[args.column.field] + '%';\n }\n }\n"} \ No newline at end of file diff --git a/src/tree-grid/treegrid.overview.html b/src/tree-grid/treegrid.overview.html new file mode 100644 index 00000000..d5e06b08 --- /dev/null +++ b/src/tree-grid/treegrid.overview.html @@ -0,0 +1,165 @@ +
                                      +
                                      +
                                      +
                                      + + + + + + + + + + +
                                      +
                                      + + +
                                      +

                                      This sample demonstrates the overview of basic treegrid features such as sorting, filtering, conditional formatting, column template and scrolling.

                                      +
                                      + +
                                      +

                                      + The TreeGrid is used to represent the hierarchical data in a tabular format, combining the visual representation of Grid and TreeView controls. + It represents the data from datasource such as an array of JSON objects, OData web services, or DataManager binding data fields to columns or self-referential datasource. +

                                      +

                                      + In this demo, TreeGrid features such as sorting, filtering, conditional formatting, column template and scrolling are used. +

                                      +

                                      + More information on the TreeGrid instantiation can be found in this + + documentation section. +

                                      +
                                      + \ No newline at end of file diff --git a/src/tree-grid/treegrid.overview.js b/src/tree-grid/treegrid.overview.js new file mode 100644 index 00000000..7c1797f5 --- /dev/null +++ b/src/tree-grid/treegrid.overview.js @@ -0,0 +1,66 @@ +this.default = function () { + var treeGridObj = new ej.treegrid.TreeGrid({ + dataSource: window.countries, + childMapping: 'states', + height: 400, + allowReordering: true, + allowFiltering: true, + allowSorting: true, + filterSettings: { type: 'Excel' }, + queryCellInfo: queryCellInfo, + columns: [ + { + field: 'name', headerText: 'Province', template: '#flagtemplate', + filter: { type: 'Excel', itemTemplate: '#flagtemplate' }, width: 170 + }, + { field: 'population', headerText: 'Population (Million)', valueAccessor: populationValue, textAlign: 'Right', width: 188 }, + { field: 'gdp', headerText: 'GDP Rate %', template: '#gdptemplate', allowFiltering: false, width: 120 }, + { + field: 'rating', headerText: 'Credit Rating', customAttributes: { class: 'ratingCircle' }, + template: '#ratingtemplate', width: 150 + }, + { + field: 'unemployment', headerText: 'Unemployment Rate', allowFiltering: false, + template: '#unemploymentTemplate', width: 170 + }, + { field: 'coordinates', headerText: 'Coordinates', allowSorting: false, template: '#locationtemplate', width: 220 }, + { field: 'area', headerText: 'Area', template: '#areatemplate', width: 140 }, + { field: 'timezone', headerText: 'Time Zone', template: '#timezonetemplate', width: 150 } + ] + }); + treeGridObj.appendTo('#TreeGrid'); + + window.utcZone = function (data) { + var img = document.createElement('img'); + img.src = 'src/tree-grid/images/__Normal.png'; + if (data.timezone.indexOf("-") != -1) { + img.className = 'negativeTimeZone'; + } + return img.outerHTML; + }; + function populationValue(field, data) { + return data[field] / 1000000; + } + function queryCellInfo(args) { + if (args.column.field === 'gdp') { + if (args.data[args.column.field] < 2) { + args.cell.querySelector('.statustxt').classList.add('e-lowgdp'); + args.cell.querySelector('.statustemp').classList.add('e-lowgdp'); + } + } + if (args.column.field === 'rating') { + if (args.column.field === 'rating') { + for (var i = 0; i < args.data[args.column.field]; i++) { + args.cell.querySelectorAll('span')[i].classList.add('checked'); + } + } + } + if (args.column.field === 'unemployment') { + if (args.data[args.column.field] <= 4) { + ej.base.addClass([args.cell.querySelector('.bar')], ['progressdisable']); + } + args.cell.querySelector('.bar').style.width = args.data[args.column.field] * 10 + '%'; + args.cell.querySelector('.barlabel').textContent = args.data[args.column.field] + '%'; + } + } +}; \ No newline at end of file diff --git a/src/tree-grid/treegridlines-stack.json b/src/tree-grid/treegridlines-stack.json index ce5cb32f..f8fc4e6c 100644 --- a/src/tree-grid/treegridlines-stack.json +++ b/src/tree-grid/treegridlines-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      \n Grid Lines\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var lines = [\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n gridLines: 'Vertical',\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: lines,\n popupWidth: '100px',\n fields: { text: 'type', value: 'id' },\n value: 'Vertical',\n change: function (e) {\n var lines = e.value;\n treegrid.gridLines = lines;\n treegrid.refresh();\n },\n });\n dropDownListObject.appendTo('#ddlelement');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      \n Grid Lines\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n","index.js":"{{ripple}}\n var lines = [\n { id: 'Horizontal', type: 'Horizontal' },\n { id: 'Vertical', type: 'Vertical' },\n { id: 'Both', type: 'Both' },\n { id: 'None', type: 'None' }\n ];\n var treegrid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n gridLines: 'Vertical',\n pageSettings: { pageSize: 10 },\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ]\n });\n treegrid.appendTo('#TreeGrid');\n var dropDownListObject = new ej.dropdowns.DropDownList({\n dataSource: lines,\n popupWidth: '100px',\n fields: { text: 'type', value: 'id' },\n value: 'Vertical',\n change: function (e) {\n var lines = e.value;\n treegrid.gridLines = lines;\n treegrid.refresh();\n },\n });\n dropDownListObject.appendTo('#ddlelement');\n"} \ No newline at end of file diff --git a/src/tree-grid/treegridlines.html b/src/tree-grid/treegridlines.html index 9be4e174..45ad0188 100644 --- a/src/tree-grid/treegridlines.html +++ b/src/tree-grid/treegridlines.html @@ -22,6 +22,7 @@
                                      +
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Color Mapping Type
                                      \n                                       		\n \n
                                      \n
                                      Change Opacity
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Min Opacity
                                      \n                                       		\n \n
                                      \n
                                      Max Opacity
                                      \n                                       		\n \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var colormappingtheme = location.hash.split('/')[1];\n colormappingtheme = colormappingtheme ? colormappingtheme : 'Material';\n args.treemap.theme = (colormappingtheme.charAt(0).toUpperCase() + colormappingtheme.slice(1));\n },\n titleSettings: {\n text: 'Top 10 largest islands in the World',\n textStyle: { size: '15px' }\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'Area',\n dataSource: window.ColorMapping,\n legendSettings: {\n visible: true,\n position: 'Bottom',\n mode: 'Interactive',\n height: '10',\n title: {\n text: 'Area'\n },\n },\n tooltipSettings: {\n visible: true,\n format: 'Name: ${Name}
                                      Area: ${Area} per square kms
                                      Continent: ${Location}',\n opacity: 0.8\n },\n weightValuePath: 'Area',\n leafItemSettings: {\n labelPath: 'Name',\n border: { color: 'white', width: 0.5 },\n colorMapping: [\n { from: 100000, to: 250000, label: '0.1M - 0.25M', color: '#547C84' },\n { from: 250000, to: 550000, label: '0.25M - 0.55M', color: '#37AFAB' },\n { from: 550000, to: 750000, label: '0.55M - 0.75M', color: '#A4D6AD' },\n { from: 750000, to: 2250000, label: '0.75M - 2M', color: '#DEEBAE' },\n { to: null, from: null, color: 'null' },\n { to: null, from: null, color: 'null' },\n ]\n },\n });\n treemap.appendTo('#default-container');\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false, disabled: true\n }, '#opacity');\n highlightCheckBox.change = opacity = function (e) {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (e.checked) {\n treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n treemap.leafItemSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[1].maxOpacity = parseFloat(maxOpacity.value);\n minOpacity.disabled = false;\n maxOpacity.disabled = false;\n }\n else {\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n minOpacity.disabled = true;\n maxOpacity.disabled = true;\n }\n treemap.refresh();\n };\n document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove =\n document.getElementById('minopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('minopacity');\n var minOpacity = parseFloat(slider.value);\n treemap.leafItemSettings.colorMapping[0].minOpacity = minOpacity;\n treemap.leafItemSettings.colorMapping[1].minOpacity = minOpacity;\n treemap.refresh();\n } \n };\n document.getElementById('maxopacity').onpointermove = document.getElementById('maxopacity').ontouchmove =\n document.getElementById('maxopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('maxopacity');\n var maxOpacity = parseFloat(slider.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = maxOpacity;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = maxOpacity;\n treemap.refresh();\n }\n };\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Range ColorMaping',\n width: '110%',\n change: function () {\n var element = sampleValue.value.toString();\n if (element === 'RangeColorMapping') {\n highlightCheckBox.disabled = true;\n treemap.rangeColorValuePath = 'Area';\n treemap.leafItemSettings.colorMapping[2].minOpacity = null;\n treemap.leafItemSettings.colorMapping[2].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[4].minOpacity = null;\n treemap.leafItemSettings.colorMapping[4].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[3].minOpacity = null;\n treemap.leafItemSettings.colorMapping[3].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[5].minOpacity = null;\n treemap.leafItemSettings.colorMapping[5].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[0].from = 100000;\n treemap.leafItemSettings.colorMapping[0].to = 250000;\n treemap.leafItemSettings.colorMapping[0].value = null;\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].value = null;\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[0].label = '0.1M - 0.25M';\n treemap.leafItemSettings.colorMapping[0].color = '#547C84';\n treemap.leafItemSettings.colorMapping[1].from = 250000;\n treemap.leafItemSettings.colorMapping[1].to = 500000;\n treemap.leafItemSettings.colorMapping[1].label = '0.25M - 0.50M';\n treemap.leafItemSettings.colorMapping[1].color = '#37AFAB';\n treemap.leafItemSettings.colorMapping[2].from = 500000;\n treemap.leafItemSettings.colorMapping[2].to = 750000;\n treemap.leafItemSettings.colorMapping[2].label = '0.5M - 0.75M';\n treemap.leafItemSettings.colorMapping[2].color = '#A4D6AD';\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[3].from = 750000;\n treemap.leafItemSettings.colorMapping[3].to = 2200000;\n treemap.leafItemSettings.colorMapping[3].label = '0.75M - 2M';\n treemap.leafItemSettings.colorMapping[3].color = '#DEEBAE';\n treemap.leafItemSettings.colorMapping[4].from = null;\n treemap.leafItemSettings.colorMapping[3].value = null;\n treemap.leafItemSettings.colorMapping[4].to = null;\n treemap.leafItemSettings.colorMapping[4].label = null;\n treemap.leafItemSettings.colorMapping[4].value = null;\n treemap.leafItemSettings.colorMapping[4].color = null;\n treemap.leafItemSettings.colorMapping[5].to = null;\n treemap.leafItemSettings.colorMapping[5].label = null;\n treemap.leafItemSettings.colorMapping[5].value = null;\n treemap.leafItemSettings.colorMapping[5].color = null;\n treemap.leafItemSettings.colorMapping[5].from = null;\n treemap.legendSettings.title.text = 'Area';\n treemap.refresh();\n }\n else if (element === 'EqualColorMapping') {\n highlightCheckBox.disabled = true;\n treemap.rangeColorValuePath = null;\n treemap.leafItemSettings.colorMapping[0].from = null;\n treemap.leafItemSettings.colorMapping[0].to = null;\n treemap.leafItemSettings.colorMapping[0].label = null;\n treemap.leafItemSettings.colorMapping[1].label = null;\n treemap.leafItemSettings.colorMapping[2].label = null;\n treemap.leafItemSettings.colorMapping[3].label = null;\n treemap.leafItemSettings.colorMapping[4].label = null;\n treemap.leafItemSettings.colorMapping[0].value = 'North America';\n treemap.leafItemSettings.colorMapping[0].color = '#DEEBAE';\n treemap.leafItemSettings.colorMapping[1].from = null;\n treemap.leafItemSettings.colorMapping[1].to = null;\n treemap.leafItemSettings.colorMapping[1].value = 'Oceania';\n treemap.leafItemSettings.colorMapping[1].color = '#A4D6AD';\n treemap.leafItemSettings.colorMapping[2].from = null;\n treemap.leafItemSettings.colorMapping[2].to = null;\n treemap.leafItemSettings.colorMapping[2].value = 'Asia';\n treemap.leafItemSettings.colorMapping[2].color = '#37AFAB';\n treemap.leafItemSettings.colorMapping[3].from = null;\n treemap.leafItemSettings.colorMapping[3].to = null;\n treemap.leafItemSettings.colorMapping[3].value = 'Africa';\n treemap.leafItemSettings.colorMapping[3].color = '#547C84';\n treemap.leafItemSettings.colorMapping[4].from = null;\n treemap.leafItemSettings.colorMapping[4].to = null;\n treemap.leafItemSettings.colorMapping[4].value = 'Europe';\n treemap.leafItemSettings.colorMapping[4].color = '#CEBF93';\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[2].minOpacity = null;\n treemap.leafItemSettings.colorMapping[2].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[3].minOpacity = null;\n treemap.leafItemSettings.colorMapping[3].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[4].minOpacity = null;\n treemap.leafItemSettings.colorMapping[4].maxOpacity = null;\n treemap.equalColorValuePath = 'Location';\n treemap.legendSettings.title.text = 'Continent';\n treemap.refresh();\n }\n else if (element === 'DesaturationColorMapping') {\n highlightCheckBox.disabled = false;\n treemap.rangeColorValuePath = 'Area';\n treemap.equalColorValuePath = null;\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n treemap.leafItemSettings.colorMapping[2].from = null;\n treemap.leafItemSettings.colorMapping[2].to = null;\n treemap.leafItemSettings.colorMapping[1].from = null;\n treemap.leafItemSettings.colorMapping[1].to = null;\n treemap.leafItemSettings.colorMapping[1].label = null;\n treemap.leafItemSettings.colorMapping[3].from = null;\n treemap.leafItemSettings.colorMapping[3].to = null;\n treemap.leafItemSettings.colorMapping[0].from = 100000;\n treemap.leafItemSettings.colorMapping[0].to = 2230800;\n treemap.leafItemSettings.colorMapping[0].label = '0.1M - 2M';\n treemap.leafItemSettings.colorMapping[0].value = null;\n treemap.leafItemSettings.colorMapping[1].value = null;\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[3].value = null;\n treemap.leafItemSettings.colorMapping[2].color = null;\n treemap.leafItemSettings.colorMapping[1].color = null;\n treemap.leafItemSettings.colorMapping[3].color = null;\n treemap.leafItemSettings.colorMapping[0].color = ['#F0D6AD', '#19547B'];\n if (highlightCheckBox.checked) {\n treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n }\n else {\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n }\n treemap.legendSettings.title.text = 'Area';\n treemap.refresh();\n }\n }\n });\n sampleValue.appendTo('#colorMapping');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Color Mapping Type
                                      \n                                       		\n \n
                                      \n
                                      Change Opacity
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Min Opacity
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Max Opacity
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Top 10 largest islands in the World',\n textStyle: { size: '15px' }\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'Area',\n dataSource: window.ColorMapping,\n legendSettings: {\n visible: true,\n position: 'Bottom',\n mode: 'Interactive',\n height: '10',\n title: {\n text: 'Area'\n },\n },\n tooltipSettings: {\n visible: true,\n format: 'Name: ${Name}
                                      Area: ${Area} per square kms
                                      Continent: ${Location}',\n opacity: 0.8\n },\n weightValuePath: 'Area',\n leafItemSettings: {\n labelPath: 'Name',\n border: { color: 'white', width: 0.5 },\n colorMapping: [\n { from: 100000, to: 250000, label: '0.1M - 0.25M', color: '#547C84' },\n { from: 250000, to: 550000, label: '0.25M - 0.55M', color: '#37AFAB' },\n { from: 550000, to: 750000, label: '0.55M - 0.75M', color: '#A4D6AD' },\n { from: 750000, to: 2250000, label: '0.75M - 2M', color: '#DEEBAE' },\n { to: null, from: null, color: 'null' },\n { to: null, from: null, color: 'null' },\n ]\n },\n });\n treemap.appendTo('#default-container');\n // code for property panel\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false\n }, '#opacity');\n highlightCheckBox.change = opacity = function (e) {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (e.checked) {\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n treemap.leafItemSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[1].maxOpacity = parseFloat(maxOpacity.value);\n minOpacity.disabled = false;\n maxOpacity.disabled = false;\n }\n else {\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n minOpacity.disabled = true;\n maxOpacity.disabled = true;\n }\n treemap.refresh();\n };\n document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove =\n document.getElementById('minopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('minopacity');\n var minOpacity = parseFloat(slider.value);\n treemap.leafItemSettings.colorMapping[0].minOpacity = minOpacity;\n treemap.leafItemSettings.colorMapping[1].minOpacity = minOpacity;\n treemap.refresh();\n } \n };\n document.getElementById('maxopacity').onpointermove = document.getElementById('maxopacity').ontouchmove =\n document.getElementById('maxopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('maxopacity');\n var maxOpacity = parseFloat(slider.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = maxOpacity;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = maxOpacity;\n treemap.refresh();\n }\n };\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Range ColorMaping',\n width: '110%',\n change: function () {\n var element = sampleValue.value.toString();\n if (element === 'RangeColorMapping') {\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n treemap.rangeColorValuePath = 'Area';\n treemap.leafItemSettings.colorMapping[2].minOpacity = null;\n treemap.leafItemSettings.colorMapping[2].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[4].minOpacity = null;\n treemap.leafItemSettings.colorMapping[4].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[3].minOpacity = null;\n treemap.leafItemSettings.colorMapping[3].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[5].minOpacity = null;\n treemap.leafItemSettings.colorMapping[5].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[0].from = 100000;\n treemap.leafItemSettings.colorMapping[0].to = 250000;\n treemap.leafItemSettings.colorMapping[0].value = null;\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].value = null;\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[0].label = '0.1M - 0.25M';\n treemap.leafItemSettings.colorMapping[0].color = '#547C84';\n treemap.leafItemSettings.colorMapping[1].from = 250000;\n treemap.leafItemSettings.colorMapping[1].to = 500000;\n treemap.leafItemSettings.colorMapping[1].label = '0.25M - 0.50M';\n treemap.leafItemSettings.colorMapping[1].color = '#37AFAB';\n treemap.leafItemSettings.colorMapping[2].from = 500000;\n treemap.leafItemSettings.colorMapping[2].to = 750000;\n treemap.leafItemSettings.colorMapping[2].label = '0.5M - 0.75M';\n treemap.leafItemSettings.colorMapping[2].color = '#A4D6AD';\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[3].from = 750000;\n treemap.leafItemSettings.colorMapping[3].to = 2200000;\n treemap.leafItemSettings.colorMapping[3].label = '0.75M - 2M';\n treemap.leafItemSettings.colorMapping[3].color = '#DEEBAE';\n treemap.leafItemSettings.colorMapping[4].from = null;\n treemap.leafItemSettings.colorMapping[3].value = null;\n treemap.leafItemSettings.colorMapping[4].to = null;\n treemap.leafItemSettings.colorMapping[4].label = null;\n treemap.leafItemSettings.colorMapping[4].value = null;\n treemap.leafItemSettings.colorMapping[4].color = null;\n treemap.leafItemSettings.colorMapping[5].to = null;\n treemap.leafItemSettings.colorMapping[5].label = null;\n treemap.leafItemSettings.colorMapping[5].value = null;\n treemap.leafItemSettings.colorMapping[5].color = null;\n treemap.leafItemSettings.colorMapping[5].from = null;\n treemap.legendSettings.title.text = 'Area';\n treemap.refresh();\n }\n else if (element === 'EqualColorMapping') {\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n treemap.rangeColorValuePath = null;\n treemap.leafItemSettings.colorMapping[0].from = null;\n treemap.leafItemSettings.colorMapping[0].to = null;\n treemap.leafItemSettings.colorMapping[0].label = null;\n treemap.leafItemSettings.colorMapping[1].label = null;\n treemap.leafItemSettings.colorMapping[2].label = null;\n treemap.leafItemSettings.colorMapping[3].label = null;\n treemap.leafItemSettings.colorMapping[4].label = null;\n treemap.leafItemSettings.colorMapping[0].value = 'North America';\n treemap.leafItemSettings.colorMapping[0].color = '#DEEBAE';\n treemap.leafItemSettings.colorMapping[1].from = null;\n treemap.leafItemSettings.colorMapping[1].to = null;\n treemap.leafItemSettings.colorMapping[1].value = 'Oceania';\n treemap.leafItemSettings.colorMapping[1].color = '#A4D6AD';\n treemap.leafItemSettings.colorMapping[2].from = null;\n treemap.leafItemSettings.colorMapping[2].to = null;\n treemap.leafItemSettings.colorMapping[2].value = 'Asia';\n treemap.leafItemSettings.colorMapping[2].color = '#37AFAB';\n treemap.leafItemSettings.colorMapping[3].from = null;\n treemap.leafItemSettings.colorMapping[3].to = null;\n treemap.leafItemSettings.colorMapping[3].value = 'Africa';\n treemap.leafItemSettings.colorMapping[3].color = '#547C84';\n treemap.leafItemSettings.colorMapping[4].from = null;\n treemap.leafItemSettings.colorMapping[4].to = null;\n treemap.leafItemSettings.colorMapping[4].value = 'Europe';\n treemap.leafItemSettings.colorMapping[4].color = '#CEBF93';\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[1].minOpacity = null;\n treemap.leafItemSettings.colorMapping[1].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[2].minOpacity = null;\n treemap.leafItemSettings.colorMapping[2].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[3].minOpacity = null;\n treemap.leafItemSettings.colorMapping[3].maxOpacity = null;\n treemap.leafItemSettings.colorMapping[4].minOpacity = null;\n treemap.leafItemSettings.colorMapping[4].maxOpacity = null;\n treemap.equalColorValuePath = 'Location';\n treemap.legendSettings.title.text = 'Continent';\n treemap.refresh();\n }\n else if (element === 'DesaturationColorMapping') {\n document.getElementById('text1').style.display = 'block';\n document.getElementById('input1').style.display = 'block';\n treemap.rangeColorValuePath = 'Area';\n treemap.equalColorValuePath = null;\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n treemap.leafItemSettings.colorMapping[2].from = null;\n treemap.leafItemSettings.colorMapping[2].to = null;\n treemap.leafItemSettings.colorMapping[1].from = null;\n treemap.leafItemSettings.colorMapping[1].to = null;\n treemap.leafItemSettings.colorMapping[1].label = null;\n treemap.leafItemSettings.colorMapping[3].from = null;\n treemap.leafItemSettings.colorMapping[3].to = null;\n treemap.leafItemSettings.colorMapping[0].from = 100000;\n treemap.leafItemSettings.colorMapping[0].to = 2230800;\n treemap.leafItemSettings.colorMapping[0].label = '0.1M - 2M';\n treemap.leafItemSettings.colorMapping[0].value = null;\n treemap.leafItemSettings.colorMapping[1].value = null;\n treemap.leafItemSettings.colorMapping[2].value = null;\n treemap.leafItemSettings.colorMapping[3].value = null;\n treemap.leafItemSettings.colorMapping[2].color = null;\n treemap.leafItemSettings.colorMapping[1].color = null;\n treemap.leafItemSettings.colorMapping[3].color = null;\n treemap.leafItemSettings.colorMapping[0].color = ['#F0D6AD', '#19547B'];\n if (highlightCheckBox.checked) {\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n }\n else {\n treemap.leafItemSettings.colorMapping[0].minOpacity = null;\n treemap.leafItemSettings.colorMapping[0].maxOpacity = null;\n }\n treemap.legendSettings.title.text = 'Area';\n treemap.refresh();\n }\n }\n });\n sampleValue.appendTo('#colorMapping');\n"} \ No newline at end of file diff --git a/src/treemap/color-mapping.html b/src/treemap/color-mapping.html index 0eb9f138..da51e91d 100644 --- a/src/treemap/color-mapping.html +++ b/src/treemap/color-mapping.html @@ -3,15 +3,16 @@
                                      +
                                      - - diff --git a/src/treemap/color-mapping.js b/src/treemap/color-mapping.js index 6d844a1c..4ac5199b 100644 --- a/src/treemap/color-mapping.js +++ b/src/treemap/color-mapping.js @@ -1,10 +1,12 @@ this.default = function() { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var colormappingtheme = location.hash.split('/')[1]; colormappingtheme = colormappingtheme ? colormappingtheme : 'Material'; args.treemap.theme = (colormappingtheme.charAt(0).toUpperCase() + colormappingtheme.slice(1)); }, + // custom code end titleSettings: { text: 'Top 10 largest islands in the World', textStyle: { size: '15px' } @@ -42,14 +44,19 @@ this.default = function() { }, }); treemap.appendTo('#default-container'); + // code for property panel var opacity; var highlightCheckBox = new ej.buttons.CheckBox({ - change: opacity, checked: false, disabled: true + change: opacity, checked: false }, '#opacity'); highlightCheckBox.change = opacity = function (e) { var minOpacity = document.getElementById('minopacity'); var maxOpacity = document.getElementById('maxopacity'); if (e.checked) { + document.getElementById('text3').style.display = 'block'; + document.getElementById('input3').style.display = 'block'; + document.getElementById('text2').style.display = 'block'; + document.getElementById('input2').style.display = 'block'; treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value); treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value); treemap.leafItemSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value); @@ -58,6 +65,10 @@ this.default = function() { maxOpacity.disabled = false; } else { + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; treemap.leafItemSettings.colorMapping[0].minOpacity = null; treemap.leafItemSettings.colorMapping[0].maxOpacity = null; treemap.leafItemSettings.colorMapping[1].minOpacity = null; @@ -94,7 +105,12 @@ this.default = function() { change: function () { var element = sampleValue.value.toString(); if (element === 'RangeColorMapping') { - highlightCheckBox.disabled = true; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; + document.getElementById('text1').style.display = 'none'; + document.getElementById('input1').style.display = 'none'; + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; treemap.rangeColorValuePath = 'Area'; treemap.leafItemSettings.colorMapping[2].minOpacity = null; treemap.leafItemSettings.colorMapping[2].maxOpacity = null; @@ -143,7 +159,12 @@ this.default = function() { treemap.refresh(); } else if (element === 'EqualColorMapping') { - highlightCheckBox.disabled = true; + document.getElementById('text1').style.display = 'none'; + document.getElementById('input1').style.display = 'none'; + document.getElementById('text2').style.display = 'none'; + document.getElementById('input2').style.display = 'none'; + document.getElementById('text3').style.display = 'none'; + document.getElementById('input3').style.display = 'none'; treemap.rangeColorValuePath = null; treemap.leafItemSettings.colorMapping[0].from = null; treemap.leafItemSettings.colorMapping[0].to = null; @@ -185,7 +206,8 @@ this.default = function() { treemap.refresh(); } else if (element === 'DesaturationColorMapping') { - highlightCheckBox.disabled = false; + document.getElementById('text1').style.display = 'block'; + document.getElementById('input1').style.display = 'block'; treemap.rangeColorValuePath = 'Area'; treemap.equalColorValuePath = null; var minOpacity = document.getElementById('minopacity'); @@ -209,6 +231,10 @@ this.default = function() { treemap.leafItemSettings.colorMapping[3].color = null; treemap.leafItemSettings.colorMapping[0].color = ['#F0D6AD', '#19547B']; if (highlightCheckBox.checked) { + document.getElementById('text2').style.display = 'block'; + document.getElementById('input2').style.display = 'block'; + document.getElementById('text3').style.display = 'block'; + document.getElementById('input3').style.display = 'block'; treemap.leafItemSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value); treemap.leafItemSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value); } diff --git a/src/treemap/customization-stack.json b/src/treemap/customization-stack.json index 45eec4ea..08515b8e 100644 --- a/src/treemap/customization-stack.json +++ b/src/treemap/customization-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var theme = location.hash.split('/')[1];\n theme = theme ? theme : 'Material';\n args.treemap.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));\n },\n titleSettings: {\n text: 'US Gold medal categories in Summer Olympics - 2016',\n textStyle: { size: '15px' }\n },\n dataSource: window.Metals,\n weightValuePath: 'Gold',\n tooltipSettings: {\n visible: true,\n format: '${Sport} : ${Gold}'\n },\n leafItemSettings: {\n showLabels: !ej.base.Browser.isDevice,\n labelPath: 'Sport',\n fill: '#993399',\n templatePosition: 'Center',\n border: { color: 'black', width: 0.5 },\n labelFormat: ' ${Sport} - ${Gold}',\n labelTemplate: '
                                      '\n }\n });\n treemap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'US Gold medal categories in Summer Olympics - 2016',\n textStyle: { size: '15px' }\n },\n dataSource: window.Metals,\n weightValuePath: 'Gold',\n tooltipSettings: {\n visible: true,\n format: '${Sport} : ${Gold}'\n },\n leafItemSettings: {\n showLabels: !ej.base.Browser.isDevice,\n labelPath: 'Sport',\n fill: '#993399',\n templatePosition: 'Center',\n border: { color: 'black', width: 0.5 },\n labelFormat: ' ${Sport} - ${Gold}',\n labelTemplate: '
                                      '\n }\n });\n treemap.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/treemap/customization.html b/src/treemap/customization.html index 9b45c596..a2e739fb 100644 --- a/src/treemap/customization.html +++ b/src/treemap/customization.html @@ -1,6 +1,7 @@
                                      + diff --git a/src/treemap/customization.js b/src/treemap/customization.js index 87d12feb..583b90c0 100644 --- a/src/treemap/customization.js +++ b/src/treemap/customization.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var theme = location.hash.split('/')[1]; theme = theme ? theme : 'Material'; args.treemap.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)); }, + // custom code end titleSettings: { text: 'US Gold medal categories in Summer Olympics - 2016', textStyle: { size: '15px' } diff --git a/src/treemap/default-stack.json b/src/treemap/default-stack.json index 855f6f35..97ac913d 100644 --- a/src/treemap/default-stack.json +++ b/src/treemap/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var tooltipRender = function (args) {\n args.item.data.Sales = args.item.weight;\n args.treemap.tooltipSettings.format = args.item.groupIndex === 0 ? 'Country: ${Continent}
                                      Sales: ${Sales}' :\n 'Country: ${Continent}
                                      Company: ${Company}
                                      Sales: ${Sales}';\n };\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var defaultheme = location.hash.split('/')[1];\n defaultheme = defaultheme ? defaultheme : 'Material';\n args.treemap.theme = (defaultheme.charAt(0).toUpperCase() + defaultheme.slice(1));\n },\n titleSettings: {\n text: 'Car Sales by Country - 2017',\n textStyle: { size: '15px' }\n },\n itemMove: tooltipRender,\n itemClick: tooltipRender,\n rangeColorValuePath: 'Sales',\n format: 'n',\n useGroupingSeparator: true,\n dataSource: window.CarSales,\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle',\n },\n palette: ['#C33764', '#AB3566', '#993367', '#853169', '#742F6A', '#632D6C', '#532C6D', '#412A6F', '#312870', '#1D2671'],\n tooltipSettings: {\n visible: true\n },\n weightValuePath: 'Sales',\n leafItemSettings: {\n labelPath: 'Company',\n border: { color: 'white', width: 0.5 }\n },\n levels: [\n {\n groupPath: 'Continent', border: { color: 'white', width: 0.5 },\n }\n ]\n });\n treemap.appendTo('#default-container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var tooltipRender = function (args) {\n args.item.data.Sales = args.item.weight;\n args.treemap.tooltipSettings.format = args.item.groupIndex === 0 ? 'Country: ${Continent}
                                      Sales: ${Sales}' :\n 'Country: ${Continent}
                                      Company: ${Company}
                                      Sales: ${Sales}';\n };\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Car Sales by Country - 2017',\n textStyle: { size: '15px' }\n },\n itemMove: tooltipRender,\n itemClick: tooltipRender,\n rangeColorValuePath: 'Sales',\n format: 'n',\n useGroupingSeparator: true,\n dataSource: window.CarSales,\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle',\n },\n palette: ['#C33764', '#AB3566', '#993367', '#853169', '#742F6A', '#632D6C', '#532C6D', '#412A6F', '#312870', '#1D2671'],\n tooltipSettings: {\n visible: true\n },\n weightValuePath: 'Sales',\n leafItemSettings: {\n labelPath: 'Company',\n border: { color: 'white', width: 0.5 }\n },\n levels: [\n {\n groupPath: 'Continent', border: { color: 'white', width: 0.5 },\n }\n ]\n });\n treemap.appendTo('#default-container');\n"} \ No newline at end of file diff --git a/src/treemap/default.html b/src/treemap/default.html index 9dd96998..f70ab77a 100644 --- a/src/treemap/default.html +++ b/src/treemap/default.html @@ -3,6 +3,7 @@
                                      + diff --git a/src/treemap/default.js b/src/treemap/default.js index ed9399b2..55815387 100644 --- a/src/treemap/default.js +++ b/src/treemap/default.js @@ -5,11 +5,13 @@ this.default = function () { 'Country: ${Continent}
                                      Company: ${Company}
                                      Sales: ${Sales}'; }; var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var defaultheme = location.hash.split('/')[1]; defaultheme = defaultheme ? defaultheme : 'Material'; args.treemap.theme = (defaultheme.charAt(0).toUpperCase() + defaultheme.slice(1)); }, + // custom code end titleSettings: { text: 'Car Sales by Country - 2017', textStyle: { size: '15px' } diff --git a/src/treemap/drilldown-stack.json b/src/treemap/drilldown-stack.json index c3b09cf1..b2eccbd5 100644 --- a/src/treemap/drilldown-stack.json +++ b/src/treemap/drilldown-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      Source:\n en.wikipedia.org\n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n drillStart: function (args) {\n if (args.item[Object.keys(args.item)[0]].length === 1) {\n args.treemap.levels[2].showHeader = true;\n }\n else {\n args.treemap.levels[2].showHeader = false;\n }\n },\n tooltipRendering: function (args) {\n if (args.item.groupIndex !== 2) {\n args.cancel = true;\n }\n },\n load: function (args) {\n var drilltheme = location.hash.split('/')[1];\n drilltheme = drilltheme ? drilltheme : 'Material';\n args.treemap.theme = (drilltheme.charAt(0).toUpperCase() + drilltheme.slice(1));\n },\n titleSettings: {\n text: 'List of countries by population',\n textStyle: { size: '15px' }\n },\n format: 'n',\n useGroupingSeparator: true,\n palette: ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'],\n enableDrillDown: true,\n dataSource: window.Drilldown,\n weightValuePath: 'Population',\n tooltipSettings: {\n visible: true,\n format: '${Name} : ${Population}'\n },\n leafItemSettings: {\n labelPath: 'Name',\n showLabels: false,\n labelStyle: { size: '0px' },\n border: { color: 'black', width: 0.5 }\n },\n levels: [\n { groupPath: 'Continent', fill: '#336699', border: { color: 'black', width: 0.5 } },\n { groupPath: 'States', fill: '#336699', border: { color: 'black', width: 0.5 } },\n { groupPath: 'Region', fill: '#336699', showHeader: false, border: { color: 'black', width: 0.5 } },\n ]\n });\n treemap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      Source:\n en.wikipedia.org\n
                                      \n
                                      \n\n
                                      \n
                                      +
                                      Color Mapping Type
                                      		 - +
                                      -
                                      Change Opacity
                                      +                                       		-
                                      +
                                      -
                                      Min Opacity
                                      +                                       		- +
                                      -
                                      Max Opacity
                                      +                                       		- +
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Drilldown View
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Enable Breadcrumb
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Breadcrumb Connector
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Header Alignment
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Label Alignment
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n drillStart: function (args) {\n if (args.item[Object.keys(args.item)[0]].length === 1) {\n args.treemap.levels[2].showHeader = true;\n }\n else {\n args.treemap.levels[2].showHeader = false;\n }\n },\n tooltipRendering: function (args) {\n if (args.item.groupIndex !== 2) {\n args.cancel = true;\n }\n },\n\n titleSettings: {\n text: 'List of countries by population',\n textStyle: { size: '15px' }\n },\n format: 'n',\n useGroupingSeparator: true,\n palette: ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'],\n enableDrillDown: true,\n dataSource: window.Drilldown,\n weightValuePath: 'Population',\n tooltipSettings: {\n visible: true,\n format: '${Name} : ${Population}'\n },\n leafItemSettings: {\n labelPath: 'Name',\n showLabels: false,\n labelStyle: { size: '0px' },\n border: { color: 'black', width: 0.5 }\n },\n levels: [\n { groupPath: 'Continent', fill: '#336699', border: { color: 'black', width: 0.5 } },\n { groupPath: 'States', fill: '#336699', border: { color: 'black', width: 0.5 } },\n { groupPath: 'Region', fill: '#336699', showHeader: false, border: { color: 'black', width: 0.5 } },\n ]\n });\n treemap.appendTo('#container');\n var breadCrumbChange;\n var breadCrumbCheckBox = new ej.buttons.CheckBox({\n change: breadCrumbChange, checked: false\n }, '#breadCrumb');\n breadCrumbCheckBox.change = breadCrumbChange = function (e) {\n treemap.enableBreadcrumb = e.checked;\n var breadCrumbText = document.getElementById('connectorText');\n if (e.checked) {\n breadCrumbText.disabled = false;\n }\n else {\n breadCrumbText.disabled = true;\n }\n treemap.refresh();\n };\n var drillChange;\n var drillViewCheckBox = new ej.buttons.CheckBox({\n change: drillChange, checked: false\n }, '#drillView');\n drillViewCheckBox.change = drillChange = function (e) {\n treemap.drillDownView = e.checked;\n treemap.refresh();\n };\n document.getElementById('connectorText').onchange = function () {\n var value = document.getElementById('connectorText').value;\n treemap.breadcrumbConnector = value;\n treemap.refresh();\n };\n var header = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Selection selection type',\n width: 80,\n change: function () {\n for (var i = 0; i < treemap.levels.length - 1; i++) {\n treemap.levels[i].headerAlignment = header.value;\n }\n treemap.refresh();\n }\n });\n header.appendTo('#header');\n var label = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Selection selection type',\n width: 80,\n change: function () {\n treemap.levels[2].headerAlignment = label.value;\n treemap.refresh();\n }\n });\n label.appendTo('#label');\n"} \ No newline at end of file diff --git a/src/treemap/drilldown.html b/src/treemap/drilldown.html index d40c35bd..0685e9e2 100644 --- a/src/treemap/drilldown.html +++ b/src/treemap/drilldown.html @@ -1,17 +1,89 @@ -
                                      +
                                      +
                                      Source: + en.wikipedia.org +
                                      -
                                      Source: - en.wikipedia.org + +
                                      + + + + + + + + + + + + + + + + + + + + + + + +
                                      +
                                      Drilldown View
                                      +                                       		+
                                      + +
                                      +
                                      +
                                      Enable Breadcrumb
                                      +                                       		+
                                      + +
                                      +
                                      +
                                      Breadcrumb Connector
                                      +                                       		+
                                      + +
                                      +
                                      +
                                      Header Alignment
                                      +                                       		+
                                      + +
                                      +
                                      +
                                      Label Alignment
                                      +                                       		+
                                      + +
                                      +

                                      - This sample demonstrates drill-down with the continents at the top level followed by regions and countries. By clicking a continent, you can view all the countries available in that continent clearly. + This sample demonstrates drill-down with the continents at the top level followed by regions and countries. By + clicking a continent, you can view all the countries available in that continent clearly. + Customizations can be done in the treemap, by using the options in the properties panel

                                      - In this example you can see how to render a TreeMap with multiple items and drill it further. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices. + In this example, you can see how to render a TreeMap with multiple items and drill it further. + Change the drill down view and enable the breadcrumb using the options available in the properties panel.

                                      -
                                      +

                                      + The tooltip is enabled in this example. + To see the tooltip in action, hover the mouse over an item or tap an item in touch-enabled devices. +

                                      +
                                      \ No newline at end of file diff --git a/src/treemap/drilldown.js b/src/treemap/drilldown.js index 2069df9b..b992445e 100644 --- a/src/treemap/drilldown.js +++ b/src/treemap/drilldown.js @@ -13,11 +13,13 @@ this.default = function () { args.cancel = true; } }, + // custom code start load: function (args) { var drilltheme = location.hash.split('/')[1]; drilltheme = drilltheme ? drilltheme : 'Material'; args.treemap.theme = (drilltheme.charAt(0).toUpperCase() + drilltheme.slice(1)); }, + // custom code end titleSettings: { text: 'List of countries by population', textStyle: { size: '15px' } @@ -45,4 +47,54 @@ this.default = function () { ] }); treemap.appendTo('#container'); + var breadCrumbChange; + var breadCrumbCheckBox = new ej.buttons.CheckBox({ + change: breadCrumbChange, checked: false + }, '#breadCrumb'); + breadCrumbCheckBox.change = breadCrumbChange = function (e) { + treemap.enableBreadcrumb = e.checked; + var breadCrumbText = document.getElementById('connectorText'); + if (e.checked) { + breadCrumbText.disabled = false; + } + else { + breadCrumbText.disabled = true; + } + treemap.refresh(); + }; + var drillChange; + var drillViewCheckBox = new ej.buttons.CheckBox({ + change: drillChange, checked: false + }, '#drillView'); + drillViewCheckBox.change = drillChange = function (e) { + treemap.drillDownView = e.checked; + treemap.refresh(); + }; + document.getElementById('connectorText').onchange = function () { + var value = document.getElementById('connectorText').value; + treemap.breadcrumbConnector = value; + treemap.refresh(); + }; + var header = new ej.dropdowns.DropDownList({ + index: 0, + placeholder: 'Selection selection type', + width: 80, + change: function () { + for (var i = 0; i < treemap.levels.length - 1; i++) { + treemap.levels[i].headerAlignment = header.value; + } + treemap.refresh(); + } + }); + header.appendTo('#header'); + var label = new ej.dropdowns.DropDownList({ + index: 0, + placeholder: 'Selection selection type', + width: 80, + change: function () { + treemap.levels[2].headerAlignment = label.value; + treemap.refresh(); + } + }); + label.appendTo('#label'); }; \ No newline at end of file diff --git a/src/treemap/election-stack.json b/src/treemap/election-stack.json index e76c5d11..036802d3 100644 --- a/src/treemap/election-stack.json +++ b/src/treemap/election-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      Source:\n en.wikipedia.org\n
                                      \n\n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Type
                                      \n                                       		\n \n
                                      \n
                                      Position
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var legendtheme = location.hash.split('/')[1];\n legendtheme = legendtheme ? legendtheme : 'Material';\n args.treemap.theme = (legendtheme.charAt(0).toUpperCase() + legendtheme.slice(1));\n },\n titleSettings: {\n text: 'US Presidential election result - 2016',\n textStyle: { size: '15px' }\n },\n dataSource: window.electionData,\n weightValuePath: 'Population',\n tooltipSettings: {\n visible: true,\n format: ' ${Winner}
                                      State : ${State}
                                      Trump : ${Trump} %
                                      Clinton : ${Clinton} %'\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle',\n height: '10'\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'WinPercentage',\n equalColorValuePath: 'Winner',\n leafItemSettings: {\n labelPath: 'State',\n fill: '#6699cc',\n border: { color: 'white', width: 0.5 },\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n },\n });\n treemap.appendTo('#container');\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select legend type',\n width: 100,\n change: function () {\n treemap.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (treemap.legendSettings.orientation === 'Horizontal' || treemap.legendSettings.orientation === 'None') {\n treemap.legendSettings.height = '10';\n treemap.legendSettings.width = '';\n }\n else {\n treemap.legendSettings.height = '70%';\n treemap.legendSettings.width = '10';\n }\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n treemap.refresh();\n }\n });\n mode.appendTo('#layoutMode');\n var legendPosition = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: '100%',\n change: function () {\n treemap.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n treemap.legendSettings.orientation = 'Vertical';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.height = '70%';\n treemap.legendSettings.width = '10';\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n }\n else {\n treemap.legendSettings.orientation = 'Horizontal';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.height = '10';\n treemap.legendSettings.width = '';\n }\n }\n treemap.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      Source:\n en.wikipedia.org\n
                                      \n\n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Type
                                      \n                                       		\n \n
                                      \n
                                      Position
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n resize: function (args) {\n if (args.currentSize.width > args.currentSize.height && args.treemap.legendSettings.position === 'Auto') {\n treemap.legendSettings.orientation = 'Vertical';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.height = '70%';\n treemap.legendSettings.width = '10';\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n }\n else {\n treemap.legendSettings.orientation = 'Horizontal';\n if (treemap.legendSettings.mode === 'Default') {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n else {\n treemap.legendSettings.height = '10';\n treemap.legendSettings.width = '';\n }\n }\n },\n titleSettings: {\n text: 'US Presidential election result - 2016',\n textStyle: { size: '15px' }\n },\n dataSource: window.electionData,\n weightValuePath: 'Population',\n tooltipSettings: {\n visible: true,\n format: ' ${Winner}
                                      State : ${State}
                                      Trump : ${Trump} %
                                      Clinton : ${Clinton} %'\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle',\n height: '10'\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'WinPercentage',\n equalColorValuePath: 'Winner',\n leafItemSettings: {\n labelPath: 'State',\n fill: '#6699cc',\n border: { color: 'white', width: 0.5 },\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n },\n });\n treemap.appendTo('#container');\n // code for property panel\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select legend type',\n width: 100,\n change: function () {\n treemap.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (treemap.legendSettings.orientation === 'Horizontal' || treemap.legendSettings.orientation === 'None') {\n treemap.legendSettings.height = '10';\n treemap.legendSettings.width = '';\n }\n else {\n treemap.legendSettings.height = '70%';\n treemap.legendSettings.width = '10';\n }\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n treemap.refresh();\n }\n });\n mode.appendTo('#layoutMode');\n var legendPosition = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: '100%',\n change: function () {\n treemap.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n treemap.legendSettings.orientation = 'Vertical';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.width = '10';\n treemap.legendSettings.height = '70%';\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n }\n else if (legendPosition.value === 'Auto') {\n if (treemap.availableSize.width > treemap.availableSize.height) {\n treemap.legendSettings.orientation = 'Vertical';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.height = '70%';\n treemap.legendSettings.width = '10';\n }\n else {\n treemap.legendSettings.width = '';\n treemap.legendSettings.height = '';\n }\n }\n else {\n treemap.legendSettings.orientation = 'Horizontal';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.width = '';\n treemap.legendSettings.height = '10';\n }\n else {\n treemap.legendSettings.height = '';\n treemap.legendSettings.width = '';\n }\n }\n }\n else {\n treemap.legendSettings.orientation = 'Horizontal';\n if (treemap.legendSettings.mode === 'Interactive') {\n treemap.legendSettings.height = '10';\n treemap.legendSettings.width = '';\n }\n }\n treemap.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n"} \ No newline at end of file diff --git a/src/treemap/election.html b/src/treemap/election.html index bc6e05a0..46e73e8d 100644 --- a/src/treemap/election.html +++ b/src/treemap/election.html @@ -1,11 +1,12 @@
                                      +
                                      - +
                                      @@ -30,6 +31,7 @@ + @@ -40,21 +42,26 @@

                                      - This sample visualizes the 2016 United States presidential election results. The type and position of the legends can be changed using the Type and Position options in the properties panel. + This sample visualizes the 2016 United States presidential election results. The type and position of the + legends can be changed using the Type and Position options in the properties panel.

                                      - In this example, you can see the type of legend available in TreeMap. The equal color mapping is applied based on certain value. + In this example, you can see the type of legend available in TreeMap. The equal color mapping is applied based + on certain value.

                                      - The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices + The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an + item in touch enabled devices

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/treemap/election.js b/src/treemap/election.js index e042f34d..993ae03f 100644 --- a/src/treemap/election.js +++ b/src/treemap/election.js @@ -1,10 +1,36 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var legendtheme = location.hash.split('/')[1]; legendtheme = legendtheme ? legendtheme : 'Material'; args.treemap.theme = (legendtheme.charAt(0).toUpperCase() + legendtheme.slice(1)); }, + // custom code end + resize: function (args) { + if (args.currentSize.width > args.currentSize.height && args.treemap.legendSettings.position === 'Auto') { + treemap.legendSettings.orientation = 'Vertical'; + if (treemap.legendSettings.mode === 'Interactive') { + treemap.legendSettings.height = '70%'; + treemap.legendSettings.width = '10'; + } + else { + treemap.legendSettings.height = ''; + treemap.legendSettings.width = ''; + } + } + else { + treemap.legendSettings.orientation = 'Horizontal'; + if (treemap.legendSettings.mode === 'Default') { + treemap.legendSettings.height = ''; + treemap.legendSettings.width = ''; + } + else { + treemap.legendSettings.height = '10'; + treemap.legendSettings.width = ''; + } + } + }, titleSettings: { text: 'US Presidential election result - 2016', textStyle: { size: '15px' } @@ -13,7 +39,7 @@ this.default = function () { weightValuePath: 'Population', tooltipSettings: { visible: true, - format: ' ${Winner}
                                      State : ${State}
                                      Trump : ${Trump} %
                                      Clinton : ${Clinton} %' + format: ' ${Winner}
                                      State : ${State}
                                      Trump : ${Trump} %
                                      Clinton : ${Clinton} %' }, legendSettings: { visible: true, @@ -40,6 +66,7 @@ this.default = function () { }, }); treemap.appendTo('#container'); + // code for property panel var mode = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select legend type', @@ -73,14 +100,38 @@ this.default = function () { if (legendPosition.value === 'Left' || legendPosition.value === 'Right') { treemap.legendSettings.orientation = 'Vertical'; if (treemap.legendSettings.mode === 'Interactive') { - treemap.legendSettings.height = '70%'; treemap.legendSettings.width = '10'; + treemap.legendSettings.height = '70%'; } else { treemap.legendSettings.height = ''; treemap.legendSettings.width = ''; } } + else if (legendPosition.value === 'Auto') { + if (treemap.availableSize.width > treemap.availableSize.height) { + treemap.legendSettings.orientation = 'Vertical'; + if (treemap.legendSettings.mode === 'Interactive') { + treemap.legendSettings.height = '70%'; + treemap.legendSettings.width = '10'; + } + else { + treemap.legendSettings.width = ''; + treemap.legendSettings.height = ''; + } + } + else { + treemap.legendSettings.orientation = 'Horizontal'; + if (treemap.legendSettings.mode === 'Interactive') { + treemap.legendSettings.width = ''; + treemap.legendSettings.height = '10'; + } + else { + treemap.legendSettings.height = ''; + treemap.legendSettings.width = ''; + } + } + } else { treemap.legendSettings.orientation = 'Horizontal'; if (treemap.legendSettings.mode === 'Interactive') { diff --git a/src/treemap/label-stack.json b/src/treemap/label-stack.json index 653edf4f..5a10aa19 100644 --- a/src/treemap/label-stack.json +++ b/src/treemap/label-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      Label Intersect Action
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var labeltheme = location.hash.split('/')[1];\n labeltheme = labeltheme ? labeltheme : 'Material';\n args.treemap.theme = (labeltheme.charAt(0).toUpperCase() + labeltheme.slice(1));\n },\n titleSettings: {\n text: 'Countries ordered based on Population - 2017',\n textStyle: { size: '15px' }\n },\n dataSource: window.Country_Population,\n tooltipSettings: {\n visible: true,\n format: '${Country} : ${Population}'\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n width: '300px',\n height: '10',\n position: 'Top'\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'Population',\n weightValuePath: 'Population',\n leafItemSettings: {\n showLabels: true,\n labelPath: 'Country',\n fill: 'red',\n colorMapping: [\n {\n to: 10000000000,\n from: 100000000,\n label: '200M - 1.3M',\n color: '#4B134F'\n }, { to: 100000000, from: 20000000, label: '20M - 200M', color: '#8C304D' },\n { to: 20000000, from: 100000, label: '0.1M - 20M', color: '#C84B4B' }\n ]\n },\n });\n treemap.appendTo('#container');\n var labelMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Label Action',\n width: 100,\n change: function () {\n treemap.leafItemSettings.interSectAction = labelMode.value;\n treemap.refresh();\n }\n });\n labelMode.appendTo('#labels');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      \n
                                      Label Intersect Action
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Countries ordered based on Population - 2017',\n textStyle: { size: '15px' }\n },\n dataSource: window.Country_Population,\n tooltipSettings: {\n visible: true,\n format: '${Country} : ${Population}'\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n width: '300px',\n height: '10',\n position: 'Top'\n },\n format: 'n',\n useGroupingSeparator: true,\n rangeColorValuePath: 'Population',\n weightValuePath: 'Population',\n leafItemSettings: {\n showLabels: true,\n labelPath: 'Country',\n fill: 'red',\n colorMapping: [\n {\n to: 10000000000,\n from: 100000000,\n label: '200M - 1.3M',\n color: '#4B134F'\n }, { to: 100000000, from: 20000000, label: '20M - 200M', color: '#8C304D' },\n { to: 20000000, from: 100000, label: '0.1M - 20M', color: '#C84B4B' }\n ]\n },\n });\n treemap.appendTo('#container');\n // code for property panel\n var labelMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Label Action',\n width: 100,\n change: function () {\n treemap.leafItemSettings.interSectAction = labelMode.value;\n treemap.refresh();\n }\n });\n labelMode.appendTo('#labels');\n"} \ No newline at end of file diff --git a/src/treemap/label.html b/src/treemap/label.html index d99c0bf8..f3ebe47d 100644 --- a/src/treemap/label.html +++ b/src/treemap/label.html @@ -1,9 +1,11 @@
                                      +
                                      +
                                      @@ -36,10 +38,12 @@ Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices

                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/treemap/label.js b/src/treemap/label.js index 6aa49dc0..50ca5515 100644 --- a/src/treemap/label.js +++ b/src/treemap/label.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var labeltheme = location.hash.split('/')[1]; labeltheme = labeltheme ? labeltheme : 'Material'; args.treemap.theme = (labeltheme.charAt(0).toUpperCase() + labeltheme.slice(1)); }, + // custom code end titleSettings: { text: 'Countries ordered based on Population - 2017', textStyle: { size: '15px' } @@ -41,6 +43,7 @@ this.default = function () { }, }); treemap.appendTo('#container'); + // code for property panel var labelMode = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select Label Action', diff --git a/src/treemap/layout-stack.json b/src/treemap/layout-stack.json index 70ccba26..aff30dd3 100644 --- a/src/treemap/layout-stack.json +++ b/src/treemap/layout-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      Layout Type
                                      \n                                       		\n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var layouttheme = location.hash.split('/')[1];\n layouttheme = layouttheme ? layouttheme : 'Material';\n args.treemap.theme = (layouttheme.charAt(0).toUpperCase() + layouttheme.slice(1));\n },\n titleSettings: {\n text: 'Top 10 countries by GDP Nominal - 2015',\n textStyle: { size: '15px' }\n },\n dataSource: window.econmics,\n weightValuePath: 'GDP',\n tooltipSettings: {\n visible: true,\n format: '${State}
                                      Rank : ${Rank}'\n },\n rangeColorValuePath: 'GDP',\n leafItemSettings: {\n labelPath: 'State',\n labelFormat: '${State}
                                      $${GDP} Trillion
                                      (${percentage} %)',\n labelStyle: {\n color: '#000000'\n },\n border: {\n color: '#000000',\n width: 0.5\n },\n colorMapping: [\n {\n from: 1550,\n to: 17946,\n color: '#9cbb59',\n minOpacity: 0.7,\n maxOpacity: 1,\n }\n ]\n },\n });\n treemap.appendTo('#layout-container');\n var layoutMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 90,\n change: function () {\n treemap.layoutType = layoutMode.value;\n treemap.refresh();\n }\n });\n layoutMode.appendTo('#layoutMode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n\n
                                      \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Layout Type
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Render Direction
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Top 10 countries by GDP Nominal - 2015',\n textStyle: { size: '15px' }\n },\n dataSource: window.econmics,\n weightValuePath: 'GDP',\n tooltipSettings: {\n visible: true,\n format: '${State}
                                      Rank : ${Rank}'\n },\n rangeColorValuePath: 'GDP',\n leafItemSettings: {\n labelPath: 'State',\n labelFormat: '${State}
                                      $${GDP} Trillion
                                      (${percentage} %)',\n labelStyle: {\n color: '#000000'\n },\n border: {\n color: '#000000',\n width: 0.5\n },\n colorMapping: [\n {\n from: 1550,\n to: 17946,\n color: '#9cbb59',\n minOpacity: 0.7,\n maxOpacity: 1,\n }\n ]\n },\n });\n treemap.appendTo('#layout-container');\n // code for property panel\n var layoutMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 90,\n change: function () {\n treemap.layoutType = layoutMode.value;\n treemap.refresh();\n }\n });\n layoutMode.appendTo('#layoutMode');\n var highlightMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select Rendering Direction',\n width: 115,\n change: function () {\n treemap.renderDirection = highlightMode.value;\n treemap.refresh();\n }\n });\n highlightMode.appendTo('#highlightMode');\n"} \ No newline at end of file diff --git a/src/treemap/layout.html b/src/treemap/layout.html index 3575b21c..901d8125 100644 --- a/src/treemap/layout.html +++ b/src/treemap/layout.html @@ -1,48 +1,78 @@ -
                                      +
                                      +
                                      - - - - -
                                      -
                                      Layout Type
                                      -                                       		- -
                                      + + + +
                                      Layout Type
                                      + + +
                                      + +
                                      + + + + +
                                      Render Direction
                                      + + +
                                      + +
                                      + + + +

                                      - This sample illustrates the GDP nominal of top 10 countries in the year 2015. The layout of the TreeMap can be changed by using the Layout Type in properties panel. + This sample illustrates the GDP nominal of top 10 countries in the year 2015. + The layout and rendering direction of the TreeMap can be changed by using the Layout Type and + Render Direction + in the properties panel.

                                      - In this example, you can change the layout of the TreeMap as desaturation color mapping has been applied to denote the weightage of the items by varying the fill color. The labels text also have been formatted and placed in multiple lines. + In this example, you can change the layout of the TreeMap as desaturation color mapping has been applied to + denote the weightage of the items by varying the fill color. + The label's text also has been formatted and placed in multiple lines.

                                      - Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices. + The tooltip is enabled in this example. To see the tooltip in action, + hover the mouse over an item or tap an item in touch-enabled devices.

                                      - + +
                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/treemap/layout.js b/src/treemap/layout.js index 7148692e..253b36ff 100644 --- a/src/treemap/layout.js +++ b/src/treemap/layout.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + //custom code start load: function(args) { var layouttheme = location.hash.split('/')[1]; layouttheme = layouttheme ? layouttheme : 'Material'; args.treemap.theme = (layouttheme.charAt(0).toUpperCase() + layouttheme.slice(1)); }, + // custom code end titleSettings: { text: 'Top 10 countries by GDP Nominal - 2015', textStyle: { size: '15px' } @@ -38,6 +40,7 @@ this.default = function () { }, }); treemap.appendTo('#layout-container'); + // code for property panel var layoutMode = new ej.dropdowns.DropDownList({ index: 0, placeholder: 'Select layoutMode type', @@ -48,4 +51,14 @@ this.default = function () { } }); layoutMode.appendTo('#layoutMode'); + var highlightMode = new ej.dropdowns.DropDownList({ + index: 0, + placeholder: 'Select Rendering Direction', + width: 115, + change: function () { + treemap.renderDirection = highlightMode.value; + treemap.refresh(); + } + }); + highlightMode.appendTo('#highlightMode'); }; \ No newline at end of file diff --git a/src/treemap/map-data.js b/src/treemap/map-data.js index 8d358442..e114178a 100644 --- a/src/treemap/map-data.js +++ b/src/treemap/map-data.js @@ -893,4 +893,221 @@ window.ProductSale =[ {Product:"ZTE", Percentage:3.3}, {Product:"Lenovo", Percentage:3.2}, {Product:"Alcate", Percentage:1.3} - ]; \ No newline at end of file + ]; + +window.RTLData = [ + { + Continent: [ + { + Name: "Africa", Size: 519.70, Country: [ + { Name: "The Gambia", Size: 29.80 }, + { Name: "Lesotho", Size: 29.20 }, + { Name: "South Africa", Size: 27.30 }, + { Name: "Swaziland", Size: 25.70 }, + { Name: "Mozambique", Size: 24.50 }, + { Name: "Namibia", Size: 22.30 }, + { Name: "Comoros", Size: 20.10 }, + { Name: "Gabon", Size: 18.50 }, + { Name: "Botswana", Size: 18.10 }, + { Name: "Libya", Size: 17.70 }, + { Name: "Tunisia", Size: 14.70 }, + { Name: "Sao Tome and principe", Size: 13.70 }, + { Name: "Congo", Size: 11.40 }, + { Name: "Kenya", Size: 11.00 }, + { Name: "Monocco", Size: 10.80 }, + { Name: "Cabo Verde", Size: 10.70 }, + { Name: "Sudan", Size: 13.30 }, + { Name: "Mauritania", Size: 10.20 }, + { Name: "Mauritius", Size: 7.40 }, + { Name: "Zambia", Size: 7.40 }, + { Name: "Equatorial Guinea", Size: 6.70 }, + { Name: "Malawi", Size: 6.70 }, + { Name: "Mali", Size: 9.70 }, + { Name: "Eritrea", Size: 6.60 }, + { Name: "Togo", Size: 6.20 }, + { Name: "Djibouti", Size: 6.10 }, + { Name: "Guinea-Bissau", Size: 6.10 }, + { Name: "Somalia", Size: 6.00 }, + { Name: "Algeria", Size: 11.70 }, + { Name: "Senegal", Size: 9.50 }, + { Name: "Central African Republic", Size: 6.40 }, + { Name: "Chad", Size: 5.80 }, + { Name: "Ethiopia", Size: 5.40 }, + { Name: "Zimbabwe", Size: 5.30 }, + { Name: "Cameroon", Size: 4.50 }, + { Name: "Guinea", Size: 6.30 }, + { Name: "Ghana", Size: 5.80 }, + { Name: "Liberia", Size: 4.00 }, + { Name: "Burkina Faso", Size: 3.00 }, + { Name: "Sierra Leone", Size: 2.80 }, + { Name: "Tanzania", Size: 2.70 }, + { Name: "Egypt", Size: 11.60 }, + { Name: "Cote d'Ivoire", Size: 9.20 }, + { Name: "Angolia", Size: 6.20 }, + { Name: "Nigeria", Size: 5.50 }, + { Name: "Dem.Rep.Congo", Size: 3.60 }, + { Name: "Niger", Size: 2.60 }, + { Name: "Madagascar", Size: 2.40 }, + { Name: "Uganda", Size: 2.30 }, + { Name: "Rwanda", Size: 2.60 }, + { Name: "Burundi", Size: 1.60 }, + { Name: "Benin", Size: 1.00 } + ] + } + ] + }, + { + Continent: [ + { + Name: "Asia", Size: 184.80, Country: [ + { Name: "Armenia", Size: 17.40 }, + { Name: "Tajikistan", Size: 10.80 }, + { Name: "Afghanistan", Size: 8.50 }, + { Name: "Pakistan", Size: 5.90 }, + { Name: "Philippines", Size: 5.70 }, + { Name: "Indonesia", Size: 5.60 }, + { Name: "Kazakhstan", Size: 5.40 }, + { Name: "Georgia", Size: 11.50 }, + { Name: "Uzbekistan", Size: 8.70 }, + { Name: "Kyrgyz Republic", Size: 7.80 }, + { Name: "Russia", Size: 5.30 }, + { Name: "Sri Lanka", Size: 4.60 }, + { Name: "Dem.People's Rep.Korea", Size: 4.20 }, + { Name: "Timor-Leste", Size: 4.10 }, + { Name: "Brunai", Size: 6.40 }, + { Name: "Azerbaijan", Size: 5.10 }, + { Name: "Bangladesh", Size: 4.00 }, + { Name: "Hong Kong SAR, China", Size: 3.50 }, + { Name: "Malaysia", Size: 3.40 }, + { Name: "Nepal", Size: 3.20 }, + { Name: "Iran", Size: 11.40 }, + { Name: "Turkmenistan", Size: 8.60 }, + { Name: "Mongalia", Size: 6.40 }, + { Name: "China", Size: 4.60 }, + { Name: "Korea", Size: 3.70 }, + { Name: "Japan", Size: 2.90 }, + { Name: "Macao SAR, China", Size: 2.20 }, + { Name: "Vietnam", Size: 2.20 }, + { Name: "India", Size: 3.60 }, + { Name: "Bhutan", Size: 2.40 }, + { Name: "Singapore", Size: 2.10 }, + { Name: "Lao PDR", Size: 1.50 }, + { Name: "Myanmar", Size: 0.80 }, + { Name: "Thailand", Size: 1.00 }, + { Name: "Cambodia", Size: 0.30 } + ] + } + ] + }, + { + Continent: [ + { + Name: "South America", Size: 94.50, Country: [ + { Name: "Brazil", Size: 13.40 }, + { Name: "Guyana", Size: 11.50 }, + { Name: "Colombia", Size: 9.10 }, + { Name: "Suri Name", Size: 8.90 }, + { Name: "Uruguay", Size: 8.30 }, + { Name: "Argentina", Size: 8.10 }, + { Name: "Chile", Size: 6.90 }, + { Name: "Peru", Size: 6.80 }, + { Name: "Venezuela", Size: 7.30 }, + { Name: "Paraguay", Size: 5.50 }, + { Name: "Ecuador", Size: 5.20 }, + { Name: "Bolivia", Size: 3.50 } + ] + } + ] + }, + { + Continent: [ + { + Name: "Europe", Size: 361.10, Country: [ + { Name: "Bosnia and Herzegovina", Size: 25.80 }, + { Name: "Macedonia", Size: 24.40 }, + { Name: "Greece", Size: 23.10 }, + { Name: "Montenegro", Size: 17.70 }, + { Name: "Spain", Size: 17.40 }, + { Name: "Italy", Size: 11.60 }, + { Name: "Portugal", Size: 9.90 }, + { Name: "Latvia", Size: 9.40 }, + { Name: "Slovak Republic", Size: 9.00 }, + { Name: "Ukraine", Size: 9.00 }, + { Name: "Albania", Size: 15.00 }, + { Name: "Croatia", Size: 11.50 }, + { Name: "Finland", Size: 8.60 }, + { Name: "Estonia", Size: 7.30 }, + { Name: "Sweden", Size: 7.20 }, + { Name: "Denmark", Size: 6.30 }, + { Name: "Serbia", Size: 14.40 }, + { Name: "Turkey", Size: 11.40 }, + { Name: "Lithuania", Size: 8.10 }, + { Name: "Ireland", Size: 6.20 }, + { Name: "Bulgaria", Size: 6.00 }, + { Name: "Luxembourg", Size: 6.00 }, + { Name: "Romania", Size: 5.90 }, + { Name: "Slovenia", Size: 7.50 }, + { Name: "Austria", Size: 5.70 }, + { Name: "Malta", Size: 4.80 }, + { Name: "Switzerland", Size: 4.50 }, + { Name: "Moldova", Size: 4.40 }, + { Name: "Poland", Size: 5.10 }, + { Name: "United Kingdom", Size: 4.70 }, + { Name: "Hungary", Size: 4.20 }, + { Name: "Czech Republic", Size: 3.40 }, + { Name: "Cyprus", Size: 11.90 }, + { Name: "France", Size: 9.90 }, + { Name: "Belgium", Size: 7.40 }, + { Name: "Netherland", Size: 4.90 }, + { Name: "Norway", Size: 4.50 }, + { Name: "Germany", Size: 3.80 }, + { Name: "Iceland", Size: 2.70 }, + { Name: "Belarus", Size: 0.50 } + ] + } + ] + }, + { + Continent: [ + { + Name: "Central America and the Caribean", Size: 170.60, Country: [ + { Name: "Dominican Republic", Size: 13.80 }, + { Name: "Bahamas", Size: 12.60 }, + { Name: "Puerto Rico", Size: 12.30 }, + { Name: "Haiti", Size: 13.40 }, + { Name: "Barbados", Size: 11.40 }, + { Name: "Costa Rica", Size: 8.50 }, + { Name: "El Salvador", Size: 6.90 }, + { Name: "Jamaica", Size: 13.00 }, + { Name: "Belize", Size: 11.40 }, + { Name: "Nicaragua", Size: 6.20 }, + { Name: "Panama", Size: 4.70 }, + { Name: "Honduras", Size: 5.70 }, + { Name: "Trinidad and Tobago", Size: 4.40 }, + { Name: "Cuba", Size: 2.60 }, + { Name: "Guatemala", Size: 2.60 } + ] + } + ] + }, + { + Continent: [ + { + Name: "Middle East", Size: 101.90, Country: [ + { Name: "Oman", Size: 16.90 }, + { Name: "Yemen", Size: 16.00 }, + { Name: "Jordan", Size: 14.90 }, + { Name: "Syrian Arab Republic", Size: 14.20 }, + { Name: "Lebanon", Size: 6.70 }, + { Name: "Saudi Arabia", Size: 5.50 }, + { Name: "Iraq", Size: 14.80 }, + { Name: "Israel", Size: 4.40 }, + { Name: "United Arab Emirates", Size: 3.80 }, + { Name: "Kuwait", Size: 2.40 }, + { Name: "Bahrain", Size: 1.20 }, + { Name: "Qatar", Size: 0.30 } + ] + } + ] + } +]; \ No newline at end of file diff --git a/src/treemap/pie-stack.json b/src/treemap/pie-stack.json index 1f759d3e..cea53193 100644 --- a/src/treemap/pie-stack.json +++ b/src/treemap/pie-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      Source:\n en.worldstat.info\n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function (args) {\n var pietheme = location.hash.split('/')[1];\n pietheme = pietheme ? pietheme : 'Material';\n args.treemap.theme = (pietheme.charAt(0).toUpperCase() + pietheme.slice(1));\n },\n loaded: function (args) {\n var template = document.getElementById(args.treemap.element.id + '_Label_Template_Group');\n if (template) {\n for (var i = 0; i < template.childElementCount; i++) {\n AccumulationChartRender(template.childNodes[i].childNodes[0].id);\n }\n count = 0;\n }\n },\n resize: function (args) {\n for (var i = 0; i < chartCollection.length; i++) {\n chartCollection[i].destroy();\n }\n },\n tooltipRendering: function (args) {\n if (args.item.groupIndex !== 1 ) {\n args.cancel = true;\n }\n },\n tooltipSettings: {\n visible: true,\n format: ' ${Gender} : ${Population}'\n },\n titleSettings: {\n text: 'Population of the continents based on gender and age group - 2011',\n textStyle: { size: '15px' }\n },\n format: 'n', useGroupingSeparator: true,\n dataSource: window.Continent_Data,\n weightValuePath: 'Population',\n leafItemSettings: {\n labelPath: 'Gender',\n fill: '#A1317D',\n showLabels: false,\n border: { color: 'black', width: 0.5 },\n labelFormat: '${Gender} : ${Population}',\n templatePosition: 'Center',\n labelTemplate: '
                                      ',\n },\n levels: [\n {\n groupPath: 'Continent', fill: '#7E2361', border: { color: 'black', width: 1, },\n headerAlignment: 'Center', groupGap: 0, headerStyle: { size: '14px' }\n }\n ]\n });\n treemap.appendTo('#container');\n\nvar chartCollection = [];\nvar count = 0;\nfunction AccumulationChartRender(id) {\n var chartData = getData();\n var dataSource = chartData.data;\n var name = chartData.name;\n var chart = new ej.charts.AccumulationChart({\n background: 'transparent',\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n legendSettings: {\n visible: false\n },\n series: [\n {\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: name,\n palettes: ['#1E1E1E', '#00BDAE', '#FFFFFF'],\n dataSource: dataSource,\n dataLabel: {\n visible: false\n },\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#' + id);\n chartCollection.push(chart);\n}\nfunction getData() {\n var dataSource;\n var dataName;\n if (count === 0) {\n dataSource = [\n { 'x': '0-15 years', y: 40.8 }, { 'x': '15-64 years', y: 56.2 },\n { 'x': 'Above 64 years', y: 3.0 }\n ];\n dataName = 'Asia';\n }\n else if (count === 1) {\n dataSource = [\n { 'x': '0-15 years', y: 15.5 }, { 'x': '15-64 years', y: 12.9 },\n { 'x': 'Above 64 years', y: 41.4 }\n ];\n dataName = 'Asia';\n }\n else if (count === 2) {\n dataSource = [\n { 'x': '0-15 years', y: 25.1 }, { 'x': '15-64 years', y: 67.8 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Africa';\n }\n else if (count === 3) {\n dataSource = [\n { 'x': '0-15 years', y: 15.3 }, { 'x': '15-64 years', y: 68.4 },\n { 'x': 'Above 64 years', y: 16.3 }\n ];\n dataName = 'Africa';\n }\n else if (count === 4) {\n dataSource = [\n { 'x': '0-15 years', y: 22.8 }, { 'x': '15-64 years', y: 65.9 },\n { 'x': 'Above 64 years', y: 11.4 }\n ];\n dataName = 'Europe';\n }\n else if (count === 5) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Europe';\n }\n else if (count === 6) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n else if (count === 7) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n else if (count === 8) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Oceania';\n }\n else if (count === 9) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Oceania';\n }\n else if (count === 10) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'North America';\n }\n else if (count === 11) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'North America';\n }\n else if (count === 12) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n count++;\n return new Object({ name: dataName, data: dataSource });\n}\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      Source:\n en.worldstat.info\n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n loaded: function (args) {\n var template = document.getElementById(args.treemap.element.id + '_Label_Template_Group');\n if (template) {\n for (var i = 0; i < template.childElementCount; i++) {\n AccumulationChartRender(template.childNodes[i].childNodes[0].id);\n }\n count = 0;\n }\n },\n resize: function (args) {\n for (var i = 0; i < chartCollection.length; i++) {\n chartCollection[i].destroy();\n }\n },\n tooltipRendering: function (args) {\n if (args.item.groupIndex !== 1 ) {\n args.cancel = true;\n }\n },\n tooltipSettings: {\n visible: true,\n format: ' ${Gender} : ${Population}'\n },\n titleSettings: {\n text: 'Population of the continents based on gender and age group - 2011',\n textStyle: { size: '15px' }\n },\n format: 'n', useGroupingSeparator: true,\n dataSource: window.Continent_Data,\n weightValuePath: 'Population',\n leafItemSettings: {\n labelPath: 'Gender',\n fill: '#A1317D',\n showLabels: false,\n border: { color: 'black', width: 0.5 },\n labelFormat: '${Gender} : ${Population}',\n templatePosition: 'Center',\n labelTemplate: '
                                      ',\n },\n levels: [\n {\n groupPath: 'Continent', fill: '#7E2361', border: { color: 'black', width: 1, },\n headerAlignment: 'Center', groupGap: 0, headerStyle: { size: '14px' }\n }\n ]\n });\n treemap.appendTo('#container');\n\n// code for pie chart\nvar chartCollection = [];\nvar count = 0;\nfunction AccumulationChartRender(id) {\n var chartData = getData();\n var dataSource = chartData.data;\n var name = chartData.name;\n var chart = new ej.charts.AccumulationChart({\n background: 'transparent',\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n legendSettings: {\n visible: false\n },\n series: [\n {\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: name,\n palettes: ['#1E1E1E', '#00BDAE', '#FFFFFF'],\n dataSource: dataSource,\n dataLabel: {\n visible: false\n },\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#' + id);\n chartCollection.push(chart);\n}\nfunction getData() {\n var dataSource;\n var dataName;\n if (count === 0) {\n dataSource = [\n { 'x': '0-15 years', y: 40.8 }, { 'x': '15-64 years', y: 56.2 },\n { 'x': 'Above 64 years', y: 3.0 }\n ];\n dataName = 'Asia';\n }\n else if (count === 1) {\n dataSource = [\n { 'x': '0-15 years', y: 15.5 }, { 'x': '15-64 years', y: 12.9 },\n { 'x': 'Above 64 years', y: 41.4 }\n ];\n dataName = 'Asia';\n }\n else if (count === 2) {\n dataSource = [\n { 'x': '0-15 years', y: 25.1 }, { 'x': '15-64 years', y: 67.8 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Africa';\n }\n else if (count === 3) {\n dataSource = [\n { 'x': '0-15 years', y: 15.3 }, { 'x': '15-64 years', y: 68.4 },\n { 'x': 'Above 64 years', y: 16.3 }\n ];\n dataName = 'Africa';\n }\n else if (count === 4) {\n dataSource = [\n { 'x': '0-15 years', y: 22.8 }, { 'x': '15-64 years', y: 65.9 },\n { 'x': 'Above 64 years', y: 11.4 }\n ];\n dataName = 'Europe';\n }\n else if (count === 5) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Europe';\n }\n else if (count === 6) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n else if (count === 7) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n else if (count === 8) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Oceania';\n }\n else if (count === 9) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'Oceania';\n }\n else if (count === 10) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'North America';\n }\n else if (count === 11) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'North America';\n }\n else if (count === 12) {\n dataSource = [\n { 'x': '0-15 years', y: 26.8 }, { 'x': '15-64 years', y: 66.1 },\n { 'x': 'Above 64 years', y: 7.1 }\n ];\n dataName = 'South America';\n }\n count++;\n return new Object({ name: dataName, data: dataSource });\n}\n"} \ No newline at end of file diff --git a/src/treemap/pie.html b/src/treemap/pie.html index 91c77d5b..6c1833f5 100644 --- a/src/treemap/pie.html +++ b/src/treemap/pie.html @@ -1,6 +1,7 @@
                                      + diff --git a/src/treemap/pie.js b/src/treemap/pie.js index 17a7d6f3..155b1977 100644 --- a/src/treemap/pie.js +++ b/src/treemap/pie.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function (args) { var pietheme = location.hash.split('/')[1]; pietheme = pietheme ? pietheme : 'Material'; args.treemap.theme = (pietheme.charAt(0).toUpperCase() + pietheme.slice(1)); }, + // custom code end loaded: function (args) { var template = document.getElementById(args.treemap.element.id + '_Label_Template_Group'); if (template) { @@ -53,6 +55,7 @@ this.default = function () { }); treemap.appendTo('#container'); }; +// code for pie chart var chartCollection = []; var count = 0; function AccumulationChartRender(id) { diff --git a/src/treemap/print-stack.json b/src/treemap/print-stack.json index 3419df8e..cbfd14f5 100644 --- a/src/treemap/print-stack.json +++ b/src/treemap/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Source:\n zeenews.india.com\n
                                      \n
                                      \n \n \n \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Export Type\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      File Name
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n\n \n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function (args) {\n var printtheme = location.hash.split('/')[1];\n printtheme = printtheme ? printtheme : 'Material';\n args.treemap.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1));\n },\n titleSettings: {\n text: 'Top 10 best selling smartphone brands - 2017',\n textStyle: { size: '15px' }\n },\n dataSource: window.ProductSale,\n layoutType: 'SliceAndDiceVertical',\n weightValuePath: 'Percentage',\n rangeColorValuePath: 'Percentage',\n tooltipSettings: {\n visible: true,\n format: '${Product} (+${Percentage}) %'\n },\n leafItemSettings: {\n labelPath: 'Product',\n fill: '#6699cc',\n border: { color: 'black', width: 0.5 },\n labelPosition: 'Center',\n interSectAction: 'Hide',\n labelFormat: '${Product} (+${Percentage}) %',\n colorMapping: [\n {\n from: 1.3,\n to: 22,\n color: '#FAB665',\n minOpacity: 0.5,\n maxOpacity: 1\n }\n ]\n },\n });\n treemap.appendTo('#container');\n var togglebtn = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n treemap.print();\n };\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 70\n });\n mode.appendTo('#mode');\n var togglebtn1 = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn1.appendTo('#togglebtn1');\n document.getElementById('togglebtn1').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n treemap.export(mode.value, fileName);\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n \n\n
                                      \n
                                      \n
                                      \n
                                      \n \n
                                      Source:\n zeenews.india.com\n
                                      \n
                                      \n \n \n \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Export Type\n
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      File Name
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Top 10 best selling smartphone brands - 2017',\n textStyle: { size: '15px' }\n },\n dataSource: window.ProductSale,\n layoutType: 'SliceAndDiceVertical',\n weightValuePath: 'Percentage',\n rangeColorValuePath: 'Percentage',\n tooltipSettings: {\n visible: true,\n format: '${Product} (+${Percentage}) %'\n },\n leafItemSettings: {\n labelPath: 'Product',\n fill: '#6699cc',\n border: { color: 'black', width: 0.5 },\n labelPosition: 'Center',\n interSectAction: 'Hide',\n labelFormat: '${Product} (+${Percentage}) %',\n colorMapping: [\n {\n from: 1.3,\n to: 22,\n color: '#FAB665',\n minOpacity: 0.5,\n maxOpacity: 1\n }\n ]\n },\n });\n treemap.appendTo('#container');\n // code for property panel\n var togglebtn = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n treemap.print();\n };\n var mode = new ej.dropdowns.DropDownList({\n index: 0,\n width: 70\n });\n mode.appendTo('#mode');\n var togglebtn1 = new ej.buttons.Button({\n cssClass: 'e-info', isPrimary: true\n });\n togglebtn1.appendTo('#togglebtn1');\n document.getElementById('togglebtn1').onclick = function () {\n var fileName = (document.getElementById('fileName')).value;\n treemap.export(mode.value, fileName);\n };\n"} \ No newline at end of file diff --git a/src/treemap/print.html b/src/treemap/print.html index 31976b93..f0ddfa2f 100644 --- a/src/treemap/print.html +++ b/src/treemap/print.html @@ -5,12 +5,11 @@
                                      +
                                      - -

                                      This sample depicts the top 10 best-selling smartphone brands. Print and export options have been enabled in this sample. @@ -20,9 +19,8 @@

                                      In this example, you can see how to export and print the rendered TreeMap. The TreeMap can be exported to JPEG, PNG, SVG, and PDF formats.

                                      - -
                                      +
                                      @@ -69,8 +67,7 @@
                                      - - + - + \ No newline at end of file diff --git a/src/treemap/print.js b/src/treemap/print.js index fdc0ab59..29db525c 100644 --- a/src/treemap/print.js +++ b/src/treemap/print.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function (args) { var printtheme = location.hash.split('/')[1]; printtheme = printtheme ? printtheme : 'Material'; args.treemap.theme = (printtheme.charAt(0).toUpperCase() + printtheme.slice(1)); }, + // custom code end titleSettings: { text: 'Top 10 best selling smartphone brands - 2017', textStyle: { size: '15px' } @@ -36,6 +38,7 @@ this.default = function () { }, }); treemap.appendTo('#container'); + // code for property panel var togglebtn = new ej.buttons.Button({ cssClass: 'e-info', isPrimary: true }); diff --git a/src/treemap/rtl-stack.json b/src/treemap/rtl-stack.json new file mode 100644 index 00000000..1f97d9c4 --- /dev/null +++ b/src/treemap/rtl-stack.json @@ -0,0 +1 @@ +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n\n
                                      Source:\n www.indexmundi.com\n
                                      \n
                                      \n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({ \n\n titleSettings: {\n text: 'List of Countries by Unemployment Rate',\n textStyle: { size: '15px' }\n },\n format: 'n',\n useGroupingSeparator: true,\n palette: ['#5B244D', '#6F3953', ' #87525A', '#A26F63', '#BA896B', '#D5A574', '#F1C37D'],\n enableDrillDown: true,\n renderDirection: 'TopRightBottomLeft',\n enableRtl: true,\n dataSource: window.RTLData,\n weightValuePath: 'Size',\n tooltipSettings: {\n visible: true,\n format: '${Size} : ${Name}'\n },\n leafItemSettings: {\n labelPath: 'Name',\n showLabels: true, \n },\n levels: [\n { groupPath: 'Continent', border: { color: 'black', width: 0.5 }, headerAlignment: 'Far' },\n { groupPath: 'Country', border: { color: 'black', width: 0.5 }, headerAlignment: 'Far' }\n ]\n });\n treemap.appendTo('#container'); \n"} \ No newline at end of file diff --git a/src/treemap/rtl.html b/src/treemap/rtl.html new file mode 100644 index 00000000..c5eebbb7 --- /dev/null +++ b/src/treemap/rtl.html @@ -0,0 +1,22 @@ +
                                      +
                                      + +
                                      Source: + www.indexmundi.com +
                                      +
                                      + +
                                      +

                                      + This sample orders the countries based on the unemployment rate by rendering TreeMap in the right-to-left (RTL) + direction +

                                      +
                                      +
                                      +

                                      + In this example, you can see how to render a TreeMap from the right-to-left direction. The tooltip is enabled in + this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch-enabled + devices. +

                                      +
                                      \ No newline at end of file diff --git a/src/treemap/rtl.js b/src/treemap/rtl.js new file mode 100644 index 00000000..72ff7061 --- /dev/null +++ b/src/treemap/rtl.js @@ -0,0 +1,36 @@ +this.default = function () { + var treemap = new ej.treemap.TreeMap({ + // custom code start + load: function (args) { + var drilltheme = location.hash.split('/')[1]; + drilltheme = drilltheme ? drilltheme : 'Material'; + args.treemap.theme = (drilltheme.charAt(0).toUpperCase() + drilltheme.slice(1)); + }, + // custom code end + titleSettings: { + text: 'List of Countries by Unemployment Rate', + textStyle: { size: '15px' } + }, + format: 'n', + useGroupingSeparator: true, + palette: ['#5B244D', '#6F3953', ' #87525A', '#A26F63', '#BA896B', '#D5A574', '#F1C37D'], + enableDrillDown: true, + renderDirection: 'TopRightBottomLeft', + enableRtl: true, + dataSource: window.RTLData, + weightValuePath: 'Size', + tooltipSettings: { + visible: true, + format: '${Size} : ${Name}' + }, + leafItemSettings: { + labelPath: 'Name', + showLabels: true, + }, + levels: [ + { groupPath: 'Continent', border: { color: 'black', width: 0.5 }, headerAlignment: 'Far' }, + { groupPath: 'Country', border: { color: 'black', width: 0.5 }, headerAlignment: 'Far' } + ] + }); + treemap.appendTo('#container'); +}; \ No newline at end of file diff --git a/src/treemap/sample.json b/src/treemap/sample.json index d5bb5e8c..45c72a9d 100644 --- a/src/treemap/sample.json +++ b/src/treemap/sample.json @@ -2,8 +2,8 @@ "name": "TreeMap", "directory": "treemap", "category": "Data Visualization", + "type": "update", "ftName": "treemap", - "type": "update", "dataSourcePath":"src/treemap/map-data.js", "samples": [ { @@ -23,6 +23,7 @@ "name": "Layout", "description": "This demo for Essential JS2 TreeMap control illustrates the GDP nominal of top 10 countries in the year 2015. The layout of the TreeMap can also be changed.", "category": "TreeMap", + "type": "update", "api": {}, "sourceFiles":[ { "displayName": "treemap-data.js", "path":"src/treemap/map-data.js" }, @@ -35,6 +36,7 @@ "name": "Drilldown", "description": "This demo for Essential JS2 TreeMap control demonstrates drill-down with the continents at the top level followed by regions and countries.", "category": "TreeMap", + "type": "update", "api": {}, "sourceFiles":[ { "displayName": "treemap-data.js", "path":"src/treemap/map-data.js" }, @@ -83,8 +85,8 @@ "name": "Legend", "description": "This demo for Essential JS2 TreeMap control visualizes the 2016 U.S.A. presidential election results. Default and interactive are the two types of legend.", "category": "TreeMap", + "type": "update", "api": {}, - "type": "update", "sourceFiles":[ { "displayName": "treemap-data.js", "path":"src/treemap/map-data.js" }, { "displayName": "election.html", "path":"src/treemap/election.html" }, @@ -96,7 +98,6 @@ "name": "Color Mapping", "description": "This demo for Essential JS2 TreeMap control visualizes the population level of various continents in 2011 based on the gender and age group.", "category": "TreeMap", - "type": "new", "api": {}, "sourceFiles":[ { "displayName": "color-mapping.html", "path":"src/treemap/color-mapping.html" }, @@ -139,6 +140,28 @@ { "displayName": "pie.html", "path":"src/treemap/pie.html" }, { "displayName": "pie.js", "path":"src/treemap/pie.js" } ] + }, + { + "url": "rtl", + "name": "RTL", + "description": "This demo for Essential JS2 TreeMap control visualizes the unemployment rate of various continents based on the countries.", + "category": "TreeMap", + "type": "new", + "api": {}, + "sourceFiles": [ + { + "displayName": "map-data.js", + "path": "src/treemap/map-data.js" + }, + { + "displayName": "rtl.html", + "path": "src/treemap/rtl.html" + }, + { + "displayName": "rtl.js", + "path": "src/treemap/rtl.js" + } + ] } diff --git a/src/treemap/selection-stack.json b/src/treemap/selection-stack.json index f5e7e129..e6fe6003 100644 --- a/src/treemap/selection-stack.json +++ b/src/treemap/selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Source:\n www.indexmundi.com\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Highlight
                                      \n
                                      \n
                                      Enable
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Selection
                                      \n
                                      \n
                                      Enable
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function(args) {\n var selecttheme = location.hash.split('/')[1];\n selecttheme = selecttheme ? selecttheme : 'Material';\n args.treemap.theme = (selecttheme.charAt(0).toUpperCase() + selecttheme.slice(1));\n },\n titleSettings: {\n text: 'Import and Export details of US'\n },\n dataSource: window.importData,\n weightValuePath: 'sales',\n levels: [\n { groupPath: 'dataType', fill: '#c5e2f7', headerStyle: { size: '16px' }, headerAlignment: 'Center', groupGap: 5 },\n { groupPath: 'product', fill: '#a4d1f2', headerAlignment: 'Center', groupGap: 2 }\n ],\n leafItemSettings: {\n labelPath: 'type',\n fill: '#8ebfe2',\n labelPosition: 'Center',\n gap: 10\n },\n selectionSettings: {\n enable: true,\n fill: '#58a0d3',\n border: { width: 0.3, color: 'black' },\n opacity: '1'\n },\n highlightSettings: {\n enable: true,\n fill: '#71b0dd',\n border: { width: 0.3, color: 'black' },\n opacity: '1'\n }\n });\n treemap.appendTo('#import-container');\n var highlightChange;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: highlightChange, checked: true\n }, '#highlightEnable');\n var selectionChange;\n var selectionCheckBox = new ej.buttons.CheckBox({\n change: selectionChange, checked: true\n }, '#SelectionEnable');\n highlightCheckBox.change = highlightChange = function (e) {\n treemap.highlightSettings.enable = e.checked;\n treemap.refresh();\n };\n selectionCheckBox.change = selectionChange = function (e) {\n treemap.selectionSettings.enable = e.checked;\n treemap.refresh();\n };\n var highlightMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select highlight type',\n width: 80,\n change: function () {\n treemap.highlightSettings.mode = highlightMode.value;\n treemap.refresh();\n }\n });\n highlightMode.appendTo('#highlightMode');\n var selectionMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Selection selection type',\n width: 80,\n change: function () {\n treemap.selectionSettings.mode = selectionMode.value;\n treemap.refresh();\n }\n });\n selectionMode.appendTo('#selectionMode');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      Source:\n www.indexmundi.com\n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
                                      \n
                                      Highlight
                                      \n
                                      \n
                                      Enable
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Selection
                                      \n
                                      \n
                                      Enable
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      Mode
                                      \n                                       		\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n \n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n titleSettings: {\n text: 'Import and Export details of US'\n },\n dataSource: window.importData,\n weightValuePath: 'sales',\n levels: [\n { groupPath: 'dataType', fill: '#c5e2f7', headerStyle: { size: '16px' }, headerAlignment: 'Center', groupGap: 5 },\n { groupPath: 'product', fill: '#a4d1f2', headerAlignment: 'Center', groupGap: 2 }\n ],\n leafItemSettings: {\n labelPath: 'type',\n fill: '#8ebfe2',\n labelPosition: 'Center',\n gap: 10\n },\n selectionSettings: {\n enable: true,\n fill: '#58a0d3',\n border: { width: 0.3, color: 'black' },\n opacity: '1'\n },\n highlightSettings: {\n enable: true,\n fill: '#71b0dd',\n border: { width: 0.3, color: 'black' },\n opacity: '1'\n }\n });\n treemap.appendTo('#import-container');\n var highlightChange;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: highlightChange, checked: true\n }, '#highlightEnable');\n var selectionChange;\n var selectionCheckBox = new ej.buttons.CheckBox({\n change: selectionChange, checked: true\n }, '#SelectionEnable');\n highlightCheckBox.change = highlightChange = function (e) {\n treemap.highlightSettings.enable = e.checked;\n treemap.refresh();\n };\n selectionCheckBox.change = selectionChange = function (e) {\n treemap.selectionSettings.enable = e.checked;\n treemap.refresh();\n };\n var highlightMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Select highlight type',\n width: 80,\n change: function () {\n treemap.highlightSettings.mode = highlightMode.value;\n treemap.refresh();\n }\n });\n highlightMode.appendTo('#highlightMode');\n var selectionMode = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Selection selection type',\n width: 80,\n change: function () {\n treemap.selectionSettings.mode = selectionMode.value;\n treemap.refresh();\n }\n });\n selectionMode.appendTo('#selectionMode');\n"} \ No newline at end of file diff --git a/src/treemap/selection.html b/src/treemap/selection.html index 0f6854a6..0c5b8374 100644 --- a/src/treemap/selection.html +++ b/src/treemap/selection.html @@ -1,4 +1,93 @@ - -
                                      -
                                      -
                                      -
                                      -
                                      Source: - www.indexmundi.com -
                                      -
                                      -
                                      - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                      -
                                      Highlight
                                      -
                                      -
                                      Enable
                                      -                                       		-
                                      - -
                                      -
                                      -
                                      Mode
                                      -                                       		-
                                      - -
                                      -
                                      -
                                      Selection
                                      -
                                      -
                                      Enable
                                      -                                       		-
                                      - -
                                      -
                                      -
                                      Mode
                                      -                                       		-
                                      - -
                                      -
                                      -
                                      - - - -
                                      -

                                      - This sample depicts the details of goods imported by Japan. Selection and highlight options have been enabled in this sample. -

                                      -
                                      -
                                      -

                                      - In this example, you can see the modes available for performing highlight and selection in TreeMap. It can be either enabled or disabled. -

                                      -
                                      -

                                      Injecting Module

                                      -

                                      - - TreeMap component features are segregated into individual feature-wise modules. To use highlight and selection, inject the Selection module using the TreeMap.Inject(TreeMapSelection)inject the Highlight module using the TreeMap.Inject(TreeMapHighlight) method. -

                                      - -
                                      - \ No newline at end of file + + \ No newline at end of file diff --git a/src/treemap/selection.js b/src/treemap/selection.js index d0a98ad5..650d617f 100644 --- a/src/treemap/selection.js +++ b/src/treemap/selection.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function(args) { var selecttheme = location.hash.split('/')[1]; selecttheme = selecttheme ? selecttheme : 'Material'; args.treemap.theme = (selecttheme.charAt(0).toUpperCase() + selecttheme.slice(1)); }, + // custom code end titleSettings: { text: 'Import and Export details of US' }, diff --git a/src/treemap/tooltip-stack.json b/src/treemap/tooltip-stack.json index b525546d..4d8153b0 100644 --- a/src/treemap/tooltip-stack.json +++ b/src/treemap/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Airports:\n ${Count}\n
                                      \n
                                      \n
                                      \n
                                      Source:\n en.wikipedia.org\n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n load: function (args) {\n var tooltheme = location.hash.split('/')[1];\n tooltheme = tooltheme ? tooltheme : 'Material';\n args.treemap.theme = (tooltheme.charAt(0).toUpperCase() + tooltheme.slice(1));\n },\n tooltipSettings: {\n visible: true,\n template: '#Tooltip'\n },\n titleSettings: {\n text: 'Country wise International Airport count in South America',\n textStyle: {\n size: '15px'\n }\n },\n dataSource: window.Airport_Count,\n weightValuePath: 'Count',\n equalColorValuePath: 'Count',\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle'\n },\n leafItemSettings: {\n showLabels: true,\n labelPath: 'State',\n labelPosition: 'Center',\n labelStyle: {\n size: '13px'\n },\n fill: '#6699cc',\n border: { width: 1, color: 'white' },\n colorMapping: [\n {\n value: '25',\n color: '#634D6F'\n },\n {\n value: '12',\n color: '#B34D6D'\n },\n {\n value: '9',\n color: '#557C5C'\n },\n {\n value: '7',\n color: '#44537F'\n },\n {\n value: '6',\n color: '#637392'\n },\n {\n value: '3',\n color: '#7C754D'\n },\n {\n value: '2',\n color: '#2E7A64'\n },\n {\n value: '1',\n color: '#95659A'\n },\n ]\n },\n });\n treemap.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n Airports:\n ${Count}\n
                                      \n
                                      \n
                                      \n\n
                                      Source:\n en.wikipedia.org\n
                                      \n\n\n\n","index.js":"{{ripple}}\n var treemap = new ej.treemap.TreeMap({\n\n tooltipSettings: {\n visible: true,\n template: '#Tooltip'\n },\n titleSettings: {\n text: 'Country wise International Airport count in South America',\n textStyle: {\n size: '15px'\n }\n },\n dataSource: window.Airport_Count,\n weightValuePath: 'Count',\n equalColorValuePath: 'Count',\n legendSettings: {\n visible: true,\n position: 'Top',\n shape: 'Rectangle'\n },\n leafItemSettings: {\n showLabels: true,\n labelPath: 'State',\n labelPosition: 'Center',\n labelStyle: {\n size: '13px'\n },\n fill: '#6699cc',\n border: { width: 1, color: 'white' },\n colorMapping: [\n {\n value: '25',\n color: '#634D6F'\n },\n {\n value: '12',\n color: '#B34D6D'\n },\n {\n value: '9',\n color: '#557C5C'\n },\n {\n value: '7',\n color: '#44537F'\n },\n {\n value: '6',\n color: '#637392'\n },\n {\n value: '3',\n color: '#7C754D'\n },\n {\n value: '2',\n color: '#2E7A64'\n },\n {\n value: '1',\n color: '#95659A'\n },\n ]\n },\n });\n treemap.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/treemap/tooltip.html b/src/treemap/tooltip.html index d9d2af3b..da0ad58c 100644 --- a/src/treemap/tooltip.html +++ b/src/treemap/tooltip.html @@ -1,6 +1,7 @@
                                      + + @@ -29,9 +31,8 @@ Tooltip template is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices.

                                      - -
                                      + \ No newline at end of file + + \ No newline at end of file diff --git a/src/treemap/tooltip.js b/src/treemap/tooltip.js index e985fcf2..ba1d7706 100644 --- a/src/treemap/tooltip.js +++ b/src/treemap/tooltip.js @@ -1,10 +1,12 @@ this.default = function () { var treemap = new ej.treemap.TreeMap({ + // custom code start load: function (args) { var tooltheme = location.hash.split('/')[1]; tooltheme = tooltheme ? tooltheme : 'Material'; args.treemap.theme = (tooltheme.charAt(0).toUpperCase() + tooltheme.slice(1)); }, + // custom code end tooltipSettings: { visible: true, template: '#Tooltip' diff --git a/src/treeview/check-box-stack.json b/src/treeview/check-box-stack.json index c0015960..2e01fa9b 100644 --- a/src/treeview/check-box-stack.json +++ b/src/treeview/check-box-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with checkboxes\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.checkBoxData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n showCheckBox: true,\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with checkboxes\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.checkBoxData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n showCheckBox: true,\n });\n treeObj.appendTo('#tree');\n\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: true,\n label: 'Auto Check',\n change: function(args) {\n treeObj.autoCheck = args.checked;\n },\n });\n checkBoxObj.appendTo('#check');\n"} \ No newline at end of file diff --git a/src/treeview/check-box.html b/src/treeview/check-box.html index f61281a3..1e3247c6 100644 --- a/src/treeview/check-box.html +++ b/src/treeview/check-box.html @@ -1,8 +1,24 @@ -
                                      +
                                      +
                                      +
                                      + + + + + + +
                                      +
                                      + +
                                      +
                                      +
                                      +
                                      + - +

                                      This sample demonstrates the CheckBox functionalities of the TreeView. Click on any parent node's CheckBox to check/uncheck the node and its child nodes. The parent node's checked state will be determined by its child nodes checked state.

                                      @@ -19,5 +35,5 @@

                                      The TreeView component can be rendered with checkbox on the left side of each tree node. This allows the user to check more than one nodes, and this can be enabled by the showCheckBox property.

                                      In this demo, the TreeView is populated with checkbox enabled.

                                      -

                                      For more information, you can refer to the Checkboxes section from the documentation.

                                      +

                                      For more information, you can refer to the Checkboxes section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/check-box.js b/src/treeview/check-box.js index 9cc4de6e..acf03187 100644 --- a/src/treeview/check-box.js +++ b/src/treeview/check-box.js @@ -5,4 +5,13 @@ this.default = function () { showCheckBox: true, }); treeObj.appendTo('#tree'); + + var checkBoxObj = new ej.buttons.CheckBox({ + checked: true, + label: 'Auto Check', + change: function(args) { + treeObj.autoCheck = args.checked; + }, + }); + checkBoxObj.appendTo('#check'); }; \ No newline at end of file diff --git a/src/treeview/default-stack.json b/src/treeview/default-stack.json index d1372196..7f661d31 100644 --- a/src/treeview/default-stack.json +++ b/src/treeview/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView by mapping its fields property with data source properties\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.hierarchicalData, id: 'id', text: 'name', child: 'subChild' }\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView by mapping its fields property with data source properties\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.hierarchicalData, id: 'id', text: 'name', child: 'subChild' }\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file diff --git a/src/treeview/default.html b/src/treeview/default.html index 4114ccb1..3cd1717c 100644 --- a/src/treeview/default.html +++ b/src/treeview/default.html @@ -4,6 +4,7 @@
                                      + - +

                                      This sample demonstrates the default functionalities of the TreeView. Click on node to select it, and click on icon or double click on node to expand/collapse it. The child nodes will be loaded on expand the parent node.

                                      @@ -20,5 +21,5 @@

                                      The TreeView component is used to display the data in a hierarchical structure with the configuration options to control the way of data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager binding data fields to the fields property.

                                      In this demo, the TreeView is populated with its minimum default settings.

                                      -

                                      More information on the TreeView instantiation can be found in the documentation section.

                                      +

                                      More information on the TreeView instantiation can be found in the documentation section.

                                      \ No newline at end of file diff --git a/src/treeview/drag-and-drop-stack.json b/src/treeview/drag-and-drop-stack.json index a2eed783..7a907d6e 100644 --- a/src/treeview/drag-and-drop-stack.json +++ b/src/treeview/drag-and-drop-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n

                                      TreeView-1

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      TreeView-2

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      ListView

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the first TreeView by mapping its fields property with data source properties\n var tree1Obj = new ej.navigations.TreeView({\n fields: { dataSource: window.productTeam1, id: 'id', text: 'name', child: 'child' },\n allowDragAndDrop: true,\n nodeDragStop: onDragStop\n });\n // Render the second TreeView by mapping its fields property with data source properties\n tree1Obj.appendTo('#tree1');\n var tree2Obj = new ej.navigations.TreeView({\n fields: { dataSource: window.productTeam2, id: 'id', text: 'name', child: 'child' },\n allowDragAndDrop: true,\n nodeDragStop: onDragStop\n });\n tree2Obj.appendTo('#tree2');\n // Render the ListView with custom template\n var listData = [];\n var listObj = new ej.lists.ListView({\n dataSource: [],\n cssClass: 'custom-list',\n template: '
                                      ${text}
                                      ',\n });\n listObj.appendTo('#list');\n // Drop the dragged TreeView node into ListView\n var id = 1;\n function onDragStop(event) {\n var targetEle = ej.base.closest(event.target, '.e-droppable');\n targetEle = targetEle ? targetEle : event.target;\n // Check the target as ListView or not\n if (targetEle && targetEle.classList.contains('custom-list')) {\n event.cancel = true;\n var newData = [];\n if (event.draggedNode.classList.contains('e-active')) {\n var selNodes = this.selectedNodes;\n for (var i = 0, len = selNodes.length; i < len; i++) {\n var nodeEle = document.querySelector('[data-uid=\"' + selNodes[i] + '\"]').querySelector('.e-list-text');\n var nodeText = nodeEle.textContent;\n var newNode = { id: 'l' + id, text: nodeText, class: 'custom-delete', iconId: 'i' + id };\n id++;\n newData.push(newNode);\n }\n }\n else {\n var text = 'text';\n var nodeText1 = event.draggedNodeData[text];\n var newNode1 = { id: 'l' + id, text: nodeText1, class: 'custom-delete', iconId: 'i' + id };\n id++;\n newData.push(newNode1);\n }\n // Add collection of node to ListView\n listObj.addItem(newData, undefined);\n }\n }\n // Add the custom action for delete icon in ListView\n document.getElementById('list').addEventListener('mousedown', function (event) {\n if (event.target.classList.contains('custom-delete')) {\n var node = ej.base.closest(event.target, 'li');\n listObj.removeItem(node);\n }\n });\n document.getElementById('overlay').addEventListener('mousedown', function (event) {\n document.getElementById('overlay').style.display = 'none';\n });\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n

                                      TreeView-1

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      TreeView-2

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      ListView

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the first TreeView by mapping its fields property with data source properties\n var tree1Obj = new ej.navigations.TreeView({\n fields: { dataSource: window.productTeam1, id: 'id', text: 'name', child: 'child' },\n allowDragAndDrop: true,\n nodeDragStop: onDragStop\n });\n // Render the second TreeView by mapping its fields property with data source properties\n tree1Obj.appendTo('#tree1');\n var tree2Obj = new ej.navigations.TreeView({\n fields: { dataSource: window.productTeam2, id: 'id', text: 'name', child: 'child' },\n allowDragAndDrop: true,\n nodeDragStop: onDragStop\n });\n tree2Obj.appendTo('#tree2');\n // Render the ListView with custom template\n var listData = [];\n var listObj = new ej.lists.ListView({\n dataSource: [],\n cssClass: 'custom-list',\n template: '
                                      ${text}
                                      ',\n });\n listObj.appendTo('#list');\n // Drop the dragged TreeView node into ListView\n var id = 1;\n function onDragStop(event) {\n var targetEle = ej.base.closest(event.target, '.e-droppable');\n targetEle = targetEle ? targetEle : event.target;\n // Check the target as ListView or not\n if (targetEle && targetEle.classList.contains('custom-list')) {\n event.cancel = true;\n var newData = [];\n if (event.draggedNode.classList.contains('e-active')) {\n var selNodes = this.selectedNodes;\n for (var i = 0, len = selNodes.length; i < len; i++) {\n var nodeEle = document.querySelector('[data-uid=\"' + selNodes[i] + '\"]').querySelector('.e-list-text');\n var nodeText = nodeEle.textContent;\n var newNode = { id: 'l' + id, text: nodeText, class: 'custom-delete', iconId: 'i' + id };\n id++;\n newData.push(newNode);\n }\n }\n else {\n var text = 'text';\n var nodeText1 = event.draggedNodeData[text];\n var newNode1 = { id: 'l' + id, text: nodeText1, class: 'custom-delete', iconId: 'i' + id };\n id++;\n newData.push(newNode1);\n }\n // Add collection of node to ListView\n listObj.addItem(newData, undefined);\n }\n }\n // Add the custom action for delete icon in ListView\n document.getElementById('list').addEventListener('mousedown', function (event) {\n if (event.target.classList.contains('custom-delete')) {\n var node = ej.base.closest(event.target, 'li');\n listObj.removeItem(node);\n }\n });\n document.getElementById('overlay').addEventListener('mousedown', function (event) {\n document.getElementById('overlay').style.display = 'none';\n });\n\n"} \ No newline at end of file diff --git a/src/treeview/drag-and-drop.html b/src/treeview/drag-and-drop.html index a4eb0ed9..ced1e317 100644 --- a/src/treeview/drag-and-drop.html +++ b/src/treeview/drag-and-drop.html @@ -20,6 +20,7 @@

                                      ListView

                                      + - +

                                      This sample demonstrates the drag and drop functionality of TreeView. A drag and drop image is present at the top of the sample which hides on clicking the sample. To drag and drop node, select and drag the desired node and drop it on the target node or external container.

                                      The TreeView component allows users to drag any node and drop it on any other node in the same or different tree using allowDragAndDrop property. Additionally, it supports dropping a tree node to an external container using nodeDragStop event of the TreeView

                                      -

                                      For more information, you can refer to the Drag and Drop section from the documentation.

                                      +

                                      For more information, you can refer to the Drag and Drop section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/icons-stack.json b/src/treeview/icons-stack.json index 2d81f4cc..aea3e0de 100644 --- a/src/treeview/icons-stack.json +++ b/src/treeview/icons-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with image icons\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.treeViewData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },\n sortOrder: 'Ascending'\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with image icons\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.treeViewData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },\n sortOrder: 'Ascending'\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file diff --git a/src/treeview/icons.html b/src/treeview/icons.html index 38a610c4..340048f9 100644 --- a/src/treeview/icons.html +++ b/src/treeview/icons.html @@ -4,6 +4,7 @@
                                      + - +

                                      This sample demonstrates the node can be configured by icons/images in TreeView. Click on icon or double click on node to expand/collapse it, and show the icons/images that configured with nodes.

                                      diff --git a/src/treeview/local-data-stack.json b/src/treeview/local-data-stack.json index cdd94510..9ce1b8da 100644 --- a/src/treeview/local-data-stack.json +++ b/src/treeview/local-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n
                                      \n

                                      Hierarchical Data

                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      List Data

                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with hierarchical data source\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.continentData, id: 'code', text: 'name', child: 'countries' }\n });\n treeObj.appendTo('#tree');\n \n // Render the TreeView with list data source\n var listTreeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }\n });\n listTreeObj.appendTo('#listtree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n
                                      \n

                                      Hierarchical Data

                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n

                                      List Data

                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with hierarchical data source\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.continentData, id: 'code', text: 'name', child: 'countries' }\n });\n treeObj.appendTo('#tree');\n \n // Render the TreeView with list data source\n var listTreeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }\n });\n listTreeObj.appendTo('#listtree');\n"} \ No newline at end of file diff --git a/src/treeview/local-data.html b/src/treeview/local-data.html index 8447b174..e093efed 100644 --- a/src/treeview/local-data.html +++ b/src/treeview/local-data.html @@ -14,6 +14,7 @@

                                      List Data

                                      + - +

                                      This sample demonstrates the binding of local data to the TreeView. Click on node to select it, and click on icon or double click on node to expand/collapse it.

                                      @@ -36,5 +37,5 @@

                                      List Data

                                      The TreeView component loads the data through the dataSource property, where the data can be either local data or remote data. In case of local data, the data structure can be hierarchical data or list data (with self-referential format i.e., mapped with the id and parentID fields).

                                      In this demo, the first TreeView is bound with the hierarchical data that contains array of nested objects. And the second TreeView is bound with the list type data where the parent-child relation is referred by the id and parentID mapping fields.

                                      -

                                      For more information, you can refer to the Data Binding section from the documentation.

                                      +

                                      For more information, you can refer to the Data Binding section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/multiple-selection-stack.json b/src/treeview/multiple-selection-stack.json index 9232eb67..7caefc64 100644 --- a/src/treeview/multiple-selection-stack.json +++ b/src/treeview/multiple-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with node multi select option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.countries, id: 'id', parentID: 'parentId', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },\n allowMultiSelection: true,\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with node multi select option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.countries, id: 'id', parentID: 'parentId', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },\n allowMultiSelection: true,\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file diff --git a/src/treeview/multiple-selection.html b/src/treeview/multiple-selection.html index 196638a5..b88d82f6 100644 --- a/src/treeview/multiple-selection.html +++ b/src/treeview/multiple-selection.html @@ -4,6 +4,7 @@
                                      + - +

                                      This sample demonstrates the multiple node selection functionalities of the TreeView. To select multiple nodes, press the CTRL key and select the desired nodes; or select any node and by pressing SHIFT key select another node, this selects all the nodes in-between the selected nodes.

                                      @@ -20,5 +21,5 @@

                                      The TreeView component allows to select multiple nodes by enabling the allowMultiSelection property.

                                      In this demo, the TreeView is enabled with multiple selection

                                      -

                                      For more information, refer to the Multi Selection section from the documentation.

                                      +

                                      For more information, refer to the Multi Selection section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/node-editing-stack.json b/src/treeview/node-editing-stack.json index df5bcc70..b0a1933d 100644 --- a/src/treeview/node-editing-stack.json +++ b/src/treeview/node-editing-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with editing option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.treeData, id: 'id', text: 'name', child: 'child' },\n allowEditing: true,\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView with editing option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.treeData, id: 'id', text: 'name', child: 'child' },\n allowEditing: true,\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file diff --git a/src/treeview/node-editing.html b/src/treeview/node-editing.html index e5532fbd..9d09ff71 100644 --- a/src/treeview/node-editing.html +++ b/src/treeview/node-editing.html @@ -4,6 +4,7 @@
                                      + - +

                                      This sample demonstrates the node editing functionalities of the TreeView. Double click on the node or press F2 key on selected node to edit node's text in input textbox. Press enter key or click outside of the input element to save the node's, or press escape key to cancel the modified text.

                                      The TreeView component has the built-in option to edit and modify the node text in inline by enabling the allowEditing property.

                                      -

                                      For more information, you can refer to the Node Editing section from the documentation.

                                      +

                                      For more information, you can refer to the Node Editing section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/remote-data-stack.json b/src/treeview/remote-data-stack.json index 4637ef63..04333c74 100644 --- a/src/treeview/remote-data-stack.json +++ b/src/treeview/remote-data-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n Loading...\n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Use data manager to get tree data from remote source\n var data = new ej.data.DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc',\n adaptor: new ej.data.ODataV4Adaptor(),\n crossDomain: true\n });\n // Set queries to filter and fetch remote data\n var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);\n var query1 = new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5);\n // Render the TreeView with remote data source\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: data, query: query, id: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID',\n child: { dataSource: data, query: query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' }\n },\n created: show,\n dataBound: hide,\n });\n treeObj.appendTo('#tree');\n // Show loading message, while loading tree data\n function show() {\n var popup = document.getElementById('loading');\n popup.style.display = '';\n }\n // Hide loading message, after tree data has been loaded\n function hide() {\n var popup = document.getElementById('loading');\n popup.style.display = 'none';\n }\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n Loading...\n \n
                                      \n
                                      \n
                                      \n\n\n\n
                                      ","index.js":"{{ripple}}\n // Use data manager to get tree data from remote source\n var data = new ej.data.DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc',\n adaptor: new ej.data.ODataV4Adaptor(),\n crossDomain: true\n });\n // Set queries to filter and fetch remote data\n var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);\n var query1 = new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5);\n // Render the TreeView with remote data source\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: data, query: query, id: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID',\n child: { dataSource: data, query: query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' }\n },\n created: show,\n dataBound: hide,\n });\n treeObj.appendTo('#tree');\n // Show loading message, while loading tree data\n function show() {\n var popup = document.getElementById('loading');\n popup.style.display = '';\n }\n // Hide loading message, after tree data has been loaded\n function hide() {\n var popup = document.getElementById('loading');\n popup.style.display = 'none';\n }\n"} \ No newline at end of file diff --git a/src/treeview/remote-data.html b/src/treeview/remote-data.html index 4e5c147c..42880107 100644 --- a/src/treeview/remote-data.html +++ b/src/treeview/remote-data.html @@ -5,6 +5,7 @@
                                      + - +

                                      This sample demonstrates the binding data to the TreeView from remote data source. On expanding the parent node, the spinner icon will be displayed until the child nodes will be loaded into parent node. Click on node to select it, and click on icon or double click on node to expand/collapse it.

                                      @@ -32,5 +33,5 @@
                                    • DataManager->adaptor - Defines the adaptor option. By default, ODataAdaptor is used for remote binding.

                                      • In this demo, the TreeView is bound with the dataSource from the Northwind remote service by using the DataManager instance.

                                      -

                                      For more information, you can refer to the Data Binding section from the documentation.

                                      +

                                      For more information, you can refer to the Data Binding section from the documentation.

                                      \ No newline at end of file diff --git a/src/treeview/sample.json b/src/treeview/sample.json index 1f21403e..e37cc626 100644 --- a/src/treeview/sample.json +++ b/src/treeview/sample.json @@ -2,6 +2,7 @@ "name": "TreeView", "directory": "treeview", "category":"Navigation", + "type": "update", "ftName" :"treeview", "samples" : [ {"url":"default", "name": "Default Functionalities", "category": "TreeView", "description": "This demo demonstrates the basic tree view component that display the data in a hierarchical structure with the configuration options.", @@ -17,7 +18,7 @@ ] } }, - {"url":"remote-data", "name": "Remote Data", "category": "Data Binding", "description": "This demo demonstrates the binding of data to the tree view from remote data source.", "api": { + {"url":"remote-data", "name": "Remote Data", "category": "Data Binding", "description": "This demo for Essential JS 2 treeview control shows how to bind the data from a remote data service.", "api": { "TreeView": [ "fields", "created", @@ -37,7 +38,7 @@ "fields", "showCheckBox" ] - } + }, "type": "update" }, {"url":"node-editing", "name": "Node Editing", "category": "TreeView", "description": "This demo showcases the node editing functionality of tree view, you can edit any node text by double click on it or pressing F2.", "api": { "TreeView": [ diff --git a/src/treeview/template-stack.json b/src/treeview/template-stack.json index 59341270..c755d249 100644 --- a/src/treeview/template-stack.json +++ b/src/treeview/template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView using template option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n nodeTemplate: '#treeTemplate'\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n // Render the TreeView using template option\n var treeObj = new ej.navigations.TreeView({\n fields: { dataSource: window.mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n nodeTemplate: '#treeTemplate'\n });\n treeObj.appendTo('#tree');\n"} \ No newline at end of file diff --git a/src/treeview/template.html b/src/treeview/template.html index 09d814f3..f573656a 100644 --- a/src/treeview/template.html +++ b/src/treeview/template.html @@ -4,6 +4,7 @@
                                      + + \n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      Chunk size :\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // initialize the uploader component\n var uploadObj = new ej.inputs.Uploader({\n maxFileSize: 104857600,\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove',\n chunkSize: 500000\n },\n autoUpload: false,\n removing: onFileRemove,\n dropArea: dropElement,\n chunkFailure: onBeforeFailure,\n pausing: onPausing,\n resuming: onResuming\n });\n uploadObj.appendTo('#fileupload');\n\n var isInteraction = false;\n // to update flag variable value for automatic pause and resume\n function onPausing(args) {\n if (args.event !== null && !navigator.onLine) {\n isInteraction = true;\n }\n else {\n isInteraction = false;\n }\n }\n // to update flag variable for automatic pause and resume\n function onResuming(args) {\n if (args.event !== null && !navigator.onLine) {\n isInteraction = true;\n }\n else {\n isInteraction = false;\n }\n }\n\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n // initialize dropdown component\n var listObj = new ej.dropdowns.DropDownList({\n // set the index value to select an item based on index at initial rendering\n index: 0,\n // set the placeholder to DropDownList input element\n placeholder: 'Select chunk size',\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function (e) {\n uploadObj.asyncSettings.chunkSize = parseInt(e.itemData.value, 10);\n }\n });\n listObj.appendTo('#chunk-sizes');\n // to prevent triggering chunk-upload failure event and to pause uploading on network failure\n function onBeforeFailure(args) {\n args.cancel = !isInteraction;\n var uploadObj = document.getElementById('fileupload').ej2_instances[0];\n // interval to check network availability on every 500 milliseconds\n var clearTimeInterval = setInterval(function () {\n if (navigator.onLine && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 4) {\n uploadObj.resume(uploadObj.filesData);\n clearSetInterval();\n }\n else {\n if (!isInteraction && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 3) {\n uploadObj.pause(uploadObj.filesData);\n }\n }\n }, 500);\n // clear Interval after when network is available.\n function clearSetInterval() {\n clearInterval(clearTimeInterval);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n \n \n \n \n \n
                                      Chunk size :\n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // initialize the uploader component\n var uploadObj = new ej.inputs.Uploader({\n maxFileSize: 104857600,\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove',\n chunkSize: 500000\n },\n autoUpload: false,\n removing: onFileRemove,\n dropArea: dropElement,\n chunkFailure: onBeforeFailure,\n pausing: onPausing,\n resuming: onResuming\n });\n uploadObj.appendTo('#fileupload');\n\n var isInteraction = false;\n // to update flag variable value for automatic pause and resume\n function onPausing(args) {\n if (args.event !== null && !navigator.onLine) {\n isInteraction = true;\n }\n else {\n isInteraction = false;\n }\n }\n // to update flag variable for automatic pause and resume\n function onResuming(args) {\n if (args.event !== null && !navigator.onLine) {\n isInteraction = true;\n }\n else {\n isInteraction = false;\n }\n }\n\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n // initialize dropdown component\n var listObj = new ej.dropdowns.DropDownList({\n // set the index value to select an item based on index at initial rendering\n index: 0,\n // set the placeholder to DropDownList input element\n placeholder: 'Select chunk size',\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function (e) {\n uploadObj.asyncSettings.chunkSize = parseInt(e.itemData.value, 10);\n }\n });\n listObj.appendTo('#chunk-sizes');\n // to prevent triggering chunk-upload failure event and to pause uploading on network failure\n function onBeforeFailure(args) {\n args.cancel = !isInteraction;\n var uploadObj = document.getElementById('fileupload').ej2_instances[0];\n // interval to check network availability on every 500 milliseconds\n var clearTimeInterval = setInterval(function () {\n if (navigator.onLine && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 4) {\n uploadObj.resume(uploadObj.filesData);\n clearSetInterval();\n }\n else {\n if (!isInteraction && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 3) {\n uploadObj.pause(uploadObj.filesData);\n }\n }\n }, 500);\n // clear Interval after when network is available.\n function clearSetInterval() {\n clearInterval(clearTimeInterval);\n }\n }\n"} \ No newline at end of file diff --git a/src/uploader/chunk-upload.html b/src/uploader/chunk-upload.html index f3e57532..81b5b988 100644 --- a/src/uploader/chunk-upload.html +++ b/src/uploader/chunk-upload.html @@ -21,7 +21,7 @@ - + - +

                                      This example demonstrates the chunk upload functionalities of the Uploader control. Browse or drag-and-drop a large file to upload with pause, resume, and retry options.

                                      diff --git a/src/uploader/custom-drop-area-stack.json b/src/uploader/custom-drop-area-stack.json index e1cb61d3..480d5f63 100644 --- a/src/uploader/custom-drop-area-stack.json +++ b/src/uploader/custom-drop-area-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n Drop files here to upload\n
                                      \n
                                      \n Browse \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n\n\n\n
                                      ","index.js":"{{ripple}}\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: document.getElementById('dropTarget'),\n template: '#uploaderTemplate',\n success: onUploadSuccess,\n failure: onUploadFailed,\n removing: onFileRemove,\n progress: onUploadInProgress,\n selected: onSelect,\n allowedExtensions: '.pdf, .png, .txt'\n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementsByClassName('e-upload')[0].addEventListener('click', function (e) { onDeleteIconClick(e); }, false);\n function onDeleteIconClick(e) {\n var target = e.target;\n if (target.classList.contains('e-file-delete-btn')) {\n for (var i = 0; i < uploadObj.getFilesData().length; i++) {\n if (target.parentElement.getAttribute('data-file-name') === uploadObj.getFilesData()[i].name) {\n uploadObj.remove(uploadObj.getFilesData()[i]);\n }\n }\n }\n else if (target.classList.contains('e-file-remove-btn')) {\n ej.base.detach(target.parentElement);\n }\n }\n function onSelect(args) {\n var allowedTypes = ['pdf', 'png', 'txt'];\n var modifiedFiles = [];\n for (var _i = 0, _a = args.filesData; _i < _a.length; _i++) {\n var file = _a[_i];\n if (allowedTypes.indexOf(file.type.toLowerCase()) > -1) {\n modifiedFiles.push(file);\n }\n }\n if (modifiedFiles.length > 0) {\n args.isModified = true;\n args.modifiedFiles = modifiedFiles;\n }\n else {\n args.cancel = true;\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function onUploadSuccess(args) {\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status;\n li.querySelector('.upload-status').classList.add('upload-success');\n }\n function onUploadFailed(args) {\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status;\n li.querySelector('.upload-status').classList.add('upload-failed');\n }\n function onUploadInProgress(args) {\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100) + '%';\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status + '(' + progressValue + ' )';\n }\n function getLiElement(args) {\n var liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-files > li');\n var li;\n for (var i = 0; i < liElements.length; i++) {\n if (liElements[i].getAttribute('data-file-name') === args.file.name) {\n li = liElements[i];\n }\n }\n return li;\n }\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n Drop files here to upload\n
                                      \n
                                      \n Browse \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n\n\n\n
                                      ","index.js":"{{ripple}}\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: document.getElementById('dropTarget'),\n template: '#uploaderTemplate',\n success: onUploadSuccess,\n failure: onUploadFailed,\n removing: onFileRemove,\n progress: onUploadInProgress,\n selected: onSelect,\n allowedExtensions: '.pdf, .png, .txt'\n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementsByClassName('e-upload')[0].addEventListener('click', function (e) { onDeleteIconClick(e); }, false);\n function onDeleteIconClick(e) {\n var target = e.target;\n if (target.classList.contains('e-file-delete-btn')) {\n for (var i = 0; i < uploadObj.getFilesData().length; i++) {\n if (target.parentElement.getAttribute('data-file-name') === uploadObj.getFilesData()[i].name) {\n uploadObj.remove(uploadObj.getFilesData()[i]);\n }\n }\n }\n else if (target.classList.contains('e-file-remove-btn')) {\n ej.base.detach(target.parentElement);\n }\n }\n function onSelect(args) {\n var allowedTypes = ['pdf', 'png', 'txt'];\n var modifiedFiles = [];\n for (var _i = 0, _a = args.filesData; _i < _a.length; _i++) {\n var file = _a[_i];\n if (allowedTypes.indexOf(file.type.toLowerCase()) > -1) {\n modifiedFiles.push(file);\n }\n }\n if (modifiedFiles.length > 0) {\n args.isModified = true;\n args.modifiedFiles = modifiedFiles;\n }\n else {\n args.cancel = true;\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function onUploadSuccess(args) {\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status;\n li.querySelector('.upload-status').classList.add('upload-success');\n }\n function onUploadFailed(args) {\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status;\n li.querySelector('.upload-status').classList.add('upload-failed');\n }\n function onUploadInProgress(args) {\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100) + '%';\n var li = getLiElement(args);\n li.querySelector('.upload-status').innerHTML = args.file.status + '(' + progressValue + ' )';\n }\n function getLiElement(args) {\n var liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-files > li');\n var li;\n for (var i = 0; i < liElements.length; i++) {\n if (liElements[i].getAttribute('data-file-name') === args.file.name) {\n li = liElements[i];\n }\n }\n return li;\n }\n\n"} \ No newline at end of file diff --git a/src/uploader/custom-drop-area.html b/src/uploader/custom-drop-area.html index 88b7baba..0d635321 100644 --- a/src/uploader/custom-drop-area.html +++ b/src/uploader/custom-drop-area.html @@ -111,12 +111,24 @@ .highcontrast .dropArea_wrap { background-color: #000; } + .bootstrap4 .dropArea_wrap { + background-color: #e9ecef; + border: 1px dashed rgba(0, 0, 0, 0.15); + } + .bootstrap4 .font-icons { + color: #495057; + } + .bootstrap4 .dropText { + color: #212529; + } + .font-icons { position: relative; top: 25%; left: 32%; width: 150px; } + /* custom code start*/ .material .dropArea_wrap, .material #dropArea { font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"; } @@ -125,7 +137,8 @@ } .bootstrap .dropArea_wrap, .bootstrap #dropArea { font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; - } + } + /* custom code end*/ .upload-failed { color: #d9534f; } diff --git a/src/uploader/custom-file-list-stack.json b/src/uploader/custom-file-list-stack.json index 35fd43e2..f9428911 100644 --- a/src/uploader/custom-file-list-stack.json +++ b/src/uploader/custom-file-list-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n
                                      \n Drop files here or Browse \n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: dropElement, selected: onFileSelect,\n progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove, \n failure: onUploadFailed \n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementById('clearbtn').onclick = function () {\n if (!ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n uploadObj.element.value = '';\n ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));\n uploadObj.filesData = [];\n uploadObj.fileList = [];\n }\n };\n var parentElement; var proxy; var progressbarContainer;\n function onFileSelect(args) {\n if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n parentElement = ej.base.createElement('div', { className: 'upload-list-root' });\n parentElement.appendChild(ej.base.createElement('ul', {className: 'ul-element' }));\n document.getElementById('dropArea').appendChild(parentElement);\n }\n for (var i = 0; i < args.filesData.length; i++) {\n formSelectedData(args.filesData[i], this); // create the LI element for each file Data\n }\n this.filesData = this.filesData.concat(args.filesData);\n this.upload(args.filesData, true);\n args.cancel = true;\n }\n function formSelectedData(selectedFiles, proxy) {\n var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });\n liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));\n liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));\n if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {\n progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });\n progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));\n liEle.appendChild(progressbarContainer);\n }\n else {\n liEle.querySelector('.file-name').classList.add('upload-fails');\n }\n var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });\n ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);\n liEle.appendChild(closeIconContainer);\n document.querySelector('.ul-element').appendChild(liEle);\n proxy.fileList.push(liEle);\n }\n function onFileUpload(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n if (!isNaN(progressValue)) {\n li.getElementsByTagName('progress')[0].value = progressValue; // Updating the progress bar value\n }\n }\n function onUploadSuccess(args) {\n var _this = this;\n var spinnerElement = document.getElementById('dropArea');\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n if (args.operation === 'upload') {\n li.querySelector('.file-name').classList.add('upload-success');\n li.querySelector('.close-icon-container').classList.add('delete-icon');\n (li.querySelector('.close-icon-container')).onclick = function () {\n generateSpinner(_this.uploadWrapper);\n };\n li.querySelector('.close-icon-container').onkeydown = function (e) {\n if (e.keyCode === 13) {\n generateSpinner(e.target.closest('.e-upload'));\n }\n };\n }\n if (args.operation === 'remove') {\n this.filesData.splice(this.fileList.indexOf(li), 1);\n this.fileList.splice(this.fileList.indexOf(li), 1);\n ej.base.detach(li);\n ej.popups.hideSpinner(spinnerElement);\n ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n }\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n }\n function generateSpinner(targetElement) {\n ej.popups.createSpinner({ target: targetElement, width: '25px' });\n ej.popups.showSpinner(targetElement);\n }\n function onUploadFailed(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n li.querySelector('.file-name ').classList.add('upload-fails');\n if (args.operation === 'upload') {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function removeFiles(args) {\n var status = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)].status;\n if (status === this.localizedTexts('uploadSuccessMessage')) {\n this.remove(this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]);\n }\n else {\n ej.base.detach(args.currentTarget.parentElement);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n
                                      \n Drop files here or Browse \n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: dropElement, selected: onFileSelect,\n progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove, \n failure: onUploadFailed \n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementById('clearbtn').onclick = function () {\n if (!ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n uploadObj.element.value = '';\n ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-root'));\n uploadObj.filesData = [];\n uploadObj.fileList = [];\n }\n };\n var parentElement; var proxy; var progressbarContainer;\n function onFileSelect(args) {\n if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {\n parentElement = ej.base.createElement('div', { className: 'upload-list-root' });\n parentElement.appendChild(ej.base.createElement('ul', {className: 'ul-element' }));\n document.getElementById('dropArea').appendChild(parentElement);\n }\n for (var i = 0; i < args.filesData.length; i++) {\n formSelectedData(args.filesData[i], this); // create the LI element for each file Data\n }\n this.filesData = this.filesData.concat(args.filesData);\n this.upload(args.filesData, true);\n args.cancel = true;\n }\n function formSelectedData(selectedFiles, proxy) {\n var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });\n liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));\n liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));\n if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {\n progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });\n progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));\n liEle.appendChild(progressbarContainer);\n }\n else {\n liEle.querySelector('.file-name').classList.add('upload-fails');\n }\n var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });\n ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);\n liEle.appendChild(closeIconContainer);\n document.querySelector('.ul-element').appendChild(liEle);\n proxy.fileList.push(liEle);\n }\n function onFileUpload(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n if (!isNaN(progressValue)) {\n li.getElementsByTagName('progress')[0].value = progressValue; // Updating the progress bar value\n }\n }\n function onUploadSuccess(args) {\n var _this = this;\n var spinnerElement = document.getElementById('dropArea');\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n if (args.operation === 'upload') {\n li.querySelector('.file-name').classList.add('upload-success');\n li.querySelector('.close-icon-container').classList.add('delete-icon');\n (li.querySelector('.close-icon-container')).onclick = function () {\n generateSpinner(_this.uploadWrapper);\n };\n li.querySelector('.close-icon-container').onkeydown = function (e) {\n if (e.keyCode === 13) {\n generateSpinner(e.target.closest('.e-upload'));\n }\n };\n }\n if (args.operation === 'remove') {\n this.filesData.splice(this.fileList.indexOf(li), 1);\n this.fileList.splice(this.fileList.indexOf(li), 1);\n ej.base.detach(li);\n ej.popups.hideSpinner(spinnerElement);\n ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n }\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n }\n function generateSpinner(targetElement) {\n ej.popups.createSpinner({ target: targetElement, width: '25px' });\n ej.popups.showSpinner(targetElement);\n }\n function onUploadFailed(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);\n li.querySelector('.file-name ').classList.add('upload-fails');\n if (args.operation === 'upload') {\n ej.base.detach(li.querySelector('.progress-bar-container'));\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function removeFiles(args) {\n var status = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)].status;\n if (status === this.localizedTexts('uploadSuccessMessage')) {\n this.remove(this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]);\n }\n else {\n ej.base.detach(args.currentTarget.parentElement);\n }\n }\n"} \ No newline at end of file diff --git a/src/uploader/custom-file-list.html b/src/uploader/custom-file-list.html index b88a9323..200ae546 100644 --- a/src/uploader/custom-file-list.html +++ b/src/uploader/custom-file-list.html @@ -134,10 +134,24 @@ content: '\e932'; } + .bootstrap4 .close-icon-container.e-icons::before { + left: 7px; + position: inherit; + top: 7px; + content: '\e745'; + } + .bootstrap4 .file-lists { + background: #fff; + } + .close-icon-container.delete-icon::before { content: '\e94a'; } + .bootstrap4 .close-icon-container.delete-icon::before { + content: '\e773'; + } + .close-icon-container.delete-icon:hover { background-color: rgba(0, 0, 0, 0.12); border-color: transparent; @@ -145,6 +159,13 @@ box-shadow: 0 0 0 transparent; } + .bootstrap4 .close-icon-container:hover { + background-color: #e9ecef; + border-color: transparent; + border-radius: 4px; + box-shadow: 0 0 0 transparent; + } + .highcontrast .close-icon-container.delete-icon:hover { background-color: #ffd939; color: black; @@ -162,11 +183,20 @@ color: #f44336; } + .bootstrap4 #dropArea progress { + background-color: #dee2e6; + border-radius: 4px; + } + progress::-webkit-progress-bar { border: 1px solid lightgrey; background-color: #ffffff; border-radius: 2px; } + .bootstrap4 progress::-webkit-progress-value { + background-color: #007bff; + border-radius: 4px; + } #dropArea progress { border: 1px solid lightgrey; background-color: #ffffff; diff --git a/src/uploader/default-stack.json b/src/uploader/default-stack.json index eda8e426..d17c3fdd 100644 --- a/src/uploader/default-stack.json +++ b/src/uploader/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // Initialize the uploader component\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n removing: onFileRemove,\n dropArea: dropElement\n });\n uploadObj.appendTo('#fileupload');\n\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n // initialize check box component\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: true,\n label: 'Auto Upload',\n change: function (args) {\n uploadObj.autoUpload = args.checked; \n uploadObj.clearAll();\n }\n });\n checkBoxObj.appendTo('#checkAutoUpload');\n\n var checkBoxObj1 = new ej.buttons.CheckBox({\n checked: false,\n label: 'Sequential Upload',\n change: function (args) {\n uploadObj.sequentialUpload = args.checked; \n uploadObj.clearAll();\n }\n });\n checkBoxObj1.appendTo('#sequentialUpload');\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // Initialize the uploader component\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n removing: onFileRemove,\n dropArea: dropElement\n });\n uploadObj.appendTo('#fileupload');\n\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n // initialize check box component\n var checkBoxObj = new ej.buttons.CheckBox({\n checked: true,\n label: 'Auto Upload',\n change: function (args) {\n uploadObj.autoUpload = args.checked; \n uploadObj.clearAll();\n }\n });\n checkBoxObj.appendTo('#checkAutoUpload');\n\n var checkBoxObj1 = new ej.buttons.CheckBox({\n checked: false,\n label: 'Sequential Upload',\n change: function (args) {\n uploadObj.sequentialUpload = args.checked; \n uploadObj.clearAll();\n }\n });\n checkBoxObj1.appendTo('#sequentialUpload');\n\n"} \ No newline at end of file diff --git a/src/uploader/file-upload-with-forms-stack.json b/src/uploader/file-upload-with-forms-stack.json index a8289dd5..8779c64b 100644 --- a/src/uploader/file-upload-with-forms-stack.json +++ b/src/uploader/file-upload-with-forms-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n

                                      Photo Contest

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      *This button is not a submit type and the form submit handled from externally.
                                      \n
                                      \t\t\t\t\t\t\n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n var uploadObj = new ej.inputs.Uploader({\n autoUpload: false,\n multiple: false,\n\t\t\tallowedExtensions: 'image/*',\n selected: onFileSelect\n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n function onFileSelect(args) {\n var inputElement = document.getElementById('upload');\n inputElement.value = args.filesData[0].name;\n }\n var options = {\n customPlacement: function (inputElement, errorElement) {\n inputElement = inputElement.closest('.form-group').querySelector('.error');\n inputElement.parentElement.appendChild(errorElement);\n },\n rules: {\n 'name': {\n required: true\n },\n 'email': {\n required: true\n },\n 'upload': {\n required: true\n }\n }\n };\n var formObj = new ej.inputs.FormValidator('#form1', options);\n function onFormSubmit() {\n var formStatus = formObj.validate();\n if (formStatus) {\n formObj.element.reset();\n confirm.show();\n }\n }\n var confirm = new ej.popups.Dialog({\n width: '335px',\n visible: false,\n header: 'Success',\n content: 'Your details have been updated successfully, Thank you.',\n target: document.getElementById('control_wrapper'),\n showCloseIcon: true,\n isModal: true,\n animationSettings: {\n effect: 'Zoom'\n }\n });\n confirm.appendTo('#confirmationDialog');\n document.getElementById('submit-btn').onclick = function () {\n onFormSubmit();\n };\n\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n

                                      Photo Contest

                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n
                                      \n \n \n \n
                                      \n
                                      \n
                                      \n \n
                                      *This button is not a submit type and the form submit handled from externally.
                                      \n
                                      \t\t\t\t\t\t\n
                                      \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n var uploadObj = new ej.inputs.Uploader({\n autoUpload: false,\n multiple: false,\n\t\t\tallowedExtensions: 'image/*',\n selected: onFileSelect\n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n function onFileSelect(args) {\n var inputElement = document.getElementById('upload');\n inputElement.value = args.filesData[0].name;\n }\n var options = {\n customPlacement: function (inputElement, errorElement) {\n inputElement = inputElement.closest('.form-group').querySelector('.error');\n inputElement.parentElement.appendChild(errorElement);\n },\n rules: {\n 'name': {\n required: true\n },\n 'email': {\n required: true\n },\n 'upload': {\n required: true\n }\n }\n };\n var formObj = new ej.inputs.FormValidator('#form1', options);\n function onFormSubmit() {\n var formStatus = formObj.validate();\n if (formStatus) {\n formObj.element.reset();\n confirm.show();\n }\n }\n var confirm = new ej.popups.Dialog({\n width: '335px',\n visible: false,\n header: 'Success',\n content: 'Your details have been updated successfully, Thank you.',\n target: document.getElementById('control_wrapper'),\n showCloseIcon: true,\n isModal: true,\n animationSettings: {\n effect: 'Zoom'\n }\n });\n confirm.appendTo('#confirmationDialog');\n document.getElementById('submit-btn').onclick = function () {\n onFormSubmit();\n };\n\n"} \ No newline at end of file diff --git a/src/uploader/file-upload-with-forms.html b/src/uploader/file-upload-with-forms.html index 28419713..4c042eef 100644 --- a/src/uploader/file-upload-with-forms.html +++ b/src/uploader/file-upload-with-forms.html @@ -1,4 +1,3 @@ -

                                      Photo Contest

                                      @@ -13,7 +12,7 @@

                                      Photo Contest

                                      - +
                                      @@ -147,7 +146,12 @@

                                      Photo Contest

                                      float: right; margin-right: -113px; margin-top: -27px; - } + } + + .bootstrap4 button#browse { + margin-top: -33px; + } + @media only screen and (max-width: 600px) { .submitBtn { margin-top: -22px; diff --git a/src/uploader/file-validation-stack.json b/src/uploader/file-validation-stack.json index 76dfa086..06fce75b 100644 --- a/src/uploader/file-validation-stack.json +++ b/src/uploader/file-validation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // Initialize the control with file validation\n var uploadObj = new ej.inputs.Uploader({\n autoUpload: false,\n minFileSize: 10000,\n allowedExtensions: '.doc, .docx, .xls, .xlsx',\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n selected: onFileSelected,\n removing: onFileRemove, \n dropArea: dropElement\n });\n uploadObj.appendTo('#validation');\n \n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function onFileSelected(args) {\n // Filter the 5 files only to showcase\n args.filesData.splice(5);\n var filesData = uploadObj.getFilesData();\n var allFiles = filesData.concat(args.filesData);\n if (allFiles.length > 5) {\n for (var i = 0; i < allFiles.length; i++) {\n if (allFiles.length > 5) {\n allFiles.shift();\n }\n }\n args.filesData = allFiles;\n // set the modified custom data\n args.modifiedFilesData = args.filesData;\n }\n args.isModified = true;\n } \n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n // Initialize the control with file validation\n var uploadObj = new ej.inputs.Uploader({\n autoUpload: false,\n minFileSize: 10000,\n allowedExtensions: '.doc, .docx, .xls, .xlsx',\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n selected: onFileSelected,\n removing: onFileRemove, \n dropArea: dropElement\n });\n uploadObj.appendTo('#validation');\n \n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function onFileSelected(args) {\n // Filter the 5 files only to showcase\n args.filesData.splice(5);\n var filesData = uploadObj.getFilesData();\n var allFiles = filesData.concat(args.filesData);\n if (allFiles.length > 5) {\n for (var i = 0; i < allFiles.length; i++) {\n if (allFiles.length > 5) {\n allFiles.shift();\n }\n }\n args.filesData = allFiles;\n // set the modified custom data\n args.modifiedFilesData = args.filesData;\n }\n args.isModified = true;\n } \n"} \ No newline at end of file diff --git a/src/uploader/image-preview-stack.json b/src/uploader/image-preview-stack.json index 46d88e3e..ac1c8156 100644 --- a/src/uploader/image-preview-stack.json +++ b/src/uploader/image-preview-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n
                                      \n Drop image (JPG, PNG) files here or Browse\n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementById('dropArea');\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: { saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: dropElement, selected: onSelect, progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove,\n failure: onUploadFailed, allowedExtensions: '.jpg,.png,.jpeg', template: 'template'\n });\n uploadObj.appendTo('#fileupload');\n\n var parentElement;\n var filesName = [];\n var progressbarContainer;\n if (ej.base.Browser.isDevice) {\n document.getElementById('drop').style.padding = '0px 10%';\n }\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementById('clearbtn').onclick = function () {\n if (!ej.base.isNullOrUndefined(dropElement.querySelector('ul'))) {\n ej.base.detach(dropElement.querySelector('ul'));\n uploadObj.filesData = [];\n uploadObj.fileList = [];\n filesName = [];\n }\n };\n document.getElementById('uploadbtn').onclick = function () {\n if (dropElement.querySelector('ul') && uploadObj.getFilesData().length > 0) {\n uploadObj.upload(uploadObj.getFilesData());\n }\n };\n function onSelect(args) {\n if (!dropElement.querySelector('li')) {\n this.filesData = [];\n }\n if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.e-upload-files'))) {\n parentElement = ej.base.createElement('ul', { className: 'e-upload-files' });\n document.getElementsByClassName('e-upload')[0].appendChild(parentElement);\n }\n var validFiles = validateFiles(args, this.filesData);\n if (validFiles.length === 0) {\n args.cancel = true;\n return;\n }\n for (var i = 0; i < validFiles.length; i++) {\n formSelectedData(validFiles[i], this);\n }\n this.filesData = this.filesData.concat(validFiles);\n args.cancel = true;\n }\n function validateFiles(args, viewedFiles) {\n var modifiedFiles = [];\n var validFiles = [];\n var isModified = false;\n if (args.event.type === 'drop') {\n isModified = true;\n var allImages = ['png', 'jpg', 'jpeg'];\n var chooseFiles = args.filesData;\n for (var i = 0; i < chooseFiles.length; i++) {\n var selectFile = chooseFiles[i];\n if (allImages.indexOf(selectFile.type) !== -1) {\n modifiedFiles.push(selectFile);\n }\n }\n }\n var files = modifiedFiles.length > 0 || isModified ? modifiedFiles : args.filesData;\n if (filesName.length > 0) {\n for (var j = 0; j < files.length; j++) {\n var file = files[j];\n if (filesName.indexOf(file.name) === -1) {\n filesName.push(file.name);\n validFiles.push(file);\n }\n }\n } else {\n for (var k = 0; k < files.length; k++) {\n var validFile = files[k];\n filesName.push(validFile.name);\n validFiles.push(validFile);\n }\n }\n return validFiles;\n }\n function formSelectedData(file, proxy) {\n var liEle = ej.base.createElement('li', { className: 'e-upload-file-list', attrs: { 'data-file-name': file.name } });\n var imageTag = ej.base.createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });\n var wrapper = ej.base.createElement('span', { className: 'wrapper' });\n wrapper.appendChild(imageTag);\n liEle.appendChild(wrapper);\n liEle.appendChild(ej.base.createElement('div', { className: 'name file-name', innerHTML: file.name, attrs: { 'title': file.name } }));\n liEle.appendChild(ej.base.createElement('div', { className: 'file-size', innerHTML: proxy.bytesToSize(file.size) }));\n var clearbtn;\n var uploadbtn;\n clearbtn = ej.base.createElement('span', { id: 'removeIcon', className: 'e-icons e-file-remove-btn', attrs: { 'title': 'Remove' } });\n ej.base.EventHandler.add(clearbtn, 'click', removeFiles, proxy);\n liEle.setAttribute('title', 'Ready to Upload');\n uploadbtn = ej.base.createElement('span', { className: 'e-upload-icon e-icons e-file-remove-btn', attrs: { 'title': 'Upload' } });\n uploadbtn.setAttribute('id', 'iconUpload');\n ej.base.EventHandler.add(uploadbtn, 'click', uploadFile, proxy);\n progressbarContainer = ej.base.createElement('progress', { className: 'progressbar', id: 'progressBar', attrs: { value: '0', max: '100' } });\n liEle.appendChild(clearbtn);\n liEle.appendChild(uploadbtn);\n liEle.appendChild(progressbarContainer);\n readURL(liEle, file);\n document.querySelector('.e-upload-files').appendChild(liEle);\n proxy.fileList.push(liEle);\n }\n function uploadFile(args) {\n uploadObj.upload([this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]]);\n }\n function removeFiles(args) {\n var removeFile = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)];\n var statusCode = removeFile.statusCode;\n if (statusCode === '2' || statusCode === '1') {\n this.remove(removeFile);\n filesName.splice(filesName.indexOf(removeFile.name), 1);\n uploadObj.element.value = '';\n }\n }\n function onFileUpload(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n var iconEle = li.querySelector('#iconUpload');\n iconEle.style.cursor = 'not-allowed';\n iconEle.classList.add('e-uploaded');\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n if (!isNaN(progressValue) && li.querySelector('.progressbar')) {\n li.getElementsByTagName('progress')[0].value = progressValue;\n }\n }\n function onUploadSuccess(args) {\n var _this = this;\n var spinnerElement = document.getElementById('dropArea');\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n if (li && !ej.base.isNullOrUndefined(li.querySelector('.progressbar'))) {\n li.querySelector('.progressbar').style.visibility = 'hidden';\n }\n if (args.operation === 'upload') {\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n li.setAttribute('title', args.e.currentTarget.statusText); \n li.querySelector('.file-name').style.color = 'green';\n li.querySelector('.e-icons').onclick = function () { generateSpinner(_this.uploadWrapper); };\n }\n else {\n if(!ej.base.isNullOrUndefined(spinnerElement)) {\n ej.popups.hideSpinner(spinnerElement);\n ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n }\n }\n }\n function generateSpinner(targetElement) {\n ej.popups.createSpinner({ target: targetElement, width: '25px' });\n ej.popups.showSpinner(targetElement);\n }\n function onUploadFailed(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n li.querySelector('.file-name').style.color = 'red';\n li.setAttribute('title', args.e.currentTarget.statusText);\n if (args.operation === 'upload') {\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n li.querySelector('.progressbar').style.visibility = 'hidden';\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function readURL(li, args) {\n var preview = li.querySelector('.upload-image');\n var file = args.rawFile;\n var reader = new FileReader();\n reader.addEventListener('load', function () { preview.src = reader.result; }, false);\n if (file) {\n reader.readAsDataURL(file);\n }\n }\n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n
                                      \n Drop image (JPG, PNG) files here or Browse\n \n
                                      \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementById('dropArea');\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: { saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n dropArea: dropElement, selected: onSelect, progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove,\n failure: onUploadFailed, allowedExtensions: '.jpg,.png,.jpeg', template: 'template'\n });\n uploadObj.appendTo('#fileupload');\n\n var parentElement;\n var filesName = [];\n var progressbarContainer;\n if (ej.base.Browser.isDevice) {\n document.getElementById('drop').style.padding = '0px 10%';\n }\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n document.getElementById('clearbtn').onclick = function () {\n if (!ej.base.isNullOrUndefined(dropElement.querySelector('ul'))) {\n ej.base.detach(dropElement.querySelector('ul'));\n uploadObj.filesData = [];\n uploadObj.fileList = [];\n filesName = [];\n }\n };\n document.getElementById('uploadbtn').onclick = function () {\n if (dropElement.querySelector('ul') && uploadObj.getFilesData().length > 0) {\n uploadObj.upload(uploadObj.getFilesData());\n }\n };\n function onSelect(args) {\n if (!dropElement.querySelector('li')) {\n this.filesData = [];\n }\n if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.e-upload-files'))) {\n parentElement = ej.base.createElement('ul', { className: 'e-upload-files' });\n document.getElementsByClassName('e-upload')[0].appendChild(parentElement);\n }\n var validFiles = validateFiles(args, this.filesData);\n if (validFiles.length === 0) {\n args.cancel = true;\n return;\n }\n for (var i = 0; i < validFiles.length; i++) {\n formSelectedData(validFiles[i], this);\n }\n this.filesData = this.filesData.concat(validFiles);\n args.cancel = true;\n }\n function validateFiles(args, viewedFiles) {\n var modifiedFiles = [];\n var validFiles = [];\n var isModified = false;\n if (args.event.type === 'drop') {\n isModified = true;\n var allImages = ['png', 'jpg', 'jpeg'];\n var chooseFiles = args.filesData;\n for (var i = 0; i < chooseFiles.length; i++) {\n var selectFile = chooseFiles[i];\n if (allImages.indexOf(selectFile.type) !== -1) {\n modifiedFiles.push(selectFile);\n }\n }\n }\n var files = modifiedFiles.length > 0 || isModified ? modifiedFiles : args.filesData;\n if (filesName.length > 0) {\n for (var j = 0; j < files.length; j++) {\n var file = files[j];\n if (filesName.indexOf(file.name) === -1) {\n filesName.push(file.name);\n validFiles.push(file);\n }\n }\n } else {\n for (var k = 0; k < files.length; k++) {\n var validFile = files[k];\n filesName.push(validFile.name);\n validFiles.push(validFile);\n }\n }\n return validFiles;\n }\n function formSelectedData(file, proxy) {\n var liEle = ej.base.createElement('li', { className: 'e-upload-file-list', attrs: { 'data-file-name': file.name } });\n var imageTag = ej.base.createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });\n var wrapper = ej.base.createElement('span', { className: 'wrapper' });\n wrapper.appendChild(imageTag);\n liEle.appendChild(wrapper);\n liEle.appendChild(ej.base.createElement('div', { className: 'name file-name', innerHTML: file.name, attrs: { 'title': file.name } }));\n liEle.appendChild(ej.base.createElement('div', { className: 'file-size', innerHTML: proxy.bytesToSize(file.size) }));\n var clearbtn;\n var uploadbtn;\n clearbtn = ej.base.createElement('span', { id: 'removeIcon', className: 'e-icons e-file-remove-btn', attrs: { 'title': 'Remove' } });\n ej.base.EventHandler.add(clearbtn, 'click', removeFiles, proxy);\n liEle.setAttribute('title', 'Ready to Upload');\n uploadbtn = ej.base.createElement('span', { className: 'e-upload-icon e-icons e-file-remove-btn', attrs: { 'title': 'Upload' } });\n uploadbtn.setAttribute('id', 'iconUpload');\n ej.base.EventHandler.add(uploadbtn, 'click', uploadFile, proxy);\n progressbarContainer = ej.base.createElement('progress', { className: 'progressbar', id: 'progressBar', attrs: { value: '0', max: '100' } });\n liEle.appendChild(clearbtn);\n liEle.appendChild(uploadbtn);\n liEle.appendChild(progressbarContainer);\n readURL(liEle, file);\n document.querySelector('.e-upload-files').appendChild(liEle);\n proxy.fileList.push(liEle);\n }\n function uploadFile(args) {\n uploadObj.upload([this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]]);\n }\n function removeFiles(args) {\n var removeFile = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)];\n var statusCode = removeFile.statusCode;\n if (statusCode === '2' || statusCode === '1') {\n this.remove(removeFile);\n filesName.splice(filesName.indexOf(removeFile.name), 1);\n uploadObj.element.value = '';\n }\n }\n function onFileUpload(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n var iconEle = li.querySelector('#iconUpload');\n iconEle.style.cursor = 'not-allowed';\n iconEle.classList.add('e-uploaded');\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n if (!isNaN(progressValue) && li.querySelector('.progressbar')) {\n li.getElementsByTagName('progress')[0].value = progressValue;\n }\n }\n function onUploadSuccess(args) {\n var _this = this;\n var spinnerElement = document.getElementById('dropArea');\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n if (li && !ej.base.isNullOrUndefined(li.querySelector('.progressbar'))) {\n li.querySelector('.progressbar').style.visibility = 'hidden';\n }\n if (args.operation === 'upload') {\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n li.setAttribute('title', args.e.currentTarget.statusText); \n li.querySelector('.file-name').style.color = 'green';\n li.querySelector('.e-icons').onclick = function () { generateSpinner(_this.uploadWrapper); };\n }\n else {\n if(!ej.base.isNullOrUndefined(spinnerElement)) {\n ej.popups.hideSpinner(spinnerElement);\n ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n }\n }\n }\n function generateSpinner(targetElement) {\n ej.popups.createSpinner({ target: targetElement, width: '25px' });\n ej.popups.showSpinner(targetElement);\n }\n function onUploadFailed(args) {\n var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n li.querySelector('.file-name').style.color = 'red';\n li.setAttribute('title', args.e.currentTarget.statusText);\n if (args.operation === 'upload') {\n ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n li.querySelector('.progressbar').style.visibility = 'hidden';\n }\n }\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n function readURL(li, args) {\n var preview = li.querySelector('.upload-image');\n var file = args.rawFile;\n var reader = new FileReader();\n reader.addEventListener('load', function () { preview.src = reader.result; }, false);\n if (file) {\n reader.readAsDataURL(file);\n }\n }\n"} \ No newline at end of file diff --git a/src/uploader/preload-files-stack.json b/src/uploader/preload-files-stack.json index 76ee1997..9dd9a689 100644 --- a/src/uploader/preload-files-stack.json +++ b/src/uploader/preload-files-stack.json @@ -1 +1 @@ -{"index.html":"\n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n var preloadFiles = [\n { name: 'Nature', size: 500000, type: '.png' },\n { name: 'TypeScript Succinctly', size: 12000, type: '.pdf' },\n { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' }\n ];\n //Initialize the control by preload files\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n files: preloadFiles,\n removing: onFileRemove,\n dropArea: dropElement\n });\n uploadObj.appendTo('#fileupload');\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n document.getElementById('clearbtn').onclick = function () {\n uploadObj.clearAll();\n }; \n"} \ No newline at end of file +{"index.html":"\n \n\n \n\n
                                      \n
                                      \n \n \n
                                      \n
                                      \n\n
                                      \n
                                      \n
                                      \n \n
                                      \n
                                      \n
                                      \n\n\n\n\n
                                      ","index.js":"{{ripple}}\n var dropElement = document.getElementsByClassName('control-fluid')[0];\n var preloadFiles = [\n { name: 'Nature', size: 500000, type: '.png' },\n { name: 'TypeScript Succinctly', size: 12000, type: '.pdf' },\n { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' }\n ];\n //Initialize the control by preload files\n var uploadObj = new ej.inputs.Uploader({\n asyncSettings: {\n saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n },\n files: preloadFiles,\n removing: onFileRemove,\n dropArea: dropElement\n });\n uploadObj.appendTo('#fileupload');\n function onFileRemove(args) {\n args.postRawFile = false;\n }\n document.getElementById('clearbtn').onclick = function () {\n uploadObj.clearAll();\n }; \n"} \ No newline at end of file diff --git a/src/uploader/sample.json b/src/uploader/sample.json index c92f57e3..8d0557ed 100644 --- a/src/uploader/sample.json +++ b/src/uploader/sample.json @@ -3,58 +3,57 @@ "directory": "uploader", "category":"Inputs", "ftName": "file-upload", - "type": "update", "samples" : [ - {"url":"default", "name": "Default Functionalities", "description":"This sample demonstrates default functionalities of the file uploader component, including automatic upload and asynchronous mode options.", "type": "update", "category": "File Upload", "api":{"Uploader": [ "autoUpload", "asyncSettings", "success", "dropArea" ]}, + {"url":"default", "name": "Default Functionalities", "description":"This example demonstrates default functionalities of the JavaScript(ES5) file uploader control, including automatic upload and asynchronous mode options.", "category": "File Upload", "api":{"Uploader": [ "autoUpload", "asyncSettings", "success", "dropArea" ]}, "sourceFiles":[ { "displayName": "default.js", "path":"src/uploader/default.js" }, { "displayName":"default.html", "path":"src/uploader/default.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"chunk-upload", "name": "Chunk Upload", "description":"This sample demonstrates how to upload files as chunks in the file upload component, which helps when uploading a large file to a server.", "category": "File Upload", "api":{"Uploader": [ "autoUpload", "asyncSettings", "dropArea" ]}, + {"url":"chunk-upload", "name": "Chunk Upload", "description":"This example demonstrates how to upload files as chunks in the JavaScript(ES5) file upload control, which helps when uploading a large file to a server.", "category": "File Upload", "api":{"Uploader": [ "autoUpload", "asyncSettings", "dropArea" ]}, "sourceFiles":[ { "displayName": "chunk-upload.js", "path":"src/uploader/chunk-upload.js" }, { "displayName":"chunk-upload.html", "path":"src/uploader/chunk-upload.html" }, { "displayName":"save file", "path":"src/uploader/chunk-upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/chunk-upload-remove-file.cs" } ]}, - {"url":"custom-file-list", "name": "Template", "description":"This sample demonstrates how to customize the file list with buttons using a template, and how to upload a file programmatically in the file upload component.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "success", "dropArea", "selected", "progress", "failure", "removing" ]}, + {"url":"custom-file-list", "name": "Template", "description":"This example demonstrates how to customize the file list with buttons using a template and upload a file programmatically using the JavaScript(ES5) file upload.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "success", "dropArea", "selected", "progress", "failure", "removing" ]}, "sourceFiles":[ { "displayName": "custom-file-list.js", "path":"src/uploader/custom-file-list.js" }, { "displayName":"custom-file-list.html", "path":"src/uploader/custom-file-list.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"preload-files", "name": "Preload Files", "description":"This sample demonstrates how to preload files in the file upload component, which helps users view and manipulate server files.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "success", "dropArea", "files", "failure", "removing" ]}, + {"url":"preload-files", "name": "Preload Files", "description":"This example demonstrates how to preload files in the JavaScript(ES5) file upload control, which helps users view and manipulate server files.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "success", "dropArea", "files", "failure", "removing" ]}, "sourceFiles":[ { "displayName": "preload-files.js", "path":"src/uploader/preload-files.js" }, { "displayName":"preload-files.html", "path":"src/uploader/preload-files.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"file-validation", "name": "File Validation", "description":"This sample shows how to validate files before uploading them to a server by allowing or denying certain file extensions, setting minimum and maximum file sizes, and alerting users about duplicate files.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "autoUpload", "minFileSize", "allowedExtensions", "success", "dropArea", "selected" ]}, + {"url":"file-validation", "name": "File Validation", "description":"The example covers validations in JavaScript(ES5) file upload such as allowing/denying file extensions, set min/max file size, duplicate file, and more.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "autoUpload", "minFileSize", "allowedExtensions", "success", "dropArea", "selected" ]}, "sourceFiles":[ { "displayName": "file-validation.js", "path":"src/uploader/file-validation.js" }, { "displayName":"file-validation.html", "path":"src/uploader/file-validation.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"image-preview", "name": "Image Preview", "description":"This sample demonstrates how to display a preview of an image file before and after uploading it to a server.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "failure", "progress", "template", "allowedExtensions", "success", "dropArea", "selected" ]}, + {"url":"image-preview", "name": "Image Preview", "description":"This example demonstrates how to display a preview of an image file before and after uploading it to a server in JavaScript(ES5) file upload.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "failure", "progress", "template", "allowedExtensions", "success", "dropArea", "selected" ]}, "sourceFiles":[ { "displayName": "image-preview.js", "path":"src/uploader/image-preview.js" }, { "displayName":"image-preview.html", "path":"src/uploader/image-preview.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"file-upload-with-forms", "name": "Form Support", "description":"This sample demonstrates how to integrate the file upload component in an HTML form (synchronous mode) and submit a form with selected files.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "failure", "progress", "template", "allowedExtensions", "success", "dropArea", "selected" ]}, + {"url":"file-upload-with-forms", "name": "Form Support", "description":"This example demonstrates how to integrate the JavaScript(ES5) file upload control in an HTML form (synchronous mode) and submit a form with selected files.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "failure", "progress", "template", "allowedExtensions", "success", "dropArea", "selected" ]}, "sourceFiles":[ { "displayName": "file-upload-with-forms.js", "path":"src/uploader/file-upload-with-forms.js" }, { "displayName":"file-upload-with-forms.html", "path":"src/uploader/file-upload-with-forms.html" }, { "displayName":"save file", "path":"src/uploader/upload-save-file.cs" }, { "displayName":"remove file", "path":"src/uploader/upload-remove-file.cs" } ]}, - {"url":"custom-drop-area", "name": "Custom Drop Area", "description":"This sample demonstrates how to upload a file using drag and drop and how to configure a custom drop area for the file upload component.", "category": "File Upload", "api":{"Uploader": [ "asyncSettings", "autoUpload", "minFileSize", "allowedExtensions", "success", "dropArea", "selected" ]}, + {"url":"custom-drop-area", "name": "Custom Drop Area", "description":"This example demonstrates how to upload a file using drag and drop and how to configure a custom drop area for the JavaScript(ES5) file upload control.", "category": "File Upload", "hideOnDevice":true, "api":{"Uploader": [ "asyncSettings", "autoUpload", "minFileSize", "allowedExtensions", "success", "dropArea", "selected" ]}, "sourceFiles":[ { "displayName": "custom-drop-area.js", "path":"src/uploader/custom-drop-area.js" }, { "displayName":"custom-drop-area.html", "path":"src/uploader/custom-drop-area.html" }, diff --git a/styles/images/SyncfusionLogo.svg b/styles/images/SyncfusionLogo.svg new file mode 100644 index 00000000..9c1378f4 --- /dev/null +++ b/styles/images/SyncfusionLogo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + diff --git a/styles/images/sb-icons/fonts/icons.eot b/styles/images/sb-icons/fonts/icons.eot index 56ff7bb3ad3b8b8716273cab2f2edad3b92c8506..3b72cd36586bad6ffc800cd40c8c40567ea40a35 100644 GIT binary patch delta 921 zcmZvbZ%7ki9LImp-R*9>xtq@0UuSG{B*jRHsZ?sKH^~x=vYI0hkKSu=UJhWLZ>hRf(oPh=2@n95N(kI%-k^?6aU41fND21sZDGF4Y`2TiA!_ zyv5NOiAzc9RVD#I+^D0y(qIzjQq-e3>wEj}_E;M}dQeXRoO~SXmZIYIZ7)EhT3;VS zgL}{TP`9JL?2pBVhVOyz9U8;fG|?|dq~-1G06%63zm`FB| zPtkI2hKvRBK??H002ym83Uwhh#O281O>^UKFfv8`Wqy54g}u43#sHmFcDyx2QarwD z@O%&b;S=xRkMS{n&d3;D#&+X^F;fyOnJD>VYBhZojtXgEMc6ba%+u!e zQla!pX{O9y7AwnIC`((?lD2#=e_j4TWW`!>!^&F^Tbr!|*0gQh-e{k&&)GjaSVz(^ z=~!_JPQUZHbH^2RWh%lIvu=kw;J)DAaOWy(E5pT|kd&UPBPk9)Xm4LA;Gk1u8o6F$ z2KlzeI=qQijal^1Ys`ZS9;rvg7|;9ppz9enZHbdu}I&gJWHxI3%-9fjt$UqPrV<^a|xY*WqrGG-(Nrkz| z5KkT)@gfKgDI!BXY?pyO4DnEUnxn{$vI(UidQf)|q`p}Lju{Bw^ZefT{l0vV*K^$C z%VOJcpx~Vs`#n9Y(Gdh4u#9pjo?hj37&eYoXL+dZ~?#dGmUA8ikm zrdNAzssq2Eu$`d|kM_=l*4nHv@GHjG0Y4Wox&}`g-v{3q3quEP+_5d$e)D0z!kkQJ zFNJntRCp+ki%D@&tVuJ{Td68-+B@u{juVd0a<4oj7v)8zT{)#hl_jO(9Cki&*`Z&n~O4RkjNBNp=zaN1%<9I;q{0@Y%X@}R{s4kKsY zn>i?vsnTK_+_+{jPkF#%Mw~F&PXhuvXuLHbQeoI)8Rzh5GLp^Y|NT_PrI0tcJJ?en Yi^Zo>S`K4~A&x1epdq)X$0&#NzrD?uh5!Hn diff --git a/styles/images/sb-icons/fonts/icons.svg b/styles/images/sb-icons/fonts/icons.svg index 78e4e0c2..4e9eb55f 100644 --- a/styles/images/sb-icons/fonts/icons.svg +++ b/styles/images/sb-icons/fonts/icons.svg @@ -3,7 +3,7 @@ Generated by IcoMoon - + @@ -12,7 +12,7 @@ - + @@ -55,5 +55,49 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles/images/sb-icons/fonts/icons.ttf b/styles/images/sb-icons/fonts/icons.ttf index aa53e8507c7ab738cbe472731bb786e3fcbfe23e..8f7701b6c83ad5e431c1c2df88a3c06ee94d9d95 100644 GIT binary patch delta 863 zcmZvaUr19?9LIm>{@Zrv?&jQ|yE((@NQ#jXQ>oOfCs~3~BdCbHZt8?>cc_I$F^y%? zQ+7+p2Px^zMGu0ENE#twv4@Zz!iSI&Vm<{G1g@>$o%hWS9M0$a`+a|h^E>DK>Y14$ zDIfq~gh`;GrSE+6QL~l1hmqGf`@?Z5NxjS_0Eh>5WLO$Y;%Y%XiK~7%c4Nri{=Odd z48ZY6(LpIOG;2}A2tOp|k=z#(b zo2viL7A_VB%74pc)sLDffTl_Ln+u$rql9~5`^zzMn^Eqvk>xlSaxWLy)3sMj5TJk3 zc`yLfkaps2^^zuHB6)u)Ma#umGUYD?C@2N|WU8wo)Q!|(TMaK=HFx|5BU90z7dF;a z*jvl%4A6NcM* zYx*J_7BWIk*fuB356l}D!E(Wpt@c$%tMgXM+LyFutY2$ZYTns6TZ?Ve&f5>#yX>R( zjN^{8!m=veQoJ(-|Tu)s;+!1%SHds675j}p-S87JhQ6Bd06RdOm@;jP=3T@Enw6>a-CL_`>jrTNIP^X> zX-@39DgOd`dMQ7XB18VnZxfFbhf|q+p^A>v#E*z;>0I)>S$(zo9XNcAjC95%ulXp&&`Se ze#se$_Opmnh#q5#Q;vQtmRhAMf;fm0HrPdu;|94q+yeK9Pw*ANFId7mF({6SkEQF< zj5H_J-n)C0L?mcizq4I>u>)W3=l4C|-?{gkd(vmK zCxKB z$>Vfg89$!^9(P{3W!S#7-IM>5&!dm4Z*kk8*ChYV11{c~0~V98lp=RI?USK*=?&lI zU8?6#mtQqQi2ccCzz9%A8i~K&PilynWP-UQtL{&c@n9~*KrR#{)-xiBC=x6UkbgU%fCb)5}(Q5`z-=%3SB1TQ?Izlt-WBjZew z8RP+-S>#hXbI5ln*JFbLoOrW}4LnX<&{>2KJRgjxF;$JjAVffg7)ph>_Psh#bI|^O OHW+Z*4raB^K;kb4amDcf delta 754 zcmZ9KJ!n%=6vzMfeJ1baquLNrK~o#lIy4m<2Ms1jDJT+4!9@b{Ok&cKFOpOvXj2`W zT;z2T9D)>)Dh};Z&>?DvP#kIr(ow7s0-}SqgCOzT+<+G80hoYp?B9ZnE5u+|7gftjmEP^0bprL#JJkit(BBf;%t>-o29-~=JpL@AArNp zxi&Vp-07r|00zobbDFFFy81Iskl0I#{aorhaVMQESBR}s+~iur-cy-;oa&-S76@dx z)}Cy9${H0KJlIFEud4{2=8SBT*a!{Jaecg>eO$yFp3y|pczLwk`?)>R=h|=CIsf}*LI$Qg(Pk{)wTxWNs8Ijo)bb)^j96YG zAGf?r@4{_)g?QNV8V;by|BYlPqEV*j1-Nj<@*?q|