I am trying to embed an aws quick sight dashboard on an angular app.
I am following the below URL to implement on Angular
https://github.com/awslabs/amazon-quicksight-embedding-sdk
Could you please help me with sample code on how to implement the below logic in Angular
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk#1.0.3/dist/quicksight-embedding-js-sdk.min.js" />
<script type="text/javascript">
var dashboard
function onDashboardLoad(payload) {
console.log("Do something when the dashboard is fully loaded.");
}
function onError(payload) {
console.log("Do something when the dashboard fails loading");
}
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var options = {
url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",
container: containerDiv,
parameters: {
country: "United States"
},
scrolling: "no",
height: "700px",
width: "1000px"
};
dashboard = QuickSightEmbedding.embedDashboard(options);
dashboard.on("error", onError);
dashboard.on("load", onDashboardLoad);
}
function onCountryChange(obj) {
dashboard.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedDashboard()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="dashboardContainer"></div>
</body>
</html>
I am getting compile time error while importing embedDashboard module
import {embedDashboard} from 'amazon-quicksight-embedding-sdk/src';
ERROR in ./node_modules/amazon-quicksight-embedding-sdk/src/embedDashboard.js 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|
| import EmbeddableDashboard from './EmbeddableDashboard';
import type {EmbeddingOptions} from './lib/types';
|
How do I implement the above logic through angular? When I am trying to import QuickSightEmbedding for using the embedDashboard(options). I am getting compile time error.
If it is going to work at all, your import statement should look like this: import QuickSightEmbedding from 'amazon-quicksight-embedding-sdk'.
Related
I want to build a mindmapping tool using Vue.
I found this vue3-mindmap component. The issue I'm facing is it that it's not dynamically updating the mindmap when I update the underlying data. I think the issue is it uses a clone of the modelValue to build the mindmap and hence it's not reactive.
#App.Vue
<template>
<mindmap v-model="state.data"
:edit=true
:add-node-btn=true></mindmap>
<div >{{ state }} </div>
<button #click="updateData">Update Data</button>
</template>
<script>
import { reactive} from 'vue'
import mindmap from 'vue3-mindmap'
import 'vue3-mindmap/dist/style.css'
export default {
components: { mindmap },
setup() {
const state =reactive({data:[{ 'name': 'Old Data' }]})
function updateData() {
state.data=[{ 'name': 'New Data' }]
}
return {state,updateData}
}
}
</script>
I have little understanding of JS libraries and I'm struggling to fix the source code and use it in my project. Any help would be appreciated.
You are right, the modelValue is getting internally copied to a new ImData object.
emitter.emit('mmdata', new ImData(cloneDeep(props.modelValue[0]), xGap, yGap, getSize))
I haven't found any simple way to manipulate the internal data outside of the Mindmap plugin. There is already the issue After the v-model binding data is updated, the brain map page is not updated accordingly (Chinese) about the problem.
Workaround
If it does now work other way, you can always use the following ugly workaround.
You can force Vue to destroy the mindmap using v-if and recreate it again from scratch.
Here is the sample how to achieve it
<script setup>
import { ref, nextTick } from 'vue'
import mindmap from 'vue3-mindmap'
const data = ref([{ 'name': 'Old Data' }])
function updateData() {
data.value = [];
nextTick(() => {
data.value = [{ 'name': 'New Data' }];
})
}
</script>
<template>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue3-mindmap#0.5.12/dist/style.css" media="screen" />
<mindmap v-if="data.length > 0" v-model="data" :edit=true :add-node-btn=true></mindmap>
<div >{{ data }} </div>
<button #click="updateData">Update Data</button>
</template>
And the working playground
I am learning Meteor and I created a test app and added accounts-ui and accounts-password packages, then I inserted {{>loginButtons}} into main.html. However all I got on the page was an empty . I didn't see any errors in the console either. Is the widget broken, or am I missing something? In all tutorials I saw it was just working with no other action required, so I'm confused. I am using Blaze. Also, is Meteor a good choice of framework for building a social media app, or should I use something else?
I installed older version (14.22.1) of node.js as it's what Meteor recommends, I also installed accounts-google package instead of accounts-password to see if that one works, and it worked fine.
Main.js and Main.html
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Accounts } from 'meteor/accounts-base';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
Accounts.ui.config({
passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL'
});
<head>
<title>Test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
<nav class="main-nav">
<a>Test Link 1</a>
<a>Test Link 2</a>
<a>Test Link 3</a>
{{> loginButtons}}
<a>Test Link 4</a>
</nav>
{{> hello}}
{{> info}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li>Do the Tutorial</li>
<li>Follow the Guide</li>
<li>Read the Docs</li>
<li>Discussions</li>
</ul>
</template>
I want to render the pure HTML coming from some external source into react component. I saw few solutions where people are talking about some conversion tools (HTML to JSX) but I want to handle everything in my component so while mounting it will get the HTML response and that needs to render.
You can use dangerouslySetInnerHTML for this:
function createMarkup() { return {__html: 'First ยท Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
But as the method name suggests: you should be very sure of what you are doing there and the security implications it has.
This shouldn't be difficult to do . Assign your HTML to a div and then render it using {variable name} JSX allows you to do this and with ES6 integration you can also use class instead of className.
var Hello = React.createClass({
render: function() {
var htmlDiv = <div>How are you</div>
return <div>Hello {this.props.name}
{htmlDiv}
</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
I am using html code to create a dashboard where user can select a date and then based on selected date fetch some values from remote APIs and then show these values in the sheet.
I have html file something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<form>
<select name="Student" id="category">
<option value="" selected="selected">Select Student</option>
<option value="Abercrombie, Amber">Abercrombie, Amber(Gr 11)</option>
<option value="Yupa, Jason">Yupa, Jason(Gr 9)</option>
</select>
Date: <input type="text" id="datepicker" name="datepicker">
<input type="submit" value="Submit" onclick="myFunction()">
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("category").value;
var x2 = document.getElementById("datepicker").value;
//document.getElementById("demo").innerHTML = x;
google.script.run.functionToRunOnFormSubmit(x, x2);
google.script.host.close();
}
</script>
</body>
</html>
I have code.gs as follows:
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('HTML_myHtml')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(500)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Dashboard');
};
function functionToRunOnFormSubmit(fromInputForm, datevalue) {
Logger.log(fromInputForm);
Logger.log(datevalue);
SpreadsheetApp.getActiveSheet().getRange('B3').setValue(fromInputForm);
SpreadsheetApp.getActiveSheet().getRange('B4').setValue(datevalue);
};
When I select the function(fncOpenMyDialog()) from script-editor, It create a dashboard on the spreadsheet, Where I am able to select the date but as in functionToRunOnFormSubmit function I am logging the argument and then correspondingly setting the B3 and B4 cell values. It is not getting updated also It is not getting logged in the script editor.
The problem is you are calling "close" right after calling the google.script.run function which is an asynchronous ajax call.
In some cases it likely doesnt even give the browser enough time to start the ajax call or it gets cancelled because the page is closing. So sometimes it might reach the backend script, and sometimes wont.
take a look at the documentation and handle both success (close dialog from there) and failure (show error to the user)
https://developers.google.com/apps-script/guides/html/reference/run
While the documentation doesnt show it explicitly, you can hook both calls like this:
google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).yourCall();
iam total new at meteor and i try to build an Meteor application that should show the data another Mongo Database. The app it self can use its own metor database. So i found, that with MongoInternals.RemoteCollectionDriver() its to connect with my second database.
Next step is to make it work in the meteor tutorial. But i dont get back any data from the second database. For a test, simple arrays are returned correct from my function and placed right into the webapp. And the expression in .find() should be also ok. I tested it in the Mongo console.
If the connection to the second database is placed in if (Meteor.isClient) or outside of the client/server parts, the error "ReferenceError: MongoInternals is not defined" appears. If its set inside of if (Meteor.isServer) sometimes an exception appears in the console:
Exception in template helper: .ris_sessions#http://localhost:3000
/risdd_mongo.js?4fc7111851b4ed2182782e0a368b366cc4e89745:15:17
bindDataContext/<#http://localhost:3000/packages
/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2693:14
...... and a lot more messages
I cant see, why dont getting back any data from the second database.
Here are the sources:
Tasks = new Mongo.Collection("tasks");
//////////////////////
if (Meteor.isClient) {
Template.body.helpers({
tasks: function() {
return Tasks.find({}, {sort: {createdAt: -1 }});
}
,
s_sessions: function() {
return ris_sess.find( {},{description:1} ).fetch();
}
});
}
//////////////////////
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
var risdb_drv = new MongoInternals.RemoteCollectionDriver("mongodb://172.0.0.1:27017/ris");
var ris_sess = new Mongo.Collection("sessions", { _driver: risdb_drv });
});
}
<head>
<title>foo</title>
</head>
<body>
<div class="container">
<header>
<h1>todo list</h1>
<!-- add a FORM !-->
<form class="new-task">
<input type="text" name="text" placeholder="ad your task here" />
</form>
</header>
<ul>
{{#each tasks}}
{{>task}}
{{/each}}
{{#each ris_sessions}}
{{>ris_session}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
<template name="ris_session">
<li>{{description}}</li>
</template>
If you use local MongoDB server try change
mongodb://172.0.0.1:27017/ris
to
mongodb://127.0.0.1:27017/ris
Typo in IP: 127