update all classes and ids to single style

Author: dmlvr

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css

@@ -1,12 +1,12 @@
-::ng-deep .chart {
+::ng-deep #chart {
   position: absolute;
   top: 12px;
   right: 35px;
   width: 480px;
   height: 347px;
 }
 
-::ng-deep .chart_environment {
+::ng-deep .chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html

@@ -1,5 +1,5 @@
-<div class="chart_environment">
-  <div id="custom_markup_container">
+<div class="chart-environment">
+  <div id="custom-markup-container">
     <svg version="1.1" width="820px" height="420px">
       <path
         d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
@@ -32,12 +32,7 @@
       </text>
     </svg>
   </div>
-  <dx-chart
-    id="chart"
-    class="chart"
-    [dataSource]="oilProductionData"
-    palette="Violet"
-  >
+  <dx-chart id="chart" [dataSource]="oilProductionData" palette="Violet">
     <dxi-chart-series valueField="year1990" name="1990"></dxi-chart-series>
     <dxi-chart-series valueField="year2000" name="2000"></dxi-chart-series>
     <dxi-chart-series valueField="year2010" name="2010"></dxi-chart-series>

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts

@@ -54,7 +54,7 @@ export class AppComponent {
   }
 
   prepareMarkup() {
-    const sourceContainer = document.getElementById('custom_markup_container');
+    const sourceContainer = document.getElementById('custom-markup-container');
     const sourceElements = sourceContainer.querySelectorAll('*');
 
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx

@@ -83,13 +83,12 @@ function App() {
   }, []);
 
   return (
-    <div id="chart-demo" className="chart-demo">
-      <div className="chart_environment">
+    <div id="chart-demo">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}
           id="chart"
-          className="chart"
           dataSource={dataSource}
           palette="Violet"
         >

apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Form = React.forwardRef<HTMLDivElement>((_, ref) => (
-  <div id="custom_markup_container" ref={ref}>
+  <div id="custom-markup-container" ref={ref}>
     <svg width="820px" height="420px">
       <path opacity="1" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
         strokeLinecap="butt" fill="white" strokeLinejoin="miter"></path>

apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css

@@ -1,16 +1,16 @@
-.chart-demo {
+#chart-demo {
   height: 460px;
 }
 
-.chart {
+#chart {
   position: absolute;
   top: 12px;
   right: 35px;
   width: 480px;
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;

apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js

@@ -79,16 +79,12 @@ function App() {
     );
   }, []);
   return (
-    <div
-      id="chart-demo"
-      className="chart-demo"
-    >
-      <div className="chart_environment">
+    <div id="chart-demo">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}
           id="chart"
-          className="chart"
           dataSource={dataSource}
           palette="Violet"
         >

apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Form = React.forwardRef((_, ref) => (
   <div
-    id="custom_markup_container"
+    id="custom-markup-container"
     ref={ref}
   >
     <svg

apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css

@@ -1,16 +1,16 @@
-.chart-demo {
+#chart-demo {
   height: 460px;
 }
 
-.chart {
+#chart {
   position: absolute;
   top: 12px;
   right: 35px;
   width: 480px;
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;

apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue

@@ -1,13 +1,9 @@
 <template>
-  <div
-    id="chart-demo"
-    class="chart-demo"
-  >
-    <div class="chart_environment">
+  <div id="chart-demo">
+    <div class="chart-environment">
       <Form ref="form"/>
       <DxChart
         id="chart"
-        class="chart"
         ref="chart"
         :data-source="dataSource"
         palette="Violet"
@@ -131,19 +127,19 @@ function onClick(): void {
 }
 </script>
 <style>
-.chart-demo {
+#chart-demo {
   height: 460px;
 }
 
-.chart {
+#chart {
   position: absolute;
   top: 12px;
   right: 35px;
   width: 480px;
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;