Add files via upload

SyncfusionExamples · Oct 22, 2024 · 2aebea5 · 2aebea5
1 parent 82a7825
commit 2aebea5
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,31 @@
-# getting-started-with-the-vue-linear-gauge-component
-A quick start project that shows how to create and configure the Syncfusion Vue Linear Gauge component in a Vue app. This sample explains how to set a specific axis pointer value as well as how to customize an axis line height and width. It also explains how to add multiple axis ranges.
+# Getting Started with the Vue Linear Gauge Component
+
+A quick start project that shows how to create and configure the Syncfusion Vue Linear Gauge component in a Vue app. This sample explains how to set a specific axis pointer value as well as how to customize an axis line height and width. It also explains how to add multiple axis ranges.  
+
+Example: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/linear-gauge/default-functionalities.html
+
+Documentation: https://ej2.syncfusion.com/vue/documentation/linear-gauge/getting-started-vue-3
+
+## Project pre-requisites
+Make sure that your machine has the following setup before starting to work on this project.
+
+Visual Studio Code
+
+Node.js
+
+Vue
+
+## How to run this application?
+To run this application, you need to first clone the getting-started-with-the-vue-linear-gauge-component repository and then navigate to its appropriate path where it has been located in your system.
+To do so, open the command prompt and run the below commands one after the other.
+```
+git clone getting-started-with-the-vue-linear-gauge-component linear-gauge
+cd linear-gauge
+```
+## Installation
+Once done with downloading, next you need to install the necessary packages required to run this application locally. The `npm install` command will install all the needed Vue packages into your current project and to do so, run the below command.
+```
+npm install
+```
+## Running on development server
+Run `npm run dev` command. Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-lineargauge": "^27.1.48",
+    "vue": "^3.4.37"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { LinearGaugeComponent as EjsLineargauge, AxesDirective as EAxes, AxisDirective as EAxis,
+  PointerDirective as EPointer, PointersDirective as EPointers,
+  RangesDirective as ERanges, RangeDirective as ERange
+ } from '@syncfusion/ej2-vue-lineargauge';
+const line = {
+      height: 350,
+      width: 7,
+      color: '#4286f4'
+};
+const labelStyle = {
+  format: "{value}°C"
+};
+</script>
+
+<template>
+  <ejs-lineargauge >
+        <e-axes>
+          <e-axis :line='line' :labelStyle='labelStyle'>
+            <e-pointers>
+              <e-pointer value=80></e-pointer>
+            </e-pointers>
+            <e-ranges>
+                <e-range start=30 end=60></e-range>
+                <e-range start=60 end=90 color="#41f47f"></e-range>
+            </e-ranges>
+          </e-axis>
+        </e-axes>
+      </ejs-lineargauge>
+</template>
+
+<style>
+
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import {registerLicense} from '@syncfusion/ej2-base';
+registerLicense("Your License Key");
+
+createApp(App).mount('#app')
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})