I'm evaluating Anychart's gauge component with Vue 2. The example from github works fine (with pie, bars and line graphs), but when I try to set the chart to the type 'gauge' or 'circular-gauge' it's not found. Are there any additional steps to follow in order for this to work?
The Circular Gauge requires adding the Core and Circular Gauge modules as stated in the AnyChart Documentation. I guess you are missing the Circular Gauge module. Try adding that and refer to the documentation if you need additional information.
Related
I used Vue.D3.tree dependency with the sample code provided at
https://vuejsexamples.com/vue-component-to-display-tree-based-on-d3-js-layout/
in code sandbox https://codesandbox.io/s/hopeful-fire-vpq5z?file=/src/App.vue:0-853.
I need to build complex tree based on that sample code. The tree is getting built but is very small(not visible initially) and continuously moving towards down and growing in size. Not sure what im missing. How can I resolve this issue?
I have two Vue projects, one is an app that is injected in an older website via script-tag and a second project, that is a form, that uses own logic and vuetify components. The later should be used in other projects also and gets props from where it is used. Therefore it should be compiled as a library.
If i compile it as app i can transfer data via a global JS variable, but i would like to use the components like any other library. (Just import it and put it in the <template> like so: <MyComponent ..props../>)
If i compile it as a library i got all sorts of vuetify not correctly initialized. After i cleared them my HTML looked excactly like my code (eg:<v-app>...</v-app>) without any errors.
The 'serve' from the standard installation worked without a problem in the component project.
The component project is created with vue create project and modified according to https://cli.vuejs.org/guide/build-targets.html#library
I already searched online and got only so far, my question on the vue discord was left unanswered, so my questions are:
1. Is this even possible to do?
2. If it is, could you please point me in a direction, or give a summary of what i have to do?
3. If not, is there another way of achieving this, except for copying the raw code into each project?
Short answer, yes. Is it recommended, no.
The best way to do this is to export your form component as a library so that it can be imported into other projects but exclude any dependencies like Vuetify, which should be imported separately. This avoids versioning errors.
The Vue docs on packaging for npm are useful as is this article
https://github.com/highcharts/highcharts-vue
I don't see examples of these in the demo and there is nothing mentioned in the docs. I'm wondering if it is simply not possible or just not demoed because of their more complicated nature.
I will also need to use Charts appendData prototype to make a line chart real-time. Is this possible using the wrapper? I'm thrown by the following in the docs but not sure it it's directly related;
You can access the Chart object instance if necessary (e.g when need
to get some data or use any of Chart.prototype functions), by calling
specific Vue component instance chart field, but it is not supported
to update the chart using its built-in functions
Indeed, the highcharts-vue package supports all official modules included in Highcharts, so it's not necessary to produce every demo from demos site using Vue wrapper. I made the examples with gauge and heatmapseries specially for you, so please take a look on them.
I will also need to use Charts appendData prototype to make a line chart real-time. Is this possible using the wrapper?
A component is watching for changes on provided chart configuration, so if you will update your data (e.g by pushing new points into a series.data), then highcharts-vue will detect it, and automatically update the chart. That's the most recommended way of implementation. If you would like to use some Chart's or Series prototype functions, of course you can do that, but please note that causes inconsistency between the chart data and the data defined within component. Just need to access chart's reference like it is described in Chart object reference section.
Live examples:
https://codesandbox.io/s/vue-template-uqu1p (Gauge),
https://codesandbox.io/s/vue-template-8z2f5 (Heatmap)
I try to duplicate the creation of Symbol Palette on my component, but I got errors on the types :
let connectorSymbols: ConnectorModel[] = [...]
or
let palettes : any
I have syntax error, I am a beginner on VueJS and I never encountered this kind of declaration.
Could you help me ?
I use a boilerplate vue and webpack, is that enough ?
The following details are needed,
We need more information about your exact requirement and if possible provide issue reproducible sample?
Did you follow all the steps in the getting-started documentation to create Vue ColorPicker sample using Webpack?
We have created simple Vue ColorPicker sample using webpack and it can be download from here.
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!