I'm working on a Vue.js Project I need this
Download Chart
I tried to create a Component like this.
import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';
Vue.component('justgauge', {
name: 'justgauge',
mounted () {
var g1;
document.addEventListener("DOMContentLoaded", function(event) {
g1 = new JustGage({
id: "justgauge",
value: 72,
//title: "Completed",
fill: '#ffa726',
symbol: '%',
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.4,
counter: true,
hideInnerShadow: true
});
});
}
})
I'm getting errors like this-
gauge/raphael.min.js
Module build failed: SyntaxError: Deleting local variable in strict mode (10:22810)
Note: I've used Justgauge.js and raphael on my Local Library. Any help will be highly appretiate.
I made a JustGage component for Vue Js. You can find it here:
https://github.com/agronick/KGauge
The gauge you want would look something like this:
<k-gauge
title="Completed"
:value="72"
:color-steps="['#ffa726']"
:width="500"
:height="300"
:max="100"
:gauge-size="0.4"
:format-function="(x) => `${x.toFixed(2)}%`"
:show-min-max="false"
:doughnut="true"
:shadow-opacity="0"
/>
Related
I am trying to Convert some HTML to PDF using PDFMake and htmlToPdfMake in my Vue Project. By default PDFMake only supports Roboto but i wanted to add some custom fonts so I added the Font Files (.ttf) to ./examples/fonts in the PDFMake folder inside ./node_modules. I then used the node build-vfs.js "./examples/fonts" command and compiled a new vfs-fonts.js file. This here is my code.
import pdfMake from "pdfmake/build/pdfmake.js";
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake.vfs = pdfFonts.pdfMake.vfs;
const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);
pdfMake.fonts = {
AbrilFatface: {
normal: "../assets/fonts/AbrilFatface-Regular.ttf",
bold: "../assets/fonts/AbrilFatface-Medium.ttf",
italics: "../assets/fonts/AbrilFatface-Italic.ttf",
bolditalics: "../assets/fonts/AbrilFatface-MediumItalic.ttf",
},
Montserrat: {
normal: "../assets/fonts/Montserrat-Regular.ttf",
bold: "../assets/fonts/Montserrat-Medium.ttf",
italics: "../assets/fonts/Montserrat-Italic.ttf",
bolditalics: "../assets/fonts/Montserrat-MediumItalic.ttf",
},
};
const result = pdfMake.createPdf({
styles: {
alignment: "center",
},
pageSize: {
width: 900,
height: 700,
},
pageOrientation: "landscape",
pages: 2,
content: [html],
});
result.getBase64((data) => {
this.setPdf({
pdf: data,
});
});
As you can see, I have manually set the pdfMake window object, also included the pdfMake and vfs-fonts js files and also provided a pdfMake.fonts object. Even after all this, this error appears:
I have no idea why it doesn't work. Please Help.
OP solved the issue by bringing the fonts into the same directory as the code using it (rather than node_modules).
Nothing should really be added there anyway since it's volatile and usually not accessible on a production server.
I'm trying to create an API on Vercel which returns images, generated based on the request. I would like to use #vercel/og for this, because it can generate images from HTML, and it is very quick. However, it seems to require React, which seems entirely unnecessary for something serving no actual HTML at all.
I have an edge function in api/test.ts:
import { ImageResponse } from '#vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse({
type: "div",
props: {
children: "Hello, World",
style: {
backgroundColor: "black",
color: "white",
width: "100%",
height: "100%",
}
}
}, { width: 500, height: 500 });
}
This runs completely fine when deployed to Vercel, but when I use vercel dev it gives me these errors:
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/test: Error: socket hang up
node_modules/#vercel/og/dist/og.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import type { ReactElement } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import { ReactNode } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:14:11 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node`.
14 data: Buffer | ArrayBuffer;
~~~~~~
Found 3 errors.
There are two errors saying that #vercel/og and satori can't find React. Is there a way around this? I shouldn't need react for this, right?
I worked around the React-related errors and the inability to run .tsx edge functions without Next.js by installing #types/react and defining my own JSX function and using it without JSX syntax just in a .ts file.
function h<T extends React.ElementType<any>>(
type: T,
props: React.ComponentPropsWithRef<T>,
...children: React.ReactNode[]
) {
return {
type,
key: "key" in props ? props.key : null,
props: {
...props,
children: children && children.length ? children : props.children,
},
};
}
After this you can run it in Vercel deployment preview.
However, in vercel dev locally, I'm still getting the following error.
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/og: Error: socket hang up
I had also forced vercel CLI to use the newer TypeScript version with pnpm.overrides in package.json to solve some TypeScript parse errors I was getting.
Hello first time posting on stack overflow so sorry
I am trying to get vue-heatmapjs https://github.com/BrockReece/vue-heatmapjs to work in my nuxt js project. Since i don't have a main.js I've put it in a plugin and I don't recieve any errors. the scroll map for this project seems to work however its simply the click map.
plugins: [
{ ssr: false, src: "~plugins/heatmap-plugin.js"}
],
import vue from 'vue'
import { Subject } from 'rxjs';
import Vueheatmap from 'vue-heatmapjs'
const stream = new Subject();
export const pauser = new Subject();
vue.config.productionTip = false;
vue.use(Vueheatmap, {
stream,
pauser,
heatmapPreload: [{ x: 50, y: 50, value: 100 }],
afterAdd(data) {
console.log(data)
// you can fire this back to your analytics server
},
});
stream.subscribe(console.log);
Above is my plugin code
So After alot of searching its because the Dependancies for this heatmap app weren't compatible with our current nuxt and vue setup so I had set it all up again and change the dependancies and rewrite alot of the code.
Vue-rx is one of the keys i had to install aswell as update rxjs
I have weird problem.
I want use this hover-effect library (https://github.com/robin-dela/hover-effect) in my nuxt project.
This i have in my contact.vue in script tags
import hoverEffect from 'hover-effect'
export default {
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
}
And that effect works perfectly.. BUT when i refresh the page i got this error:
SyntaxError Cannot use import statement outside a module
So i tried add this plugin into plugins/hover-effect.js
import Vue from 'vue'
import hoverEffect from 'hover-effect'
Vue.use(hoverEffect)
then in nuxt.config.js
plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],
But nothing works.. its always error: hoverEffect is not defined. I tried another 20 ways with no success. I tried this effect in normal Vue project and it works but not in nuxt.js. Can somebody help me with this?
You can configure it in the head of the page:
Page.vue
export default {
head() {
return {
script: [
{src: '../dist/hover-effect.umd.js'}
]
}
},
...
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://github.com/nuxt/content
'#nuxt/content',
'hover-effect'
],
Have you tried to add hover-effect library to modules in nuxt.config.js file? All I did was install the package and add it to the module and then have the same code as your script tag. Hope it helped you!
Is there a module for lodash that I can import into my dojo project? I know that I can always reference it by window._, but I wanted to be more conventional (as far as dojo is concerned) and formally require it into my module.
Thanks in advance.
Have you tried the AMD branch? https://github.com/lodash/lodash/tree/3.9.3-amd
You should then be able to add it to your packages, and require it in like any other module.
Edit: It worked locally by adding lodash to the packages to my dojoConfig object
var dojoConfig = {
async: true,
baseUrl: '.',
packages: [
'app',
'dgrid',
'dijit',
'dojo',
'dojox',
'put-selector',
'xstyle',
'lodash'
],
selectorEngine: 'lite',
tlmSiblingOfDojo: false
};
I was then able to use the lodash modules:
define(['lodash/array/union'], function (union) {
var app = {};
// Lodash example
var employees = ['John', 'Sam', 'Bob'],
employees2 = ['Jane', 'Kari', 'Jamie'];
console.log(employees);
console.log(employees2);
console.log('=== Union Result ===');
console.log(union(employees, employees2));
return app;
});