declare const tutorial = "\n<div style=\"padding: 15px 20px; box-sizing: border-box\" default-source-provider=\"Demo\">\n\n  <style>\n    h1 {\n      margin: 0 0 10px;\n    }\n  </style>\n\n  <h1>Line Chart</h1>\n\n\n  <fwc-code-sample title=\"With title and labels\">\n    <frc-line-chart title=\"Graph Title\" x-axis-label=\"x-axis label\" y-axis-label=\"y-axis label\">\n      <frc-chart-data label=\"Data label\" class=\"random\"></frc-chart-data>\n      <frc-chart-axis></frc-chart-axis>\n    </frc-line-chart>\n    <script>\n      (function() {\n        const randomData = document.querySelector('.random');\n        setInterval(() => {\n          randomData.value = Math.random() * 2 - 1;\n        }, 500);\n      })();\n    </script>\n  </fwc-code-sample>\n\n  <fwc-code-sample title=\"Graphing multiple values\">\n    <frc-line-chart title=\"Trig functions\">\n      <frc-chart-data label=\"sin\" class=\"sin\"></frc-chart-data>\n      <frc-chart-data label=\"cos\" class=\"cos\"></frc-chart-data>\n      <frc-chart-data label=\"sin 2\" class=\"sin2\"></frc-chart-data>\n      <frc-chart-axis></frc-chart-axis>\n    </frc-line-chart>\n    <script>\n      (function() {\n        const sinData = document.querySelector('.sin');\n        const cosData = document.querySelector('.cos');\n        const sin2Data = document.querySelector('.sin2');\n        let angle = 0;\n        setInterval(() => {\n          angle += .1;\n          sinData.value = Math.sin(angle);\n          cosData.value = Math.cos(angle);\n          sin2Data.value = Math.sin(angle / 2);\n        }, 100);\n      })();\n    </script>\n  </fwc-code-sample>\n\n  <fwc-code-sample title=\"Changing tracked time on graph\">\n    <style>\n      [title=\"Tracking 8 seconds\"], [title=\"Tracking 2 seconds\"] {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n    <frc-line-chart title=\"Tracking 8 seconds\" tracked-time=\"8\">\n      <frc-chart-data class=\"eight-seconds\"></frc-chart-data>\n      <frc-chart-axis min=\"-2\" max=\"2\"></frc-chart-axis>\n    </frc-line-chart>\n    <frc-line-chart title=\"Tracking 2 seconds\" tracked-time=\"2\">\n      <frc-chart-data class=\"two-seconds\"></frc-chart-data>\n      <frc-chart-axis min=\"-2\" max=\"2\"></frc-chart-axis>\n    </frc-line-chart>\n    <script>\n      (function() {\n        const eightSecondsData = document.querySelector('.eight-seconds');\n        const twoSecondsData = document.querySelector('.two-seconds');\n        let value = 0;\n        setInterval(() => {\n          value += .1;\n          eightSecondsData.value = value % 4 - 2;\n          twoSecondsData.value = value % 4 - 2;\n        }, 100);\n      })();\n    </script>\n  </fwc-code-sample>\n\n  <fwc-code-sample title=\"Changing time step\">\n    <style>\n      [title=\".5 second timestep\"], [title=\"2 second timestep\"] {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n    <frc-line-chart title=\".5 second timestep\" time-step=\".5\">\n      <frc-chart-data class=\"half-second-step\"></frc-chart-data>\n      <frc-chart-axis min=\"-10\" max=\"10\"></frc-chart-axis>\n    </frc-line-chart>\n    <frc-line-chart title=\"2 second timestep\" time-step=\"2\">\n      <frc-chart-data class=\"two-second-step\"></frc-chart-data>\n      <frc-chart-axis min=\"-10\" max=\"10\"></frc-chart-axis>\n    </frc-line-chart>\n    <script>\n      (function() {\n        const halfSecondStepData = document.querySelector('.half-second-step');\n        const twoSecondStepData = document.querySelector('.two-second-step');\n        value = 0;\n        setInterval(() => {\n          value += Math.random() * 2 - 1;\n          value = Math.max(-10, Math.min(10, value));\n          halfSecondStepData.value = value;\n          twoSecondStepData.value = value;\n        }, 100);\n      })();\n    </script>\n  </fwc-code-sample>\n\n  <!-- code for \"Try it out\" section -->\n  <h3>Try it out!</h3>\n\n  <fwc-string source-key=\"/chart/title\" value=\"Title\"></fwc-string>\n  <fwc-number source-key=\"/chart/minY\" value=\"-10\"></fwc-number>\n  <fwc-number source-key=\"/chart/maxY\" value=\"10\"></fwc-number>\n  <fwc-string source-key=\"/chart/xAxisLabel\" value=\"time\"></fwc-string>\n  <fwc-string source-key=\"/chart/yAxisLabel\" value=\"value\"></fwc-string>\n  <fwc-number source-key=\"/chart/trackedTime\" value=\"10\"></fwc-number>\n  <fwc-number source-key=\"/chart/timeStep\" value=\".1\"></fwc-number>\n\n  <fwc-string source-key=\"/chart/data/color\" value=\"blue\"></fwc-string>\n  <fwc-string source-key=\"/chart/data/label\" value=\"some label\"></fwc-string>\n  <fwc-number source-key=\"/chart/data/value\" value=\"1\"></fwc-number>\n\n  <fwc-string source-key=\"/chart/axis/scaleType\" value=\"linear\"></fwc-string>\n  <fwc-number source-key=\"/chart/axis/min\" value=\"-5\"></fwc-number>\n  <fwc-number source-key=\"/chart/axis/max\" value=\"5\"></fwc-number>\n  <fwc-string source-key=\"/chart/axis/label\" value=\"Value\"></fwc-string>\n  <fwc-string source-key=\"/chart/axis/position\" value=\"left\"></fwc-string>\n\n  <frc-line-chart source-key=\"/chart\">\n    <frc-chart-data source-key=\"/chart/data\"></frc-chart-data>\n    <frc-chart-axis source-key=\"/chart/axis\"></frc-chart-axis>\n  </frc-line-chart>\n\n  <div class=\"try-it-out\">\n\n    <div>\n      <vaadin-text-field \n        label=\"Title\" \n        theme=\"small\" \n        source-key=\"/chart/title\"\n      ></vaadin-text-field>\n\n      <vaadin-text-field \n        label=\"x-Axis Label\" \n        theme=\"small\" \n        source-key=\"/chart/xAxisLabel\"\n      ></vaadin-text-field>\n\n\n      <vaadin-number-field \n        label=\"Tracked Time\" \n        theme=\"small\" \n        source-key=\"/chart/trackedTime\"\n        has-controls\n      ></vaadin-number-field>\n\n      <vaadin-number-field \n        label=\"Time Step\" \n        theme=\"small\" \n        source-key=\"/chart/timeStep\"\n        step=\".05\"\n        min=\"0\"\n        has-controls\n      ></vaadin-number-field>\n    </div>\n\n    <div>\n      <vaadin-text-field \n        label=\"Data Label\" \n        theme=\"small\" \n        source-key=\"/chart/data/label\"\n      ></vaadin-text-field>\n\n      <vaadin-text-field \n        label=\"Data Color\" \n        theme=\"small\" \n        source-key=\"/chart/data/color\"\n      ></vaadin-text-field>\n\n      <vaadin-number-field \n        label=\"Data Value\" \n        theme=\"small\" \n        source-key=\"/chart/data/value\"\n        has-controls\n      ></vaadin-number-field>\n    </div>\n\n    <div>\n      <vaadin-combo-box\n        theme=\"small\"\n        label=\"Scale Type\"\n        source-key=\"/chart/axis/scaleType\"\n        items='[\"linear\", \"logarithmic\"]'\n      ></vaadin-combo-box>\n\n      <vaadin-number-field \n        label=\"Min Axis Value\" \n        theme=\"small\" \n        source-key=\"/chart/axis/min\"\n        has-controls\n      ></vaadin-number-field>\n\n      <vaadin-number-field \n        label=\"Max Axis Value\" \n        theme=\"small\" \n        source-key=\"/chart/axis/max\"\n        has-controls\n      ></vaadin-number-field>\n\n      <vaadin-text-field \n        label=\"Axis Label\" \n        theme=\"small\" \n        source-key=\"/chart/axis/label\"\n      ></vaadin-text-field>\n\n      <vaadin-combo-box\n        theme=\"small\"\n        label=\"Axis Position\"\n        source-key=\"/chart/axis/position\"\n        items='[\"left\", \"right\"]'\n      ></vaadin-combo-box>\n    </div>\n\n\n  </div>\n\n  </div>\n";
export default tutorial;