I´m thinking about using React jsx highcharts for a project im working on, the only thing putting me off is I haven´t used highcharts before so I´d need some sort of documentation listing all of the different parameters available to play with, can´t seem to find this information anywhere, would appreciate if someone could point me in the right direction, or give me some advice, maybe its worth just using react-highcharts instead?
You can just use the docs for Highcharts's API, and with any methods/properties that are normally in the configuration object for Highcarts, you would pass as props.
Highcharts API
Example:
chart: {
type: 'column'
},
xAxis: {
categories: [
"foo",
"bar",
],
type: 'category',
},
Would look something like this:
import { Chart, XAxis } from 'react-jsx-highcharts';
<Chart type={'category'}/>
<XAxis categories={['foo', 'bar']} type={'category'}/>
There are only a few situations where the syntax would be different, but the highcharts-react-jsx documentation covers those edge cases in their documentation.
Related
I am using react-native-responsive-linechart in one of my projects. But the tooltip is not showing properly as the test little bit long and also I can't add a new line. In the official documentation Link there is a process to add a custom tooltip but I couldn't manage to show a proper tootip on top of the point. It will be helpful if someone provides a sample custom tooltip example implemented for react-native-responsive-linechart.
What exactly are you planning to implement with your own tooltip?
Here is an example on how to integrate your own tooltip as an Component.
export function OwnToolTip(props) {
return Tooltip({
theme: {
formatter: (v) => v.y.toFixed(2),
shape: { color: "dodgerblue" }},
...props,
});
And as stated in the docs substituted.
<Line tooltipComponent={<OwnToolTip />}
/>
I am still new to react native and sure this might be not the best way, so i gladly take constructive criticism.
My problem is kinda specific. I'm using Vuex and Nuxt for this project. For the dependency we use i18n-nuxt but somehow I cannot use $t('some.translation') in the $store while in the components it works just fine. I tried every possible combinations I can imagine but still the result leads me to the same error.
ReferenceError $t is not defined
or
Cannot read the property of i18n
So in this case I could use some help either to solve this problem or it would be perfect if someone shows me the way how to use i18n as a filter. (Which I think is the only way around.)
For example this code block is from the $store.state
sortMethods: [
{ id: 'airline', name: this.i18n.$t('Airline'), asc: 'A', desc: 'Z', defaultDirection: 'asc' },
You can imagine I cannot translate them where they are.
It's possible to use t in mutations and actions with this.$i18n.t. Ex.:
export const mutations = {
foo() {
console.log(this.$i18n.t("bar"));
}
}
However I haven't found a way to use it in the state or getters because they don't have access to this.
i18n module is not injected in the store context by default , and the “this” keyword cannot access to the module too.
Is not a better approach to save a key from the translation file as a value in the store or even use the id of the object as the same translation key, and then in the component use the $t function to translate?
Like the following
store.js
const state = {
sortMethods: [
{
id: “airline”,
key_name: “airline”
}
]
}
And then in the select tag from your component.vue:
<option v-for=“method in $store.state.sortMethods” :key=“method.id”> {{$t(method.key_name)}}</option>
This will give you a translated list from the store. No need to translate directly.
You can use an id, a key, even the name, always that the translation key is the same in your lang file.
I am trying to create a directive where I animate a fab-button when the view is shown.
The animation works if it is inside ngOnInit, but due to ionic route strategy the animation doesn't work when I leave the page and go back. Putting it in ionViewDidEnter didn't work because I presume that ionViewDidEnter doesn't work inside the directive. So is there any approach I can take to solve this?
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button mode="md" appAnimateFab>
<ion-icon name="create" mode="md"></ion-icon>
</ion-fab-button>
</ion-fab>`
#Directive({
selector: 'ion-fab-button[appAnimateFab]'
})
export class AnimateFabDirective implements OnInit {
constructor(
private animationBuilder: AnimationBuilder,
private element: ElementRef
) { }
ngOnInit() {
}
ionViewDidEnter() {
console.log(this.element);
const factory = this.animationBuilder.build([
style({transform: 'rotate(-45deg)'}),
animate('5s ease-in', style({transform: 'rotate(0deg)'}))
]);
const anim = factory.create(this.element.nativeElement);
anim.play();
}
}
This is an interesting question. I got halfway through writing out a detailed reply yesterday when I realised that you were actually asking about directives and not custom components... so all my research was wrong haha.
Today I have had another look. The tutorials all seem to conveniently miss having a requirement to deal with pages changing backwards and forwards and just lean on ngOnInit.
After scratching my head for a bit I started to wonder how else it could be triggered and I'm thinking: what about the Intersection Observer API?
I really like the way Alligator.io explain things:
Using the Intersection Observer API to Trigger Animations and Transitions
Their example shows the animation being triggered every time you scroll down to view.
If you are flipping pages then it feels like it should trigger as coming into view, but I haven't tested this out with code.
For a more Ionic-focused example with Intersection Observer API, Josh has a tutorial:
Animating List Items in Ionic with the Intersection Observer API | joshmorony - Learn Ionic & Build Mobile Apps with Web Tech
Maybe you can adapt this to use your animation code?
I've found it very difficult to find help online with this issue as no examples seem to match my use case. I'm basically wanting to check if I am on the right track in my approach.I have a single page Vue app:
Each row on the right is a component. On the left are listed three data sets that each possess values for the fields in the dashboard. I want it to be so that when you click on a dataset, each field updates for that set.
So if you click on 'Beds', the title becomes 'Beds' and all the fields populate the specific data for beds.
I want to do this without having separate pages for each dataset since that would seem to defeat the point of using a reactive framework like Vue. Only the embedded components should change, not the page.
I have installed Vue Router and have explored using slots and dynamic components but it is very hard to understand.
If someone experienced in Vue could just let me know the right broad approach to this I then know what I need to look into, at the moment it is difficult to know where to start. Thank you
You can use Vuex for that purpose.
Add property to the state, dataset for example. And mutation to change it. Every component on the right side should use that this.$store.state.dataset (or through mapState) for its own purposes. So when you're selecting one of listed datasets on the left side, it will mutate dataset in store with its own data.
Something like that:
store (there are alternate version, where we can use getter, but its little bit more complicated for just an example).
import Vue from 'vue';
const store = new Vuex.Store({
state: {
dataset: {}
},
mutations: {
setDataset(state, payload) {
Vue.set(state, 'dataset', payload);
}
}
});
one of the right side component
computed: {
dataset() {
return this.$store.state.dataset;
},
keywords() {
return this.dataset.keywords;
},
volume() {
return this.dataset.volume;
}
}
left menu
template:
{{dataset.title}}
code:
data() {
return {
datasets: [{
id: 1,
title: 'Sofas',
keywords: ['foo'],
volume: 124543
}]
}
},
methods: {
changeDataset(dataset) {
this.$store.commit('setDataset', dataset);
}
}
datasets is your data which you're loading from server.
BUT You can use some global variable for that, without Vuex. Maybe Vue observable, added in 2.6.
I developed some kind of blog with VueJS and VueRouter. So I have a markdown editor in the administration in order to add blog posts.
My problem is: How to make router-links work with dynamic content?
For the time being, I can only add classic foo with the editor. And when the content gets rendered, it's a classic link so when a visitor clicks on the link, the entire website gets reloaded to display the content of the targeted link.
I think that the behaviour I'm looking for is to transform the internal links into router-link and the external links into classic links.
What is your strategy to achieve that in your projects, did someone had ever been confronted to that problem?
Thank you for your advices or ideas.
I explained my problem in a small JSFiddle if you want to see what I talk about: http://jsfiddle.net/El_Matella/museptre/1/
const Home = {
template: '<div>Home <div v-html="dynamicContent"></div></div>',
data () {
return {
dynamicContent: '<router-link to="/foo">This is a dynamic link</router-link> and and this is a classic link'
}
}
}
will only render the classic link
Ok, now I can see what you want to achieve.
Obviously, rendering <router-link></router-link> to static HTML won't work.
You need to generate <rotuer-link> in the template directly. You may use render method to get more flexibility/dynamism or as Vue docs says:
leverage the full programmatic power of JavaScript.
Then you bound to param and content of the link to some dynamic var eg. from data prop.
Example 1. with "simple dynamism" string template:
const Home = {
template: '<div>Home <router-link :to="dynamicTo">{{dynamicContent}}</router-link></div>',
data () {
return {
dynamicContent: 'This is a dynamic link',
dynamicTo: '/foo'
}
}
}
Example 2. with "more complex dynamism" and render method:
render: function(createElement) {
createElement(
'router-link', {
props: {
to: this.dynamicTo
}
}, this.dynamicContent)
}
I didn't check the second example has valid syntax, but you've got an idea how you can use JavaScript to generate a fully customizable template (you can use loops, variables, etc).
It is possible to create a custom component solving the problem and using the render function:
export default {
props: {
content: {
type: String,
required: true
}
},
render (h) {
return h(Vue.compile(this.content))
}
}
and using it this way:
<dynamic-vue-component :content="dynamic"></dynamic-vue-component>
Here is a JSFiddle demonstrating the problem solved: JSFiddle
Maybe kind of a hack, but I managed to work around this by adding an onclick attribute forcing the router to pick the link and preventing the page from reloading :
<a href="/the-link/" target="_self" onclick="event.preventDefault();
app._router.push('/the-link/');">Some text.</a>